City-Lifeline-Cockpit/.scratch/cockpit-shell-panel-layout/verify/t03-camera-walkthrough.mjs

/**
 * T03 真机走查：三键相机契约落在真实 Cesium 上的行为（票 03 / ADR 0008）。
 *
 * 逻辑脚本（t03-camera-contract.mjs）用假引擎把语义测透了，这里只补浏览器里才成立的部分：
 *   · Cesium 默认左键旋转 / 滚轮缩放确实被替换（左键只平移、滚轮只改距离）；
 *   · 三种交互在真机上确实按契约改变相机；
 *   · 未选中时中心就是屏幕中心的地面拾取点（用中心点在画布上的投点位置断言）；
 *   · 选中换中心平滑且保持 heading 与 range，取消选中不回退。
 *
 * 走查用 page.mouse 派发**真实**输入事件（不是合成 DOM 事件），读的是开发态把手
 * `window.__cockpitMap`（见 mapService 的 publishDevHook）与宿主上的 `data-camera`。
 *
 * 运行（需先起 `yarn dev`，服务在 http://localhost:8000/）：
 *   node .scratch/cockpit-shell-panel-layout/verify/t03-camera-walkthrough.mjs
 */
import { join } from 'node:path'
import { tmpdir } from 'node:os'

const BASE = process.env.COCKPIT_BASE || 'http://localhost:8000'
const ENTRY_URL = process.env.COCKPIT_URL || `${BASE}/#/cockpit`
const CHROME = process.env.CHROME_PATH || 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
const PUPPETEER = 'file:///C:/Users/ASUS/.dsh/profiles/desktop/node_modules/puppeteer-core/lib/puppeteer/puppeteer-core.js'

/** 沅陵县某监测点（只用于「选中换中心」这条，跟真实数据无关）。 */
const XIANGLING = { lon: 110.396, lat: 28.455, height: 0 }

const results = []
function check(id, desc, pass, evidence) {
    results.push({ id, desc, pass })
    console.log(`${pass ? 'PASS' : 'FAIL'}  ${id}  ${desc}${evidence ? `  — ${evidence}` : ''}`)
}

const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
const round = (n, digits = 3) => Number(n.toFixed(digits))

const puppeteer = (await import(PUPPETEER)).default
const browser = await puppeteer.launch({
    executablePath: CHROME,
    headless: true,
    userDataDir: join(tmpdir(), 'cockpit-t03-profile'),
    defaultViewport: { width: 1680, height: 950 },
    args: ['--no-sandbox', '--disable-dev-shm-usage', '--no-first-run', '--no-default-browser-check'],
})
console.log(`Chrome: ${await browser.version()}`)

