gis-view-webgl2 0.1.13 → 0.1.15

package/docs/steps/selftest-features.html

@@ -41,6 +41,7 @@
 				const { compileLineRules, resolveLineStyle } = await import('../../src/gis-view/line.js')
 				const { parseColor } = await import('../../src/gis-view/utils.js')
 				const { resolveGeoJson } = await import('../../src/gis-view/background.js')
+				const { boundsOfData, createGeoMapper, createGeoProjection } = await import('../../src/gis-view/projection.js')
 				// 本页断言是照「限数 + 避让」的老口径写的：统一按优化档（labelOptimize: true）跑
 				const createGisView = (host, options = {}) => createGisViewRaw(host, { labelOptimize: true, ...options })
 				const { dcLineDecoration, dcLineDecorationSymbol, pathSymbol } = await import('../demos/gisStyle.js')
@@ -344,6 +345,92 @@
 					Math.abs(rotatedGeo.regions[0].center[0] - 116.66666666666666) < 1e-6 && Math.abs(rotatedGeo.regions[0].center[1] - 216.66666666666669) < 1e-6,
 					JSON.stringify({ rotation: rotatedGeo.rotation, bounds: rotatedGeo.bounds, rawBounds: rotatedGeo.rawBounds, center: rotatedGeo.regions[0].center }))
 
+				// 旋转 / 平移后的投影：经纬度换算必须跟最终画出来的几何完全重合，不能只算 aspectScale
+				const rotatedProjection = createGeoProjection(rotatedGeo)
+				const rotatedProjectedCorner = rotatedProjection.project(0, 0)
+				const rotatedCornerPoint = rotatedGeo.regions[0].polygons[0][0][0]
+				const rotatedRoundtrip = rotatedProjection.unproject(rotatedProjectedCorner[0], rotatedProjectedCorner[1])
+				check('getGeoProjection 对 geoJsonStyle.bounds + rotation 做完整正反换算',
+					Math.abs(rotatedProjectedCorner[0] - rotatedCornerPoint[0]) < 1e-6 && Math.abs(rotatedProjectedCorner[1] - rotatedCornerPoint[1]) < 1e-6 &&
+						Math.abs(rotatedRoundtrip[0]) < 1e-9 && Math.abs(rotatedRoundtrip[1]) < 1e-9,
+					JSON.stringify({ projected: rotatedProjectedCorner, geometry: rotatedCornerPoint, roundtrip: rotatedRoundtrip }))
+
+				const aspectMapper = createGeoMapper({ bounds: { minX: 0, minY: 0, maxX: 10, maxY: 10 }, aspectScale: 0.75 }, { mode: 'scale' })
+				const aspectMapped = aspectMapper.map([0, 0])
+				const aspectUnmapped = aspectMapper.unmap(aspectMapped)
+				const mappedLine = aspectMapper.mapLine({ from: 'a', to: 'b', start: [0, 0], end: [10, 10], path: [[0, 0], [10, 10]] })
+				const endpointBounds = boundsOfData({ points: [], lines: [{ start: [2, 20], end: [12, 30] }] })
+				check('默认 scale 映射与 aspectScale 对齐，start / end 一起映射且参与 fit 范围',
+					Math.abs(aspectMapped[0] - 1.25) < 1e-9 && Math.abs(aspectMapped[1]) < 1e-9 &&
+						Math.abs(aspectUnmapped[0]) < 1e-9 && Math.abs(aspectUnmapped[1]) < 1e-9 &&
+						Array.isArray(mappedLine.start) && Array.isArray(mappedLine.end) && mappedLine.from === 'a' && mappedLine.to === 'b' &&
+						endpointBounds?.minX === 2 && endpointBounds?.maxX === 12 && endpointBounds?.minY === 20 && endpointBounds?.maxY === 30,
+					JSON.stringify({ mapped: aspectMapped, roundtrip: aspectUnmapped, line: mappedLine, endpointBounds }))
+
+				const nestedMapper = createGeoMapper({ bounds: { minX: 0, minY: 0, maxX: 10, maxY: 10 }, aspectScale: 1 }, {
+					mode: 'scale', scaleX: 2, scaleY: 3, offsetX: 10, offsetY: 20
+				})
+				const nestedChannel = nestedMapper.mapChannel({
+					id: 'nested', path: [[1, 1]],
+					groups: [{ lineIds: ['l1'], path: [[2, 2], { x: 3, y: 4 }], waypointOffsets: { 1: [1, 2], 2: { x: -1, y: 0.5 } } }]
+				})
+				const nestedPoint = nestedMapper.mapPoint({
+					x: 1, y: 1, decorations: [{ at: [2, 2] }, { anchor: 'fixed' }]
+				})
+				const nestedLine = nestedMapper.mapLine({
+					start: { x: 1, y: 1 }, end: [2, 2],
+					decorations: [{ position: [3, 3], at: { x: 4, y: 4 } }, { position: 0.5 }, { position: { distance: 10 } }]
+				})
+				const nestedBounds = boundsOfData({
+					points: [{ x: 0, y: 0, decorations: [{ at: [100, 200] }] }],
+					lines: [{ path: [{ x: 2, y: 3 }], decorations: [{ position: [4, 5] }] }],
+					channels: [{ groups: [{ path: [{ x: 6, y: 7 }] }] }]
+				})
+				check('映射器覆盖通道分组、对象坐标与固定坐标装饰',
+					nestedChannel.path[0][0] === 7 && nestedChannel.path[0][1] === 13 &&
+						nestedChannel.groups[0].path[0][0] === 9 && nestedChannel.groups[0].path[0][1] === 16 &&
+						nestedChannel.groups[0].path[1].x === 11 && nestedChannel.groups[0].path[1].y === 22 &&
+						nestedChannel.groups[0].waypointOffsets[1][0] === 2 && nestedChannel.groups[0].waypointOffsets[1][1] === 6 &&
+						nestedChannel.groups[0].waypointOffsets[2].x === -2 && nestedChannel.groups[0].waypointOffsets[2].y === 1.5 &&
+						nestedPoint.decorations[0].at[0] === 9 && nestedPoint.decorations[0].at[1] === 16 &&
+						nestedLine.start.x === 7 && nestedLine.start.y === 13 && nestedLine.end[0] === 9 && nestedLine.end[1] === 16 &&
+						nestedLine.decorations[0].position[0] === 11 && nestedLine.decorations[1].position === 0.5 &&
+						nestedLine.decorations[2].position.distance === 10 && nestedLine.decorations[0].at.x === 13 && nestedLine.decorations[0].at.y === 22 &&
+						nestedBounds?.minX === 0 && nestedBounds?.maxX === 100 && nestedBounds?.minY === 0 && nestedBounds?.maxY === 200,
+					JSON.stringify({ channel: nestedChannel, point: nestedPoint, line: nestedLine, bounds: nestedBounds }))
+
+				const rotatedVectorMapper = createGeoMapper({
+					bounds: { minX: 0, minY: 0, maxX: 10, maxY: 10 }, aspectScale: 1,
+					drawTransform: { scaleX: 2, scaleY: 1, offsetX: 100, offsetY: 50, center: [110, 55], rotation: 90 }
+				}, { mode: 'scale' })
+				const rotatedOffset = rotatedVectorMapper.mapChannel({ groups: [{ lineIds: ['l1'], waypointOffsets: { 0: [1, 0] } }] }).groups[0].waypointOffsets[0]
+				check('waypointOffsets 按向量映射，旋转后不叠平移',
+					Math.abs(rotatedOffset[0]) < 1e-9 && Math.abs(rotatedOffset[1] + 2) < 1e-9,
+					JSON.stringify({ offset: rotatedOffset }))
+
+				// world 模式：把当前画出来的世界坐标反投影回 GeoJSON 的真实经纬度；旋转背景后仍可往返
+				const worldMapper = createGeoMapper(rotatedGeo, { mode: 'world' })
+				const worldMappedCorner = worldMapper.map(rotatedProjectedCorner)
+				const worldRoundtrip = worldMapper.unmap(worldMappedCorner)
+				const worldOffset = worldMapper.mapChannel({ groups: [{ lineIds: ['l1'], waypointOffsets: { 0: [1, 0] } }] }).groups[0].waypointOffsets[0]
+				const worldOffsetExpected = [
+					rotatedProjection.unproject(1, 0)[0] - rotatedProjection.unproject(0, 0)[0],
+					rotatedProjection.unproject(1, 0)[1] - rotatedProjection.unproject(0, 0)[1]
+				]
+				check('world 映射把画出来的世界坐标反投影成真实经纬度，旋转后往返与向量换算一致',
+					Math.abs(worldMappedCorner[0]) < 1e-6 && Math.abs(worldMappedCorner[1]) < 1e-6 &&
+						Math.abs(worldRoundtrip[0] - rotatedProjectedCorner[0]) < 1e-6 && Math.abs(worldRoundtrip[1] - rotatedProjectedCorner[1]) < 1e-6 &&
+						Math.abs(worldOffset[0] - worldOffsetExpected[0]) < 1e-9 && Math.abs(worldOffset[1] - worldOffsetExpected[1]) < 1e-9,
+					JSON.stringify({ mapped: worldMappedCorner, roundtrip: worldRoundtrip, offset: worldOffset, expected: worldOffsetExpected }))
+
+				const normalizedGeo = resolveGeoJson({
+					type: 'Polygon',
+					coordinates: [[[0, 0], [0, 0], [10, 0], [10, 5], [10, 5], [0, 5], [0, 0]]]
+				}, { aspectScale: 1 }, 1)
+				check('GeoJSON 闭合尾点与相邻重复点在剖分前归一化，不重复铺描边',
+					normalizedGeo.strokes.length / 4 === 4 && normalizedGeo.fills.length / 6 === 2 && normalizedGeo.rawBounds?.minX === 0 && normalizedGeo.rawBounds?.maxX === 10,
+					JSON.stringify({ segments: normalizedGeo.strokes.length / 4, triangles: normalizedGeo.fills.length / 6, rawBounds: normalizedGeo.rawBounds }))
+
 				// 背景编辑模式：网架的点击 / 拖点 / 平移 / 右键 / 删除键全部停用，滚轮缩放仍保留
 				const editingBox = canvas.getBoundingClientRect()
 				const editingPointScreen = id => {
@@ -531,6 +618,59 @@
 					Math.abs(apiPatchedState.width - (apiWidthBefore + 2)) < 1e-6 && Math.abs(apiPatchedState.rotation - 15) < 1e-6 &&
 					view.getOptions().background?.geoJson?.type === 'FeatureCollection' && view.getOptions().background?.geoJsonStyle?.rotation === 15,
 					JSON.stringify({ width: apiPatchedState.width, rotation: apiPatchedState.rotation }))
