@pascal-app/editor 1.0.1 → 1.0.4

package/src/lib/catalog-selection.ts

@@ -0,0 +1,8 @@
+import type { CatalogItem } from '../components/ui/item-catalog/catalog-items'
+
+export function isCatalogItemSelected(
+  item: Pick<CatalogItem, 'id'>,
+  selected: Pick<CatalogItem, 'id'> | null,
+) {
+  return selected != null && item.id === selected.id
+}

package/src/lib/ceiling-edit-session.test.ts

@@ -0,0 +1,321 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  BuildingNode,
+  CeilingNode,
+  emitter,
+  LevelNode,
+  SiteNode,
+  useScene,
+  ZoneNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from '@react-three/test-renderer'
+import { createElement } from 'react'
+import { cancelActiveTool } from '../hooks/use-keyboard'
+import useEditor from '../store/use-editor'
+import useInteractionScope from '../store/use-interaction-scope'
+import {
+  endCeilingEdit,
+  getCeilingEditSession,
+  setCeilingHoles,
+  startCeilingEdit,
+  startCeilingEditFromTreeSelection,
+  useCeilingEditSessionOwner,
+} from './ceiling-edit-session'
+import { boundaryReshapeScope, holeEditScope } from './interaction/scope'
+
+const square: [number, number][] = [
+  [0, 0],
+  [4, 0],
+  [4, 4],
+  [0, 4],
+]
+const site = SiteNode.parse({ id: 'site_ceiling_edit', children: ['building_ceiling_edit'] })
+const building = BuildingNode.parse({
+  id: 'building_ceiling_edit',
+  parentId: site.id,
+  children: ['level_ceiling_edit_0', 'level_ceiling_edit_1'],
+})
+const level = LevelNode.parse({ id: 'level_ceiling_edit_0', parentId: building.id, level: 0 })
+const upper = LevelNode.parse({ id: 'level_ceiling_edit_1', parentId: building.id, level: 1 })
+const zone = ZoneNode.parse({
+  id: 'zone_ceiling_edit',
+  parentId: level.id,
+  name: 'Kitchen',
+  polygon: square,
+  spaceRole: 'room',
+})
+const ceiling = CeilingNode.parse({
+  id: 'ceiling_linked',
+  parentId: level.id,
+  polygon: square,
+  boundary: 'auto',
+  zoneId: zone.id,
+})
+const manual = CeilingNode.parse({
+  id: 'ceiling_manual',
+  parentId: level.id,
+  polygon: square.map(([x, z]) => [x + 10, z] as [number, number]),
+})
+const roomHole: [number, number][] = [
+  [1, 1],
+  [2, 1],
+  [2, 2],
+  [1, 2],
+]
+const cutHole: [number, number][] = [
+  [2.5, 2.5],
+  [3, 2.5],
+  [3, 3],
+  [2.5, 3],
+]
+const holed = CeilingNode.parse({
+  id: 'ceiling_holed',
+  parentId: upper.id,
+  polygon: square,
+  boundary: 'auto',
+  zoneId: 'zone_ceiling_edit_upper',
+  holes: [roomHole],
+  holeMetadata: [{ source: 'room' }],
+})
+
+const snapshots = {
+  scene: useScene.getState(),
+  viewer: useViewer.getState(),
+  editor: useEditor.getState(),
+  scope: useInteractionScope.getState(),
+  raf: globalThis.requestAnimationFrame,
+  cancelRaf: globalThis.cancelAnimationFrame,
+}
+
+beforeEach(() => {
+  // Scene updates schedule a dirty-flush frame.
+  globalThis.requestAnimationFrame = () => 0
+  globalThis.cancelAnimationFrame = () => {}
+  const nodes = Object.fromEntries(
+    [site, building, level, upper, zone, ceiling, manual, holed].map((node) => [node.id, node]),
+  ) as Record<AnyNodeId, AnyNode>
+  useScene.setState({ nodes, rootNodeIds: [site.id] })
+  useViewer.setState({
+    hoveredId: null,
+    selection: { buildingId: building.id, levelId: level.id, zoneId: null, selectedIds: [] },
+  })
+  useEditor.setState({ phase: 'building', mode: 'select', room: null, hoveredRoom: null })
+  useInteractionScope.setState({ scope: { kind: 'idle' } })
+})
+
+afterEach(() => {
+  endCeilingEdit()
+  useScene.setState(snapshots.scene)
+  useViewer.setState(snapshots.viewer)
+  useEditor.setState(snapshots.editor)
+  useInteractionScope.setState(snapshots.scope)
+  globalThis.requestAnimationFrame = snapshots.raf
+  globalThis.cancelAnimationFrame = snapshots.cancelRaf
+})
+
+const selectedIds = () => useViewer.getState().selection.selectedIds
+
+describe('starting a session', () => {
+  test('the pill API opens the room ceiling from its zone id and selects it', () => {
+    expect(startCeilingEdit(zone.id)).toBe(true)
+    expect(getCeilingEditSession()).toEqual({
+      ceilingId: ceiling.id,
+      zoneId: zone.id,
+      levelId: level.id,
+    })
+    expect(selectedIds()).toEqual([ceiling.id])
+  })
+
+  test('a ceiling id opens that ceiling; an unknown target or a room without one does nothing', () => {
+    expect(startCeilingEdit(manual.id)).toBe(true)
+    expect(getCeilingEditSession()).toEqual({
+      ceilingId: manual.id,
+      zoneId: null,
+      levelId: level.id,
+    })
+    expect(startCeilingEdit('ceiling_missing')).toBe(false)
+    useScene.getState().deleteNode(ceiling.id as AnyNodeId)
+    endCeilingEdit()
+    expect(startCeilingEdit(zone.id)).toBe(false)
+    expect(getCeilingEditSession()).toBeNull()
+  })
+
+  test('the pill switches to the ceiling level and goes inside the building', () => {
+    useViewer.setState({
+      selection: { buildingId: building.id, levelId: upper.id, zoneId: null, selectedIds: [] },
+    })
+    useEditor.setState({ phase: 'site' })
+    expect(startCeilingEdit(zone.id)).toBe(true)
+    expect(useEditor.getState().phase).toBe('building')
+    expect(useViewer.getState().selection.levelId).toBe(level.id)
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+  })
+
+  test('a scene-graph selection of exactly the ceiling opens it; a multi-selection does not', () => {
+    useViewer.getState().setSelection({ selectedIds: [ceiling.id, manual.id] })
+    expect(startCeilingEditFromTreeSelection(ceiling.id)).toBe(false)
+    expect(getCeilingEditSession()).toBeNull()
+    useViewer.getState().setSelection({ selectedIds: [ceiling.id] })
+    expect(startCeilingEditFromTreeSelection(ceiling.id)).toBe(true)
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+  })
+
+  test('a canvas selection (drill-down or Alt-click) selects the ceiling without a session', () => {
+    useViewer.getState().setSelection({ selectedIds: [ceiling.id] })
+    expect(getCeilingEditSession()).toBeNull()
+  })
+})
+
+describe('ending a session', () => {
+  test('Escape returns to the ceiling room', () => {
+    startCeilingEdit(ceiling.id)
+    expect(cancelActiveTool()).toBe(true)
+    expect(getCeilingEditSession()).toBeNull()
+    expect(useEditor.getState().room).toEqual({ levelId: level.id, zoneId: zone.id })
+    expect(selectedIds()).toEqual([])
+    expect(useEditor.getState().mode).toBe('select')
+  })
+
+  test('Escape returns to the room even after a polygon edit detached the link', () => {
+    startCeilingEdit(ceiling.id)
+    useScene.getState().detachDerivedNode(ceiling.id as AnyNodeId, {
+      polygon: square.map(([x, z]) => [x, z + 0.5] as [number, number]),
+    })
+    const detached = useScene.getState().nodes[ceiling.id as AnyNodeId] as CeilingNode
+    expect(detached.boundary).toBeUndefined()
+    expect(detached.zoneId).toBeUndefined()
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+    cancelActiveTool()
+    expect(useEditor.getState().room).toEqual({ levelId: level.id, zoneId: zone.id })
+  })
+
+  test('Escape on a ceiling with no room clears the selection', () => {
+    startCeilingEdit(manual.id)
+    expect(cancelActiveTool()).toBe(true)
+    expect(getCeilingEditSession()).toBeNull()
+    expect(useEditor.getState().room).toBeNull()
+    expect(selectedIds()).toEqual([])
+  })
+
+  test('Escape during an in-flight reshape is left to the reshape', () => {
+    startCeilingEdit(ceiling.id)
+    useInteractionScope.getState().begin(boundaryReshapeScope(ceiling.id))
+    emitter.emit('tool:cancel')
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+  })
+
+  test('deselection, another selection, a level change, a phase change and deletion end it', () => {
+    const ends: Array<() => void> = [
+      () => useViewer.getState().setSelection({ selectedIds: [] }),
+      () => useViewer.getState().setSelection({ selectedIds: [manual.id] }),
+      () => useViewer.getState().setSelection({ selectedIds: [ceiling.id, manual.id] }),
+      () => useViewer.getState().setSelection({ levelId: upper.id }),
+      () => useEditor.getState().setPhase('site'),
+      () => useScene.getState().deleteNode(ceiling.id as AnyNodeId),
+    ]
+    for (const end of ends) {
+      useEditor.setState({ phase: 'building' })
+      useViewer.setState({
+        selection: { buildingId: building.id, levelId: level.id, zoneId: null, selectedIds: [] },
+      })
+      if (!useScene.getState().nodes[ceiling.id as AnyNodeId])
+        useScene.setState({ nodes: { ...useScene.getState().nodes, [ceiling.id]: ceiling } })
+      expect(startCeilingEdit(ceiling.id)).toBe(true)
+      end()
+      expect(getCeilingEditSession()).toBeNull()
+    }
+  })
+
+  test('height and material edits keep the session and the auto boundary', () => {
+    startCeilingEdit(ceiling.id)
+    useScene.getState().updateNode(ceiling.id as AnyNodeId, { height: 2.4, materialPreset: 'x' })
+    const edited = useScene.getState().nodes[ceiling.id as AnyNodeId] as CeilingNode
+    expect(edited.boundary).toBe('auto')
+    expect(edited.zoneId).toBe(zone.id)
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+  })
+
+  test('an ended session stops listening', () => {
+    startCeilingEdit(ceiling.id)
+    endCeilingEdit()
+    useViewer.getState().setSelection({ selectedIds: [ceiling.id] })
+    expect(cancelActiveTool()).toBe(false)
+    expect(useEditor.getState().room).toBeNull()
+  })
+})
+
+describe('session ownership', () => {
+  test('unmounting the editor that owns the session ends it', async () => {
+    const renderer = await create(
+      createElement(function Owner() {
+        useCeilingEditSessionOwner()
+        return null
+      }),
+    )
+    startCeilingEdit(ceiling.id)
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+    await renderer.unmount()
+    expect(getCeilingEditSession()).toBeNull()
+    useViewer.getState().setSelection({ selectedIds: [ceiling.id] })
+    expect(cancelActiveTool()).toBe(false)
+  })
+
+  test("ending the session ends its hole edit, not another node's", () => {
+    startCeilingEdit(ceiling.id)
+    useInteractionScope.getState().begin(holeEditScope({ nodeId: ceiling.id, holeIndex: 0 }))
+    endCeilingEdit()
+    expect(useInteractionScope.getState().scope.kind).toBe('idle')
+
+    startCeilingEdit(ceiling.id)
+    useInteractionScope.getState().begin(holeEditScope({ nodeId: 'slab_other', holeIndex: 0 }))
+    endCeilingEdit()
+    expect(useInteractionScope.getState().scope).toMatchObject({
+      reshape: 'hole',
+      nodeId: 'slab_other',
+    })
+  })
+})
+
+describe('hole edits', () => {
+  const node = (id: string) => useScene.getState().nodes[id as AnyNodeId] as CeilingNode
+
+  test('a manual hole on an auto ceiling keeps the room link (only polygon edits detach)', () => {
+    startCeilingEdit(ceiling.id)
+    const before = node(ceiling.id)
+    expect(
+      setCeilingHoles(ceiling.id, { holes: [cutHole], holeMetadata: [{ source: 'manual' }] }),
+    ).toBe(true)
+    expect(node(ceiling.id).holes).toEqual([cutHole])
+    expect(node(ceiling.id).boundary).toBe(before.boundary)
+    expect(node(ceiling.id).zoneId).toBe(before.zoneId)
+    expect(getCeilingEditSession()?.ceilingId).toBe(ceiling.id)
+    // Deleting it again is a plain update too.
+    expect(setCeilingHoles(ceiling.id, { holes: [], holeMetadata: [] })).toBe(true)
+    expect(node(ceiling.id).zoneId).toBe(before.zoneId)
+  })
+
+  test('room-cut holes stay protected: a write that changes one is refused', () => {
+    const moved = roomHole.map(([x, z]) => [x + 0.5, z] as [number, number])
+    expect(setCeilingHoles(holed.id, { holes: [moved] })).toBe(false)
+    expect(setCeilingHoles(holed.id, { holes: [], holeMetadata: [] })).toBe(false)
+    expect(node(holed.id)).toEqual(holed)
+
+    expect(
+      setCeilingHoles(holed.id, {
+        holes: [roomHole, cutHole],
+        holeMetadata: [{ source: 'room' }, { source: 'manual' }],
+      }),
+    ).toBe(true)
+    expect(node(holed.id).holes).toEqual([roomHole, cutHole])
+    expect(node(holed.id).boundary).toBe(holed.boundary)
+  })
+
+  test('a manual ceiling takes a plain update; a non-ceiling is refused', () => {
+    expect(setCeilingHoles(manual.id, { holes: [cutHole] })).toBe(true)
+    expect(node(manual.id).holes).toEqual([cutHole])
+    expect(setCeilingHoles(zone.id, { holes: [cutHole] })).toBe(false)
+  })
+})

