door_models 5.2.1 → 5.2.3

package/dist/index.cjs.js

@@ -100,8 +100,10 @@ const ConfiguratorContext = /*#__PURE__*/React.createContext(undefined);
 const ConfiguratorProvider = _ref => {
   let {
     children,
-    initialIs2D = false
+    initialIs2D = false,
+    initialMaterials = {}
   } = _ref;
+  const [materials, setMaterials] = React.useState(initialMaterials);
   const [is2D, setIs2D] = React.useState(initialIs2D);
   const [isPlaneVisible, setIsPlaneVisible] = React.useState(false);
   const [isFrameVisible, setIsFrameVisible] = React.useState(true);
@@ -189,8 +191,6 @@ const ConfiguratorProvider = _ref => {
     depth: 20
   });
   const defaultOptions = ["D_PRF_COLOR", "D_FR_SRF_DECOR", "D_FR_SRF_DECOR_S2"];
-
-  // Function to pick the first valid value
   function getFirstValidValue(values, isValid) {
     for (const val of values) {
       if (isValid(val)) return val;
@@ -223,6 +223,11 @@ const ConfiguratorProvider = _ref => {
   React.useEffect(() => {
     setIs2D(initialIs2D);
   }, [initialIs2D]);
+  React.useEffect(() => {
+    if (initialMaterials) {
+      setMaterials(initialMaterials);
+    }
+  }, [initialMaterials]);
   const handleParseCpid = React.useCallback(cpidToParse => {
     const showMessage = function (text) {
       let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "error";
@@ -685,6 +690,7 @@ const ConfiguratorProvider = _ref => {
   }, [totalWidth, doorFrame.sidesThk, isDoubleDoor]);
   return /*#__PURE__*/jsxRuntime.jsx(ConfiguratorContext.Provider, {
     value: {
+      materials,
       is2D,
       setIs2D,
       isPlaneVisible,
@@ -771,76 +777,63 @@ const useConfigurator = () => {
   return context;
 };
 
+// Keep the textureLoader instance
 const textureLoader = new THREE__namespace.TextureLoader();
-const bodyInt = textureLoader.load("https://backend.tecnibo.com/api/plan2dimage?versionId=2cbb5eef-2f38-46ce-9e9f-6297753bde61&file=2cbb5eef-2f38-46ce-9e9f-6297753bde61-1759389624942.png");
-const bodyExt = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
-const frameAlu = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
-const frameWoodenInt = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
-textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
-const wdg = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
-const gasket = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
-bodyInt.wrapS = THREE__namespace.RepeatWrapping;
-bodyInt.wrapT = THREE__namespace.RepeatWrapping;
-bodyExt.wrapS = THREE__namespace.RepeatWrapping;
-bodyExt.wrapT = THREE__namespace.RepeatWrapping;
+
+// This is your new core logic. It's self-contained.
+const isUrl = string => {
+  try {
+    new URL(string);
+    return true;
+  } catch (_) {
+    return false;
+  }
+};
+const createMaterialFromProp = value => {
+  if (!value) return null;
+
+  // Handle HEX colors
+  if (value.startsWith("#")) {
+    return new THREE__namespace.MeshStandardMaterial({
+      color: value,
+      roughness: 0.8
+    });
+  }
+
+  // Handle URLs
+  if (isUrl(value)) {
+    const texture = textureLoader.load(value);
+    texture.wrapS = THREE__namespace.RepeatWrapping;
+    texture.wrapT = THREE__namespace.RepeatWrapping;
+    return new THREE__namespace.MeshStandardMaterial({
+      map: texture,
+      roughness: 0.8
+    });
+  }
+
+  // It's good practice to return null if the format is not recognized.
+  return null;
+};
+
+// --- REMOVED THE ENTIRE `availableMaterials` OBJECT ---
+// It is no longer needed.
+
+// Keep placeholder materials as a fallback if a material prop isn't provided
+const placeholderMaterial = new THREE__namespace.MeshStandardMaterial({
+  color: "#cccccc",
+  // A neutral grey
+  roughness: 0.8
+});
+const placeholderMaterialforFrames = new THREE__namespace.MeshStandardMaterial({
+  color: "#555555",
+  // A darker grey for frames
+  roughness: 0.8
+});
+
 const availableMaterials = {
-  D_SRF_DECOR_2: new THREE__namespace.MeshStandardMaterial({
-    map: bodyInt,
-    roughness: 0.8
-  }),
-  D_SRF_DECOR: new THREE__namespace.MeshStandardMaterial({
-    map: bodyExt,
-    roughness: 0.8
-  }),
-  D_PRF_COLOR: new THREE__namespace.MeshStandardMaterial({
-    map: frameAlu,
-    roughness: 0.8
-  }),
-  D_FR_SRF_DECOR: new THREE__namespace.MeshStandardMaterial({
-    map: frameWoodenInt,
-    roughness: 0.8
-  }),
-  D_FR_SRF_DECOR_S2: new THREE__namespace.MeshStandardMaterial({
-    map: frameWoodenInt,
-    roughness: 0.8
-  }),
-  D_FR_COLOR: new THREE__namespace.MeshStandardMaterial({
-    map: wdg,
-    roughness: 0.8
-  }),
-  D_GASKET: new THREE__namespace.MeshStandardMaterial({
-    map: gasket,
-    roughness: 0.8
-  }),
   black: new THREE__namespace.MeshStandardMaterial({
     color: "#000000"
   }),
-  metal: new THREE__namespace.MeshStandardMaterial({
-    color: "#aaaaaa",
-    metalness: 1.0,
-    roughness: 0.4
-  }),
-  darkgrey: new THREE__namespace.MeshStandardMaterial({
-    color: "#5e5e5e"
-  }),
-  grey: new THREE__namespace.MeshStandardMaterial({
-    color: "#cccccc"
-  }),
-  yellow: new THREE__namespace.MeshStandardMaterial({
-    color: "#ffff00"
-  }),
-  darkBrown: new THREE__namespace.MeshStandardMaterial({
-    color: "#a0522d"
-  }),
-  brown: new THREE__namespace.MeshStandardMaterial({
-    color: "#d2b48c"
-  }),
-  glass: new THREE__namespace.MeshStandardMaterial({
-    color: "#ffffff",
-    roughness: 0.1,
-    transparent: true,
-    opacity: 0.7
-  }),
   aluminum: new THREE__namespace.MeshStandardMaterial({
     color: "#abb0aa",
     metalness: 0.8,
@@ -858,39 +851,10 @@ const availableMaterials = {
     metalness: 0.8,
     roughness: 0.5,
     envMapIntensity: 1.2
-  }),
-  silver: new THREE__namespace.MeshStandardMaterial({
-    color: "#c0c0c0",
-    metalness: 1.0,
-    roughness: 0.2
-  }),
-  gold: new THREE__namespace.MeshStandardMaterial({
-    color: "#ffd700",
-    metalness: 1.0,
-    roughness: 0.3
-  }),
-  diamond: new THREE__namespace.MeshStandardMaterial({
-    color: "#e0f7fa",
-    metalness: 0.9,
-    roughness: 0.05,
-    transparent: true,
-    opacity: 0.9,
-    envMapIntensity: 1.5
-  }),
-  test_material: new THREE__namespace.MeshStandardMaterial({
-    color: "red",
-    roughness: 0.1
   })
 };
-const placeholderMaterial = new THREE__namespace.MeshStandardMaterial({
-  color: "#cccccc",
-  roughness: 0.8
-});
-const placeholderMaterialforFrames = new THREE__namespace.MeshStandardMaterial({
-  color: "#000",
-  roughness: 0.8
-});
 
+// Custom hook for door handle calculations
 function StandardHandle(_ref) {
   let {
     position,
@@ -1392,7 +1356,8 @@ function DoorModels(_ref7) {
     glassDepth,
     cpid,
     handleParseCpid,
-    isDoubleDoor
+    isDoubleDoor,
+    materials
   } = useConfigurator();
   React.useEffect(() => {
     if (doorName) {
@@ -1434,29 +1399,36 @@ function DoorModels(_ref7) {
   const {
     material: backDoorPlaneMaterialName
   } = backDoorPlane;
-
+  const pers = React.useMemo(() => {
+    const dynamicMaterials = {};
+    for (const key in materials) {
+      if (Object.prototype.hasOwnProperty.call(materials, key)) {
+        const value = materials[key];
+        dynamicMaterials[key] = createMaterialFromProp(value);
+      }
+    }
+    return dynamicMaterials;
+  }, [materials]);
   // --- Material Logic ---
-  React.useMemo(() => availableMaterials[testDoorMaterial] || availableMaterials[doorMaterialName] || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
-  const frameMaterial = React.useMemo(() => availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
-  const gasketMaterial = React.useMemo(() => availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
-    color: "#111111"
-  }), [testGasketMaterial, gasketMaterialName]);
+  React.useMemo(() => placeholderMaterial, [testDoorMaterial, doorMaterialName]);
+  const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
+  const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials.black, [testGasketMaterial, gasketMaterialName]);
   const doorStopMaterial = React.useMemo(() => {
-    return availableMaterials[testDoorStopMaterial] || availableMaterials[doorStopMaterialName || ""] || frameMaterial;
+    return pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || frameMaterial;
   }, [testDoorStopMaterial, doorStopMaterialName, frameType, frameMaterial]);
-  const interiorFanlightMaterial = React.useMemo(() => availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
-  const exteriorFanlightMaterial = React.useMemo(() => availableMaterials[testExteriorFanlightMaterial] || availableMaterials[exteriorFanlightMaterialName] || placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
-  React.useMemo(() => availableMaterials[testOcculusInfillMaterial] || availableMaterials[occulusInfillMaterialName] || placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
-  const glassInfillMaterial = React.useMemo(() => availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
-  React.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || new THREE__namespace.MeshStandardMaterial({
+  const interiorFanlightMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
+  const exteriorFanlightMaterial = React.useMemo(() => placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
+  React.useMemo(() => placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
+  const glassInfillMaterial = React.useMemo(() => pers.D_FR_COLOR || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
+  React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#d4d4d4",
     metalness: 1.0,
     roughness: 0.4
   }), [testHingeMaterial, hingeMaterialName]);
-  const frontCoverPanelMaterial = React.useMemo(() => availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
-  const backCoverPanelMaterial = React.useMemo(() => availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
-  React.useMemo(() => availableMaterials[testFrontDoorPlaneMaterial] || availableMaterials[frontDoorPlaneMaterialName] || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
-  React.useMemo(() => availableMaterials[testBackDoorPlaneMaterial] || availableMaterials[backDoorPlaneMaterialName] || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
+  const frontCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
+  const backCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
+  React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
+  React.useMemo(() => pers.D_SRF_DECOR || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
   React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#1a1a1a",
     roughness: 0.1
@@ -2052,27 +2024,27 @@ function DoorLeaf(_ref8) {
   } = backDoorPlane;
 
   // --- Material Logic ---
-  const doorMaterial = React.useMemo(() => availableMaterials[testDoorMaterial] || availableMaterials[doorMaterialName] || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
-  const frameMaterial = React.useMemo(() => availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
-  const gasketMaterial = React.useMemo(() => availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
+  const doorMaterial = React.useMemo(() => placeholderMaterial, [testDoorMaterial, doorMaterialName]);
+  const frameMaterial = React.useMemo(() => placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
+  const gasketMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#111111"
   }), [testGasketMaterial, gasketMaterialName]);
   React.useMemo(() => {
-    return availableMaterials[testDoorStopMaterial] || availableMaterials[doorStopMaterialName || ""] || frameMaterial;
+    return frameMaterial;
   }, [testDoorStopMaterial, doorStopMaterialName, frameType, frameMaterial]);
-  React.useMemo(() => availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
-  React.useMemo(() => availableMaterials[testExteriorFanlightMaterial] || availableMaterials[exteriorFanlightMaterialName] || placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
-  const occulusInfillMaterial = React.useMemo(() => availableMaterials[testOcculusInfillMaterial] || availableMaterials[occulusInfillMaterialName] || placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
-  const glassInfillMaterial = React.useMemo(() => availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
-  const hingeBodyMaterial = React.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || new THREE__namespace.MeshStandardMaterial({
+  React.useMemo(() => placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
+  React.useMemo(() => placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
+  const occulusInfillMaterial = React.useMemo(() => placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
+  const glassInfillMaterial = React.useMemo(() => placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
+  const hingeBodyMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#d4d4d4",
     metalness: 1.0,
     roughness: 0.4
   }), [testHingeMaterial, hingeMaterialName]);
-  React.useMemo(() => availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
-  React.useMemo(() => availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
-  const frontDoorPlaneMaterial = React.useMemo(() => availableMaterials[testFrontDoorPlaneMaterial] || availableMaterials[frontDoorPlaneMaterialName] || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
-  const backDoorPlaneMaterial = React.useMemo(() => availableMaterials[testBackDoorPlaneMaterial] || availableMaterials[backDoorPlaneMaterialName] || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
+  React.useMemo(() => placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
+  React.useMemo(() => placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
+  const frontDoorPlaneMaterial = React.useMemo(() => placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
+  const backDoorPlaneMaterial = React.useMemo(() => placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
   const hingeAccentMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#1a1a1a",
     roughness: 0.1
@@ -2468,11 +2440,12 @@ function DoorLeaf(_ref8) {
 const DoorConfigurator = _ref => {
   let {
     doorName,
-    showInterface = true,
-    is2D = false
+    is2D = false,
+    materials
   } = _ref;
   return /*#__PURE__*/jsxRuntime.jsx(ConfiguratorProvider, {
     initialIs2D: is2D,
+    initialMaterials: materials,
     children: /*#__PURE__*/jsxRuntime.jsx(DoorModels, {
       doorName: doorName
     })