gis-view-webgl2 0.1.13 → 0.1.15

package/docs/demos/ExtensionDemo.vue

@@ -1,17 +1,17 @@
-<script setup>
-/**
+<script setup>
+/**
  * 扩展能力：用同一个视图把六个扩展点串起来 ——
  * 运行时插件（view.use）、自定义图元（registerSymbol）、自定义条件运算符（registerOperator）
  * 自定义导出格式（defineExportFormat）、WebGL 自定义层（addWebGLLayer）与实例命令（registerCommand）。
  * 每一块都可单独开关，读数里能直接看到注册表与可见数据。
- */
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView, defineExportFormat } from '../../src/index.js'
-import { buildDemoData } from './shared/demoData.js'
-import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView, defineExportFormat } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
 const operatorOn = ref(false)
 const symbolOn = ref(false)
 const pluginOn = ref(false)
@@ -23,15 +23,15 @@ const webglDrawCount = ref(0)
 const commandRegistered = ref(false)
 const commandReadout = ref('实例命令尚未注册。注册后可以执行 focusHighestLoad。')
 const readout = ref('正在创建视图…')
-const exportText = ref('尚未导出。点上面的按钮，会走 defineExportFormat 注册的同步适配器。')
-
-const dataset = buildDemoData({ count: 18, channels: 0 })
-const points = dataset.points.map((point, index) => ({ ...point, extension_index: index }))
-const lines = dataset.linesWithoutChannel
-
-let view = null
-let disposeOperator = null
-let disposeSymbol = null
+const exportText = ref('尚未导出。点上面的按钮，会走 defineExportFormat 注册的同步适配器。')
+
+const dataset = buildDemoData({ count: 18, channels: 0 })
+const points = dataset.points.map((point, index) => ({ ...point, extension_index: index }))
+const lines = dataset.linesWithoutChannel
+
+let view = null
+let disposeOperator = null
+let disposeSymbol = null
 let disposePlugin = null
 let disposeExport = null
 let disposeWebgl = null
@@ -128,28 +128,28 @@ const drawWebglExtension = ({ gl, canvas, viewport, frame, project }) => {
 		emit('notice', `WebGL 自定义层绘制失败：${error instanceof Error ? error.message : String(error)}`)
 	}
 }
-
-/** 自定义图元：外圈实心 + 十字，颜色 / 描边 / 尺寸都取组件递进来的读数 */
+
+/** 自定义图元：外圈实心 + 十字，颜色 / 描边 / 尺寸都取组件递进来的读数 */
 const paintSpark = (context, info) => {
-	const centerX = info.width / 2
-	const centerY = info.height / 2
-	const radius = Math.min(info.width, info.height) * 0.31
-	const stroke = Math.max(1, info.strokeWidth * info.scale)
-	context.clearRect(0, 0, info.width, info.height)
-	context.beginPath()
-	context.arc(centerX, centerY, radius, 0, Math.PI * 2)
-	context.fillStyle = info.color
-	context.fill()
-	context.lineWidth = stroke
-	context.strokeStyle = info.strokeColor
-	context.stroke()
-	context.beginPath()
-	context.moveTo(centerX - radius * 0.52, centerY)
-	context.lineTo(centerX + radius * 0.52, centerY)
-	context.moveTo(centerX, centerY - radius * 0.52)
-	context.lineTo(centerX, centerY + radius * 0.52)
-	context.lineWidth = Math.max(1, stroke * 0.72)
-	context.strokeStyle = 'rgba(255, 255, 255, 0.92)'
+	const centerX = info.width / 2
+	const centerY = info.height / 2
+	const radius = Math.min(info.width, info.height) * 0.31
+	const stroke = Math.max(1, info.strokeWidth * info.scale)
+	context.clearRect(0, 0, info.width, info.height)
+	context.beginPath()
+	context.arc(centerX, centerY, radius, 0, Math.PI * 2)
+	context.fillStyle = info.color
+	context.fill()
+	context.lineWidth = stroke
+	context.strokeStyle = info.strokeColor
+	context.stroke()
+	context.beginPath()
+	context.moveTo(centerX - radius * 0.52, centerY)
+	context.lineTo(centerX + radius * 0.52, centerY)
+	context.moveTo(centerX, centerY - radius * 0.52)
+	context.lineTo(centerX, centerY + radius * 0.52)
+	context.lineWidth = Math.max(1, stroke * 0.72)
+	context.strokeStyle = 'rgba(255, 255, 255, 0.92)'
 	context.stroke()
 }
 /** 同名覆盖的第二支画笔：菱形，用来演示 registerSymbol 重新注册后贴图与标签锚点一起更新 */
@@ -174,13 +174,13 @@ const paintSparkDiamond = (context, info) => {
 	context.fillStyle = 'rgba(255, 255, 255, 0.92)'
 	context.fill()
 }
-
+
 const visiblePointCount = () => view?.getVisibleData()?.points?.length ?? points.length
 const COMMAND_NAME = 'focusHighestLoad'
 const refreshReadout = () => {
-	if (!view) {
-		return
-	}
+	if (!view) {
+		return
+	}
 	const operators = view.listOperators()
 	const symbols = view.listSymbols()
 	const commands = view.listCommands()
@@ -194,32 +194,32 @@ const refreshReadout = () => {
 		`WebGL 层 ${webglMounted.value ? `已挂载 · ${webglEnabled.value ? '绘制中' : '已隐藏'} · order ${webglOrder.value} · draw ${webglDrawCount.value} 次` : '未挂载'}`
 	].join(' · ')
 }
-
-const buildOptions = () => ({
-	points,
-	lines,
-	pointStyle: { size: 8, color: '#ffffff', strokeColor: '#3678bf', strokeWidth: 2 },
-	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.62)' },
-	showGrid: true,
-	gridColor: 'rgba(126, 168, 214, 0.2)',
-	fitPadding: 40,
-	features: 'view',
-	label: { enabled: true, content: '{name}', position: 'top', gap: 7, maxCount: 20, style: { color: '#27405f', fontSize: '11px' } },
+
+const buildOptions = () => ({
+	points,
+	lines,
+	pointStyle: { size: 8, color: '#ffffff', strokeColor: '#3678bf', strokeWidth: 2 },
+	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.62)' },
+	showGrid: true,
+	gridColor: 'rgba(126, 168, 214, 0.2)',
+	fitPadding: 40,
+	features: 'view',
+	label: { enabled: true, content: '{name}', position: 'top', gap: 7, maxCount: 20, style: { color: '#27405f', fontSize: '11px' } },
 	onReady: () => emit('notice', '扩展能力：已挂载 6 个扩展点')
 })
