gis-view-webgl2 0.1.2 → 0.1.3

package/docs/steps/selftest-effects.html

@@ -133,6 +133,11 @@
 					Math.abs(lineEffectDistance(normalizeLineEffect({ period: 4, offset: 0.5 }, LINE_EFFECT_DEFAULTS), 200, 0, 0) - 100) < 1e-9 &&
 					Math.abs(lineEffectDistance(normalizeLineEffect({ period: 4, reverse: true }, LINE_EFFECT_DEFAULTS), 200, 1, 0) - 150) < 1e-9 &&
 					Math.abs(lineEffectDistance(normalizeLineEffect({ period: 4, delay: 1 }, LINE_EFFECT_DEFAULTS), 200, 1, 0) - 0) < 1e-9)
+				const xorEffect = normalizeLineEffect({ period: 4 }, LINE_EFFECT_DEFAULTS)
+				const xorAt = (forward, effectReverse) => lineEffectDistance(xorEffect, 200, 1, 0, (forward === false) !== effectReverse)
+				check('线路 forward 与 effect.reverse 异或：正正 / 反反同向，正反 / 反正反向',
+					[50, 150, 150, 50].every((expected, index) => Math.abs(xorAt(index < 2, index % 2 === 1) - expected) < 1e-9),
+					[true, false].flatMap(forward => [false, true].map(reverse => xorAt(forward, reverse))).join(','))
 				const spaced = normalizeLineEffect({ period: 4, count: 4, spaced: true }, LINE_EFFECT_DEFAULTS)
 				const gaps = [0, 1, 2, 3].map(slot => lineEffectDistance(spaced, 200, 0, slot)).sort((a, b) => a - b)
 				check('count > 1 时沿弧长等分（spaced: true）',
@@ -196,6 +201,11 @@
 						await sleep(Math.round(ms / step))
 					}
 				}
+				/** 画布在视口里才会连续跑动画：页面下面临时挂的样例先滚到视口中间，等观察器恢复渲染 */
+				const showHost = async (element) => {
+					element.scrollIntoView({ block: 'center', inline: 'nearest' })
+					await sleep(120)
+				}
 
 				/* ---------------- 引擎：全局配置 + 逐要素覆盖 ---------------- */
 				// 一条直角折线的线路（红点沿它跑）+ 三个节点：a 自己配了涟漪（半径 16），b / c 跟着全局那一份
@@ -298,6 +308,83 @@
 					JSON.stringify({ line: stats.lineEffectCount, point: stats.pointEffectCount }))
 				check('getOptions 与 updateOptions({ effects }) 一致（配置记进了 current）', view.getOptions().effects?.line?.period === 1, JSON.stringify(view.getOptions().effects?.line?.period))
 
