gis-view-webgl2 0.1.1 → 0.1.2

package/docs/steps/selftest-features.html

@@ -3044,7 +3044,8 @@
 						channels: csmBuilt.channels,
 						fitPadding: 60,
 						showGrid: false,
-						// 点回线摊开选中集：点击选中显式打开
+						// 点回线摊开选中集：先关拐点编辑，Ctrl 点击才能测「整批取反」；加点那一段再打开
+						waypointEditable: false,
 						features: { select: true }
 					})
 					await settle(140)
@@ -3085,9 +3086,99 @@
 					// 通道外的线路没有分组可摊，照旧只选它自己
 					await csmClick(csmView.project(100, 160))
 					check('通道外的线路不受选中模式影响（还是只选自己）', csmIds() === 'csm-solo', csmIds())
+					// Ctrl + 点击给通道回线加点：加完后的选中 / 高亮范围与普通单击共用 channelSelectMode
+					csmView.updateOptions({ waypointEditable: true })
+					await settle(60)
+					const csmGroupSkeleton = () => csmView.getChannelGroups('csm-ch').find(group => String(group.id) === 'csm-g2')?.skeleton.length ?? 0
+					const csmAddBefore = csmGroupSkeleton()
+					csmView.updateOptions({ channelSelectMode: 'line' })
+					await csmClick(csmView.project(50, 60), { ctrlKey: true })
+					const csmLineAdd = csmView.getSelectionData()
+					check('Ctrl + 点击加点（line）：只高亮被加点的那一条回线', csmLineAdd.lineCount === 1 && csmGroupSkeleton() === csmAddBefore + 1 && csmIds() !== 'csm-2,csm-3' && csmIds() !== 'csm-1,csm-2,csm-3', JSON.stringify({ ids: csmIds(), waypoints: csmGroupSkeleton() }))
+					csmView.updateOptions({ channelSelectMode: 'group' })
+					await csmClick(csmView.project(100, 60), { ctrlKey: true })
+					check('Ctrl + 点击加点（group）：加完连所在分组一起高亮', csmIds() === 'csm-2,csm-3' && csmGroupSkeleton() === csmAddBefore + 2, JSON.stringify({ ids: csmIds(), waypoints: csmGroupSkeleton() }))
+					csmView.updateOptions({ channelSelectMode: 'channel' })
+					await csmClick(csmView.project(150, 60), { ctrlKey: true })
+					check('Ctrl + 点击加点（channel）：加完整条通道一起高亮', csmIds() === 'csm-1,csm-2,csm-3' && csmView.getSelectionData().channelCount === 1 && csmGroupSkeleton() === csmAddBefore + 3, JSON.stringify({ ids: csmIds(), waypoints: csmGroupSkeleton() }))
 					csmView.destroy()
 					csmHost.remove()
 
