kitchen-simulator 4.0.4-react-18 → 4.0.4

package/es/components/viewer2d/viewer2d.js

@@ -4,7 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { INITIAL_VALUE, POSITION_NONE, ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from 'react-svg-pan-zoom';
+import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from 'react-svg-pan-zoom';
 import * as constants from "../../constants";
 import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT } from "../../constants";
 import State from "./state";
@@ -15,10 +15,8 @@ import FormNumberInput from "../style/form-number-input";
 import { convert } from "../../utils/convert-units-lite";
 import { Map } from 'immutable';
 import { formatNumber } from "../../utils/math";
-import { isEmpty } from "../../utils/helper"; // variables
+import { isEmpty, updatePayloadOfInternalEvent } from "../../utils/helper"; // variables
 import { isWarningItem } from "./utils";
-import { MoldingUtils } from "../../utils/export";
-import { useAppContext } from "../../useAppContext";
 // variables
 var pinFlag = false;
 var sFlag = false; //for all object move
@@ -122,22 +120,21 @@ function extractElementData(node) {
     direct: node.attributes.getNamedItem('data-direct') ? node.attributes.getNamedItem('data-direct').value : 0
   };
 }
-export default function Viewer2D(_ref) {
+export default function Viewer2D(_ref, _ref2) {
   var state = _ref.state,
     width = _ref.width,
     height = _ref.height,
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     onInternalEvent = _ref.onInternalEvent;
-  var _useAppContext = useAppContext(),
-    viewer2DActions = _useAppContext.viewer2DActions,
-    linesActions = _useAppContext.linesActions,
-    holesActions = _useAppContext.holesActions,
-    verticesActions = _useAppContext.verticesActions,
-    itemsActions = _useAppContext.itemsActions,
-    areaActions = _useAppContext.areaActions,
-    projectActions = _useAppContext.projectActions,
-    catalog = _useAppContext.catalog;
+  var viewer2DActions = _ref2.viewer2DActions,
+    linesActions = _ref2.linesActions,
+    holesActions = _ref2.holesActions,
+    verticesActions = _ref2.verticesActions,
+    itemsActions = _ref2.itemsActions,
+    areaActions = _ref2.areaActions,
+    projectActions = _ref2.projectActions,
+    catalog = _ref2.catalog;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     rulerEdit = _useState2[0],
@@ -160,26 +157,6 @@ export default function Viewer2D(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     drawStart = _useState8[0],
     setdrawStart = _useState8[1];
-  var _useState9 = useState(function () {
-      return viewer2D && !viewer2D.isEmpty() ? viewer2D.toJS() : INITIAL_VALUE;
-    }),
-    _useState0 = _slicedToArray(_useState9, 2),
-    svgValue = _useState0[0],
-    setSvgValue = _useState0[1];
-  var _useState1 = useState(function () {
-      return mode2Tool(mode);
-    }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    svgTool = _useState10[0],
-    setSvgTool = _useState10[1];
-  useEffect(function () {
-    // keep tool controlled from app mode
-    setSvgTool(mode2Tool(mode));
-  }, [mode]);
-  useEffect(function () {
-    // keep value controlled from store, but never null
-    if (viewer2D && !viewer2D.isEmpty()) setSvgValue(viewer2D.toJS());
-  }, [viewer2D]);
   useEffect(function () {
     // move viewer point to center
     var selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
@@ -204,9 +181,9 @@ export default function Viewer2D(_ref) {
   var layerID = scene.selectedLayer;
   var wall_thickness = LINE_THICKNESS / 2;
   var layer = scene.getIn(['layers', layerID]);
-  var mapCursorPosition = function mapCursorPosition(_ref2) {
-    var x = _ref2.x,
-      y = _ref2.y;
+  var mapCursorPosition = function mapCursorPosition(_ref3) {
+    var x = _ref3.x,
+      y = _ref3.y;
     return {
       x: x,
       y: -y + scene.height
@@ -855,15 +832,17 @@ export default function Viewer2D(_ref) {
   var onMouseUp = function onMouseUp(viewerEvent) {
     //set move all flag false
     sFlag = false;
-    // //////////////////////
-    // setRulerEdit(null);
     var event = viewerEvent.originalEvent;
-    var bbox = event.target.getBoundingClientRect();
+    var parent = document.querySelector('#kitchen-simulator-container');
+    var targetRect = event.target.getBoundingClientRect();
+    var parentRect = parent.getBoundingClientRect();
+    var left = targetRect.left - parentRect.left;
+    var top = targetRect.top - parentRect.top;
+    left = left - (200 - targetRect.width) / 2;
+    top = top - (50 - targetRect.height) / 2;
     if (!mode.includes('ING')) {
       setToolbar('');
     }
-    // bbox.width = event.target.getBBox().width;
-    // bbox.height = event.target.getBBox().height;
     if (event.target.tagName === 'rect') {
       if (event.target.id) {
         setRulerEditID(event.target.id);
@@ -995,8 +974,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1027,8 +1006,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1060,8 +1039,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1093,8 +1072,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1126,8 +1105,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1159,8 +1138,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1191,8 +1170,8 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1273,24 +1252,7 @@ export default function Viewer2D(_ref) {
         _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
       }
       if (_currentObject) {
-        var _currentObject3, _currentObject4, _currentObject5;
-        var payload = (_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.toJS();
-        if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'lines') {
-          // caculating length of selected line//
-          var v_a = layer.vertices.get(_currentObject.vertices.get(0));
-          var v_b = layer.vertices.get(_currentObject.vertices.get(1));
-          var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-          var _length3 = convert(distance).from('cm').to('in');
-          payload.length = _length3;
-          //////////////////////////////////////
-        } else if (((_currentObject5 = _currentObject) === null || _currentObject5 === void 0 ? void 0 : _currentObject5.prototype) === 'items') {
-          // check this cabinet has warning box
-          payload.isWarning = isWarningItem(_currentObject);
-          // check this item is available molding
-          payload.isMoldingAvailable = MoldingUtils.isEnableItemForMolding(layer, _currentObject);
-          // check this item is snapped to wall
-          payload.isAttachedWall = MoldingUtils.isAttachedWall(layer, _currentObject);
-        }
+        var payload = updatePayloadOfInternalEvent(_currentObject, layer, catalog);
 
         // send selection event befor replace event
         if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
@@ -1309,7 +1271,6 @@ export default function Viewer2D(_ref) {
   };
   var onChangeValue = function onChangeValue(value) {
     if (sFlag) return;
-    setSvgValue(value);
     var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
     if (_zoomValue > constants.MAX_ZOOM_IN_SCALE) return;
     if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
@@ -1322,8 +1283,6 @@ export default function Viewer2D(_ref) {
       var bbox;
       if (_rect && _rulerEdit) {
         bbox = _rect.getBoundingClientRect();
-        // bbox.width = _rect.getBBox().width;
-        // bbox.height = _rect.getBBox().height;
         _rulerEdit.style.left = "".concat(bbox.left - (150 - bbox.width) / 2, "px");
         _rulerEdit.style.top = "".concat(bbox.top - (50 - bbox.height) / 2, "px");
       }
@@ -1341,7 +1300,6 @@ export default function Viewer2D(_ref) {
     }
   };
   var onChangeTool = function onChangeTool(tool) {
-    setSvgTool(tool);
     switch (tool) {
       case TOOL_NONE:
         projectActions.selectToolEdit();
@@ -1440,23 +1398,19 @@ export default function Viewer2D(_ref) {
     },
     width: width - rulerSize,
     height: height - rulerSize,
-    value: svgValue,
-    tool: svgTool,
+    value: viewer2D.isEmpty() ? null : viewer2D.toJS(),
     onChangeValue: onChangeValue,
+    tool: mode2Tool(mode),
     onChangeTool: onChangeTool,
     detectAutoPan: mode2DetectAutopan(mode),
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onMouseUp: onMouseUp,
+    miniaturePosition: "none",
+    toolbarPosition: "none",
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
-    ref: Viewer,
-    miniatureProps: {
-      position: POSITION_NONE
-    },
-    toolbarProps: {
-      position: POSITION_NONE
-    }
+    ref: Viewer
   }, /*#__PURE__*/React.createElement("svg", {
     width: scene.width,
     height: scene.height
@@ -1491,4 +1445,14 @@ Viewer2D.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired
+};
+Viewer2D.contextTypes = {
+  viewer2DActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  verticesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  areaActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
 };

package/es/components/viewer3d/ruler-utils/scene3D.js

@@ -14,7 +14,7 @@ export default function Scene3D(_ref) {
     downloadFlag = _ref.downloadFlag;
   var layers = scene.layers;
   var selectedLayer = layers.get(scene.selectedLayer);
-  var ceilHeight = selectedLayer.ceilHeight;
+  var ceilHeight = Number(selectedLayer.ceilHeight);
   var selectedLine = selectedLayer.lines.get(selectedLayer.selected.lines.toJS()[0]);
   var vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
   var vertex1 = selectedLayer.vertices.get(selectedLine.vertices.get(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 * 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;
@@ -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';
@@ -923,9 +951,9 @@ 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 _canvas = getDistanceCanvas(dist, layer);
           var wid = _canvas.width / window.innerWidth * 30;
           var hei = _canvas.height / window.innerHeight * 30;
           var texture = new Three.Texture(_canvas);
@@ -1047,7 +1075,7 @@ function getLineDistance(obj, layer, isCalcWall, index) {
       obj.geometry.attributes.position.needsUpdate = true;
       var _dist = formatNumber(distance, DECIMAL_PLACES_2);
       if (_dist > 3) {
-        var _canvas2 = getTextCanvas(_dist);
+        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);
@@ -1175,12 +1203,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
@@ -3417,14 +3451,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);

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
 };