+				/* ---------------- 引擎：线路 forward 反向装饰 / 箭头 / 动画 ---------------- */
+				const forwardHost = document.createElement('div')
+				forwardHost.style.cssText = 'width:480px;height:240px'
+				document.body.append(forwardHost)
+				const forwardView = createGisView(forwardHost, {
+					points: [],
+					lines: [{
+						id: 'forward-line',
+						path: [[0, 0], [160, 0]],
+						decorations: [{ position: 0.25, symbol: 'square', size: 12, color: '#00ff00', parallel: true }],
+						direction: { positions: [0.75], symbol: 'square', size: 12, color: '#ff0000' },
+						effect: { speed: 0.001, count: 1, offset: 0.25, parallel: true, size: 10, color: '#0000ff' }
+					}],
+					lineStyle: { color: '#111111', width: 1 },
+					effects: { line: { period: 1 }, point: false },
+					showGrid: false,
+					background: '#ffffff'
+				})
+				forwardView.fitView()
+				await showHost(forwardHost)
+				await advance(60, 2)
+				const forwardDecorations = () => {
+					const scene = forwardView.snapshotScene({ background: false })
+					return {
+						deco: scene.decorations.find(item => item.fill === 'rgba(0,255,0,1)'),
+						arrow: scene.decorations.find(item => item.fill === 'rgba(255,0,0,1)')
+					}
+				}
+				const forwardEffectSample = () => forwardView.getLineEffects().find(item => item.lineIndex === 0)
+				const forwardStart = forwardDecorations()
+				const forwardStartEffect = forwardEffectSample()
+				check('forward 默认 true：装饰在 25%、方向箭头在 75%，两者都顺着 from -> to',
+					Boolean(forwardStart.deco && forwardStart.arrow) && forwardStart.deco.x < forwardStart.arrow.x &&
+					Math.abs(forwardStart.deco.angle) < 0.01 && Math.abs(forwardStart.arrow.angle) < 0.01,
+					JSON.stringify({ deco: forwardStart.deco && [forwardStart.deco.x, forwardStart.deco.angle], arrow: forwardStart.arrow && [forwardStart.arrow.x, forwardStart.arrow.angle] }))
+				check('forward 默认 true：动点从 path[0] 起算（offset 25% 落在 40）',
+					Math.abs(forwardStartEffect?.x - 40) < 2 && Math.abs(forwardStartEffect?.angle) < 0.01,
+					JSON.stringify(forwardStartEffect))
+
+				forwardView.updateLine('forward-line', { forward: false })
+				await advance(100, 3)
+				const forwardReversed = forwardDecorations()
+				const forwardReversedEffect = forwardEffectSample()
+				check('updateLine({ forward:false }) 立刻把装饰与方向箭头镜像到另一端',
+					Boolean(forwardReversed.deco && forwardReversed.arrow) &&
+					Math.abs(forwardReversed.deco.x - forwardStart.arrow.x) < 0.6 &&
+					Math.abs(forwardReversed.arrow.x - forwardStart.deco.x) < 0.6 &&
+					Math.abs(Math.abs(forwardReversed.deco.angle) - Math.PI) < 0.02 &&
+					Math.abs(Math.abs(forwardReversed.arrow.angle) - Math.PI) < 0.02,
+					JSON.stringify({ deco: forwardReversed.deco && [forwardReversed.deco.x, forwardReversed.deco.angle], arrow: forwardReversed.arrow && [forwardReversed.arrow.x, forwardReversed.arrow.angle] }))
+				check('forward:false 立刻把动点翻到另一端、朝向也翻半圈',
+					Math.abs(forwardReversedEffect?.x - 120) < 2 && Math.abs(Math.abs(forwardReversedEffect?.angle) - Math.PI) < 0.02,
+					JSON.stringify(forwardReversedEffect))
+
+				forwardView.updateLine('forward-line', { direction: { positions: [0.75], symbol: 'square', size: 12, color: '#ff0000', reverse: true } })
+				await advance(60, 2)
+				const xorDirection = forwardDecorations()
+				check('forward:false 与 direction.reverse:true 异或：箭头回到 25% 并指回正向',
+					Boolean(xorDirection.deco && xorDirection.arrow) && xorDirection.arrow.x < xorDirection.deco.x &&
+					Math.abs(xorDirection.arrow.angle) < 0.01,
+					JSON.stringify({ deco: xorDirection.deco && [xorDirection.deco.x, xorDirection.deco.angle], arrow: xorDirection.arrow && [xorDirection.arrow.x, xorDirection.arrow.angle] }))
+
+				forwardView.updateLine('forward-line', { effect: { speed: 0.001, count: 1, offset: 0.25, parallel: true, size: 10, color: '#0000ff', reverse: true } })
+				await advance(60, 2)
+				const xorEffectSample = forwardEffectSample()
+				check('forward:false 与 effect.reverse:true 异或：动点回到 40、朝向翻回正向',
+					Math.abs(xorEffectSample?.x - 40) < 2 && Math.abs(xorEffectSample?.angle) < 0.01,
+					JSON.stringify(xorEffectSample))
+				forwardView.updateLine('forward-line', { forward: true })
+				await advance(60, 2)
+				const singleEffectReverse = forwardEffectSample()
+				check('只留 effect.reverse:true 时动点反向（forward 恢复 true 后落在 120）',
+					Math.abs(singleEffectReverse?.x - 120) < 2 && Math.abs(Math.abs(singleEffectReverse?.angle) - Math.PI) < 0.02,
+					JSON.stringify(singleEffectReverse))
+				forwardView.destroy()
+				forwardHost.remove()
+
 				/* ---------------- 引擎：全局什么都不配，只在数据里逐条配 ---------------- */
 				// 需求里的第二种写法：不动全局缺省，写在哪条上哪条就动（全局没配不代表关掉）
 				const soloHost = document.createElement('div')
