gis-view-webgl2 0.1.6 → 0.1.8

package/docs/demos/ConnectDemo.vue

@@ -3,9 +3,11 @@
  * 可视化连线：只靠 points + lines 也能独立成图，再把「新增一条线」的几种常见配置摆在一起。
  *
  * 这一页的初始数据明确是 channels: [] —— 没有任何通道，节点与线路照样能渲染、选中与新增。
- * 「开始连线」走 beginAddChannel（kind 为 line 或 channel），两个节点选完先出草稿：
+ * 「开始连线」按类型分流：独立线路走 beginAddLine，通道走 beginAddChannel，两个节点选完先出草稿：
  * - routing: 'orthogonal' 让预览自动补一个先横后纵的 90° 拐点；
- * - channelDraftStyle 直接交给 beginAddChannel，草稿期间用 updateAddChannelStyle 原地改箭头位置 / 间距 / 配色；
+ * - channelDraftStyle 直接交给 beginAddLine / beginAddChannel，草稿期间用 updateAddChannelStyle 原地改箭头位置 / 间距 / 配色；
+ * - 预置一条已有通道（两组）后，可演示 singleChannel 阻断、existingChannel 新分组或并入指定分组；
+ * - beginAddLine 显式写 existingChannel 时会把新回线挂进已有通道，不写则始终是独立线路；
  * - 取消只收草稿，数据一个字节不动；
  * - 选好起点后点节点以外的位置也会直接取消，事件里的 reason 是 click-outside-node；
  * - 默认添加走 commitAddChannel；
@@ -29,6 +31,10 @@ const arrowSize = ref(12)
 const arrowPositionsText = ref('0.5')
 const circuitSpacing = ref(12)
 const startPointId = ref('')
+const singleChannel = ref(true)
+const existingChannelPolicy = ref('none')
+const groupTarget = ref('')
+const existingGroups = ref([])
 const dotsVisible = ref(true)
 const dotSize = ref(5)
 const startDotColor = ref('#2f6fd0')
@@ -38,6 +44,7 @@ const draftLayer = ref('above')
 const draft = ref(null)
 const actionText = ref('配置好线条之后点「开始连线」，依次点两个节点')
 const dataText = ref('正在创建视图…')
