door_models 5.2.0 → 5.2.2

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);
@@ -188,22 +190,30 @@ const ConfiguratorProvider = _ref => {
     material: "infill_material",
     depth: 20
   });
+  const defaultOptions = ["D_PRF_COLOR", "D_FR_SRF_DECOR", "D_FR_SRF_DECOR_S2"];
+  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({
@@ -213,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";
@@ -675,6 +690,7 @@ const ConfiguratorProvider = _ref => {
   }, [totalWidth, doorFrame.sidesThk, isDoubleDoor]);
   return /*#__PURE__*/jsxRuntime.jsx(ConfiguratorContext.Provider, {
     value: {
+      materials,
       is2D,
       setIs2D,
       isPlaneVisible,
@@ -761,20 +777,79 @@ 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 isUrl = string => {
+  try {
+    new URL(string);
+    return true;
+  } catch (_) {
+    return false;
+  }
+};
+const createMaterialFromProp = value => {
+  if (!value) return null;
+  if (value.startsWith("#")) {
+    return new THREE__namespace.MeshStandardMaterial({
+      color: value,
+      roughness: 0.8
+    });
+  }
+  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
+    });
+  }
+  return null;
+};
+const textureLoader = new THREE__namespace.TextureLoader();
+const bodyInt = textureLoader.load("http://192.168.30.92:3009/api/proxy?path=IVIS/E_TEX00.JPG");
+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 +915,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,
@@ -1343,7 +1425,8 @@ function DoorModels(_ref7) {
     glassDepth,
     cpid,
     handleParseCpid,
-    isDoubleDoor
+    isDoubleDoor,
+    materials
   } = useConfigurator();
   React.useEffect(() => {
     if (doorName) {
@@ -1385,29 +1468,38 @@ 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({
+  const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
+  const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
     color: "#111111"
   }), [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 || availableMaterials[testDoorStopMaterial] || availableMaterials[doorStopMaterialName || ""] || frameMaterial;
   }, [testDoorStopMaterial, doorStopMaterialName, frameType, frameMaterial]);
-  const interiorFanlightMaterial = React.useMemo(() => availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
+  const interiorFanlightMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || 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]);
+  const glassInfillMaterial = React.useMemo(() => pers.D_FR_COLOR || availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
   React.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || 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 || availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
+  const backCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
+  React.useMemo(() => pers.D_SRF_DECOR_2 || availableMaterials[testFrontDoorPlaneMaterial] || availableMaterials[frontDoorPlaneMaterialName] || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
+  React.useMemo(() => pers.D_SRF_DECOR || availableMaterials[testBackDoorPlaneMaterial] || availableMaterials[backDoorPlaneMaterialName] || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
   React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
     color: "#1a1a1a",
     roughness: 0.1
@@ -1438,11 +1530,6 @@ function DoorModels(_ref7) {
     secondDoorStopOffset
   } = doorFrame;
   const initialDoorHeight = React.useRef(doorHeight);
-
-  // useEffect(() => {
-  //   initialDoorHeight.current = doorHeight;
-  // }, [cpid]);
-
   const {
     height: interiorFanlightHeightValue
   } = interiorFanlight;
@@ -2059,16 +2146,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 +2300,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 +2461,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 +2478,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]
               })
@@ -2392,11 +2511,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
     })