+				const networkPoint = view.getData().points[0]
+				const expectedNetworkLngLat = view.worldToLngLat(networkPoint.x, networkPoint.y)
+				const convertedNetwork = view.mapDataToLngLat()
+				check('mapDataToLngLat：背景编辑后按当前 bounds / rotation 转换整份网架，返回副本且原数据不变',
+					Boolean(expectedNetworkLngLat && convertedNetwork?.points?.length && convertedNetwork.lines?.length) && Array.isArray(convertedNetwork.channels) &&
+						Math.abs(convertedNetwork.points[0].x - expectedNetworkLngLat[0]) < 1e-9 && Math.abs(convertedNetwork.points[0].y - expectedNetworkLngLat[1]) < 1e-9 &&
+						networkPoint.x === 100 && networkPoint.y === -70 && view.getData().points[0].x === 100,
+					JSON.stringify({ converted: convertedNetwork?.points?.[0], expected: expectedNetworkLngLat, original: networkPoint }))
+				const convertedSnapshot = JSON.stringify(convertedNetwork)
+				const restoredNetwork = view.mapLngLatToData(convertedNetwork)
+				const originalNetwork = {
+					points: view.getData().points,
+					lines: view.getData().lines,
+					channels: view.getOptions().channels
+				}
+				const sameGeometry = (left, right) => {
+					if (typeof left === 'number' && typeof right === 'number') {
+						return Math.abs(left - right) < 1e-7
+					}
+					if (Array.isArray(left) || Array.isArray(right)) {
+						return Array.isArray(left) && Array.isArray(right) && left.length === right.length &&
+							left.every((value, index) => sameGeometry(value, right[index]))
+					}
+					if (left && right && typeof left === 'object' && typeof right === 'object') {
+						const leftKeys = Object.keys(left)
+						return leftKeys.length === Object.keys(right).length &&
+							leftKeys.every(key => Object.prototype.hasOwnProperty.call(right, key) && sameGeometry(left[key], right[key]))
+					}
+					return left === right
+				}
+				check('mapLngLatToData：经纬度按当前底图投影写回世界坐标，节点 / 线路 / 通道分组几何与原数据一致，且不改传入的存档',
+					Boolean(restoredNetwork?.points?.length && restoredNetwork.lines?.length && Array.isArray(restoredNetwork.channels)) &&
+						sameGeometry(restoredNetwork.points, originalNetwork.points) &&
+						sameGeometry(restoredNetwork.lines, originalNetwork.lines) &&
+						sameGeometry(restoredNetwork.channels, originalNetwork.channels) &&
+						JSON.stringify(convertedNetwork) === convertedSnapshot,
+					JSON.stringify({ restored: restoredNetwork?.points?.[0], original: originalNetwork.points[0], unchanged: JSON.stringify(convertedNetwork) === convertedSnapshot }))
+				const roundtripAnchor = originalNetwork.points[0]
+				const roundtripScreenBefore = view.project(roundtripAnchor.x, roundtripAnchor.y)
+				view.updateData({ points: [], lines: [], channels: [] })
+				const emptyNetworkSizes = [view.getData().points.length, view.getData().lines.length, view.getOptions().channels.length]
+				view.updateData(restoredNetwork)
+				await hoverFrame()
+				const roundtripAnchorAfter = view.getData().points.find(point => point.id === roundtripAnchor.id)
+				const roundtripScreenAfter = roundtripAnchorAfter ? view.project(roundtripAnchorAfter.x, roundtripAnchorAfter.y) : null
+				check('保存 → 清空 → mapLngLatToData 回灌：节点 / 线路 / 通道恢复，首节点屏幕落点不变',
+					emptyNetworkSizes.every(size => size === 0) &&
+						roundtripAnchorAfter && Math.abs(roundtripAnchorAfter.x - roundtripAnchor.x) < 1e-7 && Math.abs(roundtripAnchorAfter.y - roundtripAnchor.y) < 1e-7 &&
+						view.getData().lines.length === originalNetwork.lines.length && view.getOptions().channels.length === originalNetwork.channels.length &&
+						roundtripScreenAfter && Math.hypot(roundtripScreenAfter[0] - roundtripScreenBefore[0], roundtripScreenAfter[1] - roundtripScreenBefore[1]) < 1e-6,
+					JSON.stringify({ empty: emptyNetworkSizes, world: roundtripAnchorAfter, screen: [roundtripScreenBefore, roundtripScreenAfter] }))
+				view.updateData(originalNetwork)
+				await hoverFrame()
 				const endEditorReturn = view.endBackgroundEdit()
 				await hoverFrame()
 				check('endBackgroundEdit：移除编辑层、读数回到 null 并恢复进入前的 backgroundEditing',
@@ -634,7 +774,7 @@
 					lines: [{ id: 'bound', from: 'p1', to: 'p2', color: '#1f5fd0', width: 8, decorations: [decoration] }],
 					showGrid: false,
 					// 这一节要加 / 删拐点，看「钉住」的装饰是不是贴着线走：拐点编辑缺省关（见 src/gis-view/features.js）
-					waypointEditable: true
+					features: { waypoint: true }
 				})
 				const shot2 = async () => {
 					await settle()
@@ -1009,7 +1149,7 @@
 					lineLabel: { enabled: true, position: 0.5, maxCount: 8 },
 					showGrid: false,
 					// 这里要按住节点拖一下看标签跟不跟：拖拽缺省关（见 src/gis-view/features.js）
-					draggable: true
+					features: { drag: true }
 				})
 				const followCanvas = view9.canvas
 				const followBox = followCanvas.getBoundingClientRect()