@@ -309,6 +396,7 @@
 					showGrid: false
 				})
 				solo.fitView()
+				await showHost(soloHost)
 				await advance(60, 3)
 				const soloStats = solo.getStats()
 				check('全局不配、只在数据里逐条配：那条线动、那个节点冒涟漪，另一条不动',
@@ -325,8 +413,58 @@
 				solo.destroy()
 				soloHost.remove()
 
+				/* ---------------- 引擎：动点缓存只跟动画线路走，路径就地换过总长要跟着换 ---------------- */
+				// 5000 条普通线 + 2 条动点线：前者不该进入每帧的动点循环；后者在 updatePoint / updateLine
+				// 就地换路径后必须立刻按新弧长采样（拖动端点与拐点走的也是这条路）。
+				const stressHost = document.createElement('div')
+				stressHost.style.cssText = 'width:320px;height:180px'
+				document.body.append(stressHost)
+				const stressLines = new Array(5000)
+				for (let index = 0; index < stressLines.length; index += 1) {
+					const x = index % 100
+					const y = Math.floor(index / 100)
+					stressLines[index] = { path: [[x, y], [x + 1, y]] }
+				}
+				stressLines.push({ id: 'fx-bound', from: 'sp0', to: 'sp1', effect: { period: 1, count: 1 } })
+				stressLines.push({ id: 'fx-path', path: [[0, 10], [80, 10], [80, 60]], effect: { period: 1, count: 1 } })
+				const stress = createGisView(stressHost, {
+					points: [{ id: 'sp0', x: 0, y: 0 }, { id: 'sp1', x: 100, y: 0 }],
+					lines: stressLines,
+					showGrid: false,
+					width: 320,
+					height: 180
+				})
+				stress.fitView()
+				await advance(80, 3)
+				const stressStats = stress.getStats()
+				const totalsOf = () => new Map(stress.getLineEffects().map(item => [item.lineIndex, item.total]))
+				const initialTotals = totalsOf()
+				check('动点清单只包含配了 effect 的线路（5000 条普通线不进每帧循环）',
+					stressStats.lineEffectCount === 2 && stress.getData().lines.length === 5002,
+					JSON.stringify({ effects: stressStats.lineEffectCount, lines: stress.getData().lines.length }))
+				check('动点总长按初始折线算（100 / 130）',
+					initialTotals.get(5000) === 100 && initialTotals.get(5001) === 130,
+					`${initialTotals.get(5000)} / ${initialTotals.get(5001)}`)
+				stress.updatePoint('sp1', { x: 0, y: 50 })
+				await advance(60, 2)
+				const endpointTotals = totalsOf()
+				check('端点就地移动后动点总长跟着新路径重算（100 → 50）',
+					endpointTotals.get(5000) === 50 && endpointTotals.get(5001) === 130,
+					`${endpointTotals.get(5000)} / ${endpointTotals.get(5001)}`)
+				stress.updateLine('fx-path', { path: [[0, 10], [100, 10]] })
+				await advance(60, 2)
+				const pathTotals = totalsOf()
+				const pathGlyph = stress.getLineEffects().find(item => item.lineIndex === 5001)
+				check('updateLine 换整条路径后动点按新总长采样（130 → 100，位置仍在新线上）',
+					pathTotals.get(5001) === 100 && Math.abs(pathGlyph?.y - 10) < 1e-6 && pathGlyph?.x >= -1e-6 && pathGlyph?.x <= 100 + 1e-6,
+					JSON.stringify({ total: pathTotals.get(5001), x: pathGlyph?.x, y: pathGlyph?.y }))
+				stress.destroy()
+				stressHost.remove()
+
 				/* ---------------- 引擎：读像素证明动点真的画出来了 ---------------- */
 				// 只留线路动点（红色）：画面上红色的像素就只可能是它
+				// 前面滚动到过页面底部的临时画布；像素断言要在主画布自己的视口里读，先滚回来
+				await showHost(host)
 				view.updateOptions({ effects: { line: { period: 1.5, count: 1, size: 14, color: '#ff0000' }, point: false } })
 				const canvas = host.querySelector('canvas')
 				const gl = canvas.getContext('webgl2')
@@ -360,7 +498,69 @@
 					`${first.x.toFixed(1)},${first.y.toFixed(1)} -> ${second.x.toFixed(1)},${second.y.toFixed(1)}`)
 				diag('像素读数', `画布 ${width}x${height}，红点 ${first.count} 个像素 -> ${second.count} 个像素，质心 ${first.x.toFixed(1)},${first.y.toFixed(1)} -> ${second.x.toFixed(1)},${second.y.toFixed(1)}`)
 
