gis-view-webgl2 0.1.11 → 0.1.13

package/docs/steps/selftest-demos.html

@@ -91,8 +91,8 @@
 				// 1. 外壳：默认综合示例，页签齐全
 				const loaded = await canvasReady()
 				check('演示外壳把默认演示（综合示例）挂起来了', Boolean(loaded), loaded ? 'canvas 就绪' : '没等到 canvas')
-				check('页签列出全部演示（22 个：21 个功能 + 综合）', tabs().length === 22, `${tabs().length} 个页签：${tabs().map(tab => tab.textContent.trim()).join(' / ')}`)
-				check('页头的演示数量直接跟随注册表（22 个）', (document.querySelector('.page-header__count')?.textContent ?? '').includes('22 个'), document.querySelector('.page-header__count')?.textContent?.trim() ?? '没有页头计数')
+				check('页签列出全部演示（23 个：22 个功能 + 综合）', tabs().length === 23, `${tabs().length} 个页签：${tabs().map(tab => tab.textContent.trim()).join(' / ')}`)
+				check('页头的演示数量直接跟随注册表（23 个）', (document.querySelector('.page-header__count')?.textContent ?? '').includes('23 个'), document.querySelector('.page-header__count')?.textContent?.trim() ?? '没有页头计数')
 				check('默认页签是综合示例', (document.querySelector('.demo-shell__tab--active')?.textContent ?? '').includes('综合'), document.querySelector('.demo-shell__tab--active')?.textContent?.trim() ?? '')
 				check('默认页签写进地址栏（刷新还停在同一个演示）', location.search.includes('demo=full'), location.search)
 				check('综合示例的面板照旧在（拆分没有动它）', document.querySelectorAll('.demo-panel-buttons button').length >= 6, `${document.querySelectorAll('.demo-panel-buttons button').length} 个面板按钮`)
@@ -122,7 +122,7 @@
 				const afterBack = document.querySelector('.demo-shell__tab--active')?.textContent.trim() ?? ''
 				check('键盘 [ 往回翻（基础视图回到综合示例）', afterBack.includes('综合'), afterBack)
 				const eyebrow = document.querySelector('.demo-shell__eyebrow')?.textContent.trim() ?? ''
-				check('当前演示显示分组与序号（综合 · 22 / 22）', eyebrow.includes('综合') && eyebrow.includes('22 / 22'), eyebrow)
+				check('当前演示显示分组与序号（综合 · 23 / 23）', eyebrow.includes('综合') && eyebrow.includes('23 / 23'), eyebrow)
 				document.querySelector('[data-demo=demo-next]')?.click()
 				await wait(60)
 				const afterStepNext = document.querySelector('.demo-shell__tab--active')?.textContent.trim() ?? ''
@@ -238,8 +238,9 @@
 				aa.destroy()
 				aaHost.remove()
 				// 2. 每个功能演示都切一遍：画布起得来、说明与读数有东西
