@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/ui/sidebar/panels/settings-panel/print-export-button.tsx

@@ -1,3 +1,5 @@
+import { getProjectFileSink } from '@pascal-app/core'
+import { downloadProjectFile } from '../../../../../lib/download-project-file'
 import { AlertTriangle, Printer } from 'lucide-react'
 import { useState } from 'react'
 import { Button } from '../../../../../components/ui/primitives/button'
@@ -23,15 +25,6 @@ type PreparedPrintExport = {
 
 type PrintModelExportFormat = Extract<ModelExportFormat, 'print-3mf' | 'print-stl'>
 
-function downloadArtifact(artifact: ModelExportArtifact) {
-  const url = URL.createObjectURL(artifact.blob)
-  const link = document.createElement('a')
-  link.href = url
-  link.download = artifact.filename
-  link.click()
-  URL.revokeObjectURL(url)
-}
-
 function firstBlockingMessage(report: PrintExportReport | PrintLevelBundleReport) {
   const bundleDiagnostic = report.diagnostics.find((item) => item.severity === 'error')
   if (bundleDiagnostic || !isPrintLevelBundleReport(report)) return bundleDiagnostic?.message
@@ -81,11 +74,12 @@ export function PrintExportButton({ onlyVisible }: { onlyVisible: boolean }) {
   const handleExport = async (format: PrintModelExportFormat) => {
     if (!modelExport) return
 
+    const fileSink = getProjectFileSink()
     setExportingFormat(format)
     setError(null)
     try {
       const prepared = await preparePrintExport(modelExport, onlyVisible, format)
-      downloadArtifact(prepared.artifact)
+      await downloadProjectFile(prepared.artifact.blob, prepared.artifact.filename, fileSink)
     } catch (reason) {
       setError(reason instanceof Error ? reason.message : '3D print export failed.')
     } finally {

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

@@ -1,8 +1,9 @@
-import { type BuildingNode, DEFAULT_LEVEL_HEIGHT, LevelNode, useScene } from '@pascal-app/core'
+import { type BuildingNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Plus } from 'lucide-react'
 import { memo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { addStoreyOnTop } from './../../../../../lib/add-storey'
 import {
   Tooltip,
   TooltipContent,
@@ -23,7 +24,6 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
   isLast,
 }: BuildingTreeNodeProps) {
   const [expanded, setExpanded] = useState(true)
-  const createNode = useScene((state) => state.createNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const name = useScene((s) => s.nodes[nodeId]?.name)
   // Levels and elevators first, units after, so the units read as one group.
@@ -46,15 +46,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
 
   const handleAddLevel = (e: React.MouseEvent) => {
     e.stopPropagation()
-    const nodes = useScene.getState().nodes
-    const levelCount = children.filter((childId) => nodes[childId]?.type === 'level').length
-    const newLevel = LevelNode.parse({
-      level: levelCount,
-      height: DEFAULT_LEVEL_HEIGHT,
-      children: [],
-      parentId: nodeId,
-    })
-    createNode(newLevel, nodeId)
+    addStoreyOnTop(nodeId)
   }
 
   return (

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

@@ -3,8 +3,8 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { startCeilingEditFromTreeSelection } from './../../../../../lib/ceiling-edit-session'
 import { formatAreaLabel } from './../../../../../lib/measurements'
-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'
@@ -63,9 +63,9 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
+      if (handled) return
+      // Selecting a ceiling in the scene graph opens its Edit ceiling session.
+      startCeilingEditFromTreeSelection(nodeId)
     },
     [nodeId, setSelection],
   )

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

@@ -3,7 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { SnapTargetIcon } from '../../../snap-target-badge'
-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'
@@ -30,15 +29,12 @@ export const ChimneyTreeNode = memo(function ChimneyTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -0,0 +1,197 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type BuildingNode,
+  type CollectionId,
+  findLevelAncestorId,
+  type LevelNode,
+  resolveBuildingForLevel,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Layers, Trash2 } from 'lucide-react'
+import { memo, useCallback, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
+import { InlineRenameField } from './inline-rename-input'
+import { TreeNode, TreeNodeWrapper } from './tree-node'
+
+const ACTION_BUTTON_CLASS =
+  'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10'
+
+/**
+ * The level the ids should be shown on, when they all sit on one level other
+ * than the current one. The level tree only lists the current level, but a
+ * collection spans the whole building.
+ */
+function levelSwitchFor(nodeIds: readonly AnyNodeId[], nodes: Record<AnyNodeId, AnyNode>) {
+  const levelIds = new Set(nodeIds.map((id) => findLevelAncestorId(id, nodes)))
+  if (levelIds.size !== 1) return null
+  const [levelId] = levelIds as Set<LevelNode['id'] | null>
+  if (!levelId || levelId === useViewer.getState().selection.levelId) return null
+  const buildingId = resolveBuildingForLevel(levelId, nodes) as BuildingNode['id'] | null
+  return buildingId ? { buildingId, levelId } : { levelId }
+}
+
+/** Members still in the scene; a collection can outlive some of its elements. */
+function useLiveMembers(collectionId: CollectionId) {
+  return useScene(
+    useShallow((s) =>
+      (s.collections[collectionId]?.nodeIds ?? []).filter((id) => s.nodes[id] !== undefined),
+    ),
+  )
+}
+
+/** Collections, listed under the level tree. Absent when the scene has none. */
+export const CollectionsSection = memo(function CollectionsSection() {
+  const collectionIds = useScene(useShallow((s) => Object.keys(s.collections) as CollectionId[]))
+  const [expanded, setExpanded] = useState(true)
+
+  if (collectionIds.length === 0) return null
+
+  return (
+    <div className="subtle-scrollbar max-h-72 shrink-0 overflow-y-auto overflow-x-hidden">
+      <TreeNodeWrapper
+        depth={1}
+        expanded={expanded}
+        hasChildren
+        icon={<Layers className="h-3.5 w-3.5" />}
+        label={
+          <span className="flex items-center gap-1.5">
+            Collections
+            <span className="text-muted-foreground text-xs">{collectionIds.length}</span>
+          </span>
+        }
+        onClick={() => setExpanded((value) => !value)}
+        onToggle={() => setExpanded((value) => !value)}
+      >
+        {collectionIds.map((collectionId, index) => (
+          <CollectionTreeNode
+            collectionId={collectionId}
+            depth={2}
+            isLast={index === collectionIds.length - 1}
+            key={collectionId}
+          />
+        ))}
+      </TreeNodeWrapper>
+    </div>
+  )
+})
+
+interface CollectionTreeNodeProps {
+  collectionId: CollectionId
+  depth: number
+  isLast?: boolean
+}
+
+/** One collection: click selects every member; expand lists them as tree rows. */
+const CollectionTreeNode = memo(function CollectionTreeNode({
+  collectionId,
+  depth,
+  isLast,
+}: CollectionTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const name = useScene((s) => s.collections[collectionId]?.name)
+  const color = useScene((s) => s.collections[collectionId]?.color)
+  const updateCollection = useScene((s) => s.updateCollection)
+  const deleteCollection = useScene((s) => s.deleteCollection)
+  const members = useLiveMembers(collectionId)
+  const setSelection = useViewer((s) => s.setSelection)
+  const isSelected = useViewer((s) => {
+    const { selectedIds } = s.selection
+    return (
+      members.length > 0 &&
+      selectedIds.length === members.length &&
+      members.every((id) => selectedIds.includes(id))
+    )
+  })
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      if (members.length === 0) return
+      const nodes = useScene.getState().nodes
+      setSelection({ ...levelSwitchFor(members, nodes), selectedIds: members })
+    },
+    [members, setSelection],
+  )
+
+  // Members on another level: show that level first, as clicking them in the canvas would.
+  const handleMemberClickCapture = useCallback(
+    (event: React.MouseEvent) => {
+      if (event.metaKey || event.ctrlKey || event.shiftKey) return
+      const target = event.target as HTMLElement
+      if (target.closest('button, input')) return
+      const nodeId = target.closest('[data-treenode-id]')?.getAttribute('data-treenode-id')
+      if (!nodeId) return
+      const levelSwitch = levelSwitchFor([nodeId as AnyNodeId], useScene.getState().nodes)
+      if (levelSwitch) setSelection(levelSwitch)
+    },
+    [setSelection],
+  )
+
+  const handleRename = useCallback(
+    (next: string | undefined) => {
+      if (next) updateCollection(collectionId, { name: next })
+    },
+    [collectionId, updateCollection],
+  )
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        <button
+          className={ACTION_BUTTON_CLASS}
+          onClick={(event) => {
+            event.stopPropagation()
+            deleteCollection(collectionId)
+          }}
+          title="Delete collection"
+          type="button"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+      }
+      depth={depth}
+      expanded={expanded}
+      hasChildren={members.length > 0}
+      icon={
+        <ColorDot
+          color={color ?? '#6366f1'}
+          label="Collection colour"
+          onChange={(next) => updateCollection(collectionId, { color: next })}
+        />
+      }
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-center gap-1.5">
+          <InlineRenameField
+            defaultName="Collection"
+            isEditing={isEditing}
+            name={name}
+            onRename={handleRename}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
+          />
+          <span className="shrink-0 text-muted-foreground text-xs">{members.length}</span>
+        </span>
+      }
+      onClick={handleClick}
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      <div onClickCapture={handleMemberClickCapture}>
+        {members.map((nodeId, index) => (
+          <TreeNode
+            depth={depth + 1}
+            isLast={index === members.length - 1}
+            key={nodeId}
+            nodeId={nodeId}
+          />
+        ))}
+      </div>
+    </TreeNodeWrapper>
+  )
+})

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

@@ -2,7 +2,6 @@ import { type AnyNodeId, type ColumnNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, 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'
@@ -29,15 +28,12 @@ export const ColumnTreeNode = memo(function ColumnTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -5,7 +5,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
-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'
@@ -32,15 +31,12 @@ export const DoorTreeNode = memo(function DoorTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -4,7 +4,6 @@ import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { SnapTargetIcon } from '../../../snap-target-badge'
-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'
@@ -41,15 +40,12 @@ export const DormerTreeNode = memo(function DormerTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -2,7 +2,6 @@ import { type AnyNodeId, type ElevatorNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, 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'
@@ -29,15 +28,12 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         event,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

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

@@ -1,10 +1,9 @@
 import { type AnyNodeId, type FenceNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { memo, useState } from 'react'
-import useEditor from '../../../../../store/use-editor'
+import { memo, useEffect, useState } from 'react'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface FenceTreeNodeProps {
@@ -20,28 +19,33 @@ export const FenceTreeNode = memo(function FenceTreeNode({
 }: FenceTreeNodeProps) {
   const node = useScene((state) => state.nodes[nodeId]) as FenceNode | undefined
   const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const isSelected = selectedIds.includes(nodeId)
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
 
+  const children = node?.children ?? []
+  const hasSelectedChild = children.some((id) => selectedIds.includes(id))
+
+  useEffect(() => {
+    if (hasSelectedChild) setExpanded(true)
+  }, [hasSelectedChild, node?.children])
+
   if (!node) return null
 
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation()
-    const handled = handleTreeSelection(e, nodeId, selectedIds, setSelection)
-    if (!handled && useEditor.getState().phase === 'furnish') {
-      useEditor.getState().setPhase('structure')
-    }
+    handleTreeSelection(e, nodeId, selectedIds, setSelection)
   }
 
   return (
     <TreeNodeWrapper
       actions={<TreeNodeActions nodeId={node.id} />}
       depth={depth}
-      expanded={false}
-      hasChildren={false}
+      expanded={expanded}
+      hasChildren={children.length > 0}
       icon={
         <Image alt="" className="object-contain" height={14} src="/icons/fence.webp" width={14} />
       }
@@ -63,7 +67,16 @@ export const FenceTreeNode = memo(function FenceTreeNode({
       onDoubleClick={() => focusTreeNode(nodeId)}
       onMouseEnter={() => setHoveredId(nodeId)}
       onMouseLeave={() => setHoveredId(null)}
-      onToggle={() => {}}
-    />
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      {children.map((childId, index) => (
+        <TreeNode
+          depth={depth + 1}
+          isLast={index === children.length - 1}
+          key={childId}
+          nodeId={childId as AnyNodeId}
+        />
+      ))}
+    </TreeNodeWrapper>
   )
 })

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

@@ -3,7 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { SnapTargetIcon } from '../../../snap-target-badge'
-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'
@@ -30,15 +29,12 @@ export const GutterTreeNode = memo(function GutterTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )