kitchen-simulator 4.1.7-react-18 → 4.2.1

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

@@ -222,6 +222,31 @@ 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;
+}
 function updateScene(planData, sceneData, oldSceneData, diffArray, actions, catalog) {
   var _draggingItem$toJS, _filteredDiffs, _filteredDiffs2;
   var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
@@ -239,6 +264,9 @@ function updateScene(planData, sceneData, oldSceneData, diffArray, actions, cata
       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) {
@@ -273,7 +301,7 @@ function updateScene(planData, sceneData, oldSceneData, diffArray, actions, cata
      * 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;
@@ -486,19 +514,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') {
@@ -649,10 +677,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';
@@ -724,7 +752,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') {
@@ -852,7 +880,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;
@@ -898,10 +926,169 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
     promise: p1
   };
 }
-function getDistances(layer, isCalcWall) {
+function getDistances(layer, curItem, isCalcWall) {
+  // matching fvLine distance with OP
+  var pointArray = (0, _geometry2.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, (0, _helper.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 = (0, _convertUnitsLite.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();
+      (0, _threeMemoryCleaner.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: _constants.SHADE_DARK_PURPLE_COLOR
+      }));
+      var triangle1 = new Three.Mesh(geom, new Three.MeshBasicMaterial({
+        color: _constants.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;
@@ -958,12 +1145,12 @@ function getLineDistance(obj, layer, isCalcWall, index) {
         obj.geometry.attributes.position.needsUpdate = true;
         obj.geometry.computeBoundingSphere();
         obj.geometry.computeBoundingBox();
-        var dist = (0, _math.formatNumber)((0, _convertUnitsLite.convert)(intersects[i].distance).from('cm').to('in'), _constants.DECIMAL_PLACES_2);
+        var dist = (0, _convertUnitsLite.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);
@@ -992,6 +1179,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
@@ -1080,12 +1268,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 = (0, _math.formatNumber)(distance, _constants.DECIMAL_PLACES_2);
+      var _dist = (0, _convertUnitsLite.convert)((0, _math.formatNumber)(distance, _constants.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();
@@ -1210,12 +1398,18 @@ 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 : _constants.UNIT_INCH;
+  var fixedLength = (layer === null || layer === void 0 ? void 0 : layer.unit) === _constants.UNIT_METER || (layer === null || layer === void 0 ? void 0 : layer.unit) === _constants.UNIT_FOOT ? 2 : 0;
+  var distText = String((Math.round((0, _convertUnitsLite.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 || _constants.ARROW_TEXT_FONTFACE;
 
   // Prepare the font to be able to measure
@@ -1809,7 +2003,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) {
@@ -1822,7 +2016,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((0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER));
     pivot.name = 'pivot';
@@ -1877,6 +2071,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
   if (!catalogElement) catalogElement = catalog.getElement((0, _utils.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;
     }
@@ -1933,7 +2128,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);
@@ -1992,9 +2187,9 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
     var catid = item.type;
     var cat = catalog.elements[catid];
     if (!cat) cat = catalog.elements[(0, _utils.returnReplaceableDeepSearchType)(catid)];
-    var width = (0, _convertUnitsLite.convert)(item.properties.getIn(['width', '_length'])).from('in').to(sceneData.unit);
-    var height = (0, _convertUnitsLite.convert)(item.properties.getIn(['height', '_length'])).from('in').to(sceneData.unit);
-    var depth = (0, _convertUnitsLite.convert)(item.properties.getIn(['depth', '_length'])).from('in').to(sceneData.unit);
+    var width = (0, _convertUnitsLite.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 = (0, _convertUnitsLite.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 = (0, _convertUnitsLite.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,
@@ -2048,7 +2243,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 == _constants.MODE_DRAWING_ITEM_3D) {
       itemsActions.endLoading();
@@ -2875,19 +3070,23 @@ function createBacksplash(item, layer, planData, scene) {
   var altItems = [],
     flag = false;
   wallItems.map(function (wallItem) {
-    var altitude = wallItem.itemInfo.properties.get('altitude').get('_length');
-    var altitudeUnit = wallItem.itemInfo.properties.get('altitude').get('_unit') || 'cm';
-    altitude = (0, _convertUnitsLite.convert)(altitude).from(altitudeUnit).to('cm');
-    altItems.push({
-      x: wallItem.pos.x,
-      width: wallItem.size.width,
-      altitude: altitude
-    });
+    var _wallItem$itemInfo, _wallItem$itemInfo2;
+    var altitude = (_wallItem$itemInfo = wallItem.itemInfo) === null || _wallItem$itemInfo === void 0 || (_wallItem$itemInfo = _wallItem$itemInfo.properties) === null || _wallItem$itemInfo === void 0 ? void 0 : _wallItem$itemInfo.get('altitude').get('_length');
+    var altitudeUnit = ((_wallItem$itemInfo2 = wallItem.itemInfo) === null || _wallItem$itemInfo2 === void 0 || (_wallItem$itemInfo2 = _wallItem$itemInfo2.properties) === null || _wallItem$itemInfo2 === void 0 ? void 0 : _wallItem$itemInfo2.get('altitude').get('_unit')) || 'cm';
+    if (!(0, _helper.isEmpty)(altitude) && !(0, _helper.isEmpty)(altitudeUnit)) {
+      altitude = (0, _convertUnitsLite.convert)(altitude).from(altitudeUnit).to('cm');
+      altItems.push({
+        x: wallItem.pos.x,
+        width: wallItem.size.width,
+        altitude: altitude
+      });
+    }
   });
   layer.holes.map(function (hole) {
-    var width = hole.properties.getIn(['width', 'length']);
-    var altitude = hole.properties.getIn(['altitude', 'length']);
-    altItems.push({
+    var _hole$properties, _hole$properties2;
+    var width = (_hole$properties = hole.properties) === null || _hole$properties === void 0 ? void 0 : _hole$properties.getIn(['width', 'length']);
+    var altitude = (_hole$properties2 = hole.properties) === null || _hole$properties2 === void 0 ? void 0 : _hole$properties2.getIn(['altitude', 'length']);
+    if (!(0, _helper.isEmpty)(width) && !(0, _helper.isEmpty)(altitude)) altItems.push({
       x: hole.x,
       width: width,
       altitude: altitude
@@ -3065,23 +3264,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 = (0, _convertUnitsLite.convert)(child.height).from('in').to('cm');
-      child.height_unit = 'cm';
-    }
-    temp_unit = child.width_unit;
-    if (temp_unit === 'inch') {
-      child.width = (0, _convertUnitsLite.convert)(child.width).from('in').to('cm');
-      child.width_unit = 'cm';
-    }
-    temp_unit = child.length_unit;
-    if (temp_unit === 'inch') {
-      child.length = (0, _convertUnitsLite.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 = (0, _convertUnitsLite.convert)(child.height).from(heightUnit).to('cm');
+    child.height_unit = 'cm';
+    child.width = (0, _convertUnitsLite.convert)(child.width).from(widthUnit).to('cm');
+    child.width_unit = 'cm';
+    child.length = (0, _convertUnitsLite.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;
@@ -3391,7 +3585,7 @@ function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       if ((0, _helper.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;
@@ -3444,7 +3638,7 @@ 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;
@@ -3452,14 +3646,21 @@ 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 (0, _helper.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 = (0, _helper.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 = _export.MoldingUtils.createMonldingGroup(mg, layer, molding, planData.catalog);
@@ -3606,7 +3807,7 @@ function addWarningBox(itemId, altitude, planData) {
   deleteSpecifiedMeshObjects('WarningBox' + itemId);
   var item3D = planData.sceneGraph.layers[planData.sceneData.selectedLayer].items[itemId];
   if (item3D == undefined) return;
-  var altitudeLength = (0, _convertUnitsLite.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/lib/components/viewer3d/viewer3d-first-person.js

@@ -11,7 +11,6 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -22,7 +21,6 @@ var _immutablediff = _interopRequireDefault(require("immutablediff"));
 var _pointerLockNavigation = require("./pointer-lock-navigation");
 var _firstPersonControls = require("./libs/first-person-controls");
 var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
-var _AppContext = _interopRequireDefault(require("../../AppContext"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -31,7 +29,6 @@ var Viewer3DFirstPerson = exports["default"] = /*#__PURE__*/function (_React$Com
     var _this;
     (0, _classCallCheck2["default"])(this, Viewer3DFirstPerson);
     _this = _callSuper(this, Viewer3DFirstPerson, [props]);
-    _this.canvasWrapperRef = /*#__PURE__*/_react["default"].createRef();
     _this.width = props.width;
     _this.height = props.height;
     _this.stopRendering = false;
@@ -65,7 +62,7 @@ var Viewer3DFirstPerson = exports["default"] = /*#__PURE__*/function (_React$Com
       };
       var state = this.props.state;
       var data = state.scene;
-      var canvasWrapper = this.canvasWrapperRef.current;
+      var canvasWrapper = _reactDom["default"].findDOMNode(this.refs.canvasWrapper);
       var scene3D = new Three.Scene();
 
       // As I need to show the pointer above all scene objects, I use this workaround http://stackoverflow.com/a/13309722
@@ -264,12 +261,10 @@ var Viewer3DFirstPerson = exports["default"] = /*#__PURE__*/function (_React$Com
       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,
@@ -282,41 +277,40 @@ var Viewer3DFirstPerson = exports["default"] = /*#__PURE__*/function (_React$Com
         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 = (0, _immutablediff["default"])(prevProps.state.scene, state.scene);
-        (0, _sceneCreator.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 = (0, _immutablediff["default"])(this.props.state.scene, nextProps.state.scene);
+        (0, _sceneCreator.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",
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement('div', {
-        ref: this.canvasWrapperRef
+        ref: 'canvasWrapper'
       });
     }
   }]);
 }(_react["default"].Component);
-(0, _defineProperty2["default"])(Viewer3DFirstPerson, "contextType", _AppContext["default"]);
 Viewer3DFirstPerson.propTypes = {
   state: _propTypes["default"].object.isRequired,
   width: _propTypes["default"].number.isRequired,
   height: _propTypes["default"].number.isRequired
 };
+Viewer3DFirstPerson.contextTypes = {
+  areaActions: _propTypes["default"].object.isRequired,
+  holesActions: _propTypes["default"].object.isRequired,
+  itemsActions: _propTypes["default"].object.isRequired,
+  linesActions: _propTypes["default"].object.isRequired,
+  projectActions: _propTypes["default"].object.isRequired,
+  catalog: _propTypes["default"].object
+};
 module.exports = exports.default;