@pascal-app/editor 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -11,8 +11,8 @@
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pascal-app/core": "*",
-    "@pascal-app/viewer": "*",
+    "@pascal-app/core": "^0.5.1",
+    "@pascal-app/viewer": "^0.5.1",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
@@ -50,8 +50,8 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "*",
-    "@pascal-app/viewer": "*",
+    "@pascal-app/core": "^0.5.1",
+    "@pascal-app/viewer": "^0.5.1",
     "@pascal/typescript-config": "*",
     "@types/howler": "^2.2.12",
     "@types/react": "19.2.2",

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

@@ -3,10 +3,13 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  type CeilingNode,
   DoorNode,
+  FenceNode,
   ItemNode,
   RoofNode,
   RoofSegmentNode,
+  type SlabNode,
   StairNode,
   StairSegmentNode,
   sceneRegistry,
@@ -31,18 +34,22 @@ const ALLOWED_TYPES = [
   'stair',
   'stair-segment',
   'wall',
+  'fence',
   'slab',
+  'ceiling',
 ]
-const DELETE_ONLY_TYPES = ['wall', 'slab']
+const DELETE_ONLY_TYPES = ['wall']
+const HOLE_TYPES = ['slab', 'ceiling']
 
 export function FloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const nodes = useScene((s) => s.nodes)
+  const updateNode = useScene((s) => s.updateNode)
   const mode = useEditor((s) => s.mode)
-  const setMode = useEditor((s) => s.setMode)
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setSelection = useViewer((s) => s.setSelection)
+  const setEditingHole = useEditor((s) => s.setEditingHole)
 
   const groupRef = useRef<THREE.Group>(null)
 
@@ -61,8 +68,8 @@ export function FloatingActionMenu() {
       if (!box.isEmpty()) {
         const center = box.getCenter(new THREE.Vector3())
         // Position above the object, with extra offset for walls/slabs to avoid covering measurement labels
-        const isDeleteOnly = node && DELETE_ONLY_TYPES.includes(node.type)
-        const yOffset = isDeleteOnly ? 0.8 : 0.3
+        const isStructural = node && [...DELETE_ONLY_TYPES, ...HOLE_TYPES].includes(node.type)
+        const yOffset = isStructural ? 0.8 : 0.3
         groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
       }
     }