+					/* 分组拐点 vertex 拖动：只平移当前分组同一 pathIndex 的顶点，其它拐点与分组不动 */
+					const vwdHost = document.createElement('div')
+					vwdHost.style.cssText = 'width:560px;height:360px'
+					document.body.appendChild(vwdHost)
+					const vwdView = createGisView(vwdHost, {
+						points: [{ id: 'vwd-a', x: 0, y: 0 }, { id: 'vwd-b', x: 360, y: 0 }],
+						lines: [
+							{ id: 'vwd-1', from: 'vwd-a', to: 'vwd-b' },
+							{ id: 'vwd-2', from: 'vwd-a', to: 'vwd-b' },
+							{ id: 'vwd-3', from: 'vwd-a', to: 'vwd-b' },
+							{ id: 'vwd-4', from: 'vwd-a', to: 'vwd-b' }
+						],
+						channels: [{
+							id: 'vwd-ch',
+							from: 'vwd-a',
+							to: 'vwd-b',
+							groups: [
+								{ id: 'vwd-g1', lineIds: ['vwd-1', 'vwd-2'], path: [[100, 80], [260, 80]] },
+								{ id: 'vwd-g2', lineIds: ['vwd-3', 'vwd-4'], path: [[100, -80], [260, -80]], waypointOffsets: { '1': { x: 0, y: 6 } } }
+							]
+						}],
+						waypointEditable: true,
+						waypointVisibility: 'always',
+						channelWaypointDragMode: 'vertex',
+						fitPadding: 70,
+						showGrid: false
+					})
+					await settle(160)
+					const vwdSend = (type, screen, extra = {}) => {
+						const box = vwdView.canvas.getBoundingClientRect()
+						vwdView.canvas.dispatchEvent(new PointerEvent(type, {
+							bubbles: true,
+							cancelable: true,
+							pointerId: 79,
+							pointerType: 'mouse',
+							button: extra.button ?? 0,
+							buttons: extra.buttons ?? (type === 'pointerup' ? 0 : 1),
+							clientX: box.left + screen[0],
+							clientY: box.top + screen[1],
+							...extra
+						}))
+					}
+					const vwdBefore = vwdView.getChannelGroupWaypoints('vwd-ch', 'vwd-g1')
+					const vwdOtherBefore = vwdView.getChannelGroupWaypoints('vwd-ch', 'vwd-g2')
+					const vwdWorldStart = vwdBefore.lines[0].waypoints[0]
+					const vwdWorldTarget = [vwdWorldStart[0] + 42, vwdWorldStart[1] + 30]
+					const vwdStart = vwdView.project(vwdWorldStart[0], vwdWorldStart[1])
+					const vwdTarget = vwdView.project(vwdWorldTarget[0], vwdWorldTarget[1])
+					const vwdObjectOffset = vwdView.getChannelGroups('vwd-ch').find(group => String(group.id) === 'vwd-g2')?.waypointOffsets?.['1']
+					const vwdObjectLane = vwdView.getChannels().find(group => String(group.id) === 'vwd-g2')?.offsets?.[0] ?? NaN
+					check('分组拐点偏移：{ x, y } 声明归一成 [dx, dy] 并参与实际路由', Array.isArray(vwdObjectOffset) && Math.abs(vwdObjectOffset[0]) <= 1e-3 && Math.abs(vwdObjectOffset[1] - 6) <= 1e-3 && Math.abs(vwdOtherBefore.lines[0].waypoints[0][1] - (vwdOtherBefore.skeleton[1][1] + vwdObjectLane + 6)) <= 1e-3, JSON.stringify({ offset: vwdObjectOffset, lane: vwdObjectLane, skeleton: vwdOtherBefore.skeleton, line: vwdOtherBefore.lines[0].waypoints[0] }))
+					vwdSend('pointermove', vwdStart, { buttons: 0 })
+					vwdSend('pointerdown', vwdStart, { buttons: 1 })
+					vwdSend('pointermove', [(vwdStart[0] + vwdTarget[0]) / 2, (vwdStart[1] + vwdTarget[1]) / 2], { buttons: 1 })
+					vwdSend('pointermove', vwdTarget, { buttons: 1 })
+					vwdSend('pointerup', vwdTarget, { buttons: 0 })
+					await settle(180)
+					const vwdAfter = vwdView.getChannelGroupWaypoints('vwd-ch', 'vwd-g1')
+					const vwdOtherAfter = vwdView.getChannelGroupWaypoints('vwd-ch', 'vwd-g2')
+					const vwdClose = (left, right, tolerance = 1e-3) => Math.abs(left - right) <= tolerance
+					const vwdMoved = vwdAfter.lines[0].waypoints[0]
+					const vwdPartnerBefore = vwdBefore.lines[1].waypoints[0]
+					const vwdPartnerAfter = vwdAfter.lines[1].waypoints[0]
+					const vwdAdjacent = vwdBefore.lines[0].waypoints[1]
+					const vwdAdjacentAfter = vwdAfter.lines[0].waypoints[1]
+					const vwdRoute = vwdView.getParallelGroups().find(group => String(group.group_id) === 'vwd-g1')
+					const vwdOffset = vwdAfter.waypointOffsets['1']
+					const vwdDeclared = vwdView.getOptions().channels[0].groups.find(group => String(group.id) === 'vwd-g1')?.waypointOffsets
+					check('分组拐点 vertex：目标分组的同序号拐点按世界增量平移', vwdClose(vwdMoved[0] - vwdWorldStart[0], 42) && vwdClose(vwdMoved[1] - vwdWorldStart[1], 30) && vwdClose(vwdPartnerAfter[0] - vwdPartnerBefore[0], 42) && vwdClose(vwdPartnerAfter[1] - vwdPartnerBefore[1], 30), JSON.stringify({ moved: vwdMoved, partnerDelta: [vwdPartnerAfter[0] - vwdPartnerBefore[0], vwdPartnerAfter[1] - vwdPartnerBefore[1]] }))
+					check('分组拐点 vertex：相邻拐点与其它分组一个都不动', vwdClose(vwdAdjacentAfter[0], vwdAdjacent[0]) && vwdClose(vwdAdjacentAfter[1], vwdAdjacent[1]) && JSON.stringify(vwdOtherAfter.lines.map(line => line.path)) === JSON.stringify(vwdOtherBefore.lines.map(line => line.path)), JSON.stringify({ adjacent: vwdAdjacentAfter, other: vwdOtherAfter.lines[0].waypoints }))
+					check('分组拐点 vertex：只写 waypointOffsets，不改分组公共 path', vwdOffset && Object.keys(vwdAfter.waypointOffsets).join(',') === '1' && JSON.stringify(vwdAfter.path) === JSON.stringify(vwdBefore.path) && vwdDeclared && vwdClose(vwdDeclared['1']?.[0] ?? NaN, vwdOffset[0]) && vwdClose(vwdDeclared['1']?.[1] ?? NaN, vwdOffset[1]), JSON.stringify({ offsets: vwdAfter.waypointOffsets, declared: vwdDeclared, path: vwdAfter.path }))
+					check('分组拐点 vertex：parallel_groups.group_route 带刚性偏移（导出不回到旧骨架）', Array.isArray(vwdOffset) && vwdClose(vwdRoute?.group_route?.[1]?.[0] ?? NaN, vwdBefore.skeleton[1][0] + vwdOffset[0]) && vwdClose(vwdRoute?.group_route?.[1]?.[1] ?? NaN, vwdBefore.skeleton[1][1] + vwdOffset[1]), JSON.stringify(vwdRoute?.group_route ?? null))
+					vwdView.destroy()
+					vwdHost.remove()
+
 					/* 删除（Delete 键）：先出载荷说清「删什么 / 连带什么 / 能按哪些范围删」，确认之后才动数据 */
 					const rmHost = document.createElement('div')
 					rmHost.style.cssText = 'width:520px;height:320px'
@@ -4801,6 +4892,127 @@
 				check('clearWebGLLayers 清空并同步 getOptions().webglLayers；requestRender 可链式调用',
 					clearedLayers === 1 && draftView.getWebGLLayers().length === 0 && (draftView.getOptions().webglLayers ?? []).length === 0 && draftView.requestRender() === draftView,
 					JSON.stringify({ cleared: clearedLayers, layers: draftView.getWebGLLayers().length, options: draftView.getOptions().webglLayers?.length }))