+const eventText = ref('channelDraft：尚未触发')
 const cancelText = ref('尚未取消：选好起点后点一下节点以外的空白处，应收到 reason = click-outside-node')
 const logLines = ref([])
 const logText = computed(() => logLines.value.length
@@ -78,6 +85,15 @@ const createInitialLines = () => {
 
 const isChannel = computed(() => linkKind.value !== 'line')
 const circuits = computed(() => linkKind.value === 'channel-3' ? 3 : linkKind.value === 'channel-2' ? 2 : 1)
+const addMethod = computed(() => isChannel.value ? 'beginAddChannel' : 'beginAddLine')
+const groupLineCount = group => Number(group?.lineCount ?? group?.lineIndexes?.length ?? group?.lineIds?.length ?? 0)
+const groupOptions = computed(() => existingGroups.value.map((group, index) => ({
+	value: String(group.id),
+	label: `第 ${index + 1} 组 · ${String(group.id)} · ${groupLineCount(group)} 回`
+})))
+const existingText = computed(() => existingGroups.value.length
+	? `已有通道 connect-existing-channel：${existingGroups.value.map((group, index) => `第 ${index + 1} 组 ${groupLineCount(group)} 回`).join(' / ')}`
+	: '已有通道：未预置（先点上方按钮创建一条两组的通道）')
 const arrowPositions = computed(() => arrowPositionsText.value.split(',').map(value => Number(value.trim())).filter(value => Number.isFinite(value)))
 const startPointLabel = computed(() => {
 	const point = points.find(item => String(item.id) === String(startPointId.value))
@@ -100,7 +116,12 @@ const draftText = computed(() => {
 	}
 	const to = current.to.item?.name ?? current.to.id
 	const bends = current.path?.length ?? 0
-	return `${kind} · ${from} → ${to} · ${current.routing === 'orthogonal' ? '正交折线' : '直线'} · 中间拐点 ${bends} · 箭头 ${current.style?.arrow ? current.style.arrowPositions.map(value => `${Math.round(value * 100)}%`).join('/') : '关'} · 回线间距 ${current.style?.circuitSpacing ?? 0}px`
+	const policy = current.existingChannel
+		? ` · existingChannel=${current.existingChannel}${current.targetGroupId !== null ? ` → ${String(current.targetGroupId)}` : ''}`
+		: ''
+	const single = current.singleChannel ? ' · singleChannel' : ''
+	const blocked = current.blocked ? ` · 已阻断：${current.reason ?? '未知原因'}` : ''
+	return `${kind}${single}${policy} · ${from} → ${to} · ${current.routing === 'orthogonal' ? '正交折线' : '直线'} · 中间拐点 ${bends} · 箭头 ${current.style?.arrow ? current.style.arrowPositions.map(value => `${Math.round(value * 100)}%`).join('/') : '关'} · 回线间距 ${current.style?.circuitSpacing ?? 0}px${blocked}`
 })
 
 const pushLog = (name, text) => {
@@ -143,24 +164,91 @@ const currentLineProps = () => ({
 	direction: arrow.value ? { count: 1, size: arrowSize.value } : false
 })
 
+/** 读取预置通道的分组，供 joinGroup 下拉直接选择；预置前后 / 草稿 ready 时都刷新一次 */
+const refreshExistingGroups = () => {
+	if (!view) {
+		return
+	}
+	const between = view.getChannelBetween('node-0', 'node-1')
+	existingGroups.value = between?.hasChannel ? [...(between.groups ?? [])] : []
+	if (!existingGroups.value.some(group => String(group.id) === String(groupTarget.value))) {
+		groupTarget.value = existingGroups.value[0]?.id ?? ''
+	}
+}
+
+/** 预置一条 node-0 ↔ node-1 的通道，带两个分组，专门演示单一通道和指定分组 */
+const seedExistingChannel = () => {
+	if (!view) {
+		return
+	}
+	view.endAddChannel()
+	draft.value = null
+	const between = view.getChannelBetween('node-0', 'node-1')
+	if (between?.hasChannel) {
+		refreshExistingGroups()
+		actionText.value = `已有通道 ${String(between.channelId)} 已存在，共 ${existingGroups.value.length} 组；可以直接开始连线`
+		pushLog('seed-existing', actionText.value)
+		return
+	}
+	const lineA = 'connect-existing-line-a'
+	const lineB = 'connect-existing-line-b'
+	const result = view.addChannel({
+		id: 'connect-existing-channel',
+		name: '演示已有通道（两组）',
+		from: 'node-0',
+		to: 'node-1'
+	}, [
+		{ id: lineA, name: '已有通道 · A 组回线', color: '#2f6fd0', width: 2.2 },
+		{ id: lineB, name: '已有通道 · B 组回线', color: '#d9544d', width: 2.2 }
+	], [
+		{ id: 'connect-existing-group-a', name: 'A 组', lineIds: [lineA] },
+		{ id: 'connect-existing-group-b', name: 'B 组', lineIds: [lineB] }
+	], { select: true })
+	refreshExistingGroups()
+	refreshState()
+	if (!result.ok) {
+		actionText.value = `预置已有通道失败：${result.reason ?? '未知原因'}`
+	}
+	else {
+		actionText.value = `已预置已有通道 ${String(result.channelId)}：node-0 ↔ node-1，共 ${existingGroups.value.length} 组；现在可用 singleChannel / newGroup / joinGroup 演示`
+	}
+	pushLog('addChannel(预置已有通道)', actionText.value)
+	emit('notice', actionText.value)
+}
+
 const startDraft = () => {
 	if (!view) {
 		return
 	}
 	view.endAddChannel()
-	view.beginAddChannel({
+	const options = {
 		...(startPointId.value ? { from: startPointId.value } : {}),
-		kind: isChannel.value ? 'channel' : 'line',
 		circuits: circuits.value,
 		routing: routing.value,
 		select: true,
 		channelDraftStyle: currentDraftStyle(),
 		lineProps: currentLineProps()
-	})
+	}
+	if (existingChannelPolicy.value !== 'none') {
+		options.existingChannel = existingChannelPolicy.value
+	}
+	if (existingChannelPolicy.value === 'joinGroup' && groupTarget.value !== '') {
+		options.groupId = groupTarget.value
+	}
+	if (isChannel.value) {
+		// beginAddChannel 的单一通道模式：已有通道时按 existingChannel 处理，不写时默认 block
+		options.singleChannel = singleChannel.value
+		view.beginAddChannel(options)
+	}
+	else {
+		// beginAddLine 不认 singleChannel；要挂进已有通道必须显式写 existingChannel
+		view.beginAddLine(options)
+	}
+	const modeText = existingChannelPolicy.value === 'none' ? '未指定已有通道策略' : `existingChannel=${existingChannelPolicy.value}`
 	actionText.value = startPointId.value
-		? `开始连线：起点已指定为 ${startPointLabel.value}，下一次点节点只选终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${routing.value === 'orthogonal' ? '正交折线' : '直线'}）`
-		: `开始连线：先点起点，再点终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${routing.value === 'orthogonal' ? '正交折线' : '直线'}）`
-	pushLog('beginAddChannel', actionText.value)
+		? `${addMethod.value}：起点已指定为 ${startPointLabel.value}，下一次点节点只选终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${modeText}）`
+		: `${addMethod.value}：先点起点，再点终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${modeText}）`
+	pushLog(addMethod.value, actionText.value)
 }
 
 const cancelDraft = () => {
@@ -184,17 +272,15 @@ const commitDraft = () => {
 	if (!view || !canFinish.value) {
 		return
 	}
-	const result = view.commitAddChannel()
+	const result = view.commitAddChannel(undefined, { select: true })
 	refreshState()
 	if (!result.ok) {
-		actionText.value = `commitAddChannel 没有落地：${result.reason ?? '未知原因'}`
+		actionText.value = `commitAddChannel → blocked：${result.reason ?? '未知原因'}`
 	}
 	else {
 		const lines = result.lines?.length ?? (result.line ? 1 : 0)
-		actionText.value = `commitAddChannel → ${result.kind === 'line' ? '独立线路' : '通道'} ${String(result.channelId ?? result.lineId ?? '')} · ${lines} 回线`
-		if (result.lineIds?.length) {
-			view.selectFeatures(result.lineIds)
-		}
+		const group = result.groupId !== undefined && result.groupId !== null ? ` · 分组 ${String(result.groupId)}` : ''
+		actionText.value = `commitAddChannel → ${result.kind === 'line' ? '独立线路' : '通道'} ${String(result.channelId ?? result.lineId ?? '')} · ${lines} 回线${group}`
 	}
 	pushLog('commitAddChannel', actionText.value)
 	emit('notice', actionText.value)
@@ -238,7 +324,7 @@ const commitWithObject = () => {
 			groups: [{ id: channelId, lineIds, ...(middle ? { path: middle } : {}) }]
 		}
 	}
-	const result = view.commitAddChannel(payload)
+	const result = view.commitAddChannel(current.kind === 'line' ? { line: payload } : { channel: payload }, { select: true })
 	refreshState()
 	if (!result.ok) {
 		actionText.value = `commitAddChannel(对象) 没有落地：${result.reason ?? '未知原因'}`
@@ -246,9 +332,6 @@ const commitWithObject = () => {
 	else {
 		const lines = result.lines?.length ?? (result.line ? 1 : 0)
 		actionText.value = `commitAddChannel(对象) → ${result.kind === 'line' ? '线路对象' : '通道对象'} ${String(result.channelId ?? result.lineId ?? '')} · ${lines} 回线`
-		if (result.lineIds?.length) {
-			view.selectFeatures(result.lineIds)
-		}
 	}
 	pushLog('commitAddChannel(对象)', actionText.value)
 	emit('notice', actionText.value)
@@ -303,23 +386,27 @@ const addWithChannels = () => {
 	sequence += 1
 	const middle = middlePathOf(current)
 	const kind = current.kind === 'line' ? 'line' : 'channel'
-	const result = view.addChannels([{
-		id: `connect-${kind}-${sequence}`,
-		name: `${kind === 'line' ? '独立线路' : '可视化通道'} ${sequence}`,
-		from: current.from.id,
-		to: current.to.id,
-		kind,
-		...(kind === 'channel' ? { circuits: current.circuits } : {}),
-		...(middle ? { path: middle } : {}),
-		lineProps: currentLineProps()
-	}])
+	const result = kind === 'line'
+		? view.addLine({
+			id: `connect-line-${sequence}`,
+			name: `独立线路 ${sequence}`,
+			from: current.from.id,
+			to: current.to.id,
+			...(middle ? { path: middle } : {}),
+			lineProps: currentLineProps()
+		}, undefined, { select: true })
+		: view.addChannels([{
+			id: `connect-channel-${sequence}`,
+			name: `可视化通道 ${sequence}`,
+			from: current.from.id,
+			to: current.to.id,
+			...(middle ? { path: middle } : {}),
+			lineData: Array.from({ length: Math.max(Number(current.circuits) || 1, 1) }, () => ({ ...currentLineProps() }))
+		}], { select: true })
 	refreshState()
 	if (result.ok) {
 		view.endAddChannel()
 		draft.value = null
-		if (result.lineIds.length) {
-			view.selectFeatures(result.lineIds)
-		}
 		actionText.value = `addChannels → ${result.count} 条 · ${result.lineIds.length} 回线${result.channelIds.length ? ` · 通道 ${result.channelIds.join(' / ')}` : ' · 未新建通道'}${middle ? ` · path ${middle.length} 拐点` : ''}`
 	}
 	else {
@@ -338,6 +425,11 @@ const resetScene = () => {
 	view.clearHistory()
 	view.fitView(56)
 	draft.value = null
+	existingGroups.value = []
+	groupTarget.value = ''
+	existingChannelPolicy.value = 'none'
+	singleChannel.value = true
+	eventText.value = 'channelDraft：尚未触发'
 	sequence = 0
 	actionText.value = '已恢复为 channels: [] 的纯点 + 线场景'
 	refreshState()
@@ -366,6 +458,15 @@ onMounted(() => {
 		},
 		onChannelDraft: payload => {
 			draft.value = payload
+			const target = payload.targetGroupId !== undefined && payload.targetGroupId !== null ? ` · targetGroup=${String(payload.targetGroupId)}` : ''
+			eventText.value = `channelDraft：phase=${payload.phase} · kind=${payload.kind ?? '—'} · blocked=${payload.blocked === true} · singleChannel=${payload.singleChannel === true} · existingChannel=${payload.existingChannel ?? 'null'}${target}${payload.reason ? ` · reason=${payload.reason}` : ''}`
+			if (payload.phase === 'ready' && payload.hasChannel) {
+				refreshExistingGroups()
+			}
+			if (payload.phase === 'blocked') {
+				actionText.value = `失败事件（phase=blocked）：${payload.reason ?? '当前草稿不允许新增'}`
+				emit('notice', actionText.value)
+			}
 			if (payload.phase === 'cancel') {
 				cancelText.value = `取消：phase = ${payload.phase} · reason = ${payload.reason ?? '未提供'} · 起点 ${payload.from?.item?.name ?? payload.from?.id ?? '—'}`
 				actionText.value = payload.reason === 'click-outside-node'
@@ -438,7 +539,36 @@ onBeforeUnmount(() => {
 					</label>
 					<label>回线间距 <input v-model.number="circuitSpacing" type="range" min="6" max="28" step="1" data-demo="connect-spacing" /> {{ circuitSpacing }}px</label>
 				</div>
-				<p class="dv-hint">草稿样式直接传给 <code>beginAddChannel({ channelDraftStyle })</code>；连线期间改颜色 / 线宽 / 箭头位置 / 回线间距会走 <code>updateAddChannelStyle()</code>，预览立即更新。正交折线会自动补一个 90 度拐点；落地线路用完整 path，通道只写中间拐点。</p>
+				<p class="dv-hint">草稿样式直接传给 <code>beginAddLine</code> / <code>beginAddChannel</code>；连线期间改颜色 / 线宽 / 箭头位置 / 回线间距会走 <code>updateAddChannelStyle()</code>，预览立即更新。正交折线会自动补一个 90 度拐点；落地线路用完整 path，通道只写中间拐点。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>单一通道与已有分组</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="connect-seed-existing" :disabled="isDraftLive" @click="seedExistingChannel">预置已有通道（两组）</button>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="singleChannel" type="checkbox" data-demo="connect-single-channel" :disabled="!isChannel || isDraftLive" /> singleChannel</label>
+					<label>已有通道时
+						<select v-model="existingChannelPolicy" data-demo="connect-existing-mode" :disabled="isDraftLive">
+							<option value="none">不指定（线路默认独立）</option>
+							<option value="auto">auto · 新分组优先</option>
+							<option value="newGroup">newGroup · 新分组</option>
+							<option value="joinGroup">joinGroup · 指定分组</option>
+							<option value="block">block · 直接失败</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label>目标分组
+						<select v-model="groupTarget" data-demo="connect-group-target" :disabled="existingChannelPolicy !== 'joinGroup' || isDraftLive">
+							<option v-if="!groupOptions.length" value="">先预置已有通道</option>
+							<option v-for="group in groupOptions" :key="group.value" :value="group.value">{{ group.label }}</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-readout" data-demo="connect-existing-readout">{{ existingText }}</p>
+				<p class="dv-hint"><code>beginAddChannel({ singleChannel: true })</code> 在两端已有通道时默认阻断；显式 <code>existingChannel</code> 可改为新分组 / 指定分组 / 自动。<code>beginAddLine</code> 不读 singleChannel，但显式写 <code>existingChannel: 'newGroup' / 'joinGroup'</code> 时，会把新回线加进已有通道。</p>
 			</div>
 
 			<div class="dv-group">
@@ -481,6 +611,7 @@ onBeforeUnmount(() => {
 				<p class="dv-readout" data-demo="connect-draft-readout">{{ draftText }}</p>
 				<p class="dv-readout" data-demo="connect-data-readout">{{ dataText }}</p>
 				<p class="dv-readout" data-demo="connect-action-readout">{{ actionText }}</p>
+				<p class="dv-readout" data-demo="connect-event-readout">{{ eventText }}</p>
 				<p class="dv-readout" data-demo="connect-cancel-readout">{{ cancelText }}</p>
 			</div>
 

package/docs/demos/CopyMergeDemo.vue

@@ -25,7 +25,8 @@ const copyItemsText = ref('—')
 const copyLineChannelsText = ref('—')
 const manualText = ref('—')
 const mergeBackendText = ref('合并变更 → 后端事务：—')
-const splitText = ref('拆分：先选中一个节点（不选就取第一个），再点拆分')
+const splitText = ref('解除合并：先选中一个节点（不选就取第一个），再点按钮')
+const lastSplitResult = shallowRef(null)
 const copyBackendText = ref('复制落库：—')
 const mergeSyncText = ref('合并落库：—')
 const backendMode = ref('success')
@@ -748,15 +749,11 @@ const prepareMerge = () => {
 	return actionText.value
 }
 
-/** 节点拆分：把连在来源节点上的线路隔一条分给第二份，通道端点默认跟随成员线路 */
+/** 解除合并：splitPoint 的 autoLines=alternate 按通道成组、独立线路单条轮流分配，不会把同通道成员拆散 */
 const splitSelectedPoint = () => {
 	const data = view?.getData()
 	if (!data?.points?.length) return '没有可拆分的节点'
 	const source = selectedPoints.value[0] ?? data.points[0]
-	const linked = data.lines
-		.map((line, index) => ({ line, index }))
-		.filter(({ line }) => String(line.from) === String(source.id) || String(line.to) === String(source.id))
-	const movedLines = linked.filter((_entry, index) => index % 2 === 1).map(entry => entry.line.id ?? entry.index)
 	splitRound += 1
 	const offset = 0.42 + splitRound * 0.04
 	const result = view.splitPoint(source.id, [
@@ -764,23 +761,38 @@ const splitSelectedPoint = () => {
 			x: Number(source.x) - offset,
 			y: Number(source.y) - offset * 0.55,
 			name: `${pointLabel(source)} · A`,
-			zone_name: '拆分后 · A'
+			zone_name: '解除合并后 · A'
 		},
 		{
 			x: Number(source.x) + offset,
 			y: Number(source.y) + offset * 0.55,
 			name: `${pointLabel(source)} · B`,
-			zone_name: '拆分后 · B',
-			lines: movedLines
+			zone_name: '解除合并后 · B'
 		}
-	])
+	], { autoLines: 'alternate', label: '解除合并' })
+	lastSplitResult.value = result
 	if (!result.ok) {
-		splitText.value = `拆分失败：${result.reason}`
+		splitText.value = `解除合并失败：${result.reason}`
 		actionText.value = splitText.value
 		pushLog('splitPoint', splitText.value)
 		return splitText.value
 	}
-	splitText.value = `splitPoint：${pointLabel(source)} → ${result.pointIds.join(' / ')} · 改线 ${result.linesChanged} / 删线 ${result.removedLines} · 改通道 ${result.channelsChanged} / 删通道 ${result.removedChannels} · 第 2 份接回线 ${movedLines.length} 条`
+	const lineSlot = new Map()
+	for (const assignment of result.lineAssignments ?? []) {
+		for (const lineId of assignment.lineIds ?? []) {
+			lineSlot.set(String(lineId), assignment.index)
+		}
+	}
+	const channelsKept = (data.channels ?? []).every((channel) => {
+		const slots = new Set()
+		for (const lineId of channel.lineIds ?? []) {
+			const slot = lineSlot.get(String(lineId))
+			if (slot !== undefined) slots.add(slot)
+		}
+		return slots.size <= 1
+	})
+	const counts = result.lineAssignments.map(assignment => `${assignment.index === 0 ? 'A' : assignment.index === 1 ? 'B' : String(assignment.index + 1)} ${assignment.lineCount}`).join(' / ')
+	splitText.value = `splitPoint（解除合并）：${pointLabel(source)} → ${result.pointIds.join(' / ')} · autoLines=${result.autoLines} · 自动分线 ${result.autoAssignedLines}（${counts}）· 改线 ${result.linesChanged} / 删线 ${result.removedLines} · 改通道 ${result.channelsChanged} / 删通道 ${result.removedChannels} · 通道成组${channelsKept ? '保持完整' : '发生拆分'}`
 	actionText.value = splitText.value
 	pushLog('splitPoint', splitText.value)
 	view.selectFeatures(result.pointIds)
@@ -1177,11 +1189,12 @@ onBeforeUnmount(() => {
 				<p class="dv-hint">mergeSelectedPoints 只并选中集；target 可以指定保留谁，item 只改最终节点的字段。拖点相撞走 pending / confirm 两站，确认前也能改写。合并落地后的 changes 可直接作为后端事务：删除来源节点、更新保留节点、更新 / 删除线路与通道。</p>
 			</div>
 			<div class="dv-group">
-				<h3>4 · 拆分节点</h3>
+				<h3>4 · 解除合并</h3>
 				<div class="dv-row">
-					<button type="button" class="dv-button dv-button--primary" data-demo="split-selected" @click="splitSelectedPoint">拆分选中节点</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="split-selected" @click="splitSelectedPoint">解除合并（拆分节点）</button>
 				</div>
 				<p class="dv-readout" data-demo="split-readout">{{ splitText }}</p>
+				<p class="dv-hint"><code>splitPoint(source, [A, B], { autoLines: 'alternate' })</code> 把没显式分配的线路按“同一条通道的成员成组、独立线路单条”轮流分给 A / B；返回的 <code>autoAssignedLines</code> 与 <code>lineAssignments</code> 直接显示每一份接到哪些回线。</p>
 			</div>
 			<div class="dv-group">
 				<h3>5 · 待确认合并</h3>

package/docs/demos/EventDemo.vue

@@ -58,23 +58,22 @@ const describePayload = (payload) => {
 	if (payload.index !== undefined) parts.push(`index=${payload.index}`)
 	if (payload.labelId !== undefined) parts.push(`labelId=${payload.labelId}`)
 	if (payload.count !== undefined) parts.push(`count=${payload.count}`)
-	if (payload.selection?.count !== undefined) parts.push(`selection=${payload.selection.count}`)
-	if (payload.channelId !== undefined) parts.push(`channel=${payload.channelId}`)
+	if (payload.channelId !== undefined) parts.push(`channel=${payload.channelId}`)
 	if (payload.camera !== undefined) parts.push('camera=…')
 	if (payload.screen !== undefined) parts.push(`screen=[${payload.screen.map(value => Number(value).toFixed(0)).join(', ')}]`)
 	if (payload.action) {
 		const action = payload.action
-		parts.push(`action=${action.type}/${action.target}${action.moved ? '+moved' : ''}${action.double ? '+double' : ''}@${action.button ?? '-'}`)
-		parts.push(`data=${dataLabel(action.data)}`)
+		parts.push(`action=${action.type}/${action.target}${action.moved ? '+moved' : ''}${action.double ? '+double' : ''}@${payload.originalEvent?.button ?? '-'}`)
+		parts.push(`data=${dataLabel(hitDataOf(payload))}`)
 	}
 	if (!parts.length) parts.push(`keys=[${Object.keys(payload).slice(0, 6).join(', ')}]`)
 	return parts.join(' · ')
 }
 
 /**
- * action.data 给的是哪一份数据：节点 / 线路 / 通道看 id，选中集报条数，
- * 标签事件（labelClick / labelDrag / labelContextMenu / labelDblClick）给的是 { label, parent } —— 报内容与它挂在哪个要素上。
- */
+ * 命中的数据在载荷顶层：节点 / 线路看 item，通道看 channel，选中集报 items 条数，
+ * 标签（labelClick / labelDrag / labelContextMenu / labelDblClick）看 label / parent。
+ */
 const dataLabel = (value) => {
 	if (Array.isArray(value)) return `${value.length} 项`
 	if (!value || typeof value !== 'object') return String(value)
@@ -88,12 +87,10 @@ const dataLabel = (value) => {
 	return value.id ?? value.channelId ?? value.name ?? `对象 keys=[${Object.keys(value).slice(0, 4).join(', ')}]`
 }
 
-/**
- * 要 DOM 事件的三个事件（pointerDown / pointerUp / contextMenu）在总线上
- * 载荷是 `{ payload, event }`（与回调的两个参数一一对应），其余事件载荷就是回调里那一份 —— 这里统一拆开。
- */
-const EVENT_PAYLOAD_EVENTS = new Set(['pointerDown', 'pointerUp', 'contextMenu'])
-const unwrapPayload = (raw, name) => (EVENT_PAYLOAD_EVENTS.has(name) && raw && typeof raw === 'object' && 'payload' in raw ? raw.payload : raw)
+/** 一次事件里可读的那份顶层数据：不把通道 / 分组上下文再打成一个 action.data */
+const hitDataOf = payload => payload.item ?? payload.channel ?? payload.label ?? payload.line
+	?? (payload.type === 'cluster' ? { id: payload.id, count: payload.count } : null)
+	?? (Array.isArray(payload.items) ? payload.items : null)
 
 /** 会带 action 的事件名：* 订阅里从载荷上认出「这一次是什么操作」 */
 const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
@@ -257,10 +254,8 @@ const dismissCopy = () => {
 
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
-	// 一条 '*' 订阅全部事件：回调拿到的第二参就是事件名（与 options 里的 onXxx 同一份载荷）
-	offAll = view.on('*', (raw, name) => {
-		// 四个要 DOM 事件的事件先拆包，后面按「载荷就是回调里那一份」统一读
-		const payload = unwrapPayload(raw, name)
+	// 一条 '*' 订阅全部事件：回调拿到的第二参就是事件名；载荷与 options 里的 onXxx 完全同一份
+	offAll = view.on('*', (payload, name) => {
 		counts.value = { ...counts.value, [name]: (counts.value[name] ?? 0) + 1 }
 		// 合并 / 复制：同一条 * 订阅里收中间态，确认条与日志读的是同一份载荷
 		if (name === 'pointMerge') {
@@ -275,8 +270,10 @@ onMounted(() => {
 		if (ACTION_EVENTS.has(name) && payload?.action) {
 			// 一次操作的判读：什么操作 / 点到了什么 / 拿到了什么数据 —— 左键与右键都走这一套
 			const action = payload.action
-			const held = Object.entries(action.modifiers ?? {}).filter(([, on]) => on).map(([key]) => key).join('+')
-			lastAction.value = `${name}：${action.type} → ${action.target}${action.data === undefined || action.data === null ? '' : ` · ${dataLabel(action.data)}`}${action.button ? ` · ${action.button}` : ''}${held ? ` · ${held}` : ''}${action.moved ? ' · 拖动过' : ''}${action.double ? ' · 双击第二下' : ''}`
+			const event = payload.originalEvent
+			const held = [event?.ctrlKey && 'ctrl', event?.metaKey && 'meta', event?.shiftKey && 'shift', event?.altKey && 'alt'].filter(Boolean).join('+')
+			const data = hitDataOf(payload)
+			lastAction.value = `${name}：${action.type} → ${action.target}${data === null || data === undefined ? '' : ` · ${dataLabel(data)}`}${event ? ` · button ${event.button}` : ''}${held ? ` · ${held}` : ''}${action.moved ? ' · 拖动过' : ''}${action.double ? ' · 双击第二下' : ''}`
 		}
 		if (!showHighFrequency.value && HIGH_FREQUENCY.has(name)) {
 			return
@@ -350,7 +347,7 @@ onBeforeUnmount(() => {
 			<div class="dv-group">
 				<h3>动作判读（action）</h3>
 				<p class="dv-readout">{{ lastAction }}</p>
-				<p class="dv-hint">在画布上点一下 / 右键 / 拖一段 / 框选一下：这里按 action.type 说清「是什么操作」、action.target 说清「点到了什么」、action.data 就是那一份数据（点 / 线是数据里的对象、通道回线是通道定义）。</p>
+				<p class="dv-hint">在画布上点一下 / 右键 / 拖一段 / 框选一下：action.type 说清「是什么操作」、action.target 说清「点到了什么」，命中的数据直接读载荷顶层的 item / channel / label 等字段；按键与修饰键读 originalEvent。</p>
 			</div>
 			<div class="dv-group">
 				<h3>事件计数（* 订阅）</h3>

package/docs/demos/LabelDemo.vue

@@ -338,11 +338,11 @@ const onLabelDrag = (payload) => {
 const onLabelContextMenu = (payload) => {
 	hit.value = payload
 	syncFormFromHit()
-	// 用载荷里的 clientX / clientY 把自绘菜单贴在指针位置（系统菜单已被 preventContextMenu 收掉）
-	menu.open = true
-	menu.x = payload.clientX
-	menu.y = payload.clientY
-	pushLog('labelContextMenu', `右键 ${describeLabel(payload)} @ ${payload.clientX}, ${payload.clientY}`)
+	// 用原始指针事件的 clientX / clientY 把自绘菜单贴在指针位置（系统菜单已被 preventContextMenu 收掉）
+	menu.open = true
+	menu.x = payload.originalEvent?.clientX ?? 0
+	menu.y = payload.originalEvent?.clientY ?? 0
+	pushLog('labelContextMenu', `右键 ${describeLabel(payload)} @ ${menu.x}, ${menu.y}`)
 }
 
 const onLabelDblClick = (payload) => {
@@ -477,8 +477,8 @@ onMounted(() => {
 			pushLog('labelChange', describeChange(payload))
 			syncLabelStates()
 		}],
-		// 接口选中（select / clearSelection）不发 onSelect，只发 selectChange：两条路都接上
-		['selectChange', () => syncSelection()]
+		// 选中镜像统一走 selectChange：覆盖点击与接口来源，且重复设同一份选中集不会重复通知
+		['selectChange', () => syncSelection()]
 	].map(([name, handler]) => view.on(name, handler))
 	window.addEventListener('keydown', onKeyDown)
 	window.addEventListener('pointerdown', onGlobalPointerDown)

package/docs/demos/StyleDemo.vue

@@ -86,7 +86,7 @@ const buildOptions = () => ({
 		syncRules()
 	},
 	/**
-	 * 读数接 onSelectChange 而不是 onSelect：前者对「点选、框选、API select()」都会发，
+	 * 读数接 onSelectChange 而不是 onSelect：前者对「点选、框选、API selectFeatures()」都会发，
 	 * 后者只代表画布上的那一次点击 —— 用接口选中时读数也不会停在「未选中」。
 	 * 选中高亮的颜色 / 尺寸写在 pointSelectStyle / lineSelectStyle 里，这里只让面板知道选中集变了。
 	 */