door_models 5.2.0 → 5.2.1

package/dist/index.cjs.js

@@ -188,22 +188,32 @@ const ConfiguratorProvider = _ref => {
     material: "infill_material",
     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;
+    }
+    return "";
+  }
+  const hasValue = val => val !== null && val !== undefined && val !== "";
   const [frameType, setFrameType] = React.useState("AF20_40");
   const [bodyType, setBodyType] = React.useState("40");
   const [exteriorFanlightType, setExteriorFanlightType] = React.useState("WPFL");
-  const [testDoorMaterial, setTestDoorMaterial] = React.useState("brown");
-  const [testFrameMaterial, setTestFrameMaterial] = React.useState("black");
-  const [testGasketMaterial, setTestGasketMaterial] = React.useState("darkgrey");
-  const [testInteriorFanlightMaterial, setTestInteriorFanlightMaterial] = React.useState("grey");
-  const [testExteriorFanlightMaterial, setTestExteriorFanlightMaterial] = React.useState("metal");
-  const [testOcculusInfillMaterial, setTestOcculusInfillMaterial] = React.useState("glass");
-  const [testGlassInfillMaterial, setTestGlassInfillMaterial] = React.useState("glass");
-  const [testDoorStopMaterial, setTestDoorStopMaterial] = React.useState("black");
-  const [testHingeMaterial, setTestHingeMaterial] = React.useState("metal");
-  const [testFrontCoverPanelMaterial, setTestFrontCoverPanelMaterial] = React.useState("aluminum");
-  const [testBackCoverPanelMaterial, setTestBackCoverPanelMaterial] = React.useState("aluminum");
-  const [testFrontDoorPlaneMaterial, setTestFrontDoorPlaneMaterial] = React.useState("aluminumExtraBrighter");
-  const [testBackDoorPlaneMaterial, setTestBackDoorPlaneMaterial] = React.useState("aluminumExtraBrighter");
+  const [testDoorMaterial, setTestDoorMaterial] = React.useState("");
+  const [testFrameMaterial, setTestFrameMaterial] = React.useState(getFirstValidValue(defaultOptions, hasValue));
+  const [testGasketMaterial, setTestGasketMaterial] = React.useState("D_GASKET");
+  const [testInteriorFanlightMaterial, setTestInteriorFanlightMaterial] = React.useState("D_SRF_DECOR");
+  const [testExteriorFanlightMaterial, setTestExteriorFanlightMaterial] = React.useState("");
+  const [testOcculusInfillMaterial, setTestOcculusInfillMaterial] = React.useState("");
+  const [testGlassInfillMaterial, setTestGlassInfillMaterial] = React.useState("D_FR_COLOR");
+  const [testDoorStopMaterial, setTestDoorStopMaterial] = React.useState(getFirstValidValue(defaultOptions, hasValue));
+  const [testHingeMaterial, setTestHingeMaterial] = React.useState("");
+  const [testFrontCoverPanelMaterial, setTestFrontCoverPanelMaterial] = React.useState(getFirstValidValue(defaultOptions, hasValue));
+  const [testBackCoverPanelMaterial, setTestBackCoverPanelMaterial] = React.useState(getFirstValidValue(defaultOptions, hasValue));
+  const [testFrontDoorPlaneMaterial, setTestFrontDoorPlaneMaterial] = React.useState("D_SRF_DECOR_2");
+  const [testBackDoorPlaneMaterial, setTestBackDoorPlaneMaterial] = React.useState("D_SRF_DECOR");
   const doorHeight = 0;
   const [newPivotPosition, setNewPivotPosition] = React.useState(0);
   const [parseMessage, setParseMessage] = React.useState({
@@ -761,20 +771,52 @@ const useConfigurator = () => {
   return context;
 };
 
-const placeholderMaterial = new THREE__namespace.MeshStandardMaterial({
-  color: "#cccccc",
-  roughness: 0.8
-});
-const placeholderMaterialforFrames = new THREE__namespace.MeshStandardMaterial({
-  color: "#000",
-  roughness: 0.8
-});
+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;
 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: "#0xaaaaaa",
+    color: "#aaaaaa",
     metalness: 1.0,
     roughness: 0.4
   }),
