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

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

@@ -1,7 +1,15 @@
 'use client'
 
 import type { FloorplanPalette } from '@pascal-app/core'
-import { createContext, type ReactNode, useContext, useMemo } from 'react'
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from 'react'
 
 /**
  * Per-frame render context shared between the legacy `floorplan-panel.tsx`
@@ -34,7 +42,43 @@ export type FloorplanRenderContextValue = {
   sceneRotationDeg: number
 }
 
-const FloorplanRenderContext = createContext<FloorplanRenderContextValue | null>(null)
+export type FloorplanStaticRenderContextValue = Omit<
+  FloorplanRenderContextValue,
+  'sceneRotationDeg' | 'unitsPerPixel'
+> & {
+  getSceneRotationDeg: () => number
+  getUnitsPerPixel: () => number
+  subscribeUnitsPerPixel: (listener: () => void) => () => void
+}
+
+const FloorplanStaticRenderContext = createContext<FloorplanStaticRenderContextValue | null>(null)
+const FloorplanSceneRotationContext = createContext(0)
+const FloorplanUnitsPerPixelContext = createContext(1)
+
+export type FloorplanRenderScaleReference = {
+  read: () => number
+  subscribe: (listener: () => void) => () => void
+  update: (unitsPerPixel: number) => void
+}
+
+export function createFloorplanRenderScaleReference(
+  initialUnitsPerPixel: number,
+): FloorplanRenderScaleReference {
+  let unitsPerPixel = initialUnitsPerPixel
+  const listeners = new Set<() => void>()
+  return {
+    read: () => unitsPerPixel,
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    update: (nextUnitsPerPixel) => {
+      if (Object.is(unitsPerPixel, nextUnitsPerPixel)) return
+      unitsPerPixel = nextUnitsPerPixel
+      for (const listener of listeners) listener()
+    },
+  }
+}
 
 export function FloorplanRenderProvider({
   children,
@@ -42,12 +86,39 @@ export function FloorplanRenderProvider({
   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)
+  }
+  const getUnitsPerPixel = renderScaleReference.current.read
+  const subscribeUnitsPerPixel = renderScaleReference.current.subscribe
+  useLayoutEffect(() => {
+    renderScaleReference.current?.update(unitsPerPixel)
+  }, [unitsPerPixel])
+  const staticValue = useMemo<FloorplanStaticRenderContextValue>(
+    () => ({
+      palette,
+      hatchPatternId,
+      getSceneRotationDeg,
+      getUnitsPerPixel,
+      subscribeUnitsPerPixel,
+    }),
+    [palette, hatchPatternId, getSceneRotationDeg, getUnitsPerPixel, subscribeUnitsPerPixel],
+  )
+  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 +129,39 @@ 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)
+}
+
+const subscribeToNoFloorplanScale = () => () => {}
+const readDefaultFloorplanScale = () => 1
+
+export function useFloorplanStaticUnitsPerPixel(): number {
+  const staticValue = useContext(FloorplanStaticRenderContext)
+  return useSyncExternalStore(
+    staticValue?.subscribeUnitsPerPixel ?? subscribeToNoFloorplanScale,
+    staticValue?.getUnitsPerPixel ?? readDefaultFloorplanScale,
+    staticValue?.getUnitsPerPixel ?? readDefaultFloorplanScale,
+  )
+}
+
+export function useFloorplanSceneRotation(): number {
+  return useContext(FloorplanSceneRotationContext)
 }

package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx

@@ -14,12 +14,14 @@ import { useFloorplanRender } from './floorplan-render-context'
  *   endpoint (corner) → square    midpoint → triangle
  *   intersection      → ✕ cross   wall body (edge) → circle
  *
- * Indigo to match the 3D beacon and stay distinct from the red Figma alignment
- * guides. Sizes are pixel-budgeted via `unitsPerPixel` so the marker stays a
+ * Indigo to match the 3D beacon, except the corner (endpoint) square which is
+ * green to match the alignment guides. Sizes are pixel-budgeted via
+ * `unitsPerPixel` so the marker stays a
  * constant size on screen at any zoom. Mounted inside the `data-floorplan-scene`
  * group so coordinates are world meters (XZ) 1:1, like the alignment guides.
  */
 const COLOR = '#6366f1' // indigo-500 — matches the 3D beacon