-
-const toggleOperator = () => {
-	operatorOn.value = !operatorOn.value
-	view?.setFilter(operatorOn.value ? { extension_index: { evenIndex: true } } : null)
-	refreshReadout()
-	emit('notice', operatorOn.value ? '自定义运算符 evenIndex 正在筛选偶数节点' : '已清空自定义筛选')
-}
-
+
+const toggleOperator = () => {
+	operatorOn.value = !operatorOn.value
+	view?.setFilter(operatorOn.value ? { extension_index: { evenIndex: true } } : null)
+	refreshReadout()
+	emit('notice', operatorOn.value ? '自定义运算符 evenIndex 正在筛选偶数节点' : '已清空自定义筛选')
+}
+
 const toggleSymbol = () => {
-	symbolOn.value = !symbolOn.value
+	symbolOn.value = !symbolOn.value
 	// 一次批量补丁：只发一条 updatePoints、只记一步历史（与逐个 updatePoint({ symbol }) 的最终数据一致）
-	const result = view?.patchPoints(points.map(point => point.id), { symbol: symbolOn.value ? 'spark' : null })
-	refreshReadout()
+	const result = view?.patchPoints(points.map(point => point.id), { symbol: symbolOn.value ? 'spark' : null })
+	refreshReadout()
 	emit('notice', symbolOn.value ? `已切到自定义图元 spark（${result?.count ?? 0} 个节点）` : '已回到内置圆形图元')
 }
 const cycleSymbolPainter = () => {
@@ -234,27 +234,27 @@ const cycleSymbolPainter = () => {
 	refreshReadout()
 	emit('notice', `同名重新注册 spark：画笔已换成${next === 'diamond' ? '菱形' : '十字'}，画面当场重烘焙`)
 }
-
+
 const togglePlugin = () => {
-	pluginOn.value = !pluginOn.value
-	if (pluginOn.value) {
-		disposePlugin = view?.use(instance => {
-			const badge = document.createElement('div')
-			badge.className = 'demo-extension-badge'
-			badge.dataset.demo = 'extension-plugin-badge'
-			badge.textContent = 'plugin · view.use()'
-			instance.el.appendChild(badge)
-			return {
-				destroy() {
-					badge.remove()
-				}
-			}
-		}) ?? null
-	}
-	else {
-		disposePlugin?.()
-		disposePlugin = null
-	}
+	pluginOn.value = !pluginOn.value
+	if (pluginOn.value) {
+		disposePlugin = view?.use(instance => {
+			const badge = document.createElement('div')
+			badge.className = 'demo-extension-badge'
+			badge.dataset.demo = 'extension-plugin-badge'
+			badge.textContent = 'plugin · view.use()'
+			instance.el.appendChild(badge)
+			return {
+				destroy() {
+					badge.remove()
+				}
+			}
+		}) ?? null
+	}
+	else {
+		disposePlugin?.()
+		disposePlugin = null
+	}
 	refreshReadout()
 	emit('notice', pluginOn.value ? '插件已挂载：左下角出现徽标' : '插件已卸载')
 }
@@ -349,46 +349,46 @@ const requestWebglFrame = () => {
 }
 
 const exportSummary = () => {
-	if (!view) {
-		return
-	}
-	try {
-		const result = view.exportData({ format: 'extension-summary', labels: false })
-		exportText.value = JSON.stringify(result, null, 2)
-		emit('notice', `自定义导出完成：${result.highLoadCount} 个高负载节点`)
-	}
-	catch (error) {
-		exportText.value = `导出失败：${error instanceof Error ? error.message : String(error)}`
-	}
-}
-
-onMounted(() => {
-	view = createGisView(container.value, buildOptions())
-	disposeOperator = view.registerOperator('evenIndex', enabled => current => !enabled || Number(current) % 2 === 0)
-	disposeSymbol = view.registerSymbol('spark', paintSpark)
-	disposeExport = defineExportFormat('extension-summary', ({ document, counts }) => {
-		const highLoad = document.points.filter(point => Number(point.max_loading_rate) >= 1)
-		return {
-			schema: 'gis-view.extension-summary.v1',
-			counts,
-			highLoadCount: highLoad.length,
-			highLoadStations: highLoad.map(point => ({
-				id: point.id,
-				name: point.name,
-				load: point.max_loading_rate
-			}))
-		}
-	})
-	refreshReadout()
-})
-
+	if (!view) {
+		return
+	}
+	try {
+		const result = view.exportData({ format: 'extension-summary', labels: false })
+		exportText.value = JSON.stringify(result, null, 2)
+		emit('notice', `自定义导出完成：${result.highLoadCount} 个高负载节点`)
+	}
+	catch (error) {
+		exportText.value = `导出失败：${error instanceof Error ? error.message : String(error)}`
+	}
+}
+
+onMounted(() => {
+	view = createGisView(container.value, buildOptions())
+	disposeOperator = view.registerOperator('evenIndex', enabled => current => !enabled || Number(current) % 2 === 0)
+	disposeSymbol = view.registerSymbol('spark', paintSpark)
+	disposeExport = defineExportFormat('extension-summary', ({ document, counts }) => {
+		const highLoad = document.points.filter(point => Number(point.max_loading_rate) >= 1)
+		return {
+			schema: 'gis-view.extension-summary.v1',
+			counts,
+			highLoadCount: highLoad.length,
+			highLoadStations: highLoad.map(point => ({
+				id: point.id,
+				name: point.name,
+				load: point.max_loading_rate
+			}))
+		}
+	})
+	refreshReadout()
+})
+
 onBeforeUnmount(() => {
-	disposePlugin?.()
-	disposePlugin = null
-	disposeSymbol?.()
-	disposeSymbol = null
-	disposeOperator?.()
-	disposeOperator = null
+	disposePlugin?.()
+	disposePlugin = null
+	disposeSymbol?.()
+	disposeSymbol = null
+	disposeOperator?.()
+	disposeOperator = null
 	disposeExport?.()
 	disposeExport = null
 	disposeWebgl?.()
@@ -396,52 +396,52 @@ onBeforeUnmount(() => {
 	disposeCommand?.()
 	disposeCommand = null
 	view?.destroy()
-	view = null
-})
-</script>
-
-<template>
-	<section class="dv-demo">
-		<div class="dv-stage">
-			<div ref="container" class="dv-canvas"></div>
-			<div class="dv-toolbar">
-				<button type="button" @click="view?.fitView(40)">适应全部</button>
-			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
+	view = null
+})
+</script>
+
+<template>
+	<section class="dv-demo">
+		<div class="dv-stage">
+			<div ref="container" class="dv-canvas"></div>
+			<div class="dv-toolbar">
+				<button type="button" @click="view?.fitView(40)">适应全部</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
 				<h3>六个扩展点</h3>
 				<div class="dv-row">
 					<button
