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

package/src/components/editor/floorplan-camera-sync.ts

@@ -0,0 +1,213 @@
+'use client'
+
+import { type CameraPose, emitter } from '@pascal-app/core'
+import { useEffect, useRef } from 'react'
+import { subscribeCameraPose } from '../../store/camera-pose-store'
+import { subscribeNavigationSyncPose } from '../../store/navigation-sync-pose-store'
+import type { NavigationSyncPose, NavigationSyncPoseInput } from '../../store/use-editor'
+
+const POSITION_EPSILON = 0.001
+const AZIMUTH_EPSILON = 1e-4
+const VIEW_WIDTH_EPSILON = 0.001
+
+type FloorplanNavigationSnapshot = Omit<NavigationSyncPoseInput, 'source'>
+
+function angleDeltaRadians(a: number, b: number) {
+  return Math.atan2(Math.sin(a - b), Math.cos(a - b))
+}
+
+function normalizeNearZero(value: number) {
+  return Math.abs(value) < Number.EPSILON * 10 ? 0 : value
+}
+
+function navigationSnapshot(pose: NavigationSyncPoseInput): FloorplanNavigationSnapshot {
+  return {
+    target: [...pose.target],
+    azimuth: pose.azimuth,
+    viewWidth: pose.viewWidth,
+  }
+}
+
+function navigationSnapshotsEqual(
+  previous: FloorplanNavigationSnapshot,
+  next: FloorplanNavigationSnapshot,
+) {
+  return (
+    Math.abs(previous.target[0] - next.target[0]) < POSITION_EPSILON &&
+    Math.abs(previous.target[1] - next.target[1]) < POSITION_EPSILON &&
+    Math.abs(previous.target[2] - next.target[2]) < POSITION_EPSILON &&
+    Math.abs(angleDeltaRadians(previous.azimuth, next.azimuth)) < AZIMUTH_EPSILON &&
+    Math.abs(previous.viewWidth - next.viewWidth) < VIEW_WIDTH_EPSILON
+  )
+}
+
+export function cameraPoseToFloorplanNavigationPose(
+  pose: CameraPose,
+): NavigationSyncPoseInput | null {
+  if (!(pose.viewWidth !== undefined && Number.isFinite(pose.viewWidth) && pose.viewWidth > 0)) {
+    return null
+  }
+
+  return {
+    source: '3d',
+    target: [...pose.target],
+    azimuth: Math.atan2(pose.position[0] - pose.target[0], pose.position[2] - pose.target[2]),
+    viewWidth: pose.viewWidth,
+  }
+}
+
+export function floorplanNavigationPoseToCameraPose(
+  navigationPose: NavigationSyncPose,
+  cameraPose: CameraPose,
+): CameraPose {
+  const offsetX = cameraPose.position[0] - cameraPose.target[0]
+  const offsetY = cameraPose.position[1] - cameraPose.target[1]
+  const offsetZ = cameraPose.position[2] - cameraPose.target[2]
+  const horizontalDistance = Math.hypot(offsetX, offsetZ)
+  const horizontalX = normalizeNearZero(Math.sin(navigationPose.azimuth) * horizontalDistance)
+  const horizontalZ = normalizeNearZero(Math.cos(navigationPose.azimuth) * horizontalDistance)
+  const target: [number, number, number] = [...navigationPose.target]
+
+  return {
+    ...(cameraPose.fov === undefined ? {} : { fov: cameraPose.fov }),
+    position: [target[0] + horizontalX, target[1] + offsetY, target[2] + horizontalZ],
+    projection: cameraPose.projection,
+    target,
+    viewWidth: navigationPose.viewWidth,
+  }
+}
+
+export type FloorplanCameraSyncBridge = {
+  receiveCameraPose: (pose: CameraPose) => void
+  receiveNavigationPose: (pose: NavigationSyncPose | null) => void
+  setActive: (active: boolean) => void
+}
+
+export type FloorplanCameraNavigationChannel = {
+  publish: (pose: NavigationSyncPoseInput) => void
+  subscribe: (listener: (pose: NavigationSyncPose) => void) => () => void
+}
+
+export function createFloorplanCameraNavigationChannel(): FloorplanCameraNavigationChannel {
+  const listeners = new Set<(pose: NavigationSyncPose) => void>()
+  let revision = 0
+
+  return {
+    publish: (pose) => {
+      revision += 1
+      const revisedPose = { ...pose, revision }
+      for (const listener of listeners) {
+        listener(revisedPose)
+      }
+    },
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}
+
+const liveCameraNavigation = createFloorplanCameraNavigationChannel()
+
+export function subscribeFloorplanCameraNavigation(listener: (pose: NavigationSyncPose) => void) {
+  return liveCameraNavigation.subscribe(listener)
+}
+
+export function createFloorplanCameraSyncBridge({
+  active: initialActive = true,
+  applyCameraPose,
+  publishNavigationPose,
+}: {
+  active?: boolean
+  applyCameraPose: (pose: CameraPose) => void
+  publishNavigationPose: (pose: NavigationSyncPoseInput) => void
+}): FloorplanCameraSyncBridge {
+  let active = initialActive
+  let latestCameraPose: CameraPose | null = null
+  let pendingNavigationPose: NavigationSyncPose | null = null
+  let lastAppliedNavigationRevision = 0
+  let lastPublishedNavigation: FloorplanNavigationSnapshot | null = null
+
+  const applyPendingNavigationPose = () => {
+    if (!(latestCameraPose && pendingNavigationPose)) return false
+    if (pendingNavigationPose.revision === lastAppliedNavigationRevision) {
+      pendingNavigationPose = null
+      return false
+    }
+
+    const appliedPose = floorplanNavigationPoseToCameraPose(pendingNavigationPose, latestCameraPose)
+    const appliedNavigationPose = cameraPoseToFloorplanNavigationPose(appliedPose)
+    latestCameraPose = appliedPose
+    lastAppliedNavigationRevision = pendingNavigationPose.revision
+    pendingNavigationPose = null
+    if (appliedNavigationPose) {
+      lastPublishedNavigation = navigationSnapshot(appliedNavigationPose)
+    }
+    applyCameraPose(appliedPose)
+    return true
+  }
+
+  const publishCameraNavigationPose = (pose: CameraPose) => {
+    const navigationPose = cameraPoseToFloorplanNavigationPose(pose)
+    if (!navigationPose) return
+    const nextSnapshot = navigationSnapshot(navigationPose)
+    if (
+      lastPublishedNavigation &&
+      navigationSnapshotsEqual(lastPublishedNavigation, nextSnapshot)
+    ) {
+      return
+    }
+
+    lastPublishedNavigation = nextSnapshot
+    publishNavigationPose(navigationPose)
+  }
+
+  return {
+    receiveCameraPose: (pose) => {
+      latestCameraPose = pose
+      if (active && applyPendingNavigationPose()) return
+
+      publishCameraNavigationPose(pose)
+    },
+    receiveNavigationPose: (pose) => {
+      if (
+        !active ||
+        pose?.source !== '2d' ||
+        pose.revision === lastAppliedNavigationRevision ||
+        pose.revision === pendingNavigationPose?.revision
+      ) {
+        return
+      }
+
+      pendingNavigationPose = pose
+      applyPendingNavigationPose()
+    },
+    setActive: (nextActive) => {
+      if (active === nextActive) return
+      active = nextActive
+      if (!active) {
+        pendingNavigationPose = null
+        return
+      }
+      if (latestCameraPose) publishCameraNavigationPose(latestCameraPose)
+    },
+  }
+}
+
+export function useFloorplanCameraSyncBridge() {
+  // The compass is portalled into the always-visible viewer area, so its
+  // orientation-only 2D pose must still reach the camera while the floorplan
+  // itself is hidden in 3D view.
+  const bridgeRef = useRef<FloorplanCameraSyncBridge | null>(null)
+  if (!bridgeRef.current) {
+    bridgeRef.current = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => emitter.emit('camera-controls:apply-pose', pose),
+      publishNavigationPose: (pose) => liveCameraNavigation.publish(pose),
+    })
+  }
+  const bridge = bridgeRef.current
+
+  useEffect(() => subscribeCameraPose(bridge.receiveCameraPose), [bridge])
+
+  useEffect(() => subscribeNavigationSyncPose(bridge.receiveNavigationPose), [bridge])
+}