@@ -1152,10 +1292,8 @@
 						fitPadding: 70,
 						// 复制缺省关（见 src/gis-view/features.js）：这一节按住 Alt 点节点要出预览
 						copy: { enabled: true },
-						// 下面还要按住 Shift 拖出选框验默认快捷键：框选缺省也关
-						boxSelect: true,
-						// Esc 取消复制 / Ctrl+C 收剪贴板 / Ctrl+V 粘贴都走快捷键：键盘也显式打开
-						features: { keyboard: true },
+						// 下面还要按住 Shift 拖出选框验默认快捷键、Ctrl+C / Ctrl+V 验剪贴板：框选与键盘显式打开
+						features: { keyboard: true, boxSelect: true },
 						// 显式写一遍映射，验证不依赖默认值也能监听到 onPointCopy
 						shortcuts: { copy: 'ctrl+c', paste: 'ctrl+v' },
 						onPointCopy: payload => {
@@ -1363,7 +1501,7 @@
 						fitPadding: 70,
 						showGrid: false,
 						// 这一节要按住节点拖到另一个节点上：拖拽缺省关（见 src/gis-view/features.js）
-						draggable: true,
+						features: { drag: true },
 						merge: { distance: 8 },
 						onPointDrag: payload => cmDragEvents.push(payload),
 						onPointMerge: payload => {
@@ -1614,7 +1752,7 @@
 						showGrid: false,
 						merge: { confirm: payload => Promise.resolve().then(() => payload.confirm()) },
 						// 拖节点合并不用拖拽开关？用——拖拽缺省关，这里显式打开
-						draggable: true,
+						features: { drag: true },
 						onPointMerge: payload => {
 							if (payload.phase === 'pending' && cmCancelNext) {
 								payload.cancel()
@@ -1650,7 +1788,7 @@
 						showGrid: false,
 						merge: { distance: 8, channelGroups: 'merge' },
 						// 拖节点合并不用拖拽开关？用——拖拽缺省关，这里显式打开
-						draggable: true,
+						features: { drag: true },
 						onPointMerge: payload => {
 							cmMergeEvents5.push(payload)
 							if (payload.phase === 'pending') {
@@ -1690,7 +1828,7 @@
 						fitPadding: 70,
 						showGrid: false,
 						merge: { trigger: 'center', confirm: false },
-						draggable: true,
+						features: { drag: true },
 						onPointMerge: payload => triggerEvents.push(payload)
 					})
 					await settle(120)
@@ -1711,7 +1849,7 @@
 						fitPadding: 70,
 						showGrid: false,
 						merge: { trigger: 'collision', confirm: false },
-						draggable: true
+						features: { drag: true }
 					})
 					await settle(120)
 					const collisionTarget = collisionView.project(140, 0)
@@ -1753,7 +1891,7 @@
 						// 合并缺省关：这一节要把节点拖到目标上验待确认状态，显式打开
 						merge: { enabled: true },
 						// 拖拽同样缺省关：上面这一拖是「按住节点拖」
-						draggable: true,
+						features: { drag: true },
 						onPointMerge: payload => msEvents.push(payload),
 						onDataChange: payload => msChanges.push(payload)
 					})
@@ -1898,7 +2036,7 @@
 						initialView: { center: [0, 0], scale: 2.5 },
 						showGrid: false,
 						// 这一节要按住节点拖到另一个节点上：拖拽缺省关
-						draggable: true
+						features: { drag: true }
 					})
 					await settle(150)
 					const cmLowScreen = cmRaiseView.project(-5, 0)
@@ -1950,7 +2088,7 @@
 					cmRaiseChannelHost.style.cssText = 'width:320px;height:240px'
 					document.body.appendChild(cmRaiseChannelHost)
 					const cmRaiseChannelBuild = createChannels([
-						{ id: 'raise-ch', from: 'ch-n1', to: 'ch-n2', lineIds: ['ch-c1', 'ch-c2'] }
+						{ id: 'raise-ch', from: 'ch-n1', to: 'ch-n2', circuits: 2, lineIds: ['ch-c1', 'ch-c2'] }
 					])
 					const cmRaiseChannelView = createGisView(cmRaiseChannelHost, {
 						points: [
@@ -1958,8 +2096,8 @@
 							{ id: 'ch-n2', x: 30, y: 0, size: 8 }
 						],
 						lines: [
-							{ id: 'ch-c1', from: 'ch-n1', to: 'ch-n2', color: '#ff3b30', width: 8 },
-							{ id: 'ch-c2', from: 'ch-n1', to: 'ch-n2', color: '#ff3b30', width: 8 },
+							{ id: 'ch-c1', from: 'ch-n1', to: 'ch-n2', color: '#ff3b30', width: 8, selectStyle: { color: '#ff3b30' }, decorations: [{ position: 0.25, symbol: 'square', size: 6, color: '#22c55e', followSelectColor: true }] },
+							{ id: 'ch-c2', from: 'ch-n1', to: 'ch-n2', color: '#ff3b30', width: 8, selectStyle: { color: '#ff3b30' }, decorations: [{ position: 0.75, symbol: 'square', size: 6, color: '#22c55e', followSelectColor: true }] },
 							{ id: 'ch-cross', path: [[0, -20], [0, 20]], color: '#1f5fd0', width: 8 }
 						],
 						channels: cmRaiseChannelBuild.channels,
@@ -1982,6 +2120,12 @@
 						cmChannelRaisePixels.push(await cmPixelAt(cmRaiseChannelView, spot))
 					}
 					check('选中通道里的一条回线：整条通道（两条回线）都抬到最上面', cmChannelRaisePixels.every(cmIsRed), JSON.stringify(cmChannelRaisePixels))
+					cmRaiseChannelView.selectFeatures([{ type: 'channel', channelId: 'raise-ch' }])
+					await settle(120)
+					const cmChannelScene = cmRaiseChannelView.snapshotScene({ background: false })
+					check('选中整条通道：成员回线的装饰一起抬层并跟随通道选中色',
+						cmChannelScene.raisedDecorations.length === 2 && cmChannelScene.raisedDecorations.every(glyph => glyph.fill === cmChannelScene.raisedLines[0]?.color),
+						JSON.stringify({ selected: cmRaiseChannelView.getSelections().map(entry => entry.type + ':' + entry.id), raisedLines: cmChannelScene.raisedLines.length, decorations: cmChannelScene.raisedDecorations.map(glyph => glyph.fill) }))
 					cmRaiseChannelView.destroy()
 					cmRaiseChannelHost.remove()
 
@@ -2166,7 +2310,7 @@
 							{ id: 'fa-high-ch', from: 'fa-high-a', to: 'fa-high-b', lineIds: ['fa-l3', 'fa-l4'], groups: [{ id: 'fa-high', lineIds: ['fa-l3', 'fa-l4'] }] }
 						],
 						initialView: { center: [0, 0], scale: 1 },
