@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/editor/floorplan-navigation-presentation.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  canApplyFloorplanNavigationSync,
+  canZoomFloorplanDuringNavigation,
+  createFloorplanNavigationSyncScheduler,
+  finalizeFloorplanNavigation,
+  flushFloorplanRotationPresentationRestore,
+  getFloorplanRotationOverscanViewBox,
+  queueFloorplanRotationPresentationRestore,
+  resolveFloorplanPresentationViewBox,
+  setFloorplanCompassRotation,
+} from './floorplan-navigation-presentation'
+
+describe('floorplan navigation presentation', () => {
+  test('keeps the viewport inside the painted floorplan surface throughout rotation', () => {
+    const viewport = { minX: -80, minY: -45, width: 160, height: 90 }
+    const overscan = getFloorplanRotationOverscanViewBox(viewport)
+    const viewportCorners: Array<[number, number]> = [
+      [-80, -45],
+      [80, -45],
+      [80, 45],
+      [-80, 45],
+    ]
+
+    for (let degrees = 0; degrees < 360; degrees += 1) {
+      const radians = (-degrees * Math.PI) / 180
+      const cos = Math.cos(radians)
+      const sin = Math.sin(radians)
+
+      for (const [x, y] of viewportCorners) {
+        const localX = x * cos - y * sin
+        const localY = x * sin + y * cos
+        expect(localX).toBeGreaterThanOrEqual(overscan.minX - 1e-10)
+        expect(localX).toBeLessThanOrEqual(overscan.minX + overscan.width + 1e-10)
+        expect(localY).toBeGreaterThanOrEqual(overscan.minY - 1e-10)
+        expect(localY).toBeLessThanOrEqual(overscan.minY + overscan.height + 1e-10)
+      }
+    }
+  })
+
+  test('keeps the imperative viewBox authoritative during navigation', () => {
+    const reactViewBox = { minX: 0, minY: 0, width: 100, height: 50 }
+    const imperativeViewBox = { minX: 25, minY: 10, width: 40, height: 20 }
+
+    expect(resolveFloorplanPresentationViewBox(reactViewBox, imperativeViewBox, true)).toBe(
+      imperativeViewBox,
+    )
+    expect(resolveFloorplanPresentationViewBox(reactViewBox, imperativeViewBox, false)).toBe(
+      reactViewBox,
+    )
+  })
+
+  test('does not mix wheel zoom with a compositor rotation preview', () => {
+    expect(canZoomFloorplanDuringNavigation(true)).toBe(false)
+    expect(canZoomFloorplanDuringNavigation(false)).toBe(true)
+  })
+
+  test('does not apply synchronized camera poses over local navigation', () => {
+    expect(canApplyFloorplanNavigationSync(true)).toBe(false)
+    expect(canApplyFloorplanNavigationSync(false)).toBe(true)
+  })
+
+  test('updates the compass presentation on every live rotation frame', () => {
+    const compass = { style: { transform: '' } }
+
+    setFloorplanCompassRotation(compass, 0.25)
+    expect(compass.style.transform).toBe('rotate(0.25deg)')
+
+    setFloorplanCompassRotation(compass, 0.5)
+    expect(compass.style.transform).toBe('rotate(0.5deg)')
+  })
+
+  test('keeps the rotation preview in place until the committed state is ready to paint', () => {
+    const pending = { current: null }
+    const svg = {
+      style: {
+        transform: 'rotate(42deg)',
+        transformOrigin: 'center',
+        willChange: 'transform',
+      },
+    }
+    const presentation = {
+      svg,
+      svgStyle: {
+        transform: '',
+        transformOrigin: '',
+        willChange: '',
+      },
+    }
+
+    queueFloorplanRotationPresentationRestore(pending, presentation)
+    expect(svg.style.transform).toBe('rotate(42deg)')
+
+    flushFloorplanRotationPresentationRestore(pending)
+    expect(svg.style.transform).toBe('')
+    expect(pending.current).toBeNull()
+  })
+
+  test('commits every active navigation channel before teardown', () => {
+    const calls: string[] = []
+    const rotationState = { angle: 42 }
+
+    finalizeFloorplanNavigation({
+      zoomPending: true,
+      panActive: true,
+      rotationState,
+      commitZoom: () => calls.push('zoom'),
+      commitPan: () => calls.push('pan'),
+      commitRotation: (state) => calls.push(`rotation:${state.angle}`),
+    })
+
+    expect(calls).toEqual(['zoom', 'pan', 'rotation:42'])
+  })
+
+  test('coalesces a camera pose stream into one settled React commit', () => {
+    const presented: number[] = []
+    const committed: number[] = []
+    let scheduled: (() => void) | null = null
+    const scheduler = createFloorplanNavigationSyncScheduler<number>({
+      applyPresentation: (pose) => presented.push(pose),
+      commit: (pose) => committed.push(pose),
+      schedule: (callback) => {
+        scheduled = callback
+        return 1 as unknown as ReturnType<typeof globalThis.setTimeout>
+      },
+      cancel: () => {
+        scheduled = null
+      },
+    })
+
+    for (let pose = 1; pose <= 30; pose += 1) {
+      scheduler.update(pose)
+    }
+
+    expect(presented).toHaveLength(30)
+    expect(committed).toEqual([])
+
+    const settle = scheduled as (() => void) | null
+    settle?.()
+    expect(committed).toEqual([30])
+  })
+})

