@pascal-app/editor 0.4.0

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

@@ -0,0 +1,126 @@
+import { type AnyNodeId, type CeilingNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface CeilingTreeNodeProps {
+  node: CeilingNode
+  depth: number
+  isLast?: boolean
+}
+
+export function CeilingTreeNode({ node, depth, isLast }: CeilingTreeNodeProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = selectedIds.includes(node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  useEffect(() => {
+    if (selectedIds.length === 0) return
+    const nodes = useScene.getState().nodes
+    let isDescendant = false
+    for (const id of selectedIds) {
+      let current = nodes[id as AnyNodeId]
+      while (current?.parentId) {
+        if (current.parentId === node.id) {
+          isDescendant = true
+          break
+        }
+        current = nodes[current.parentId as AnyNodeId]
+      }
+      if (isDescendant) break
+    }
+    if (isDescendant) {
+      setExpanded(true)
+    }
+  }, [selectedIds, node.id])
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+    if (!handled && useEditor.getState().phase === 'furnish') {
+      useEditor.getState().setPhase('structure')
+    }
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredId(null)
+  }
+
+  // Calculate approximate area from polygon
+  const area = calculatePolygonArea(node.polygon).toFixed(1)
+  const defaultName = `Ceiling (${area}m²)`
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={expanded}
+      hasChildren={node.children.length > 0}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/ceiling.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={node.id}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={() => setExpanded(!expanded)}
+    >
+      {node.children.map((childId, index) => (
+        <TreeNode
+          depth={depth + 1}
+          isLast={index === node.children.length - 1}
+          key={childId}
+          nodeId={childId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+}
+
+/**
+ * Calculate the area of a polygon using the shoelace formula
+ */
+function calculatePolygonArea(polygon: Array<[number, number]>): number {
+  if (polygon.length < 3) return 0
+
+  let area = 0
+  const n = polygon.length
+
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n
+    area += polygon[i]?.[0] * polygon[j]?.[1]
+    area -= polygon[j]?.[0] * polygon[i]?.[1]
+  }
+
+  return Math.abs(area) / 2
+}

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

@@ -0,0 +1,64 @@
+'use client'
+
+import type { DoorNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface DoorTreeNodeProps {
+  node: DoorNode
+  depth: number
+  isLast?: boolean
+}
+
+export function DoorTreeNode({ node, depth, isLast }: DoorTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = selectedIds.includes(node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const defaultName = 'Door'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/door.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={node.id}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation()
+        const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+        if (!handled && useEditor.getState().phase === 'furnish') {
+          useEditor.getState().setPhase('structure')
+        }
+      }}
+      onDoubleClick={() => focusTreeNode(node.id)}
+      onMouseEnter={() => setHoveredId(node.id)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+}