-						type="button"
-						class="dv-button"
-						:class="{ 'dv-button--primary': operatorOn }"
-						:aria-pressed="operatorOn"
-						data-demo="extension-operator"
-						@click="toggleOperator"
-					>{{ operatorOn ? '关闭自定义筛选' : '自定义运算符筛选' }}</button>
-				</div>
-				<div class="dv-row">
-					<button
-						type="button"
-						class="dv-button"
-						:class="{ 'dv-button--primary': symbolOn }"
-						:aria-pressed="symbolOn"
-						data-demo="extension-symbol"
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': operatorOn }"
+						:aria-pressed="operatorOn"
+						data-demo="extension-operator"
+						@click="toggleOperator"
+					>{{ operatorOn ? '关闭自定义筛选' : '自定义运算符筛选' }}</button>
+				</div>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': symbolOn }"
+						:aria-pressed="symbolOn"
+						data-demo="extension-symbol"
 						@click="toggleSymbol"
 					>{{ symbolOn ? '换回内置圆形' : '使用自定义图元' }}</button>
 					<button type="button" class="dv-button" :disabled="!symbolOn" data-demo="extension-symbol-variant" @click="cycleSymbolPainter">同名换画笔</button>
 				</div>
-				<div class="dv-row">
-					<button
-						type="button"
-						class="dv-button"
-						:class="{ 'dv-button--primary': pluginOn }"
-						:aria-pressed="pluginOn"
-						data-demo="extension-plugin"
-						@click="togglePlugin"
-					>{{ pluginOn ? '卸载运行时插件' : '挂载运行时插件' }}</button>
-				</div>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': pluginOn }"
+						:aria-pressed="pluginOn"
+						data-demo="extension-plugin"
+						@click="togglePlugin"
+					>{{ pluginOn ? '卸载运行时插件' : '挂载运行时插件' }}</button>
+				</div>
 				<div class="dv-row">
 					<button type="button" class="dv-button dv-button--primary" data-demo="extension-export" @click="exportSummary">自定义格式导出</button>
 				</div>
