@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/editor/join-walls-pill.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Link2 } from 'lucide-react'
+
+/**
+ * The "Join walls" action on an open wall end — shared by the floor plan and
+ * the 3D view so both offer the same pill. A refusal ("A door or window is in
+ * the way") sits in front of the button.
+ */
+export function JoinWallsPill({
+  onHoverEnd,
+  onHoverStart,
+  onJoin,
+  refusal,
+}: {
+  onHoverEnd: () => void
+  onHoverStart: () => void
+  onJoin: () => void
+  refusal: string | null
+}) {
+  return (
+    <div
+      className="pointer-events-auto flex items-center gap-1 whitespace-nowrap rounded-full border border-border bg-background/95 p-1 text-xs shadow-xl backdrop-blur-md"
+      data-open-wall-end=""
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerEnter={onHoverStart}
+      onPointerLeave={onHoverEnd}
+      onPointerUp={(event) => event.stopPropagation()}
+    >
+      {refusal ? <span className="px-2 text-muted-foreground">{refusal}</span> : null}
+      <button
+        className="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-foreground transition-colors hover:bg-accent"
+        onClick={(event) => {
+          event.stopPropagation()
+          onJoin()
+        }}
+        type="button"
+      >
+        <Link2 className="h-3.5 w-3.5" />
+        Join walls
+      </button>
+    </div>
+  )
+}

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

