gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/SampleDemo.vue

@@ -1,283 +0,0 @@
-<template>
-	<section class="dv-demo">
-		<div class="dv-stage">
-			<div ref="container" class="dv-canvas"></div>
-			<div class="dv-toolbar">
-				<button type="button" @click="fit">适应全部</button>
-				<button type="button" @click="mount(currentId)">重新读文件</button>
-			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>样本文件</h3>
-				<div class="dv-chips">
-					<button
-						v-for="item in SAMPLES"
-						:key="item.id"
-						type="button"
-						class="dv-chip"
-						:class="{ 'dv-chip--active': item.id === currentId }"
-						@click="mount(item.id)"
-					>{{ item.title }}</button>
-				</div>
-				<p class="dv-hint">{{ current.blurb }}</p>
-				<p class="dv-readout">仓库根目录 {{ current.file }}（与 new.json / test.json 同级）</p>
-			</div>
-			<div class="dv-group">
-				<h3>文件里有什么</h3>
-				<p class="dv-readout">节点 {{ readouts.points }} · 线路 {{ readouts.lines }} · 通道 {{ readouts.channels }}<br>拐点 {{ readouts.waypoints }} · 标记 {{ readouts.decorations }} · 标签状态 {{ readouts.labelStates }} · 画布上的标签 {{ readouts.domLabels }}</p>
-			</div>
-			<div class="dv-group">
-				<h3>导出 / 回灌</h3>
-				<div class="dv-row">
-					<button type="button" class="dv-button" @click="compareExport">与文件对一遍</button>
-					<button type="button" class="dv-button dv-button--primary" @click="rebuildFromExport">按导出重建</button>
-				</div>
-				<p class="dv-readout">{{ readouts.exportText }}</p>
-				<p class="dv-hint">数据支持的格式与导出口径是同一套写法：普通样本按 exportData({ format: 'input' }) 逐字节对，标准文档那一份按 exportData({ format: 'full' }) 对，而且「导出 → 回灌 → 再导出」两份必须一模一样。</p>
-			</div>
-			<div class="dv-group">
-				<h3>试一下</h3>
-				<p class="dv-hint">拖节点、拖拐点（Ctrl + 点击线路插一个）、拖标签、滚轮缩放，再看「与文件对一遍」——编辑结果（拐点 / 偏移 / 标签状态）会立刻出现在导出的那一份里。</p>
-			</div>
-		</aside>
-	</section>
-</template>
-
-<script setup>
-/**
- * 完整样本：仓库根目录的四份 sample-*.json 原样喂给 createGisView，看的是「一份数据里能装多少东西」——
- * 标签（内容 / 八向位置 / 像素偏移 / 内联样式 / className / html）、拐点（lines[].path 与通道骨架）、
- * 标记（decorations 的四种定位与四种符号）、分组（channels[].groups）、偏移与逐要素颜色样式，
- * 外加一列 labelStates（拖过 / 改过 / 运行时加的标签）。
- *
- * 面板上的「与文件对一遍」把 exportData({ format: 'input' }) 的结果与文件逐字节比一次：
- * 数据支持的格式与导出的格式是同一套，所以「存档 → 重建」两步就能完整回显；
- * 编辑过之后这里会报出差异，差异本身正是要被存档的那部分（拐点、偏移、标签状态都在导出里）。
- */
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView } from '../../src/index.js'
-import './shared/demoStyle.css'
-
-/** 四份样本：前三份各看一类字段，sample-full.json 把多拐点 / 多标签 / 多分组摆在同一份里 */
-const SAMPLES = [
-	{
-		id: 'labels',
-		title: '标签与样式',
-		file: 'sample-labels.json',
-		url: () => import('../../sample-labels.json?url'),
-		blurb: '10 个节点 / 14 条线路：八向标签、沿线标签（比例 / 百分比 / 距离三种位置）、旧式单条写法、field 取字段、html、className、逐点符号与描边；labelStates 里是拖过与改过的那几条。'
-	},
-	{
-		id: 'waypoints',
-		title: '拐点与标记',
-		file: 'sample-waypoints.json',
-		url: () => import('../../sample-waypoints.json?url'),
-		blurb: '9 条折线（1 ~ 3 个拐点）+ 1 条通道骨架：装饰覆盖比例 / 百分比 / 距离 / 世界坐标四种定位与圆 / 方 / SVG / 图片四种符号，parallel、阴影、透明度都摆了一份。'
-	},
-	{
-		id: 'channels',
-		title: '通道与分组',
-		file: 'sample-channels.json',
-		url: () => import('../../sample-channels.json?url'),
-		blurb: '3 条通道：4 回线拆成两组（groups 各带自己的拐点）、按两端节点取宽的 2 回线、单回线各一条；逐回颜色与线宽写在回线上，通道声明与导出对得上。'
-	},
-	{
-		id: 'full',
-		title: '全字段齐全',
-		file: 'sample-full.json',
-		url: () => import('../../sample-full.json?url'),
-		blurb: '10 点 / 22 线 / 3 通道一份摆齐：5 条线路带 3 ~ 4 个拐点、同一节点 4 条标签 / 同一线路 3 条标签、6 回通道拆 3 组（每组 2 个骨架拐点）、23 个标记、6 条标签状态。'
-	},
-	{
-		id: 'document',
-		title: '标准文档（整份）',
-		file: 'sample-document.json',
-		url: () => import('../../sample-document.json?url'),
-		blurb: '全字段那一份的标准文档写法：顶层 format / version / points / lines / channels / labelStates / view / filter 八列齐全，标着 format: \'gis-view\'，整份原样喂给 createGisView 就能回显 —— 相机、筛选、标签状态与拐点一个都不少（node scripts/build-sample-document.mjs 生成）。'
-	}
-]
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const currentId = ref('labels')
-const readouts = ref({
-	points: 0,
-	lines: 0,
-	channels: 0,
-	waypoints: 0,
-	decorations: 0,
-	labelStates: 0,
-	domLabels: 0,
-	exportText: '还没有对过账'
-})
-const current = computed(() => SAMPLES.find(item => item.id === currentId.value) ?? SAMPLES[0])
-let view = null
-let loaded = null
-let domTimer = 0
-
-/** 读文件：样本与 new.json / test.json 一样是静态文件，走 URL 导入（打包之后拿到的也是正确地址） */
-const readSample = async (spec) => {
-	const module = await spec.url()
-	const response = await fetch(module.default)
-	if (!response.ok) {
-		throw new Error(`${spec.file} 读取失败：HTTP ${response.status}`)
-	}
-	return response.json()
-}
-
-/**
- * 建视图：样本的四个字段原样进 options —— points / lines / channels / labelStates 与
- * createGisView 的入参是同一套写法，不需要任何映射，这正是「数据格式与导出口径一致」要的效果。
- */
-const buildOptions = (data) => ({
-	// 标准文档那一份（format: 'gis-view'）整份进 options：points / lines / channels / labelStates
-	// 与 view.camera 一次到位，不需要在 demo 里拆字段 —— 这正是「接收的格式与导出的格式同一份」要的效果
-	...(data.format === 'gis-view' ? data : {}),
-	points: data.points,
-	lines: data.lines,
-	channels: data.channels,
-	labelStates: data.labelStates,
-	// 拐点默认只在选中时露出：这份演示就是来看拐点的，全打开
-	waypointEditable: true,
-	waypointVisibility: 'always',
-	// 功能开关缺省全关：这一页要能平移缩放、悬停选中、编辑拐点，逐项打开（查看类 + 拐点）
-	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, waypoint: true },
-	// 标准文档自带相机（view.camera）：让它落地；普通样本没有相机，照旧适应数据范围
-	fitOnInit: data.format !== 'gis-view',
-	fitPadding: 70,
-	showGrid: false,
-	onWarning: (message) => {
-		readouts.value = { ...readouts.value, exportText: `warning：${message}` }
-	}
-})
-
-const countDecorations = () => (view?.getData().lines ?? []).reduce((total, line) => total + (Array.isArray(line.decorations) ? line.decorations.length : 0), 0)
-
-/** 读数：数据里的条数 + 画布上真画出来的标签数量 */
-const refresh = () => {
-	if (!view) {
-		return
-	}
-	readouts.value = {
-		...readouts.value,
-		points: view.getData().points.length,
-		lines: view.getData().lines.length,
-		channels: view.getOptions().channels.length,
-		waypoints: view.getWaypoints().length,
-		decorations: countDecorations(),
-		labelStates: view.getLabelStates().length
-	}
-	// 标签由覆盖层画：建视图那一帧之后才有 DOM，等一下再数
-	clearTimeout(domTimer)
-	domTimer = setTimeout(() => {
-		readouts.value = { ...readouts.value, domLabels: container.value?.querySelectorAll('.gis-view__label').length ?? 0 }
-	}, 260)
-}
-
-/** 换样本 / 重新读文件：读回 JSON 之后整份重建（样本之间字段差得远，重建比增量更新更直观） */
-const mount = async (id) => {
-	currentId.value = id
-	const spec = SAMPLES.find(item => item.id === id) ?? SAMPLES[0]
-	let data = null
-	try {
-		data = await readSample(spec)
-	}
-	catch (error) {
-		readouts.value = { ...readouts.value, exportText: String(error?.message ?? error) }
-		return
-	}
-	loaded = data
-	view?.destroy()
-	view = createGisView(container.value, buildOptions(data))
-	refresh()
-	readouts.value = { ...readouts.value, exportText: `已按 ${spec.file} 建视图，点「与文件对一遍」看导出口径` }
-	emit('notice', `${spec.title}：${data.points.length} 点 / ${data.lines.length} 线 / ${data.channels.length} 通道`)
-}
-
-/** 与文件对账：没动过数据时应该逐字节一致；拖过拐点 / 标签之后再点，报出来的差异就是要存档的编辑结果 */
-const compareExport = () => {
-	if (!view || !loaded) {
-		return
-	}
-	// 标准文档那一份：整份（含相机 / 筛选 / 标签状态）对一次，再把导出的那一份灌回一个新实例、再导出一次
-	// ——「导出 → 回灌 → 再导出」逐字节相同，才算「接收的格式与导出的格式是同一份」
-	if (loaded.format === 'gis-view') {
-		const exported = view.exportData({ format: 'full' })
-		// 探针画布要挂进文档并给尺寸：相机落位与视口大小有关（0 宽的容器里 initialView 会等布局）
-		const probeHost = document.createElement('div')
-		probeHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:520px;height:320px'
-		document.body.appendChild(probeHost)
-		const probe = createGisView(probeHost, exported)
-		const again = probe.exportData({ format: 'full' })
-		probe.destroy()
-		probeHost.remove()
-		const samePoints = JSON.stringify(exported.points) === JSON.stringify(loaded.points)
-		const sameLines = JSON.stringify(exported.lines) === JSON.stringify(loaded.lines)
-		const sameChannels = JSON.stringify(exported.channels) === JSON.stringify(loaded.channels)
-		const stable = JSON.stringify(again) === JSON.stringify(exported)
-		const sameStates = exported.labelStates.length === loaded.labelStates.length
-		readouts.value = {
-			...readouts.value,
-			exportText: `${samePoints && sameLines && sameChannels && sameStates ? '与文件一致' : '与文件有出入（拖过之后就会这样）'}：${exported.points.length} 点 / ${exported.lines.length} 线 / ${exported.channels.length} 通道 / ${exported.labelStates.length} 条标签状态；导出 → 回灌 → 再导出${stable ? '逐字节相同' : '对不上'}`
-		}
-		return
-	}
-	const exported = view.exportData({ format: 'input' })
-	const same = (list, source) => JSON.stringify(list) === JSON.stringify(source)
-	const samePoints = same(exported.points, loaded.points)
-	const sameLines = same(exported.lines, loaded.lines)
-	const sameChannels = same(exported.channels, loaded.channels)
-	const sameStates = exported.labelStates.length === loaded.labelStates.length
-	const matched = samePoints && sameLines && sameChannels && sameStates
-	readouts.value = {
-		...readouts.value,
-		exportText: matched
-			? `与文件逐字节一致：${exported.counts.points} 点 / ${exported.counts.lines} 线 / ${exported.counts.channels} 通道 / ${exported.counts.labelStates} 条标签状态，导出结果可以原样当输入喂回来`
-			: `与文件有出入（points ${samePoints ? '一致' : '变了'}、lines ${sameLines ? '一致' : '变了'}、channels ${sameChannels ? '一致' : '变了'}、标签状态 ${exported.labelStates.length} 条）—— 拖过节点 / 拐点 / 标签之后就会这样，差异本身就是要存档的编辑结果`
-	}
-}
-
-/** 存档 → 重建：导出的 input 口径整份喂给新实例，拐点 / 分组 / 偏移 / 运行时加的标签一起回显 */
-const rebuildFromExport = () => {
-	if (!view) {
-		return
-	}
-	// 标准文档：整份导出喂回 createGisView（含相机 / 筛选 / 标签状态），两边的导数应该一模一样
-	if (loaded?.format === 'gis-view') {
-		const exported = view.exportData({ format: 'full' })
-		view.destroy()
-		view = createGisView(container.value, buildOptions(exported))
-		refresh()
-		const stable = JSON.stringify(view.exportData({ format: 'full' })) === JSON.stringify(exported)
-		readouts.value = {
-			...readouts.value,
-			exportText: `已用导出的标准文档重建：${exported.points.length} 点 / ${exported.lines.length} 线 / ${exported.channels.length} 通道 / ${exported.labelStates.length} 条标签状态；重建后再导出${stable ? '与重建前逐字节相同' : '对不上'}`
-		}
-		return
-	}
-	const exported = view.exportData({ format: 'input' })
-	const snapshot = { points: exported.points, lines: exported.lines, channels: exported.channels, labelStates: exported.labelStates }
-	view.destroy()
-	view = createGisView(container.value, buildOptions(snapshot))
-	refresh()
-	readouts.value = {
-		...readouts.value,
-		exportText: `已用导出的 input 口径重建：${snapshot.points.length} 点 / ${snapshot.lines.length} 线 / ${snapshot.channels.length} 通道 / ${snapshot.labelStates.length} 条标签状态`
-	}
-}
-
-const fit = () => {
-	view?.fitView(70)
-}
-
-onMounted(() => {
-	mount(currentId.value)
-})
-
-onBeforeUnmount(() => {
-	clearTimeout(domTimer)
-	view?.destroy()
-	view = null
-})
-</script>