@@ -472,44 +472,44 @@ onBeforeUnmount(() => {
 					<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> 原地维护，命令通过 <code>executeCommand</code> 同步执行并返回 handler 的结果。</p>
-			</div>
+			</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>
-			</div>
-		</aside>
-	</section>
-</template>
-
-<style scoped>
-.demo-extension-export {
-	max-height: 190px;
-	margin: 0;
-	overflow: auto;
-	white-space: pre-wrap;
-	word-break: break-all;
-	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-	font-size: 11px;
-}
-
-:global(.demo-extension-badge) {
-	position: absolute;
-	left: 10px;
-	bottom: 10px;
-	z-index: 4;
-	padding: 5px 9px;
-	border: 1px solid rgba(54, 120, 191, 0.35);
-	border-radius: 999px;
-	background: rgba(255, 255, 255, 0.9);
-	color: #2f5e94;
-	font-size: 11px;
-	line-height: 1.4;
-	pointer-events: none;
-	box-shadow: 0 4px 14px rgba(31, 62, 105, 0.14);
-}
-</style>
+			<div class="dv-group">
+				<h3>导出结果</h3>
+				<pre class="dv-readout demo-extension-export" data-demo="extension-export-text">{{ exportText }}</pre>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.demo-extension-export {
+	max-height: 190px;
+	margin: 0;
+	overflow: auto;
+	white-space: pre-wrap;
+	word-break: break-all;
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+	font-size: 11px;
+}
+
+:global(.demo-extension-badge) {
+	position: absolute;
+	left: 10px;
+	bottom: 10px;
+	z-index: 4;
+	padding: 5px 9px;
+	border: 1px solid rgba(54, 120, 191, 0.35);
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.9);
+	color: #2f5e94;
+	font-size: 11px;
+	line-height: 1.4;
+	pointer-events: none;
+	box-shadow: 0 4px 14px rgba(31, 62, 105, 0.14);
+}
+</style>

package/docs/demos/GisViewDemo.vue

@@ -1,64 +1,64 @@
-<script setup>
-import { provide } from 'vue'
-import './gis-view-demo/demo.css'
-import { DEMO_CONTEXT } from './gis-view-demo/demoContext.js'
-import { useGisViewDemo } from './gis-view-demo/useGisViewDemo.js'
-import GisViewDemoHeading from './gis-view-demo/GisViewDemoHeading.vue'
-import GisViewDemoCardHeader from './gis-view-demo/GisViewDemoCardHeader.vue'
-import GisViewDemoPanelStack from './gis-view-demo/GisViewDemoPanelStack.vue'
-import GisViewDemoStage from './gis-view-demo/GisViewDemoStage.vue'
-import GisViewDemoDialogs from './gis-view-demo/GisViewDemoDialogs.vue'
-import GisViewDemoFooter from './gis-view-demo/GisViewDemoFooter.vue'
-
-const demoContext = useGisViewDemo()
-// 现有自测通过根组件 setupState 读取这些 demo 内部读数；状态主体仍在 composable 里。
-const {
-	applyLabelEdit,
-	channelMemberLabels,
-	channelReadyPayload,
-	convertFromLngLat,
-	convertFromScreen,
-	convertLngLatText,
-	convertReadout,
-	convertScreenText,
-	dataChangeLabel,
-	dataShapeReadout,
-	dataset,
-	exportDataSample,
-	featurePreset,
-	hostScaleText,
-	labelEditFontSize,
-	labelEditId,
-	labelEditReadout,
-	labelEditTarget,
-	labelListReadout,
-	labelRoundTripReadout,
-	labelRows,
-	labelStateReadout,
-	liveDragHint,
-	lngLatText,
-	perfStatsText,
-	perfText,
-	qualityText,
-	resetAllLabels,
-	ruleReadout,
-	screenText,
-	viewRef,
-	warningText
-} = demoContext
-
-provide(DEMO_CONTEXT, demoContext)
-</script>
-
-<template>
-	<div class="demo-view gis-view-demo">
-		<GisViewDemoHeading />
-		<section class="demo-card">
-			<GisViewDemoCardHeader />
-			<GisViewDemoPanelStack />
-			<GisViewDemoStage />
-			<GisViewDemoDialogs />
-			<GisViewDemoFooter />
-		</section>
-	</div>
-</template>
+<script setup>
+import { provide } from 'vue'
+import './gis-view-demo/demo.css'
+import { DEMO_CONTEXT } from './gis-view-demo/demoContext.js'
+import { useGisViewDemo } from './gis-view-demo/useGisViewDemo.js'
+import GisViewDemoHeading from './gis-view-demo/GisViewDemoHeading.vue'
+import GisViewDemoCardHeader from './gis-view-demo/GisViewDemoCardHeader.vue'
+import GisViewDemoPanelStack from './gis-view-demo/GisViewDemoPanelStack.vue'
+import GisViewDemoStage from './gis-view-demo/GisViewDemoStage.vue'
+import GisViewDemoDialogs from './gis-view-demo/GisViewDemoDialogs.vue'
+import GisViewDemoFooter from './gis-view-demo/GisViewDemoFooter.vue'
+
+const demoContext = useGisViewDemo()
+// 现有自测通过根组件 setupState 读取这些 demo 内部读数；状态主体仍在 composable 里。
+const {
+	applyLabelEdit,
+	channelMemberLabels,
+	channelReadyPayload,
+	convertFromLngLat,
+	convertFromScreen,
+	convertLngLatText,
+	convertReadout,
+	convertScreenText,
+	dataChangeLabel,
+	dataShapeReadout,
+	dataset,
+	exportDataSample,
+	featurePreset,
+	hostScaleText,
+	labelEditFontSize,
+	labelEditId,
+	labelEditReadout,
+	labelEditTarget,
+	labelListReadout,
+	labelRoundTripReadout,
+	labelRows,
+	labelStateReadout,
+	liveDragHint,
+	lngLatText,
+	perfStatsText,
+	perfText,
+	qualityText,
+	resetAllLabels,
+	ruleReadout,
+	screenText,
+	viewRef,
+	warningText
+} = demoContext
+
+provide(DEMO_CONTEXT, demoContext)
+</script>
+
+<template>
+	<div class="demo-view gis-view-demo">
+		<GisViewDemoHeading />
+		<section class="demo-card">
+			<GisViewDemoCardHeader />
+			<GisViewDemoPanelStack />
+			<GisViewDemoStage />
+			<GisViewDemoDialogs />
+			<GisViewDemoFooter />
+		</section>
+	</div>
+</template>