gis-view-webgl2 0.1.13 → 0.1.15

package/docs/steps/selftest-select.html

@@ -8,7 +8,7 @@
 		<div id="map" style="width:640px;height:400px"></div>
 		<pre id="out"></pre>
 		<script type="module">
-			// 这一页的自测：① 多选开关（options.multiSelect）—— 打开后不用修饰键、单击即取反累加；toggleSelect 另测；
+			// 这一页的自测：① 多选开关（features.multiSelect）—— 打开后不用修饰键、单击即取反累加；toggleSelect 另测；
 			// ② 状态样式里的阴影（selectStyle / lineSelectStyle 写 shadow 要画得出来、取消选中要收掉）；
 			// ③ 取消选中 / 改变选中集之后颜色与阴影要自动恢复，不必等悬停来顺手重解析；
 			// ④ 同配方不同尺寸的贴图符号：借来的占位贴图不能被当成「自己烤好的那一份」（见问题 4）。
@@ -69,6 +69,8 @@
 					onClick: payload => clicks.push(payload),
 					onDblClick: payload => dblClicks.push(payload)
 				})
+				// edit 预设也会打开多选 / 取反；本页前半段验证普通单击的单选语义，这里显式关掉这两项
+				view.setFeatures({ ...view.getFeatures(), multiSelect: false, toggleSelect: false })
 				const canvas = view.canvas
 				const box = canvas.getBoundingClientRect()
 				const shot = async () => {
@@ -209,9 +211,9 @@
 				/* ---------- 问题 1：多选开关 ---------- */
 				await clickWorld(0, 0)
 				await clickWorld(140, 0)
-				check('多选开关缺省关：普通单击是单选（后点替换前点）', ids() === 'node-b', ids())
+				check('多选开关关闭：普通单击是单选（后点替换前点）', ids() === 'node-b', ids())
 				await clickWorld(240, -150)
-				view.updateOptions({ multiSelect: true })
+				view.setFeatures({ ...view.getFeatures(), multiSelect: true })
 				const changesBeforeSwitch = changes.length
 				await clickWorld(0, 0)
 				await clickWorld(140, 0)
@@ -245,7 +247,7 @@
 				// 第一次点击是取反（与 Ctrl 点击同一套：不经过 onClick），第二次点击只派发点击与双击
 				check('多选开关打开：双击照常派发 onClick / onDblClick', dblClicks.length === dblBefore + 1 && clicks.length === clicksBeforeDbl + 1, `${dblClicks.length - dblBefore} / ${clicks.length - clicksBeforeDbl}`)
 				await clickWorld(240, -150)
-				view.updateOptions({ multiSelect: false })
+				view.setFeatures({ ...view.getFeatures(), multiSelect: false })
 				await clickWorld(0, 0)
 				await clickWorld(140, 0)
 				check('多选开关关回去：又是单选', ids() === 'node-b', ids())
@@ -314,9 +316,9 @@
 				await ckClick(0, 82, { ctrlKey: true })
 				await ckClick(0, -82, { ctrlKey: true })
 				check('selectionKinds 三类全开：一次 Ctrl 多选可混合累加节点 / 线路 / 通道', ckInfo().pointCount === 1 && ckInfo().lineCount === 2 && ckInfo().channelCount === 1 && ckView.isSelected('ck-a') && ckView.isSelected('ck-solo') && ckView.isSelected('ck-ch-line'), JSON.stringify({ points: ckInfo().pointCount, lines: ckInfo().lineCount, channels: ckInfo().channelCount, ids: ckInfo().ids }))
-				ckView.updateOptions({ selectionKinds: 'all' })
-				ckView.selectInBox({ x: 0, y: 0, width: ckBox.width, height: ckBox.height })
-				const ckBoxedInfo = ckView.getSelectionData()
+				ckView.updateOptions({ selectionKinds: 'all' })
+				ckView.selectInBox({ x: 0, y: 0, width: ckBox.width, height: ckBox.height })
+				const ckBoxedInfo = ckView.getSelectionData()
 				check('selectInBox：线路框选与通道摊开沿用同一份判定（整框一次收下节点 / 独立线路 / 通道回线）', ckBoxedInfo.count === 4 && ckBoxedInfo.pointCount === 2 && ckBoxedInfo.lineCount === 2 && ckBoxedInfo.channelCount === 1, JSON.stringify({ items: ckBoxedInfo.count, points: ckBoxedInfo.pointCount, lines: ckBoxedInfo.lineCount, channels: ckBoxedInfo.channelCount }))
 				ckView.destroy()
 				ckHost.remove()
@@ -371,6 +373,40 @@
 				epView.destroy()
 				epHost.remove()
 
+				/* ---------- 框选只认路径实际沾框：包围盒相交但几何不沾框的 U 形线路 / 通道不能误选 ---------- */
+				const bxHost = document.createElement('div')
+				bxHost.style.cssText = 'width:400px;height:320px'
+				document.body.append(bxHost)
+				const bxView = createGisView(bxHost, {
+					points: [
+						{ id: 'bx-a', x: -120, y: -120, size: 10 },
+						{ id: 'bx-b', x: 120, y: -120, size: 10 }
+					],
+					lines: [
+						{ id: 'bx-hit', path: [[-15, 0], [15, 0]], width: 8 },
+						{ id: 'bx-u', path: [[-120, -120], [-120, 120], [120, 120], [120, -120]], width: 8 },
+						{ id: 'bx-ch-line', from: 'bx-a', to: 'bx-b', width: 8 }
+					],
+					channels: [{ id: 'bx-ch', from: 'bx-a', to: 'bx-b', path: [[-120, 120], [120, 120]], lineIds: ['bx-ch-line'] }],
+					features: 'view',
+					selectionKinds: ['line', 'channel'],
+					channelSelectMode: 'channel',
+					showGrid: false,
+					fitOnInit: false,
+					initialView: { center: [0, 0], scale: 1 },
+					width: 400,
+					height: 320
+				})
+				await settle(120)
+				const bxBox = bxView.canvas.getBoundingClientRect()
+				bxView.selectInBox({ x: bxBox.width / 2 - 20, y: bxBox.height / 2 - 20, width: 40, height: 40 }, { selectionKinds: ['line', 'channel'] })
+				const bxInfo = bxView.getSelectionData()
+				check('框选只认路径实际沾框：包围盒相交但不在框内的 U 形线路 / 通道不选中',
+					bxInfo.lineCount === 1 && bxInfo.channelCount === 0 && bxView.isSelected('bx-hit') && !bxView.isSelected('bx-u') && !bxView.isSelected('bx-ch-line'),
+					JSON.stringify({ lines: bxInfo.lineCount, channels: bxInfo.channelCount, ids: bxInfo.ids }))
+				bxView.destroy()
+				bxHost.remove()
+
 				/* ---------- 本轮：框选保留、整框拖动、DOM 样式与手动关闭 ---------- */
 				const persistHost = document.createElement('div')
 				persistHost.style.cssText = 'width:400px;height:260px'
@@ -644,6 +680,8 @@
 					onSelectChange: payload => { gpChanges.push(payload); gpOrder.push('selectChange') },
 					onHover: payload => gpHovers.push(payload)
 				})
