gis-view-webgl2 0.1.11 → 0.1.13

package/docs/demos/ChannelDemo.vue

@@ -43,12 +43,17 @@ const simplifyColor = ref('#ff6b35')
 const simplifyWidth = ref(4)
 const simplifyDash = ref('dashed')
 const simplifyText = ref('通道简略：关（reopen 后甲 / 丙通道会各折叠成一条代表线）')
+/** 隐藏回线 / 分组后，剩余回线是保留原槽位还是重新居中；切完立刻重排车道 */
+const channelHiddenLineLayout = ref('preserve')
+const groupVisibilityText = ref('分组显隐：先点「准备两分组」，再试单组 / 批量隐藏与恢复')
+const channelLaneText = ref('车道布局：—')
 /** 待确认的删除请求（'remove' 事件的 pending 载荷）：确认框照着它渲染 */
 const removeRequest = ref(null)
 const removeText = ref('删除：按 Delete 或点上面的按钮，先出载荷、确认之后才动数据')
 const channelsText = ref('—')
 const groupsText = ref('—')
 const visibilityText = ref('隐藏 / 显示：—')
+const channelLineVisibilityText = ref('通道内线路显隐：—')
 const changedText = ref('最近变化：—')
 const exportText = ref('')
 const logLines = ref([])
