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

package/src/components/editor/node-action-menu.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Move, Search, Spline, Trash2 } from 'lucide-react'
+import { Copy, Group, Move, PencilRuler, Search, Spline, Trash2, Ungroup } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
 
 type NodeActionMenuProps = {
@@ -10,7 +10,12 @@ type NodeActionMenuProps = {
   onDelete?: MouseEventHandler<HTMLButtonElement>
   onDuplicate?: MouseEventHandler<HTMLButtonElement>
   onMove?: MouseEventHandler<HTMLButtonElement>
+  onEditMesh?: MouseEventHandler<HTMLButtonElement>
   onCurve?: MouseEventHandler<HTMLButtonElement>
+  /** Session group (Ctrl/Cmd+G) — multi-selection floating pill. */
+  onGroup?: MouseEventHandler<HTMLButtonElement>
+  /** Dissolve session group (Ctrl/Cmd+Shift+G). */
+  onUngroup?: MouseEventHandler<HTMLButtonElement>
   onPointerDown?: PointerEventHandler<HTMLDivElement>
   onPointerUp?: PointerEventHandler<HTMLDivElement>
   onPointerEnter?: PointerEventHandler<HTMLDivElement>
@@ -23,7 +28,10 @@ export function NodeActionMenu({
   onDelete,
   onDuplicate,
   onMove,
+  onEditMesh,
   onCurve,
+  onGroup,
+  onUngroup,
   onPointerDown,
   onPointerUp,
   onPointerEnter,
@@ -59,6 +67,39 @@ export function NodeActionMenu({
           <Move className="h-4 w-4" />
         </button>
       )}
+      {onEditMesh && (
+        <button
+          aria-label="Edit mesh"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onEditMesh}
+          title="Edit mesh"
+          type="button"
+        >
+          <PencilRuler className="h-4 w-4" />
+        </button>
+      )}
+      {onGroup && (
+        <button
+          aria-label="Group selection"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onGroup}
+          title="Group (Ctrl/Cmd+G)"
+          type="button"
+        >
+          <Group className="h-4 w-4" />
+        </button>
+      )}
+      {onUngroup && (
+        <button
+          aria-label="Ungroup selection"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onUngroup}
+          title="Ungroup (Ctrl/Cmd+Shift+G)"
+          type="button"
+        >
+          <Ungroup className="h-4 w-4" />
+        </button>
+      )}
       {onCurve && (
         <button
           aria-label="Curve"

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

@@ -62,7 +62,7 @@ import {
   HandleArrow,
   NO_RAYCAST,
 } from './handles/handle-arrow'
-import { replacePreviewOverrideIds } from './handles/preview-overrides'
+import { createLinearResizeDragBinding } from './handles/linear-resize-drag'
 import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
 
@@ -235,16 +235,15 @@ export function NodeArrowHandles() {
       typeof def.handles === 'function'
         ? def.handles(node as never, descriptorSceneApi)
         : (def.handles as HandleDescriptor[])
-    // The whole-node move-cross gizmo is gone: moving is now click-to-move on
-    // the selected node body (see selection-manager). Drop both flavours — the
-    // `translate` ground cross (column/roof/shelf/spawn) and the `tap-action`
-    // `move-cross` (item/door/window/elevator/stair) — keep rotate/resize.
-    return all.filter(
-      (d) =>
-        d.kind !== 'translate' &&
-        !('shape' in d && d.shape === 'move-cross') &&
-        (d.kind !== 'linear-resize' || d.visible?.(node as never, descriptorSceneApi) !== false),
-    )
+    return all.filter((descriptor) => {
+      if (descriptor.kind === 'translate') return false
+      const visible =
+        'visible' in descriptor
+          ? descriptor.visible?.(node as never, descriptorSceneApi)
+          : undefined
+      if ('shape' in descriptor && descriptor.shape === 'move-cross') return visible === true
+      return visible !== false
+    })
   }, [node, def, descriptorSceneApi])
 
   const shouldRender =
@@ -293,18 +292,25 @@ function NodeArrowHandlesForNode({
   descriptors: HandleDescriptor[]
 }) {
   const parentId = node.parentId ?? null
-  const grandparentId = useScene((state) => {
-    if (!parentId) return null
-    const parent = state.nodes[parentId as AnyNodeId]
-    return parent?.parentId ?? null
-  })
 
   const portalMode: HandlePortal = descriptors.some((d) => d.portal === 'grandparent')
     ? 'grandparent'
     : 'parent'
 
+  const portalTargetResolver = descriptors.find(
+    (descriptor) => descriptor.portalTarget !== undefined,
+  )?.portalTarget
+  const descriptorSceneApi = useMemo(() => createSceneApi(useScene), [])
+
   // Portal target: the mesh we createPortal into.
-  const portalTargetId = portalMode === 'grandparent' ? grandparentId : parentId
+  const portalTargetId = useScene((state) => {
+    if (portalTargetResolver) {
+      return portalTargetResolver(node as never, descriptorSceneApi) ?? null
+    }
+    const parentId = node.parentId ?? null
+    if (!parentId || portalMode === 'parent') return parentId
+    return state.nodes[parentId as AnyNodeId]?.parentId ?? null
+  })
   // Outer wrapper mirrors this mesh's local pose. For 'parent' mode the
   // outer IS the node (so handles + drag math both live in node-local).
   // For 'grandparent' the outer rides the parent and an inner group adds
@@ -710,10 +716,17 @@ function LinearArrow({
           getPointerRay(event.nativeEvent.clientX, event.nativeEvent.clientY, _resizeRay),
         ) / localToWorldScale
 
-      const overrideId =
-        (descriptor.kind === 'linear-resize'
-          ? descriptor.overrideTarget?.(initialNode as never, sceneApi)
-          : undefined) ?? nodeId
+      const linearBinding =
+        descriptor.kind === 'linear-resize'
+          ? createLinearResizeDragBinding({
+              descriptor,
+              initialNode,
+              nodeId,
+              sceneApi,
+              initialModifiers: { altKey: event.nativeEvent.altKey },
+            })
+          : null
+      const overrideId = linearBinding?.overrideId ?? nodeId
       const initialValue = descriptor.currentValue(initialNode)
       const minBound = resolveBound(descriptor.min, Number.NEGATIVE_INFINITY, initialNode, sceneApi)
       const maxBound = resolveBound(descriptor.max, Number.POSITIVE_INFINITY, initialNode, sceneApi)
@@ -730,14 +743,9 @@ function LinearArrow({
       // when the (snapped + clamped) value actually changes, so the cue
       // tracks real size steps instead of every sub-pixel pointer jitter.
       let lastTickValue = initialValue
-      let previewOverrideIds = new Set<AnyNodeId>()
-
       return {
         overrideId,
-        commit:
-          descriptor.kind === 'linear-resize' && descriptor.commit
-            ? (patch) => descriptor.commit?.(initialNode, patch, sceneApi)
-            : undefined,
+        commit: linearBinding?.commit,
         onBegin: () => {
           // Always claim the handle-drag scope so the HUD knows a resize is the
           // active interaction (keeps the idle select hints off-screen). The
@@ -755,12 +763,9 @@ function LinearArrow({
             descriptor.onDragEnd?.(initialNode as never, sceneApi)
           }
           if (onDrag) useOpeningGuides.getState().clear()
-          for (const previewId of previewOverrideIds) {
-            useLiveNodeOverrides.getState().clear(previewId)
-            useScene.getState().markDirty(previewId)
-          }
+          linearBinding?.clearPreview()
         },
-        move: ({ event: moveEvent, getPointerRay: getMovePointerRay }) => {
+        move: ({ event: moveEvent, modifiers, getPointerRay: getMovePointerRay }) => {
           const currentPointer =
             closestAxisParameterToRay(
               _resizeOriginW,
@@ -772,43 +777,27 @@ function LinearArrow({
           const linearDescriptor = descriptor.kind === 'linear-resize' ? descriptor : null
           const snappedNext = resolveResizeSnapValue({
             rawValue: rawNext,
+            fallbackValue: lastTickValue,
             gridSnapEnabled: linearDescriptor?.gridSnap === true,
-            gridSnapActive: isGridSnapActive(),
+            gridSnapActive: isGridSnapActive() && !modifiers.altKey,
             gridSnapStep: useEditor.getState().gridSnapStep,
-            magneticSnapActive: isMagneticSnapActive(),
+            magneticSnapActive: isMagneticSnapActive() && !modifiers.altKey,
             magneticSnap: linearDescriptor?.magneticSnap
               ? (value) => linearDescriptor.magneticSnap?.(initialNode, value, sceneApi) ?? value
               : undefined,
+            connectionSnapActive: !modifiers.altKey,
+            connectionSnap: linearDescriptor?.connectionSnap
+              ? (value) => linearDescriptor.connectionSnap?.(initialNode, value, sceneApi) ?? value
+              : undefined,
           })
           const next = Math.min(maxBound, Math.max(minBound, snappedNext))
           if (next !== lastTickValue) {
             lastTickValue = next
             sfxEmitter.emit('sfx:resize')
           }
-          const patch = descriptor.apply(initialNode as never, next, sceneApi) as Partial<AnyNode>
-          if (descriptor.kind === 'linear-resize' && descriptor.previewOverrides) {
-            const previewEntries = descriptor.previewOverrides(initialNode as never, next, sceneApi)
-            const nextPreviewOverrideIds = 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)
-            }
-            previewOverrideIds = nextPreviewOverrideIds
-          }
+          const patch = linearBinding
+            ? linearBinding.apply(next, modifiers)
+            : (descriptor.apply(initialNode as never, next, sceneApi) as Partial<AnyNode>)
           // Let the kind publish live guides for the edge being resized.
           onDrag?.({ ...(initialNode as object), ...patch } as AnyNode, sceneApi)
           return patch

package/src/components/editor/opening-guides-3d-layer.tsx

@@ -53,17 +53,26 @@ const mid = (a: OpeningGuideVec3, b: OpeningGuideVec3): OpeningGuideVec3 => [
 export const OpeningGuides3DLayer = memo(function OpeningGuides3DLayer() {
   const guides = useOpeningGuides((s) => s.guides)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   if (guides.length === 0) return null
   return (
     <>
       {guides.map((guide) => (
-        <OpeningGuide guide={guide} key={guide.id} unit={unit} />
+        <OpeningGuide guide={guide} key={guide.id} metricNotation={metricNotation} unit={unit} />
       ))}
     </>
   )
 })
 
-function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' | 'imperial' }) {
+function OpeningGuide({
+  guide,
+  metricNotation,
+  unit,
+}: {
+  guide: OpeningGuide3D
+  metricNotation: 'meters' | 'millimeters'
+  unit: 'metric' | 'imperial'
+}) {
   if (guide.kind === 'badge') {
     return (
       <Html
@@ -76,7 +85,7 @@ function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' |
           className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-sans font-semibold text-[11px] text-white"
           style={{ backgroundColor: BADGE_PILL }}
         >
-          {`= ${formatMeasurement(guide.value, unit)}`}
+          {`= ${formatMeasurement(guide.value, unit, metricNotation)}`}
         </div>
       </Html>
     )
@@ -97,7 +106,7 @@ function OpeningGuide({ guide, unit }: { guide: OpeningGuide3D; unit: 'metric' |
             className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
             style={{ backgroundColor: DIMENSION_PILL }}
           >
-            {formatMeasurement(guide.value, unit)}
+            {formatMeasurement(guide.value, unit, metricNotation)}
           </div>
         </Html>
       ) : null}