48d5091bb3
* Remove .env.local guard; add portless dep
Remove the check that blocked a local .env.local in apps/editor's dev script and simplify the dev startup to source the root .env. Add portless@^0.4.2 to the project dependencies in package.json. Lockfile updated accordingly.
* Improve tool cursors, previews, and contextual tools
Revamp editor tool visuals and behaviour: replace mesh cursors with a new CursorSphere Group (adds ground marker, vertical indicator and optional tool icon tooltip), unify preview colors to #818cf8, add ground-level previews and ghost lines for ceiling and roof tools, and update slab/zone/wall visuals to match. Add automatic build-mode switching and contextual highlighting for structure tools via a new useContextualTools hook, and relax action-menu visibility checks so tool rows are shown even when not in build mode. Minor typing/import adjustments and small opacity/placement tweaks across multiple tool components.
* Keep tools active and refine action-menu styles
Stop auto-deactivating tools in RoofTool and ZoneTool by removing setTool(null) (and setMode('select') in roof). Add hasActiveTool checks and small layout padding to FurnishTools and StructureTools, and update button classes to improve visual emphasis: smoother transitions, stronger active rings/scale, and dimming/grayscale of non-active tools when another tool is active. These changes improve UX by keeping the selected tool active and giving clearer visual feedback in the action menu.
* Improve selection behavior and refresh UI styling
SelectionManager: add global enter/leave/double-click handlers to support cross-phase hovering and auto-switching into structure/furnish on double-click; normalize click handling (explicitly coalesce shiftKey). Remove per-strategy enter/leave listeners.
UI panels & controls: unify and modernize styles across many panels (ceiling, door, item, reference, roof, slab, wall, window) and action buttons — rounded-md, neutral borders, subtle shadows, translucent headers and consistent hover/focus states. Update view toggles icons and toggle styling.
NumberInput: integrate @number-flow/react NumberFlow for formatted value display, add visual drag progress indicator and refine input/label interactions and styling.
Sidebar: replace rename-popover with inline-rename-input and update tree nodes to use inline editing. Add slider-demo and tweak slider implementation. Update package.json accordingly.
* Use Barlow font across editor UI
Add the Google Barlow font and expose it as a CSS variable, update theme font variables in globals.css, and apply the new font across the editor UI. Imports: add Barlow in app/layout.tsx and include its variable on <html>, set body to use font-sans. Apply font-barlow or font-mono classes to headings, labels, numeric readouts and buttons across multiple panels and primitives to standardize typography. Also update button base variant to include font-barlow. Remove the PhaseSwitcher component and its import/usage from the action menu.
* Replace button wrapper with div in LevelItem
Replace the outer <button> around the LevelItem content with a <div> to avoid nesting interactive button elements (and the resulting invalid HTML/interaction issues). Preserves the original classes and onClick/onDoubleClick handlers so behavior remains the same and allows the PopoverTrigger/button children to function correctly.
* Refine site panel list styles and spacing
Update the SitePanel and TreeNode UI to use compact, border-bottom list rows instead of rounded, card-like items. Simplified active/hover states to use bg-accent variants and reduced shadow/ring styles for a cleaner look. Adjusted paddings (pl/px/py) and container layouts (many sections switched to flex-col) and increased tree node indent/paddingRight for consistent alignment. These changes unify spacing and visual hierarchy across levels, buildings, zones and tree nodes.
* Add auto-scroll to selected items and refine icon styles
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
417 lines
16 KiB
TypeScript
417 lines
16 KiB
TypeScript
'use client'
|
||
|
||
import { type AnyNode, type AnyNodeId, WindowNode, useScene } from '@pascal-app/core'
|
||
import { useViewer } from '@pascal-app/viewer'
|
||
import { Copy, FlipHorizontal2, Move, Trash2, X } from 'lucide-react'
|
||
import Image from 'next/image'
|
||
import { useCallback } from 'react'
|
||
import { sfxEmitter } from '@/lib/sfx-bus'
|
||
import useEditor from '@/store/use-editor'
|
||
import { NumberInput } from '@/components/ui/primitives/number-input'
|
||
import { Switch } from '@/components/ui/primitives/switch'
|
||
|
||
export function WindowPanel() {
|
||
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)
|
||
|
||
const selectedId = selectedIds[0]
|
||
const node = selectedId
|
||
? (nodes[selectedId as AnyNode['id']] as WindowNode | undefined)
|
||
: undefined
|
||
|
||
const handleUpdate = useCallback(
|
||
(updates: Partial<WindowNode>) => {
|
||
if (!selectedId) return
|
||
updateNode(selectedId as AnyNode['id'], updates)
|
||
useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
|
||
},
|
||
[selectedId, updateNode],
|
||
)
|
||
|
||
const handleClose = useCallback(() => {
|
||
setSelection({ selectedIds: [] })
|
||
}, [setSelection])
|
||
|
||
const handleFlip = useCallback(() => {
|
||
if (!node) return
|
||
handleUpdate({
|
||
side: node.side === 'front' ? 'back' : 'front',
|
||
rotation: [node.rotation[0], node.rotation[1] + Math.PI, node.rotation[2]],
|
||
})
|
||
}, [node, handleUpdate])
|
||
|
||
const handleMove = useCallback(() => {
|
||
if (!node) return
|
||
sfxEmitter.emit('sfx:item-pick')
|
||
setMovingNode(node)
|
||
setSelection({ selectedIds: [] })
|
||
}, [node, setMovingNode, setSelection])
|
||
|
||
const handleDelete = useCallback(() => {
|
||
if (!selectedId || !node) return
|
||
sfxEmitter.emit('sfx:item-delete')
|
||
deleteNode(selectedId as AnyNode['id'])
|
||
if (node.parentId) useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
|
||
setSelection({ selectedIds: [] })
|
||
}, [selectedId, node, deleteNode, setSelection])
|
||
|
||
const handleDuplicate = useCallback(() => {
|
||
if (!node || !node.parentId) return
|
||
sfxEmitter.emit('sfx:item-pick')
|
||
useScene.temporal.getState().pause()
|
||
const duplicate = WindowNode.parse({
|
||
position: [...node.position] as [number, number, number],
|
||
rotation: [...node.rotation] as [number, number, number],
|
||
side: node.side,
|
||
wallId: node.wallId,
|
||
parentId: node.parentId,
|
||
width: node.width,
|
||
height: node.height,
|
||
frameThickness: node.frameThickness,
|
||
frameDepth: node.frameDepth,
|
||
columnRatios: [...node.columnRatios],
|
||
rowRatios: [...node.rowRatios],
|
||
columnDividerThickness: node.columnDividerThickness,
|
||
rowDividerThickness: node.rowDividerThickness,
|
||
sill: node.sill,
|
||
sillDepth: node.sillDepth,
|
||
sillThickness: node.sillThickness,
|
||
metadata: { isNew: true },
|
||
})
|
||
useScene.getState().createNode(duplicate, node.parentId as AnyNodeId)
|
||
setMovingNode(duplicate)
|
||
setSelection({ selectedIds: [] })
|
||
}, [node, setMovingNode, setSelection])
|
||
|
||
if (!node || node.type !== 'window' || selectedIds.length !== 1) return null
|
||
|
||
const numCols = node.columnRatios.length
|
||
const numRows = node.rowRatios.length
|
||
|
||
// Normalized ratios (always sum to 1 for display)
|
||
const colSum = node.columnRatios.reduce((a, b) => a + b, 0)
|
||
const rowSum = node.rowRatios.reduce((a, b) => a + b, 0)
|
||
const normCols = node.columnRatios.map(r => r / colSum)
|
||
const normRows = node.rowRatios.map(r => r / rowSum)
|
||
|
||
const setColumnRatio = (index: number, newVal: number) => {
|
||
const clamped = Math.max(0.05, Math.min(0.95, newVal))
|
||
const neighborIdx = index < numCols - 1 ? index + 1 : index - 1
|
||
const delta = clamped - normCols[index]!
|
||
const neighborVal = Math.max(0.05, normCols[neighborIdx]! - delta)
|
||
const newRatios = normCols.map((v, i) => {
|
||
if (i === index) return clamped
|
||
if (i === neighborIdx) return neighborVal
|
||
return v
|
||
})
|
||
handleUpdate({ columnRatios: newRatios })
|
||
}
|
||
|
||
const setRowRatio = (index: number, newVal: number) => {
|
||
const clamped = Math.max(0.05, Math.min(0.95, newVal))
|
||
const neighborIdx = index < numRows - 1 ? index + 1 : index - 1
|
||
const delta = clamped - normRows[index]!
|
||
const neighborVal = Math.max(0.05, normRows[neighborIdx]! - delta)
|
||
const newRatios = normRows.map((v, i) => {
|
||
if (i === index) return clamped
|
||
if (i === neighborIdx) return neighborVal
|
||
return v
|
||
})
|
||
handleUpdate({ rowRatios: newRatios })
|
||
}
|
||
|
||
return (
|
||
<div className="pointer-events-auto fixed top-20 right-4 z-50 flex w-82 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 border-border/50 p-3 bg-white/50 dark:bg-transparent">
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
<Image src="/icons/window.png" alt="" width={16} height={16} className="shrink-0 object-contain" />
|
||
<h2 className="font-semibold font-barlow text-foreground text-sm truncate">
|
||
{node.name || `Window (${node.width}×${node.height}m)`}
|
||
</h2>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/10 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 space-y-4">
|
||
|
||
{/* Position */}
|
||
<div className="space-y-2">
|
||
<label className="font-medium font-barlow text-muted-foreground text-xs uppercase tracking-wide">
|
||
Position
|
||
</label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<NumberInput
|
||
label="X"
|
||
value={Math.round(node.position[0] * 100) / 100}
|
||
onChange={(v) => handleUpdate({ position: [v, node.position[1], node.position[2]] })}
|
||
precision={2}
|
||
/>
|
||
<NumberInput
|
||
label="Y"
|
||
value={Math.round(node.position[1] * 100) / 100}
|
||
onChange={(v) => handleUpdate({ position: [node.position[0], v, node.position[2]] })}
|
||
precision={2}
|
||
/>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="w-full flex items-center justify-center gap-1.5 rounded-md border border-neutral-200/60 dark:border-border/50 bg-white dark:bg-background shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] px-2 py-1.5 text-xs font-medium font-barlow text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
|
||
onClick={handleFlip}
|
||
>
|
||
<FlipHorizontal2 className="h-3.5 w-3.5" />
|
||
Flip Side
|
||
</button>
|
||
</div>
|
||
|
||
{/* Dimensions */}
|
||
<div className="space-y-2">
|
||
<label className="font-medium font-barlow text-muted-foreground text-xs uppercase tracking-wide">
|
||
Dimensions
|
||
</label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Width"
|
||
value={Math.round(node.width * 100) / 100}
|
||
onChange={(v) => handleUpdate({ width: v })}
|
||
min={0.2}
|
||
precision={2}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Height"
|
||
value={Math.round(node.height * 100) / 100}
|
||
onChange={(v) => handleUpdate({ height: v })}
|
||
min={0.2}
|
||
precision={2}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Frame */}
|
||
<div className="space-y-2">
|
||
<label className="font-medium font-barlow text-muted-foreground text-xs uppercase tracking-wide">
|
||
Frame
|
||
</label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Thickness"
|
||
value={Math.round(node.frameThickness * 1000) / 1000}
|
||
onChange={(v) => handleUpdate({ frameThickness: v })}
|
||
min={0.01}
|
||
precision={3}
|
||
step={0.01}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Depth"
|
||
value={Math.round(node.frameDepth * 1000) / 1000}
|
||
onChange={(v) => handleUpdate({ frameDepth: v })}
|
||
min={0.01}
|
||
precision={3}
|
||
step={0.01}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Grid */}
|
||
<div className="space-y-2">
|
||
<label className="font-medium font-barlow text-muted-foreground text-xs uppercase tracking-wide">
|
||
Grid
|
||
</label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<NumberInput
|
||
label="Columns"
|
||
value={numCols}
|
||
onChange={(v) => {
|
||
const n = Math.max(1, Math.min(8, Math.round(v)))
|
||
handleUpdate({ columnRatios: Array(n).fill(1 / n) })
|
||
}}
|
||
min={1}
|
||
max={8}
|
||
precision={0}
|
||
step={1}
|
||
/>
|
||
<NumberInput
|
||
label="Rows"
|
||
value={numRows}
|
||
onChange={(v) => {
|
||
const n = Math.max(1, Math.min(8, Math.round(v)))
|
||
handleUpdate({ rowRatios: Array(n).fill(1 / n) })
|
||
}}
|
||
min={1}
|
||
max={8}
|
||
precision={0}
|
||
step={1}
|
||
/>
|
||
</div>
|
||
|
||
{/* Column ratios */}
|
||
{numCols > 1 && (
|
||
<div className="space-y-1">
|
||
<span className="text-muted-foreground text-xs">Column widths</span>
|
||
{normCols.map((ratio, i) => (
|
||
<div key={i} className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label={`C${i + 1}`}
|
||
value={Math.round(ratio * 100 * 10) / 10}
|
||
onChange={(v) => setColumnRatio(i, v / 100)}
|
||
min={5}
|
||
max={95}
|
||
precision={1}
|
||
step={1}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">%</span>
|
||
</div>
|
||
))}
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Col divider"
|
||
value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
|
||
onChange={(v) => handleUpdate({ columnDividerThickness: v })}
|
||
min={0.005}
|
||
precision={3}
|
||
step={0.01}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Row ratios */}
|
||
{numRows > 1 && (
|
||
<div className="space-y-1">
|
||
<span className="text-muted-foreground text-xs">Row heights</span>
|
||
{normRows.map((ratio, i) => (
|
||
<div key={i} className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label={`R${i + 1}`}
|
||
value={Math.round(ratio * 100 * 10) / 10}
|
||
onChange={(v) => setRowRatio(i, v / 100)}
|
||
min={5}
|
||
max={95}
|
||
precision={1}
|
||
step={1}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">%</span>
|
||
</div>
|
||
))}
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Row divider"
|
||
value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
|
||
onChange={(v) => handleUpdate({ rowDividerThickness: v })}
|
||
min={0.005}
|
||
precision={3}
|
||
step={0.01}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Sill */}
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<label className="font-medium font-barlow text-muted-foreground text-xs uppercase tracking-wide">
|
||
Sill
|
||
</label>
|
||
<Switch
|
||
checked={node.sill}
|
||
onCheckedChange={(checked) => handleUpdate({ sill: checked })}
|
||
/>
|
||
</div>
|
||
{node.sill && (
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Depth"
|
||
value={Math.round(node.sillDepth * 1000) / 1000}
|
||
onChange={(v) => handleUpdate({ sillDepth: v })}
|
||
min={0.01}
|
||
precision={3}
|
||
step={0.01}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<NumberInput
|
||
label="Thickness"
|
||
value={Math.round(node.sillThickness * 1000) / 1000}
|
||
onChange={(v) => handleUpdate({ sillThickness: v })}
|
||
min={0.005}
|
||
precision={3}
|
||
step={0.01}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-muted-foreground text-xs shrink-0">m</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="border-t border-border/50 p-3 bg-white/50 dark:bg-transparent">
|
||
<div className="flex gap-2">
|
||
<button
|
||
type="button"
|
||
className="flex-1 flex items-center justify-center gap-1.5 rounded-md border border-neutral-200/60 dark:border-border/50 bg-white dark:bg-background shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] px-2 py-1.5 text-xs font-medium font-barlow text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors 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-md border border-neutral-200/60 dark:border-border/50 bg-white dark:bg-background shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] px-2 py-1.5 text-xs font-medium font-barlow text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
|
||
onClick={handleDuplicate}
|
||
>
|
||
<Copy className="h-3.5 w-3.5" />
|
||
<span>Duplicate</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="flex-1 flex items-center justify-center gap-1.5 rounded-md border border-neutral-200/60 dark:border-border/50 bg-white dark:bg-background shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] px-2 py-1.5 text-xs font-medium font-barlow text-foreground hover:bg-black/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
|
||
onClick={handleDelete}
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
<span>Delete</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|