@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/editor-2d/renderers/floorplan-reveal.test.tsx

@@ -0,0 +1,254 @@
+import { afterEach, beforeEach, describe, expect, spyOn, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeDefinition,
+  type AnyNodeId,
+  BaseNode,
+  clearSceneHistory,
+  type FloorplanGeometry,
+  LevelNode,
+  loadPlugin,
+  nodeRegistry,
+  nodeType,
+  objectId,
+  type RevealConfig,
+  runAsSceneCommitAuthor,
+  useScene,
+} from '@pascal-app/core'
+import {
+  type ConstructionRevealDriver,
+  getRevealPlanState,
+  startConstructionReveal,
+  useViewer,
+} from '@pascal-app/viewer'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import useEditor from '../../../store/use-editor'
+import { FloorplanRegistryLayer } from './floorplan-registry-layer'
+import { floorplanRevealAxis, floorplanRevealLook } from './floorplan-reveal'
+
+// The 2D plan follows the construction reveal (E-006): a node still waiting
+// for its turn is not drawn, then a wall grows along its centreline and the
+// rest fades in, on the reveal's own clock.
+
+const PLUGIN_ID = 'fixture:plan-reveal'
+const base = { object: 'node', parentId: null, visible: true, metadata: {} } as const
+
+function planKind(
+  kind: string,
+  prefix: string,
+  reveal: RevealConfig,
+  floorplan: () => FloorplanGeometry,
+): { schema: typeof BaseNode; definition: AnyNodeDefinition } {
+  const schema = BaseNode.extend({
+    id: objectId(prefix),
+    type: nodeType(kind),
+    children: LevelNode.shape.children,
+  })
+  const definition = {
+    kind,
+    schemaVersion: 1,
+    schema,
+    category: 'structure',
+    defaults: () => ({ ...base, children: [] }),
+    capabilities: { reveal },
+    floorplan,
+  }
+  return {
+    schema: schema as unknown as typeof BaseNode,
+    definition: definition as unknown as AnyNodeDefinition,
+  }
+}
+
+const WALL_LINE = { x1: 0, y1: 0, x2: 4, y2: 0 }
+const Wall = planKind(
+  'fixture:plan-wall',
+  'fxpwall',
+  { phase: 'structure', style: 'rise' },
+  () => ({
+    kind: 'group',
+    children: [
+      {
+        kind: 'polygon',
+        points: [
+          [0, -0.1],
+          [4, -0.1],
+          [4, 0.1],
+          [0, 0.1],
+        ],
+        fill: '#222',
+      },
+      { kind: 'hit-line', ...WALL_LINE, strokeWidthPx: 18 },
+    ],
+  }),
+)
+const Crate = planKind(
+  'fixture:plan-crate',
+  'fxpcrate',
+  { phase: 'furnishing', style: 'drop', height: 0.3 },
+  () => ({ kind: 'rect', x: 1, y: 1, width: 0.5, height: 0.5, fill: '#888' }),
+)
+
+const make = (kind: { schema: typeof BaseNode }) => kind.schema.parse({}) as unknown as AnyNode
+
+let driver: ConstructionRevealDriver | null = null
+let restoreRegistry: () => void = () => {}
+const savedScene = useScene.getState()
+const savedViewer = useViewer.getState()
+const savedEditor = useEditor.getState()
+
+function plan(): string {
+  // Server rendering reads Zustand's startup state; render the current scene instead.
+  const useSyncExternalStore = React.useSyncExternalStore
+  const serverSnapshot = spyOn(React, 'useSyncExternalStore').mockImplementation(
+    (subscribe, getSnapshot) => useSyncExternalStore(subscribe, getSnapshot, getSnapshot),
+  )
+  try {
+    return renderToStaticMarkup(
+      <svg>
+        <FloorplanRegistryLayer />
+      </svg>,
+    )
+  } finally {
+    serverSnapshot.mockRestore()
+  }
+}
+
+function openLevel(): AnyNodeId {
+  const level = LevelNode.parse({ level: 0, children: [] })
+  useScene.getState().setScene({ [level.id]: level as AnyNode }, [level.id as AnyNodeId], {
+    installedPlugins: [PLUGIN_ID],
+    hasExplicitPluginInstallState: true,
+  })
+  clearSceneHistory()
+  useViewer.setState({
+    selection: { ...useViewer.getState().selection, levelId: level.id, selectedIds: [] },
+  } as never)
+  useEditor.setState({ viewMode: '2d' })
+  driver = startConstructionReveal({
+    reveals: (commit) => commit.author === 'agent',
+    prefersReducedMotion: () => false,
+  })
+  return level.id as AnyNodeId
+}
+
+beforeEach(async () => {
+  restoreRegistry = nodeRegistry._snapshot()
+  nodeRegistry._reset()
+  await loadPlugin({ id: PLUGIN_ID, apiVersion: 1, nodes: [Wall.definition, Crate.definition] })
+})
+
+afterEach(() => {
+  driver?.stop()
+  driver = null
+  restoreRegistry()
+  useScene.setState(savedScene)
+  useViewer.setState(savedViewer)
+  useEditor.setState(savedEditor)
+})
+
+describe('the plan during a construction reveal', () => {
+  test('a node waiting for its turn is not drawn; it is once its turn comes', () => {
+    const levelId = openLevel()
+    const wall = make(Wall)
+    const crate = make(Crate)
+    runAsSceneCommitAuthor('agent', () =>
+      useScene.getState().createNodes([
+        { node: wall, parentId: levelId },
+        { node: crate, parentId: levelId },
+      ]),
+    )
+    let markup = plan()
+    expect(markup).not.toContain(`data-node-id="${wall.id}"`)
+    expect(markup).not.toContain(`data-node-id="${crate.id}"`)
+
+    driver!.tick(0)
+    expect(getRevealPlanState(wall.id)).not.toBeNull()
+    // Nothing draws in a test with no canvas, so the build does not wait for a first draw to settle.
+    let now = 0
+    while (getRevealPlanState(wall.id)?.progress === 0 && now < 3000) {
+      now += 20
+      driver!.tick(now)
+    }
+    markup = plan()
+    expect(markup).toContain(`data-node-id="${wall.id}"`)
+    expect(markup).not.toContain(`data-node-id="${crate.id}"`)
+
+    while (getRevealPlanState(crate.id)?.progress === 0 && now < 6000) {
+      now += 20
+      driver!.tick(now)
+    }
+    expect(plan()).toContain(`data-node-id="${crate.id}"`)
+  })
+
+  test("a person's own edit is drawn at once", () => {
+    const levelId = openLevel()
+    const wall = make(Wall)
+    useScene.getState().createNode(wall, levelId)
+    expect(plan()).toContain(`data-node-id="${wall.id}"`)
+  })
+})
+
+describe('how a revealing entry draws', () => {
+  test('a wall grows along its centreline from its start', () => {
+    const axis = floorplanRevealAxis([Wall.definition.floorplan!(make(Wall), {} as never)])
+    expect(axis).toEqual(WALL_LINE)
+
+    const start = floorplanRevealLook({ style: 'rise', progress: 0 }, axis)
+    const middle = floorplanRevealLook({ style: 'rise', progress: 0.5 }, axis)
+    const end = floorplanRevealLook({ style: 'rise', progress: 1 }, axis)
+    expect(start.opacity).toBe(1)
+    expect(start.clip!.width).toBeLessThan(middle.clip!.width)
+    expect(middle.clip!.width).toBeLessThan(end.clip!.width)
+    // Grown, it covers the whole wall and its mitred corners.
+    expect(start.clip!.x + end.clip!.width).toBeGreaterThan(WALL_LINE.x2)
+    expect(start.clip!.x).toBeLessThan(WALL_LINE.x1)
+    expect(end.clip!.rotateDeg).toBe(0)
+    expect(
+      floorplanRevealLook({ style: 'rise', progress: 0.5 }, { x1: 0, y1: 0, x2: 0, y2: 3 }).clip!
+        .rotateDeg,
+    ).toBe(90)
+  })
+
+  test("an undo's reverse play is the same look read backwards: a wall's clip shrinks, the rest fades out", () => {
+    const axis = floorplanRevealAxis([Wall.definition.floorplan!(make(Wall), {} as never)])
+    const whole = floorplanRevealLook({ style: 'rise', progress: 1 }, axis)
+    const half = floorplanRevealLook({ style: 'rise', progress: 0.5 }, axis)
+    const gone = floorplanRevealLook({ style: 'rise', progress: 0 }, axis)
+    expect(whole.clip!.width).toBeGreaterThan(half.clip!.width)
+    expect(half.clip!.width).toBeGreaterThan(gone.clip!.width)
+    // Gone, the clip covers nothing of the wall (only the pad before its start).
+    expect(gone.clip!.width).toBeLessThanOrEqual(1)
+    expect(floorplanRevealLook({ style: 'drop', progress: 1 }, null).opacity).toBe(1)
+    expect(floorplanRevealLook({ style: 'drop', progress: 0.4 }, null).opacity).toBeLessThan(1)
+    expect(floorplanRevealLook({ style: 'drop', progress: 0 }, null).opacity).toBe(0)
+  })
+
+  test('everything else fades in', () => {
+    for (const style of ['drop', 'settle', 'cut', 'scale', 'assemble'] as const) {
+      const faint = floorplanRevealLook({ style, progress: 0.1 }, null)
+      const strong = floorplanRevealLook({ style, progress: 0.8 }, null)
+      expect(faint.clip).toBeNull()
+      expect(faint.opacity).toBeLessThan(strong.opacity)
+      expect(floorplanRevealLook({ style, progress: 1 }, null).opacity).toBe(1)
+    }
+    // A rising kind with no centreline fades too.
+    expect(floorplanRevealLook({ style: 'rise', progress: 0.1 }, null).clip).toBeNull()
+  })
+
+  test('only a centreline outside any transformed group is an axis', () => {
+    expect(floorplanRevealAxis([{ kind: 'rect', x: 0, y: 0, width: 1, height: 1 }])).toBeNull()
+    expect(
+      floorplanRevealAxis([
+        {
+          kind: 'group',
+          transform: { rotate: 1 },
+          children: [{ kind: 'hit-line', ...WALL_LINE, strokeWidthPx: 18 }],
+        },
+      ]),
+    ).toBeNull()
+    expect(
+      floorplanRevealAxis([{ kind: 'hit-line', x1: 1, y1: 1, x2: 1, y2: 1, strokeWidthPx: 18 }]),
+    ).toBeNull()
+  })
+})