+				// 这一段验证普通点击的派发与单选载荷：同样先关掉 edit 预设里的多选 / 取反
+				gpView.setFeatures({ ...gpView.getFeatures(), multiSelect: false, toggleSelect: false })
 				await settle(140)
 				const gpBox = gpView.canvas.getBoundingClientRect()
 				const gpLine = gpView.getLine('gp-l1')
@@ -739,7 +777,7 @@
 					],
 					pointStyle: { color: '#2438cc', size: 28 },
 					pointHoverStyle: { color: '#1f9d3a' },
-					clickable: true,
+					features: { hover: true, select: true },
 					showGrid: false,
 					width: 360,
 					height: 200
@@ -986,7 +1024,8 @@
 				await triggerClick(120, 0)
 				check('selectTrigger 运行时改回 click 立刻生效', triggerIds() === 'trigger-b', triggerIds())
 
-				triggerView.updateOptions({ selectTrigger: 'dblClick', multiSelect: true })
+				triggerView.updateOptions({ selectTrigger: 'dblClick' })
+				triggerView.setFeatures({ ...triggerView.getFeatures(), multiSelect: true })
 				triggerView.selectFeatures(null)
 				triggerClicks.length = 0
 				triggerDblClicks.length = 0
@@ -1001,7 +1040,8 @@
 				check('selectTrigger: dblClick + multiSelect：双击已选节点是取消', triggerIds() === 'trigger-b' && triggerClicks.at(-1)?.action?.type === 'toggleSelect', triggerIds())
 
 				/* toggleSelect：再次选中即取消，缺省关；单击 / 双击两种触发方式与 Ctrl 先选后点同一口径 */
-				triggerView.updateOptions({ selectTrigger: 'click', multiSelect: false })
+				triggerView.updateOptions({ selectTrigger: 'click' })
+				triggerView.setFeatures({ ...triggerView.getFeatures(), multiSelect: false })
 				triggerView.selectFeatures(null)
 				await settle(360)
 				triggerClicks.length = 0
