@pascal-app/editor 1.0.0-beta.4 → 1.0.0

package/src/components/editor/handles/handle-arrow.tsx

@@ -21,6 +21,7 @@ import {
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import { EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY } from '../../../lib/direct-manipulation'
 import useEditor from '../../../store/use-editor'
 
 // While a press-drag move is in flight (`placementDragMode`), the move tool
@@ -29,7 +30,7 @@ import useEditor from '../../../store/use-editor'
 // (`wall:move` for openings, `grid:move` for free movers), freezing the drag.
 // Make every handle hit area inert for the duration; the indicator mesh still
 // renders (it's already NO_RAYCAST + depthTest off) so the grip stays visible.
-function hitAreaRaycast(this: Mesh, raycaster: Raycaster, intersects: Intersection[]): void {
+export function hitAreaRaycast(this: Mesh, raycaster: Raycaster, intersects: Intersection[]): void {
   if (useEditor.getState().placementDragMode) return
   Mesh.prototype.raycast.call(this, raycaster, intersects)
 }
@@ -66,6 +67,12 @@ const MOVE_CROSS_DEPTH = 0.06
 const MOVE_CROSS_BEVEL_THICKNESS = 0.018
 const MOVE_CROSS_BEVEL_SIZE = 0.012
 const MOVE_CROSS_BEVEL_SEGMENTS = 6
+const PLUS_HALF_LENGTH = 0.18
+const PLUS_HALF_WIDTH = 0.045
+const PLUS_DEPTH = 0.06
+const PLUS_BEVEL_THICKNESS = 0.018
+const PLUS_BEVEL_SIZE = 0.012
+const PLUS_BEVEL_SEGMENTS = 6
 const ROTATE_HANDLE_RADIUS = 0.2
 const ROTATE_HANDLE_HALF_SWEEP = Math.PI / 3
 const ROTATE_RIBBON_HALF_WIDTH = 0.02
@@ -73,7 +80,13 @@ const ROTATE_HEAD_HALF_WIDTH = 0.045
 const TRACKER_CUBE_SIZE = 0.16
 export const CORNER_HEX_RADIUS = 0.11
 
-export type HandleArrowShape = 'chevron' | 'cross' | 'curved-arrow' | 'tracker' | 'corner-picker'
+export type HandleArrowShape =
+  | 'chevron'
+  | 'cross'
+  | 'plus'
+  | 'curved-arrow'
+  | 'tracker'
+  | 'corner-picker'
 export type HandleArrowInputShape = HandleArrowShape | 'arrow' | 'move-cross'
 
 export type HandleArrowPlacement = {
@@ -304,6 +317,54 @@ function createMoveCrossHitAreaGeometry() {
   return merged
 }
 
+function createPlusHandleGeometry() {
+  const shape = new Shape()
+  shape.moveTo(-PLUS_HALF_WIDTH, PLUS_HALF_LENGTH)
+  shape.lineTo(PLUS_HALF_WIDTH, PLUS_HALF_LENGTH)
+  shape.lineTo(PLUS_HALF_WIDTH, PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_LENGTH, PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_LENGTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_WIDTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_WIDTH, -PLUS_HALF_LENGTH)
+  shape.lineTo(-PLUS_HALF_WIDTH, -PLUS_HALF_LENGTH)
+  shape.lineTo(-PLUS_HALF_WIDTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(-PLUS_HALF_LENGTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(-PLUS_HALF_LENGTH, PLUS_HALF_WIDTH)
+  shape.lineTo(-PLUS_HALF_WIDTH, PLUS_HALF_WIDTH)
+  shape.closePath()
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: PLUS_DEPTH,
+    bevelEnabled: true,
+    bevelThickness: PLUS_BEVEL_THICKNESS,
+    bevelSize: PLUS_BEVEL_SIZE,
+    bevelOffset: 0,
+    bevelSegments: PLUS_BEVEL_SEGMENTS,
+    curveSegments: 8,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -PLUS_DEPTH / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+function createPlusHitAreaGeometry() {
+  const length = (PLUS_HALF_LENGTH + HIT_AREA_MARGIN) * 2
+  const width = (PLUS_HALF_WIDTH + HIT_AREA_MARGIN) * 2
+  const horizontal = new BoxGeometry(length, width, HIT_AREA_THICKNESS)
+  const vertical = new BoxGeometry(width, length, HIT_AREA_THICKNESS)
+  const merged = mergeGeometries([horizontal, vertical], false)
+  if (!merged) {
+    vertical.dispose()
+    horizontal.computeBoundingSphere()
+    return horizontal
+  }
+  horizontal.dispose()
+  vertical.dispose()
+  merged.computeBoundingSphere()
+  return merged
+}
+
 export function createRotateArrowHitAreaGeometry() {
   const halfSweep = ROTATE_HANDLE_HALF_SWEEP + HIT_AREA_MARGIN / ROTATE_HANDLE_RADIUS
   const geometry = new TorusGeometry(
@@ -345,6 +406,7 @@ const CORNER_DISC_ROUND_SEGMENTS = 32
 function createHandleArrowGeometry(shape: HandleArrowShape, thin = false, round = false) {
   if (shape === 'chevron') return createArrowHandleGeometry(thin)
   if (shape === 'cross') return createMoveCrossHandleGeometry()
+  if (shape === 'plus') return createPlusHandleGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHandleGeometry()
   if (shape === 'tracker') {
     const geometry = new BoxGeometry(TRACKER_CUBE_SIZE, TRACKER_CUBE_SIZE, TRACKER_CUBE_SIZE)
@@ -362,6 +424,7 @@ function createHandleArrowGeometry(shape: HandleArrowShape, thin = false, round
 function createHandleArrowHitGeometry(shape: HandleArrowShape, round = false) {
   if (shape === 'chevron') return createArrowHitAreaGeometry()
   if (shape === 'cross') return createMoveCrossHitAreaGeometry()
+  if (shape === 'plus') return createPlusHitAreaGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHitAreaGeometry()
   if (shape === 'tracker') return createTrackerHitAreaGeometry()
   const geometry = new CircleGeometry(
@@ -373,7 +436,29 @@ function createHandleArrowHitGeometry(shape: HandleArrowShape, round = false) {
 }
 
 let sharedHitAreaMaterial: MeshBasicNodeMaterial | null = null
-let sharedHitAreaMaterialRefs = 0
+const sharedHandleGeometries = new Map<string, BufferGeometry>()
+const sharedHandleHitGeometries = new Map<string, BufferGeometry>()
+const sharedHandleMaterials = new Map<string, MeshBasicNodeMaterial>()
+
+function sharedHandleGeometry(shape: HandleArrowShape, thin: boolean, round: boolean) {
+  const key = `${shape}:${thin}:${round}`
+  let geometry = sharedHandleGeometries.get(key)
+  if (!geometry) {
+    geometry = createHandleArrowGeometry(shape, thin, round)
+    sharedHandleGeometries.set(key, geometry)
+  }
+  return geometry
+}
+
+function sharedHandleHitGeometry(shape: HandleArrowShape, round: boolean) {
+  const key = `${shape}:${round}`
+  let geometry = sharedHandleHitGeometries.get(key)
+  if (!geometry) {
+    geometry = createHandleArrowHitGeometry(shape, round)
+    sharedHandleHitGeometries.set(key, geometry)
+  }
+  return geometry
+}
 
 function createInvisibleHitAreaMaterial() {
   return new MeshBasicNodeMaterial({
@@ -388,23 +473,8 @@ function createInvisibleHitAreaMaterial() {
 }
 
 export function useInvisibleHitAreaMaterial(): MeshBasicNodeMaterial {
-  const materialRef = useRef<MeshBasicNodeMaterial | null>(null)
-  if (!materialRef.current) {
-    sharedHitAreaMaterial ??= createInvisibleHitAreaMaterial()
-    materialRef.current = sharedHitAreaMaterial
-  }
-  useEffect(() => {
-    sharedHitAreaMaterialRefs += 1
-    return () => {
-      sharedHitAreaMaterialRefs -= 1
-      if (sharedHitAreaMaterialRefs <= 0 && sharedHitAreaMaterial) {
-        sharedHitAreaMaterial.dispose()
-        sharedHitAreaMaterial = null
-        sharedHitAreaMaterialRefs = 0
-      }
-    }
-  }, [])
-  return materialRef.current
+  sharedHitAreaMaterial ??= createInvisibleHitAreaMaterial()
+  return sharedHitAreaMaterial
 }
 
 export function InvisibleHandleHitArea({
@@ -434,6 +504,7 @@ export function InvisibleHandleHitArea({
       raycast={hitAreaRaycast}
       renderOrder={HIT_AREA_RENDER_ORDER}
       scale={scale}
+      userData={{ [EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY]: true }}
     />
   )
 }
@@ -461,19 +532,21 @@ export function useArrowMaterial(): MeshBasicNodeMaterial {
   )
 }
 
-function useHandleArrowMaterial(shape: HandleArrowShape): MeshBasicNodeMaterial {
-  return useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        transparent: true,
-        opacity: shape === 'corner-picker' ? 0.95 : 1,
-        depthTest: false,
-        depthWrite: shape !== 'corner-picker',
-      }),
-    [shape],
-  )
+function useHandleArrowMaterial(shape: HandleArrowShape, hover: boolean): MeshBasicNodeMaterial {
+  const key = `${shape}:${hover}`
+  let material = sharedHandleMaterials.get(key)
+  if (!material) {
+    material = new MeshBasicNodeMaterial({
+      color: new Color(hover ? ARROW_HOVER_COLOR : ARROW_COLOR),
+      side: DoubleSide,
+      transparent: true,
+      opacity: shape === 'corner-picker' ? 0.95 : 1,
+      depthTest: false,
+      depthWrite: shape !== 'corner-picker',
+    })
+    sharedHandleMaterials.set(key, material)
+  }
+  return material
 }
 
 function indicatorRenderOrder(shape: HandleArrowShape) {
@@ -497,15 +570,9 @@ export function HandleArrow({
   round = false,
 }: HandleArrowProps) {
   const visualShape = normalizeHandleArrowShape(shape, cursor)
-  const geometry = useMemo(
-    () => createHandleArrowGeometry(visualShape, thin, round),
-    [visualShape, thin, round],
-  )
-  const hitGeometry = useMemo(
-    () => createHandleArrowHitGeometry(visualShape, round),
-    [visualShape, round],
-  )
-  const indicatorMaterial = useHandleArrowMaterial(visualShape)
+  const geometry = sharedHandleGeometry(visualShape, thin, round)
+  const hitGeometry = sharedHandleHitGeometry(visualShape, round)
+  const indicatorMaterial = useHandleArrowMaterial(visualShape, hover)
   const hitMaterial = useInvisibleHitAreaMaterial()
   const rootRef = useRef<Group>(null)
   const rotation: [number, number, number] = placement.rotation
@@ -517,9 +584,6 @@ export function HandleArrow({
   const scale = (hover ? hoverScale : 1) * placement.baseScale
   const hitScale = visualShape === 'corner-picker' ? scale : placement.baseScale
 
-  useEffect(() => {
-    indicatorMaterial.color.set(hover ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [indicatorMaterial, hover])
   useEffect(() => {
     const hideForCapture = () => {
       if (rootRef.current) rootRef.current.visible = false
@@ -534,9 +598,6 @@ export function HandleArrow({
       emitter.off('thumbnail:after-capture', restoreAfterCapture)
     }
   }, [])
-  useEffect(() => () => geometry.dispose(), [geometry])
-  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
-  useEffect(() => () => indicatorMaterial.dispose(), [indicatorMaterial])
 
   const handleEnter: PointerHandler = (event) => {
     event.stopPropagation()

package/src/components/editor/handles/linear-resize-drag.ts

@@ -0,0 +1,67 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type HandleDragModifiers,
+  type LinearResizeHandle,
+  type SceneApi,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+import { replacePreviewOverrideIds } from './preview-overrides'
+
+export function createLinearResizeDragBinding({
+  descriptor,
+  initialNode,
+  nodeId,
+  sceneApi,
+  initialModifiers,
+}: {
+  descriptor: LinearResizeHandle<AnyNode>
+  initialNode: AnyNode
+  nodeId: AnyNodeId
+  sceneApi: SceneApi
+  initialModifiers: HandleDragModifiers
+}) {
+  const overrideId = descriptor.overrideTarget?.(initialNode, sceneApi) ?? nodeId
+  let lastModifiers = initialModifiers
+  let previewOverrideIds = new Set<AnyNodeId>()
+
+  return {
+    overrideId,
+    commit: descriptor.commit
+      ? (patch: Partial<AnyNode>) =>
+          descriptor.commit?.(initialNode, patch, sceneApi, lastModifiers)
+      : undefined,
+    apply(next: number, modifiers: HandleDragModifiers): Partial<AnyNode> {
+      lastModifiers = modifiers
+      const patch = descriptor.apply(initialNode, next, sceneApi, modifiers) as Partial<AnyNode>
+      const previewEntries = descriptor.previewOverrides?.(initialNode, next, sceneApi, modifiers)
+      if (!previewEntries) return patch
+
+      previewOverrideIds = replacePreviewOverrideIds(
+        previewOverrideIds,
+        previewEntries,
+        (previewId) => {
+          useLiveNodeOverrides.getState().clear(previewId)
+          useScene.getState().markDirty(previewId)
+        },
+      )
+      useLiveNodeOverrides
+        .getState()
+        .setMany(
+          previewEntries.map(([id, previewPatch]) => [id, previewPatch as Record<string, unknown>]),
+        )
+      for (const [previewId] of previewEntries) {
+        useScene.getState().markDirty(previewId)
+      }
+      return patch
+    },
+    clearPreview(): void {
+      for (const previewId of previewOverrideIds) {
+        useLiveNodeOverrides.getState().clear(previewId)
+        useScene.getState().markDirty(previewId)
+      }
+      previewOverrideIds = new Set()
+    },
+  }
+}

package/src/components/editor/handles/resize-snap.test.ts

@@ -49,4 +49,50 @@ describe('resolveResizeSnapValue', () => {
     ).toBe(0.56)
     expect(magneticSnap).not.toHaveBeenCalled()
   })
+
+  it('applies a structural connection snap independently of the active mode', () => {
+    const connectionSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.59,
+        gridSnapEnabled: false,
+        gridSnapActive: false,
+        gridSnapStep: 0.1,
+        magneticSnapActive: false,
+        connectionSnap,
+      }),
+    ).toBe(0.6)
+    expect(connectionSnap).toHaveBeenCalledWith(0.59)
+  })
+
+  it('bypasses a structural connection snap while force-moving', () => {
+    const connectionSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.59,
+        gridSnapEnabled: false,
+        gridSnapActive: false,
+        gridSnapStep: 0.1,
+        magneticSnapActive: false,
+        connectionSnapActive: false,
+        connectionSnap,
+      }),
+    ).toBe(0.59)
+    expect(connectionSnap).not.toHaveBeenCalled()
+  })
+
+  it('keeps the last valid value when pointer projection is non-finite', () => {
+    expect(
+      resolveResizeSnapValue({
+        rawValue: Number.NaN,
+        fallbackValue: 12.3,
+        gridSnapEnabled: false,
+        gridSnapActive: false,
+        gridSnapStep: 0.5,
+        magneticSnapActive: false,
+      }),
+    ).toBe(12.3)
+  })
 })

package/src/components/editor/handles/resize-snap.ts

@@ -2,22 +2,31 @@ import { snapScalar } from '@pascal-app/core'
 
 export function resolveResizeSnapValue({
   rawValue,
+  fallbackValue = rawValue,
   gridSnapEnabled,
   gridSnapActive,
   gridSnapStep,
   magneticSnapActive,
   magneticSnap,
+  connectionSnapActive = true,
+  connectionSnap,
 }: {
   rawValue: number
+  fallbackValue?: number
   gridSnapEnabled: boolean
   gridSnapActive: boolean
   gridSnapStep: number
   magneticSnapActive: boolean
   magneticSnap?: (value: number) => number
+  connectionSnapActive?: boolean
+  connectionSnap?: (value: number) => number
 }): number {
+  if (!Number.isFinite(rawValue)) return fallbackValue
   const gridValue =
     gridSnapEnabled && gridSnapActive && gridSnapStep > 0
       ? snapScalar(rawValue, gridSnapStep)
       : rawValue
-  return magneticSnapActive && magneticSnap ? magneticSnap(gridValue) : gridValue
+  const modeValue = magneticSnapActive && magneticSnap ? magneticSnap(gridValue) : gridValue
+  const resolved = connectionSnapActive && connectionSnap ? connectionSnap(modeValue) : modeValue
+  return Number.isFinite(resolved) ? resolved : fallbackValue
 }

package/src/components/editor/handles/use-handle-drag.ts

@@ -5,6 +5,7 @@ import {
   type AnyNodeId,
   type Cursor,
   createSceneApi,
+  type HandleDragModifiers,
   runAsSingleSceneHistoryStep,
   useLiveNodeOverrides,
   useScene,
@@ -46,6 +47,7 @@ export type HandleDragStartContext = {
 
 export type HandleDragMoveContext = {
   event: PointerEvent
+  modifiers: HandleDragModifiers
   getPointerRay: GetPointerRay
   intersectPlane: IntersectPlane
 }
@@ -177,6 +179,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
 
     let lastPatch: Partial<AnyNode> | null = null
     let historyPaused = true
+    let altKey = event.nativeEvent.altKey
 
     const resumeHistory = () => {
       if (!historyPaused) return
@@ -185,7 +188,12 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
 
     const onMove = (moveEvent: PointerEvent) => {
-      const patch = session.move({ event: moveEvent, getPointerRay, intersectPlane })
+      const patch = session.move({
+        event: moveEvent,
+        modifiers: { altKey },
+        getPointerRay,
+        intersectPlane,
+      })
       if (!patch) return
       lastPatch = patch
       useLiveNodeOverrides.getState().set(overrideId, patch as Record<string, unknown>)
@@ -199,6 +207,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      window.removeEventListener('keyup', onKeyUp, true)
       if (document.body.style.cursor === cursor) {
         document.body.style.cursor = ''
       }
@@ -240,17 +249,25 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     // Escape / ⌘Z abort the drag — capture phase so they win over the global
     // use-keyboard arms (⌘Z must never history-jump under a live pointer).
     const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') {
+        altKey = true
+        return
+      }
       if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
       e.preventDefault()
       e.stopPropagation()
       swallowNextClick()
       onCancel()
     }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') altKey = false
+    }
 
     dragCleanupRef.current = onCancel
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     window.addEventListener('pointercancel', onCancel)
     window.addEventListener('keydown', onKeyDown, true)
+    window.addEventListener('keyup', onKeyUp, true)
   }
 }