gis-view-webgl2 0.1.2 → 0.1.4

package/docs/demos/ChannelDemo.vue

@@ -7,7 +7,7 @@
  *   `mergeChannelGroups(id, [要并的组], 目标组)` 再并回去。
  *   `addChannelGroup(id, [回线…], { id?, path? })` 一次把几条拆成单独一组（分组那一块的勾选就是它）。
  * - 外观：通道宽度 / 内收比例 / 偏移方式（tangent 沿切向，inset 按比例内收）都是 updateOptions。
- * - 交互：右键一条通道回线弹出交互框（onChannelContextMenu）—— 点分组切换当前分组并选中它的回线，
+ * - 交互：右键一条通道回线弹出交互框（统一的 onContextMenu + payload.channelContext）—— 点分组切换当前分组并选中它的回线，
  *   每条回线可以拆成新分组 / 并进别的分组（moveChannelLine），下面一排按钮走 runChannelAction。
  * - 选中模式 / 删除：channelSelectMode 决定点一条回线是只选它自己、连所在分组还是连整条通道；
  *   Delete（或 requestRemove()）先出删除载荷 —— 删什么、连带什么、能按「只删线路 / 整个分组 / 整条通道」哪个范围删，
@@ -303,7 +303,8 @@ const buildOptions = () => ({
 	showGrid: true,
 	fitPadding: 60,
 	// 开关缺省全关（见 features.js）：这个演示要的是「拖节点改通道 + 右键通道回线出交互框 + Delete 删除」，逐项显式打开
-	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, channelMenu: true, remove: true },
+	// 通道路由与普通右键共用 contextMenu，不再另开一个功能开关
+	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, remove: true },
 	// 通道选中模式：点一条回线选它自己 / 连所在分组 / 连整条通道
 	channelSelectMode: channelSelectMode.value,
 	// 分组拐点拖动：共用骨架 / 只移同组同序号拐点