@@ -1012,7 +1052,7 @@
 				await triggerClick(0, 0)
 				check('toggleSelect 缺省关：隔开两次普通单击仍保持选中', triggerIds() === 'trigger-a' && triggerChanges.length === 1 && triggerChanges.at(-1)?.action?.type === 'select', `${triggerIds()} / ${triggerChanges.at(-1)?.action?.type}`)
 
-				triggerView.updateOptions({ toggleSelect: true })
+				triggerView.setFeatures({ ...triggerView.getFeatures(), toggleSelect: true })
 				await settle(360)
 				const toggleOffClicks = triggerClicks.length
 				const toggleOffChanges = triggerChanges.length
@@ -1086,8 +1126,7 @@
 						},
 						{ id: 'tl-ch2', from: 'tl-c', to: 'tl-d', lineIds: ['tl-other'] }
 					],
-					features: { select: true },
-					toggleSelect: true,
+					features: { select: true, toggleSelect: true },
 					selectionKinds: 'all',
 					showGrid: false,
 					fitOnInit: false,
@@ -1190,4 +1229,4 @@
 			document.title = results.some(text => text.startsWith('FAIL') || text.startsWith('ERROR')) ? 'FAIL' : 'PASS'
 		</script>
 	</body>
-</html>
+</html>

package/docs/steps/step-10-full.js

@@ -73,10 +73,7 @@ export const createFullView = (target, options = {}) => {
 		minimap: { width: 180, height: 130 },
 		// 这一步就是完整组件本身：工具栏要能点节点加通道、按住节点拖、Shift 框选、Ctrl 点击加拐点——
 		// 功能开关缺省全关（见 src/gis-view/features.js），演示页把要用的逐项显式打开
-		draggable: true,
-		boxSelect: true,
-		waypointEditable: true,
-		features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, channelDraft: true },
+		features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, channelDraft: true, drag: true, boxSelect: true, waypoint: true },
 		// 组件的回调都带载荷：type / index / item 就是「当前是哪个元素」，world 是光标处的世界坐标
 		onHover: payload => forward.onHover?.(payload),
 		onClick: payload => forward.onClick?.(payload),

package/docs/steps/step-12-events.js

@@ -133,10 +133,7 @@ export const createActionView = (target, options = {}) => {
 		statsInterval: 250,
 		// 这一步演示的全是交互（拖节点 / Shift 框选 / Ctrl 加拐点 / 通道草稿与通道右键）：
 		// 功能开关缺省全关（见 src/gis-view/features.js），演示页把要用的逐项显式打开
-		draggable: true,
-		boxSelect: true,
-		waypointEditable: true,
-		features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, channelDraft: true },
+		features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, channelDraft: true, drag: true, boxSelect: true, waypoint: true },
 		// 下面五条是同一条路：每个回调先报一句判读，再交给页面自己那一条（日志、草稿读数都还在）
 		onPointerDown: payload => {
 			report(describeAction(payload, '按下'))

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "gis-view-webgl2",
-  "version": "0.1.13",
-  "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，可选鹰眼图与图例，点击 / 双击 / 拖拽可配置",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "build:lib": "tsc && node scripts/clean-dist.mjs && vite build --config vite.config.lib.js && node scripts/obfuscate-dist.mjs && node scripts/copy-types.mjs",
-    "prepack": "npm run build:lib",
-    "pack:lib": "npm pack --dry-run",
-    "preview": "vite preview",
-    "check:docs": "node docs/steps/check-doc-coverage.mjs && node docs/steps/check-doc-truth.mjs && node docs/steps/check-sample-fields.mjs && node docs/steps/check-doc-center.mjs"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
-    },
-    "./style.css": "./dist/gis-view.css"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "docs"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.5",
-    "javascript-obfuscator": "^5.6.0",
-    "typescript": "~6.0.2",
-    "vite": "^8.2.2",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "vue": "^3.5.32"
-  }
-}
+{
+  "name": "gis-view-webgl2",
+  "version": "0.1.15",
+  "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，可选鹰眼图与图例，点击 / 双击 / 拖拽可配置",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "tsc && node scripts/clean-dist.mjs && vite build --config vite.config.lib.js && node scripts/obfuscate-dist.mjs && node scripts/copy-types.mjs",
+    "prepack": "npm run build:lib",
+    "pack:lib": "npm pack --dry-run",
+    "preview": "vite preview",
+    "check:docs": "node docs/steps/check-doc-coverage.mjs && node docs/steps/check-doc-truth.mjs && node docs/steps/check-sample-fields.mjs && node docs/steps/check-doc-center.mjs"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/gis-view.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "javascript-obfuscator": "^5.6.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vue": "^3.5.32"
+  }
+}