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

Merge remote-tracking branch 'origin/main' into chore/deps-2026-06

Browse Source
This commit is contained in:
Aymeric Rabot
2026-06-09 18:52:42 -04:00
parent c57901e7d9 50304d7d10
commit 8d8052297c
15 changed files with 450 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor/src/components/editor/custom-camera-controls.tsx
+14 -3
View File
@@ -948,10 +948,21 @@ export const CustomCameraControls = () => {
const sub = new Box3().setFromObject(obj)
if (!sub.isEmpty()) tempBox.union(sub)
}
if (tempBox.isEmpty()) return
if (captureMode.framingBounds) {
const { center, max, min, size } = captureMode.framingBounds
const fallbackHeight = Math.max(Math.max(size[0], size[1]) * 0.35, 2.5)
const minY = tempBox.isEmpty() ? 0 : tempBox.min.y
const maxY = tempBox.isEmpty() ? fallbackHeight : tempBox.max.y
tempBox.min.set(min[0], minY, min[1])
tempBox.max.set(max[0], Math.max(maxY, minY + 0.1), max[1])
tempCenter.set(center[0], (tempBox.min.y + tempBox.max.y) / 2, center[1])
tempSize.set(size[0], tempBox.max.y - tempBox.min.y, size[1])
} else {
if (tempBox.isEmpty()) return
tempBox.getCenter(tempCenter)
tempBox.getSize(tempSize)
tempBox.getCenter(tempCenter)
tempBox.getSize(tempSize)
}
// Distance heuristic: fit the subject inside the 75%-of-shorter-
// side square crop with comfortable padding. Multiplier 2.4 leaves
packages/editor/src/components/ui/panels/panel-manager.tsx
+13
View File
@@ -171,6 +171,8 @@ function MobilePanelLayer({
export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.ReactNode }) {
const isMobile = useIsMobile()
const selectedIds = useViewer((s) => s.selection.selectedIds)
const selectedZoneId = useViewer((s) => s.selection.zoneId)
const setSelection = useViewer((s) => s.setSelection)
const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
const isPaintPanelOpen = useEditor((s) => s.isPaintPanelOpen)
const mode = useEditor((s) => s.mode)
@@ -215,5 +217,16 @@ export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.Reac
return <PaintPanel />
}
if (selectedZoneId && selectedIds.length === 0) {
return (
<ParametricInspector
footer={inspectorFooter}
key={selectedZoneId}
nodeId={selectedZoneId as AnyNodeId}
onClose={() => setSelection({ zoneId: null })}
/>
)
}
return panelForType(selectedNodeType, inspectorFooter)
}
packages/editor/src/components/ui/panels/parametric-inspector.tsx
+70 -22
View File
@@ -8,12 +8,14 @@ import {
type ParamAction,
type ParamField,
useScene,
type ZoneNode,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { Icon } from '@iconify/react'
import { Move, Trash2 } from 'lucide-react'
import { type ComponentType, lazy, Suspense, useCallback } from 'react'
import { sfxEmitter } from '../../../lib/sfx-bus'
import { collectZoneContentIds } from '../../../lib/zone-content'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { PanelSection } from '../controls/panel-section'
@@ -38,8 +40,15 @@ import { InspectorFooterContext, PanelWrapper } from './panel-wrapper'
* `parametrics.customPanel?` escape hatch for kinds whose parametric editor
* can't be auto-generated (topology editors etc.).
*/
export function ParametricInspector({ footer }: { footer?: React.ReactNode } = {}) {
const selectedId = useViewer((s) => s.selection.selectedIds[0]) as AnyNodeId | undefined
export function ParametricInspector({
footer,
nodeId,
onClose,
}: { footer?: React.ReactNode; nodeId?: AnyNodeId; onClose?: () => void } = {}) {
const selectedIdFromSelection = useViewer((s) => s.selection.selectedIds[0]) as
| AnyNodeId
| undefined
const selectedId = nodeId ?? selectedIdFromSelection
const setSelection = useViewer((s) => s.setSelection)
// Subscribe only to the *type* — a string primitive that doesn't change
// when slider values change. Without this, every updateNode tick during
@@ -58,9 +67,13 @@ export function ParametricInspector({ footer }: { footer?: React.ReactNode } = {
[selectedId],
)
const handleClose = useCallback(() => {
const clearSelection = useCallback(() => {
if (onClose) {
onClose()
return
}
setSelection({ selectedIds: [] })
}, [setSelection])
}, [onClose, setSelection])
const handleMove = useCallback(() => {
if (!selectedId) return
@@ -68,15 +81,27 @@ export function ParametricInspector({ footer }: { footer?: React.ReactNode } = {
if (!node) return
sfxEmitter.emit('sfx:item-pick')
useEditor.getState().setMovingNode(node as any)
setSelection({ selectedIds: [] })
}, [selectedId, setSelection])
clearSelection()
}, [selectedId, clearSelection])
const handleDelete = useCallback(() => {
if (!selectedId) return
sfxEmitter.emit('sfx:structure-delete')
useScene.getState().deleteNode(selectedId)
setSelection({ selectedIds: [] })
}, [selectedId, setSelection])
const handleDelete = useCallback(
(withZoneContent = false) => {
if (!selectedId) return
const scene = useScene.getState()
const node = scene.nodes[selectedId]
if (!node) return
const ids =
withZoneContent && node.type === 'zone'
? [selectedId, ...collectZoneContentIds(scene.nodes, node as ZoneNode)]
: [selectedId]
sfxEmitter.emit('sfx:structure-delete')
scene.deleteNodes(Array.from(new Set(ids)))
clearSelection()
},
[selectedId, clearSelection],
)
if (!selectedId || !def || !parametrics) return null
@@ -104,13 +129,20 @@ export function ParametricInspector({ footer }: { footer?: React.ReactNode } = {
const iconNode = renderIcon(presentation?.icon)
const canMove = !!def.capabilities.movable
const canDelete = def.capabilities.deletable !== false
const isZone = nodeType === 'zone'
const TrailingSection = parametrics.trailingSection
? resolveCustomPanel(parametrics.trailingSection)
: null
return (
<PanelWrapper footer={footer} icon={iconNode} onClose={handleClose} title={title} width={320}>
<PanelWrapper
footer={footer}
icon={iconNode}
onClose={clearSelection}
title={title}
width={320}
>
{parametrics.groups.map((group, gi) => (
<PanelSection key={`group-${gi}`} title={group.label}>
{group.fields.map((field, fi) => (
@@ -130,21 +162,37 @@ export function ParametricInspector({ footer }: { footer?: React.ReactNode } = {
)}
{(canMove || canDelete || (parametrics.actions && parametrics.actions.length > 0)) && (
<PanelSection title="Actions">
<ActionGroup>
<ActionGroup className={isZone ? 'flex-col' : undefined}>
{canMove && (
<ActionButton icon={<Move className="h-4 w-4" />} label="Move" onClick={handleMove} />
)}
{parametrics.actions?.map((action, i) => (
<ParamActionButton action={action} key={`paramaction-${i}`} nodeId={selectedId} />
))}
{canDelete && (
<ActionButton
className="border-red-500/40 text-red-200 hover:bg-red-500/15"
icon={<Trash2 className="h-4 w-4" />}
label="Delete"
onClick={handleDelete}
/>
)}
{canDelete &&
(isZone ? (
<>
<ActionButton
className="w-full flex-none"
icon={<Trash2 className="h-4 w-4 text-red-400" />}
label="Delete"
onClick={() => handleDelete(false)}
/>
<ActionButton
className="w-full flex-none"
icon={<Trash2 className="h-4 w-4 text-red-400" />}
label="Delete with contents"
onClick={() => handleDelete(true)}
/>
</>
) : (
<ActionButton
className="border-red-500/40 text-red-200 hover:bg-red-500/15"
icon={<Trash2 className="h-4 w-4" />}
label="Delete"
onClick={() => handleDelete()}
/>
))}
</ActionGroup>
</PanelSection>
)}
packages/editor/src/components/ui/sidebar/panels/zone-panel/index.tsx
+51 -2
View File
@@ -1,7 +1,14 @@
import { emitter, useScene, type ZoneNode } from '@pascal-app/core'
import {
type AnyNodeId,
emitter,
useScene,
type ZoneNode,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { Camera, Hexagon, Trash2 } from 'lucide-react'
import { Camera, Hexagon, Save, Trash2 } from 'lucide-react'
import { useState } from 'react'
import { sfxEmitter } from './../../../../../lib/sfx-bus'
import { collectZoneContentIds } from './../../../../../lib/zone-content'
import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
import {
Popover,
@@ -10,6 +17,8 @@ import {
} from './../../../../../components/ui/primitives/popover'
import { cn } from './../../../../../lib/utils'
import useEditor from './../../../../../store/use-editor'
import { ActionButton } from '../../../controls/action-button'
import { PanelSection } from '../../../controls/panel-section'
function ZoneItem({ zone }: { zone: ZoneNode }) {
const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
@@ -26,6 +35,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
const handleDelete = (e: React.MouseEvent) => {
e.stopPropagation()
sfxEmitter.emit('sfx:structure-delete')
deleteNode(zone.id)
if (isSelected) {
setSelection({ zoneId: null })
@@ -125,6 +135,8 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
export function ZonePanel() {
const nodes = useScene((state) => state.nodes)
const currentLevelId = useViewer((state) => state.selection.levelId)
const selectedZoneId = useViewer((state) => state.selection.zoneId)
const setSelection = useViewer((state) => state.setSelection)
const setPhase = useEditor((state) => state.setPhase)
const setMode = useEditor((state) => state.setMode)
const setTool = useEditor((state) => state.setTool)
@@ -133,6 +145,7 @@ export function ZonePanel() {
const levelZones = Object.values(nodes).filter(
(node): node is ZoneNode => node.type === 'zone' && node.parentId === currentLevelId,
)
const selectedZone = levelZones.find((zone) => zone.id === selectedZoneId)
const handleAddZone = () => {
if (currentLevelId) {
@@ -142,6 +155,17 @@ export function ZonePanel() {
}
}
const deleteSelectedZone = (withContent: boolean) => {
if (!selectedZone) return
const scene = useScene.getState()
const ids = withContent
? [selectedZone.id as AnyNodeId, ...collectZoneContentIds(scene.nodes, selectedZone)]
: [selectedZone.id as AnyNodeId]
sfxEmitter.emit('sfx:structure-delete')
scene.deleteNodes(Array.from(new Set(ids)))
setSelection({ selectedIds: [], zoneId: null })
}
if (!currentLevelId) {
return (
<div className="px-3 py-4 text-muted-foreground text-sm">
@@ -162,6 +186,31 @@ export function ZonePanel() {
) : (
levelZones.map((zone) => <ZoneItem key={zone.id} zone={zone} />)
)}
{selectedZone ? (
<PanelSection className="mt-2 border-t" title="Actions">
<ActionButton
className="w-full flex-none"
icon={<Save className="h-4 w-4" />}
label="Save to catalog"
onClick={() => emitter.emit('room-preset:create', { zoneId: selectedZone.id })}
type="button"
/>
<ActionButton
className="w-full flex-none"
icon={<Trash2 className="h-4 w-4 text-red-400" />}
label="Delete"
onClick={() => deleteSelectedZone(false)}
type="button"
/>
<ActionButton
className="w-full flex-none"
icon={<Trash2 className="h-4 w-4 text-red-400" />}
label="Delete with contents"
onClick={() => deleteSelectedZone(true)}
type="button"
/>
</PanelSection>
) : null}
</div>
)
}
packages/editor/src/hooks/use-keyboard.ts
+9 -9
View File
@@ -298,15 +298,6 @@ export const useKeyboard = ({
}
}
// Delete selected zone
const selectedZoneId = useViewer.getState().selection.zoneId
if (selectedZoneId) {
sfxEmitter.emit('sfx:structure-delete')
useScene.getState().deleteNode(selectedZoneId as AnyNodeId)
useViewer.getState().setSelection({ zoneId: null })
return
}
const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
if (selectedNodeIds.length > 0) {
@@ -328,6 +319,15 @@ export const useKeyboard = ({
}
useScene.getState().deleteNodes(selectedNodeIds)
return
}
// Delete selected zone when no explicit element selection is active.
const selectedZoneId = useViewer.getState().selection.zoneId
if (selectedZoneId) {
sfxEmitter.emit('sfx:structure-delete')
useScene.getState().deleteNode(selectedZoneId as AnyNodeId)
useViewer.getState().setSelection({ zoneId: null })
}
}
}
packages/editor/src/lib/zone-content.ts
+130
View File
@@ -0,0 +1,130 @@
import {
type AnyNode,
type AnyNodeId,
type CeilingNode,
type ItemNode,
pointInPolygon2D,
pointOnSegment,
type SlabNode,
type WallNode,
type ZoneNode,
} from '@pascal-app/core'
type Point2D = [number, number]
const POINT_TOLERANCE = 0.5
const COLLINEAR_TOLERANCE = 1e-6
const SURFACE_POLYGON_TOLERANCE = 0.15
function getPointToSegmentDistance(point: Point2D, start: Point2D, end: Point2D): number {
const dx = end[0] - start[0]
const dz = end[1] - start[1]
const lengthSq = dx * dx + dz * dz
if (lengthSq === 0) return Math.hypot(point[0] - start[0], point[1] - start[1])
const rawT = ((point[0] - start[0]) * dx + (point[1] - start[1]) * dz) / lengthSq
const t = Math.max(0, Math.min(1, rawT))
const projected: Point2D = [start[0] + t * dx, start[1] + t * dz]
return Math.hypot(point[0] - projected[0], point[1] - projected[1])
}
function pointInPolygonWithTolerance(point: Point2D, polygon: Point2D[]): boolean {
if (pointInPolygon2D(point, polygon, { includeBoundary: true })) return true
return polygon.some((start, index) => {
const end = polygon[(index + 1) % polygon.length]
return end ? getPointToSegmentDistance(point, start, end) <= POINT_TOLERANCE : false
})
}
function polygonContainsWithTolerance(
outer: Point2D[],
inner: Point2D[],
tolerance: number,
): boolean {
return inner.every((point) => {
if (pointInPolygon2D(point, outer, { includeBoundary: true })) return true
return outer.some((start, index) => {
const end = outer[(index + 1) % outer.length]
return end ? getPointToSegmentDistance(point, start, end) <= tolerance : false
})
})
}
function polygonMatchesZoneFootprint(surfacePolygon: Point2D[], footprint: Point2D[]): boolean {
if (surfacePolygon.length < 3) return false
return (
polygonContainsWithTolerance(footprint, surfacePolygon, SURFACE_POLYGON_TOLERANCE) &&
polygonContainsWithTolerance(surfacePolygon, footprint, SURFACE_POLYGON_TOLERANCE)
)
}
function areSegmentsCollinear(a: Point2D, b: Point2D, c: Point2D, d: Point2D): boolean {
const abx = b[0] - a[0]
const abz = b[1] - a[1]
const acx = c[0] - a[0]
const acz = c[1] - a[1]
const adx = d[0] - a[0]
const adz = d[1] - a[1]
const crossC = abx * acz - abz * acx
const crossD = abx * adz - abz * adx
return Math.abs(crossC) <= COLLINEAR_TOLERANCE && Math.abs(crossD) <= COLLINEAR_TOLERANCE
}
function segmentsOverlap(a: Point2D, b: Point2D, c: Point2D, d: Point2D): boolean {
const useX = Math.abs(b[0] - a[0]) >= Math.abs(b[1] - a[1])
const a0 = useX ? a[0] : a[1]
const a1 = useX ? b[0] : b[1]
const c0 = useX ? c[0] : c[1]
const c1 = useX ? d[0] : d[1]
const minA = Math.min(a0, a1)
const maxA = Math.max(a0, a1)
const minC = Math.min(c0, c1)
const maxC = Math.max(c0, c1)
return Math.max(minA, minC) <= Math.min(maxA, maxC) + COLLINEAR_TOLERANCE
}
function wallLiesOnZoneBoundary(wall: WallNode, polygon: Point2D[]): boolean {
return polygon.some((start, index) => {
const end = polygon[(index + 1) % polygon.length]
if (!end) return false
return (
areSegmentsCollinear(wall.start, wall.end, start, end) &&
segmentsOverlap(wall.start, wall.end, start, end) &&
pointOnSegment(wall.start, start, end, POINT_TOLERANCE) &&
pointOnSegment(wall.end, start, end, POINT_TOLERANCE)
)
})
}
export function collectZoneContentIds(
nodes: Readonly<Record<AnyNodeId, AnyNode>>,
zone: ZoneNode,
): AnyNodeId[] {
const levelId = zone.parentId
if (!levelId) return []
const footprint = zone.polygon.map((point) => [point[0], point[1]] as Point2D)
const boundaryWalls = Object.values(nodes)
.filter((node): node is WallNode => node.type === 'wall' && node.parentId === levelId)
.filter((wall) => wallLiesOnZoneBoundary(wall, footprint))
const surfaces = Object.values(nodes)
.filter(
(node): node is SlabNode | CeilingNode =>
(node.type === 'slab' || node.type === 'ceiling') && node.parentId === levelId,
)
.filter((surface) => {
const polygon = surface.polygon.map((point) => [point[0], point[1]] as Point2D)
return polygonMatchesZoneFootprint(polygon, footprint)
})
const floorItems = Object.values(nodes)
.filter((node): node is ItemNode => node.type === 'item' && node.parentId === levelId)
.filter((item) => pointInPolygonWithTolerance([item.position[0], item.position[2]], footprint))
return Array.from(
new Set<AnyNodeId>([
...boundaryWalls.map((wall) => wall.id as AnyNodeId),
...surfaces.map((surface) => surface.id as AnyNodeId),
...floorItems.map((item) => item.id as AnyNodeId),
]),
)
}
packages/editor/src/store/use-editor.tsx
+10 -1
View File
@@ -62,7 +62,16 @@ export type WorkspaceMode = 'edit' | 'studio'
export type CaptureMode =
| { mode: 'idle' }
| { mode: 'standard' }
| { mode: 'preset'; isolated: AnyNodeId[] }
| {
mode: 'preset'
isolated: AnyNodeId[]
framingBounds?: {
min: [number, number]
max: [number, number]
center: [number, number]
size: [number, number]
}
}
export type Phase = 'site' | 'structure' | 'furnish'