gis-view-webgl2 0.1.3 → 0.1.5

package/docs/demos/ConnectDemo.vue

@@ -28,6 +28,13 @@ const arrow = ref(true)
 const arrowSize = ref(12)
 const arrowPositionsText = ref('0.5')
 const circuitSpacing = ref(12)
+const startPointId = ref('')
+const dotsVisible = ref(true)
+const dotSize = ref(5)
+const startDotColor = ref('#2f6fd0')
+const endDotColor = ref('#d9544d')
+const dotShape = ref('circle')
+const draftLayer = ref('above')
 const draft = ref(null)
 const actionText = ref('配置好线条之后点「开始连线」，依次点两个节点')
 const dataText = ref('正在创建视图…')
@@ -72,6 +79,10 @@ const createInitialLines = () => {
 const isChannel = computed(() => linkKind.value !== 'line')
 const circuits = computed(() => linkKind.value === 'channel-3' ? 3 : linkKind.value === 'channel-2' ? 2 : 1)
 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))
+	return point ? point.name ?? String(point.id) : ''
+})
 const isDraftLive = computed(() => Boolean(draft.value) && ['start', 'from', 'ready', 'restart', 'pick'].includes(draft.value.phase))
 const canFinish = computed(() => draft.value?.phase === 'ready')
 const draftText = computed(() => {
@@ -110,10 +121,19 @@ const currentDraftStyle = () => ({
 	color: lineColor.value,
 	width: lineWidth.value,
 	dot: 4,
+	dots: dotsVisible.value
+		? {
+			size: dotSize.value,
+			shape: dotShape.value,
+			from: { color: startDotColor.value },
+			to: { color: endDotColor.value }
+		}
+		: false,
 	arrow: arrow.value,
 	arrowSize: arrowSize.value,
 	arrowPositions: arrowPositions.value,
-	circuitSpacing: circuitSpacing.value
+	circuitSpacing: circuitSpacing.value,
+	layer: draftLayer.value
 })
 
 /** 预览与真实落地共用同一份线条字段：颜色 / 线宽 / 方向箭头都从这里出发 */
@@ -129,6 +149,7 @@ const startDraft = () => {
 	}
 	view.endAddChannel()
 	view.beginAddChannel({
+		...(startPointId.value ? { from: startPointId.value } : {}),
 		kind: isChannel.value ? 'channel' : 'line',
 		circuits: circuits.value,
 		routing: routing.value,
@@ -136,7 +157,9 @@ const startDraft = () => {
 		channelDraftStyle: currentDraftStyle(),
 		lineProps: currentLineProps()
 	})
-	actionText.value = `开始连线：先点起点，再点终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${routing.value === 'orthogonal' ? '正交折线' : '直线'}）`
+	actionText.value = startPointId.value
+		? `开始连线：起点已指定为 ${startPointLabel.value}，下一次点节点只选终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${routing.value === 'orthogonal' ? '正交折线' : '直线'}）`
+		: `开始连线：先点起点，再点终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${routing.value === 'orthogonal' ? '正交折线' : '直线'}）`
 	pushLog('beginAddChannel', actionText.value)
 }
 
@@ -177,6 +200,60 @@ const commitDraft = () => {
 	emit('notice', actionText.value)
 }
 
+/** 直接把本次新增的线路 / 通道对象交给 commitAddChannel：不再先 addLine / addChannel */
+const commitWithObject = () => {
+	if (!view || !canFinish.value) {
+		return
+	}
+	const current = view.getAddChannelDraft()
+	if (!current?.from || !current?.to) {
+		return
+	}
+	sequence += 1
+	const from = current.from.id
+	const to = current.to.id
+	const middle = middlePathOf(current)
+	const fullPath = fullPathOf(current)
+	let payload
+	if (current.kind === 'line') {
+		payload = {
+			id: `connect-object-line-${sequence}`,
+			name: `对象线路 ${sequence}`,
+			from,
+			to,
+			...(fullPath ? { path: fullPath } : {}),
+			...currentLineProps()
+		}
+	}
+	else {
+		const lineIds = Array.from({ length: current.circuits }, (_item, index) => `connect-object-line-${sequence}-${index + 1}`)
+		const channelId = `connect-object-channel-${sequence}`
+		payload = {
+			id: channelId,
+			name: `对象通道 ${sequence}`,
+			from,
+			to,
+			lineIds,
+			...(middle ? { path: middle } : {}),
+			groups: [{ id: channelId, lineIds, ...(middle ? { path: middle } : {}) }]
+		}
+	}
+	const result = view.commitAddChannel(payload)
+	refreshState()
+	if (!result.ok) {
+		actionText.value = `commitAddChannel(对象) 没有落地：${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)
+		}
+	}
+	pushLog('commitAddChannel(对象)', actionText.value)
+	emit('notice', actionText.value)
+}
+
 const middlePathOf = current => (current.path?.length ? current.path.map(point => [point[0], point[1]]) : null)
 const fullPathOf = current => {
 	const middle = middlePathOf(current)
@@ -267,7 +344,7 @@ const resetScene = () => {
 	pushLog('reset', actionText.value)
 }
 
-watch([lineColor, lineWidth, arrow, arrowSize, arrowPositionsText, circuitSpacing], () => {
+watch([lineColor, lineWidth, arrow, arrowSize, arrowPositionsText, circuitSpacing, dotsVisible, dotSize, startDotColor, endDotColor, dotShape, draftLayer], () => {
 	if (view && isDraftLive.value) {
 		view.updateAddChannelStyle(currentDraftStyle())
 		draft.value = view.getAddChannelDraft()
@@ -333,6 +410,14 @@ onBeforeUnmount(() => {
 						</select>
 					</label>
 				</div>
+				<div class="dv-row">
+					<label>指定起点
+						<select v-model="startPointId" data-demo="connect-start-point" :disabled="isDraftLive">
+							<option value="">点击时再选</option>
+							<option v-for="point in points" :key="String(point.id)" :value="String(point.id)">{{ point.name ?? point.id }}</option>
+						</select>
+					</label>
+				</div>
 				<div class="dv-row">
 					<label>线色 <input v-model="lineColor" type="color" data-demo="connect-color" /></label>
 					<label>线宽 <input v-model.number="lineWidth" type="range" min="1" max="6" step="0.2" data-demo="connect-width" /> {{ lineWidth.toFixed(1) }}</label>
@@ -356,6 +441,31 @@ onBeforeUnmount(() => {
 				<p class="dv-hint">草稿样式直接传给 <code>beginAddChannel({ channelDraftStyle })</code>；连线期间改颜色 / 线宽 / 箭头位置 / 回线间距会走 <code>updateAddChannelStyle()</code>，预览立即更新。正交折线会自动补一个 90 度拐点；落地线路用完整 path，通道只写中间拐点。</p>
 			</div>
 
+			<div class="dv-group">
+				<h3>示例点与层级</h3>
+				<div class="dv-row">
+					<label><input v-model="dotsVisible" type="checkbox" data-demo="connect-dots-visible" /> 显示两端示例点</label>
+					<label>形状
+						<select v-model="dotShape" data-demo="connect-dot-shape">
+							<option value="circle">圆形</option>
+							<option value="square">方形</option>
+						</select>
+					</label>
+					<label>尺寸 <input v-model.number="dotSize" type="range" min="2" max="12" step="1" data-demo="connect-dot-size" /> {{ dotSize }}px</label>
+				</div>
+				<div class="dv-row">
+					<label>起点色 <input v-model="startDotColor" type="color" data-demo="connect-dot-from-color" :disabled="!dotsVisible" /></label>
+					<label>终点色 <input v-model="endDotColor" type="color" data-demo="connect-dot-to-color" :disabled="!dotsVisible" /></label>
+					<label>示例线路层级
+						<select v-model="draftLayer" data-demo="connect-draft-layer">
+							<option value="above">真实节点之上</option>
+							<option value="below-points">真实节点之下</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-hint">示例点始终落在被点击节点的正中心（多回线偏移不会带走它），可通过 <code>dots: false</code> 关闭，或用 <code>dots.from / dots.to</code> 分别配颜色、尺寸与形状。层级只作用于示例线 / 箭头 / <code>customDraw</code>；示例点仍画在真实节点之后，保证看得见。</p>
+			</div>
+
 			<div class="dv-group">
 				<h3>草稿与落地</h3>
 				<div class="dv-row">
@@ -364,6 +474,7 @@ onBeforeUnmount(() => {
 				</div>
 				<div class="dv-row">
 					<button type="button" class="dv-button" data-demo="connect-default" :disabled="!canFinish" @click="commitDraft">默认添加（commitAddChannel）</button>
+					<button type="button" class="dv-button" data-demo="connect-commit-object" :disabled="!canFinish" @click="commitWithObject">对象提交（通道 / 线路对象）</button>
 					<button type="button" class="dv-button" data-demo="connect-add-lines" :disabled="!canFinish" @click="addWithLines">用 addLines 添加</button>
 					<button type="button" class="dv-button" data-demo="connect-add-channels" :disabled="!canFinish" @click="addWithChannels">用 addChannels 添加</button>
 				</div>

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>

package/docs/demos/MinimapDemo.vue

@@ -17,12 +17,17 @@ const enabled = ref(true)
 const size = ref('medium')
 const position = ref('bottom-right')
 const extent = ref('auto')
-const ruleMode = ref('voltage')
+const ruleMode = ref('inherit')
 const levelMode = ref('all')
-const linkedSizes = ref(true)
+const pointSizeScale = ref(1)
+const lineWidthScale = ref(1)
+const pointZoomScale = ref(0)
+const lineZoomScale = ref(0)
 const channelCircuits = ref(true)
-const zoomable = ref(true)
+const zoomMode = ref('manual')
+const followZoomScale = ref(1)
 const dragAction = ref('pan')
+const extentFollowCamera = ref(false)
 const maxPixelRatio = ref('2')
 const gridPlacement = ref('below-data')
 const customLayers = ref(true)
@@ -125,6 +130,7 @@ const minimapOptions = () => {
 		margin: 12,
 		padding: 0.05,
 		extent: extent.value,
+		extentFollowCamera: extentFollowCamera.value,
 		background: 'inherit',
 		backgroundStyle: 'rgba(255, 255, 255, 0.94)',
 		borderColor: '#c7d8eb',
@@ -140,16 +146,19 @@ const minimapOptions = () => {
 		levels: levelMode.value === 'top' ? [2] : undefined,
 		cascade: 'both',
 		layered: true,
-		pointSizeScale: 1,
-		lineWidthScale: 1,
-		pointMapZoomScale: linkedSizes.value ? 0.5 : 0,
-		lineMapZoomScale: linkedSizes.value ? 0.5 : 0,
+		// 自己规则 / 沿用主图都乘这一份；与主图相机倍数、小图自身倍数都无关
+		pointSizeScale: Number(pointSizeScale.value),
+		lineWidthScale: Number(lineWidthScale.value),
+		// 只有小图自身放大时才按这两个指数联动；沿用主图的节点 / 线路也一样
+		pointZoomScale: Number(pointZoomScale.value),
+		lineZoomScale: Number(lineZoomScale.value),
 		boxStyle: { fill: '#3678bf', fillOpacity: 0.16, stroke: '#3678bf', strokeWidth: 1, strokeStyle: 'dashed', radius: 3 },
 		selectStyle: { fill: '#f0a43c', stroke: '#f0a43c' },
 		interactive: true,
 		onInteraction: handleMinimapInteraction,
 		longPressDelay: 180,
-		zoomable: zoomable.value,
+		zoomable: zoomMode.value === 'manual' ? true : zoomMode.value === 'follow' ? 'follow' : false,
+		followZoomScale: Number(followZoomScale.value),
 		minZoom: 0.7,
 		maxZoom: 6,
 		zoomStep: 1.35,
@@ -168,10 +177,14 @@ const refreshReadout = () => {
 	const sizeText = root ? `${Math.round(root.getBoundingClientRect().width)}×${Math.round(root.getBoundingClientRect().height)}` : '未挂载'
 	readout.value = `${sizeText} · 备份 ${canvas?.width ?? 0}×${canvas?.height ?? 0} · 像素比 ${ratio ? ratio.toFixed(2) : '—'} · 范围 ${extent.value} · 自定义层 ${options.layers.length}`
 	if (view) {
-		zoomReadout.value = `小图倍数 ${view.getMinimapZoom().toFixed(2)} · ${zoomable.value ? '滚轮缩放小图' : '滚轮缩放主图'}`
+		zoomReadout.value = `小图倍数 ${view.getMinimapZoom().toFixed(2)} · ${zoomModeLabel.value}`
 	}
 }
 
+const zoomModeLabel = computed(() => zoomMode.value === 'manual'
+	? '手动缩放小图'
+	: zoomMode.value === 'follow' ? `跟随主图（指数 ${Number(followZoomScale.value).toFixed(1)}）` : '不缩放小图，滚轮缩放主图')
+
 const applyMinimap = () => {
 	if (!view) {
 		return
@@ -193,10 +206,20 @@ const zoomMinimap = (factor) => {
 
 const refreshZoom = () => {
 	if (view) {
-		zoomReadout.value = `小图倍数 ${view.getMinimapZoom().toFixed(2)} · ${zoomable.value ? '滚轮缩放小图' : '滚轮缩放主图'}`
+		zoomReadout.value = `小图倍数 ${view.getMinimapZoom().toFixed(2)} · ${zoomModeLabel.value}`
 	}
 }
 
+/** 拖拽演示：框选不依赖 zoomable；平移才需要手动缩放后内容有可移动余量 */
+const showDragDemo = (action) => {
+	dragAction.value = action
+	zoomMode.value = action === 'box' ? 'off' : 'manual'
+	applyMinimap()
+	eventText.value = action === 'box'
+		? '拖拽演示：缩放模式已关闭，在小图空白处直接拖动仍能拉出框选矩形'
+		: '拖拽演示：已切到手动缩放，在小图空白处拖动平移小图内容'
+}
+
 const refreshLayerReadout = () => {
 	layerReadout.value = `网格层 ${layerPaints.grid} 次（${layerPaints.gridStage}） · 指北针层 ${layerPaints.compass} 次`
 	refreshReadout()
@@ -289,6 +312,9 @@ const sizeSummary = computed(() => `${SIZES[size.value]?.[0] ?? 0}×${SIZES[size
 						</select>
 					</label>
 				</div>
+				<div class="dv-row">
+					<label><input v-model="extentFollowCamera" type="checkbox" data-demo="minimap-extent-follow" @change="applyMinimap" /> 自动范围随相机收窄（默认关）</label>
+				</div>
 				<p class="dv-hint"><code>maxPixelRatio</code> 越大越清晰，也越吃填充率；高分屏按机器档位调到 2 通常就够。</p>
 			</div>
 			<div class="dv-group">
@@ -309,11 +335,24 @@ const sizeSummary = computed(() => `${SIZES[size.value]?.[0] ?? 0}×${SIZES[size
 					</label>
 				</div>
 				<div class="dv-row">
-					<label><input v-model="linkedSizes" type="checkbox" data-demo="minimap-linked" @change="applyMinimap" /> 尺寸跟随主图缩放</label>
+					<label>节点整体倍数 <input v-model.number="pointSizeScale" type="range" min="0" max="3" step="0.1" data-demo="minimap-point-size-scale" @change="applyMinimap" /> {{ Number(pointSizeScale).toFixed(1) }}</label>
+					<label>线路整体倍数 <input v-model.number="lineWidthScale" type="range" min="0" max="3" step="0.1" data-demo="minimap-line-width-scale" @change="applyMinimap" /> {{ Number(lineWidthScale).toFixed(1) }}</label>
+				</div>
+				<div class="dv-row">
+					<label>小图放大节点 <input v-model.number="pointZoomScale" type="range" min="0" max="1" step="0.1" data-demo="minimap-point-zoom-scale" @change="applyMinimap" /> {{ Number(pointZoomScale).toFixed(1) }}</label>
+					<label>小图放大线路 <input v-model.number="lineZoomScale" type="range" min="0" max="1" step="0.1" data-demo="minimap-line-zoom-scale" @change="applyMinimap" /> {{ Number(lineZoomScale).toFixed(1) }}</label>
+				</div>
+				<div class="dv-row">
 					<label><input v-model="channelCircuits" type="checkbox" data-demo="minimap-circuits" @change="applyMinimap" /> 画全部回线</label>
 				</div>
 				<div class="dv-row">
-					<label><input v-model="zoomable" type="checkbox" data-demo="minimap-zoomable" @change="applyMinimap" /> 小图自身可缩放</label>
+					<label>缩放模式
+						<select v-model="zoomMode" data-demo="minimap-zoomable" @change="applyMinimap">
+							<option value="off">关闭</option>
+							<option value="manual">手动缩放小图</option>
+							<option value="follow">跟随主图</option>
+						</select>
+					</label>
 					<label>空白拖动
 						<select v-model="dragAction" data-demo="minimap-drag-action" @change="applyMinimap">
 							<option value="pan">平移小图</option>
@@ -321,7 +360,14 @@ const sizeSummary = computed(() => `${SIZES[size.value]?.[0] ?? 0}×${SIZES[size
 						</select>
 					</label>
 				</div>
-				<p class="dv-hint">打开「小图自身可缩放」后，滚轮缩放小图；按住 Ctrl / ⌘ + 滚轮仍然缩放主图。视口框可以拖，空白处长按跟随。</p>
+				<div class="dv-row">
+					<label>跟随指数 <input v-model.number="followZoomScale" type="range" min="0" max="2" step="0.1" data-demo="minimap-follow-scale" @change="applyMinimap" /> {{ Number(followZoomScale).toFixed(1) }}</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="minimap-drag-box" @click="showDragDemo('box')">拖拽演示：框选</button>
+					<button type="button" class="dv-button" data-demo="minimap-drag-pan" @click="showDragDemo('pan')">拖拽演示：平移</button>
+				</div>
+				<p class="dv-hint">沿用主图规则时，节点 / 线路先按「小图视口 ÷ 主图视口」缩放，主图放大缩小不会改变它们的大小；滚轮或 ＋ / － 放大鹰眼图时，再按 <code>pointZoomScale</code> / <code>lineZoomScale</code> 的指数变化。两个整体倍数对自有规则与沿用主图的要素都生效。<code>zoomable: true</code> 是小图手动缩放，<code>'follow'</code> 是整体范围跟随主图，两者互斥；<code>followZoomScale</code> 是主图倍数的指数。框选不依赖缩放开关：选「关闭」+ <code>dragAction: 'box'</code>，空白处拖动仍会直接框选。视口框可以拖，空白处长按跟随。</p>
 			</div>
 			<div class="dv-group">
 				<h3>扩展层</h3>
@@ -341,9 +387,9 @@ const sizeSummary = computed(() => `${SIZES[size.value]?.[0] ?? 0}×${SIZES[size
 			<div class="dv-group">
 				<h3>小图倍数</h3>
 				<div class="dv-row">
-					<button type="button" class="dv-button" data-demo="minimap-zoom-out" @click="zoomMinimap(1 / 1.35)">－</button>
-					<button type="button" class="dv-button dv-button--primary" data-demo="minimap-zoom-reset" @click="resetZoom">1×</button>
-					<button type="button" class="dv-button" data-demo="minimap-zoom-in" @click="zoomMinimap(1.35)">＋</button>
+					<button type="button" class="dv-button" data-demo="minimap-zoom-out" :disabled="zoomMode === 'follow'" @click="zoomMinimap(1 / 1.35)">－</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="minimap-zoom-reset" :disabled="zoomMode === 'follow'" @click="resetZoom">1×</button>
+					<button type="button" class="dv-button" data-demo="minimap-zoom-in" :disabled="zoomMode === 'follow'" @click="zoomMinimap(1.35)">＋</button>
 				</div>
 				<p class="dv-readout" data-demo="minimap-zoom-readout">{{ zoomReadout }}</p>
 			</div>

package/docs/demos/SearchFilterDemo.vue

@@ -48,10 +48,11 @@ let view = null
 let requestSeq = 0
 
 const SCOPES = [
-	{ id: 'all', label: '全部三类' },
+	{ id: 'all', label: '全部四类' },
 	{ id: 'points', label: '只看节点' },
 	{ id: 'lines', label: '只看线路' },
-	{ id: 'channels', label: '只看通道' }
+	{ id: 'channels', label: '只看通道' },
+	{ id: 'groups', label: '只看分组' }
 ]
 const FIELD_MODES = [
 	{ id: 'all', label: '全部字段', fields: null },
@@ -64,6 +65,7 @@ const PRESETS = [
 	{ id: 'name', demo: 'search-filter-preset-name', label: '变电站（limit 3）', keyword: '变电站', scope: 'points', field: 'all', limit: 3 },
 	{ id: 'owner', demo: 'search-filter-preset-owner', label: '北城运检（props.owner）', keyword: '北城运检', scope: 'points', field: 'owner', limit: 10 },
 	{ id: 'channel', demo: 'search-filter-preset-channel', label: '甲通道（scope=channels）', keyword: '甲通道', scope: 'channels', field: 'all', limit: 10 },
+	{ id: 'group', demo: 'search-filter-preset-group', label: 'channel-a（scope=groups）', keyword: 'channel-a', scope: 'groups', field: 'all', limit: 10 },
 	{ id: 'symbol', demo: 'search-filter-preset-symbol', label: 'square（显式 symbol）', keyword: 'square', scope: 'points', field: 'symbol', limit: 10 }
 ]
 const FILTERS = [
@@ -72,15 +74,15 @@ const FILTERS = [
 	{ id: 'zone', demo: 'search-filter-filter-zone', label: '分区 2 / 4', condition: { points: { zone_name: { in: ['分区 2', '分区 4'] } }, cascade: 'binding' } },
 	{ id: 'loading', demo: 'search-filter-filter-loading', label: '线路负载 ≥ 1', condition: { lines: { max_loading_rate: { gte: 1 } } } }
 ]
-const KIND_LABELS = { point: '节点', line: '线路', channel: '通道' }
+const KIND_LABELS = { point: '节点', line: '线路', channel: '通道', group: '分组' }
 
-const scopeLabel = computed(() => SCOPES.find(item => item.id === scope.value)?.label ?? '全部三类')
+const scopeLabel = computed(() => SCOPES.find(item => item.id === scope.value)?.label ?? '全部四类')
 const searchSummary = computed(() => {
 	const result = searchResult.value
 	if (!result) {
 		return '还没有搜索'
 	}
-	return `命中 ${result.total} 条：节点 ${result.points.length} / 线路 ${result.lines.length} / 通道 ${result.channels.length}`
+	return `命中 ${result.total} 条：节点 ${result.points.length} / 线路 ${result.lines.length} / 通道 ${result.channels.length} / 分组 ${result.groups?.length ?? 0}`
 })
 const searchMeta = computed(() => {
 	const result = searchResult.value
@@ -172,8 +174,8 @@ const applyWorker = () => {
 		: 'searchWorker=false：searchAsync 退回主线程同步计算'
 }
 const focusHit = (hit) => {
-	view?.focusOn(hit, { select: true })
-	actionText.value = `focusOn(${KIND_LABELS[hit.kind] ?? hit.kind} #${hit.index}, { select: true })`
+	view?.focusOn(hit, { select: true, zoom: true })
+	actionText.value = `focusOn(${KIND_LABELS[hit.kind] ?? hit.kind} #${hit.index}, { select: true, zoom: true })`
 }
 const focusAllHits = () => {
 	const hits = searchResult.value?.hits ?? []
@@ -181,8 +183,8 @@ const focusAllHits = () => {
 		actionText.value = '当前没有可定位的命中'
 		return
 	}
-	view?.focusOn(hits, { select: true })
-	actionText.value = `focusOn(hits, { select: true })：${hits.length} 条命中一起进包围盒并选中`
+	view?.focusOn(hits, { select: true, zoom: true })
+	actionText.value = `focusOn(hits, { select: true, zoom: true })：${hits.length} 条命中一起进包围盒并选中`
 }
 const readVisibleData = () => {
 	if (!view) {
@@ -296,7 +298,7 @@ onBeforeUnmount(() => {
 				<div class='dv-chips'>
 					<button v-for='preset in PRESETS' :key='preset.id' type='button' class='dv-chip' :data-demo='preset.demo' @click='choosePreset(preset)'>{{ preset.label }}</button>
 				</div>
-				<p class='dv-hint'>显式 fields 能搜默认会跳过的 symbol；搜索基于全量数据，不隐藏、也不自动移动视角。</p>
+				<p class='dv-hint'>scope 可写 points / lines / channels / groups，也认 point / line / channel / group；显式 fields 能搜默认会跳过的 symbol。搜索基于全量数据，不隐藏、也不自动移动视角。</p>
 				<div class='dv-row'>
 					<button type='button' class='dv-button' data-demo='search-filter-focus-all' @click='focusAllHits'>聚焦并选中全部命中</button>
 				</div>
@@ -335,7 +337,7 @@ onBeforeUnmount(() => {
 			</div>
 			<div class='dv-group'>
 				<h3>两件事别混用</h3>
-				<p class='dv-hint'>search 只把要素找出来，结果带 bounds；要居中就再调 focusOn。setFilter 才会隐藏要素，并从 getVisibleData / listPoints 的可见集合里消失。</p>
+				<p class='dv-hint'>search 只把要素找出来，结果带 bounds；要居中就再调 focusOn。setFilter 只隐藏显示、不删数据，也不清空选中集：条件放宽后，原本选中的要素仍保持选中。</p>
 			</div>
 		</aside>
 	</section>