+
+				/* 隐藏 / 显示、节点拆分、通道变化对账：接口级自测 */
+				const splitHost = document.createElement('div')
+				splitHost.style.cssText = 'width:640px;height:380px'
+				document.body.append(splitHost)
+				const splitView = createGisView(splitHost, {
+					points: [
+						{ id: 'sv-a', x: 0, y: 0, name: 'A' },
+						{ id: 'sv-b', x: 8, y: 0, name: 'B' },
+						{ id: 'sv-c', x: 0, y: 8, name: 'C' }
+					],
+					lines: [
+						{ id: 'sv-ab', from: 'sv-a', to: 'sv-b', name: 'AB' },
+						{ id: 'sv-ab2', from: 'sv-a', to: 'sv-b', name: 'AB-2' },
+						{ id: 'sv-ac', from: 'sv-a', to: 'sv-c', name: 'AC' }
+					],
+					channels: [{ id: 'sv-ch', from: 'sv-a', to: 'sv-b', lineIds: ['sv-ab', 'sv-ab2'] }],
+					initialView: { scale: 1, center: [2, 2] },
+					labelOptimize: false,
+					showGrid: false,
+					waypointEditable: true,
+					history: { limit: 20 }
+				})
+				const splitOutcome = splitView.splitPoint('sv-a', [
+					{ x: -1, y: -1, name: 'A-左' },
+					{ x: 1, y: 1, name: 'A-右', lines: ['sv-ab'] }
+				])
+				const splitData = splitView.getData()
+				const splitB = splitData.points.find(point => point.name === 'A-右')
+				const splitAb = splitData.lines.find(line => line.id === 'sv-ab')
+				const splitAb2 = splitData.lines.find(line => line.id === 'sv-ab2')
+				const splitAc = splitData.lines.find(line => line.id === 'sv-ac')
+				const splitChannel = splitView.getOptions().channels.find(channel => channel.id === 'sv-ch')
+				check('splitPoint：第一份复用原下标 / id，第二份追加并拿到新 id', splitOutcome.ok === true && splitOutcome.items.length === 2 && splitOutcome.indexes[0] === 0 && splitData.points.length === 4 && splitOutcome.pointIds[0] === 'sv-a' && splitOutcome.pointIds[1] !== 'sv-a', JSON.stringify({ ids: splitOutcome.pointIds, indexes: splitOutcome.indexes, points: splitData.points.length }))
+				check('splitPoint：显式分给第二份的线路改绑，未分配的线路跟第一份', splitAb?.from === splitB?.id && splitAb2?.from === 'sv-a' && splitAc?.from === 'sv-a', JSON.stringify({ ab: splitAb?.from, ab2: splitAb2?.from, ac: splitAc?.from, b: splitB?.id }))
+				check('splitPoint：通道没写 channels 时跟随第一条被分配过的成员回线', String(splitChannel?.from) === String(splitB?.id) && String(splitChannel?.to) === 'sv-b', JSON.stringify({ from: splitChannel?.from, to: splitChannel?.to, b: splitB?.id }))
+				check('splitPoint：返回可直接提交的 changeSet 与 splitPoint 计数', splitOutcome.changes?.removedPoint?.id === 'sv-a' && splitOutcome.changes?.points?.length === 2 && splitOutcome.changes?.lines?.some(line => line.id === 'sv-ab') && splitOutcome.changes?.channels?.some(channel => channel.id === 'sv-ch') && splitOutcome.linesChanged === 3 && splitOutcome.channelsChanged === 1, JSON.stringify({ lines: splitOutcome.changes?.lines?.map(line => line.id), channels: splitOutcome.changes?.channels?.map(channel => channel.id) }))
+				const changedAfterSplit = splitView.getChangedChannels().find(channel => channel.id === 'sv-ch')
+				check('getChangedChannels：拆分后的端点变化入账，reason 带 endpoints', Boolean(changedAfterSplit) && changedAfterSplit.endpointsChanged && changedAfterSplit.reasons.includes('endpoints'), JSON.stringify(changedAfterSplit?.reasons))
+				splitView.undo()
+				const undoData = splitView.getData()
+				check('splitPoint：撤销一步回到拆分前（节点、线路、通道端点全恢复）', undoData.points.length === 3 && undoData.lines.find(line => line.id === 'sv-ab')?.from === 'sv-a' && splitView.getOptions().channels.find(channel => channel.id === 'sv-ch')?.from === 'sv-a', JSON.stringify({ points: undoData.points.length, from: undoData.lines.find(line => line.id === 'sv-ab')?.from }))
+				splitView.redo()
+				check('splitPoint：重做恢复拆分结果', splitView.getData().points.length === 4 && splitView.getData().lines.find(line => line.id === 'sv-ab')?.from !== 'sv-a', JSON.stringify({ points: splitView.getData().points.length }))
+				splitView.clearChangedChannels()
+				check('clearChangedChannels：全部对账后最近变化为空', splitView.getChangedChannels().length === 0, JSON.stringify(splitView.getChangedChannels().map(item => item.id)))
+				const addedSplitGroup = splitView.addChannelGroup('sv-ch', ['sv-ab2'])
+				const fullGroupChange = splitView.getChangedChannels().find(channel => channel.id === 'sv-ch')
+				const ignoredGroupChange = splitView.getChangedChannels({ ignoreGroups: true }).find(channel => channel.id === 'sv-ch')
+				check('getChangedChannels({ ignoreGroups })：分组新增 / 删除不入账', addedSplitGroup.ok === true && fullGroupChange?.groupsChanged === true && !ignoredGroupChange, JSON.stringify({ added: addedSplitGroup.ok, full: fullGroupChange?.reasons, ignored: ignoredGroupChange?.reasons }))
+				splitView.clearChangedChannels()
+				if (addedSplitGroup.ok) {
+					splitView.removeChannelGroup('sv-ch', addedSplitGroup.groupId)
+					splitView.clearChangedChannels()
+				}
+				const splitGroup = splitView.getChannelGroups('sv-ch')[0]
+				splitView.addChannelGroupWaypoint('sv-ch', splitGroup?.id)
+				const waypointChange = splitView.getChangedChannels({ reasons: ['waypoints'] }).find(channel => channel.id === 'sv-ch')
+				const ignoredWaypointChange = splitView.getChangedChannels({ ignoreGroups: true, reasons: ['waypoints'] }).find(channel => channel.id === 'sv-ch')
+				check('getChangedChannels({ reasons: [waypoints] })：只返回拐点变化并收窄 reasons', Boolean(waypointChange) && waypointChange.waypointsChanged && waypointChange.reasons.length === 1 && waypointChange.reasons[0] === 'waypoints', JSON.stringify(waypointChange?.reasons))
+				check('getChangedChannels({ ignoreGroups })：已有分组的拐点变化照常报', Boolean(ignoredWaypointChange) && ignoredWaypointChange.waypointsChanged && ignoredWaypointChange.reasons.length === 1 && ignoredWaypointChange.reasons[0] === 'waypoints', JSON.stringify(ignoredWaypointChange?.reasons))
+				splitView.clearChangedChannels('sv-ch')
+				splitView.clearChangedLines()
+				splitView.updateLine('sv-ac', { name: 'AC-变更' })
+				const fieldLineChange = splitView.getChangedLines({ reasons: ['fields'] }).find(line => line.id === 'sv-ac')
+				check('getChangedLines({ reasons: [fields] })：线路字段变化入账', Boolean(fieldLineChange) && fieldLineChange.fields.includes('name') && fieldLineChange.reasons.length === 1 && fieldLineChange.reasons[0] === 'fields', JSON.stringify(fieldLineChange?.reasons))
+				splitView.clearChangedLines('sv-ac')
+				splitView.setLineWaypoints('sv-ac', [[4, 4]])
+				const pathLineChange = splitView.getChangedLines({ reasons: ['path'] }).find(line => line.id === 'sv-ac')
+				check('getChangedLines：path 变化独立记 path，读取不改基准', Boolean(pathLineChange) && pathLineChange.pathChanged && pathLineChange.reasons.includes('path') && splitView.getChangedLines({ reasons: ['path'] }).length === 1, JSON.stringify(pathLineChange?.reasons))
+				splitView.clearChangedLines()
+				const hideChannel = splitView.hideFeatures('channel', 'sv-ch')
+				const hiddenChannelRead = splitView.getChannel('sv-ch')
+				const hideChanged = splitView.getChangedChannels().find(channel => channel.id === 'sv-ch')
+				check('hideFeatures(channel)：visible 落数据、通道退场，变化账本记 visibility', hideChannel.ok === true && splitView.getOptions().channels.find(channel => channel.id === 'sv-ch')?.visible === false && hiddenChannelRead?.lineIndexes?.length === 0 && hideChanged?.visibilityChanged === true, JSON.stringify({ ok: hideChannel.ok, paths: hiddenChannelRead?.lineIndexes?.length, reasons: hideChanged?.reasons }))
+				const showChannel = splitView.showFeatures('channel', 'sv-ch')
+				check('showFeatures(channel)：隐藏后原样恢复（回线、分组、拐点都还在）', showChannel.ok === true && splitView.getChannel('sv-ch')?.lineIndexes?.length === 2 && splitView.getOptions().channels.find(channel => channel.id === 'sv-ch')?.visible === true && splitView.getChannelGroups('sv-ch').length === 1, JSON.stringify({ lines: splitView.getChannel('sv-ch')?.lineIndexes?.length, groups: splitView.getChannelGroups('sv-ch').length }))
+				const generatedId = splitView.getData().points.find(point => point.name === 'A-右')?.id
+				const hidePoint = splitView.hideFeatures('point', generatedId)
+				const hideLine = splitView.hideFeatures('line', 'sv-ac')
+				check('hideFeatures(point / line)：只改 visible，数据不删', hidePoint.ok === true && hideLine.ok === true && splitView.getData().points.find(point => point.id === generatedId)?.visible === false && splitView.getData().lines.find(line => line.id === 'sv-ac')?.visible === false, JSON.stringify({ point: hidePoint.ok, line: hideLine.ok }))
+				const hiddenLineChange = splitView.getChangedLines().find(line => line.id === 'sv-ac')
+				check('getChangedLines：线路显隐变化入账', Boolean(hiddenLineChange) && hiddenLineChange.visibilityChanged && hiddenLineChange.reasons.includes('visibility'), JSON.stringify(hiddenLineChange?.reasons))
+				splitView.showFeatures('point', generatedId)
+				splitView.showFeatures('line', 'sv-ac')
+				check('showFeatures(point / line)：恢复后 visible 回到 true', splitView.getData().points.find(point => point.id === generatedId)?.visible === true && splitView.getData().lines.find(line => line.id === 'sv-ac')?.visible === true, '')
+				splitView.clearChangedLines('sv-ac')
+				splitView.updateLine('sv-ac', { name: 'AC-删除前' })
+				const lineChangedBeforeDelete = splitView.getChangedLines().some(line => line.id === 'sv-ac')
+				splitView.removeLine('sv-ac')
+				const lineAfterDelete = splitView.getChangedLines().find(line => line.id === 'sv-ac')
+				check('getChangedLines：线路删除同步清账，不再返回已删线路', lineChangedBeforeDelete && !lineAfterDelete, JSON.stringify({ before: lineChangedBeforeDelete, after: lineAfterDelete ?? null }))
+				splitView.clearChangedChannels()
+				splitView.updateChannel('sv-ch', { name: '待删通道' })
+				const channelChangedBeforeDelete = splitView.getChangedChannels().some(channel => channel.id === 'sv-ch')
+				splitView.removeChannel('sv-ch')
+				const channelAfterDelete = splitView.getChangedChannels().find(channel => channel.id === 'sv-ch')
+				check('getChangedChannels：通道删除同步清账，不再返回已删通道', channelChangedBeforeDelete && !channelAfterDelete, JSON.stringify({ before: channelChangedBeforeDelete, after: channelAfterDelete ?? null }))
+				const lineOnlyHost = document.createElement('div')
+				lineOnlyHost.style.cssText = 'width:480px;height:280px'
+				document.body.append(lineOnlyHost)
+				const lineOnlyView = createGisView(lineOnlyHost, {
+					points: [
+						{ id: 'lo-a', x: 0, y: 0 },
+						{ id: 'lo-b', x: 8, y: 0 }
+					],
+					lines: [{ id: 'lo-ab', from: 'lo-a', to: 'lo-b', name: 'AB' }],
+					initialView: { scale: 1, center: [4, 0] },
+					labelOptimize: false,
+					showGrid: false
+				})
+				const lineOnlyInitial = lineOnlyView.getChangedLines().length === 0
+				lineOnlyView.updateLine('lo-ab', { name: 'AB-变更' })
+				const lineOnlyChange = lineOnlyView.getChangedLines({ reasons: ['fields'] }).find(line => line.id === 'lo-ab')
+				lineOnlyView.removeLine('lo-ab')
+				const lineOnlyAfterDelete = lineOnlyView.getChangedLines().find(line => line.id === 'lo-ab')
+				check('getChangedLines：只有节点和线路时独立对账，删线路后同步清账', lineOnlyInitial && Boolean(lineOnlyChange) && lineOnlyChange.fields.includes('name') && !lineOnlyAfterDelete, JSON.stringify({ initial: lineOnlyInitial, change: lineOnlyChange?.reasons, after: lineOnlyAfterDelete ?? null }))
+				lineOnlyView.destroy()
+				lineOnlyHost.remove()
+				splitView.destroy()
+				splitHost.remove()
 				draftView.destroy()
 				draftHost.remove()
 				auView.destroy()

