gis-view-webgl2 0.1.11 → 0.1.13

package/docs/steps/selftest-select.html

@@ -8,7 +8,7 @@
 		<div id="map" style="width:640px;height:400px"></div>
 		<pre id="out"></pre>
 		<script type="module">
-			// 这一页的自测：① 多选开关（options.multiSelect）—— 打开后不用修饰键、单击即取反累加；
+			// 这一页的自测：① 多选开关（options.multiSelect）—— 打开后不用修饰键、单击即取反累加；toggleSelect 另测；
 			// ② 状态样式里的阴影（selectStyle / lineSelectStyle 写 shadow 要画得出来、取消选中要收掉）；
 			// ③ 取消选中 / 改变选中集之后颜色与阴影要自动恢复，不必等悬停来顺手重解析；
 			// ④ 同配方不同尺寸的贴图符号：借来的占位贴图不能被当成「自己烤好的那一份」（见问题 4）。
@@ -371,6 +371,127 @@
 				epView.destroy()
 				epHost.remove()
 
+				/* ---------- 本轮：框选保留、整框拖动、DOM 样式与手动关闭 ---------- */
+				const persistHost = document.createElement('div')
+				persistHost.style.cssText = 'width:400px;height:260px'
+				document.body.append(persistHost)
+				const persistBoxStyle = { render: 'div', className: 'persist-box', borderStyle: 'dashed', strokeWidth: 3, radius: 5, fill: '#eef4ff', fillOpacity: 0.25 }
+				const persistView = createGisView(persistHost, {
+					points: [
+						{ id: 'pv-a', x: 0, y: 0, size: 22 },
+						{ id: 'pv-b', x: 100, y: 0, size: 22 }
+					],
+					lines: [
+						{ id: 'pv-line', from: 'pv-a', to: 'pv-b', width: 5 },
+						{ id: 'pv-ch-line', from: 'pv-a', to: 'pv-b', width: 5 }
+					],
+					channels: [{ id: 'pv-ch', from: 'pv-a', to: 'pv-b', lineIds: ['pv-ch-line'], width: 36 }],
+					features: 'edit',
+					selectionKinds: ['point'],
+					selectionBoxPersistent: true,
+					selectionBoxStyle: persistBoxStyle,
+					showGrid: false,
+					fitOnInit: false,
+					initialView: { center: [50, 0], scale: 1 },
+					width: 400,
+					height: 260
+				})
+				await settle(120)
+				const persistPointBox = () => {
+					const data = persistView.getData().points
+					const left = persistView.project(data.find(point => point.id === 'pv-a').x, data.find(point => point.id === 'pv-a').y)
+					const right = persistView.project(data.find(point => point.id === 'pv-b').x, data.find(point => point.id === 'pv-b').y)
+					const x = Math.min(left[0], right[0]) - 34
+					const y = Math.min(left[1], right[1]) - 34
+					return { x, y, width: Math.abs(right[0] - left[0]) + 68, height: 68 }
+				}
+				persistView.selectInBox(persistPointBox(), { selectionKinds: ['point'] })
+				const retainedBox = persistView.getSelectionBox()
+				const retainedElement = persistHost.querySelector('.gis-view__selection-box.persist-box')
+				const persistIds = () => persistView.getSelectionData().ids.join(',')
+				const initialBoxBorderStyle = retainedElement?.style.getPropertyValue('--gis-view-selection-box-border-style').trim() ?? ''
+				persistView.updateOptions({ selectionBoxStyle: { ...persistBoxStyle, className: 'persist-box-live', borderStyle: 'dotted' } })
+				const liveElement = persistHost.querySelector('.gis-view__selection-box.persist-box-live')
+				check('selectionBoxPersistent：框选结束后保留矩形，选中集仍是框内节点', Boolean(retainedBox) && persistView.getSelectionData().pointCount === 2, JSON.stringify({ box: retainedBox, ids: persistIds() }))
+				check('selectionBoxStyle.render: div：挂载 DOM 矩形并加自定义类名，样式可运行时替换', Boolean(retainedElement) && initialBoxBorderStyle === 'dashed' && Boolean(liveElement) && liveElement.style.getPropertyValue('--gis-view-selection-box-border-style').trim() === 'dotted' && Boolean(retainedBox), retainedElement?.className ?? '没有 DOM 框')
+				const persistLineBefore = persistView.getLine('pv-line')?.path ?? []
+				const persistChannelLineBefore = persistView.getLine('pv-ch-line')?.path ?? []
+				const persistChannelBefore = persistView.getChannel('pv-ch')?.skeleton ?? []
+				const persistPointsBefore = new Map(persistView.getData().points.map(point => [point.id, [point.x, point.y]]))
+				const dragStart = [retainedBox.x + retainedBox.width / 2, retainedBox.y + retainedBox.height / 2]
+				const dragDelta = [36, 24]
+				const dragWorldDelta = [dragDelta[0], -dragDelta[1]]
+				const persistRect = persistView.canvas.getBoundingClientRect()
+				const persistPointer = (id, type, at, buttons) => {
+					persistView.canvas.dispatchEvent(new PointerEvent(type, {
+						bubbles: true,
+						cancelable: true,
+						pointerId: id,
+						pointerType: 'mouse',
+						button: 0,
+						buttons,
+						clientX: persistRect.left + at[0],
+						clientY: persistRect.top + at[1]
+					}))
+				}
+				const persistDragId = pointerId += 1
+				persistPointer(persistDragId, 'pointerdown', dragStart, 1)
+				persistPointer(persistDragId, 'pointermove', [dragStart[0] + dragDelta[0] / 2, dragStart[1] + dragDelta[1] / 2], 1)
+				persistPointer(persistDragId, 'pointermove', [dragStart[0] + dragDelta[0], dragStart[1] + dragDelta[1]], 1)
+				persistPointer(persistDragId, 'pointerup', [dragStart[0] + dragDelta[0], dragStart[1] + dragDelta[1]], 0)
+				await settle(120)
+				const movedBox = persistView.getSelectionBox()
+				const persistedPoints = new Map(persistView.getData().points.map(point => [point.id, [point.x, point.y]]))
+				const near = (left, right) => Math.abs(left - right) <= 0.75
+				check('保留框拖动：框按屏幕增量整体平移，宽高不变', Boolean(movedBox) && near(movedBox.x, retainedBox.x + dragDelta[0]) && near(movedBox.y, retainedBox.y + dragDelta[1]) && near(movedBox.width, retainedBox.width) && near(movedBox.height, retainedBox.height), JSON.stringify({ before: retainedBox, after: movedBox }))
+				check('保留框拖动：框内两个节点一起按同一世界增量移动，选中集不变', ['pv-a', 'pv-b'].every(id => near(persistedPoints.get(id)[0], persistPointsBefore.get(id)[0] + dragWorldDelta[0]) && near(persistedPoints.get(id)[1], persistPointsBefore.get(id)[1] + dragWorldDelta[1])) && persistView.getSelectionData().pointCount === 2, JSON.stringify({ before: [...persistPointsBefore], after: [...persistedPoints], expected: dragWorldDelta }))
+				const persistLineMoved = persistView.getLine('pv-line')?.path ?? []
+				const persistChannelLineMoved = persistView.getLine('pv-ch-line')?.path ?? []
+				const persistChannelMoved = persistView.getChannel('pv-ch')?.skeleton ?? []
+				const shifted = (before, after) => before.length > 1 && after.length === before.length && after.every((point, index) => near(point[0], before[index][0] + dragWorldDelta[0]) && near(point[1], before[index][1] + dragWorldDelta[1]))
+				check('保留框拖动：独立线路、通道成员回线与通道骨架都跟着节点更新', shifted(persistLineBefore, persistLineMoved) && shifted(persistChannelLineBefore, persistChannelLineMoved) && shifted(persistChannelBefore, persistChannelMoved), JSON.stringify({ line: [persistLineBefore[0], persistLineMoved[0]], channel: [persistChannelBefore[0], persistChannelMoved[0]] }))
+				// 相机移动：div 框按世界锚点重新投影，和 canvas 顶点在同一帧走到新位置
+				const cameraBeforeBoxMove = persistView.getCamera()
+				const boxBeforeCameraMove = persistView.getSelectionBox()
+				const worldPan = [46, 22]
+				// 相机中心向 +x / +y 移动时，固定在世界坐标里的框在屏幕上向反方向走
+				const expectedPan = [-worldPan[0] * cameraBeforeBoxMove.scale, worldPan[1] * cameraBeforeBoxMove.scale]
+				persistView.setCamera({ center: [cameraBeforeBoxMove.center[0] + worldPan[0], cameraBeforeBoxMove.center[1] + worldPan[1]] })
+				await settle(100)
+				const boxAfterPan = persistView.getSelectionBox()
+				const domAfterPan = persistHost.querySelector('.gis-view__selection-box.persist-box-live')
+				const canvasAfterPan = persistView.canvas.getBoundingClientRect()
+				const domRectAfterPan = domAfterPan?.getBoundingClientRect()
+				check('保留框（div）：平移地图时框跟着世界坐标移动，DOM 与 getSelectionBox() 同步且宽高不变',
+					Boolean(boxBeforeCameraMove && boxAfterPan && domRectAfterPan) && near(boxAfterPan.x, boxBeforeCameraMove.x + expectedPan[0]) && near(boxAfterPan.y, boxBeforeCameraMove.y + expectedPan[1]) && near(boxAfterPan.width, boxBeforeCameraMove.width) && near(boxAfterPan.height, boxBeforeCameraMove.height) && Math.abs(domRectAfterPan.left - canvasAfterPan.left - boxAfterPan.x) <= 1 && Math.abs(domRectAfterPan.top - canvasAfterPan.top - boxAfterPan.y) <= 1,
+					JSON.stringify({ before: boxBeforeCameraMove, after: boxAfterPan, expected: [boxBeforeCameraMove.x + expectedPan[0], boxBeforeCameraMove.y + expectedPan[1]], dom: domRectAfterPan ? [domRectAfterPan.left, domRectAfterPan.top, domRectAfterPan.width, domRectAfterPan.height] : null, canvas: [canvasAfterPan.left, canvasAfterPan.top] }))
+				persistView.setCamera({ scale: cameraBeforeBoxMove.scale * 1.5 })
+				await settle(100)
+				const boxAfterZoom = persistView.getSelectionBox()
+				const domAfterZoom = persistHost.querySelector('.gis-view__selection-box.persist-box-live')
+				check('保留框（div）：缩放地图时框宽高按相机比例变化，DOM 尺寸与读数一致',
+					Boolean(boxAfterPan && boxAfterZoom && domAfterZoom) && near(boxAfterZoom.width, boxAfterPan.width * 1.5) && near(boxAfterZoom.height, boxAfterPan.height * 1.5) && near(domAfterZoom.getBoundingClientRect().width, boxAfterZoom.width) && near(domAfterZoom.getBoundingClientRect().height, boxAfterZoom.height),
+					JSON.stringify({ pan: boxAfterPan, zoom: boxAfterZoom }))
+				persistView.setCamera(cameraBeforeBoxMove)
+				await settle(100)
+				const selectedBeforeManualClose = persistIds()
+				persistView.clearSelectionBox()
+				check('clearSelectionBox()：手动收起矩形，不改选中集', persistView.getSelectionBox() === null && persistIds() === selectedBeforeManualClose, persistView.getSelectionBox() === null ? persistIds() : '框还在')
+				persistView.selectInBox(persistPointBox(), { selectionKinds: ['point'] })
+				const persistBlankId = pointerId += 1
+				persistPointer(persistBlankId, 'pointerdown', [18, 18], 1)
+				persistPointer(persistBlankId, 'pointerup', [18, 18], 0)
+				await settle(80)
+				check('保留框：点击框外空白取消选中时自动收起', persistView.getSelectionBox() === null && persistView.getSelectionData().count === 0, JSON.stringify({ box: persistView.getSelectionBox(), ids: persistIds() }))
+				persistView.selectInBox(persistPointBox(), { selectionKinds: ['point'] })
+				persistView.selectFeatures('pv-a')
+				check('保留框：选中集变化时自动收起', persistView.getSelectionBox() === null && persistIds() === 'pv-a', JSON.stringify({ box: persistView.getSelectionBox(), ids: persistIds() }))
+				persistView.selectInBox(persistPointBox(), { selectionKinds: ['point'] })
+				persistView.updateOptions({ selectionBoxPersistent: false })
+				check('selectionBoxPersistent 运行时关闭：立即收起保留框', persistView.getSelectionBox() === null && persistView.getSelectionData().pointCount === 2, JSON.stringify({ box: persistView.getSelectionBox(), ids: persistIds() }))
+				persistView.destroy()
+				persistHost.remove()
+
 				/* ---------- 问题 1（本轮）：接口取消选中 —— deselect（单个 / 一批 / 整条通道）与「取消全部」的老写法 ---------- */
 				const dzHost = document.createElement('div')
 				dzHost.style.cssText = 'width:320px;height:200px'
