gis-view-webgl2 0.1.0 → 0.1.1

package/docs/demos/BackendSyncDemo.vue

@@ -33,7 +33,7 @@
  * 推送策略（这一轮新增）：「攒批」是缺省 —— 改动只进队列，点提交 / 整份保存时一次发；「改完就传」
  * 落地就发，但同一目标的中间态只留最后一份（合并），拖拽只在 phase === 'end' 发一条。画布上的拖节点 /
  * 拖拐点也接进同一套：onPointDrag / onWaypointChange 里按 phase 过滤，中间态一条请求都不发。
- * 「视口导出」那一块是 exportViewportData：只取屏幕上看得见的那一撮（节点 / 线路 / 通道 + 拐点分组）。
+ * 「视口导出」那一块是 exportData({ scope: 'viewport' })：只取屏幕上看得见的那一撮（节点 / 线路 / 通道 + 拐点分组）。
  */
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { createGisView } from '../../src/index.js'
@@ -749,19 +749,21 @@ const pullServer = () => {
 	pushLog(result.ok ? `importData：服务端那一份已回灌（${data.points.length} 节点 / ${data.lines.length} 线路 / ${(view.getOptions().channels ?? []).length} 通道）` : `importData 没吃下服务端那一份：${result.reason ?? ''}`)
 }
 