-						waypointEditable: true,
+						features: { waypoint: true },
 						showGrid: false
 					})
 					await settle(100)
@@ -2358,7 +2502,7 @@
 						points: [{ id: 'edge-node', x: 0, y: 0, size: 44, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 }],
 						initialView: { center: [0, 0], scale: 3 },
 						showGrid: false,
-						draggable: true
+						features: { drag: true }
 					})
 					await settle(180)
 					// 不传背景（backgroundColor 为 undefined）这一档才走交互期的后备缓冲：与屏幕上那一帧是同一条路
@@ -2418,9 +2562,8 @@
 						initialView: { center: [0, 0], scale: 3 },
 						showGrid: false,
 						pixelRatio: 1,
-						draggable: true,
-						// 空白处按下拖动 = 平移：进交互期那一帧要它才走到非 MSAA 后备缓冲
-						features: { pan: true }
+						// 空白处按下拖动 = 平移、节点按下拖动 = 拖拽：进交互期那一帧要它们才走到非 MSAA 后备缓冲
+						features: { pan: true, drag: true }
 					})
 					await settle(180)
 					check('奇数设备像素的画布：画布宽确实是奇数（吸附必须在设备像素坐标系里做）', cmOddView.canvas.width % 2 === 1, '画布 ' + cmOddView.canvas.width + '×' + cmOddView.canvas.height)
@@ -2481,11 +2624,10 @@
 						fitPadding: 60,
 						showGrid: false,
 						// 这一节要同时验合并与复制预览两条未完成交互：三个开关都缺省关，显式打开
-						draggable: true,
 						copy: { enabled: true },
 						merge: { distance: 8 },
-						// 下面还要开始一段通道草稿（点两个节点加通道）：草稿开关缺省也是关的
-						features: { channelDraft: true },
+						// 下面还要开始一段通道草稿（点两个节点加通道）：草稿与拖拽开关缺省也是关的
+						features: { channelDraft: true, drag: true },
 						onPointMerge: payload => {
 							pendMergeEvents.push(payload)
 							if (payload.phase === 'pending') {
@@ -2554,7 +2696,7 @@
 						fitPadding: 60,
 						showGrid: false,
 						// 逐点开关验的是「重叠时能不能合 / 能不能复制」，先把两个开关打开、拖拽打开
-						draggable: true,
+						features: { drag: true },
 						copy: { enabled: false },
 						merge: { enabled: false }
 					})
@@ -2589,11 +2731,9 @@
 						renderEmitInterval: 0,
 						// 下面要拖节点验历史、加 / 删拐点验 onDataChange、Ctrl+C / Ctrl+V 验剪贴板：
 						// 这几个编辑开关缺省都关（见 src/gis-view/features.js），这里显式打开
-						draggable: true,
-						waypointEditable: true,
 						copy: { enabled: true },
 						// Delete / Ctrl+C / Ctrl+V 这些快捷键要显式打开
-						features: { keyboard: true },
+						features: { keyboard: true, drag: true, waypoint: true },
 						onDataChange: payload => evLog.data.push(payload),
 						onSelectChange: payload => evLog.select.push(payload),
 						onShortcut: payload => evLog.shortcut.push(payload),
@@ -2764,6 +2904,90 @@
 						`原第 ${ulSplitIndex} 组 → 第 0 组`)
 					ulView.destroy()
 					ulHost.remove()
+					/* 定向更新第一次补上状态样式 / effect：没有全局样式时也要当场进总账，不能等下一次 refresh */
+					const dynPointHost = document.createElement('div')
+					dynPointHost.style.cssText = 'width:420px;height:280px'
+					document.body.appendChild(dynPointHost)
+					const dynPointView = createGisView(dynPointHost, {
+						points: [
+							{ id: 'dyn-p', x: 0, y: 0, size: 16, color: '#334155' },
+							{ id: 'dyn-q', x: 120, y: 0, size: 16 }
+						],
+						lines: [{ id: 'dyn-l', from: 'dyn-p', to: 'dyn-q', color: '#2563eb', width: 4 }],
+						selectionOnTop: false,
+						showGrid: false,
+						fitPadding: 50
+					})
+					await settle(140)
+					dynPointView.updatePoint('dyn-p', { selectStyle: { color: '#e11d48' } })
+					dynPointView.selectFeatures('dyn-p')
+					await settle(140)
+					const dynPointSpot = dynPointView.project(0, 0)
+					const dynPointSnapshot = dynPointView.snapshotScene({ background: false })
+					const dynPointPaint = [...dynPointSnapshot.points, ...dynPointSnapshot.raised]
+						.find(point => Math.hypot(point.x - dynPointSpot[0], point.y - dynPointSpot[1]) < 3)
+					check('updatePoint 首次补 selectStyle 后立即选中：无全局状态样式时也走状态重解析',
+						dynPointPaint?.fill === 'rgba(225,29,72,1)',
+						`节点填充 ${dynPointPaint?.fill}`)
+					dynPointView.deselect()
+					await settle(60)
+					dynPointView.updatePoint('dyn-p', { effect: { radius: 12, period: 8 } })
+					await settle(160)
+					const dynPointStats = dynPointView.getStats()
+					check('updatePoint 首次补 effect 后无需 refresh：涟漪实例与动画时钟当场开起来',
+						dynPointStats.pointEffectCount === 1 && dynPointStats.animating === true,
+						JSON.stringify({ effects: dynPointStats.pointEffectCount, animating: dynPointStats.animating }))
+					const dynPointEffectsBeforeRemove = dynPointView.getEffects().enabled
+					dynPointView.removePoints('dyn-p')
+					await settle(100)
+					const dynPointEffectsAfterRemove = dynPointView.getEffects().enabled
+					check('删掉最后一个带 effect 的节点：逐要素效果总账跟着清零，不会一直把动画判成开启',
+						dynPointEffectsBeforeRemove === true && dynPointEffectsAfterRemove === false,
+						JSON.stringify({ before: dynPointEffectsBeforeRemove, after: dynPointEffectsAfterRemove }))
+					dynPointView.destroy()
+					dynPointHost.remove()
+
+					const dynLineHost = document.createElement('div')
+					dynLineHost.style.cssText = 'width:420px;height:280px'
+					document.body.appendChild(dynLineHost)
+					const dynLineView = createGisView(dynLineHost, {
+						points: [{ id: 'dyn-la', x: 0, y: 0 }, { id: 'dyn-lb', x: 120, y: 0 }],
+						lines: [{ id: 'dyn-line', from: 'dyn-la', to: 'dyn-lb', color: '#2563eb', width: 4 }],
+						selectionOnTop: false,
+						showGrid: false,
+						fitPadding: 50
+					})
+					await settle(140)
+					dynLineView.updateLine('dyn-line', { selectStyle: { color: '#22c55e', width: 10 } })
+					dynLineView.selectFeatures('dyn-line')
+					await settle(140)
+					const dynLineSnapshot = dynLineView.snapshotScene({ background: false })
+					const dynLinePaint = [...dynLineSnapshot.lines, ...dynLineSnapshot.raisedLines]
+						.find(line => line.color === 'rgba(34,197,94,1)' && line.width >= 10)
+					check('updateLine 首次补 selectStyle 后立即选中：无全局状态样式时也走状态重解析',
+						dynLinePaint !== undefined,
+						JSON.stringify((dynLineSnapshot.lines ?? []).map(line => [line.color, line.width])))
+					dynLineView.deselect()
+					await settle(60)
+					dynLineView.updateLine('dyn-line', { effect: { period: 8, size: 10 } })
+					await settle(160)
+					const dynLineStats = dynLineView.getStats()
+					check('updateLine 首次补 effect 后无需 refresh：动点与动画时钟当场开起来',
+						dynLineStats.lineEffectCount === 1 && dynLineStats.animating === true,
+						JSON.stringify({ effects: dynLineStats.lineEffectCount, animating: dynLineStats.animating }))
+					let dynUnboundError = ''
+					try {
+						dynLineView.updatePoint('dyn-la', { id: 'dyn-la-renamed' })
+					}
+					catch (error) {
+						dynUnboundError = error?.message ?? String(error)
+					}
+					const dynUnboundLine = dynLineView.getLine('dyn-line')
+					check('updatePoint 改掉绑定节点 id：旧回线缺端点时按局部路径收口，不抛数组长度错误',
+						dynUnboundError === '' && (dynUnboundLine?.path?.length ?? 0) < 2,
+						JSON.stringify({ error: dynUnboundError || null, path: dynUnboundLine?.path ?? null }))
+					dynLineView.destroy()
+					dynLineHost.remove()
 					/* 这一轮新增：通道改名 / 通道下增减回线 / 删除分组（问题.txt 第 2 条那几个「方法有吗」） */
 					const cgNameBefore = cgData.length
 					cgView.updateChannel('ch-1', { name: '甲通道' })