-				const demoSpecs = [
-					{ tab: '基础视图', id: 'basic' },
+				const demoSpecs = [
+					{ tab: '基础视图', id: 'basic' },
+					{ tab: '背景与网架', id: 'background' },
 					{ tab: '标签交互', id: 'labels' },
 					{ tab: '鹰眼图配置', id: 'minimap' },
 					{ tab: '样式与规则', id: 'style' },
@@ -260,14 +261,85 @@
 				]
 				for (const spec of demoSpecs) {
 					const clicked = await clickTab(spec.tab)
-					const ready = clicked ? await canvasReady() : null
-					const panel = document.querySelector('.dv-demo .dv-panel')
-					const active = document.querySelector('.demo-shell__tab--active')?.textContent.trim() ?? ''
+					const ready = clicked ? await canvasReady() : null
+					const panel = document.querySelector('.dv-demo .dv-panel')
+					const active = document.querySelector('.demo-shell__tab--active')?.textContent.trim() ?? ''
 					check(`切到「${spec.tab}」：画布与读数面板都起来了`, Boolean(ready) && Boolean(panel) && active === spec.tab, `${ready ? 'canvas 就绪' : '没有 canvas'} / ${panel ? `${panel.querySelectorAll('.dv-group').length} 组读数` : '没有面板'} / 当前页签 ${active}`)
 					await wait(260)
 					check(`「${spec.tab}」把演示 id 写进地址栏（?demo=${spec.id}）`, location.search.includes(`demo=${spec.id}`), location.search)
 				}
 
+				// 2.0.0 样式与规则：单 / 多要素补丁、交互状态样式与详情查询都能从面板跑通
+				if (await clickTab('样式与规则')) {
+					const ready = await canvasReady()
+					const demo = await until(() => [...document.querySelectorAll('.dv-demo')].find(node => node.textContent.includes('单个 / 多个要素样式')), 8000)
+					const setup = demo?.__vueParentComponent?.setupState
+					const view = await until(() => setup?.view, 8000)
+					const click = key => document.querySelector(`[data-demo="${key}"]`)?.click()
+					const text = key => document.querySelector(`[data-demo="${key}"]`)?.textContent.trim() ?? ''
+					const pointTarget = document.querySelector('[data-demo="style-point-target"]')
+					const lineTarget = document.querySelector('[data-demo="style-line-target"]')
+					if (ready && view && pointTarget && lineTarget) {
+						await until(() => view.listPoints().length > 0 && view.listLines().length > 0, 5000)
+						const pointId = pointTarget.value
+						const lineId = lineTarget.value
+						click('style-update-point')
+						await wait(120)
+						const singlePoint = view.getData().points.find(point => String(point.id) === String(pointId))
+						check('样式与规则 demo：updatePoint 改单个节点的颜色、尺寸与图标',
+							singlePoint?.color === '#f97316' && singlePoint?.size === 18 && singlePoint?.symbol?.type === 'square' && text('style-edit-readout').includes('updatePoint'),
+							JSON.stringify({ point: singlePoint, readout: text('style-edit-readout') }))
+
+						click('style-patch-points')
+						await wait(120)
+						const batchPoints = view.getData().points.slice(0, 3)
+						check('样式与规则 demo：patchPoints 一次改多个节点',
+							batchPoints.every(point => point.color === '#22c55e' && point.size === 15) && text('style-edit-readout').includes('patchPoints'),
+							JSON.stringify({ colors: batchPoints.map(point => point.color), readout: text('style-edit-readout') }))
+
+						click('style-update-line')
+						await wait(120)
+						const singleLine = view.getData().lines.find(line => String(line.id) === String(lineId))
+						check('样式与规则 demo：updateLine 改单条线路的颜色、线宽与线型',
+							singleLine?.color === '#ec4899' && singleLine?.width === 4 && singleLine?.lineType === 'dashed' && text('style-edit-readout').includes('updateLine'),
+							JSON.stringify({ line: singleLine, readout: text('style-edit-readout') }))
+
+						click('style-patch-lines')
+						await wait(120)
+						const batchLines = view.getData().lines.slice(0, 3)
+						check('样式与规则 demo：patchLines 一次改多条线路',
+							batchLines.every(line => line.color === '#14b8a6' && line.width === 2.8 && line.lineType === 'dotted') && text('style-edit-readout').includes('patchLines'),
+							JSON.stringify({ colors: batchLines.map(line => line.color), readout: text('style-edit-readout') }))
+
+						const options = view.getOptions()
+						click('style-query')
+						await wait(80)
+						const detail = text('style-detail-readout')
+						check('样式与规则 demo：单条 / 多条节点、线路与通道详情都有读数',
+							detail.includes(`节点单查：${pointId}`) && detail.includes('节点批量：3 条') && detail.includes(`线路单查：${lineId}`) && detail.includes('线路批量：3 条') && detail.includes('通道单查：channel-a') && detail.includes('getChannels() 3 条'),
+							detail)
+						check('样式与规则 demo：单选 / 多选 / 框选 / 级联状态样式都写进 options',
+							options.pointSelectStyle?.color === '#ffd166' && options.pointMultiSelectStyle?.color === '#f97316' && options.pointBoxSelectStyle?.color === '#22d3ee' && options.lineSelectStyle?.color === '#ffd166' && options.lineMultiSelectStyle?.color === '#f97316' && options.cascadeHighlight?.pointStyle?.color === '#22d3ee',
+							JSON.stringify({ pointSelect: options.pointSelectStyle, pointMulti: options.pointMultiSelectStyle, pointBox: options.pointBoxSelectStyle, lineSelect: options.lineSelectStyle, lineMulti: options.lineMultiSelectStyle, cascade: options.cascadeHighlight }))
+
+						click('style-select-box')
+						await wait(100)
+						check('样式与规则 demo：框选按钮通过 selectInBox 真的形成框选', view.getSelectionData().pointCount > 0, JSON.stringify(view.getSelectionInfo()))
+
+						click('style-reset')
+						await wait(120)
+						check('样式与规则 demo：恢复原始数据清掉单 / 多要素补丁',
+							view.getData().points[0]?.color === undefined && view.getData().lines[0]?.color === undefined && view.getSelectionData().count === 0,
+							JSON.stringify({ point: view.getData().points[0], line: view.getData().lines[0], selection: view.getSelectionInfo() }))
+					}
+					else {
+						check('样式与规则 demo：画布、实例与下拉控件齐全', false, `${ready ? 'canvas 就绪' : 'canvas 未就绪'} / view=${Boolean(view)} / point=${Boolean(pointTarget)} / line=${Boolean(lineTarget)}`)
+					}
+				}
+				else {
+					check('样式与规则 demo：页签在', false, '没找到「样式与规则」页签')
+				}
+
 				// 2.0.1 基础视图：比例读写与空闲检测都能从面板操作并回读
 				if (await clickTab('基础视图')) {
 					const ready = await canvasReady()
@@ -354,6 +426,394 @@
 					check('基础视图：页签在', false, '没找到「基础视图」页签')
 				}
 
+				// 2.0.2 背景与网架：先有网架再加背景，四角拖动、隐藏 / 透明度与 GeoJSON 目标范围
+				if (await clickTab('背景与网架')) {
+					const ready = await canvasReady()
+					await wait(350)
+					const demo = await until(() => [...document.querySelectorAll('.dv-demo')].find(node => node.querySelector('[data-demo=background-add-image]')), 8000)
+					const setup = demo?.__vueParentComponent?.setupState
+					const view = await until(() => setup?.view, 8000)
+					const canvas = demo?.querySelector('canvas.gis-view__canvas') ?? demo?.querySelector('canvas')
+					const click = key => document.querySelector(`[data-demo=${key}]`)?.click()
+					const text = key => document.querySelector(`[data-demo=${key}]`)?.textContent.trim() ?? ''
+					const addImage = document.querySelector('[data-demo=background-add-image]')
+					const addGeo = document.querySelector('[data-demo=background-add-geojson]')
+					const networkToggle = document.querySelector('[data-demo=background-toggle-network]')
+					const networkRange = document.querySelector('[data-demo=background-network-opacity]')
+					const rotationToggle = document.querySelector('[data-demo=background-rotation-enabled]')
+					check('背景与网架：画布、添加按钮、隐藏与透明度控件齐全',
+						Boolean(ready && view && canvas && addImage && addGeo && networkToggle && networkRange && rotationToggle),
+						`${ready ? 'canvas 就绪' : '没有 canvas'} / view=${Boolean(view)} / 控件 ${[addImage, addGeo, networkToggle, networkRange, rotationToggle].filter(Boolean).length}/5`)
+					if (ready && view && canvas && addImage && addGeo && networkToggle && networkRange && rotationToggle) {
+						const beforeImage = view.getResolvedBackground()
+						check('背景与网架：初始只渲染网架、没有背景图或 GeoJSON',
+							view.getOptions().networkVisible === true && !beforeImage?.image && !beforeImage?.geoJson,
+							JSON.stringify({ networkVisible: view.getOptions().networkVisible, background: view.getOptions().background }))
+						click('background-add-image')
+						await until(() => view.getResolvedBackground()?.image?.quad?.length === 16, 5000)
+						const imageCorners = view.getOptions().background?.image?.corners
+						check('背景与网架：网架之后再加图片，默认只生成四个角手柄且不显示旋转按钮',
+							imageCorners?.length === 4 && view.getResolvedBackground()?.image?.quad?.length === 16 &&
+							document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 4 &&
+							document.querySelector('[data-gis-background-rotate]:not([hidden])') === null,
+							`corners=${imageCorners?.length ?? 0} / quad=${view.getResolvedBackground()?.image?.quad?.length ?? 0} / handles=${document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length} / rotate=${Boolean(document.querySelector('[data-gis-background-rotate]:not([hidden])'))}`)
+						await wait(450)
+						check('背景与网架：添加后自动进入编辑模式，锁定比例且关闭旋转时只有四角缩放点',
+							setup.backgroundEditing === true && view.getOptions().backgroundEditing === true &&
+							document.querySelector('[data-gis-background-editor]') !== null &&
+							document.querySelector('[data-gis-background-rotate]:not([hidden])') === null &&
+							document.querySelector('[data-demo=background-edit-mode]')?.checked === true &&
+							rotationToggle.checked === false &&
+							document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 4 &&
+							text('background-edit-point-summary').includes('4 个编辑点'),
+							JSON.stringify({ setup: setup.backgroundEditing, engine: view.getOptions().backgroundEditing, handles: document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length, rotate: Boolean(document.querySelector('[data-gis-background-rotate]:not([hidden])')) }))
+						const moveSurface = document.querySelector('[data-gis-background-move]')
+						const moveRect = moveSurface?.getBoundingClientRect()
+						const moveCenterBefore = [...setup.editCenter]
+						const moveCornersBefore = view.getOptions().background.image.corners.map(corner => [...corner])
+						const moveHandle = document.querySelector('[data-gis-background-handle=nw]')
+						const moveHandleBefore = moveHandle?.getBoundingClientRect()
+						let handlesHeldBeforeFrame = false
+						let handlesMatchedFrame = false
+						let moveFrameReport = ''
+						if (moveSurface && moveRect) {
+							const pointer = { bubbles: true, cancelable: true, composed: true, pointerId: 11, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+							const startX = moveRect.left + moveRect.width / 2
+							const startY = moveRect.top + moveRect.height / 2
+							moveSurface.dispatchEvent(new PointerEvent('pointerdown', { ...pointer, clientX: startX, clientY: startY }))
+							window.dispatchEvent(new PointerEvent('pointermove', { ...pointer, clientX: startX + 46, clientY: startY + 28 }))
+							const handleBeforeFrame = moveHandle?.getBoundingClientRect()
+							const cornersBeforeFrame = view.getOptions().background.image.corners
+							handlesHeldBeforeFrame = Boolean(moveHandleBefore && handleBeforeFrame) &&
+								Math.abs(handleBeforeFrame.left - moveHandleBefore.left) < 0.1 &&
+								Math.abs(handleBeforeFrame.top - moveHandleBefore.top) < 0.1 &&
+								cornersBeforeFrame.every((corner, index) =>
+									Math.abs(corner[0] - moveCornersBefore[index][0]) < 1e-9 &&
+									Math.abs(corner[1] - moveCornersBefore[index][1]) < 1e-9)
+							await new Promise(resolve => requestAnimationFrame(resolve))
+							await wait(50)
+							const cornersAfterFrame = view.getOptions().background.image.corners
+							const handleAfterFrame = moveHandle?.getBoundingClientRect()
+							const projectedDelta = [
+								view.project(cornersAfterFrame[0][0], cornersAfterFrame[0][1])[0] - view.project(moveCornersBefore[0][0], moveCornersBefore[0][1])[0],
+								view.project(cornersAfterFrame[0][0], cornersAfterFrame[0][1])[1] - view.project(moveCornersBefore[0][0], moveCornersBefore[0][1])[1]
+							]
+							const handleDelta = moveHandleBefore && handleAfterFrame
+								? [handleAfterFrame.left - moveHandleBefore.left, handleAfterFrame.top - moveHandleBefore.top]
+								: [Infinity, Infinity]
+							handlesMatchedFrame = Math.hypot(projectedDelta[0], projectedDelta[1]) > 0.5 &&
+								Math.hypot(handleDelta[0] - projectedDelta[0], handleDelta[1] - projectedDelta[1]) < 1.5
+							moveFrameReport = JSON.stringify({ projectedDelta, handleDelta, held: handlesHeldBeforeFrame, matched: handlesMatchedFrame })
+							window.dispatchEvent(new PointerEvent('pointerup', { ...pointer, button: 0, buttons: 0, clientX: startX + 46, clientY: startY + 28 }))
+						}
+						await wait(350)
+						const moveCornersAfter = view.getOptions().background.image.corners
+						const moveCenterAfter = setup.editCenter
+						const moveDelta = [moveCenterAfter[0] - moveCenterBefore[0], moveCenterAfter[1] - moveCenterBefore[1]]
+						check('背景与网架：拖背景内部整体移动，四角同步平移且旋转角不变',
+							Math.hypot(moveDelta[0], moveDelta[1]) > 0.05 && setup.editRotation === 0 &&
+							moveCornersAfter.length === 4 && moveCornersAfter.every((corner, index) =>
+								Math.abs(corner[0] - moveCornersBefore[index][0] - moveDelta[0]) < 0.02 &&
+								Math.abs(corner[1] - moveCornersBefore[index][1] - moveDelta[1]) < 0.02),
+							JSON.stringify({ delta: moveDelta, before: moveCenterBefore, after: moveCenterAfter }))
+						check('背景与网架：指针移动不会让手柄先于底图抢跑，刷新帧内手柄与四角同步落位',
+							handlesHeldBeforeFrame && handlesMatchedFrame,
+							moveFrameReport)
+						click('background-toggle-network')
+						await wait(160)
+						check('背景与网架：一键隐藏网架后背景与四角手柄仍在',
+							view.getOptions().networkVisible === false && view.getOptions().background?.image?.corners?.length === 4 &&
+							view.getResolvedBackground()?.image?.quad?.length === 16 && document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 4 &&
+							text('background-readout').includes('网架已隐藏'),
+							`networkVisible=${view.getOptions().networkVisible} / handles=${document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length} / ${text('background-readout')}`)
+						networkRange.value = '0.35'
+						networkRange.dispatchEvent(new Event('input', { bubbles: true }))
+						await wait(120)
+						check('背景与网架：网架整体透明度可从面板修改，背景四角不变',
+							Math.abs(view.getOptions().networkOpacity - 0.35) < 1e-6 && view.getOptions().background?.image?.corners?.length === 4,
+							`networkOpacity=${view.getOptions().networkOpacity}`)
+						networkToggle.click()
+						await wait(120)
+						const beforeDrag = view.getOptions().background.image.corners
+						const beforeWidth = beforeDrag[1][0] - beforeDrag[0][0]
+						const neHandle = document.querySelector('[data-gis-background-handle=ne]')
+						const handleRect = neHandle?.getBoundingClientRect()
+						if (neHandle && handleRect) {
+							const pointer = { bubbles: true, cancelable: true, composed: true, pointerId: 7, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+							neHandle.dispatchEvent(new PointerEvent('pointerdown', { ...pointer, clientX: handleRect.left + handleRect.width / 2, clientY: handleRect.top + handleRect.height / 2 }))
+							window.dispatchEvent(new PointerEvent('pointermove', { ...pointer, clientX: handleRect.left + handleRect.width / 2 + 70, clientY: handleRect.top + handleRect.height / 2 - 45 }))
+							window.dispatchEvent(new PointerEvent('pointerup', { ...pointer, button: 0, buttons: 0, clientX: handleRect.left + handleRect.width / 2 + 70, clientY: handleRect.top + handleRect.height / 2 - 45 }))
+						}
+						await wait(300)
+						const draggedCorners = view.getOptions().background?.image?.corners
+						const draggedWidth = draggedCorners ? draggedCorners[1][0] - draggedCorners[0][0] : 0
+						const draggedHeight = draggedCorners ? draggedCorners[0][1] - draggedCorners[2][1] : 0
+						const beforeHeight = beforeDrag[0][1] - beforeDrag[2][1]
+						check('背景与网架：锁定比例时拖右上角等比缩放，corners、读数与手柄同步',
+							draggedCorners?.length === 4 && draggedWidth > beforeWidth + 0.05 &&
+							Math.abs(draggedWidth / draggedHeight - beforeWidth / beforeHeight) < 0.01 &&
+							Math.abs((setup.editBounds.maxX - setup.editBounds.minX) - draggedWidth) < 0.02 &&
+							Number(document.querySelector('[data-demo=background-width]')?.value) > 0,
+							`ratio ${(beforeWidth / beforeHeight).toFixed(3)} → ${(draggedWidth / draggedHeight).toFixed(3)} / 输入 ${document.querySelector('[data-demo=background-width]')?.value}`)
+						document.querySelector('[data-demo=background-lock-ratio]')?.click()
+						await wait(160)
+						check('背景与网架：取消宽高锁定后从四角切换为八个缩放手柄，旋转仍关闭',
+							setup.aspectLocked === false && document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 8 &&
+							document.querySelectorAll('.gis-view__background-editor-handle--edge:not([hidden])').length === 4 &&
+							document.querySelector('[data-gis-background-rotate]:not([hidden])') === null &&
+							text('background-edit-point-summary').includes('8 个编辑点'),
+							JSON.stringify({ locked: setup.aspectLocked, handles: document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length, edges: document.querySelectorAll('.gis-view__background-editor-handle--edge:not([hidden])').length }))
+						const editColor = document.querySelector('[data-demo=background-edit-color]')
+						const editLineWidth = document.querySelector('[data-demo=background-edit-line-width]')
+						const editDashed = document.querySelector('[data-demo=background-edit-dashed]')
+						const editHandleSize = document.querySelector('[data-demo=background-edit-handle-size]')
+						const editHandleShape = document.querySelector('[data-demo=background-edit-handle-shape]')
+						if (editColor && editLineWidth && editDashed && editHandleSize && editHandleShape) {
+							editColor.value = '#c2410c'
+							editColor.dispatchEvent(new Event('input', { bubbles: true }))
+							editLineWidth.value = '3'
+							editLineWidth.dispatchEvent(new Event('input', { bubbles: true }))
+							editDashed.click()
+							editHandleSize.value = '22'
+							editHandleSize.dispatchEvent(new Event('input', { bubbles: true }))
+							editHandleShape.value = 'square'
+							editHandleShape.dispatchEvent(new Event('change', { bubbles: true }))
+						}
+						await wait(100)
+						const styledLayer = document.querySelector('[data-gis-background-editor]')
+						const styledHandle = document.querySelector('[data-gis-background-handle=nw]')
+						const styledHandleStyle = styledHandle ? getComputedStyle(styledHandle) : null
+						check('背景与网架：编辑框颜色、线宽、虚线、手柄尺寸与形状可实时自定义',
+							styledLayer && styledHandleStyle &&
+							styledLayer.style.getPropertyValue('--gis-view-bg-editor-color').trim().toLowerCase() === '#c2410c' &&
+							styledLayer.style.getPropertyValue('--gis-view-bg-editor-line-width').trim() === '3px' &&
+							styledLayer.style.getPropertyValue('--gis-view-bg-editor-dash').trim() === 'none' &&
+							styledHandleStyle.width === '22px' && styledHandleStyle.borderRadius === '2px',
+							JSON.stringify({
+								color: styledLayer?.style.getPropertyValue('--gis-view-bg-editor-color').trim(),
+								lineWidth: styledLayer?.style.getPropertyValue('--gis-view-bg-editor-line-width').trim(),
+								dash: styledLayer?.style.getPropertyValue('--gis-view-bg-editor-dash').trim(),
+								width: styledHandleStyle?.width,
+								radius: styledHandleStyle?.borderRadius
+							}))
+						const edgeWidthBefore = setup.editWidth
+						const edgeHeightBefore = setup.editHeight
+						const edgeCenterBefore = [...setup.editCenter]
+						const eastHandle = document.querySelector('[data-gis-background-handle=e]')
+						const eastRect = eastHandle?.getBoundingClientRect()
+						if (eastHandle && eastRect) {
+							const pointer = { bubbles: true, cancelable: true, composed: true, pointerId: 21, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+							const startX = eastRect.left + eastRect.width / 2
+							const startY = eastRect.top + eastRect.height / 2
+							eastHandle.dispatchEvent(new PointerEvent('pointerdown', { ...pointer, clientX: startX, clientY: startY }))
+							window.dispatchEvent(new PointerEvent('pointermove', { ...pointer, clientX: startX + 64, clientY: startY + 30 }))
+							window.dispatchEvent(new PointerEvent('pointerup', { ...pointer, button: 0, buttons: 0, clientX: startX + 64, clientY: startY + 30 }))
+						}
+						await wait(300)
+						check('背景与网架：未旋转时拖右边中点只改宽度，不改高度与中心纵坐标',
+							setup.editWidth > edgeWidthBefore + 0.05 &&
+							Math.abs(setup.editHeight - edgeHeightBefore) < 1e-6 &&
+							Math.abs(setup.editCenter[1] - edgeCenterBefore[1]) < 1e-6,
+							JSON.stringify({ width: [edgeWidthBefore, setup.editWidth], height: [edgeHeightBefore, setup.editHeight], centerY: [edgeCenterBefore[1], setup.editCenter[1]] }))
+						rotationToggle.click()
+						await wait(160)
+						const rotationInput = document.querySelector('[data-demo=background-rotation]')
+						check('背景与网架：开启旋转后出现旋转按钮，解锁状态下共九个编辑点',
+							setup.rotationEnabled === true && rotationToggle.checked === true &&
+							document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 8 &&
+							document.querySelectorAll('[data-gis-background-rotate]:not([hidden])').length === 1 &&
+							text('background-edit-point-summary').includes('9 个编辑点') && rotationInput,
+							JSON.stringify({ enabled: setup.rotationEnabled, handles: document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length, rotate: document.querySelectorAll('[data-gis-background-rotate]:not([hidden])').length }))
+						document.querySelector('.dv-stage')?.scrollIntoView({ block: 'center' })
+						click('background-fit-panel')
+						await wait(260)
+						const rotationHitButton = document.querySelector('[data-gis-background-rotate]:not([hidden])')
+						const rotationHitRect = rotationHitButton?.getBoundingClientRect()
+						const rotationHitTarget = rotationHitRect
+							? document.elementFromPoint(rotationHitRect.left + rotationHitRect.width / 2, rotationHitRect.top + rotationHitRect.height / 2)
+							: null
+						check('背景与网架：开启旋转后，旋转点能通过真实指针命中（不是只对按钮直接派发事件）',
+							Boolean(rotationHitButton && rotationHitTarget && (rotationHitTarget === rotationHitButton || rotationHitButton.contains(rotationHitTarget))),
+							JSON.stringify({ target: rotationHitTarget?.className ?? null, button: rotationHitButton?.className ?? null, pointerEvents: rotationHitButton ? getComputedStyle(rotationHitButton).pointerEvents : null }))
+						if (rotationInput) {
+							rotationInput.value = '30'
+							rotationInput.dispatchEvent(new Event('input', { bubbles: true }))
+							rotationInput.dispatchEvent(new Event('change', { bubbles: true }))
+						}
+						await wait(220)
+						const rotatedEdgeCornersBefore = view.getOptions().background.image.corners.map(corner => [...corner])
+						const rotatedEdgeWidthBefore = setup.editWidth
+						const rotatedEdgeHeightBefore = setup.editHeight
+						const westMiddleBefore = [
+							(rotatedEdgeCornersBefore[0][0] + rotatedEdgeCornersBefore[3][0]) / 2,
+							(rotatedEdgeCornersBefore[0][1] + rotatedEdgeCornersBefore[3][1]) / 2
+						]
+						const eastRotatedHandle = document.querySelector('[data-gis-background-handle=e]')
+						const eastRotatedRect = eastRotatedHandle?.getBoundingClientRect()
+						const rotatedSurfaceRect = document.querySelector('[data-gis-background-move]')?.getBoundingClientRect()
+						if (eastRotatedHandle && eastRotatedRect && rotatedSurfaceRect) {
+							const pointer = { bubbles: true, cancelable: true, composed: true, pointerId: 22, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+							const startX = eastRotatedRect.left + eastRotatedRect.width / 2
+							const startY = eastRotatedRect.top + eastRotatedRect.height / 2
+							const centerX = rotatedSurfaceRect.left + rotatedSurfaceRect.width / 2
+							const centerY = rotatedSurfaceRect.top + rotatedSurfaceRect.height / 2
+							const directionX = startX - centerX
+							const directionY = startY - centerY
+							const length = Math.max(Math.hypot(directionX, directionY), 1)
+							const endX = startX + directionX / length * 56
+							const endY = startY + directionY / length * 56
+							eastRotatedHandle.dispatchEvent(new PointerEvent('pointerdown', { ...pointer, clientX: startX, clientY: startY }))
+							window.dispatchEvent(new PointerEvent('pointermove', { ...pointer, clientX: endX, clientY: endY }))
+							window.dispatchEvent(new PointerEvent('pointerup', { ...pointer, button: 0, buttons: 0, clientX: endX, clientY: endY }))
+						}
+						await wait(300)
+						const rotatedEdgeCornersAfter = view.getOptions().background.image.corners
+						const westMiddleAfter = [
+							(rotatedEdgeCornersAfter[0][0] + rotatedEdgeCornersAfter[3][0]) / 2,
+							(rotatedEdgeCornersAfter[0][1] + rotatedEdgeCornersAfter[3][1]) / 2
+						]
+						check('背景与网架：旋转 30 度后拖右边中点仍只改局部宽度，并固定对边中点',
+							Math.abs(setup.editRotation - 30) < 0.01 && setup.editWidth > rotatedEdgeWidthBefore + 0.05 &&
+							Math.abs(setup.editHeight - rotatedEdgeHeightBefore) < 1e-6 &&
+							Math.hypot(westMiddleAfter[0] - westMiddleBefore[0], westMiddleAfter[1] - westMiddleBefore[1]) < 0.03,
+							JSON.stringify({ rotation: setup.editRotation, width: [rotatedEdgeWidthBefore, setup.editWidth], height: [rotatedEdgeHeightBefore, setup.editHeight], anchorDelta: [westMiddleAfter[0] - westMiddleBefore[0], westMiddleAfter[1] - westMiddleBefore[1]] }))
+						if (rotationInput) {
+							rotationInput.value = '0'
+							rotationInput.dispatchEvent(new Event('input', { bubbles: true }))
+							rotationInput.dispatchEvent(new Event('change', { bubbles: true }))
+						}
+						await wait(220)
+						click('background-add-geojson')
+						await wait(350)
+						const geoBefore = view.getOptions().background?.geoJsonStyle?.bounds
+						const geoWidthBefore = geoBefore ? geoBefore.maxX - geoBefore.minX : 0
+						const geoResolvedBefore = view.getResolvedBackground()?.geoJson
+						check('背景与网架：切到 GeoJSON 后写入目标 bounds，区域与文字照常解析',
+							geoBefore && geoWidthBefore > 0 && geoResolvedBefore?.bounds &&
+							Math.abs((geoResolvedBefore.bounds.maxX - geoResolvedBefore.bounds.minX) - geoWidthBefore) < 0.02 &&
+							geoResolvedBefore.regions.length > 0 && geoResolvedBefore.labels.length > 0,
+							`bounds=${JSON.stringify(geoBefore)} / regions=${geoResolvedBefore?.regions?.length ?? 0} / labels=${geoResolvedBefore?.labels?.length ?? 0}`)
+						const widthInput = document.querySelector('[data-demo=background-width]')
+						if (widthInput && geoBefore) {
+							widthInput.value = String(geoWidthBefore + 1)
+							widthInput.dispatchEvent(new Event('input', { bubbles: true }))
+							widthInput.dispatchEvent(new Event('change', { bubbles: true }))
+						}
+						await wait(350)
+						const geoAfter = view.getOptions().background?.geoJsonStyle?.bounds
+						const geoResolvedAfter = view.getResolvedBackground()?.geoJson
+						const geoWidthAfter = geoAfter ? geoAfter.maxX - geoAfter.minX : 0
+						check('背景与网架：GeoJSON 宽高输入能独立改大小，解析后的 bounds 与配置一致',
+							geoAfter && Math.abs(geoWidthAfter - (geoWidthBefore + 1)) < 0.03 &&
+							geoResolvedAfter?.bounds && Math.abs((geoResolvedAfter.bounds.maxX - geoResolvedAfter.bounds.minX) - geoWidthAfter) < 0.02,
+							`width ${geoWidthBefore.toFixed(2)} → ${geoWidthAfter.toFixed(2)} / resolved=${JSON.stringify(geoResolvedAfter?.bounds)}`)
+						const rotateHandle = document.querySelector('[data-gis-background-rotate]:not([hidden])')
+						const rotateSurface = document.querySelector('[data-gis-background-move]')
+						const rotateSurfaceRect = rotateSurface?.getBoundingClientRect()
+						const rotateHandleRect = rotateHandle?.getBoundingClientRect()
+						if (rotateHandle && rotateHandleRect && rotateSurfaceRect) {
+							const pointer = { bubbles: true, cancelable: true, composed: true, pointerId: 12, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+							const startX = rotateHandleRect.left + rotateHandleRect.width / 2
+							const startY = rotateHandleRect.top + rotateHandleRect.height / 2
+							const centerX = rotateSurfaceRect.left + rotateSurfaceRect.width / 2
+							const centerY = rotateSurfaceRect.top + rotateSurfaceRect.height / 2
+							const hitTarget = document.elementFromPoint(startX, startY)
+							hitTarget?.dispatchEvent(new PointerEvent('pointerdown', { ...pointer, clientX: startX, clientY: startY }))
+							window.dispatchEvent(new PointerEvent('pointermove', { ...pointer, clientX: centerX + 180, clientY: centerY }))
+							window.dispatchEvent(new PointerEvent('pointerup', { ...pointer, button: 0, buttons: 0, clientX: centerX + 180, clientY: centerY }))
+						}
+						await wait(350)
+						const rotatedGeo = view.getResolvedBackground()?.geoJson
+						const rotatedStyle = view.getOptions().background?.geoJsonStyle
+						const styleWidth = geoAfter ? geoAfter.maxX - geoAfter.minX : 0
+						const styleHeight = geoAfter ? geoAfter.maxY - geoAfter.minY : 0
+						check('背景与网架：拖顶部圆点旋转，GeoJSON 配置与解析角度同步，bounds 变成旋转后的 AABB',
+							Math.abs(setup.editRotation - 90) < 1 && rotatedStyle?.rotation === setup.editRotation &&
+							rotatedGeo?.rotation === setup.editRotation && rotatedGeo?.bounds &&
+							Math.abs((rotatedGeo.bounds.maxX - rotatedGeo.bounds.minX) - styleHeight) < 0.08 &&
+							Math.abs((rotatedGeo.bounds.maxY - rotatedGeo.bounds.minY) - styleWidth) < 0.08 &&
+							Math.abs(Number.parseFloat(document.querySelector('[data-demo=background-rotation]')?.value) - setup.editRotation) < 0.01,
+							JSON.stringify({ rotation: setup.editRotation, style: rotatedStyle?.rotation, resolved: rotatedGeo?.rotation, bounds: rotatedGeo?.bounds }))
+						const rotateWheelButton = document.querySelector('[data-gis-background-rotate]:not([hidden])')
+						const wheelSurfaceRect = rotateSurface?.getBoundingClientRect()
+						const wheelScaleBefore = view.getScale()
+						const editWheel = new WheelEvent('wheel', {
+							bubbles: true,
+							cancelable: true,
+							deltaY: -200,
+							clientX: wheelSurfaceRect ? wheelSurfaceRect.left + wheelSurfaceRect.width / 2 : 0,
+							clientY: wheelSurfaceRect ? wheelSurfaceRect.top + wheelSurfaceRect.height / 2 : 0
+						})
+						rotateWheelButton?.dispatchEvent(editWheel)
+						await wait(220)
+						check('背景与网架：编辑手柄上的滚轮仍转发给画布，整张图一起缩放',
+							editWheel.defaultPrevented && view.getScale() > wheelScaleBefore,
+							`${wheelScaleBefore} -> ${view.getScale()} / prevented=${editWheel.defaultPrevented}`)
+						click('background-toggle-editing')
+						await wait(220)
+						const editingOff = view.getOptions().backgroundEditing === false &&
+							document.querySelector('[data-gis-background-editor]') === null &&
+							document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 0
+						click('background-toggle-editing')
+						await wait(220)
+						check('背景与网架：可退出再进入背景编辑模式，图层与手柄随开关显隐',
+							editingOff && view.getOptions().backgroundEditing === true &&
+							document.querySelector('[data-gis-background-editor]') !== null &&
+							document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 8 &&
+							document.querySelector('[data-gis-background-rotate]:not([hidden])') !== null &&
+							text('background-edit-point-summary').includes('9 个编辑点'),
+							JSON.stringify({ off: editingOff, on: view.getOptions().backgroundEditing, handles: document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length }))
+						networkToggle.click()
+						await wait(140)
+						check('背景与网架：隐藏网架时 GeoJSON 背景与区域文字仍保留，恢复按钮可用',
+							view.getOptions().networkVisible === false && view.getOptions().background?.geoJson &&
+							view.getResolvedBackground()?.geoJson?.labels?.length > 0 &&
+							text('background-toggle-network').includes('恢复显示网架'),
+							`networkVisible=${view.getOptions().networkVisible} / labels=${view.getResolvedBackground()?.geoJson?.labels?.length ?? 0} / ${text('background-toggle-network')}`)
+						networkToggle.click()
+						await wait(140)
+						if (rotationInput) {
+							rotationInput.value = '90'
+							rotationInput.dispatchEvent(new Event('input', { bubbles: true }))
+							rotationInput.dispatchEvent(new Event('change', { bubbles: true }))
+						}
+						await wait(250)
+						const geoRotationReset = view.getResolvedBackground()?.geoJson
+						check('背景与网架：旋转输入框可把 GeoJSON 角度精确设回 90 度',
+							Math.abs(setup.editRotation - 90) < 0.001 && geoRotationReset?.rotation === setup.editRotation,
+							JSON.stringify({ setup: setup.editRotation, resolved: geoRotationReset?.rotation }))
+						click('background-add-image')
+						await wait(450)
+						const imageAfterRotate = view.getOptions().background?.image
+						const imageQuadAfterRotate = view.getResolvedBackground()?.image?.quad
+						const [imageCenterX, imageCenterY] = setup.editCenter
+						const expectedImageCorners = [
+							[imageCenterX + setup.editHeight / 2, imageCenterY + setup.editWidth / 2],
+							[imageCenterX + setup.editHeight / 2, imageCenterY - setup.editWidth / 2],
+							[imageCenterX - setup.editHeight / 2, imageCenterY - setup.editWidth / 2],
+							[imageCenterX - setup.editHeight / 2, imageCenterY + setup.editWidth / 2]
+						]
+						check('背景与网架：图片背景同样按旋转角写回四角，贴图四边形随之旋转',
+							imageAfterRotate?.corners?.length === 4 && imageQuadAfterRotate?.length === 16 &&
+							imageAfterRotate.corners.every((corner, index) =>
+								Math.abs(corner[0] - expectedImageCorners[index][0]) < 0.03 &&
+								Math.abs(corner[1] - expectedImageCorners[index][1]) < 0.03) &&
+							Math.abs(setup.editRotation - 90) < 0.01,
+							JSON.stringify({ rotation: setup.editRotation, corners: imageAfterRotate?.corners, expected: expectedImageCorners, quad: imageQuadAfterRotate?.length }))
+						rotationToggle.click()
+						await wait(160)
+						check('背景与网架：关闭旋转后旋转按钮消失，保留原角度与八个缩放手柄',
+							setup.rotationEnabled === false && Math.abs(setup.editRotation - 90) < 0.01 &&
+							document.querySelector('[data-gis-background-rotate]:not([hidden])') === null &&
+							document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length === 8 &&
+							text('background-edit-point-summary').includes('8 个编辑点'),
+							JSON.stringify({ enabled: setup.rotationEnabled, rotation: setup.editRotation, handles: document.querySelectorAll('.gis-view__background-editor-handle:not([hidden])').length, rotate: Boolean(document.querySelector('[data-gis-background-rotate]:not([hidden])')) }))
+					}
+				}
+				else {
+					check('背景与网架：页签在', false, '没找到「背景与网架」页签')
+				}
+
 				// 2.0 点聚合：控件齐全、聚合圆点击只发 clusterClick，maxZoom 展开后又回来
 				if (await clickTab('点聚合')) {
 					const ready = await canvasReady()
@@ -2196,7 +2656,93 @@
 					check('通道与数据：demo 的线路隐藏 / 显示按钮只改 visible 并恢复原数据',
 						Boolean(demoLineHidden) && Boolean(demoLineShown) && demoLineId !== undefined,
 						`${String(demoLineId)} · ${channelField('channel-visibility')}`)
+					// 通道内指定回线：只隐藏所选成员线路，通道 / 分组 / 其它回线都不动
+					const inChannelGroupsBefore = channelView.getChannelGroups(visibilityChannelId)
+					const inChannelGroup = [...inChannelGroupsBefore].reverse().find(group => group.lineIds?.length)
+					const inChannelLineId = inChannelGroup?.lineIds?.[inChannelGroup.lineIds.length - 1]
+					const inChannelLineIndex = channelView.getData().lines.findIndex(line => String(line.id) === String(inChannelLineId))
+					const inChannelMemberCount = inChannelGroupsBefore.reduce((sum, group) => sum + (group.lineIds?.length ?? 0), 0)
+					channelDemo.querySelector('[data-demo="channel-line-hide"]')?.click()
+					const inChannelHidden = await until(() => {
+						const line = channelView.getOptions().lines?.find(item => String(item.id) === String(inChannelLineId))
+						return line?.visible === false && inChannelLineIndex >= 0 && channelView.getLineStyle(inChannelLineIndex) === null && channelField('channel-line-visibility').includes('隐藏通道内回线')
+					}, 5000)
+					const groupsDuringLineHide = channelView.getChannelGroups(visibilityChannelId)
+					const othersDuringLineHide = channelView.getOptions().lines
+						.filter(line => groupsDuringLineHide.some(group => group.lineIds?.some(id => String(id) === String(line.id))) && String(line.id) !== String(inChannelLineId))
+						.every(line => line.visible !== false)
+					check('通道与数据：可单独隐藏某条成员回线，通道分组、其它回线与线路数据都保留',
+						Boolean(inChannelHidden) && inChannelMemberCount > 1 && othersDuringLineHide && groupsDuringLineHide.length === inChannelGroupsBefore.length && groupsDuringLineHide.some(group => group.lineIds?.some(id => String(id) === String(inChannelLineId))),
+						`${String(inChannelLineId)} · ${channelField('channel-line-visibility')}`)
+					channelDemo.querySelector('[data-demo="channel-line-show"]')?.click()
+					const inChannelShown = await until(() => {
+						const line = channelView.getOptions().lines?.find(item => String(item.id) === String(inChannelLineId))
+						return line?.visible === true && channelView.getLineStyle(inChannelLineIndex) !== null && channelField('channel-line-visibility').includes('显示通道内回线')
+					}, 5000)
+					check('通道与数据：显示首通道末回线后恢复原样式，成员与分组声明未变',
+						Boolean(inChannelShown) && channelView.getChannelGroups(visibilityChannelId).length === inChannelGroupsBefore.length,
+						channelField('channel-line-visibility'))
 					const channelBox = channelCanvas.getBoundingClientRect()
+					// 分组显隐与隐藏回线车道：准备两分组 -> 单组隐藏 -> center -> 恢复 -> 批量隐藏 / 恢复
+					channelDemo.querySelector('[data-demo=channel-group-prepare]').click()
+					const preparedGroupState = await until(() => {
+						const groups = channelView.getChannelGroups(visibilityChannelId)
+						return groups.length >= 2 && groups[0]?.lineIds?.length >= 2 && channelField('channel-group-visibility').includes('末组') ? groups : null
+					}, 5000)
+					const laneStates = () => channelView.getChannels()
+						.filter(state => String(state.channelId) === String(visibilityChannelId))
+						.map(state => ({ id: state.id, visible: state.visible, offsets: [...state.offsets] }))
+					const lanesBeforeGroupHide = laneStates()
+					channelDemo.querySelector('[data-demo=channel-group-hide]').click()
+					const groupHidden = await until(() => {
+						const groups = channelView.getChannelGroups(visibilityChannelId)
+						return groups.length >= 2 && groups[groups.length - 1]?.visible === false && groups.some(group => group.visible) && channelField('channel-group-visibility').includes('隐藏末组')
+					}, 5000)
+					const lanesAfterGroupHide = laneStates()
+					const offsetsByGroup = states => Object.fromEntries(states.filter(state => state.visible).map(state => [String(state.id), JSON.stringify(state.offsets)]))
+					const lanesPreserved = Object.entries(offsetsByGroup(lanesAfterGroupHide)).every(([id, offsets]) => offsetsByGroup(lanesBeforeGroupHide)[id] === offsets)
+					check('通道与数据：分组 demo 能准备两分组并单组隐藏，隐藏组仍保留成员与骨架，其余回线保持原车道',
+						Boolean(preparedGroupState) && Boolean(groupHidden) && lanesAfterGroupHide.length === lanesBeforeGroupHide.length && lanesPreserved && channelField('channel-lane-layout').includes('（隐）'),
+						`${channelField('channel-group-visibility')} / ${channelField('channel-lane-layout')}`)
+					const layoutSelect = channelDemo.querySelector('[data-demo=channel-hidden-line-layout]')
+					layoutSelect.value = 'center'
+					layoutSelect.dispatchEvent(new Event('change', { bubbles: true }))
+					const centeredLanes = await until(() => {
+						const states = laneStates()
+						return channelView.getOptions().channelHiddenLineLayout === 'center' && channelField('channel-lane-layout').includes('center') && channelField('channel-lane-layout').includes('（隐）') ? states : null
+					}, 5000)
+					const centeredOffsets = centeredLanes?.filter(state => state.visible).flatMap(state => state.offsets) ?? []
+					const hiddenOffsets = lanesAfterGroupHide.filter(state => state.visible).flatMap(state => state.offsets)
+					check('通道与数据：channelHiddenLineLayout=center 后，隐藏末组时剩余回线重新居中（offset 与 preserve 不同）',
+						Boolean(centeredLanes) && JSON.stringify(centeredOffsets) !== JSON.stringify(hiddenOffsets),
+						`${JSON.stringify(hiddenOffsets)} → ${JSON.stringify(centeredOffsets)}`)
+					channelDemo.querySelector('[data-demo=channel-group-show]').click()
+					const lastGroupShown = await until(() => {
+						const groups = channelView.getChannelGroups(visibilityChannelId)
+						return groups[groups.length - 1]?.visible === true && channelField('channel-group-visibility').includes('显示末组')
+					}, 5000)
+					channelDemo.querySelector('[data-demo=channel-group-hide-all]').click()
+					const allGroupsHidden = await until(() => {
+						const groups = channelView.getChannelGroups(visibilityChannelId)
+						return groups.length >= 2 && groups.every(group => group.visible === false) && channelField('channel-group-visibility').includes('全部组（批量）')
+					}, 5000)
+					channelDemo.querySelector('[data-demo=channel-group-show-all]').click()
+					const allGroupsShown = await until(() => {
+						const groups = channelView.getChannelGroups(visibilityChannelId)
+						return groups.length >= 2 && groups.every(group => group.visible === true) && channelField('channel-group-visibility').includes('显示全部组（批量）')
+					}, 5000)
+					check('通道与数据：单组恢复后，批量隐藏 / 恢复所有分组各走一次 group 引用批次，分组声明仍在',
+						Boolean(lastGroupShown) && Boolean(allGroupsHidden) && Boolean(allGroupsShown) && channelView.getChannelGroups(visibilityChannelId).length >= 2,
+						channelField('channel-group-visibility'))
+					layoutSelect.value = 'preserve'
+					layoutSelect.dispatchEvent(new Event('change', { bubbles: true }))
+					await until(() => channelView.getOptions().channelHiddenLineLayout === 'preserve', 3000)
+					const groupsForCleanup = channelView.getChannelGroups(visibilityChannelId)
+					if (groupsForCleanup.length > 1) {
+						channelView.mergeChannelGroups(visibilityChannelId, groupsForCleanup.slice(1).map(group => group.id), groupsForCleanup[0].id)
+					}
+					await wait(120)
+					channelSetup.syncReadouts?.()
 					const channelRightClick = (screen) => {
 						channelCanvas.dispatchEvent(new MouseEvent('contextmenu', {
 							bubbles: true,
@@ -2756,6 +3302,75 @@
 						check('合并样式 demo：读数明确说明它是最终 size / symbol，并给出规则与改写入口',
 							Boolean(mergeHint) && mergeHint.textContent.includes('合并样式') && mergeHint.textContent.includes('不是一项额外配置') && mergeHint.textContent.includes('尺寸取双方较大值') && mergeHint.textContent.includes('merge.createItem'),
 							mergeHint?.textContent.trim() ?? '没有合并样式读数')
+						// 保留框：默认开持久化 + DOM 框，框选后能读坐标、切线型 / 圆角、切 canvas / div 并手动收起
+						;[...document.querySelectorAll('.demo-panel-buttons button')].find(node => node.textContent.includes('导出图片与选中样式'))?.click()
+						await wait(100)
+						const persistentToggle = document.querySelector('[data-demo=selection-box-persistent]')
+						const renderSelect = document.querySelector('[data-demo=selection-box-render]')
+						const borderSelect = document.querySelector('[data-demo=selection-box-border-style]')
+						const radiusInput = document.querySelector('[data-demo=selection-box-radius]')
+						const classNameToggle = document.querySelector('[data-demo=selection-box-class-name]')
+						const boxReadoutNode = document.querySelector('[data-demo=selection-box-readout]')
+						check('保留框 demo：导出 / 选中样式面板摆出持久化开关、DOM 渲染、线型、圆角、类名与读数',
+							Boolean(persistentToggle && renderSelect && borderSelect && radiusInput && classNameToggle && boxReadoutNode) && persistentToggle.checked && renderSelect.value === 'div' && borderSelect.value === 'dashed' && radiusInput.value === '8' && classNameToggle.checked,
+							`${persistentToggle?.checked} / ${renderSelect?.value} / ${borderSelect?.value} / ${radiusInput?.value} / ${classNameToggle?.checked}`)
+						const fullBoxRect = () => ({ x: 0, y: 0, width: cascadeCanvas.clientWidth, height: cascadeCanvas.clientHeight })
+						const retainedElement = () => cascadeCanvas.parentElement.querySelector('.gis-view__selection-box.demo-retained-box')
+						cascadeView.selectInBox(fullBoxRect())
+						const retainedBox = await until(() => cascadeView.getSelectionBox(), 3000)
+						const domBox = await until(() => retainedElement(), 3000)
+						const initialBorderStyle = domBox?.style.getPropertyValue('--gis-view-selection-box-border-style').trim() ?? ''
+						const initialRadius = domBox?.style.getPropertyValue('--gis-view-selection-box-radius').trim() ?? ''
+						const selectionCountBeforeClear = cascadeView.getSelectionInfo().count
+						check('保留框 demo：框选后保留矩形，DOM 框挂自定义类名并应用虚线 / 圆角，选中集仍在',
+							Boolean(retainedBox && domBox) && initialBorderStyle === 'dashed' && initialRadius === '8px' && selectionCountBeforeClear > 0,
+							JSON.stringify({ box: retainedBox, classes: domBox?.className, border: initialBorderStyle, radius: initialRadius, selected: selectionCountBeforeClear }))
+						document.querySelector('[data-demo=selection-box-read]').click()
+						await wait(60)
+						check('保留框 demo：读取按钮走 getSelectionBox()，读数给出 CSS 像素坐标与宽高',
+							boxReadoutNode.textContent.includes('getSelectionBox()：x') && boxReadoutNode.textContent.includes('×'),
+							boxReadoutNode.textContent.trim())
+						borderSelect.value = 'dotted'
+						borderSelect.dispatchEvent(new Event('change', { bubbles: true }))
+						radiusInput.value = '14'
+						radiusInput.dispatchEvent(new Event('input', { bubbles: true }))
+						radiusInput.dispatchEvent(new Event('change', { bubbles: true }))
+						const boxStyleChanged = await until(() => {
+							const element = retainedElement()
+							return cascadeView.getOptions().selectionBoxStyle?.borderStyle === 'dotted' && cascadeView.getOptions().selectionBoxStyle?.radius === 14 && element?.style.getPropertyValue('--gis-view-selection-box-border-style').trim() === 'dotted' && element?.style.getPropertyValue('--gis-view-selection-box-radius').trim() === '14px'
+						}, 3000)
+						check('保留框 demo：div 框的线型 / 圆角改完即时落到 DOM（options 与元素同步）', Boolean(boxStyleChanged), boxStyleChanged ? 'dotted / 14px' : boxReadoutNode.textContent.trim())
+						renderSelect.value = 'canvas'
+						renderSelect.dispatchEvent(new Event('change', { bubbles: true }))
+						const canvasRendered = await until(() => cascadeView.getOptions().selectionBoxStyle?.render === 'canvas' && !retainedElement(), 3000)
+						renderSelect.value = 'div'
+						renderSelect.dispatchEvent(new Event('change', { bubbles: true }))
+						const divRendered = await until(() => cascadeView.getOptions().selectionBoxStyle?.render === 'div' && Boolean(retainedElement()), 3000)
+						check('保留框 demo：canvas / div 渲染可运行时切换，切回 div 后 DOM 框重新挂上',
+							Boolean(canvasRendered) && Boolean(divRendered),
+							`${canvasRendered} / ${divRendered}`)
+						document.querySelector('[data-demo=selection-box-clear]').click()
+						const boxCleared = await until(() => cascadeView.getSelectionBox() === null && !retainedElement(), 3000)
+						check('保留框 demo：clearSelectionBox() 按钮只收起框，选中集不变，读数回到 null',
+							Boolean(boxCleared) && cascadeView.getSelectionInfo().count === selectionCountBeforeClear && boxReadoutNode.textContent.includes('null'),
+							`${cascadeView.getSelectionInfo().count} / ${boxReadoutNode.textContent.trim()}`)
+						cascadeView.selectInBox(fullBoxRect())
+						await until(() => cascadeView.getSelectionBox(), 3000)
+						persistentToggle.click()
+						const persistentDisabled = await until(() => cascadeView.getOptions().selectionBoxPersistent === false && cascadeView.getSelectionBox() === null, 3000)
+						persistentToggle.click()
+						const persistentEnabled = await until(() => cascadeView.getOptions().selectionBoxPersistent === true, 3000)
+						check('保留框 demo：勾掉持久化会收起现有框并写回 options，重新勾上恢复可保留',
+							Boolean(persistentDisabled) && Boolean(persistentEnabled),
+							`${cascadeView.getOptions().selectionBoxPersistent} / ${cascadeView.getSelectionBox() === null ? '无框' : '有框'}`)
+						borderSelect.value = 'dashed'
+						borderSelect.dispatchEvent(new Event('change', { bubbles: true }))
+						radiusInput.value = '8'
+						radiusInput.dispatchEvent(new Event('input', { bubbles: true }))
+						radiusInput.dispatchEvent(new Event('change', { bubbles: true }))
+						cascadeView.clearSelectionBox()
+						cascadeView.selectFeatures(null)
+						await wait(100)
 					}
 					else {
 						check('级联高亮 demo：画布与视图都起来了', false, ready ? '没有 setupState.viewRef' : '没有 canvas')
@@ -2767,8 +3382,8 @@
 					await wait(150)
 					const apiItems = () => [...document.querySelectorAll('.demo-api-list:not(.demo-api-list--options) .demo-api-item')]
 					const optionItems = () => [...document.querySelectorAll('.demo-api-list--options .demo-api-item')]
-					check('实例方法速查：整份成员清单按分组列全（16 组 / 274 个成员）',
-						Boolean(ready) && document.querySelectorAll('.demo-api-group').length === 16 && apiItems().length === 274,
+					check('实例方法速查：整份成员清单按分组列全（16 组 / 283 个成员）',
+						Boolean(ready) && document.querySelectorAll('.demo-api-group').length === 16 && apiItems().length === 283,
 						`${document.querySelectorAll('.demo-api-group').length} 组 / ${apiItems().length} 个成员`)
 					const apiNames = apiItems().map(node => node.querySelector('b')?.textContent)
 					const roundNames = ['registerSymbol', 'unregisterSymbol', 'listSymbols']
@@ -2787,7 +3402,7 @@
 					check('实例方法速查：这一轮拆出来的方法也在清单里（addChannelGroupLines / joinChannelGroupLines / endAddChannel）',
 						roundNames1597.every(name => apiNames.includes(name)),
 						roundNames1597.filter(name => !apiNames.includes(name)).join(' / ') || '三个都在')
-					check('实例方法速查：options 折叠清单列全 100 个键', optionItems().length === 100, `${optionItems().length} 个键`)
+					check('实例方法速查：options 折叠清单列全 107 个键', optionItems().length === 107, `${optionItems().length} 个键`)
 					const apiSearch = document.querySelector('.demo-api-search input[type="search"]')
 					apiSearch.value = 'focusOn'
 					apiSearch.dispatchEvent(new Event('input', { bubbles: true }))