@pascal-app/editor 1.0.3 → 1.0.5

package/src/store/view-layout.ts

@@ -0,0 +1,199 @@
+/**
+ * The stage is one or two panes, each showing one view: the 3D scene, the 2D
+ * plan, or a view a host or plugin registered (`registerEditorHostView`). A view
+ * sits in at most one pane — the 3D canvas owns a single WebGL context and the
+ * plan a single interaction session — so every write keeps the panes distinct.
+ *
+ * Each workspace keeps its own layout, so Studio can sit on 3D | Gallery while
+ * Edit stays on 2D | 3D.
+ */
+
+export const VIEW_3D = '3d'
+export const VIEW_2D = '2d'
+
+export type ViewPaneIndex = 0 | 1
+
+export type ViewLayout = {
+  split: boolean
+  /** `panes[1]` is what split opens beside `panes[0]`, also while unsplit. */
+  panes: readonly [string, string]
+  /** Width of pane 0 as a fraction of the stage. */
+  ratio: number
+  focus: ViewPaneIndex
+}
+
+export const MIN_VIEW_PANE_RATIO = 0.15
+export const MAX_VIEW_PANE_RATIO = 0.85
+
+export const DEFAULT_VIEW_LAYOUT: ViewLayout = {
+  split: false,
+  panes: [VIEW_3D, VIEW_2D],
+  ratio: 0.5,
+  focus: 0,
+}
+
+/** Capture and first person frame through the 3D camera, whatever the layout says. */
+const SINGLE_3D_LAYOUT: ViewLayout = DEFAULT_VIEW_LAYOUT
+
+export function clampViewPaneRatio(value: unknown): number {
+  if (!(typeof value === 'number' && Number.isFinite(value))) return DEFAULT_VIEW_LAYOUT.ratio
+  return Math.min(MAX_VIEW_PANE_RATIO, Math.max(MIN_VIEW_PANE_RATIO, value))
+}
+
+export function normalizeViewLayout(value: unknown): ViewLayout {
+  const candidate = value as Partial<ViewLayout> | null | undefined
+  const panes = candidate?.panes
+  const first = typeof panes?.[0] === 'string' && panes[0] ? panes[0] : VIEW_3D
+  let second = typeof panes?.[1] === 'string' && panes[1] ? panes[1] : VIEW_2D
+  if (second === first) second = first === VIEW_3D ? VIEW_2D : VIEW_3D
+  const split = candidate?.split === true
+  return {
+    split,
+    panes: [first, second],
+    ratio: clampViewPaneRatio(candidate?.ratio),
+    focus: split && candidate?.focus === 1 ? 1 : 0,
+  }
+}
+
+export function visibleViews(layout: ViewLayout): readonly string[] {
+  return layout.split ? layout.panes : [layout.panes[0]]
+}
+
+export function paneOfView(layout: ViewLayout, viewId: string): ViewPaneIndex | null {
+  if (layout.panes[0] === viewId) return 0
+  if (layout.split && layout.panes[1] === viewId) return 1
+  return null
+}
+
+/** Put `viewId` in `pane`; if the other pane holds it, the two trade places. */
+export function withPaneView(layout: ViewLayout, pane: ViewPaneIndex, viewId: string): ViewLayout {
+  const target: ViewPaneIndex = layout.split ? pane : 0
+  const other: ViewPaneIndex = target === 0 ? 1 : 0
+  const panes: [string, string] = [layout.panes[0], layout.panes[1]]
+  if (panes[target] === viewId) return { ...layout, focus: target }
+  if (panes[other] === viewId) panes[other] = panes[target]
+  panes[target] = viewId
+  return { ...layout, panes, focus: target }
+}
+
+/**
+ * Show `viewId`. A view already on screen just takes focus; otherwise it
+ * replaces the focused pane, or with `beside` opens next to it.
+ */
+export function withView(
+  layout: ViewLayout,
+  viewId: string,
+  options: { beside?: boolean } = {},
+): ViewLayout {
+  const pane = paneOfView(layout, viewId)
+  if (pane !== null) return { ...layout, focus: pane }
+  if (!options.beside) return withPaneView(layout, layout.focus, viewId)
+  if (!layout.split) return withPaneView({ ...layout, split: true }, 1, viewId)
+  return withPaneView(layout, layout.focus === 0 ? 1 : 0, viewId)
+}
+
+/**
+ * Opening the split from 3D brings the plan in on the left, where the split has
+ * always put it, with 3D keeping focus. Closing a split keeps the focused pane.
+ */
+export function withSplitToggled(layout: ViewLayout): ViewLayout {
+  if (!layout.split) {
+    if (layout.panes[0] === VIEW_3D && layout.panes[1] === VIEW_2D) {
+      return { ...layout, split: true, panes: [VIEW_2D, VIEW_3D], focus: 1 }
+    }
+    return { ...layout, split: true }
+  }
+  const kept = layout.focus === 1 ? swapped(layout) : layout
+  return { ...kept, split: false, focus: 0 }
+}
+
+/**
+ * Close a view: a split collapses to the other pane; a single pane goes back to
+ * the scene.
+ */
+export function withoutView(layout: ViewLayout, viewId: string): ViewLayout {
+  const pane = paneOfView(layout, viewId)
+  if (pane === null) {
+    if (layout.panes[1] !== viewId) return layout
+    return { ...layout, panes: [layout.panes[0], layout.panes[0] === VIEW_3D ? VIEW_2D : VIEW_3D] }
+  }
+  const kept = layout.split ? layout.panes[pane === 0 ? 1 : 0] : VIEW_3D
+  return { ...layout, split: false, panes: [kept, kept === VIEW_3D ? VIEW_2D : VIEW_3D], focus: 0 }
+}
+
+export function swapped(layout: ViewLayout): ViewLayout {
+  return {
+    ...layout,
+    panes: [layout.panes[1], layout.panes[0]],
+    ratio: 1 - layout.ratio,
+    focus: layout.focus === 0 ? 1 : 0,
+  }
+}
+
+type ViewLayoutState = {
+  viewLayouts: Readonly<Record<string, ViewLayout>>
+  workspaceMode: string
+  isCaptureMode: boolean
+  isFirstPersonMode: boolean
+}
+
+export function storedViewLayout(state: Pick<ViewLayoutState, 'viewLayouts' | 'workspaceMode'>) {
+  return state.viewLayouts[state.workspaceMode] ?? DEFAULT_VIEW_LAYOUT
+}
+
+/** The layout on screen: the workspace's own, unless capture or first person needs 3D alone. */
+export function activeViewLayout(state: ViewLayoutState): ViewLayout {
+  if (state.isCaptureMode || state.isFirstPersonMode) return SINGLE_3D_LAYOUT
+  return storedViewLayout(state)
+}
+
+export function isViewVisible(state: ViewLayoutState, viewId: string): boolean {
+  return paneOfView(activeViewLayout(state), viewId) !== null
+}
+
+export type VisibleScene = '3d' | '2d' | 'split'
+
+/** A layout showing just the scene: 3D, the plan, or the plan beside 3D (the split as it always was). */
+export function sceneLayout(scene: VisibleScene, ratio = DEFAULT_VIEW_LAYOUT.ratio): ViewLayout {
+  if (scene === '3d') return DEFAULT_VIEW_LAYOUT
+  return {
+    split: scene === 'split',
+    panes: [VIEW_2D, VIEW_3D],
+    ratio: clampViewPaneRatio(ratio),
+    focus: 0,
+  }
+}
+
+/**
+ * Which projections of the scene are on screen — 3D alone, the plan alone, or
+ * both side by side — or `null` while the panes show other views only. The
+ * code that hands input between the canvas and the plan reads this: a plan
+ * beside a gallery owns input exactly as a plan alone does.
+ */
+export function visibleScene(state: ViewLayoutState): VisibleScene | null {
+  const layout = activeViewLayout(state)
+  const has3d = paneOfView(layout, VIEW_3D) !== null
+  const has2d = paneOfView(layout, VIEW_2D) !== null
+  if (has3d && has2d) return 'split'
+  if (has3d) return '3d'
+  if (has2d) return '2d'
+  return null
+}
+
+/**
+ * Layouts saved before views existed stored one `viewMode` (`'3d' | '2d' |
+ * 'split'`, the plan always on the left) and the plan's width.
+ */
+export function viewLayoutFromLegacy(legacy: {
+  viewMode?: unknown
+  isFloorplanOpen?: unknown
+  floorplanPaneRatio?: unknown
+}): ViewLayout {
+  const viewMode =
+    legacy.viewMode === '2d' || legacy.viewMode === '3d' || legacy.viewMode === 'split'
+      ? legacy.viewMode
+      : legacy.isFloorplanOpen === true
+        ? 'split'
+        : '3d'
+  return sceneLayout(viewMode, clampViewPaneRatio(legacy.floorplanPaneRatio))
+}

