gis-view-webgl2 0.1.2 → 0.1.4

package/docs/demos/ApiCoverageDemo.vue

@@ -0,0 +1,644 @@
+<script setup>
+/**
+ * 接口能力：把最近几轮新增、但不容易在单个业务场景里看全的 API 放在一页。
+ *
+ * 四块：
+ *   ① 级联高亮的三种触发（单击 / 多选 / 框选）可以独立开关；
+ *   ② selectFeatures / selectWaypoint 的程序化选中（节点、线路、通道、分组、拐点）；
+ *   ③ focusOn 的 point / line / channel / group 四种显式类型；
+ *   ④ lineFollowsNode 开关，隐藏端点节点时对照线路是否跟随；
+ * 另外补几个常用只读接口（坐标互转、视口与渲染器、场景快照、下一帧等待等）的现场读数。
+ */
+import { nextTick, 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 view = shallowRef(null)
+const dataset = buildDemoData({ count: 24 })
+
+const triggerOnClick = ref(true)
+const triggerOnMultiSelect = ref(true)
+const triggerOnBoxSelect = ref(true)
+const lineFollowsNode = ref(true)
+const endpointHidden = ref(false)
+const channelId = 'channel-a'
+let groupId = ''
+
+const cascadeReadout = ref('级联高亮：点节点 / 线路 / 通道回线试试；框选也会触发')
+const selectionReadout = ref('尚未选中')
+const focusReadout = ref('尚未聚焦')
+const visibilityReadout = ref('')
+const apiReadout = ref('点一个只读接口看结果')
+const advancedReadout = ref('这里集中演示样式、装饰、通道写入、历史与运行时清理接口')
+const styleApplied = ref(false)
+const geoBackgroundOn = ref(false)
+let timer = null
+
+const toggleStyleApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	if (styleApplied.value) {
+		current.updatePointStyle({ color: '#fff', size: 6, strokeColor: '#4c8dff', strokeWidth: 1.4 })
+		current.updateLineStyle({ color: 'rgba(100, 150, 220, 0.55)', width: 1.5 })
+	}
+	else {
+		current.updatePointStyle({ color: '#fde68a', size: 8, strokeColor: '#f59e0b', strokeWidth: 2 })
+		current.updateLineStyle({ color: '#fbbf24', width: 2.6 })
+	}
+	styleApplied.value = !styleApplied.value
+	const options = current.getOptions()
+	advancedReadout.value = `updatePointStyle / updateLineStyle 字段级合并：点 size=${options.pointStyle?.size ?? '—'} / 线 width=${options.lineStyle?.width ?? '—'} · ${styleApplied.value ? '已应用高亮样式' : '已恢复演示样式'}`
+}
+
+const exercisePointDecorationApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const before = current.getPointDecorations('node-0').length
+	const added = current.addPointDecoration('node-0', {
+		symbol: 'square',
+		color: '#fbbf24',
+		strokeColor: '#0f172a',
+		strokeWidth: 1,
+		size: 18,
+		offset: [20, 0]
+	})
+	const updated = current.updatePointDecoration('node-0', before, { size: 22 })
+	const afterUpdate = current.getPointDecorations('node-0').length
+	const removed = current.removePointDecoration('node-0', before)
+	advancedReadout.value = `节点装饰 CRUD：addPointDecoration=${added ? 'ok' : 'null'} · updatePointDecoration size=${updated?.size ?? '—'} · getPointDecorations=${afterUpdate} 条 · removePointDecoration=${removed ? 'ok' : 'null'}`
+}
+
+const exerciseLineDecorationApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const before = current.getLineDecorations('line-0').length
+	const added = current.addLineDecoration('line-0', {
+		symbol: 'square',
+		color: '#22d3ee',
+		size: 14,
+		position: 0.5
+	})
+	const updated = current.updateLineDecoration('line-0', before, { size: 20 })
+	const removed = current.removeLineDecoration('line-0', before)
+	advancedReadout.value = `线路装饰 CRUD：addLineDecoration=${added ? 'ok' : 'null'} · updateLineDecoration size=${updated?.size ?? '—'} · removeLineDecoration=${removed ? 'ok' : 'null'}`
+}
+
+const exerciseChannelLineApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const between = current.getChannelBetween('node-0', 'node-7')
+	current.setChannelLineWidth(channelId, 3.4)
+	const added = current.addLines({ id: 'api-temp-line', from: 'node-1', to: 'node-2', color: '#fb923c' })
+	current.clearChangedLines()
+	current.updateLine('api-temp-line', { color: '#22d3ee', width: 3 })
+	const changed = current.getChangedLines({ reasons: ['fields'] })
+	current.clearChangedLines()
+	const removed = current.removeLines('api-temp-line')
+	current.setChannelLineWidth(channelId, 2.6)
+	advancedReadout.value = `通道 / 线路写入：getChannelBetween=${between?.hasChannel ? `已有 ${between.groups.length} 组` : '无'} · setChannelLineWidth=3.4→2.6 · addLines=${added.count} 条 · getChangedLines=${changed.length} 条 · clearChangedLines + removeLines=${removed.ok ? 'ok' : 'failed'}`
+}
+
+const exerciseVisibilityApis = () => {
+	const current = view.value
+	const entry = current?.listPoints().find(item => String(item.item?.id) === 'node-2')
+	if (!current || !entry) {
+		return
+	}
+	const hiddenOutcome = current.setFeatureVisible('point', 'node-2', false)
+	const hidden = current.isPointVisible(entry.index)
+	const shownOutcome = current.setFeatureVisible('point', 'node-2', true)
+	const shown = current.isPointVisible(entry.index)
+	advancedReadout.value = `setFeatureVisible / isPointVisible：隐藏 ${hiddenOutcome.ok ? 'ok' : 'failed'} → isPointVisible=${hidden} · 恢复 ${shownOutcome.ok ? 'ok' : 'failed'} → isPointVisible=${shown}`
+}
+
+const toggleGeoBackgroundApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	if (geoBackgroundOn.value) {
+		const labels = current.getBackgroundLabels()
+		const projection = current.getGeoProjection()
+		current.updateBackground({})
+		geoBackgroundOn.value = false
+		advancedReadout.value = `移开演示背景：清理前 getBackgroundLabels=${labels?.length ?? 0} 条 · getGeoProjection=${projection ? '有' : 'null'} · updateBackground({}) 已恢复透明底`
+		return
+	}
+	const bounds = current.getBounds()
+	const ring = [
+		[bounds.minX, bounds.minY],
+		[bounds.maxX, bounds.minY],
+		[bounds.maxX, bounds.maxY],
+		[bounds.minX, bounds.maxY],
+		[bounds.minX, bounds.minY]
+	]
+	current.updateBackground({
+		color: '#081321',
+		geoJson: {
+			type: 'FeatureCollection',
+			features: [{
+				type: 'Feature',
+				properties: { name: '接口演示范围' },
+				geometry: { type: 'Polygon', coordinates: [ring] }
+			}]
+		},
+		geoJsonStyle: {
+			areaColor: '#12253f',
+			borderColor: '#38bdf8',
+			borderWidth: 1.5,
+			fillOpacity: 0.18,
+			aspectScale: 1,
+			label: { show: true, formatter: '{name}', fontSize: 12, color: '#bae6fd' }
+		}
+	})
+	geoBackgroundOn.value = true
+	const labels = current.getBackgroundLabels()
+	const projection = current.getGeoProjection()
+	const mapped = current.mapDataToGeoJson(current.getData(), { mode: 'lngLat' })
+	advancedReadout.value = `updateBackground / GeoJSON：getBackgroundLabels=${labels?.length ?? 0} 条 · getGeoProjection=${projection ? '有' : 'null'} · mapDataToGeoJson=${mapped?.points?.length ?? 0} 个节点 / ${mapped?.lines?.length ?? 0} 条线路`
+}
+
+const exerciseHistoryApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const original = current.getData().points.find(item => String(item.id) === 'node-1')
+	current.updatePoint('node-1', { name: `接口历史 ${Date.now()}` })
+	const undone = current.undo()
+	const redoReady = current.canRedo()
+	const redone = current.redo()
+	const restored = current.getData().points.find(item => String(item.id) === 'node-1')
+	const mergeCommitted = current.commitPointMerge()
+	const mergeReverted = current.revertPointMerge({ silent: true })
+	const preview = current.setDropPreview({ kind: 'point', world: [original?.x ?? 0, original?.y ?? 0], item: { size: 18, color: '#22d3ee' } })
+	const previewReadout = current.getDropPreview()
+	current.setDropPreview(null)
+	advancedReadout.value = `历史 / 收尾：undo=${undone ? 'ok' : 'null'} → canRedo=${redoReady} → redo=${redone ? 'ok' : 'null'} → name=${restored?.name ?? '—'} · isLayoutReady=${current.isLayoutReady()} · commitPointMerge=${mergeCommitted} / revertPointMerge=${mergeReverted ? 'payload' : 'null'} · getDropPreview=${previewReadout?.kind ?? 'null'}（${preview ? '已写入' : '失败'}，随后清掉）`
+}
+
+const exerciseOnceApi = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	let fired = 0
+	const stop = current.once('cameraChange', () => { fired += 1 })
+	current.zoomBy(1.01)
+	current.zoomBy(1 / 1.01)
+	stop()
+	advancedReadout.value = `once('cameraChange')：两次相机变化只触发 ${fired} 次（订阅在第一次回调后自动摘掉，返回的 stop 可提前取消）`
+}
+
+const exerciseCopyApis = () => {
+	const current = view.value
+	const source = current?.getData().points.find(item => String(item.id) === 'node-2')
+	if (!current || !source) {
+		return
+	}
+	const started = current.beginCopyPoint({
+		id: 'node-2',
+		coordinate: [Number(source.x) + 0.2, Number(source.y) + 0.2],
+		autoCommit: false,
+		via: 'api-demo'
+	})
+	const updated = current.updateCopyPoint({ name: '接口复制预览' })
+	const committed = current.commitPointCopy()
+	const copyId = committed?.item?.id
+	if (copyId !== undefined && copyId !== null) {
+		current.removePoints([copyId])
+	}
+	advancedReadout.value = `复制收尾：beginCopyPoint=${started ? 'preview' : 'null'} · updateCopyPoint=${updated?.name ?? 'null'} · commitPointCopy=${committed ? 'ok' : 'null'} · 清理 removePoints=${copyId !== undefined && copyId !== null ? 'ok' : 'skipped'}`
+}
+
+const exerciseRemoveApis = () => {
+	const current = view.value
+	const anchor = current?.getData().points.find(item => String(item.id) === 'node-3')
+	if (!current || !anchor) {
+		return
+	}
+	current.addPoints({ id: 'api-remove-node', x: Number(anchor.x) + 0.08, y: Number(anchor.y) + 0.08, name: '待删除临时节点' })
+	current.selectFeatures('api-remove-node')
+	current.requestRemove()
+	const pending = current.getRemoveRequest()
+	pending?.cancel()
+	const canceled = current.getRemoveRequest()
+	const removed = current.removeSelected()
+	advancedReadout.value = `删除两条路：requestRemove → getRemoveRequest=${pending ? 'pending' : 'null'} → cancel=${canceled ? 'still pending' : 'cleared'} · removeSelected=${removed.ok ? `${removed.pointIds.length} 个节点` : removed.reason ?? 'failed'}`
+}
+
+const exerciseWebGLApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	current.addWebGLLayer({ id: 'api-temp-layer', order: 999, draw() {} })
+	const before = current.getWebGLLayers().length
+	const cleared = current.clearWebGLLayers()
+	const after = current.getWebGLLayers().length
+	advancedReadout.value = `WebGL 层：addWebGLLayer → ${before} 层 · clearWebGLLayers=${cleared} · 剩余 ${after} 层`
+}
+
+const exerciseRegistryApis = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const disposeSymbol = current.registerSymbol('api-ring', () => {})
+	const disposeOperator = current.registerOperator('api-even', value => candidate => Number(candidate) % 2 === Number(value))
+	const symbols = current.listSymbols()
+	const operators = current.listOperators()
+	const removedSymbol = current.unregisterSymbol('api-ring')
+	const removedOperator = current.unregisterOperator('api-even')
+	disposeSymbol()
+	disposeOperator()
+	advancedReadout.value = `注册表：registerSymbol → listSymbols=${symbols.join(', ') || '空'} → unregisterSymbol=${removedSymbol} · registerOperator → listOperators 含 api-even=${operators.includes('api-even')} → unregisterOperator=${removedOperator}`
+}
+
+const readInitialOptions = () => {
+	const options = view.value?.getOptions()
+	if (!options) {
+		return
+	}
+	advancedReadout.value = `初始化 options：ariaLabel=${options.ariaLabel ?? '—'} · labelRender=${options.labelRender ?? 'auto'} · gridSize=${options.gridSize ?? '—'} · fitOnInit=${options.fitOnInit} · progressiveInit=${options.progressiveInit} · pixelRatio=${options.pixelRatio ?? 'devicePixelRatio'} · maxCanvasPixels=${options.maxCanvasPixels} · waypointStyle=${options.waypointStyle ? '已配置' : '缺省'} · zoomBaseScale=${options.zoomBaseScale ?? '首次适应'} · webglLayers=${options.webglLayers?.length ?? 0}`
+}
+
+const cascadeOptions = () => ({
+	scope: 'both',
+	triggerOnClick: triggerOnClick.value,
+	triggerOnMultiSelect: triggerOnMultiSelect.value,
+	triggerOnBoxSelect: triggerOnBoxSelect.value,
+	pointStyle: { color: '#ecfeff', strokeColor: '#06b6d4', strokeWidth: 2.5, sizeScale: 1.2 },
+	lineStyle: { color: '#06b6d4', width: 3, opacity: 0.95 },
+	clearOnEmptyClick: true
+})
+
+const describeCascade = (payload) => {
+	if (!payload) {
+		return '级联高亮：已收起（空白处、来源失效或数据刷新）'
+	}
+	const origin = payload.origin?.target === 'channel'
+		? `通道 ${payload.origin.channelId ?? '—'} / 分组 ${payload.origin.groupId ?? '—'}`
+		: payload.origin?.target === 'line'
+			? `线路 ${payload.origin.item?.id ?? payload.origin.index}`
+			: `节点 ${payload.origin?.item?.id ?? payload.origin?.index}`
+	return `${origin} → ${payload.pointIndexes.length} 个节点 / ${payload.lineIndexes.length} 条线路（与选中集独立）`
+}
+
+const refreshSelection = () => {
+	const data = view.value?.getSelectionData()
+	if (!data?.count) {
+		selectionReadout.value = '尚未选中'
+		return
+	}
+	const parts = []
+	if (data.pointCount) parts.push(`节点 ${data.pointCount}`)
+	if (data.lineCount) parts.push(`线路 ${data.lineCount}`)
+	if (data.channelCount) parts.push(`通道 ${data.channelCount}`)
+	selectionReadout.value = `${data.count} 项：${parts.join(' / ')}${data.ids.length ? ` · ids ${data.ids.slice(0, 6).join(', ')}` : ''}`
+}
+
+const refreshVisibility = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const pointCount = current.listPoints({ visibleOnly: true }).length
+	const lineCount = current.listLines({ visibleOnly: true }).length
+	visibilityReadout.value = `${pointCount} 个可见节点 / ${lineCount} 条可见线路 · 端点 node-0 ${endpointHidden.value ? '已隐藏' : '可见'} · lineFollowsNode=${lineFollowsNode.value}`
+}
+
+const scheduleRefreshVisibility = () => {
+	window.clearTimeout(timer)
+	timer = window.setTimeout(refreshVisibility, 120)
+}
+
+const applyCascadeTriggers = () => {
+	view.value?.updateOptions({ cascadeHighlight: cascadeOptions() })
+	cascadeReadout.value = `级联触发：单击 ${triggerOnClick.value ? '开' : '关'} · 多选 ${triggerOnMultiSelect.value ? '开' : '关'} · 框选 ${triggerOnBoxSelect.value ? '开' : '关'}`
+}
+
+const applyLineFollowsNode = () => {
+	view.value?.updateOptions({ lineFollowsNode: lineFollowsNode.value })
+	scheduleRefreshVisibility()
+	emit('notice', `lineFollowsNode 已切换为 ${lineFollowsNode.value}`)
+}
+
+const toggleEndpoint = () => {
+	endpointHidden.value = !endpointHidden.value
+	view.value?.updatePoint('node-0', { visible: !endpointHidden.value })
+	scheduleRefreshVisibility()
+}
+
+const selectNode = () => {
+	view.value?.selectFeatures('node-0')
+	refreshSelection()
+}
+
+const selectLine = () => {
+	view.value?.selectFeatures({ type: 'line', id: 'line-0' })
+	refreshSelection()
+}
+
+const selectChannel = () => {
+	view.value?.selectFeatures({ type: 'channel', channelId })
+	refreshSelection()
+}
+
+const selectGroup = () => {
+	if (!groupId) {
+		groupId = view.value?.getChannelGroups(channelId)?.[0]?.id ?? ''
+	}
+	if (groupId !== '') {
+		view.value?.selectFeatures({ type: 'group', channelId, groupId })
+	}
+	refreshSelection()
+}
+
+const selectWaypoint = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const entry = current.listLines().find(line => String(line.item?.id) === 'line-0')
+	if (!entry) {
+		selectionReadout.value = '没有找到 line-0'
+		return
+	}
+	if (!current.getWaypoints(entry.index).length) {
+		const data = current.getData()
+		const line = data.lines.find(item => String(item.id) === 'line-0')
+		const from = data.points.find(point => String(point.id) === String(line?.from))
+		const to = data.points.find(point => String(point.id) === String(line?.to))
+		if (from && to) {
+			current.addWaypoint('line-0', [(Number(from.x) + Number(to.x)) / 2 + 0.16, (Number(from.y) + Number(to.y)) / 2 + 0.16])
+		}
+	}
+	current.selectWaypoint({ lineIndex: entry.index, pathIndex: 1 })
+	refreshSelection()
+}
+
+const clearSelection = () => {
+	view.value?.selectFeatures(null)
+	refreshSelection()
+}
+
+const focusTarget = (target, label) => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	current.focusOn(target, { zoom: true, padding: 64, maxZoom: 20 })
+	const camera = current.getCamera()
+	focusReadout.value = `${label}：scale ${camera.scale.toPrecision(5)} · 中心 [${camera.center.map(value => Number(value).toFixed(3)).join(', ')}]`
+	refreshSelection()
+}
+
+const focusNode = () => focusTarget({ type: 'point', id: 'node-0' }, 'focusOn(point node-0)')
+const focusLine = () => focusTarget({ type: 'line', id: 'line-0' }, 'focusOn(line line-0)')
+const focusChannel = () => focusTarget({ type: 'channel', channelId }, 'focusOn(channel channel-a)')
+const focusGroup = () => {
+	if (!groupId) {
+		groupId = view.value?.getChannelGroups(channelId)?.[0]?.id ?? ''
+	}
+	if (groupId !== '') {
+		focusTarget({ type: 'group', channelId, groupId }, 'focusOn(group channel-a 第一组)')
+	}
+}
+
+const readCoordinateRoundTrip = () => {
+	const current = view.value
+	const point = current?.getData().points.find(item => String(item.id) === 'node-0')
+	if (!current || !point) {
+		return
+	}
+	const screen = current.worldToClient(point.x, point.y)
+	const world = current.clientToWorld(screen[0], screen[1])
+	const lngLat = current.worldToLngLat(point.x, point.y)
+	const back = current.lngLatToWorld(lngLat[0], lngLat[1])
+	apiReadout.value = `worldToClient → [${screen.map(value => value.toFixed(2)).join(', ')}] · clientToWorld → [${world.map(value => value.toFixed(4)).join(', ')}] · lngLat → [${lngLat.map(value => value.toFixed(5)).join(', ')}] · lngLatToWorld → [${back.map(value => value.toFixed(4)).join(', ')}]`
+}
+
+const readViewportAndRenderer = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const viewport = current.getViewport()
+	const renderer = current.getRendererInfo()
+	apiReadout.value = `getViewport ${viewport.cssWidth}×${viewport.cssHeight} CSS / ${viewport.width}×${viewport.height} 像素 · getRendererInfo keys=[${Object.keys(renderer).slice(0, 8).join(', ')}]`
+}
+
+const readSceneSnapshot = () => {
+	const snapshot = view.value?.snapshotScene({ background: false })
+	apiReadout.value = snapshot
+		? `snapshotScene：${snapshot.points?.length ?? 0} 个节点 / ${snapshot.lines?.length ?? 0} 条线路 / ${snapshot.labels?.length ?? 0} 个标签 / ${snapshot.decorations?.length ?? 0} 个装饰`
+		: 'snapshotScene 没有返回'
+}
+
+const readMiscellaneous = () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const filter = current.getFilter()
+	const parallelGroups = current.getParallelGroups()
+	const hover = current.getHover()
+	apiReadout.value = `getFilter=${filter ? '有' : 'null'} · getParallelGroups=${parallelGroups?.length ?? 0} 组 · getHover=${hover?.target ?? 'null'}`
+}
+
+const waitForRendered = async () => {
+	const current = view.value
+	if (!current) {
+		return
+	}
+	const started = performance.now()
+	await current.whenDataRendered()
+	apiReadout.value = `whenDataRendered 已兑现 · ${(performance.now() - started).toFixed(1)} ms`
+}
+
+const countPointsInView = () => {
+	let count = 0
+	view.value?.forEachPointInView(() => { count += 1 })
+	apiReadout.value = `forEachPointInView：${count} 个节点落在当前视口`
+}
+
+onMounted(async () => {
+	view.value = createGisView(container.value, {
+		points: dataset.points,
+		lines: dataset.lines,
+		channels: dataset.channels,
+		features: {
+			pan: true,
+			zoom: true,
+			hover: true,
+			select: true,
+			boxSelect: true,
+			drag: true,
+			waypoint: true,
+			contextMenu: true,
+			keyboard: true
+		},
+		boxSelect: true,
+		multiSelect: true,
+		copy: { enabled: true, autoCommit: false },
+		history: { limit: 30 },
+		labelRender: 'dom',
+		gridSize: 96,
+		fitOnInit: true,
+		progressiveInit: true,
+		pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
+		maxCanvasPixels: 4_000_000,
+		ariaLabel: '接口能力演示画布：支持选中、框选、聚焦与只读接口读数',
+		waypointStyle: { size: 8, color: '#fff', strokeColor: '#38bdf8', strokeWidth: 1.5 },
+		zoomBaseScale: 1,
+		webglLayers: [],
+		clickable: true,
+		draggable: true,
+		waypointEditable: true,
+		waypointVisibility: 'always',
+		lineFollowsNode: true,
+		channelWidth: 2.6,
+		pointStyle: { size: 6, color: '#fff', strokeColor: '#4c8dff', strokeWidth: 1.4 },
+		lineStyle: { width: 1.5, color: 'rgba(100, 150, 220, 0.55)' },
+		fitPadding: 48,
+		cascadeHighlight: cascadeOptions(),
+		onReady: () => emit('notice', '接口能力演示已就绪'),
+		onSelect: (payload) => {
+			refreshSelection()
+			if (payload) {
+				selectionReadout.value += ` · cause=${payload.cause ?? '—'} / mode=${payload.mode ?? '—'}`
+			}
+		},
+		onCascadeHighlight: (payload) => {
+			cascadeReadout.value = describeCascade(payload)
+		}
+	})
+	groupId = String(view.value.getChannelGroups(channelId)?.[0]?.id ?? '')
+	await nextTick()
+	view.value.fitView(48)
+	refreshVisibility()
+})
+
+onBeforeUnmount(() => {
+	window.clearTimeout(timer)
+	view.value?.destroy()
+	view.value = 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(48)">适应全部</button>
+				<button type="button" class="dv-button" @click="clearSelection">清空选中</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>级联高亮三种触发</h3>
+				<div class="dv-row">
+					<label><input v-model="triggerOnClick" data-demo="cascade-trigger-click" type="checkbox" @change="applyCascadeTriggers" /> triggerOnClick</label>
+					<label><input v-model="triggerOnMultiSelect" data-demo="cascade-trigger-multi" type="checkbox" @change="applyCascadeTriggers" /> triggerOnMultiSelect</label>
+					<label><input v-model="triggerOnBoxSelect" data-demo="cascade-trigger-box" type="checkbox" @change="applyCascadeTriggers" /> triggerOnBoxSelect</label>
+				</div>
+				<p class="dv-readout">{{ cascadeReadout }}</p>
+				<p class="dv-hint">单击、多选点击和框选各走各的开关。开着框选触发后，画布上 Shift + 拖一个框，级联会把框内邻接节点与线路一起亮起；关掉时只改选中集。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>程序化选中</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" @click="selectNode">选中节点</button>
+					<button type="button" class="dv-button" @click="selectLine">选中线路</button>
+					<button type="button" class="dv-button" data-demo="select-channel" @click="selectChannel">选中通道</button>
+					<button type="button" class="dv-button" data-demo="select-group" @click="selectGroup">选中分组</button>
+					<button type="button" class="dv-button" data-demo="select-waypoint" @click="selectWaypoint">选中拐点</button>
+				</div>
+				<p class="dv-readout">{{ selectionReadout }}</p>
+				<p class="dv-hint">选中拐点会补一个中间点，并把所在线路一起选上；选中通道 / 分组的读数来自 getSelectionData()。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>focusOn 显式类型</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" @click="focusNode">point</button>
+					<button type="button" class="dv-button" @click="focusLine">line</button>
+					<button type="button" class="dv-button" data-demo="focus-channel" @click="focusChannel">channel</button>
+					<button type="button" class="dv-button" @click="focusGroup">group</button>
+				</div>
+				<p class="dv-readout">{{ focusReadout }}</p>
+				<p class="dv-hint">四种类型都走同一套包围盒适配；这里的 maxZoom 只是示例参数，组件不会额外更改放大倍率。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>线路是否跟随节点</h3>
+				<div class="dv-row">
+					<label><input v-model="lineFollowsNode" data-demo="line-follows-node" type="checkbox" @change="applyLineFollowsNode" /> lineFollowsNode</label>
+					<button type="button" class="dv-button" data-demo="toggle-endpoint" @click="toggleEndpoint">{{ endpointHidden ? '显示端点' : '隐藏端点' }}</button>
+				</div>
+				<p class="dv-readout" data-demo="visibility-readout">{{ visibilityReadout }}</p>
+				<p class="dv-hint">先隐藏 node-0 看对比，再勾掉 lineFollowsNode：开启时绑定线路一起退场；关闭后只收起节点，线路和通道停在最后坐标。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>只读接口</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" @click="readCoordinateRoundTrip">坐标互转</button>
+					<button type="button" class="dv-button" @click="readViewportAndRenderer">视口 / 渲染器</button>
+					<button type="button" class="dv-button" @click="readSceneSnapshot">场景快照</button>
+					<button type="button" class="dv-button" @click="readMiscellaneous">筛选 / 分组 / 悬停</button>
+					<button type="button" class="dv-button" @click="waitForRendered">下一帧 Promise</button>
+					<button type="button" class="dv-button" @click="countPointsInView">视口内节点</button>
+				</div>
+				<p class="dv-readout" data-demo="api-readout">{{ apiReadout }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>样式、装饰与通道写入</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="style-apis" @click="toggleStyleApis">{{ styleApplied ? '恢复字段级样式' : 'updatePointStyle / updateLineStyle' }}</button>
+					<button type="button" class="dv-button" data-demo="point-decoration-apis" @click="exercisePointDecorationApis">节点装饰 CRUD</button>
+					<button type="button" class="dv-button" data-demo="line-decoration-apis" @click="exerciseLineDecorationApis">线路装饰 CRUD</button>
+					<button type="button" class="dv-button" data-demo="channel-line-apis" @click="exerciseChannelLineApis">通道线宽 / 线路对账</button>
+					<button type="button" class="dv-button" data-demo="visibility-apis" @click="exerciseVisibilityApis">setFeatureVisible / isPointVisible</button>
+				</div>
+				<p class="dv-readout" data-demo="advanced-readout">{{ advancedReadout }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>背景、投影与初始化 options</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="geo-background-apis" @click="toggleGeoBackgroundApis">{{ geoBackgroundOn ? '移除 GeoJSON 背景' : 'updateBackground / GeoJSON 投影' }}</button>
+					<button type="button" class="dv-button" data-demo="initial-options" @click="readInitialOptions">读取初始化 options</button>
+				</div>
+				<p class="dv-hint">GeoJSON 按钮会临时铺一块包住数据的区域：可读 getBackgroundLabels / getGeoProjection / mapDataToGeoJson，再点一次恢复透明底。初始化 options 在创建时生效，运行时按键读取当前值。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>历史、复制与运行时清理</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="history-apis" @click="exerciseHistoryApis">历史 / 收尾 / 落点预览</button>
+					<button type="button" class="dv-button" data-demo="once-api" @click="exerciseOnceApi">once 事件</button>
+					<button type="button" class="dv-button" data-demo="copy-apis" @click="exerciseCopyApis">复制预览收尾</button>
+					<button type="button" class="dv-button" data-demo="remove-apis" @click="exerciseRemoveApis">删除请求 / removeSelected</button>
+					<button type="button" class="dv-button" data-demo="webgl-apis" @click="exerciseWebGLApis">WebGL 层清理</button>
+					<button type="button" class="dv-button" data-demo="registry-apis" @click="exerciseRegistryApis">图元 / 运算符注销</button>
+				</div>
+			</div>
+		</aside>
+	</section>
+</template>