-/** 视口导出：只取屏幕上看得见的那一撮（exportViewportData） */
+/** 视口导出：只取屏幕上看得见的那一撮（exportData · scope: viewport） */
 const exportViewport = (format) => {
-	const result = view.exportViewportData({ margin: Number(margin.value) || 0, format })
+	const range = Number(margin.value) || 0
+	const result = view.exportData({ scope: 'viewport', margin: range, format })
 	const counts = result.counts ?? {}
-	viewportText.value = `${format === 'input' ? 'input 口径' : '业务口径'}：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道 / ${counts.parallelGroups ?? 0} 拐点分组 · margin ${result.margin}px`
+	const viewRect = result.viewRect ?? view.getViewRect()
+	viewportText.value = `${format === 'input' ? 'input 口径' : '业务口径'}：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道 / ${counts.parallelGroups ?? 0} 拐点分组 · margin ${result.margin ?? range}px`
 	viewportSample.value = shortJson({
 		counts: result.counts,
-		viewRect: result.viewRect,
+		viewRect,
 		...(format === 'input'
 			? { points: (result.points ?? []).map(point => point.id), lines: (result.lines ?? []).map(line => line.id), channels: (result.channels ?? []).map(channel => channel.id) }
 			: { parallelGroups: result.parallelGroups ?? [] })
 	}, 2000)
-	pushLog(`exportViewportData({ format: '${format}', margin: ${result.margin} })：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道`)
+	pushLog(`exportData({ scope: 'viewport', format: '${format}', margin: ${result.margin ?? range} })：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道`)
 }
 
 onMounted(() => {
@@ -1049,7 +1051,7 @@ PUT   /gis/documents
 			</div>
 
 			<div class="dv-group">
-				<h3>视口内导出（exportViewportData）</h3>
+				<h3>视口内导出（exportData · scope: viewport）</h3>
 				<div class="dv-row">
 					<label>margin <input v-model.number="margin" type="number" step="8" min="0" data-demo="sync-margin" /></label>
 					<button type="button" class="dv-button" data-demo="sync-export-view" @click="exportViewport('view')">业务口径</button>
@@ -1057,7 +1059,7 @@ PUT   /gis/documents
 				</div>
 				<p class="dv-readout" data-demo="sync-viewport-text">{{ viewportText }}</p>
 				<pre class="bs-json" data-demo="sync-viewport-sample">{{ viewportSample }}</pre>
-				<p class="dv-hint">`view.exportViewportData({ margin })`：只出屏幕上看得见的那一撮 —— 节点按中心、线路按包围盒、通道跟着成员回线走（分组不拆散）；margin 是屏幕 CSS 像素的外扩，返回多带 `viewRect` / `margin`。</p>
+				<p class="dv-hint">`view.exportData({ scope: 'viewport', margin })`：只出屏幕上看得见的那一撮 —— 节点按中心、线路按包围盒、通道跟着成员回线走（分组不拆散）；margin 是屏幕 CSS 像素的外扩。业务口径另带 `viewRect` / `margin`，input / full / 自定义格式保持导出器原始结果。</p>
 			</div>
 
 			<div class="dv-group">

package/docs/demos/BasicDemo.vue

@@ -1,22 +1,22 @@
-<script setup>
-/**
- * 基础视图：一份数据 + 最少的配置，重点看相机与拾取这两组读数怎么拿。
- *
- * 面板上就四个开关（数据量 / 网格 / 节点标签 / 通道），读数栏把
- * onCameraChange / onClick / onSelect / onStats 的值直接摊开 ——
- * 事件载荷长什么样、什么时候发，一眼能对上。
- */
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView } from '../../src/index.js'
-import { buildDemoData } from './shared/demoData.js'
-import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const pointCount = ref(28)
-const gridOn = ref(true)
-const labelOn = ref(true)
-const channelOn = ref(true)
+<script setup>
+/**
+ * 基础视图：一份数据 + 最少的配置，重点看相机与拾取这两组读数怎么拿。
+ *
+ * 面板上就四个开关（数据量 / 网格 / 节点标签 / 通道），读数栏把
+ * onCameraChange / onClick / onSelect / onStats 的值直接摊开 ——
+ * 事件载荷长什么样、什么时候发，一眼能对上。
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const pointCount = ref(28)
+const gridOn = ref(true)
+const labelOn = ref(true)
+const channelOn = ref(true)
 const readouts = ref({ camera: '—', pick: '未选中', stats: '—', event: '—' })
 let dataset = buildDemoData({ count: 28 })
 let view = null
@@ -69,10 +69,10 @@ const buildOptions = () => ({
 	// 功能开关缺省全关：这一页要能平移缩放、能悬停选中，显式打开查看类（见 docs/GisView.md 的「功能开关」）
 	features: 'view',
 	label: labelOptions(),
-	onReady: () => {
-		emit('notice', `已加载 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
-		readouts.value = { ...readouts.value, event: 'ready：WebGL2 上下文就绪' }
-	},
+	onReady: () => {
+		emit('notice', `已加载 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
+		readouts.value = { ...readouts.value, event: 'ready：WebGL2 上下文就绪' }
+	},
 	onClick: (payload) => {
 		readouts.value = { ...readouts.value, pick: describeTarget(payload), event: `click：${describeTarget(payload)}` }
 	},
@@ -86,10 +86,10 @@ const buildOptions = () => ({
 			event: count ? `select：${mode} 选中 ${count} 个` : 'select：清空选中'
 		}
 	},
-	onCameraChange: (camera) => {
-		// 相机每帧都在变：只把读数写进面板，不再触发别的重活
-		readouts.value = { ...readouts.value, camera: `scale ${camera.scale.toPrecision(4)} px/单位 · 中心 ${camera.center[0].toFixed(3)}, ${camera.center[1].toFixed(3)}` }
-	},
+	onCameraChange: (camera) => {
+		// 相机每帧都在变：只把读数写进面板，不再触发别的重活
+		readouts.value = { ...readouts.value, camera: `scale ${camera.scale.toPrecision(4)} px/单位 · 中心 ${camera.center[0].toFixed(3)}, ${camera.center[1].toFixed(3)}` }
+	},
 	onStats: (next) => {
 		// fps 每帧都变，节流后再写响应式数据（十万级数据下每帧重渲染面板本身也是开销）
 		const now = performance.now()
@@ -101,23 +101,23 @@ const buildOptions = () => ({
 		const speed = next.idle ? '空闲' : `${Math.round(next.fps)} fps`
 		readouts.value = { ...readouts.value, stats: `${speed} · 最近一帧 ${next.frameMs.toFixed(2)} ms · ${next.pointCount.toLocaleString()} 点 / ${next.lineCount.toLocaleString()} 线` }
 	},
-	onWarning: (text) => {
-		readouts.value = { ...readouts.value, event: `warning：${text}` }
-	}
-})
-
-/** 换数据量：数据与通道一起换掉，相机重新适应（不改选项里的样式，所以点位外观不跳） */
-const applyData = () => {
-	if (!view) {
-		return
-	}
-	dataset = buildDemoData({ count: pointCount.value })
-	view.updateData(dataset.points, channelOn.value ? dataset.lines : dataset.linesWithoutChannel)
-	view.updateOptions({ channels: channelOn.value ? dataset.channels : [] })
-	view.fitView(40)
-	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
-}
-
+	onWarning: (text) => {
+		readouts.value = { ...readouts.value, event: `warning：${text}` }
+	}
+})
+
+/** 换数据量：数据与通道一起换掉，相机重新适应（不改选项里的样式，所以点位外观不跳） */
+const applyData = () => {
+	if (!view) {
+		return
+	}
+	dataset = buildDemoData({ count: pointCount.value })
+	view.updateData(dataset.points, channelOn.value ? dataset.lines : dataset.linesWithoutChannel)
+	view.updateOptions({ channels: channelOn.value ? dataset.channels : [] })
+	view.fitView(40)
+	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
+}
+
 /**
  * 开关键：只改与自己相关的那几项 —— 一次「把整份 options 再发一遍」会连数据一起重发，
  * 拖过的节点与标签偏移都会被冲回原样，这里只改网格与标签两项。
@@ -133,15 +133,15 @@ const applyChannel = () => {
 		channels: channelOn.value ? dataset.channels : []
 	})
 }
-
-const resetCamera = () => {
-	view?.fitView(40)
-}
-
-const zoomBy = (factor) => {
-	view?.zoomBy(factor)
-}
-
+
+const resetCamera = () => {
+	view?.fitView(40)
+}
+
+const zoomBy = (factor) => {
+	view?.zoomBy(factor)
+}
+
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
 	// 标签拖动：面板上给一行「偏移记在状态里」的读数，松手后偏移一直留在 getLabelStates() 里
@@ -152,52 +152,52 @@ onMounted(() => {
 		readouts.value = { ...readouts.value, event: `labelDrag：${payload.phase} · ${payload.id ?? payload.index} 偏移 [${payload.offset.map(value => Math.round(value)).join(', ')}]` }
 	})
 })
-
-onBeforeUnmount(() => {
-	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="resetCamera">适应全部</button>
-				<button type="button" @click="zoomBy(1.4)">放大</button>
-				<button type="button" @click="zoomBy(1 / 1.4)">缩小</button>
-			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>数据</h3>
-				<div class="dv-row">
-					<label>节点数
-						<select v-model.number="pointCount" @change="applyData">
-							<option :value="12">12</option>
-							<option :value="28">28</option>
-							<option :value="60">60</option>
-						</select>
-					</label>
-					<button type="button" class="dv-button" @click="applyData">重建数据</button>
-				</div>
-				<div class="dv-row">
-					<label><input v-model="gridOn" type="checkbox" @change="applyOptions" /> 网格</label>
-					<label><input v-model="labelOn" type="checkbox" @change="applyOptions" /> 节点标签</label>
+
+onBeforeUnmount(() => {
+	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="resetCamera">适应全部</button>
+				<button type="button" @click="zoomBy(1.4)">放大</button>
+				<button type="button" @click="zoomBy(1 / 1.4)">缩小</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>数据</h3>
+				<div class="dv-row">
+					<label>节点数
+						<select v-model.number="pointCount" @change="applyData">
+							<option :value="12">12</option>
+							<option :value="28">28</option>
+							<option :value="60">60</option>
+						</select>
+					</label>
+					<button type="button" class="dv-button" @click="applyData">重建数据</button>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="gridOn" type="checkbox" @change="applyOptions" /> 网格</label>
+					<label><input v-model="labelOn" type="checkbox" @change="applyOptions" /> 节点标签</label>
 					<label><input v-model="channelOn" type="checkbox" @change="applyChannel" /> 通道</label>
-				</div>
-				<p class="dv-hint">打开标签后可以拖着标签走一段：松手后偏移记在状态里，再移动节点标签跟着走。</p>
-			</div>
-			<div class="dv-group">
-				<h3>读数</h3>
-				<p class="dv-readout">相机：{{ readouts.camera }}</p>
-				<p class="dv-readout">拾取：{{ readouts.pick }}</p>
-				<p class="dv-readout">性能：{{ readouts.stats }}</p>
-				<p class="dv-readout">事件：{{ readouts.event }}</p>
-			</div>
-			<div class="dv-group">
-				<h3>试一下</h3>
-				<p class="dv-hint">单击节点 / 线路 / 通道看「拾取」；空白处拖框看「选中」；滚轮缩放、拖动平移时看相机的 scale 与中心。</p>
-			</div>
-		</aside>
-	</section>
-</template>
+				</div>
+				<p class="dv-hint">打开标签后可以拖着标签走一段：松手后偏移记在状态里，再移动节点标签跟着走。</p>
+			</div>
+			<div class="dv-group">
+				<h3>读数</h3>
+				<p class="dv-readout">相机：{{ readouts.camera }}</p>
+				<p class="dv-readout">拾取：{{ readouts.pick }}</p>
+				<p class="dv-readout">性能：{{ readouts.stats }}</p>
+				<p class="dv-readout">事件：{{ readouts.event }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>试一下</h3>
+				<p class="dv-hint">单击节点 / 线路 / 通道看「拾取」；空白处拖框看「选中」；滚轮缩放、拖动平移时看相机的 scale 与中心。</p>
+			</div>
+		</aside>
+	</section>
+</template>

package/docs/demos/BatchAddDemo.vue

@@ -74,7 +74,7 @@ const addPointBatch = () => runAction('addPoints', () => {
 	}))
 	const result = view.addPoints(items)
 	if (result.ok) {
-		view.select(result.items.map(item => item.id))
+		view.selectFeatures(result.items.map(item => item.id))
 	}
 	return `addPoints → ${result.count} 个节点 · indexes=[${result.indexes.join(', ')}]`
 })
@@ -95,7 +95,7 @@ const addLineBatch = () => runAction('addLines', () => {
 	]
 	const result = view.addLines(items)
 	if (result.ok) {
-		view.select(result.items.map(item => item.id))
+		view.selectFeatures(result.items.map(item => item.id))
 	}
 	return `addLines → ${result.count} 条线路 · ${items.map(item => item.name).join(' / ')}`
 })
@@ -133,7 +133,7 @@ const addChannelBatch = () => runAction('addChannels', () => {
 			lineProps: { vn_kv: 230, max_loading_rate: 0.61 }
 		}
 	])
-	view.select(result.lineIds)
+	view.selectFeatures(result.lineIds)
 	return `addChannels → ${result.count} 条通道 · ${result.channelIds.join(' / ')} · ${result.lineIds.length} 条回线`
 })
 
@@ -162,7 +162,7 @@ const addWaypointBatch = () => runAction('addWaypoints', () => {
 		[Number((from.x + dx * 0.72 + normal[0] * 0.08).toFixed(5)), Number((from.y + dy * 0.72 + normal[1] * 0.08).toFixed(5))]
 	]
 	const result = view.addWaypoints(line.id, coordinates)
-	view.select(line.id)
+	view.selectFeatures(line.id)
 	return result.ok
 		? `addWaypoints → ${result.count} 个拐点 · ${line.id} · ${JSON.stringify(result.coordinates)}`
 		: `addWaypoints 没有落地：${result.reason}`
@@ -205,7 +205,7 @@ const addChannelGroupBatch = () => runAction('addChannelGroups', () => {
 		}
 	]
 	const result = view.addChannelGroups(channel.id, groups)
-	view.select(result.lineIds)
+	view.selectFeatures(result.lineIds)
 	return result.ok
 		? `addChannelGroups → ${result.count} 组 / ${result.lineIds.length} 条回线 · ${result.groupIds.join(' / ')}`
 		: `addChannelGroups 没有落地：${result.reason}`

package/docs/demos/ChannelDemo.vue

@@ -14,10 +14,11 @@
  *   确认之后才动数据（组件不弹界面，框是这一页自己按载荷画的）。
  * - 导出：`exportData({ format: 'input' })` 拿回与输入同构的一份数据（含通道与拐点），
  *   点「按导出重建」就把它喂回 `updateData` + `updateOptions` —— 导出再导入即回显；
- *   旁边一并给一份 `format: 'view'` 的业务口径（line_data / parallel_groups 那套列名）。
+ *   旁边一并给一份 `format: 'view'` 的业务口径（line_data / parallel_groups 那套列名）；
+ *   「后端 DTO」按钮演示 `defineExportFormat` 带作用域注册的项目自定义格式。
  */
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
-import { createGisView } from '../../src/index.js'
+import { createGisView, defineExportFormat, listExportFormats } from '../../src/index.js'
 import { buildDemoData } from './shared/demoData.js'
 import { createFakeBackend, cloneFakeData, FAKE_BACKEND_MODES } from './shared/fakeBackend.js'
 import './shared/demoStyle.css'