package/src/components/editor-2d/renderers/floorplan-reveal.ts

@@ -0,0 +1,141 @@
+'use client'
+
+import type { FloorplanGeometry } from '@pascal-app/core'
+import { getRevealPlanState, type RevealPlanState, subscribeRevealTicks } from '@pascal-app/viewer'
+import { type RefObject, useEffect } from 'react'
+
+/** A node's plan centreline, from its start: what a growing reveal follows. */
+export type FloorplanRevealAxis = { x1: number; y1: number; x2: number; y2: number }
+
+/** An entry's plan geometry, by pass. */
+export type FloorplanRevealEntry = {
+  base: FloorplanGeometry | null
+  overlay: FloorplanGeometry | null
+  handles: FloorplanGeometry | null
+}
+
+/** How a revealing entry draws: its opacity, and for a growing one the clip that uncovers it. */
+export type FloorplanRevealLook = {
+  opacity: number
+  clip: { x: number; y: number; width: number; height: number; rotateDeg: number } | null
+}
+
+/** The clip reaches this far before the start and past the end, so mitred corners show whole. */
+const CLIP_PAD_M = 1
+/** And this far to either side of the centreline: the wall, its layers and its labels. */
+const CLIP_HALF_WIDTH_M = 50
+
+const easeOutCubic = (t: number) => 1 - (1 - t) ** 3
+
+/**
+ * The centreline a linear kind (a wall, a fence) draws as its `hit-line`, if
+ * its plan geometry has one outside any transformed group.
+ */
+export function floorplanRevealAxis(
+  geometries: readonly (FloorplanGeometry | null | undefined)[],
+): FloorplanRevealAxis | null {
+  const visit = (geometry: FloorplanGeometry): FloorplanRevealAxis | null => {
+    if (geometry.kind === 'hit-line') {
+      const { x1, y1, x2, y2 } = geometry
+      return Math.hypot(x2 - x1, y2 - y1) > 1e-6 ? { x1, y1, x2, y2 } : null
+    }
+    if (geometry.kind !== 'group' || geometry.transform) return null
+    for (const child of geometry.children) {
+      const axis = visit(child)
+      if (axis) return axis
+    }
+    return null
+  }
+  for (const geometry of geometries) {
+    const axis = geometry ? visit(geometry) : null
+    if (axis) return axis
+  }
+  return null
+}
+
+/**
+ * The plan's twin of a 3D reveal: a node that rises in 3D and has a
+ * centreline grows along it from its start; everything else fades in. An undo's
+ * reverse play reads the same look backwards: a wall's clip shrinks toward its
+ * start, everything else fades out.
+ */
+export function floorplanRevealLook(
+  state: RevealPlanState,
+  axis: FloorplanRevealAxis | null,
+): FloorplanRevealLook {
+  const eased = easeOutCubic(Math.min(1, Math.max(0, state.progress)))
+  if (state.style !== 'rise' || !axis) return { opacity: eased, clip: null }
+  const length = Math.hypot(axis.x2 - axis.x1, axis.y2 - axis.y1)
+  return {
+    opacity: 1,
+    clip: {
+      x: axis.x1 - CLIP_PAD_M,
+      y: axis.y1 - CLIP_HALF_WIDTH_M,
+      width: CLIP_PAD_M + eased * (length + CLIP_PAD_M),
+      height: CLIP_HALF_WIDTH_M * 2,
+      rotateDeg: (Math.atan2(axis.y2 - axis.y1, axis.x2 - axis.x1) * 180) / Math.PI,
+    },
+  }
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+let clipIds = 0
+
+/**
+ * Plays a node's construction reveal on its plan entry: while the reveal
+ * runs, each tick sets the entry group's opacity or its growing clip, then
+ * clears them when the node is done. Imperative, so a reveal re-renders no
+ * React tree; an entry with nothing revealing subscribes to nothing.
+ */
+export function useFloorplanReveal(
+  nodeId: string,
+  groupRef: RefObject<SVGGElement | null>,
+  entry: FloorplanRevealEntry | null,
+  waiting: boolean,
+  /** The reveal has something to play for the node (it moves in, or an undo takes it back): the effect runs again. */
+  active = false,
+) {
+  useEffect(() => {
+    const group = groupRef.current
+    if (waiting || !group || !getRevealPlanState(nodeId)) return
+    const axis = entry ? floorplanRevealAxis([entry.base, entry.overlay, entry.handles]) : null
+    let clip: SVGClipPathElement | null = null
+    let rect: SVGRectElement | null = null
+    let stop = () => {}
+    const clear = () => {
+      stop()
+      group.removeAttribute('opacity')
+      group.removeAttribute('clip-path')
+      clip?.remove()
+      clip = null
+    }
+    const apply = () => {
+      const state = getRevealPlanState(nodeId)
+      if (!state) return clear()
+      const look = floorplanRevealLook(state, axis)
+      group.setAttribute('opacity', String(look.opacity))
+      if (!look.clip) return
+      if (!(clip && rect)) {
+        clipIds += 1
+        const id = `floorplan-reveal-${clipIds}`
+        clip = document.createElementNS(SVG_NS, 'clipPath')
+        clip.setAttribute('id', id)
+        clip.setAttribute('clipPathUnits', 'userSpaceOnUse')
+        rect = document.createElementNS(SVG_NS, 'rect')
+        clip.appendChild(rect)
+        group.appendChild(clip)
+        group.setAttribute('clip-path', `url(#${id})`)
+      }
+      const { x, y, width, height, rotateDeg } = look.clip
+      rect.setAttribute('x', String(x))
+      rect.setAttribute('y', String(y))
+      rect.setAttribute('width', String(width))
+      rect.setAttribute('height', String(height))
+      rect.setAttribute('transform', `rotate(${rotateDeg} ${axis?.x1 ?? 0} ${axis?.y1 ?? 0})`)
+    }
+    stop = subscribeRevealTicks(apply)
+    apply()
+    return clear
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `active` only says the reveal's state may have changed
+  }, [nodeId, groupRef, entry, waiting, active])
+}

package/src/components/editor-2d/svg-paths.ts

@@ -66,12 +66,7 @@ export function buildSvgArcPath(
   endAngle: number,
 ) {
   const start = getArcPlanPoint(center, radius, startAngle)
-  const end = getArcPlanPoint(center, radius, endAngle)
-  const delta = endAngle - startAngle
-  const largeArcFlag = Math.abs(delta) > Math.PI ? 1 : 0
-  const sweepFlag = delta >= 0 ? 1 : 0
-
-  return `M ${toSvgX(start.x)} ${toSvgY(start.y)} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${toSvgX(end.x)} ${toSvgY(end.y)}`
+  return `M ${toSvgX(start.x)} ${toSvgY(start.y)} ${svgArcCommands(center, radius, startAngle, endAngle)}`
 }
 
 export function buildSvgAnnularSectorPath(
@@ -82,23 +77,25 @@ export function buildSvgAnnularSectorPath(
   endAngle: number,
 ) {
   const outerStart = getArcPlanPoint(center, outerRadius, startAngle)
-  const outerEnd = getArcPlanPoint(center, outerRadius, endAngle)
   const innerEnd = getArcPlanPoint(center, innerRadius, endAngle)
-  const innerStart = getArcPlanPoint(center, innerRadius, startAngle)
-  const delta = endAngle - startAngle
-  const largeArcFlag = Math.abs(delta) > Math.PI ? 1 : 0
-  const sweepFlag = delta >= 0 ? 1 : 0
-  const reverseSweepFlag = sweepFlag ? 0 : 1
-
   return [
     `M ${toSvgX(outerStart.x)} ${toSvgY(outerStart.y)}`,
-    `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} ${sweepFlag} ${toSvgX(outerEnd.x)} ${toSvgY(outerEnd.y)}`,
+    svgArcCommands(center, outerRadius, startAngle, endAngle),
     `L ${toSvgX(innerEnd.x)} ${toSvgY(innerEnd.y)}`,
-    `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} ${reverseSweepFlag} ${toSvgX(innerStart.x)} ${toSvgY(innerStart.y)}`,
+    svgArcCommands(center, innerRadius, endAngle, startAngle),
     'Z',
   ].join(' ')
 }
 
+function svgArcCommands(center: Point2D, radius: number, startAngle: number, endAngle: number) {
+  const delta = endAngle - startAngle
+  const count = Math.max(1, Math.ceil(Math.abs(delta) / Math.PI))
+  return Array.from({ length: count }, (_, index) => {
+    const end = getArcPlanPoint(center, radius, startAngle + (delta * (index + 1)) / count)
+    return `A ${radius} ${radius} 0 0 ${delta >= 0 ? 1 : 0} ${toSvgX(end.x)} ${toSvgY(end.y)}`
+  }).join(' ')
+}
+
 export function formatSvgPolygonPoints(points: Point2D[]) {
   return points.map((point) => `${toSvgX(point.x)},${toSvgY(point.y)}`).join(' ')
 }