@@ -3230,7 +3454,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						channels: mvBuilt.channels,
 						fitPadding: 70,
 						showGrid: false,
-						draggable: true,
+						features: { drag: true },
 						history: true
 					})
 					await settle()
@@ -3437,6 +3661,103 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					stView.destroy()
 					stHost.remove()
 
+					// features 统一收口：别名映射到规范开关、规范键优先、数组明确拒绝
+					const featureAliasHost = document.createElement('div')
+					featureAliasHost.style.cssText = 'width:320px;height:200px'
+					document.body.appendChild(featureAliasHost)
+					const featureAliasView = createGisView(featureAliasHost, {
+						points: [{ id: 'a', x: 0, y: 0 }],
+						showGrid: false,
+						features: {
+							draggable: true,
+							waypointEditable: true,
+							clickable: true,
+							interactive: true,
+							multiSelect: true,
+							toggleSelect: true
+						}
+					})
+					await settle(100)
+					const featureAliasState = featureAliasView.getFeatures()
+					check('features 别名：draggable / waypointEditable / clickable / interactive 映射到规范开关',
+						featureAliasState.drag === true && featureAliasState.waypoint === true && featureAliasState.hover === true && featureAliasState.select === true && featureAliasState.pan === true && featureAliasState.zoom === true && featureAliasState.contextMenu === true,
+						JSON.stringify(featureAliasState))
+					check('features 读数只含 19 个规范键，不把别名混进 getFeatures()',
+						Object.keys(featureAliasState).length === 19 && !Object.prototype.hasOwnProperty.call(featureAliasState, 'draggable') && !Object.prototype.hasOwnProperty.call(featureAliasState, 'interactive'),
+						`${Object.keys(featureAliasState).length} 键：${Object.keys(featureAliasState).join(',')}`)
+					check('features 收口 multiSelect / toggleSelect：有效值可直接驱动复选框',
+						featureAliasState.multiSelect === true && featureAliasState.toggleSelect === true,
+						JSON.stringify({ multiSelect: featureAliasState.multiSelect, toggleSelect: featureAliasState.toggleSelect }))
+					featureAliasView.setFeatures({ draggable: false, drag: true, clickable: false, select: true, interactive: false, pan: true })
+					const featureAliasOverride = featureAliasView.getFeatures()
+					check('features 同一张表同时写别名与规范名：规范名优先',
+						featureAliasOverride.drag === true && featureAliasOverride.select === true && featureAliasOverride.pan === true && featureAliasOverride.hover === false && featureAliasOverride.zoom === false && featureAliasOverride.contextMenu === false,
+						JSON.stringify(featureAliasOverride))
+					featureAliasView.destroy()
+					featureAliasHost.remove()
+
+					// 旧顶层交互写法全部不再生效：只发迁移提示，权限必须走 features（以拖不动作为实际生效判据）
+					const legacyFeatureNames = ['draggable', 'interactive', 'clickable', 'boxSelect', 'multiSelect', 'toggleSelect', 'waypointEditable']
+					const legacyFeatureWarnings = []
+					const legacyFeatureHost = document.createElement('div')
+					legacyFeatureHost.style.cssText = 'width:320px;height:200px'
+					document.body.appendChild(legacyFeatureHost)
+					const legacyFeatureView = createGisView(legacyFeatureHost, {
+						points: [{ id: 'legacy-feature', x: 0, y: 0 }],
+						showGrid: false,
+						draggable: true,
+						interactive: true,
+						clickable: true,
+						boxSelect: true,
+						multiSelect: true,
+						toggleSelect: true,
+						waypointEditable: true,
+						onWarning: message => legacyFeatureWarnings.push(message)
+					})
+					await settle(100)
+					legacyFeatureView.updateOptions({
+						draggable: true,
+						interactive: true,
+						clickable: true,
+						boxSelect: true,
+						multiSelect: true,
+						toggleSelect: true,
+						waypointEditable: true
+					})
+					await cmDrag(legacyFeatureView, legacyFeatureView.project(0, 0), legacyFeatureView.project(40, 40))
+					const legacyFeaturePoint = legacyFeatureView.getData().points[0]
+					const legacyFeatureOptions = legacyFeatureView.getOptions()
+					const legacyFeatureState = legacyFeatureView.getFeatures()
+					const legacyWarningText = legacyFeatureWarnings.join('\n')
+					check('七个旧顶层交互开关在创建与 updateOptions 都不再生效：逐项告警、不留在 getOptions、对应 features 仍关闭且节点拖不动',
+						legacyFeaturePoint.x === 0 && legacyFeaturePoint.y === 0 &&
+							legacyFeatureState.drag === false && legacyFeatureState.pan === false && legacyFeatureState.zoom === false &&
+							legacyFeatureState.hover === false && legacyFeatureState.select === false && legacyFeatureState.contextMenu === false &&
+							legacyFeatureState.boxSelect === false && legacyFeatureState.multiSelect === false &&
+							legacyFeatureState.toggleSelect === false && legacyFeatureState.waypoint === false &&
+							legacyFeatureNames.every(name => !Object.prototype.hasOwnProperty.call(legacyFeatureOptions, name)) &&
+							legacyFeatureNames.every(name => legacyWarningText.includes(`顶层 ${name}`) && legacyWarningText.includes('features:')),
+						JSON.stringify({ state: legacyFeatureState, point: legacyFeaturePoint, options: legacyFeatureOptions, warnings: legacyFeatureWarnings }))
+					legacyFeatureView.destroy()
+					legacyFeatureHost.remove()
+
+					const arrayWarnings = []
+					const arrayHost = document.createElement('div')
+					arrayHost.style.cssText = 'width:320px;height:200px'
+					document.body.appendChild(arrayHost)
+					const arrayView = createGisView(arrayHost, {
+						points: [{ id: 'a', x: 0, y: 0 }],
+						showGrid: false,
+						features: [{ drag: true }],
+						onWarning: message => arrayWarnings.push(message)
+					})
+					await settle(100)
+					check('features 数组写法：明确警告并按缺省全关处理',
+						arrayWarnings.some(message => message.includes('不认数组')) && Object.values(arrayView.getFeatures()).every(value => value === false),
+						JSON.stringify({ warnings: arrayWarnings, state: arrayView.getFeatures() }))
+					arrayView.destroy()
+					arrayHost.remove()
+
 					/* ---------------- 两层开关重合的那几项：features 读数与详细配置同一条口径（见 15.65） ----------------
 					   tooltip / label / lineLabel / minimap 既能用功能开关关，也能在详细配置里写 enabled: false。
 					   从前 getFeatures() 只看「这份详细配置在不在」：写了 enabled: false 还报 true。现在按「与」算 ——
@@ -3723,7 +4044,8 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					check('triggerOnBoxSelect: false（缺省）：框选只改选中集并收掉旧级联', casView.getCascadeHighlight() === null, JSON.stringify(casView.getCascadeHighlight()))
 
 					// 取消选中时级联一起收掉：toggleSelect 的取消只发一条 null，接口取消也走同一口径
-					casView.updateOptions({ toggleSelect: true, cascadeHighlight: { scope: 'both', triggerOnClick: true, triggerOnMultiSelect: true } })
+					casView.setFeatures({ ...casView.getFeatures(), toggleSelect: true })
+					casView.updateOptions({ cascadeHighlight: { scope: 'both', triggerOnClick: true, triggerOnMultiSelect: true } })
 					casView.selectFeatures(null)
 					await settle(120)
 					await casClick(casView.project(0, 0))
@@ -3981,10 +4303,8 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						channels: rdBuilt.channels,
 						fitPadding: 60,
 						showGrid: false,
-						// 这一节要 addWaypoint 之后看平行分组：拐点编辑缺省关，这里显式打开
-						waypointEditable: true,
-						// 单选取反 / 右键读数要 select 与 contextMenu（缺省全关）
-						features: { select: true, contextMenu: true },
+						// 拐点编辑缺省关；单选取反 / 右键读数要 select 与 contextMenu
+						features: { select: true, contextMenu: true, waypoint: true },
 						onClick: payload => rdClicks.push(payload),
 						onContextMenu: payload => rdMenus.push(payload)
 					})
@@ -4054,8 +4374,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						channels: csmBuilt.channels,
 						fitPadding: 60,
 						showGrid: false,
-						// 点回线摊开选中集：先关拐点编辑，Ctrl 点击才能测「整批取反」；加点那一段再打开
-						waypointEditable: false,
+						// 点回线摊开选中集：先不开拐点编辑，Ctrl 点击才能测「整批取反」；加点那一段再打开
 						features: { select: true }
 					})
 					await settle(140)
@@ -4097,7 +4416,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					await csmClick(csmView.project(100, 160))
 					check('通道外的线路不受选中模式影响（还是只选自己）', csmIds() === 'csm-solo', csmIds())
 					// Ctrl + 点击给通道回线加点：加完后的选中 / 高亮范围与普通单击共用 channelSelectMode
-					csmView.updateOptions({ waypointEditable: true })
+					csmView.setFeatures({ ...csmView.getFeatures(), waypoint: true })
 					await settle(60)
 					const csmGroupSkeleton = () => csmView.getChannelGroups('csm-ch').find(group => String(group.id) === 'csm-g2')?.skeleton.length ?? 0
 					const csmAddBefore = csmGroupSkeleton()
@@ -4135,7 +4454,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 								{ id: 'vwd-g2', lineIds: ['vwd-3', 'vwd-4'], path: [[100, -80], [260, -80]], waypointOffsets: { '1': { x: 0, y: 6 } } }
 							]
 						}],
-						waypointEditable: true,
+						features: { waypoint: true },
 						waypointVisibility: 'always',
 						channelWaypointDragMode: 'vertex',
 						fitPadding: 70,
@@ -4425,10 +4744,8 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						channels: apiBuilt.channels,
 						fitPadding: 60,
 						showGrid: false,
-						// 下面要按住 Shift 拖出一个框验框选读数：框选缺省关，这里显式打开
-						boxSelect: true,
-						// 单击选中也要显式打开（缺省全关）
-						features: { select: true }
+						// 单击选中与 Shift 框选都要显式打开（缺省全关）
+						features: { select: true, boxSelect: true }
 					})
 					await settle()
 					const apiIds = () => apiView.getSelectionData().ids.join(',')
@@ -4620,6 +4937,9 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					layerView.updateLine('lay-v', { zIndex: 0 })
 					const resetLayer = await layerCenterColor()
 					check('线路 zIndex：写回 0 之后又回到规则那一层', isRed(resetLayer), `中心像素 ${resetLayer}`)
+					layerView.updateOptions({ background: '#fafafa' })
+					const reusedLineLayer = await layerCenterColor()
+					check('只换背景、线路解析整半复用时，zIndex 层序仍然保留', isRed(reusedLineLayer), `中心像素 ${reusedLineLayer}`)
 					/* 线路方向箭头：与装饰同一条批次（画在所有线之上），全局开 / 逐条关 / 整份摘都要即时生效 */
 					layerView.updateOptions({ lineDirection: true })
 					const directionLayer = await layerCenterColor()