@@ -878,8 +999,189 @@
 				await triggerClick(0, 0)
 				await triggerClick(0, 0)
 				check('selectTrigger: dblClick + multiSelect：双击已选节点是取消', triggerIds() === 'trigger-b' && triggerClicks.at(-1)?.action?.type === 'toggleSelect', triggerIds())
+
+				/* toggleSelect：再次选中即取消，缺省关；单击 / 双击两种触发方式与 Ctrl 先选后点同一口径 */
+				triggerView.updateOptions({ selectTrigger: 'click', multiSelect: false })
+				triggerView.selectFeatures(null)
+				await settle(360)
+				triggerClicks.length = 0
+				triggerDblClicks.length = 0
+				triggerChanges.length = 0
+				await triggerClick(0, 0)
+				await settle(360)
+				await triggerClick(0, 0)
+				check('toggleSelect 缺省关：隔开两次普通单击仍保持选中', triggerIds() === 'trigger-a' && triggerChanges.length === 1 && triggerChanges.at(-1)?.action?.type === 'select', `${triggerIds()} / ${triggerChanges.at(-1)?.action?.type}`)
+
+				triggerView.updateOptions({ toggleSelect: true })
+				await settle(360)
+				const toggleOffClicks = triggerClicks.length
+				const toggleOffChanges = triggerChanges.length
+				await triggerClick(0, 0)
+				check('toggleSelect：再次普通单击已选节点即取消，onClick 与 onSelectChange 都记 toggleSelect',
+					triggerIds() === '' && triggerClicks.length === toggleOffClicks + 1 && triggerClicks.at(-1)?.action?.type === 'toggleSelect' &&
+						triggerChanges.length === toggleOffChanges + 1 && triggerChanges.at(-1)?.action?.type === 'toggleSelect',
+					`${triggerIds() || '空'} / ${triggerClicks.at(-1)?.action?.type} / ${triggerChanges.at(-1)?.action?.type}`)
+
+				triggerView.selectFeatures(null)
+				await settle(360)
+				triggerClicks.length = 0
+				triggerChanges.length = 0
+				await triggerClick(0, 0, { ctrlKey: true })
+				const ctrlSelectedBeforePlainClick = triggerIds()
+				await settle(360)
+				await triggerClick(0, 0)
+				check('toggleSelect：Ctrl 先选中后，普通单击同一节点即取消',
+					ctrlSelectedBeforePlainClick === 'trigger-a' && triggerIds() === '' && triggerClicks.at(-1)?.action?.type === 'toggleSelect' && triggerChanges.at(-1)?.action?.type === 'toggleSelect',
+					`${ctrlSelectedBeforePlainClick || '空'} → ${triggerIds() || '空'} / ${triggerClicks.at(-1)?.action?.type}`)
+
+				triggerView.selectFeatures(null)
+				triggerView.updateOptions({ selectTrigger: 'dblClick' })
+				await settle(360)
+				triggerClicks.length = 0
+				triggerDblClicks.length = 0
+				triggerChanges.length = 0
+				await triggerClick(0, 0)
+				await triggerClick(0, 0)
+				check('toggleSelect + selectTrigger: dblClick：双击选中只改一次选中集',
+					triggerIds() === 'trigger-a' && triggerChanges.length === 1 && triggerChanges.at(-1)?.action?.type === 'select' && triggerClicks.length === 2 && triggerDblClicks.length === 1,
+					`${triggerIds()} / change ${triggerChanges.length} / click ${triggerClicks.length} / dbl ${triggerDblClicks.length}`)
+				await triggerClick(0, 0)
+				await triggerClick(0, 0)
+				check('toggleSelect + selectTrigger: dblClick：再次双击取消，且一轮双击只取反一次',
+					triggerIds() === '' && triggerChanges.length === 2 && triggerChanges.at(-1)?.action?.type === 'toggleSelect' && triggerClicks.at(-1)?.action?.type === 'toggleSelect' && triggerClicks.length === 4 && triggerDblClicks.length === 2,
+					`${triggerIds() || '空'} / change ${triggerChanges.length} / click ${triggerClicks.length} / dbl ${triggerDblClicks.length}`)
 				triggerView.destroy()
 				triggerHost.remove()