@@ -315,7 +316,7 @@ const buildOptions = () => ({
 	// 这两条是假接口的入口：拐点只接 add / remove / end，分组只接整份声明；事件载荷本身已经够组请求
 	onWaypointChange: handleWaypointBackend,
 	onChannelGroupChange: handleChannelGroupBackend,
-	onChannelContextMenu: handleChannelContextMenu,
+	onContextMenu: handleContextMenu,
 	onReady: () => {
 		emit('notice', `${dataset.channels.length} 条通道 / ${dataset.channelLines.length} 回线`)
 		pushLog('就绪：拖通道端点节点、改宽度或拆一组试试')
@@ -626,7 +627,7 @@ const confirmGroupDialog = () => {
 }
 
 /**
- * 右键交互框：右键一条通道回线时 onChannelContextMenu(payload) 把「这条通道几组 / 当前是哪一组 /
+ * 右键交互框：右键一条通道回线时 onContextMenu(payload) 的 payload.channelContext 把「这条通道几组 / 当前是哪一组 /
  * 这一组能做哪些交互」一次交出来，界面照着 groups 与 actions 渲染就行 —— 核心是四件事：
  * 点分组 = setCurrentChannelGroup（顺带选中这一组的回线）、每条回线的下拉 + 分配 = moveChannelLine、
  * 按钮 = runChannelAction、点空白处（回调收到 null）/ Esc / × 收框。
@@ -684,11 +685,12 @@ const syncMenu = () => {
 	syncMenuLineTargets()
 }
 
-/** 右键回调：payload 就是整份上下文，null 表示点在空白处（把框收掉） */
-const handleChannelContextMenu = (payload) => {
-	channelMenu.value = payload
-	if (payload) {
-		pushLog('右键 ' + payload.channelId + '：共 ' + payload.groupCount + ' 组，命中「' + payload.groupId + '」的 ' + payload.group.lineCount + ' 回线')
+/** 右键回调：所有命中都走这一条，通道上下文挂在 payload.channelContext 上；点空白 / 节点时把框收掉 */
+const handleContextMenu = (payload) => {
+	const channelContext = payload?.channelContext
+	channelMenu.value = channelContext ? { ...payload, ...channelContext } : null
+	if (channelContext) {
+		pushLog('右键 ' + channelContext.channelId + '：共 ' + channelContext.groupCount + ' 组，命中「' + channelContext.groupId + '」的 ' + channelContext.group.lineCount + ' 回线')
 	}
 	syncMenu()
 }
@@ -1032,7 +1034,7 @@ onBeforeUnmount(() => {
 					</button>
 				</div>
 				<p class="dv-channel-menu__hint">
-					命中回线 {{ channelMenu.lineId }} · 这些都在 onChannelContextMenu(payload) 里；点空白处 / Esc / × 收框
+					命中回线 {{ channelMenu.lineId }} · 这些都在 onContextMenu(payload).channelContext 里；点空白处 / Esc / × 收框
 				</p>
 			</div>
 			<div v-if="groupDialog" class="dv-group-dialog" data-demo="channel-group-dialog" @click.self="closeGroupDialog">
@@ -1257,8 +1259,8 @@ onBeforeUnmount(() => {
 				<h3>右键交互框<span class="dv-chip">{{ channelMenu ? '已打开' : '未打开' }}</span></h3>
 				<p class="dv-readout">{{ menuText }}</p>
 				<p class="dv-hint">
-					右键一条通道回线：onChannelContextMenu(payload) 把「几组 / 当前哪一组 / 这一组能做什么」一次交出来，
-					框里照着 groups 与 actions 渲染；点空白处回调收到 null，按 Esc 或点 × 也会收框。
+					右键一条通道回线：onContextMenu(payload) 在 payload.channelContext 里把「几组 / 当前哪一组 /
+					这一组能做什么」一次交出来，框里照着 groups 与 actions 渲染；点空白处 / 节点时没有 channelContext，框自动收起。
 				</p>
 			</div>
 

package/docs/demos/ClusterDemo.vue

@@ -0,0 +1,251 @@
+<script setup>
+/**
+ * 点聚合演示：同一份合成数据在多簇中心附近铺开，面板上调开关 / 半径 / 最少成员数 / 展开缩放。
+ *
+ * 聚合只改「展示什么、能点到什么」：原始 points、getData()、listPoints() 与业务导出都不变；
+ * 聚合圆替代密集成员参与绘制、拾取、快照与 SVG / PNG 导出。点中聚合圆只发 clusterClick，
+ * 不会同时发普通 click，也不会改动选中集。
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { DEMO_CENTER, DEMO_RADIUS, createRandom } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+let view = null
+let statsDrawnAt = Number.NEGATIVE_INFINITY
+
+const DATA_COUNTS = [2000, 12000, 60000, 100000]
+const pointCountChoice = ref(12000)
+const clusterOn = ref(true)
+const radius = ref(60)
+const minPoints = ref(2)
+const maxZoom = ref(0)
+const statsText = ref('—')
+const clusterText = ref('—')
+const eventText = ref('等待点击聚合圆')
+const normalClicks = ref(0)
+const clusterClicks = ref(0)
+const lastCluster = ref(null)
+const firstClusterClient = ref(null)
+let dataset = { points: [] }
+
+/** 多簇数据：每簇一个中心，正态近似（四个随机数求和）让簇内密度自然衰减。 */
+const buildDataset = (count) => {
+	const random = createRandom(20261021)
+	const points = []
+	const centers = [
+		[-0.56, 0.34, 0.16],
+		[0.08, 0.56, 0.13],
+		[0.62, 0.22, 0.18],
+		[-0.32, -0.42, 0.15],
+		[0.48, -0.5, 0.14],
+		[0.02, -0.08, 0.1]
+	]
+	for (let index = 0; index < count; index += 1) {
+		const center = centers[index % centers.length]
+		const common = index < count * 0.08
+		const spread = common ? 1.6 : 0.68
+		const nx = (random() + random() + random() + random() - 2) * spread
+		const ny = (random() + random() + random() + random() - 2) * spread
+		points.push({
+			id: `cluster-point-${index}`,
+			x: Number((DEMO_CENTER[0] + (center[0] + nx * center[2]) * DEMO_RADIUS).toFixed(6)),
+			y: Number((DEMO_CENTER[1] + (center[1] + ny * center[2]) * DEMO_RADIUS).toFixed(6)),
+			name: `站点 ${index + 1}`,
+			zone_name: `分区 ${(index % centers.length) + 1}`,
+			vn_kv: [1050, 525, 230, 15.7][index % 4],
+			max_loading_rate: Number((0.35 + random() * 1.1).toFixed(3))
+		})
+	}
+	return { points }
+}
+
+const clusterOptions = () => clusterOn.value
+	? { enabled: true, radius: radius.value, minPoints: minPoints.value, maxZoom: maxZoom.value }
+	: false
+
+const buildOptions = () => ({
+	points: dataset.points,
+	pointStyle: { size: 4, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1 },
+	showGrid: true,
+	gridColor: 'rgba(126, 168, 214, 0.18)',
+	fitPadding: 42,
+	denseMode: 'off',
+	features: 'view',
+	pointCluster: clusterOptions(),
+	onReady: () => {
+		emit('notice', `点聚合演示已加载 ${dataset.points.length.toLocaleString()} 个点`)
+		queueMicrotask(syncClusters)
+	},
+	onClick: () => {
+		normalClicks.value += 1
+		eventText.value = '普通 click：聚合圆的点击不会再走到这里'
+	},
+	onClusterClick: payload => {
+		clusterClicks.value += 1
+		lastCluster.value = {
+			id: payload.id,
+			count: payload.count,
+			pointIds: [...payload.pointIds],
+			bounds: { ...payload.bounds },
+			coordinate: [...payload.coordinate]
+		}
+		const ids = payload.pointIds.slice(0, 6).join('、') + (payload.pointIds.length > 6 ? '…' : '')
+		eventText.value = `clusterClick：${payload.count} 点 · ${ids} · 包围盒 ${payload.bounds.minX.toFixed(3)}, ${payload.bounds.minY.toFixed(3)} ~ ${payload.bounds.maxX.toFixed(3)}, ${payload.bounds.maxY.toFixed(3)}`
+	},
+	onStats: next => {
+		const now = performance.now()
+		if (now - statsDrawnAt < 250) {
+			return
+		}
+		statsDrawnAt = now
+		statsText.value = `${next.pointCount.toLocaleString()} 原始点 · ${next.clusterCount.toLocaleString()} 个聚合圆（${next.clusterPointCount.toLocaleString()} 点）· 展示 ${(next.pointCount - next.clusterPointCount + next.clusterCount).toLocaleString()} 项 · 本帧 ${next.frameMs.toFixed(2)} ms`
+		clusterText.value = `聚合耗时 ${next.clusterMs.toFixed(2)} ms · ${view?.getPointCluster()?.active ? '当前缩放仍在聚合' : '当前缩放已展开原始点'}`
+	}
+})
+
+/** getClusters() 会按当前数据顺序展开单成员；这里只取第一个多成员组，给自测定位点击位置。 */
+const syncClusters = async (options = {}) => {
+	if (!view) {
+		return
+	}
+	if (options.render !== false) {
+		await view.whenRendered()
+	}
+	const clusters = view.getClusters().filter(item => item.count > 1)
+	const first = clusters[0]
+	firstClusterClient.value = first ? view.screenToClient(first.screen[0], first.screen[1]) : null
+}
+
+const applyCluster = async () => {
+	if (!view) {
+		return
+	}
+	view.updateOptions({ pointCluster: clusterOptions() })
+	await syncClusters()
+}
+
+const applyData = async () => {
+	if (!view) {
+		return
+	}
+	dataset = buildDataset(pointCountChoice.value)
+	view.updateData(dataset.points, [])
+	view.fitView(42)
+	lastCluster.value = null
+	await syncClusters()
+	emit('notice', `已换成 ${dataset.points.length.toLocaleString()} 个点`)
+}
+
+const fitAll = () => {
+	view?.fitView(42)
+}
+
+const zoomLastCluster = () => {
+	if (lastCluster.value?.bounds) {
+		view?.zoomToBounds(lastCluster.value.bounds, 54)
+	}
+}
+
+const countText = computed(() => `${normalClicks.value} 次普通点击 / ${clusterClicks.value} 次聚合点击`)
+
+onMounted(() => {
+	dataset = buildDataset(pointCountChoice.value)
+	view = createGisView(container.value, buildOptions())
+})
+
+onBeforeUnmount(() => {
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class='dv-demo'>
+		<div class='dv-stage' data-demo='cluster-stage'>
+			<div ref='container' class='dv-canvas' data-demo='cluster-canvas' />
+			<div class='dv-toolbar'>
+				<button type='button' data-demo='cluster-fit' @click='fitAll'>适应全部</button>
+				<button type='button' data-demo='cluster-zoom' :disabled='!lastCluster' @click='zoomLastCluster'>放大到最近聚合</button>
+			</div>
+			<span
+				class='cl-anchor'
+				data-demo='cluster-first-client'
+				:data-client-x='firstClusterClient ? firstClusterClient[0] : undefined'
+				:data-client-y='firstClusterClient ? firstClusterClient[1] : undefined'
+			/>
+		</div>
+		<aside class='dv-panel'>
+			<div class='dv-group'>
+				<h3>聚合配置</h3>
+				<div class='dv-row'>
+					<label><input v-model='clusterOn' data-demo='cluster-toggle' type='checkbox' @change='applyCluster' /> 开启聚合</label>
+				</div>
+				<div class='dv-row'>
+					<label>半径
+						<input v-model.number='radius' data-demo='cluster-radius' type='range' min='16' max='180' step='4' @change='applyCluster' />
+						<span class='cl-value'>{{ radius }}px</span>
+					</label>
+				</div>
+				<div class='dv-row'>
+					<label>最少点数
+						<select v-model.number='minPoints' data-demo='cluster-min-points' @change='applyCluster'>
+							<option :value='2'>2</option>
+							<option :value='3'>3</option>
+							<option :value='5'>5</option>
+							<option :value='8'>8</option>
+							<option :value='12'>12</option>
+						</select>
+					</label>
+					<label>展开缩放
+						<select v-model.number='maxZoom' data-demo='cluster-max-zoom' @change='applyCluster'>
+							<option :value='0'>不限</option>
+							<option :value='1.5'>1.5×</option>
+							<option :value='2'>2×</option>
+							<option :value='4'>4×</option>
+							<option :value='8'>8×</option>
+						</select>
+					</label>
+				</div>
+				<p class='dv-hint'>半径是屏幕像素；maxZoom 是相机比例相对基准比例的倍数，超过后展开原始点。聚合期间发散初始化暂停，缩放 / 数据 / 选中变化才重算。</p>
+			</div>
+			<div class='dv-group'>
+				<h3>数据规模</h3>
+				<div class='dv-row'>
+					<label>点数
+						<select v-model.number='pointCountChoice' data-demo='cluster-count'>
+							<option v-for='count in DATA_COUNTS' :key='count' :value='count'>{{ count.toLocaleString() }}</option>
+						</select>
+					</label>
+					<button type='button' class='dv-button' data-demo='cluster-rebuild' @click='applyData'>重建</button>
+				</div>
+				<p class='dv-hint'>十万点仍按整份网格 O(n) 建组；平移不重算，拖动 / 选中中的点强制保持单成员。</p>
+			</div>
+			<div class='dv-group'>
+				<h3>读数</h3>
+				<p class='dv-readout' data-demo='cluster-stats'>{{ statsText }}</p>
+				<p class='dv-readout' data-demo='cluster-summary'>{{ clusterText }}</p>
+				<p class='dv-readout' data-demo='cluster-click-count'>{{ countText }}</p>
+				<p class='dv-readout' data-demo='cluster-event'>{{ eventText }}</p>
+				<p class='dv-hint'>点击聚合圆应只增加「聚合点击」计数；普通 click 不会被聚合圆触发，选中集也保持不变。</p>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.cl-anchor {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	pointer-events: none;
+}
+.cl-value {
+	min-width: 38px;
+	color: #526b8d;
+	font-size: 11px;
+}
+</style>

package/docs/demos/CopyMergeDemo.vue

@@ -984,10 +984,9 @@ onMounted(() => {
 			merge: true,
 			keyboard: true,
 			waypoint: false,
-			remove: false,
-			channelDraft: false,
-			channelMenu: false,
-			contextMenu: false
+			remove: false,
+			channelDraft: false,
+			contextMenu: false
 		},
 		copy: {
 			enabled: true,

package/docs/demos/EventDemo.vue

@@ -89,14 +89,14 @@ const dataLabel = (value) => {
 }
 
 /**
- * 要 DOM 事件的四个事件（pointerDown / pointerUp / contextMenu / channelContextMenu）在总线上
+ * 要 DOM 事件的三个事件（pointerDown / pointerUp / contextMenu）在总线上
  * 载荷是 `{ payload, event }`（与回调的两个参数一一对应），其余事件载荷就是回调里那一份 —— 这里统一拆开。
  */
-const EVENT_PAYLOAD_EVENTS = new Set(['pointerDown', 'pointerUp', 'contextMenu', 'channelContextMenu'])
+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 的事件名：* 订阅里从载荷上认出「这一次是什么操作」 */
-const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'channelContextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
+const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
 
 /** 最近一次操作的判读：面板上的「动作判读」直接读它 */
 const lastAction = ref('—')

package/docs/demos/ExtensionDemo.vue

@@ -1,8 +1,8 @@
 <script setup>
 /**
- * 扩展能力：用同一个视图把五个扩展点串起来 ——
+ * 扩展能力：用同一个视图把六个扩展点串起来 ——
  * 运行时插件（view.use）、自定义图元（registerSymbol）、自定义条件运算符（registerOperator）
- * 自定义导出格式（defineExportFormat）与 WebGL 自定义层（addWebGLLayer）。
+ * 自定义导出格式（defineExportFormat）、WebGL 自定义层（addWebGLLayer）与实例命令（registerCommand）。
  * 每一块都可单独开关，读数里能直接看到注册表与可见数据。
  */
 import { onBeforeUnmount, onMounted, ref } from 'vue'
@@ -20,6 +20,8 @@ const webglMounted = ref(false)
 const webglEnabled = ref(false)
 const webglOrder = ref(20)
 const webglDrawCount = ref(0)
+const commandRegistered = ref(false)
+const commandReadout = ref('实例命令尚未注册。注册后可以执行 focusHighestLoad。')
 const readout = ref('正在创建视图…')
 const exportText = ref('尚未导出。点上面的按钮，会走 defineExportFormat 注册的同步适配器。')
 
@@ -33,6 +35,7 @@ let disposeSymbol = null
 let disposePlugin = null
 let disposeExport = null
 let disposeWebgl = null
+let disposeCommand = null
 
 /** WebGL 自定义层：按 gl 缓存程序 / 缓冲，draw 里只更新 uniform 与画一笔 */
 const webglResources = new WeakMap()
@@ -172,18 +175,21 @@ const paintSparkDiamond = (context, info) => {
 	context.fill()
 }
 
-const visiblePointCount = () => view?.getVisibleData()?.points?.length ?? points.length
-const refreshReadout = () => {
+const visiblePointCount = () => view?.getVisibleData()?.points?.length ?? points.length
+const COMMAND_NAME = 'focusHighestLoad'
+const refreshReadout = () => {
 	if (!view) {
 		return
 	}
 	const operators = view.listOperators()
 	const symbols = view.listSymbols()
+	const commands = view.listCommands()
 	readout.value = [
 		`自定义运算符 ${operators.includes('evenIndex') ? 'evenIndex 已注册' : '未注册'}`,
 		`筛选 ${operatorOn.value ? '开' : '关'}（可见 ${visiblePointCount()} / ${points.length} 个）`,
 		`自定义图元 ${symbols.includes('spark') ? `spark 已注册（${symbolVariant.value === 'diamond' ? '菱形' : '十字'}）` : '未注册'}${symbolOn.value ? ' / 使用中' : ''}`,
 		`运行时插件 ${pluginOn.value ? '已挂载' : '未挂载'}`,
+		`实例命令 ${commands.includes(COMMAND_NAME) ? `${COMMAND_NAME} 已注册（${commands.length} 个）` : '未注册'}`,
 		`WebGL 上下文 ${view.gl ? '可直接取' : '不可用'}`,
 		`WebGL 层 ${webglMounted.value ? `已挂载 · ${webglEnabled.value ? '绘制中' : '已隐藏'} · order ${webglOrder.value} · draw ${webglDrawCount.value} 次` : '未挂载'}`
 	].join(' · ')
@@ -199,7 +205,7 @@ const buildOptions = () => ({
 	fitPadding: 40,
 	features: 'view',
 	label: { enabled: true, content: '{name}', position: 'top', gap: 7, maxCount: 20, style: { color: '#27405f', fontSize: '11px' } },
-	onReady: () => emit('notice', '扩展能力：已挂载 5 个扩展点')
+	onReady: () => emit('notice', '扩展能力：已挂载 6 个扩展点')
 })
 
 const toggleOperator = () => {
@@ -249,10 +255,47 @@ const togglePlugin = () => {
 		disposePlugin?.()
 		disposePlugin = null
 	}
-	refreshReadout()
+	refreshReadout()
 	emit('notice', pluginOn.value ? '插件已挂载：左下角出现徽标' : '插件已卸载')
 }
 
+/** 实例命令：业务侧把「选中最重载节点并定位」注册进视图；handler 里通过 context.view 继续调实例方法 */
+const toggleCommand = () => {
+	if (!view) {
+		return
+	}
+	if (commandRegistered.value) {
+		disposeCommand?.()
+		disposeCommand = null
+		commandRegistered.value = false
+		commandReadout.value = `已卸载 ${COMMAND_NAME}；listCommands() 里不再有它。`
+		refreshReadout()
+		emit('notice', `实例命令 ${COMMAND_NAME} 已卸载`)
+		return
+	}
+	disposeCommand = view.registerCommand(COMMAND_NAME, (payload, context) => {
+		const threshold = Number(payload?.threshold ?? 1)
+		const target = points.find(point => Number(point.max_loading_rate) >= threshold) ?? points[0]
+		context.view.focusOn(target.id, { select: true, zoom: true, maxZoom: 8 })
+		return { id: target.id, name: target.name, threshold, selected: context.view.getSelectionData().count }
+	})
+	commandRegistered.value = view.listCommands().includes(COMMAND_NAME)
+	commandReadout.value = `${COMMAND_NAME} 已注册，可执行；同名再注册会覆盖。`
+	refreshReadout()
+	emit('notice', `实例命令 ${COMMAND_NAME} 已注册`)
+}
+const runCommand = () => {
+	if (!view) {
+		return
+	}
+	const result = view.executeCommand(COMMAND_NAME, { threshold: 1 })
+	commandReadout.value = result.ok
+		? `executeCommand -> ok: true · value: ${JSON.stringify(result.value)}`
+		: `executeCommand -> ok: false · ${result.reason ?? '未知原因'}`
+	refreshReadout()
+	emit('notice', result.ok ? `实例命令已执行：${result.value?.name ?? COMMAND_NAME}` : `实例命令执行失败：${result.reason ?? '未知原因'}`)
+}
+
 /** 挂载 / 移除 WebGL 自定义层：层本身不改数据，只在每帧最后叠加一圈光环 */
 const toggleWebgl = () => {
 	if (!view) {
@@ -350,6 +393,8 @@ onBeforeUnmount(() => {
 	disposeExport = null
 	disposeWebgl?.()
 	disposeWebgl = null
+	disposeCommand?.()
+	disposeCommand = null
 	view?.destroy()
 	view = null
 })
@@ -365,7 +410,7 @@ onBeforeUnmount(() => {
 		</div>
 		<aside class="dv-panel">
 			<div class="dv-group">
-				<h3>五个扩展点</h3>
+				<h3>六个扩展点</h3>
 				<div class="dv-row">
 					<button
 						type="button"
@@ -400,6 +445,17 @@ onBeforeUnmount(() => {
 				<div class="dv-row">
 					<button type="button" class="dv-button dv-button--primary" data-demo="extension-export" @click="exportSummary">自定义格式导出</button>
 				</div>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': commandRegistered }"
+						:aria-pressed="commandRegistered"
+						data-demo="extension-command-register"
+						@click="toggleCommand"
+					>{{ commandRegistered ? '卸载实例命令' : '注册实例命令' }}</button>
+					<button type="button" class="dv-button" :disabled="!commandRegistered" data-demo="extension-command-run" @click="runCommand">执行命令</button>
+				</div>
 				<div class="dv-row">
 					<button
 						type="button"
@@ -415,12 +471,13 @@ onBeforeUnmount(() => {
 					<button type="button" class="dv-button" :disabled="!webglMounted" data-demo="extension-webgl-order" @click="cycleWebglOrder">order {{ webglOrder }}（切换）</button>
 					<button type="button" class="dv-button" :disabled="!webglMounted" data-demo="extension-webgl-request" @click="requestWebglFrame">requestRender()</button>
 				</div>
-				<p class="dv-hint">运算符注册进条件语言，图元注册进符号表，插件挂在实例上，导出格式挂在模块注册表，WebGL 层直接拿 <code>gl</code> 在内置内容之后画自己的东西；五者都不需要改组件源码。图元切换走一次 <code>patchPoints</code> 批量补丁，WebGL 层可用 <code>enabled</code> / <code>order</code> 原地维护。</p>
-			</div>
-			<div class="dv-group">
-				<h3>注册表读数</h3>
-				<p class="dv-readout" data-demo="extension-readout" aria-live="polite">{{ readout }}</p>
+				<p class="dv-hint">运算符注册进条件语言，图元注册进符号表，插件挂在实例上，导出格式挂在模块注册表，WebGL 层直接拿 <code>gl</code> 在内置内容之后画自己的东西，实例命令把业务动作注册进当前视图；六者都不需要改组件源码。图元切换走一次 <code>patchPoints</code> 批量补丁，WebGL 层可用 <code>enabled</code> / <code>order</code> 原地维护，命令通过 <code>executeCommand</code> 同步执行并返回 handler 的结果。</p>
 			</div>
+			<div class="dv-group">
+				<h3>注册表读数</h3>
+				<p class="dv-readout" data-demo="extension-readout" aria-live="polite">{{ readout }}</p>
+				<p class="dv-readout" data-demo="extension-command-readout" aria-live="polite">{{ commandReadout }}</p>
+			</div>
 			<div class="dv-group">
 				<h3>导出结果</h3>
 				<pre class="dv-readout demo-extension-export" data-demo="extension-export-text">{{ exportText }}</pre>