@@ -4706,6 +5026,187 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					followView.destroy()
 					followHost.remove()
 				}
+				/* ---------------- 装饰随所属要素抬层 / 跟随选中色 ---------------- */
+				{
+					const decorationHost = document.createElement('div')
+					decorationHost.style.cssText = 'width:360px;height:240px'
+					document.body.append(decorationHost)
+					const followSvgSymbol = {
+						type: 'svg',
+						path: 'M 2,8 L 14,8',
+						viewBox: [0, 0, 16, 16],
+						fill: 'currentColor',
+						stroke: 'currentStrokeColor',
+						strokeWidth: 4
+					}
+					const decorationView = createGisView(decorationHost, {
+						points: [
+							{
+								id: 'decor-selected-node', x: 100, y: 60, size: 14, color: '#334155',
+								selectStyle: { color: '#e11d48' },
+								decorations: [
+									{ symbol: 'square', size: 36, offset: [0, 0], color: '#f59e0b' },
+									{ symbol: 'circle', size: 12, offset: [18, 0], color: '#06b6d4', followSelectColor: true },
+									{ symbol: followSvgSymbol, size: 12, offset: [0, 18], color: '#f97316', strokeColor: '#0ea5e9', followSelectColor: true }
+								]
+							}
+						],
+						lines: [
+							{
+								id: 'decor-selected-line', path: [[-160, 60], [160, 60]], color: '#2563eb', width: 6,
+								selectStyle: { color: '#22c55e', width: 20 },
+								decorations: [
+									{ position: 0.5, symbol: 'square', size: 36, color: '#ff0000' },
+									{ position: 0.25, symbol: 'circle', size: 14, color: '#7c3aed', followSelectColor: true },
+									{ position: 0.125, symbol: followSvgSymbol, size: 14, color: '#f97316', strokeColor: '#0ea5e9', followSelectColor: true }
+								]
+							},
+							{
+								id: 'decor-plain-line', path: [[-160, -70], [160, -70]], color: '#2563eb', width: 6,
+								decorations: [{ position: 0.5, symbol: 'square', size: 20, color: '#eab308', followSelectColor: true }]
+							}
+						],
+						initialView: { scale: 1, center: [0, 0] },
+						background: { color: '#ffffff' },
+						showGrid: false
+					})
+					await settle()
+					const decorationSnapshot = () => decorationView.snapshotScene({ background: false })
+					const decorationAt = (snapshot, listName, x, y) => {
+						const [sx, sy] = decorationView.project(x, y)
+						return snapshot[listName].find(glyph => Math.hypot(glyph.x - sx, glyph.y - sy) < 2)
+					}
+					const red = 'rgba(255,0,0,1)'
+					const green = 'rgba(34,197,94,1)'
+					const purple = 'rgba(124,58,237,1)'
+					const gold = 'rgba(245,158,11,1)'
+					const rose = 'rgba(225,29,72,1)'
+					const cyan = 'rgba(6,182,212,1)'
+					const yellow = 'rgba(234,179,8,1)'
+					const orangeSvg = 'rgba(249, 115, 22, 1)'
+					const skySvg = 'rgba(14, 165, 233, 1)'
+					const greenSvg = 'rgba(34, 197, 94, 1)'
+					const roseSvg = 'rgba(225, 29, 72, 1)'
+					const svgFill = (glyph) => /\bfill=\x22([^\x22]+)\x22/.exec(glyph?.inner ?? '')?.[1] ?? null
+					const svgStroke = (glyph) => /\bstroke=\x22([^\x22]+)\x22/.exec(glyph?.inner ?? '')?.[1] ?? null
+
+					decorationView.selectFeatures(['decor-selected-line', 'decor-selected-node'])
+					await settle()
+					const selectedDecorations = decorationSnapshot()
+					check('选中线路 / 节点的 decorations 进入抬层，普通线路的装饰仍在普通层',
+						selectedDecorations.raisedLines.length === 1 && selectedDecorations.raised.length === 1 &&
+						selectedDecorations.raisedDecorations.length === 6 && selectedDecorations.decorations.length === 1,
+						JSON.stringify({ raisedLines: selectedDecorations.raisedLines.length, raised: selectedDecorations.raised.length, raisedDecorations: selectedDecorations.raisedDecorations.length, decorations: selectedDecorations.decorations.length }))
+					check('followSelectColor 打开时装饰跟随所属线路 / 节点的最终选中色，关闭时保留自己的颜色',
+						decorationAt(selectedDecorations, 'raisedDecorations', 0, 60)?.fill === red &&
+						decorationAt(selectedDecorations, 'raisedDecorations', -80, 60)?.fill === green &&
+						decorationAt(selectedDecorations, 'raisedDecorations', 100, 60)?.fill === gold &&
+						decorationAt(selectedDecorations, 'raisedDecorations', 118, 60)?.fill === rose &&
+						decorationAt(selectedDecorations, 'decorations', 0, -70)?.fill === yellow,
+						JSON.stringify({ lineOwn: decorationAt(selectedDecorations, 'raisedDecorations', 0, 60)?.fill, lineFollow: decorationAt(selectedDecorations, 'raisedDecorations', -80, 60)?.fill, pointOwn: decorationAt(selectedDecorations, 'raisedDecorations', 100, 60)?.fill, pointFollow: decorationAt(selectedDecorations, 'raisedDecorations', 118, 60)?.fill, unselected: decorationAt(selectedDecorations, 'decorations', 0, -70)?.fill }))
+					const selectedSvgLine = decorationAt(selectedDecorations, 'raisedDecorations', -120, 60)
+					const selectedSvgPoint = decorationAt(selectedDecorations, 'raisedDecorations', 100, 42)
+					check('SVG path 的 followSelectColor 改描边：线路取绿色、节点取玫红，填充仍保留自身橙色',
+						svgFill(selectedSvgLine) === orangeSvg && svgStroke(selectedSvgLine) === greenSvg &&
+						svgFill(selectedSvgPoint) === orangeSvg && svgStroke(selectedSvgPoint) === roseSvg,
+						JSON.stringify({ lineFill: svgFill(selectedSvgLine), lineStroke: svgStroke(selectedSvgLine), pointFill: svgFill(selectedSvgPoint), pointStroke: svgStroke(selectedSvgPoint) }))
+
+					const decorationUrl = await decorationView.exportImage({ background: '#ffffff', includeLabels: false, scale: 1 })
+					const decorationImage = new Image()
+					await new Promise((resolve, reject) => {
+						decorationImage.onload = resolve
+						decorationImage.onerror = () => reject(new Error('导出图片加载失败'))
+						decorationImage.src = decorationUrl
+					})
+					const decorationCanvas = document.createElement('canvas')
+					decorationCanvas.width = decorationImage.width
+					decorationCanvas.height = decorationImage.height
+					const decorationContext = decorationCanvas.getContext('2d')
+					decorationContext.drawImage(decorationImage, 0, 0)
+					const decorationPixels = decorationContext.getImageData(0, 0, decorationCanvas.width, decorationCanvas.height)
+					const decorationFrame = { pixels: decorationPixels.data, width: decorationCanvas.width, height: decorationCanvas.height, base: [255, 255, 255] }
+					const around = (x, y, half = 3) => {
+						const spot = decorationView.project(x, y)
+						return [spot[0] - half, spot[1] - half, spot[0] + half, spot[1] + half]
+					}
+					check('线路装饰抬起后压在选中线路之上（中心仍是装饰自己的红色）',
+						colorCount(decorationFrame, around(0, 60, 2), [255, 0, 0], 20) >= 9,
+						`中心红色像素 ${colorCount(decorationFrame, around(0, 60, 2), [255, 0, 0], 20)}`)
+					check('节点装饰抬起后压在选中线路上、仍在节点本体之下（线宽覆盖区能看到金色装饰）',
+						colorCount(decorationFrame, around(100, 52, 2), [245, 158, 11], 24) >= 6,
+						`金色像素 ${colorCount(decorationFrame, around(100, 52, 2), [245, 158, 11], 24)}`)
+					const decorationSvgUrl = await decorationView.exportImage({ type: 'svg', background: 'none', includeLabels: false })
+					const decorationSvg = new TextDecoder().decode(Uint8Array.from(
+						atob(String(decorationSvgUrl).slice('data:image/svg+xml;base64,'.length)),
+						char => char.charCodeAt(0)
+					))
+					const raisedLinePaint = selectedDecorations.raisedLines[0]?.color
+					const raisedDecorationPaint = decorationAt(selectedDecorations, 'raisedDecorations', 0, 60)?.fill
+					const raisedLineAt = decorationSvg.indexOf(String(raisedLinePaint))
+					const raisedDecorationAt = decorationSvg.indexOf(String(raisedDecorationPaint))
+					check('SVG 导出把抬层装饰排在抬层线路之后',
+						raisedLineAt >= 0 && raisedDecorationAt > raisedLineAt,
+						`线路 ${raisedLineAt} / 装饰 ${raisedDecorationAt}`)
+
+					decorationView.deselect()
+					await settle()
+					const clearedDecorations = decorationSnapshot()
+					check('取消选中后装饰回到普通层，followSelectColor 恢复装饰自己的颜色',
+						clearedDecorations.raisedDecorations.length === 0 && clearedDecorations.decorations.length === 7 &&
+						decorationAt(clearedDecorations, 'decorations', -80, 60)?.fill === purple &&
+						decorationAt(clearedDecorations, 'decorations', 118, 60)?.fill === cyan,
+						JSON.stringify({ raised: clearedDecorations.raisedDecorations.length, decorations: clearedDecorations.decorations.length, line: decorationAt(clearedDecorations, 'decorations', -80, 60)?.fill, point: decorationAt(clearedDecorations, 'decorations', 118, 60)?.fill }))
+					const clearedSvgLine = decorationAt(clearedDecorations, 'decorations', -120, 60)
+					const clearedSvgPoint = decorationAt(clearedDecorations, 'decorations', 100, 42)
+					check('取消选中后 SVG path 的描边恢复装饰自己的 strokeColor',
+						svgFill(clearedSvgLine) === orangeSvg && svgStroke(clearedSvgLine) === skySvg &&
+						svgFill(clearedSvgPoint) === orangeSvg && svgStroke(clearedSvgPoint) === skySvg,
+						JSON.stringify({ lineStroke: svgStroke(clearedSvgLine), pointStroke: svgStroke(clearedSvgPoint) }))
+
+					// selectionOnTop: false 不重排，专测「只换样式」的快路径也会重算 followSelectColor
+					decorationView.updateOptions({ selectionOnTop: false })
+					await settle()
+					decorationView.selectFeatures('decor-selected-line')
+					await settle()
+					const fastLine = decorationSnapshot()
+					check('selectionOnTop: false 时线路装饰仍跟随选中色（样式快路径没有跳过它）',
+						fastLine.raisedDecorations.length === 0 && decorationAt(fastLine, 'decorations', -80, 60)?.fill === green,
+						JSON.stringify({ raised: fastLine.raisedDecorations.length, line: decorationAt(fastLine, 'decorations', -80, 60)?.fill }))
+					const fastSvgLine = decorationAt(fastLine, 'decorations', -120, 60)
+					check('selectionOnTop: false 时 SVG path 的选中色仍写进描边',
+						svgFill(fastSvgLine) === orangeSvg && svgStroke(fastSvgLine) === greenSvg,
+						JSON.stringify({ fill: svgFill(fastSvgLine), stroke: svgStroke(fastSvgLine) }))
+					decorationView.deselect()
+					await settle()
+					const fastLineCleared = decorationSnapshot()
+					check('selectionOnTop: false 取消选中后线路装饰颜色也还原',
+						decorationAt(fastLineCleared, 'decorations', -80, 60)?.fill === purple,
+						`线路装饰 ${decorationAt(fastLineCleared, 'decorations', -80, 60)?.fill}`)
+					check('selectionOnTop: false 取消选中后线路 SVG path 的描边也还原',
+						svgStroke(decorationAt(fastLineCleared, 'decorations', -120, 60)) === skySvg,
+						`线路 SVG 描边 ${svgStroke(decorationAt(fastLineCleared, 'decorations', -120, 60))}`)
+					decorationView.selectFeatures('decor-selected-node')
+					await settle()
+					const fastPoint = decorationSnapshot()
+					check('selectionOnTop: false 时节点装饰跟随选中色（节点槽位补丁也覆盖装饰）',
+						decorationAt(fastPoint, 'decorations', 118, 60)?.fill === rose,
+						`节点装饰 ${decorationAt(fastPoint, 'decorations', 118, 60)?.fill}`)
+					const fastSvgPoint = decorationAt(fastPoint, 'decorations', 100, 42)
+					check('selectionOnTop: false 时节点 SVG path 的选中色写进描边',
+						svgFill(fastSvgPoint) === orangeSvg && svgStroke(fastSvgPoint) === roseSvg,
+						JSON.stringify({ fill: svgFill(fastSvgPoint), stroke: svgStroke(fastSvgPoint) }))
+					decorationView.deselect()
+					await settle()
+					const fastPointCleared = decorationSnapshot()
+					check('selectionOnTop: false 取消选中后节点装饰颜色还原',
+						decorationAt(fastPointCleared, 'decorations', 118, 60)?.fill === cyan,
+						`节点装饰 ${decorationAt(fastPointCleared, 'decorations', 118, 60)?.fill}`)
+					check('selectionOnTop: false 取消选中后节点 SVG path 的描边也还原',
+						svgStroke(decorationAt(fastPointCleared, 'decorations', 100, 42)) === skySvg,
+						`节点 SVG 描边 ${svgStroke(decorationAt(fastPointCleared, 'decorations', 100, 42))}`)
+					decorationView.destroy()
+					decorationHost.remove()
+				}
 				/* ---------------- 运行时插件：view.use() ---------------- */
 				// options.plugins 只能在创建那一刻挂；use() 是同一个执行 / 清理口径的运行时版本 ——
 				// 立即执行、返回卸载函数、销毁时与 options 插件一起按相反顺序清理。这里把这几条各断言一次
