morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #90 from pascalorg/feat/fix-tools

Browse Source 
Feat/fix tools
This commit is contained in:
Wassim SAMAD
2026-02-10 14:43:50 +09:00
committed by GitHub
parent ec51c0c6fc 251f73250b
commit e8b2b5b2d1
18 changed files with 531 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/editor/index.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default function Editor() {
<ActionMenu />
<PanelManager />
<SidebarProvider className="fixed z-10">
<SidebarProvider className="fixed z-20">
<AppSidebar />
</SidebarProvider>
<Viewer selectionManager="custom">
apps/editor/components/editor/selection-manager.tsx
-10
View File
@@ -46,11 +46,6 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
structure: {
types: ["wall", "item", "zone", "slab", "ceiling", "roof"],
handleSelect: (node, isShift) => {
// Single click on item (door/window) → enter move mode
if (!isShift && node.type === 'item') {
useEditor.getState().setMovingNode(node as ItemNode);
return;
}
const { selection, setSelection } = useViewer.getState();
if (node.type === 'zone') {
setSelection({ zoneId: node.id });
@@ -93,11 +88,6 @@ const SELECTION_STRATEGIES: Record<string, SelectionStrategy> = {
furnish: {
types: ["item"],
handleSelect: (node, isShift) => {
// Single click on item → enter move mode
if (!isShift && node.type === 'item') {
useEditor.getState().setMovingNode(node as ItemNode);
return;
}
const { selection, setSelection } = useViewer.getState();
const nextIds = isShift
? selection.selectedIds.includes(node.id)
apps/editor/components/tools/item/use-draft-node.ts
+1
View File
@@ -50,6 +50,7 @@ export function useDraftNode(): DraftNodeHandle {
rotation: rotation ?? [0, 0, 0],
name: asset.name,
asset,
parentId: currentLevelId,
metadata: { isTransient: true },
})
apps/editor/components/tools/item/use-placement-coordinator.tsx
+44 -35
View File
@@ -1,9 +1,12 @@
import type { AssetInput } from '@pascal-app/core'
import {
type AnyNodeId,
type CeilingEvent,
emitter,
type GridEvent,
resolveLevelId,
sceneRegistry,
spatialGridManager,
useScene,
useSpatialQuery,
type WallEvent,
@@ -12,18 +15,17 @@ import {
import { useViewer } from '@pascal-app/viewer'
import { useFrame } from '@react-three/fiber'
import { useEffect, useRef } from 'react'
import { BoxGeometry, Euler, type Mesh, type MeshStandardMaterial, Quaternion, Vector3 } from 'three'
import { spatialGridManager } from '../../../../../packages/core/src/hooks/spatial-grid/spatial-grid-manager'
import { resolveLevelId } from '../../../../../packages/core/src/hooks/spatial-grid/spatial-grid-sync'
import {
ceilingStrategy,
checkCanPlace,
floorStrategy,
wallStrategy,
} from './placement-strategies'
BoxGeometry,
Euler,
type Mesh,
type MeshStandardMaterial,
Quaternion,
Vector3,
} from 'three'
import { ceilingStrategy, checkCanPlace, floorStrategy, wallStrategy } from './placement-strategies'
import type { PlacementState, TransitionResult } from './placement-types'
import type { DraftNodeHandle } from './use-draft-node'
import type { AssetInput } from '@pascal-app/core'
const DEFAULT_DIMENSIONS: [number, number, number] = [1, 1, 1]
@@ -43,6 +45,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
config.initialState ?? { surface: 'floor', wallId: null, ceilingId: null },
)
// Store config callbacks in refs to avoid re-running effect when they change
const configRef = useRef(config)
configRef.current = config
const { canPlaceOnFloor, canPlaceOnWall, canPlaceOnCeiling } = useSpatialQuery()
const { asset, draftNode } = config
@@ -52,7 +58,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
const validators = { canPlaceOnFloor, canPlaceOnWall, canPlaceOnCeiling }
// Reset placement state
placementState.current = config.initialState ?? {
placementState.current = configRef.current.initialState ?? {
surface: 'floor',
wallId: null,
ceilingId: null,
@@ -70,9 +76,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
const revalidate = (): boolean => {
const placeable = checkCanPlace(getContext(), validators)
;(cursorRef.current.material as MeshStandardMaterial).color.set(
placeable ? 'green' : 'red',
)
;(cursorRef.current.material as MeshStandardMaterial).color.set(placeable ? 'green' : 'red')
return placeable
}
@@ -110,7 +114,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
}
// ---- Init draft ----
config.initDraft(gridPosition.current)
configRef.current.initDraft(gridPosition.current)
// Sync cursor to the draft mesh's world position and rotation
if (draftNode.current) {
@@ -136,7 +140,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
if (!result) return
gridPosition.current.set(...result.gridPosition)
cursorRef.current.position.set(...result.cursorPosition)
// Only update X and Z for cursor - useFrame will handle Y (slab elevation)
cursorRef.current.position.x = result.cursorPosition[0]
cursorRef.current.position.z = result.cursorPosition[2]
const draft = draftNode.current
if (draft) draft.position = result.gridPosition
@@ -152,7 +158,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
const currentRotation: [number, number, number] = [0, cursorRef.current.rotation.y, 0]
draftNode.commit(result.nodeUpdate)
if (config.onCommitted()) {
if (configRef.current.onCommitted()) {
draftNode.create(gridPosition.current, asset, currentRotation)
revalidate()
}
@@ -265,7 +271,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
useScene.getState().dirtyNodes.add(result.dirtyNodeId)
}
if (config.onCommitted()) {
if (configRef.current.onCommitted()) {
const nodes = useScene.getState().nodes
const enterResult = wallStrategy.enter(getContext(), event, resolveLevelId, nodes)
if (enterResult) {
@@ -289,7 +295,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
applyTransition(result)
const draft = draftNode.current
if (draft) {
useScene.getState().updateNode(draft.id, { parentId: result.nodeUpdate.parentId as string })
useScene
.getState()
.updateNode(draft.id, { parentId: result.nodeUpdate.parentId as string })
}
if (oldWallId) {
useScene.getState().dirtyNodes.add(oldWallId as AnyNodeId)
@@ -360,7 +368,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
event.stopPropagation()
draftNode.commit(result.nodeUpdate)
if (config.onCommitted()) {
if (configRef.current.onCommitted()) {
const nodes = useScene.getState().nodes
const enterResult = ceilingStrategy.enter(getContext(), event, resolveLevelId, nodes)
if (enterResult) {
@@ -384,7 +392,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
applyTransition(result)
const draft = draftNode.current
if (draft) {
useScene.getState().updateNode(draft.id, { parentId: result.nodeUpdate.parentId as string })
useScene
.getState()
.updateNode(draft.id, { parentId: result.nodeUpdate.parentId as string })
}
if (oldCeilingId) {
useScene.getState().dirtyNodes.add(oldCeilingId as AnyNodeId)
@@ -404,9 +414,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
const ROTATION_STEP = Math.PI / 2
const onKeyDown = (event: KeyboardEvent) => {
// Escape / right-click → cancel
if (event.key === 'Escape' && config.onCancel) {
if (event.key === 'Escape' && configRef.current.onCancel) {
event.preventDefault()
config.onCancel()
configRef.current.onCancel()
return
}
@@ -434,9 +444,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
// ---- Right-click cancel ----
const onContextMenu = (event: MouseEvent) => {
if (config.onCancel) {
if (configRef.current.onCancel) {
event.preventDefault()
config.onCancel()
configRef.current.onCancel()
}
}
window.addEventListener('contextmenu', onContextMenu)
@@ -501,17 +511,16 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
// Adjust Y for slab elevation (floor items on top of slabs)
if (!asset.attachTo) {
const levelId = useViewer.getState().selection.levelId
if (levelId) {
const slabElevation = spatialGridManager.getSlabElevationForItem(
levelId,
[gridPosition.current.x, gridPosition.current.y, gridPosition.current.z],
asset.dimensions ?? DEFAULT_DIMENSIONS,
draftNode.current.rotation,
)
mesh.position.y = slabElevation
cursorRef.current.position.y = slabElevation
}
const nodes = useScene.getState().nodes
const levelId = resolveLevelId(draftNode.current, nodes)
const slabElevation = spatialGridManager.getSlabElevationForItem(
levelId,
[gridPosition.current.x, gridPosition.current.y, gridPosition.current.z],
asset.dimensions ?? DEFAULT_DIMENSIONS,
draftNode.current.rotation,
)
mesh.position.y = slabElevation
cursorRef.current.position.y = slabElevation
}
}
})
apps/editor/components/ui/panels/item-panel.tsx
+203
View File
@@ -0,0 +1,203 @@
'use client'
import { type AnyNode, type ItemNode, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { Move, Trash2, X } from 'lucide-react'
import Image from 'next/image'
import { useCallback } from 'react'
import useEditor from '@/store/use-editor'
import { NumberInput } from '@/components/ui/primitives/number-input'
export function ItemPanel() {
const selectedIds = useViewer((s) => s.selection.selectedIds)
const setSelection = useViewer((s) => s.setSelection)
const nodes = useScene((s) => s.nodes)
const updateNode = useScene((s) => s.updateNode)
const deleteNode = useScene((s) => s.deleteNode)
const setMovingNode = useEditor((s) => s.setMovingNode)
// Get the first selected node if it's an item
const selectedId = selectedIds[0]
const node = selectedId
? (nodes[selectedId as AnyNode['id']] as ItemNode | undefined)
: undefined
const handleUpdate = useCallback(
(updates: Partial<ItemNode>) => {
if (!selectedId || !node) return
updateNode(selectedId as AnyNode['id'], updates)
// Mark parent wall as dirty if item is attached to wall
if (node.asset.attachTo === 'wall' && node.parentId) {
requestAnimationFrame(() => {
useScene.getState().dirtyNodes.add(node.parentId as AnyNode['id'])
})
}
},
[selectedId, node, updateNode],
)
const handleClose = useCallback(() => {
setSelection({ selectedIds: [] })
}, [setSelection])
const handleMove = useCallback(() => {
if (node) {
setMovingNode(node)
// Deselect so the panel closes
setSelection({ selectedIds: [] })
}
}, [node, setMovingNode, setSelection])
const handleDelete = useCallback(() => {
if (!selectedId) return
deleteNode(selectedId as AnyNode['id'])
setSelection({ selectedIds: [] })
}, [selectedId, deleteNode, setSelection])
// Only show if exactly one item is selected
if (!node || node.type !== 'item' || selectedIds.length !== 1) return null
return (
<div className="pointer-events-auto fixed top-20 right-4 z-50 flex w-72 flex-col overflow-hidden rounded-lg border border-border bg-background/95 shadow-xl backdrop-blur-md">
{/* Header */}
<div className="flex items-center justify-between gap-2 border-b p-3">
<div className="flex items-center gap-2 min-w-0">
<Image
src={node.asset.thumbnail || '/icons/furniture.png'}
alt=""
width={16}
height={16}
className="shrink-0 object-contain"
/>
<h2 className="font-semibold text-foreground text-sm truncate">
{node.name || node.asset.name}
</h2>
</div>
<button
type="button"
className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
onClick={handleClose}
>
<X className="h-4 w-4" />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-3">
<div className="space-y-4">
{/* Position */}
<div className="space-y-2">
<label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
Position
</label>
<div className="grid grid-cols-3 gap-2">
<NumberInput
label="X"
value={Math.round(node.position[0] * 100) / 100}
onChange={(value) => {
handleUpdate({ position: [value, node.position[1], node.position[2]] })
}}
precision={2}
/>
<NumberInput
label="Y"
value={Math.round(node.position[1] * 100) / 100}
onChange={(value) => {
handleUpdate({ position: [node.position[0], value, node.position[2]] })
}}
precision={2}
/>
<NumberInput
label="Z"
value={Math.round(node.position[2] * 100) / 100}
onChange={(value) => {
handleUpdate({ position: [node.position[0], node.position[1], value] })
}}
precision={2}
/>
</div>
</div>
{/* Rotation */}
<div className="space-y-2">
<label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
Rotation
</label>
<div className="flex items-center gap-2">
<NumberInput
label="Y"
value={Math.round((node.rotation[1] * 180) / Math.PI)}
onChange={(degrees) => {
const radians = (degrees * Math.PI) / 180
handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
}}
precision={0}
className="flex-1"
/>
<span className="text-muted-foreground text-xs shrink-0">°</span>
</div>
<div className="flex gap-2">
<button
type="button"
className="flex-1 rounded border border-border px-2 py-1.5 text-xs hover:bg-accent cursor-pointer"
onClick={() => {
const currentDegrees = (node.rotation[1] * 180) / Math.PI
const newDegrees = currentDegrees - 90
const radians = (newDegrees * Math.PI) / 180
handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
}}
>
-90°
</button>
<button
type="button"
className="flex-1 rounded border border-border px-2 py-1.5 text-xs hover:bg-accent cursor-pointer"
onClick={() => {
const currentDegrees = (node.rotation[1] * 180) / Math.PI
const newDegrees = currentDegrees + 90
const radians = (newDegrees * Math.PI) / 180
handleUpdate({ rotation: [node.rotation[0], radians, node.rotation[2]] })
}}
>
+90°
</button>
</div>
</div>
{/* Dimensions (read-only) */}
<div className="space-y-2">
<label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
Dimensions
</label>
<div className="rounded border border-border bg-muted/50 px-3 py-2 text-sm">
{node.asset.dimensions[0]}m × {node.asset.dimensions[1]}m × {node.asset.dimensions[2]}m
</div>
</div>
</div>
</div>
{/* Action Buttons */}
<div className="border-t p-3">
<div className="flex gap-2">
<button
type="button"
className="flex-1 flex items-center justify-center gap-1.5 rounded border border-border px-2 py-1.5 text-xs hover:bg-accent cursor-pointer"
onClick={handleMove}
>
<Move className="h-3.5 w-3.5" />
<span>Move</span>
</button>
<button
type="button"
className="flex-1 flex items-center justify-center gap-1.5 rounded border border-border px-2 py-1.5 text-xs hover:bg-accent cursor-pointer"
onClick={handleDelete}
>
<Trash2 className="h-3.5 w-3.5" />
<span>Delete</span>
</button>
</div>
</div>
</div>
)
}
apps/editor/components/ui/panels/panel-manager.tsx
+3
View File
@@ -3,6 +3,7 @@
import { AnyNodeId, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import useEditor from '@/store/use-editor'
import { ItemPanel } from './item-panel'
import { ReferencePanel } from './reference-panel'
import { RoofPanel } from './roof-panel'
import { SlabPanel } from './slab-panel'
@@ -23,6 +24,8 @@ export function PanelManager() {
const node = nodes[selectedNode as AnyNodeId]
if (node) {
switch (node.type) {
case 'item':
return <ItemPanel />
case 'roof':
return <RoofPanel />
case 'slab':
apps/editor/components/ui/panels/reference-panel.tsx
+29 -39
View File
@@ -4,6 +4,7 @@ import { type AnyNode, type GuideNode, type ScanNode, useScene } from '@pascal-a
import { Box, Image, X } from 'lucide-react'
import { useCallback } from 'react'
import useEditor from '@/store/use-editor'
import { NumberInput } from '@/components/ui/primitives/number-input'
type ReferenceNode = ScanNode | GuideNode
@@ -65,23 +66,17 @@ export function ReferencePanel() {
</label>
<div className="grid grid-cols-3 gap-2">
{([0, 1, 2] as const).map((i) => (
<div key={i} className="space-y-1">
<label className="text-muted-foreground text-xs">{['X', 'Y', 'Z'][i]}</label>
<input
className="w-full rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
onChange={(e) => {
const value = Number.parseFloat(e.target.value)
if (!Number.isNaN(value)) {
const pos = [...node.position] as [number, number, number]
pos[i] = value
handleUpdate({ position: pos })
}
}}
step="0.1"
type="number"
value={Math.round(node.position[i] * 100) / 100}
/>
</div>
<NumberInput
key={i}
label={['X', 'Y', 'Z'][i]!}
value={Math.round(node.position[i] * 100) / 100}
onChange={(value) => {
const pos = [...node.position] as [number, number, number]
pos[i] = value
handleUpdate({ position: pos })
}}
precision={2}
/>
))}
</div>
</div>
@@ -92,20 +87,17 @@ export function ReferencePanel() {
Rotation
</label>
<div className="flex items-center gap-1.5">
<input
className="min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
onChange={(e) => {
const degrees = Number.parseFloat(e.target.value)
if (!Number.isNaN(degrees)) {
const radians = (degrees * Math.PI) / 180
handleUpdate({
rotation: [node.rotation[0], radians, node.rotation[2]],
})
}
}}
step="1"
type="number"
<NumberInput
label="Y"
value={Math.round((node.rotation[1] * 180) / Math.PI)}
onChange={(degrees) => {
const radians = (degrees * Math.PI) / 180
handleUpdate({
rotation: [node.rotation[0], radians, node.rotation[2]],
})
}}
precision={0}
className="min-w-0 flex-1"
/>
<span className="text-muted-foreground text-xs shrink-0">&deg;</span>
<button
@@ -136,18 +128,16 @@ export function ReferencePanel() {
<label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
Scale
</label>
<input
className="w-full rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
min="0.01"
onChange={(e) => {
const value = Number.parseFloat(e.target.value)
if (!Number.isNaN(value) && value > 0) {
<NumberInput
label="Scale"
value={Math.round(node.scale * 100) / 100}
onChange={(value) => {
if (value > 0) {
handleUpdate({ scale: value })
}
}}
step="0.1"
type="number"
value={Math.round(node.scale * 100) / 100}
min={0.01}
precision={2}
/>
</div>
apps/editor/components/ui/panels/slab-panel.tsx
+8 -10
View File
@@ -5,6 +5,7 @@ import { useViewer } from '@pascal-app/viewer'
import { X } from 'lucide-react'
import Image from 'next/image'
import { useCallback } from 'react'
import { NumberInput } from '@/components/ui/primitives/number-input'
export function SlabPanel() {
const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -76,17 +77,14 @@ export function SlabPanel() {
Elevation
</label>
<div className="flex items-center gap-2">
<input
className="flex-1 rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
onChange={(e) => {
const value = Number.parseFloat(e.target.value)
if (!Number.isNaN(value)) {
handleUpdate({ elevation: value })
}
}}
step="0.05"
type="number"
<NumberInput
label="Elevation"
value={Math.round(node.elevation * 1000) / 1000}
onChange={(value) => {
handleUpdate({ elevation: value })
}}
precision={3}
className="flex-1"
/>
<span className="text-muted-foreground text-xs shrink-0">m</span>
</div>
apps/editor/components/ui/primitives/number-input.tsx
+164
View File
@@ -0,0 +1,164 @@
'use client'
import { useScene } from '@pascal-app/core'
import { useCallback, useRef, useState } from 'react'
interface NumberInputProps {
label: string
value: number
onChange: (value: number) => void
min?: number
max?: number
precision?: number
className?: string
}
export function NumberInput({
label,
value,
onChange,
min,
max,
precision = 2,
className = '',
}: NumberInputProps) {
const [isEditing, setIsEditing] = useState(false)
const [isDragging, setIsDragging] = useState(false)
const [inputValue, setInputValue] = useState(value.toFixed(precision))
const startXRef = useRef(0)
const startValueRef = useRef(0)
const labelRef = useRef<HTMLLabelElement>(null)
const clamp = useCallback(
(val: number) => {
if (min !== undefined && val < min) return min
if (max !== undefined && val > max) return max
return val
},
[min, max],
)
const handleLabelMouseDown = useCallback(
(e: React.MouseEvent) => {
if (isEditing) return
e.preventDefault()
setIsDragging(true)
startXRef.current = e.clientX
startValueRef.current = value
// Pause history tracking during drag
useScene.temporal.getState().pause()
let finalValue = value
const handleMouseMove = (moveEvent: MouseEvent) => {
const deltaX = moveEvent.clientX - startXRef.current
// Determine step size based on modifier keys
let step = 0.1 // Default
if (moveEvent.shiftKey) {
step = 1.0 // Coarse
} else if (moveEvent.altKey) {
step = 0.01 // Fine
}
const deltaValue = deltaX * step
const newValue = clamp(startValueRef.current + deltaValue)
const newFinalValue = Number.parseFloat(newValue.toFixed(precision))
// Only call onChange if value actually changed (avoid extra processing on tiny moves)
if (newFinalValue !== finalValue) {
finalValue = newFinalValue
onChange(finalValue)
}
}
const handleMouseUp = () => {
setIsDragging(false)
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
// Reset to initial value while still paused (no history entry)
// Then resume and apply final value (creates single history entry)
if (finalValue !== startValueRef.current) {
onChange(startValueRef.current)
useScene.temporal.getState().resume()
onChange(finalValue)
} else {
useScene.temporal.getState().resume()
}
}
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
},
[isEditing, value, onChange, clamp, precision],
)
const handleValueClick = useCallback(() => {
setIsEditing(true)
setInputValue(value.toFixed(precision))
}, [value, precision])
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value)
}, [])
const handleInputBlur = useCallback(() => {
const numValue = Number.parseFloat(inputValue)
if (!Number.isNaN(numValue)) {
onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
}
setIsEditing(false)
}, [inputValue, onChange, clamp, precision])
const handleInputKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
const numValue = Number.parseFloat(inputValue)
if (!Number.isNaN(numValue)) {
onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
}
setIsEditing(false)
} else if (e.key === 'Escape') {
setInputValue(value.toFixed(precision))
setIsEditing(false)
}
},
[inputValue, onChange, value, clamp, precision],
)
return (
<div className={`${className}`}>
<div className="flex items-center rounded border border-input bg-muted/30 overflow-hidden">
<label
ref={labelRef}
className={`px-2 py-1 text-muted-foreground text-xs select-none ${
isDragging ? 'cursor-ew-resize' : 'hover:cursor-ew-resize hover:text-foreground'
} transition-colors`}
onMouseDown={handleLabelMouseDown}
>
{label}
</label>
{isEditing ? (
<input
autoFocus
className="flex-1 bg-transparent px-2 py-1 text-foreground text-sm outline-none text-right"
onBlur={handleInputBlur}
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
type="text"
value={inputValue}
/>
) : (
<div
className="flex-1 px-2 py-1 text-foreground text-sm cursor-text hover:bg-muted/50 transition-colors text-right"
onClick={handleValueClick}
>
{value.toFixed(precision)}
</div>
)}
</div>
</div>
)
}
apps/editor/components/ui/sidebar/panels/site-panel/index.tsx
+10
View File
@@ -345,6 +345,7 @@ function LevelsSection() {
const nodes = useScene((state) => state.nodes);
const createNode = useScene((state) => state.createNode);
const updateNode = useScene((state) => state.updateNode);
const deleteNode = useScene((state) => state.deleteNode);
const selectedBuildingId = useViewer((state) => state.selection.buildingId);
const selectedLevelId = useViewer((state) => state.selection.levelId);
const setSelection = useViewer((state) => state.setSelection);
@@ -493,6 +494,15 @@ function LevelsSection() {
>
References
</button>
{level.level !== 0 && (
<button
className="flex items-center gap-2 w-full px-3 py-1.5 rounded text-sm hover:bg-accent hover:text-red-600 cursor-pointer"
onClick={() => deleteNode(level.id)}
>
<Trash2 className="w-3.5 h-3.5" />
Delete
</button>
)}
</PopoverContent>
</Popover>
</div>
bun.lock
+3 -3
View File
@@ -1,6 +1,5 @@
{
"lockfileVersion": 1,
"configVersion": 0,
"workspaces": {
"": {
"name": "editor",
@@ -63,13 +62,14 @@
},
"packages/core": {
"name": "@pascal-app/core",
"version": "0.1.10",
"version": "0.1.11",
"dependencies": {
"dedent": "^1.7.1",
"idb-keyval": "^6.2.2",
"mitt": "^3.0.1",
"nanoid": "^5.1.6",
"three-bvh-csg": "^0.0.17",
"three-mesh-bvh": "^0.9.8",
"zod": "^4.3.5",
"zundo": "^2.3.0",
"zustand": "^5",
@@ -127,7 +127,7 @@
},
"packages/viewer": {
"name": "@pascal-app/viewer",
"version": "0.1.10",
"version": "0.1.11",
"dependencies": {
"zustand": "^5",
},
packages/core/package.json
+1
View File
@@ -33,6 +33,7 @@
"mitt": "^3.0.1",
"nanoid": "^5.1.6",
"three-bvh-csg": "^0.0.17",
"three-mesh-bvh": "^0.9.8",
"zod": "^4.3.5",
"zundo": "^2.3.0",
"zustand": "^5"
packages/core/src/index.ts
+1 -1
View File
@@ -27,7 +27,7 @@ export {
resolveLevelId,
} from './hooks/spatial-grid/spatial-grid-sync'
export { useSpatialQuery } from './hooks/spatial-grid/use-spatial-query'
export { pointInPolygon } from './hooks/spatial-grid/spatial-grid-manager'
export { pointInPolygon, spatialGridManager } from './hooks/spatial-grid/spatial-grid-manager'
// Schema
export * from './schema'
export { default as useScene } from './store/use-scene'
packages/core/src/store/use-scene.ts
-2
View File
@@ -215,13 +215,11 @@ useScene.temporal.subscribe((state) => {
const currentPastLength = state.pastStates.length
const currentFutureLength = state.futureStates.length
// Undo: futureStates increases (state moved from past to future)
// Redo: pastStates increases while futureStates decreases (state moved from future to past)
const didUndo = currentFutureLength > prevFutureLength
const didRedo = currentPastLength > prevPastLength && currentFutureLength < prevFutureLength
if (didUndo || didRedo) {
// Use RAF to ensure all middleware and store updates are complete
requestAnimationFrame(() => {
packages/core/src/systems/wall/wall-system.tsx
+12 -1
View File
@@ -1,5 +1,6 @@
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { computeBoundsTree } from 'three-mesh-bvh'
import { Brush, Evaluator, SUBTRACTION } from 'three-bvh-csg'
import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
import { spatialGridManager } from '../../hooks/spatial-grid/spatial-grid-manager'
@@ -21,6 +22,7 @@ const csgEvaluator = new Evaluator()
// WALL SYSTEM
// ============================================================================
let useFrameNb = 0;
export const WallSystem = () => {
const dirtyNodes = useScene((state) => state.dirtyNodes)
const clearDirty = useScene((state) => state.clearDirty)
@@ -33,7 +35,7 @@ export const WallSystem = () => {
// Collect dirty walls and their levels
const dirtyWallsByLevel = new Map<string, Set<string>>()
useFrameNb += 1;
dirtyNodes.forEach((id) => {
const node = nodes[id]
if (!node || node.type !== 'wall') return
@@ -106,6 +108,7 @@ function updateWallGeometry(wallId: string, miterData: WallMiterData) {
const node = nodes[wallId as WallNode['id']]
if (!node || node.type !== 'wall') return
const mesh = sceneRegistry.nodes.get(wallId) as THREE.Mesh
if (!mesh) return
@@ -258,6 +261,10 @@ export function generateExtrudedWall(
}
// Create wall brush from geometry
// Pre-compute BVH with new API to avoid deprecation warning
geometry.computeBoundsTree = computeBoundsTree
geometry.computeBoundsTree({ maxLeafSize: 10 })
const wallBrush = new Brush(geometry)
wallBrush.updateMatrixWorld()
@@ -348,6 +355,10 @@ function collectCutoutBrushes(
0, // Center on Z axis (wall thickness direction)
)
// Pre-compute BVH with new API to avoid deprecation warning
boxGeo.computeBoundsTree = computeBoundsTree
boxGeo.computeBoundsTree({ maxLeafSize: 10 })
const brush = new Brush(boxGeo)
brushes.push(brush)
}
packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx
+25 -6
View File
@@ -1,22 +1,41 @@
import { type CeilingNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { faceDirection, float, mix } from 'three/tsl'
import { DoubleSide, type Mesh, MeshStandardNodeMaterial } from 'three/webgpu'
import { faceDirection, float, mix, positionWorld, smoothstep } from 'three/tsl'
import { DoubleSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { NodeRenderer } from '../node-renderer'
// TSL material that renders differently based on face direction:
// - Back face (looking up at ceiling from below): solid
// - Front face (looking down at ceiling from above): 30% opacity
const ceilingMaterial = new MeshStandardNodeMaterial({
color: 0xffffff,
const ceilingMaterial = new MeshBasicNodeMaterial({
color: 0x999999,
side: DoubleSide,
transparent: true,
depthWrite: false,
})
// Create grid pattern based on local position
const gridScale = 5 // Grid cells per meter (1 = 1m grid)
const gridX = positionWorld.x.mul(gridScale).fract()
const gridY = positionWorld.z.mul(gridScale).fract()
// Create grid lines - they are at 0 and 1
const lineWidth = 0.05 // Width of grid lines (0-1 range within cell)
// Create visible lines at edges (near 0 and near 1)
const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
// Combine: if either X or Y is a line, show the line
const gridPattern = lineX.max(lineY)
// Grid lines at 0.8 opacity, spaces at 0.1 opacity
const gridOpacity = mix(float(0.1), float(0.8), gridPattern)
// faceDirection is 1.0 for front face, -1.0 for back face
// We want: front face (top, looking down) = 0.3 opacity, back face (bottom, looking up) = 1.0 opacity
ceilingMaterial.opacityNode = mix(float(1.0), float(0.3), faceDirection.greaterThan(0.0))
// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
ceilingMaterial.opacityNode = mix(float(1.0), gridOpacity, faceDirection.greaterThan(0.0))
export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
const ref = useRef<Mesh>(null!)
packages/viewer/src/components/renderers/item/item-renderer.tsx
+25 -2
View File
@@ -3,9 +3,10 @@ import { Clone } from '@react-three/drei/core/Clone'
import { useGLTF } from '@react-three/drei/core/Gltf'
import { Suspense, useEffect, useMemo, useRef } from 'react'
import type { Group, Material, Mesh } from 'three'
import { positionLocal, smoothstep, time } from 'three/tsl'
import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu'
import { resolveCdnUrl } from '../../../lib/asset-url'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { resolveCdnUrl } from '../../../lib/asset-url'
// Shared materials to avoid creating new instances for every mesh
const defaultMaterial = new MeshStandardNodeMaterial({
@@ -39,13 +40,35 @@ export const ItemRenderer = ({ node }: { node: ItemNode }) => {
return (
<group position={node.position} rotation={node.rotation} ref={ref} visible={node.visible}>
<Suspense>
<Suspense fallback={<PreviewModel node={node} />}>
<ModelRenderer node={node} />
</Suspense>
</group>
)
}
const previewMaterial = new MeshStandardNodeMaterial({
color: '#cccccc',
roughness: 1,
metalness: 0,
depthTest: false,
})
const previewOpacity = smoothstep(0.42, 0.55, positionLocal.y.add(time.mul(-0.2)).mul(10).fract())
previewMaterial.opacityNode = previewOpacity
previewMaterial.transparent = true
const PreviewModel = ({ node }: { node: ItemNode }) => {
return (
<mesh position-y={node.asset.dimensions[1] / 2} material={previewMaterial}>
<boxGeometry
args={[node.asset.dimensions[0], node.asset.dimensions[1], node.asset.dimensions[2]]}
/>
</mesh>
)
}
const ModelRenderer = ({ node }: { node: ItemNode }) => {
const { scene, nodes } = useGLTF(resolveCdnUrl(node.asset.src) || '')
packages/viewer/src/components/renderers/site/site-renderer.tsx
+1
View File
@@ -121,6 +121,7 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
position={[edge.midX, 0.5, edge.midZ]}
style={{ pointerEvents: 'none', userSelect: 'none' }}
zIndexRange={[10, 0]}
occlude
>
<div className="whitespace-nowrap rounded bg-black/75 px-1.5 py-0.5 font-mono text-white text-xs backdrop-blur-sm">
{edge.dist.toFixed(2)}m