gis-view-webgl2 0.1.2 → 0.1.4

package/docs/demos/gis-view-demo/panels/StylePanels.vue

@@ -0,0 +1,561 @@
+<script setup>
+import { useGisViewDemoContext } from '../demoContext.js'
+const {
+	LABEL_POSITIONS, heatSeed, EFFECT_SYMBOL_OPTIONS, effectLineOn, effectPointOn, effectSymbol, effectLineCount,
+	effectPeriod, effectRingRadius, effectRingCount, effectText, prebakeText, applyEffects, perItemFancy,
+	perItemFollow, perItemOff, applyPrebake, applyPrebakeExact, runPrebakeNow, clearPrebake, building, activePanel,
+	pointSize, lineWidth, lineTypeMode, dcLineMark, dcLineAnchor, dcLineParallel, lineDirectionMark,
+	lineDirectionCount, lineDirectionReverse, dcLineButtonText, cursorMode, pointSizeScale, lineWidthScale,
+	pointZoomScale, lineZoomScale, fitSpacing, fitSpacingMinDistance, fitSpacingMaxZoom, zoomBaseReadout,
+	pointShape, symbolByStationType, symbolIconMode, symbolStrokeWidth, pointLayering, lineLayering, perPointStyle,
+	perPointSymbol, applyRules, showLabels, labelPosition, labelMaxCount, labelVoltageScope, LABEL_VOLTAGE_SCOPES,
+	labelAvoidOverlap, labelScanMode, labelOptimize, labelTemplate, labelHtml, labelBackground, labelColor,
+	labelFontSize, labelDraggable, labelEditable, labelHideOnInteract, showLineLabels, lineLabelPosition,
+	lineLabelTemplate, lineLabelMaxCount, lineLabelAvoidOverlap, lineLabelScanMode, lineLabelVoltageScope,
+	lineLabelHideOnInteract, lineLabelFollowOnInteract, channelMemberLabels, lineLabelParallel, lineLabelDraggable,
+	lineLabelEditable, lineLabelHtml, lineLabelBackground, lineLabelColor, lineLabelFontSize, LINE_LABEL_POSITIONS,
+	showTooltip, tooltipHtml, tooltipChannelScope, visiblePointCount, datasetMode, RULE_PRESETS, rulePreset,
+	ruleJson, ruleReadout, syncRuleJson, applyRuleUpdate, heatmapEnabled, heatmapTarget, HEATMAP_TARGETS,
+	heatmapPointActive, HEATMAP_PALETTES, heatmapPalette, heatmapDomainMode, heatmapMin, heatmapMax,
+	heatmapMissing, heatmapWidthMin, heatmapWidthMax, heatmapSizeMin, heatmapSizeMax, heatmapDensity,
+	heatmapDensityStyle, heatmapDensityLayer, heatmapDensityLevels, heatmapDensityRadius, heatmapDensityThreshold,
+	heatmapDensityCore, heatmapDensityGamma, heatmapDensityWeight, heatmapDensityOpacity, heatmapGlow,
+	heatmapGlowStrength, heatmapGlowLine, heatmapGlowPoint, heatmapGlowBlend, heatmapOpacityMin, heatmapOpacityMax,
+	heatmapMinimap, heatmapFieldStats, applyZoomBase, labelEditId, newLabelPosition, newLabelPositions,
+	labelEditContent, labelEditFontSize, labelEditColor, labelEditReadout, labelStateReadout, applyLabelEdit,
+	resetLabelEdit, resetAllLabels, labelRows, labelListReadout, labelRoundTripReadout, pickLabelRow, addLabelHere,
+	removeLabelHere, seedInitialLabels, roundTripLabels, saveLabelStates, restoreLabelStates, rerollHeatData,
+	focusDcLine,
+} = useGisViewDemoContext()
+</script>
+
+<template>
+				<div v-show="activePanel === 'style-heat'" class="demo-panel-body">
+				<div class="demo-controls">
+				<label><input v-model="heatmapEnabled" type="checkbox" /> 启用热力图</label>
+				<label class="demo-slider">
+					作用对象
+					<select v-model="heatmapTarget" :disabled="!heatmapEnabled">
+						<option v-for="item in HEATMAP_TARGETS" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<button type="button" :disabled="building" @click="rerollHeatData">重新随机一份热力数据</button>
+				<span class="demo-control-hint">种子 {{ heatSeed }}：节点 / 线路 / 通道都按新一份「热区场」重算字段值，坐标与拓扑一动不动</span>
+				<label class="demo-slider">
+					色带
+					<select v-model="heatmapPalette" :disabled="!heatmapEnabled">
+						<option v-for="item in HEATMAP_PALETTES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					值域
+					<select v-model="heatmapDomainMode" :disabled="!heatmapEnabled">
+						<option value="auto">自动（按数据最小 / 最大）</option>
+						<option value="fixed">指定（下面两个数）</option>
+					</select>
+				</label>
+				<label>最小 <input v-model.number="heatmapMin" type="number" step="0.1" :disabled="!heatmapEnabled || heatmapDomainMode !== 'fixed'" /></label>
+				<label>最大 <input v-model.number="heatmapMax" type="number" step="0.1" :disabled="!heatmapEnabled || heatmapDomainMode !== 'fixed'" /></label>
+				<label class="demo-slider">
+					缺值
+					<select v-model="heatmapMissing" :disabled="!heatmapEnabled" title="字段缺值或不是数字时怎么办">
+						<option value="keep">保持原样（不参与）</option>
+						<option value="min">按值域最小值算</option>
+						<option value="max">按值域最大值算</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					线宽倍数
+					<input v-model.number="heatmapWidthMin" type="range" min="0.4" max="4" step="0.1" :disabled="!heatmapEnabled" />
+					<input v-model.number="heatmapWidthMax" type="range" min="0.4" max="4" step="0.1" :disabled="!heatmapEnabled" />
+					<span>{{ heatmapWidthMin.toFixed(1) }} ~ {{ heatmapWidthMax.toFixed(1) }}×</span>
+				</label>
+				<label class="demo-slider">
+					节点尺寸倍数
+					<input v-model.number="heatmapSizeMin" type="range" min="0.5" max="3" step="0.1" :disabled="!heatmapEnabled || !heatmapPointActive" />
+					<input v-model.number="heatmapSizeMax" type="range" min="0.5" max="3" step="0.1" :disabled="!heatmapEnabled || !heatmapPointActive" />
+					<span>{{ heatmapSizeMin.toFixed(1) }} ~ {{ heatmapSizeMax.toFixed(1) }}×</span>
+				</label>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">节点也在热力图里：合成数据的节点与线路都按「热区场」随机生成 max_loading_rate（几团热点，不是均匀噪点），作用对象切「只按节点上色」看节点自己的颜色、切「节点 + 线路 + 通道」看两层叠在一起的效果；真实 / 样例数据的节点没有这一列，点上面的「重新随机」现生成一份。节点上的热力颜色落在填充色上，描边仍旧是电压配色；「节点尺寸倍数」与光晕的点尺寸只在这一档起作用。作用对象带上节点时图标不变：图标符号带 tint，填充按白色烘焙、逐实例染上热力色，描边走 currentStrokeColor 不受影响（贴图按「符号 + 描边色 + 尺寸」共用一张，10 万级也不会一个节点烤一张）—— 把节点从作用对象里去掉就是不参与热力图，图标本身始终是那一张</span></details>
+				<label><input v-model="heatmapDensity" type="checkbox" :disabled="!heatmapEnabled" /> 密度场（KDE，缺省平滑渐隐）</label>
+				<label class="demo-slider">
+					画法
+					<select v-model="heatmapDensityStyle" :disabled="!heatmapEnabled || !heatmapDensity" title="smooth = 连续色带、外缘一路淡到全透明；band = 分档等值线、档间硬边">
+						<option value="smooth">平滑渐隐（往外越来越淡）</option>
+						<option value="band">分档等值线（档间硬边）</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					层级
+					<select v-model="heatmapDensityLayer" :disabled="!heatmapEnabled || !heatmapDensity" title="热力图铺在数据之下还是压在上面；改它只换画的顺序，不重新烘焙">
+						<option value="below">数据之下（不挡节点与线路，要素密时会被盖住）</option>
+						<option value="above">数据之上（压住节点与线路，缺省）</option>
+						<option value="top">最上层（连框选与草稿一起压住）</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					密度档数
+					<input v-model.number="heatmapDensityLevels" type="range" min="3" max="20" step="1" :disabled="!heatmapEnabled || !heatmapDensity" />
+					<span>{{ heatmapDensityLevels }} 档</span>
+				</label>
+				<label class="demo-slider">
+					核半径
+					<input v-model.number="heatmapDensityRadius" type="range" min="1" max="16" step="0.5" :disabled="!heatmapEnabled || !heatmapDensity" />
+					<span>{{ heatmapDensityRadius.toFixed(1) }}% 长边</span>
+				</label>
+				<label class="demo-slider">
+					门槛
+					<input v-model.number="heatmapDensityThreshold" type="range" min="0" max="50" step="1" :disabled="!heatmapEnabled || !heatmapDensity" />
+					<span>场值 &lt; {{ heatmapDensityThreshold }}% 不画</span>
+				</label>
+				<label class="demo-slider">
+					热核（band 用）
+					<input v-model.number="heatmapDensityCore" type="range" min="0" max="25" step="1" :disabled="!heatmapEnabled || !heatmapDensity" />
+					<span>{{ heatmapDensityCore === 0 ? '关（最热一档就是色带末端）' : `最热 ${heatmapDensityCore}% 提亮` }}</span>
+				</label>
+				<label class="demo-slider">
+					对比度
+					<input v-model.number="heatmapDensityGamma" type="range" min="0.4" max="3" step="0.1" :disabled="!heatmapEnabled || !heatmapDensity" />
+					<span>{{ heatmapDensityGamma.toFixed(2) }}</span>
+				</label>
+				<label class="demo-slider">
+					密度权重
+					<select v-model="heatmapDensityWeight" :disabled="!heatmapEnabled || !heatmapDensity" title="密度场里每个要素算多重">
+						<option value="value">按值域比例（值高 + 密集 = 热）</option>
+						<option value="count">只数密度（每个要素算一份）</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					密度层不透明度
+					<input v-model.number="heatmapDensityOpacity" type="range" min="0.1" max="1" step="0.05" :disabled="!heatmapEnabled || !heatmapDensity" />
+					<span>{{ heatmapDensityOpacity.toFixed(2) }}</span>
+				</label>
+					<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">密度场（density）：把参与热力图的节点 / 线路按核半径撒成一张密度栅格（KDE），再按色带上色铺上去 —— 主流热力图就是这一层。作用对象带上节点（缺省三类全开）时节点也按自己的值参与撒点：合成数据的节点带「热区场」的值，几团热点在密度场上糊开，不是平平一层。两种画法：smooth（缺省）按色带连续取值、alpha 跟着场值涨，从热核往外一路淡到全透明，就是 ECharts 地图热力图那种「往外化开」的团；band 是分档等值线，每档一个纯色、档与档之间硬边（色块 + 白心）。layer 决定铺在哪一层：above（缺省）数据之上、压住节点与线路 —— 真实数据 2164 个节点 + 3669 条回线几乎铺满画布，铺在下面基本被盖住；below 数据之下、不挡节点与线路（要素稀疏的数据集用这档最合适）；top 最上层、连框选与草稿一起压住。改 layer 只换画的顺序，不重新烘焙。缺省就开着，写 density: false 回到逐要素上色 + 光晕的老观感。可调：style、layer、radius（核半径，世界单位）/ radiusRatio（占数据范围长边的比例，缺省 5.5%）、resolution（栅格长边格数，缺省 384）、levels（band 的档数）、threshold（低于它不画：smooth 缺省 2%、band 0.06）、edge（band 的外缘淡入宽度）、core（band 的热核，smooth 缺省关，见上面的「热核」）、gamma、max、weight、opacity。场按世界坐标烘一次，缩放平移不重算；要素特别多时撒点自动降采样（格子仍是细栅格的分辨率）。门槛与 gamma 一起决定盖住多大面积。换「画法」会自动把「门槛 / 热核」带回那一档的缺省（smooth 3% / 关、band 15% / 最热 7% 提亮）</span></details>
+				<label><input v-model="heatmapGlow" type="checkbox" :disabled="!heatmapEnabled" /> 热力光晕（热端发光，重叠越叠越亮）</label>
+				<label class="demo-slider">
+					光晕强度
+					<input v-model.number="heatmapGlowStrength" type="range" min="0" max="1" step="0.05" :disabled="!heatmapEnabled || !heatmapGlow" />
+					<span>{{ heatmapGlowStrength.toFixed(2) }}</span>
+				</label>
+				<label class="demo-slider">
+					光晕尺寸
+					<input v-model.number="heatmapGlowLine" type="range" min="1" max="8" step="0.1" :disabled="!heatmapEnabled || !heatmapGlow" />
+					<input v-model.number="heatmapGlowPoint" type="range" min="1" max="6" step="0.1" :disabled="!heatmapEnabled || !heatmapGlow || !heatmapPointActive" />
+					<span>线 {{ heatmapGlowLine.toFixed(1) }} / 点 {{ heatmapGlowPoint.toFixed(1) }}×</span>
+				</label>
+				<label class="demo-slider">
+					混合
+					<select v-model="heatmapGlowBlend" :disabled="!heatmapEnabled || !heatmapGlow" title="深底色用加法混合（重叠越叠越亮），浅底色自动退回普通混合">
+						<option value="auto">自动（按背景亮度）</option>
+						<option value="add">加法（发光感最强）</option>
+						<option value="normal">普通</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					色带透明度
+					<input v-model.number="heatmapOpacityMin" type="range" min="0" max="1" step="0.05" :disabled="!heatmapEnabled" />
+					<input v-model.number="heatmapOpacityMax" type="range" min="0" max="1" step="0.05" :disabled="!heatmapEnabled" />
+					<span>{{ heatmapOpacityMin.toFixed(2) }} ~ {{ heatmapOpacityMax.toFixed(2) }}</span>
+				</label>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">光晕（glow）：本色之外再铺一圈更宽 / 更大的渐隐色，冷端不发光、热端最亮，深底色上用加法混合（重叠处越叠越亮）、浅底色自动退回普通混合；底色浅时把「色带透明度」的冷端压低（缺省 0.45）就是低值淡淡一层、高值才显色的观感。glow: false 关掉，写数字就是强度，写对象还能逐项给 { strength, size: [线, 点], blend }；逐要素用 heatmap: { glow: … } 单独调（渐隐按符号自己的形状铺：方形 / 圆角符号得到的是同形状的晕，不再一律是圆点）</span></details>
+				<label><input v-model="heatmapMinimap" type="checkbox" :disabled="!heatmapEnabled" /> 鹰眼图沿用同一份（勾掉只给小图关）</label>
+				<span class="demo-control-hint">{{ heatmapFieldStats }}</span>
+				</div>
+				<div class="demo-controls">
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">热力图按 field 取数（这里固定 max_loading_rate）到 colors 色带上取颜色，再按 width / size 的区间用同一个比例缩放线宽与节点尺寸；优先级是「状态样式 &gt; 热力图 &gt; 要素自身 &gt; 规则 &gt; style &gt; 默认」，逐要素可以用 heatmap: false 排除、或写对象换字段 / 值域。回线自己带 max_loading_rate 就按自己的上色；自己没这个字段时才回落到所属通道的值（作用对象里要勾上通道），两边都没有就按「缺值」处理 —— 合成数据的通道与回线都带值，切「只按通道自己的值上色」就能对比「每一回各自的颜色」。节点与线路共用同一条色带：合成数据的节点与线路都按同一份「热区场」取值（几团热点），切「只按节点上色」看节点自己的颜色、切「节点 + 线路 + 通道」看两层叠在一起的效果。new.json 里线路这一列恒为 1.5、节点根本没有这一列，真实数据看不出渐变 —— 想看效果就切到「合成数据」，或在任意数据集上点上面的「重新随机」现生成一份（样例数据的线路是按序号派生的演示值）。这里的每一项都是 updateOptions({ heatmap })，数据与拾取都不动</span></details>
+				</div>
+				</div>
+
+				<div v-show="activePanel === 'style-line'" class="demo-panel-body">
+				<div class="demo-controls">
+				<label class="demo-slider">
+					点大小
+					<input v-model.number="pointSize" type="range" min="4" max="20" step="1" />
+					<span>{{ pointSize }}px</span>
+				</label>
+				<label class="demo-slider">
+					线宽
+					<input v-model.number="lineWidth" type="range" min="0.5" max="5" step="0.1" />
+					<span>{{ lineWidth.toFixed(1) }}px</span>
+				</label>
+				<label class="demo-slider">
+					线型
+					<select v-model="lineTypeMode">
+						<option value="data">数据 / 规则（默认实线）</option>
+						<option value="solid">全部实线 solid</option>
+						<option value="dashed">全部虚线 dashed</option>
+						<option value="dotted">全部点线 dotted</option>
+						<option value="dashdot">全部点划线 dashdot</option>
+					</select>
+				</label>
+				<label><input v-model="dcLineMark" type="checkbox" /> 直流线路中点挂 PATH_DC_LINE</label>
+				<label class="demo-slider">
+					标记定位
+					<select v-model="dcLineAnchor" :disabled="!dcLineMark">
+						<option value="auto">自动（无拐点跟比例，有拐点钉在线上）</option>
+						<option value="follow">跟随线路</option>
+						<option value="fixed">写死坐标</option>
+					</select>
+				</label>
+				<label><input v-model="dcLineParallel" type="checkbox" :disabled="!dcLineMark" /> 与线路平行</label>
+				<label><input v-model="lineDirectionMark" type="checkbox" /> 线路方向箭头</label>
+				<label class="demo-slider">
+					箭头数量
+					<select v-model.number="lineDirectionCount" :disabled="!lineDirectionMark">
+						<option :value="1">1（中点）</option>
+						<option :value="2">2（三等分点）</option>
+						<option :value="3">3（四等分点）</option>
+					</select>
+				</label>
+				<label><input v-model="lineDirectionReverse" type="checkbox" :disabled="!lineDirectionMark" /> 指回起点</label>
+				<button type="button" :disabled="building" @click="focusDcLine">{{ dcLineButtonText }}</button>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">PATH_DC_LINE 挂在线路的中点（position: 0.5），白底、描边取线路的电压配色：样例数据 test.json 里有 1 条 dc_line（「直流送电」），真实数据 new.json 的 channel_data 也带 dc_line —— 上面这个按钮按当前数据集的条数定位（按钮上写着条数），点一下就把第一条选中并居中，选中后线中间那个带箭头的方框就是它（图片 / SVG 装饰的贴图是异步烘出来的，切过去的第一下可能要等一帧）。标记定位的「自动」是这一轮的默认行为：线路没有拐点时按 position 的比例跟随（一直待在中点，拖端点也跟着走），加过拐点之后装饰就跟拐点一样钉住 —— 钉的是那一刻线路上的那个位置，锚点坐标不变、画之前投到当前路径上，拖端点 / 拐点、增删拐点装饰都还贴着线走，不会留在原地脱离线；「跟随线路」一直跟着新几何走，「写死坐标」把挂载那一刻的中点当 at 写死（线路改了装饰留在原处，可能脱离线）。勾上「与线路平行」装饰按锚点处的线路方向转（方框里的箭头指向线路方向），斜线、折线上都看得出来。下面的「线路方向箭头」是组件自带的另一条路（options.lineDirection）：不用写装饰，沿弧长等分摆箭头、朝向跟着线路切向走（起点 → 终点），逐条线想要不同的数量 / 位置就写在线自己的 direction 上。</span></details>
+				<label class="demo-slider">
+					光标档位
+					<select v-model="cursorMode">
+						<option value="default">默认（跟随 CSS 变量）</option>
+						<option value="keys">按分类换关键字</option>
+						<option value="image">图片光标（data URI + 热点）</option>
+						<option value="ctrl">按住 Ctrl 换一套</option>
+					</select>
+				</label>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">线型逐条配置（写进每条线自己的 lineType）—— 也可以由规则 / lineStyle 统一给，数据里带 line_types 的按数据走；运行中改单条用 view.updateLine(id, { lineType })（批量 patchLines）、改全局用 view.updateLineStyle({ lineType, dashOffset })；图案长度是 CSS 像素，缩放时屏幕上的长短不变。光标按「悬停到哪一类要素上」分开配（节点 / 线路 / 通道 / 拐点，外加空白 / 拖动 / 草稿几个状态），支持系统关键字、var(--x) 与图片 url + 热点，按住 Ctrl / ⌘ 还能整批换一套；要素自己写了 cursor / ctrlCursor 时以要素为准</span></details>
+				<label class="demo-slider">
+					节点形状
+					<select v-model="pointShape">
+						<option value="auto">数据自带</option>
+						<option value="circle">全部圆形</option>
+						<option value="square">全部方形</option>
+						<option value="rounded">圆角方形</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					节点放大
+					<input v-model.number="pointSizeScale" type="range" min="0.5" max="10" step="0.1" />
+					<span>×{{ pointSizeScale.toFixed(1) }}</span>
+				</label>
+				<label class="demo-slider">
+					线宽放大
+					<input v-model.number="lineWidthScale" type="range" min="0.5" max="3" step="0.1" />
+					<span>×{{ lineWidthScale.toFixed(1) }}</span>
+				</label>
+				<label class="demo-slider">
+					节点跟随缩放
+					<input v-model.number="pointZoomScale" type="range" min="0" max="1" step="0.1" />
+					<span>{{ pointZoomScale.toFixed(1) }}</span>
+				</label>
+				<label class="demo-slider">
+					线路跟随缩放
+					<input v-model.number="lineZoomScale" type="range" min="0" max="1" step="0.1" />
+					<span>{{ lineZoomScale.toFixed(1) }}</span>
+				</label>
+				<label class="demo-slider">
+					适应节点间距
+					<input v-model="fitSpacing" type="checkbox" />
+					<span>{{ fitSpacing ? '开' : '关' }}</span>
+				</label>
+				<label class="demo-slider">
+					最小中心距
+					<input v-model.number="fitSpacingMinDistance" type="number" min="1" step="1" :disabled="!fitSpacing" />
+					<span>px</span>
+				</label>
+				<label class="demo-slider">
+					最大放大
+					<input v-model.number="fitSpacingMaxZoom" type="number" min="0" step="1" :disabled="!fitSpacing" />
+					<span>{{ fitSpacingMaxZoom > 0 ? `×${fitSpacingMaxZoom}` : '不限' }}</span>
+				</label>
+				<button type="button" @click="applyZoomBase()">以当前比例为基准</button>
+				<span class="demo-control-hint">放大与跟随缩放是两个系数：滚轮缩放时再乘一次联动系数（基准为首次适应视图的比例）；「适应节点间距」打开后，首次适应与 fitView 会按最近可见节点中心距反推比例，远处孤立点允许落到视口外{{ zoomBaseReadout ? ` · ${zoomBaseReadout}` : '' }}</span>
+			</div>
+
+				</div>
+
+				<div v-show="activePanel === 'style-rules'" class="demo-panel-body">
+			<div class="demo-controls">
+				<label><input v-model="applyRules" type="checkbox" /> 按电压等级配色 / 定大小</label>
+				<label><input v-model="symbolByStationType" type="checkbox" :disabled="!applyRules" /> 按站点类型换符号</label>
+				<label>
+					图标类型
+					<select v-model="symbolIconMode" :disabled="!applyRules || !symbolByStationType">
+						<option value="svg">test.js 路径（SVG）</option>
+						<option value="square">方块</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					图标描边
+					<input v-model.number="symbolStrokeWidth" type="number" min="0" max="6" step="0.5" :disabled="!applyRules || !symbolByStationType || symbolIconMode !== 'svg'" />
+				</label>
+				<label><input v-model="pointLayering" type="checkbox" :disabled="!applyRules" /> 按电压分层（高电压在上）</label>
+				<label><input v-model="lineLayering" type="checkbox" :disabled="!applyRules" /> 线路按电压分层（高电压线路在上）</label>
+				<label><input v-model="perPointSymbol" type="checkbox" /> 逐点符号（节点自己配）</label>
+				<label><input v-model="perPointStyle" type="checkbox" :disabled="datasetMode !== 'synthetic'" /> 逐点样式（金色节点）</label>
+			</div>
+
+			<div class="demo-controls">
+				<strong class="demo-control-group">规则更新</strong>
+				<label class="demo-slider">
+					规则方案
+					<select v-model="rulePreset">
+						<option v-for="preset in RULE_PRESETS" :key="preset.value" :value="preset.value">{{ preset.label }}</option>
+					</select>
+				</label>
+				<button type="button" @click="applyRuleUpdate">更新规则并重渲染</button>
+				<button type="button" @click="syncRuleJson()">用面板配置回填 JSON</button>
+				<span class="demo-control-hint">{{ ruleReadout }}</span>
+			</div>
+			<div class="demo-controls demo-controls--rules">
+				<textarea v-model="ruleJson" rows="9" spellcheck="false"></textarea>
+			</div>
+
+				</div>
+
+				<div v-show="activePanel === 'style-label'" class="demo-panel-body">
+				<div class="demo-controls">
+				<strong class="demo-control-group">节点标签</strong>
+				<label><input v-model="showLabels" type="checkbox" /> 显示</label>
+				<label class="demo-slider">
+					位置
+					<select v-model="labelPosition">
+						<option v-for="position in LABEL_POSITIONS" :key="position" :value="position">{{ position }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					内容
+					<input v-model="labelTemplate" type="text" :disabled="labelHtml" />
+				</label>
+				<label><input v-model="labelHtml" type="checkbox" /> 用 HTML</label>
+				<label class="demo-slider">
+					底色
+					<select v-model="labelBackground">
+						<option value="">默认（白底 88%）</option>
+						<option value="rgba(255, 255, 255, 0.92)">白</option>
+						<option value="rgba(23, 36, 54, 0.82)">深色</option>
+						<option value="rgba(224, 86, 160, 0.16)">淡粉</option>
+						<option value="transparent">透明</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					文字色
+					<select v-model="labelColor">
+						<option value="">默认（#1f3550）</option>
+						<option value="#1b4b7a">深蓝</option>
+						<option value="#ffffff">白</option>
+						<option value="#e056a0">品红</option>
+						<option value="#c62828">红</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					字号
+					<select v-model.number="labelFontSize">
+						<option :value="0">默认（12px）</option>
+						<option :value="11">11px</option>
+						<option :value="14">14px</option>
+						<option :value="16">16px</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					上限
+					<input v-model.lazy.number="labelMaxCount" type="range" min="0" max="120" step="4" />
+					<span>{{ labelMaxCount ? labelMaxCount : '不限' }}</span>
+				</label>
+				<label class="demo-slider">
+					候选
+					<select v-model="labelScanMode">
+						<option value="auto">自动</option>
+						<option :value="256">前 256 个</option>
+						<option :value="0">整屏扫描</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					显示范围
+					<select v-model="labelVoltageScope">
+						<option v-for="scope in LABEL_VOLTAGE_SCOPES" :key="scope.value" :value="scope.value">{{ scope.label }}</option>
+					</select>
+				</label>
+				<label><input v-model="labelAvoidOverlap" type="checkbox" /> 避让</label>
+				<label><input v-model="labelOptimize" type="checkbox" /> 标签优化</label>
+				<label><input v-model="labelHideOnInteract" type="checkbox" /> 交互时动态收起</label>
+				<label><input v-model="labelDraggable" type="checkbox" /> 可拖</label>
+				<label><input v-model="labelEditable" type="checkbox" /> 可编辑</label>
+				<span class="demo-control-hint">标签外观不用写 HTML：上面「底色 / 文字色 / 字号」三项就是 label.style（内联样式增量合并），留空 = 样式表默认（白底 88% / #1f3550 / 12px）；逐条改可以选中标签走「标签编辑」里的 updateLabel。</span>
+				<span class="demo-control-hint">可见节点 {{ visiblePointCount.toLocaleString() }} · {{ labelOptimize ? '标签按优化档（避让 / 限数）' : '标签强制显示（不避让 / 不限数）' }}</span>
+			</div>
+
+			<div class="demo-controls">
+				<strong class="demo-control-group">线路标签</strong>
+				<label><input v-model="showLineLabels" type="checkbox" /> 显示</label>
+				<label class="demo-slider">
+					显示范围
+					<select v-model="lineLabelVoltageScope">
+						<option v-for="scope in LABEL_VOLTAGE_SCOPES" :key="scope.value" :value="scope.value">{{ scope.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					位置
+					<select v-model="lineLabelPosition">
+						<option v-for="position in LINE_LABEL_POSITIONS" :key="position.value" :value="position.value">{{ position.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					内容
+					<input v-model="lineLabelTemplate" type="text" :disabled="lineLabelHtml" />
+				</label>
+				<label><input v-model="lineLabelHtml" type="checkbox" /> 用 HTML</label>
+				<label class="demo-slider">
+					底色
+					<select v-model="lineLabelBackground">
+						<option value="">组件默认（白底 88%）</option>
+						<option value="rgba(23, 36, 54, 0.82)">深色胶囊（演示默认）</option>
+						<option value="rgba(21, 101, 192, 0.82)">蓝</option>
+						<option value="rgba(255, 255, 255, 0.92)">白</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					文字色
+					<select v-model="lineLabelColor">
+						<option value="">组件默认（#1f3550）</option>
+						<option value="#f3f7fc">浅色（演示默认）</option>
+						<option value="#ffffff">白</option>
+						<option value="#ffe08a">金黄</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					字号
+					<select v-model.number="lineLabelFontSize">
+						<option :value="0">组件默认（12px）</option>
+						<option :value="11">11px（演示默认）</option>
+						<option :value="12">12px</option>
+						<option :value="14">14px</option>
+					</select>
+				</label>
+				<label><input v-model="lineLabelParallel" type="checkbox" /> 与线路平行</label>
+				<label><input v-model="channelMemberLabels" type="checkbox" /> 通道回线各自显示</label>
+				<label class="demo-slider">
+					上限
+					<input v-model.lazy.number="lineLabelMaxCount" type="range" min="0" max="120" step="4" />
+					<span>{{ lineLabelMaxCount ? lineLabelMaxCount : '不限' }}</span>
+				</label>
+				<label class="demo-slider">
+					候选
+					<select v-model="lineLabelScanMode">
+						<option value="auto">自动</option>
+						<option :value="256">前 256 个</option>
+						<option :value="0">整屏扫描</option>
+					</select>
+				</label>
+				<label><input v-model="lineLabelAvoidOverlap" type="checkbox" /> 避让</label>
+				<label><input v-model="lineLabelHideOnInteract" type="checkbox" /> 交互时动态收起</label>
+				<label><input v-model="lineLabelFollowOnInteract" type="checkbox" /> 交互期跟随线路</label>
+				<label><input v-model="lineLabelDraggable" type="checkbox" /> 可拖</label>
+				<label><input v-model="lineLabelEditable" type="checkbox" /> 可编辑</label>
+				<span class="demo-control-hint">线路标签的底色 / 文字色 / 字号同样走 lineLabel.style（上面三个下拉），留空项回到样式表默认；逐条覆盖用 updateLabel('line', id, { style })。</span>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">默认显示在线路中间的名字（position 0.5）；一条线自己写了 lineLabel / lineLabelPosition / lineLabelOffset 时优先用它的，「通道回线各自显示」就是给通道里每条回线各写一个错开的 lineLabelPosition —— 这类线路不占扫描名额、也不参与屏幕小格去重，所以并行回线能各显示各的标签（标签较多时建议保留「避让」，重叠的自动不画；线路密的时候先点「放大」到通道看得清，标签才铺得开）。勾上「与线路平行」标签按锚点处的线路方向旋转，朝左的方向自动翻半圈，文字始终正着读（避让按标签未旋转时的尺寸算，转过的标签不会因为外接矩形变大被整片丢掉）。</span></details>
+			</div>
+
+			<div class="demo-controls">
+				<strong class="demo-control-group">悬浮提示</strong>
+				<label><input v-model="showTooltip" type="checkbox" /> 开启</label>
+				<label><input v-model="tooltipHtml" type="checkbox" /> 用 HTML</label>
+				<label class="demo-slider">
+					通道回线看
+					<select v-model="tooltipChannelScope" title="通道里的回线悬停时看哪一层的信息">
+						<option value="channel">整条通道</option>
+						<option value="group">所属分组</option>
+						<option value="line">这条回线</option>
+					</select>
+				</label>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">通道里的回线悬停时默认看整条通道（{name} 是通道名、{circuits} 是回数）；切到「所属分组」看这一组（{id} / {lineCount} / {waypointCount}，分组没有的字段回落到通道）、切到「这条回线」只看这条线自己（{name} / {vn_kv} / {channel_id}）。</span></details>
+			</div>
+
+			<div class="demo-controls">
+				<strong class="demo-control-group">标签拖动与编辑</strong>
+				<span class="demo-control-hint">点一下标签选中它（上面勾上「可编辑」），按住拖动就把它挪到别处；挪出来的偏移记在组件里，之后再移动节点标签会在偏移的基础上跟着走</span>
+			</div>
+			<div class="demo-controls">
+				<label class="demo-slider">
+					内容
+					<input v-model="labelEditContent" type="text" placeholder="留空 = 不改" />
+				</label>
+				<label class="demo-slider">
+					字号
+					<input v-model="labelEditFontSize" type="text" placeholder="12px" />
+				</label>
+				<label class="demo-slider">
+					颜色
+					<input v-model="labelEditColor" type="text" placeholder="#1b4b7a" />
+				</label>
+				<button type="button" @click="applyLabelEdit()">应用</button>
+				<button type="button" @click="resetLabelEdit()">恢复这一条的默认</button>
+				<button type="button" @click="resetAllLabels()">全部恢复默认</button>
+				<span class="demo-control-hint">{{ labelEditReadout }}</span>
+			</div>
+			<div class="demo-controls">
+				<label class="demo-slider">
+					标签 id
+					<input v-model="labelEditId" type="text" placeholder="default" />
+				</label>
+				<button type="button" @click="addLabelHere()">加一条标签</button>
+				<button type="button" @click="removeLabelHere()">删这一条</button>
+				<label class="demo-slider">
+					新增位置
+					<select v-model="newLabelPosition" title="addLabel 的 position：节点标签是八向（上 / 下 / 左 / 右…），线路标签是沿线位置（0 ~ 1）">
+						<option v-for="position in newLabelPositions" :key="String(position.value)" :value="position.value">{{ position.label }}</option>
+					</select>
+				</label>
+				<span class="demo-control-hint">{{ labelListReadout }}</span>
+			</div>
+			<div class="demo-controls">
+				<button v-for="row in labelRows" :key="row.id" type="button" @click="pickLabelRow(row)">{{ row.id }}{{ row.added ? ' · 运行时' : '' }}{{ row.hidden ? ' · 隐藏' : '' }}</button>
+				<span class="demo-control-hint">点一条切换编辑目标：同一个要素上可以有好几条标签</span>
+			</div>
+			<div class="demo-controls">
+				<button type="button" @click="seedInitialLabels()">初始标签：给前 3 个节点写 4 条 labels</button>
+				<span class="demo-control-hint">标签也可以一开始就在：数据里写 labels（位置 / 样式 / 偏移各写各的），一条 label 配置都不写也画得出来；这几条照样能点、能拖、能改</span>
+			</div>
+			<div class="demo-controls">
+				<button type="button" @click="roundTripLabels()">导出 labels 再写回（回显）</button>
+				<button type="button" @click="saveLabelStates()">保存标签状态</button>
+				<button type="button" @click="restoreLabelStates()">灌回保存的状态</button>
+				<span class="demo-control-hint">{{ labelRoundTripReadout }}</span>
+			</div>
+			<div class="demo-controls">
+				<span class="demo-control-hint">{{ labelStateReadout }}</span>
+				<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">拖动与编辑是两个开关（节点标签、线路标签各自一份）：关着时标签照旧 pointer-events: none，一点都不挡画布；开着时标签自己接住指针，拖动不会把画布一起拖走。「可编辑」点一下发 labelClick 把这一条交给面板，改什么由使用方调 updateLabel 落下去（内容 / 字号 / 颜色只是几个例子，style 是内联样式的增量合并，写什么进去就加什么）；「恢复默认」一次清掉这一条的偏移与全部覆盖，getLabelStates() 随时能拿到当前记着的那些条 —— 要做持久化就存它。偏移与内容都是按 id 记的（没写 id 才按下标），换数据之后同 id 的标签仍然带着自己那一份。</span></details>
+			</div>
+
+				</div>
+
+				<div v-show="activePanel === 'style-effect'" class="demo-panel-body">
+				<div class="demo-controls">
+					<label class="demo-slider"><input v-model="effectLineOn" type="checkbox" @change="applyEffects" />线路动点</label>
+					<label class="demo-slider"><input v-model="effectPointOn" type="checkbox" @change="applyEffects" />节点涟漪</label>
+					<button type="button" @click="applyEffects">下发全局配置（updateOptions）</button>
+					<span class="demo-control-hint">动画效果：{{ effectText }}</span>
+				</div>
+				<div class="demo-controls">
+					<label class="demo-slider">图标<select v-model="effectSymbol" @change="applyEffects"><option v-for="item in EFFECT_SYMBOL_OPTIONS" :key="item.value" :value="item.value">{{ item.label }}</option></select></label>
+					<label class="demo-slider">同时几个<input v-model.number="effectLineCount" type="number" min="1" max="8" @change="applyEffects" /></label>
+					<label class="demo-slider">一趟几秒<input v-model.number="effectPeriod" type="number" min="0.5" max="10" step="0.5" @change="applyEffects" /></label>
+				</div>
+				<div class="demo-controls">
+					<label class="demo-slider">涟漪半径<input v-model.number="effectRingRadius" type="number" min="8" max="80" step="2" @change="applyEffects" /></label>
+					<label class="demo-slider">同时几圈<input v-model.number="effectRingCount" type="number" min="1" max="4" @change="applyEffects" /></label>
+					<span class="demo-control-hint">半径 / 线宽都是 CSS 像素，缩放时不跟着变大；动点带描边与阴影，样式与节点的「符号」同一套</span>
+				</div>
+				<div class="demo-controls">
+					<button type="button" @click="perItemFancy">逐条覆盖：黄色 3 个（1.5 秒一趟）</button>
+					<button type="button" @click="perItemFollow">逐条覆盖：交回全局（effect: true）</button>
+					<button type="button" @click="perItemOff">逐条覆盖：这几条关掉（effect: false）</button>
+				</div>
+				<div class="demo-controls">
+					<button type="button" @click="applyPrebakeExact" title="getSymbolCombos 收出这份数据真正会画到的组合，再按 prebake.combos 逐条烤：不重不漏的一份（真实数据实测 26 条 vs 规则表全排列 1741 条）">按实际组合配一份（精确）</button>
+					<button type="button" @click="applyPrebake" title="按规则表做全排列（符号 × 点色 × 尺寸 + 线色 × 图标）：省事，但颜色与尺寸由同一字段决定时会烤出大量用不到的组合">按规则表全排列配一份（粗）</button>
+					<button type="button" @click="runPrebakeNow">再烤一遍（runPrebake）</button>
+					<button type="button" @click="clearPrebake">关掉预热</button>
+					<span class="demo-control-hint">预热（prebake）：{{ prebakeText }}</span>
+				</div>
+				<div class="demo-controls">
+					<details class="demo-hint-more"><summary>说明</summary><span class="demo-control-hint">效果分两层：全局缺省（<code>updateOptions({ effects })</code> 或 <code>options.effects</code>）与逐要素（数据里的 <code>points[].effect</code> / <code>lines[].effect</code>）。上面那三个「逐条覆盖」按钮演示的就是逐要素的三种写法：写一份自己的、<code>true</code> 交回全局、<code>false</code> 这几条不动 —— 只在数据里逐条配也会动，全局一个都不配也行。三层「关」是四件事：什么都不配 / <code>effects: false</code> 一处关掉（谁都别动）/ <code>effects.line: false</code> 只关全局那一份 / 逐条 <code>effect: false</code>。线路的图标按弧长跑（拐点上连着走、朝向跟着所在那一段），节点涟漪每帧只改一个 <code>u_time</code>，两者都只铺视口里的、按「画多少」付费；页签切到后台或系统要求减少动态效果时直接停帧（<code>respectReducedMotion</code> 缺省尊重它，想照跑就关掉）。预热不改变画面：它把「会画到的那些贴图」在首帧之前烤好，省掉第一次画到时的解码 + 光栅化，稳态帧与它无关，再烤一遍命中的是缓存。收组合有两种写法：<strong>按实际组合（精确）</strong>走 <code>getSymbolCombos()</code>，把这份数据真正会用到的组合收出来（真实数据实测 <strong>26 条</strong>：照着它配预热零张新画布，逐条命中）；<strong>按规则表全排列（粗）</strong>是笛卡尔积，颜色与尺寸由同一个字段决定时（都跟着电压走那种）会把用不到的组合也烤一遍 —— 同一份数据收出 <strong>1741 条</strong>、多烤 21 倍画布，无头下首帧从 29 ms 掉到 963 ms。<strong>「提前预知」的正确用法是清单要准，不是越多越好。</strong></span></details>
+				</div>
+				</div>
+</template>