package/src/lib/ceiling-edit-session.ts

@@ -0,0 +1,206 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type BuildingNode,
+  type CeilingNode,
+  derivedFieldViolations,
+  emitter,
+  isDerivedNode,
+  type LevelNode,
+  resolveLevelId,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect } from 'react'
+import { create } from 'zustand'
+import { markToolCancelConsumed } from '../hooks/use-keyboard'
+import useEditor from '../store/use-editor'
+import useInteractionScope from '../store/use-interaction-scope'
+import { selectRoom } from './room-selection-commands'
+import { completeElementAction } from './room-zone-routing'
+
+/**
+ * The explicit "Edit ceiling" session: while it holds a ceiling, and only then,
+ * that ceiling shows its corner brackets, polygon editor and height handle.
+ *
+ * A tiny store rather than an interaction scope: a non-idle scope turns off
+ * selection picking and hides every overlay, while the session is a standing
+ * mode in which the rest of the scene must stay hoverable and clickable. The
+ * polygon drags inside it still run their own `reshaping` scope.
+ */
+export type CeilingEditSession = {
+  ceilingId: CeilingNode['id']
+  /** The room the ceiling belonged to at start; a polygon edit detaches the link. */
+  zoneId: string | null
+  levelId: string
+}
+
+export const useCeilingEditSession = create<{ session: CeilingEditSession | null }>(() => ({
+  session: null,
+}))
+
+/** The ceiling whose edit controls may show, or null outside a session. */
+export function useCeilingEditCeilingId(): string | null {
+  return useCeilingEditSession((state) => state.session?.ceilingId ?? null)
+}
+
+export function getCeilingEditSession(): CeilingEditSession | null {
+  return useCeilingEditSession.getState().session
+}
+
+type Nodes = Record<string, AnyNode>
+
+function resolveCeiling(nodes: Nodes, target: string): CeilingNode | null {
+  const node = nodes[target]
+  if (node?.type === 'ceiling') return node
+  if (node?.type !== 'zone') return null
+  const linked = Object.values(nodes).filter(
+    (candidate): candidate is CeilingNode =>
+      candidate.type === 'ceiling' && candidate.zoneId === target,
+  )
+  return (
+    linked.find((ceiling) => ceiling.parentId === node.parentId && ceiling.boundary === 'auto') ??
+    linked.find((ceiling) => ceiling.parentId === node.parentId) ??
+    linked[0] ??
+    null
+  )
+}
+
+let stopLifecycle: (() => void) | null = null
+
+/**
+ * Starts editing the ceiling `target` names: a ceiling id, or a room zone id
+ * (its linked ceiling). Selects the ceiling on its level, going inside the
+ * building first. Returns false when there is no such ceiling.
+ */
+export function startCeilingEdit(target: string): boolean {
+  const nodes = useScene.getState().nodes as Nodes
+  const ceiling = resolveCeiling(nodes, target)
+  if (!ceiling) return false
+  endCeilingEdit()
+
+  const levelId = resolveLevelId(ceiling, nodes)
+  const zone = ceiling.zoneId ? nodes[ceiling.zoneId] : nodes[target]
+  const zoneId = zone?.type === 'zone' ? zone.id : null
+  if (useEditor.getState().phase === 'site') useEditor.getState().setPhase('building')
+
+  useCeilingEditSession.setState({ session: { ceilingId: ceiling.id, zoneId, levelId } })
+  const level = nodes[levelId]
+  const selection = useViewer.getState().selection
+  useViewer.getState().setSelection({
+    ...(level?.parentId && level.parentId !== selection.buildingId
+      ? { buildingId: level.parentId as BuildingNode['id'] }
+      : {}),
+    ...(levelId !== selection.levelId ? { levelId: levelId as LevelNode['id'] } : {}),
+    selectedIds: [ceiling.id],
+  })
+  stopLifecycle = watchSession()
+  return true
+}
+
+/**
+ * The scene-graph entry: a plain tree click that left exactly this ceiling
+ * selected opens its session. Modifier multi-selection does not.
+ */
+export function startCeilingEditFromTreeSelection(nodeId: string): boolean {
+  const { selectedIds } = useViewer.getState().selection
+  if (selectedIds.length !== 1 || selectedIds[0] !== nodeId) return false
+  return startCeilingEdit(nodeId)
+}
+
+export function endCeilingEdit() {
+  stopLifecycle?.()
+  stopLifecycle = null
+  const session = getCeilingEditSession()
+  if (!session) return
+  useCeilingEditSession.setState({ session: null })
+  // The hole editor mounts only inside the session; a hole scope it leaves behind
+  // would keep selection picking off with no editor to end it.
+  useInteractionScope
+    .getState()
+    .endIf(
+      (scope) =>
+        scope.kind === 'reshaping' &&
+        scope.reshape === 'hole' &&
+        scope.nodeId === session.ceilingId,
+    )
+}
+
+/** Ends the session with the editor that owns it, so none outlives an unmount. */
+export function useCeilingEditSessionOwner() {
+  useEffect(() => endCeilingEdit, [])
+}
+
+/**
+ * Writes a ceiling's holes. Manual holes are authored data the derived-node
+ * guard allows on an auto ceiling, so this is a plain update that keeps the
+ * room link (only a polygon edit detaches); a write that would change a
+ * room-cut hole is refused (returns false).
+ */
+export function setCeilingHoles(
+  ceilingId: string,
+  patch: Pick<CeilingNode, 'holes'> & Partial<Pick<CeilingNode, 'holeMetadata'>>,
+): boolean {
+  const scene = useScene.getState()
+  const ceiling = scene.nodes[ceilingId as AnyNodeId]
+  if (ceiling?.type !== 'ceiling') return false
+  if (isDerivedNode(ceiling) && derivedFieldViolations(ceiling, patch).length > 0) return false
+  scene.updateNode(ceilingId as AnyNodeId, patch)
+  return true
+}
+
+/** Escape: leaves the session for the ceiling's room, or for nothing when it has none. */
+export function exitCeilingEditToRoom(): boolean {
+  const session = getCeilingEditSession()
+  if (!session) return false
+  endCeilingEdit()
+  const zone = session.zoneId ? useScene.getState().nodes[session.zoneId as AnyNodeId] : undefined
+  if (zone?.type !== 'zone') {
+    useViewer.getState().setSelection({ selectedIds: [] })
+    return true
+  }
+  const room = { levelId: session.levelId, zoneId: zone.id }
+  // A room the index no longer knows (its walls just opened) is still where the user came from.
+  if (!completeElementAction({ room, point: null })) selectRoom(room)
+  return true
+}
+
+function watchSession() {
+  const active = () => getCeilingEditSession()
+  const stopViewer = useViewer.subscribe((state) => {
+    const session = active()
+    if (!session) return
+    const { selectedIds, levelId } = state.selection
+    if (
+      levelId !== session.levelId ||
+      selectedIds.length !== 1 ||
+      selectedIds[0] !== session.ceilingId
+    )
+      endCeilingEdit()
+  })
+  const stopEditor = useEditor.subscribe((state, previous) => {
+    if (state.phase !== previous.phase) endCeilingEdit()
+  })
+  const stopScene = useScene.subscribe((state) => {
+    const session = active()
+    if (session && state.nodes[session.ceilingId as AnyNodeId]?.type !== 'ceiling') endCeilingEdit()
+  })
+  // A reshape in flight owns Escape (it cancels the drag); only an idle session exits.
+  const onToolCancel = () => {
+    if (
+      !active() ||
+      useEditor.getState().mode !== 'select' ||
+      useInteractionScope.getState().scope.kind !== 'idle'
+    )
+      return
+    exitCeilingEditToRoom()
+    markToolCancelConsumed()
+  }
+  emitter.on('tool:cancel', onToolCancel)
+  return () => {
+    stopViewer()
+    stopEditor()
+    stopScene()
+    emitter.off('tool:cancel', onToolCancel)
+  }
+}