gis-view-webgl2 0.1.7 → 0.1.9

package/docs/steps/selftest-full.html

@@ -42,9 +42,9 @@
 					onClick: payload => push('click', payload),
 					onDblClick: payload => push('dblclick', payload),
 					onSelect: payload => push('select', payload),
-					onPointerDown: (payload, event) => push('down', payload),
-					onPointerUp: (payload, event) => push('up', payload),
-					onContextMenu: (payload, event) => push('contextmenu', payload),
+					onPointerDown: payload => push('down', payload),
+					onPointerUp: payload => push('up', payload),
+					onContextMenu: payload => push('contextmenu', payload),
 					onChannelDraft: payload => push('draft', payload),
 					onChannelDraftClick: payload => push('draftclick', payload)
 				})

package/docs/steps/selftest-labels.html

@@ -536,7 +536,7 @@
 					const labelMenuEvent = new MouseEvent('contextmenu', { bubbles: true, cancelable: true, button: 2, clientX: menuRect.left + 4, clientY: menuRect.top + 4 })
 					firstMenu.dispatchEvent(labelMenuEvent)
 					const menuPayload = menuPayloads[menuPayloads.length - 1]
-					check('右键标签发 labelContextMenu：哪一条 / 内容 / 挂在谁 / 指针位置都在，系统菜单被拦下', menuPayload?.labelId === 'default' && menuPayload?.label?.content === '右键站' && menuPayload?.parent?.id === 'm1' && Math.abs(menuPayload.clientX - (menuRect.left + 4)) < 0.01 && labelMenuEvent.defaultPrevented === true, JSON.stringify({ labelId: menuPayload?.labelId, content: menuPayload?.label?.content, parent: menuPayload?.parent?.id, x: menuPayload?.clientX, prevented: labelMenuEvent.defaultPrevented }))
+					check('右键标签发 labelContextMenu：哪一条 / 内容 / 挂在谁 / 指针位置都在，系统菜单被拦下', menuPayload?.labelId === 'default' && menuPayload?.label?.content === '右键站' && menuPayload?.parent?.id === 'm1' && Math.abs(menuPayload.originalEvent.clientX - (menuRect.left + 4)) < 0.01 && menuPayload.clientX === undefined && labelMenuEvent.defaultPrevented === true, JSON.stringify({ labelId: menuPayload?.labelId, content: menuPayload?.label?.content, parent: menuPayload?.parent?.id, x: menuPayload?.originalEvent?.clientX, prevented: labelMenuEvent.defaultPrevented }))
 					check('右键载荷里的 state 与偏移读数和点选同一套', menuPayload?.state === null && Array.isArray(menuPayload?.offset) && menuPayload.offset[0] === 0 && menuPayload.offset[1] === 0, JSON.stringify({ state: menuPayload?.state, offset: menuPayload?.offset }))
 				}
 				menuView.updateOptions({ preventContextMenu: false })
@@ -1363,6 +1363,87 @@
 				check('线路标签同样支持 labelRender: canvas（优化档、6 条全部进画布）', Number(lineCanvas?.dataset.labelCount || 0) === 6 && (lineCanvasLayer?.querySelectorAll('.gis-view__label').length ?? 0) === 0, `画布 ${lineCanvas?.dataset.labelCount ?? 0} 条 / DOM ${lineCanvasLayer?.querySelectorAll('.gis-view__label').length ?? 0} 条`)
 				canvasLineView.destroy()
 				canvasLineHost.remove()