@@ -4736,7 +5237,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					})
 					check('options.plugins 拿到实例本身与带 apiVersion 的只读上下文', optionPluginInstance === pluginView && optionPluginContext?.apiVersion === 1 && optionPluginContext.view === pluginView && Object.isFrozen(optionPluginContext), JSON.stringify(optionPluginContext ? { apiVersion: optionPluginContext.apiVersion, sameView: optionPluginContext.view === pluginView } : null))
 					check('插件上下文带独立 signal，创建期间未中止', optionSignal instanceof AbortSignal && optionSignal.aborted === false && optionSignal !== null, String(optionSignal?.aborted))
-					let usePluginInstance = null
+					let usePluginInstance = null
 					let usePluginContext = null
 					let useDestroyCount = 0
 					const disposeUse = pluginView.use((v, context) => {
@@ -5091,7 +5592,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						{ id: 'wp2', path: [[0, 120], [120, 120], [240, 120]], width: 6, color: '#1f5fd0' },
 						{ id: 'wp3', path: [[0, 240], [120, 240], [240, 240]], width: 6, color: '#1f5fd0' }
 					],
-					waypointEditable: true,
+					features: { waypoint: true },
 					waypointVisibility: 'always',
 					showGrid: false
 				})
@@ -5745,7 +6246,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						{ id: 'm2', from: 'a', to: 'c' }
 					],
 					channels: [{ id: 'au-ch', from: 'a', to: 'c', lineIds: ['m1', 'm2'] }],
-					waypointEditable: true,
+					features: { waypoint: true },
 					waypointVisibility: 'always',
 					copy: true,
 					fitPadding: 60,
@@ -5854,7 +6355,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 							{ id: 'beta', lineIds: ['g2'], path: [[30, -40]] }
 						]
 					}],
-					waypointEditable: true
+					features: { waypoint: true }
 				})
 				await settle()
 				const gwGeometry = id => gwView.listLines({}).find(entry => entry.item?.id === id)?.path ?? null
@@ -6324,7 +6825,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					initialView: { scale: 1, center: [2, 2] },
 					labelOptimize: false,
 					showGrid: false,
-					waypointEditable: true,
+					features: { waypoint: true },
 					history: { limit: 20 }
 				})
 				const splitOutcome = splitView.splitPoint('sv-a', [