@@ -317,6 +322,8 @@ const buildOptions = () => ({
 	// 分组拐点拖动：共用骨架 / 只移同组同序号拐点
 	channelWaypointDragMode: channelWaypointDragMode.value,
 	channelSimplify: simplifyOption(),
+	// 隐藏回线 / 分组后：保留原车道槽位，或让剩余可见回线重新居中
+	channelHiddenLineLayout: channelHiddenLineLayout.value,
 	// 删除配置：confirm 缺省（null）表示组件不弹界面、停在待确认 —— 这一页订阅 'remove' 事件自己画确认框
 	remove: { scope: 'lines' },
 	// 交互框里的「加拐点 / 删拐点」动的是分组骨架，要有这一项才不是灰的（Ctrl + 点击加点、双击删点也一起开了）
@@ -376,6 +383,113 @@ const applyChannelSimplify = () => {
 	pushLog(simplifyText.value)
 }
 
+/** 车道读数：隐藏组仍保留成员与偏移，读 getChannels() 就能看出 preserve / center 的差别 */
+const syncGroupVisibilityReadout = () => {
+	const entry = view?.getChannels()?.[0]
+	const channelId = entry?.channelId ?? entry?.id
+	if (channelId === undefined || channelId === null) {
+		channelLaneText.value = '车道布局：—'
+		return
+	}
+	const states = (view?.getChannels() ?? []).filter(state => String(state.channelId) === String(channelId))
+	if (!states.length) {
+		channelLaneText.value = '车道布局：—'
+		return
+	}
+	const dataLines = view?.getData().lines ?? []
+	const spacing = states.find(state => Number(state.spacing) > 0)?.spacing ?? 0
+	const describeState = state => {
+		const lineIds = state.lineIndexes.map(index => dataLines[index]?.id ?? index).join(',')
+		const offsets = state.offsets.map(offset => Number(offset).toFixed(2)).join(',')
+		return `${state.id ?? state.channelId}${state.visible ? '' : '（隐）'}[${lineIds}] → [${offsets}]`
+	}
+	channelLaneText.value = `车道布局：${channelHiddenLineLayout.value} · spacing ${Number(spacing).toFixed(2)} · ${states.map(describeState).join(' · ')}`
+}
+
+/** 准备两分组显隐演示：首通道只有一组时，把末回线拆成独立组；其余情况保持现状 */
+const prepareGroupVisibilityDemo = () => {
+	const current = firstChannelGroups()
+	if (!view || !current) {
+		groupVisibilityText.value = '分组显隐：当前没有可编辑的通道'
+		return
+	}
+	let groups = current.groups
+	let added = false
+	if (groups.length < 2) {
+		const lineIds = groups[0]?.lineIds ?? []
+		if (lineIds.length < 2) {
+			groupVisibilityText.value = `${current.channelId}：至少要有两回线才能拆成两组`
+			return
+		}
+		const result = view.addChannelGroup(current.channelId, [lineIds[lineIds.length - 1]])
+		if (!result.ok) {
+			groupVisibilityText.value = '分组显隐准备失败：' + result.reason
+			pushLog('addChannelGroup 被拒绝：' + result.reason)
+			return
+		}
+		groups = view.getChannelGroups(current.channelId)
+		added = true
+	}
+	groupVisibilityText.value = `${current.channelId}：${groups.map(group => `「${group.id}」${group.lineIds.length} 回`).join('，')}${added ? '；已把末回线拆成独立组' : ''}。单组按钮操作末组，批量按钮一次收起或恢复全部组`
+	pushLog('分组显隐准备：' + groups.map(group => group.id + '（' + group.lineIds.length + ' 回）').join(' / '))
+	syncReadouts()
+}
+
+/**
+ * 分组显隐：all 为 true 走批量引用，否则只隐藏 / 恢复最后一个分组。
+ * 单组隐藏后保留其余分组的车道；批量隐藏全部组时成员一起退场，但分组与拐点声明仍在。
+ */
+const setVisibilityGroups = (visible, all) => {
+	const current = firstChannelGroups()
+	if (!view || !current || current.groups.length < 2) {
+		groupVisibilityText.value = '分组显隐：先点「准备两分组」，再试单组 / 批量隐藏与恢复'
+		return
+	}
+	const targets = all ? current.groups : [current.groups[current.groups.length - 1]]
+	const refs = targets.map(group => ({ channelId: current.channelId, groupId: group.id }))
+	const outcome = visible ? view.showFeatures('group', refs) : view.hideFeatures('group', refs)
+	const targetLabel = all ? '全部组（批量）' : `末组「${targets[0].id}」`
+	groupVisibilityText.value = outcome.ok
+		? `${visible ? '显示' : '隐藏'}${targetLabel}：${outcome.ids.map(String).join('、')}${outcome.skipped.length ? ` · 跳过 ${outcome.skipped.length}` : ''}`
+		: `${visible ? '显示' : '隐藏'}${targetLabel}失败：${outcome.reason}`
+	pushLog(visible ? 'showFeatures(group)' : 'hideFeatures(group)', groupVisibilityText.value)
+	syncReadouts()
+}
+
+const setLastGroupVisible = visible => setVisibilityGroups(visible, false)
+const setAllGroupsVisible = visible => setVisibilityGroups(visible, true)
+
+/**
+ * 通道内单条回线显隐：引用直接给线路 id，通道 / 分组声明完全不动。
+ * 隐藏后成员仍留在 getChannelGroups() 里，只从画面与车道账本退场；preserve / center 仍按 options 决定其余回线的位置。
+ */
+const setFirstChannelLineVisible = (visible) => {
+	const current = firstChannelGroups()
+	if (!view || !current) {
+		channelLineVisibilityText.value = '通道内线路显隐：当前没有可编辑的通道'
+		return
+	}
+	const group = [...current.groups].reverse().find(item => item.lineIds?.length)
+	const lineId = group?.lineIds?.[group.lineIds.length - 1]
+	if (lineId === undefined) {
+		channelLineVisibilityText.value = `${current.channelId}：读不到可隐藏的成员回线`
+		return
+	}
+	const outcome = visible ? view.showFeatures('line', lineId) : view.hideFeatures('line', lineId)
+	channelLineVisibilityText.value = outcome.ok
+		? `${visible ? '显示' : '隐藏'}通道内回线：通道 ${String(current.channelId)} · 分组「${String(group.id)}」· 回线 ${String(lineId)}（线路下标 ${outcome.indexes.join('、')}）`
+		: `${visible ? '显示' : '隐藏'}通道内回线失败：${outcome.reason}`
+	pushLog(visible ? 'showFeatures(line)' : 'hideFeatures(line)', channelLineVisibilityText.value)
+	syncReadouts()
+}
+
+/** 隐藏回线车道：preserve 保留原槽位，center 让剩余可见回线重新居中；只改布局，不动分组 */
+const applyChannelHiddenLineLayout = () => {
+	view?.updateOptions({ channelHiddenLineLayout: channelHiddenLineLayout.value })
+	syncGroupVisibilityReadout()
+	pushLog('隐藏回线车道：' + channelHiddenLineLayout.value)
+}
+
 /**
  * 通道读数：几条通道、各自几回线、每组分了几组。
  * getChannels() 给的是**分组**那一档（一条通道拆成几组就返回几条，按 channelId 归并）；
@@ -401,6 +515,7 @@ const syncReadouts = () => {
 	syncMenu()
 	syncChangedChannels()
 	syncSimplifyReadout()
+	syncGroupVisibilityReadout()
 }
 
 /** 最近变化通道：分组 / 成员 / 拐点 / 端点 / 可见性 / 其余声明字段 */
@@ -1283,24 +1398,51 @@ onBeforeUnmount(() => {
 			</div>
 
 			<div class="dv-group">
-				<h3>隐藏 / 显示与最近变化</h3>
+				<h3>显隐 / 车道布局与最近变化</h3>
 				<div class="dv-row">
 					<button type="button" class="dv-button" data-demo="point-hide" @click="setFirstFeatureVisible('point', false)">隐藏第一个节点</button>
 					<button type="button" class="dv-button dv-button--primary" data-demo="point-show" @click="setFirstFeatureVisible('point', true)">显示第一个节点</button>
 					<button type="button" class="dv-button" data-demo="line-hide" @click="setFirstFeatureVisible('line', false)">隐藏第一条线路</button>
 					<button type="button" class="dv-button dv-button--primary" data-demo="line-show" @click="setFirstFeatureVisible('line', true)">显示第一条线路</button>
 				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="channel-line-hide" @click="setFirstChannelLineVisible(false)">隐藏首通道末回线</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="channel-line-show" @click="setFirstChannelLineVisible(true)">显示首通道末回线</button>
+				</div>
 				<div class="dv-row">
 					<button type="button" class="dv-button" data-demo="channel-hide" @click="setFirstFeatureVisible('channel', false)">隐藏第一条通道</button>
 					<button type="button" class="dv-button dv-button--primary" data-demo="channel-show" @click="setFirstFeatureVisible('channel', true)">显示第一条通道</button>
 					<button type="button" class="dv-button" data-demo="channel-clear-changed" @click="clearChannelChanges">通道对账</button>
 				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="channel-group-prepare" @click="prepareGroupVisibilityDemo">准备两分组</button>
+					<button type="button" class="dv-button" data-demo="channel-group-hide" @click="setLastGroupVisible(false)">隐藏末组</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="channel-group-show" @click="setLastGroupVisible(true)">显示末组</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="channel-group-hide-all" @click="setAllGroupsVisible(false)">批量隐藏全部组</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="channel-group-show-all" @click="setAllGroupsVisible(true)">批量显示全部组</button>
+					<label>隐藏后车道
+						<select v-model="channelHiddenLineLayout" data-demo="channel-hidden-line-layout" @change="applyChannelHiddenLineLayout">
+							<option value="preserve">preserve（保留原槽位）</option>
+							<option value="center">center（剩余回线居中）</option>
+						</select>
+					</label>
+				</div>
 				<p class="dv-readout" data-demo="channel-visibility">{{ visibilityText }}</p>
+				<p class="dv-readout" data-demo="channel-line-visibility">{{ channelLineVisibilityText }}</p>
+				<p class="dv-readout" data-demo="channel-group-visibility">{{ groupVisibilityText }}</p>
+				<p class="dv-readout" data-demo="channel-lane-layout">{{ channelLaneText }}</p>
 				<p class="dv-readout" data-demo="channel-changed">{{ changedText }}</p>
 				<p class="dv-hint">
 					节点 / 线路 / 通道都能用 hideFeatures / showFeatures 收起再恢复，只改 visible，数据本身不删；通道收起时成员回线、分组、拐点与编辑状态都保留；
-					getChangedChannels 会把分组、成员、拐点、端点、可见性与其余字段的变化逐条列出来，
-					clearChangedChannels 把当前声明记成新的对账基准。
+					「隐藏首通道末回线」演示的是通道内部只收一条成员线路：引用直接传 line id，分组与其它回线不动，隐藏后的车道仍受 preserve / center 控制；
+					分组也走同一条接口：「准备两分组」把首通道末回线拆成独立组，单组按钮操作最后一组，批量按钮把全部组引用一次交给接口。
+					getChangedChannels 会把分组、成员、拐点、端点、可见性与其余字段的变化逐条列出来，clearChangedChannels 把当前声明记成新的对账基准。
+				</p>
+				<p class="dv-hint">
+					隐藏回线车道：preserve（缺省）保留整条通道原来的槽位；center 把剩余可见回线压紧并重新居中。
+					先隐藏末组，再切换两项，看下面读数里的 offset 变化 —— 分组、成员与拐点声明始终不变。
 				</p>
 			</div>
 

package/docs/demos/StyleDemo.vue

@@ -1,10 +1,10 @@
 <script setup>
 /**
- * 样式与规则演示：同一份数据，换几套规则看画面怎么变。
+ * 样式与规则演示：同一份数据，换几套规则看画面怎么变，并现场改单个 / 多个要素。
  *
- * 规则就是「条件 + 样式」的数组（`pointRules` / `lineRules`），改完交给 updateOptions 立刻重排；
- * 演示里还对比了两种优先级：规则样式 < 要素自身字段（逐点样式），
- * 以及选中高亮（pointSelectStyle / lineSelectStyle）压在最上面。
+ * 规则就是「条件 + 样式」的数组（`pointRules` / `lineRules`），改完交给 updateOptions 立刻重排；
+ * 普通规则高于 pointStyle / lineStyle、低于要素自身字段（逐点样式），单条规则写 override: true 后压过要素字段；
+ * 悬停 / 选中 / 多选 / 框选 / 级联这些交互样式始终压在最上面，override 规则也盖不住它们写的颜色。
  */
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { createGisView } from '../../src/index.js'
@@ -18,47 +18,89 @@ let view = null
 
 const preset = ref('voltage')
 const pointSize = ref(7)
-const lineWidth = ref(1.6)
-const perPointStyle = ref(false)
+const lineWidth = ref(1.6)
+const perPointStyle = ref(false)
+const ruleOverride = ref(false)
 const highlightOn = ref(true)
+const cascadeOn = ref(true)
+const editPointId = ref(dataset.points[0]?.id ?? '')
+const editLineId = ref(dataset.lines[0]?.id ?? '')
 const applyMs = ref('—')
 const ruleText = ref('—')
 const selectText = ref('未选中：点一下节点或线路看高亮')
+const cascadeText = ref('级联高亮未触发：点一下画布上的节点或线路')
+const editText = ref('单 / 多要素补丁尚未执行')
+const detailText = ref('点「查询详情」读取当前节点、线路与第一条通道')
+
+const pointChoices = dataset.points.slice(0, 12)
+const lineChoices = dataset.lines.slice(0, 12)
+const pointBatchIds = dataset.points.slice(0, 3).map(point => point.id)
+const lineBatchIds = dataset.lines.slice(0, 3).map(line => line.id)
+
+const INTERACTION_STYLES = {
+	pointHoverStyle: { color: '#fb923c', strokeColor: '#7c2d12', strokeWidth: 2, sizeScale: 1.25 },
+	pointSelectStyle: { color: '#ffd166', strokeColor: '#5c3b00', strokeWidth: 2, sizeScale: 1.45 },
+	pointMultiSelectStyle: { color: '#f97316', strokeColor: '#7c2d12', strokeWidth: 2, sizeScale: 1.4 },
+	pointBoxSelectStyle: { color: '#22d3ee', strokeColor: '#155e75', strokeWidth: 2, sizeScale: 1.4 },
+	lineHoverStyle: { color: '#fb923c', width: 4, opacity: 1 },
+	lineSelectStyle: { color: '#ffd166', width: 5, opacity: 1 },
+	lineMultiSelectStyle: { color: '#f97316', width: 5.5, opacity: 1 },
+	waypointSelectStyle: { color: '#ffd166', strokeColor: '#5c3b00', strokeWidth: 2, sizeScale: 1.35 }
+}
+
+const CASCADE_STYLES = {
+	scope: 'both',
+	pointStyle: { color: '#22d3ee', strokeColor: '#155e75', strokeWidth: 2, sizeScale: 1.3 },
+	lineStyle: { color: '#22d3ee', width: 4.5, opacity: 1 }
+}
 
 /**
- * 选中高亮：颜色 / 尺寸 / 描边都是状态样式的字段（`pointSelectStyle` / `lineSelectStyle`），
- * 命中时盖在规则与要素自身字段之上；关掉时写 false 把样式摘掉（只清「选中」这一层，不动规则）。
- * 注意别把这份样式塞给 `defaultHighlight`：那个开关只认布尔值，管的是「没配状态样式时的内置强调环」。
+ * 交互样式按状态拆成几份：悬停 / 单选 / 多选 / 框选 / 级联各有一种颜色。
+ * 这些颜色是 `resolvePointWithBase` / `resolveLineStyleInto` 取值链的第一层，
+ * 即使规则写了 override: true 也压不过它们；关掉高亮时整层传 false，普通规则照旧生效。
  */
-const selectHighlight = () => (highlightOn.value
-	? { color: '#ffd166', sizeScale: 1.5, strokeColor: '#12233a', strokeWidth: 2 }
-	: false)
-
-/** 三套预设：按电压上色 / 按负载上色 / 单色 */
-const buildPointRules = () => {
-	if (preset.value === 'load') {
-		return [
-			{ name: '重载', when: { max_loading_rate: { gte: 1.1 } }, style: { color: '#ff7a45', strokeColor: '#7a2d10', strokeWidth: 2, size: pointSize.value + 3 } },
-			{ name: '正常', when: { max_loading_rate: { gte: 0.7, lt: 1.1 } }, style: { color: '#ffd166', strokeColor: '#6d5a1e', strokeWidth: 1.6, size: pointSize.value } },
-			{ name: '轻载', when: { max_loading_rate: { lt: 0.7 } }, style: { color: '#4fd1a5', strokeColor: '#1d5c46', strokeWidth: 1.6, size: pointSize.value - 1 } }
-		]
-	}
-	if (preset.value === 'mono') {
-		return [{ name: '统一', when: { field: 'id', op: 'exists' }, style: { color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5, size: pointSize.value } }]
-	}
-	return [
-		{ name: '1050 kV', when: { vn_kv: { gte: 1050 } }, style: { color: VOLTAGE_COLORS[1050], strokeColor: '#5c1338', strokeWidth: 2.2, size: pointSize.value + 3, zIndex: 4 } },
-		{ name: '525 kV', when: { vn_kv: { gte: 525, lt: 1050 } }, style: { color: VOLTAGE_COLORS[525], strokeColor: '#2f1b5c', strokeWidth: 2, size: pointSize.value + 1, zIndex: 3 } },
-		{ name: '230 kV', when: { vn_kv: { gte: 230, lt: 525 } }, style: { color: VOLTAGE_COLORS[230], strokeColor: '#123a5c', strokeWidth: 1.6, size: pointSize.value, zIndex: 2 } },
-		{ name: '其它', when: { vn_kv: { lt: 230 } }, style: { color: VOLTAGE_COLORS[15.7], strokeColor: '#12402f', strokeWidth: 1.4, size: pointSize.value - 1, zIndex: 1 } }
-	]
-}
-
-const buildLineRules = () => (preset.value === 'load'
-	? [{ name: '线路重载', when: { max_loading_rate: { gte: 1 } }, style: { color: '#ff9f68', width: lineWidth.value + 1.4 } }]
-	: [])
+const interactionStyles = () => highlightOn.value
+	? { ...INTERACTION_STYLES }
+	: {
+		pointHoverStyle: false,
+		pointSelectStyle: false,
+		pointMultiSelectStyle: false,
+		pointBoxSelectStyle: false,
+		lineHoverStyle: false,
+		lineSelectStyle: false,
+		lineMultiSelectStyle: false,
+		waypointSelectStyle: false
+	}
+
+const cascadeOptions = () => (cascadeOn.value ? { ...CASCADE_STYLES } : false)
 
-/** 逐点样式：数据里自己写了 color / size 的节点直接压过规则（每 6 个一个金节点） */
+/** 三套预设：按电压上色 / 按负载上色 / 单色 */
+const withRuleOverride = rules => (ruleOverride.value ? rules.map(rule => ({ ...rule, override: true })) : rules)
+
+const buildPointRules = () => {
+	if (preset.value === 'load') {
+		return withRuleOverride([
+			{ name: '重载', when: { max_loading_rate: { gte: 1.1 } }, style: { color: '#ff7a45', strokeColor: '#7a2d10', strokeWidth: 2, size: pointSize.value + 3 } },
+			{ name: '正常', when: { max_loading_rate: { gte: 0.7, lt: 1.1 } }, style: { color: '#ffd166', strokeColor: '#6d5a1e', strokeWidth: 1.6, size: pointSize.value } },
+			{ name: '轻载', when: { max_loading_rate: { lt: 0.7 } }, style: { color: '#4fd1a5', strokeColor: '#1d5c46', strokeWidth: 1.6, size: pointSize.value - 1 } }
+		])
+	}
+	if (preset.value === 'mono') {
+		return withRuleOverride([{ name: '统一', when: { field: 'id', op: 'exists' }, style: { color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5, size: pointSize.value } }])
+	}
+	return withRuleOverride([
+		{ name: '1050 kV', when: { vn_kv: { gte: 1050 } }, style: { color: VOLTAGE_COLORS[1050], strokeColor: '#5c1338', strokeWidth: 2.2, size: pointSize.value + 3, zIndex: 4 } },
+		{ name: '525 kV', when: { vn_kv: { gte: 525, lt: 1050 } }, style: { color: VOLTAGE_COLORS[525], strokeColor: '#2f1b5c', strokeWidth: 2, size: pointSize.value + 1, zIndex: 3 } },
+		{ name: '230 kV', when: { vn_kv: { gte: 230, lt: 525 } }, style: { color: VOLTAGE_COLORS[230], strokeColor: '#123a5c', strokeWidth: 1.6, size: pointSize.value, zIndex: 2 } },
+		{ name: '其它', when: { vn_kv: { lt: 230 } }, style: { color: VOLTAGE_COLORS[15.7], strokeColor: '#12402f', strokeWidth: 1.4, size: pointSize.value - 1, zIndex: 1 } }
+	])
+}
+
+const buildLineRules = () => withRuleOverride(preset.value === 'load'
+	? [{ name: '线路重载', when: { max_loading_rate: { gte: 1 } }, style: { color: '#ff9f68', width: lineWidth.value + 1.4 } }]
+	: [])
+
+/** 逐点样式：数据里自己写了 color / size 的节点默认压过普通规则；开启强制覆盖后由规则压回来（每 6 个一个金节点） */
 const pointsWithOwnStyle = () => (perPointStyle.value
 	? dataset.points.map((point, index) => (index % 6 === 0 ? { ...point, color: '#ffd15c', size: 15, selectStyle: { color: '#ff7a45' } } : point))
 	: dataset.points)
@@ -69,11 +111,10 @@ const buildOptions = () => ({
 	channels: dataset.channels,
 	pointStyle: { size: pointSize.value, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
 	lineStyle: { width: lineWidth.value, color: 'rgba(120, 168, 226, 0.5)' },
-	pointRules: buildPointRules(),
-	lineRules: buildLineRules(),
-	pointSelectStyle: selectHighlight(),
-	lineSelectStyle: selectHighlight(),
-	waypointSelectStyle: selectHighlight(),
+	pointRules: buildPointRules(),
+	lineRules: buildLineRules(),
+	...interactionStyles(),
+	cascadeHighlight: cascadeOptions(),
 	showGrid: true,
 	fitPadding: 60,
 	// 功能开关缺省全关：这一页要能平移缩放、能悬停选中看状态样式，显式打开查看类
@@ -81,10 +122,11 @@ const buildOptions = () => ({
 	label: { content: '{vn_kv} kV', position: 'top', gap: 7, maxCount: 30, style: { color: '#27405f', fontSize: '11px' } },
 	// 标签按优化档显示（限数 + 避让），见 docs/GisView.md 的「标签显示优化开关」
 	labelOptimize: true,
-	onReady: () => {
-		emit('notice', `${dataset.points.length} 个节点，规则预设「${preset.value}」`)
-		syncRules()
-	},
+	onReady: () => {
+		emit('notice', `${dataset.points.length} 个节点，规则预设「${preset.value}」`)
+		syncRules()
+		requestAnimationFrame(syncDetail)
+	},
 	/**
 	 * 读数接 onSelectChange 而不是 onSelect：前者对「点选、框选、API selectFeatures()」都会发，
 	 * 后者只代表画布上的那一次点击 —— 用接口选中时读数也不会停在「未选中」。
@@ -92,14 +134,19 @@ const buildOptions = () => ({
 	 */
 	onSelectChange: (info) => {
 		selectText.value = info?.count
-			? `选中 ${info.count} 个（点 ${info.points} / 线 ${info.lines} / 通道 ${info.channels}）：高亮样式在 pointSelectStyle / lineSelectStyle 上`
-			: '未选中：点一下节点或线路看高亮'
+			? `选中 ${info.count} 个（点 ${info.points} / 线 ${info.lines} / 通道 ${info.channels}）：多选与框选会换成各自的状态色`
+			: '未选中：点一下节点或线路看高亮；Ctrl 点击多选、Shift 拖动框选'
+	},
+	onCascadeHighlight: (payload) => {
+		cascadeText.value = payload
+			? `级联：起点 ${payload.origin?.item?.id ?? payload.origin?.channelId ?? '—'}，邻接点 ${payload.points.length} 个 / 线 ${payload.lines.length} 条`
+			: '级联高亮未触发：点一下画布上的节点或线路'
 	}
 })
 
-const syncRules = () => {
-	ruleText.value = `节点规则 ${buildPointRules().length} 条 · 线路规则 ${buildLineRules().length} 条`
-}
+const syncRules = () => {
+	ruleText.value = `节点规则 ${buildPointRules().length} 条 · 线路规则 ${buildLineRules().length} 条${ruleOverride.value ? ' · 全部 override: true' : ''}`
+}
 
 /**
  * 改规则 / 尺寸 / 高亮：只发样式类配置（不重发 points / lines），
@@ -112,9 +159,8 @@ const applyRules = () => {
 		lineRules: buildLineRules(),
 		pointStyle: { size: pointSize.value, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
 		lineStyle: { width: lineWidth.value, color: 'rgba(120, 168, 226, 0.5)' },
-		pointSelectStyle: selectHighlight(),
-		lineSelectStyle: selectHighlight(),
-		waypointSelectStyle: selectHighlight()
+		...interactionStyles(),
+		cascadeHighlight: cascadeOptions()
 	})
 	syncRules()
 	applyMs.value = `${(performance.now() - started).toFixed(1)} ms`
@@ -125,6 +171,120 @@ const applyPerPointStyle = () => {
 	view?.updateOptions({ points: pointsWithOwnStyle() })
 	syncRules()
 }
+
+let pointEditStep = 0
+let lineEditStep = 0
+const POINT_EDIT_COLORS = ['#f97316', '#22c55e', '#e11d48', '#0ea5e9']
+const LINE_EDIT_COLORS = ['#ec4899', '#14b8a6', '#eab308', '#8b5cf6']
+
+/** 单个节点：按字段合并，颜色 / 尺寸 / 图标 / 描边都能现场改 */
+const updateSinglePoint = () => {
+	const color = POINT_EDIT_COLORS[pointEditStep % POINT_EDIT_COLORS.length]
+	pointEditStep += 1
+	view?.updatePoint(editPointId.value, {
+		color,
+		size: 18,
+		strokeColor: '#17233d',
+		strokeWidth: 3,
+		symbol: { type: 'square', radius: 3 }
+	})
+	editText.value = `updatePoint(${editPointId.value})：color=${color}，size=18，symbol=square`
+	syncDetail()
+}
+
+/** 一批节点：同一份补丁一次写完，patchPoints 返回 indexes / count / skipped */
+const patchPointBatch = () => {
+	const result = view?.patchPoints(pointBatchIds, {
+		color: '#22c55e',
+		size: 15,
+		strokeColor: '#14532d',
+		strokeWidth: 2
+	})
+	editText.value = `patchPoints(${pointBatchIds.join(', ')})：${result?.count ?? 0} 个，颜色 #22c55e`
+	syncDetail()
+}
+
+/** 单条线路：颜色、线宽、透明度与线型都能逐条改 */
+const updateSingleLine = () => {
+	const color = LINE_EDIT_COLORS[lineEditStep % LINE_EDIT_COLORS.length]
+	lineEditStep += 1
+	view?.updateLine(editLineId.value, { color, width: 4, opacity: 0.95, lineType: 'dashed' })
+	editText.value = `updateLine(${editLineId.value})：color=${color}，width=4，lineType=dashed`
+	syncDetail()
+}
+
+/** 一批线路：entries 也支持 `{ id, ...字段 }` 逐条给不同补丁 */
+const patchLineBatch = () => {
+	const result = view?.patchLines(lineBatchIds, {
+		color: '#14b8a6',
+		width: 2.8,
+		opacity: 0.9,
+		lineType: 'dotted'
+	})
+	editText.value = `patchLines(${lineBatchIds.join(', ')})：${result?.count ?? 0} 条，颜色 #14b8a6`
+	syncDetail()
+}
+
+/** 清掉单条 / 批量补丁，回到原始数据；规则、通道与相机保持不变 */
+const resetElementStyles = () => {
+	view?.updateData({ points: pointsWithOwnStyle(), lines: dataset.lines, channels: dataset.channels })
+	view?.selectFeatures(null)
+	editText.value = '已恢复原始节点 / 线路数据（规则与交互样式仍在）'
+	syncDetail()
+}
+
+const selectSinglePoint = () => view?.selectFeatures(editPointId.value)
+const selectMultiplePoints = () => view?.selectFeatures(dataset.points.slice(0, 2).map(point => point.id))
+const selectSingleLine = () => view?.selectFeatures({ type: 'line', id: editLineId.value })
+const selectMultipleLines = () => view?.selectFeatures(dataset.lines.slice(0, 2).map(line => line.id))
+
+/** 程序化框选相邻节点：与 Shift 拖动走同一个 selectInBox，直接命中项用 boxSelectStyle */
+const selectPointsInBox = () => {
+	const screens = dataset.points.slice(0, 3).map(point => view?.project(point.x, point.y)).filter(Boolean)
+	if (!screens.length) {
+		return
+	}
+	const margin = 28
+	const xs = screens.map(screen => screen[0])
+	const ys = screens.map(screen => screen[1])
+	const minX = Math.min(...xs) - margin
+	const minY = Math.min(...ys) - margin
+	view?.selectInBox({
+		x: minX,
+		y: minY,
+		width: Math.max(Math.max(...xs) + margin - minX, 2),
+		height: Math.max(Math.max(...ys) + margin - minY, 2)
+	}, { selectionKinds: ['point'] })
+}
+
+const clearSelection = () => view?.selectFeatures(null)
+
+const screenText = screen => (Array.isArray(screen) ? `${screen[0].toFixed(1)}, ${screen[1].toFixed(1)}` : '—')
+
+/**
+ * 详情查询分两层：getPoint / getLine / getChannel 查单个，listPoints / listLines / getChannels 查一批。
+ * 这里只用节点、线路与通道；分组详情不在这份演示里。
+ */
+const syncDetail = () => {
+	if (!view) {
+		return
+	}
+	const point = view.getPoint(editPointId.value)
+	const points = view.listPoints({ indexes: dataset.points.slice(0, 3).map((_point, index) => index), withScreen: true, visibleOnly: false, limit: 3 })
+	const line = view.getLine(editLineId.value)
+	const lines = view.listLines({ indexes: dataset.lines.slice(0, 3).map((_line, index) => index), withScreen: true, visibleOnly: false, limit: 3 })
+	const channelId = dataset.channels[0]?.id
+	const channel = channelId === undefined || channelId === null ? null : view.getChannel(channelId)
+	const channelCount = view.getChannels().length
+	detailText.value = [
+		`节点单查：${point ? `${point.item.id} · index ${point.index} · screen ${screenText(point.screen)} · radius ${point.radius.toFixed(1)}` : 'null'}`,
+		`节点批量：${points.length} 条 · ${points.map(entry => entry.item.id).join(', ')}`,
+		`线路单查：${line ? `${line.item.id} · ${line.path.length} 个折点 · width ${line.width.toFixed(1)}` : 'null'}`,
+		`线路批量：${lines.length} 条 · ${lines.map(entry => entry.item.id).join(', ')}`,
+		`通道单查：${channel ? `${channel.item.id} · ${channel.lineIndexes.length} 条回线 · ${channel.skeleton.length} 个骨架点` : 'null'}`,
+		`通道全量：getChannels() ${channelCount} 条`
+	].join('；')
+}
 
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
@@ -161,24 +321,75 @@ onBeforeUnmount(() => {
 				<div class="dv-row">
 					<label><input v-model="perPointStyle" type="checkbox" @change="applyPerPointStyle" /> 逐点样式（数据里自己写 color / size）</label>
 				</div>
-				<div class="dv-row">
-					<label><input v-model="highlightOn" type="checkbox" @change="applyRules" /> 选中高亮</label>
-				</div>
+				<div class="dv-row">
+					<label><input v-model="highlightOn" type="checkbox" @change="applyRules" /> 悬停 / 选中 / 多选 / 框选</label>
+					<label><input v-model="cascadeOn" data-demo="style-cascade" type="checkbox" @change="applyRules" /> 级联高亮</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="ruleOverride" data-demo="style-rule-override" type="checkbox" @change="applyRules" /> 规则强制覆盖（override: true）</label>
+				</div>
 				<p class="dv-readout">{{ ruleText }}</p>
 				<p class="dv-readout">最近一次重排：{{ applyMs }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>单个 / 多个要素样式</h3>
+				<div class="dv-row">
+					<label>节点
+						<select v-model="editPointId" data-demo="style-point-target">
+							<option v-for="point in pointChoices" :key="point.id" :value="point.id">{{ point.id }}</option>
+						</select>
+					</label>
+					<button type="button" class="dv-button dv-button--primary" data-demo="style-update-point" @click="updateSinglePoint">updatePoint</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="style-patch-points" @click="patchPointBatch">patchPoints（前 3 个）</button>
+				</div>
+				<div class="dv-row">
+					<label>线路
+						<select v-model="editLineId" data-demo="style-line-target">
+							<option v-for="line in lineChoices" :key="line.id" :value="line.id">{{ line.id }}</option>
+						</select>
+					</label>
+					<button type="button" class="dv-button dv-button--primary" data-demo="style-update-line" @click="updateSingleLine">updateLine</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="style-patch-lines" @click="patchLineBatch">patchLines（前 3 条）</button>
+					<button type="button" class="dv-button dv-button--danger" data-demo="style-reset" @click="resetElementStyles">恢复原始数据</button>
+				</div>
+				<p class="dv-readout" data-demo="style-edit-readout">{{ editText }}</p>
+				<p class="dv-hint">单条走 updatePoint / updateLine，批量走 patchPoints / patchLines；普通规则只补空位，override 规则会压过这里写进去的字段，但压不过下面这些交互状态。</p>
+			</div>
+			<div class="dv-group">
+				<h3>交互样式优先级</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="style-select-single" @click="selectSinglePoint">单选节点</button>
+					<button type="button" class="dv-button" data-demo="style-select-multi" @click="selectMultiplePoints">多选节点</button>
+					<button type="button" class="dv-button" data-demo="style-select-box" @click="selectPointsInBox">框选节点</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="style-select-line" @click="selectSingleLine">单选线路</button>
+					<button type="button" class="dv-button" data-demo="style-select-lines" @click="selectMultipleLines">多选线路</button>
+					<button type="button" class="dv-button" data-demo="style-clear-selection" @click="clearSelection">清除选中</button>
+				</div>
 				<p class="dv-readout">{{ selectText }}</p>
-			</div>
-			<div class="dv-group">
-				<h3>优先级</h3>
-				<p class="dv-hint">
-					规则命中之后，要素自己写的字段（逐点样式）压过规则；选中的高亮又压在两者之上。
-					勾上「逐点样式」看每 6 个一个金节点，点一下它看高亮。
-				</p>
-			</div>
-			<div class="dv-group">
-				<h3>试一下</h3>
-				<p class="dv-hint">先把预设切到「按电压上色」再切「按负载率」，同一份数据两种读法；调尺寸 / 线宽只改样式，不动数据与相机。</p>
-			</div>
+				<p class="dv-readout">{{ cascadeText }}</p>
+				<p class="dv-hint">
+					状态颜色始终是第一条取值链：黄 = 单选、橙 = 多选、青 = 框选、青色级联；即使勾上 override 规则也会被这些颜色盖住。
+					直接点击画布上的节点 / 线路可看悬停与级联，Ctrl 点击看多选，Shift 拖动看框选。
+				</p>
+			</div>
+			<div class="dv-group">
+				<h3>详情查询</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="style-query" @click="syncDetail">查询详情</button>
+				</div>
+				<p class="dv-readout" data-demo="style-detail-readout">{{ detailText }}</p>
+				<p class="dv-hint">单条用 getPoint / getLine / getChannel；多条用 listPoints / listLines；全部通道用 getChannels。单条查不到返回 null，批量查询返回数组。</p>
+			</div>
+			<div class="dv-group">
+				<h3>试一下</h3>
+				<p class="dv-hint">先把预设切到「按电压上色」再切「按负载率」，同一份数据两种读法；同时勾「逐点样式」与「规则强制覆盖」，对比同一批金节点在两种优先级下的颜色 / 尺寸；再选一个节点或线路点 updatePoint / updateLine，最后直接点画布看交互色仍然最高。</p>
+			</div>
 		</aside>
 	</section>
 </template>