+				// 32. 中心点 API / selectionOnTop / 标签层级 / 跟随节点 / 字号缩放
+				const layerHost = document.createElement('div')
+				layerHost.style.cssText = 'width:640px;height:380px'
+				document.body.append(layerHost)
+				const layerView = createGisView(layerHost, {
+					points: [
+						{ id: 'layer-low', x: 0, y: 0, name: '低层', zIndex: 0 },
+						{ id: 'layer-occluder', x: 30, y: 0, name: '遮挡', zIndex: 20, labelVisible: false },
+						{ id: 'layer-high', x: 200, y: 0, name: '高层', zIndex: 20 },
+						{ id: 'layer-far', x: -100, y: -100, name: '端点', zIndex: 0, labelVisible: false }
+					],
+					lines: [{ id: 'layer-line', from: 'layer-low', to: 'layer-far', name: '选中线' }],
+					channels: [{ id: 'layer-channel', from: 'layer-low', to: 'layer-far', lineIds: ['layer-line'] }],
+					initialView: { scale: 1, center: [0, 0] },
+					zoomBaseScale: 1,
+					label: { enabled: true, content: '{name}', followNodeZIndex: true, maxCount: 20 },
+					showGrid: false
+				})
+				await settle(320)
+				const layerLabel = index => layerHost.querySelector(`.gis-view__label[data-label-kind='point'][data-label-index='${index}']`)
+				check('followNodeZIndex：低层标签先被更高层节点的图标盖住', !layerLabel(0) && Boolean(layerLabel(2)), `低层 ${layerLabel(0) ? '在' : '不在'} / 高层 ${layerLabel(2) ? '在' : '不在'}`)
+				const lowLabelInfo = layerView.getLabels('point', 0)?.[0]
+				const highLabelInfo = layerView.getLabels('point', 2)?.[0]
+				check('getLabels 报出生效层级与跟随开关', lowLabelInfo?.zIndex === 0 && lowLabelInfo?.followNodeZIndex === true && highLabelInfo?.zIndex === 20, JSON.stringify({ low: lowLabelInfo && { zIndex: lowLabelInfo.zIndex, follow: lowLabelInfo.followNodeZIndex }, high: highLabelInfo && { zIndex: highLabelInfo.zIndex, follow: highLabelInfo.followNodeZIndex } }))
+				layerView.updateLabel('point', 'layer-low', { zIndex: 40 })
+				await settle(300)
+				const explicitLow = layerLabel(0)
+				const highNode = layerLabel(2)
+				check('显式 zIndex 压过跟随层级：低层标签重新出现且 CSS 层级更高', Boolean(explicitLow) && Number(getComputedStyle(explicitLow).zIndex) > Number(getComputedStyle(highNode).zIndex), `低层 ${explicitLow ? getComputedStyle(explicitLow).zIndex : '不在'} / 高层 ${highNode ? getComputedStyle(highNode).zIndex : '不在'}`)
+				layerView.updateLabel('point', 'layer-low', { zIndex: null })
+				await settle(300)
+				check('显式层级写回 null 后恢复跟随节点层级', !layerLabel(0) && layerView.getLabels('point', 0)?.[0]?.zIndex === 0, JSON.stringify(layerView.getLabels('point', 0)?.[0] ?? null))
+				layerView.updatePoint('layer-occluder', { zIndex: 0 })
+				await settle(320)
+				check('节点样式链的 zIndex 变了会触发标签重排：遮挡消失后低层标签回来', Boolean(layerLabel(0)) && Number(getComputedStyle(layerLabel(0)).zIndex) === 1000000, layerLabel(0) ? getComputedStyle(layerLabel(0)).zIndex : '没有标签')
+				layerView.selectFeatures(['layer-line'])
+				await settle(120)
+				const lineScene = layerView.snapshotScene()
+				check('selectionOnTop：选中线路在普通节点之后、两端节点之前', lineScene.raisedLines.length === 1 && lineScene.lines.length === 0 && lineScene.points.length === 2 && lineScene.raised.length === 2, JSON.stringify({ raisedLines: lineScene.raisedLines.length, lines: lineScene.lines.length, points: lineScene.points.length, raised: lineScene.raised.length }))
+				layerView.deselect()
+				layerView.selectFeatures({ type: 'channel', channelId: 'layer-channel' })
+				await settle(120)
+				const channelScene = layerView.snapshotScene()
+				check('selectionOnTop：选中通道整条抬层，两端节点仍压在线路上', channelScene.raisedLines.length === 1 && channelScene.lines.length === 0 && channelScene.raised.length === 2, JSON.stringify({ raisedLines: channelScene.raisedLines.length, lines: channelScene.lines.length, raised: channelScene.raised.length }))
+				const labelScaleHost = document.createElement('div')
+				labelScaleHost.style.cssText = 'width:640px;height:380px'
+				document.body.append(labelScaleHost)
+				const labelScaleView = createGisView(labelScaleHost, {
+					points: [{ id: 'zoom-point', x: 0, y: 0, name: '缩放' }],
+					initialView: { scale: 1, center: [0, 0] },
+					zoomBaseScale: 1,
+					label: { enabled: true, content: '{name}', maxCount: 1, style: { fontSize: '10px' }, zoomScale: 0 },
+					showGrid: false
+				})
+				await settle(260)
+				const labelScaleNode = () => labelScaleHost.querySelector(`.gis-view__label[data-label-kind='point'][data-label-index='0']`)
+				const labelScaleFontSize = () => labelScaleNode() ? parseFloat(getComputedStyle(labelScaleNode()).fontSize) : 0
+				const centerCopy = labelScaleView.getCenter()
+				centerCopy[0] += 999
+				const centerKept = labelScaleView.getCenter()
+				const setCenterReturn = labelScaleView.setCenter([120, -80])
+				const centerAfterSet = labelScaleView.getCenter()
+				const centerScale = labelScaleView.getCamera().scale
+				check('getCenter / setCenter：返回副本、只改中心且可链式调用', Math.abs(centerKept[0]) < 1e-6 && Math.abs(centerKept[1]) < 1e-6 && setCenterReturn === labelScaleView && Math.abs(centerAfterSet[0] - 120) < 1e-6 && Math.abs(centerAfterSet[1] + 80) < 1e-6 && Math.abs(centerScale - 1) < 1e-6, JSON.stringify({ kept: centerKept, set: centerAfterSet, scale: centerScale }))
+				check('zoomScale: 0 时标签字号固定为屏幕字号（比例 2 仍是 10px）', labelScaleFontSize() === 10, `${labelScaleFontSize()}px`)
+				labelScaleView.setCamera({ scale: 2, center: [0, 0] })
+				await settle(320)
+				check('zoomScale: 0 放大到 2 倍后字号不动', labelScaleFontSize() === 10, `${labelScaleFontSize()}px`)
+				labelScaleView.updateLabel('point', 'zoom-point', { zoomScale: 1 })
+				await settle(320)
+				check('zoomScale: 1 时字号按相机比例放大到 20px', labelScaleFontSize() === 20 && labelScaleView.getLabels('point', 0)?.[0]?.zoomScale === 1, `${labelScaleFontSize()}px / ${labelScaleView.getLabels('point', 0)?.[0]?.zoomScale}`)
+				labelScaleView.setCamera({ scale: 4, center: [0, 0] })
+				await settle(360)
+				check('zoomScale: 1 时字号继续跟随到 40px', labelScaleFontSize() === 40, `${labelScaleFontSize()}px`)
+				labelScaleView.updateLabel('point', 'zoom-point', { zoomScale: 0 })
+				await settle(320)
+				check('zoomScale 改回 0 后恢复固定字号', labelScaleFontSize() === 10, `${labelScaleFontSize()}px`)
+				labelScaleView.destroy()
+				labelScaleHost.remove()
+				layerView.destroy()
+				layerHost.remove()
 				richView.destroy()
 				reRichView.destroy()
 				richHost.remove()

package/docs/steps/selftest-perf.html

@@ -270,9 +270,37 @@
 				check('数据包围盒缓存：追加到范围外的节点会立即扩大读数',
 					boundsAfterAppend.minX === -600 && boundsAfterAppend.minY === -700,
 					JSON.stringify(boundsAfterAppend))
