door_models 5.3.2 → 5.3.4

package/dist/index.cjs.js

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var csg = require('@react-three/csg');
 var three = require('@react-spring/three');
 var THREE = require('three');
+var drei = require('@react-three/drei');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -803,20 +804,19 @@ new THREE__namespace.MeshStandardMaterial({
   roughness: 0.8
 });
 
-const textureLoader = new THREE__namespace.TextureLoader();
-textureLoader.setCrossOrigin("anonymous");
-const textureCache = {};
+// Type definition for a material prop (string or object with opacity)
+
+// Helper function to check for hex color codes
 const isHexColor = str => /^#([0-9A-F]{3}){1,2}$/i.test(str);
-const isUrl = str => str.startsWith("http") || str.startsWith("/");
-const getFirstValidValue = values => {
-  for (const val of values) {
-    if (val) {
-      return val;
-    }
-  }
-  return undefined;
-};
-const createDynamicMaterial = prop => {
+
+/**
+ * A simple "builder" that creates a THREE.MeshStandardMaterial from a prop and an
+ * optional map of pre-loaded textures. It does NOT load textures itself.
+ * @param prop - The material definition (string or object).
+ * @param textures - A map of URL -> THREE.Texture, provided by useTexture.
+ * @returns A THREE.MeshStandardMaterial instance.
+ */
+const buildMaterial = (prop, textures) => {
   if (!prop) {
     return new THREE__namespace.MeshStandardMaterial({
       color: "#cccccc",
@@ -830,12 +830,13 @@ const createDynamicMaterial = prop => {
   };
   if (isHexColor(sourceValue)) {
     params.color = sourceValue;
-  } else if (isUrl(sourceValue)) {
-    if (!textureCache[sourceValue]) {
-      textureCache[sourceValue] = textureLoader.load(sourceValue);
-    }
-    params.map = textureCache[sourceValue];
-  } else {
+  }
+  // Check if it's a URL and if it exists in the pre-loaded texture map
+  else if (textures && textures[sourceValue]) {
+    params.map = textures[sourceValue];
+  }
+  // Fallback for invalid values
+  else {
     params.color = "#cccccc";
   }
   if (opacity !== undefined && opacity < 1) {
@@ -845,45 +846,71 @@ const createDynamicMaterial = prop => {
   return new THREE__namespace.MeshStandardMaterial(params);
 };
 
-/**
- * A custom hook to generate memoized materials for the door model.
- * @param materialsProp - The materials object passed as props.
- * @returns An object containing all the necessary THREE.Material instances.
- */
+// getFirstValidValue remains useful for fallbacks, so we keep it.
+const getFirstValidValue = values => {
+  for (const val of values) {
+    if (val) {
+      return val;
+    }
+  }
+  return undefined;
+};
+
+// Re-export the type for easy access in other components
+
 const useDoorMaterials = function () {
   let materialsProp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  // --- Material Logic ---
+  // 1. Collect all unique texture URLs from the props.
+  const textureUrls = React.useMemo(() => {
+    const urls = new Set();
+    // Iterate over all passed material props
+    Object.values(materialsProp).forEach(prop => {
+      // Get the value, whether it's a string or inside an object
+      const value = typeof prop === "string" ? prop : prop === null || prop === void 0 ? void 0 : prop.value;
+      // If it's a valid URL, add it to our set to avoid duplicates
+      if (value && (value.startsWith("http") || value.startsWith("/"))) {
+        urls.add(value);
+      }
+    });
+    return Array.from(urls);
+  }, [materialsProp]);
 
-  const doorMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.Body), [materialsProp.Body]);
-  const frameMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
-  const gasketMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_GASKET), [materialsProp.D_GASKET]);
-  const doorStopMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
-  const interiorFanlightMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR), [materialsProp.D_SRF_DECOR]);
-  const exteriorFanlightMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR), [materialsProp.D_SRF_DECOR]);
-  const occulusInfillMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_FR_COLOR), [materialsProp.D_FR_COLOR]);
-  const glassInfillMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_FR_COLOR), [materialsProp.D_FR_COLOR]);
-  const frontCoverPanelMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
-  const backCoverPanelMaterial = React.useMemo(() => createDynamicMaterial(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])), [materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2]);
-  const frontDoorPlaneMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR_2), [materialsProp.D_SRF_DECOR_2]);
-  const backDoorPlaneMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.D_SRF_DECOR), [materialsProp.D_SRF_DECOR]);
-  const hingeBodyMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.Hinge), [materialsProp.Hinge]);
-  const hingeAccentMaterial = React.useMemo(() => createDynamicMaterial(materialsProp.HingeCuts), [materialsProp.HingeCuts]);
-  return React.useMemo(() => ({
-    doorMaterial,
-    frameMaterial,
-    gasketMaterial,
-    doorStopMaterial,
-    interiorFanlightMaterial,
-    exteriorFanlightMaterial,
-    occulusInfillMaterial,
-    glassInfillMaterial,
-    hingeBodyMaterial,
-    frontCoverPanelMaterial,
-    backCoverPanelMaterial,
-    frontDoorPlaneMaterial,
-    backDoorPlaneMaterial,
-    hingeAccentMaterial
-  }), [doorMaterial, frameMaterial, gasketMaterial, doorStopMaterial, interiorFanlightMaterial, exteriorFanlightMaterial, occulusInfillMaterial, glassInfillMaterial, hingeBodyMaterial, frontCoverPanelMaterial, backCoverPanelMaterial, frontDoorPlaneMaterial, backDoorPlaneMaterial, hingeAccentMaterial]);
+  // 2. Load all textures at once.
+  // !! THIS IS THE MAGIC !!
+  // `useTexture` will pause ("suspend") this component's rendering
+  // until all textures in the array are fully loaded.
+  const loadedTextures = drei.useTexture(textureUrls);
+
+  // 3. Create a map from URL back to the loaded THREE.Texture for easy lookup.
+  const textureMap = React.useMemo(() => {
+    const map = {};
+    textureUrls.forEach((url, index) => {
+      map[url] = loadedTextures[index];
+    });
+    return map;
+  }, [textureUrls, loadedTextures]);
+
+  // 4. Now that textures are guaranteed to be loaded, build all materials.
+  // This memo ensures the materials are only created when props or textures change.
+  return React.useMemo(() => {
+    const build = prop => buildMaterial(prop, textureMap);
+    return {
+      doorMaterial: build(materialsProp.Body),
+      frameMaterial: build(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])),
+      gasketMaterial: build(materialsProp.D_GASKET),
+      doorStopMaterial: build(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])),
+      interiorFanlightMaterial: build(materialsProp.D_SRF_DECOR),
+      exteriorFanlightMaterial: build(materialsProp.D_SRF_DECOR),
+      occulusInfillMaterial: build(materialsProp.D_FR_COLOR),
+      glassInfillMaterial: build(materialsProp.D_FR_COLOR),
+      frontCoverPanelMaterial: build(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])),
+      backCoverPanelMaterial: build(getFirstValidValue([materialsProp.D_PRF_COLOR, materialsProp.D_FR_SRF_DECOR, materialsProp.D_FR_SRF_DECOR_S2])),
+      frontDoorPlaneMaterial: build(materialsProp.D_SRF_DECOR_2),
+      backDoorPlaneMaterial: build(materialsProp.D_SRF_DECOR),
+      hingeBodyMaterial: build(materialsProp.Hinge),
+      hingeAccentMaterial: build(materialsProp.HingeCuts)
+    };
+  }, [materialsProp, textureMap]);
 };
 
 function StandardHandle(_ref) {
@@ -1893,7 +1920,8 @@ function DoorLeaf(_ref8) {
     doorWidth,
     doorHeight,
     theDoorDepth,
-    doorOpening
+    doorOpening,
+    doorName
   } = door;
   const {
     frameDepth,
@@ -1907,6 +1935,23 @@ function DoorLeaf(_ref8) {
     secondDoorStopDepth
   } = doorFrame;
   const initialDoorHeight = React.useRef(null);
+  React.useEffect(() => {
+    initialDoorHeight.current = null;
+  }, [doorName]);
+  React.useEffect(() => {
+    if (initialDoorHeight.current === null && doorHeight > 0) {
+      initialDoorHeight.current = doorHeight;
+    }
+  }, [doorHeight]);
+  React.useMemo(() => {
+    if (initialDoorHeight.current === null) {
+      return 0;
+    }
+    return (doorHeight - initialDoorHeight.current) / 2 / 1000;
+  }, [doorHeight]);
+
+  // Old
+
   React.useEffect(() => {
     if (doorHeight > 0 && initialDoorHeight.current === null) {
       initialDoorHeight.current = doorHeight;