@@ -1,8 +1,21 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Group, Move, PencilRuler, Search, Spline, Trash2, Ungroup } from 'lucide-react'
-import type { MouseEventHandler, PointerEventHandler } from 'react'
+import {
+  Copy,
+  Group,
+  Move,
+  PencilRuler,
+  RotateCcw,
+  RotateCw,
+  Search,
+  Spline,
+  Trash2,
+  Ungroup,
+} from 'lucide-react'
+import type { MouseEventHandler, PointerEventHandler, ReactNode } from 'react'
+import { ActionMenuButton } from './action-menu-button'
+import { RegistryActionContributions } from './registry-action-contributions'
 
 type NodeActionMenuProps = {
   onFind?: MouseEventHandler<HTMLButtonElement>
@@ -12,6 +25,9 @@ type NodeActionMenuProps = {
   onMove?: MouseEventHandler<HTMLButtonElement>
   onEditMesh?: MouseEventHandler<HTMLButtonElement>
   onCurve?: MouseEventHandler<HTMLButtonElement>
+  /** Quarter turns (a room); sit in the Curve slot (a room has no curve). */
+  onRotateLeft?: MouseEventHandler<HTMLButtonElement>
+  onRotateRight?: MouseEventHandler<HTMLButtonElement>
   /** Session group (Ctrl/Cmd+G) — multi-selection floating pill. */
   onGroup?: MouseEventHandler<HTMLButtonElement>
   /** Dissolve session group (Ctrl/Cmd+Shift+G). */
@@ -20,6 +36,16 @@ type NodeActionMenuProps = {
   onPointerUp?: PointerEventHandler<HTMLDivElement>
   onPointerEnter?: PointerEventHandler<HTMLDivElement>
   onPointerLeave?: PointerEventHandler<HTMLDivElement>
+  /**
+   * Buttons a caller contributes next to the registry contributions — for a
+   * selection that is not a scene-node selection (the room), whose actions the
+   * registry cannot find.
+   */
+  children?: ReactNode
+  /** Tooltip / accessible name of the delete button. */
+  deleteLabel?: string
+  /** Shows the delete button greyed out, its tooltip saying why. */
+  deleteDisabledReason?: string
 }
 
 export function NodeActionMenu({
@@ -30,12 +56,17 @@ export function NodeActionMenu({
   onMove,
   onEditMesh,
   onCurve,
+  onRotateLeft,
+  onRotateRight,
   onGroup,
   onUngroup,
   onPointerDown,
   onPointerUp,
   onPointerEnter,
   onPointerLeave,
+  children,
+  deleteLabel = 'Delete',
+  deleteDisabledReason,
 }: NodeActionMenuProps) {
   return (
     <div
@@ -46,103 +77,72 @@ export function NodeActionMenu({
       onPointerUp={onPointerUp}
     >
       {onFind && (
-        <button
-          aria-label="Find in catalog"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onFind}
-          title="Find in catalog"
-          type="button"
-        >
+        <ActionMenuButton label="Find in catalog" onClick={onFind}>
           <Search className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onMove && (
-        <button
-          aria-label="Move"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onMove}
-          title="Move"
-          type="button"
-        >
+        <ActionMenuButton label="Move" onClick={onMove}>
           <Move className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {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"
-        >
+        <ActionMenuButton label="Edit mesh" onClick={onEditMesh}>
           <PencilRuler className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {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"
-        >
+        <ActionMenuButton keys={['Cmd/Ctrl', 'G']} label="Group selection" onClick={onGroup}>
           <Group className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {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"
+        <ActionMenuButton
+          keys={['Cmd/Ctrl', 'Shift', 'G']}
+          label="Ungroup selection"
           onClick={onUngroup}
-          title="Ungroup (Ctrl/Cmd+Shift+G)"
-          type="button"
         >
           <Ungroup className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onCurve && (
-        <button
-          aria-label="Curve"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onCurve}
-          title="Curve"
-          type="button"
-        >
+        <ActionMenuButton label="Curve" onClick={onCurve}>
           <Spline className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
+      {onRotateLeft && (
+        <ActionMenuButton label="Rotate left" onClick={onRotateLeft}>
+          <RotateCcw className="h-4 w-4" />
+        </ActionMenuButton>
+      )}
+      {onRotateRight && (
+        <ActionMenuButton label="Rotate right" onClick={onRotateRight}>
+          <RotateCw className="h-4 w-4" />
+        </ActionMenuButton>
+      )}
+      <RegistryActionContributions />
+      {children}
       {onDuplicate && (
-        <button
-          aria-label="Duplicate"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onDuplicate}
-          title="Duplicate"
-          type="button"
-        >
+        <ActionMenuButton label="Duplicate" onClick={onDuplicate}>
           <Copy className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onAddHole && (
-        <button
-          aria-label="Cut Out"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onAddHole}
-          title="Cut Out"
-          type="button"
-        >
+        <ActionMenuButton label="Cut out" onClick={onAddHole}>
           <Icon height={16} icon="carbon:cut-out" width={16} />
-        </button>
+        </ActionMenuButton>
       )}
       {onDelete && (
-        <button
-          aria-label="Delete"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+        <ActionMenuButton
+          destructive
+          disabled={!!deleteDisabledReason}
+          disabledReason={deleteDisabledReason}
+          keys={['Delete / Backspace']}
+          label={deleteLabel}
           onClick={onDelete}
-          title="Delete"
-          type="button"
         >
           <Trash2 className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
     </div>
   )

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

@@ -4,7 +4,9 @@ import {
   type AnyNode,
   type AnyNodeId,
   type ArcResizeHandle,
+  type CornerRadiusHandle,
   type Cursor,
+  createAngleAccumulator,
   createSceneApi,
   DEFAULT_ANGLE_STEP,
   type HandleDescriptor,
@@ -41,12 +43,17 @@ import {
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { useCeilingEditCeilingId } from '../../lib/ceiling-edit-session'
 import { EDITOR_LAYER } from '../../lib/constants'
 import { RESIZE_HANDLE_DRAG_LABEL, ROTATE_HANDLE_DRAG_LABEL } from '../../lib/contextual-help'
 import { createEditorApi } from '../../lib/editor-api'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useDirectManipulationFeedback from '../../store/use-direct-manipulation-feedback'
-import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import useEditor, {
+  isAngleSnapActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../store/use-editor'
 import { useHandleGroup } from '../../store/use-handle-group'
 import useInteractionScope, {
   useEndpointReshape,
@@ -236,7 +243,12 @@ export function NodeArrowHandles() {
   const activeGroup = useHandleGroup((s) =>
     s.active && s.active.nodeId === node?.id ? s.active.group : null,
   )
-  const def = node ? nodeRegistry.get(node.type) : null
+  // A ceiling's handles belong to its Edit ceiling session; a plain selection shows none.
+  const editCeilingId = useCeilingEditCeilingId()
+  const def =
+    node && (node.type !== 'ceiling' || node.id === editCeilingId)
+      ? nodeRegistry.get(node.type)
+      : null
   const descriptorSceneApi = useMemo(() => createSceneApi(useScene), [])
   const descriptors = useMemo(() => {
     if (!(node && def?.handles)) return null
@@ -574,6 +586,17 @@ function ArrowHandle({
       />
     )
   }
+  if (descriptor.kind === 'corner-radius') {
+    return (
+      <CornerRadiusKnob
+        descriptor={descriptor}
+        dragControls={dragControls}
+        handleIndex={handleIndex}
+        node={placementNode}
+        rideObject={rideObject}
+      />
+    )
+  }
   if (descriptor.kind === 'tap-action') {
     // Tap-action handles (fence side-move arrows, corner pickers) aren't
     // resize handles, so the freeze-at-pre-drag mechanism — which only
@@ -587,6 +610,119 @@ function ArrowHandle({
   return null
 }
 
+const CORNER_RADIUS_DOT_INSET = 0.2
+const CORNER_RADIUS_POSITION_FACTOR = Math.SQRT2 - 1
+
+function CornerRadiusKnob({
+  descriptor,
+  node,
+  handleIndex,
+  dragControls,
+  rideObject,
+}: {
+  descriptor: CornerRadiusHandle<AnyNode>
+  node: AnyNode
+  handleIndex: number
+  dragControls: HandleDragControls
+  rideObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const [sx, sy] = descriptor.corner
+  const radius = descriptor.currentValue(node)
+  const inset = CORNER_RADIUS_DOT_INSET + CORNER_RADIUS_POSITION_FACTOR * radius
+  const position: [number, number, number] = [
+    sx * (descriptor.width(node) / 2 - inset / Math.SQRT2),
+    sy * (descriptor.height(node) / 2 - inset / Math.SQRT2),
+    0,
+  ]
+
+  const activate = useHandleDrag({
+    kind: 'drag',
+    cursor: 'grabbing',
+    dragControls,
+    handleIndex,
+    node,
+    rideObject,
+    setIsDragging,
+    onStart: ({ initialNode, nodeId, rideObject: dragRideObject, sceneApi: dragSceneApi }) => {
+      dragRideObject.updateMatrixWorld(true)
+      const worldMatrix = dragRideObject.matrixWorld.clone()
+      const inverseWorldMatrix = worldMatrix.clone().invert()
+      const center = new Vector3().setFromMatrixPosition(worldMatrix)
+      const normal = new Vector3().setFromMatrixColumn(worldMatrix, 2).normalize()
+      const plane = new Plane().setFromNormalAndCoplanarPoint(normal, center)
+      const maxRadius = resolveBound(
+        descriptor.max,
+        Number.POSITIVE_INFINITY,
+        initialNode,
+        dragSceneApi,
+      )
+      const preview = descriptor.createPreview?.(initialNode as never)
+
+      return {
+        markDirty: !preview,
+        commit: preview ? (patch) => preview.commit(patch as never) : undefined,
+        onBegin: () => {
+          useInteractionScope.getState().begin({
+            kind: 'handle-drag',
+            nodeId,
+            handle: 'Corner radius',
+          })
+        },
+        onCancel: () => preview?.cancel(),
+        onEnd: () => {
+          useInteractionScope.getState().endIf((scope) => scope.kind === 'handle-drag')
+        },
+        move: ({ event, modifiers, intersectPlane }) => {
+          const hit = new Vector3()
+          if (!intersectPlane(event.clientX, event.clientY, plane, hit)) return null
+          hit.applyMatrix4(inverseWorldMatrix)
+          const diagonalDistance =
+            (descriptor.width(initialNode) / 2 +
+              descriptor.height(initialNode) / 2 -
+              sx * hit.x -
+              sy * hit.y) /
+            Math.SQRT2
+          const next = Math.min(
+            maxRadius,
+            Math.max(
+              0,
+              (diagonalDistance - CORNER_RADIUS_DOT_INSET) / CORNER_RADIUS_POSITION_FACTOR,
+            ),
+          )
+          const patch = descriptor.apply(initialNode as never, next, dragSceneApi, modifiers)
+          preview?.preview(patch as never)
+          return patch as Partial<AnyNode>
+        },
+      }
+    },
+  })
+
+  return (
+    <HandleArrow
+      activeCursor="grabbing"
+      cursor="grab"
+      hover={isHovered || isDragging}
+      hoverScale={1.3}
+      onHoverChange={setIsHovered}
+      onPointerDown={activate}
+      placement={{ position, rotation: [0, 0, 0], baseScale: zoom * 0.42 }}
+      round
+      shape="corner-picker"
+    >
+      {isHovered || isDragging ? (
+        <DimensionLabel
+          position={[0, 0.22, 0]}
+          text={formatDimension(radius, useViewer.getState().unit)}
+        />
+      ) : null}
+    </HandleArrow>
+  )
+}
+
 function pickCursor(descriptor: LinearResizeHandle<AnyNode> | RadialResizeHandle<AnyNode>): Cursor {
   if (descriptor.kind === 'linear-resize' && descriptor.cursor) return descriptor.cursor
   return descriptor.axis === 'y' ? 'ns-resize' : 'ew-resize'
@@ -687,8 +823,16 @@ function LinearArrow({
     }) => {
       dragRideObject.matrixWorld.decompose(_resizePositionW, _resizeQuaternion, _resizeScale)
       _resizeOriginW.set(...position).applyMatrix4(dragRideObject.matrixWorld)
-      axisVector(descriptor.axis, _resizeAxisW).applyQuaternion(_resizeQuaternion).normalize()
-      const localToWorldScale = axisScale(descriptor.axis, _resizeScale)
+      const dragAxis =
+        descriptor.kind === 'linear-resize'
+          ? descriptor.dragAxis?.(initialNode as never, sceneApi)
+          : undefined
+      if (dragAxis) _resizeAxisW.set(...dragAxis).normalize()
+      else axisVector(descriptor.axis, _resizeAxisW)
+      const localToWorldScale = dragAxis
+        ? _resizeAxisW.clone().multiply(_resizeScale).length()
+        : axisScale(descriptor.axis, _resizeScale)
+      _resizeAxisW.applyQuaternion(_resizeQuaternion).normalize()
       if (Math.abs(localToWorldScale) < 1e-6 || _resizeAxisW.lengthSq() === 0) return null
 
       const initialPointer =
@@ -705,7 +849,10 @@ function LinearArrow({
               initialNode,
               nodeId,
               sceneApi,
-              initialModifiers: { altKey: event.nativeEvent.altKey },
+              initialModifiers: {
+                altKey: event.nativeEvent.altKey,
+                shiftKey: event.nativeEvent.shiftKey,
+              },
             })
           : null
       const overrideId = linearBinding?.overrideId ?? nodeId
@@ -1218,11 +1365,9 @@ function ArcArrow({
         return null
       }
       const initialAngle = angleOf(hitWorld)
+      const accumulateAngle = createAngleAccumulator(initialAngle)
 
-      // Advertise the rotate interaction so the contextual HUD can surface the
-      // Shift = free-rotation toggle (the angle-step bypass below). Resize
-      // handles route a measurement label here; rotate gets a sentinel label so
-      // the HUD shows the rotate hint, not a dimension pill.
+      // A distinct label selects rotation snapping instead of resize measurements.
       if (isRotateShape) {
         useInteractionScope
           .getState()
@@ -1240,11 +1385,19 @@ function ArcArrow({
           const hit = new Vector3()
           if (!intersectMovePlane(moveEvent.clientX, moveEvent.clientY, plane, hit)) return null
           const currentAngle = angleOf(hit)
-          let delta = currentAngle - initialAngle
-          while (delta > Math.PI) delta -= 2 * Math.PI
-          while (delta < -Math.PI) delta += 2 * Math.PI
-
-          if (!moveEvent.shiftKey && descriptor.shape === 'rotate') {
+          let delta = isRotateShape
+            ? Math.atan2(
+                Math.sin(currentAngle - initialAngle),
+                Math.cos(currentAngle - initialAngle),
+              )
+            : accumulateAngle(currentAngle)
+
+          if (
+            !descriptor.continuous &&
+            !moveEvent.altKey &&
+            isAngleSnapActive() &&
+            descriptor.shape === 'rotate'
+          ) {
             delta = Math.round(delta / DEFAULT_ANGLE_STEP) * DEFAULT_ANGLE_STEP
           }