editor: improve floorplan navigation performance

packages/core/src/events/bus.ts

@@ -222,7 +222,6 @@ type CameraControlEvents = {
   'camera-controls:orbit-ccw': undefined
   'camera-controls:fit-scene': CameraControlFitSceneEvent
   'camera-controls:generate-thumbnail': ThumbnailGenerateEvent
-  'camera-controls:pose': CameraPose
   'camera-controls:apply-pose': CameraPose
   'camera-controls:cancel-pose': undefined
   'camera-controls:interaction-start': undefined

packages/editor/src/components/editor-2d/floorplan-render-context.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from 'bun:test'
+import { createFloorplanRenderScaleReference } from './floorplan-render-context'
+
+describe('floorplan render context', () => {
+  test('updates the live scale without changing the registry-facing reader', () => {
+    const scale = createFloorplanRenderScaleReference(0.02)
+    const read = scale.read
+
+    scale.update(0.01)
+
+    expect(scale.read).toBe(read)
+    expect(read()).toBe(0.01)
+  })
+})

packages/editor/src/components/editor-2d/floorplan-render-context.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FloorplanPalette } from '@pascal-app/core'
-import { createContext, type ReactNode, useContext, useMemo } from 'react'
+import { createContext, type ReactNode, useContext, useMemo, useRef } from 'react'
 
 /**
  * Per-frame render context shared between the legacy `floorplan-panel.tsx`
@@ -34,20 +34,65 @@ export type FloorplanRenderContextValue = {
   sceneRotationDeg: number
 }
 
-const FloorplanRenderContext = createContext<FloorplanRenderContextValue | null>(null)
+export type FloorplanStaticRenderContextValue = Omit<
+  FloorplanRenderContextValue,
+  'sceneRotationDeg' | 'unitsPerPixel'
+> & {
+  getSceneRotationDeg: () => number
+  getUnitsPerPixel: () => number
+}
+
+const FloorplanStaticRenderContext = createContext<FloorplanStaticRenderContextValue | null>(null)
+const FloorplanSceneRotationContext = createContext(0)
+const FloorplanUnitsPerPixelContext = createContext(1)
+
+export type FloorplanRenderScaleReference = {
+  read: () => number
+  update: (unitsPerPixel: number) => void
+}
+
+export function createFloorplanRenderScaleReference(
+  initialUnitsPerPixel: number,
+): FloorplanRenderScaleReference {
+  let unitsPerPixel = initialUnitsPerPixel
+  return {
+    read: () => unitsPerPixel,
+    update: (nextUnitsPerPixel) => {
+      unitsPerPixel = nextUnitsPerPixel
+    },
+  }
+}
 
 export function FloorplanRenderProvider({
   children,
   unitsPerPixel,
   palette,
   hatchPatternId,
   sceneRotationDeg,
-}: FloorplanRenderContextValue & { children: ReactNode }) {
-  const value = useMemo<FloorplanRenderContextValue>(
-    () => ({ unitsPerPixel, palette, hatchPatternId, sceneRotationDeg }),
-    [unitsPerPixel, palette, hatchPatternId, sceneRotationDeg],
+  getSceneRotationDeg,
+}: FloorplanRenderContextValue & {
+  children: ReactNode
+  getSceneRotationDeg: () => number
+}) {
+  const renderScaleReference = useRef<FloorplanRenderScaleReference | null>(null)
+  if (!renderScaleReference.current) {
+    renderScaleReference.current = createFloorplanRenderScaleReference(unitsPerPixel)
+  }
+  renderScaleReference.current.update(unitsPerPixel)
+  const getUnitsPerPixel = renderScaleReference.current.read
+  const staticValue = useMemo<FloorplanStaticRenderContextValue>(
+    () => ({ palette, hatchPatternId, getSceneRotationDeg, getUnitsPerPixel }),
+    [palette, hatchPatternId, getSceneRotationDeg, getUnitsPerPixel],
+  )
+  return (
+    <FloorplanStaticRenderContext.Provider value={staticValue}>
+      <FloorplanUnitsPerPixelContext.Provider value={unitsPerPixel}>
+        <FloorplanSceneRotationContext.Provider value={sceneRotationDeg}>
+          {children}
+        </FloorplanSceneRotationContext.Provider>
+      </FloorplanUnitsPerPixelContext.Provider>
+    </FloorplanStaticRenderContext.Provider>
   )
-  return <FloorplanRenderContext.Provider value={value}>{children}</FloorplanRenderContext.Provider>
 }
 
 /**
@@ -58,5 +103,27 @@ export function FloorplanRenderProvider({
  * whole legacy panel along.
  */
 export function useFloorplanRender(): FloorplanRenderContextValue | null {
-  return useContext(FloorplanRenderContext)
+  const staticValue = useContext(FloorplanStaticRenderContext)
+  const sceneRotationDeg = useContext(FloorplanSceneRotationContext)
+  const unitsPerPixel = useContext(FloorplanUnitsPerPixelContext)
+  return useMemo(
+    () =>
+      staticValue
+        ? {
+            unitsPerPixel,
+            palette: staticValue.palette,
+            hatchPatternId: staticValue.hatchPatternId,
+            sceneRotationDeg,
+          }
+        : null,
+    [sceneRotationDeg, staticValue, unitsPerPixel],
+  )
+}
+
+export function useFloorplanStaticRender(): FloorplanStaticRenderContextValue | null {
+  return useContext(FloorplanStaticRenderContext)
+}
+
+export function useFloorplanSceneRotation(): number {
+  return useContext(FloorplanSceneRotationContext)
 }

packages/editor/src/components/editor-2d/renderers/floorplan-annotation-layout.test.ts

