Create roof segments when drawing roofs

Author: phinehas2020

packages/editor/src/components/tools/roof/roof-tool.tsx

@@ -4,19 +4,18 @@ import {
   type GridEvent,
   type LevelNode,
   RoofNode,
+  RoofSegmentNode,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, type Group, type Line, Vector3 } from 'three'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 
 // Default roof dimensions
 const DEFAULT_HEIGHT = 1.5
-const CEILING_HEIGHT = 2.52
 const GRID_OFFSET = 0.02
 
 /**
@@ -27,7 +26,7 @@ const commitRoofPlacement = (
   corner1: [number, number, number],
   corner2: [number, number, number],
 ): RoofNode['id'] => {
-  const { createNode, nodes } = useScene.getState()
+  const { createNodes, nodes } = useScene.getState()
 
   // Calculate center position and dimensions from corners
   const centerX = (corner1[0] + corner2[0]) / 2
@@ -36,23 +35,28 @@ const commitRoofPlacement = (
   const length = Math.abs(corner2[0] - corner1[0])
   const width = Math.abs(corner2[2] - corner1[2])
 
-  // Split width evenly between left and right slopes
-  const slopeWidth = Math.max(width / 2, 0.5)
-
   // Count existing roofs for naming
   const roofCount = Object.values(nodes).filter((n) => n.type === 'roof').length
   const name = `Roof ${roofCount + 1}`
 
   const roof = RoofNode.parse({
     name,
     position: [centerX, 0, centerZ], // Y is always 0
-    length: Math.max(length, 0.5),
-    height: DEFAULT_HEIGHT,
-    leftWidth: slopeWidth,
-    rightWidth: slopeWidth,
   })
 
-  createNode(roof, levelId)
+  const segment = RoofSegmentNode.parse({
+    position: [0, 0, 0],
+    roofType: 'gable',
+    width: Math.max(length, 0.5),
+    depth: Math.max(width, 0.5),
+    wallHeight: 0,
+    roofHeight: DEFAULT_HEIGHT,
+  })
+
+  createNodes([
+    { node: roof, parentId: levelId },
+    { node: segment, parentId: roof.id },
+  ])
   sfxEmitter.emit('sfx:structure-build')
   return roof.id
 }
@@ -68,8 +72,6 @@ export const RoofTool: React.FC = () => {
   const outlineRef = useRef<Line>(null!)
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const setSelection = useViewer((state) => state.setSelection)
-  const setTool = useEditor((state) => state.setTool)
-  const setMode = useEditor((state) => state.setMode)
 
   const corner1Ref = useRef<[number, number, number] | null>(null)
   const previousGridPosRef = useRef<[number, number] | null>(null)
@@ -190,7 +192,7 @@ export const RoofTool: React.FC = () => {
       // Reset state on unmount
       corner1Ref.current = null
     }
-  }, [currentLevelId, setTool, setSelection, setMode])
+  }, [currentLevelId, setSelection])
 
   const { corner1, cursorPosition, levelY } = preview
 

packages/editor/src/components/ui/panels/roof-panel.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import { type AnyNode, type RoofNode, useScene } from '@pascal-app/core'
+import { type AnyNode, type AnyNodeId, type RoofNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback } from 'react'
 import { formatLength } from '../../../lib/measurements'
 import { getRoofDimensions } from '../../../lib/roof-dimensions'
 import { ActionButton } from '../controls/action-button'
-import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
@@ -16,17 +15,50 @@ export function RoofPanel() {
   const unitSystem = useViewer((s) => s.unitSystem)
   const setSelection = useViewer((s) => s.setSelection)
   const nodes = useScene((s) => s.nodes)
-  const updateNode = useScene((s) => s.updateNode)
+  const updateNodes = useScene((s) => s.updateNodes)
 
   const selectedId = selectedIds[0]
   const node = selectedId ? (nodes[selectedId as AnyNode['id']] as RoofNode | undefined) : undefined
 
   const handleUpdate = useCallback(
-    (updates: Partial<RoofNode>) => {
+    (
+      updates: Partial<RoofNode> & {
+        length?: number
+        height?: number
+        leftWidth?: number
+        rightWidth?: number
+      },
+    ) => {
       if (!selectedId) return
-      updateNode(selectedId as AnyNode['id'], updates)
+
+      const roof = nodes[selectedId as AnyNode['id']] as RoofNode | undefined
+      if (!roof) return
+
+      const dimensions = getRoofDimensions(roof, nodes)
+      const nextLeftWidth = updates.leftWidth ?? dimensions.leftWidth
+      const nextRightWidth = updates.rightWidth ?? dimensions.rightWidth
+
+      const batchedUpdates: Array<{ id: AnyNodeId; data: Partial<AnyNode> }> = [
+        {
+          id: selectedId as AnyNodeId,
+          data: updates as Partial<AnyNode>,
+        },
+      ]
+
+      if (dimensions.primarySegment) {
+        batchedUpdates.push({
+          id: dimensions.primarySegment.id as AnyNodeId,
+          data: {
+            width: updates.length ?? dimensions.primarySegment.width,
+            depth: nextLeftWidth + nextRightWidth,
+            roofHeight: updates.height ?? dimensions.primarySegment.roofHeight,
+          } as Partial<AnyNode>,
+        })
+      }
+
+      updateNodes(batchedUpdates)
     },
-    [selectedId, updateNode],
+    [nodes, selectedId, updateNodes],
   )
 
   const handleClose = useCallback(() => {