+ {referenceScaleDraft.start
+ ? 'Click the end of the known distance'
+ : 'Click the start of a known distance'}
+
+ )}
+
+ {pendingReferenceScale && (
+
+ )}
+
{!levelNode || levelNode.type !== 'level' ? (
Switch to a building level to view and edit the floorplan.
@@ -11308,7 +14550,7 @@ export function FloorplanPanel() {
onPointerMove={handleSvgPointerMove}
onPointerUp={endPanning}
ref={svgRef}
- style={{ cursor: EDITOR_CURSOR }}
+ style={{ cursor: referenceScaleDraft ? 'crosshair' : EDITOR_CURSOR }}
viewBox={`${viewBox.minX} ${viewBox.minY} ${viewBox.width} ${viewBox.height}`}
>
@@ -11328,6 +14570,22 @@ export function FloorplanPanel() {
y2={wallSelectionHatchSpacing}
/>
+
+
({
- x: toSvgX(point[0]),
- y: toSvgY(point[1]),
- isPrimary: index === 0,
- }))}
+ draftAnchorPoints={[
+ ...(referenceScaleDraft?.start
+ ? [
+ {
+ x: toSvgX(referenceScaleDraft.start[0]),
+ y: toSvgY(referenceScaleDraft.start[1]),
+ isPrimary: true,
+ },
+ ]
+ : []),
+ ...activePolygonDraftPoints.map((point, index) => ({
+ x: toSvgX(point[0]),
+ y: toSvgY(point[1]),
+ isPrimary: index === 0,
+ })),
+ ]}
draftFill={palette.draftFill}
draftPolygonPoints={draftPolygonPoints}
draftStroke={palette.draftStroke}
@@ -11537,6 +14827,15 @@ export function FloorplanPanel() {
polygonDraftClosingSegment={polygonDraftClosingSegment}
polygonDraftPolygonPoints={polygonDraftPolygonPoints}
polygonDraftPolylinePoints={polygonDraftPolylinePoints}
+ polygonDraftStroke={
+ isSlabBuildActive || isCeilingBuildActive ? palette.wallStroke : undefined
+ }
+ polygonDraftStrokeWidth={
+ isSlabBuildActive || isCeilingBuildActive
+ ? FLOORPLAN_WALL_STROKE_WIDTH
+ : undefined
+ }
+ unitsPerPixel={floorplanUnitsPerPixel}
/>
handleSlabMidpointPointerDown(nodeId as SlabNode['id'], edgeIndex, event)
@@ -11577,9 +14880,79 @@ export function FloorplanPanel() {
handleSlabVertexPointerDown(nodeId as SlabNode['id'], vertexIndex, event)
}
palette={palette}
+ unitsPerPixel={floorplanUnitsPerPixel}
vertexHandles={slabVertexHandles}
/>
+
+ handleSlabHoleMidpointPointerDown(nodeId as SlabNode['id'], edgeIndex, event)
+ }
+ onVertexDoubleClick={(nodeId, vertexIndex, event) =>
+ handleSlabHoleVertexDoubleClick(nodeId as SlabNode['id'], vertexIndex, event)
+ }
+ onVertexPointerDown={(nodeId, vertexIndex, event) =>
+ handleSlabHoleVertexPointerDown(nodeId as SlabNode['id'], vertexIndex, event)
+ }
+ palette={palette}
+ unitsPerPixel={floorplanUnitsPerPixel}
+ vertexHandles={slabHoleVertexHandles}
+ />
+
+
+ handleCeilingMidpointPointerDown(nodeId as CeilingNode['id'], edgeIndex, event)
+ }
+ onVertexDoubleClick={(nodeId, vertexIndex, event) =>
+ handleCeilingVertexDoubleClick(nodeId as CeilingNode['id'], vertexIndex, event)
+ }
+ onVertexPointerDown={(nodeId, vertexIndex, event) =>
+ handleCeilingVertexPointerDown(nodeId as CeilingNode['id'], vertexIndex, event)
+ }
+ palette={palette}
+ unitsPerPixel={floorplanUnitsPerPixel}
+ vertexHandles={ceilingVertexHandles}
+ />
+
+
+ handleCeilingHoleMidpointPointerDown(
+ nodeId as CeilingNode['id'],
+ edgeIndex,
+ event,
+ )
+ }
+ onVertexDoubleClick={(nodeId, vertexIndex, event) =>
+ handleCeilingHoleVertexDoubleClick(
+ nodeId as CeilingNode['id'],
+ vertexIndex,
+ event,
+ )
+ }
+ onVertexPointerDown={(nodeId, vertexIndex, event) =>
+ handleCeilingHoleVertexPointerDown(
+ nodeId as CeilingNode['id'],
+ vertexIndex,
+ event,
+ )
+ }
+ palette={palette}
+ unitsPerPixel={floorplanUnitsPerPixel}
+ vertexHandles={ceilingHoleVertexHandles}
+ />
+
{widthLabel}
-
+
{depthLabel}
-
+
diff --git a/packages/editor/src/components/ui/action-menu/view-toggles.tsx b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
index c40e40245..c0fa2c941 100755
--- a/packages/editor/src/components/ui/action-menu/view-toggles.tsx
+++ b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
@@ -2,15 +2,17 @@
import {
type AnyNodeId,
+ type BuildingNode,
type GuideNode,
type LevelNode,
type ScanNode,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
-import { Check, ChevronDown, Plus, Trash2 } from 'lucide-react'
+import { Check, ChevronDown, Eye, EyeOff, Layers2, Plus, Trash2 } from 'lucide-react'
import { useCallback, useRef, useState } from 'react'
import { useShallow } from 'zustand/react/shallow'
+import { createLocalGuideImage } from '../../../lib/local-guide-image'
import { cn } from '../../../lib/utils'
import useEditor, { type GridSnapStep } from '../../../store/use-editor'
import { useUploadStore } from '../../../store/use-upload'
@@ -59,37 +61,95 @@ function useLevelScans(): ScanNode[] {
)
}
+function useLowerReferenceLevels(): LevelNode[] {
+ const levelId = useViewer((s) => s.selection.levelId)
+ return useScene(
+ useShallow((state) => {
+ if (!levelId) return [] as LevelNode[]
+ const activeLevel = state.nodes[levelId]
+ if (!activeLevel || activeLevel.type !== 'level') return [] as LevelNode[]
+ const buildingId = activeLevel.parentId as BuildingNode['id'] | undefined
+ const building = buildingId ? state.nodes[buildingId] : null
+ if (!building || building.type !== 'building') return [] as LevelNode[]
+
+ return (building.children ?? [])
+ .map((id) => state.nodes[id])
+ .filter(
+ (node): node is LevelNode =>
+ node?.type === 'level' && node.id !== levelId && node.level < activeLevel.level,
+ )
+ .sort((a, b) => b.level - a.level)
+ }),
+ )
+}
+
+function getLevelDisplayName(level: LevelNode) {
+ return level.name || `Level ${level.level}`
+}
+
// ── Shared upload button for dropdowns ──────────────────────────────────────
-function UploadButton() {
+function UploadButton({ onError }: { onError: (message: string | null) => void }) {
const fileInputRef = useRef(null)
const levelId = useViewer((s) => s.selection.levelId)
+ const setSelection = useViewer((s) => s.setSelection)
+ const setShowGuides = useViewer((s) => s.setShowGuides)
+ const createNode = useScene((s) => s.createNode)
+ const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
+ const [isAddingGuide, setIsAddingGuide] = useState(false)
const handleFileChange = useCallback(
- (e: React.ChangeEvent) => {
+ async (e: React.ChangeEvent) => {
const file = e.target.files?.[0]
if (!(file && levelId)) return
e.target.value = ''
- const { uploadHandler } = useUploadStore.getState()
- if (!uploadHandler) return
+ onError(null)
- if (file.size > MAX_FILE_SIZE) return
+ if (file.size > MAX_FILE_SIZE) {
+ onError('File is too large. Maximum size is 200 MB.')
+ return
+ }
const isScan =
file.name.toLowerCase().endsWith('.glb') || file.name.toLowerCase().endsWith('.gltf')
const isImage = file.type.startsWith('image/')
- if (!(isScan || isImage)) return
+ if (!(isScan || isImage)) {
+ onError('Upload a .glb/.gltf scan or an image.')
+ return
+ }
+
+ if (isImage) {
+ setIsAddingGuide(true)
+ try {
+ const guide = await createLocalGuideImage({ createNode, file, levelId })
+ setShowGuides(true)
+ setSelectedReferenceId(guide.id)
+ setSelection({ selectedIds: [], zoneId: null })
+ } catch {
+ onError('Could not add that guide image.')
+ } finally {
+ setIsAddingGuide(false)
+ }
+ return
+ }
- const type = isScan ? 'scan' : 'guide'
+ const { uploadHandler } = useUploadStore.getState()
+ if (!uploadHandler) {
+ onError('Scan upload is unavailable.')
+ return
+ }
const projectId = window.location.pathname.split('/editor/')[1]?.split('/')[0]
- if (!projectId) return
+ if (!projectId) {
+ onError('Open a project before uploading a scan.')
+ return
+ }
useUploadStore.getState().clearUpload(levelId)
- uploadHandler(projectId, levelId, file, type)
+ uploadHandler(projectId, levelId, file, 'scan')
},
- [levelId],
+ [createNode, levelId, onError, setSelectedReferenceId, setSelection, setShowGuides],
)
return (
@@ -97,6 +157,7 @@ function UploadButton() {
+ {uploadError && (
+
+ {uploadError}
+
+ )}
+
{hasGuides ? (
{guides.map((guide, index) => (
+
+ handleUpdate({
+ openingKind: value as WindowNode['openingKind'],
+ ...(value === 'opening'
+ ? {
+ openingShape,
+ openingRadiusMode,
+ openingCornerRadii,
+ cornerRadius,
+ archHeight,
+ openingRevealRadius,
+ }
+ : {}),
+ })
+ }
+ options={[
+ { value: 'window', label: 'Window' },
+ { value: 'opening', label: 'Opening' },
+ ]}
+ value={node.openingKind ?? 'window'}
+ />
+
+
handleUpdate({ width: v })}
+ onChange={(v) => handleUpdate(getDimensionUpdates({ width: v }))}
precision={2}
+ restoreOnCommit={false}
step={0.1}
unit="m"
value={Math.round(node.width * 100) / 100}
@@ -254,157 +448,252 @@ export function WindowPanel() {
handleUpdate({ height: v })}
+ onChange={(v) => handleUpdate(getDimensionUpdates({ height: v }))}
precision={2}
+ restoreOnCommit={false}
step={0.1}
unit="m"
value={Math.round(node.height * 100) / 100}
/>
-
- handleUpdate({ frameThickness: v })}
- precision={3}
- step={0.01}
- unit="m"
- value={Math.round(node.frameThickness * 1000) / 1000}
- />
- handleUpdate({ frameDepth: v })}
- precision={3}
- step={0.01}
- unit="m"
- value={Math.round(node.frameDepth * 1000) / 1000}
- />
-
-
-
- {
- const n = Math.max(1, Math.min(8, Math.round(v)))
- handleUpdate({ columnRatios: Array(n).fill(1 / n) })
- }}
- precision={0}
- step={1}
- value={numCols}
- />
- {
- const n = Math.max(1, Math.min(8, Math.round(v)))
- handleUpdate({ rowRatios: Array(n).fill(1 / n) })
- }}
- precision={0}
- step={1}
- value={numRows}
- />
-
- {numCols > 1 && (
-
- 
-
+ {uploadError && (
+
- - {guide.name || `Guide image ${index + 1}`} -
+
+ {uploadError}
+
+ )}
+
{hasScans ? (
{scans.map((scan, index) => (
+ dragHandleRef?: (element: HTMLButtonElement | null) => void
onSelect: () => void
onDuplicate: (preset?: LevelDuplicatePreset) => void
onRequestDelete: () => void
@@ -121,13 +152,32 @@ function LevelRow({
+
+
@@ -238,6 +360,7 @@ export function DoorPanel() {
min={0.5}
onChange={(v) => handleUpdate({ width: v })}
precision={2}
+ restoreOnCommit={false}
step={0.05}
unit="m"
value={Math.round(node.width * 100) / 100}
@@ -250,12 +373,111 @@ export function DoorPanel() {
handleUpdate({ height: v, position: [node.position[0], v / 2, node.position[2]] })
}
precision={2}
+ restoreOnCommit={false}
step={0.05}
unit="m"
value={Math.round(node.height * 100) / 100}
/>
+ {isOpening && (
+
+ previewDoorUpdate('cornerRadius', v)}
+ onCommit={(v) => commitDoorPreview('cornerRadius', v)}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(cornerRadius * 100) / 100}
+ />
+ ) : (
+ <>
+ {[
+ ['Top Left', 0],
+ ['Top Right', 1],
+ ].map(([label, index]) => (
+ setOpeningTopRadius(index as number, v)}
+ onCommit={(v) => setOpeningTopRadius(index as number, v, true)}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round((openingTopRadii[index as number] ?? 0) * 100) / 100}
+ />
+ ))}
+
+ )}
+ previewDoorUpdate('openingRevealRadius', v)}
+ onCommit={(v) => commitDoorPreview('openingRevealRadius', v)}
+ precision={3}
+ step={0.005}
+ unit="m"
+ value={Math.round(openingRevealRadius * 1000) / 1000}
+ />
+
+ )}
+ {openingShape === 'arch' && (
+ handleUpdate({ archHeight: v })}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(archHeight * 100) / 100}
+ />
+ )}
+
+ )}
+
+ {!isOpening && (
+ <>
+
+ )}
+
(null)
+ const [isReplacing, setIsReplacing] = useState(false)
+ const [replaceError, setReplaceError] = useState(null)
+ const [isAssetMissing, setIsAssetMissing] = useState(false)
const node = useScene((s) =>
selectedReferenceId
@@ -35,17 +61,224 @@ export function ReferencePanel() {
setSelectedReferenceId(null)
}, [setSelectedReferenceId])
+ const handleReplaceFile = useCallback(
+ async (file: File) => {
+ if (!(selectedReferenceId && node?.type === 'guide')) {
+ return
+ }
+
+ if (!file.type.startsWith('image/')) {
+ setReplaceError('Choose a PNG, JPEG, or WebP image.')
+ return
+ }
+
+ setIsReplacing(true)
+ setReplaceError(null)
+
+ try {
+ const assetUrl = await saveAsset(file)
+ updateNode(selectedReferenceId as AnyNode['id'], {
+ name: getGuideImageName(file.name),
+ url: assetUrl,
+ scaleReference: null,
+ } as Partial)
+ setGuideScaleReferenceVisible(selectedReferenceId, true)
+ } catch {
+ setReplaceError('Could not replace that image.')
+ } finally {
+ setIsReplacing(false)
+ }
+ },
+ [node?.type, selectedReferenceId, setGuideScaleReferenceVisible, updateNode],
+ )
+
+ const handleDeleteGuide = useCallback(() => {
+ if (!(selectedReferenceId && node?.type === 'guide')) {
+ return
+ }
+
+ deleteNode(selectedReferenceId as AnyNode['id'])
+ emitter.emit('guide:deleted', { guideId: selectedReferenceId as GuideNode['id'] })
+ clearGuideUi(selectedReferenceId)
+ setSelectedReferenceId(null)
+ }, [clearGuideUi, deleteNode, node?.type, selectedReferenceId, setSelectedReferenceId])
+
+ const handleStartScale = useCallback(() => {
+ if (node?.type !== 'guide') {
+ return
+ }
+
+ emitter.emit('guide:set-reference-scale', { guideId: node.id })
+ }, [node])
+
+ const handleCancelScale = useCallback(() => {
+ emitter.emit('guide:cancel-reference-scale')
+ }, [])
+
+ useEffect(() => {
+ if (node?.type !== 'guide' || !node.url.startsWith('asset://')) {
+ setIsAssetMissing(false)
+ return
+ }
+
+ let cancelled = false
+ loadAssetUrl(node.url).then((resolvedUrl) => {
+ if (!cancelled) {
+ setIsAssetMissing(!resolvedUrl)
+ }
+ })
+
+ return () => {
+ cancelled = true
+ }
+ }, [node])
+
if (!node || (node.type !== 'scan' && node.type !== 'guide')) return null
const isScan = node.type === 'scan'
+ const guideLocked = !isScan && guideUi?.locked === true
+ const scaleReferenceVisible = !isScan && guideUi?.scaleReferenceVisible !== false
+ const scaleStatus = !isScan ? getScaleStatus(node, scaleReferenceVisible) : null
return (
+ {!isScan && (
+ <>
+
+ {
+ const file = event.currentTarget.files?.[0]
+ event.currentTarget.value = ''
+ if (file) {
+ void handleReplaceFile(file)
+ }
+ }}
+ ref={replaceInputRef}
+ type="file"
+ />
+
+
+
+
+
+
+
+ {replaceError && (
+
+
+
+
+
+
+
+ {
+ if (!node.scaleReference) return
+ setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)
+ }}
+ />
+ handleUpdate({ scaleReference: null } as Partial)}
+ />
+
+
+
+
+
+ )
+ }
+ />
+ )
+ }
+ />
+
+
+ )}
+ />
+
+
+
+ )}
+
+
isSameWindowValue(value, next[index]))
+ )
+ }
+
+ return Object.is(current, next)
+}
+
+function getMaxSharedWindowRadius(width: number, height: number) {
+ return Math.max(0, Math.min(width / 2, height / 2))
+}
+
+function normalizeWindowCornerRadii(
+ radii: [number, number, number, number],
+ width: number,
+ height: number,
+): [number, number, number, number] {
+ const next = radii.map((radius) => Math.max(radius, 0)) as [number, number, number, number]
+ const scale = Math.min(
+ 1,
+ Math.max(width, 0) / Math.max(next[0] + next[1], 1e-6),
+ Math.max(width, 0) / Math.max(next[3] + next[2], 1e-6),
+ Math.max(height, 0) / Math.max(next[0] + next[3], 1e-6),
+ Math.max(height, 0) / Math.max(next[1] + next[2], 1e-6),
+ )
+
+ if (scale >= 1) return next
+
+ return next.map((radius) => radius * scale) as [number, number, number, number]
+}
+
+function isSameRadiusTuple(
+ current: [number, number, number, number],
+ next: [number, number, number, number],
+) {
+ return current.every((value, index) => Math.abs(value - next[index]) < 1e-6)
+}
+
export function WindowPanel() {
const selectedId = useViewer((s) => s.selection.selectedIds[0])
const setSelection = useViewer((s) => s.setSelection)
const updateNode = useScene((s) => s.updateNode)
const deleteNode = useScene((s) => s.deleteNode)
const setMovingNode = useEditor((s) => s.setMovingNode)
+ const previewRef = useRef<{
+ id: AnyNodeId
+ key: keyof WindowNode
+ value: unknown
+ } | null>(null)
const adapter = usePresetsAdapter()
@@ -36,10 +87,59 @@ export function WindowPanel() {
const handleUpdate = useCallback(
(updates: Partial) => {
- if (!selectedId) return
+ if (!(selectedId && node)) return
+ const hasChange = Object.entries(updates).some(([key, value]) => {
+ const currentValue = node[key as keyof WindowNode]
+ return !isSameWindowValue(currentValue, value)
+ })
+ if (!hasChange) return
+
updateNode(selectedId as AnyNode['id'], updates)
useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
},
+ [selectedId, node, updateNode],
+ )
+
+ const previewWindowUpdate = useCallback(
+ (key: K, value: WindowNode[K]) => {
+ if (!selectedId) return
+ const liveNode = useScene.getState().nodes[selectedId as AnyNodeId]
+ if (liveNode?.type !== 'window') return
+
+ if (
+ !(previewRef.current && previewRef.current.id === selectedId && previewRef.current.key === key)
+ ) {
+ previewRef.current = {
+ id: selectedId as AnyNodeId,
+ key,
+ value: liveNode[key],
+ }
+ }
+
+ if (isSameWindowValue(liveNode[key], value)) return
+
+ ;(liveNode as WindowNode)[key] = value
+ useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
+ },
+ [selectedId],
+ )
+
+ const commitWindowPreview = useCallback(
+ (key: K, value: WindowNode[K]) => {
+ if (!selectedId) return
+
+ const scene = useScene.getState()
+ const liveNode = scene.nodes[selectedId as AnyNodeId]
+ const preview = previewRef.current
+ if (liveNode?.type === 'window' && preview?.id === selectedId && preview.key === key) {
+ ;(liveNode as WindowNode)[key] = preview.value as WindowNode[K]
+ scene.dirtyNodes.add(selectedId as AnyNodeId)
+ }
+ previewRef.current = null
+
+ updateNode(selectedId as AnyNode['id'], { [key]: value } as Partial)
+ scene.dirtyNodes.add(selectedId as AnyNodeId)
+ },
[selectedId, updateNode],
)
@@ -84,6 +184,13 @@ export function WindowPanel() {
height: node.height,
frameThickness: node.frameThickness,
frameDepth: node.frameDepth,
+ openingKind: node.openingKind,
+ openingShape: node.openingShape,
+ openingRadiusMode: node.openingRadiusMode ?? 'all',
+ openingCornerRadii: [...(node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15])],
+ cornerRadius: node.cornerRadius,
+ archHeight: node.archHeight,
+ openingRevealRadius: node.openingRevealRadius,
columnRatios: [...node.columnRatios],
rowRatios: [...node.rowRatios],
columnDividerThickness: node.columnDividerThickness,
@@ -105,6 +212,13 @@ export function WindowPanel() {
height: node.height,
frameThickness: node.frameThickness,
frameDepth: node.frameDepth,
+ openingKind: node.openingKind,
+ openingShape: node.openingShape,
+ openingRadiusMode: node.openingRadiusMode ?? 'all',
+ openingCornerRadii: node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15],
+ cornerRadius: node.cornerRadius,
+ archHeight: node.archHeight,
+ openingRevealRadius: node.openingRevealRadius,
columnRatios: node.columnRatios,
rowRatios: node.rowRatios,
columnDividerThickness: node.columnDividerThickness,
@@ -151,6 +265,58 @@ export function WindowPanel() {
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 isOpening = node.openingKind === 'opening'
+ const openingShape = node.openingShape ?? 'rectangle'
+ const openingRadiusMode = node.openingRadiusMode ?? 'all'
+ const openingCornerRadii = node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15]
+ const cornerRadius = node.cornerRadius ?? 0.15
+ const archHeight = node.archHeight ?? 0.35
+ const openingRevealRadius = node.openingRevealRadius ?? 0.025
+ const maxRoundedRadius = Math.max(0.01, getMaxSharedWindowRadius(node.width, node.height))
+
+ const getDimensionUpdates = (updates: Partial>) => {
+ const nextWidth = updates.width ?? node.width
+ const nextHeight = updates.height ?? node.height
+ const nextUpdates: Partial = { ...updates }
+
+ if (openingShape === 'rounded') {
+ if (openingRadiusMode === 'individual') {
+ const currentRadii = openingCornerRadii as [number, number, number, number]
+ const nextRadii = normalizeWindowCornerRadii(
+ openingCornerRadii as [number, number, number, number],
+ nextWidth,
+ nextHeight,
+ )
+ if (!isSameRadiusTuple(currentRadii, nextRadii)) {
+ nextUpdates.openingCornerRadii = nextRadii
+ }
+ } else {
+ const nextRadius = Math.min(Math.max(cornerRadius, 0), getMaxSharedWindowRadius(nextWidth, nextHeight))
+ if (Math.abs(nextRadius - cornerRadius) > 1e-6) {
+ nextUpdates.cornerRadius = nextRadius
+ }
+ }
+ }
+
+ if (openingShape === 'arch') {
+ const nextArchHeight = Math.min(Math.max(archHeight, 0.05), Math.max(nextHeight, 0.05))
+ if (Math.abs(nextArchHeight - archHeight) > 1e-6) {
+ nextUpdates.archHeight = nextArchHeight
+ }
+ }
+
+ return nextUpdates
+ }
+
+ const setOpeningCornerRadius = (index: number, value: number, commit = false) => {
+ const next = [...openingCornerRadii] as [number, number, number, number]
+ next[index] = value
+ if (commit) {
+ commitWindowPreview('openingCornerRadii', next)
+ } else {
+ previewWindowUpdate('openingCornerRadii', next)
+ }
+ }
const setColumnRatio = (index: number, newVal: number) => {
const clamped = Math.max(0.05, Math.min(0.95, newVal))
@@ -206,6 +372,31 @@ export function WindowPanel() {
+
- 
-
)
}
@@ -487,6 +780,7 @@ export function SecondaryToggles() {
- - {scan.name || `Scan ${index + 1}`} -
+
+
+
+
+
+ handleUpdate(
+ v === 'opening'
+ ? {
+ openingKind: v,
+ openingShape,
+ openingRadiusMode,
+ openingTopRadii,
+ cornerRadius,
+ archHeight,
+ openingRevealRadius,
+ }
+ : { openingKind: v },
+ )
+ }
+ options={[
+ { label: 'Door', value: 'door' },
+ { label: 'Opening', value: 'opening' },
+ ]}
+ value={node.openingKind}
+ />
+
+
-
+ {!isOpening && (
+
+
+ )}
+
+ handleUpdate({
+ openingShape: v,
+ ...(v === 'rounded'
+ ? { openingRadiusMode, openingTopRadii, cornerRadius, openingRevealRadius }
+ : {}),
+ ...(v === 'arch' ? { archHeight } : {}),
+ })
+ }
+ options={[
+ { label: 'Rect', value: 'rectangle' },
+ { label: 'Rounded', value: 'rounded' },
+ { label: 'Arch', value: 'arch' },
+ ]}
+ value={openingShape}
+ />
+
+ {openingShape === 'rounded' && (
+ <>
+
+
+ handleUpdate({ openingRadiusMode: v as DoorNode['openingRadiusMode'] })
+ }
+ options={[
+ { label: 'All', value: 'all' },
+ { label: 'Individual', value: 'individual' },
+ ]}
+ value={openingRadiusMode}
+ />
+
+ {openingRadiusMode === 'all' ? (
+
+ {replaceError}
+
+ )}
+
+ {isAssetMissing && (
+
+ Overlay image unavailable. Replace the image to restore it.
+
+ )}
+
+
+
+
-
+ {!isOpening && (
+
+
+ )}
- setColumnRatio(i, v / 100)}
- precision={1}
- step={1}
- unit="%"
- value={Math.round(ratio * 100 * 10) / 10}
+ {isOpening && (
+
+
+ handleUpdate({ openingShape: value as WindowNode['openingShape'] })
+ }
+ options={[
+ { value: 'rectangle', label: 'Rect' },
+ { value: 'rounded', label: 'Rounded' },
+ { value: 'arch', label: 'Arch' },
+ ]}
+ value={openingShape}
+ />
+ {openingShape === 'rounded' && (
+
- Col Widths
-
- {normCols.map((ratio, i) => (
-
+
+ handleUpdate({ openingRadiusMode: value as WindowNode['openingRadiusMode'] })
+ }
+ options={[
+ { value: 'all', label: 'All' },
+ { value: 'individual', label: 'Individual' },
+ ]}
+ value={openingRadiusMode}
/>
- ))}
-
- )}
-
- {numRows > 1 && (
-
+ {openingRadiusMode === 'all' ? (
+ previewWindowUpdate('cornerRadius', value)}
+ onCommit={(value) => commitWindowPreview('cornerRadius', value)}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round(cornerRadius * 100) / 100}
+ />
+ ) : (
+ <>
+ {[
+ ['Top Left', 0],
+ ['Top Right', 1],
+ ['Bottom Right', 2],
+ ['Bottom Left', 3],
+ ].map(([label, index]) => (
+ setOpeningCornerRadius(index as number, value)}
+ onCommit={(value) => setOpeningCornerRadius(index as number, value, true)}
+ precision={2}
+ step={0.05}
+ unit="m"
+ value={Math.round((openingCornerRadii[index as number] ?? 0) * 100) / 100}
+ />
+ ))}
+
+ )}
handleUpdate({ columnDividerThickness: v })}
+ label="Reveal Radius"
+ max={0.08}
+ min={0}
+ onChange={(value) => previewWindowUpdate('openingRevealRadius', value)}
+ onCommit={(value) => commitWindowPreview('openingRevealRadius', value)}
precision={3}
- step={0.01}
+ step={0.005}
unit="m"
- value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
+ value={Math.round(openingRevealRadius * 1000) / 1000}
/>
-
-
setRowRatio(i, v / 100)}
- precision={1}
- step={1}
- unit="%"
- value={Math.round(ratio * 100 * 10) / 10}
- />
- ))}
-
- )}
-
+ )}
+
+ )}
-
- handleUpdate({ sill: checked })}
- />
- {node.sill && (
-
+
+
+
+ {
+ const n = Math.max(1, Math.min(8, Math.round(v)))
+ handleUpdate({ columnRatios: Array(n).fill(1 / n) })
+ }}
+ precision={0}
+ step={1}
+ value={numCols}
+ />
+ {
+ const n = Math.max(1, Math.min(8, Math.round(v)))
+ handleUpdate({ rowRatios: Array(n).fill(1 / n) })
+ }}
+ precision={0}
+ step={1}
+ value={numRows}
+ />
+
+ {numCols > 1 && (
+
+
+
+ handleUpdate({ sill: checked })}
+ />
+ {node.sill && (
+
+
+ )}
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
index 24742881a..b616655e2 100755
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
@@ -33,10 +33,13 @@ import {
PopoverTrigger,
} from './../../../../../components/ui/primitives/popover'
import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
+import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
+
import {
buildLevelDuplicateCreateOps,
type LevelDuplicatePreset,
} from './../../../../../lib/level-duplication'
+
import { cn } from './../../../../../lib/utils'
import useEditor from './../../../../../store/use-editor'
import { useUploadStore } from '../../../../../store/use-upload'
@@ -400,7 +403,10 @@ const LevelReferences = memo(function LevelReferences({
onUploadAsset,
onDeleteAsset,
}: LevelReferencesProps) {
+ const createNode = useScene((s) => s.createNode)
const deleteNode = useScene((s) => s.deleteNode)
+ const setSelection = useViewer((s) => s.setSelection)
+ const setShowGuides = useViewer((s) => s.setShowGuides)
const references = useScene(
useShallow((s) =>
Object.values(s.nodes).filter(
@@ -423,19 +429,27 @@ const LevelReferences = memo(function LevelReferences({
const scanInputRef = useRef(null)
- const handleAddAsset = (e: React.ChangeEvent) => {
+ const handleAddAsset = async (e: React.ChangeEvent) => {
const file = e.target.files?.[0]
if (!file) return
e.target.value = ''
- if (!projectId) {
- useUploadStore.getState().startUpload(levelId, 'scan', file.name)
- useUploadStore.getState().setError(levelId, 'No active project. Please open a project first.')
+ // Auto-detect type based on file extension/mime type
+ const isScan =
+ file.name.toLowerCase().endsWith('.glb') || file.name.toLowerCase().endsWith('.gltf')
+ const isImage = file.type.startsWith('image/')
+ const type = isScan ? 'scan' : 'guide'
+
+ if (!(isScan || isImage)) {
+ useUploadStore.getState().startUpload(levelId, type, file.name)
+ useUploadStore
+ .getState()
+ .setError(levelId, 'Invalid file type. Please upload a .glb/.gltf scan or an image.')
return
}
if (file.size > MAX_FILE_SIZE) {
- useUploadStore.getState().startUpload(levelId, 'scan', file.name)
+ useUploadStore.getState().startUpload(levelId, type, file.name)
useUploadStore
.getState()
.setError(
@@ -445,21 +459,29 @@ const LevelReferences = memo(function LevelReferences({
return
}
- // Auto-detect type based on file extension/mime type
- const isScan =
- file.name.toLowerCase().endsWith('.glb') || file.name.toLowerCase().endsWith('.gltf')
- const isImage = file.type.startsWith('image/')
+ if (isImage) {
+ useUploadStore.getState().startUpload(levelId, 'guide', file.name)
+ useUploadStore.getState().setStatus(levelId, 'uploading')
+
+ try {
+ const guide = await createLocalGuideImage({ createNode, file, levelId })
+ setShowGuides(true)
+ setSelectedReferenceId(guide.id)
+ setSelection({ selectedIds: [], zoneId: null })
+ useUploadStore.getState().setResult(levelId, guide.url)
+ window.setTimeout(() => useUploadStore.getState().clearUpload(levelId), 600)
+ } catch {
+ useUploadStore.getState().setError(levelId, 'Could not add that guide image.')
+ }
+ return
+ }
- if (!(isScan || isImage)) {
+ if (!projectId) {
useUploadStore.getState().startUpload(levelId, 'scan', file.name)
- useUploadStore
- .getState()
- .setError(levelId, 'Invalid file type. Please upload a .glb/.gltf scan or an image.')
+ useUploadStore.getState().setError(levelId, 'No active project. Please open a project first.')
return
}
- const type = isScan ? 'scan' : 'guide'
-
clearUpload(levelId)
onUploadAsset?.(projectId, levelId, file, type)
}
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx
index 80c815ecc..cf5848e37 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx
@@ -54,7 +54,7 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
alt=""
className="object-contain"
height={14}
- src="/icons/spawn-point.svg"
+ src="/icons/site.png"
width={14}
/>
}
diff --git a/packages/editor/src/components/ui/viewer-toolbar.tsx b/packages/editor/src/components/ui/viewer-toolbar.tsx
index 53fe873ee..605309066 100644
--- a/packages/editor/src/components/ui/viewer-toolbar.tsx
+++ b/packages/editor/src/components/ui/viewer-toolbar.tsx
@@ -2,7 +2,18 @@
import { Icon as IconifyIcon } from '@iconify/react'
import { useViewer } from '@pascal-app/viewer'
-import { Check, ChevronsLeft, ChevronsRight, Columns2, Eye, Footprints, Moon, Sun } from 'lucide-react'
+import {
+ Check,
+ ChevronsLeft,
+ ChevronsRight,
+ Columns2,
+ Eye,
+ EyeOff,
+ Footprints,
+ Grid2X2,
+ Moon,
+ Sun,
+} from 'lucide-react'
import { useCallback } from 'react'
import { cn } from '../../lib/utils'
import useEditor from '../../store/use-editor'
@@ -271,6 +282,35 @@ function GridSnapToggle() {
)
}
+function GridVisibilityToggle() {
+ const showGrid = useViewer((s) => s.showGrid)
+ const setShowGrid = useViewer((s) => s.setShowGrid)
+
+ return (
+
+
+
+
+ Grid: {showGrid ? 'Visible' : 'Hidden'}
+
+ )
+}
+
// ── Wall mode toggle ────────────────────────────────────────────────────────
const wallModeOrder = ['cutaway', 'up', 'down'] as const
@@ -383,6 +423,7 @@ export function ViewerToolbarRight() {
+ setGuideLocked: (guideId: string, locked: boolean) => void
+ setGuideScaleReferenceVisible: (guideId: string, visible: boolean) => void
+ clearGuideUi: (guideId: string) => void
// Space detection for cutaway mode
spaces: Record
setSpaces: (spaces: Record) => void
@@ -201,6 +214,13 @@ type EditorState = {
setFloorplanSelectionTool: (tool: FloorplanSelectionTool) => void
gridSnapStep: GridSnapStep
setGridSnapStep: (step: GridSnapStep) => void
+ showReferenceFloor: boolean
+ toggleReferenceFloor: () => void
+ setShowReferenceFloor: (show: boolean) => void
+ referenceFloorOffset: number
+ setReferenceFloorOffset: (offset: number) => void
+ referenceFloorOpacity: number
+ setReferenceFloorOpacity: (opacity: number) => void
// First-person walkthrough mode (street view)
isFirstPersonMode: boolean
_viewModeBeforeFirstPerson: ViewMode | null
@@ -230,6 +250,9 @@ type PersistedEditorLayoutState = Pick<
| 'splitOrientation'
| 'floorplanSelectionTool'
| 'gridSnapStep'
+ | 'showReferenceFloor'
+ | 'referenceFloorOffset'
+ | 'referenceFloorOpacity'
>
type PersistedEditorState = PersistedEditorUiState & PersistedEditorLayoutState
@@ -249,6 +272,9 @@ export const DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE: PersistedEditorLayoutState =
splitOrientation: 'horizontal',
floorplanSelectionTool: 'click',
gridSnapStep: 0.5,
+ showReferenceFloor: false,
+ referenceFloorOffset: 1,
+ referenceFloorOpacity: 0.35,
}
const GRID_SNAP_STEPS: GridSnapStep[] = [0.5, 0.25, 0.1, 0.05]
@@ -358,6 +384,16 @@ function normalizePersistedEditorLayoutState(
gridSnapStep: GRID_SNAP_STEPS.includes(state?.gridSnapStep as GridSnapStep)
? (state?.gridSnapStep as GridSnapStep)
: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
+ showReferenceFloor: state?.showReferenceFloor === true,
+ referenceFloorOffset:
+ typeof state?.referenceFloorOffset === 'number' && state.referenceFloorOffset >= 1
+ ? Math.floor(state.referenceFloorOffset)
+ : DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOffset,
+ referenceFloorOpacity:
+ typeof state?.referenceFloorOpacity === 'number' &&
+ Number.isFinite(state.referenceFloorOpacity)
+ ? Math.min(0.8, Math.max(0.1, state.referenceFloorOpacity))
+ : DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOpacity,
}
}
@@ -605,6 +641,36 @@ const useEditor = create()(
setPaintPanelOpen: (open) => set({ isPaintPanelOpen: open }),
selectedReferenceId: null,
setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
+ guideUi: {},
+ setGuideLocked: (guideId, locked) =>
+ set((state) => ({
+ guideUi: {
+ ...state.guideUi,
+ [guideId]: {
+ ...state.guideUi[guideId],
+ locked,
+ },
+ },
+ })),
+ setGuideScaleReferenceVisible: (guideId, visible) =>
+ set((state) => ({
+ guideUi: {
+ ...state.guideUi,
+ [guideId]: {
+ ...state.guideUi[guideId],
+ scaleReferenceVisible: visible,
+ },
+ },
+ })),
+ clearGuideUi: (guideId) =>
+ set((state) => {
+ if (!state.guideUi[guideId]) {
+ return state
+ }
+ const guideUi = { ...state.guideUi }
+ delete guideUi[guideId]
+ return { guideUi }
+ }),
spaces: {},
setSpaces: (spaces) => set({ spaces }),
editingHole: null,
@@ -636,6 +702,16 @@ const useEditor = create()(
setFloorplanSelectionTool: (tool) => set({ floorplanSelectionTool: tool }),
gridSnapStep: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
setGridSnapStep: (step) => set({ gridSnapStep: step }),
+ showReferenceFloor: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.showReferenceFloor,
+ toggleReferenceFloor: () =>
+ set((state) => ({ showReferenceFloor: !state.showReferenceFloor })),
+ setShowReferenceFloor: (show) => set({ showReferenceFloor: show }),
+ referenceFloorOffset: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOffset,
+ setReferenceFloorOffset: (offset) =>
+ set({ referenceFloorOffset: Math.max(1, Math.floor(offset)) }),
+ referenceFloorOpacity: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOpacity,
+ setReferenceFloorOpacity: (opacity) =>
+ set({ referenceFloorOpacity: Math.min(0.8, Math.max(0.1, opacity)) }),
allowUndergroundCamera: false,
setAllowUndergroundCamera: (enabled) => set({ allowUndergroundCamera: enabled }),
isFirstPersonMode: false,
@@ -703,6 +779,9 @@ const useEditor = create()(
splitOrientation: state.splitOrientation,
floorplanSelectionTool: state.floorplanSelectionTool,
gridSnapStep: state.gridSnapStep,
+ showReferenceFloor: state.showReferenceFloor,
+ referenceFloorOffset: state.referenceFloorOffset,
+ referenceFloorOpacity: state.referenceFloorOpacity,
}),
},
),
diff --git a/packages/viewer/package.json b/packages/viewer/package.json
index 1c214282c..77c4ed753 100644
--- a/packages/viewer/package.json
+++ b/packages/viewer/package.json
@@ -30,6 +30,8 @@
},
"dependencies": {
"polygon-clipping": "^0.15.7",
+ "three-bvh-csg": "^0.0.18",
+ "three-mesh-bvh": "^0.9.8",
"zustand": "^5"
},
"devDependencies": {
diff --git a/packages/viewer/src/components/renderers/door/door-renderer.tsx b/packages/viewer/src/components/renderers/door/door-renderer.tsx
index 6c978f3e4..ff389f31b 100644
--- a/packages/viewer/src/components/renderers/door/door-renderer.tsx
+++ b/packages/viewer/src/components/renderers/door/door-renderer.tsx
@@ -1,8 +1,9 @@
import { type DoorNode, useRegistry, useScene } from '@pascal-app/core'
-import { useLayoutEffect, useMemo, useRef } from 'react'
-import type { Mesh } from 'three'
+import { useLayoutEffect, useRef } from 'react'
+import { MeshBasicMaterial, type Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
-import { createMaterial, DEFAULT_DOOR_MATERIAL } from '../../../lib/materials'
+
+const doorHitboxMaterial = new MeshBasicMaterial({ visible: false })
export const DoorRenderer = ({ node }: { node: DoorNode }) => {
const ref = useRef(null!)
@@ -14,16 +15,10 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
const handlers = useNodeEvents(node, 'door')
const isTransient = !!(node.metadata as Record | null)?.isTransient
- const material = useMemo(() => {
- const mat = node.material
- if (!mat) return DEFAULT_DOOR_MATERIAL
- return createMaterial(mat)
- }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture])
-
return (
{
position={node.position}
ref={ref}
rotation={[0, node.rotation[1], 0]}
- visible={showGuides}
+ visible={showGuides && node.visible !== false}
>
{resolvedUrl && (
diff --git a/packages/viewer/src/components/renderers/item/item-renderer.tsx b/packages/viewer/src/components/renderers/item/item-renderer.tsx
index 5bcfbd2da..86b44d23c 100644
--- a/packages/viewer/src/components/renderers/item/item-renderer.tsx
+++ b/packages/viewer/src/components/renderers/item/item-renderer.tsx
@@ -1,8 +1,6 @@
import {
type AnimationEffect,
type AnyNodeId,
- baseMaterial,
- glassMaterial,
type Interactive,
type ItemNode,
type LightEffect,
@@ -21,6 +19,7 @@ import { positionLocal, smoothstep, time } from 'three/tsl'
import { MeshStandardNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { resolveCdnUrl } from '../../../lib/asset-url'
+import { baseMaterial, glassMaterial } from '../../../lib/materials'
import { useItemLightPool } from '../../../store/use-item-light-pool'
import {
requestItemMeshMetadataSync,
diff --git a/packages/viewer/src/components/renderers/spawn/spawn-renderer.tsx b/packages/viewer/src/components/renderers/spawn/spawn-renderer.tsx
index e7dec6a42..62d477191 100644
--- a/packages/viewer/src/components/renderers/spawn/spawn-renderer.tsx
+++ b/packages/viewer/src/components/renderers/spawn/spawn-renderer.tsx
@@ -54,13 +54,13 @@ export const SpawnRenderer = ({ node }: { node: SpawnNode }) => {
-
-
+
-
-
+
diff --git a/packages/viewer/src/components/viewer/index.tsx b/packages/viewer/src/components/viewer/index.tsx
index 1a77e688f..13f478b5c 100644
--- a/packages/viewer/src/components/viewer/index.tsx
+++ b/packages/viewer/src/components/viewer/index.tsx
@@ -1,27 +1,25 @@
'use client'
-import {
- CeilingSystem,
- DoorSystem,
- FenceSystem,
- ItemSystem,
- RoofSystem,
- SlabSystem,
- StairSystem,
- WallSystem,
- WindowSystem,
-} from '@pascal-app/core'
import { Bvh } from '@react-three/drei'
import { Canvas, extend, type ThreeToJSXElements, useFrame, useThree } from '@react-three/fiber'
import { useEffect, useMemo, useRef } from 'react'
import * as THREE from 'three/webgpu'
import useViewer from '../../store/use-viewer'
+import { CeilingSystem } from '../../systems/ceiling/ceiling-system'
+import { DoorSystem } from '../../systems/door/door-system'
+import { FenceSystem } from '../../systems/fence/fence-system'
import { GuideSystem } from '../../systems/guide/guide-system'
+import { ItemSystem } from '../../systems/item/item-system'
import { ItemLightSystem } from '../../systems/item-light/item-light-system'
import { ItemMeshMetadataSystem } from '../../systems/item-mesh-metadata/item-mesh-metadata-system'
import { LevelSystem } from '../../systems/level/level-system'
+import { RoofSystem } from '../../systems/roof/roof-system'
import { ScanSystem } from '../../systems/scan/scan-system'
+import { SlabSystem } from '../../systems/slab/slab-system'
+import { StairSystem } from '../../systems/stair/stair-system'
import { WallCutout } from '../../systems/wall/wall-cutout'
+import { WallSystem } from '../../systems/wall/wall-system'
+import { WindowSystem } from '../../systems/window/window-system'
import { ZoneSystem } from '../../systems/zone/zone-system'
import { ErrorBoundary } from '../error-boundary'
import { SceneRenderer } from '../renderers/scene-renderer'
diff --git a/packages/viewer/src/lib/materials.ts b/packages/viewer/src/lib/materials.ts
index 0aec65ddb..b390e4366 100644
--- a/packages/viewer/src/lib/materials.ts
+++ b/packages/viewer/src/lib/materials.ts
@@ -7,6 +7,22 @@ import {
resolveMaterial,
} from '@pascal-app/core'
import * as THREE from 'three'
+import { MeshStandardNodeMaterial } from 'three/webgpu'
+
+export const baseMaterial = new MeshStandardNodeMaterial({
+ color: '#f2f0ed',
+ roughness: 0.5,
+ metalness: 0.0,
+})
+
+export const glassMaterial = new MeshStandardNodeMaterial({
+ color: '#e0f2fe',
+ roughness: 0.05,
+ metalness: 0.0,
+ transparent: true,
+ opacity: 0.35,
+ side: THREE.DoubleSide,
+})
const sideMap: Record = {
front: THREE.FrontSide,
diff --git a/packages/core/src/systems/ceiling/ceiling-system.tsx b/packages/viewer/src/systems/ceiling/ceiling-system.tsx
similarity index 94%
rename from packages/core/src/systems/ceiling/ceiling-system.tsx
rename to packages/viewer/src/systems/ceiling/ceiling-system.tsx
index 4f47fab1e..5e383d2b2 100644
--- a/packages/core/src/systems/ceiling/ceiling-system.tsx
+++ b/packages/viewer/src/systems/ceiling/ceiling-system.tsx
@@ -1,8 +1,6 @@
import { useFrame } from '@react-three/fiber'
+import { type AnyNodeId, type CeilingNode, sceneRegistry, useScene } from '@pascal-app/core'
import * as THREE from 'three'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import type { AnyNodeId, CeilingNode } from '../../schema'
-import useScene from '../../store/use-scene'
function ensureUv2Attribute(geometry: THREE.BufferGeometry) {
const uv = geometry.getAttribute('uv')
diff --git a/packages/core/src/systems/door/door-system.tsx b/packages/viewer/src/systems/door/door-system.tsx
similarity index 77%
rename from packages/core/src/systems/door/door-system.tsx
rename to packages/viewer/src/systems/door/door-system.tsx
index b9b5c9e9d..a782ed954 100644
--- a/packages/core/src/systems/door/door-system.tsx
+++ b/packages/viewer/src/systems/door/door-system.tsx
@@ -1,9 +1,12 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNodeId,
+ type DoorNode,
+ sceneRegistry,
+ useScene,
+} from '@pascal-app/core'
import * as THREE from 'three'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import { baseMaterial, glassMaterial } from '../../materials'
-import type { AnyNodeId, DoorNode } from '../../schema'
-import useScene from '../../store/use-scene'
+import { baseMaterial, glassMaterial } from '../../lib/materials'
// Invisible material for root mesh — used as selection hitbox only
const hitboxMaterial = new THREE.MeshBasicMaterial({ visible: false })
@@ -52,6 +55,12 @@ function addBox(
parent.add(m)
}
+function disposeObject(object: THREE.Object3D) {
+ object.traverse((child) => {
+ if (child instanceof THREE.Mesh) child.geometry.dispose()
+ })
+}
+
function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
// Root mesh is an invisible hitbox; all visuals live in child meshes
mesh.geometry.dispose()
@@ -65,13 +74,14 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
// Dispose and remove all old visual children; preserve 'cutout'
for (const child of [...mesh.children]) {
if (child.name === 'cutout') continue
- if (child instanceof THREE.Mesh) child.geometry.dispose()
+ disposeObject(child)
mesh.remove(child)
}
const {
width,
height,
+ openingKind,
frameThickness,
frameDepth,
threshold,
@@ -85,8 +95,16 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
panicBarHeight,
contentPadding,
hingesSide,
+ swingDirection,
+ swingAngle = 0,
} = node
const hasLeafContent = segments.some((seg) => seg.type !== 'empty')
+ const clampedSwingAngle = Math.max(0, Math.min(Math.PI / 2, swingAngle))
+
+ if (openingKind === 'opening') {
+ syncDoorCutout(node, mesh)
+ return
+ }
// Leaf occupies the full opening (no bottom frame bar — door opens to floor)
const leafW = width - 2 * frameThickness
@@ -94,6 +112,23 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
const leafDepth = 0.04
// Leaf center is shifted down from door center by half the top frame
const leafCenterY = -frameThickness / 2
+ const hingeX = hingesSide === 'right' ? leafW / 2 : -leafW / 2
+ const swingDirectionSign = swingDirection === 'inward' ? 1 : -1
+ const hingeDirectionSign = hingesSide === 'right' ? 1 : -1
+ const leafSwingRotation = clampedSwingAngle * swingDirectionSign * hingeDirectionSign
+ const leafGroup = new THREE.Group()
+ leafGroup.position.set(hingeX, 0, 0)
+ leafGroup.rotation.y = leafSwingRotation
+ mesh.add(leafGroup)
+ const addLeafBox = (
+ material: THREE.Material,
+ w: number,
+ h: number,
+ d: number,
+ x: number,
+ y: number,
+ z: number,
+ ) => addBox(leafGroup, material, w, h, d, x - hingeX, y, z)
// ── Frame members ──
// Left post — full height
@@ -149,16 +184,16 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
const cpY = contentPadding[1]
if (hasLeafContent && cpY > 0) {
// Top strip
- addBox(mesh, baseMaterial, leafW, cpY, leafDepth, 0, leafCenterY + leafH / 2 - cpY / 2, 0)
+ addLeafBox(baseMaterial, leafW, cpY, leafDepth, 0, leafCenterY + leafH / 2 - cpY / 2, 0)
// Bottom strip
- addBox(mesh, baseMaterial, leafW, cpY, leafDepth, 0, leafCenterY - leafH / 2 + cpY / 2, 0)
+ addLeafBox(baseMaterial, leafW, cpY, leafDepth, 0, leafCenterY - leafH / 2 + cpY / 2, 0)
}
if (hasLeafContent && cpX > 0) {
const innerH = leafH - 2 * cpY
// Left strip
- addBox(mesh, baseMaterial, cpX, innerH, leafDepth, -leafW / 2 + cpX / 2, leafCenterY, 0)
+ addLeafBox(baseMaterial, cpX, innerH, leafDepth, -leafW / 2 + cpX / 2, leafCenterY, 0)
// Right strip
- addBox(mesh, baseMaterial, cpX, innerH, leafDepth, leafW / 2 - cpX / 2, leafCenterY, 0)
+ addLeafBox(baseMaterial, cpX, innerH, leafDepth, leafW / 2 - cpX / 2, leafCenterY, 0)
}
// Content area inside padding
@@ -193,8 +228,7 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
cx = -contentW / 2
for (let c = 0; c < numCols - 1; c++) {
cx += colWidths[c]!
- addBox(
- mesh,
+ addLeafBox(
baseMaterial,
seg.dividerThickness,
segH,
@@ -215,17 +249,17 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
if (seg.type === 'glass') {
// Glass only — no opaque backing so it's truly transparent
const glassDepth = Math.max(0.004, leafDepth * 0.15)
- addBox(mesh, glassMaterial, colW, segH, glassDepth, colX, segCenterY, 0)
+ addLeafBox(glassMaterial, colW, segH, glassDepth, colX, segCenterY, 0)
} else if (seg.type === 'panel') {
// Opaque leaf backing for this column
- addBox(mesh, baseMaterial, colW, segH, leafDepth, colX, segCenterY, 0)
+ addLeafBox(baseMaterial, colW, segH, leafDepth, colX, segCenterY, 0)
// Raised panel detail
const panelW = colW - 2 * seg.panelInset
const panelH = segH - 2 * seg.panelInset
if (panelW > 0.01 && panelH > 0.01) {
const effectiveDepth = Math.abs(seg.panelDepth) < 0.002 ? 0.005 : Math.abs(seg.panelDepth)
const panelZ = leafDepth / 2 + effectiveDepth / 2
- addBox(mesh, baseMaterial, panelW, panelH, effectiveDepth, colX, segCenterY, panelZ)
+ addLeafBox(baseMaterial, panelW, panelH, effectiveDepth, colX, segCenterY, panelZ)
}
} else {
// 'empty' leaves the opening unfilled
@@ -246,33 +280,24 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
const handleX = handleSide === 'right' ? leafW / 2 - 0.045 : -leafW / 2 + 0.045
// Backplate
- addBox(mesh, baseMaterial, 0.028, 0.14, 0.01, handleX, handleY, faceZ + 0.005)
+ addLeafBox(baseMaterial, 0.028, 0.14, 0.01, handleX, handleY, faceZ + 0.005)
// Grip lever
- addBox(mesh, baseMaterial, 0.022, 0.1, 0.035, handleX, handleY, faceZ + 0.025)
+ addLeafBox(baseMaterial, 0.022, 0.1, 0.035, handleX, handleY, faceZ + 0.025)
}
// ── Door closer (commercial hardware at top) ──
if (hasLeafContent && doorCloser) {
const closerY = leafCenterY + leafH / 2 - 0.04
// Body
- addBox(mesh, baseMaterial, 0.28, 0.055, 0.055, 0, closerY, leafDepth / 2 + 0.03)
+ addLeafBox(baseMaterial, 0.28, 0.055, 0.055, 0, closerY, leafDepth / 2 + 0.03)
// Arm (simplified as thin bar to frame side)
- addBox(
- mesh,
- baseMaterial,
- 0.14,
- 0.015,
- 0.015,
- leafW / 4,
- closerY + 0.025,
- leafDepth / 2 + 0.015,
- )
+ addLeafBox(baseMaterial, 0.14, 0.015, 0.015, leafW / 4, closerY + 0.025, leafDepth / 2 + 0.015)
}
// ── Panic bar ──
if (hasLeafContent && panicBar) {
const barY = panicBarHeight - height / 2
- addBox(mesh, baseMaterial, leafW * 0.72, 0.04, 0.055, 0, barY, leafDepth / 2 + 0.03)
+ addLeafBox(baseMaterial, leafW * 0.72, 0.04, 0.055, 0, barY, leafDepth / 2 + 0.03)
}
// ── Hinges (3 knuckle-style hinges on the hinge side) ──
@@ -290,6 +315,10 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeX, leafTop - 0.25, hingeZ)
}
+ syncDoorCutout(node, mesh)
+}
+
+function syncDoorCutout(node: DoorNode, mesh: THREE.Mesh) {
// ── Cutout (for wall CSG) — always full door dimensions, 1m deep ──
let cutout = mesh.getObjectByName('cutout') as THREE.Mesh | undefined
if (!cutout) {
diff --git a/packages/core/src/systems/fence/fence-system.tsx b/packages/viewer/src/systems/fence/fence-system.tsx
similarity index 96%
rename from packages/core/src/systems/fence/fence-system.tsx
rename to packages/viewer/src/systems/fence/fence-system.tsx
index 4fcc1a866..c0a2605cb 100644
--- a/packages/core/src/systems/fence/fence-system.tsx
+++ b/packages/viewer/src/systems/fence/fence-system.tsx
@@ -1,10 +1,14 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNodeId,
+ type FenceNode,
+ getWallCurveFrameAt,
+ getWallCurveLength,
+ sceneRegistry,
+ useScene,
+} from '@pascal-app/core'
import * as THREE from 'three'
import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import type { AnyNodeId, FenceNode } from '../../schema'
-import useScene from '../../store/use-scene'
-import { getWallCurveFrameAt, getWallCurveLength } from '../wall/wall-curve'
type FencePart = {
position: [number, number, number]
diff --git a/packages/core/src/systems/item/item-system.tsx b/packages/viewer/src/systems/item/item-system.tsx
similarity index 84%
rename from packages/core/src/systems/item/item-system.tsx
rename to packages/viewer/src/systems/item/item-system.tsx
index dbfbf7e33..75173160e 100644
--- a/packages/core/src/systems/item/item-system.tsx
+++ b/packages/viewer/src/systems/item/item-system.tsx
@@ -1,10 +1,15 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNodeId,
+ getScaledDimensions,
+ type ItemNode,
+ resolveLevelId,
+ sceneRegistry,
+ spatialGridManager,
+ useScene,
+ type WallNode,
+} from '@pascal-app/core'
import type * as THREE from 'three'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import { spatialGridManager } from '../../hooks/spatial-grid/spatial-grid-manager'
-import { resolveLevelId } from '../../hooks/spatial-grid/spatial-grid-sync'
-import { type AnyNodeId, getScaledDimensions, type ItemNode, type WallNode } from '../../schema'
-import useScene from '../../store/use-scene'
// ============================================================================
// ITEM SYSTEM
diff --git a/packages/core/src/systems/roof/roof-system.tsx b/packages/viewer/src/systems/roof/roof-system.tsx
similarity index 97%
rename from packages/core/src/systems/roof/roof-system.tsx
rename to packages/viewer/src/systems/roof/roof-system.tsx
index 5a1f06d11..a7479fb0b 100644
--- a/packages/core/src/systems/roof/roof-system.tsx
+++ b/packages/viewer/src/systems/roof/roof-system.tsx
@@ -1,21 +1,30 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNode,
+ type AnyNodeId,
+ type RoofNode,
+ type RoofSegmentNode,
+ type RoofType,
+ sceneRegistry,
+ useScene,
+} from '@pascal-app/core'
import * as THREE from 'three'
import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
import { ADDITION, Brush, Evaluator, SUBTRACTION } from 'three-bvh-csg'
import { computeBoundsTree } from 'three-mesh-bvh'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import type { AnyNode, AnyNodeId, RoofNode, RoofSegmentNode } from '../../schema'
-import type { RoofType } from '../../schema/nodes/roof-segment'
-import useScene from '../../store/use-scene'
const csgEvaluator = new Evaluator()
csgEvaluator.useGroups = true
;(csgEvaluator as any).consolidateGroups = false // shared dummyMats across brushes causes consolidation to misalign groupIndices vs groupOrder indices → crash
csgEvaluator.attributes = ['position', 'normal', 'uv']
+function computeGeometryBoundsTree(geometry: THREE.BufferGeometry) {
+ ;(geometry as any).computeBoundsTree = computeBoundsTree
+ ;(geometry as any).computeBoundsTree({ maxLeafSize: 10 })
+}
+
function prepareBrushForCSG(brush: Brush) {
- brush.geometry.computeBoundsTree = computeBoundsTree
- brush.geometry.computeBoundsTree({ maxLeafSize: 10 })
+ computeGeometryBoundsTree(brush.geometry)
brush.updateMatrixWorld()
}
@@ -78,8 +87,7 @@ export const RoofSystem = () => {
mesh.geometry.dispose()
const placeholder = new THREE.BufferGeometry()
placeholder.setAttribute('position', new THREE.Float32BufferAttribute([], 3))
- placeholder.computeBoundsTree = computeBoundsTree
- placeholder.computeBoundsTree({ maxLeafSize: 10 })
+ computeGeometryBoundsTree(placeholder)
mesh.geometry = placeholder
}
mesh.position.set(node.position[0], node.position[1], node.position[2])
@@ -134,8 +142,7 @@ function updateRoofSegmentGeometry(node: RoofSegmentNode, mesh: THREE.Mesh) {
mesh.geometry.dispose()
mesh.geometry = newGeo
- newGeo.computeBoundsTree = computeBoundsTree
- newGeo.computeBoundsTree({ maxLeafSize: 10 })
+ computeGeometryBoundsTree(newGeo)
mesh.position.set(node.position[0], node.position[1], node.position[2])
mesh.rotation.y = node.rotation
@@ -524,8 +531,7 @@ export function getRoofSegmentBrushes(
// when a group exists but covers no triangles (can happen after mergeVertices)
geo.groups = geo.groups.filter((g) => g.count > 0)
if (geo.groups.length === 0) return null
- geo.computeBoundsTree = computeBoundsTree
- geo.computeBoundsTree({ maxLeafSize: 10 })
+ computeGeometryBoundsTree(geo)
const brush = new Brush(geo, dummyMats)
brush.updateMatrixWorld()
return brush
diff --git a/packages/core/src/systems/slab/slab-system.tsx b/packages/viewer/src/systems/slab/slab-system.tsx
similarity index 70%
rename from packages/core/src/systems/slab/slab-system.tsx
rename to packages/viewer/src/systems/slab/slab-system.tsx
index 10e756270..d9f02df9c 100644
--- a/packages/core/src/systems/slab/slab-system.tsx
+++ b/packages/viewer/src/systems/slab/slab-system.tsx
@@ -1,9 +1,12 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNodeId,
+ getRenderableSlabPolygon,
+ sceneRegistry,
+ type SlabNode,
+ useScene,
+} from '@pascal-app/core'
import * as THREE from 'three'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import { insetPolygonFromCentroid, simplifyClosedPolygon } from '../../lib/polygon-geometry'
-import type { AnyNodeId, SlabNode } from '../../schema'
-import useScene from '../../store/use-scene'
function ensureUv2Attribute(geometry: THREE.BufferGeometry) {
const uv = geometry.getAttribute('uv')
@@ -58,71 +61,6 @@ function updateSlabGeometry(node: SlabNode, mesh: THREE.Mesh) {
mesh.position.y = elevation < 0 ? elevation : 0
}
-/** Half of default wall thickness — used to extend slab geometry under walls */
-const SLAB_OUTSET = 0.05
-const AUTO_SLAB_INSET = 0.02
-const AUTO_SLAB_SIMPLIFY_TOLERANCE = 0.08
-
-function getRenderableSlabPolygon(slabNode: SlabNode): Array<[number, number]> {
- return slabNode.autoFromWalls
- ? simplifyClosedPolygon(
- insetPolygonFromCentroid(slabNode.polygon, AUTO_SLAB_INSET),
- AUTO_SLAB_SIMPLIFY_TOLERANCE,
- )
- : outsetPolygon(slabNode.polygon, SLAB_OUTSET)
-}
-
-/**
- * Expand a polygon outward by a uniform distance.
- * Offsets each edge outward then intersects consecutive offset edges.
- */
-function outsetPolygon(polygon: Array<[number, number]>, amount: number): Array<[number, number]> {
- const n = polygon.length
- if (n < 3) return polygon
-
- // Determine winding via signed area
- let area2 = 0
- for (let i = 0; i < n; i++) {
- const j = (i + 1) % n
- area2 += polygon[i]![0] * polygon[j]![1] - polygon[j]![0] * polygon[i]![1]
- }
- const s = area2 >= 0 ? 1 : -1
-
- // Offset each edge outward by amount
- const offEdges: Array<[number, number, number, number]> = []
- for (let i = 0; i < n; i++) {
- const j = (i + 1) % n
- const dx = polygon[j]![0] - polygon[i]![0]
- const dz = polygon[j]![1] - polygon[i]![1]
- const len = Math.sqrt(dx * dx + dz * dz)
- if (len < 1e-9) {
- offEdges.push([polygon[i]![0], polygon[i]![1], dx, dz])
- continue
- }
- const nx = ((s * dz) / len) * amount
- const nz = ((s * -dx) / len) * amount
- offEdges.push([polygon[i]![0] + nx, polygon[i]![1] + nz, dx, dz])
- }
-
- // Intersect consecutive offset edges to get new vertices
- const result: Array<[number, number]> = []
- for (let i = 0; i < n; i++) {
- const j = (i + 1) % n
- const [ax, az, adx, adz] = offEdges[i]!
- const [bx, bz, bdx, bdz] = offEdges[j]!
- const denom = adx * bdz - adz * bdx
- if (Math.abs(denom) < 1e-9) {
- // Parallel edges — use offset endpoint
- result.push([ax + adx, az + adz])
- } else {
- const t = ((bx - ax) * bdz - (bz - az) * bdx) / denom
- result.push([ax + t * adx, az + t * adz])
- }
- }
-
- return result
-}
-
/**
* Generates extruded slab geometry from polygon
*/
@@ -199,13 +137,7 @@ function generatePoolGeometry(slabNode: SlabNode): THREE.BufferGeometry {
uvs.push((x - bounds.min.x) / floorWidth, (z - bounds.min.y) / floorHeight)
}
- const pushWallVertex = (
- x: number,
- y: number,
- z: number,
- u: number,
- v: number,
- ) => {
+ const pushWallVertex = (x: number, y: number, z: number, u: number, v: number) => {
positions.push(x, y, z)
uvs.push(u, v)
}
diff --git a/packages/core/src/systems/stair/stair-system.tsx b/packages/viewer/src/systems/stair/stair-system.tsx
similarity index 98%
rename from packages/core/src/systems/stair/stair-system.tsx
rename to packages/viewer/src/systems/stair/stair-system.tsx
index 77e400296..6f1e96d58 100644
--- a/packages/core/src/systems/stair/stair-system.tsx
+++ b/packages/viewer/src/systems/stair/stair-system.tsx
@@ -1,13 +1,18 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNode,
+ type AnyNodeId,
+ resolveLevelId,
+ sceneRegistry,
+ spatialGridManager,
+ type StairNode,
+ type StairSegmentNode,
+ syncAutoStairOpenings,
+ useScene,
+} from '@pascal-app/core'
import { useEffect, useRef } from 'react'
import * as THREE from 'three'
import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import { spatialGridManager } from '../../hooks/spatial-grid/spatial-grid-manager'
-import { resolveLevelId } from '../../hooks/spatial-grid/spatial-grid-sync'
-import type { AnyNode, AnyNodeId, StairNode, StairSegmentNode } from '../../schema'
-import useScene from '../../store/use-scene'
-import { syncAutoStairOpenings } from './stair-opening-sync'
const pendingStairUpdates = new Set()
const MAX_STAIRS_PER_FRAME = 2
diff --git a/packages/viewer/src/systems/wall/wall-materials.ts b/packages/viewer/src/systems/wall/wall-materials.ts
index 5edccfeab..fb1b4e99c 100644
--- a/packages/viewer/src/systems/wall/wall-materials.ts
+++ b/packages/viewer/src/systems/wall/wall-materials.ts
@@ -1,5 +1,4 @@
import {
- baseMaterial,
getEffectiveWallSurfaceMaterial,
getMaterialPresetByRef,
getWallSurfaceMaterialSignature,
@@ -10,7 +9,7 @@ import {
import { Color, type Material } from 'three'
import { Fn, float, fract, length, mix, positionLocal, smoothstep, step, vec2 } from 'three/tsl'
import { MeshStandardNodeMaterial } from 'three/webgpu'
-import { createMaterial, createMaterialFromPresetRef } from '../../lib/materials'
+import { baseMaterial, createMaterial, createMaterialFromPresetRef } from '../../lib/materials'
const DEFAULT_WALL_COLOR = '#f2f0ed'
diff --git a/packages/core/src/systems/wall/wall-system.tsx b/packages/viewer/src/systems/wall/wall-system.tsx
similarity index 75%
rename from packages/core/src/systems/wall/wall-system.tsx
rename to packages/viewer/src/systems/wall/wall-system.tsx
index 5a40c09a8..98c98467e 100644
--- a/packages/core/src/systems/wall/wall-system.tsx
+++ b/packages/viewer/src/systems/wall/wall-system.tsx
@@ -2,21 +2,29 @@ import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { Brush, Evaluator, SUBTRACTION } from 'three-bvh-csg'
import { computeBoundsTree } from 'three-mesh-bvh'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import { spatialGridManager } from '../../hooks/spatial-grid/spatial-grid-manager'
-import { resolveLevelId } from '../../hooks/spatial-grid/spatial-grid-sync'
-import type { AnyNode, AnyNodeId, WallNode } from '../../schema'
-import useScene from '../../store/use-scene'
-import { getWallCurveFrameAt, getWallSurfacePolygon, isCurvedWall } from './wall-curve'
-import { DEFAULT_WALL_HEIGHT, getWallPlanFootprint, getWallThickness } from './wall-footprint'
import {
calculateLevelMiters,
+ type AnyNode,
+ type AnyNodeId,
+ type DoorNode,
getAdjacentWallIds,
+ DEFAULT_WALL_HEIGHT,
+ getWallCurveFrameAt,
getWallMiterBoundaryPoints,
+ getWallPlanFootprint,
+ getWallSurfacePolygon,
+ getWallThickness,
+ isCurvedWall,
type Point2D,
pointToKey,
+ resolveLevelId,
+ sceneRegistry,
+ spatialGridManager,
+ useScene,
+ type WallNode,
type WallMiterData,
-} from './wall-mitering'
+ type WindowNode,
+} from '@pascal-app/core'
// Reusable CSG evaluator for better performance
const csgEvaluator = new Evaluator()
@@ -24,6 +32,11 @@ const CURVED_WALL_3D_ENDPOINT_INSET = 0.0015
const WALL_FACE_NORMAL_Y_EPSILON = 0.6
const WALL_FACE_EDGE_DISTANCE_EPSILON = 0.003
+function computeGeometryBoundsTree(geometry: THREE.BufferGeometry) {
+ ;(geometry as any).computeBoundsTree = computeBoundsTree
+ ;(geometry as any).computeBoundsTree({ maxLeafSize: 10 })
+}
+
type WallBoundaryEdgeTag = 'front' | 'back' | 'base'
type TaggedWallBoundaryEdge = {
@@ -495,8 +508,7 @@ 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 })
+ computeGeometryBoundsTree(geometry)
const wallBrush = new Brush(geometry)
wallBrush.updateMatrixWorld()
@@ -546,6 +558,14 @@ function collectCutoutBrushes(
for (const child of childrenNodes) {
if (child.type !== 'item' && child.type !== 'window' && child.type !== 'door') continue
+ if (
+ (child.type === 'door' && child.openingKind === 'opening') ||
+ (child.type === 'window' && child.openingKind === 'opening')
+ ) {
+ brushes.push(createShapedOpeningCutoutBrush(child, wallThickness))
+ continue
+ }
+
const childMesh = sceneRegistry.nodes.get(child.id)
if (!childMesh) continue
@@ -591,8 +611,7 @@ function collectCutoutBrushes(
)
// Pre-compute BVH with new API to avoid deprecation warning
- boxGeo.computeBoundsTree = computeBoundsTree
- boxGeo.computeBoundsTree({ maxLeafSize: 10 })
+ computeGeometryBoundsTree(boxGeo)
const brush = new Brush(boxGeo)
brushes.push(brush)
@@ -600,3 +619,184 @@ function collectCutoutBrushes(
return brushes
}
+
+type ShapedOpeningNode = DoorNode | WindowNode
+type CornerRadii = {
+ topLeft: number
+ topRight: number
+ bottomRight: number
+ bottomLeft: number
+}
+
+function createShapedOpeningCutoutBrush(opening: ShapedOpeningNode, wallThickness: number): Brush {
+ const shape = createShapedOpeningCutoutShape(opening)
+ const depth = wallThickness * 2
+ const bevelSize =
+ opening.openingShape === 'rounded'
+ ? Math.min(
+ Math.max(opening.openingRevealRadius ?? 0.025, 0),
+ Math.max(wallThickness * 0.45, 0.001),
+ Math.max((opening.cornerRadius ?? 0.15) * 0.45, 0.001),
+ )
+ : 0
+ const geometry = new THREE.ExtrudeGeometry(shape, {
+ depth,
+ bevelEnabled: bevelSize > 0,
+ bevelSegments: bevelSize > 0 ? 8 : 0,
+ bevelSize,
+ bevelThickness: bevelSize,
+ curveSegments: 24,
+ })
+
+ geometry.translate(0, 0, -depth / 2)
+ computeGeometryBoundsTree(geometry)
+
+ return new Brush(geometry)
+}
+
+function createShapedOpeningCutoutShape(opening: ShapedOpeningNode): THREE.Shape {
+ const halfWidth = opening.width / 2
+ const bottom = opening.position[1] - opening.height / 2
+ const top = opening.position[1] + opening.height / 2
+ const centerX = opening.position[0]
+ const left = centerX - halfWidth
+ const right = centerX + halfWidth
+ const width = Math.max(opening.width, 1e-6)
+ const height = Math.max(opening.height, 1e-6)
+ const shape = new THREE.Shape()
+
+ if (opening.openingShape === 'arch') {
+ const archHeight = Math.min(Math.max(opening.archHeight ?? width / 2, 0.01), height)
+ const springY = top - archHeight
+
+ shape.moveTo(left, bottom)
+ shape.lineTo(right, bottom)
+ shape.lineTo(right, springY)
+ shape.quadraticCurveTo(centerX, top, left, springY)
+ shape.lineTo(left, bottom)
+ shape.closePath()
+ return shape
+ }
+
+ if (opening.openingShape === 'rounded') {
+ const radii = getRoundedOpeningRadii(opening, width, height)
+ applyRoundedOpeningShape(shape, left, right, bottom, top, radii)
+ return shape
+ }
+
+ shape.moveTo(left, bottom)
+ shape.lineTo(right, bottom)
+ shape.lineTo(right, top)
+ shape.lineTo(left, top)
+ shape.closePath()
+ return shape
+}
+
+function getRoundedOpeningRadii(
+ opening: ShapedOpeningNode,
+ width: number,
+ height: number,
+): CornerRadii {
+ if (opening.type !== 'window') {
+ if (opening.openingRadiusMode === 'individual') {
+ const [topLeft = 0, topRight = 0] = opening.openingTopRadii ?? [0.15, 0.15]
+
+ return normalizeCornerRadii(
+ {
+ topLeft: Math.max(topLeft, 0),
+ topRight: Math.max(topRight, 0),
+ bottomRight: 0,
+ bottomLeft: 0,
+ },
+ width,
+ height,
+ )
+ }
+
+ const maxRadius = Math.min(width / 2, height)
+ const radius = Math.min(Math.max(opening.cornerRadius ?? 0.15, 0), maxRadius)
+ return { topLeft: radius, topRight: radius, bottomRight: 0, bottomLeft: 0 }
+ }
+
+ if (opening.openingRadiusMode === 'individual') {
+ const [topLeft = 0, topRight = 0, bottomRight = 0, bottomLeft = 0] =
+ opening.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15]
+
+ return normalizeCornerRadii(
+ {
+ topLeft: Math.max(topLeft, 0),
+ topRight: Math.max(topRight, 0),
+ bottomRight: Math.max(bottomRight, 0),
+ bottomLeft: Math.max(bottomLeft, 0),
+ },
+ width,
+ height,
+ )
+ }
+
+ const maxRadius = Math.min(width / 2, height / 2)
+ const radius = Math.min(Math.max(opening.cornerRadius ?? 0.15, 0), maxRadius)
+ return { topLeft: radius, topRight: radius, bottomRight: radius, bottomLeft: radius }
+}
+
+function normalizeCornerRadii(radii: CornerRadii, width: number, height: number): CornerRadii {
+ const next = { ...radii }
+ const maxScale = Math.min(
+ 1,
+ width / Math.max(next.topLeft + next.topRight, 1e-6),
+ width / Math.max(next.bottomLeft + next.bottomRight, 1e-6),
+ height / Math.max(next.topLeft + next.bottomLeft, 1e-6),
+ height / Math.max(next.topRight + next.bottomRight, 1e-6),
+ )
+
+ if (maxScale < 1) {
+ next.topLeft *= maxScale
+ next.topRight *= maxScale
+ next.bottomRight *= maxScale
+ next.bottomLeft *= maxScale
+ }
+
+ return next
+}
+
+function applyRoundedOpeningShape(
+ shape: THREE.Shape,
+ left: number,
+ right: number,
+ bottom: number,
+ top: number,
+ radii: CornerRadii,
+) {
+ const { topLeft, topRight, bottomRight, bottomLeft } = radii
+
+ shape.moveTo(left + bottomLeft, bottom)
+ shape.lineTo(right - bottomRight, bottom)
+ if (bottomRight > 1e-6) {
+ shape.absarc(right - bottomRight, bottom + bottomRight, bottomRight, -Math.PI / 2, 0, false)
+ } else {
+ shape.lineTo(right, bottom)
+ }
+
+ shape.lineTo(right, top - topRight)
+ if (topRight > 1e-6) {
+ shape.absarc(right - topRight, top - topRight, topRight, 0, Math.PI / 2, false)
+ } else {
+ shape.lineTo(right, top)
+ }
+
+ shape.lineTo(left + topLeft, top)
+ if (topLeft > 1e-6) {
+ shape.absarc(left + topLeft, top - topLeft, topLeft, Math.PI / 2, Math.PI, false)
+ } else {
+ shape.lineTo(left, top)
+ }
+
+ shape.lineTo(left, bottom + bottomLeft)
+ if (bottomLeft > 1e-6) {
+ shape.absarc(left + bottomLeft, bottom + bottomLeft, bottomLeft, Math.PI, Math.PI * 1.5, false)
+ } else {
+ shape.lineTo(left, bottom)
+ }
+
+ shape.closePath()
+}
diff --git a/packages/core/src/systems/window/window-system.tsx b/packages/viewer/src/systems/window/window-system.tsx
similarity index 94%
rename from packages/core/src/systems/window/window-system.tsx
rename to packages/viewer/src/systems/window/window-system.tsx
index d27e28578..01a77f430 100644
--- a/packages/core/src/systems/window/window-system.tsx
+++ b/packages/viewer/src/systems/window/window-system.tsx
@@ -1,9 +1,12 @@
import { useFrame } from '@react-three/fiber'
+import {
+ type AnyNodeId,
+ sceneRegistry,
+ useScene,
+ type WindowNode,
+} from '@pascal-app/core'
import * as THREE from 'three'
-import { sceneRegistry } from '../../hooks/scene-registry/scene-registry'
-import { baseMaterial, glassMaterial } from '../../materials'
-import type { AnyNodeId, WindowNode } from '../../schema'
-import useScene from '../../store/use-scene'
+import { baseMaterial, glassMaterial } from '../../lib/materials'
// Invisible material for root mesh — used as selection hitbox only
const hitboxMaterial = new THREE.MeshBasicMaterial({ visible: false })
@@ -81,8 +84,14 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
sill,
sillDepth,
sillThickness,
+ openingKind,
} = node
+ if (openingKind === 'opening') {
+ syncWindowCutout(node, mesh)
+ return
+ }
+
const innerW = width - 2 * frameThickness
const innerH = height - 2 * frameThickness
@@ -231,6 +240,10 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
)
}
+ syncWindowCutout(node, mesh)
+}
+
+function syncWindowCutout(node: WindowNode, mesh: THREE.Mesh) {
// ── Cutout (for wall CSG) — always full window dimensions, 1m deep ──
let cutout = mesh.getObjectByName('cutout') as THREE.Mesh | undefined
if (!cutout) {
- Row Heights
-
- {normRows.map((ratio, i) => (
+ )}
+ {openingShape === 'arch' && (
+
- handleUpdate({ rowDividerThickness: v })}
- precision={3}
- step={0.01}
+ label="Arch Height"
+ max={Math.max(0.05, node.height)}
+ min={0.05}
+ onChange={(value) => handleUpdate({ archHeight: value })}
+ precision={2}
+ step={0.05}
unit="m"
- value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
+ value={Math.round(archHeight * 100) / 100}
/>
-
+ {!isOpening && (
+ <>
+
handleUpdate({ sillDepth: v })}
+ onChange={(v) => handleUpdate({ frameThickness: v })}
precision={3}
step={0.01}
unit="m"
- value={Math.round(node.sillDepth * 1000) / 1000}
+ value={Math.round(node.frameThickness * 1000) / 1000}
/>
handleUpdate({ sillThickness: v })}
+ onChange={(v) => handleUpdate({ frameDepth: v })}
precision={3}
step={0.01}
unit="m"
- value={Math.round(node.sillThickness * 1000) / 1000}
+ value={Math.round(node.frameDepth * 1000) / 1000}
/>
-
- )}
-
+ setColumnRatio(i, v / 100)}
+ precision={1}
+ step={1}
+ unit="%"
+ value={Math.round(ratio * 100 * 10) / 10}
+ />
+ ))}
+
+ )}
+
+ {numRows > 1 && (
+
+ Col Widths
+
+ {normCols.map((ratio, i) => (
+
+ handleUpdate({ columnDividerThickness: v })}
+ precision={3}
+ step={0.01}
+ unit="m"
+ value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
+ />
+
+
+ setRowRatio(i, v / 100)}
+ precision={1}
+ step={1}
+ unit="%"
+ value={Math.round(ratio * 100 * 10) / 10}
+ />
+ ))}
+
+ )}
+
+ Row Heights
+
+ {normRows.map((ratio, i) => (
+
+ handleUpdate({ rowDividerThickness: v })}
+ precision={3}
+ step={0.01}
+ unit="m"
+ value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
+ />
+
+
+ handleUpdate({ sillDepth: v })}
+ precision={3}
+ step={0.01}
+ unit="m"
+ value={Math.round(node.sillDepth * 1000) / 1000}
+ />
+ handleUpdate({ sillThickness: v })}
+ precision={3}
+ step={0.01}
+ unit="m"
+ value={Math.round(node.sillThickness * 1000) / 1000}
+ />
+
+ )}
+