gis-view-webgl2 0.1.4 → 0.1.6

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/MinimapDemo.vue

@@ -17,12 +17,19 @@ 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 extentFollowContent = ref(false)
+const extentFollowCamera = ref(false)
+const offset = ref([0, 0])
 const maxPixelRatio = ref('2')
 const gridPlacement = ref('below-data')
 const customLayers = ref(true)
@@ -31,6 +38,7 @@ const zoomReadout = ref('—')
 const layerReadout = ref('—')
 const eventText = ref('—')
 const interactionReadout = ref('还没有手势')
+const offsetReadout = ref('整图位移 0, 0')
 
 const SIZES = {
 	small: [148, 104],
@@ -40,6 +48,8 @@ const SIZES = {
 
 const dataset = buildDemoData({ count: 64, channels: 3 })
 let view = null
+let minimapHandle = null
+let wholeMapDrag = null
 let layerPaints = { grid: 0, compass: 0, gridStage: '—' }
 
 const drawGrid = ({ context, width, height, stage }) => {
@@ -125,6 +135,9 @@ const minimapOptions = () => {
 		margin: 12,
 		padding: 0.05,
 		extent: extent.value,
+		extentFollowContent: extentFollowContent.value,
+		extentFollowCamera: extentFollowCamera.value,
+		offset: [...offset.value],
 		background: 'inherit',
 		backgroundStyle: 'rgba(255, 255, 255, 0.94)',
 		borderColor: '#c7d8eb',
@@ -140,16 +153,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 +184,15 @@ 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}`
 	}
+	offsetReadout.value = `整图位移 ${Math.round(offset.value[0])}, ${Math.round(offset.value[1])}`
 }
 
+const zoomModeLabel = computed(() => zoomMode.value === 'manual'
+	? '手动缩放小图'
+	: zoomMode.value === 'follow' ? `跟随主图（指数 ${Number(followZoomScale.value).toFixed(1)}）` : '不缩放小图，滚轮缩放主图')
+
 const applyMinimap = () => {
 	if (!view) {
 		return
@@ -179,6 +200,9 @@ const applyMinimap = () => {
 	view.updateOptions({ minimap: minimapOptions() })
 	eventText.value = `updateOptions：${enabled.value ? '已更新鹰眼图配置' : '已卸载鹰眼图'}`
 	requestAnimationFrame(refreshReadout)
+	if (enabled.value) {
+		requestAnimationFrame(installMinimapHandle)
+	}
 }
 
 const resetZoom = () => {
@@ -193,8 +217,108 @@ 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'
+		? '拖拽演示：缩放模式已关闭，在小图空白处直接拖动仍能拉出框选矩形'
+		: '拖拽演示：已切到手动缩放，在小图空白处拖动平移小图内容'
+}
+
+/** 把 offset 写回实例：整图拖动只改角落位移，不重画小图，也不碰主图相机 */
+const setWholeMapOffset = (next) => {
+	const x = Number(next?.[0])
+	const y = Number(next?.[1])
+	offset.value = [Number.isFinite(x) ? x : 0, Number.isFinite(y) ? y : 0]
+	const options = view?.getOptions().minimap
+	if (options) {
+		view.updateOptions({ minimap: { ...options, offset: [...offset.value] } })
 	}
+	offsetReadout.value = `整图位移 ${Math.round(offset.value[0])}, ${Math.round(offset.value[1])}`
+}
+
+const resetWholeMapOffset = () => {
+	setWholeMapOffset([0, 0])
+	eventText.value = '整图拖动：位置已复位到当前角落'
+}
+
+const beginWholeMapDrag = (event) => {
+	if (!view || event.button !== 0) {
+		return
+	}
+	event.preventDefault()
+	event.stopPropagation()
+	const current = view.getOptions().minimap?.offset
+	const origin = Array.isArray(current) ? [Number(current[0]) || 0, Number(current[1]) || 0] : [...offset.value]
+	wholeMapDrag = { pointerId: event.pointerId, clientX: event.clientX, clientY: event.clientY, origin }
+	minimapHandle?.classList.add('is-dragging')
+	eventText.value = '整图拖动：按住顶部手柄移动，松手停在当前角落'
+}
+
+const moveWholeMapDrag = (event) => {
+	if (!wholeMapDrag || event.pointerId !== wholeMapDrag.pointerId) {
+		return
+	}
+	event.preventDefault()
+	event.stopPropagation()
+	setWholeMapOffset([
+		wholeMapDrag.origin[0] + event.clientX - wholeMapDrag.clientX,
+		wholeMapDrag.origin[1] + event.clientY - wholeMapDrag.clientY
+	])
+}
+
+const endWholeMapDrag = (event) => {
+	if (!wholeMapDrag || (event?.pointerId !== undefined && event.pointerId !== wholeMapDrag.pointerId)) {
+		return
+	}
+	event?.preventDefault()
+	event?.stopPropagation()
+	minimapHandle?.classList.remove('is-dragging')
+	wholeMapDrag = null
+	eventText.value = `整图拖动：已停在位移 ${Math.round(offset.value[0])}, ${Math.round(offset.value[1])}`
+}
+
+const nudgeWholeMap = (event) => {
+	const step = event.shiftKey ? 10 : 2
+	const delta = event.key === 'ArrowLeft' ? [-step, 0]
+		: event.key === 'ArrowRight' ? [step, 0]
+			: event.key === 'ArrowUp' ? [0, -step]
+				: event.key === 'ArrowDown' ? [0, step] : null
+	if (!delta) {
+		return
+	}
+	event.preventDefault()
+	event.stopPropagation()
+	setWholeMapOffset([offset.value[0] + delta[0], offset.value[1] + delta[1]])
+	eventText.value = '整图拖动：方向键也能微调整图位置（按住 Shift 每次 10px）'
+}
+
+/** 给库创建的根节点挂一个独立的拖动手柄：手柄自己 stopPropagation，不会触发小图框选 / 平移手势 */
+const installMinimapHandle = () => {
+	if (!view || minimapHandle) {
+		return
+	}
+	const root = view.getMinimapElement()
+	if (!root) {
+		return
+	}
+	minimapHandle = document.createElement('div')
+	minimapHandle.className = 'demo-minimap-drag-handle'
+	minimapHandle.dataset.demo = 'minimap-drag-handle'
+	minimapHandle.setAttribute('role', 'button')
+	minimapHandle.setAttribute('tabindex', '0')
+	minimapHandle.setAttribute('aria-label', '拖动整张鹰眼图')
+	minimapHandle.title = '按住拖动整张鹰眼图；方向键可微调'
+	minimapHandle.textContent = '拖动整图'
+	minimapHandle.addEventListener('pointerdown', beginWholeMapDrag)
+	minimapHandle.addEventListener('keydown', nudgeWholeMap)
+	root.append(minimapHandle)
 }
 
 const refreshLayerReadout = () => {
@@ -229,9 +353,18 @@ onMounted(() => {
 			eventText.value = `warning：${text}`
 		}
 	})
+	installMinimapHandle()
+	window.addEventListener('pointermove', moveWholeMapDrag, true)
+	window.addEventListener('pointerup', endWholeMapDrag, true)
+	window.addEventListener('pointercancel', endWholeMapDrag, true)
 })
 
 onBeforeUnmount(() => {
+	window.removeEventListener('pointermove', moveWholeMapDrag, true)
+	window.removeEventListener('pointerup', endWholeMapDrag, true)
+	window.removeEventListener('pointercancel', endWholeMapDrag, true)
+	minimapHandle?.remove()
+	minimapHandle = null
 	view?.destroy()
 	view = null
 })
@@ -289,7 +422,16 @@ const sizeSummary = computed(() => `${SIZES[size.value]?.[0] ?? 0}×${SIZES[size
 						</select>
 					</label>
 				</div>
-				<p class="dv-hint"><code>maxPixelRatio</code> 越大越清晰，也越吃填充率；高分屏按机器档位调到 2 通常就够。</p>
+				<div class="dv-row">
+					<label><input v-model="extentFollowContent" type="checkbox" data-demo="minimap-extent-content" @change="applyMinimap" /> 自动范围随内容更新（默认关）</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="extentFollowCamera" type="checkbox" data-demo="minimap-extent-follow" @change="applyMinimap" /> 自动范围随相机收窄（默认关）</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="minimap-offset-reset" @click="resetWholeMapOffset">整图位置复位</button>
+				</div>
+				<p class="dv-hint"><code>extentFollowContent</code> 默认关闭：筛选或删除外围要素不会改小图范围。按住小图顶部的「拖动整图」手柄可移动整张鹰眼图，方向键可微调；<code>offset</code> 会随其他控件一起保留。<code>maxPixelRatio</code> 越大越清晰，也越吃填充率；高分屏按机器档位调到 2 通常就够。</p>
 			</div>
 			<div class="dv-group">
 				<h3>规则与交互</h3>
@@ -309,11 +451,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 +476,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,18 +503,55 @@ 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>
 			<div class="dv-group">
 				<h3>读数</h3>
 				<p class="dv-readout" data-demo="minimap-readout">{{ readout }}</p>
+				<p class="dv-readout" data-demo="minimap-offset-readout">{{ offsetReadout }}</p>
 				<p class="dv-readout" data-demo="minimap-event" aria-live="polite">{{ eventText }}</p>
 				<p class="dv-readout" data-demo="minimap-interaction" aria-live="polite">{{ interactionReadout }}</p>
 			</div>
 		</aside>
 	</section>
 </template>
+
+<style scoped>
+:deep(.demo-minimap-drag-handle) {
+	position: absolute;
+	z-index: 4;
+	top: 4px;
+	left: 50%;
+	box-sizing: border-box;
+	min-width: 68px;
+	padding: 2px 9px;
+	transform: translateX(-50%);
+	border: 1px solid rgba(54, 120, 191, 0.38);
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 2px 7px rgba(31, 62, 105, 0.14);
+	color: #2f5e94;
+	font-size: 10px;
+	line-height: 16px;
+	text-align: center;
+	cursor: grab;
+	user-select: none;
+	touch-action: none;
+}
+
+:deep(.demo-minimap-drag-handle:hover),
+:deep(.demo-minimap-drag-handle:focus-visible) {
+	border-color: #3678bf;
+	background: #fff;
+	outline: none;
+}
+
+:deep(.demo-minimap-drag-handle.is-dragging) {
+	cursor: grabbing;
+	background: #eaf2fc;
+}
+</style>