@@ -77,6 +84,7 @@ export function FloatingActionMenu() {
         node.type === 'item' ||
         node.type === 'window' ||
         node.type === 'door' ||
+        node.type === 'fence' ||
         node.type === 'roof' ||
         node.type === 'roof-segment' ||
         node.type === 'stair' ||
@@ -108,11 +116,18 @@ export function FloatingActionMenu() {
           duplicate = WindowNode.parse(duplicateInfo)
         } else if (node.type === 'item') {
           duplicate = ItemNode.parse(duplicateInfo)
+        } else if (node.type === 'fence') {
+          duplicate = FenceNode.parse(duplicateInfo)
+          duplicate.start = [duplicate.start[0] + 1, duplicate.start[1] + 1]
+          duplicate.end = [duplicate.end[0] + 1, duplicate.end[1] + 1]
         } else if (node.type === 'roof') {
           duplicate = RoofNode.parse(duplicateInfo)
         } else if (node.type === 'roof-segment') {
           duplicate = RoofSegmentNode.parse(duplicateInfo)
         } else if (node.type === 'stair') {
+          duplicateInfo.children = []
+          duplicateInfo.metadata = { ...duplicateInfo.metadata }
+          delete duplicateInfo.metadata?.isNew
           duplicate = StairNode.parse(duplicateInfo)
         } else if (node.type === 'stair-segment') {
           duplicate = StairSegmentNode.parse(duplicateInfo)
@@ -125,6 +140,8 @@ export function FloatingActionMenu() {
       if (duplicate) {
         if (duplicate.type === 'door' || duplicate.type === 'window') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+        } else if (duplicate.type === 'fence') {
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (
           duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
@@ -139,7 +156,35 @@ export function FloatingActionMenu() {
               duplicate.position[2] + 1,
             ]
           }
-          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+          if (node.type === 'stair' && duplicate.type === 'stair') {
+            const nodesState = useScene.getState().nodes
+            const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
+              { node: duplicate, parentId: duplicate.parentId as AnyNodeId },
+            ]
+
+            for (const childId of node.children ?? []) {
+              const childNode = nodesState[childId]
+              if (childNode?.type !== 'stair-segment') {
+                continue
+              }
+
+              let childDuplicateInfo = structuredClone(childNode) as any
+              delete childDuplicateInfo.id
+              childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata }
+              delete childDuplicateInfo.metadata?.isNew
+
+              try {
+                const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
+                createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
+              } catch (e) {
+                console.error('Failed to duplicate stair segment', e)
+              }
+            }
+
+            useScene.getState().createNodes(createOps)
+          } else {
+            useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+          }
 
           // Duplicate children for roof nodes
           if (node.type === 'roof' && node.children) {
@@ -161,49 +206,67 @@ export function FloatingActionMenu() {
           }
 
           // Duplicate children for stair nodes
-          if (node.type === 'stair' && node.children) {
-            const nodesState = useScene.getState().nodes
-            for (const childId of node.children) {
-              const childNode = nodesState[childId]
-              if (childNode && childNode.type === 'stair-segment') {
-                let childDuplicateInfo = structuredClone(childNode) as any
-                delete childDuplicateInfo.id
-                childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
-                try {
-                  const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
-                  useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
-                } catch (e) {
-                  console.error('Failed to duplicate stair segment', e)
-                }
-              }
-            }
-          }
         }
         if (
           duplicate.type === 'item' ||
+          duplicate.type === 'fence' ||
           duplicate.type === 'window' ||
           duplicate.type === 'door' ||
           duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
-          duplicate.type === 'stair' ||
           duplicate.type === 'stair-segment'
         ) {
           setMovingNode(duplicate as any)
+        } else if (duplicate.type === 'stair') {
+          setSelection({ selectedIds: [duplicate.id as AnyNodeId] })
+        }
+        if (duplicate.type !== 'stair') {
+          setSelection({ selectedIds: [] })
         }
-        setSelection({ selectedIds: [] })
       }
     },
     [node, setMovingNode, setSelection],
   )
 
+  const handleAddHole = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!(node && selectedId && (node.type === 'slab' || node.type === 'ceiling'))) return
+
+      const polygon = (node as SlabNode | CeilingNode).polygon
+      let cx = 0
+      let cz = 0
+      for (const [x, z] of polygon) {
+        cx += x
+        cz += z
+      }
+      cx /= polygon.length
+      cz /= polygon.length
+
+      const holeSize = 0.5
+      const newHole: Array<[number, number]> = [
+        [cx - holeSize, cz - holeSize],
+        [cx + holeSize, cz - holeSize],
+        [cx + holeSize, cz + holeSize],
+        [cx - holeSize, cz + holeSize],
+      ]
+      const currentHoles = (node as SlabNode | CeilingNode).holes || []
+      updateNode(selectedId as AnyNodeId, { holes: [...currentHoles, newHole] })
+      setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
+      // Re-assert selection so the node stays selected
+      setSelection({ selectedIds: [selectedId] })
+    },
+    [node, selectedId, updateNode, setEditingHole, setSelection],
+  )
+
   const handleDelete = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      // Activate delete mode (sledgehammer tool) instead of deleting directly
+      if (!selectedId) return
       setSelection({ selectedIds: [] })
-      setMode('delete')
+      useScene.getState().deleteNode(selectedId as AnyNodeId)
     },
