Refine window panel by family

packages/nodes/src/window/panel.tsx

@@ -328,17 +328,38 @@ export default function WindowPanel() {
   const maxRoundedRadius = Math.max(0.01, getMaxSharedWindowRadius(node.width, node.height))
   const displayedWindowType = node.windowType === 'hopper' ? 'awning' : (node.windowType ?? 'fixed')
   const awningDirection = node.windowType === 'hopper' ? 'down' : (node.awningDirection ?? 'up')
-  const isOperableWindow =
+  const windowType = node.windowType ?? 'fixed'
-    node.windowType === 'sliding' ||
+  const isFixedWindow = windowType === 'fixed'
-    node.windowType === 'casement' ||
+  const isTrackSashWindow =
-    node.windowType === 'awning' ||
+    windowType === 'sliding' || windowType === 'single-hung' || windowType === 'double-hung'
-    node.windowType === 'hopper' ||
+  const isOperableSashWindow =
-    node.windowType === 'single-hung' ||
+    windowType === 'casement' ||
-    node.windowType === 'double-hung' ||
+    windowType === 'awning' ||
-    node.windowType === 'louvered'
+    windowType === 'hopper' ||
+    windowType === 'louvered'
+  const isOperableWindow = isTrackSashWindow || isOperableSashWindow
   const supportsWindowShape = shapedWindowTypes.has(node.windowType ?? 'fixed')
-  const supportsGrid = node.windowType === 'fixed'
+  const supportsGrid = isFixedWindow
   const supportsSill = !silllessWindowTypes.has(node.windowType)
+  const showWindowTypeSection = !isOpening
+  const showWindowShapeSection = !isOpening && supportsWindowShape
+  const showOpeningShapeSection = isOpening
+  const showFrameSection = !isOpening
+  const showGridSection = !isOpening && supportsGrid
+  const showSillSection = !isOpening && supportsSill
+  const showOperationSection = !isOpening && isOperableWindow
+  const showAwningDirectionSection = !isOpening && displayedWindowType === 'awning'
+  const showCasementSection = !isOpening && windowType === 'casement'
+  const showFlipSide = !isOpening
+  const operationLabel = isTrackSashWindow
+    ? windowType === 'sliding'
+      ? 'Slide'
+      : 'Raise'
+    : windowType === 'casement'
+      ? 'Swing'
+      : windowType === 'louvered'
+        ? 'Slats'
+        : 'Tilt'
 
   const setOperationState = (value: number) => {
     useInteractive.getState().cancelWindowAnimation(node.id)
@@ -472,7 +493,7 @@ export default function WindowPanel() {
         />
       </PanelSection>
 
-      {!isOpening && (
+      {showWindowTypeSection && (
         <PanelSection title="Window Type">
           <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
             {windowTypeOptions.map((option) => {
@@ -503,7 +524,7 @@ export default function WindowPanel() {
               )
             })}
           </div>
-          {displayedWindowType === 'awning' && (
+          {showAwningDirectionSection && (
             <div className="mt-2">
               <SegmentedControl
                 onChange={(value) =>
@@ -520,7 +541,7 @@ export default function WindowPanel() {
               />
             </div>
           )}
-          {node.windowType === 'casement' && (
+          {showCasementSection && (
             <div className="mt-2 space-y-2">
               <SegmentedControl
                 onChange={(value) =>
@@ -546,10 +567,10 @@ export default function WindowPanel() {
               )}
             </div>
           )}
-          {isOperableWindow && (
+          {showOperationSection && (
             <div className="mt-2">
               <SliderControl
-                label="Open"
+                label={operationLabel}
                 max={1}
                 min={0}
                 onChange={setOperationState}
@@ -588,7 +609,7 @@ export default function WindowPanel() {
           unit="m"
           value={Math.round(node.position[1] * 100) / 100}
         />
-        {!isOpening && (
+        {showFlipSide && (
           <div className="px-1 pt-2 pb-1">
             <ActionButton
               className="w-full"
@@ -623,8 +644,8 @@ export default function WindowPanel() {
         />
       </PanelSection>
 
-      {!isOpening && supportsWindowShape && (
+      {showWindowShapeSection && (
-        <PanelSection title="Corner Shape">
+        <PanelSection title="Top Shape">
           <SegmentedControl
             onChange={(value) =>
               handleUpdate({
@@ -726,7 +747,7 @@ export default function WindowPanel() {
         </PanelSection>
       )}
 
-      {isOpening && (
+      {showOpeningShapeSection && (
         <PanelSection title="Opening Shape">
           <SegmentedControl
             onChange={(value) =>
@@ -819,7 +840,8 @@ export default function WindowPanel() {
 
       {!isOpening && (
         <>
-          <PanelSection title="Frame">
+          {showFrameSection && (
+            <PanelSection title="Frame">
             <SliderControl
               label="Thickness"
               min={0}
@@ -838,9 +860,10 @@ export default function WindowPanel() {
               unit="m"
               value={Math.round(node.frameDepth * 1000) / 1000}
             />
-          </PanelSection>
+            </PanelSection>
+          )}
 
-          {supportsGrid && (
+          {showGridSection && (
             <PanelSection title="Grid">
               <SliderControl
                 label="Columns"
@@ -935,7 +958,7 @@ export default function WindowPanel() {
             </PanelSection>
           )}
 
-          {supportsSill && (
+          {showSillSection && (
             <PanelSection title="Sill">
               <ToggleControl
                 checked={node.sill}