gis-view-webgl2 0.1.13 → 0.1.15

package/docs/demos/EventDemo.vue

@@ -1,121 +1,121 @@
-<script setup>
-/**
- * 事件与方法演示：一条 `view.on('*')` 把全部事件收进日志，旁边一排按钮调常用方法（合并 / 复制有确认条），
- * 「谁发的、载荷长什么样、方法返回什么」都写在面板上。
- *
- * 高频事件（pointer / stats / render 这些）默认不写日志 —— 每帧都来的东西会把日志冲掉，
- * 想看就把「含高频事件」勾上，日志会按 name 累计次数。
- */
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
-import { createGisView } from '../../src/index.js'
-import { buildDemoData } from './shared/demoData.js'
-import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const dataset = buildDemoData({ count: 18 })
-let view = null
-let offAll = null
-
-const showHighFrequency = ref(false)
-const logLines = ref([])
-const counts = ref({})
-const actionText = ref('—')
-let logSeq = 0
-
+<script setup>
+/**
+ * 事件与方法演示：一条 `view.on('*')` 把全部事件收进日志，旁边一排按钮调常用方法（合并 / 复制有确认条），
+ * 「谁发的、载荷长什么样、方法返回什么」都写在面板上。
+ *
+ * 高频事件（pointer / stats / render 这些）默认不写日志 —— 每帧都来的东西会把日志冲掉，
+ * 想看就把「含高频事件」勾上，日志会按 name 累计次数。
+ */
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const dataset = buildDemoData({ count: 18 })
+let view = null
+let offAll = null
+
+const showHighFrequency = ref(false)
+const logLines = ref([])
+const counts = ref({})
+const actionText = ref('—')
+let logSeq = 0
+
 /**
  * 合并 / 复制的确认条：合并会停在「还没落地」的中间态等使用方裁决，复制则是**结束之后**才弹 ——
  * 这里把载荷存下来，条上的按钮就是调载荷给的 confirm() / cancel() / revert()，
  * 与 DragDropDemo 的落点草稿是同一套写法。载荷里挂着引擎的节点对象，不必深层响应式，用 shallowRef 收着。
- */
-const mergeState = shallowRef(null)
-const copyState = shallowRef(null)
-/** 光标读数：直接读画布上的 cursor —— 「拖到一起鼠标为什么会变」在这里看得见 */
-const cursorText = ref('—')
-let cursorTimer = null
-
-/** 高频事件名单与库里的口径一致：这些默认只计数不写日志 */
-const HIGH_FREQUENCY = new Set(['pointer', 'stats', 'render', 'cameraChange', 'viewport', 'cursor', 'hover'])
-
-const pushLog = (name, text) => {
-	logSeq += 1
-	logLines.value = [{ id: logSeq, name, text }, ...logLines.value].slice(0, 14)
-}
-
-/** 载荷压成一行：不同事件的字段差别大，这里只挑最常看的几个 */
-const describePayload = (payload) => {
-	if (payload === undefined || payload === null) {
-		return '（无载荷）'
-	}
-	if (typeof payload !== 'object') {
-		return String(payload)
-	}
-	const parts = []
-	if (payload.type !== undefined) parts.push(`type=${payload.type}`)
-	if (payload.kind !== undefined) parts.push(`kind=${payload.kind}`)
-	if (payload.phase !== undefined) parts.push(`phase=${payload.phase}`)
-	if (payload.id !== undefined) parts.push(`id=${payload.id}`)
-	if (payload.index !== undefined) parts.push(`index=${payload.index}`)
-	if (payload.labelId !== undefined) parts.push(`labelId=${payload.labelId}`)
-	if (payload.count !== undefined) parts.push(`count=${payload.count}`)
+ */
+const mergeState = shallowRef(null)
+const copyState = shallowRef(null)
+/** 光标读数：直接读画布上的 cursor —— 「拖到一起鼠标为什么会变」在这里看得见 */
+const cursorText = ref('—')
+let cursorTimer = null
+
+/** 高频事件名单与库里的口径一致：这些默认只计数不写日志 */
+const HIGH_FREQUENCY = new Set(['pointer', 'stats', 'render', 'cameraChange', 'viewport', 'cursor', 'hover'])
+
+const pushLog = (name, text) => {
+	logSeq += 1
+	logLines.value = [{ id: logSeq, name, text }, ...logLines.value].slice(0, 14)
+}
+
+/** 载荷压成一行：不同事件的字段差别大，这里只挑最常看的几个 */
+const describePayload = (payload) => {
+	if (payload === undefined || payload === null) {
+		return '（无载荷）'
+	}
+	if (typeof payload !== 'object') {
+		return String(payload)
+	}
+	const parts = []
+	if (payload.type !== undefined) parts.push(`type=${payload.type}`)
+	if (payload.kind !== undefined) parts.push(`kind=${payload.kind}`)
+	if (payload.phase !== undefined) parts.push(`phase=${payload.phase}`)
+	if (payload.id !== undefined) parts.push(`id=${payload.id}`)
+	if (payload.index !== undefined) parts.push(`index=${payload.index}`)
+	if (payload.labelId !== undefined) parts.push(`labelId=${payload.labelId}`)
+	if (payload.count !== undefined) parts.push(`count=${payload.count}`)
 	if (payload.channelId !== undefined) parts.push(`channel=${payload.channelId}`)
 	if (payload.camera !== undefined) parts.push('camera=…')
 	if (payload.idleTime !== undefined) parts.push(`idleTime=${Math.round(payload.idleTime)}ms`)
 	if (payload.timeout !== undefined) parts.push(`timeout=${payload.timeout}ms`)
-	if (payload.screen !== undefined) parts.push(`screen=[${payload.screen.map(value => Number(value).toFixed(0)).join(', ')}]`)
-	if (payload.action) {
-		const action = payload.action
+	if (payload.screen !== undefined) parts.push(`screen=[${payload.screen.map(value => Number(value).toFixed(0)).join(', ')}]`)
+	if (payload.action) {
+		const action = payload.action
 		parts.push(`action=${action.type}/${action.target}${action.moved ? '+moved' : ''}${action.double ? '+double' : ''}@${payload.originalEvent?.button ?? '-'}`)
 		parts.push(`data=${dataLabel(hitDataOf(payload))}`)
-	}
-	if (!parts.length) parts.push(`keys=[${Object.keys(payload).slice(0, 6).join(', ')}]`)
-	return parts.join(' · ')
-}
-
-/**
+	}
+	if (!parts.length) parts.push(`keys=[${Object.keys(payload).slice(0, 6).join(', ')}]`)
+	return parts.join(' · ')
+}
+
+/**
  * 命中的数据在载荷顶层：节点 / 线路看 item，通道看 channel，选中集报 items 条数，
  * 标签（labelClick / labelDrag / labelContextMenu / labelDblClick）看 label / parent。
  */
-const dataLabel = (value) => {
-	if (Array.isArray(value)) return `${value.length} 项`
-	if (!value || typeof value !== 'object') return String(value)
-	if (value.label) {
-		const parent = value.parent
-		const where = parent?.id !== undefined && parent?.id !== null
-			? `${parent.type ?? '要素'} ${parent.id}`
-			: parent?.index !== undefined ? `${parent.type ?? '要素'} #${parent.index}` : ''
-		return `标签「${value.label.content || value.label.id || '—'}」${where ? ` @ ${where}` : ''}`
-	}
-	return value.id ?? value.channelId ?? value.name ?? `对象 keys=[${Object.keys(value).slice(0, 4).join(', ')}]`
-}
-
+const dataLabel = (value) => {
+	if (Array.isArray(value)) return `${value.length} 项`
+	if (!value || typeof value !== 'object') return String(value)
+	if (value.label) {
+		const parent = value.parent
+		const where = parent?.id !== undefined && parent?.id !== null
+			? `${parent.type ?? '要素'} ${parent.id}`
+			: parent?.index !== undefined ? `${parent.type ?? '要素'} #${parent.index}` : ''
+		return `标签「${value.label.content || value.label.id || '—'}」${where ? ` @ ${where}` : ''}`
+	}
+	return value.id ?? value.channelId ?? value.name ?? `对象 keys=[${Object.keys(value).slice(0, 4).join(', ')}]`
+}
+
 /** 一次事件里可读的那份顶层数据：不把通道 / 分组上下文再打成一个 action.data */
 const hitDataOf = payload => payload.item ?? payload.channel ?? payload.label ?? payload.line
 	?? (payload.type === 'cluster' ? { id: payload.id, count: payload.count } : null)
 	?? (Array.isArray(payload.items) ? payload.items : null)
-
-/** 会带 action 的事件名：* 订阅里从载荷上认出「这一次是什么操作」 */
+
+/** 会带 action 的事件名：* 订阅里从载荷上认出「这一次是什么操作」 */
 const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
-
-/** 最近一次操作的判读：面板上的「动作判读」直接读它 */
-const lastAction = ref('—')
-
-/** 画布中心的客户端坐标与「中间半屏」的像素矩形：给 pickAt / getFeaturesInRect 当参数 */
-const canvasProbe = () => {
-	const canvas = container.value?.querySelector?.('.gis-view__canvas') ?? container.value
-	const box = canvas?.getBoundingClientRect?.() ?? { left: 0, top: 0, width: 0, height: 0 }
-	return {
-		center: { clientX: box.left + box.width / 2, clientY: box.top + box.height / 2 },
-		rect: { x: box.width * 0.25, y: box.height * 0.25, width: box.width * 0.5, height: box.height * 0.5 }
-	}
-}
-
-const buildOptions = () => ({
-	points: dataset.points,
-	lines: dataset.lines,
-	channels: dataset.channels,
-	pointStyle: { size: 7, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
-	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.55)' },
+
+/** 最近一次操作的判读：面板上的「动作判读」直接读它 */
+const lastAction = ref('—')
+
+/** 画布中心的客户端坐标与「中间半屏」的像素矩形：给 pickAt / getFeaturesInRect 当参数 */
+const canvasProbe = () => {
+	const canvas = container.value?.querySelector?.('.gis-view__canvas') ?? container.value
+	const box = canvas?.getBoundingClientRect?.() ?? { left: 0, top: 0, width: 0, height: 0 }
+	return {
+		center: { clientX: box.left + box.width / 2, clientY: box.top + box.height / 2 },
+		rect: { x: box.width * 0.25, y: box.height * 0.25, width: box.width * 0.5, height: box.height * 0.5 }
+	}
+}
+
+const buildOptions = () => ({
+	points: dataset.points,
+	lines: dataset.lines,
+	channels: dataset.channels,
+	pointStyle: { size: 7, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
+	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.55)' },
 	showGrid: true,
 	fitPadding: 60,
 	// 停手 3 秒发一次 idle，事件日志与计数里都能看到；
@@ -129,82 +129,82 @@ const buildOptions = () => ({
 	// 复制走缺省口径：Alt 点击出预览 → 跟着鼠标走 → **松开左键**落地（不是松开 Alt），
 	// 落地之后确认条给一次撤销机会（copy.autoCommit: false 才会停在预览态等确认，演示不用那一档）
 	onReady: () => {
-		emit('notice', '事件日志已接上：点、拖、滚、选都会记一行')
-		pushLog('ready', '视图就绪')
-	}
-})
-
-/** 方法按钮：每个都调一个实例方法，把返回值写进读数 */
-const call = (name, run) => {
-	const started = performance.now()
-	let result
-	try {
-		result = run()
-	}
-	catch (error) {
-		actionText.value = `${name} 抛错：${error instanceof Error ? error.message : String(error)}`
-		return
-	}
-	const elapsed = (performance.now() - started).toFixed(1)
-	const text = summarize(result)
-	actionText.value = `${name} → ${text}（${elapsed} ms）`
-	pushLog('method', `${name} → ${text}`)
-}
-
-const summarize = (value) => {
-	if (value === undefined) return 'undefined'
-	if (value === null) return 'null'
-	if (Array.isArray(value)) return `数组 ${value.length} 项`
-	if (typeof value === 'object') return `对象 keys=[${Object.keys(value).slice(0, 6).join(', ')}]`
-	return String(value)
-}
-
-const methods = [
-	{ name: 'fitView()', run: () => view?.fitView(60) },
-	{ name: 'zoomBy(1.3)', run: () => view?.zoomBy(1.3) },
+		emit('notice', '事件日志已接上：点、拖、滚、选都会记一行')
+		pushLog('ready', '视图就绪')
+	}
+})
+
+/** 方法按钮：每个都调一个实例方法，把返回值写进读数 */
+const call = (name, run) => {
+	const started = performance.now()
+	let result
+	try {
+		result = run()
+	}
+	catch (error) {
+		actionText.value = `${name} 抛错：${error instanceof Error ? error.message : String(error)}`
+		return
+	}
+	const elapsed = (performance.now() - started).toFixed(1)
+	const text = summarize(result)
+	actionText.value = `${name} → ${text}（${elapsed} ms）`
+	pushLog('method', `${name} → ${text}`)
+}
+
+const summarize = (value) => {
+	if (value === undefined) return 'undefined'
+	if (value === null) return 'null'
+	if (Array.isArray(value)) return `数组 ${value.length} 项`
+	if (typeof value === 'object') return `对象 keys=[${Object.keys(value).slice(0, 6).join(', ')}]`
+	return String(value)
+}
+
+const methods = [
+	{ name: 'fitView()', run: () => view?.fitView(60) },
+	{ name: 'zoomBy(1.3)', run: () => view?.zoomBy(1.3) },
 	{ name: 'selectFeatures(node-0)', run: () => view?.selectFeatures('node-0') },
 	{ name: 'selectFeatures(null)', run: () => view?.selectFeatures(null) },
-	{ name: 'getSelections()', run: () => view?.getSelections() },
-	{ name: 'getSelectionData()', run: () => view?.getSelectionData() },
-	{ name: 'isSelected(node-0)', run: () => view?.isSelected('node-0') },
-	{ name: 'getVisibleData()', run: () => view?.getVisibleData() },
-	{ name: 'listPoints({ visibleOnly: true })', run: () => view?.listPoints({ visibleOnly: true }) },
-	// 聚焦一批：数组取整体包围盒（这几个点的中心就是屏幕中心），select: true 顺带把它们选上
-	{ name: 'focusOn(前三个节点, { select: true })', run: () => { const ids = (view?.getData().points ?? []).slice(0, 3).map(point => point.id ?? 0); return ids.length > 0 ? view?.focusOn(ids, { select: true }) : null } },
-	{ name: 'getStats()', run: () => view?.getStats() },
-	{ name: 'getQuality()', run: () => view?.getQuality() },
+	{ name: 'getSelections()', run: () => view?.getSelections() },
+	{ name: 'getSelectionData()', run: () => view?.getSelectionData() },
+	{ name: 'isSelected(node-0)', run: () => view?.isSelected('node-0') },
+	{ name: 'getVisibleData()', run: () => view?.getVisibleData() },
+	{ name: 'listPoints({ visibleOnly: true })', run: () => view?.listPoints({ visibleOnly: true }) },
+	// 聚焦一批：数组取整体包围盒（这几个点的中心就是屏幕中心），select: true 顺带把它们选上
+	{ name: 'focusOn(前三个节点, { select: true })', run: () => { const ids = (view?.getData().points ?? []).slice(0, 3).map(point => point.id ?? 0); return ids.length > 0 ? view?.focusOn(ids, { select: true }) : null } },
+	{ name: 'getStats()', run: () => view?.getStats() },
+	{ name: 'getQuality()', run: () => view?.getQuality() },
 	{ name: 'getCamera()', run: () => view?.getCamera() },
 	{ name: 'getScale()', run: () => view?.getScale() },
 	{ name: 'setScale(当前 × 1.25)', run: () => view?.setScale(view.getScale() * 1.25) },
 	{ name: 'getIdleTime()', run: () => view?.getIdleTime() },
-	{ name: 'getBounds()', run: () => view?.getBounds() },
-	{ name: 'getFilterResult()', run: () => view?.getFilterResult() },
-	{ name: 'getLabelStates()', run: () => view?.getLabelStates() },
-	{ name: 'getChannels()', run: () => view?.getChannels() },
-	{ name: 'getChannelsInView()', run: () => view?.getChannelsInView() },
-	// 回线属于哪条通道：线上点一条回线之后，想知道它归哪条通道 / 哪一组就问它
-	{ name: 'getLineChannel(第一条回线)', run: () => { const line = view?.listLines().find(entry => view.getLineChannel(entry.index)); return line ? view.getLineChannel(line.index) : '没有通道回线' } },
-	// 导出当前数据：format 'input' 就是 createGisView 入参那一份，可以直接回灌
-	{ name: 'exportData(input)', run: () => view?.exportData({ format: 'input' }) },
-	{ name: 'getViewState()', run: () => view?.getViewState() },
-	{ name: 'getPointCopy()', run: () => view?.getPointCopy() },
-	{ name: 'getPointMerge()', run: () => view?.getPointMerge() },
-	{ name: 'canUndo()', run: () => view?.canUndo() },
-	{ name: 'undo()', run: () => view?.undo() },
-	{ name: 'refresh()', run: () => view?.refresh() },
-	{ name: 'resize()', run: () => view?.resize() },
-	{ name: 'pickAt(画布中心)', run: () => { const probe = canvasProbe(); return view?.pickAt(probe.center.clientX, probe.center.clientY) } },
-	{ name: 'getFeaturesInRect(中心半屏)', run: () => view?.getFeaturesInRect(canvasProbe().rect) }
-]
-
-/** 确认条上写「哪个节点」：优先业务名，其次是 id，都没有就报下标 */
-const pointLabel = (entry) => {
-	if (!entry?.item) {
-		return entry?.index === undefined ? '—' : '下标 ' + entry.index
-	}
-	return entry.item.name ?? entry.item.id ?? '下标 ' + (entry.index ?? '—')
-}
-
+	{ name: 'getBounds()', run: () => view?.getBounds() },
+	{ name: 'getFilterResult()', run: () => view?.getFilterResult() },
+	{ name: 'getLabelStates()', run: () => view?.getLabelStates() },
+	{ name: 'getChannels()', run: () => view?.getChannels() },
+	{ name: 'getChannelsInView()', run: () => view?.getChannelsInView() },
+	// 回线属于哪条通道：线上点一条回线之后，想知道它归哪条通道 / 哪一组就问它
+	{ name: 'getLineChannel(第一条回线)', run: () => { const line = view?.listLines().find(entry => view.getLineChannel(entry.index)); return line ? view.getLineChannel(line.index) : '没有通道回线' } },
+	// 导出当前数据：format 'input' 就是 createGisView 入参那一份，可以直接回灌
+	{ name: 'exportData(input)', run: () => view?.exportData({ format: 'input' }) },
+	{ name: 'getViewState()', run: () => view?.getViewState() },
+	{ name: 'getPointCopy()', run: () => view?.getPointCopy() },
+	{ name: 'getPointMerge()', run: () => view?.getPointMerge() },
+	{ name: 'canUndo()', run: () => view?.canUndo() },
+	{ name: 'undo()', run: () => view?.undo() },
+	{ name: 'refresh()', run: () => view?.refresh() },
+	{ name: 'resize()', run: () => view?.resize() },
+	{ name: 'pickAt(画布中心)', run: () => { const probe = canvasProbe(); return view?.pickAt(probe.center.clientX, probe.center.clientY) } },
+	{ name: 'getFeaturesInRect(中心半屏)', run: () => view?.getFeaturesInRect(canvasProbe().rect) }
+]
+
+/** 确认条上写「哪个节点」：优先业务名，其次是 id，都没有就报下标 */
+const pointLabel = (entry) => {
+	if (!entry?.item) {
+		return entry?.index === undefined ? '—' : '下标 ' + entry.index
+	}
+	return entry.item.name ?? entry.item.id ?? '下标 ' + (entry.index ?? '—')
+}
+
 /**
  * 实时光标：读画布上的 cursor 就够 —— 拖动是 move、拖到一起进「待确认合并」是 copy、
  * 复制预览与等待选点也走 copy（都取 cursorStyle 里那一档，缺省是系统 copy 光标）。
@@ -222,13 +222,13 @@ const copyCoordinateLabel = () => {
 	const coordinate = copyState.value?.coordinate
 	return Array.isArray(coordinate) ? coordinate.map(value => Number(value).toFixed(2)).join(', ') : '—'
 }
-
-/** 合并的中间态：pending 停在条上等裁决，confirm / merge / cancel 到了就收掉（落地读数看日志） */
-const onMergeEvent = (payload) => {
-	mergeState.value = payload?.phase === 'pending' ? payload : null
-	syncCursor()
-}
-
+
+/** 合并的中间态：pending 停在条上等裁决，confirm / merge / cancel 到了就收掉（落地读数看日志） */
+const onMergeEvent = (payload) => {
+	mergeState.value = payload?.phase === 'pending' ? payload : null
+	syncCursor()
+}
+
 /** 复制的收尾条：只在 end（复制结束）那一拍出现 —— start / move 是复制进行中，不弹框 */
 const onCopyEvent = (payload) => {
 	copyState.value = payload?.phase === 'end' ? payload : null
@@ -239,17 +239,17 @@ const onCopyEvent = (payload) => {
  * 确认条上的按钮：直接调载荷给的入口。
  * 合并的 confirm 阶段数据还没动（还能改 payload.item 或再 cancel 掉）；
  * 复制这一条是结束后才出现的，给的是 payload.revert() —— 数据已经写了，整份撤回去。
- */
-const confirmMerge = () => {
-	mergeState.value?.confirm()
-	mergeState.value = null
-	syncCursor()
-}
-const cancelMerge = () => {
-	mergeState.value?.cancel()
-	mergeState.value = null
-	syncCursor()
-}
+ */
+const confirmMerge = () => {
+	mergeState.value?.confirm()
+	mergeState.value = null
+	syncCursor()
+}
+const cancelMerge = () => {
+	mergeState.value?.cancel()
+	mergeState.value = null
+	syncCursor()
+}
 const revertCopy = () => {
 	copyState.value?.revert?.()
 	copyState.value = null
@@ -259,62 +259,62 @@ const dismissCopy = () => {
 	copyState.value = null
 	syncCursor()
 }
-
-onMounted(() => {
-	view = createGisView(container.value, buildOptions())
+
+onMounted(() => {
+	view = createGisView(container.value, buildOptions())
 	// 一条 '*' 订阅全部事件：回调拿到的第二参就是事件名；载荷与 options 里的 onXxx 完全同一份
 	offAll = view.on('*', (payload, name) => {
-		counts.value = { ...counts.value, [name]: (counts.value[name] ?? 0) + 1 }
-		// 合并 / 复制：同一条 * 订阅里收中间态，确认条与日志读的是同一份载荷
-		if (name === 'pointMerge') {
-			onMergeEvent(payload)
-		}
-		else if (name === 'pointCopy') {
-			onCopyEvent(payload)
-		}
-		if (name === 'cursor' || name === 'pointerDown' || name === 'pointerUp' || name === 'pointMerge' || name === 'pointCopy') {
-			syncCursor()
-		}
-		if (ACTION_EVENTS.has(name) && payload?.action) {
-			// 一次操作的判读：什么操作 / 点到了什么 / 拿到了什么数据 —— 左键与右键都走这一套
-			const action = payload.action
+		counts.value = { ...counts.value, [name]: (counts.value[name] ?? 0) + 1 }
+		// 合并 / 复制：同一条 * 订阅里收中间态，确认条与日志读的是同一份载荷
+		if (name === 'pointMerge') {
+			onMergeEvent(payload)
+		}
+		else if (name === 'pointCopy') {
+			onCopyEvent(payload)
+		}
+		if (name === 'cursor' || name === 'pointerDown' || name === 'pointerUp' || name === 'pointMerge' || name === 'pointCopy') {
+			syncCursor()
+		}
+		if (ACTION_EVENTS.has(name) && payload?.action) {
+			// 一次操作的判读：什么操作 / 点到了什么 / 拿到了什么数据 —— 左键与右键都走这一套
+			const action = payload.action
 			const event = payload.originalEvent
 			const held = [event?.ctrlKey && 'ctrl', event?.metaKey && 'meta', event?.shiftKey && 'shift', event?.altKey && 'alt'].filter(Boolean).join('+')
 			const data = hitDataOf(payload)
 			lastAction.value = `${name}：${action.type} → ${action.target}${data === null || data === undefined ? '' : ` · ${dataLabel(data)}`}${event ? ` · button ${event.button}` : ''}${held ? ` · ${held}` : ''}${action.moved ? ' · 拖动过' : ''}${action.double ? ' · 双击第二下' : ''}`
-		}
-		if (!showHighFrequency.value && HIGH_FREQUENCY.has(name)) {
-			return
-		}
-		pushLog(name, describePayload(payload))
-	})
-	// 光标在很多条路径上都会换（拖动 / 修饰键 / 合并与复制进出），确认条上的按钮又不经过画布 —— 每 250ms 读一次最省心
-	cursorTimer = window.setInterval(syncCursor, 250)
-})
-onBeforeUnmount(() => {
-	window.clearInterval(cursorTimer)
-	cursorTimer = null
-	offAll?.()
-	offAll = null
-	view?.destroy()
-	view = null
-})
-</script>
-
-<template>
-	<section class="dv-demo">
-		<div class="dv-stage">
-			<div ref="container" class="dv-canvas"></div>
-			<div class="dv-toolbar">
-				<button type="button" class="dv-button" @click="view?.fitView(60)">适应全部</button>
-			</div>
-			<div v-if="mergeState" class="dv-confirm">
-				<span class="dv-confirm__text">
-					合并待确认：{{ pointLabel(mergeState.source) }} → {{ pointLabel(mergeState.target) }} · 拖动的节点停在落点上，数据还没动
-				</span>
-				<button type="button" class="dv-button dv-button--primary" @click="confirmMerge">确认合并（payload.confirm()）</button>
-				<button type="button" class="dv-button" @click="cancelMerge">取消（Esc / 右键）</button>
-			</div>
+		}
+		if (!showHighFrequency.value && HIGH_FREQUENCY.has(name)) {
+			return
+		}
+		pushLog(name, describePayload(payload))
+	})
+	// 光标在很多条路径上都会换（拖动 / 修饰键 / 合并与复制进出），确认条上的按钮又不经过画布 —— 每 250ms 读一次最省心
+	cursorTimer = window.setInterval(syncCursor, 250)
+})
+onBeforeUnmount(() => {
+	window.clearInterval(cursorTimer)
+	cursorTimer = null
+	offAll?.()
+	offAll = null
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class="dv-demo">
+		<div class="dv-stage">
+			<div ref="container" class="dv-canvas"></div>
+			<div class="dv-toolbar">
+				<button type="button" class="dv-button" @click="view?.fitView(60)">适应全部</button>
+			</div>
+			<div v-if="mergeState" class="dv-confirm">
+				<span class="dv-confirm__text">
+					合并待确认：{{ pointLabel(mergeState.source) }} → {{ pointLabel(mergeState.target) }} · 拖动的节点停在落点上，数据还没动
+				</span>
+				<button type="button" class="dv-button dv-button--primary" @click="confirmMerge">确认合并（payload.confirm()）</button>
+				<button type="button" class="dv-button" @click="cancelMerge">取消（Esc / 右键）</button>
+			</div>
 			<div v-else-if="copyState" class="dv-confirm">
 				<span class="dv-confirm__text">
 					复制结束：{{ pointLabel(copyState.source) }} → ({{ copyCoordinateLabel() }}) · 松开左键才算结束，数据已经写进去了
@@ -322,73 +322,73 @@ onBeforeUnmount(() => {
 				<button type="button" class="dv-button dv-button--primary" @click="revertCopy">撤销（payload.revert()）</button>
 				<button type="button" class="dv-button" @click="dismissCopy">知道了</button>
 			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>方法</h3>
-				<div class="dv-row">
-					<button v-for="item in methods" :key="item.name" type="button" class="dv-button" @click="call(item.name, item.run)">{{ item.name }}</button>
-				</div>
-				<p class="dv-readout">{{ actionText }}</p>
-				<p class="dv-hint">每个按钮只调一个方法，返回值与耗时都打在读数里；返回值是数组的只报条数，详情看日志。</p>
-			</div>
-			<div class="dv-group">
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>方法</h3>
+				<div class="dv-row">
+					<button v-for="item in methods" :key="item.name" type="button" class="dv-button" @click="call(item.name, item.run)">{{ item.name }}</button>
+				</div>
+				<p class="dv-readout">{{ actionText }}</p>
+				<p class="dv-hint">每个按钮只调一个方法，返回值与耗时都打在读数里；返回值是数组的只报条数，详情看日志。</p>
+			</div>
+			<div class="dv-group">
 				<h3>光标读数<span class="dv-chip">{{ mergeState ? '等裁决' : copyState ? '复制结束' : '常态' }}</span></h3>
-				<p class="dv-readout">{{ cursorText }}</p>
+				<p class="dv-readout">{{ cursorText }}</p>
 				<p class="dv-hint">
 					拖一个节点压到另一个节点上松手，鼠标会从 move 变成 copy：引擎进入「待确认合并」后 updateCursor() 把光标切成
 					cursorStyle.copy 这一档，复制预览与等待选点走的是同一档（按住 Ctrl / ⌘ 还能用 cursorStyle.ctrl.copy 再换一份）。
 					合并没配 confirm，停在原地等下面那条确认条（调载荷的 confirm() / cancel()）；复制是**松开左键就结束**的：
 					Alt 点击出预览 → 跟着鼠标走 → 抬左键落地，弹出来的条是「复制结束」的收尾条，可以 payload.revert() 整份撤销。
 				</p>
-			</div>
-			<div class="dv-group">
-				<h3>
-					事件日志
-					<label class="dv-hint"><input v-model="showHighFrequency" type="checkbox" /> 含高频事件</label>
-				</h3>
-				<ul class="dv-log">
-					<li v-for="line in logLines" :key="line.id"><strong>{{ line.name }}</strong> · {{ line.text }}</li>
-					<li v-if="!logLines.length">还没有事件：在画布上点一下 / 拖一段 / 滚一下滚轮</li>
-				</ul>
-			</div>
-			<div class="dv-group">
-				<h3>动作判读（action）</h3>
-				<p class="dv-readout">{{ lastAction }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>
+					事件日志
+					<label class="dv-hint"><input v-model="showHighFrequency" type="checkbox" /> 含高频事件</label>
+				</h3>
+				<ul class="dv-log">
+					<li v-for="line in logLines" :key="line.id"><strong>{{ line.name }}</strong> · {{ line.text }}</li>
+					<li v-if="!logLines.length">还没有事件：在画布上点一下 / 拖一段 / 滚一下滚轮</li>
+				</ul>
+			</div>
+			<div class="dv-group">
+				<h3>动作判读（action）</h3>
+				<p class="dv-readout">{{ lastAction }}</p>
 				<p class="dv-hint">在画布上点一下 / 右键 / 拖一段 / 框选一下：action.type 说清「是什么操作」、action.target 说清「点到了什么」，命中的数据直接读载荷顶层的 item / channel / label 等字段；按键与修饰键读 originalEvent。</p>
-			</div>
-			<div class="dv-group">
-				<h3>事件计数（* 订阅）</h3>
-				<p class="dv-readout">
-					<template v-for="(value, name) in counts" :key="name">{{ name }}: {{ value }}　</template>
-				</p>
-			</div>
-		</aside>
-	</section>
-</template>
-
-<style scoped>
-/* 合并 / 复制的确认条：与 DragDropDemo 的「落点草稿」同一套外观，贴在画布下沿正中 */
-.dv-confirm {
-	position: absolute;
-	left: 50%;
-	bottom: 12px;
-	z-index: 5;
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 8px;
-	max-width: calc(100% - 24px);
-	padding: 6px 8px;
-	border-radius: 10px;
-	background: rgba(255, 255, 255, 0.95);
-	box-shadow: 0 10px 26px rgba(31, 62, 105, 0.2);
-	transform: translateX(-50%);
-}
-
-.dv-confirm__text {
-	color: #526b8d;
-	font-size: 12px;
-	line-height: 1.5;
-}
-</style>
+			</div>
+			<div class="dv-group">
+				<h3>事件计数（* 订阅）</h3>
+				<p class="dv-readout">
+					<template v-for="(value, name) in counts" :key="name">{{ name }}: {{ value }}　</template>
+				</p>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+/* 合并 / 复制的确认条：与 DragDropDemo 的「落点草稿」同一套外观，贴在画布下沿正中 */
+.dv-confirm {
+	position: absolute;
+	left: 50%;
+	bottom: 12px;
+	z-index: 5;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
+	max-width: calc(100% - 24px);
+	padding: 6px 8px;
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.95);
+	box-shadow: 0 10px 26px rgba(31, 62, 105, 0.2);
+	transform: translateX(-50%);
+}
+
+.dv-confirm__text {
+	color: #526b8d;
+	font-size: 12px;
+	line-height: 1.5;
+}
+</style>