gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/ConnectDemo.vue

@@ -0,0 +1,392 @@
+<script setup>
+/**
+ * 可视化连线：只靠 points + lines 也能独立成图，再把「新增一条线」的几种常见配置摆在一起。
+ *
+ * 这一页的初始数据明确是 channels: [] —— 没有任何通道，节点与线路照样能渲染、选中与新增。
+ * 「开始连线」走 beginAddChannel（kind 为 line 或 channel），两个节点选完先出草稿：
+ * - routing: 'orthogonal' 让预览自动补一个先横后纵的 90° 拐点；
+ * - channelDraftStyle 直接交给 beginAddChannel，草稿期间用 updateAddChannelStyle 原地改箭头位置 / 间距 / 配色；
+ * - 取消只收草稿，数据一个字节不动；
+ * - 选好起点后点节点以外的位置也会直接取消，事件里的 reason 是 click-outside-node；
+ * - 默认添加走 commitAddChannel；
+ * - 另外两颗按钮绕开提交，用 addLines / addChannels 把同一份草稿真正落地。
+ *
+ * 预览与落地共用 resolveRoutedPath：预览上看到的折线、箭头与提交后的 path / direction 对得上。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } 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 linkKind = ref('line')
+const routing = ref('orthogonal')
+const lineColor = ref('#2f6fd0')
+const lineWidth = ref(2.4)
+const arrow = ref(true)
+const arrowSize = ref(12)
+const arrowPositionsText = ref('0.5')
+const circuitSpacing = ref(12)
+const draft = ref(null)
+const actionText = ref('配置好线条之后点「开始连线」，依次点两个节点')
+const dataText = ref('正在创建视图…')
+const cancelText = ref('尚未取消：选好起点后点一下节点以外的空白处，应收到 reason = click-outside-node')
+const logLines = ref([])
+const logText = computed(() => logLines.value.length
+	? logLines.value.map(line => `${line.name}: ${line.text}`).join(' | ')
+	: '还没有操作')
+let view = null
+let sequence = 0
+let logSeq = 0
+
+const source = buildDemoData({ count: 12, channels: 0 })
+const points = source.points
+
+/** 初始线路只有普通 lines，不挂任何通道；其中一条故意折一道弯，另一条带方向箭头 */
+const createInitialLines = () => {
+	const bend = [
+		Number(((points[6].x + points[9].x) / 2).toFixed(5)),
+		Number(((points[6].y + points[9].y) / 2 - 0.42).toFixed(5))
+	]
+	const seed = (index, from, to, extra = {}) => ({
+		id: `connect-seed-${index}`,
+		name: `示例连线 ${index + 1}`,
+		from: points[from].id,
+		to: points[to].id,
+		...extra
+	})
+	return [
+		seed(0, 0, 1, { color: '#4f8fdf', width: 2, direction: { count: 1, size: 11 } }),
+		seed(1, 2, 5, { color: '#4f8fdf', width: 1.8, direction: { count: 1, size: 10 } }),
+		seed(2, 6, 9, {
+			color: '#13a17c',
+			width: 2.4,
+			path: [[points[6].x, points[6].y], bend, [points[9].x, points[9].y]],
+			direction: { count: 1, size: 12 }
+		}),
+		seed(3, 8, 11, { color: '#d0893b', width: 1.8, lineType: 'dashed', direction: { count: 1, size: 10 } })
+	]
+}
+
+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 isDraftLive = computed(() => Boolean(draft.value) && ['start', 'from', 'ready', 'restart', 'pick'].includes(draft.value.phase))
+const canFinish = computed(() => draft.value?.phase === 'ready')
+const draftText = computed(() => {
+	const current = draft.value
+	if (!current || !['start', 'from', 'ready', 'restart', 'pick'].includes(current.phase)) {
+		return '草稿未开始（或已取消 / 已落地）'
+	}
+	const kind = current.kind === 'line' ? '独立线路' : `通道 · ${current.circuits} 回`
+	if (!current.from) {
+		return `${kind} · ${current.routing === 'orthogonal' ? '正交折线' : '直线'} · 等待点起点`
+	}
+	const from = current.from.item?.name ?? current.from.id
+	if (!current.to) {
+		return `${kind} · 起点 ${from} · 等待点终点`
+	}
+	const to = current.to.item?.name ?? current.to.id
+	const bends = current.path?.length ?? 0
+	return `${kind} · ${from} → ${to} · ${current.routing === 'orthogonal' ? '正交折线' : '直线'} · 中间拐点 ${bends} · 箭头 ${current.style?.arrow ? current.style.arrowPositions.map(value => `${Math.round(value * 100)}%`).join('/') : '关'} · 回线间距 ${current.style?.circuitSpacing ?? 0}px`
+})
+
+const pushLog = (name, text) => {
+	logSeq += 1
+	logLines.value = [{ id: logSeq, name, text }, ...logLines.value].slice(0, 16)
+}
+
+const refreshState = () => {
+	if (!view) {
+		return
+	}
+	const data = view.getData()
+	const channels = view.getOptions().channels ?? data.channels ?? []
+	dataText.value = `${data.points.length} 节点 / ${data.lines.length} 线路 / ${channels.length} 通道${channels.length ? '' : '（纯点 + 线模式）'}`
+}
+
+const currentDraftStyle = () => ({
+	color: lineColor.value,
+	width: lineWidth.value,
+	dot: 4,
+	arrow: arrow.value,
+	arrowSize: arrowSize.value,
+	arrowPositions: arrowPositions.value,
+	circuitSpacing: circuitSpacing.value
+})
+
+/** 预览与真实落地共用同一份线条字段：颜色 / 线宽 / 方向箭头都从这里出发 */
+const currentLineProps = () => ({
+	color: lineColor.value,
+	width: lineWidth.value,
+	direction: arrow.value ? { count: 1, size: arrowSize.value } : false
+})
+
+const startDraft = () => {
+	if (!view) {
+		return
+	}
+	view.endAddChannel()
+	view.beginAddChannel({
+		kind: isChannel.value ? 'channel' : 'line',
+		circuits: circuits.value,
+		routing: routing.value,
+		select: true,
+		channelDraftStyle: currentDraftStyle(),
+		lineProps: currentLineProps()
+	})
+	actionText.value = `开始连线：先点起点，再点终点（${isChannel.value ? `通道 ${circuits.value} 回` : '独立线路'} / ${routing.value === 'orthogonal' ? '正交折线' : '直线'}）`
+	pushLog('beginAddChannel', actionText.value)
+}
+
+const cancelDraft = () => {
+	if (!view) {
+		return
+	}
+	const before = view.getData()
+	const beforeChannels = view.getOptions().channels ?? before.channels ?? []
+	const beforeCount = `${before.lines.length} 线路 / ${beforeChannels.length} 通道`
+	view.cancelAddChannel()
+	draft.value = null
+	refreshState()
+	const after = view.getData()
+	const afterChannels = view.getOptions().channels ?? after.channels ?? []
+	const afterCount = `${after.lines.length} 线路 / ${afterChannels.length} 通道`
+	actionText.value = `cancelAddChannel：草稿已收起，数据${beforeCount === afterCount ? '未变' : '发生了变化'}（${afterCount}）`
+	pushLog('cancelAddChannel', actionText.value)
+}
+
+const commitDraft = () => {
+	if (!view || !canFinish.value) {
+		return
+	}
+	const result = view.commitAddChannel()
+	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)
+	return middle ? [current.from.coordinate, ...middle, current.to.coordinate] : null
+}
+
+const addWithLines = () => {
+	if (!view || !canFinish.value) {
+		return
+	}
+	const current = view.getAddChannelDraft()
+	if (!current?.from || !current?.to) {
+		return
+	}
+	sequence += 1
+	const fullPath = fullPathOf(current)
+	const result = view.addLines([{
+		id: `connect-line-${sequence}`,
+		name: `可视化线路 ${sequence}`,
+		from: current.from.id,
+		to: current.to.id,
+		...(fullPath ? { path: fullPath } : {}),
+		...currentLineProps()
+	}])
+	if (result.ok) {
+		view.endAddChannel()
+		draft.value = null
+		view.selectFeatures(result.items.map(item => item.id))
+		actionText.value = `addLines → ${result.items.map(item => item.id).join(' / ')}${fullPath ? ` · path ${fullPath.length} 点` : ' · 直线'}`
+	}
+	else {
+		actionText.value = `addLines 没有落地：${result.reason ?? '未知原因'}`
+	}
+	refreshState()
+	pushLog('addLines', actionText.value)
+	emit('notice', actionText.value)
+}
+
+const addWithChannels = () => {
+	if (!view || !canFinish.value) {
+		return
+	}
+	const current = view.getAddChannelDraft()
+	if (!current?.from || !current?.to) {
+		return
+	}
+	sequence += 1
+	const middle = middlePathOf(current)
+	const kind = current.kind === 'line' ? 'line' : 'channel'
+	const result = view.addChannels([{
+		id: `connect-${kind}-${sequence}`,
+		name: `${kind === 'line' ? '独立线路' : '可视化通道'} ${sequence}`,
+		from: current.from.id,
+		to: current.to.id,
+		kind,
+		...(kind === 'channel' ? { circuits: current.circuits } : {}),
+		...(middle ? { path: middle } : {}),
+		lineProps: currentLineProps()
+	}])
+	refreshState()
+	if (result.ok) {
+		view.endAddChannel()
+		draft.value = null
+		if (result.lineIds.length) {
+			view.selectFeatures(result.lineIds)
+		}
+		actionText.value = `addChannels → ${result.count} 条 · ${result.lineIds.length} 回线${result.channelIds.length ? ` · 通道 ${result.channelIds.join(' / ')}` : ' · 未新建通道'}${middle ? ` · path ${middle.length} 拐点` : ''}`
+	}
+	else {
+		actionText.value = `addChannels 没有落地：${result.reason ?? result.results?.[0]?.reason ?? '未知原因'}`
+	}
+	pushLog('addChannels', actionText.value)
+	emit('notice', actionText.value)
+}
+
+const resetScene = () => {
+	if (!view) {
+		return
+	}
+	view.endAddChannel()
+	view.updateData({ points, lines: createInitialLines(), channels: [] })
+	view.clearHistory()
+	view.fitView(56)
+	draft.value = null
+	sequence = 0
+	actionText.value = '已恢复为 channels: [] 的纯点 + 线场景'
+	refreshState()
+	pushLog('reset', actionText.value)
+}
+
+watch([lineColor, lineWidth, arrow, arrowSize, arrowPositionsText, circuitSpacing], () => {
+	if (view && isDraftLive.value) {
+		view.updateAddChannelStyle(currentDraftStyle())
+		draft.value = view.getAddChannelDraft()
+	}
+})
+
+onMounted(() => {
+	view = createGisView(container.value, {
+		points,
+		lines: createInitialLines(),
+		channels: [],
+		features: { pan: true, zoom: true, channelDraft: true, select: true, hover: true },
+		pointStyle: { size: 9, color: '#ffffff', strokeColor: '#3678bf', strokeWidth: 2 },
+		lineStyle: { color: 'rgba(86, 122, 170, 0.45)', width: 1.4 },
+		fitPadding: 56,
+		onReady: () => {
+			refreshState()
+			emit('notice', '可视化连线：初始 channels 为空，节点与线路仍可独立使用')
+		},
+		onChannelDraft: payload => {
+			draft.value = payload
+			if (payload.phase === 'cancel') {
+				cancelText.value = `取消：phase = ${payload.phase} · reason = ${payload.reason ?? '未提供'} · 起点 ${payload.from?.item?.name ?? payload.from?.id ?? '—'}`
+				actionText.value = payload.reason === 'click-outside-node'
+					? '选好起点后点了空白：草稿已取消，数据没有变化；可以重新开始连线'
+					: `草稿已取消：${payload.reason ?? '由 cancelAddChannel / Esc 触发'}`
+				pushLog('onChannelDraft(cancel)', cancelText.value)
+				emit('notice', actionText.value)
+			}
+		}
+	})
+})
+
+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="view?.fitView(56)">适应全部</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>连线配置</h3>
+				<div class="dv-row">
+					<label>类型
+						<select v-model="linkKind" data-demo="connect-kind" :disabled="isDraftLive">
+							<option value="line">独立线路（不挂通道）</option>
+							<option value="channel-2">通道 · 2 回</option>
+							<option value="channel-3">通道 · 3 回</option>
+						</select>
+					</label>
+					<label>路径
+						<select v-model="routing" data-demo="connect-routing" :disabled="isDraftLive">
+							<option value="straight">直线</option>
+							<option value="orthogonal">正交折线</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>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="arrow" type="checkbox" data-demo="connect-arrow" /> 箭头</label>
+					<label>箭头大小 <input v-model.number="arrowSize" type="range" min="7" max="22" step="1" data-demo="connect-arrow-size" /> {{ arrowSize }}</label>
+				</div>
+				<div class="dv-row">
+					<label>箭头位置
+						<select v-model="arrowPositionsText" data-demo="connect-arrow-positions">
+							<option value="0.25">25%</option>
+							<option value="0.5">50%</option>
+							<option value="0.75">75%</option>
+							<option value="0.25,0.75">25% + 75%</option>
+							<option value="0.15,0.5,0.85">15% + 50% + 85%</option>
+						</select>
+					</label>
+					<label>回线间距 <input v-model.number="circuitSpacing" type="range" min="6" max="28" step="1" data-demo="connect-spacing" /> {{ circuitSpacing }}px</label>
+				</div>
+				<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">
+					<button type="button" class="dv-button dv-button--primary" data-demo="connect-start" :disabled="isDraftLive" @click="startDraft">开始连线</button>
+					<button type="button" class="dv-button dv-button--danger" data-demo="connect-cancel" :disabled="!isDraftLive" @click="cancelDraft">取消添加</button>
+				</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-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>
+				<p class="dv-readout" data-demo="connect-draft-readout">{{ draftText }}</p>
+				<p class="dv-readout" data-demo="connect-data-readout">{{ dataText }}</p>
+				<p class="dv-readout" data-demo="connect-action-readout">{{ actionText }}</p>
+				<p class="dv-readout" data-demo="connect-cancel-readout">{{ cancelText }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>操作日志</h3>
+				<ul class="dv-log" data-demo="connect-log">
+					<li>{{ logText }}</li>
+				</ul>
+			</div>
+
+			<div class="dv-group">
+				<h3>场景</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="connect-reset" @click="resetScene">恢复纯点 + 线初始数据</button>
+				</div>
+				<p class="dv-hint">初始 channels 恒为 []；线路的 from / to 照样绑节点，拖节点时端点会跟着走。想验证取消：开始连线后先点一个节点，再点画布空白处，草稿会立即收起并发出 <code>reason: 'click-outside-node'</code> 的 cancel。</p>
+			</div>
+		</aside>
+	</section>
+</template>