-    [setSelection, setMode],
+    [selectedId, setSelection],
   )
 
   if (!(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete')) return null
@@ -219,9 +282,18 @@ export function FloatingActionMenu() {
         zIndexRange={[100, 0]}
       >
         <NodeActionMenu
+          onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
           onDelete={handleDelete}
-          onDuplicate={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleDuplicate : undefined}
-          onMove={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleMove : undefined}
+          onDuplicate={
+            node && !DELETE_ONLY_TYPES.includes(node.type) && !HOLE_TYPES.includes(node.type)
+              ? handleDuplicate
+              : undefined
+          }
+          onMove={
+            node && !DELETE_ONLY_TYPES.includes(node.type) && !HOLE_TYPES.includes(node.type)
+              ? handleMove
+              : undefined
+          }
           onPointerDown={(e) => e.stopPropagation()}
           onPointerUp={(e) => e.stopPropagation()}
         />

package/src/components/editor/floating-building-action-menu.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { type BuildingNode, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { useCallback, useRef } from 'react'
+import * as THREE from 'three'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+import { NodeActionMenu } from './node-action-menu'
+
+export function FloatingBuildingActionMenu() {
+  const buildingId = useViewer((s) => s.selection.buildingId)
+  const levelId = useViewer((s) => s.selection.levelId)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodes = useScene((s) => s.nodes)
+
+  const groupRef = useRef<THREE.Group>(null)
+
+  useFrame(() => {
+    if (!(buildingId && !levelId && groupRef.current)) return
+
+    const obj = sceneRegistry.nodes.get(buildingId)
+    if (obj) {
+      const box = new THREE.Box3().setFromObject(obj)
+      if (!box.isEmpty()) {
+        const center = box.getCenter(new THREE.Vector3())
+        groupRef.current.position.set(center.x, 1.5, center.z)
+      }
+    }
+  })
+
+  const handleMove = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!buildingId) return
+      const node = nodes[buildingId]
+      if (!node || node.type !== 'building') return
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(node as BuildingNode)
+      setSelection({ buildingId: null })
+    },
+    [buildingId, nodes, setMovingNode, setSelection],
+  )
+
+  // Only show when a building is selected without a level
+  if (!buildingId || levelId) return null
+
+  return (
+    <group ref={groupRef}>
+      <Html
+        center
+        style={{
+          pointerEvents: 'auto',
+          touchAction: 'none',
+        }}
+        zIndexRange={[100, 0]}
+      >
+        <NodeActionMenu
+          onMove={handleMove}
+          onPointerDown={(e) => e.stopPropagation()}
+          onPointerUp={(e) => e.stopPropagation()}
+        />
+      </Html>
+    </group>
+  )
+}

package/src/components/editor/floorplan-panel.tsx

@@ -4593,6 +4593,12 @@ export function FloorplanPanel() {
     levelNode?.type === 'level' && levelNode.parentId
       ? (levelNode.parentId as BuildingNode['id'])
       : (buildingId as BuildingNode['id'] | null)
+  const buildingRotationY = useScene((state) => {
+    if (!currentBuildingId) return 0
+    const node = state.nodes[currentBuildingId]
+    return node?.type === 'building' ? (node.rotation[1] ?? 0) : 0
+  })
+  const buildingRotationDeg = (buildingRotationY * 180) / Math.PI
   const site = useScene((state) => {
     for (const rootNodeId of state.rootNodeIds) {
       const node = state.nodes[rootNodeId]
@@ -5664,7 +5670,7 @@ export function FloorplanPanel() {
   }, [fittedViewport, levelId])
 
   useEffect(() => {
-    if (!(phase === 'site' && levelNode?.type === 'level' && levelNode.level > 0)) {
+    if (!(phase === 'site' && levelNode?.type === 'level')) {
       return
     }
 
@@ -5963,9 +5969,14 @@ export function FloorplanPanel() {
         return null
       }
 
+      if (buildingRotationY !== 0) {
+        const [unrotX, unrotY] = rotatePlanVector(svgPoint.x, svgPoint.y, buildingRotationY)
+        return toPlanPointFromSvgPoint({ x: unrotX, y: unrotY })
+      }
+
       return toPlanPointFromSvgPoint(svgPoint)
     },
-    [getSvgPointFromClientPoint],
+    [getSvgPointFromClientPoint, buildingRotationY],
   )
   useEffect(() => {
     siteBoundaryDraftRef.current = siteBoundaryDraft
@@ -6973,6 +6984,7 @@ export function FloorplanPanel() {
       emitter.emit(`grid:${eventType}` as any, {
         nativeEvent: nativeEvent.nativeEvent as any,
         position: [snappedPoint[0], worldY, snappedPoint[1]],
+        localPosition: [snappedPoint[0], worldY, snappedPoint[1]],
       })
 
       return snappedPoint
@@ -8051,6 +8063,7 @@ export function FloorplanPanel() {
       ...(typeof cloned.metadata === 'object' && cloned.metadata !== null ? cloned.metadata : {}),
       isNew: true,
     }
+    cloned.children = []
 
     try {
       const duplicate = ItemNodeSchema.parse(cloned)
@@ -8179,8 +8192,8 @@ export function FloorplanPanel() {
     delete cloned.id
     cloned.metadata = {
       ...(typeof cloned.metadata === 'object' && cloned.metadata !== null ? cloned.metadata : {}),
-      isNew: true,
     }
+    delete (cloned.metadata as Record<string, unknown>).isNew
 
     const nextPosition =
       Array.isArray(cloned.position) && cloned.position.length >= 3
@@ -8195,9 +8208,11 @@ export function FloorplanPanel() {
 
     try {
       const duplicate = StairNodeSchema.parse(cloned)
-      useScene.getState().createNode(duplicate, stair.parentId as AnyNodeId)
-
       const nodesState = useScene.getState().nodes
+      const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
+        { node: duplicate, parentId: stair.parentId as AnyNodeId },
+      ]
+
       for (const childId of stair.children ?? []) {
         const childNode = nodesState[childId]
         if (childNode?.type !== 'stair-segment') {
@@ -8210,19 +8225,20 @@ export function FloorplanPanel() {
           ...(typeof childClone.metadata === 'object' && childClone.metadata !== null
             ? childClone.metadata
             : {}),
-          isNew: true,
         }
+        delete (childClone.metadata as Record<string, unknown>).isNew
 
         const childDuplicate = StairSegmentNodeSchema.parse(childClone)
-        useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
+        createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
       }
 
-      setMovingNode(duplicate)
-      setSelection({ selectedIds: [] })
+      useScene.getState().createNodes(createOps)
+
+      setSelection({ selectedIds: [duplicate.id as AnyNodeId] })
     } catch (error) {
       console.error('Failed to duplicate stair', error)
     }
-  }, [selectedStairEntry, setMovingNode, setSelection])
+  }, [selectedStairEntry, setSelection])
   const handleSelectedStairDuplicate = useCallback(
     (event: ReactMouseEvent<HTMLButtonElement>) => {
       event.stopPropagation()
@@ -9296,9 +9312,10 @@ export function FloorplanPanel() {
               y={viewBox.minY}
             />
 
-            <FloorplanGridLayer
-              majorGridPath={majorGridPath}
-              minorGridPath={minorGridPath}
+            <g transform={buildingRotationDeg !== 0 ? `rotate(${buildingRotationDeg})` : undefined}>
+              <FloorplanGridLayer
+                majorGridPath={majorGridPath}
+                minorGridPath={minorGridPath}
               palette={palette}
               showGrid={showGrid}
             />
@@ -9601,6 +9618,7 @@ export function FloorplanPanel() {
                 vectorEffect="non-scaling-stroke"
               />
             )}
+            </g>
           </svg>
         )}
       </div>