-				boundsView.destroy()
-				boundsHost.remove()
-				// 两万个点会走发散渲染：等它铺完再拾取（没铺到的节点按设计不参与拾取）
+				boundsView.destroy()
+				boundsHost.remove()
+				// 节点 id 索引：整份 refresh 后仍能解析 from / to；定向改 id 时旧键必须立即失效、新键马上可绑定
+				const idIndexHost = document.createElement('div')
+				document.querySelector('#map').append(idIndexHost)
+				const idIndexView = createGisView(idIndexHost, {
+					points: [{ id: 'ida', x: 0, y: 0 }, { id: 'idb', x: 100, y: 0 }],
+					lines: [{ id: 'idl', from: 'ida', to: 'idb' }],
+					width: 320,
+					height: 200
+				})
+				idIndexView.refresh()
+				// 隐藏节点插到最前面：可见 id 顺序不变、解析下标整体后移，缓存必须按新下标重建
+				idIndexView.updateData({
+					points: [{ id: 'hidden', x: -50, y: 0, visible: false }, { id: 'ida', x: 0, y: 0 }, { id: 'idb', x: 100, y: 0 }]
+				})
+				const idLineAfterShift = idIndexView.getLine('idl')
+				check('节点 id 索引：隐藏节点增删导致可见下标平移时仍按新下标解析',
+					idLineAfterShift?.path?.length === 2 && idLineAfterShift.path[0][0] === 0 && idLineAfterShift.path[1][0] === 100,
+					JSON.stringify({ path: idLineAfterShift?.path ?? null }))
+				const idLineAfterRefresh = idIndexView.getLine('idl')
+				idIndexView.updatePoint('ida', { id: 'ida-renamed' })
+				const idLineOldKey = idIndexView.getLine('idl')
+				const idLineAdded = idIndexView.addLine({ id: 'idl-new', from: 'ida-renamed', to: 'idb' })
+				const idLineNewKey = idIndexView.getLine('idl-new')
+				check('节点 id 索引：整份 refresh 后绑定线路仍可解析；updatePoint 改 id 后旧键立即失效、新键马上可绑定',
+					idLineAfterRefresh?.path?.length === 2 && (idLineOldKey?.path?.length ?? 0) < 2 && idLineAdded.ok && idLineNewKey?.path?.length === 2 && idLineNewKey.path[0][0] === 0 && idLineNewKey.path[1][0] === 100,
+					JSON.stringify({ refresh: idLineAfterRefresh?.path ?? null, oldAfterRename: idLineOldKey?.path ?? null, added: idLineAdded.ok, renamed: idLineNewKey?.path ?? null }))
+				idIndexView.destroy()
+				idIndexHost.remove()
+				// 两万个点会走发散渲染：等它铺完再拾取（没铺到的节点按设计不参与拾取）
 				const readyDeadline = now() + 8000
 				while (!big.isLayoutReady() && now() < readyDeadline) {
 					await sleep(50)
@@ -319,9 +347,36 @@
 				big.removePoints(['bench-new', 'bench-new2'])
 				const channelRemoveMs = now() - channelRemoveStarted
 				diag('通道在场时补 2 个点', `${channelAddMs.toFixed(1)} ms（这一轮之前 40 ms 上下）`)
-				diag('通道在场时删这 2 个点', `${channelRemoveMs.toFixed(1)} ms（这一轮之前 35 ms 上下）`)
-				check('通道在场时的增删：通道成员表不动、点真的加上又删掉', big.getData().points.length === pointCount && big.getChannel('bench-ch').lineIndexes.length === 2, JSON.stringify({ points: big.getData().points.length, members: big.getChannel('bench-ch').lineIndexes }))
-				big.updateOptions({ channels: [] })
+				diag('通道在场时删这 2 个点', `${channelRemoveMs.toFixed(1)} ms（这一轮之前 35 ms 上下）`)
+				check('通道在场时的增删：通道成员表不动、点真的加上又删掉', big.getData().points.length === pointCount && big.getChannel('bench-ch').lineIndexes.length === 2, JSON.stringify({ points: big.getData().points.length, members: big.getChannel('bench-ch').lineIndexes }))
+				// addLine 是末尾补线：已有通道声明时也走追加式补线，不能为了加一条独立线路把整份场景重排。
+				// 这里同时盯正确性（新线进场景、通道声明一条不动）与代价（最快一次明显低于整份重排）。
+				const appendLineChannelsBefore = JSON.stringify(big.getOptions().channels)
+				big.setCamera({ center: [10, 0], scale: 2 })
+				const appendLineIds = []
+				let appendLineFastestMs = Infinity
+				const appendLineStarted = now()
+				for (let index = 0; index < 5; index += 1) {
+					const callStarted = now()
+					const appendedLine = big.addLine({ from: 'p0', to: 'p1', id: `bench-added-line-${index}`, lineProps: { color: '#ff3300', width: 2 } })
+					appendLineFastestMs = Math.min(appendLineFastestMs, now() - callStarted)
+					if (appendedLine.ok) {
+						appendLineIds.push(appendedLine.lineId)
+					}
+				}
+				const appendLineMs = (now() - appendLineStarted) / 5
+				const appendLineScene = big.snapshotScene({ background: false })
+				const appendLinePainted = appendLineScene.lines.filter(line => line.color === 'rgba(255,51,0,1)').length
+				const appendLineRefreshStarted = now()
+				big.refresh()
+				const appendLineRefreshMs = now() - appendLineRefreshStarted
+				check('通道声明在场时 addLine 走追加式补线：5 条都进场景、通道声明不动', appendLineIds.length === 5 && appendLinePainted === 5 && JSON.stringify(big.getOptions().channels) === appendLineChannelsBefore, JSON.stringify({ ids: appendLineIds, painted: appendLinePainted }))
+				check('addLine 的追加代价明显低于整份重排（有通道声明也不会回落整份重建）', appendLineFastestMs * 5 < appendLineRefreshMs, `最快一次 ${appendLineFastestMs.toFixed(2)} ms · 平均 ${appendLineMs.toFixed(2)} ms vs 整份重排 ${appendLineRefreshMs.toFixed(1)} ms`)
+				diag('通道在场时 addLine 追加 1 条', `${appendLineMs.toFixed(2)} ms / 次（最快一次 ${appendLineFastestMs.toFixed(2)} ms）· 同一场景整份重排 ${appendLineRefreshMs.toFixed(1)} ms`)
+				for (const id of appendLineIds) {
+					big.removeLine(id)
+				}
+				big.updateOptions({ channels: [] })
 
 				/* ---------------- 分区（分块）渲染值不值得：视口变化时一帧的成本怎么变 ---------------- */
 				// 「把地图拆成一块一块、只画视口里的块」省的是「视口外那些实例的顶点变换」。
@@ -2323,7 +2378,7 @@
 				await sleep(30)
 				const selectedAfter = clusterView.getSelections().map(entry => entry.item?.id ?? entry.index).join(',')
 				check('点聚合：点击聚合只发 clusterClick，不发普通 click，选中集不变',
-					clusterEvents === 1 && plainEvents === 0 && selectedAfter === selectedBefore && lastClusterPayload?.action?.type === 'clusterClick' && lastClusterPayload?.action?.data?.type === 'cluster',
+					clusterEvents === 1 && plainEvents === 0 && selectedAfter === selectedBefore && lastClusterPayload?.action?.type === 'clusterClick' && lastClusterPayload?.type === 'cluster' && lastClusterPayload?.count > 1 && Array.isArray(lastClusterPayload?.pointIds) && lastClusterPayload?.action?.data === undefined && lastClusterPayload?.originalEvent instanceof Event,
 					`clusterClick=${clusterEvents} click=${plainEvents} 选中 ${selectedBefore} → ${selectedAfter} action=${lastClusterPayload?.action?.type} clickPick=${clickPick?.type ?? 'null'} clickScreen=${clickScreen.map(value => value.toFixed(1)).join(',')} client=${clickClient.map(value => value.toFixed(1)).join(',')}`)
 				const fitScale = clusterView.getCamera().scale
 				// 聚合成员在相机运动期会推迟重算；这一档没有线、又显式关掉非 MSAA 后备缓冲，

package/docs/steps/selftest-select.html

@@ -317,10 +317,60 @@
 				ckView.updateOptions({ selectionKinds: 'all' })
 				ckView.selectInBox({ x: 0, y: 0, width: ckBox.width, height: ckBox.height })
 				const ckBoxedInfo = ckView.getSelectionData()
-				check('selectInBox：线路框选与通道摊开沿用同一份判定（整框一次收下节点 / 独立线路 / 通道回线）', ckBoxedInfo.count === 4 && ckBoxedInfo.pointCount === 2 && ckBoxedInfo.lineCount === 2 && ckBoxedInfo.channelCount === 1, JSON.stringify({ items: ckBoxedInfo.count, points: ckBoxedInfo.pointCount, lines: ckBoxedInfo.lineCount, channels: ckBoxedInfo.channelCount }))
+				check('selectInBox：线路框选与通道摊开沿用同一份判定（整框一次收下节点 / 独立线路 / 通道回线）', ckBoxedInfo.count === 4 && ckBoxedInfo.pointCount === 2 && ckBoxedInfo.lineCount === 2 && ckBoxedInfo.channelCount === 1, JSON.stringify({ items: ckBoxedInfo.count, points: ckBoxedInfo.pointCount, lines: ckBoxedInfo.lineCount, channels: ckBoxedInfo.channelCount }))
 				ckView.destroy()
 				ckHost.remove()
 
+				/* ---------- 本轮：线路 / 通道的端点框选模式 ---------- */
+				// 半框只盖住左端点：普通 line / channel 仍按“几何沾框”命中，端点模式必须两个端点都在框里。
+				const epHost = document.createElement('div')
+				epHost.style.cssText = 'width:480px;height:320px'
+				document.body.append(epHost)
+				const epView = createGisView(epHost, {
+					points: [
+						{ id: 'ep-a', x: -130, y: 0, size: 16 },
+						{ id: 'ep-b', x: 130, y: 0, size: 16 }
+					],
+					lines: [
+						{ id: 'ep-bound', from: 'ep-a', to: 'ep-b', width: 8 },
+						{ id: 'ep-path', path: [[-80, 60], [80, 60]], width: 8 },
+						{ id: 'ep-ch-line', from: 'ep-a', to: 'ep-b', width: 8 }
+					],
+					channels: [{ id: 'ep-ch', lineIds: ['ep-ch-line'] }],
+					features: 'view',
+					selectionKinds: 'all',
+					showGrid: false,
+					fitOnInit: false,
+					initialView: { center: [0, 0], scale: 1 },
+					width: 480,
+					height: 320
+				})
+				await settle(120)
+				const epBox = epView.canvas.getBoundingClientRect()
+				const epHalf = { x: 0, y: 0, width: epBox.width / 2, height: epBox.height }
+				const epAll = { x: 0, y: 0, width: epBox.width, height: epBox.height }
+				const epInfo = () => epView.getSelectionData()
+				epView.selectInBox(epHalf, { selectionKinds: ['line'] })
+				const epLegacy = epInfo()
+				check('line 旧模式：线路几何沾到半框就选中', epLegacy.lineCount === 2 && epView.isSelected('ep-bound') && epView.isSelected('ep-path'), JSON.stringify({ lines: epLegacy.lineCount, ids: epLegacy.ids }))
+				epView.selectInBox(epHalf, { selectionKinds: ['lineEndpoints'] })
+				const epLineHalf = epInfo()
+				check('lineEndpoints：只框住一端时独立线路不选中', epLineHalf.lineCount === 0 && epLineHalf.channelCount === 0 && !epView.isSelected('ep-bound') && !epView.isSelected('ep-path'), JSON.stringify({ lines: epLineHalf.lineCount, channels: epLineHalf.channelCount, ids: epLineHalf.ids }))
+				epView.selectInBox(epAll, { selectionKinds: ['line-endpoints'] })
+				const epLineAll = epInfo()
+				check('lineEndpoints：两端都在框内才选中，纯 path 线路仍跳过（不依赖 point 档）', epLineAll.pointCount === 0 && epLineAll.lineCount === 1 && epView.isSelected('ep-bound') && !epView.isSelected('ep-path'), JSON.stringify({ points: epLineAll.pointCount, lines: epLineAll.lineCount, ids: epLineAll.ids }))
+				epView.selectInBox(epHalf, { selectionKinds: ['channel'] })
+				const epChannelHalfLegacy = epInfo()
+				check('channel 旧模式：成员回线沾到半框就选中整条通道', epChannelHalfLegacy.channelCount === 1 && epChannelHalfLegacy.lineCount === 1 && epView.isSelected('ep-ch-line'), JSON.stringify({ lines: epChannelHalfLegacy.lineCount, channels: epChannelHalfLegacy.channelCount, ids: epChannelHalfLegacy.ids }))
+				epView.selectInBox(epHalf, { selectionKinds: ['channelEndpoints'] })
+				const epChannelHalf = epInfo()
+				check('channelEndpoints：只框住一端时通道不选中', epChannelHalf.channelCount === 0 && epChannelHalf.lineCount === 0 && !epView.isSelected('ep-ch-line'), JSON.stringify({ lines: epChannelHalf.lineCount, channels: epChannelHalf.channelCount, ids: epChannelHalf.ids }))
+				epView.selectInBox(epAll, { selectionKinds: ['channel-endpoints'] })
+				const epChannelAll = epInfo()
+				check('channelEndpoints：两端节点都在框内才选中整条通道', epChannelAll.pointCount === 0 && epChannelAll.channelCount === 1 && epChannelAll.lineCount === 1 && epView.isSelected('ep-ch-line'), JSON.stringify({ points: epChannelAll.pointCount, lines: epChannelAll.lineCount, channels: epChannelAll.channelCount, ids: epChannelAll.ids }))
+				epView.destroy()
+				epHost.remove()
+
 				/* ---------- 问题 1（本轮）：接口取消选中 —— deselect（单个 / 一批 / 整条通道）与「取消全部」的老写法 ---------- */
 				const dzHost = document.createElement('div')
 				dzHost.style.cssText = 'width:320px;height:200px'
@@ -497,14 +547,19 @@
 				check('onPointerDown / onPointerUp / onClick(通道回线)：每个鼠标载荷都带 groups 与当前 group',
 					[gpDowns.at(-1), gpUps.at(-1), gpClicks.at(-1)].every(payload => payload?.groups?.length === 2 && String(payload.group?.id) === String(payload.groupId) && payload.action?.target === 'channel'),
 					JSON.stringify({ down: gpDowns.at(-1)?.groups?.length, up: gpUps.at(-1)?.groups?.length, click: gpClicks.at(-1)?.groups?.length }))
+				const gpLineChannelFields = ['channelId', 'channelIndex', 'channel', 'groupId', 'groupIndex', 'group', 'groups', 'lineIndexes', 'lineIds', 'channelContexts']
+				const gpSelectedLineIndexes = payload => (payload?.items ?? []).filter(item => item.type === 'line').map(item => item.index).join(',')
+				const gpSelectedLineIds = payload => (payload?.items ?? []).filter(item => item.type === 'line').map(item => item.item?.id).join(',')
 				const gpChannelPayloadOK = payload => String(payload?.channelId) === 'gp-ch' &&
 					payload?.groups?.length === 2 &&
 					payload?.channelContexts === undefined &&
 					String(payload.group?.id) === String(payload.groupId) &&
-					payload.items?.every(item => item.type !== 'line' || (item.channelId === payload.channelId && item.channelIndex === payload.channelIndex && item.groupId !== undefined && item.groupIndex !== undefined && item.group === undefined && item.groups === undefined))
-				check('onSelect / onSelectChange(通道回线)：单通道只摊平在顶层，items 只留标量归属且不重复挂 group / groups',
+					payload.lineIndexes?.join(',') === gpSelectedLineIndexes(payload) &&
+					payload.lineIds?.join(',') === gpSelectedLineIds(payload) &&
+					payload.items?.every(item => item.type !== 'line' || gpLineChannelFields.every(key => item[key] === undefined))
+				check('onSelect / onSelectChange(通道回线)：单通道上下文只在顶层，items 不重复挂任何通道字段',
 					gpChannelPayloadOK(gpSelects.at(-1)) && gpChannelPayloadOK(gpChanges.at(-1)) && gpSelects.at(-1)?.items === gpChanges.at(-1)?.items,
-					JSON.stringify({ select: gpSelects.at(-1)?.channelId, change: gpChanges.at(-1)?.channelId, groups: gpSelects.at(-1)?.groups?.length, contexts: gpSelects.at(-1)?.channelContexts, items: gpSelects.at(-1)?.items?.map(item => ({ channelId: item.channelId, channelIndex: item.channelIndex, groupId: item.groupId, groupIndex: item.groupIndex, group: item.group, groups: item.groups })) }))
+					JSON.stringify({ select: gpSelects.at(-1)?.channelId, change: gpChanges.at(-1)?.channelId, groups: gpSelects.at(-1)?.groups?.length, lineIds: gpSelects.at(-1)?.lineIds, items: gpSelects.at(-1)?.items?.map(item => ({ id: item.item?.id, channelId: item.channelId, groupId: item.groupId })) }))
 				check('真实点击的派发顺序：onClick → onSelect → onSelectChange',
 					gpOrder.slice(-3).join('>') === 'click>select>selectChange',
 					gpOrder.join('>'))
@@ -513,8 +568,18 @@
 				gpOrder.length = 0
 				gpView.selectFeatures({ type: 'channel', channelId: 'gp-ch' })
 				check('selectFeatures(整条通道)：onSelect / onSelectChange 都带通道上下文，顺序是 onSelect → onSelectChange',
-					gpOrder.join('>') === 'select>selectChange' && gpChannelPayloadOK(gpSelects.at(-1)) && gpChannelPayloadOK(gpChanges.at(-1)) && gpSelects.at(-1)?.items?.length === 3,
+					gpOrder.join('>') === 'select>selectChange' && gpChannelPayloadOK(gpSelects.at(-1)) && gpChannelPayloadOK(gpChanges.at(-1)) && gpSelects.at(-1)?.items?.length === 3 && gpSelects.at(-1)?.lineIds?.join(',') === 'gp-l1,gp-l2,gp-l3',
 					JSON.stringify({ order: gpOrder, select: gpSelects.at(-1), change: gpChanges.at(-1) }))
+				const gpSelectionLines = gpView.getSelections().filter(entry => entry.type === 'line')
+				const gpOwner = gpView.getLineChannel(gpSelectionLines[0]?.index)
+				const gpSelectionData = gpView.getSelectionData()
+				check('getSelections / getSelectionData / getLineChannel：选中镜像不带通道字段，单条线路仍能反查通道与分组',
+					gpSelectionLines.length === 3 &&
+					gpSelectionLines.every(entry => gpLineChannelFields.every(key => entry[key] === undefined)) &&
+					gpSelectionData.items.every(entry => entry.type !== 'line' || gpLineChannelFields.every(key => entry[key] === undefined)) &&
+					gpSelectionData.channels.map(channel => String(channel.id)).join(',') === 'gp-ch' &&
+					String(gpOwner?.channelId) === 'gp-ch' && String(gpOwner?.channel?.id) === 'gp-ch' && gpOwner?.channelIndex === 0 && String(gpOwner?.group?.id) === 'gp-g1',
+					JSON.stringify({ lines: gpSelectionLines.length, owner: gpOwner && { channelId: gpOwner.channelId, channelIndex: gpOwner.channelIndex, groupId: gpOwner.groupId }, channels: gpSelectionData.channels.map(channel => channel.id) }))
 				gpOrder.length = 0
 				gpView.selectFeatures([
 					{ type: 'channel', channelId: 'gp-ch' },
@@ -529,7 +594,7 @@
 					gpSelects.at(-1).channelContexts.map(context => `${context.lineIndexes.length}/${context.lineIds.length}`).join(',') === '3/3,1/1' &&
 					gpSelects.at(-1).channelContexts.map(context => context.lineIds.join('+')).join(',') === 'gp-l1+gp-l2+gp-l3,gp-l4' &&
 					gpSelects.at(-1).items === gpChanges.at(-1)?.items &&
-					gpSelects.at(-1).items.every(item => item.type !== 'line' || (item.group === undefined && item.groups === undefined)),
+					gpSelects.at(-1).items.every(item => item.type !== 'line' || gpLineChannelFields.every(key => item[key] === undefined)),
 					JSON.stringify({ order: gpOrder, contexts: gpSelects.at(-1)?.channelContexts?.map(context => ({ channelId: context.channelId, lines: context.lineIds })), items: gpSelects.at(-1)?.items?.length }))
 				gpOrder.length = 0
 				const gpAt = gpView.selectAt(gpClientX, gpClientY)

package/docs/steps/step-05-pick.js

@@ -85,20 +85,16 @@ export const createPickView = (target, options = {}) => {
 	/** 点优先于线：两个都命中也算点中节点 */
 	const pick = (x, y) => pickPoint(x, y) ?? pickLine(x, y)
 
-	/** 统一的指针载荷：命中的元素 + 按钮 + 光标位置（空白处 type 为 null、hit 为 false） */
+	/** 统一的指针载荷：命中的元素 + 光标位置（空白处 type 为 null、hit 为 false；按键读 originalEvent） */
 	const pointerPayload = (hit, point, event) => ({
 		type: hit ? hit.type : null,
 		index: hit ? hit.index : -1,
 		item: hit ? hit.item : null,
 		hit: Boolean(hit),
 		...(hit ?? {}),
-		button: event.button,
-		buttons: event.buttons,
 		world: core.unproject(point[0], point[1]),
 		x: point[0],
 		y: point[1],
-		clientX: event.clientX,
-		clientY: event.clientY,
 		originalEvent: event
 	})
 	const canvasPointOf = event => {
@@ -180,7 +176,7 @@ export const createPickView = (target, options = {}) => {
 		const point = canvasPointOf(event)
 		const hit = pick(point[0], point[1])
 		// 左键 / 中键 / 右键都发一条：使用方在按下这一刻就能拿到光标下的元素
-		listeners.onPointerDown?.(pointerPayload(hit, point, event), event)
+		listeners.onPointerDown?.(pointerPayload(hit, point, event))
 		if (event.button !== 0) {
 			return
 		}
@@ -215,7 +211,7 @@ export const createPickView = (target, options = {}) => {
 		const point = canvasPointOf(event)
 		const hit = pick(point[0], point[1])
 		if (event.button === 0 || event.button === 2) {
-			listeners.onPointerUp?.(pointerPayload(hit, point, event), event)
+			listeners.onPointerUp?.(pointerPayload(hit, point, event))
 		}
 		const active = pressed
 		pressed = null
@@ -253,7 +249,7 @@ export const createPickView = (target, options = {}) => {
 	/** 右键：点、线、空白都发一条 onContextMenu，命中什么都在载荷里 */
 	const handleContextMenu = event => {
 		const point = canvasPointOf(event)
-		listeners.onContextMenu?.(pointerPayload(pick(point[0], point[1]), point, event), event)
+		listeners.onContextMenu?.(pointerPayload(pick(point[0], point[1]), point, event))
 	}
 
 	// 框选矩形：一个绝对定位的 DOM 层，样式由使用方决定（组件不内置界面）

package/docs/steps/step-07-channels.js

@@ -221,9 +221,9 @@ export const createChannelView = (target, options = {}) => {
 		onClick: payload => listeners.onClick?.(channelize(payload)),
 		onDblClick: payload => listeners.onDblClick?.(channelize(payload)),
 		onSelect: payload => listeners.onSelect?.(payload ? { ...payload, items: payload.items.map(channelize).filter(Boolean) } : null),
-		onPointerDown: (payload, event) => listeners.onPointerDown?.(channelize(payload), event),
-		onPointerUp: (payload, event) => listeners.onPointerUp?.(channelize(payload), event),
-		onContextMenu: (payload, event) => listeners.onContextMenu?.(channelize(payload), event)
+		onPointerDown: payload => listeners.onPointerDown?.(channelize(payload)),
+		onPointerUp: payload => listeners.onPointerUp?.(channelize(payload)),
+		onContextMenu: payload => listeners.onContextMenu?.(channelize(payload))
 	})
 
 	// ---------- 新增通道：草稿状态机 ----------
@@ -301,8 +301,6 @@ export const createChannelView = (target, options = {}) => {
 		x: point[0],
 		y: point[1],
 		world: core.unproject(point[0], point[1]),
-		clientX: event.clientX,
-		clientY: event.clientY,
 		originalEvent: event
 	})
 

package/docs/steps/step-08-labels.js

@@ -130,9 +130,9 @@ export const createLabelView = (target, options = {}) => {
 			renderTooltip(payload, payload ? payload.screen : null)
 			listeners.onHover?.(payload)
 		},
-		onPointerDown: (payload, event) => listeners.onPointerDown?.(payload, event),
-		onPointerUp: (payload, event) => listeners.onPointerUp?.(payload, event),
-		onContextMenu: (payload, event) => listeners.onContextMenu?.(payload, event)
+		onPointerDown: payload => listeners.onPointerDown?.(payload),
+		onPointerUp: payload => listeners.onPointerUp?.(payload),
+		onContextMenu: payload => listeners.onContextMenu?.(payload)
 	})
 	canvas.addEventListener('pointermove', handlePointerMove)
 	// 每帧同步一次标签：注册进第 1 步的渲染任务表，画的顺序在 WebGL 之后，谁都不挡谁

package/docs/steps/step-10-full.js

@@ -82,9 +82,9 @@ export const createFullView = (target, options = {}) => {
 		onClick: payload => forward.onClick?.(payload),
 		onDblClick: payload => forward.onDblClick?.(payload),
 		onSelect: payload => forward.onSelect?.(payload),
-		onPointerDown: (payload, event) => forward.onPointerDown?.(payload, event),
-		onPointerUp: (payload, event) => forward.onPointerUp?.(payload, event),
-		onContextMenu: (payload, event) => forward.onContextMenu?.(payload, event),
+		onPointerDown: payload => forward.onPointerDown?.(payload),
+		onPointerUp: payload => forward.onPointerUp?.(payload),
+		onContextMenu: payload => forward.onContextMenu?.(payload),
 		onChannelDraftClick: payload => forward.onChannelDraftClick?.(payload),
 		onChannelDraft: payload => {
 			if (payload?.phase === 'commit' && payload.lineId) {

package/docs/steps/step-12-events.js

@@ -9,21 +9,20 @@
  *     （select 选中 / clearSelection 点空白 / addWaypoint 加点 / contextMenu / dblClick）；
  *   - action.target：点在了什么上面（point / line / channel / empty）。通道回线的 type 也是 line，
  *     但要按通道处理，所以 target 单独给 channel；
- *   - action.data：按 target 直接取到的那份数据 —— 节点 / 线路是数据里那个对象、通道回线是通道定义、
- *     空白是 null。不用再去 payload.item / payload.channel 里翻；
- *   - action.button（left / middle / right，悬停是 none）、action.modifiers（ctrl / meta / shift / alt）、
- *     action.moved（这一次按下之后有没有真的拖动过）、action.double（是不是双击里的第二下）；
- *   - action.left / action.right：左键 / 右键的一眼判定（中键两边都是 false）；松开与点击载荷另带
- *     action.press（**按下时的意图**，与那一刻 onPointerDown 的 action.type 同一份）、action.duration
+ *   - 命中的数据直接读载荷：节点 / 线路读 payload.item、通道回线读 payload.channel、选中集读
+ *     payload.items、拐点读 payload.line，不再另打包一份 action.data；
+ *   - 按键 / 修饰键 / 指针位置读 payload.originalEvent（button / ctrlKey / metaKey / shiftKey / altKey /
+ *     clientX / clientY），action 只留 type / target / moved / double 这些判读；
+ *   - 松开与点击载荷另带 action.press（**按下时的意图**，与那一刻 onPointerDown 的 action.type 同一份）、action.duration
  *     （按了多久，毫秒）与 action.longPress（超过 500ms 且中间没拖动过 —— 触摸 / 触控笔按它出菜单）。
- *     中键按住就是临时平移：按下 / 松开的 action.type 都是 pan、action.button 是 middle，不经过 onClick。
+ *     中键按住就是临时平移：按下 / 松开的 action.type 都是 pan、originalEvent.button 是 1，不经过 onClick。
  *
  * 于是「按右键弹哪一份菜单」就是 switch (payload.action.target)，「拖完的是节点还是拐点」就是
  * switch (payload.action.type)，不用再各记一套 payload 形状。选中集变更也有同一套 action.type：
  * boxSelect / toggleSelect（Ctrl 点击取反）/ select / clearSelection —— 框选没框到东西与
  * 「点空白清空」在载荷上是同一个形状（都是 null），只有这一份补充读数能把它们分开。
  * 标签事件（labelClick / labelDrag / labelContextMenu / labelDblClick）同一套写法：
- * target 恒为 'label'、data 是 { label, parent }。
+ * target 恒为 'label'、标签与归属直接读载荷顶层的 label / parent。
  *
  * 两个只读查询：想主动问「这儿是什么」而不必先订阅一遍事件再把最近一次载荷记住，用
  *   - pickAt(clientX, clientY)：参数就是鼠标事件里的 clientX / clientY，返回与指针载荷同一份结果
@@ -59,7 +58,21 @@ const withChannels = (data) => {
 /** action.target -> 中文：日志里读起来不用记英文名 */
 const TARGET_NAMES = { point: '节点', line: '线路', channel: '通道回线', label: '标签', waypoint: '拐点', selection: '选中集', empty: '空白' }
 
-/** action.data 里那一份数据的名字：节点 / 线路看 name 与 id，选中集与标签给条数或内容 */
+/** 按 action.target 取载荷上那一份数据：节点 / 线路读 item、通道读 channel、选中集读 items */
+const dataOfAction = (payload, action) => {
+	if (Array.isArray(payload?.items)) {
+		return payload.items
+	}
+	if (payload?.label) {
+		return payload.label
+	}
+	if (action?.target === 'waypoint') {
+		return payload.line ?? null
+	}
+	return payload?.channel ?? payload?.item ?? null
+}
+
+/** 数据那一份的名字：节点 / 线路看 name 与 id，选中集与标签给条数或内容 */
 const nameOfData = (data) => {
 	if (Array.isArray(data)) {
 		return `${data.length} 个要素`
@@ -67,10 +80,6 @@ const nameOfData = (data) => {
 	if (!data || typeof data !== 'object') {
 		return ''
 	}
-	if (data.label) {
-		// 标签事件的 data 是 { label, parent }
-		return data.label.text ?? data.label.id ?? '标签'
-	}
 	return data.name ?? data.id ?? ''
 }
 
@@ -81,19 +90,27 @@ const describeAction = (payload, phase) => {
 		return `${phase}：—`
 	}
 	const parts = [action.type, `→ ${TARGET_NAMES[action.target] ?? action.target}`]
-	const name = nameOfData(action.data)
+	const name = nameOfData(dataOfAction(payload, action))
 	if (name !== '') {
 		parts.push(String(name))
 	}
-	parts.push(action.button === 'right' ? '右键' : action.button === 'middle' ? '中键' : '左键')
+	const button = payload.originalEvent?.button
+	if (button === 0 || button === 1 || button === 2) {
+		parts.push(button === 2 ? '右键' : button === 1 ? '中键' : '左键')
+	}
 	if (action.moved) {
 		parts.push('拖动过')
 	}
 	if (action.double) {
 		parts.push('双击的第二下')
 	}
-	const modifiers = action.modifiers ?? {}
-	const held = Object.keys(modifiers).filter(key => modifiers[key]).join('+')
+	const event = payload.originalEvent
+	const held = [
+		event?.ctrlKey ? 'ctrl' : null,
+		event?.metaKey ? 'meta' : null,
+		event?.shiftKey ? 'shift' : null,
+		event?.altKey ? 'alt' : null
+	].filter(Boolean).join('+')
 	if (held) {
 		parts.push(`按住 ${held}`)
 	}
@@ -121,13 +138,13 @@ export const createActionView = (target, options = {}) => {
 		waypointEditable: true,
 		features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, channelDraft: true },
 		// 下面五条是同一条路：每个回调先报一句判读，再交给页面自己那一条（日志、草稿读数都还在）
-		onPointerDown: (payload, event) => {
+		onPointerDown: payload => {
 			report(describeAction(payload, '按下'))
-			options.onPointerDown?.(payload, event)
+			options.onPointerDown?.(payload)
 		},
-		onPointerUp: (payload, event) => {
+		onPointerUp: payload => {
 			report(describeAction(payload, '松开'))
-			options.onPointerUp?.(payload, event)
+			options.onPointerUp?.(payload)
 		},
 		onClick: payload => {
 			// 空白处的点击载荷是 null（选中已经清空）：这一下的判读在 onSelectChange 那条路上
@@ -138,13 +155,13 @@ export const createActionView = (target, options = {}) => {
 			report(describeAction(payload, '双击'))
 			options.onDblClick?.(payload)
 		},
-		onContextMenu: (payload, event) => {
+		onContextMenu: payload => {
 			report(describeAction(payload, '右键'))
-			options.onContextMenu?.(payload, event)
+			options.onContextMenu?.(payload)
 		},
 		// 选中集变更：action.type 把框选 / 取反 / 选中 / 清空分开（前两种不经过 onClick）
 		onSelectChange: event => {
-			report(`选中：${event.action.type} · ${event.count} 个（节点 ${event.points} / 线路 ${event.lines} / 通道 ${event.channels}）`)
+			report(`选中：${event.action.type} · ${event.count} 个（节点 ${event.points} / 线路 ${event.lines} / 通道 ${event.channels}）→ ${event.points ? '节点' : event.lines ? '线路' : event.channels ? '通道' : '空白'}`)
 			options.onSelectChange?.(event)
 		},
 		onCameraChange: camera => options.onCameraChange?.(camera)

package/docs//344/273/2160/345/210/260/345/256/214/346/225/264/347/232/204/345/256/236/347/216/260.md

@@ -1,6 +1,7 @@
 # 从 0 到完整的实现（索引）
 
 这一份是「照着源码从零写一遍」的讲义：先讲清地图的模型，再一块一块把渲染、相机、解析层、通道、覆盖层、筛选与性能写出来，最后给一份可以照抄的整套代码。
+第一次从 0 上手，建议先走 [四段学习路线、每步验收与优化顺序](steps/README.md)：第 1 ~ 9 步手写主干，第 10 步接入真组件，第 11 ~ 13 步补上线配置；卡住时再回到下面章节补原理，或直接照抄 `from0/13` / `14` 的整套代码。
 只想用组件看 [GisView.md](GisView.md)；每一帧怎么实现、为什么这么写看 [实现原理](GisView实现原理.md)；分步 demo（每步一个文件、页面上直接跑）在 [docs/steps](steps/README.md)。
 性能数据与 WebGPU 的取舍见 [实现原理 18 性能实测与 WebGPU 评估](internals/18-性能实测与WebGPU评估.md#18-性能实测与-webgpu-评估)。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gis-view-webgl2",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，无内置界面，点击 / 双击 / 拖拽可配置",
   "type": "module",
   "scripts": {

package/docs/ai/01-/350/265/267/346/272/220/344/270/216/350/277/231/344/273/275/346/261/207/346/200/273/347/232/204/347/224/261/346/235/245.md

@@ -1,29 +0,0 @@
-# 01 起源与这份汇总的由来
-
-> 这份汇总的来源与筛选口径、选型与立项（2026-09-15）、以及按时间读这条线的三段。
-
-> 这一页只留**重要问答**：其余会话的逐轮过程都并进了《实现原理》的逐轮记录（`docs/internals/15-*` 与 `16-*`），本页只保留值得单独读的问答与索引。
-
-## 这份汇总怎么来的
-
-- **来源**：Codex CLI 的本地会话文件 `C:\Users\tode\.codex\sessions\<年>\<月>\<日>\rollout-*.jsonl`（一行一条 JSON：`session_meta` 记工作目录，`event_msg` / `response_item` 记对话）。
-- **筛选**：截至 2026-10-14 本机共 **70 个会话**；按「工作目录在本组件的相关栈上 + 首条指令点名」筛出 **39 个**（组件本体 34 个、立项与选型 2 个、旁支 3 个），时间跨度 **2026-09-15 ~ 2026-10-14**，索引见第三节。
-- **需求正文**：每一轮的详细问题写在仓库根的 `修改.txt` / `问题.txt`（`.gitignore` 里的 `*.txt` 不进版本库），会话里通常只有一句「根据修改.txt / 问题.txt 修改组件」。所以下文的「这一轮在做什么」按用户原话 + `docs/GisView实现原理.md` 的 15.x 轮次标题整理；要逐字看某轮的问题清单，翻实现原理对应小节，或看 `git log` 里那一笔「修改gis」。
-- **剔除口径**：`d:\work\teap-frontend-master` 下关于 `gis.vue`（AntV G6 写的前身尝试，6 个会话）不算本组件的对话；teap-gis 宿主的 2 个会话算「旁支」，因为查的正是本组件在宿主里的表现。
-
-## 一、起源：选型与立项（2026-09-15）
-
-| 时间 | 用户提了什么 | 结论 / 落点 |
-| --- | --- | --- |
-| 09-15 11:34（13 条问答） | 「区间联络线 + 线路加拐点拖拽 + 10 万节点 / 20 万线路，用什么技术」；过程中逐条问过 ECharts / AntV G6 / deck.gl / VortxGL / luma.gl / gl-matrix 的取舍、WebGL2 的优缺点与浏览器兼容、WebGL2 + HTML GUI 能否组合 | 落成「自研 WebGL2 渲染引擎 + HTML 覆盖层」的路线；同一条会话后半段让 AI 通读前身 `D:\work\teap-gis\src\components\gis-core` 并生成实现说明 md。选型叙述见 `docs/GisView实现原理.md` 前几章与 `docs/GisView.md` 的「渲染后端（WebGPU 开关）」 |
-| 09-15 16:09（3 条） | ① 在 `components/` 下新建 gis-view（WebGL2 + WebGUI）并写「两点一线」demo；② 按 `修改.txt` 改；③ 把组件整体迁到 `D:\work\gis-view`，做成「只导出 gis-view 一个组件」的独立项目 | 组件雏形 + 独立仓库诞生；工程口径照 `virtual-table-view-vue3`（Vite + lib 构建 + `docs/demos`） |
-
-## 四、按时间读这条线（三段）
-
-1. **09-15 ~ 09-20：从 0 到 1。** 选型 → 立项 → 通道 / 拐点 / 分组 → 点线样式与 SVG → 鹰眼图、标签、热力图。这段的「问题」多是从 demo 里肉眼发现的渲染与交互问题。
-2. **09-20 ~ 10-08：补全能力面 + 压性能。** 事件总线、历史、画质、批量更新、导出（图片 / 选中 / 数据）、装饰、密度场、功能开关、框选合并、宿主缩放；性能从「样式快路径」一路做到「百万级」。
-3. **10-09 ~ 10-14：接口与收口。** 分组 / 拐点跟后端怎么交互、`BackendSyncDemo`、`exportViewportData`、方法审计与文档加厚、标签与选中态的一串 bug 收口、以及本轮（问题.txt 六条）。
-
----
-
-（第一章） · [汇总目录](../AI对话汇总.md) · [02 按内容分类：这一路都在改什么 →](02-%E6%8C%89%E5%86%85%E5%AE%B9%E5%88%86%E7%B1%BB-%E8%BF%99%E4%B8%80%E8%B7%AF%E9%83%BD%E5%9C%A8%E6%94%B9%E4%BB%80%E4%B9%88.md)