door_models 5.4.3 → 5.4.5

package/dist/index.cjs.js

@@ -111,6 +111,7 @@ const ConfiguratorProvider = _ref => {
   const [cpid, setCpid] = React.useState("");
   const [totalHeight, setTotalHeight] = React.useState(2700);
   const [totalWidth, setTotalWidth] = React.useState(974);
+  const [totalDepth, setTotalDepth] = React.useState(103);
   const [glassVisible, setGlassVisible] = React.useState(false);
   const [glassDepth, setGlassDepth] = React.useState(8);
   const [isDoubleDoor, setIsDoubleDoor] = React.useState(false);
@@ -191,6 +192,7 @@ const ConfiguratorProvider = _ref => {
     material: "infill_material",
     depth: 20
   });
+  const [baseConfig, setBaseConfig] = React.useState(null);
   const [frameType, setFrameType] = React.useState("AF20_40");
   const [bodyType, setBodyType] = React.useState("40");
   const [exteriorFanlightType, setExteriorFanlightType] = React.useState("WPFL");
@@ -599,6 +601,9 @@ const ConfiguratorProvider = _ref => {
         };
         break;
     }
+
+    // Store pristine settings for scaling
+    setBaseConfig(newSettings);
     const isMxCaf = frameType.startsWith("MXCAF");
     setFrontCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
       visible: isMxCaf
@@ -616,8 +621,65 @@ const ConfiguratorProvider = _ref => {
         theDoorDepth: doorDepth
       }));
     }
+
+    // Sync totalDepth with the frame's default depth when frame type changes.
+    if (newSettings.frameDepth) {
+      setTotalDepth(newSettings.frameDepth);
+    }
   }, [frameType]);
 
