kitchen-simulator 4.1.1-react-18 → 4.1.1

package/es/components/viewer3d/scene-creator.js

@@ -9,14 +9,14 @@ import * as Three from 'three';
 import { Color, Group } from 'three';
 import createGrid from "./grid-creator";
 import { disposeObject } from "./three-memory-cleaner";
-import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS } from "../../constants";
+import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, UNIT_FOOT, UNIT_INCH, UNIT_METER, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { GeometryUtils, IDBroker, MoldingUtils } from "../../utils/export";
 import { convert } from "../../utils/convert-units-lite";
-import { verticesDistance } from "../../utils/geometry";
+import { calcDistancesFromItemToWalls, verticesDistance } from "../../utils/geometry";
 import * as GeomUtils from "../../catalog/utils/geom-utils";
 import { loadTexture } from "../../catalog/utils/item-loader";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import { animateDoor, isElevationView, isEmpty, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
+import { animateDoor, isElevationView, isEmpty, isImmutable, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
 import { formatNumber } from "../../utils/math";
 var transformBox;
 export var fVLine = [];
@@ -187,6 +187,31 @@ export function createWarningObject() {
   warningObj.name = 'warningObj';
   return warningObj;
 }
+function swapLengthProperty(diffs) {
+  var idx1 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === 'length';
+  });
+  var idx2 = diffs.findIndex(function (v) {
+    return v.path[v.path.length - 1] === '_length';
+  });
+  if (idx1 < 0 || idx2 < 0) return diffs;
+  if (idx1 > idx2) return diffs;
+  if (diffs[idx1].op === diffs[idx2].op) {
+    var isSwap = true;
+    for (var i = 0; i < diffs[idx1].path.length - 2; i++) {
+      if (diffs[idx1].path[i] !== diffs[idx2].path[i]) {
+        isSwap = false;
+        break;
+      }
+    }
+    if (isSwap) {
+      var temp = diffs[idx1];
+      diffs[idx1] = diffs[idx2];
+      diffs[idx2] = temp;
+    }
+  }
+  return diffs;
+}
 export function updateScene(planData, sceneData, oldSceneData, diffArray, actions, catalog) {
   var _draggingItem$toJS, _filteredDiffs, _filteredDiffs2;
   var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
@@ -204,6 +229,9 @@ export function updateScene(planData, sceneData, oldSceneData, diffArray, action
       value: el.value
     };
   });
+
+  // move "length" to after "_length"
+  splitted = swapLengthProperty(splitted);
   var filteredDiffs = filterDiffs(splitted, sceneData, oldSceneData);
   //***testing additional filter***
   filteredDiffs = filteredDiffs.filter(function (_ref) {
@@ -238,7 +266,7 @@ export function updateScene(planData, sceneData, oldSceneData, diffArray, action
      * Every 'doorStyle' change has a 'door_style_id' change.
      * So, if door_style_id changes, it indicates 'doorStyle' change.
      */
-    if (['id'].includes(path[path.length - 1])) isSettingDoorStyle = true;
+    if (path[1] === 'layers' && path[3] === 'molding' || path[path.length - 2] === 'doorStyle' && path[path.length - 1] === 'id' || ['id'].includes(path[path.length - 1])) isSettingDoorStyle = true;
 
     // If there are any molding change of layer
     if (path[1] === 'layers' && path[3] === 'molding') isUpdateMolding = true;
@@ -451,19 +479,19 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
         if (modifiedPath[keyIndex] == 'rotation') {
           item3D.rotation.set(0, value * Math.PI / 180 + Math.PI, 0);
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'x') {
           item3D.position.x = value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'y') {
           item3D.position.z = -value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'selected') {
@@ -614,10 +642,10 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
             vLine3.material.depthTest = false;
             var uVec = new Three.Vector3(-posVec.x / scalevec.x, -posVec.y / scalevec.y, -posVec.z / scalevec.z);
             var blLighting = item.type.includes('Light');
-            vLine.translateY(blLighting ? 1.6 : 0.1);
-            vLine1.translateY(blLighting ? 1.6 : 0.1);
-            vLine2.translateY(blLighting ? 1.6 : 0.1);
-            vLine3.translateY(blLighting ? 1.6 : 0.1);
+            vLine.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
+            vLine1.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
+            vLine2.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
+            vLine3.translateY(blLighting ? 1.6 : boundingBox.min.y + 0.1);
             upObj.translateOnAxis(uVec, 1);
             upObj.translateY(max.y - min.y);
             _mBox.name = 'TransformBox';
@@ -689,7 +717,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
               return actions.itemsActions.selectItem(layer.id, modifiedPath[4]);
             });
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
         } else if (modifiedPath[keyIndex] == 'length') {
@@ -817,7 +845,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
             removeItemWithoutItem(planData, layer.id, modifiedPath[4]);
             promises.push(addItem(sceneData, planData, layer, modifiedPath[4], catalog, actions.itemsActions, mode, null, rItem));
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
           break;
@@ -863,11 +891,170 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
     promise: p1
   };
 }
