@pascal-app/editor 0.4.0 → 0.5.1

package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx

@@ -1,62 +1,57 @@
-import { useScene, type ZoneNode } from '@pascal-app/core'
+import { type AnyNodeId, useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface ZoneTreeNodeProps {
-  node: ZoneNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function ZoneTreeNode({ node, depth, isLast }: ZoneTreeNodeProps) {
+export function ZoneTreeNode({ nodeId, depth, isLast }: ZoneTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const updateNode = useScene((state) => state.updateNode)
-  const isSelected = useViewer((state) => state.selection.zoneId === node.id)
-  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const color = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.color)
+  const polygon = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.polygon ?? [])
+  const isSelected = useViewer((state) => state.selection.zoneId === nodeId)
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
 
-  const handleClick = () => {
-    setSelection({ zoneId: node.id })
-  }
-
-  const handleDoubleClick = () => {
-    focusTreeNode(node.id)
-  }
-
-  const handleMouseEnter = () => {
-    setHoveredId(node.id)
-  }
-
-  const handleMouseLeave = () => {
-    setHoveredId(null)
-  }
+  const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
+  const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
+  const handleMouseEnter = useCallback(() => setHoveredId(nodeId), [nodeId, setHoveredId])
+  const handleMouseLeave = useCallback(() => setHoveredId(null), [setHoveredId])
+  const handleStartEditing = useCallback(() => setIsEditing(true), [])
+  const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
   // Calculate approximate area from polygon
-  const area = calculatePolygonArea(node.polygon).toFixed(1)
+  const area = calculatePolygonArea(polygon).toFixed(1)
   const defaultName = `Zone (${area}m²)`
 
   return (
     <TreeNodeWrapper
-      actions={<TreeNodeActions node={node} />}
+      actions={<TreeNodeActions nodeId={nodeId} />}
       depth={depth}
       expanded={false}
       hasChildren={false}
-      icon={<ColorDot color={node.color} onChange={(color) => updateNode(node.id, { color })} />}
+      icon={<ColorDot color={color} onChange={(c) => updateNode(nodeId, { color: c })} />}
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
+      isVisible={isVisible}
       label={
         <InlineRenameInput
           defaultName={defaultName}
           isEditing={isEditing}
-          node={node}
-          onStartEditing={() => setIsEditing(true)}
-          onStopEditing={() => setIsEditing(false)}
+          nodeId={nodeId}
+          onStartEditing={handleStartEditing}
+          onStopEditing={handleStopEditing}
         />
       }
       onClick={handleClick}

package/src/components/viewer-overlay.tsx

@@ -62,6 +62,7 @@ const wallModeConfig = {
 const getNodeName = (node: AnyNode): string => {
   if ('name' in node && node.name) return node.name
   if (node.type === 'wall') return 'Wall'
+  if (node.type === 'fence') return 'Fence'
   if (node.type === 'item') return (node as { asset: { name: string } }).asset?.name || 'Item'
   if (node.type === 'slab') return 'Slab'
   if (node.type === 'ceiling') return 'Ceiling'

package/src/hooks/use-auto-save.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useScene } from '@pascal-app/core'
-import { type MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'
+import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'
 import { type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
 
 const AUTOSAVE_DEBOUNCE_MS = 1000
@@ -26,9 +26,7 @@ export function useAutoSave({
   onDirty,
   onSaveStatusChange,
   isVersionPreviewMode = false,
-}: UseAutoSaveOptions): { saveStatus: SaveStatus; isLoadingSceneRef: MutableRefObject<boolean> } {
-  const [saveStatus, _setSaveStatus] = useState<SaveStatus>('idle')
-
+}: UseAutoSaveOptions): { isLoadingSceneRef: MutableRefObject<boolean> } {
   const saveTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const isSavingRef = useRef(false)
   const isLoadingSceneRef = useRef(false)
@@ -56,7 +54,6 @@ export function useAutoSave({
   }, [isVersionPreviewMode])
 
   const setSaveStatus = useCallback((status: SaveStatus) => {
-    _setSaveStatus(status)
     onSaveStatusChangeRef.current?.(status)
   }, [])
 
@@ -190,5 +187,5 @@ export function useAutoSave({
     setSaveStatus('saved')
   }, [isVersionPreviewMode, setSaveStatus])
 
-  return { saveStatus, isLoadingSceneRef }
+  return { isLoadingSceneRef }
 }

package/src/hooks/use-contextual-tools.ts

@@ -16,7 +16,15 @@ export function useContextualTools() {
     }
 
     // Default tools when nothing is selected
-    const defaultTools: StructureTool[] = ['wall', 'slab', 'ceiling', 'roof', 'door', 'window']
+    const defaultTools: StructureTool[] = [
+      'wall',
+      'fence',
+      'slab',
+      'ceiling',
+      'roof',
+      'door',
+      'window',
+    ]
 
     if (selection.selectedIds.length === 0) {
       return defaultTools
@@ -29,7 +37,7 @@ export function useContextualTools() {
 
     // If a wall is selected, prioritize wall-hosted elements
     if (selectedTypes.has('wall')) {
-      return ['window', 'door', 'wall'] as StructureTool[]
+      return ['window', 'door', 'wall', 'fence'] as StructureTool[]
     }
 
     // If a slab is selected, prioritize slab editing

package/src/hooks/use-grid-events.ts

@@ -1,4 +1,10 @@
-import { type EventSuffix, emitter, type GridEvent } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type EventSuffix,
+  emitter,
+  type GridEvent,
+  sceneRegistry,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect, useRef } from 'react'
@@ -44,9 +50,15 @@ export function useGridEvents(gridY: number) {
       const point = getIntersection(nativeEvent)
       if (!point) return
 
+      // Convert world-space point to building-local for tools that live inside a building.
+      const buildingId = useViewer.getState().selection.buildingId
+      const buildingMesh = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+      const localPoint = buildingMesh ? buildingMesh.worldToLocal(point.clone()) : point
+
       const eventKey = `grid:${suffix}` as `grid:${EventSuffix}`
       const payload: GridEvent = {
         position: [point.x, point.y, point.z],
+        localPosition: [localPoint.x, localPoint.y, localPoint.z],
         nativeEvent: nativeEvent as any, // Type compatibility with ThreeEvent
       }
 

package/src/hooks/use-keyboard.ts

@@ -84,6 +84,10 @@ export const useKeyboard = ({ isVersionPreviewMode = false } = {}) => {
         useEditor.getState().setPhase('structure')
         useEditor.getState().setStructureLayer('elements')
         useEditor.getState().setMode('build')
+      } else if (e.key === 'd' && !e.metaKey && !e.ctrlKey) {
+        if (isVersionPreviewMode) return
+        e.preventDefault()
+        useEditor.getState().setMode('delete')
       } else if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
         if (isVersionPreviewMode) return
         e.preventDefault()

package/src/store/use-editor.tsx

@@ -4,6 +4,7 @@ import type { AssetInput } from '@pascal-app/core'
 import {
   type BuildingNode,
   type DoorNode,
+  type FenceNode,
   type ItemNode,
   type LevelNode,
   type RoofNode,
@@ -33,6 +34,7 @@ export type Mode = 'select' | 'edit' | 'delete' | 'build'
 // Structure mode tools (building elements)
 export type StructureTool =
   | 'wall'
+  | 'fence'
   | 'room'
   | 'custom-room'
   | 'slab'
@@ -85,20 +87,24 @@ type EditorState = {
     | ItemNode
     | WindowNode
     | DoorNode
+    | FenceNode
     | RoofNode
     | RoofSegmentNode
     | StairNode
     | StairSegmentNode
+    | BuildingNode
     | null
   setMovingNode: (
     node:
       | ItemNode
       | WindowNode
       | DoorNode
+      | FenceNode
       | RoofNode
       | RoofSegmentNode
       | StairNode
       | StairSegmentNode
+      | BuildingNode
       | null,
   ) => void
   selectedReferenceId: string | null
@@ -428,6 +434,7 @@ const useEditor = create<EditorState>()(
         | RoofSegmentNode
         | StairNode
         | StairSegmentNode
+        | BuildingNode
         | null,
       setMovingNode: (node) => set({ movingNode: node }),
       selectedReferenceId: null,