feat(app): support to edit screenshot area
- relocate or resize the area - add anotations on the area
This commit is contained in:
+12
-5
@@ -62,17 +62,24 @@ async function retryHotkey() {
|
||||
}
|
||||
|
||||
async function onOverlayConfirm(rect: {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
rect: {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
annotations: Array<{
|
||||
tool: string
|
||||
color: string
|
||||
points: Array<{ x: number; y: number }>
|
||||
}>
|
||||
}) {
|
||||
// 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'
|
||||
overlayPayload.value = null
|
||||
try {
|
||||
await ConfirmRegion(rect)
|
||||
await ConfirmRegion(rect as any)
|
||||
} catch {
|
||||
/* Surfaced via upload:failure */
|
||||
}
|
||||
|
||||
@@ -1,142 +1,322 @@
|
||||
<script setup lang="ts">
|
||||
/*
|
||||
* CaptureOverlay — Snipaste-style region picker.
|
||||
*
|
||||
* Three layers, painted in order:
|
||||
* 1. Dark mask + selection : a single SVG that draws a 0.4 alpha
|
||||
* black rectangle over the whole screen
|
||||
* with the selection cut out via fill-rule
|
||||
* evenodd. The Wails window itself is
|
||||
* transparent, so the cut-out shows the live
|
||||
* desktop rather than a stale screenshot.
|
||||
* 2. Toolbar : floats just outside the bottom-right of
|
||||
* the selection rectangle (Snipaste rule).
|
||||
*
|
||||
* Interaction model (kept minimal per user choice):
|
||||
* • If no selection yet: mousedown drags out a new rectangle.
|
||||
* • If selection exists: mousedown INSIDE moves it; OUTSIDE re-drags.
|
||||
* • Esc / Cancel button → emit('cancel')
|
||||
* • Enter / Upload button → emit('confirm', rect)
|
||||
*/
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
/** Logical (CSS) width of the primary display. */
|
||||
width: number
|
||||
/** Logical (CSS) height of the primary display. */
|
||||
height: number
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'confirm', rect: { x: number; y: number; w: number; h: number }): void
|
||||
(e: 'cancel'): void
|
||||
}>()
|
||||
|
||||
// Selection rect stored in CSS pixels. null = nothing selected yet.
|
||||
interface Rect {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
type Tool = 'pen' | 'rect' | 'ellipse'
|
||||
interface Point {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
interface Annotation {
|
||||
tool: Tool
|
||||
color: string
|
||||
points: Point[]
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: 'confirm',
|
||||
payload: { rect: Rect; annotations: Annotation[] }
|
||||
): void
|
||||
(e: 'cancel'): void
|
||||
}>()
|
||||
|
||||
const rect = ref<Rect | null>(null)
|
||||
const annotations = ref<Annotation[]>([])
|
||||
const draftAnnotation = ref<Annotation | null>(null)
|
||||
const activeTool = ref<Tool>('pen')
|
||||
const activeColor = ref('#ef4444')
|
||||
const paletteOpen = ref(false)
|
||||
|
||||
// Drag state machine.
|
||||
type DragMode = 'idle' | 'creating' | 'moving'
|
||||
type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'
|
||||
type DragMode = 'idle' | 'creating' | 'moving' | 'resizing' | 'annotating'
|
||||
const dragMode = ref<DragMode>('idle')
|
||||
// For 'creating': the anchor where mousedown started.
|
||||
// For 'moving' : the mouse offset relative to the rect's top-left.
|
||||
const resizeHandle = ref<ResizeHandle | null>(null)
|
||||
const dragAnchor = ref({ x: 0, y: 0 })
|
||||
const startRect = ref<Rect | null>(null)
|
||||
|
||||
const colors = [
|
||||
'#ef4444',
|
||||
'#f97316',
|
||||
'#facc15',
|
||||
'#22c55e',
|
||||
'#06b6d4',
|
||||
'#3b82f6',
|
||||
'#8b5cf6',
|
||||
'#ec4899',
|
||||
'#ffffff',
|
||||
'#111827',
|
||||
]
|
||||
|
||||
// SVG path for "the entire screen with the selection rect cut out".
|
||||
// We rely on fill-rule:evenodd to subtract the inner rectangle.
|
||||
const maskPath = computed(() => {
|
||||
const outer = `M0 0 H${props.width} V${props.height} H0 Z`
|
||||
if (!rect.value) return outer
|
||||
const r = rect.value
|
||||
// Inner rect drawn in the OPPOSITE winding order so evenodd cuts it.
|
||||
const inner = `M${r.x} ${r.y} H${r.x + r.w} V${r.y + r.h} H${r.x} Z`
|
||||
return outer + ' ' + inner
|
||||
})
|
||||
|
||||
// Toolbar placement: anchor to bottom-right of the selection, but shove
|
||||
// it to the inside top-right if the selection is too close to the screen
|
||||
// edge to keep the buttons visible.
|
||||
const TOOLBAR_W = 220
|
||||
const TOOLBAR_H = 40
|
||||
const GAP = 8
|
||||
const toolbarPos = computed(() => {
|
||||
if (!rect.value) return null
|
||||
const r = rect.value
|
||||
let x = r.x + r.w - TOOLBAR_W
|
||||
let y = r.y + r.h + GAP
|
||||
if (y + TOOLBAR_H > props.height) {
|
||||
// No room below: put it inside the selection's bottom-right.
|
||||
y = r.y + r.h - TOOLBAR_H - GAP
|
||||
}
|
||||
if (x < 0) x = 0
|
||||
if (x + TOOLBAR_W > props.width) x = props.width - TOOLBAR_W
|
||||
return { x, y }
|
||||
const allAnnotations = computed(() => {
|
||||
return draftAnnotation.value
|
||||
? [...annotations.value, draftAnnotation.value]
|
||||
: annotations.value
|
||||
})
|
||||
|
||||
const insideRect = (px: number, py: number, r: Rect | null) => {
|
||||
const selectionAnnotations = computed(() => {
|
||||
if (!rect.value) return []
|
||||
return allAnnotations.value.map((annotation) => ({
|
||||
...annotation,
|
||||
points: annotation.points.map((point) => ({
|
||||
x: rect.value!.x + point.x,
|
||||
y: rect.value!.y + point.y,
|
||||
})),
|
||||
}))
|
||||
})
|
||||
|
||||
const sizeLabel = computed(() => {
|
||||
if (!rect.value) return ''
|
||||
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
|
||||
})
|
||||
|
||||
const rightToolbarPos = computed(() => {
|
||||
if (!rect.value) return null
|
||||
return placeToolbar(rect.value, 220, 40, 'right')
|
||||
})
|
||||
|
||||
const leftToolbarPos = computed(() => {
|
||||
if (!rect.value) return null
|
||||
return placeToolbar(rect.value, 190, 40, 'left')
|
||||
})
|
||||
|
||||
const handles = computed(() => {
|
||||
if (!rect.value) return []
|
||||
const r = rect.value
|
||||
const cx = r.x + r.w / 2
|
||||
const cy = r.y + r.h / 2
|
||||
return [
|
||||
{ name: 'nw', x: r.x, y: r.y },
|
||||
{ name: 'n', x: cx, y: r.y },
|
||||
{ name: 'ne', x: r.x + r.w, y: r.y },
|
||||
{ name: 'e', x: r.x + r.w, y: cy },
|
||||
{ name: 'se', x: r.x + r.w, y: r.y + r.h },
|
||||
{ name: 's', x: cx, y: r.y + r.h },
|
||||
{ name: 'sw', x: r.x, y: r.y + r.h },
|
||||
{ name: 'w', x: r.x, y: cy },
|
||||
] as Array<{ name: ResizeHandle; x: number; y: number }>
|
||||
})
|
||||
|
||||
function placeToolbar(
|
||||
r: Rect,
|
||||
toolbarW: number,
|
||||
toolbarH: number,
|
||||
side: 'left' | 'right'
|
||||
) {
|
||||
const gap = 8
|
||||
let x =
|
||||
side === 'right'
|
||||
? r.x + r.w - toolbarW
|
||||
: r.x
|
||||
let y = r.y + r.h + gap
|
||||
if (y + toolbarH > props.height) {
|
||||
y = r.y + r.h - toolbarH - gap
|
||||
}
|
||||
x = clamp(x, 0, props.width - toolbarW)
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
function clamp(value: number, min: number, max: number) {
|
||||
return Math.max(min, Math.min(value, max))
|
||||
}
|
||||
|
||||
function normalizeRect(a: Point, b: Point): Rect {
|
||||
return {
|
||||
x: clamp(Math.min(a.x, b.x), 0, props.width),
|
||||
y: clamp(Math.min(a.y, b.y), 0, props.height),
|
||||
w: Math.abs(b.x - a.x),
|
||||
h: Math.abs(b.y - a.y),
|
||||
}
|
||||
}
|
||||
|
||||
function pointFromEvent(e: MouseEvent): Point {
|
||||
return {
|
||||
x: clamp(e.clientX, 0, props.width),
|
||||
y: clamp(e.clientY, 0, props.height),
|
||||
}
|
||||
}
|
||||
|
||||
function localPoint(p: Point) {
|
||||
if (!rect.value) return p
|
||||
return {
|
||||
x: clamp(p.x - rect.value.x, 0, rect.value.w),
|
||||
y: clamp(p.y - rect.value.y, 0, rect.value.h),
|
||||
}
|
||||
}
|
||||
|
||||
function insideRect(p: Point, r: Rect | null) {
|
||||
if (!r) return false
|
||||
return px >= r.x && px <= r.x + r.w && py >= r.y && py <= r.y + r.h
|
||||
return p.x >= r.x && p.x <= r.x + r.w && p.y >= r.y && p.y <= r.y + r.h
|
||||
}
|
||||
|
||||
function hitHandle(p: Point): ResizeHandle | null {
|
||||
if (!rect.value) return null
|
||||
const tolerance = 9
|
||||
for (const handle of handles.value) {
|
||||
if (
|
||||
Math.abs(p.x - handle.x) <= tolerance &&
|
||||
Math.abs(p.y - handle.y) <= tolerance
|
||||
) {
|
||||
return handle.name
|
||||
}
|
||||
}
|
||||
const r = rect.value
|
||||
const nearX = p.x >= r.x - tolerance && p.x <= r.x + r.w + tolerance
|
||||
const nearY = p.y >= r.y - tolerance && p.y <= r.y + r.h + tolerance
|
||||
if (nearX && Math.abs(p.y - r.y) <= tolerance) return 'n'
|
||||
if (nearX && Math.abs(p.y - (r.y + r.h)) <= tolerance) return 's'
|
||||
if (nearY && Math.abs(p.x - r.x) <= tolerance) return 'w'
|
||||
if (nearY && Math.abs(p.x - (r.x + r.w)) <= tolerance) return 'e'
|
||||
return null
|
||||
}
|
||||
|
||||
function onMouseDown(e: MouseEvent) {
|
||||
if (e.button !== 0) return
|
||||
const px = e.clientX
|
||||
const py = e.clientY
|
||||
if (rect.value && insideRect(px, py, rect.value)) {
|
||||
// Move existing selection.
|
||||
paletteOpen.value = false
|
||||
const p = pointFromEvent(e)
|
||||
const handle = hitHandle(p)
|
||||
if (handle && rect.value) {
|
||||
dragMode.value = 'resizing'
|
||||
resizeHandle.value = handle
|
||||
dragAnchor.value = p
|
||||
startRect.value = { ...rect.value }
|
||||
return
|
||||
}
|
||||
if (rect.value && insideRect(p, rect.value)) {
|
||||
dragMode.value = 'moving'
|
||||
dragAnchor.value = { x: px - rect.value.x, y: py - rect.value.y }
|
||||
} else {
|
||||
// Start a new selection.
|
||||
dragMode.value = 'creating'
|
||||
dragAnchor.value = { x: px, y: py }
|
||||
rect.value = { x: px, y: py, w: 0, h: 0 }
|
||||
dragAnchor.value = { x: p.x - rect.value.x, y: p.y - rect.value.y }
|
||||
return
|
||||
}
|
||||
dragMode.value = 'creating'
|
||||
dragAnchor.value = p
|
||||
rect.value = { x: p.x, y: p.y, w: 0, h: 0 }
|
||||
annotations.value = []
|
||||
draftAnnotation.value = null
|
||||
}
|
||||
|
||||
function onSelectionMouseDown(e: MouseEvent) {
|
||||
if (e.button !== 0 || !rect.value) return
|
||||
e.stopPropagation()
|
||||
paletteOpen.value = false
|
||||
const p = pointFromEvent(e)
|
||||
const handle = hitHandle(p)
|
||||
if (handle) {
|
||||
dragMode.value = 'resizing'
|
||||
resizeHandle.value = handle
|
||||
dragAnchor.value = p
|
||||
startRect.value = { ...rect.value }
|
||||
return
|
||||
}
|
||||
dragMode.value = 'annotating'
|
||||
const local = localPoint(p)
|
||||
draftAnnotation.value = {
|
||||
tool: activeTool.value,
|
||||
color: activeColor.value,
|
||||
points: [local],
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove(e: MouseEvent) {
|
||||
if (dragMode.value === 'idle') return
|
||||
const px = e.clientX
|
||||
const py = e.clientY
|
||||
const p = pointFromEvent(e)
|
||||
if (dragMode.value === 'creating') {
|
||||
const ax = dragAnchor.value.x
|
||||
const ay = dragAnchor.value.y
|
||||
rect.value = {
|
||||
x: Math.min(ax, px),
|
||||
y: Math.min(ay, py),
|
||||
w: Math.abs(px - ax),
|
||||
h: Math.abs(py - ay),
|
||||
}
|
||||
rect.value = normalizeRect(dragAnchor.value, p)
|
||||
} else if (dragMode.value === 'moving' && rect.value) {
|
||||
let nx = px - dragAnchor.value.x
|
||||
let ny = py - dragAnchor.value.y
|
||||
// Clamp inside the screen so the selection cannot be dragged off-canvas.
|
||||
nx = Math.max(0, Math.min(nx, props.width - rect.value.w))
|
||||
ny = Math.max(0, Math.min(ny, props.height - rect.value.h))
|
||||
rect.value = { ...rect.value, x: nx, y: ny }
|
||||
rect.value = {
|
||||
...rect.value,
|
||||
x: clamp(p.x - dragAnchor.value.x, 0, props.width - rect.value.w),
|
||||
y: clamp(p.y - dragAnchor.value.y, 0, props.height - rect.value.h),
|
||||
}
|
||||
} else if (dragMode.value === 'resizing') {
|
||||
resizeSelection(p)
|
||||
} else if (dragMode.value === 'annotating' && draftAnnotation.value) {
|
||||
if (activeTool.value === 'pen') {
|
||||
draftAnnotation.value.points.push(localPoint(p))
|
||||
} else {
|
||||
draftAnnotation.value.points = [
|
||||
draftAnnotation.value.points[0],
|
||||
localPoint(p),
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
if (dragMode.value === 'creating' && rect.value) {
|
||||
// Discard zero/tiny selections — the user probably clicked accidentally.
|
||||
if (rect.value.w < 4 || rect.value.h < 4) {
|
||||
rect.value = null
|
||||
}
|
||||
}
|
||||
if (dragMode.value === 'annotating' && draftAnnotation.value) {
|
||||
if (draftAnnotation.value.points.length > 0) {
|
||||
annotations.value.push(draftAnnotation.value)
|
||||
}
|
||||
draftAnnotation.value = null
|
||||
}
|
||||
dragMode.value = 'idle'
|
||||
resizeHandle.value = null
|
||||
startRect.value = null
|
||||
}
|
||||
|
||||
function resizeSelection(p: Point) {
|
||||
if (!startRect.value || !resizeHandle.value) return
|
||||
const r = startRect.value
|
||||
let left = r.x
|
||||
let top = r.y
|
||||
let right = r.x + r.w
|
||||
let bottom = r.y + r.h
|
||||
if (resizeHandle.value.includes('w')) left = p.x
|
||||
if (resizeHandle.value.includes('e')) right = p.x
|
||||
if (resizeHandle.value.includes('n')) top = p.y
|
||||
if (resizeHandle.value.includes('s')) bottom = p.y
|
||||
|
||||
left = clamp(left, 0, props.width)
|
||||
right = clamp(right, 0, props.width)
|
||||
top = clamp(top, 0, props.height)
|
||||
bottom = clamp(bottom, 0, props.height)
|
||||
rect.value = {
|
||||
x: Math.min(left, right),
|
||||
y: Math.min(top, bottom),
|
||||
w: Math.abs(right - left),
|
||||
h: Math.abs(bottom - top),
|
||||
}
|
||||
}
|
||||
|
||||
function selectTool(tool: Tool) {
|
||||
activeTool.value = tool
|
||||
}
|
||||
|
||||
function chooseColor(color: string) {
|
||||
activeColor.value = color
|
||||
paletteOpen.value = false
|
||||
}
|
||||
|
||||
function onConfirm() {
|
||||
if (!rect.value) return
|
||||
emit('confirm', { ...rect.value })
|
||||
emit('confirm', {
|
||||
rect: { ...rect.value },
|
||||
annotations: annotations.value,
|
||||
})
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
@@ -153,18 +333,16 @@ function onKeydown(e: KeyboardEvent) {
|
||||
}
|
||||
}
|
||||
|
||||
function undoAnnotation() {
|
||||
annotations.value.pop()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
})
|
||||
|
||||
// Selection size pill (Snipaste shows "WxH" near the top-left of selection).
|
||||
const sizeLabel = computed(() => {
|
||||
if (!rect.value) return ''
|
||||
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -176,7 +354,6 @@ const sizeLabel = computed(() => {
|
||||
@mouseup="onMouseUp"
|
||||
@contextmenu.prevent="onCancel"
|
||||
>
|
||||
<!-- Layer 1: mask with selection cut out over the live desktop -->
|
||||
<svg
|
||||
class="mask"
|
||||
:width="width"
|
||||
@@ -185,21 +362,78 @@ const sizeLabel = computed(() => {
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path :d="maskPath" fill="rgba(0,0,0,0.45)" fill-rule="evenodd" />
|
||||
<!-- Selection border, drawn separately so it stays crisp. -->
|
||||
<rect
|
||||
v-if="rect"
|
||||
:x="rect.x"
|
||||
:y="rect.y"
|
||||
:width="rect.w"
|
||||
:height="rect.h"
|
||||
fill="none"
|
||||
fill="transparent"
|
||||
stroke="#3b82f6"
|
||||
stroke-width="1.5"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
<g v-for="(annotation, index) in selectionAnnotations" :key="index">
|
||||
<polyline
|
||||
v-if="annotation.tool === 'pen'"
|
||||
:points="annotation.points.map((p) => `${p.x},${p.y}`).join(' ')"
|
||||
:stroke="annotation.color"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"
|
||||
/>
|
||||
<rect
|
||||
v-else-if="annotation.tool === 'rect' && annotation.points.length >= 2"
|
||||
:x="Math.min(annotation.points[0].x, annotation.points[1].x)"
|
||||
:y="Math.min(annotation.points[0].y, annotation.points[1].y)"
|
||||
:width="Math.abs(annotation.points[1].x - annotation.points[0].x)"
|
||||
:height="Math.abs(annotation.points[1].y - annotation.points[0].y)"
|
||||
:stroke="annotation.color"
|
||||
stroke-width="3"
|
||||
fill="none"
|
||||
/>
|
||||
<ellipse
|
||||
v-else-if="annotation.tool === 'ellipse' && annotation.points.length >= 2"
|
||||
:cx="(annotation.points[0].x + annotation.points[1].x) / 2"
|
||||
:cy="(annotation.points[0].y + annotation.points[1].y) / 2"
|
||||
:rx="Math.abs(annotation.points[1].x - annotation.points[0].x) / 2"
|
||||
:ry="Math.abs(annotation.points[1].y - annotation.points[0].y) / 2"
|
||||
:stroke="annotation.color"
|
||||
stroke-width="3"
|
||||
fill="none"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Layer 3a: size readout floating above the selection -->
|
||||
<div
|
||||
v-if="rect"
|
||||
class="selection-hit-area"
|
||||
:style="{
|
||||
left: rect.x + 'px',
|
||||
top: rect.y + 'px',
|
||||
width: rect.w + 'px',
|
||||
height: rect.h + 'px',
|
||||
}"
|
||||
@mousedown="onSelectionMouseDown"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-for="handle in handles"
|
||||
:key="handle.name"
|
||||
class="resize-handle"
|
||||
:class="`handle-${handle.name}`"
|
||||
:style="{ left: handle.x + 'px', top: handle.y + 'px' }"
|
||||
@mousedown.stop="
|
||||
(event) => {
|
||||
dragMode = 'resizing'
|
||||
resizeHandle = handle.name
|
||||
dragAnchor = pointFromEvent(event)
|
||||
startRect = rect ? { ...rect } : null
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="rect && rect.w > 0 && rect.h > 0"
|
||||
class="size-pill"
|
||||
@@ -211,11 +445,80 @@ const sizeLabel = computed(() => {
|
||||
{{ sizeLabel }}
|
||||
</div>
|
||||
|
||||
<!-- Layer 3b: action toolbar -->
|
||||
<div
|
||||
v-if="toolbarPos && rect && rect.w >= 4 && rect.h >= 4"
|
||||
class="toolbar"
|
||||
:style="{ left: toolbarPos.x + 'px', top: toolbarPos.y + 'px' }"
|
||||
v-if="leftToolbarPos && rect && rect.w >= 4 && rect.h >= 4"
|
||||
class="toolbar mark-toolbar"
|
||||
:style="{ left: leftToolbarPos.x + 'px', top: leftToolbarPos.y + 'px' }"
|
||||
@mousedown.stop
|
||||
>
|
||||
<button
|
||||
class="icon-btn"
|
||||
:class="{ active: activeTool === 'pen' }"
|
||||
title="划线标记"
|
||||
@click="selectTool('pen')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 20c4-1 6-3 8-7l5-9 3 2-5 9c-2 4-5 6-9 7z" />
|
||||
<path d="M14 5l5 3" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn"
|
||||
:class="{ active: activeTool === 'rect' }"
|
||||
title="矩形标记"
|
||||
@click="selectTool('rect')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect x="5" y="6" width="14" height="12" rx="1.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn"
|
||||
:class="{ active: activeTool === 'ellipse' }"
|
||||
title="圆形标记"
|
||||
@click="selectTool('ellipse')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="color-wrap">
|
||||
<button
|
||||
class="icon-btn color-btn"
|
||||
title="选择标记颜色"
|
||||
@click="paletteOpen = !paletteOpen"
|
||||
>
|
||||
<span :style="{ background: activeColor }" />
|
||||
</button>
|
||||
<div v-if="paletteOpen" class="palette">
|
||||
<button
|
||||
v-for="color in colors"
|
||||
:key="color"
|
||||
class="swatch"
|
||||
:class="{ selected: color === activeColor }"
|
||||
:style="{ background: color }"
|
||||
:title="color"
|
||||
@click="chooseColor(color)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="icon-btn"
|
||||
:disabled="annotations.length === 0"
|
||||
title="撤销上一处标记"
|
||||
@click="undoAnnotation"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 7H4v5" />
|
||||
<path d="M4 7c3-3 8-4 12-1 4 3 4 9 0 12-2 1-4 2-7 1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="rightToolbarPos && rect && rect.w >= 4 && rect.h >= 4"
|
||||
class="toolbar action-toolbar"
|
||||
:style="{ left: rightToolbarPos.x + 'px', top: rightToolbarPos.y + 'px' }"
|
||||
@mousedown.stop
|
||||
>
|
||||
<button class="btn cancel" @click="onCancel" title="Esc">Cancel</button>
|
||||
@@ -224,7 +527,6 @@ const sizeLabel = computed(() => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hint shown before the user has dragged anything. -->
|
||||
<div v-if="!rect" class="hint">
|
||||
Drag to select an area · Esc to cancel
|
||||
</div>
|
||||
@@ -248,6 +550,38 @@ const sizeLabel = computed(() => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selection-hit-area {
|
||||
position: absolute;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid #fff;
|
||||
background: #3b82f6;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
|
||||
z-index: 3;
|
||||
}
|
||||
.handle-n,
|
||||
.handle-s {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.handle-e,
|
||||
.handle-w {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.handle-nw,
|
||||
.handle-se {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.handle-ne,
|
||||
.handle-sw {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.size-pill {
|
||||
position: absolute;
|
||||
padding: 2px 8px;
|
||||
@@ -258,7 +592,6 @@ const sizeLabel = computed(() => {
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@@ -266,11 +599,26 @@ const sizeLabel = computed(() => {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
background: rgba(28, 28, 32, 0.94);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.mark-toolbar {
|
||||
width: 190px;
|
||||
}
|
||||
.action-toolbar {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.icon-btn,
|
||||
.swatch {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -280,8 +628,6 @@ const sizeLabel = computed(() => {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
.btn.cancel {
|
||||
background: transparent;
|
||||
@@ -298,6 +644,69 @@ const sizeLabel = computed(() => {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
color: #d1d5db;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-btn:hover:not(:disabled),
|
||||
.icon-btn.active {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.icon-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.color-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.color-btn span {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.palette {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 36px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 22px);
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
background: rgba(28, 28, 32, 0.96);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.swatch {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.swatch.selected {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -309,6 +718,5 @@ const sizeLabel = computed(() => {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 999px;
|
||||
pointer-events: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user