package/src/components/editor/floorplan-mode-coordinator.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { emitter, nodeRegistry } from '@pascal-app/core'
+import { X } from 'lucide-react'
+import { useEffect, useRef } from 'react'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+import { isFloorplanToolAvailableInMode } from '../../lib/floorplan/floorplan-mode'
+import useEditor from '../../store/use-editor'
+import useFloorplanMode from '../../store/use-floorplan-mode'
+
+function getToolLabel(tool: string): string {
+  return nodeRegistry.get(tool)?.presentation?.label ?? tool
+}
+
+export function FloorplanModeCoordinator() {
+  const editorMode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const floorplanMode = useFloorplanMode((state) => state.mode)
+  const notice = useFloorplanMode((state) => state.notice)
+  const dismissNotice = useFloorplanMode((state) => state.dismissNotice)
+  const setFloorplanMode = useFloorplanMode((state) => state.setMode)
+  const showExpertModeNotice = useFloorplanMode((state) => state.showExpertModeNotice)
+  const showNotice = useFloorplanMode((state) => state.showNotice)
+  const previousFloorplanMode = useRef(floorplanMode)
+
+  useEffect(() => {
+    const priorFloorplanMode = previousFloorplanMode.current
+    previousFloorplanMode.current = floorplanMode
+    if (floorplanMode !== 'default' || editorMode !== 'build' || !tool) return
+    const extension = getFloorplanNodeExtension(nodeRegistry.get(tool))
+    if (isFloorplanToolAvailableInMode(extension?.availableModes, floorplanMode)) return
+
+    const toolLabel = getToolLabel(tool)
+    emitter.emit('tool:cancel')
+    useEditor.getState().setMode('select')
+    if (priorFloorplanMode === 'expert') {
+      showNotice(
+        `Switched to Default. The unfinished ${toolLabel} draft was canceled; saved Expert annotations are hidden, not deleted.`,
+      )
+    } else {
+      showExpertModeNotice(toolLabel)
+    }
+  }, [editorMode, floorplanMode, showExpertModeNotice, showNotice, tool])
+
+  useEffect(() => {
+    if (!notice || notice.kind === 'switch-to-expert') return
+    const timer = window.setTimeout(dismissNotice, 6000)
+    return () => window.clearTimeout(timer)
+  }, [dismissNotice, notice])
+
+  if (!notice) return null
+
+  return (
+    <div
+      aria-live="polite"
+      className="fixed top-16 left-1/2 z-[100] flex max-w-md -translate-x-1/2 items-center gap-3 rounded-lg border border-border/60 bg-background/95 px-3 py-2 text-sm text-foreground shadow-elevation-3 backdrop-blur-xl"
+      role="status"
+    >
+      <span>{notice.message}</span>
+      {notice.kind === 'switch-to-expert' ? (
+        <button
+          className="shrink-0 rounded-md bg-cyan-500/15 px-2.5 py-1 font-medium text-cyan-400 hover:bg-cyan-500/25"
+          onClick={() => {
+            setFloorplanMode('expert')
+            dismissNotice()
+          }}
+          type="button"
+        >
+          Switch to Expert
+        </button>
+      ) : null}
+      <button
+        aria-label="Dismiss"
+        className="shrink-0 rounded p-1 text-muted-foreground hover:bg-white/10 hover:text-foreground"
+        onClick={dismissNotice}
+        type="button"
+      >
+        <X aria-hidden="true" className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}

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)
+}