gis-view-webgl2 0.1.13 → 0.1.15

package/docs/demos/LabelDemo.vue

@@ -1,45 +1,45 @@
-<script setup>
-/**
- * 标签交互演示：这一轮两条需求的落地页。
- *
- * 1) 标签自己也接指针：点一下发 labelClick（面板按它选中这一条），
- *    右键发 labelContextMenu（自绘菜单：改内容 / 切位置 / 隐藏 / 重置偏移 / 删除，全部落在 updateLabel / removeLabel 上），
- *    双击发 labelDblClick（这里接成「重置偏移」）。拖动照旧走 labelDrag，松手写回偏移状态。
- * 2) 加标签两条路都演示：
- *    - 统一 API：addLabels(kind, refs, 定义) 一次给「全部 / 当前选中 / 整条通道」加；
- *    - 点选即加：勾上「点选即加标签」后，在画布上点节点 / 线路 / 通道，选中集一变就给它们加一条。
- *
- * 另外把 labelChange 也订阅上：面板里每一次批量加减改都会在事件日志里留一行，
- * 说明「哪一批、加了几条、跳过几条」。
- */
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } 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 contentInput = ref(null)
-const dataset = buildDemoData({ count: 16 })
-let view = null
-let offEvents = []
-
-/** 批量 API 瞄准哪一类要素；右键 / 点选拿到的 labelId 也记在这里，编辑表单按它认人 */
-const labelKind = ref('point')
-const batchLabelId = ref('备注1')
-const hit = ref(null)
-const selectedIds = ref([])
-const selectionText = ref('未选中（先在画布上点一个节点 / 线路 / 通道）')
+<script setup>
+/**
+ * 标签交互演示：这一轮两条需求的落地页。
+ *
+ * 1) 标签自己也接指针：点一下发 labelClick（面板按它选中这一条），
+ *    右键发 labelContextMenu（自绘菜单：改内容 / 切位置 / 隐藏 / 重置偏移 / 删除，全部落在 updateLabel / removeLabel 上），
+ *    双击发 labelDblClick（这里接成「重置偏移」）。拖动照旧走 labelDrag，松手写回偏移状态。
+ * 2) 加标签两条路都演示：
+ *    - 统一 API：addLabels(kind, refs, 定义) 一次给「全部 / 当前选中 / 整条通道」加；
+ *    - 点选即加：勾上「点选即加标签」后，在画布上点节点 / 线路 / 通道，选中集一变就给它们加一条。
+ *
+ * 另外把 labelChange 也订阅上：面板里每一次批量加减改都会在事件日志里留一行，
+ * 说明「哪一批、加了几条、跳过几条」。
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } 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 contentInput = ref(null)
+const dataset = buildDemoData({ count: 16 })
+let view = null
+let offEvents = []
+
+/** 批量 API 瞄准哪一类要素；右键 / 点选拿到的 labelId 也记在这里，编辑表单按它认人 */
+const labelKind = ref('point')
+const batchLabelId = ref('备注1')
+const hit = ref(null)
+const selectedIds = ref([])
+const selectionText = ref('未选中（先在画布上点一个节点 / 线路 / 通道）')
 const autoAddOnSelect = ref(false)
 const overlapMode = ref('shift')
 const logLines = ref([])
