339 lines
10 KiB
Vue
339 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import type { RenderedAnnotation } from './types'
|
|
import { ANNOTATION_TEXT_FONT, ANNOTATION_TEXT_LINE_HEIGHT } from './markup'
|
|
|
|
interface Props {
|
|
annotations: RenderedAnnotation[]
|
|
visible: boolean
|
|
interactive?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
interactive: true,
|
|
})
|
|
const emit = defineEmits<{
|
|
(event: 'contextmenu', annotationId: string, mouseEvent: MouseEvent): void
|
|
(event: 'drag-start'): void
|
|
(event: 'move', annotationId: string, offsetX: number, offsetY: number): void
|
|
(event: 'drag-end', cancelled?: boolean): void
|
|
}>()
|
|
|
|
interface DragState {
|
|
annotationId: string
|
|
pointerId: number
|
|
startX: number
|
|
startY: number
|
|
deltaX: number
|
|
deltaY: number
|
|
initialOffsetX: number
|
|
initialOffsetY: number
|
|
moved: boolean
|
|
target: SVGGElement
|
|
}
|
|
|
|
const dragOffsets = ref(new Map<string, { x: number; y: number }>())
|
|
const pendingCommittedOffset = ref<{
|
|
annotationId: string
|
|
x: number
|
|
y: number
|
|
} | null>(null)
|
|
let dragState: DragState | null = null
|
|
let dragFrame: number | null = null
|
|
let lastDragEndTimestamp = 0 // 使用时间戳替代 suppressContextMenu 布尔标志
|
|
|
|
// 缓存 draggedBox 结果以避免在每次渲染时重复计算
|
|
const draggedBoxCache = computed(() => {
|
|
const cache = new Map<string, RenderedAnnotation['box']>()
|
|
props.annotations.forEach((rendered) => {
|
|
const offset = dragOffsets.value.get(rendered.annotation.id)
|
|
if (!offset) {
|
|
cache.set(rendered.annotation.id, rendered.box)
|
|
} else {
|
|
cache.set(rendered.annotation.id, {
|
|
...rendered.box,
|
|
x: rendered.box.x + offset.x,
|
|
y: rendered.box.y + offset.y,
|
|
lineEndX: rendered.box.lineEndX + offset.x,
|
|
lineEndY: rendered.box.lineEndY + offset.y,
|
|
})
|
|
}
|
|
})
|
|
return cache
|
|
})
|
|
|
|
function draggedBox(rendered: RenderedAnnotation): RenderedAnnotation['box'] {
|
|
return draggedBoxCache.value.get(rendered.annotation.id) ?? rendered.box
|
|
}
|
|
|
|
function flushDragFrame() {
|
|
dragFrame = null
|
|
if (!dragState) return
|
|
dragOffsets.value = new Map(dragOffsets.value).set(dragState.annotationId, {
|
|
x: dragState.deltaX,
|
|
y: dragState.deltaY,
|
|
})
|
|
}
|
|
|
|
function scheduleDragFrame() {
|
|
if (dragFrame !== null) return
|
|
dragFrame = requestAnimationFrame(flushDragFrame)
|
|
}
|
|
|
|
function handlePointerDown(rendered: RenderedAnnotation, event: PointerEvent) {
|
|
if (!props.interactive || event.button !== 0 || dragState) return
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
const target = event.currentTarget as SVGGElement | null
|
|
if (!target || typeof target.setPointerCapture !== 'function') return
|
|
target.setPointerCapture(event.pointerId)
|
|
emit('drag-start')
|
|
const currentDragOffset = dragOffsets.value.get(rendered.annotation.id)
|
|
const initialOffsetX =
|
|
(Number.isFinite(rendered.annotation.labelOffsetX) ? rendered.annotation.labelOffsetX! : 0) +
|
|
(currentDragOffset?.x ?? 0)
|
|
const initialOffsetY =
|
|
(Number.isFinite(rendered.annotation.labelOffsetY) ? rendered.annotation.labelOffsetY! : 0) +
|
|
(currentDragOffset?.y ?? 0)
|
|
dragState = {
|
|
annotationId: rendered.annotation.id,
|
|
pointerId: event.pointerId,
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
deltaX: 0,
|
|
deltaY: 0,
|
|
initialOffsetX,
|
|
initialOffsetY,
|
|
moved: false,
|
|
target,
|
|
}
|
|
}
|
|
|
|
function handlePointerMove(event: PointerEvent) {
|
|
if (!props.interactive) return
|
|
event.stopPropagation()
|
|
if (!dragState || event.pointerId !== dragState.pointerId) return
|
|
const deltaX = event.clientX - dragState.startX
|
|
const deltaY = event.clientY - dragState.startY
|
|
dragState.deltaX = deltaX
|
|
dragState.deltaY = deltaY
|
|
dragState.moved = dragState.moved || Math.hypot(deltaX, deltaY) >= 2
|
|
if (dragState.moved) scheduleDragFrame()
|
|
}
|
|
|
|
function finishPointerDrag(event: PointerEvent) {
|
|
if (!props.interactive) return
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if (!dragState || event.pointerId !== dragState.pointerId) return
|
|
const state = dragState
|
|
const finalDeltaX = event.clientX - state.startX
|
|
const finalDeltaY = event.clientY - state.startY
|
|
state.deltaX = finalDeltaX
|
|
state.deltaY = finalDeltaY
|
|
// Recalculate moved based on final position to avoid spurious move events
|
|
state.moved = Math.hypot(finalDeltaX, finalDeltaY) >= 2
|
|
state.moved = state.moved || Math.hypot(finalDeltaX, finalDeltaY) >= 2
|
|
if (dragFrame !== null) {
|
|
cancelAnimationFrame(dragFrame)
|
|
dragFrame = null
|
|
}
|
|
if (state.moved) {
|
|
dragOffsets.value = new Map(dragOffsets.value).set(state.annotationId, {
|
|
x: state.deltaX,
|
|
y: state.deltaY,
|
|
})
|
|
const offsetX = state.initialOffsetX + state.deltaX
|
|
const offsetY = state.initialOffsetY + state.deltaY
|
|
pendingCommittedOffset.value = { annotationId: state.annotationId, x: offsetX, y: offsetY }
|
|
dragState = null
|
|
// 使用时间戳记录拖动结束，用于在 contextmenu 中检查
|
|
lastDragEndTimestamp = event.timeStamp
|
|
emit('move', state.annotationId, offsetX, offsetY)
|
|
} else {
|
|
dragState = null
|
|
}
|
|
if (state.target.hasPointerCapture(state.pointerId)) {
|
|
state.target.releasePointerCapture(state.pointerId)
|
|
}
|
|
// Don't modify dragOffsets for non-moved drags to preserve persisted offsets
|
|
emit('drag-end', false)
|
|
}
|
|
|
|
watch(
|
|
() => props.annotations,
|
|
(annotations) => {
|
|
const pending = pendingCommittedOffset.value
|
|
// 优化：仅在有待处理的提交偏移时才执行
|
|
if (!pending) return
|
|
const annotation = annotations.find((item) => item.annotation.id === pending.annotationId)
|
|
if (!annotation) return
|
|
const offsetX = Number.isFinite(annotation.annotation.labelOffsetX)
|
|
? annotation.annotation.labelOffsetX!
|
|
: 0
|
|
const offsetY = Number.isFinite(annotation.annotation.labelOffsetY)
|
|
? annotation.annotation.labelOffsetY!
|
|
: 0
|
|
if (offsetX === pending.x && offsetY === pending.y) {
|
|
dragOffsets.value = new Map(dragOffsets.value).set(pending.annotationId, { x: 0, y: 0 })
|
|
pendingCommittedOffset.value = null
|
|
}
|
|
},
|
|
)
|
|
|
|
function handlePointerCancel(event: PointerEvent) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if (!dragState || event.pointerId !== dragState.pointerId) return
|
|
cancelActiveDrag()
|
|
}
|
|
|
|
function cancelActiveDrag() {
|
|
if (!dragState) return
|
|
const state = dragState
|
|
dragState = null
|
|
dragOffsets.value = new Map(dragOffsets.value).set(state.annotationId, { x: 0, y: 0 })
|
|
if (dragFrame !== null) {
|
|
cancelAnimationFrame(dragFrame)
|
|
dragFrame = null
|
|
}
|
|
if (state.target.hasPointerCapture(state.pointerId)) {
|
|
state.target.releasePointerCapture(state.pointerId)
|
|
}
|
|
emit('drag-end', true)
|
|
}
|
|
|
|
watch(
|
|
() => props.interactive,
|
|
(interactive) => {
|
|
if (!interactive) cancelActiveDrag()
|
|
},
|
|
)
|
|
|
|
function handleContextMenu(annotationId: string, event: MouseEvent) {
|
|
if (!props.interactive) return
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
// 使用时间戳比较：如果 contextmenu 在拖动结束后 100ms 内触发，则抑制
|
|
// 这比依赖事件顺序更可靠
|
|
if (event.timeStamp - lastDragEndTimestamp < 100) return
|
|
emit('contextmenu', annotationId, event)
|
|
}
|
|
|
|
function markerId(annotationId: string) {
|
|
return `waveform-annotation-arrow-${annotationId.replace(/[^a-zA-Z0-9_-]/g, '-')}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<g
|
|
v-if="props.visible"
|
|
class="waveform-annotation-layer"
|
|
:class="{ 'waveform-annotation-layer--interactive': props.interactive }"
|
|
>
|
|
<g
|
|
v-for="rendered in props.annotations"
|
|
:key="rendered.annotation.id"
|
|
class="waveform-annotation"
|
|
:data-annotation-id="rendered.annotation.id"
|
|
:data-placement="rendered.placement"
|
|
@pointerdown="handlePointerDown(rendered, $event)"
|
|
@pointermove="handlePointerMove"
|
|
@pointerup="finishPointerDrag"
|
|
@pointercancel="handlePointerCancel"
|
|
@contextmenu="handleContextMenu(rendered.annotation.id, $event)"
|
|
>
|
|
<defs>
|
|
<marker
|
|
:id="markerId(rendered.annotation.id)"
|
|
markerWidth="8"
|
|
markerHeight="8"
|
|
refX="8"
|
|
refY="4"
|
|
orient="auto"
|
|
markerUnits="userSpaceOnUse"
|
|
>
|
|
<path d="M0,0 L8,4 L0,8 Z" :fill="rendered.style.borderColor" />
|
|
</marker>
|
|
</defs>
|
|
<line
|
|
class="waveform-annotation__arrow"
|
|
:x1="draggedBox(rendered).lineEndX"
|
|
:y1="draggedBox(rendered).lineEndY"
|
|
:x2="rendered.anchorX"
|
|
:y2="rendered.anchorY"
|
|
:stroke="rendered.style.borderColor"
|
|
:marker-end="`url(#${markerId(rendered.annotation.id)})`"
|
|
/>
|
|
<rect
|
|
class="waveform-annotation__box"
|
|
:x="draggedBox(rendered).x"
|
|
:y="draggedBox(rendered).y"
|
|
:width="draggedBox(rendered).width"
|
|
:height="draggedBox(rendered).height"
|
|
:fill="rendered.style.backgroundColor"
|
|
:stroke="rendered.style.borderColor"
|
|
/>
|
|
<text
|
|
class="waveform-annotation__text"
|
|
:x="draggedBox(rendered).x + draggedBox(rendered).width / 2"
|
|
:y="
|
|
draggedBox(rendered).y +
|
|
draggedBox(rendered).height / 2 -
|
|
((rendered.lines.length - 1) * ANNOTATION_TEXT_LINE_HEIGHT) / 2
|
|
"
|
|
:fill="rendered.style.textColor"
|
|
:style="{ font: ANNOTATION_TEXT_FONT }"
|
|
text-anchor="middle"
|
|
dominant-baseline="central"
|
|
>
|
|
<tspan
|
|
v-for="(line, index) in rendered.lines"
|
|
:key="`${rendered.annotation.id}-${index}`"
|
|
:x="draggedBox(rendered).x + draggedBox(rendered).width / 2"
|
|
:dy="index === 0 ? 0 : ANNOTATION_TEXT_LINE_HEIGHT"
|
|
>
|
|
{{ line }}
|
|
</tspan>
|
|
</text>
|
|
</g>
|
|
</g>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.waveform-annotation-layer {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.waveform-annotation-layer--interactive .waveform-annotation {
|
|
pointer-events: auto;
|
|
cursor: grab;
|
|
touch-action: none;
|
|
}
|
|
|
|
.waveform-annotation-layer--interactive .waveform-annotation:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.waveform-annotation__arrow {
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.waveform-annotation__box {
|
|
stroke-width: 1;
|
|
rx: 3;
|
|
}
|
|
|
|
.waveform-annotation-layer--interactive .waveform-annotation__box {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.waveform-annotation__text {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|