Hide inapplicable door and window panel settings

packages/editor/src/components/ui/panels/door-panel.tsx

@@ -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,6 +1004,7 @@ export function DoorPanel() {
       {isSwingDoor && (
         <PanelSection title="Swing">
           <div className="flex flex-col gap-2 px-1 pb-1">
+            {supportsHingeSide && (
               <div className="space-y-1">
                 <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
                   Hinges Side
@@ -1003,6 +1018,7 @@ export function DoorPanel() {
                   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

@@ -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']>([
+const shapedWindowTypes = new Set<WindowNode['windowType']>([
-  'sliding',
+  'fixed',
-  'single-hung',
+  'casement',
-  'double-hung',
+  'awning',
-  'bay',
+  'hopper',
-  'bow',
+  '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,6 +823,7 @@ export function WindowPanel() {
             />
           </PanelSection>
 
+          {supportsGrid && (
             <PanelSection title="Grid">
               <SliderControl
                 label="Columns"
@@ -906,7 +916,9 @@ export function WindowPanel() {
                 </div>
               )}
             </PanelSection>
+          )}
 
+          {supportsSill && (
             <PanelSection title="Sill">
               <ToggleControl
                 checked={node.sill}
@@ -936,6 +948,7 @@ export function WindowPanel() {
                 </div>
               )}
             </PanelSection>
+          )}
         </>
       )}