gis-view-webgl2 0.1.7 → 0.1.9

package/docs/demos/EventDemo.vue

@@ -58,23 +58,24 @@ const describePayload = (payload) => {
 	if (payload.index !== undefined) parts.push(`index=${payload.index}`)
 	if (payload.labelId !== undefined) parts.push(`labelId=${payload.labelId}`)
 	if (payload.count !== undefined) parts.push(`count=${payload.count}`)
-	if (payload.selection?.count !== undefined) parts.push(`selection=${payload.selection.count}`)
-	if (payload.channelId !== undefined) parts.push(`channel=${payload.channelId}`)
-	if (payload.camera !== undefined) parts.push('camera=…')
+	if (payload.channelId !== undefined) parts.push(`channel=${payload.channelId}`)
+	if (payload.camera !== undefined) parts.push('camera=…')
+	if (payload.idleTime !== undefined) parts.push(`idleTime=${Math.round(payload.idleTime)}ms`)
+	if (payload.timeout !== undefined) parts.push(`timeout=${payload.timeout}ms`)
 	if (payload.screen !== undefined) parts.push(`screen=[${payload.screen.map(value => Number(value).toFixed(0)).join(', ')}]`)
 	if (payload.action) {
 		const action = payload.action
-		parts.push(`action=${action.type}/${action.target}${action.moved ? '+moved' : ''}${action.double ? '+double' : ''}@${action.button ?? '-'}`)
-		parts.push(`data=${dataLabel(action.data)}`)
+		parts.push(`action=${action.type}/${action.target}${action.moved ? '+moved' : ''}${action.double ? '+double' : ''}@${payload.originalEvent?.button ?? '-'}`)
+		parts.push(`data=${dataLabel(hitDataOf(payload))}`)
 	}
 	if (!parts.length) parts.push(`keys=[${Object.keys(payload).slice(0, 6).join(', ')}]`)
 	return parts.join(' · ')
 }
 
 /**
- * action.data 给的是哪一份数据：节点 / 线路 / 通道看 id，选中集报条数，
- * 标签事件（labelClick / labelDrag / labelContextMenu / labelDblClick）给的是 { label, parent } —— 报内容与它挂在哪个要素上。
- */
+ * 命中的数据在载荷顶层：节点 / 线路看 item，通道看 channel，选中集报 items 条数，
+ * 标签（labelClick / labelDrag / labelContextMenu / labelDblClick）看 label / parent。
+ */
 const dataLabel = (value) => {
 	if (Array.isArray(value)) return `${value.length} 项`
 	if (!value || typeof value !== 'object') return String(value)
@@ -88,12 +89,10 @@ const dataLabel = (value) => {
 	return value.id ?? value.channelId ?? value.name ?? `对象 keys=[${Object.keys(value).slice(0, 4).join(', ')}]`
 }
 
-/**
- * 要 DOM 事件的三个事件（pointerDown / pointerUp / contextMenu）在总线上
- * 载荷是 `{ payload, event }`（与回调的两个参数一一对应），其余事件载荷就是回调里那一份 —— 这里统一拆开。
- */
-const EVENT_PAYLOAD_EVENTS = new Set(['pointerDown', 'pointerUp', 'contextMenu'])
-const unwrapPayload = (raw, name) => (EVENT_PAYLOAD_EVENTS.has(name) && raw && typeof raw === 'object' && 'payload' in raw ? raw.payload : raw)
+/** 一次事件里可读的那份顶层数据：不把通道 / 分组上下文再打成一个 action.data */
+const hitDataOf = payload => payload.item ?? payload.channel ?? payload.label ?? payload.line
+	?? (payload.type === 'cluster' ? { id: payload.id, count: payload.count } : null)
+	?? (Array.isArray(payload.items) ? payload.items : null)
 
 /** 会带 action 的事件名：* 订阅里从载荷上认出「这一次是什么操作」 */
 const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
@@ -117,8 +116,11 @@ const buildOptions = () => ({
 	channels: dataset.channels,
 	pointStyle: { size: 7, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
 	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.55)' },
-	showGrid: true,
-	fitPadding: 60,
+	showGrid: true,
+	fitPadding: 60,
+	// 停手 3 秒发一次 idle，事件日志与计数里都能看到；
+	// onCameraChange / cameraChange 也在这条链路上，高频开关打开后能看到逐帧载荷。
+	idleTimeout: 3000,
 	label: { content: '{name}', position: 'top', gap: 8, maxCount: 30, draggable: true, editable: true, style: { color: '#27405f', fontSize: '12px' } },
 	// 标签按优化档显示（限数 + 避让），见 docs/GisView.md 的「标签显示优化开关」
 	labelOptimize: true,
@@ -171,7 +173,10 @@ const methods = [
 	{ name: 'focusOn(前三个节点, { select: true })', run: () => { const ids = (view?.getData().points ?? []).slice(0, 3).map(point => point.id ?? 0); return ids.length > 0 ? view?.focusOn(ids, { select: true }) : null } },
 	{ name: 'getStats()', run: () => view?.getStats() },
 	{ name: 'getQuality()', run: () => view?.getQuality() },
-	{ name: 'getCamera()', run: () => view?.getCamera() },
+	{ name: 'getCamera()', run: () => view?.getCamera() },
+	{ name: 'getScale()', run: () => view?.getScale() },
+	{ name: 'setScale(当前 × 1.25)', run: () => view?.setScale(view.getScale() * 1.25) },
+	{ name: 'getIdleTime()', run: () => view?.getIdleTime() },
 	{ name: 'getBounds()', run: () => view?.getBounds() },
 	{ name: 'getFilterResult()', run: () => view?.getFilterResult() },
 	{ name: 'getLabelStates()', run: () => view?.getLabelStates() },
@@ -257,10 +262,8 @@ const dismissCopy = () => {
 
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
-	// 一条 '*' 订阅全部事件：回调拿到的第二参就是事件名（与 options 里的 onXxx 同一份载荷）
-	offAll = view.on('*', (raw, name) => {
-		// 四个要 DOM 事件的事件先拆包，后面按「载荷就是回调里那一份」统一读
-		const payload = unwrapPayload(raw, name)
+	// 一条 '*' 订阅全部事件：回调拿到的第二参就是事件名；载荷与 options 里的 onXxx 完全同一份
+	offAll = view.on('*', (payload, name) => {
 		counts.value = { ...counts.value, [name]: (counts.value[name] ?? 0) + 1 }
 		// 合并 / 复制：同一条 * 订阅里收中间态，确认条与日志读的是同一份载荷
 		if (name === 'pointMerge') {
@@ -275,8 +278,10 @@ onMounted(() => {
 		if (ACTION_EVENTS.has(name) && payload?.action) {
 			// 一次操作的判读：什么操作 / 点到了什么 / 拿到了什么数据 —— 左键与右键都走这一套
 			const action = payload.action
-			const held = Object.entries(action.modifiers ?? {}).filter(([, on]) => on).map(([key]) => key).join('+')
-			lastAction.value = `${name}：${action.type} → ${action.target}${action.data === undefined || action.data === null ? '' : ` · ${dataLabel(action.data)}`}${action.button ? ` · ${action.button}` : ''}${held ? ` · ${held}` : ''}${action.moved ? ' · 拖动过' : ''}${action.double ? ' · 双击第二下' : ''}`
+			const event = payload.originalEvent
+			const held = [event?.ctrlKey && 'ctrl', event?.metaKey && 'meta', event?.shiftKey && 'shift', event?.altKey && 'alt'].filter(Boolean).join('+')
+			const data = hitDataOf(payload)
+			lastAction.value = `${name}：${action.type} → ${action.target}${data === null || data === undefined ? '' : ` · ${dataLabel(data)}`}${event ? ` · button ${event.button}` : ''}${held ? ` · ${held}` : ''}${action.moved ? ' · 拖动过' : ''}${action.double ? ' · 双击第二下' : ''}`
 		}
 		if (!showHighFrequency.value && HIGH_FREQUENCY.has(name)) {
 			return
@@ -350,7 +355,7 @@ onBeforeUnmount(() => {
 			<div class="dv-group">
 				<h3>动作判读（action）</h3>
 				<p class="dv-readout">{{ lastAction }}</p>
-				<p class="dv-hint">在画布上点一下 / 右键 / 拖一段 / 框选一下：这里按 action.type 说清「是什么操作」、action.target 说清「点到了什么」、action.data 就是那一份数据（点 / 线是数据里的对象、通道回线是通道定义）。</p>
+				<p class="dv-hint">在画布上点一下 / 右键 / 拖一段 / 框选一下：action.type 说清「是什么操作」、action.target 说清「点到了什么」，命中的数据直接读载荷顶层的 item / channel / label 等字段；按键与修饰键读 originalEvent。</p>
 			</div>
 			<div class="dv-group">
 				<h3>事件计数（* 订阅）</h3>

package/docs/demos/LabelDemo.vue

@@ -338,11 +338,11 @@ const onLabelDrag = (payload) => {
 const onLabelContextMenu = (payload) => {
 	hit.value = payload
 	syncFormFromHit()
-	// 用载荷里的 clientX / clientY 把自绘菜单贴在指针位置（系统菜单已被 preventContextMenu 收掉）
-	menu.open = true
-	menu.x = payload.clientX
-	menu.y = payload.clientY
-	pushLog('labelContextMenu', `右键 ${describeLabel(payload)} @ ${payload.clientX}, ${payload.clientY}`)
+	// 用原始指针事件的 clientX / clientY 把自绘菜单贴在指针位置（系统菜单已被 preventContextMenu 收掉）
+	menu.open = true
+	menu.x = payload.originalEvent?.clientX ?? 0
+	menu.y = payload.originalEvent?.clientY ?? 0
+	pushLog('labelContextMenu', `右键 ${describeLabel(payload)} @ ${menu.x}, ${menu.y}`)
 }
 
 const onLabelDblClick = (payload) => {