@@ -3,9 +3,9 @@ import { floorplanGeometryMetadata } from '../../../lib/floorplan/floorplan-exte
 import {
   collectAnnotationLayoutPreflightIssues,
   floorplanAnnotationObstacleMode,
-  observeSvgAnnotationLayoutChanges,
   polylineObstacleRectangles,
   resolveAnnotationLabelRectangles,
+  resolveSvgAnnotationCollisions,
 } from './floorplan-annotation-layout'
 
 describe('floorplanAnnotationObstacleMode', () => {
@@ -333,135 +333,14 @@ describe('resolveAnnotationLabelRectangles', () => {
   })
 })
 
-describe('observeSvgAnnotationLayoutChanges', () => {
-  test('requests a fresh collision pass when floor-plan geometry changes after mount', () => {
-    const OriginalMutationObserver = globalThis.MutationObserver
-    const originalRequestAnimationFrame = globalThis.requestAnimationFrame
-    const originalCancelAnimationFrame = globalThis.cancelAnimationFrame
-    let notify: MutationCallback | undefined
-    let animationFrames: FrameRequestCallback[] = []
-    let disconnected = false
-    let observedOptions: MutationObserverInit | undefined
-
-    class FakeMutationObserver {
-      constructor(callback: MutationCallback) {
-        notify = callback
-      }
-
-      observe(_target: Node, options?: MutationObserverInit): void {
-        observedOptions = options
-      }
-
-      disconnect(): void {
-        disconnected = true
-      }
-
-      takeRecords(): MutationRecord[] {
-        return []
-      }
-    }
-
-    globalThis.MutationObserver = FakeMutationObserver as typeof MutationObserver
-    globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
-      animationFrames.push(callback)
-      return animationFrames.length
-    }) as typeof requestAnimationFrame
-    globalThis.cancelAnimationFrame = (() => {}) as typeof cancelAnimationFrame
-    try {
-      const flushAnimationFrame = () => {
-        const callbacks = animationFrames
-        animationFrames = []
-        for (const callback of callbacks) callback(0)
-      }
-      let layoutPasses = 0
-      const stop = observeSvgAnnotationLayoutChanges({} as SVGSVGElement, () => {
-        layoutPasses += 1
-      })
-
-      notify?.([{ type: 'childList' } as MutationRecord], {} as MutationObserver)
-
-      expect(layoutPasses).toBe(0)
-      flushAnimationFrame()
-      expect(layoutPasses).toBe(0)
-      flushAnimationFrame()
-      expect(layoutPasses).toBe(1)
-      expect(observedOptions).toMatchObject({
-        attributes: true,
-        childList: true,
-        subtree: true,
-        attributeFilter: expect.any(Array),
-      })
-
-      notify?.(
-        [
-          {
-            attributeName: 'style',
-            target: { closest: () => ({}) },
-            type: 'attributes',
-          } as unknown as MutationRecord,
-        ],
-        {} as MutationObserver,
-      )
-      expect(layoutPasses).toBe(1)
-
-      stop()
-      expect(disconnected).toBe(true)
-    } finally {
-      globalThis.MutationObserver = OriginalMutationObserver
-      globalThis.requestAnimationFrame = originalRequestAnimationFrame
-      globalThis.cancelAnimationFrame = originalCancelAnimationFrame
-    }
-  })
-
-  test('waits for a quiet frame instead of resolving on every mutation frame', () => {
-    const OriginalMutationObserver = globalThis.MutationObserver
-    const originalRequestAnimationFrame = globalThis.requestAnimationFrame
-    const originalCancelAnimationFrame = globalThis.cancelAnimationFrame
-    let notify: MutationCallback | undefined
-    let animationFrames: FrameRequestCallback[] = []
-
-    class FakeMutationObserver {
-      constructor(callback: MutationCallback) {
-        notify = callback
-      }
-
-      observe(): void {}
-      disconnect(): void {}
-      takeRecords(): MutationRecord[] {
-        return []
-      }
-    }
-
-    globalThis.MutationObserver = FakeMutationObserver as typeof MutationObserver
-    globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
-      animationFrames.push(callback)
-      return animationFrames.length
-    }) as typeof requestAnimationFrame
-    globalThis.cancelAnimationFrame = (() => {}) as typeof cancelAnimationFrame
-    try {
-      const flushAnimationFrame = () => {
-        const callbacks = animationFrames
-        animationFrames = []
-        for (const callback of callbacks) callback(0)
-      }
-      let layoutPasses = 0
-      const stop = observeSvgAnnotationLayoutChanges({} as SVGSVGElement, () => {
-        layoutPasses += 1
-      })
-
-      for (let frame = 0; frame < 30; frame += 1) {
-        notify?.([{ type: 'childList' } as MutationRecord], {} as MutationObserver)
-        flushAnimationFrame()
-      }
+describe('resolveSvgAnnotationCollisions', () => {
+  test('uses captured label references instead of querying for them again', () => {
+    const svg = {
+      querySelectorAll: () => {
+        throw new Error('labels were rediscovered')
+      },
+    } as unknown as SVGSVGElement
 
-      expect(layoutPasses).toBe(0)
-      flushAnimationFrame()
-      expect(layoutPasses).toBe(1)
-      stop()
-    } finally {
-      globalThis.MutationObserver = OriginalMutationObserver
-      globalThis.requestAnimationFrame = originalRequestAnimationFrame
-      globalThis.cancelAnimationFrame = originalCancelAnimationFrame
-    }
+    expect(resolveSvgAnnotationCollisions(svg, { labels: [] })).toEqual([])
   })
 })