package/docs/steps/selftest-labels.html

@@ -411,10 +411,66 @@
 				const quietState = addView.addLabel('point', 'p1', { content: '别拖我', position: 'bottom', draggable: false, editable: false })
 				await settle(160)
 				const quietNode = addHost.querySelector(`.gis-view__label[data-label-label='${quietState.labelId}']`)
-				check('逐条写 draggable / editable: false 的标签单独把指针还回去', Boolean(quietNode) && !quietNode.classList.contains('gis-view__label--draggable') && !quietNode.classList.contains('gis-view__label--editable'), quietNode ? quietNode.className : '没有标签')
-				addView.destroy()
-				addHost.remove()
-				// 15. 线路在通道里：parent.channel 说清「哪条通道的哪一回线」（id / groupId / 通道下标 / 分组里的位置）
+				check('逐条写 draggable / editable: false 的标签单独把指针还回去', Boolean(quietNode) && !quietNode.classList.contains('gis-view__label--draggable') && !quietNode.classList.contains('gis-view__label--editable'), quietNode ? quietNode.className : '没有标签')
+				addView.destroy()
+				addHost.remove()
+				// 14b. 数据里自带的 labels：单条 draggable / editable 覆盖全局，DOM 指针与事件也按单条走
+				const perItemHost = document.createElement('div')
+				perItemHost.style.cssText = 'width:360px;height:240px'
+				document.body.append(perItemHost)
+				const perItemClicks = []
+				const perItemDrags = []
+				const perItemView = createGisViewRaw(perItemHost, {
+					points: [{
+						id: 'per-item-point',
+						x: 0,
+						y: 0,
+						name: '逐条',
+						labels: [
+							{ id: 'editable', content: 'A 可拖可点', position: 'top', gap: 24, draggable: true, editable: true },
+							{ id: 'locked', content: 'B 只读', position: 'bottom', gap: 24, draggable: false, editable: false }
+						]
+					}],
+					lines: [],
+					label: { enabled: true, content: '{name}', maxCount: 5, draggable: true, editable: true },
+					labelOptimize: false,
+					showGrid: false,
+					onLabelClick: payload => perItemClicks.push(payload),
+					onLabelDrag: payload => perItemDrags.push(payload)
+				})
+				await settle(240)
+				const perItemNode = id => perItemHost.querySelector(`.gis-view__label[data-label-kind='point'][data-label-label='${id}']`)
+				const itemEditable = perItemNode('editable')
+				const itemLocked = perItemNode('locked')
+				check('数据级逐条 labels：A 可拖可点，B 的 false 覆盖全局开关',
+					Boolean(itemEditable) && Boolean(itemLocked) &&
+						itemEditable.classList.contains('gis-view__label--draggable') && itemEditable.classList.contains('gis-view__label--editable') &&
+						!itemLocked.classList.contains('gis-view__label--draggable') && !itemLocked.classList.contains('gis-view__label--editable') &&
+						getComputedStyle(itemLocked).pointerEvents === 'none',
+					`A=${itemEditable?.className ?? '没有'} / B=${itemLocked?.className ?? '没有'}`)
+				if (itemEditable && itemLocked) {
+					const lockedAt = centerOf(itemLocked)
+					fire(itemLocked, 'pointerdown', lockedAt[0], lockedAt[1])
+					fire(window, 'pointerup', lockedAt[0], lockedAt[1])
+					fire(itemLocked, 'pointerdown', lockedAt[0], lockedAt[1])
+					fire(window, 'pointermove', lockedAt[0] + 36, lockedAt[1] + 18)
+					fire(window, 'pointerup', lockedAt[0] + 36, lockedAt[1] + 18)
+					await settle(120)
+					check('逐条只读标签点不发 labelClick、拖不写偏移', perItemClicks.length === 0 && perItemDrags.length === 0 && !perItemView.getLabelStates('point').some(state => state.labelId === 'locked'), `${perItemClicks.length} 次点击 / ${perItemDrags.length} 次拖动 / ${JSON.stringify(perItemView.getLabelStates('point'))}`)
+					const editableAt = centerOf(itemEditable)
+					fire(itemEditable, 'pointerdown', editableAt[0], editableAt[1])
+					fire(window, 'pointerup', editableAt[0], editableAt[1])
+					await settle(80)
+					fire(itemEditable, 'pointerdown', editableAt[0], editableAt[1])
+					fire(window, 'pointermove', editableAt[0] + 32, editableAt[1] + 20)
+					fire(window, 'pointerup', editableAt[0] + 32, editableAt[1] + 20)
+					await settle(160)
+					const editableState = perItemView.getLabelStates('point').find(state => state.labelId === 'editable')
+					check('逐条可交互标签照常点选与拖动，偏移按 labelId 分开记', perItemClicks.length === 1 && perItemClicks[0]?.labelId === 'editable' && perItemDrags.some(payload => payload.phase === 'end' && payload.labelId === 'editable') && Math.abs(editableState?.offset?.[0] - 32) <= 1 && Math.abs(editableState?.offset?.[1] - 20) <= 1, JSON.stringify({ clicks: perItemClicks.map(payload => payload.labelId), drag: perItemDrags.map(payload => `${payload.labelId}:${payload.phase}`), offset: editableState?.offset ?? null }))
+				}
+				perItemView.destroy()
+				perItemHost.remove()
+				// 15. 线路在通道里：parent.channel 说清「哪条通道的哪一回线」（id / groupId / 通道下标 / 分组里的位置）
 				const chanHost = document.createElement('div')
 				chanHost.style.cssText = 'width:320px;height:220px'
 				document.body.append(chanHost)