package/src/components/editor/floorplan-navigation-presentation.ts

@@ -0,0 +1,156 @@
+export type FloorplanPresentationViewBox = {
+  minX: number
+  minY: number
+  width: number
+  height: number
+}
+
+export function setFloorplanCompassRotation(
+  compass: { style: { transform: string } } | null,
+  rotationDeg: number,
+): void {
+  if (compass) {
+    compass.style.transform = `rotate(${rotationDeg}deg)`
+  }
+}
+
+type FloorplanRotationPresentation = {
+  svg: {
+    style: {
+      transform: string
+      transformOrigin: string
+      willChange: string
+    }
+  }
+  svgStyle: {
+    transform: string
+    transformOrigin: string
+    willChange: string
+  }
+}
+
+export function queueFloorplanRotationPresentationRestore<
+  Presentation extends FloorplanRotationPresentation,
+>(pending: { current: Presentation | null }, presentation: Presentation): void {
+  pending.current = presentation
+}
+
+export function flushFloorplanRotationPresentationRestore<
+  Presentation extends FloorplanRotationPresentation,
+>(pending: { current: Presentation | null }): void {
+  const presentation = pending.current
+  if (!presentation) return
+
+  presentation.svg.style.transform = presentation.svgStyle.transform
+  presentation.svg.style.transformOrigin = presentation.svgStyle.transformOrigin
+  presentation.svg.style.willChange = presentation.svgStyle.willChange
+  pending.current = null
+}
+
+export function getFloorplanRotationOverscanViewBox(
+  viewBox: FloorplanPresentationViewBox,
+): FloorplanPresentationViewBox {
+  const size = Math.hypot(viewBox.width, viewBox.height)
+  const centerX = viewBox.minX + viewBox.width / 2
+  const centerY = viewBox.minY + viewBox.height / 2
+
+  return {
+    minX: centerX - size / 2,
+    minY: centerY - size / 2,
+    width: size,
+    height: size,
+  }
+}
+
+export function resolveFloorplanPresentationViewBox(
+  reactViewBox: FloorplanPresentationViewBox,
+  imperativeViewBox: FloorplanPresentationViewBox | null,
+  interactionInProgress: boolean,
+): FloorplanPresentationViewBox {
+  return interactionInProgress && imperativeViewBox ? imperativeViewBox : reactViewBox
+}
+
+export function canZoomFloorplanDuringNavigation(rotationInProgress: boolean): boolean {
+  return !rotationInProgress
+}
+
+export function canApplyFloorplanNavigationSync(interactionInProgress: boolean): boolean {
+  return !interactionInProgress
+}
+
+export type FloorplanNavigationSyncScheduler<Pose> = {
+  update: (pose: Pose) => void
+  flush: () => void
+  discard: () => void
+}
+
+export function createFloorplanNavigationSyncScheduler<Pose>({
+  applyPresentation,
+  commit,
+  settleMs = 120,
+  schedule = globalThis.setTimeout,
+  cancel = globalThis.clearTimeout,
+}: {
+  applyPresentation: (pose: Pose) => void
+  commit: (pose: Pose) => void
+  settleMs?: number
+  schedule?: (callback: () => void, delay: number) => ReturnType<typeof globalThis.setTimeout>
+  cancel?: (timer: ReturnType<typeof globalThis.setTimeout>) => void
+}): FloorplanNavigationSyncScheduler<Pose> {
+  let latestPose: Pose | null = null
+  let settleTimer: ReturnType<typeof globalThis.setTimeout> | null = null
+
+  const clearSettleTimer = () => {
+    if (settleTimer === null) return
+    cancel(settleTimer)
+    settleTimer = null
+  }
+
+  const flush = () => {
+    clearSettleTimer()
+    if (latestPose === null) return
+    const pose = latestPose
+    latestPose = null
+    commit(pose)
+  }
+
+  const update = (pose: Pose) => {
+    latestPose = pose
+    applyPresentation(pose)
+    clearSettleTimer()
+    settleTimer = schedule(() => {
+      settleTimer = null
+      if (latestPose === null) return
+      const settledPose = latestPose
+      latestPose = null
+      commit(settledPose)
+    }, settleMs)
+  }
+
+  const discard = () => {
+    clearSettleTimer()
+    latestPose = null
+  }
+
+  return { update, flush, discard }
+}
+
+export function finalizeFloorplanNavigation<RotationState>({
+  zoomPending,
+  panActive,
+  rotationState,
+  commitZoom,
+  commitPan,
+  commitRotation,
+}: {
+  zoomPending: boolean
+  panActive: boolean
+  rotationState: RotationState | null
+  commitZoom: () => void
+  commitPan: () => void
+  commitRotation: (rotationState: RotationState) => void
+}): void {
+  if (zoomPending) commitZoom()
+  if (panActive) commitPan()
+  if (rotationState) commitRotation(rotationState)
+}