+				/* ---------------- 引擎：动点拖尾是可见的渐隐带（像素级） ---------------- */
+				// 单独一条横线，只留红色动点：沿 x 轴数红色像素的跨度，单个图标约一个尺寸宽；
+				// 身后有 28 CSS 像素的拖尾时，可见尾段会明显超过图标本身（旧实现只有圆点）。
+				const trailHost = document.createElement('div')
+				trailHost.style.cssText = 'width:480px;height:200px'
+				document.body.append(trailHost)
+				const trailView = createGisView(trailHost, {
+					points: [],
+					lines: [{ id: 'trail-line', path: [[0, 0], [160, 0]], effect: true }],
+					lineStyle: { color: '#111111', width: 1 },
+					effects: { line: { period: 4, size: 10, color: '#ff0000', parallel: false }, point: false },
+					showGrid: false,
+					background: '#ffffff'
+				})
+				trailView.fitView()
+				await showHost(trailHost)
+				await advance(80, 3)
+				const trailCanvas = trailHost.querySelector('canvas')
+				const trailGl = trailCanvas.getContext('webgl2')
+				const trailWidth = trailGl.drawingBufferWidth
+				const trailHeight = trailGl.drawingBufferHeight
+				const trailPixels = new Uint8Array(trailWidth * trailHeight * 4)
+				const trailSpan = () => {
+					pump()
+					trailGl.readPixels(0, 0, trailWidth, trailHeight, trailGl.RGBA, trailGl.UNSIGNED_BYTE, trailPixels)
+					let minX = Number.POSITIVE_INFINITY
+					let maxX = Number.NEGATIVE_INFINITY
+					let count = 0
+					for (let y = 0; y < trailHeight; y += 1) {
+						for (let x = 0; x < trailWidth; x += 1) {
+							const offset = (y * trailWidth + x) * 4
+							const red = trailPixels[offset]
+							const green = trailPixels[offset + 1]
+							const blue = trailPixels[offset + 2]
+							// 白底上的红色拖尾从实心过渡到很淡的粉红，门槛压低一点才数得到尾段
+							if (red > 210 && red > green + 12 && red > blue + 12) {
+								minX = Math.min(minX, x)
+								maxX = Math.max(maxX, x)
+								count += 1
+							}
+						}
+					}
+					return count ? { span: maxX - minX + 1, count } : { span: 0, count: 0 }
+				}
+				let trailBest = { span: 0, count: 0 }
+				for (let index = 0; index < 10; index += 1) {
+					const next = trailSpan()
+					if (next.span > trailBest.span) {
+						trailBest = next
+					}
+					await sleep(80)
+				}
+				const trailRatio = trailView.getViewport().pixelRatio
+				// 最后一段已经淡到接近纸白，按可见的尾段量度：> 18 CSS 像素仍明显超过 10 px 的图标，
+				// 又不会把几乎看不见的尾尖也算进门槛，避免不同 GPU / 合成精度下偶发地卡在边界上。
+				check('线路动点：红点身后铺出渐隐拖尾（像素跨度明显超过单个图标）',
+					trailBest.count > 80 && trailBest.span > 18 * trailRatio,
+					`跨度 ${trailBest.span}px / ${trailBest.count} 个像素 / 期望 > ${(18 * trailRatio).toFixed(0)}px`)
+				trailView.destroy()
+				trailHost.remove()
+
 				/* ---------------- 引擎：多动点 / 多圈与帧泵开销 ---------------- */
+				await showHost(host)
 				view.updateOptions({ effects: { line: { period: 1, count: 8 }, point: { radius: 18, count: 2 } } })
 				await advance(80, 3)
 				const heavy = view.getStats()