-export function getDistances(layer, isCalcWall) {
+export function getDistances(layer, curItem, isCalcWall) {
+  // matching fvLine distance with OP
+  var pointArray = calcDistancesFromItemToWalls(curItem, layer).PointArray;
+  if ((pointArray === null || pointArray === void 0 ? void 0 : pointArray.length) > 0) {
+    var _loop2 = function _loop2() {
+      var direction = i === 0 ? 90 : i === 1 ? -90 : i === 2 ? 180 : 0;
+      if (fVLine[i].userData) {
+        var _pointArray$filter$;
+        var opDist = (_pointArray$filter$ = pointArray.filter(function (v) {
+          return v[1] === direction;
+        })[0]) !== null && _pointArray$filter$ !== void 0 ? _pointArray$filter$ : fVLine[i].userData.distance;
+        fVLine[i].userData.opDist = opDist[0];
+      }
+    };
+    for (var i = 0; i < ((_fVLine = fVLine) === null || _fVLine === void 0 ? void 0 : _fVLine.length); i++) {
+      var _fVLine;
+      _loop2();
+    }
+  }
   fVLine.forEach(function (line, index) {
-    getLineDistance(line, layer, isCalcWall === undefined ? false : isCalcWall, index);
+    getLineDistance2(line, layer, isEmpty(isCalcWall) ? false : isCalcWall, index);
   });
 }
+function getLineDistance2(obj, layer, isCalcWall, index) {
+  var _obj$userData$opDist, _obj$userData, _obj$userData2, _obj$userData$opDist2, _obj$userData3, _obj$userData4;
+  if (obj === undefined) return;
+  var positionAttribute = obj.geometry.attributes.position;
+  if (positionAttribute === undefined) return;
+  var wPoint0 = new Three.Vector3().fromBufferAttribute(positionAttribute, 0).applyMatrix4(obj.matrixWorld);
+  var wPoint1 = new Three.Vector3().fromBufferAttribute(positionAttribute, 1).applyMatrix4(obj.matrixWorld);
+  var raycaster = new Three.Raycaster(wPoint0, new Three.Vector3(wPoint1.x - wPoint0.x, wPoint1.y - wPoint0.y, wPoint1.z - wPoint0.z));
+  var rayDirection = raycaster.ray.direction;
+  raycaster.camera = new Three.Camera();
+  rayDirection.normalize();
+  var meshes = [];
+  planData.plan.traverse(function (child) {
+    if (child.isMesh && child.geometry) {
+      meshes.push(child);
+    }
+  });
+  var dx = wPoint0.x - wPoint1.x;
+  var dy = wPoint0.y - wPoint1.y;
+  var dz = wPoint0.z - wPoint1.z;
+  var length = Math.sqrt(dx * dx + dy * dy + dz * dz);
+  var scale = 1;
+  var extrudeSettings = {
+    steps: 2,
+    depth: 0.01,
+    bevelEnabled: false
+  };
+  var w = 0.2;
+  var h = w * (Math.sqrt(3) / 2);
+  var shape = new Three.Shape();
+  shape.moveTo(0, 0);
+  shape.lineTo(-w / 4, h / 2);
+  shape.lineTo(w / 4, h / 2);
+  var geom = new Three.ExtrudeGeometry(shape, extrudeSettings);
+  geom.center();
+  var opDist = (_obj$userData$opDist = (_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.opDist) !== null && _obj$userData$opDist !== void 0 ? _obj$userData$opDist : (_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.distance;
+  scale = opDist / length;
+  if (opDist <= 0.1) {
+    scale = 0.1 / length;
+  }
+  obj.userData.distance = (_obj$userData$opDist2 = (_obj$userData3 = obj.userData) === null || _obj$userData3 === void 0 ? void 0 : _obj$userData3.opDist) !== null && _obj$userData$opDist2 !== void 0 ? _obj$userData$opDist2 : (_obj$userData4 = obj.userData) === null || _obj$userData4 === void 0 ? void 0 : _obj$userData4.distance;
+  // obj.userData.target = intersects[i].object;
+  var originPoint = obj.geometry.attributes.position.array.slice(0, 3);
+  var lx = obj.geometry.attributes.position.array[3] - obj.geometry.attributes.position.array[0];
+  var ly = obj.geometry.attributes.position.array[4] - obj.geometry.attributes.position.array[1];
+  var lz = obj.geometry.attributes.position.array[5] - obj.geometry.attributes.position.array[2];
+  var newVec = new Three.Vector3(originPoint[0] + lx * scale, originPoint[1] + ly * scale, originPoint[2] + lz * scale);
+  obj.geometry.attributes.position.array[3] = newVec.x;
+  obj.geometry.attributes.position.array[4] = newVec.y;
+  obj.geometry.attributes.position.array[5] = newVec.z;
+  obj.geometry.attributes.position.needsUpdate = true;
+  obj.geometry.computeBoundingSphere();
+  obj.geometry.computeBoundingBox();
+  var dist = convert(opDist).from('cm').to('in');
+  if (dist > 3) {
+    var _canvas = getDistanceCanvas(dist, layer);
+    var wid = _canvas.width / window.innerWidth * 30;
+    var hei = _canvas.height / window.innerHeight * 30;
+    var texture = new Three.Texture(_canvas);
+    texture.minFilter = Three.LinearFilter;
+    texture.needsUpdate = true;
+    var geometry = new Three.PlaneGeometry(wid / 5, hei / 5);
+    geometry.computeBoundingBox();
+    var material = new Three.MeshBasicMaterial({
+      map: texture,
+      side: Three.DoubleSide
+    });
+    var textMesh = new Three.Mesh(geometry, material);
+    for (; obj.children.length != 0;) {
+      var temp = obj.children.pop();
+      disposeObject(temp);
+    }
+    textMesh.rotation.set(Math.PI / 2, Math.PI, 0);
+    // obj.add(textMesh);
+    textMesh.position.set((obj.geometry.attributes.position.array[0] + obj.geometry.attributes.position.array[3]) / 2, 0.01, (obj.geometry.attributes.position.array[2] + obj.geometry.attributes.position.array[5]) / 2);
+    textMesh.name = 'lineText';
+    textMesh.renderOrder = 2;
+    textMesh.material.depthTest = false;
+    textMesh.material.transparent = true;
+    var sprite1 = new Three.Sprite(new Three.SpriteMaterial({
+      map: texture
+    }));
+    sprite1.position.set((obj.geometry.attributes.position.array[0] + obj.geometry.attributes.position.array[3]) / 2, 0.01, (obj.geometry.attributes.position.array[2] + obj.geometry.attributes.position.array[5]) / 2);
+    sprite1.name = 'lineText';
+    sprite1.renderOrder = 2;
+    sprite1.scale.set(0.2, 0.1, 0.2);
+    sprite1.layers.set(1);
+    sprite1.material.depthTest = false;
+    obj.add(sprite1);
+    if (obj.parent != null) {
+      // is not lighting
+      var item3D = obj.parent.parent.parent;
+      var max = item3D.children[0].userData.max;
+      var min = item3D.children[0].userData.min;
+      var objW = (max.x - min.x) / 100,
+        objL = (max.z - min.z) / 100;
+      var triangle = new Three.Mesh(geom, new Three.MeshBasicMaterial({
+        color: SHADE_DARK_PURPLE_COLOR
+      }));
+      var triangle1 = new Three.Mesh(geom, new Three.MeshBasicMaterial({
+        color: SHADE_DARK_PURPLE_COLOR
+      }));
+      triangle.position.set((index < 2 ? 0 : Math.sin((index === 2 ? 1 : -1) * Math.PI / 2)) * (obj.geometry.attributes.position.array[0] + h / 4 + (index % 2 === 0 ? 0 : objW)), newVec.y, (index < 2 ? Math.cos(index * Math.PI) : 0) * (obj.geometry.attributes.position.array[2] + h / 4 + (index % 2 === 0 ? 0 : objL)));
+      triangle1.position.set(newVec.x - (index < 2 ? 0 : Math.sin((index === 2 ? 1 : -1) * Math.PI / 2)) * h / 4, newVec.y, newVec.z - (index < 2 ? Math.cos(index * Math.PI) : 0) * h / 4);
+      if (index < 2) {
+        triangle.rotation.x = Math.cos(index * Math.PI) * Math.PI / 2;
+        triangle1.rotation.x = -Math.cos(index * Math.PI) * Math.PI / 2;
+      } else {
+        triangle.rotation.x = -Math.PI / 2;
+        triangle.rotation.z = -(index === 2 ? 1 : -1) * Math.PI / 2;
+        triangle1.rotation.x = Math.PI / 2;
+        triangle1.rotation.z = (index === 2 ? 1 : -1) * Math.PI / 2;
+      }
+      triangle.name = 'lineText';
+      triangle1.name = 'lineText';
+      triangle.renderOrder = 2;
+      triangle1.renderOrder = 2;
+      triangle.material.transparent = true;
+      triangle1.material.transparent = true;
+      triangle.material.depthTest = false;
+      triangle1.material.depthTest = false;
+      obj.add(triangle);
+      obj.add(triangle1);
+    }
+  }
+
+  // if (obj.userData.distance <= 50 && obj.userData.distance >= 0.5) {
+  var real_target = obj.userData.target;
+  for (; ((_real_target = real_target) === null || _real_target === void 0 ? void 0 : _real_target.name) != 'pivot';) {
+    var _real_target, _real_target2, _real_target3;
+    if (((_real_target2 = real_target) === null || _real_target2 === void 0 ? void 0 : _real_target2.parent) == null) break;
+    real_target = (_real_target3 = real_target) === null || _real_target3 === void 0 ? void 0 : _real_target3.parent;
+  }
+  // let item3D = obj.parent.parent.parent;
+  // let origin = obj.geometry.vertices[0].clone().applyMatrix4(obj.matrixWorld);
+  // let target = obj.geometry.vertices[1].clone().applyMatrix4(obj.matrixWorld);
+  // let uVec = new Three.Vector3(target.x - origin.x - 0.2, target.y - origin.y - 0.2, target.z - origin.z - 0.2);
+  obj.visible = true;
+  if (dist < 3) obj.visible = false;
+  return obj;
+}
 function getLineDistance(obj, layer, isCalcWall, index) {
   if (obj === undefined) return;
   var positionAttribute = obj.geometry.attributes.position;
@@ -923,12 +1110,12 @@ function getLineDistance(obj, layer, isCalcWall, index) {
         obj.geometry.attributes.position.needsUpdate = true;
         obj.geometry.computeBoundingSphere();
         obj.geometry.computeBoundingBox();
-        var dist = formatNumber(convert(intersects[i].distance).from('cm').to('in'), DECIMAL_PLACES_2);
+        var dist = convert(intersects[i].distance).from('cm').to('in');
         if (dist > 3) {
-          var _canvas = getTextCanvas(dist);
-          var wid = _canvas.width / window.innerWidth * 30;
-          var hei = _canvas.height / window.innerHeight * 30;
-          var texture = new Three.Texture(_canvas);
+          var _canvas2 = getDistanceCanvas(dist, layer);
+          var wid = _canvas2.width / window.innerWidth * 30;
+          var hei = _canvas2.height / window.innerHeight * 30;
+          var texture = new Three.Texture(_canvas2);
           texture.minFilter = Three.LinearFilter;
           texture.needsUpdate = true;
           var geometry = new Three.PlaneGeometry(wid / 5, hei / 5);
@@ -957,6 +1144,7 @@ function getLineDistance(obj, layer, isCalcWall, index) {
           sprite1.renderOrder = 2;
           sprite1.scale.set(0.2, 0.1, 0.2);
           sprite1.layers.set(1);
+          sprite1.material.depthTest = false;
           obj.add(sprite1);
           if (obj.parent != null) {
             // is not lighting
@@ -1045,12 +1233,12 @@ function getLineDistance(obj, layer, isCalcWall, index) {
       obj.geometry.attributes.position.array[4] = _newVec.y;
       obj.geometry.attributes.position.array[5] = _newVec.z;
       obj.geometry.attributes.position.needsUpdate = true;
-      var _dist = formatNumber(distance, DECIMAL_PLACES_2);
+      var _dist = convert(formatNumber(distance, DECIMAL_PLACES_2)).from('cm').to('in');
       if (_dist > 3) {
-        var _canvas2 = getTextCanvas(_dist);
-        var _wid = _canvas2.width / window.innerWidth * 30;
-        var _hei = _canvas2.height / window.innerHeight * 30;
-        var _texture = new Three.Texture(_canvas2);
+        var _canvas3 = getDistanceCanvas(_dist, layer);
+        var _wid = _canvas3.width / window.innerWidth * 30;
+        var _hei = _canvas3.height / window.innerHeight * 30;
+        var _texture = new Three.Texture(_canvas3);
         _texture.needsUpdate = true;
         var _geometry = new Three.PlaneGeometry(_wid / 2, _hei / 2);
         _geometry.computeBoundingBox();
@@ -1175,12 +1363,18 @@ export function getIntersectPoint(opX, opY, pX, pY) {
 function gcd(a, b) {
   return a % b ? gcd(b, a % b) : b;
 }
-function getTextCanvas(text) {
-  var parameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function getDistanceCanvas(distance, layer) {
+  var _layer$unit;
+  var parameters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
+  var curUnit = (_layer$unit = layer === null || layer === void 0 ? void 0 : layer.unit) !== null && _layer$unit !== void 0 ? _layer$unit : UNIT_INCH;
+  var fixedLength = (layer === null || layer === void 0 ? void 0 : layer.unit) === UNIT_METER || (layer === null || layer === void 0 ? void 0 : layer.unit) === UNIT_FOOT ? 2 : 0;
+  var distText = String((Math.round(convert(distance).from('in').to(curUnit) * 100) / 100).toFixed(fixedLength));
   var fontSize = 16;
-  var integral = String(text) + "''";
+  var integral = distText + curUnit;
+  // let integral = String(distance) + "''";
+
   parameters.fontName = parameters.fontName || ARROW_TEXT_FONTFACE;
 
   // Prepare the font to be able to measure
@@ -1774,7 +1968,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
     layer.lines.forEach(function (data) {
       lines.push(data);
     });
-    var _loop2 = function _loop2() {
+    var _loop3 = function _loop3() {
       var data = lines[i];
       var realVec = [];
       data.vertices.forEach(function (vec) {
@@ -1787,7 +1981,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
       }
     };
     for (var i = 0; i < lines.length; i++) {
-      if (_loop2()) break;
+      if (_loop3()) break;
     }
     ceil.translateZ(convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER));
     pivot.name = 'pivot';
@@ -1842,6 +2036,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
   if (!catalogElement) catalogElement = catalog.getElement(returnReplaceableDeepSearchType(item.type));
   if (!catalogElement) return false;
   return catalogElement.render3D(item, layer, sceneData, mode).then(function (item3D) {
+    var _item$properties$getI, _item$properties$getI2, _item$properties$getI3;
     if (item3D instanceof Three.LOD) {
       planData.sceneGraph.LODs[itemID] = item3D;
     }
@@ -1898,7 +2093,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
         if (child.type === 'Line' && child.geometry.attributes !== undefined) fVLine.push(child);
       });
       setTimeout(function () {
-        getDistances();
+        getDistances(layer, item);
       }, 50);
     }
     applyOpacity(pivot, opacity);
@@ -1957,9 +2152,9 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
     var catid = item.type;
     var cat = catalog.elements[catid];
     if (!cat) cat = catalog.elements[returnReplaceableDeepSearchType(catid)];
-    var width = convert(item.properties.getIn(['width', '_length'])).from('in').to(sceneData.unit);
-    var height = convert(item.properties.getIn(['height', '_length'])).from('in').to(sceneData.unit);
-    var depth = convert(item.properties.getIn(['depth', '_length'])).from('in').to(sceneData.unit);
+    var width = convert(item.properties.getIn(['width', '_length'])).from((_item$properties$getI = item.properties.getIn(['width', '_unit'])) !== null && _item$properties$getI !== void 0 ? _item$properties$getI : 'in').to(sceneData.unit);
+    var height = convert(item.properties.getIn(['height', '_length'])).from((_item$properties$getI2 = item.properties.getIn(['height', '_unit'])) !== null && _item$properties$getI2 !== void 0 ? _item$properties$getI2 : 'in').to(sceneData.unit);
+    var depth = convert(item.properties.getIn(['depth', '_length'])).from((_item$properties$getI3 = item.properties.getIn(['depth', '_unit'])) !== null && _item$properties$getI3 !== void 0 ? _item$properties$getI3 : 'in').to(sceneData.unit);
     val.size = {
       width: width,
       height: height,
@@ -2013,7 +2208,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
       return itemsActions.selectItem(layer.id, item.id);
     });
     setTimeout(function () {
-      return getDistances(layer);
+      return getDistances(layer, item);
     }, 100);
     if (!sceneData.loadFlag && scene_mode == MODE_DRAWING_ITEM_3D) {
       itemsActions.endLoading();
@@ -3030,23 +3225,18 @@ function _addMGMesh(molding, planData, layer, data, svg_width, svg_height, flag)
   // let layoutType = molding.items[0].layoutpos;
   // let visible = molding.items[0];
   molding.pointGroups.forEach(function (pointGroup) {
+    var _child$width_unit, _child$height_unit, _child$length_unit;
     var geometry = new Three.BufferGeometry();
     var length = data.length; //point array
-    var temp_unit = child.height_unit;
-    if (temp_unit === 'inch') {
-      child.height = convert(child.height).from('in').to('cm');
-      child.height_unit = 'cm';
-    }
-    temp_unit = child.width_unit;
-    if (temp_unit === 'inch') {
-      child.width = convert(child.width).from('in').to('cm');
-      child.width_unit = 'cm';
-    }
-    temp_unit = child.length_unit;
-    if (temp_unit === 'inch') {
-      child.length = convert(child.length).from('in').to('cm');
-      child.length_unit = 'cm';
-    }
+    var widthUnit = child.width_unit === 'inch' ? 'in' : (_child$width_unit = child.width_unit) !== null && _child$width_unit !== void 0 ? _child$width_unit : 'in';
+    var heightUnit = child.height_unit === 'inch' ? 'in' : (_child$height_unit = child.height_unit) !== null && _child$height_unit !== void 0 ? _child$height_unit : 'in';
+    var lengthUnit = child.length_unit === 'inch' ? 'in' : (_child$length_unit = child.length_unit) !== null && _child$length_unit !== void 0 ? _child$length_unit : 'in';
+    child.height = convert(child.height).from(heightUnit).to('cm');
+    child.height_unit = 'cm';
+    child.width = convert(child.width).from(widthUnit).to('cm');
+    child.width_unit = 'cm';
+    child.length = convert(child.length).from(lengthUnit).to('cm');
+    child.length_unit = 'cm';
     geometry.needsUpdate = true;
     geometry = moldingVertices(pointGroup, geometry, data, child, svg_width, svg_height, molding.pointGroups.length);
     var total = geometry.attributes.position.count;
@@ -3356,7 +3546,7 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       if (isEmpty(filteredNewMGList)) {
         return true;
       }
-      var _loop3 = function _loop3() {
+      var _loop4 = function _loop4() {
           var newMG = filteredNewMGList[k];
           if (oldMG.items.some(function (it) {
             return it.id === selItem.id;
@@ -3409,7 +3599,7 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
         },
         _ret;
       for (var k = 0; k < filteredNewMGList.length; k++) {
-        _ret = _loop3();
+        _ret = _loop4();
         if (_ret) return _ret.v;
       }
       return true;
@@ -3417,14 +3607,21 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
     if (changeMoldings.length === 0 && isEnableMolding) {
       // refresh mesh of the updating molding groups
       new_MGArray.forEach(function (mg, index) {
-        if (mg.items[0].molding.some(function (mol) {
-          return mol.location_type === mg.location_type;
+        var _mg$items$;
+        if ((_mg$items$ = mg.items[0]) !== null && _mg$items$ !== void 0 && (_mg$items$ = _mg$items$.molding) !== null && _mg$items$ !== void 0 && _mg$items$.some(function (mol) {
+          var _mol$toJS;
+          return isImmutable(mol) ? (mol === null || mol === void 0 || (_mol$toJS = mol.toJS()) === null || _mol$toJS === void 0 ? void 0 : _mol$toJS.location_type) === mg.location_type : (mol === null || mol === void 0 ? void 0 : mol.location_type) === mg.location_type;
         })) {
-          var molding = mg.items[0].molding.filter(function (mol) {
-            return mol.location_type === mg.location_type;
+          var _mg$items$2, _mg$items$3, _mg$items$4;
+          var molding = isImmutable((_mg$items$2 = mg.items[0]) === null || _mg$items$2 === void 0 ? void 0 : _mg$items$2.molding) ? (_mg$items$3 = mg.items[0]) === null || _mg$items$3 === void 0 || (_mg$items$3 = _mg$items$3.molding) === null || _mg$items$3 === void 0 ? void 0 : _mg$items$3.filter(function (mol) {
+            var _mol$toJS2;
+            return (mol === null || mol === void 0 || (_mol$toJS2 = mol.toJS()) === null || _mol$toJS2 === void 0 ? void 0 : _mol$toJS2.location_type) === mg.location_type;
+          }).toJS()[0] : (_mg$items$4 = mg.items[0]) === null || _mg$items$4 === void 0 || (_mg$items$4 = _mg$items$4.molding) === null || _mg$items$4 === void 0 ? void 0 : _mg$items$4.filter(function (mol) {
+            return (mol === null || mol === void 0 ? void 0 : mol.location_type) === mg.location_type;
           })[0];
           if (mg.molding === null || mg.molding.itemID !== mol.itemID || mg.lines === null || mg.points === null) {
-            if (mg.molding !== null && mg.molding.itemID !== molding.itemID) {
+            var _mg$molding;
+            if (mg.molding !== null && ((_mg$molding = mg.molding) === null || _mg$molding === void 0 ? void 0 : _mg$molding.itemID) !== molding.itemID) {
               deleteMGMesh(mg, planData, mode);
             }
             mg = MoldingUtils.createMonldingGroup(mg, layer, molding, planData.catalog);
@@ -3571,7 +3768,7 @@ export function addWarningBox(itemId, altitude, planData) {
   deleteSpecifiedMeshObjects('WarningBox' + itemId);
   var item3D = planData.sceneGraph.layers[planData.sceneData.selectedLayer].items[itemId];
   if (item3D == undefined) return;
-  var altitudeLength = convert(altitude).from('in').to('cm');
+  var altitudeLength = altitude;
   var sBounding = item3D.children[0].userData;
   var width = sBounding.max.x - sBounding.min.x;
   var height = sBounding.max.y - sBounding.min.y;

package/es/components/viewer3d/viewer3d-first-person.js

@@ -254,12 +254,10 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-        width = _this$props.width,
-        height = _this$props.height,
-        state = _this$props.state;
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var width = nextProps.width,
+        height = nextProps.height;
       var camera = this.camera,
         renderer = this.renderer,
         scene3D = this.scene3D,
@@ -272,27 +270,19 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
         linesActions: this.context.linesActions,
         projectActions: this.context.projectActions
       };
-
-      // Handle width/height changes
-      if (width !== prevProps.width || height !== prevProps.height) {
-        this.width = width;
-        this.height = height;
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
-        renderer.setSize(width, height);
-      }
-
-      // Handle scene changes
-      if (state.scene !== prevProps.state.scene) {
-        var changedValues = diff(prevProps.state.scene, state.scene);
-        updateScene(planData, state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog);
+      this.width = width;
+      this.height = height;
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+      if (nextProps.scene !== this.props.state.scene) {
+        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
+        updateScene(planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog);
       }
-
-      // Always re-render after updates
-      renderer.clear();
-      renderer.render(scene3D, camera);
-      renderer.clearDepth();
-      renderer.render(sceneOnTop, camera);
+      renderer.setSize(width, height);
+      renderer.clear(); // clear buffers
+      renderer.render(scene3D, camera); // render scene 1
+      renderer.clearDepth(); // clear depth buffer
+      renderer.render(sceneOnTop, camera); // render scene 2
     }
   }, {
     key: "render",
@@ -308,4 +298,12 @@ Viewer3DFirstPerson.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired
+};
+Viewer3DFirstPerson.contextTypes = {
+  areaActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object
 };