@@ -49,6 +50,35 @@ const backendLastSuccess = shallowRef(null)
 const backendLogLines = ref([])
 const waypointSyncText = ref('拐点 / 分组同步：—')
 const fakeBackend = createFakeBackend({ initialVersion: 8, latency: 420, prefix: 'channel' })
+const DTO_FORMAT = 'channel-backend-dto'
+let disposeDtoFormat = null
+/** 自定义导出格式：只把标准文档映射成这一页后端要的列名，不碰组件内部数组 */
+const backendDtoAdapter = ({ document: source, counts }) => ({
+	schema: 'gis-view.channel-demo.v1',
+	counts,
+	camera: source.view?.camera ?? null,
+	stations: source.points.map(point => ({
+		station_id: point.id,
+		station_name: point.name ?? '',
+		x: point.x,
+		y: point.y
+	})),
+	routes: source.lines.map(line => ({
+		route_id: line.id,
+		from: line.from ?? null,
+		to: line.to ?? null,
+		coords: line.path ?? []
+	})),
+	channels: source.channels.map(channel => ({
+		channel_id: channel.id,
+		channel_name: channel.name ?? '',
+		groups: (channel.groups ?? []).map(group => ({
+			group_id: group.id,
+			line_ids: group.lineIds,
+			waypoints: group.path
+		}))
+	}))
+})
 let logSeq = 0
 let backendLogSeq = 0
 let backendJobSeq = 0
