gis-view-webgl2 0.1.3 → 0.1.4

package/docs/steps/selftest-select.html

@@ -558,6 +558,96 @@
 				window.Image = nativeImage
 				dualView.destroy()
 				dualHost.remove()
+
+				/* ---------- 本轮：SVG 导出的描边色，以及 selectTrigger 单击 / 双击 ---------- */
+				const svgStrokeHost = document.createElement('div')
+				document.body.append(svgStrokeHost)
+				const strokeIcon = { type: 'svg', path: 'M3 8 L13 8', viewBox: [0, 0, 16, 16], fill: 'none', stroke: 'currentStrokeColor', strokeWidth: 4, tint: true }
+				const svgStrokeView = createGisView(svgStrokeHost, {
+					points: [{ id: 'stroke-a', x: 0, y: 0, symbol: strokeIcon, size: 28 }],
+					pointStyle: { size: 28, color: '#ffffff', strokeColor: '#e01f1f', strokeWidth: 2 },
+					showGrid: false,
+					fitOnInit: false,
+					initialView: { center: [0, 0], scale: 1 },
+					width: 240,
+					height: 180
+				})
+				await settle(120)
+				const decodeExportSvg = (url) => new TextDecoder().decode(Uint8Array.from(atob(String(url).slice(String(url).indexOf('base64,') + 7)), character => character.charCodeAt(0)))
+				const svgStrokeMarkup = decodeExportSvg(await svgStrokeView.exportImage({ type: 'svg', background: 'none', includeLabels: false }))
+				check('SVG 导出：currentStrokeColor 跟着节点描边色走（不再是纯白）', /stroke="rgba\(224, 31, 31, 1\)"/.test(svgStrokeMarkup), (svgStrokeMarkup.match(/<path[^>]*>/) ?? ['没有 path'])[0].slice(0, 160))
+				svgStrokeView.destroy()
+				svgStrokeHost.remove()
+
+				const triggerHost = document.createElement('div')
+				document.body.append(triggerHost)
+				const triggerClicks = []
+				const triggerDblClicks = []
+				const triggerChanges = []
+				const triggerView = createGisView(triggerHost, {
+					points: [
+						{ id: 'trigger-a', x: 0, y: 0, size: 22 },
+						{ id: 'trigger-b', x: 120, y: 0, size: 22 }
+					],
+					features: { select: true },
+					showGrid: false,
+					fitOnInit: false,
+					initialView: { center: [60, 0], scale: 1 },
+					width: 400,
+					height: 240,
+					onClick: payload => triggerClicks.push(payload),
+					onDblClick: payload => triggerDblClicks.push(payload),
+					onSelectChange: payload => triggerChanges.push(payload)
+				})
+				await settle(100)
+				const triggerBox = triggerView.canvas.getBoundingClientRect()
+				const triggerAt = (x, y, extra = {}) => {
+					pointerId += 1
+					const screen = triggerView.project(x, y)
+					const at = { clientX: triggerBox.left + screen[0], clientY: triggerBox.top + screen[1] }
+					const common = { bubbles: true, cancelable: true, pointerId, pointerType: 'mouse', button: 0, buttons: 1, ...at, ...extra }
+					triggerView.canvas.dispatchEvent(new PointerEvent('pointerdown', common))
+					triggerView.canvas.dispatchEvent(new PointerEvent('pointerup', { ...common, buttons: 0 }))
+				}
+				const triggerClick = async (x, y, extra = {}) => {
+					triggerAt(x, y, extra)
+					await settle(25)
+				}
+				const triggerIds = () => triggerView.getSelectionData().ids.join(',')
+				await triggerClick(0, 0)
+				check('selectTrigger 缺省 click：第一次单击就选中', triggerIds() === 'trigger-a' && triggerClicks.at(-1)?.action?.type === 'select', `${triggerIds()} / ${triggerClicks.at(-1)?.action?.type}`)
+				triggerView.selectFeatures(null)
+				triggerView.updateOptions({ selectTrigger: 'dblClick' })
+				const clicksBeforeDoubleTrigger = triggerClicks.length
+				const doublesBeforeTrigger = triggerDblClicks.length
+				await triggerClick(0, 0)
+				check('selectTrigger: dblClick：第一下只派发 onClick，不改选中集', triggerIds() === '' && triggerClicks.length === clicksBeforeDoubleTrigger + 1 && triggerDblClicks.length === doublesBeforeTrigger, `${triggerIds()} / click ${triggerClicks.length - clicksBeforeDoubleTrigger}`)
+				await triggerClick(0, 0)
+				check('selectTrigger: dblClick：第二下选中，并同时派发 onClick 与 onDblClick', triggerIds() === 'trigger-a' && triggerClicks.at(-1)?.action?.type === 'select' && triggerClicks.at(-1)?.action?.double === true && triggerDblClicks.length === doublesBeforeTrigger + 1 && triggerDblClicks.at(-1)?.action?.type === 'dblClick', `${triggerIds()} / ${triggerClicks.at(-1)?.action?.type} / dbl ${triggerDblClicks.length - doublesBeforeTrigger}`)
+				const doublesBeforeBlank = triggerDblClicks.length
+				await triggerClick(200, 80)
+				const blankFirstKept = triggerIds() === 'trigger-a'
+				await triggerClick(200, 80)
+				check('selectTrigger: dblClick：点空白也要等第二下才清空', blankFirstKept && triggerIds() === '' && triggerDblClicks.length === doublesBeforeBlank + 1, `${blankFirstKept} → ${triggerIds() || '空'}`)
+				triggerView.updateOptions({ selectTrigger: 'click' })
+				await triggerClick(120, 0)
+				check('selectTrigger 运行时改回 click 立刻生效', triggerIds() === 'trigger-b', triggerIds())
+
+				triggerView.updateOptions({ selectTrigger: 'dblClick', multiSelect: true })
+				triggerView.selectFeatures(null)
+				triggerClicks.length = 0
+				triggerDblClicks.length = 0
+				await triggerClick(0, 0)
+				await triggerClick(0, 0)
+				check('selectTrigger: dblClick + multiSelect：第二下取反选中', triggerIds() === 'trigger-a' && triggerClicks.at(-1)?.action?.type === 'toggleSelect' && triggerDblClicks.length === 1, `${triggerIds()} / ${triggerClicks.at(-1)?.action?.type}`)
+				await triggerClick(120, 0)
+				await triggerClick(120, 0)
+				check('selectTrigger: dblClick + multiSelect：再双击另一个节点是累加', triggerIds() === 'trigger-a,trigger-b' && triggerClicks.at(-1)?.action?.type === 'toggleSelect', triggerIds())
+				await triggerClick(0, 0)
+				await triggerClick(0, 0)
+				check('selectTrigger: dblClick + multiSelect：双击已选节点是取消', triggerIds() === 'trigger-b' && triggerClicks.at(-1)?.action?.type === 'toggleSelect', triggerIds())
+				triggerView.destroy()
+				triggerHost.remove()
 			}
 			catch (error) {
 				results.push('ERROR ' + (error && error.stack ? error.stack : error))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gis-view-webgl2",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，无内置界面，点击 / 双击 / 拖拽可配置",
   "type": "module",
   "scripts": {