@@ -840,8 +882,15 @@ const availableMaterials = {
     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,
@@ -1438,11 +1487,6 @@ function DoorModels(_ref7) {
     secondDoorStopOffset
   } = doorFrame;
   const initialDoorHeight = React.useRef(doorHeight);
-
-  // useEffect(() => {
-  //   initialDoorHeight.current = doorHeight;
-  // }, [cpid]);
-
   const {
     height: interiorFanlightHeightValue
   } = interiorFanlight;
@@ -2059,16 +2103,15 @@ function DoorLeaf(_ref8) {
     secondDoorStopOffset
   } = doorFrame;
   const initialDoorHeight = React.useRef(null);
-
-  // useEffect(() => {
-  //   initialDoorHeight.current = doorHeight;
-  // }, [cpid]);
-
+  const initialDoorWidth = React.useRef(null);
   React.useEffect(() => {
     if (doorHeight > 0 && initialDoorHeight.current === null) {
       initialDoorHeight.current = doorHeight;
     }
-  }, [doorHeight]);
+    if (doorWidth > 0 && initialDoorWidth.current === null) {
+      initialDoorWidth.current = doorWidth;
+    }
+  }, [doorHeight, doorWidth]);
   const {
     height: interiorFanlightHeightValue
   } = interiorFanlight;
@@ -2214,6 +2257,39 @@ function DoorLeaf(_ref8) {
     }
     return true;
   }, [isFrameVisible, frameType, isGlassDoor]);
+
+  // --- DYNAMIC TEXTURE MATERIALS ---
+  const dynamicFrontDoorPlaneMaterial = React.useMemo(() => {
+    const newMaterial = frontDoorPlaneMaterial.clone();
+    if (newMaterial.map) {
+      newMaterial.map = newMaterial.map.clone();
+      newMaterial.map.needsUpdate = true;
+      newMaterial.map.wrapS = THREE__namespace.RepeatWrapping;
+      newMaterial.map.wrapT = THREE__namespace.RepeatWrapping;
+      const initialHeightM = initialDoorHeight.current ? initialDoorHeight.current / 1000 : mainDoorHeightM;
+      const initialWidthM = initialDoorWidth.current ? initialDoorWidth.current / 1000 : doorWidthM;
+      const repeatY = initialHeightM > 0 ? mainDoorHeightM / initialHeightM : 1;
+      const repeatX = initialWidthM > 0 ? doorWidthM / initialWidthM : 1;
+      newMaterial.map.repeat.set(repeatX, repeatY * 2);
+      console.log(repeatX, repeatY);
+    }
+    return newMaterial;
+  }, [frontDoorPlaneMaterial, mainDoorHeightM, doorWidthM]);
+  const dynamicBackDoorPlaneMaterial = React.useMemo(() => {
+    const newMaterial = backDoorPlaneMaterial.clone();
+    if (newMaterial.map) {
+      newMaterial.map = newMaterial.map.clone();
+      newMaterial.map.needsUpdate = true;
+      newMaterial.map.wrapS = THREE__namespace.RepeatWrapping;
+      newMaterial.map.wrapT = THREE__namespace.RepeatWrapping;
+      const initialHeightM = initialDoorHeight.current ? initialDoorHeight.current / 1000 : mainDoorHeightM;
+      const initialWidthM = initialDoorWidth.current ? initialDoorWidth.current / 1000 : doorWidthM;
+      const repeatY = initialHeightM > 0 ? mainDoorHeightM / initialHeightM : 1;
+      const repeatX = initialWidthM > 0 ? doorWidthM / initialWidthM : 1;
+      newMaterial.map.repeat.set(repeatX, repeatY * 2);
+    }
+    return newMaterial;
+  }, [backDoorPlaneMaterial, mainDoorHeightM, doorWidthM]);
   return /*#__PURE__*/jsxRuntime.jsxs("group", {
     "position-x": xOffset,
     children: [isStandardHingeVisible && standardHingeYPositions.map((y, index) => /*#__PURE__*/jsxRuntime.jsxs("group", {
@@ -2342,7 +2418,7 @@ function DoorLeaf(_ref8) {
           children: /*#__PURE__*/jsxRuntime.jsxs(csg.Geometry, {
             useGroups: true,
             children: [/*#__PURE__*/jsxRuntime.jsx(csg.Base, {
-              material: frontDoorPlaneMaterial,
+              material: dynamicFrontDoorPlaneMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [doorWidthM, mainDoorHeightM, 0.001]
               })
@@ -2359,7 +2435,7 @@ function DoorLeaf(_ref8) {
           children: /*#__PURE__*/jsxRuntime.jsxs(csg.Geometry, {
             useGroups: true,
             children: [/*#__PURE__*/jsxRuntime.jsx(csg.Base, {
-              material: backDoorPlaneMaterial,
+              material: dynamicBackDoorPlaneMaterial,
               children: /*#__PURE__*/jsxRuntime.jsx("boxGeometry", {
                 args: [doorWidthM, mainDoorHeightM, 0.0001]
               })