@@ -661,6 +691,18 @@ const exportData = () => {
 	return exported
 }
 
+/** 自定义格式按钮：同一份标准文档，不必再手写深拷贝 / 坐标归一 / JSON 安全 */
+const exportBackendDto = () => {
+	const dto = view?.exportData({ format: DTO_FORMAT })
+	if (!dto) {
+		return
+	}
+	exportText.value = `自定义格式 ${DTO_FORMAT}：${dto.counts.points} 站 / ${dto.counts.lines} 线路 / ${dto.counts.channels} 通道 · 通道分组 ${dto.counts.groups}`
+		+ `　|　当前可注册表：${listExportFormats().join(' / ')}`
+	pushLog(`自定义导出：${dto.schema}，${dto.stations.length} 站 / ${dto.routes.length} 线 / ${dto.channels.length} 通道`)
+	return dto
+}
+
 /** 回灌：把 input 口径的那份直接喂回视图（点 / 线走 updateData，通道走 updateOptions） */
 const rebuildFromExport = () => {
 	const exported = exportData()
@@ -675,6 +717,7 @@ const rebuildFromExport = () => {
 }
 
 onMounted(() => {
+	disposeDtoFormat = defineExportFormat(DTO_FORMAT, backendDtoAdapter)
 	view = createGisView(container.value, buildOptions())
 	// 删除请求走 'remove' 事件（与 onRemove 同一份载荷）：pending / remove / cancel 三个阶段都在这一条上
 	view.on('remove', handleRemoveRequest)
@@ -687,6 +730,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
 	disposed = true
+	disposeDtoFormat?.()
+	disposeDtoFormat = null
 	window.removeEventListener('keydown', onWindowKeyDown)
 	view?.destroy()
 	view = null
@@ -901,12 +946,14 @@ onBeforeUnmount(() => {
 				<h3>导出 / 回灌</h3>
 				<div class="dv-row">
 					<button type="button" class="dv-button" @click="exportData">导出（exportData）</button>
+					<button type="button" class="dv-button" data-demo="channel-export-dto" @click="exportBackendDto">后端 DTO（自定义格式）</button>
 					<button type="button" class="dv-button dv-button--primary" @click="rebuildFromExport">按导出重建</button>
 				</div>
-				<p class="dv-readout">{{ exportText || '还没导出：点一下看导出的份量' }}</p>
+				<p class="dv-readout" data-demo="channel-export-readout">{{ exportText || '还没导出：点一下看导出的份量' }}</p>
 				<p class="dv-hint">
 					回灌用的是 input 口径（与 createGisView 入参同构）；view 口径是给后端 / 别的系统的业务记录
-					（station_data / line_data / parallel_groups 那套列名），不拿来回灌。
+					（station_data / line_data / parallel_groups 那套列名），不拿来回灌。后端 DTO 口径由
+					`defineExportFormat` 注册，卸载时只清掉自己这一个适配器；演示把标准文档映射成项目自己的表。
 				</p>
 			</div>