+  // --- useEffect for scaling based on totalDepth ---
+  React.useEffect(() => {
+    if (!baseConfig || !baseConfig.frameDepth || baseConfig.frameDepth === 0) return;
+    const baseFrameDepth = baseConfig.frameDepth;
+    const ratio = totalDepth / baseFrameDepth;
+    const scaleProportionally = value => {
+      if (typeof value === "number") {
+        return value * ratio;
+      }
+      if (typeof value === "string" && value.endsWith("mm")) {
+        const num = parseFloat(value);
+        if (!isNaN(num)) {
+          return num * ratio + "mm";
+        }
+      }
+      return value; // Return original if not scalable
+    };
+    setDoorFrame(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
+      frameDepth: totalDepth,
+      doorStopDepth: scaleProportionally(baseConfig.doorStopDepth),
+      notchDepth: scaleProportionally(baseConfig.notchDepth),
+      gasketDepth: scaleProportionally(baseConfig.gasketDepth),
+      secondDoorStopDepth: scaleProportionally(baseConfig.secondDoorStopDepth)
+    }));
+    if (baseConfig.doorDepth !== undefined) {
+      const baseDoorDepth = baseConfig.doorDepth;
+      const frameDelta = totalDepth - baseFrameDepth;
+      let newDoorDepth;
+      if (frameDelta > 0) {
+        // --- THIS IS THE VALUE TO TWEAK ---
+        // Increase this multiplier to make the door body grow faster when totalDepth increases.
+        // A value of 1.0 means it grows at the same rate as the frame.
+        // A value of 2.0 means it grows twice as fast as the frame.
+        const increaseMultiplier = 0.8;
+        newDoorDepth = baseDoorDepth + frameDelta * increaseMultiplier;
+      } else {
+        // When decreasing totalDepth, the door body scales down proportionally.
+        newDoorDepth = baseDoorDepth * ratio;
+      }
+      setDoor(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
+        theDoorDepth: newDoorDepth
+      }));
+    }
+    const baseCoverPanelDepth = 12;
+    setFrontCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
+      depth: baseCoverPanelDepth * ratio
+    }));
+    setBackCoverPanel(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
+      depth: baseCoverPanelDepth * ratio
+    }));
+  }, [totalDepth, baseConfig]);
+
   // ---  Exterior Fanlight Logic ---
   React.useEffect(() => {
     if (!exteriorFanlight.visible) return;
@@ -698,6 +760,8 @@ const ConfiguratorProvider = _ref => {
       setBodyType,
       totalHeight,
       setTotalHeight,
+      totalDepth,
+      setTotalDepth,
       totalWidth,
       setTotalWidth,
       exteriorFanlightType,
@@ -823,21 +887,39 @@ const buildMaterial = (prop, textures) => {
   }
   const sourceValue = typeof prop === "string" ? prop : prop.value;
   const opacity = typeof prop === "object" ? prop.opacity : 1;
+
+  // Start with base parameters.
   const params = {
     roughness: 0.8,
     side: THREE__namespace.DoubleSide
   };
   if (isHexColor(sourceValue)) {
+    // It's a color. Explicitly set the color and ensure no texture is applied.
     params.color = sourceValue;
-  } else if (textures && textures[sourceValue]) {
-    params.map = textures[sourceValue];
+    params.map = null;
   } else {
-    const texture = new THREE__namespace.TextureLoader().load(sourceValue);
+    // It's a texture. Explicitly set the color to white to avoid tinting the texture.
+    params.color = "#ffffff";
+    let texture = null;
+    if (textures && textures[sourceValue]) {
+      // Use the pre-loaded texture.
+      texture = textures[sourceValue];
+    } else if (sourceValue) {
+      // Not pre-loaded, so load it now.
+      // TextureLoader caches results internally, so this is efficient.
+      texture = new THREE__namespace.TextureLoader().load(sourceValue);
+    }
     params.map = texture;
   }
+
+  // Handle transparency explicitly to prevent lingering state.
   if (opacity !== undefined && opacity < 1) {
     params.transparent = true;
     params.opacity = opacity;
+  } else {
+    // Explicitly turn transparency off if opacity is 1 or undefined.
+    params.transparent = false;
+    params.opacity = 1;
   }
   return new THREE__namespace.MeshStandardMaterial(params);
 };
@@ -1410,7 +1492,7 @@ function DoorModels(_ref7) {
     doorOpening: doorOpeningProp,
     totalWidth: totalWidthProp,
     totalHeight: totalHeightProp,
-    frameDepth: frameDepthProp
+    totalDepth: totalDepthProp
   } = _ref7;
   const {
     is2D,
@@ -1431,7 +1513,8 @@ function DoorModels(_ref7) {
     isDoubleDoor,
     setMaterials,
     setTotalWidth,
-    setTotalHeight
+    setTotalHeight,
+    setTotalDepth
   } = useConfigurator();
   React.useEffect(() => {
     if (doorName) {
@@ -1463,12 +1546,10 @@ function DoorModels(_ref7) {
     }
   }, [totalHeightProp, setTotalHeight]);
   React.useEffect(() => {
-    if (frameDepthProp !== undefined) {
-      setDoorFrame(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-        frameDepth: frameDepthProp
-      }));
+    if (totalDepthProp !== undefined) {
+      setTotalDepth(totalDepthProp);
     }
-  }, [frameDepthProp, setDoorFrame]);
+  }, [totalDepthProp, setTotalDepth]);
 
   // --- Material Logic (Centralized in parent component) ---
   const allMaterials = useDoorMaterials(materialsProp);
@@ -2272,7 +2353,7 @@ const DoorConfigurator = _ref => {
     is2D = false,
     totalWidth,
     totalHeight,
-    frameDepth
+    totalDepth
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(ConfiguratorProvider, {
     initialIs2D: is2D,
@@ -2283,7 +2364,7 @@ const DoorConfigurator = _ref => {
       doorOpening: doorOpening,
       totalWidth: totalWidth,
       totalHeight: totalHeight,
-      frameDepth: frameDepth
+      totalDepth: totalDepth
     })
   });
 };