-const logSeq = ref(0)
-const form = reactive({ content: '', position: 'bottom-right', color: '#ffe08a', hidden: false })
-const menu = reactive({ open: false, x: 0, y: 0 })
-
-const CHANNEL_POSITIONS = [0.2, 0.35, 0.5, 0.65, 0.8]
-const POINT_POSITIONS = ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', 'center']
-/** 事件日志：最新一条在最上面，只留最近 12 条 */
+const logSeq = ref(0)
+const form = reactive({ content: '', position: 'bottom-right', color: '#ffe08a', hidden: false })
+const menu = reactive({ open: false, x: 0, y: 0 })
+
+const CHANNEL_POSITIONS = [0.2, 0.35, 0.5, 0.65, 0.8]
+const POINT_POSITIONS = ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', 'center']
+/** 事件日志：最新一条在最上面，只留最近 12 条 */
 const pushLog = (name, text) => {
 	logSeq.value += 1
 	logLines.value = [{ id: logSeq.value, name, text }, ...logLines.value].slice(0, 12)
@@ -75,32 +75,32 @@ const applyOverlapMode = (mode) => {
 }
 
 /** 把一条标签事件载荷压成一行读数：哪一条、挂在谁身上、内容是什么 */
-const describeLabel = (payload) => {
-	if (!payload) {
-		return '—'
-	}
-	const parent = payload.parent?.id ?? payload.id ?? payload.index ?? '—'
-	const content = payload.label?.content ?? payload.state?.content ?? '—'
-	return `${parent} 上的「${payload.labelId ?? 'default'}」：${content}`
-}
-
-/**
- * 面板上的编辑表单：按当前选中的那一条（或最近右键的那一条）填好。
- * batchLabelId 不跟着点选走 —— 它指的是「批量改 / 批量删」动哪一批，
- * 由三个「加一条」按钮记下自己新建出来的那一批（见 rememberBatch）。
- */
-const syncFormFromHit = () => {
-	const payload = hit.value
-	if (!payload) {
-		return
-	}
-	form.content = String(payload.label?.content ?? '')
-	form.position = payload.label?.position ?? (payload.kind === 'line' ? 0.5 : 'bottom-right')
-	form.color = payload.state?.style?.color ?? payload.label?.style?.color ?? '#ffe08a'
-	form.hidden = payload.state?.hidden === true
-	nextTick(() => contentInput.value?.focus())
-}
-
+const describeLabel = (payload) => {
+	if (!payload) {
+		return '—'
+	}
+	const parent = payload.parent?.id ?? payload.id ?? payload.index ?? '—'
+	const content = payload.label?.content ?? payload.state?.content ?? '—'
+	return `${parent} 上的「${payload.labelId ?? 'default'}」：${content}`
+}
+
+/**
+ * 面板上的编辑表单：按当前选中的那一条（或最近右键的那一条）填好。
+ * batchLabelId 不跟着点选走 —— 它指的是「批量改 / 批量删」动哪一批，
+ * 由三个「加一条」按钮记下自己新建出来的那一批（见 rememberBatch）。
+ */
+const syncFormFromHit = () => {
+	const payload = hit.value
+	if (!payload) {
+		return
+	}
+	form.content = String(payload.label?.content ?? '')
+	form.position = payload.label?.position ?? (payload.kind === 'line' ? 0.5 : 'bottom-right')
+	form.color = payload.state?.style?.color ?? payload.label?.style?.color ?? '#ffe08a'
+	form.hidden = payload.state?.hidden === true
+	nextTick(() => contentInput.value?.focus())
+}
+
 const buildOptions = () => ({
 	points: dataset.points.map((point, index) => index === 0
 		? {
@@ -130,12 +130,12 @@ const buildOptions = () => ({
 			]
 		}
 		: point),
-	lines: dataset.lines,
-	channels: dataset.channels,
-	channelWidth: 2.4,
-	channelInset: 1.8,
-	pointStyle: { size: 7, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
-	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.6)' },
+	lines: dataset.lines,
+	channels: dataset.channels,
+	channelWidth: 2.4,
+	channelInset: 1.8,
+	pointStyle: { size: 7, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
+	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.6)' },
 	showGrid: true,
 	gridColor: 'rgba(126, 168, 214, 0.22)',
 	fitPadding: 60,
@@ -144,23 +144,23 @@ const buildOptions = () => ({
 	// 标签按优化档显示：maxCount（限数）与避让生效，面板上的「标签清单」才是有意义的那一份
 	labelOptimize: true,
 	label: {
-		content: '{name}',
-		position: 'top',
-		gap: 8,
-		maxCount: 40,
-		// 标签自己接指针：能点（labelClick）、能拖（labelDrag）、右键有菜单
-		draggable: true,
-		editable: true,
-		style: { color: '#dbe7f5', fontSize: '12px' }
-	},
-	lineLabel: {
-		content: '{name}',
-		position: 0.5,
-		maxCount: 10,
-		draggable: true,
-		editable: true,
-		style: { color: '#ffe08a', fontSize: '11px' }
-	},
+		content: '{name}',
+		position: 'top',
+		gap: 8,
+		maxCount: 40,
+		// 标签自己接指针：能点（labelClick）、能拖（labelDrag）、右键有菜单
+		draggable: true,
+		editable: true,
+		style: { color: '#dbe7f5', fontSize: '12px' }
+	},
+	lineLabel: {
+		content: '{name}',
+		position: 0.5,
+		maxCount: 10,
+		draggable: true,
+		editable: true,
+		style: { color: '#ffe08a', fontSize: '11px' }
+	},
 	onReady: () => {
 		emit('notice', `${dataset.points.length} 个节点 / ${dataset.channels.length} 条通道，标签可点可拖可右键`)
 		pushLog('ready', '视图就绪：点一下标签试试（右键还有菜单）')
@@ -171,40 +171,40 @@ const buildOptions = () => ({
 			perItemText.value = `第一个节点有 ${perItem.length} 条逐条配置：${perItem.map(label => `${label.id}（${String(label.content)}）`).join(' · ')}；A 可拖可点，B 只读`
 		}
 	},
-	onSelect: () => syncSelection()
-})
-/* ---- 三条添加路径：统一 API 的三种 refs 写法 ---- */
-
-/**
- * 选中集的唯一出口：画布上点（onSelect）与接口选中（selectChange，比如面板上的「选中第一个节点」）
- * 都汇到这里，面板只认一份读数。签名没变就只刷新读数，不重复触发「点选即加标签」。
- */
-let lastSelectionKey = ''
-const syncSelection = () => {
-	const selections = view?.getSelections() ?? []
-	const key = selections.map(entry => `${entry.type}:${entry.index}`).join(',')
-	selectedIds.value = selections.map(entry => entry.item?.id ?? String(entry.index))
-	selectionText.value = selections.length
-		? `选中 ${selections.length} 条：${selectedIds.value.join('、')}`
-		: '未选中（先在画布上点一个节点 / 线路 / 通道）'
-	if (key === lastSelectionKey) {
-		return
-	}
-	lastSelectionKey = key
-	if (autoAddOnSelect.value && selections.length) {
-		addToSelection()
-	}
-}
-
-/** 面板上的「选中一个」：不用在画布上瞄，点一下就把第一条节点 / 线路交给选中集 */
+	onSelect: () => syncSelection()
+})
+/* ---- 三条添加路径：统一 API 的三种 refs 写法 ---- */
+
+/**
+ * 选中集的唯一出口：画布上点（onSelect）与接口选中（selectChange，比如面板上的「选中第一个节点」）
+ * 都汇到这里，面板只认一份读数。签名没变就只刷新读数，不重复触发「点选即加标签」。
+ */
+let lastSelectionKey = ''
+const syncSelection = () => {
+	const selections = view?.getSelections() ?? []
+	const key = selections.map(entry => `${entry.type}:${entry.index}`).join(',')
+	selectedIds.value = selections.map(entry => entry.item?.id ?? String(entry.index))
+	selectionText.value = selections.length
+		? `选中 ${selections.length} 条：${selectedIds.value.join('、')}`
+		: '未选中（先在画布上点一个节点 / 线路 / 通道）'
+	if (key === lastSelectionKey) {
+		return
+	}
+	lastSelectionKey = key
+	if (autoAddOnSelect.value && selections.length) {
+		addToSelection()
+	}
+}
+
+/** 面板上的「选中一个」：不用在画布上瞄，点一下就把第一条节点 / 线路交给选中集 */
 const selectFirst = (kind) => {
-	const item = kind === 'line' ? view?.getData().lines?.[0] : view?.getData().points?.[0]
-	if (!item) {
-		return
-	}
-	if (kind === 'line') {
-		labelKind.value = 'line'
-	}
+	const item = kind === 'line' ? view?.getData().lines?.[0] : view?.getData().points?.[0]
+	if (!item) {
+		return
+	}
+	if (kind === 'line') {
+		labelKind.value = 'line'
+	}
 	view.selectFeatures([item.id])
 	pushLog('select', `用接口选中 ${item.id}`)
 }
@@ -221,287 +221,287 @@ const focusPerItemLabels = () => {
 		: '逐条交互示例没有读出来'
 	pushLog('逐条标签', perItemText.value)
 }
-
-/** 记住这一批加出来的 labelId：批量改 / 批量删就动这一批（addOnce 每次写 备注1 / 备注2…） */
-const rememberBatch = (result) => {
-	const id = result?.added?.[0]?.labelId
-	if (id) {
-		batchLabelId.value = id
-	}
-}
-
-/** 每一次「加一条」的序号：内容与 offset 都跟着它走，连着点几次就能看出是几条 */
-const addSerial = ref(0)
-
-/**
- * 三个「加一条」按钮共用的那一步：序号进一位 → 按 refs 调 addLabels。
- * 加出来的标签默认和别的标签共用一张避让网格：位置压在一起就整条不画 ——
- * 面板上看着像「只有第一次加上了」，所以这里给每条错开位置（offset 按序号往下叠），
- * 并把 avoidOverlap 关掉：使用方亲手加的标签一定画出来。
- */
-const addOnce = (kind, refs, positionOf, color, suffix = '') => {
-	const v = view
-	if (!v) {
-		return null
-	}
-	addSerial.value += 1
-	const serial = addSerial.value
-	const result = v.addLabels(kind, refs, (item, index) => ({
-		id: `备注${serial}`,
-		content: `${item.name ?? item.id} · 备注${suffix}#${serial}`,
-		position: typeof positionOf === 'function' ? positionOf(item, index) : positionOf,
-		offset: [0, 18 * ((serial - 1) % 5)],
-		style: { color },
-		avoidOverlap: false
-	}))
-	rememberBatch(result)
-	return result
-}
-
-/** 给当前选中集加一条（点节点 / 线路 / 通道选中后再点这个按钮，或勾上「点选即加标签」） */
-const addToSelection = () => {
-	const result = addOnce(labelKind.value, 'selection', () => (labelKind.value === 'line' ? 0.35 : 'bottom-right'), '#ffd166')
-	if (result) {
-		pushLog('addLabels', `选中集：新增 ${result.added.length} 条，跳过 ${result.skipped.length} 条 · labelId ${batchLabelId.value}`)
-	}
-}
-
-/** 给全部节点加（同一份定义，内容按要素各写各的） */
-const addToAll = () => {
-	const result = addOnce(labelKind.value, 'all', () => (labelKind.value === 'line' ? 0.5 : 'top-left'), '#9fe8c8')
-	if (result) {
-		pushLog('addLabels', `全部：新增 ${result.added.length} 条，跳过 ${result.skipped.length} 条 · labelId ${batchLabelId.value}`)
-	}
-}
-
-/** 给整条通道的回线一起加（refs 写 { channel: id }，与「整条通道」在界面上的说法一致） */
-const addToChannel = (channelId) => {
-	const result = addOnce('line', { channel: channelId }, 0.6, '#ff9ecb', ' · 通道')
-	if (result) {
-		pushLog('addLabels', `通道 ${channelId}：新增 ${result.added.length} 条，跳过 ${result.skipped.length} 条 · labelId ${batchLabelId.value}`)
-	}
-}
-
-/** 批量改：所有带 batchLabelId 的要素一起换内容与样式 */
-const updateBatch = () => {
-	const result = view?.updateLabels(labelKind.value, 'all', {
-		labelId: batchLabelId.value,
-		content: form.content,
-		style: { color: form.color }
-	})
-	if (result) {
-		pushLog('updateLabels', `改到 ${result.updated.length} 条，跳过 ${result.skipped.length} 条`)
-	}
-}
-
-/** 批量删：运行时加的删掉那一份，声明里的改成隐藏（removeLabels 的返回里分开报） */
-const removeBatch = () => {
-	const result = view?.removeLabels(labelKind.value, 'all', batchLabelId.value)
-	if (result) {
-		pushLog('removeLabels', `删掉 ${result.removed} 条 / 隐藏 ${result.hidden} 条`)
-		hit.value = null
-	}
-}
-
-/** 选中集里到底有几条要素：给面板一个「这次会加到几条」的预览读数 */
-const selectionPreview = computed(() => {
-	// 读一下 selectedIds：选中集变了这个 computed 才会重算（view 本身不是响应式的）
-	const ids = selectedIds.value
-	if (!ids.length) {
-		return '当前选中集是空的：先在画布上点一个要素'
-	}
-	const targets = view?.resolveLabelTargets(labelKind.value, 'selection') ?? []
-	return targets.length
-		? `本次会加到 ${targets.length} 条：${targets.map(item => item.id).join('、')}`
-		: '当前选中集里没有这一类要素（换另一类标签试试）'
-})
-/* ---- 标签自己的事件：点选 / 拖动 / 右键 / 双击 ---- */
-
-const onLabelClick = (payload) => {
-	// 点一下就是把这一条交给面板：内容、来源、父级都在载荷里，不用自己去猜
-	hit.value = payload
-	syncFormFromHit()
-	pushLog('labelClick', describeLabel(payload))
-}
-
-const onLabelDrag = (payload) => {
-	// 拖动过程每次 move 都会发：日志只记 start / end 两条，免得刷屏
-	if (payload.phase === 'move') {
-		return
-	}
-	pushLog('labelDrag', `${payload.phase}：${describeLabel(payload)} 偏移 [${payload.offset.map(value => value.toFixed(1)).join(', ')}]`)
-	if (payload.phase === 'end' && payload.moved) {
-		syncLabelStates()
-	}
-}
-
-const onLabelContextMenu = (payload) => {
-	hit.value = payload
-	syncFormFromHit()
+
+/** 记住这一批加出来的 labelId：批量改 / 批量删就动这一批（addOnce 每次写 备注1 / 备注2…） */
+const rememberBatch = (result) => {
+	const id = result?.added?.[0]?.labelId
+	if (id) {
+		batchLabelId.value = id
+	}
+}
+
+/** 每一次「加一条」的序号：内容与 offset 都跟着它走，连着点几次就能看出是几条 */
+const addSerial = ref(0)
+
+/**
+ * 三个「加一条」按钮共用的那一步：序号进一位 → 按 refs 调 addLabels。
+ * 加出来的标签默认和别的标签共用一张避让网格：位置压在一起就整条不画 ——
+ * 面板上看着像「只有第一次加上了」，所以这里给每条错开位置（offset 按序号往下叠），
+ * 并把 avoidOverlap 关掉：使用方亲手加的标签一定画出来。
+ */
+const addOnce = (kind, refs, positionOf, color, suffix = '') => {
+	const v = view
+	if (!v) {
+		return null
+	}
+	addSerial.value += 1
+	const serial = addSerial.value
+	const result = v.addLabels(kind, refs, (item, index) => ({
+		id: `备注${serial}`,
+		content: `${item.name ?? item.id} · 备注${suffix}#${serial}`,
+		position: typeof positionOf === 'function' ? positionOf(item, index) : positionOf,
+		offset: [0, 18 * ((serial - 1) % 5)],
+		style: { color },
+		avoidOverlap: false
+	}))
+	rememberBatch(result)
+	return result
+}
+
+/** 给当前选中集加一条（点节点 / 线路 / 通道选中后再点这个按钮，或勾上「点选即加标签」） */
+const addToSelection = () => {
+	const result = addOnce(labelKind.value, 'selection', () => (labelKind.value === 'line' ? 0.35 : 'bottom-right'), '#ffd166')
+	if (result) {
+		pushLog('addLabels', `选中集：新增 ${result.added.length} 条，跳过 ${result.skipped.length} 条 · labelId ${batchLabelId.value}`)
+	}
+}
+
+/** 给全部节点加（同一份定义，内容按要素各写各的） */
+const addToAll = () => {
+	const result = addOnce(labelKind.value, 'all', () => (labelKind.value === 'line' ? 0.5 : 'top-left'), '#9fe8c8')
+	if (result) {
+		pushLog('addLabels', `全部：新增 ${result.added.length} 条，跳过 ${result.skipped.length} 条 · labelId ${batchLabelId.value}`)
+	}
+}
+
+/** 给整条通道的回线一起加（refs 写 { channel: id }，与「整条通道」在界面上的说法一致） */
+const addToChannel = (channelId) => {
+	const result = addOnce('line', { channel: channelId }, 0.6, '#ff9ecb', ' · 通道')
+	if (result) {
+		pushLog('addLabels', `通道 ${channelId}：新增 ${result.added.length} 条，跳过 ${result.skipped.length} 条 · labelId ${batchLabelId.value}`)
+	}
+}
+
+/** 批量改：所有带 batchLabelId 的要素一起换内容与样式 */
+const updateBatch = () => {
+	const result = view?.updateLabels(labelKind.value, 'all', {
+		labelId: batchLabelId.value,
+		content: form.content,
+		style: { color: form.color }
+	})
+	if (result) {
+		pushLog('updateLabels', `改到 ${result.updated.length} 条，跳过 ${result.skipped.length} 条`)
+	}
+}
+
+/** 批量删：运行时加的删掉那一份，声明里的改成隐藏（removeLabels 的返回里分开报） */
+const removeBatch = () => {
+	const result = view?.removeLabels(labelKind.value, 'all', batchLabelId.value)
+	if (result) {
+		pushLog('removeLabels', `删掉 ${result.removed} 条 / 隐藏 ${result.hidden} 条`)
+		hit.value = null
+	}
+}
+
+/** 选中集里到底有几条要素：给面板一个「这次会加到几条」的预览读数 */
+const selectionPreview = computed(() => {
+	// 读一下 selectedIds：选中集变了这个 computed 才会重算（view 本身不是响应式的）
+	const ids = selectedIds.value
+	if (!ids.length) {
+		return '当前选中集是空的：先在画布上点一个要素'
+	}
+	const targets = view?.resolveLabelTargets(labelKind.value, 'selection') ?? []
+	return targets.length
+		? `本次会加到 ${targets.length} 条：${targets.map(item => item.id).join('、')}`
+		: '当前选中集里没有这一类要素（换另一类标签试试）'
+})
+/* ---- 标签自己的事件：点选 / 拖动 / 右键 / 双击 ---- */
+
+const onLabelClick = (payload) => {
+	// 点一下就是把这一条交给面板：内容、来源、父级都在载荷里，不用自己去猜
+	hit.value = payload
+	syncFormFromHit()
+	pushLog('labelClick', describeLabel(payload))
+}
+
+const onLabelDrag = (payload) => {
+	// 拖动过程每次 move 都会发：日志只记 start / end 两条，免得刷屏
+	if (payload.phase === 'move') {
+		return
+	}
+	pushLog('labelDrag', `${payload.phase}：${describeLabel(payload)} 偏移 [${payload.offset.map(value => value.toFixed(1)).join(', ')}]`)
+	if (payload.phase === 'end' && payload.moved) {
+		syncLabelStates()
+	}
+}
+
+const onLabelContextMenu = (payload) => {
+	hit.value = payload
+	syncFormFromHit()
 	// 用原始指针事件的 clientX / clientY 把自绘菜单贴在指针位置（系统菜单已被 preventContextMenu 收掉）
 	menu.open = true
 	menu.x = payload.originalEvent?.clientX ?? 0
 	menu.y = payload.originalEvent?.clientY ?? 0
 	pushLog('labelContextMenu', `右键 ${describeLabel(payload)} @ ${menu.x}, ${menu.y}`)
-}
-
-const onLabelDblClick = (payload) => {
-	// 双击接成「重置偏移」：改过的内容与样式留着，只把拖出来的那一段清掉
-	const result = view?.resetLabel(payload.kind, payload.id ?? payload.index, payload.labelId)
-	pushLog('labelDblClick', `重置偏移：${describeLabel(payload)} → ${result ? '已还原' : '本来就没拖过'}`)
-}
-
-/** 编辑面板「应用」：内容 / 位置 / 颜色 / 隐藏一起写进 updateLabel */
-const applyEdit = () => {
-	const payload = hit.value
-	if (!payload) {
-		return
-	}
-	const patch = {
-		labelId: payload.labelId,
-		content: form.content,
-		position: payload.kind === 'line' ? Number(form.position) : form.position,
-		style: { color: form.color },
-		hidden: form.hidden
-	}
-	const state = view?.updateLabel(payload.kind, payload.id ?? payload.index, patch)
-	pushLog('updateLabel', state ? `${describeLabel(payload)} → 内容「${form.content}」` : '这一条已经不在了')
-	hit.value = state ? { ...payload, label: { ...payload.label, content: form.content, position: patch.position }, state } : null
-}
-
-/** 右键菜单：切位置（点标签 8 个锚点轮换，线路标签沿线比例轮换） */
-const cyclePosition = () => {
-	const payload = hit.value
-	if (!payload) {
-		return
-	}
-	const list = payload.kind === 'line' ? CHANNEL_POSITIONS : POINT_POSITIONS
-	const current = payload.label?.position ?? (payload.kind === 'line' ? 0.5 : 'top')
-	const next = list[(Math.max(0, list.indexOf(current)) + 1) % list.length]
-	const state = view?.updateLabel(payload.kind, payload.id ?? payload.index, { labelId: payload.labelId, position: next })
-	form.position = next
-	// 读数跟着换：面板上的「位置」与事件日志都读 hit.value，不回写就会停在改之前的那一档
-	hit.value = { ...payload, label: { ...payload.label, position: next }, state: state ?? payload.state }
-	pushLog('updateLabel', `${describeLabel(payload)} 位置 → ${next}`)
-	menu.open = false
-}
-
-const toggleHidden = () => {
-	const payload = hit.value
-	if (!payload) {
-		return
-	}
-	form.hidden = !form.hidden
-	const state = view?.updateLabel(payload.kind, payload.id ?? payload.index, { labelId: payload.labelId, hidden: form.hidden })
-	hit.value = { ...payload, state: state ?? payload.state }
-	pushLog('updateLabel', `${describeLabel(payload)} ${form.hidden ? '已隐藏' : '已显示'}`)
-	menu.open = false
-}
-
-const resetOffset = () => {
-	const payload = hit.value
-	if (!payload) {
-		return
-	}
-	view?.resetLabel(payload.kind, payload.id ?? payload.index, payload.labelId)
-	pushLog('resetLabel', `重置偏移：${describeLabel(payload)}`)
-	menu.open = false
-}
-
-/** 删一条：运行时加的直接删，声明里的转成隐藏 */
-const removeOne = () => {
-	const payload = hit.value
-	if (!payload) {
-		return
-	}
-	const result = view?.removeLabel(payload.kind, payload.id ?? payload.index, payload.labelId)
-	pushLog('removeLabel', result ? `${describeLabel(payload)} → ${result.removed ? '已删除' : '改成隐藏'}` : '没找到这一条')
-	hit.value = null
-	menu.open = false
-}
-
-const closeMenu = () => {
-	menu.open = false
-}
-
-const onKeyDown = (event) => {
-	if (event.key === 'Escape') {
-		closeMenu()
-	}
-}
-/** 菜单的收起：点菜单以外的地方、按 Esc、执行完动作都收 */
-const onGlobalPointerDown = (event) => {
-	if (event?.target?.closest?.('.dv-menu')) {
-		return
-	}
-	menu.open = false
-}
-
-const describeChange = (payload) => {
-	if (!payload) {
-		return '—'
-	}
-	if (payload.count !== undefined && payload.count !== null) {
-		return `${payload.action}：${payload.kind ?? '—'} · ${payload.count} 条`
-	}
-	return `${payload.action}：${payload.kind ?? '—'} · ${payload.id ?? payload.index ?? '—'} · ${payload.labelId ?? 'default'}`
-}
-
-/**
- * 标签覆盖读数（getLabelStates）：一次列出「哪些标签被改过 / 拖过 / 隐藏过、哪些是运行时加的」，
- * 不用自己拿 getLabels 逐条比对。labelChange 一响就刷新一次（批量加减改都在这一条路上）。
- */
+}
+
+const onLabelDblClick = (payload) => {
+	// 双击接成「重置偏移」：改过的内容与样式留着，只把拖出来的那一段清掉
+	const result = view?.resetLabel(payload.kind, payload.id ?? payload.index, payload.labelId)
+	pushLog('labelDblClick', `重置偏移：${describeLabel(payload)} → ${result ? '已还原' : '本来就没拖过'}`)
+}
+
+/** 编辑面板「应用」：内容 / 位置 / 颜色 / 隐藏一起写进 updateLabel */
+const applyEdit = () => {
+	const payload = hit.value
+	if (!payload) {
+		return
+	}
+	const patch = {
+		labelId: payload.labelId,
+		content: form.content,
+		position: payload.kind === 'line' ? Number(form.position) : form.position,
+		style: { color: form.color },
+		hidden: form.hidden
+	}
+	const state = view?.updateLabel(payload.kind, payload.id ?? payload.index, patch)
+	pushLog('updateLabel', state ? `${describeLabel(payload)} → 内容「${form.content}」` : '这一条已经不在了')
+	hit.value = state ? { ...payload, label: { ...payload.label, content: form.content, position: patch.position }, state } : null
+}
+
+/** 右键菜单：切位置（点标签 8 个锚点轮换，线路标签沿线比例轮换） */
+const cyclePosition = () => {
+	const payload = hit.value
+	if (!payload) {
+		return
+	}
+	const list = payload.kind === 'line' ? CHANNEL_POSITIONS : POINT_POSITIONS
+	const current = payload.label?.position ?? (payload.kind === 'line' ? 0.5 : 'top')
+	const next = list[(Math.max(0, list.indexOf(current)) + 1) % list.length]
+	const state = view?.updateLabel(payload.kind, payload.id ?? payload.index, { labelId: payload.labelId, position: next })
+	form.position = next
+	// 读数跟着换：面板上的「位置」与事件日志都读 hit.value，不回写就会停在改之前的那一档
+	hit.value = { ...payload, label: { ...payload.label, position: next }, state: state ?? payload.state }
+	pushLog('updateLabel', `${describeLabel(payload)} 位置 → ${next}`)
+	menu.open = false
+}
+
+const toggleHidden = () => {
+	const payload = hit.value
+	if (!payload) {
+		return
+	}
+	form.hidden = !form.hidden
+	const state = view?.updateLabel(payload.kind, payload.id ?? payload.index, { labelId: payload.labelId, hidden: form.hidden })
+	hit.value = { ...payload, state: state ?? payload.state }
+	pushLog('updateLabel', `${describeLabel(payload)} ${form.hidden ? '已隐藏' : '已显示'}`)
+	menu.open = false
+}
+
+const resetOffset = () => {
+	const payload = hit.value
+	if (!payload) {
+		return
+	}
+	view?.resetLabel(payload.kind, payload.id ?? payload.index, payload.labelId)
+	pushLog('resetLabel', `重置偏移：${describeLabel(payload)}`)
+	menu.open = false
+}
+
+/** 删一条：运行时加的直接删，声明里的转成隐藏 */
+const removeOne = () => {
+	const payload = hit.value
+	if (!payload) {
+		return
+	}
+	const result = view?.removeLabel(payload.kind, payload.id ?? payload.index, payload.labelId)
+	pushLog('removeLabel', result ? `${describeLabel(payload)} → ${result.removed ? '已删除' : '改成隐藏'}` : '没找到这一条')
+	hit.value = null
+	menu.open = false
+}
+
+const closeMenu = () => {
+	menu.open = false
+}
+
+const onKeyDown = (event) => {
+	if (event.key === 'Escape') {
+		closeMenu()
+	}
+}
+/** 菜单的收起：点菜单以外的地方、按 Esc、执行完动作都收 */
+const onGlobalPointerDown = (event) => {
+	if (event?.target?.closest?.('.dv-menu')) {
+		return
+	}
+	menu.open = false
+}
+
+const describeChange = (payload) => {
+	if (!payload) {
+		return '—'
+	}
+	if (payload.count !== undefined && payload.count !== null) {
+		return `${payload.action}：${payload.kind ?? '—'} · ${payload.count} 条`
+	}
+	return `${payload.action}：${payload.kind ?? '—'} · ${payload.id ?? payload.index ?? '—'} · ${payload.labelId ?? 'default'}`
+}
+
+/**
+ * 标签覆盖读数（getLabelStates）：一次列出「哪些标签被改过 / 拖过 / 隐藏过、哪些是运行时加的」，
+ * 不用自己拿 getLabels 逐条比对。labelChange 一响就刷新一次（批量加减改都在这一条路上）。
+ */
 const labelStatesText = ref('—')
 const perItemText = ref('第一个节点有两条标签：A 可拖 / 可编辑，B 只读（不可拖 / 不可点）')
-const syncLabelStates = () => {
-	const states = view?.getLabelStates() ?? []
-	if (!states.length) {
-		labelStatesText.value = '还没有改过的标签：改个内容 / 拖一段 / 右键隐藏，这里会列出它的覆盖读数'
-		return
-	}
-	const added = states.filter(state => state.added).length
-	const moved = states.filter(state => (state.offset?.[0] ?? 0) !== 0 || (state.offset?.[1] ?? 0) !== 0).length
-	const hidden = states.filter(state => state.hidden === true).length
-	const head = states.slice(0, 3).map(state => `${state.id ?? state.index}·${state.labelId}${state.hidden ? '（隐藏）' : ''}`).join('，')
-	labelStatesText.value = `改过 ${states.length} 条（运行时加 ${added} / 拖过 ${moved} / 隐藏 ${hidden}）：${head}${states.length > 3 ? ' …' : ''}`
-}
-
-onMounted(() => {
-	view = createGisView(container.value, buildOptions())
-	offEvents = [
-		['labelClick', onLabelClick],
-		['labelDrag', onLabelDrag],
-		['labelContextMenu', onLabelContextMenu],
-		['labelDblClick', onLabelDblClick],
-		['labelChange', (payload) => {
-			pushLog('labelChange', describeChange(payload))
-			syncLabelStates()
-		}],
+const syncLabelStates = () => {
+	const states = view?.getLabelStates() ?? []
+	if (!states.length) {
+		labelStatesText.value = '还没有改过的标签：改个内容 / 拖一段 / 右键隐藏，这里会列出它的覆盖读数'
+		return
+	}
+	const added = states.filter(state => state.added).length
+	const moved = states.filter(state => (state.offset?.[0] ?? 0) !== 0 || (state.offset?.[1] ?? 0) !== 0).length
+	const hidden = states.filter(state => state.hidden === true).length
+	const head = states.slice(0, 3).map(state => `${state.id ?? state.index}·${state.labelId}${state.hidden ? '（隐藏）' : ''}`).join('，')
+	labelStatesText.value = `改过 ${states.length} 条（运行时加 ${added} / 拖过 ${moved} / 隐藏 ${hidden}）：${head}${states.length > 3 ? ' …' : ''}`
+}
+
+onMounted(() => {
+	view = createGisView(container.value, buildOptions())
+	offEvents = [
+		['labelClick', onLabelClick],
+		['labelDrag', onLabelDrag],
+		['labelContextMenu', onLabelContextMenu],
+		['labelDblClick', onLabelDblClick],
+		['labelChange', (payload) => {
+			pushLog('labelChange', describeChange(payload))
+			syncLabelStates()
+		}],
 		// 选中镜像统一走 selectChange：覆盖点击与接口来源，且重复设同一份选中集不会重复通知
 		['selectChange', () => syncSelection()]
-	].map(([name, handler]) => view.on(name, handler))
-	window.addEventListener('keydown', onKeyDown)
-	window.addEventListener('pointerdown', onGlobalPointerDown)
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener('keydown', onKeyDown)
-	window.removeEventListener('pointerdown', onGlobalPointerDown)
-	offEvents.forEach(off => off())
-	offEvents = []
-	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>
+	].map(([name, handler]) => view.on(name, handler))
+	window.addEventListener('keydown', onKeyDown)
+	window.addEventListener('pointerdown', onGlobalPointerDown)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', onKeyDown)
+	window.removeEventListener('pointerdown', onGlobalPointerDown)
+	offEvents.forEach(off => off())
+	offEvents = []
+	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>
 				<button type="button" class="dv-button" @click="view?.selectFeatures(null)">清空选中</button>
-			</div>
-		</div>
+			</div>
+		</div>
 			<aside class="dv-panel">
 				<div class="dv-group">
 					<h3>一键换标签内容<span class="dv-chip">setLabelContent</span></h3>
@@ -538,100 +538,100 @@ onBeforeUnmount(() => {
 				<div class="dv-group">
 				<h3>
 					加标签（统一 API）
-					<span class="dv-chips">
-						<button
-							v-for="item in ['point', 'line']"
-							:key="item"
-							type="button"
-							class="dv-chip"
-							:class="{ 'dv-chip--active': labelKind === item }"
-							@click="labelKind = item"
-						>{{ item === 'point' ? '节点标签' : '线路标签' }}</button>
-					</span>
-				</h3>
-				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" :disabled="!selectedIds.length" @click="addToSelection">给选中加一条</button>
-					<button type="button" class="dv-button" @click="addToAll">给全部加一条</button>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button" @click="selectFirst('point')">选中第一个节点</button>
-					<button type="button" class="dv-button" @click="selectFirst('line')">选中第一条线路</button>
-				</div>
-				<div class="dv-row">
-					<label><input v-model="autoAddOnSelect" type="checkbox" /> 点选即加标签（点节点 / 线路 / 通道）</label>
-				</div>
-				<div class="dv-row">
-					<button
-						v-for="channel in dataset.channels"
-						:key="channel.id"
-						type="button"
-						class="dv-button"
-						@click="addToChannel(channel.id)"
-					>整条通道加：{{ channel.name ?? channel.id }}</button>
-				</div>
-				<p class="dv-readout">{{ selectionText }}</p>
-				<p class="dv-hint">{{ selectionPreview }}</p>
-			</div>
-
-			<div class="dv-group">
-				<h3>编辑这一条<span class="dv-chip">{{ hit ? (hit.labelId ?? 'default') : '未选中' }}</span></h3>
-				<p class="dv-readout">{{ hit ? describeLabel(hit) : '点一下标签选中它，或者右键标签弹出菜单' }}</p>
-				<div class="dv-row">
-					<label>内容<input ref="contentInput" v-model="form.content" class="dv-input" /></label>
-				</div>
-				<div class="dv-row">
-					<label>位置
-						<select v-model="form.position">
-							<option v-for="item in POINT_POSITIONS" :key="item" :value="item">{{ item }}</option>
-						</select>
-					</label>
-					<label>颜色<input v-model="form.color" type="color" /></label>
-					<label><input v-model="form.hidden" type="checkbox" /> 隐藏</label>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" :disabled="!hit" @click="applyEdit">应用（updateLabel）</button>
-					<button type="button" class="dv-button" :disabled="!hit" @click="resetOffset">重置偏移</button>
-					<button type="button" class="dv-button dv-button--danger" :disabled="!hit" @click="removeOne">删除</button>
-				</div>
-				<div class="dv-row">
-					<button type="button" class="dv-button" @click="updateBatch">批量改这一类全部</button>
-					<button type="button" class="dv-button dv-button--danger" @click="removeBatch">批量删这一类全部</button>
-				</div>
-				<p class="dv-readout">{{ labelStatesText }}</p>
-				<p class="dv-hint">
-					批量动的是 labelId「{{ batchLabelId }}」：三个「加一条」按钮每点一次都是一批新标签
-					（id 按序号写 备注1 / 备注2…），内容与 offset 也跟着序号走 —— 加出来的标签默认要和已经放下的
-					标签共用避让网格，位置压在一起就整条不画（看上去像「只加上了一次」），这里给每条错开位置并关掉避让。
-				</p>
-			</div>
-
-			<div class="dv-group">
-				<h3>事件日志</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>
-		</aside>
-
-		<div v-if="menu.open" class="dv-menu" :style="{ left: `${menu.x}px`, top: `${menu.y}px` }">
-			<p class="dv-menu__title">{{ hit ? describeLabel(hit) : '' }}</p>
-			<button type="button" @click="applyEdit">改内容</button>
-			<button type="button" @click="cyclePosition">换位置</button>
-			<button type="button" @click="resetOffset">重置偏移</button>
-			<button type="button" @click="toggleHidden">{{ form.hidden ? '显示这一条' : '隐藏这一条' }}</button>
-			<button type="button" @click="removeOne">删除这一条</button>
-		</div>
-	</section>
-</template>
-
-<style scoped>
-.dv-input {
-	width: 132px;
-	padding: 4px 6px;
-	border: 1px solid #d6e0ec;
-	border-radius: 6px;
-	color: #1f2a44;
-	font-size: 12px;
-}
-</style>
+					<span class="dv-chips">
+						<button
+							v-for="item in ['point', 'line']"
+							:key="item"
+							type="button"
+							class="dv-chip"
+							:class="{ 'dv-chip--active': labelKind === item }"
+							@click="labelKind = item"
+						>{{ item === 'point' ? '节点标签' : '线路标签' }}</button>
+					</span>
+				</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" :disabled="!selectedIds.length" @click="addToSelection">给选中加一条</button>
+					<button type="button" class="dv-button" @click="addToAll">给全部加一条</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" @click="selectFirst('point')">选中第一个节点</button>
+					<button type="button" class="dv-button" @click="selectFirst('line')">选中第一条线路</button>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="autoAddOnSelect" type="checkbox" /> 点选即加标签（点节点 / 线路 / 通道）</label>
+				</div>
+				<div class="dv-row">
+					<button
+						v-for="channel in dataset.channels"
+						:key="channel.id"
+						type="button"
+						class="dv-button"
+						@click="addToChannel(channel.id)"
+					>整条通道加：{{ channel.name ?? channel.id }}</button>
+				</div>
+				<p class="dv-readout">{{ selectionText }}</p>
+				<p class="dv-hint">{{ selectionPreview }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>编辑这一条<span class="dv-chip">{{ hit ? (hit.labelId ?? 'default') : '未选中' }}</span></h3>
+				<p class="dv-readout">{{ hit ? describeLabel(hit) : '点一下标签选中它，或者右键标签弹出菜单' }}</p>
+				<div class="dv-row">
+					<label>内容<input ref="contentInput" v-model="form.content" class="dv-input" /></label>
+				</div>
+				<div class="dv-row">
+					<label>位置
+						<select v-model="form.position">
+							<option v-for="item in POINT_POSITIONS" :key="item" :value="item">{{ item }}</option>
+						</select>
+					</label>
+					<label>颜色<input v-model="form.color" type="color" /></label>
+					<label><input v-model="form.hidden" type="checkbox" /> 隐藏</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" :disabled="!hit" @click="applyEdit">应用（updateLabel）</button>
+					<button type="button" class="dv-button" :disabled="!hit" @click="resetOffset">重置偏移</button>
+					<button type="button" class="dv-button dv-button--danger" :disabled="!hit" @click="removeOne">删除</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" @click="updateBatch">批量改这一类全部</button>
+					<button type="button" class="dv-button dv-button--danger" @click="removeBatch">批量删这一类全部</button>
+				</div>
+				<p class="dv-readout">{{ labelStatesText }}</p>
+				<p class="dv-hint">
+					批量动的是 labelId「{{ batchLabelId }}」：三个「加一条」按钮每点一次都是一批新标签
+					（id 按序号写 备注1 / 备注2…），内容与 offset 也跟着序号走 —— 加出来的标签默认要和已经放下的
+					标签共用避让网格，位置压在一起就整条不画（看上去像「只加上了一次」），这里给每条错开位置并关掉避让。
+				</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>事件日志</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>
+		</aside>
+
+		<div v-if="menu.open" class="dv-menu" :style="{ left: `${menu.x}px`, top: `${menu.y}px` }">
+			<p class="dv-menu__title">{{ hit ? describeLabel(hit) : '' }}</p>
+			<button type="button" @click="applyEdit">改内容</button>
+			<button type="button" @click="cyclePosition">换位置</button>
+			<button type="button" @click="resetOffset">重置偏移</button>
+			<button type="button" @click="toggleHidden">{{ form.hidden ? '显示这一条' : '隐藏这一条' }}</button>
+			<button type="button" @click="removeOne">删除这一条</button>
+		</div>
+	</section>
+</template>
+
+<style scoped>
+.dv-input {
+	width: 132px;
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	color: #1f2a44;
+	font-size: 12px;
+}
+</style>