@pascal-app/editor 1.0.7 → 1.1.0

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)

package/src/components/tools/distribution/distribution-run-tool.test.tsx

@@ -1,9 +1,19 @@
 import { expect, test } from 'bun:test'
-import { emitter, type GridEvent, useScene, WallNode } from '@pascal-app/core'
-import { useEditor, useInteractionScope } from '@pascal-app/editor'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  emitter,
+  type GridEvent,
+  nodeRegistry,
+  registerNode,
+  useScene,
+  WallNode,
+} from '@pascal-app/core'
+import { type EditorGridEvent, useEditor, useInteractionScope } from '@pascal-app/editor'
 import { useThree } from '@react-three/fiber'
 import { act, create } from '@react-three/test-renderer'
-import { useDistributionRunTool } from './distribution-run-tool'
+import { type RunConnection, type RunPoint, useDistributionRunTool } from './distribution-run-tool'
+import { findNearestRunBody3D, type ScenePort } from './ports'
 
 test.each(['duct-segment', 'pipe-segment'] as const)(
   '%s releases its wall plane after an outward commit and retains it along the wall',
@@ -123,3 +133,361 @@ test.each(['duct-segment', 'pipe-segment'] as const)(
     }
   },
 )
+
+test.each(['duct-segment', 'pipe-segment'] as const)(
+  '%s routes at an exact elevation and updates a vertical target without pointer movement',
+  async (toolName) => {
+    const previousEditor = useEditor.getState()
+    const previousScope = useInteractionScope.getState()
+    const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window')
+    const previousAct = Object.getOwnPropertyDescriptor(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+    Object.defineProperty(globalThis, 'window', {
+      value: new EventTarget(),
+      configurable: true,
+      writable: true,
+    })
+    Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+      value: true,
+      configurable: true,
+      writable: true,
+    })
+    let tool: ReturnType<typeof useDistributionRunTool> | undefined
+    const commits: Array<[number, number, number]> = []
+    let routingMode: 'horizontal' | 'vertical' = 'horizontal'
+    let targetElevation = 4
+    function Host() {
+      const { gl } = useThree()
+      gl.domElement.getBoundingClientRect = () =>
+        ({ left: 0, top: 0, width: 100, height: 100 }) as DOMRect
+      tool = useDistributionRunTool({
+        active: true,
+        levelId: 'level_test',
+        toolName,
+        routingMode,
+        elevation: 2,
+        targetElevation,
+        getPorts: () => [],
+        findBody: () => null,
+        commit: ({ end }) => {
+          commits.push(end)
+          return { nextStart: end, nextConnection: { port: null, body: null } }
+        },
+      })
+      return null
+    }
+    let renderer: Awaited<ReturnType<typeof create>> | undefined
+    const event = (x: number): GridEvent => ({
+      position: [x, 0, 0],
+      localPosition: [x, 0, 0],
+      nativeEvent: {} as GridEvent['nativeEvent'],
+    })
+    try {
+      useEditor.setState({ snappingModeByContext: { wall: 'off', polygon: 'off', item: 'off' } })
+      useEditor.getState().showView('2d')
+      renderer = await create(<Host />)
+      await act(async () => {
+        emitter.emit('grid:click', event(1))
+      })
+      expect(tool?.start).toEqual([1, 2, 0])
+      await act(async () => {
+        emitter.emit('grid:click', event(3))
+      })
+      expect(commits).toEqual([[3, 2, 0]])
+      await act(async () => {
+        const planEvent: EditorGridEvent = {
+          ...event(7),
+          screenProjection: { pointer: [120, 180], localToScreen: [1, 0, 0, 1, 0, 0] },
+        }
+        emitter.emit('grid:move', planEvent)
+      })
+      expect(tool?.cursorScreen).toEqual({ x: 120, y: 180, depth: 0 })
+      await act(async () => useEditor.getState().showView('3d'))
+      expect(tool?.cursorScreen).toBeNull()
+      routingMode = 'vertical'
+      await renderer.update(<Host />)
+      expect(tool?.cursor).toEqual([3, 4, 0])
+      targetElevation = 5
+      await renderer.update(<Host />)
+      expect(tool?.cursor).toEqual([3, 5, 0])
+      await act(async () => {
+        emitter.emit('grid:click', event(7))
+      })
+      expect(commits.at(-1)).toEqual([3, 5, 0])
+    } finally {
+      await renderer?.unmount()
+      useEditor.setState(previousEditor)
+      useInteractionScope.setState(previousScope)
+      if (previousWindow) Object.defineProperty(globalThis, 'window', previousWindow)
+      else Reflect.deleteProperty(globalThis, 'window')
+      if (previousAct) Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', previousAct)
+      else Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+    }
+  },
+)
+
+test.each(['duct-segment', 'pipe-segment'] as const)(
+  '%s previews the vertical riser as soon as its start is placed',
+  async (toolName) => {
+    const previousEditor = useEditor.getState()
+    const previousScope = useInteractionScope.getState()
+    const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window')
+    const previousAct = Object.getOwnPropertyDescriptor(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+    const keyTarget = Object.assign(new EventTarget(), { closest: () => null })
+    Object.defineProperty(globalThis, 'window', {
+      value: keyTarget,
+      configurable: true,
+      writable: true,
+    })
+    Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+      value: true,
+      configurable: true,
+      writable: true,
+    })
+    let tool: ReturnType<typeof useDistributionRunTool> | undefined
+    const commits: Array<[number, number, number]> = []
+    function Host() {
+      const { gl } = useThree()
+      gl.domElement.getBoundingClientRect = () =>
+        ({ left: 0, top: 0, width: 100, height: 100 }) as DOMRect
+      tool = useDistributionRunTool({
+        active: true,
+        levelId: 'level_test',
+        toolName,
+        routingMode: 'vertical',
+        elevation: 2,
+        targetElevation: 4,
+        getPorts: () => [],
+        findBody: () => null,
+        commit: ({ end }) => {
+          commits.push(end)
+          return { nextStart: end, nextConnection: { port: null, body: null } }
+        },
+      })
+      return null
+    }
+    let renderer: Awaited<ReturnType<typeof create>> | undefined
+    const event = (x: number): GridEvent => ({
+      position: [x, 0, 0],
+      localPosition: [x, 0, 0],
+      nativeEvent: {} as GridEvent['nativeEvent'],
+    })
+    try {
+      useEditor.setState({ snappingModeByContext: { wall: 'off', polygon: 'off', item: 'off' } })
+      renderer = await create(<Host />)
+      await act(async () => {
+        emitter.emit('grid:click', event(1))
+      })
+      expect(tool?.start).toEqual([1, 2, 0])
+      expect(tool?.cursor).toEqual([1, 4, 0])
+
+      await act(async () => {
+        keyTarget.dispatchEvent(Object.assign(new Event('keydown'), { key: 'Enter' }))
+      })
+      expect(commits).toEqual([[1, 4, 0]])
+      expect(tool?.start).toEqual([1, 4, 0])
+    } finally {
+      await renderer?.unmount()
+      useEditor.setState(previousEditor)
+      useInteractionScope.setState(previousScope)
+      if (previousWindow) Object.defineProperty(globalThis, 'window', previousWindow)
+      else Reflect.deleteProperty(globalThis, 'window')
+      if (previousAct) Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', previousAct)
+      else Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+    }
+  },
+)
+
+test.each(['duct-segment', 'pipe-segment'] as const)(
+  '%s drawn from a collar rises to each panel target without a pointer event',
+  async (toolName) => {
+    const previousEditor = useEditor.getState()
+    const previousScope = useInteractionScope.getState()
+    const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window')
+    const previousAct = Object.getOwnPropertyDescriptor(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+    const keyTarget = Object.assign(new EventTarget(), { closest: () => null })
+    Object.defineProperty(globalThis, 'window', {
+      value: keyTarget,
+      configurable: true,
+      writable: true,
+    })
+    Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+      value: true,
+      configurable: true,
+      writable: true,
+    })
+    let tool: ReturnType<typeof useDistributionRunTool> | undefined
+    const commits: Array<[number, number, number]> = []
+    let targetElevation = 4
+    function Host() {
+      const { gl } = useThree()
+      gl.domElement.getBoundingClientRect = () =>
+        ({ left: 0, top: 0, width: 100, height: 100 }) as DOMRect
+      tool = useDistributionRunTool({
+        active: true,
+        levelId: 'level_test',
+        toolName,
+        routingMode: 'vertical',
+        elevation: 2,
+        targetElevation,
+        initialStart: [1, 2, 0],
+        getPorts: () => [],
+        findBody: () => null,
+        commit: ({ end }) => {
+          commits.push(end)
+          return { nextStart: end, nextConnection: { port: null, body: null } }
+        },
+      })
+      return null
+    }
+    const pressEnter = () =>
+      act(async () => {
+        keyTarget.dispatchEvent(Object.assign(new Event('keydown'), { key: 'Enter' }))
+      })
+    let renderer: Awaited<ReturnType<typeof create>> | undefined
+    try {
+      useEditor.setState({ snappingModeByContext: { wall: 'off', polygon: 'off', item: 'off' } })
+      renderer = await create(<Host />)
+      expect(tool?.cursor).toEqual([1, 4, 0])
+      targetElevation = 5
+      await renderer.update(<Host />)
+      expect(tool?.cursor).toEqual([1, 5, 0])
+      await pressEnter()
+      expect(commits).toEqual([[1, 5, 0]])
+
+      targetElevation = 3
+      await renderer.update(<Host />)
+      expect(tool?.cursor).toEqual([1, 3, 0])
+      await pressEnter()
+      expect(commits).toEqual([
+        [1, 5, 0],
+        [1, 3, 0],
+      ])
+    } finally {
+      await renderer?.unmount()
+      useEditor.setState(previousEditor)
+      useInteractionScope.setState(previousScope)
+      if (previousWindow) Object.defineProperty(globalThis, 'window', previousWindow)
+      else Reflect.deleteProperty(globalThis, 'window')
+      if (previousAct) Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', previousAct)
+      else Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+    }
+  },
+)
+
+test('a sloped horizontal route connects at the height its fall reaches', async () => {
+  const previousScene = useScene.getState()
+  const previousEditor = useEditor.getState()
+  const previousScope = useInteractionScope.getState()
+  const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window')
+  const previousAct = Object.getOwnPropertyDescriptor(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+  const restoreRegistry = nodeRegistry._snapshot()
+  Object.defineProperty(globalThis, 'window', {
+    value: new EventTarget(),
+    configurable: true,
+    writable: true,
+  })
+  Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
+    value: true,
+    configurable: true,
+    writable: true,
+  })
+  const toolName = 'test:sloped-run'
+  registerNode({
+    kind: toolName,
+    schemaVersion: 1,
+    category: 'structure',
+    defaults: () => ({}),
+    snapProfile: 'structural',
+  } as never)
+  const collar = (nodeId: string, position: [number, number, number]): ScenePort => ({
+    nodeId: nodeId as AnyNodeId,
+    id: 'outlet',
+    position,
+    direction: [-1, 0, 0],
+    diameter: 2,
+  })
+  const run = (id: string, x: number, y: number) =>
+    ({
+      object: 'node',
+      id,
+      type: 'pipe-segment',
+      parentId: 'level_test',
+      path: [
+        [x, y, -2],
+        [x, y, 2],
+      ],
+    }) as unknown as AnyNode
+  // A 2% fall from [0, 2, 0] reaches 1.9 m at x = 5 and 1.84 m at x = 8.
+  const ports = [collar('item_start_height', [5, 2, 0.05]), collar('item_graded', [5, 1.9, 0])]
+  let tool: ReturnType<typeof useDistributionRunTool> | undefined
+  const commits: Array<{ end: RunPoint; endConnection: RunConnection }> = []
+  function Host() {
+    const { gl } = useThree()
+    gl.domElement.getBoundingClientRect = () =>
+      ({ left: 0, top: 0, width: 100, height: 100 }) as DOMRect
+    tool = useDistributionRunTool({
+      active: true,
+      levelId: 'level_test',
+      toolName,
+      routingMode: 'horizontal',
+      elevation: 2,
+      getPorts: () => ports,
+      findBody: (point) => findNearestRunBody3D(point, 0.3, { kinds: ['pipe-segment'] }),
+      resolveFreeEnd: (start, end) => [
+        end[0],
+        start[1] - Math.hypot(end[0] - start[0], end[2] - start[2]) * 0.02,
+        end[2],
+      ],
+      commit: ({ end, endConnection }) => {
+        commits.push({ end, endConnection })
+        return { nextStart: end, nextConnection: endConnection }
+      },
+    })
+    return null
+  }
+  let renderer: Awaited<ReturnType<typeof create>> | undefined
+  const planEvent = (x: number, z: number): EditorGridEvent => ({
+    position: [x, 0, z],
+    localPosition: [x, 0, z],
+    screenProjection: { pointer: [x * 100, z * 100], localToScreen: [100, 0, 0, 100, 0, 0] },
+    nativeEvent: {} as GridEvent['nativeEvent'],
+  })
+  try {
+    useScene.setState({
+      nodes: Object.fromEntries(
+        [run('pipe_start_height', 8.05, 1.9), run('pipe_graded', 8, 1.84)].map((node) => [
+          node.id,
+          node,
+        ]),
+      ),
+    })
+    useEditor.setState({
+      snappingModeByContext: { ...previousEditor.snappingModeByContext, wall: 'lines' },
+    })
+    renderer = await create(<Host />)
+    await act(async () => {
+      emitter.emit('grid:click', planEvent(0, 0))
+    })
+    expect(tool?.start).toEqual([0, 2, 0])
+    await act(async () => {
+      emitter.emit('grid:click', planEvent(5, 0))
+    })
+    expect(commits[0]?.end).toEqual([5, 1.9, 0])
+    expect(commits[0]?.endConnection.port?.nodeId).toBe('item_graded' as AnyNodeId)
+    await act(async () => {
+      emitter.emit('grid:click', planEvent(8, 0.04))
+    })
+    expect(commits[1]?.endConnection.body?.nodeId).toBe('pipe_graded' as AnyNodeId)
+    expect(commits[1]?.end[1]).toBeCloseTo(1.84, 6)
+  } finally {
+    await renderer?.unmount()
+    restoreRegistry()
+    useScene.setState(previousScene, true)
+    useEditor.setState(previousEditor, true)
+    useInteractionScope.setState(previousScope, true)
+    if (previousWindow) Object.defineProperty(globalThis, 'window', previousWindow)
+    else Reflect.deleteProperty(globalThis, 'window')
+    if (previousAct) Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', previousAct)
+    else Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+  }
+})