gis-view-webgl2 0.1.4 → 0.1.6

package/docs/steps/selftest-full.html

@@ -192,8 +192,8 @@
 				await settleFrames()
 				const fillAuto = minimapFill()
 				check('鹰眼图 extent: auto 把远离数据的 GeoJSON 一起框进来', fillAuto > 100 && fillAuto > fillData + 100, `data=${fillData} auto=${fillAuto}`)
-				// 反过来：底图小到在合并范围里只剩一两个像素、而相机正好落在里面时，auto 以它为准 ——
-				// 正在看的主体不该因为另一套坐标离得远就被压成一个点（数据还没映射到底图时常是这种情况）
+				// 反过来：底图小到在合并范围里只剩一两个像素、而相机正好落在里面时，默认仍按并集铺；
+				// 显式打开 extentFollowCamera 后，auto 才以正在看的那一份为准。
 				const tinyHost = document.createElement('div')
 				tinyHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
 				document.body.appendChild(tinyHost)
@@ -210,13 +210,62 @@
 					minimap: { width: 200, height: 160, extent: 'auto' }
 				})
 				await settleFrames()
-				const fillSquashed = minimapFill(tinyHost)
-				tinyView.zoomToBounds({ minX: 100, minY: 20, maxX: 101, maxY: 21 })
-				await settleFrames()
-				const fillFocused = minimapFill(tinyHost)
-				check('鹰眼图 extent: auto 在相机落进小范围时以它为准', fillFocused > 200 && fillFocused > fillSquashed + 200, `squashed=${fillSquashed} focused=${fillFocused}`)
-				// 这一轮：沿用主图规则取描边色（不再是白点）、小图尺寸跟随主视图地图倍数、框与框选矩形的样式
-				const ruleHost = document.createElement('div')
+				const fillSquashed = minimapFill(tinyHost)
+				tinyView.zoomToBounds({ minX: 100, minY: 20, maxX: 101, maxY: 21 })
+				await settleFrames()
+				const fillDefault = minimapFill(tinyHost)
+				check('鹰眼图 extent: auto 默认不随相机收窄（外围内容消失后包围盒保持并集）',
+					(tinyView.getOptions().minimap.extentFollowCamera ?? false) === false && fillDefault > 0 && Math.abs(fillDefault - fillSquashed) < 40,
+					`squashed=${fillSquashed} default=${fillDefault}`)
+				tinyView.updateOptions({ minimap: { ...tinyView.getOptions().minimap, extentFollowCamera: true } })
+				await settleFrames()
+				const fillFocused = minimapFill(tinyHost)
+				check('鹰眼图 extent: 打开 extentFollowCamera 后，相机落进小范围时 auto 以它为准',
+					tinyView.getOptions().minimap.extentFollowCamera === true && fillFocused > 200 && fillFocused > fillSquashed + 200,
+					`squashed=${fillSquashed} focused=${fillFocused}`)
+				// extentFollowContent 默认关闭：筛选掉外围节点后，鹰眼图仍用首次铺好的范围；显式打开后才跟着当前可见内容缩。
+				const lockHost = document.createElement('div')
+				lockHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
+				document.body.appendChild(lockHost)
+				const lockExtents = []
+				const lockView = createGisView(lockHost, {
+					points: [
+						{ id: 'near-a', x: 0, y: 0, zone: 'near' },
+						{ id: 'near-b', x: 10, y: 0, zone: 'near' },
+						{ id: 'far', x: 100, y: 40, zone: 'far' }
+					],
+					lines: [],
+					background: false,
+					minimap: {
+						width: 200,
+						height: 160,
+						background: false,
+						extent: 'auto',
+						extentFollowContent: false,
+						draw: info => lockExtents.push({ ...info.extent })
+					}
+				})
+				await settleFrames()
+				const lockBefore = lockExtents.at(-1)
+				lockView.setFilter({ points: { zone: 'near' }, worker: false })
+				await settleFrames()
+				const lockAfter = lockExtents.at(-1)
+				const sameExtent = lockBefore && lockAfter &&
+					Math.abs(lockBefore.minX - lockAfter.minX) < 1e-6 && Math.abs(lockBefore.minY - lockAfter.minY) < 1e-6 &&
+					Math.abs(lockBefore.maxX - lockAfter.maxX) < 1e-6 && Math.abs(lockBefore.maxY - lockAfter.maxY) < 1e-6
+				check('鹰眼图 extentFollowContent 默认关闭：外围节点被筛掉后包围盒保持不变',
+					lockView.getOptions().minimap.extentFollowContent === false && lockBefore?.maxX === 100 && lockBefore?.maxY === 40 && sameExtent,
+					`before=${JSON.stringify(lockBefore)} after=${JSON.stringify(lockAfter)}`)
+				lockView.updateOptions({ minimap: { ...lockView.getOptions().minimap, extentFollowContent: true } })
+				await settleFrames()
+				const lockFollowed = lockExtents.at(-1)
+				check('鹰眼图 extentFollowContent 打开后：包围盒按当前可见内容重算',
+					lockView.getOptions().minimap.extentFollowContent === true && lockFollowed?.maxX === 10 && lockFollowed?.maxY === 0,
+					JSON.stringify(lockFollowed))
+				lockView.destroy()
+				lockHost.remove()
+				// 这一轮：沿用主图规则取描边色（不再是白点）、继承尺寸不受主视图地图倍数影响、框与框选矩形的样式
+				const ruleHost = document.createElement('div')
 				ruleHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
 				document.body.appendChild(ruleHost)
 				const ruleView = createGisView(ruleHost, {
@@ -254,7 +303,11 @@
 				ruleView.zoomTo(ruleView.getCamera().scale * 3, [210, 160])
 				await settleFrames()
 				const redZoomed = minimapRed()
-				check('鹰眼图节点跟随主视图地图倍数放大', redZoomed > redBefore * 2, `${redBefore} → ${redZoomed}`)
+				check(
+					'鹰眼图沿用主图规则时主图放大不改变节点尺寸（pointMapZoomScale 也不参与继承）',
+					redBefore > 0 && Math.abs(redZoomed - redBefore) <= 2,
+					`${redBefore} → ${redZoomed}`
+				)
 				const boxElement = ruleHost.querySelector('.gis-view__minimap-box')
 				const boxComputed = getComputedStyle(boxElement)
 				check(
@@ -319,9 +372,113 @@
 					bgRedBefore > 0 && Math.abs(bgRedAfter - bgRedBefore) <= Math.max(bgRedBefore * 0.2, 2),
 					`主图放大 3 倍前后小图红点像素 ${bgRedBefore} → ${bgRedAfter}`
 				)
-				bgView.destroy()
-				bgHost.remove()
-				// 这一轮：小图自身倍数的联动指数（pointZoomScale）真的生效 —— 放大鹰眼图 6 倍，节点半径按 6^指数 长
+				bgView.destroy()
+				bgHost.remove()
+				// 这一轮：沿用主图规则时线路线宽也只跟视口比例走 —— 主图放大不变，小图自身放大才按 lineZoomScale 变
+				const lineHost = document.createElement('div')
+				lineHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
+				document.body.appendChild(lineHost)
+				const lineView = createGisView(lineHost, {
+					points: [{ id: 'a', x: 0, y: 50 }, { id: 'b', x: 100, y: 50 }],
+					lines: [{ id: 'l', from: 'a', to: 'b' }],
+					background: false,
+					pointStyle: { size: 1, color: '#00aa00' },
+					lineStyle: { width: 8, color: '#ff3200', opacity: 1 },
+					minimap: {
+						width: 200,
+						height: 160,
+						background: false,
+						lineStyle: { color: '#ff3200', width: 1, opacity: 1 },
+						inheritRules: true,
+						pointMapZoomScale: 1,
+						lineMapZoomScale: 1,
+						lineZoomScale: 1,
+						maxZoom: 8
+					}
+				})
+				await settleFrames()
+				const lineBefore = minimapRedIn(lineHost)
+				lineView.zoomTo(lineView.getCamera().scale * 3, [210, 160])
+				await settleFrames()
+				const lineAfterMainZoom = minimapRedIn(lineHost)
+				check(
+					'鹰眼图沿用主图线宽时主图放大不改变线路宽度（lineMapZoomScale 也不参与继承）',
+					lineBefore > 20 && Math.abs(lineAfterMainZoom - lineBefore) <= 2,
+					`${lineBefore} → ${lineAfterMainZoom}`
+				)
+				lineView.updateOptions({ minimap: { ...lineView.getOptions().minimap, lineWidthScale: 2 } })
+				await settleFrames()
+				const lineWidthScaled = minimapRedIn(lineHost)
+				check(
+					'鹰眼图线路整体倍数 lineWidthScale 对继承线路生效',
+					lineWidthScaled > lineAfterMainZoom * 1.5,
+					`${lineAfterMainZoom} → ${lineWidthScaled}`
+				)
+				lineView.updateOptions({ minimap: { ...lineView.getOptions().minimap, lineWidthScale: 1 } })
+				await settleFrames()
+				lineView.setMinimapZoom(2)
+				await settleFrames()
+				const lineAfterMiniZoom = minimapRedIn(lineHost)
+				check(
+					'鹰眼图自身放大时沿用主图的线路按 lineZoomScale 变粗',
+					lineAfterMiniZoom > lineAfterMainZoom * 1.6,
+					`${lineAfterMainZoom} → ${lineAfterMiniZoom}`
+				)
+				lineView.destroy()
+				lineHost.remove()
+				// 沿用主图的节点：主图放大不变，小图自身放大时按 pointZoomScale 变大（pointMapZoomScale 不参与继承）
+				const inheritedPointHost = document.createElement('div')
+				inheritedPointHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
+				document.body.appendChild(inheritedPointHost)
+				const inheritedPointView = createGisView(inheritedPointHost, {
+					points: [{ id: 'a', x: 45, y: 50 }, { id: 'b', x: 55, y: 50 }],
+					lines: [{ id: 'l', from: 'a', to: 'b' }],
+					background: false,
+					pointStyle: { size: 10, color: '#ff3200' },
+					lineStyle: { width: 1.5, color: '#00aa00' },
+					minimap: {
+						width: 200,
+						height: 160,
+						background: false,
+						extent: { minX: 0, minY: 0, maxX: 100, maxY: 100 },
+						inheritRules: true,
+						pointZoomScale: 1,
+						pointMapZoomScale: 1,
+						zoomable: true,
+						maxZoom: 8
+					}
+				})
+				await settleFrames()
+				const inheritedPointBefore = minimapRedIn(inheritedPointHost)
+				inheritedPointView.zoomTo(inheritedPointView.getCamera().scale * 3, [210, 160])
+				await settleFrames()
+				const inheritedPointAfterMainZoom = minimapRedIn(inheritedPointHost)
+				check(
+					'鹰眼图沿用主图节点时主图放大不改变节点大小（pointMapZoomScale 也不参与继承）',
+					inheritedPointBefore > 10 && Math.abs(inheritedPointAfterMainZoom - inheritedPointBefore) <= 2,
+					`${inheritedPointBefore} → ${inheritedPointAfterMainZoom}`
+				)
+				inheritedPointView.updateOptions({ minimap: { ...inheritedPointView.getOptions().minimap, pointSizeScale: 2 } })
+				await settleFrames()
+				const inheritedPointSizeScaled = minimapRedIn(inheritedPointHost)
+				check(
+					'鹰眼图节点整体倍数 pointSizeScale 对继承节点生效',
+					inheritedPointSizeScaled > inheritedPointAfterMainZoom * 2,
+					`${inheritedPointAfterMainZoom} → ${inheritedPointSizeScaled}`
+				)
+				inheritedPointView.updateOptions({ minimap: { ...inheritedPointView.getOptions().minimap, pointSizeScale: 1 } })
+				await settleFrames()
+				inheritedPointView.setMinimapZoom(2)
+				await settleFrames()
+				const inheritedPointAfterMiniZoom = minimapRedIn(inheritedPointHost)
+				check(
+					'鹰眼图自身放大时沿用主图的节点按 pointZoomScale 变大',
+					inheritedPointAfterMiniZoom > inheritedPointAfterMainZoom * 2,
+					`${inheritedPointAfterMainZoom} → ${inheritedPointAfterMiniZoom}`
+				)
+				inheritedPointView.destroy()
+				inheritedPointHost.remove()
+				// 这一轮：小图自身倍数的联动指数（pointZoomScale）真的生效 —— 放大鹰眼图 6 倍，节点半径按 6^指数 长
 				const zoomHost = document.createElement('div')
 				zoomHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
 				document.body.appendChild(zoomHost)
@@ -458,6 +615,193 @@
 				)
 				extraView.destroy()
 				extraHost.remove()
+				// 本轮鹰眼图五项：回线居中、动态位移、backgroundStyle、主图尺寸 / 图标、外部挂载
+				const circuitHost = document.createElement('div')
+				circuitHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:420px;height:320px'
+				document.body.appendChild(circuitHost)
+				let circuitLines = []
+				const circuitView = createGisView(circuitHost, {
+					points: [{ id: 'ca', x: 0, y: 0 }, { id: 'cb', x: 100, y: 0 }],
+					lines: [
+						{ id: 'cl1', from: 'ca', to: 'cb' },
+						{ id: 'cl2', from: 'ca', to: 'cb' }
+					],
+					channels: [{ id: 'cch', from: 'ca', to: 'cb', lineIds: ['cl1', 'cl2'] }],
+					background: false,
+					minimap: {
+						width: 200,
+						height: 150,
+						background: false,
+						channelCircuits: true,
+						boxStyle: { fillOpacity: 0, strokeWidth: 0 },
+						draw: info => { circuitLines = info.data.lines }
+					}
+				})
+				await settleFrames()
+				const allCircuitPaths = circuitLines.map(line => line.path)
+				circuitLines = []
+				circuitView.updateOptions({ minimap: { ...circuitView.getOptions().minimap, channelCircuits: false } })
+				await settleFrames()
+				const representativePath = circuitLines[0]?.path ?? []
+				const expectedCenter = allCircuitPaths.length === 2
+					? allCircuitPaths[0].map((coordinate, index) => [
+						(coordinate[0] + allCircuitPaths[1][index][0]) / 2,
+						(coordinate[1] + allCircuitPaths[1][index][1]) / 2
+					])
+					: []
+				const centeredRepresentative = representativePath.length === expectedCenter.length && representativePath.every((coordinate, index) =>
+					Math.abs(coordinate[0] - expectedCenter[index][0]) < 1e-6 && Math.abs(coordinate[1] - expectedCenter[index][1]) < 1e-6
+				)
+				check(
+					'鹰眼图关闭回线后双回线取居中代表线',
+					allCircuitPaths.length === 2 && circuitLines.length === 1 && centeredRepresentative,
+					`原回线 ${allCircuitPaths.length} 条，代表线 ${circuitLines.length} 条，路径 ${JSON.stringify(representativePath)}`
+				)
+				circuitView.destroy()
+				circuitHost.remove()
+				const styleHost = document.createElement('div')
+				styleHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:360px;height:260px'
+				document.body.appendChild(styleHost)
+				const styleView = createGisView(styleHost, {
+					points: [],
+					lines: [],
+					background: { color: '#ffffff' },
+					minimap: {
+						width: 140,
+						height: 90,
+						background: 'inherit',
+						backgroundStyle: 'rgb(20, 40, 60)',
+						boxStyle: { fillOpacity: 0, strokeWidth: 0 }
+					}
+				})
+				await settleFrames()
+				const styledRoot = styleView.getMinimapElement()
+				const styledCanvas = styledRoot?.querySelector('.gis-view__minimap-canvas')
+				const styledPixels = styledCanvas?.getContext('2d').getImageData(0, 0, styledCanvas.width, styledCanvas.height).data ?? []
+				let opaqueBackgroundPixels = 0
+				for (let index = 3; index < styledPixels.length; index += 4) {
+					if (styledPixels[index] > 0) {
+						opaqueBackgroundPixels += 1
+					}
+				}
+				const styledColor = styledRoot ? getComputedStyle(styledRoot).backgroundColor : ''
+				check(
+					'鹰眼图显式 backgroundStyle 接管容器底色且画布让出底色',
+					styledColor === 'rgb(20, 40, 60)' && opaqueBackgroundPixels === 0,
+					`容器=${styledColor}，画布不透明像素 ${opaqueBackgroundPixels}`
+				)
+				styleView.destroy()
+				styleHost.remove()
+				const minimapErrors = []
+				const captureMinimapError = event => minimapErrors.push(String(event.error?.stack ?? event.message))
+				window.addEventListener('error', captureMinimapError)
+				const pointHost = document.createElement('div')
+				pointHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:360px;height:260px'
+				document.body.appendChild(pointHost)
+				const pointView = createGisView(pointHost, {
+					points: [
+						{ id: 'square-node', x: 0, y: 0 },
+						{ id: 'circle-node', x: 100, y: 0 },
+						{ id: 'icon-node', x: 200, y: 0 }
+					],
+					lines: [],
+					pointRules: [
+						{ name: '小图方点', when: { id: 'square-node' }, style: { size: 64, symbol: 'square', color: '#0088ff', strokeColor: '#0088ff' } },
+						{ name: '小图圆点', when: { id: 'circle-node' }, style: { size: 64, symbol: 'circle', color: '#00cc66', strokeColor: '#00cc66' } },
+						{ name: '小图图标', when: { id: 'icon-node' }, style: { size: 64, symbol: { type: 'svg', path: 'M0 0H20V20H0Z', viewBox: [0, 0, 20, 20], fill: '#ff00ff' }, color: '#0088ff', strokeColor: '#0088ff' } }
+					],
+					background: false,
+					minimap: {
+						width: 220,
+						height: 120,
+						background: false,
+						extent: { minX: -20, minY: -20, maxX: 220, maxY: 20 },
+						boxStyle: { fillOpacity: 0, strokeWidth: 0 }
+					}
+				})
+				let pointInk = { blue: 0, green: 0, magenta: 0 }
+				for (let attempt = 0; attempt < 15; attempt += 1) {
+					await new Promise(resolve => setTimeout(resolve, 60))
+					const pointCanvas = pointView.getMinimapElement()?.querySelector('.gis-view__minimap-canvas')
+					const pointPixels = pointCanvas?.getContext('2d').getImageData(0, 0, pointCanvas.width, pointCanvas.height).data ?? []
+					pointInk = { blue: 0, green: 0, magenta: 0 }
+					for (let index = 0; index < pointPixels.length; index += 4) {
+						const red = pointPixels[index]
+						const green = pointPixels[index + 1]
+						const blue = pointPixels[index + 2]
+						if (red < 60 && green > 80 && green < 190 && blue > 200) {
+							pointInk.blue += 1
+						}
+						if (red < 60 && green > 150 && blue < 140) {
+							pointInk.green += 1
+						}
+						if (red > 220 && green < 50 && blue > 220) {
+							pointInk.magenta += 1
+						}
+					}
+					if (pointInk.magenta > 500 && pointInk.blue > 500 && pointInk.green > 500) {
+						break
+					}
+				}
+				const circleSquareRatio = pointInk.blue ? pointInk.green / pointInk.blue : 0
+				check(
+					'鹰眼图沿用主图规则后尺寸与 SVG 图标一致',
+					pointInk.blue > 500 && pointInk.green > 500 && pointInk.magenta > 500 && circleSquareRatio > 0.85 && circleSquareRatio < 1.15 && minimapErrors.length === 0,
+					'方点 ' + pointInk.blue + 'px，圆点 ' + pointInk.green + 'px（比值 ' + circleSquareRatio.toFixed(2) + '），图标 ' + pointInk.magenta + 'px，错误 ' + (minimapErrors[0] ?? '无')
+				)
+				pointView.destroy()
+				pointHost.remove()
+				window.removeEventListener('error', captureMinimapError)
+				const externalHostId = 'minimap-ext-' + Math.random().toString(36).slice(2)
+				const alternateHostId = 'minimap-alt-' + Math.random().toString(36).slice(2)
+				const externalHost = document.createElement('div')
+				externalHost.id = externalHostId
+				externalHost.style.cssText = 'position:fixed;left:-9999px;top:340px;width:280px;height:200px;background:#eef4fb'
+				const alternateHost = document.createElement('div')
+				alternateHost.id = alternateHostId
+				alternateHost.style.cssText = 'position:fixed;left:-9999px;top:560px;width:280px;height:200px;background:#f7eefb'
+				const externalViewHost = document.createElement('div')
+				externalViewHost.style.cssText = 'position:fixed;left:-9999px;top:0;width:360px;height:260px'
+				document.body.append(externalHost, alternateHost, externalViewHost)
+				const externalView = createGisView(externalViewHost, {
+					points: [{ id: 'ext-a', x: 0, y: 0 }, { id: 'ext-b', x: 30, y: 20 }],
+					lines: [{ id: 'ext-l', from: 'ext-a', to: 'ext-b' }],
+					background: false,
+					minimap: {
+						width: 140,
+						height: 90,
+						margin: 10,
+						background: false,
+						container: externalHost,
+						boxStyle: { fillOpacity: 0, strokeWidth: 0 }
+					}
+				})
+				await settleFrames()
+				const externalRoot = externalView.getMinimapElement()
+				const beforeMoveRect = externalRoot?.getBoundingClientRect()
+				externalView.updateOptions({ minimap: { ...externalView.getOptions().minimap, offset: [30, 20] } })
+				await settleFrames()
+				const afterMoveRect = externalRoot?.getBoundingClientRect()
+				const moved = Boolean(beforeMoveRect && afterMoveRect &&
+					Math.abs(afterMoveRect.left - beforeMoveRect.left - 30) < 0.75 &&
+					Math.abs(afterMoveRect.top - beforeMoveRect.top - 20) < 0.75)
+				check(
+					'鹰眼图能挂到外部 div，并用 offset 动态移动整张图',
+					externalRoot?.parentElement === externalHost && externalViewHost.querySelector('.gis-view__minimap') === null && moved,
+					'父元素 ' + (externalRoot?.parentElement?.id ?? 'null') + '，位移 ' + (beforeMoveRect ? Math.round(afterMoveRect.left - beforeMoveRect.left) + ',' + Math.round(afterMoveRect.top - beforeMoveRect.top) : 'null')
+				)
+				externalView.updateOptions({ minimap: { ...externalView.getOptions().minimap, container: '#' + alternateHostId } })
+				await settleFrames()
+				const movedHost = externalView.getMinimapElement() === externalRoot && externalRoot?.parentElement === alternateHost
+				externalView.destroy()
+				check(
+					'鹰眼图换外部容器复用同一根节点，destroy 后一并清理',
+					movedHost && !externalRoot?.isConnected && !alternateHost.querySelector('.gis-view__minimap'),
+					'换容器 ' + movedHost + '，销毁后 connected=' + (externalRoot?.isConnected ?? false)
+				)
+				externalHost.remove()
+				alternateHost.remove()
+				externalViewHost.remove()
 				// 宿主缩放（CSS zoom / 祖先的 transform: scale）：引擎的 CSS 像素按布局像素算、画布备份仍是设备像素、
 				// DOM 标签与指针换算同除显示比例；三样对不上时，标签会飞出节点、指针也点不中
 				const plainScaleHost = document.createElement('div')