+
+				/* ---------- toggleSelect：独立线路 / 通道回线 / 通道分组 / 整条通道 ---------- */
+				const toggleLineHost = document.createElement('div')
+				toggleLineHost.style.cssText = 'width:520px;height:340px'
+				document.body.append(toggleLineHost)
+				const toggleLineClicks = []
+				const toggleLineChanges = []
+				const toggleLineView = createGisView(toggleLineHost, {
+					points: [
+						{ id: 'tl-a', x: 0, y: 0, size: 10 },
+						{ id: 'tl-b', x: 200, y: 0, size: 10 },
+						{ id: 'tl-c', x: 0, y: 80, size: 10 },
+						{ id: 'tl-d', x: 200, y: 80, size: 10 }
+					],
+					lines: [
+						{ id: 'tl-solo', path: [[0, -90], [200, -90]], width: 8 },
+						{ id: 'tl-c1', from: 'tl-a', to: 'tl-b', width: 8 },
+						{ id: 'tl-c2', from: 'tl-a', to: 'tl-b', width: 8 },
+						{ id: 'tl-c3', from: 'tl-a', to: 'tl-b', width: 8 },
+						{ id: 'tl-other', from: 'tl-c', to: 'tl-d', width: 8 }
+					],
+					channels: [
+						{
+							id: 'tl-ch',
+							from: 'tl-a',
+							to: 'tl-b',
+							lineIds: ['tl-c1', 'tl-c2', 'tl-c3'],
+							groups: [
+								{ id: 'tl-g1', lineIds: ['tl-c1'] },
+								{ id: 'tl-g2', lineIds: ['tl-c2', 'tl-c3'] }
+							]
+						},
+						{ id: 'tl-ch2', from: 'tl-c', to: 'tl-d', lineIds: ['tl-other'] }
+					],
+					features: { select: true },
+					toggleSelect: true,
+					selectionKinds: 'all',
+					showGrid: false,
+					fitOnInit: false,
+					initialView: { center: [100, 0], scale: 1 },
+					width: 520,
+					height: 340,
+					onClick: payload => toggleLineClicks.push(payload),
+					onSelectChange: payload => toggleLineChanges.push(payload)
+				})
+				await settle(120)
+				const toggleLineIds = () => toggleLineView.getSelectionData().ids.map(String).join(',')
+				const toggleLineTap = async (id) => {
+					const path = toggleLineView.getLine(id)?.path ?? []
+					const first = path[0]
+					const last = path[path.length - 1]
+					const middle = [(first[0] + last[0]) / 2, (first[1] + last[1]) / 2]
+					const screen = toggleLineView.project(middle[0], middle[1])
+					const bounds = toggleLineView.canvas.getBoundingClientRect()
+					pointerId += 1
+					const common = { bubbles: true, cancelable: true, pointerId, pointerType: 'mouse', button: 0, clientX: bounds.left + screen[0], clientY: bounds.top + screen[1] }
+					toggleLineView.canvas.dispatchEvent(new PointerEvent('pointerdown', { ...common, buttons: 1 }))
+					toggleLineView.canvas.dispatchEvent(new PointerEvent('pointerup', { ...common, buttons: 0 }))
+					await settle(360)
+				}
+				const resetToggleLine = async (ids, channelSelectMode) => {
+					toggleLineView.updateOptions({ channelSelectMode })
+					toggleLineView.selectFeatures(ids)
+					toggleLineClicks.length = 0
+					toggleLineChanges.length = 0
+					await settle(120)
+				}
+				await resetToggleLine(['tl-solo', 'tl-other'], 'line')
+				await toggleLineTap('tl-solo')
+				check('toggleSelect 独立线路：再次点击已选线路只取消它，其他选中项保留',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect' && toggleLineChanges.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type} / ${toggleLineChanges.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c1', 'tl-c2'], 'line')
+				await toggleLineTap('tl-c1')
+				check('toggleSelect + channelSelectMode: line：只取消命中的通道回线，同通道其他选中回线保留',
+					toggleLineIds() === 'tl-c2' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c1', 'tl-c2', 'tl-c3', 'tl-other'], 'line')
+				await toggleLineTap('tl-c2')
+				check('toggleSelect + channelSelectMode: line：已完整选中的通道仍整条取消，其他选中项保留',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c2', 'tl-c3', 'tl-other'], 'line')
+				await toggleLineTap('tl-c2')
+				check('toggleSelect + channelSelectMode: line：已完整选中的分组整组取消，不会只删命中回线',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c1', 'tl-c2', 'tl-c3'], 'group')
+				await toggleLineTap('tl-c2')
+				check('toggleSelect + channelSelectMode: group：取消命中的整组，其他分组不误伤',
+					toggleLineIds() === 'tl-c1' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c1', 'tl-c2'], 'group')
+				await toggleLineTap('tl-c3')
+				check('toggleSelect + channelSelectMode: group：分组只选中一部分时，点组内另一条也取消整组',
+					toggleLineIds() === 'tl-c1' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c1', 'tl-c2', 'tl-c3', 'tl-other'], 'channel')
+				await toggleLineTap('tl-c3')
+				check('toggleSelect + channelSelectMode: channel：取消命中的整条通道，其他通道不误伤',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c1', 'tl-other'], 'channel')
+				await toggleLineTap('tl-c2')
+				check('toggleSelect + channelSelectMode: channel：通道只选中一部分时，点通道内另一条也取消整条',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				// selectionKinds 只约束框选 / Ctrl 多选；普通单击的 toggleSelect 取消不受它限制（GisEdit 只开 point / lines 时仍要能收通道）
+				toggleLineView.updateOptions({ selectionKinds: ['point', 'lines'] })
+				await resetToggleLine(['tl-c1', 'tl-c2', 'tl-c3', 'tl-other'], 'channel')
+				await toggleLineTap('tl-c2')
+				check('toggleSelect 不受 selectionKinds 限制：配置未含 channel 时仍能整条取消通道',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+
+				await resetToggleLine(['tl-c2', 'tl-c3', 'tl-other'], 'line')
+				await toggleLineTap('tl-c2')
+				check('toggleSelect 不受 selectionKinds 限制：配置未含 channel 时仍能整组取消',
+					toggleLineIds() === 'tl-other' && toggleLineClicks.at(-1)?.action?.type === 'toggleSelect',
+					`${toggleLineIds() || '空'} / ${toggleLineClicks.at(-1)?.action?.type}`)
+				toggleLineView.destroy()
+				toggleLineHost.remove()
 			}
 			catch (error) {
 				results.push('ERROR ' + (error && error.stack ? error.stack : error))

package/docs/steps/step-06-style.js

@@ -3,8 +3,9 @@
  * 对应库里的 rules.js + condition.js，文档 5.1 / 5.2。
  *
  * 一条规则长这样：{ when: { field: 'voltage', op: '>=', value: 500 }, style: { color: '#e0592e' } }。
- * 条件只编译一次、每条要素依次匹配、第一条命中的生效；样式优先级是
- * 「状态样式（第 5 步）> 要素自身字段 > 批量规则 > 全局样式」。
+ * 条件只编译一次、每条要素依次匹配、第一条命中的生效；这个最小教学版的样式优先级是
+ * 「状态样式（第 5 步）> 要素自身字段 > 批量规则 > 全局样式」。完整组件另有逐条 override 规则，
+ * 普通规则始终高于全局样式，override 规则写了的字段才压过要素自身字段。
  */
 import { createPickView } from './step-05-pick.js'
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gis-view-webgl2",
-  "version": "0.1.11",
-  "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，无内置界面，点击 / 双击 / 拖拽可配置",
+  "version": "0.1.13",
+  "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，可选鹰眼图与图例，点击 / 双击 / 拖拽可配置",
   "type": "module",
   "scripts": {
     "dev": "vite",