@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/procedural-items/inspector.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { type AnyNodeId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import { type AnyNodeId, useLiveNodeOverrides, usePascalI18n, useScene } from '@pascal-app/core'
 import {
   ProceduralItemNode,
   snapParameters,
@@ -22,6 +22,7 @@ export function ProceduralInspector({
   partId: string | null
   onPartChange: (id: string | null) => void
 }) {
+  const i18n = usePascalI18n()
   const committed = useScene((s) => s.nodes[nodeId as AnyNodeId]) as unknown as
     | ProceduralItemNode
     | undefined
@@ -42,14 +43,24 @@ export function ProceduralInspector({
     const parameters = commit ? snapParameters(node.recipe, values) : values
     const parsed = ProceduralItemNode.safeParse({ ...node, parameters })
     if (!parsed.success) {
-      setError(parsed.error.issues[0]?.message ?? 'Invalid edit')
+      setError(
+        parsed.error.issues[0]?.message ??
+          i18n._({ id: 'editor.proceduralItems.inspector.invalidEdit', message: 'Invalid edit' }),
+      )
       if (commit) useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId)
       return
     }
     try {
       validateProceduralRelations({ ...node, parameters }, useScene.getState().nodes)
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Invalid attachment')
+      setError(
+        e instanceof Error
+          ? e.message
+          : i18n._({
+              id: 'editor.proceduralItems.inspector.invalidAttachment',
+              message: 'Invalid attachment',
+            }),
+      )
       if (commit) useLiveNodeOverrides.getState().clear(nodeId as AnyNodeId)
       return
     }
@@ -64,7 +75,12 @@ export function ProceduralInspector({
     <div className="space-y-5">
       <div className="flex items-center justify-between">
         <h2 className="font-semibold text-lg">
-          {partId ? node.recipe.parts.find((p) => p.id === partId)?.label : 'Adjust design'}
+          {partId
+            ? node.recipe.parts.find((p) => p.id === partId)?.label
+            : i18n._({
+                id: 'editor.proceduralItems.inspector.adjustDesign',
+                message: 'Adjust design',
+              })}
         </h2>
         {partId && (
           <button
@@ -72,7 +88,7 @@ export function ProceduralInspector({
             onClick={() => onPartChange(null)}
             type="button"
           >
-            Back
+            {i18n._({ id: 'editor.proceduralItems.inspector.back', message: 'Back' })}
           </button>
         )}
       </div>
@@ -128,11 +144,21 @@ export function ProceduralInspector({
               useScene.getState().updateNode(nodeId as AnyNodeId, { parameters } as never)
               setError('')
             } catch (e) {
-              setError(e instanceof Error ? e.message : 'Invalid reset')
+              setError(
+                e instanceof Error
+                  ? e.message
+                  : i18n._({
+                      id: 'editor.proceduralItems.inspector.invalidReset',
+                      message: 'Invalid reset',
+                    }),
+              )
             }
           }}
         >
-          Reset this part
+          {i18n._({
+            id: 'editor.proceduralItems.inspector.resetThisPart',
+            message: 'Reset this part',
+          })}
         </button>
       )}
       {error && (
@@ -142,7 +168,9 @@ export function ProceduralInspector({
       )}
       {!partId && node.recipe.parameters.some((p) => p.part) && (
         <div>
-          <h3 className="mb-2 font-medium text-sm">Edit parts</h3>
+          <h3 className="mb-2 font-medium text-sm">
+            {i18n._({ id: 'editor.proceduralItems.inspector.editParts', message: 'Edit parts' })}
+          </h3>
           <div className="flex flex-wrap gap-2">
             {node.recipe.parts
               .filter((part) => node.recipe.parameters.some((p) => p.part === part.id))
@@ -188,13 +216,21 @@ function ProceduralPanel({ node }: { node: ProceduralItemNode }) {
 }
 
 function ProceduralPlacementControls({ node }: { node: ProceduralItemNode }) {
+  const i18n = usePascalI18n()
   const [error, setError] = useState('')
   const update = (patch: Partial<ProceduralItemNode>) => {
     try {
       useScene.getState().updateNode(node.id as AnyNodeId, patch as never)
       setError('')
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Invalid placement')
+      setError(
+        e instanceof Error
+          ? e.message
+          : i18n._({
+              id: 'editor.proceduralItems.inspector.invalidPlacement',
+              message: 'Invalid placement',
+            }),
+      )
     }
   }
   const changePosition = (index: number, value: number, commit: boolean) => {
@@ -213,18 +249,29 @@ function ProceduralPlacementControls({ node }: { node: ProceduralItemNode }) {
       setError('')
     } catch (e) {
       if (commit) useLiveNodeOverrides.getState().clear(node.id as AnyNodeId)
-      setError(e instanceof Error ? e.message : 'Invalid position')
+      setError(
+        e instanceof Error
+          ? e.message
+          : i18n._({
+              id: 'editor.proceduralItems.inspector.invalidPosition',
+              message: 'Invalid position',
+            }),
+      )
     }
   }
   return (
-    <PanelSection title="Position">
+    <PanelSection
+      title={i18n._({ id: 'editor.proceduralItems.inspector.position', message: 'Position' })}
+    >
       {(['X', 'Y', 'Z'] as const).map((axis, index) => (
         <SliderControl
           key={axis}
           label={
             <>
               {axis}
-              <sub className="ml-[1px] text-[11px] opacity-70">pos</sub>
+              <sub className="ml-[1px] text-[11px] opacity-70">
+                {i18n._({ id: 'editor.proceduralItems.inspector.pos', message: 'pos' })}
+              </sub>
             </>
           }
           value={node.position[index]!}

package/src/components/systems/ceiling/ceiling-bracket-batch.test.ts

@@ -29,6 +29,7 @@ import {
 type AttributesBackend = {
   createAttribute(): void
   updateAttribute(attribute: BufferAttribute): void
+  destroyAttribute(attribute: BufferAttribute): void
 }
 const Attributes = UntypedAttributes as new (
   backend: AttributesBackend,
@@ -371,6 +372,7 @@ test('WebGPU attribute updates skip resting frames and upload only written slots
   const attributes = new Attributes(
     {
       createAttribute() {},
+      destroyAttribute() {},
       updateAttribute(attribute: BufferAttribute) {
         uploads.push({ attribute, ranges: attribute.updateRanges.map((range) => ({ ...range })) })
         attribute.clearUpdateRanges()

package/src/components/systems/ceiling/ceiling-system.test.ts

@@ -0,0 +1,141 @@
+import { expect, test } from 'bun:test'
+import { BuildingNode, CeilingNode, LevelNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { act, createRoot } from '@react-three/fiber'
+import { createElement, Fragment } from 'react'
+import { OrthographicCamera, type WebGLRenderer } from 'three'
+import useEditor, { normalizePersistedEditorLayoutState } from '../../../store/use-editor'
+import useInteractionScope from '../../../store/use-interaction-scope'
+import { CeilingSystem, CeilingTopsSync } from './ceiling-system'
+
+test('ceilings start on for the roof level and off for the floor plans, each kept as set', () => {
+  const fresh = normalizePersistedEditorLayoutState(undefined)
+  expect(fresh.showRoofCeilings).toBe(true)
+  expect(fresh.showCeilings).toBe(false)
+  const turned = normalizePersistedEditorLayoutState({
+    showRoofCeilings: false,
+    showCeilings: true,
+  })
+  expect(turned.showRoofCeilings).toBe(false)
+  expect(turned.showCeilings).toBe(true)
+})
+
+test('the level’s ceilings setting draws the ceiling tops, stepping aside to place on a ceiling', async () => {
+  const previous = {
+    scene: useScene.getState(),
+    viewer: useViewer.getState(),
+    editor: useEditor.getState(),
+    scope: useInteractionScope.getState(),
+  }
+  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+  const makeCanvas = () =>
+    Object.assign(new EventTarget(), {
+      getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
+    }) as unknown as HTMLCanvasElement
+  const canvas = makeCanvas()
+  const previewCanvas = makeCanvas()
+  const root = createRoot(canvas)
+  const previewRoot = createRoot(previewCanvas)
+  const building = BuildingNode.parse({})
+  const storey = LevelNode.parse({ parentId: building.id, level: 0, height: 3 })
+  const roof = LevelNode.parse({
+    parentId: building.id,
+    level: 1,
+    height: 3,
+    metadata: { role: 'roof' },
+  })
+  building.children = [storey.id, roof.id]
+  const ceiling = CeilingNode.parse({
+    parentId: storey.id,
+    height: 2.7,
+    polygon: [
+      [0, 0],
+      [4, 0],
+      [4, 4],
+      [0, 4],
+    ],
+  })
+  const select = (levelId: typeof storey.id) =>
+    act(async () =>
+      useViewer.setState({
+        selection: { buildingId: building.id, levelId, zoneId: null, selectedIds: [] },
+      }),
+    )
+  const tops = () => useViewer.getState().showCeilingTops
+  try {
+    useScene.setState({
+      nodes: {
+        [building.id]: building,
+        [storey.id]: storey,
+        [roof.id]: roof,
+        [ceiling.id]: ceiling,
+      },
+    })
+    useEditor.setState({
+      ...normalizePersistedEditorLayoutState(undefined),
+      tool: null,
+      selectedItem: null,
+      isPreviewMode: false,
+      isCaptureMode: false,
+    })
+    useInteractionScope.setState({ scope: { kind: 'idle' } })
+    useViewer.setState({ showCeilingTops: false, hoveredId: null })
+    await select(roof.id)
+    const configure = (target: typeof root, domElement: HTMLCanvasElement) =>
+      target.configure({
+        gl: {
+          domElement,
+          render() {},
+          setSize() {},
+          setPixelRatio() {},
+        } as unknown as WebGLRenderer,
+        camera: Object.assign(new OrthographicCamera(), { manual: true }),
+        frameloop: 'never',
+        dpr: 1,
+        size: { width: 100, height: 100, top: 0, left: 0 },
+      })
+    await configure(root, canvas)
+    await act(async () =>
+      root.render(
+        createElement(Fragment, null, createElement(CeilingTopsSync), createElement(CeilingSystem)),
+      ),
+    )
+    expect(tops()).toBe(true)
+
+    // A second viewer's ceiling system (the preview's) going away leaves the tops as set.
+    await configure(previewRoot, previewCanvas)
+    await act(async () => previewRoot.render(createElement(CeilingSystem)))
+    await act(async () => previewRoot.unmount())
+    expect(tops()).toBe(true)
+
+    await select(storey.id)
+    expect(tops()).toBe(false)
+    await act(async () => useEditor.getState().setShowCeilings(true))
+    expect(tops()).toBe(true)
+    await act(async () => useEditor.setState({ tool: 'ceiling' }))
+    expect(tops()).toBe(false)
+    await act(async () => useEditor.setState({ tool: null, isPreviewMode: true }))
+    expect(tops()).toBe(false)
+    await act(async () => useEditor.setState({ isPreviewMode: false }))
+    expect(tops()).toBe(true)
+
+    // The roof level keeps its own setting.
+    await select(roof.id)
+    await act(async () => useEditor.getState().setShowRoofCeilings(false))
+    expect(tops()).toBe(false)
+    expect(useEditor.getState().showCeilings).toBe(true)
+
+    await act(async () => useEditor.getState().setShowRoofCeilings(true))
+    expect(tops()).toBe(true)
+    await act(async () => root.unmount())
+    expect(tops()).toBe(false)
+  } finally {
+    useScene.setState(previous.scene, true)
+    useViewer.setState(previous.viewer, true)
+    useEditor.setState(previous.editor, true)
+    useInteractionScope.setState(previous.scope, true)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})

package/src/components/systems/ceiling/ceiling-system.tsx

@@ -1,4 +1,4 @@
-import { type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
+import { type AnyNodeId, sceneRegistry, servesAsRoofLevel, useScene } from '@pascal-app/core'
 import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
@@ -74,10 +74,59 @@ function setCeilingGridHighlighted(ceilingGrid: Mesh, highlighted: boolean) {
   delete userData[CEILING_GRID_HIGHLIGHT_MATERIAL_KEY]
 }
 
-export const CeilingSystem = () => {
+/**
+ * The "Ceilings" setting that applies on `levelId`: the roof level's, on until turned off; the
+ * floor plans', off until turned on. On, ceilings read as solid from above too.
+ */
+export function useCeilingsSetting(levelId: string | null | undefined): {
+  onRoofLevel: boolean
+  shown: boolean
+  setShown: (show: boolean) => void
+} {
+  const onRoofLevel = useScene((state) => {
+    const level = levelId ? state.nodes[levelId as AnyNodeId] : undefined
+    return level?.type === 'level' && servesAsRoofLevel(state.nodes, level)
+  })
+  const shown = useEditor((state) => (onRoofLevel ? state.showRoofCeilings : state.showCeilings))
+  const setRoof = useEditor((state) => state.setShowRoofCeilings)
+  const setFloor = useEditor((state) => state.setShowCeilings)
+  return { onRoofLevel, shown, setShown: onRoofLevel ? setRoof : setFloor }
+}
+
+function useIsCeilingToolActive(): boolean {
   const tool = useEditor((state) => state.tool)
   const selectedItem = useEditor((state) => state.selectedItem)
   const movingNode = useMovingNode()
+  return (
+    tool === 'ceiling' ||
+    selectedItem?.attachTo === 'ceiling' ||
+    (movingNode?.type === 'item' && movingNode?.asset?.attachTo === 'ceiling') ||
+    (isProceduralItem(movingNode) && movingNode.recipe.mounting?.attachTo === 'ceiling')
+  )
+}
+
+/**
+ * Whether the viewer draws ceiling tops (`showCeilingTops`), from the level's Ceilings setting.
+ * Mounted once by the editor, outside the canvases: the editor and preview viewers each mount a
+ * `CeilingSystem`, and two writers each turning the tops off on unmount raced.
+ */
+export const CeilingTopsSync = () => {
+  const activeLevelId = useViewer((state) => state.selection.levelId)
+  const ceilingsShown = useCeilingsSetting(activeLevelId).shown
+  const isPreviewMode = useEditor((state) => state.isPreviewMode)
+  const isCaptureMode = useEditor((state) => state.isCaptureMode)
+  const isCeilingToolActive = useIsCeilingToolActive()
+  // Placing on a ceiling looks through it from above, so the tops step aside; preview and
+  // captures keep the open look.
+  const showTops = ceilingsShown && !isCeilingToolActive && !isPreviewMode && !isCaptureMode
+  useEffect(() => {
+    useViewer.getState().setShowCeilingTops(showTops)
+    return () => useViewer.getState().setShowCeilingTops(false)
+  }, [showTops])
+  return null
+}
+
+export const CeilingSystem = () => {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const activeLevelId = useViewer((state) => state.selection.levelId)
   const hoveredId = useViewer((state) => state.hoveredId)
@@ -87,6 +136,7 @@ export const CeilingSystem = () => {
   // reveal is gated here, on the consumer.
   const inputDragging = useViewer((state) => state.inputDragging)
   const scopeIdle = useInteractionScope((state) => state.scope.kind === 'idle')
+  const isCeilingToolActive = useIsCeilingToolActive()
 
   useEffect(() => {
     const nodes = useScene.getState().nodes
@@ -96,12 +146,6 @@ export const CeilingSystem = () => {
 
     const levelsToShowCeilings = new Set<string>()
 
-    const isCeilingToolActive =
-      tool === 'ceiling' ||
-      selectedItem?.attachTo === 'ceiling' ||
-      (movingNode?.type === 'item' && movingNode?.asset?.attachTo === 'ceiling') ||
-      (isProceduralItem(movingNode) && movingNode.recipe.mounting?.attachTo === 'ceiling')
-
     if (isCeilingToolActive && activeLevelId) {
       levelsToShowCeilings.add(activeLevelId)
     }
@@ -162,15 +206,6 @@ export const CeilingSystem = () => {
         }
       }
     })
-  }, [
-    tool,
-    selectedItem,
-    movingNode,
-    selectedIds,
-    activeLevelId,
-    hoveredId,
-    scopeIdle,
-    inputDragging,
-  ])
+  }, [isCeilingToolActive, selectedIds, activeLevelId, hoveredId, scopeIdle, inputDragging])
   return null
 }

package/src/components/systems/roof/roof-edit-system.test.tsx

@@ -38,7 +38,6 @@ test('roof trim drag keeps its plane hit over a surface joining and leaving a ba
     id: 'rseg_batch_drag',
     width: 10,
     depth: 10,
-    metadata: { showTrimPlanes: true },
   })
   const source = new THREE.Group()
   const surface = new THREE.Mesh(new THREE.BoxGeometry(30, 0.25, 30), new THREE.MeshBasicMaterial())
@@ -52,6 +51,9 @@ test('roof trim drag keeps its plane hit over a surface joining and leaving a ba
       hoveredId: null,
       selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [segment.id] },
     })
+    useInteractionScope
+      .getState()
+      .begin({ kind: 'reshaping', reshape: 'trim', nodeId: segment.id, driver: 'tool' })
     await root.configure({
       gl: {
         domElement: canvas,
@@ -99,6 +101,18 @@ test('roof trim drag keeps its plane hit over a surface joining and leaving a ba
       events.dispatchEvent(new Event('pointercancel'))
     })
     expect(useLiveNodeOverrides.getState().overrides.has(segment.id)).toBe(false)
+    const fieldEscape = Object.assign(new Event('keydown'), { key: 'Escape' })
+    Object.defineProperty(fieldEscape, 'target', {
+      value: { closest: () => ({ tagName: 'INPUT' }) },
+    })
+    await act(async () => {
+      events.dispatchEvent(fieldEscape)
+    })
+    expect(useInteractionScope.getState().scope.kind).toBe('reshaping')
+    await act(async () => {
+      events.dispatchEvent(Object.assign(new Event('keydown'), { key: 'Escape' }))
+    })
+    expect(useInteractionScope.getState().scope.kind).toBe('idle')
   } finally {
     await act(async () => {
       root.render(null)

package/src/components/systems/roof/roof-edit-system.tsx

@@ -34,6 +34,7 @@ import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { isHistoryShortcut } from '../../../lib/history'
 import { getHoveredRoofSegmentOutlineProxyName } from '../../../lib/roof-hover-outline-proxy'
+import { isTypingTarget } from '../../../lib/typing-target'
 import useInteractionScope, { useMovingNode } from '../../../store/use-interaction-scope'
 import { swallowNextClick } from '../../editor/handles/use-handle-drag'
 
@@ -1006,15 +1007,6 @@ function getTrimCursor(side: RoofTrimSide): string {
   }
 }
 
-function shouldShowTrimPlanes(metadata: unknown): boolean {
-  return (
-    typeof metadata === 'object' &&
-    metadata !== null &&
-    !Array.isArray(metadata) &&
-    (metadata as Record<string, unknown>).showTrimPlanes === true
-  )
-}
-
 function commitSegmentTrim(segment: RoofSegmentNode, trim: RoofSegmentTrim) {
   const scene = useScene.getState()
   scene.applyNodeChanges({
@@ -1031,6 +1023,28 @@ function RoofTrimHandles() {
     return node?.type === 'roof-segment' ? (node as RoofSegmentNode) : null
   })
   const readOnly = useScene((s) => s.readOnly)
+  const showTrimPlanes = useInteractionScope(
+    (s) =>
+      s.scope.kind === 'reshaping' && s.scope.reshape === 'trim' && s.scope.nodeId === selectedId,
+  )
+  useEffect(() => {
+    const end = () =>
+      useInteractionScope
+        .getState()
+        .endIf(
+          (scope) =>
+            scope.kind === 'reshaping' && scope.reshape === 'trim' && scope.nodeId === selectedId,
+        )
+    const onKey = (event: KeyboardEvent) => {
+      if (isTypingTarget(event.target)) return
+      if (event.key === 'Escape') end()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      end()
+    }
+  }, [selectedId])
   const liveOverrideKey = useLiveNodeOverrides((s) =>
     segment ? JSON.stringify(s.overrides.get(segment.id) ?? null) : null,
   )
@@ -1042,7 +1056,10 @@ function RoofTrimHandles() {
   const zoom = camera instanceof THREE.OrthographicCamera ? 1 / camera.zoom : 1
   const handleBaseScale = zoom * TRIM_HANDLE_BASE_SCALE
 
-  useEffect(() => () => dragCleanupRef.current?.(), [])
+  useEffect(() => {
+    if (!selectedId || !showTrimPlanes || readOnly) dragCleanupRef.current?.()
+    return () => dragCleanupRef.current?.()
+  }, [selectedId, showTrimPlanes, readOnly])
 
   const liveSegment = useMemo(() => {
     if (!segment) return null
@@ -1059,8 +1076,6 @@ function RoofTrimHandles() {
     groupRef.current.matrixAutoUpdate = false
   })
 
-  const showTrimPlanes = shouldShowTrimPlanes(liveSegment?.metadata)
-
   if (readOnly || !segment || !liveSegment || !showTrimPlanes) return null
 
   const trim = normalizeRoofSegmentTrim(liveSegment)
@@ -1314,9 +1329,7 @@ function RoofTrimHandles() {
 
     document.body.style.cursor = getTrimCursor(side)
     setDraggingSide(side)
-    useInteractionScope
-      .getState()
-      .begin({ kind: 'handle-drag', nodeId: segmentId, handle: getTrimLabel(side) })
+
     useViewer.getState().setInputDragging(true)
     useScene.temporal.getState().pause()
 
@@ -1355,9 +1368,7 @@ function RoofTrimHandles() {
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
-      useInteractionScope
-        .getState()
-        .endIf((scope) => scope.kind === 'handle-drag' && scope.nodeId === segmentId)
+
       useViewer.getState().setInputDragging(false)
       setDraggingSide(null)
       dragCleanupRef.current = null
@@ -1393,7 +1404,7 @@ function RoofTrimHandles() {
       onCancel()
     }
 
-    dragCleanupRef.current = cleanup
+    dragCleanupRef.current = onCancel
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     window.addEventListener('pointercancel', onCancel)