mamamiyear/SnapGo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align text annotations in captures

Browse Source
This commit is contained in:
漂泊旅人
2026-07-08 14:46:57 +08:00
parent f90612976f
commit 7b290d9300
7 changed files with 533 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+23 -65
View File
@@ -77,6 +77,24 @@ interface OverlayPayload {
}
const overlayPayload = ref<OverlayPayload | null>(null)
interface OverlayAnnotation {
tool: string
color: string
points: Array<{ x: number; y: number }>
text?: string
fontSize?: number
}
interface OverlayResult {
rect: {
x: number
y: number
w: number
h: number
}
annotations: OverlayAnnotation[]
}
const capturing = ref(false)
const toast = ref<{ kind: 'success' | 'error'; text: string } | null>(null)
@@ -121,19 +139,7 @@ async function retryHotkey() {
}
}
async function onOverlayConfirm(rect: {
rect: {
x: number
y: number
w: number
h: number
}
annotations: Array<{
tool: string
color: string
points: Array<{ x: number; y: number }>
}>
}) {
async function onOverlayConfirm(rect: OverlayResult) {
// Optimistically swap back so the window does not visually lag the
// Go-side hide. If upload fails, the toast surfaces the reason.
mode.value = 'settings'
@@ -145,19 +151,7 @@ async function onOverlayConfirm(rect: {
}
}
async function onOverlayCopy(rect: {
rect: {
x: number
y: number
w: number
h: number
}
annotations: Array<{
tool: string
color: string
points: Array<{ x: number; y: number }>
}>
}) {
async function onOverlayCopy(rect: OverlayResult) {
mode.value = 'settings'
overlayPayload.value = null
try {
@@ -167,19 +161,7 @@ async function onOverlayCopy(rect: {
}
}
async function onOverlaySave(rect: {
rect: {
x: number
y: number
w: number
h: number
}
annotations: Array<{
tool: string
color: string
points: Array<{ x: number; y: number }>
}>
}) {
async function onOverlaySave(rect: OverlayResult) {
mode.value = 'settings'
overlayPayload.value = null
try {
@@ -189,19 +171,7 @@ async function onOverlaySave(rect: {
}
}
async function onOverlaySaveRemote(rect: {
rect: {
x: number
y: number
w: number
h: number
}
annotations: Array<{
tool: string
color: string
points: Array<{ x: number; y: number }>
}>
}) {
async function onOverlaySaveRemote(rect: OverlayResult) {
mode.value = 'settings'
overlayPayload.value = null
try {
@@ -211,19 +181,7 @@ async function onOverlaySaveRemote(rect: {
}
}
async function onOverlaySummarize(rect: {
rect: {
x: number
y: number
w: number
h: number
}
annotations: Array<{
tool: string
color: string
points: Array<{ x: number; y: number }>
}>
}) {
async function onOverlaySummarize(rect: OverlayResult) {
mode.value = 'settings'
overlayPayload.value = null
try {
frontend/src/views/CaptureOverlay.vue
+196 -21
View File
@@ -33,6 +33,7 @@ interface Annotation {
color: string
points: Point[]
text?: string
fontSize?: number
}
const emit = defineEmits<{
@@ -65,15 +66,31 @@ const draftAnnotation = ref<Annotation | null>(null)
const activeTool = ref<Tool>('pen')
const activeColor = ref('#ef4444')
const paletteOpen = ref(false)
const textDraft = ref<{ point: Point; value: string } | null>(null)
const textDraft = ref<{
point: Point
value: string
color: string
index: number | null
} | null>(null)
const textInputRef = ref<HTMLInputElement | null>(null)
const selectedTextIndex = ref<number | null>(null)
type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'
type DragMode = 'idle' | 'creating' | 'moving' | 'resizing' | 'annotating'
type DragMode =
| 'idle'
| 'creating'
| 'moving'
| 'resizing'
| 'annotating'
| 'moving-text'
const dragMode = ref<DragMode>('idle')
const resizeHandle = ref<ResizeHandle | null>(null)
const dragAnchor = ref({ x: 0, y: 0 })
const startRect = ref<Rect | null>(null)
const textDragStartPoint = ref<Point | null>(null)
const textDragOriginalPoint = ref<Point | null>(null)
const TEXT_FONT_SIZE = 20
const colors = [
'#ef4444',
@@ -207,6 +224,77 @@ function insideRect(p: Point, r: Rect | null) {
return p.x >= r.x && p.x <= r.x + r.w && p.y >= r.y && p.y <= r.y + r.h
}
let measureCanvas: HTMLCanvasElement | null = null
function textFont(fontSize = TEXT_FONT_SIZE) {
return `600 ${fontSize}px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif`
}
function textSize(annotation: Pick<Annotation, 'text' | 'fontSize'>) {
const fontSize = annotation.fontSize || TEXT_FONT_SIZE
const lines = (annotation.text || ' ').split('\n')
if (typeof document === 'undefined') {
return {
w: Math.max(1, ...lines.map((line) => line.length * fontSize)),
h: Math.max(fontSize * 1.2, lines.length * fontSize * 1.2),
}
}
measureCanvas ||= document.createElement('canvas')
const ctx = measureCanvas.getContext('2d')
if (!ctx) {
return {
w: Math.max(1, ...lines.map((line) => line.length * fontSize)),
h: Math.max(fontSize * 1.2, lines.length * fontSize * 1.2),
}
}
ctx.font = textFont(fontSize)
return {
w: Math.ceil(Math.max(1, ...lines.map((line) => ctx.measureText(line || ' ').width))),
h: Math.ceil(Math.max(fontSize * 1.2, lines.length * fontSize * 1.2)),
}
}
function textRenderBox(annotation: Annotation) {
const point = annotation.points[0] || { x: 0, y: 0 }
const size = textSize(annotation)
return {
x: point.x - 4,
y: point.y - 3,
w: size.w + 8,
h: size.h + 6,
}
}
function textAnnotationIndexAtPoint(p: Point) {
if (!rect.value) return null
for (let i = annotations.value.length - 1; i >= 0; i--) {
const annotation = annotations.value[i]
if (annotation.tool !== 'text' || annotation.points.length === 0) continue
const point = annotation.points[0]
const size = textSize(annotation)
const x = rect.value.x + point.x
const y = rect.value.y + point.y
if (
p.x >= x - 6 &&
p.x <= x + size.w + 6 &&
p.y >= y - 6 &&
p.y <= y + size.h + 6
) {
return i
}
}
return null
}
function clampTextLocalPoint(point: Point, annotation: Pick<Annotation, 'text' | 'fontSize'>) {
if (!rect.value) return point
const size = textSize(annotation)
return {
x: clamp(point.x, 0, Math.max(0, rect.value.w - size.w)),
y: clamp(point.y, 0, Math.max(0, rect.value.h - size.h)),
}
}
function hitHandle(p: Point): ResizeHandle | null {
if (!rect.value) return null
const tolerance = 9
@@ -232,6 +320,8 @@ function onMouseDown(e: MouseEvent) {
if (e.button !== 0) return
commitTextDraft()
paletteOpen.value = false
textDragStartPoint.value = null
textDragOriginalPoint.value = null
const p = pointFromEvent(e)
const handle = hitHandle(p)
if (handle && rect.value) {
@@ -250,15 +340,32 @@ function onMouseDown(e: MouseEvent) {
dragAnchor.value = p
rect.value = { x: p.x, y: p.y, w: 0, h: 0 }
annotations.value = []
selectedTextIndex.value = null
draftAnnotation.value = null
}
function onSelectionMouseDown(e: MouseEvent) {
if (e.button !== 0 || !rect.value) return
e.stopPropagation()
commitTextDraft()
paletteOpen.value = false
const p = pointFromEvent(e)
const hitTextIndex = textAnnotationIndexAtPoint(p)
if (hitTextIndex !== null) {
selectedTextIndex.value = hitTextIndex
const annotation = annotations.value[hitTextIndex]
if (e.detail >= 2) {
beginTextAnnotation(annotation.points[0], hitTextIndex)
return
}
dragMode.value = 'moving-text'
textDragStartPoint.value = localPoint(p)
textDragOriginalPoint.value = { ...annotation.points[0] }
return
}
selectedTextIndex.value = null
if (activeTool.value === 'text') {
beginTextAnnotation(localPoint(pointFromEvent(e)))
beginTextAnnotation(localPoint(p))
return
}
if (e.detail >= 2) {
@@ -266,7 +373,6 @@ function onSelectionMouseDown(e: MouseEvent) {
onCopy()
return
}
const p = pointFromEvent(e)
const handle = hitHandle(p)
if (handle) {
dragMode.value = 'resizing'
@@ -297,6 +403,21 @@ function onMouseMove(e: MouseEvent) {
}
} else if (dragMode.value === 'resizing') {
resizeSelection(p)
} else if (
dragMode.value === 'moving-text' &&
selectedTextIndex.value !== null &&
textDragStartPoint.value &&
textDragOriginalPoint.value
) {
const annotation = annotations.value[selectedTextIndex.value]
if (annotation?.tool === 'text') {
const local = localPoint(p)
const next = {
x: textDragOriginalPoint.value.x + local.x - textDragStartPoint.value.x,
y: textDragOriginalPoint.value.y + local.y - textDragStartPoint.value.y,
}
annotation.points[0] = clampTextLocalPoint(next, annotation)
}
} else if (dragMode.value === 'annotating' && draftAnnotation.value) {
if (activeTool.value === 'pen') {
draftAnnotation.value.points.push(localPoint(p))
@@ -324,6 +445,8 @@ function onMouseUp() {
dragMode.value = 'idle'
resizeHandle.value = null
startRect.value = null
textDragStartPoint.value = null
textDragOriginalPoint.value = null
}
function resizeSelection(p: Point) {
@@ -417,6 +540,12 @@ function onKeydown(e: KeyboardEvent) {
function undoAnnotation() {
cancelTextDraft()
annotations.value.pop()
if (
selectedTextIndex.value !== null &&
selectedTextIndex.value >= annotations.value.length
) {
selectedTextIndex.value = null
}
}
function removeSinglePointAnnotation() {
@@ -426,11 +555,18 @@ function removeSinglePointAnnotation() {
}
}
function beginTextAnnotation(point: Point) {
function beginTextAnnotation(point: Point, index: number | null = null) {
commitTextDraft()
dragMode.value = 'idle'
draftAnnotation.value = null
textDraft.value = { point, value: '' }
const existing = index !== null ? annotations.value[index] : null
const color = existing?.color || activeColor.value
textDraft.value = {
point: clampTextLocalPoint(point, existing || { text: '', fontSize: TEXT_FONT_SIZE }),
value: existing?.text || '',
color,
index,
}
void nextTick(() => {
textInputRef.value?.focus()
textInputRef.value?.select()
@@ -440,13 +576,31 @@ function beginTextAnnotation(point: Point) {
function commitTextDraft() {
if (!textDraft.value) return
const text = textDraft.value.value.trim()
if (text !== '') {
const draft = textDraft.value
if (draft.index !== null) {
const target = annotations.value[draft.index]
if (target?.tool === 'text') {
if (text !== '') {
target.points = [clampTextLocalPoint(draft.point, { text, fontSize: target.fontSize || TEXT_FONT_SIZE })]
target.text = text
target.color = draft.color
target.fontSize = target.fontSize || TEXT_FONT_SIZE
selectedTextIndex.value = draft.index
} else {
annotations.value.splice(draft.index, 1)
selectedTextIndex.value = null
}
}
} else if (text !== '') {
const point = clampTextLocalPoint(draft.point, { text, fontSize: TEXT_FONT_SIZE })
annotations.value.push({
tool: 'text',
color: activeColor.value,
points: [textDraft.value.point],
color: draft.color,
points: [point],
text,
fontSize: TEXT_FONT_SIZE,
})
selectedTextIndex.value = annotations.value.length - 1
}
textDraft.value = null
}
@@ -531,17 +685,27 @@ onUnmounted(() => {
stroke-width="3"
fill="none"
/>
<text
v-else-if="annotation.tool === 'text' && annotation.points.length >= 1"
:x="annotation.points[0].x"
:y="annotation.points[0].y"
:fill="annotation.color"
font-size="20"
font-weight="600"
dominant-baseline="hanging"
>
{{ annotation.text }}
</text>
<template v-else-if="annotation.tool === 'text' && annotation.points.length >= 1">
<rect
v-if="selectedTextIndex === index && index < annotations.length"
class="text-selection-box"
:x="textRenderBox(annotation).x"
:y="textRenderBox(annotation).y"
:width="textRenderBox(annotation).w"
:height="textRenderBox(annotation).h"
/>
<text
class="annotation-text"
:x="annotation.points[0].x"
:y="annotation.points[0].y"
:fill="annotation.color"
:font-size="annotation.fontSize || TEXT_FONT_SIZE"
font-weight="600"
dominant-baseline="hanging"
>
{{ annotation.text }}
</text>
</template>
</g>
</svg>
@@ -565,7 +729,7 @@ onUnmounted(() => {
:style="{
left: rect.x + textDraft.point.x + 'px',
top: rect.y + textDraft.point.y + 'px',
color: activeColor,
color: textDraft.color,
}"
spellcheck="false"
@mousedown.stop
@@ -761,6 +925,17 @@ onUnmounted(() => {
pointer-events: none;
}
.annotation-text {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.text-selection-box {
fill: transparent;
stroke: #3b82f6;
stroke-width: 1.5;
stroke-dasharray: 4 3;
}
.selection-hit-area {
position: absolute;
cursor: crosshair;