try {
    const page = await browser.newPage()
    const pageErrors = []
    page.on('pageerror', (e) => pageErrors.push(String(e && e.message ? e.message : e)))

    await page.goto(ENTRY_URL, { waitUntil: 'networkidle2', timeout: 60000 })
    await page.waitForSelector('.cockpit-shell', { timeout: 20000 })
    await page
        .waitForFunction(
            () => document.querySelector('.cockpit-shell__map .map-canvas')?.dataset.mapEngine === 'ready',
            { timeout: 60000 },
        )
        .catch(() => {})
    await page.waitForFunction(() => !!window.__cockpitMap, { timeout: 20000 })
    await sleep(800)

    const readState = () =>
        page.evaluate(() => {
            const state = window.__cockpitMap.getCameraState()
            const canvas = document.querySelector('.cockpit-shell__map .map-canvas canvas')
            const rect = canvas ? canvas.getBoundingClientRect() : null
            return {
                ...state,
                dataAttr: document.querySelector('.cockpit-shell__map .map-canvas')?.dataset.camera || '',
                canvas: rect ? { x: rect.x, y: rect.y, w: rect.width, h: rect.height } : null,
                projection: window.__cockpitMap.projectCameraPivot(),
            }
        })

    const center = async () => {
        const st = await readState()
        return { x: st.canvas.x + st.canvas.w / 2, y: st.canvas.y + st.canvas.h / 2 }
    }

    // ---------- A1 就绪与状态可读 ----------
    const base = await readState()
    check(
        'A1-camera-ready',
        '引擎就绪后相机状态可读：弹簧臂参数与中心都有值，宿主 data-camera 同步',
        !!base &&
            !!base.pivot &&
            base.pivot.lon > -180 &&
            base.hpr.range > 0 &&
            base.dataAttr.includes('pivot=') &&
            base.dataAttr.includes('h='),
        JSON.stringify({ hpr: base.hpr, pivot: base.pivot, data: base.dataAttr }),
    )

    // ---------- A2 左键拖拽只平移（Cesium 默认左键旋转已被替换） ----------
    const a2before = await readState()
    const c2 = await center()
    await page.mouse.move(c2.x, c2.y)
    await page.mouse.down({ button: 'left' })
    await page.mouse.move(c2.x + 160, c2.y, { steps: 8 })
    await page.mouse.up({ button: 'left' })
    await sleep(120)
    const a2after = await readState()

    {
        const dEast = a2after.pivot.lon - a2before.pivot.lon
        const dNorth = a2after.pivot.lat - a2before.pivot.lat
        // 相机右手方向（东北分量）：heading 上「前方」=(sin h, cos h)，右手 = (cos h, -sin h)。
        const h = (a2before.hpr.heading * Math.PI) / 180
        const alongRight = dEast * Math.cos(h) + dNorth * -Math.sin(h)
        check(
            'A2-left-drag-pans-only',
            '左键拖拽只平移：heading/pitch/range 不变，中心沿相机右手方向移动（默认左键旋转已被替换）',
            Math.abs(a2after.hpr.heading - a2before.hpr.heading) < 0.05 &&
                Math.abs(a2after.hpr.pitch - a2before.hpr.pitch) < 0.05 &&
                Math.abs(a2after.hpr.range - a2before.hpr.range) < 1 &&
                Math.abs(dEast) + Math.abs(dNorth) > 1e-6 &&
                alongRight > 0,
            JSON.stringify({
                hBefore: round(a2before.hpr.heading),
                hAfter: round(a2after.hpr.heading),
                pivotBefore: a2before.pivot,
                pivotAfter: a2after.pivot,
                rightSign: alongRight > 0 ? '沿右手方向' : '反向',
            }),
        )
    }

    // ---------- A3 右键拖拽只做轨道旋转 ----------
    // 注意方向：默认全球视角的 pitch 已在下限附近，向下拖会被夹住，所以这里向上拖（pitch 变大）。
    const a3before = await readState()
    const c3 = await center()
    await page.mouse.move(c3.x, c3.y)
    await page.mouse.down({ button: 'right' })
    await page.mouse.move(c3.x + 120, c3.y - 40, { steps: 8 })
    await page.mouse.up({ button: 'right' })
    await sleep(120)
    const a3after = await readState()

    {
        const dHeading = ((a3after.hpr.heading - a3before.hpr.heading + 540) % 360) - 180
        const dPitch = a3after.hpr.pitch - a3before.hpr.pitch
        const dPivot = Math.abs(a3after.pivot.lon - a3before.pivot.lon) + Math.abs(a3after.pivot.lat - a3before.pivot.lat)
        check(
            'A3-right-drag-orbits-only',
            '右键拖拽只做轨道旋转：heading 随 dx、pitch 随 dy 变化，range 与中心不动',
            dHeading > 20 &&
                dHeading < 45 &&
                dPitch > 5 &&
                Math.abs(a3after.hpr.range - a3before.hpr.range) < 1 &&
                dPivot < 1e-9,
            JSON.stringify({
                dHeading: round(dHeading),
                dPitch: round(dPitch),
                pitchBefore: round(a3before.hpr.pitch),
                pitchAfter: round(a3after.hpr.pitch),
                range: round(a3after.hpr.range),
                dPivot,
            }),
        )
    }

    // ---------- A4 滚轮只改弹簧臂长度 ----------
    const a4before = await readState()
    const c4 = await center()
    await page.mouse.move(c4.x, c4.y)
    await page.mouse.wheel({ deltaY: -240 })
    await sleep(150)
    const a4after = await readState()

    check(
        'A4-wheel-changes-range-only',
        '滚轮只改弹簧臂长度：上滚拉近，heading/pitch/中心不动（默认滚轮缩放已被替换）',
        a4after.hpr.range < a4before.hpr.range * 0.95 &&
            Math.abs(a4after.hpr.heading - a4before.hpr.heading) < 0.05 &&
            Math.abs(a4after.hpr.pitch - a4before.hpr.pitch) < 0.05 &&
            Math.abs(a4after.pivot.lon - a4before.pivot.lon) < 1e-9 &&
            Math.abs(a4after.pivot.lat - a4before.pivot.lat) < 1e-9,
        JSON.stringify({ before: round(a4before.hpr.range), after: round(a4after.hpr.range), pivot: a4after.pivot }),
    )

    // ---------- A5 未选中时中心 = 屏幕中心的地面拾取点 ----------
    const a5 = await readState()
    {
        const cx = a5.canvas.x + a5.canvas.w / 2
        const cy = a5.canvas.y + a5.canvas.h / 2
        const dx = a5.projection ? Math.abs(a5.projection.x - cx) : Infinity
        const dy = a5.projection ? Math.abs(a5.projection.y - cy) : Infinity
        check(
            'A5-pivot-is-ground-pick',
            '未选中时中心 = 屏幕中心的地面拾取点（中心点投回画布即画布中心）',
            dx <= 2 && dy <= 2,
            JSON.stringify({ projection: a5.projection, canvasCenter: { x: round(cx, 1), y: round(cy, 1) }, dx: round(dx, 2), dy: round(dy, 2) }),
        )
    }

    // ---------- A6 选中换中心：平滑、保持 heading 与 range ----------
    const a6before = await readState()
    const sampled = await page.evaluate(async (target) => {
        const samples = []
        window.__cockpitMap.setCameraFocus(target)
        const started = performance.now()
        while (performance.now() - started < 1400) {
            const state = window.__cockpitMap.getCameraState()
            samples.push({
                t: Math.round(performance.now() - started),
                heading: state.hpr.heading,
                range: state.hpr.range,
                lon: state.pivot.lon,
                lat: state.pivot.lat,
                flying: state.flying,
            })
            if (!state.flying) break
            await new Promise((r) => setTimeout(r, 40))
        }
        return samples
    }, XIANGLING)

    {
        const headingFixed = sampled.every((s) => Math.abs(s.heading - a6before.hpr.heading) < 1e-9)
        const rangeFixed = sampled.every((s) => Math.abs(s.range - a6before.hpr.range) < 1e-9)
        const flyingFrames = sampled.filter((s) => s.flying).length
        const last = sampled[sampled.length - 1]
        const startLon = a6before.pivot.lon
        const dir = Math.sign(XIANGLING.lon - startLon) || 1
        const toward = sampled.map((s) => (s.lon - startLon) * dir)
        const monotonic = toward.every((v, i) => i === 0 || v >= toward[i - 1] - 1e-12)
        // 首帧不许瞬移：它离目标仍差大半个行程（相对起止跨度判断，与尺度无关）。
        const span = Math.abs(XIANGLING.lon - startLon)
        const firstGap = Math.abs(XIANGLING.lon - sampled[0].lon)
        check(
            'A6-focus-flies-to-ground-point',
            '选中对象：中心平滑飞到该对象地表点，全程保持 heading 与 range（首帧不瞬移）',
            sampled.length >= 3 &&
                flyingFrames >= 1 &&
                headingFixed &&
                rangeFixed &&
                monotonic &&
                Math.abs(last.lon - XIANGLING.lon) < 1e-6 &&
                Math.abs(last.lat - XIANGLING.lat) < 1e-6 &&
                firstGap > span * 0.2,
            JSON.stringify({
                frames: sampled.length,
                flyingFrames,
                heading: round(last.heading),
                range: round(last.range),
                pivot: { lon: round(last.lon, 6), lat: round(last.lat, 6) },
                spanDeg: round(span),
                firstGapDeg: round(firstGap),
            }),
        )
    }

    // ---------- A7 取消选中不回退中心 ----------
    const a7before = await readState()
    await page.evaluate(() => window.__cockpitMap.clearCameraFocus())
    await sleep(200)
    const a7after = await readState()

    check(
        'A7-clear-focus-keeps-pivot',
        '取消选中不立即回退中心（中心仍在刚选中的对象上，focus 标记清空）',
        Math.abs(a7after.pivot.lon - a7before.pivot.lon) < 1e-9 &&
            Math.abs(a7after.pivot.lat - a7before.pivot.lat) < 1e-9 &&
            a7after.focus === null,
        JSON.stringify({ pivot: a7after.pivot, focus: a7after.focus }),
    )

    // ---------- A8 平移把中心交回地面拾取点 ----------
    const c8 = await center()
    await page.mouse.move(c8.x, c8.y)
    await page.mouse.down({ button: 'left' })
    await page.mouse.move(c8.x + 40, c8.y + 20, { steps: 5 })
    await page.mouse.up({ button: 'left' })
    await sleep(150)
    const a8 = await readState()
    check(
        'A8-pan-returns-pivot-to-ground',
        '左键平移后中心回到地面拾取点（不再跟随选中对象），且仍落在画布中心',
        !!a8.projection &&
            Math.abs(a8.projection.x - (a8.canvas.x + a8.canvas.w / 2)) <= 2 &&
            Math.abs(a8.projection.y - (a8.canvas.y + a8.canvas.h / 2)) <= 2 &&
            Math.abs(a8.pivot.lon - XIANGLING.lon) > 1e-6,
        JSON.stringify({ pivot: a8.pivot, projection: a8.projection }),
    )

    check('A9-no-page-errors', '走查期间无页面级报错', pageErrors.length === 0, JSON.stringify(pageErrors.slice(0, 3)))
} finally {
    await browser.close()
}

const failed = results.filter((r) => !r.pass)
console.log(
    `\nT03 浏览器走查：${results.length - failed.length}/${results.length} 项通过${failed.length ? `，未通过：${failed.map((r) => r.id).join(', ')}` : ''}`,
)
process.exit(failed.length ? 1 : 0)