@@ -1048,6 +1104,195 @@
 				else {
 					delete window.devicePixelRatio
 				}
+				// 26. HTML 标签：全局 / 逐条覆盖 / 模板转义 / 运行时切换 / 导出回灌 / 只改样式不重写内容
+				const richHost = document.createElement('div')
+				richHost.style.cssText = 'width:800px;height:500px'
+				document.body.append(richHost)
+				const richClicks = []
+				const richPoints = [
+					{ id: 'rich-a', x: -180, y: 0, name: '<i>甲</i>', labels: [{ id: 'default', content: '<b class="rich">{name}</b>', html: true }] },
+					{ id: 'rich-b', x: 0, y: 0, name: '乙', labels: [{ id: 'default', content: '<b>{name}</b>', html: false }] },
+					{ id: 'rich-c', x: 180, y: 0, name: '丙' },
+					{ id: 'rich-d', x: 270, y: 100, name: '<i>丁</i>', labels: [
+						{ id: 'field', field: 'name', html: true, position: 'bottom' },
+						{ id: 'fallback', html: true, position: 'top' }
+					] }
+				]
+				const richView = createGisView(richHost, {
+					points: richPoints,
+					lines: [{ id: 'rich-line', from: 'rich-a', to: 'rich-b', name: '<u>线</u>' }],
+					initialView: { scale: 1, center: [0, 0] },
+					label: { enabled: true, content: '<b>{name}</b>', html: false, offset: [12, 8], maxCount: 10, draggable: true, editable: true },
+					lineLabel: { enabled: true, content: '<em>{name}</em>', html: true, maxCount: 10 },
+					labelOptimize: false,
+					showGrid: false,
+					onLabelClick: payload => richClicks.push(payload)
+				})
+				await settle(240)
+				const richPoint = index => richHost.querySelector(`.gis-view__label[data-label-kind='point'][data-label-index='${index}']`)
+				const richLine = () => richHost.querySelector(`.gis-view__label[data-label-kind='line']`)
+				const firstRich = richPoint(0)
+				check('逐条 html: true：字符串按标记渲染，模板取值仍转义', firstRich?.querySelector('b.rich') !== null && firstRich.querySelector('i') === null && firstRich.textContent.trim() === '<i>甲</i>', firstRich ? `${firstRich.innerHTML} / ${firstRich.textContent}` : '没有标签')
+				check('逐条 html: false：即使全局是 HTML，这一条也只显示字面标记', richPoint(1)?.querySelector('b') === null && richPoint(1)?.textContent.trim() === '<b>乙</b>', richPoint(1)?.textContent ?? '没有标签')
+				check('全局 html: false：没有逐条覆盖的标签按纯文本渲染', richPoint(2)?.querySelector('b') === null && richPoint(2)?.textContent.trim() === '<b>丙</b>', richPoint(2)?.textContent ?? '没有标签')
+				check('线路标签 html: true 同样渲染标记且转义模板取值', richLine()?.querySelector('em') !== null && richLine().querySelector('u') === null && richLine().textContent.trim() === '<u>线</u>', richLine()?.innerHTML ?? '没有线路标签')
+				const richByLabelId = id => richHost.querySelector(`.gis-view__label[data-label-kind='point'][data-label-label='${id}']`)
+				check('HTML 模式下 field / 默认名称只按纯文本转义', richByLabelId('field')?.querySelector('i') === null && richByLabelId('field')?.textContent.trim() === '<i>丁</i>' && richByLabelId('fallback')?.querySelector('i') === null && richByLabelId('fallback')?.textContent.trim() === '<i>丁</i>', `${richByLabelId('field')?.innerHTML ?? ''} | ${richByLabelId('fallback')?.innerHTML ?? ''}`)
+				richView.updateOptions({ label: { enabled: true, content: '<b>{name}</b>', html: true, offset: [12, 8], maxCount: 10, draggable: true, editable: true } })
+				await settle(200)
+				check('全局 html: true：没有逐条覆盖的标签改成按 HTML 渲染', richPoint(2)?.querySelector('b') !== null && richPoint(2)?.textContent.trim() === '丙', richPoint(2)?.innerHTML ?? '没有标签')
+				check('全局 HTML 打开时，逐条 html: false 仍压过全局', richPoint(1)?.querySelector('b') === null && richPoint(1)?.textContent.trim() === '<b>乙</b>', richPoint(1)?.textContent ?? '没有标签')
+				richView.updateLabel('point', 'rich-c', { html: false })
+				await settle(160)
+				check('updateLabel html: false 把这一条从 HTML 切回纯文本', richPoint(2)?.querySelector('b') === null && richPoint(2)?.textContent.trim() === '<b>丙</b>', richPoint(2)?.textContent ?? '没有标签')
+				const richOffsetWithState = richView.getLabels('point', 'rich-c')?.find(row => row.id === 'default')
+				check('getLabels 的偏移不被运行时 html 状态洗成 [0, 0]', JSON.stringify(richOffsetWithState?.offset) === '[12,8]', JSON.stringify(richOffsetWithState?.offset ?? null))
+				richView.updateLabel('point', 'rich-c', { html: true, offset: [23, 7] })
+				await settle(160)
+				check('updateLabel html: true 能再切回 HTML', richPoint(2)?.querySelector('b') !== null && richPoint(2)?.textContent.trim() === '丙', richPoint(2)?.innerHTML ?? '没有标签')
+				const richOffsetRuntime = richView.getLabels('point', 'rich-c')?.find(row => row.id === 'default')
+				check('getLabels 优先报运行时拖出来的偏移', JSON.stringify(richOffsetRuntime?.offset) === '[23,7]', JSON.stringify(richOffsetRuntime?.offset ?? null))
+				const richClickNode = richPoint(0)
+				const richClickAt = centerOf(richClickNode)
+				fire(richClickNode, 'pointerdown', richClickAt[0], richClickAt[1])
+				fire(window, 'pointerup', richClickAt[0], richClickAt[1])
+				await settle(60)
+				check('labelClick 载荷带 html 与原始标记（编辑面板不会把富文本洗成纯文本）', richClicks.length === 1 && richClicks[0].label?.html === true && richClicks[0].label?.content === richClickNode.innerHTML && richClicks[0].label.content.includes('&lt;i&gt;'), JSON.stringify(richClicks[0]?.label ?? null))
+				const richBoldBefore = richPoint(0)?.querySelector('b')
+				richView.updateLabel('point', 'rich-a', { style: { fontSize: '15px' } })
+				await settle(160)
+				check('只改样式不重写 HTML 内容（子节点身份保持不变）', richBoldBefore !== null && richPoint(0)?.querySelector('b') === richBoldBefore && getComputedStyle(richPoint(0)).fontSize === '15px', `${richPoint(0)?.innerHTML ?? ''} / ${richPoint(0) ? getComputedStyle(richPoint(0)).fontSize : ''}`)
+				const richExport = richView.exportData({ format: 'input', parts: ['points'] })
+				const exportedRichB = richExport.points?.find(row => row.id === 'rich-b')
+				const exportedRichA = richExport.points?.find(row => row.id === 'rich-a')
+				check('导出 input 保留逐条 html: true / false（导出再回灌不会改回全局语义）', exportedRichA?.labels?.find(row => row.id === 'default')?.html === true && exportedRichB?.labels?.find(row => row.id === 'default')?.html === false, JSON.stringify({ a: exportedRichA?.labels, b: exportedRichB?.labels }))
+				const reRichHost = document.createElement('div')
+				reRichHost.style.cssText = 'width:800px;height:500px'
+				document.body.append(reRichHost)
+				const reRichView = createGisView(reRichHost, {
+					points: richExport.points,
+					lines: [],
+					initialView: { scale: 1, center: [0, 0] },
+					label: { enabled: true, content: '<b>{name}</b>', html: true, maxCount: 10 },
+					labelOptimize: false,
+					showGrid: false
+				})
+				await settle(240)
+				const reRichPoint = index => reRichHost.querySelector(`.gis-view__label[data-label-kind='point'][data-label-index='${index}']`)
+				check('回灌后逐条 html: false 仍是纯文本，html: true 仍是富文本', reRichPoint(1)?.querySelector('b') === null && reRichPoint(1)?.textContent.trim() === '<b>乙</b>' && reRichPoint(0)?.querySelector('b.rich') !== null, `${reRichPoint(0)?.innerHTML ?? ''} | ${reRichPoint(1)?.innerHTML ?? ''}`)
+				// 27. 同内容标签共用一次量测：120 条 HTML 标签首轮排版不应逐条读布局
+				const batchLabelHost = document.createElement('div')
+				batchLabelHost.id = 'label-batch-host'
+				batchLabelHost.style.cssText = 'width:800px;height:500px'
+				document.body.append(batchLabelHost)
+				const batchLabelPoints = []
+				for (let row = 0; row < 10; row += 1) {
+					for (let column = 0; column < 12; column += 1) {
+						batchLabelPoints.push({ id: `batch-label-${row}-${column}`, x: (column - 5.5) * 60, y: (row - 4.5) * 40, name: '同名' })
+					}
+				}
+				let batchLabelMeasures = 0
+				const nativeLabelRect = Element.prototype.getBoundingClientRect
+				Element.prototype.getBoundingClientRect = function (...args) {
+					if (this.classList?.contains('gis-view__label') && this.closest?.('#label-batch-host')) {
+						batchLabelMeasures += 1
+					}
+					return nativeLabelRect.apply(this, args)
+				}
+				let batchLabelView = null
+				try {
+					batchLabelView = createGisView(batchLabelHost, {
+						points: batchLabelPoints,
+						lines: [],
+						initialView: { scale: 1, center: [0, 0] },
+						label: { enabled: true, content: '<b>同名</b>', html: true, maxCount: 120, scanLimit: 0 },
+						showGrid: false
+					})
+					await settle(300)
+				}
+				finally {
+					Element.prototype.getBoundingClientRect = nativeLabelRect
+				}
+				check('120 条同内容 HTML 标签首次排版共用尺寸缓存（真实布局读取 ≤ 4 次）', batchLabelHost.querySelectorAll('.gis-view__label').length === 120 && batchLabelMeasures <= 4, `标签 ${batchLabelHost.querySelectorAll('.gis-view__label').length} 条 / 量测 ${batchLabelMeasures} 次`)
+				batchLabelView?.destroy()
+				batchLabelHost.remove()
+				// 28. 高密度纯文本标签：默认 auto 在强制显示档改走单画布，HTML / 交互标签仍留 DOM
+				const canvasLabelHost = document.createElement('div')
+				canvasLabelHost.style.cssText = 'width:800px;height:500px'
+				document.body.append(canvasLabelHost)
+				const canvasLabelPoints = []
+				for (let row = 0; row < 25; row += 1) {
+					for (let column = 0; column < 44; column += 1) {
+						canvasLabelPoints.push({
+							id: `canvas-label-${row}-${column}`,
+							x: (column - 21.5) * 15,
+							y: (row - 12) * 17,
+							name: `L${row * 44 + column}`
+						})
+					}
+				}
+				const canvasLabelView = createGisViewRaw(canvasLabelHost, {
+					points: canvasLabelPoints,
+					lines: [],
+					initialView: { scale: 1, center: [0, 0] },
+					label: { enabled: true, content: '{name}', hideOnInteract: false },
+					labelOptimize: false,
+					labelRender: 'auto',
+					showGrid: false
+				})
+				await settle(600)
+				const canvasLayer = canvasLabelHost.querySelector('.gis-view__label-layer--point')
+				const labelCanvas = canvasLayer?.querySelector('.gis-view__label-canvas')
+				const canvasCount = () => Number(labelCanvas?.dataset.labelCount || 0)
+				const canvasDomCount = () => canvasLayer?.querySelectorAll('.gis-view__label').length ?? 0
+				check('1100 条纯文本标签自动改走单画布（不再逐条建 div）', canvasCount() >= 1024 && canvasDomCount() === 0, `画布 ${canvasCount()} 条 / DOM ${canvasDomCount()} 条`)
+				check('标签画布按视口分配了非零像素尺寸', Number(labelCanvas?.width) > 0 && Number(labelCanvas?.height) > 0 && parseFloat(labelCanvas.style.width) > 0 && parseFloat(labelCanvas.style.height) > 0, `${labelCanvas?.width ?? 0}×${labelCanvas?.height ?? 0} 像素 / ${labelCanvas?.style.width ?? ''}×${labelCanvas?.style.height ?? ''}`)
+				const mixedCanvasPoints = canvasLabelPoints.map((point, index) => index === 0
+					? { ...point, labels: [{ id: 'rich', content: '<b>富</b>', html: true }] }
+					: point)
+				canvasLabelView.updateOptions({ points: mixedCanvasPoints })
+				await settle(600)
+				const mixedDomLabels = [...(canvasLayer?.querySelectorAll('.gis-view__label') ?? [])]
+				check('混入数据级 html: true：纯文本仍进画布，HTML 单独保留 DOM', canvasCount() >= 1100 && mixedDomLabels.length === 1 && mixedDomLabels[0].querySelector('b') !== null, `画布 ${canvasCount()} 条 / DOM ${mixedDomLabels.length} 条 / ${mixedDomLabels[0]?.innerHTML ?? ''}`)
+				canvasLabelView.updateOptions({ labelRender: 'dom' })
+				await settle(600)
+				check('labelRender: dom 强制回退逐条 DOM，并清空画布', canvasDomCount() >= 1100 && canvasCount() === 0, `DOM ${canvasDomCount()} 条 / 画布 ${canvasCount()} 条`)
+				canvasLabelView.updateOptions({ labelRender: 'auto' })
+				await settle(600)
+				check('从 dom 档切回 auto：画布重新接管，上一轮 div 全部回收', canvasCount() >= 1100 && canvasDomCount() === 1, `画布 ${canvasCount()} 条 / DOM ${canvasDomCount()} 条`)
+				const decodeSvg = (url) => {
+					const comma = url.indexOf(',')
+					const body = url.slice(comma + 1)
+					if (url.slice(0, comma).includes('base64')) {
+						const binary = atob(body)
+						const bytes = Uint8Array.from(binary, char => char.charCodeAt(0))
+						return new TextDecoder().decode(bytes)
+					}
+					return decodeURIComponent(body)
+				}
+				const exportedCanvasLabel = async (text = 'L550') => {
+					const markup = decodeSvg(await canvasLabelView.exportImage({ type: 'svg', includeLabels: true, background: 'none' }))
+					const doc = new DOMParser().parseFromString(markup, 'image/svg+xml')
+					const texts = [...doc.querySelectorAll('text')].map(node => node.textContent)
+					return { node: [...doc.querySelectorAll('text')].find(node => node.textContent === text) ?? null, texts }
+				}
+				const exportedBefore = (await exportedCanvasLabel()).node
+				check('导出 SVG 包含画布档的纯文本标签', exportedBefore !== null, exportedBefore ? exportedBefore.outerHTML : '没有找到 L550')
+				const anchorPoint = canvasLabelPoints[550]
+				const anchorGap = Number(exportedBefore?.getAttribute('x')) - canvasLabelView.project(anchorPoint.x, anchorPoint.y)[0]
+				const cameraBeforeCanvasZoom = canvasLabelView.getCamera()
+				canvasLabelView.setCamera({ ...cameraBeforeCanvasZoom, scale: cameraBeforeCanvasZoom.scale * 2 })
+				await settle(80)
+				const exportedZoom = await exportedCanvasLabel()
+				const exportedZoomed = exportedZoom.node
+				const expectedZoomX = canvasLabelView.project(anchorPoint.x, anchorPoint.y)[0] + anchorGap
+				check('Canvas 标签随缩放只推一次，不与导出坐标二次叠加', Number.isFinite(anchorGap) && exportedZoomed !== null && Math.abs(Number(exportedZoomed.getAttribute('x')) - expectedZoomX) <= 1, `期望 x=${expectedZoomX.toFixed(1)} / 实际 ${exportedZoomed?.getAttribute('x') ?? '没有标签'} / 文本 ${exportedZoom.texts.length} 条：${exportedZoom.texts.slice(0, 8).join(',')} / 画布 ${canvasCount()} / DOM ${canvasDomCount()} / 收起 ${canvasLayer?.classList.contains('gis-view__label-layer--hidden')} / 相机 ${JSON.stringify(canvasLabelView.getCamera())}`)
+				canvasLabelView.destroy()
+				canvasLabelHost.remove()
+				richView.destroy()
+				reRichView.destroy()
+				richHost.remove()
+				reRichHost.remove()
 				multi.destroy()
 				reView.destroy()
 				multiHost.remove()