package/src/test-utils/immediate-animation-frames.ts

@@ -0,0 +1,16 @@
+export function installImmediateAnimationFrames(): () => void {
+  const names = ['requestAnimationFrame', 'cancelAnimationFrame'] as const
+  const previous = names.map((name) => Object.getOwnPropertyDescriptor(globalThis, name))
+  globalThis.requestAnimationFrame = (callback) => {
+    callback(0)
+    return 0
+  }
+  globalThis.cancelAnimationFrame = () => {}
+  return () => {
+    for (const [index, name] of names.entries()) {
+      const descriptor = previous[index]
+      if (descriptor) Object.defineProperty(globalThis, name, descriptor)
+      else Reflect.deleteProperty(globalThis, name)
+    }
+  }
+}

package/src/test-utils/live-gesture-round-trip.ts

@@ -0,0 +1,224 @@
+import { expect } from 'bun:test'
+import {
+  type AnyNodeId,
+  acquireSceneHistoryPause,
+  BuildingNode,
+  createZone,
+  DoorNode,
+  generateId,
+  getSceneHistoryPauseDepth,
+  initSpaceDetectionSync,
+  LevelNode,
+  useLiveNodeOverrides,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { commitRoomElevation } from '../lib/room-handle-drag'
+import { applyRoomPlan } from '../lib/room-structure-commands'
+
+/**
+ * The harness scene, reconciled live: a 6 × 4 m room (`zoneId`, its east wall
+ * at x = 6 the one gestures move) and, west of it through a door, a room raised
+ * 0.45 m (`raisedZoneId`) whose floor steps down through the doorway. Returns
+ * the reconciler's stop.
+ */
+export function seedRoundTripScene(buildingId: string, levelId: string) {
+  const building = BuildingNode.parse({ id: buildingId, children: [levelId] })
+  const level = LevelNode.parse({ id: levelId, parentId: building.id })
+  useScene.setState({
+    nodes: { [building.id]: building, [level.id]: level },
+    rootNodeIds: [building.id],
+    dirtyNodes: new Set(),
+    materials: {},
+    collections: {},
+    readOnly: false,
+  })
+  const stop = initSpaceDetectionSync(useScene, {
+    getState: () => ({ spaces: {}, setSpaces: () => {} }),
+  })
+  const room = (polygon: [number, number][]) => {
+    const plan = createZone(useScene.getState().nodes, {
+      levelId,
+      polygon,
+      enclose: true,
+      mintId: generateId,
+    })
+    applyRoomPlan(plan)
+    return plan.zoneId
+  }
+  const zoneId = room([
+    [0, 0],
+    [6, 0],
+    [6, 4],
+    [0, 4],
+  ])
+  const raisedZoneId = room([
+    [-4, 0],
+    [0, 0],
+    [0, 4],
+    [-4, 4],
+  ])
+  const shared = Object.values(useScene.getState().nodes).find(
+    (n): n is WallNode => n.type === 'wall' && n.start[0] === 0 && n.end[0] === 0,
+  )!
+  const door = DoorNode.parse({ parentId: shared.id, wallId: shared.id, position: [2, 0, 0] })
+  useScene.getState().applyNodeChanges({ create: [{ node: door, parentId: shared.id }] })
+  commitRoomElevation(raisedZoneId, 0.45)
+  return { stop, zoneId, raisedZoneId }
+}
+
+/**
+ * A live gesture as the harness drives it: `start` begins it and moves it far
+ * enough that its preview reshapes the building (derived plates, ceilings,
+ * zones included); then either `cancel` or `commit` ends it.
+ */
+export type LiveGesture = {
+  start: () => unknown
+  cancel: () => unknown
+  commit: () => unknown
+  /** Whether the preview ran (an override, a ghost…), checked after `start`. */
+  previewed?: () => boolean
+}
+
+/** Every node, as plain data (JSON also folds -0 into 0, as the transport does). */
+export const sceneData = (): Record<string, unknown> =>
+  JSON.parse(JSON.stringify(useScene.getState().nodes))
+
+function expectReleased() {
+  expect([...useLiveNodeOverrides.getState().overrides.keys()]).toEqual([])
+  expect(getSceneHistoryPauseDepth()).toBe(0)
+  expect(useScene.temporal.getState().isTracking).toBe(true)
+}
+
+/**
+ * start → move → cancel leaves every node deep-equal to before (derived ones
+ * included), no history entry, history tracking again, no override left, and
+ * every node the preview drew from an override marked to rebuild — else its
+ * mesh stays at the preview.
+ */
+export async function expectCancelRestores(gesture: LiveGesture) {
+  const before = sceneData()
+  const past = useScene.temporal.getState().pastStates.length
+  await gesture.start()
+  if (gesture.previewed) expect(gesture.previewed()).toBe(true)
+  const drawnFromPreview = [...useLiveNodeOverrides.getState().overrides.keys()] as AnyNodeId[]
+  useScene.getState().dirtyNodes.clear()
+  await gesture.cancel()
+  expect(sceneData()).toEqual(before)
+  expect(useScene.temporal.getState().pastStates.length).toBe(past)
+  expectReleased()
+  const { nodes, dirtyNodes, markDirty } = useScene.getState()
+  const stale = drawnFromPreview.filter((id) => {
+    if (!nodes[id] || dirtyNodes.has(id)) return false
+    // A kind that opts out of dirty tracking redraws from the override store itself.
+    markDirty(id)
+    return dirtyNodes.has(id)
+  })
+  expect(stale).toEqual([])
+}
+
+/**
+ * start → move → commit writes one undo step that reshapes derived nodes of
+ * `derivedTypes` too, releases everything, and one undo brings every node back.
+ */
+export async function expectCommitIsOneUndoStep(
+  gesture: LiveGesture,
+  derivedTypes: readonly string[] = ['slab', 'zone'],
+) {
+  const before = sceneData()
+  const past = useScene.temporal.getState().pastStates.length
+  await gesture.start()
+  await gesture.commit()
+  const after = sceneData()
+  expect(useScene.temporal.getState().pastStates.length).toBe(past + 1)
+  expectReleased()
+  const changedTypes = new Set(
+    Object.keys({ ...before, ...after })
+      .filter((id) => JSON.stringify(before[id]) !== JSON.stringify(after[id]))
+      .map((id) => ((after[id] ?? before[id]) as { type: string }).type),
+  )
+  for (const type of derivedTypes) expect([...changedTypes]).toContain(type)
+  useScene.temporal.getState().undo()
+  expect(sceneData()).toEqual(before)
+}
+
+/**
+ * During the drag only the surfaces (plates, ceilings, zones) the release
+ * reshapes are drawn from a preview, and each is drawn exactly as the release
+ * leaves it — the floors it never touches keep their stored shape.
+ */
+export async function expectPreviewMatchesCommit(
+  gesture: LiveGesture,
+  surfaceTypes: readonly string[] = ['slab', 'ceiling', 'zone'],
+) {
+  const before = sceneData() as Record<string, Record<string, unknown>>
+  await gesture.start()
+  const previews = new Map(
+    [...useLiveNodeOverrides.getState().overrides].filter(([id]) =>
+      surfaceTypes.includes(before[id]?.type as string),
+    ),
+  )
+  await gesture.commit()
+  const after = sceneData() as Record<string, Record<string, unknown>>
+  const json = (value: unknown) => JSON.stringify(value ?? null)
+  const untouched = [...previews.keys()].filter(
+    (id) => after[id] && json(before[id]) === json(after[id]),
+  )
+  expect(untouched).toEqual([])
+  const drawn: Record<string, Record<string, string>> = {}
+  const committed: Record<string, Record<string, string>> = {}
+  for (const [id, values] of previews) {
+    if (!after[id]) continue
+    drawn[id] = {}
+    committed[id] = {}
+    for (const key of Object.keys(values)) {
+      drawn[id][key] = json(values[key])
+      committed[id][key] = json(after[id][key])
+    }
+  }
+  expect(drawn).toEqual(committed)
+  const reshapedUnseen = Object.keys(after).filter(
+    (id) =>
+      before[id] &&
+      surfaceTypes.includes(after[id]!.type as string) &&
+      (json(before[id].polygon) !== json(after[id]!.polygon) ||
+        json(before[id].holes) !== json(after[id]!.holes)) &&
+      !previews.get(id)?.polygon,
+  )
+  expect(reshapedUnseen).toEqual([])
+}
+
+/**
+ * A collaborator's edit landing mid-gesture (here: a field the gesture never
+ * writes) survives both the cancel and the commit. `target` names the node,
+ * read once the gesture has started.
+ */
+export async function expectRemoteEditSurvives(
+  gesture: () => LiveGesture,
+  target: () => AnyNodeId,
+  patch: Record<string, unknown> = { name: 'Edited by a collaborator' },
+) {
+  const remote = (id: AnyNodeId) => {
+    const nodes = useScene.getState().nodes
+    const release = acquireSceneHistoryPause(useScene)
+    try {
+      useScene.setState({ nodes: { ...nodes, [id]: { ...nodes[id]!, ...patch } } })
+    } finally {
+      release()
+    }
+  }
+  for (const end of ['cancel', 'commit'] as const) {
+    const run = gesture()
+    const before = sceneData() as Record<string, Record<string, unknown>>
+    await run.start()
+    const id = target()
+    remote(id)
+    await run[end]()
+    const after = sceneData() as Record<string, Record<string, unknown>>
+    expect({ end, ...pick(after[id], patch) }).toEqual({ end, ...patch })
+    if (end === 'cancel') expect(after).toEqual({ ...before, [id]: { ...before[id], ...patch } })
+  }
+}
+
+const pick = (node: Record<string, unknown> | undefined, patch: Record<string, unknown>) =>
+  Object.fromEntries(Object.keys(patch).map((key) => [key, node?.[key]]))

package/src/test-utils/render-current-markup.tsx

@@ -0,0 +1,16 @@
+import { spyOn } from 'bun:test'
+import React, { type ReactElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+/** Server-renders `element` from the stores' current state, not the startup state a server render reads. */
+export function renderCurrentMarkup(element: ReactElement): string {
+  const useSyncExternalStore = React.useSyncExternalStore
+  const serverSnapshot = spyOn(React, 'useSyncExternalStore').mockImplementation(
+    (subscribe, getSnapshot) => useSyncExternalStore(subscribe, getSnapshot, getSnapshot),
+  )
+  try {
+    return renderToStaticMarkup(element)
+  } finally {
+    serverSnapshot.mockRestore()
+  }
+}

package/src/test-utils/selection-harness.ts

@@ -0,0 +1,82 @@
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { _roots, act, createRoot, extend } from '@react-three/fiber'
+import type { ReactNode } from 'react'
+import * as THREE from 'three'
+import useEditor from '../store/use-editor'
+import useInteractionScope from '../store/use-interaction-scope'
+import useSessionGroups from '../store/use-session-groups'
+
+extend({
+  Group: THREE.Group,
+  Mesh: THREE.Mesh,
+  LineSegments: THREE.LineSegments,
+  CircleGeometry: THREE.CircleGeometry,
+  CylinderGeometry: THREE.CylinderGeometry,
+  PlaneGeometry: THREE.PlaneGeometry,
+  MeshBasicMaterial: THREE.MeshBasicMaterial,
+  LineBasicMaterial: THREE.LineBasicMaterial,
+})
+
+export async function withSelectionHarness(
+  run: (harness: {
+    render: (node: ReactNode) => Promise<void>
+    canvas: HTMLCanvasElement
+  }) => Promise<void>,
+) {
+  const scene = useScene.getState()
+  const viewer = useViewer.getState()
+  const editor = useEditor.getState()
+  const scope = useInteractionScope.getState()
+  const groups = useSessionGroups.getState()
+  const previousWindow = globalThis.window
+  const previousRaf = globalThis.requestAnimationFrame
+  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+  globalThis.window = new EventTarget() as Window & typeof globalThis
+  globalThis.requestAnimationFrame = () => 0
+  const canvas = Object.assign(new EventTarget(), {
+    style: { cursor: '' },
+    getBoundingClientRect: () => ({ left: 0, top: 0, width: 1000, height: 1000 }),
+  }) as unknown as HTMLCanvasElement
+  const root = createRoot(canvas)
+  try {
+    const camera = Object.assign(new THREE.OrthographicCamera(-1, 9, 9, -1, 0.1, 100), {
+      manual: true,
+    })
+    camera.position.set(0, 10, 0)
+    camera.up.set(0, 0, -1)
+    camera.lookAt(0, 0, 0)
+    camera.updateMatrixWorld(true)
+    await root.configure({
+      gl: {
+        domElement: canvas,
+        render() {},
+        setSize() {},
+        setPixelRatio() {},
+      } as unknown as THREE.WebGLRenderer,
+      camera,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 1000, height: 1000, top: 0, left: 0 },
+    })
+    await run({
+      render: async (node) => {
+        await act(async () => root.render(node))
+      },
+      canvas,
+    })
+  } finally {
+    await act(async () => root.render(null))
+    _roots.delete(canvas)
+    useScene.setState(scene)
+    useViewer.setState(viewer)
+    useEditor.setState(editor)
+    useInteractionScope.setState(scope)
+    useSessionGroups.setState(groups)
+    globalThis.window = previousWindow
+    globalThis.requestAnimationFrame = previousRaf
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+}