+const ENDPOINT_COLOR = '#22c55e' // green-500 — corner (endpoint) snap accent
 
 export const FloorplanSnapBeaconLayer = memo(function FloorplanSnapBeaconLayer() {
   const point = useWallSnapIndicator((s) => s.point)
@@ -54,7 +56,7 @@ function SnapMarker({
   z: number
 }) {
   if (kind === 'endpoint') {
-    return <rect fill={color} height={m * 2} width={m * 2} x={x - m} y={z - m} />
+    return <rect fill={ENDPOINT_COLOR} height={m * 2} width={m * 2} x={x - m} y={z - m} />
   }
   if (kind === 'midpoint') {
     const t = m * 1.3

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

@@ -0,0 +1,285 @@
+import { describe, expect, test } from 'bun:test'
+import { floorplanGeometryMetadata } from '../../../lib/floorplan/floorplan-extension'
+import {
+  floorplanAnnotationObstacleMode,
+  polylineObstacleRectangles,
+  resolveAnnotationLabelRectangles,
+  resolveSvgAnnotationCollisions,
+} from './floorplan-annotation-layout'
+
+describe('floorplanAnnotationObstacleMode', () => {
+  test('treats fixed annotation categories as layout obstacles', () => {
+    expect(
+      floorplanAnnotationObstacleMode({
+        kind: 'text',
+        x: 0,
+        y: 0,
+        text: 'BEDROOM',
+        fontSize: 0.18,
+        metadata: floorplanGeometryMetadata({ annotationRole: 'room-label' }),
+      }),
+    ).toBe('bounds')
+    expect(
+      floorplanAnnotationObstacleMode({
+        kind: 'line',
+        x1: 0,
+        y1: 0,
+        x2: 1,
+        y2: 0,
+        metadata: floorplanGeometryMetadata({ annotationRole: 'column-center' }),
+      }),
+    ).toBe('bounds')
+    expect(
+      floorplanAnnotationObstacleMode({
+        kind: 'polyline',
+        points: [
+          [0, 0],
+          [1, 0],
+        ],
+        metadata: floorplanGeometryMetadata({ annotationRole: 'stair-annotation' }),
+      }),
+    ).toBe('outline')
+  })
+})
+
+describe('resolveAnnotationLabelRectangles', () => {
+  test('keeps the higher-priority label and moves the conflicting label', () => {
+    const shifts = resolveAnnotationLabelRectangles([
+      { id: 'overall', x: 0, y: 0, width: 80, height: 12, priority: 100 },
+      { id: 'opening', x: 20, y: 0, width: 50, height: 12, priority: 50 },
+    ])
+
+    expect(shifts.find((entry) => entry.id === 'overall')).toMatchObject({ dx: 0, dy: 0 })
+    expect(shifts.find((entry) => entry.id === 'opening')).not.toMatchObject({ dx: 0, dy: 0 })
+    expect(shifts.every((entry) => entry.resolved)).toBe(true)
+  })
+
+  test('keeps pinned labels at their drawing-view override and routes other labels around them', () => {
+    const shifts = resolveAnnotationLabelRectangles([
+      {
+        id: 'pinned',
+        x: 0,
+        y: 0,
+        width: 80,
+        height: 12,
+        priority: 1,
+        pinnedShift: { dx: 30, dy: 0 },
+      },
+      { id: 'automatic', x: 30, y: 0, width: 80, height: 12, priority: 100 },
+    ])
+
+    expect(shifts.find((entry) => entry.id === 'pinned')).toEqual({
+      id: 'pinned',
+      dx: 30,
+      dy: 0,
+      resolved: true,
+    })
+    expect(shifts.find((entry) => entry.id === 'automatic')).not.toMatchObject({
+      dx: 0,
+      dy: 0,
+    })
+  })
+
+  test('does not move labels that are already clear', () => {
+    expect(
+      resolveAnnotationLabelRectangles([
+        { id: 'left', x: 0, y: 0, width: 40, height: 12, priority: 10 },
+        { id: 'right', x: 100, y: 0, width: 40, height: 12, priority: 10 },
+      ]),
+    ).toEqual([
+      { id: 'left', dx: 0, dy: 0, resolved: true },
+      { id: 'right', dx: 0, dy: 0, resolved: true },
+    ])
+  })
+
+  test('preserves drawing order for labels on the same dimension string', () => {
+    const shifts = resolveAnnotationLabelRectangles([
+      { id: 'first', x: 0, y: 0, width: 20, height: 12, priority: 10 },
+      { id: 'second', x: 0, y: 0, width: 80, height: 12, priority: 10 },
+    ])
+
+    expect(shifts.find((entry) => entry.id === 'first')).toMatchObject({ dx: 0, dy: 0 })
+    expect(shifts.find((entry) => entry.id === 'second')).not.toMatchObject({ dx: 0, dy: 0 })
+  })
+
+  test('slides a colliding label along its dimension string before crossing tiers', () => {
+    const shifts = resolveAnnotationLabelRectangles([
+      { id: 'datum', x: 0, y: 0, width: 40, height: 12, priority: 20 },
+      {
+        id: 'adjacent',
+        x: 0,
+        y: 0,
+        width: 40,
+        height: 12,
+        priority: 10,
+        tangentX: 1,
+        tangentY: 0,
+      },
+    ])
+
+    expect(shifts.find((entry) => entry.id === 'adjacent')).toMatchObject({ dy: 0, resolved: true })
+    expect(shifts.find((entry) => entry.id === 'adjacent')?.dx).not.toBe(0)
+  })
+
+  test('tries a short dimension alternative before generic relocation', () => {
+    const shifts = resolveAnnotationLabelRectangles(
+      [
+        {
+          id: 'short-dimension',
+          x: 0,
+          y: 0,
+          width: 40,
+          height: 12,
+          priority: 10,
+          preferredShifts: [{ dx: 100, dy: 0 }],
+        },
+      ],
+      [{ x: 0, y: 0, width: 40, height: 12 }],
+    )
+
+    expect(shifts).toEqual([{ id: 'short-dimension', dx: 100, dy: 0, resolved: true }])
+  })
+
+  test('falls back to a third position when both short-dimension sides are blocked', () => {
+    const shifts = resolveAnnotationLabelRectangles(
+      [
+        {
+          id: 'short-dimension',
+          x: 0,
+          y: 0,
+          width: 40,
+          height: 12,
+          priority: 10,
+          preferredShifts: [{ dx: 100, dy: 0 }],
+        },
+      ],
+      [
+        { x: 0, y: 0, width: 40, height: 12 },
+        { x: 100, y: 0, width: 40, height: 12 },
+      ],
+    )
+
+    expect(shifts[0]).toMatchObject({ id: 'short-dimension', resolved: true })
+    expect(shifts[0]).not.toMatchObject({ dx: 0, dy: 0 })
+    expect(shifts[0]).not.toMatchObject({ dx: 100, dy: 0 })
+  })
+
+  test('approximates diagonal outlines without blocking their full bounding box', () => {
+    expect(
+      polylineObstacleRectangles([
+        { x: 0, y: 0 },
+        { x: 4, y: 4 },
+        { x: 8, y: 8 },
+      ]),
+    ).toEqual([
+      { x: -1, y: -1, width: 6, height: 6 },
+      { x: 3, y: 3, width: 6, height: 6 },
+    ])
+  })
+
+  test('moves a dimension value clear of a fixed door-mark pill', () => {
+    const shifts = resolveAnnotationLabelRectangles(
+      [{ id: 'door-width', x: 94, y: 88, width: 42, height: 16, priority: 100 }],
+      [{ x: 100, y: 82, width: 48, height: 32 }],
+    )
+
+    expect(shifts).toEqual([expect.objectContaining({ id: 'door-width', resolved: true })])
+    const shift = shifts[0]
+    expect(shift).not.toMatchObject({ dx: 0, dy: 0 })
+    expect(
+      94 + (shift?.dx ?? 0) + 42 + 6 <= 100 ||
+        148 + 6 <= 94 + (shift?.dx ?? 0) ||
+        88 + (shift?.dy ?? 0) + 16 + 6 <= 82 ||
+        114 + 6 <= 88 + (shift?.dy ?? 0),
+    ).toBe(true)
+  })
+
+  test('finds separate nearby positions for a dense label cluster', () => {
+    const shifts = resolveAnnotationLabelRectangles(
+      Array.from({ length: 4 }, (_, index) => ({
+        id: `label-${index}`,
+        x: 0,
+        y: 0,
+        width: 40,
+        height: 12,
+        priority: 10 - index,
+      })),
+    )
+
+    expect(new Set(shifts.map(({ dx, dy }) => `${dx},${dy}`))).toHaveLength(4)
+    expect(shifts.every((entry) => entry.resolved)).toBe(true)
+  })
+
+  test('keeps a large dense label cluster readable', () => {
+    const rectangles = Array.from({ length: 12 }, (_, index) => ({
+      id: `label-${index}`,
+      x: 100 + (index % 3) * 4,
+      y: 100 + (index % 2) * 3,
+      width: 48 + (index % 4) * 8,
+      height: 14,
+      priority: 20 - index,
+    }))
+    const shifts = resolveAnnotationLabelRectangles(rectangles)
+    const placed = rectangles.map((rectangle) => {
+      const shift = shifts.find(({ id }) => id === rectangle.id)
+      return {
+        ...rectangle,
+        x: rectangle.x + (shift?.dx ?? 0),
+        y: rectangle.y + (shift?.dy ?? 0),
+      }
+    })
+
+    expect(shifts.every((entry) => entry.resolved)).toBe(true)
+    for (let index = 0; index < placed.length; index += 1) {
+      for (let otherIndex = index + 1; otherIndex < placed.length; otherIndex += 1) {
+        const left = placed[index]
+        const right = placed[otherIndex]
+        if (!left || !right) continue
+        const overlaps = !(
+          left.x + left.width + 6 <= right.x ||
+          right.x + right.width + 6 <= left.x ||
+          left.y + left.height + 6 <= right.y ||
+          right.y + right.height + 6 <= left.y
+        )
+        expect(overlaps).toBe(false)
+      }
+    }
+  })
+
+  test('resolves a construction-plan label set without blocking the view transition', () => {
+    const labels = Array.from({ length: 25 }, (_, index) => ({
+      id: `label-${index}`,
+      x: index % 5,
+      y: index % 7,
+      width: 80,
+      height: 20,
+      priority: 25 - index,
+    }))
+    const obstacles = Array.from({ length: 100 }, (_, index) => ({
+      x: (index % 10) * 2,
+      y: (index % 13) * 2,
+      width: 100,
+      height: 40,
+    }))
+
+    const startedAt = performance.now()
+    const shifts = resolveAnnotationLabelRectangles(labels, obstacles)
+    const elapsedMs = performance.now() - startedAt
+
+    expect(shifts).toHaveLength(labels.length)
+    expect(shifts.every((entry) => entry.resolved)).toBe(true)
+    expect(elapsedMs).toBeLessThan(500)
+  })
+})
+
+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(resolveSvgAnnotationCollisions(svg, { labels: [] })).toBeUndefined()
+  })
+})