Organize door panel controls by door family
This commit is contained in:
@@ -390,21 +390,37 @@ export default function DoorPanel() {
|
||||
const openingRevealRadius = node.openingRevealRadius ?? 0.025
|
||||
const maxRoundedRadius = Math.max(0.01, Math.min(node.width / 2, node.height))
|
||||
const doorType = node.doorType ?? 'hinged'
|
||||
const isSwingDoor = doorType === 'hinged' || doorType === 'double' || doorType === 'french'
|
||||
const isSlidingDoor = doorType === 'pocket' || doorType === 'barn' || doorType === 'sliding'
|
||||
const isGarageDoor = node.doorCategory === 'garage' || doorType.startsWith('garage-')
|
||||
const isSwingDoor = doorType === 'hinged' || doorType === 'double' || doorType === 'french'
|
||||
const isSlideFoldDoor =
|
||||
doorType === 'folding' ||
|
||||
doorType === 'pocket' ||
|
||||
doorType === 'barn' ||
|
||||
doorType === 'sliding'
|
||||
const isSlidingDoor = doorType === 'pocket' || doorType === 'barn' || doorType === 'sliding'
|
||||
const isFoldingDoor = doorType === 'folding'
|
||||
const isSectionalGarageDoor = doorType === 'garage-sectional'
|
||||
const isRollupGarageDoor = doorType === 'garage-rollup'
|
||||
const isTiltupGarageDoor = doorType === 'garage-tiltup'
|
||||
const typeMode = isOpening ? 'opening' : isGarageDoor ? 'garage' : 'door'
|
||||
const isCutoutOnly = isOpening
|
||||
const typeMode = isCutoutOnly ? 'opening' : isGarageDoor ? 'garage' : 'door'
|
||||
const supportsHingeSide = doorType === 'hinged'
|
||||
const supportsHandleSide = doorType === 'hinged'
|
||||
const supportsTopShape =
|
||||
!isGarageDoor &&
|
||||
doorType !== 'folding' &&
|
||||
doorType !== 'pocket' &&
|
||||
doorType !== 'barn' &&
|
||||
doorType !== 'sliding'
|
||||
const supportsTopShape = isSwingDoor
|
||||
const showFlipSide = !isCutoutOnly
|
||||
const showFoldSection = isFoldingDoor && !isCutoutOnly
|
||||
const showSlideSection = isSlidingDoor && !isCutoutOnly
|
||||
const showGarageSection =
|
||||
(isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) && !isCutoutOnly
|
||||
const showOpeningShapeSection = isCutoutOnly
|
||||
const showDoorShapeSection = !isCutoutOnly && supportsTopShape
|
||||
const showFrameSection = !isCutoutOnly
|
||||
const showContentPaddingSection = !isCutoutOnly && !isGarageDoor
|
||||
const showSwingSection = isSwingDoor
|
||||
const showThresholdSection = isSwingDoor
|
||||
const showHandleSection = isSwingDoor
|
||||
const showHardwareSection = isSwingDoor
|
||||
const showSegmentsSection = !isCutoutOnly && !isGarageDoor
|
||||
const maxDoorWidth = isGarageDoor ? 6 : 3
|
||||
|
||||
const setOpeningTopRadius = (index: number, value: number, commit = false) => {
|
||||
@@ -679,7 +695,7 @@ export default function DoorPanel() {
|
||||
unit="m"
|
||||
value={Math.round(node.position[0] * 100) / 100}
|
||||
/>
|
||||
{!isOpening && (
|
||||
{showFlipSide && (
|
||||
<div className="px-1 pt-2 pb-1">
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
@@ -691,7 +707,7 @@ export default function DoorPanel() {
|
||||
)}
|
||||
</PanelSection>
|
||||
|
||||
{doorType === 'folding' && !isOpening && (
|
||||
{showFoldSection && (
|
||||
<PanelSection title="Fold">
|
||||
<div className="flex flex-col gap-2 px-1 pb-1">
|
||||
<div className="space-y-1">
|
||||
@@ -722,7 +738,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{isSlidingDoor && !isOpening && (
|
||||
{showSlideSection && (
|
||||
<PanelSection title="Slide">
|
||||
<div className="flex flex-col gap-2 px-1 pb-1">
|
||||
<div className="space-y-1">
|
||||
@@ -753,7 +769,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{(isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) && !isOpening && (
|
||||
{showGarageSection && (
|
||||
<PanelSection title="Garage">
|
||||
<SliderControl
|
||||
label="Open"
|
||||
@@ -808,7 +824,7 @@ export default function DoorPanel() {
|
||||
/>
|
||||
</PanelSection>
|
||||
|
||||
{!isOpening && supportsTopShape && (
|
||||
{showDoorShapeSection && (
|
||||
<PanelSection title="Top Shape">
|
||||
<div className="flex flex-col gap-2 px-1 pb-1">
|
||||
<SegmentedControl
|
||||
@@ -910,7 +926,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{isOpening && (
|
||||
{showOpeningShapeSection && (
|
||||
<PanelSection title="Opening Shape">
|
||||
<div className="flex flex-col gap-2 px-1 pb-1">
|
||||
<SegmentedControl
|
||||
@@ -1007,9 +1023,10 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{!isOpening && (
|
||||
{!isCutoutOnly && (
|
||||
<>
|
||||
<PanelSection title="Frame">
|
||||
{showFrameSection && (
|
||||
<PanelSection title="Frame">
|
||||
<SliderControl
|
||||
label="Thickness"
|
||||
max={0.2}
|
||||
@@ -1030,9 +1047,10 @@ export default function DoorPanel() {
|
||||
unit="m"
|
||||
value={Math.round(node.frameDepth * 1000) / 1000}
|
||||
/>
|
||||
</PanelSection>
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{!isGarageDoor && (
|
||||
{showContentPaddingSection && (
|
||||
<PanelSection title="Content Padding">
|
||||
<SliderControl
|
||||
label="Horizontal"
|
||||
@@ -1057,7 +1075,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{isSwingDoor && (
|
||||
{showSwingSection && (
|
||||
<PanelSection title="Swing">
|
||||
<div className="flex flex-col gap-2 px-1 pb-1">
|
||||
{supportsHingeSide && (
|
||||
@@ -1092,7 +1110,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{isSwingDoor && (
|
||||
{showThresholdSection && (
|
||||
<PanelSection title="Threshold">
|
||||
<ToggleControl
|
||||
checked={node.threshold}
|
||||
@@ -1116,7 +1134,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{!isGarageDoor && (
|
||||
{showHandleSection && (
|
||||
<PanelSection title="Handle">
|
||||
{isSwingDoor && (
|
||||
<ToggleControl
|
||||
@@ -1157,7 +1175,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{isSwingDoor && (
|
||||
{showHardwareSection && (
|
||||
<PanelSection title="Hardware">
|
||||
<ToggleControl
|
||||
checked={node.doorCloser}
|
||||
@@ -1186,7 +1204,7 @@ export default function DoorPanel() {
|
||||
</PanelSection>
|
||||
)}
|
||||
|
||||
{!isGarageDoor && (
|
||||
{showSegmentsSection && (
|
||||
<PanelSection title="Segments">
|
||||
{node.segments.map((seg, i) => {
|
||||
const numCols = seg.columnRatios.length
|
||||
|
||||
Reference in New Issue
Block a user