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

Hide inapplicable door and window panel settings

Browse Source
This commit is contained in:
sudhir
2026-05-12 00:05:41 +05:30
parent be41511474
commit d78308b366
2 changed files with 167 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor/src/components/ui/panels/door-panel.tsx
+33 -17
View File
@@ -127,8 +127,11 @@ export function DoorPanel() {
const handleUpdate = useCallback(
(updates: Partial<DoorNode>) => {
if (!(selectedId && node)) return
const liveNode = useScene.getState().nodes[selectedId as AnyNodeId]
if (liveNode?.type !== 'door') return
const hasChange = Object.entries(updates).some(([key, value]) => {
const currentValue = node[key as keyof DoorNode]
const currentValue = liveNode[key as keyof DoorNode]
return !isSameDoorValue(currentValue, value)
})
if (!hasChange) return
@@ -137,7 +140,9 @@ export function DoorPanel() {
useInteractive.getState().removeDoorOpenState(selectedId as AnyNodeId)
}
updateNode(selectedId as AnyNode['id'], updates)
useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
const scene = useScene.getState()
scene.dirtyNodes.add(selectedId as AnyNodeId)
if (liveNode.parentId) scene.dirtyNodes.add(liveNode.parentId as AnyNodeId)
},
[selectedId, node, updateNode],
)
@@ -348,7 +353,9 @@ export function DoorPanel() {
const isRollupGarageDoor = doorType === 'garage-rollup'
const isTiltupGarageDoor = doorType === 'garage-tiltup'
const typeMode = isOpening ? 'opening' : isGarageDoor ? 'garage' : 'door'
const supportsHandleSide = isSwingDoor
const supportsHingeSide = doorType === 'hinged'
const supportsHandleSide = doorType === 'hinged'
const supportsTopShape = !isGarageDoor
const maxDoorWidth = isGarageDoor ? 6 : 3
const setOpeningTopRadius = (index: number, value: number, commit = false) => {
@@ -395,6 +402,7 @@ export function DoorPanel() {
handleSide: 'right',
trackStyle: 'visible',
operationState: Math.max(node.operationState ?? 0, 0.65),
threshold: false,
contentPadding: [0.03, 0.04],
segments: foldingDoorSegments,
}
@@ -411,6 +419,7 @@ export function DoorPanel() {
trackStyle: 'pocket',
slideDirection: node.slideDirection ?? 'left',
operationState: node.operationState ?? 0,
threshold: false,
contentPadding: [0.035, 0.045],
segments: foldingDoorSegments,
}
@@ -427,6 +436,7 @@ export function DoorPanel() {
trackStyle: 'visible',
slideDirection: node.slideDirection ?? 'left',
operationState: node.operationState ?? 0,
threshold: false,
contentPadding: [0.035, 0.045],
segments: foldingDoorSegments,
}
@@ -443,6 +453,7 @@ export function DoorPanel() {
trackStyle: 'visible',
slideDirection: node.slideDirection ?? 'left',
operationState: node.operationState ?? 0,
threshold: false,
contentPadding: [0.03, 0.04],
segments: frenchDoorSegments,
}
@@ -456,6 +467,7 @@ export function DoorPanel() {
...dimensionUpdates,
handle: false,
threshold: false,
openingShape: 'rectangle',
trackStyle: 'overhead',
operationState: 0,
garagePanelCount: Math.max(3, Math.min(8, node.garagePanelCount ?? 4)),
@@ -472,6 +484,7 @@ export function DoorPanel() {
...dimensionUpdates,
handle: false,
threshold: false,
openingShape: 'rectangle',
trackStyle: 'overhead',
operationState: 0,
garagePanelCount: 4,
@@ -488,6 +501,7 @@ export function DoorPanel() {
...dimensionUpdates,
handle: false,
threshold: false,
openingShape: 'rectangle',
trackStyle: 'overhead',
operationState: 0,
garagePanelCount: 4,
@@ -738,7 +752,7 @@ export function DoorPanel() {
/>
</PanelSection>
{!isOpening && (
{!isOpening && supportsTopShape && (
<PanelSection title="Top Shape">
<div className="flex flex-col gap-2 px-1 pb-1">
<SegmentedControl
@@ -990,19 +1004,21 @@ export function DoorPanel() {
{isSwingDoor && (
<PanelSection title="Swing">
<div className="flex flex-col gap-2 px-1 pb-1">
<div className="space-y-1">
<span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Hinges Side
</span>
<SegmentedControl
onChange={(v) => handleUpdate({ hingesSide: v })}
options={[
{ label: 'Left', value: 'left' },
{ label: 'Right', value: 'right' },
]}
value={node.hingesSide}
/>
</div>
{supportsHingeSide && (
<div className="space-y-1">
<span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Hinges Side
</span>
<SegmentedControl
onChange={(v) => handleUpdate({ hingesSide: v })}
options={[
{ label: 'Left', value: 'left' },
{ label: 'Right', value: 'right' },
]}
value={node.hingesSide}
/>
</div>
)}
<div className="space-y-1">
<span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Direction
packages/editor/src/components/ui/panels/window-panel.tsx
+134 -121
View File
@@ -16,7 +16,6 @@ import { cn } from '../../../lib/utils'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { ActionButton, ActionGroup } from '../controls/action-button'
import { MetricControl } from '../controls/metric-control'
import { PanelSection } from '../controls/panel-section'
import { SegmentedControl } from '../controls/segmented-control'
import { SliderControl } from '../controls/slider-control'
@@ -81,14 +80,16 @@ const windowTypeOptions: Array<{ label: string; value: WindowNode['windowType']
{ label: 'Louvered', value: 'louvered' },
]
const rectangleOnlyWindowTypes = new Set<WindowNode['windowType']>([
'sliding',
'single-hung',
'double-hung',
'bay',
'bow',
const shapedWindowTypes = new Set<WindowNode['windowType']>([
'fixed',
'casement',
'awning',
'hopper',
'louvered',
])
const silllessWindowTypes = new Set<WindowNode['windowType']>(['bay', 'bow'])
export function WindowPanel() {
const selectedId = useViewer((s) => s.selection.selectedIds[0])
const setSelection = useViewer((s) => s.setSelection)
@@ -110,14 +111,19 @@ export function WindowPanel() {
const handleUpdate = useCallback(
(updates: Partial<WindowNode>) => {
if (!(selectedId && node)) return
const liveNode = useScene.getState().nodes[selectedId as AnyNodeId]
if (liveNode?.type !== 'window') return
const hasChange = Object.entries(updates).some(([key, value]) => {
const currentValue = node[key as keyof WindowNode]
const currentValue = liveNode[key as keyof WindowNode]
return !isSameWindowValue(currentValue, value)
})
if (!hasChange) return
updateNode(selectedId as AnyNode['id'], updates)
useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
const scene = useScene.getState()
scene.dirtyNodes.add(selectedId as AnyNodeId)
if (liveNode.parentId) scene.dirtyNodes.add(liveNode.parentId as AnyNodeId)
},
[selectedId, node, updateNode],
)
@@ -316,6 +322,9 @@ export function WindowPanel() {
node.windowType === 'single-hung' ||
node.windowType === 'double-hung' ||
node.windowType === 'louvered'
const supportsWindowShape = shapedWindowTypes.has(node.windowType ?? 'fixed')
const supportsGrid = node.windowType === 'fixed'
const supportsSill = !silllessWindowTypes.has(node.windowType)
const setOperationState = (value: number) => {
useInteractive.getState().cancelWindowAnimation(node.id)
@@ -464,10 +473,10 @@ export function WindowPanel() {
handleUpdate({
windowType: option.value,
...(option.value === 'awning' ? { awningDirection } : {}),
...(rectangleOnlyWindowTypes.has(option.value)
...(!shapedWindowTypes.has(option.value)
? { openingShape: 'rectangle' }
: {}),
...(option.value === 'bay' || option.value === 'bow' ? { sill: false } : {}),
...(silllessWindowTypes.has(option.value) ? { sill: false } : {}),
})
}
type="button"
@@ -597,7 +606,7 @@ export function WindowPanel() {
/>
</PanelSection>
{!isOpening && !rectangleOnlyWindowTypes.has(node.windowType) && (
{!isOpening && supportsWindowShape && (
<PanelSection title="Corner Shape">
<SegmentedControl
onChange={(value) =>
@@ -814,128 +823,132 @@ export function WindowPanel() {
/>
</PanelSection>
<PanelSection title="Grid">
<SliderControl
label="Columns"
max={8}
min={1}
onChange={(v) => {
const n = Math.max(1, Math.min(8, Math.round(v)))
handleUpdate({ columnRatios: Array(n).fill(1 / n) })
}}
precision={0}
step={1}
value={numCols}
/>
<SliderControl
label="Rows"
max={8}
min={1}
onChange={(v) => {
const n = Math.max(1, Math.min(8, Math.round(v)))
handleUpdate({ rowRatios: Array(n).fill(1 / n) })
}}
precision={0}
step={1}
value={numRows}
/>
{supportsGrid && (
<PanelSection title="Grid">
<SliderControl
label="Columns"
max={8}
min={1}
onChange={(v) => {
const n = Math.max(1, Math.min(8, Math.round(v)))
handleUpdate({ columnRatios: Array(n).fill(1 / n) })
}}
precision={0}
step={1}
value={numCols}
/>
<SliderControl
label="Rows"
max={8}
min={1}
onChange={(v) => {
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 && (
<div className="mt-2 flex flex-col gap-1">
<div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Col Widths
{numCols > 1 && (
<div className="mt-2 flex flex-col gap-1">
<div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Col Widths
</div>
{normCols.map((ratio, i) => (
<SliderControl
key={`c-${i}`}
label={`C${i + 1}`}
max={95}
min={5}
onChange={(v) => setColumnRatio(i, v / 100)}
precision={1}
step={1}
unit="%"
value={Math.round(ratio * 100 * 10) / 10}
/>
))}
<div className="mt-1 border-border/50 border-t pt-1">
<SliderControl
label="Divider"
max={0.1}
min={0.005}
onChange={(v) => handleUpdate({ columnDividerThickness: v })}
precision={3}
step={0.01}
unit="m"
value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
/>
</div>
</div>
{normCols.map((ratio, i) => (
)}
{numRows > 1 && (
<div className="mt-2 flex flex-col gap-1">
<div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Row Heights
</div>
{normRows.map((ratio, i) => (
<SliderControl
key={`r-${i}`}
label={`R${i + 1}`}
max={95}
min={5}
onChange={(v) => setRowRatio(i, v / 100)}
precision={1}
step={1}
unit="%"
value={Math.round(ratio * 100 * 10) / 10}
/>
))}
<div className="mt-1 border-border/50 border-t pt-1">
<SliderControl
label="Divider"
max={0.1}
min={0.005}
onChange={(v) => handleUpdate({ rowDividerThickness: v })}
precision={3}
step={0.01}
unit="m"
value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
/>
</div>
</div>
)}
</PanelSection>
)}
{supportsSill && (
<PanelSection title="Sill">
<ToggleControl
checked={node.sill}
label="Enable Sill"
onChange={(checked) => handleUpdate({ sill: checked })}
/>
{node.sill && (
<div className="mt-1 flex flex-col gap-1">
<SliderControl
key={`c-${i}`}
label={`C${i + 1}`}
max={95}
min={5}
onChange={(v) => setColumnRatio(i, v / 100)}
precision={1}
step={1}
unit="%"
value={Math.round(ratio * 100 * 10) / 10}
/>
))}
<div className="mt-1 border-border/50 border-t pt-1">
<SliderControl
label="Divider"
max={0.1}
min={0.005}
onChange={(v) => handleUpdate({ columnDividerThickness: v })}
label="Depth"
min={0}
onChange={(v) => handleUpdate({ sillDepth: v })}
precision={3}
step={0.01}
unit="m"
value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
value={Math.round(node.sillDepth * 1000) / 1000}
/>
</div>
</div>
)}
{numRows > 1 && (
<div className="mt-2 flex flex-col gap-1">
<div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
Row Heights
</div>
{normRows.map((ratio, i) => (
<SliderControl
key={`r-${i}`}
label={`R${i + 1}`}
max={95}
min={5}
onChange={(v) => setRowRatio(i, v / 100)}
precision={1}
step={1}
unit="%"
value={Math.round(ratio * 100 * 10) / 10}
/>
))}
<div className="mt-1 border-border/50 border-t pt-1">
<SliderControl
label="Divider"
max={0.1}
min={0.005}
onChange={(v) => handleUpdate({ rowDividerThickness: v })}
label="Thickness"
min={0}
onChange={(v) => handleUpdate({ sillThickness: v })}
precision={3}
step={0.01}
unit="m"
value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
value={Math.round(node.sillThickness * 1000) / 1000}
/>
</div>
</div>
)}
</PanelSection>
<PanelSection title="Sill">
<ToggleControl
checked={node.sill}
label="Enable Sill"
onChange={(checked) => handleUpdate({ sill: checked })}
/>
{node.sill && (
<div className="mt-1 flex flex-col gap-1">
<SliderControl
label="Depth"
min={0}
onChange={(v) => handleUpdate({ sillDepth: v })}
precision={3}
step={0.01}
unit="m"
value={Math.round(node.sillDepth * 1000) / 1000}
/>
<SliderControl
label="Thickness"
min={0}
onChange={(v) => handleUpdate({ sillThickness: v })}
precision={3}
step={0.01}
unit="m"
value={Math.round(node.sillThickness * 1000) / 1000}
/>
</div>
)}
</PanelSection>
)}
</PanelSection>
)}
</>
)}