@pascal-app/editor 1.0.1 → 1.0.4

package/src/store/use-wall-region-handles-selection.ts

@@ -0,0 +1,139 @@
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from 'zustand'
+import { hasLiveGestures } from '../lib/gesture-lifecycle'
+import { removeWallRegion } from '../lib/paint-regions'
+import { sfxEmitter } from '../lib/sfx-bus'
+import { isTypingTarget } from '../lib/typing-target'
+import useDeleteConfirmation from './use-delete-confirmation'
+import useInteractionScope from './use-interaction-scope'
+
+// The paint region the user last picked on the selected wall (a handle, an
+// outline or a panel row). While it is set, Delete removes that region instead
+// of the wall. Cleared whenever the wall selection changes.
+//
+// `stale` remembers an active region that vanished under the user (undo, another
+// edit) while its wall stayed selected: the next Delete is swallowed rather than
+// deleting the wall the user was not aiming at.
+
+export type ActiveWallRegion = { wallId: string; regionId: string }
+
+type WallRegionSelectionState = {
+  active: ActiveWallRegion | null
+  stale: ActiveWallRegion | null
+  setActive: (active: ActiveWallRegion | null) => void
+  setStale: (stale: ActiveWallRegion | null) => void
+}
+
+export const useWallRegionSelection = create<WallRegionSelectionState>((set) => ({
+  active: null,
+  stale: null,
+  setActive: (active) =>
+    set((state) =>
+      state.active?.wallId === active?.wallId && state.active?.regionId === active?.regionId
+        ? state
+        : active
+          ? { active, stale: null }
+          : { active },
+    ),
+  setStale: (stale) => set((state) => (state.stale === stale ? state : { stale })),
+}))
+
+function isSoleSelection(wallId: string, selectedIds: readonly string[]) {
+  return selectedIds.length === 1 && selectedIds[0] === wallId
+}
+
+function regionExists(wallId: string, regionId: string) {
+  const wall = useScene.getState().nodes[wallId as AnyNodeId]
+  if (wall?.type !== 'wall') return false
+  return wall.faceRegions?.some((region) => region.id === regionId) ?? false
+}
+
+/** The active region, only while its wall is the sole selection and the region still exists. */
+export function resolveActiveWallRegion(): ActiveWallRegion | null {
+  const active = useWallRegionSelection.getState().active
+  if (!active) return null
+  if (!isSoleSelection(active.wallId, useViewer.getState().selection.selectedIds)) return null
+  return regionExists(active.wallId, active.regionId) ? active : null
+}
+
+function resolveStaleWallRegion(): ActiveWallRegion | null {
+  const stale = useWallRegionSelection.getState().stale
+  if (!stale) return null
+  return isSoleSelection(stale.wallId, useViewer.getState().selection.selectedIds) ? stale : null
+}
+
+/** Clears the active (and stale) region unless the selection is still exactly its wall. */
+export function syncWallRegionSelection(selectedIds: readonly string[]) {
+  const { active, stale, setActive, setStale } = useWallRegionSelection.getState()
+  if (active && !isSoleSelection(active.wallId, selectedIds)) setActive(null)
+  if (stale && !isSoleSelection(stale.wallId, selectedIds)) setStale(null)
+}
+
+/** Drops the active region once it no longer exists in the scene. */
+export function syncWallRegionWithScene() {
+  const { active, setActive, setStale } = useWallRegionSelection.getState()
+  if (!active || regionExists(active.wallId, active.regionId)) return
+  setActive(null)
+  const wallStillThere = useScene.getState().nodes[active.wallId as AnyNodeId]?.type === 'wall'
+  const selectedIds = useViewer.getState().selection.selectedIds
+  if (wallStillThere && isSoleSelection(active.wallId, selectedIds)) setStale(active)
+}
+
+/** Keeps the active region in step with scene edits (undo, remote edits). Returns the unsubscribe. */
+export function installWallRegionSceneSync() {
+  return useScene.subscribe((state, previous) => {
+    if (state.nodes !== previous.nodes) syncWallRegionWithScene()
+  })
+}
+
+// Delete belongs to the region only when focus is on the scene or the wall's
+// region list; a focused toolbar button or panel control keeps its own key.
+function isSceneOrRegionListTarget(target: EventTarget | null) {
+  if (!target) return true
+  if (
+    typeof document !== 'undefined' &&
+    (target === document || target === document.body || target === document.documentElement)
+  ) {
+    return true
+  }
+  const element = target as { tagName?: string; closest?: (selector: string) => unknown }
+  if (element.tagName?.toUpperCase() === 'CANVAS') return true
+  return !!element.closest?.('[data-wall-region-list]')
+}
+
+function consume(event: KeyEventLike) {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'target' | 'preventDefault' | 'stopPropagation'>
+
+/**
+ * Delete / Backspace with an active region removes that region (one undo step)
+ * and consumes the key so the global delete never sees it. Mid-gesture, or
+ * right after the active region vanished, the key is swallowed so it cannot
+ * fall through to deleting the wall. Returns whether the key was consumed.
+ */
+export function handleWallRegionDeleteKey(event: KeyEventLike): boolean {
+  if (event.key !== 'Delete' && event.key !== 'Backspace') return false
+  if (isTypingTarget(event.target)) return false
+  if (!isSceneOrRegionListTarget(event.target)) return false
+  if (useDeleteConfirmation.getState().request) return false
+  const active = resolveActiveWallRegion()
+  const stale = active ? null : resolveStaleWallRegion()
+  if (!(active || stale)) return false
+
+  consume(event)
+  const busy = useInteractionScope.getState().scope.kind !== 'idle' || hasLiveGestures()
+  if (busy) return true
+  if (stale) {
+    useWallRegionSelection.getState().setStale(null)
+    return true
+  }
+  if (!active) return true
+  // Cleared first so the scene sync does not mistake this removal for a vanished region.
+  useWallRegionSelection.getState().setActive(null)
+  if (removeWallRegion(active.wallId, active.regionId)) sfxEmitter.emit('sfx:structure-delete')
+  return true
+}

package/src/store/view-layout.test.ts

@@ -0,0 +1,175 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+import { availableViews, editorHostViewRegistry, registerEditorHostView } from '../lib/editor-views'
+import useEditor, { normalizePersistedEditorUiState } from './use-editor'
+import {
+  activeViewLayout,
+  DEFAULT_VIEW_LAYOUT,
+  isViewVisible,
+  sceneLayout,
+  VIEW_2D,
+  VIEW_3D,
+  visibleScene,
+} from './view-layout'
+
+function layout() {
+  return activeViewLayout(useEditor.getState())
+}
+
+afterEach(() => {
+  useEditor.getState().setCaptureMode(false)
+  useEditor.getState().setFirstPersonMode(false)
+  useEditor.getState().setWorkspaceMode('edit')
+  useEditor.setState({ viewLayouts: {} })
+  editorHostViewRegistry.reset()
+})
+
+describe('the stage layout', () => {
+  test('a view sits in one pane: picking the other pane’s view swaps them', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().setPaneView(0, VIEW_3D)
+    expect(layout().panes).toEqual([VIEW_3D, VIEW_2D])
+    expect(layout().split).toBe(true)
+  })
+
+  test('a view opened beside the scene splits next to the focused pane', () => {
+    useEditor.getState().showView('gallery', { beside: true })
+    expect(layout()).toMatchObject({ split: true, panes: [VIEW_3D, 'gallery'], focus: 1 })
+    expect(visibleScene(useEditor.getState())).toBe('3d')
+  })
+
+  test('opening a view already on screen only focuses it', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().showView(VIEW_3D)
+    expect(layout()).toMatchObject({ panes: [VIEW_2D, VIEW_3D], focus: 1, split: true })
+  })
+
+  test('splitting from 3D brings the plan in on the left, as the split always did', () => {
+    useEditor.getState().toggleSplit()
+    expect(layout()).toMatchObject({ split: true, panes: [VIEW_2D, VIEW_3D], focus: 1 })
+  })
+
+  test('closing the split keeps the focused pane', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().focusViewPane(1)
+    useEditor.getState().toggleSplit()
+    expect(layout()).toMatchObject({ split: false, panes: [VIEW_3D, VIEW_2D] })
+  })
+
+  test('closing a view collapses its split, or brings a lone pane back to 3D', () => {
+    useEditor.getState().showView('gallery', { beside: true })
+    useEditor.getState().closeView('gallery')
+    expect(layout()).toMatchObject({ split: false, panes: [VIEW_3D, VIEW_2D] })
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
+    useEditor.getState().showView('gallery')
+    useEditor.getState().closeView('gallery')
+    expect(visibleScene(useEditor.getState())).toBe('3d')
+  })
+
+  test('a plan beside another view owns the scene like a plan alone', () => {
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
+    useEditor.getState().showView('gallery', { beside: true })
+    expect(visibleScene(useEditor.getState())).toBe('2d')
+  })
+
+  test('each workspace keeps its own layout', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().setWorkspaceMode('studio')
+    expect(layout()).toEqual(DEFAULT_VIEW_LAYOUT)
+    useEditor.getState().showView('gallery')
+    useEditor.getState().setWorkspaceMode('edit')
+    expect(visibleScene(useEditor.getState())).toBe('split')
+  })
+
+  test('capture frames in 3D alone and gives the layout back untouched', () => {
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
+    useEditor.getState().setCaptureMode(true)
+    expect(visibleScene(useEditor.getState())).toBe('3d')
+    useEditor.getState().setCaptureMode(false)
+    expect(visibleScene(useEditor.getState())).toBe('2d')
+  })
+})
+
+describe('the deprecated viewMode for plugins written before views', () => {
+  test('mirrors the scene on screen and sets it', () => {
+    useEditor.getState().setViewMode('split')
+    expect(visibleScene(useEditor.getState())).toBe('split')
+    expect(useEditor.getState().viewMode).toBe('split')
+    useEditor.getState().showView('gallery')
+    expect(useEditor.getState().viewMode).toBe('3d')
+    useEditor.getState().setCaptureMode(true)
+    expect(useEditor.getState().viewMode).toBe('3d')
+  })
+})
+
+describe('layouts saved before views', () => {
+  test.each([
+    ['3d', '3d'],
+    ['2d', '2d'],
+    ['split', 'split'],
+  ] as const)('a stored %s view opens as %s, the plan on the left', (viewMode, scene) => {
+    const state = normalizePersistedEditorUiState({ viewMode, floorplanPaneRatio: 0.4 } as never)
+    const restored = state.viewLayouts.edit
+    expect(restored).toBeDefined()
+    if (!restored) return
+    expect(
+      visibleScene({
+        viewLayouts: state.viewLayouts,
+        workspaceMode: 'edit',
+        isCaptureMode: false,
+        isFirstPersonMode: false,
+      }),
+    ).toBe(scene)
+    if (scene !== '3d') expect(restored).toMatchObject({ panes: [VIEW_2D, VIEW_3D], ratio: 0.4 })
+  })
+
+  test('an open floorplan from before view modes opens split', () => {
+    const state = normalizePersistedEditorUiState({ isFloorplanOpen: true } as never)
+    expect(state.viewLayouts.edit).toMatchObject({ split: true })
+  })
+})
+
+describe('registered views', () => {
+  test('a plugin view is offered only where its plugin is installed and its workspace matches', () => {
+    registerEditorHostView({
+      id: 'acme:pets',
+      label: 'Pets',
+      icon: { kind: 'iconify', name: 'lucide:cat' },
+      component: async () => ({ default: () => null }),
+      pluginId: 'acme',
+    })
+    registerEditorHostView({
+      id: 'acme:habitat',
+      label: 'Habitat',
+      icon: { kind: 'iconify', name: 'lucide:house' },
+      component: async () => ({ default: () => null }),
+      pluginId: 'acme',
+      workspaces: ['studio'],
+    })
+    const ids = (workspaceMode: string, installedPlugins: string[]) =>
+      availableViews({
+        registered: editorHostViewRegistry.getSnapshot(),
+        workspaceMode,
+        installedPlugins,
+      }).map((view) => view.id)
+    expect(ids('edit', [])).toEqual([VIEW_3D, VIEW_2D])
+    expect(ids('edit', ['acme'])).toEqual([VIEW_3D, VIEW_2D, 'acme:pets'])
+    expect(ids('studio', ['acme'])).toEqual([VIEW_3D, VIEW_2D, 'acme:habitat'])
+  })
+
+  test('the scene views cannot be replaced', () => {
+    expect(() =>
+      registerEditorHostView({
+        id: VIEW_3D,
+        label: '3D',
+        icon: { kind: 'iconify', name: 'lucide:box' },
+        component: async () => ({ default: () => null }),
+      }),
+    ).toThrow()
+  })
+
+  test('a layout naming a view that is gone keeps it, so the choice returns with the view', () => {
+    useEditor.getState().showView('acme:pets')
+    expect(isViewVisible(useEditor.getState(), 'acme:pets')).toBe(true)
+    expect(isViewVisible(useEditor.getState(), VIEW_3D)).toBe(false)
+  })
+})

package/src/store/view-layout.ts

@@ -0,0 +1,196 @@
+/**
+ * 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) return layout
+  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)
+    }
+  }
+}