kitchen-simulator 1.1.1-test.48 → 1.1.1-test.49

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

@@ -1,3608 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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 { GeometryUtils, IDBroker, MoldingUtils } from "../../utils/export";
-import convert from 'convert-units';
-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 { formatNumber } from "../../utils/math";
-var transformBox;
-export var fVLine = [];
-var scene_mode = null;
-export function parseData(sceneData, actions, catalog, camera, renderer, mode) {
-  var planData = {
-    catalog: catalog,
-    sceneData: sceneData
-  };
-  window.planData = planData;
-  planData.sceneGraph = {
-    unit: sceneData.unit,
-    layers: {},
-    busyResources: {
-      layers: {}
-    },
-    width: sceneData.width,
-    height: sceneData.height,
-    LODs: {}
-  };
-  planData.plan = new Three.Object3D();
-  planData.plan.name = 'plan';
-  planData.cam = new Three.Object3D();
-  planData.cam.name = 'cam';
-
-  // Add a grid to the plan
-  planData.grid = createGrid(sceneData);
-  planData.grid.name = 'grid';
-  planData.boundingBox = new Three.Box3().setFromObject(planData.grid);
-  planData.boundingBox.name = 'boundingBox';
-  var promises = [];
-  sceneData.layers.forEach(function (layer) {
-    if (layer.id === sceneData.selectedLayer || layer.visible) {
-      promises = promises.concat(createLayerObjects(layer, planData, sceneData, actions, catalog, mode, camera, renderer));
-    }
-  });
-  var p1 = new Promise(function (resolve) {
-    Promise.all(promises).then(function (value) {
-      if (planData.plan.parent !== null && planData.plan.children.length !== 0) {
-        updateBoundingBox(planData, false, mode);
-
-        // if mode is elevation, build elevation scene
-        if (isElevationView(mode)) buildElevationScene(planData, mode);
-      }
-      resolve('success');
-    });
-  });
-  return {
-    promise: p1,
-    planData: planData
-  };
-
-  // return planData;
-}
-export function visibleTransformBox(flag) {
-  // if (transformBox instanceof Three.Mesh)
-  //   transformBox.visible = flag;
-}
-var buildElevationScene = function buildElevationScene(planData, mode) {
-  var scene = planData.plan.parent;
-  scene.updateMatrixWorld();
-  var ELEV_GRP = 'ELEV_GRP';
-  var oldElevationGroup = scene.getObjectByName(ELEV_GRP);
-  if (oldElevationGroup) oldElevationGroup.parent.remove(oldElevationGroup);
-  var elevationGroup = new Three.Group();
-  scene.traverse(function (obj) {
-    if (obj.name == 'MainObject') {
-      var clone = obj.clone();
-      clone.name = '';
-      clone.visible = obj.parent.visible;
-      clone.applyMatrix4(obj.parent.matrixWorld);
-      elevationGroup.add(clone);
-    }
-  });
-  elevationGroup.name = ELEV_GRP;
-  elevationGroup.visible = false;
-  planData.elevationGroup = elevationGroup;
-  scene.traverse(function (obj) {
-    if (obj.name == 'MainObject') {
-      replaceMeshesWithLineSegments(obj);
-    }
-  });
-  scene.add(elevationGroup);
-};
-function createLayerObjects(layer, planData, sceneData, actions, catalog, mode, camera, renderer) {
-  var promises = [];
-  var moldingGroups = MoldingUtils.getAllMoldingGroups(layer);
-  planData.sceneGraph.layers[layer.id] = {
-    id: layer.id,
-    lines: {},
-    holes: {},
-    areas: {},
-    items: {},
-    countertops: [],
-    moldingGroups: moldingGroups,
-    backsplashes: [],
-    visible: layer.visible,
-    altitude: layer.altitude
-  };
-  planData.sceneGraph.busyResources.layers[layer.id] = {
-    id: layer.id,
-    lines: {},
-    holes: {},
-    areas: {},
-    items: {},
-    moldingGroups: {}
-  };
-  // Import lines
-  layer.lines.forEach(function (line) {
-    promises.push(addLine(sceneData, planData, layer, line.id, catalog, actions.linesActions, mode));
-    line.holes.forEach(function (holeID) {
-      promises.push(addHole(sceneData, planData, layer, holeID, catalog, actions.holesActions, mode));
-    });
-  });
-
-  // Import areas
-  layer.areas.forEach(function (area) {
-    promises.push(addArea(sceneData, planData, layer, area.id, catalog, actions.areaActions, mode));
-  });
-  // Import items
-  layer.items.forEach(function (item) {
-    promises.push(addItem(sceneData, planData, layer, item.id, catalog, actions.itemsActions, mode, null, null
-    // false
-    ));
-  });
-  return promises;
-}
-var canvas = document.createElement('canvas');
-canvas.width = 50;
-canvas.height = 100;
-canvas.style.width = 50 + 'px';
-canvas.style.height = 100 + 'px';
-var ctx = canvas.getContext('2d');
-ctx.fillStyle = '#FFFFFF';
-ctx.strokeStyle = '#ff7400';
-ctx.beginPath();
-ctx.arc(25, 25, 20, 0, 2 * Math.PI);
-ctx.fill();
-ctx.stroke();
-var img1 = new Image();
-img1.crossOrigin = 'anonymous';
-img1.src = '/assets/img/svg/3d_item_warning_info.svg';
-img1.onload = function () {
-  ctx.drawImage(img1, 0, 0, 50, 50);
-};
-ctx.lineWidth = 4;
-ctx.beginPath();
-ctx.arc(25, 75, 20, 0, 2 * Math.PI);
-ctx.fill();
-ctx.stroke();
-var img2 = new Image();
-img2.crossOrigin = 'anonymous';
-img2.src = '/assets/img/svg/3d_item_warning_edit.svg';
-img2.onload = function () {
-  ctx.drawImage(img2, 8, 58, 34, 34);
-};
-export function createWarningObject() {
-  var warningTexture = new Three.Texture(canvas);
-  warningTexture.needsUpdate = true;
-  var warningObj = new Three.Sprite(new Three.SpriteMaterial({
-    map: warningTexture,
-    sizeAttenuation: true
-  }));
-  warningObj.material.transparent = true;
-  warningObj.material.depthTest = false;
-  warningObj.scale.set(20, 40, 20);
-  warningObj.renderOrder = 3;
-  warningObj.name = 'warningObj';
-  return warningObj;
-}
-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;
-  var toolObj = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  var angleObj = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
-  var draggingItem = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : null;
-  var result = [];
-  if (mode != null) {
-    scene_mode = mode;
-  }
-  var splitted = diffArray.map(function (el) {
-    return {
-      op: el.op,
-      path: el.path.split('/'),
-      value: el.value
-    };
-  });
-  var filteredDiffs = filterDiffs(splitted, sceneData, oldSceneData);
-  //***testing additional filter***
-  filteredDiffs = filteredDiffs.filter(function (_ref) {
-    var path = _ref.path;
-    return path[3] !== 'selected';
-  });
-  filteredDiffs = filteredDiffs.filter(function (_ref2) {
-    var path = _ref2.path;
-    return path[1] !== 'groups';
-  });
-  //*******************************
-  //This is executed when dragging item is end and performs the updateing filteredDiffs.
-  if ((sceneData === null || sceneData === void 0 ? void 0 : sceneData.isEndDragging) === true && draggingItem && !isEmpty((_draggingItem$toJS = draggingItem.toJS) === null || _draggingItem$toJS === void 0 ? void 0 : _draggingItem$toJS.call(draggingItem)) && ((_filteredDiffs = filteredDiffs) === null || _filteredDiffs === void 0 || (_filteredDiffs = _filteredDiffs[0]) === null || _filteredDiffs === void 0 || (_filteredDiffs = _filteredDiffs.path) === null || _filteredDiffs === void 0 ? void 0 : _filteredDiffs.length) < DIFFERENT_VALUES_PATH_LENGTH && (_filteredDiffs2 = filteredDiffs) !== null && _filteredDiffs2 !== void 0 && (_filteredDiffs2 = _filteredDiffs2[0]) !== null && _filteredDiffs2 !== void 0 && (_filteredDiffs2 = _filteredDiffs2.path) !== null && _filteredDiffs2 !== void 0 && _filteredDiffs2.includes('showfg')) {
-    var _draggingItem$getIn, _draggingItem$getIn2;
-    var layerID = (_draggingItem$getIn = draggingItem.getIn) === null || _draggingItem$getIn === void 0 ? void 0 : _draggingItem$getIn.call(draggingItem, ['layerID']);
-    var itemID = (_draggingItem$getIn2 = draggingItem.getIn) === null || _draggingItem$getIn2 === void 0 ? void 0 : _draggingItem$getIn2.call(draggingItem, ['itemID']);
-    if (layerID && itemID) {
-      var _sceneData$getIn, _sceneData$getIn$toJS, _selLayer$items;
-      filteredDiffs[0].path = ['', 'layers', layerID, 'items', itemID, 'distArray'];
-      var selLayer = (_sceneData$getIn = sceneData.getIn) === null || _sceneData$getIn === void 0 || (_sceneData$getIn = _sceneData$getIn.call(sceneData, ['layers', layerID])) === null || _sceneData$getIn === void 0 || (_sceneData$getIn$toJS = _sceneData$getIn.toJS) === null || _sceneData$getIn$toJS === void 0 ? void 0 : _sceneData$getIn$toJS.call(_sceneData$getIn);
-      var distArray = selLayer === null || selLayer === void 0 || (_selLayer$items = selLayer.items) === null || _selLayer$items === void 0 || (_selLayer$items = _selLayer$items[itemID]) === null || _selLayer$items === void 0 ? void 0 : _selLayer$items.distArray;
-      filteredDiffs[0].value = distArray;
-    }
-  }
-
-  // Check to see if diffs includes changes associated with doorStyle and global molding simultaneously.
-  var isSettingDoorStyle = false; // If it includes any doorStyle change
-  var isUpdateMolding = false; // If it includes any global molding change
-  filteredDiffs.forEach(function (_ref3) {
-    var path = _ref3.path;
-    /**
-     * 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 there are any molding change of layer
-    if (path[1] === 'layers' && path[3] === 'molding') isUpdateMolding = true;
-  });
-  if (isSettingDoorStyle && isUpdateMolding)
-    /**
-     * If so, any other changes could be ignored.
-     * Because the molding change of layer invokes 'createLayerObject()'
-     * and that function re-renders an whole layer.
-     */
-    filteredDiffs = filteredDiffs.filter(function (_ref4) {
-      var path = _ref4.path;
-      return path[1] === 'layers' && path[3] === 'molding';
-    });
-  filteredDiffs.forEach(function (_ref5) {
-    var op = _ref5.op,
-      path = _ref5.path,
-      value = _ref5.value;
-    /* First of all I need to find the object I need to update */
-    if (path[1] === 'layers') {
-      var layer = sceneData.getIn(['layers', path[2]]);
-      if (path.length === 3 && op === 'remove') {
-        removeLayer(path[2], planData);
-      } else if (path.length > 3) {
-        if (path.length > 5) if (path[5] === 'submodule' || path[5] === 'doorStyle' || path[5] === 'properties') op = 'replace';
-        switch (op) {
-          case 'replace':
-            var promiseValue = replaceObject(path, layer, planData, actions, sceneData, oldSceneData, catalog, mode, value);
-            if (promiseValue !== undefined) {
-              result.push(promiseValue.promise);
-            }
-            break;
-          case 'add':
-            addObject(path, layer, planData, actions, sceneData, oldSceneData, catalog, mode, toolObj);
-            break;
-          case 'remove':
-            if (angleObj) planData.plan.parent.remove(angleObj);
-            if (toolObj) planData.plan.parent.remove(toolObj);
-            deleteSpecifiedMeshObjects('WarningBox' + path[4]);
-            deleteSpecifiedMeshObjects('backsplash' + path[4]);
-            var item = oldSceneData.getIn(['layers', path[2]]).getIn(['items', path[4]]);
-            deleteCountertop(planData.sceneGraph.layers[layer.id].countertops, item, planData, layer);
-            removeObject(path, layer, planData, actions, sceneData, oldSceneData, catalog);
-            break;
-        }
-      }
-    } else if (path[1] === 'selectedLayer') {
-      var layerSelectedID = value;
-      var layerSelected = sceneData.getIn(['layers', layerSelectedID]);
-      // First of all I check if the new selected layer is not visible
-      if (!layerSelected.visible) {
-        // I need to create the objects for this layer
-        var promises = createLayerObjects(layerSelected, planData, sceneData, actions, catalog, mode);
-        Promise.all(promises).then(function () {
-          return updateBoundingBox(planData, false, mode);
-        });
-      }
-      var layerGraph = planData.sceneGraph.layers[oldSceneData.selectedLayer];
-      if (layerGraph) {
-        if (!layerGraph.visible) {
-          // I need to remove the objects for this layer
-          for (var lineID in layerGraph.lines) removeLine(planData, layerGraph.id, lineID);
-          for (var areaID in layerGraph.areas) removeArea(planData, layerGraph.id, areaID);
-          for (var _itemID in layerGraph.items) removeItem(planData, layerGraph.id, _itemID);
-          for (var holeID in layerGraph.holes) removeHole(planData, layerGraph.id, holeID);
-        }
-      }
-    }
-  });
-  var p1 = new Promise(function (resolve) {
-    Promise.all(result).then(function (replaceValue) {
-      // if mode is elevation, build elevation scene
-      // When scene is updated, replaceValue is not empty.
-      if (isElevationView(mode) && !isEmpty(replaceValue)) buildElevationScene(planData, mode);
-      resolve('successPromise');
-    });
-  });
-  return {
-    promise: p1,
-    planData: planData
-  };
-}
-var animate_objects = {};
-function myAnimRotate(obj, open_doors, item, isCorner) {
-  var animateStep = animate_objects[obj.name].animateStep;
-
-  // if open the door, animateStep increases to ANIMATE_STEP_MAX and if close the door, animateStep decreases to ANIMATE_STEP_MIN
-  animateStep = open_doors ? animateStep + 1 : animateStep - 1;
-
-  // clear interval when the opening or closing door is ended.
-  if (animateStep > ANIMATE_STEP_MAX || animateStep < ANIMATE_STEP_MIN) {
-    clearInterval(animate_objects[obj.name].animate_intervalID);
-    return;
-  }
-  animate_objects[obj.name].animateStep = animateStep;
-  animateDoor(animate_objects[obj.name].offset, obj, open_doors, item, isCorner, 'Opened3D');
-}
-function myAnimTranslate(obj, open_doors, item) {
-  var animateStep = animate_objects[obj.name].animateStep;
-  animateStep = open_doors ? animateStep + 1 : animateStep - 1;
-  if (animateStep > ANIMATE_STEP_MAX || animateStep < ANIMATE_STEP_MIN) {
-    clearInterval(animate_objects[obj.name].animate_intervalID);
-    return;
-  }
-  animate_objects[obj.name].animateStep = animateStep;
-  translateDrawer(item, obj, open_doors, 'Opened3D');
-}
-function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSceneData, catalog) {
-  var mode = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  var value = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
-  var promises = [];
-  var matchStr = /\d_(door[^LR1-9]*)(_[LR])?(_[1-9])?$/;
-  switch (modifiedPath[3]) {
-    case 'vertices':
-      if (modifiedPath[5] !== 'selected') {
-        var vertex = layer.getIn(['vertices', modifiedPath[4]]);
-        if (modifiedPath[5] === 'x' || modifiedPath[5] === 'y') {
-          vertex.lines.forEach(function (lineID) {
-            var lineHoles = oldSceneData.getIn(['layers', layer.id, 'lines', lineID, 'holes']);
-            if (lineHoles) lineHoles.forEach(function (holeID) {
-              replaceObject([0, 0, 0, 'holes', holeID, 'selected'], layer, planData, actions, sceneData, oldSceneData, catalog, mode);
-            });
-            return replaceObject([0, 0, 0, 'lines', lineID], layer, planData, actions, sceneData, oldSceneData, catalog, mode);
-          });
-          vertex.areas.forEach(function (areaID) {
-            return replaceObject([0, 0, 0, 'areas', areaID], layer, planData, actions, sceneData, oldSceneData, catalog, mode);
-          });
-        }
-        if (modifiedPath[5] === 'areas') {
-          var areaID = vertex.getIn(['areas', ~~modifiedPath[6]]);
-          replaceObject([0, 0, 0, 'areas', areaID], layer, planData, actions, sceneData, oldSceneData, catalog, mode);
-        }
-      }
-      break;
-    case 'holes':
-      var newHoleData = layer.getIn(['holes', modifiedPath[4]]);
-      if (catalog.getElement(newHoleData.type).updateRender3D) {
-        promises.push(updateHole(sceneData, oldSceneData, planData, layer, modifiedPath[4], modifiedPath.slice(5), catalog, actions.holesActions, function () {
-          return removeHole(planData, layer.id, newHoleData.id);
-        }, function () {
-          return addHole(sceneData, planData, layer, newHoleData.id, catalog, actions.holesActions, mode);
-        }));
-      } else {
-        var lineID = newHoleData.line;
-        if (modifiedPath[5] === 'selected' || scene_mode === 'MODE_DRAWING_HOLE_3D' || scene_mode === 'MODE_DRAGGING_HOLE_3D') {
-          // I remove only the hole without removing the wall
-          removeHole(planData, layer.id, newHoleData.id);
-          promises.push(addHole(sceneData, planData, layer, newHoleData.id, catalog, actions.holesActions, mode));
-        } else {
-          layer.getIn(['lines', lineID, 'holes']).forEach(function (holeID) {
-            removeHole(planData, layer.id, holeID);
-          });
-          removeLine(planData, layer.id, lineID);
-          promises.push(addLine(sceneData, planData, layer, lineID, catalog, actions.linesActions));
-          layer.getIn(['lines', lineID, 'holes']).forEach(function (holeID) {
-            promises.push(addHole(sceneData, planData, layer, holeID, catalog, actions.holesActions, mode));
-          });
-        }
-      }
-      break;
-    case 'lines':
-      var line = layer.getIn(['lines', modifiedPath[4]]);
-      if (catalog.getElement(line.type).updateRender3D) {
-        promises.push(updateLine(sceneData, oldSceneData, planData, layer, modifiedPath[4], modifiedPath.slice(5), catalog, actions.linesActions, function () {
-          return removeLine(planData, layer.id, modifiedPath[4]);
-        }, function () {
-          return addLine(sceneData, planData, layer, modifiedPath[4], catalog, actions.linesActions);
-        }));
-      } else {
-        removeLine(planData, layer.id, modifiedPath[4]);
-        promises.push(addLine(sceneData, planData, layer, modifiedPath[4], catalog, actions.linesActions));
-      }
-      break;
-    case 'areas':
-      var area = layer.getIn(['areas', modifiedPath[4]]);
-      if (catalog.getElement(area.type).updateRender3D) {
-        promises.push(updateArea(sceneData, oldSceneData, planData, layer, modifiedPath[4], modifiedPath.slice(5), catalog, actions.areaActions, function () {
-          return removeArea(planData, layer.id, modifiedPath[4]);
-        }, function () {
-          return addArea(sceneData, planData, layer, modifiedPath[4], catalog, actions.areaActions);
-        }));
-      } else {
-        if (planData.sceneGraph.layers[layer.id].areas[modifiedPath[4]]) {
-          removeArea(planData, layer.id, modifiedPath[4]);
-        }
-        promises.push(addArea(sceneData, planData, layer, modifiedPath[4], catalog, actions.areaActions));
-      }
-      break;
-    case 'items':
-      var item = layer.getIn(['items', modifiedPath[4]]);
-      deleteCountertop(planData.sceneGraph.layers[layer.id].countertops, item, planData, layer);
-      var tmpMoldings = _toConsumableArray(planData.sceneGraph.layers[layer.id].moldingGroups);
-      if (catalog.getElement(item.type).updateRender3D) {
-        promises.push(updateItem(sceneData, oldSceneData, planData, layer, modifiedPath[4], modifiedPath.slice(5), catalog, actions.itemsActions, function () {
-          return removeItem(planData, layer.id, modifiedPath[4], oldSceneData.getIn(['layers', layer.id]), layer);
-        }, function () {
-          return addItem(sceneData, planData, layer, modifiedPath[4], catalog, actions.itemsActions, mode);
-        }));
-      } else {
-        var item3D = null;
-        try {
-          item3D = planData.sceneGraph.layers[layer.id].items[modifiedPath[4]];
-        } catch (err) {
-          console.log('modifiedPath: ', modifiedPath, '\nError: ', err);
-          return;
-        }
-        if (!item3D) return;
-        var keyIndex = modifiedPath.length - 1;
-        if (modifiedPath[keyIndex] == 'rotation') {
-          item3D.rotation.set(0, value * Math.PI / 180 + Math.PI, 0);
-          setTimeout(function () {
-            getDistances(layer);
-          }, 50);
-          removeSelItemMesh(tmpMoldings, item, planData, mode);
-        } else if (modifiedPath[keyIndex] == 'x') {
-          item3D.position.x = value;
-          setTimeout(function () {
-            getDistances(layer);
-          }, 50);
-          removeSelItemMesh(tmpMoldings, item, planData, mode);
-        } else if (modifiedPath[keyIndex] == 'y') {
-          item3D.position.z = -value;
-          setTimeout(function () {
-            getDistances(layer);
-          }, 50);
-          removeSelItemMesh(tmpMoldings, item, planData, mode);
-        } else if (modifiedPath[keyIndex] == 'selected') {
-          var itemType = !!catalog.elements[item.type] ? catalog.elements[item.type].type : catalog.elements[returnReplaceableDeepSearchType(item.type)].type;
-          if (value == false) {
-            item3D.children[0].children = item3D.children[0].children.filter(function (item3DElement) {
-              return item3DElement.name !== 'TransformBox' && item3DElement.name !== 'TransformGizmo';
-            });
-            if (item3D) {
-              if (item3D.children.length > 1) {
-                item3D.children.pop();
-              }
-              var mBoxColor = 0x99c3fb;
-              var _item = item.toJS();
-              if (_item.doorStyle.doorStyles !== undefined && _item.doorStyle.doorStyles.cds) {
-                if (showYelloBox(_item)) {
-                  mBoxColor = 'rgba(232,187,47,1)';
-                  var mBox = GeomUtils.makeMBoxfromObject(item3D, mBoxColor);
-                  var warningObj = createWarningObject();
-                  warningObj.position.set(0, item.properties.get('height').get('length') / 3, 0);
-                  if (mBox) {
-                    mBox.add(warningObj);
-                    item3D.add(mBox);
-                  }
-                }
-              }
-            }
-            var temp_MGArray = planData.sceneGraph.layers[layer.id].moldingGroups;
-          } else {
-            if (item3D.name !== 'pivot' && item3D.children[0].children[item3D.children[0].children.length - 1].name == 'TransformGizmo') return;
-            if (item3D.children[0].children[item3D.children[0].children.length - 1].name == 'TransformGizmo') {
-              item3D.children[0].children.pop();
-            }
-            var object = item3D.children[0].clone();
-            if (item3D.children.length > 1) {
-              item3D.children.pop();
-            }
-            item3D.children.pop();
-            var altitude = item.properties.get('altitude').get('length');
-            var scalevec = new Three.Vector3(object.scale.x, object.scale.y, object.scale.z);
-            var posVec = new Three.Vector3(object.position.x, object.position.y, object.position.z);
-            var newAltitude = item.properties.get('altitude').get('_length');
-            var newUnit = item.properties.get('altitude').get('_unit') || 'in';
-            newAltitude = convert(newAltitude).from(newUnit).to(sceneData.unit);
-            var newWidth = item.properties.get('width').get('_length');
-            var newWidthUnit = item.properties.get('width').get('_unit') || 'in';
-            newWidth = convert(newWidth).from(newWidthUnit).to('in');
-            var newHeight = item.properties.get('height').get('_length');
-            var newHeightUnit = item.properties.get('height').get('_unit') || 'in';
-            newHeight = convert(newHeight).from(newHeightUnit).to('in');
-            var newDepth = item.properties.get('depth').get('_length');
-            var newDepthUnit = item.properties.get('depth').get('_unit') || 'in';
-            newDepth = convert(newDepth).from(newDepthUnit).to('in');
-            var sizeinfo = !!catalog.elements[item.type] ? catalog.elements[item.type].info.sizeinfo : catalog.elements[returnReplaceableDeepSearchType(item.type)].info.sizeinfo;
-            object.scale.set(1 * newWidth / sizeinfo.width, 1 * newHeight / sizeinfo.height, 1 * newDepth / sizeinfo.depth);
-            object.position.set(0, 0, 0);
-            object.rotation.set(0, 0, 0);
-            var box = GeomUtils.baseBoxHelper(object, 0xffffff);
-            box.material.lineWidth = 0.01;
-            var boundingBox = GeomUtils.baseBox3FromObject(object);
-            var max = boundingBox.max;
-            var min = boundingBox.min;
-            var radius = Math.sqrt((boundingBox.max.x - boundingBox.min.x) * (boundingBox.max.x - boundingBox.min.x) + (boundingBox.max.z - boundingBox.min.z) * (boundingBox.max.z - boundingBox.min.z)) / 2;
-            var moveBox = new Three.BoxGeometry(max.x - min.x, max.y - min.y, max.z - min.z);
-
-            // translate Object
-            var controlGeom = GeomUtils.controlGeom();
-
-            // rotate Object //////////
-            var rotGeom = GeomUtils.rotGeoms(radius + 0.05);
-            // //////////////////////////////////
-            // upwards Geometry///////////
-            var upwardsGeom = GeomUtils.upwardsGeom();
-            var vLineGeom = new Three.BufferGeometry();
-            var vertices = [(max.x - min.x) / 2 + min.x, 0, max.z, (max.x - min.x) / 2 + min.x, 0, max.z + 1.3];
-            vLineGeom.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices), 3));
-            vLineGeom.attributes.position.needsUpdate = true;
-            var vLineGeom1 = new Three.BufferGeometry();
-            var vertices1 = [(max.x - min.x) / 2 + min.x, 0, min.z, (max.x - min.x) / 2 + min.x, 0, min.z - 1.3];
-            vLineGeom1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices1), 3));
-            vLineGeom1.attributes.position.needsUpdate = true;
-            var vLineGeom2 = new Three.BufferGeometry();
-            var vertices2 = [max.x, 0, max.z - (max.z - min.z) / 2, max.x + 1.3, 0, max.z - (max.z - min.z) / 2];
-            vLineGeom2.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices2), 3));
-            var vLineGeom3 = new Three.BufferGeometry();
-            var vertices3 = [min.x, 0, max.z - (max.z - min.z) / 2, min.x - 1.3, 0, max.z - (max.z - min.z) / 2];
-            vLineGeom3.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices3), 3));
-            // ///////////////////////////////////////
-
-            // set names of transform object
-            var rotFillObj = new Three.Mesh(rotGeom.rotFill, new Three.MeshPhongMaterial({
-              color: 0x000000,
-              side: Three.DoubleSide,
-              colorWrite: true
-            }));
-            var rotStrokeObj = new Three.Line(rotGeom.rotStroke, new Three.LineBasicMaterial({
-              color: 0xffffff,
-              colorWrite: true
-            }));
-            rotFillObj.name = 'rotate';
-            var upObj = new Three.Mesh(upwardsGeom, new Three.MeshBasicMaterial({
-              color: 0x000000,
-              side: Three.DoubleSide
-            }));
-            // let upLine = new Three.Line(upwardsGeom, new Three.LineBasicMaterial({ color: 0x000000 }));
-            // upLine.name = "transUp";
-            // upObj.add(upLine);
-            upObj.name = 'transUp';
-            var upwardbox = new Three.BoxHelper(upObj, 0x326780);
-            upwardbox.material.lineWidth = 0.01;
-            fVLine = [];
-            // let obj = new Three.Mesh(controlGeom, new Three.MeshPhongMaterial({ color: 0xffffff, side: Three.DoubleSide, colorWrite: true }));
-            // obj.name = "translateX";
-            var color = SHADE_DARK_PURPLE_COLOR;
-            var _mBox = new Three.Mesh(moveBox, new Three.MeshBasicMaterial({
-              color: 0xdd6699,
-              side: Three.DoubleSide,
-              transparent: true,
-              opacity: 0.4
-            }));
-            var vLine = new Three.Line(vLineGeom, new Three.LineBasicMaterial({
-              color: color
-            }));
-            var vLine1 = new Three.Line(vLineGeom1, new Three.LineBasicMaterial({
-              color: color
-            }));
-            var vLine2 = new Three.Line(vLineGeom2, new Three.LineBasicMaterial({
-              color: color
-            }));
-            var vLine3 = new Three.Line(vLineGeom3, new Three.LineBasicMaterial({
-              color: color
-            }));
-            fVLine.push(vLine);
-            fVLine.push(vLine1);
-            fVLine.push(vLine2);
-            fVLine.push(vLine3);
-            vLine.renderOrder = 1;
-            vLine1.renderOrder = 1;
-            vLine2.renderOrder = 1;
-            vLine3.renderOrder = 1;
-            vLine.material.transparent = true;
-            vLine1.material.transparent = true;
-            vLine2.material.transparent = true;
-            vLine3.material.transparent = true;
-            vLine.material.depthTest = false;
-            vLine1.material.depthTest = false;
-            vLine2.material.depthTest = false;
-            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);
-            upObj.translateOnAxis(uVec, 1);
-            upObj.translateY(max.y - min.y);
-            _mBox.name = 'TransformBox';
-            _mBox.translateOnAxis(new Three.Vector3(uVec.x, uVec.y + (max.y - min.y) / 2, uVec.z), 1);
-            _mBox.scale.set(1.01, 1.01, 1.01);
-            var rotFillObj1 = rotFillObj.clone();
-            var rotStrokeObj1 = rotStrokeObj.clone();
-            rotFillObj1.rotateY(Math.PI);
-            rotStrokeObj1.rotateY(Math.PI);
-            var asrtObj = new Three.Group();
-            // let asrtObj1 = new Three.Group();
-            // asrtObj.add(obj);
-            // asrtObj.add(obj1);
-            rotFillObj.translateY(blLighting ? 1.6 : 0.1);
-            rotFillObj1.translateY(blLighting ? 1.6 : 0.1);
-            rotStrokeObj.translateY(blLighting ? 1.6 : 0.1);
-            rotStrokeObj1.translateY(blLighting ? 1.6 : 0.1);
-            upObj.translateY(posVec.y / scalevec.y);
-            upObj.add(upwardbox);
-            //asrtObj.add(upObj);
-            // vLine.translateY(posVec.y / scalevec.y);
-            // vLine1.translateY(posVec.y / scalevec.y);
-            // vLine2.translateY(posVec.y / scalevec.y);
-            // vLine3.translateY(posVec.y / scalevec.y);
-
-            _mBox.translateY(posVec.y / scalevec.y);
-            // asrtObj.add(rotFillObj);
-            // asrtObj.add(rotFillObj1);
-            // asrtObj.add(rotStrokeObj);
-            // asrtObj.add(rotStrokeObj1);
-            asrtObj.add(vLine);
-            asrtObj.add(vLine1);
-            asrtObj.add(vLine2);
-            asrtObj.add(vLine3);
-            asrtObj.add(box);
-            asrtObj.scale.set(1 / object.scale.x, object.scale.y, 1 / object.scale.z);
-            _mBox.visible = false;
-            // transformBox = mBox;
-            // asrtObj.add(mBox);
-            asrtObj.name = 'TransformGizmo';
-            object.add(asrtObj);
-            object.position.x = posVec.x;
-            object.position.y = posVec.y;
-            object.position.z = posVec.z;
-            // object.rotation.y = Math.PI;
-            object.scale.set(scalevec.x, scalevec.y, scalevec.z);
-            item3D.add(object);
-            if (item3D) {
-              var _mBoxColor = 0x99c3fb;
-              var _item2 = item.toJS();
-              if (_item2.doorStyle.doorStyles !== undefined && _item2.doorStyle.doorStyles.cds) {
-                if (showYelloBox(_item2)) {
-                  _mBoxColor = 'rgba(232,187,47,1)';
-                  var _mBox2 = GeomUtils.makeMBoxfromObject(item3D, _mBoxColor);
-                  var _warningObj = createWarningObject();
-                  _warningObj.position.set(0, item.properties.get('height').get('length') / 3, 0);
-                  if (_mBox2) {
-                    _mBox2.add(_warningObj);
-                    item3D.add(_mBox2);
-                  }
-                }
-              }
-            }
-            applyInteract(item3D, function () {
-              // closes the setting dialog
-              // document.getElementById('setting_dialog').style.display = 'none';
-              return actions.itemsActions.selectItem(layer.id, modifiedPath[4]);
-            });
-            setTimeout(function () {
-              getDistances(layer);
-            }, 100);
-          }
-        } else if (modifiedPath[keyIndex] == 'length') {
-          var _object = item3D.children[0];
-          var prevPos = _object.position;
-          _object.position.set(prevPos.x, value, prevPos.z);
-        } else if (modifiedPath[keyIndex] == 'flip_doorhandle') {
-          updateDoorHandleMesh(item, item3D, value);
-          var _object2 = item3D.children[0];
-          var door_animate_offset = _object2.userData.door_animate_offset;
-          var _loop = function _loop(it) {
-            if (_object2.children.filter(function (elem) {
-              return elem.name === it;
-            }).length) {
-              var door_match = it.match(matchStr);
-              var rotate_match_text = item.properties.toJS().flip_doorhandle ? 'rotate_L' : 'rotate_R';
-              if (door_match[2] === '_L') {
-                rotate_match_text = item.properties.toJS().flip_doorhandle ? 'rotate_R' : 'rotate_L';
-              }
-              _object2.children.filter(function (elem) {
-                return elem.name === it;
-              })[0].children[0].children.forEach(function (child) {
-                if (child.name.endsWith(rotate_match_text)) {
-                  door_animate_offset[it] = {
-                    x: child.position.x,
-                    y: child.position.y,
-                    z: child.position.z
-                  };
-                }
-              });
-            }
-          };
-          for (var it in door_animate_offset) {
-            _loop(it);
-          }
-          _object2.userData.door_animate_offset = door_animate_offset;
-        } else if (modifiedPath[keyIndex] == 'animValue') {
-          return;
-        } else if (modifiedPath[keyIndex] == 'open_doors') {
-          var _object3 = item3D.children[0];
-          var userData = item3D.children[0].userData;
-          var moveObjectChildrens = [];
-          var selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]).toJS();
-          _object3.children.forEach(function (child, idx) {
-            var object_match = child.name.match(/\d_(interior_drawer[^LR1-9]*)(_[LR1-9])?$/) || child.name.match(matchStr);
-            if (object_match && object_match.length > 2) {
-              moveObjectChildrens.push({
-                type: object_match[1],
-                obj: child
-              });
-              animate_objects[child.name] = animate_objects[child.name] || {};
-            }
-          });
-          var temp = moveObjectChildrens.filter(function (item) {
-            var _object3$userData$doo;
-            return (_object3$userData$doo = _object3.userData.door_animate_offset[item.obj.name]) === null || _object3$userData$doo === void 0 ? void 0 : _object3$userData$doo.isCorner;
-          });
-          var isCorner = temp.length > 0;
-          moveObjectChildrens.forEach(function (element) {
-            var _animate_objects$elem, _animate_objects$elem2;
-            if (((_animate_objects$elem = animate_objects[element.obj.name]) === null || _animate_objects$elem === void 0 ? void 0 : _animate_objects$elem.animateStep) === undefined) {
-              animate_objects[element.obj.name].animateStep = selectedItem.properties.open_doors ? ANIMATE_STEP_MIN : ANIMATE_STEP_MAX;
-            }
-
-            // clear origin Interval.
-            if ((_animate_objects$elem2 = animate_objects[element.obj.name]) !== null && _animate_objects$elem2 !== void 0 && _animate_objects$elem2.animate_intervalID) {
-              var _animate_objects$elem3;
-              clearInterval((_animate_objects$elem3 = animate_objects[element.obj.name]) === null || _animate_objects$elem3 === void 0 ? void 0 : _animate_objects$elem3.animate_intervalID);
-            }
-            if (element.type === 'door') {
-              var _userData$door_animat, _element$obj;
-              // This is excuted when item has door.
-              var offset = userData === null || userData === void 0 || (_userData$door_animat = userData.door_animate_offset) === null || _userData$door_animat === void 0 ? void 0 : _userData$door_animat[element === null || element === void 0 || (_element$obj = element.obj) === null || _element$obj === void 0 ? void 0 : _element$obj.name];
-              if (offset) {
-                var _offset$x, _offset$y, _offset$z;
-                animate_objects[element.obj.name].offset = {
-                  x: (_offset$x = offset.x) !== null && _offset$x !== void 0 ? _offset$x : 0,
-                  y: (_offset$y = offset.y) !== null && _offset$y !== void 0 ? _offset$y : 0,
-                  z: (_offset$z = offset.z) !== null && _offset$z !== void 0 ? _offset$z : 0
-                };
-              } else {
-                var _element$obj2;
-                console.warn('⚠ Missing door_animate_offset for', element === null || element === void 0 || (_element$obj2 = element.obj) === null || _element$obj2 === void 0 ? void 0 : _element$obj2.name);
-                animate_objects[element.obj.name].offset = {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                };
-              }
-
-              // Set the interval ID to new interval ID
-              animate_objects[element.obj.name].animate_intervalID = setInterval(function () {
-                myAnimRotate(element.obj, selectedItem.properties.open_doors, selectedItem, isCorner);
-              }, 30);
-            } else {
-              // This is excuted when item has drawer box
-              // Set the interval ID to new interval ID
-              animate_objects[element.obj.name].animate_intervalID = setInterval(function () {
-                myAnimTranslate(element.obj, selectedItem.properties.open_doors, selectedItem);
-              }, 30);
-            }
-          });
-        } else if (['_length', 'doorStyle', 'cabinet_door_style_id', 'counterTop', 'texture', 'drawer_door_handle_1_gltf'].includes(modifiedPath[keyIndex])) {
-          var rItem = planData.sceneGraph.layers[layer.id].items[modifiedPath[4]];
-          if (rItem) {
-            if (rItem.children.length > 1) {
-              rItem.children.pop();
-            }
-            var _mBoxColor2 = 0x99c3fb;
-            var _item3 = item.toJS();
-            if (_item3.doorStyle.doorStyles !== undefined && _item3.doorStyle.doorStyles.cds) {
-              if (showYelloBox(_item3)) {
-                _mBoxColor2 = 'rgba(232,187,47,1)';
-              }
-            }
-            rItem.children[0].children.forEach(function (rItemElement) {
-              rItemElement.visible = false;
-            });
-            var _mBox3 = GeomUtils.makeMBoxfromObject(rItem, _mBoxColor2);
-            if (_mBox3) {
-              //rItem.add (mBox);
-            }
-          }
-          if (rItem != null) {
-            removeItemWithoutItem(planData, layer.id, modifiedPath[4]);
-            promises.push(addItem(sceneData, planData, layer, modifiedPath[4], catalog, actions.itemsActions, mode, null, rItem));
-            setTimeout(function () {
-              getDistances(layer);
-            }, 100);
-          }
-          break;
-        }
-      }
-      item = layer.getIn(['items', modifiedPath[4]]);
-      addCountertop(planData.sceneGraph.layers[layer.id].countertops, item, planData, layer);
-      // Toggle selection should not update molding
-      if (item.category === 'cabinet' && modifiedPath[modifiedPath.length - 1] !== 'selected') {
-        planData.sceneGraph.layers[layer.id].moldingGroups = addMolding(tmpMoldings, item, planData, layer, actions.itemsActions, mode) || _toConsumableArray(tmpMoldings);
-      }
-      break;
-    case 'visible':
-      if (!layer.visible) {
-        var _layerGraph = planData.sceneGraph.layers[layer.id];
-        for (var _lineID in _layerGraph.lines) removeLine(planData, layer.id, _lineID);
-        for (var _areaID in _layerGraph.areas) removeArea(planData, layer.id, _areaID);
-        for (var itemID in _layerGraph.items) removeItem(planData, layer.id, itemID);
-        for (var holeID in _layerGraph.holes) removeHole(planData, layer.id, holeID);
-      } else {
-        promises = promises.concat(createLayerObjects(layer, planData, sceneData, actions, catalog, mode));
-      }
-      break;
-    case 'unit':
-    case 'ceilHeight':
-    case 'opacity':
-    case 'altitude':
-    case 'molding':
-      var layerGraph = planData.sceneGraph.layers[layer.id];
-      for (var _lineID2 in layerGraph.lines) removeLine(planData, layer.id, _lineID2);
-      for (var _areaID2 in layerGraph.areas) removeArea(planData, layer.id, _areaID2);
-      for (var _itemID2 in layerGraph.items) removeItem(planData, layer.id, _itemID2);
-      for (var _holeID in layerGraph.holes) removeHole(planData, layer.id, _holeID);
-      promises = promises.concat(createLayerObjects(layer, planData, sceneData, actions, catalog, mode));
-  }
-  var p1 = new Promise(function (resolve) {
-    Promise.all(promises).then(function (values) {
-      updateBoundingBox(planData, true, mode);
-      resolve('replaceObject');
-    });
-  });
-  return {
-    promise: p1
-  };
-}
-export function getDistances(layer, isCalcWall) {
-  fVLine.forEach(function (line, index) {
-    getLineDistance(line, layer, isCalcWall === undefined ? false : isCalcWall, index);
-  });
-}
-function getLineDistance(obj, layer, isCalcWall, index) {
-  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 intersects = raycaster.intersectObjects(meshes, true);
-  var lx = wPoint0.x - wPoint1.x;
-  var ly = wPoint0.y - wPoint1.y;
-  var lz = wPoint0.z - wPoint1.z;
-  var length = Math.sqrt(lx * lx + ly * ly + lz * lz);
-  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();
-  if (!isCalcWall) {
-    for (var i = 0; i < intersects.length; i++) {
-      if (intersects[i].object.name != 'TransformBox' && !intersects[i].object.name.includes('WarningBox') && intersects[i].object.type != 'Line' && intersects[i].object.name != 'rotate' && intersects[i].object.name != 'lineText' && intersects[i].object.type != 'BoxHelper' && !intersects[i].object.name.includes('molding') && intersects[i].object.name != 'soul') {
-        scale = intersects[i].distance / length;
-        if (intersects[i].distance <= 0.1) {
-          scale = 0.1 / length;
-        }
-        obj.userData.distance = intersects[i].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 = formatNumber(convert(intersects[i].distance).from('cm').to('in'), DECIMAL_PLACES_2);
-        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);
-          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);
-          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.name != 'pivot';) {
-          if (real_target.parent == null) break;
-          real_target = real_target.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;
-      }
-    }
-  }
-  var tX = wPoint0.x - planData.plan.position.x;
-  var tZ = wPoint0.z - planData.plan.position.z;
-  tZ = -tZ;
-  var tX1 = wPoint1.x - planData.plan.position.x;
-  var tZ1 = wPoint1.z - planData.plan.position.z;
-  tZ1 = -tZ1;
-  if (!layer) return;
-  layer.lines.forEach(function (data) {
-    var px = [];
-    var py = [];
-    var opX = [tX, tX1];
-    var opY = [tZ, tZ1];
-    data.vertices.forEach(function (vec) {
-      var vertices = layer.vertices.get(vec);
-      px.push(vertices.x);
-      py.push(vertices.y);
-    });
-    var distance = getIntersectPoint(opX, opY, px, py);
-    if (distance != null) {
-      obj.userData.distance = distance;
-      obj.userData.target = planData.sceneGraph.layers[layer.id].lines[data.get('id')];
-      scale = distance / length;
-      if (distance <= 0.1) {
-        scale = 0.1 / length;
-      }
-      var _originPoint = obj.geometry.attributes.position.array.slice(0, 3);
-      lx = obj.geometry.attributes.position.array[3] - obj.geometry.attributes.position.array[0];
-      ly = obj.geometry.attributes.position.array[4] - obj.geometry.attributes.position.array[1];
-      lz = obj.geometry.attributes.position.array[5] - obj.geometry.attributes.position.array[2];
-      var _newVec = new Three.Vector3(_originPoint.x + lx * scale, _originPoint.y + ly * scale, _originPoint.z + 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;
-      var _dist = formatNumber(distance, DECIMAL_PLACES_2);
-      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);
-        _texture.needsUpdate = true;
-        var _geometry = new Three.PlaneGeometry(_wid / 2, _hei / 2);
-        _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 _sprite = new Three.Sprite(new Three.SpriteMaterial({
-          map: _texture
-        }));
-        _sprite.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);
-        _sprite.name = 'lineText';
-        _sprite.scale.set(0.2, 0.1, 0.2);
-        _sprite.layers.set(1);
-        obj.add(_sprite);
-        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)) - 0.02);
-        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) {
-      // let item3D = obj.parent.parent.parent;
-      // let pos = item3D.position.clone();
-      // 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;
-      // itemsActions.updateDraggingItemChanged(pos.x - uVec.x, -pos.z + uVec.z);
-      // }
-    }
-  });
-  obj.visible = false;
-  return obj;
-}
-export function getIntersectPoint(opX, opY, pX, pY) {
-  var oA;
-  if (opX[1] == opX[0]) oA = null;else oA = (opY[1] - opY[0]) / (opX[1] - opX[0]);
-  var A;
-  if (pX[1] == pX[0]) A = null;else A = (pY[1] - pY[0]) / (pX[1] - pX[0]);
-  if (oA == A) return null;
-  if (oA != null && A != null) {
-    var oB = opY[0] - oA * opX[0];
-    var B = pY[0] - A * pX[0];
-    var iX = (B - oB) / (oA - A);
-    if (pX[0] <= iX && iX <= pX[1] || pX[0] >= iX && iX >= pX[1]) {
-      if (opX[0] <= opX[1] && opX[0] <= iX || opX[0] >= opX[1] && opX[0] >= iX) {
-        var iY = pY[0] + A * (iX - pX[0]);
-        var distance = Math.sqrt((opX[0] - iX) * (opX[0] - iX) + (opY[0] - iY) * (opY[0] - iY));
-        return distance;
-      }
-      return null;
-    }
-  }
-  if (oA == null) {
-    var _iX = opX[0];
-    if (A != null) {
-      if (pX[0] <= _iX && _iX <= pX[1] || pX[0] >= _iX && _iX >= pX[1]) {
-        var _iY = pY[0] + A * (_iX - pX[0]);
-        if (opY[0] <= _iY && opY[0] <= opY[1] || opY[0] >= _iY && opY[0] >= opY[1]) {
-          var _distance = Math.sqrt((opX[0] - _iX) * (opX[0] - _iX) + (opY[0] - _iY) * (opY[0] - _iY));
-          return _distance;
-        }
-      }
-    }
-  }
-  if (A == null) {
-    var _iX2 = pX[0];
-    if (oA != null) {
-      var _iY2 = _iX2 * oA + opY[0] - oA * opX[0];
-      if (pY[0] <= _iY2 && _iY2 <= pY[1] || pY[0] >= _iY2 && _iY2 >= pY[1]) {
-        if (opY[0] <= _iY2 && opY[0] <= opY[1] || opY[0] >= _iY2 && opY[0] >= opY[1]) {
-          var _distance2 = Math.sqrt((opX[0] - _iX2) * (opX[0] - _iX2) + (opY[0] - _iY2) * (opY[0] - _iY2));
-          return _distance2;
-        }
-      }
-    }
-  }
-  return null;
-}
-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] : {};
-  var canvas = document.createElement('canvas');
-  var ctx = canvas.getContext('2d');
-  var fontSize = 16;
-  var integral = String(text) + "''";
-  parameters.fontName = parameters.fontName || ARROW_TEXT_FONTFACE;
-
-  // Prepare the font to be able to measure
-  ctx.font = "".concat(fontSize, "px ") + parameters.fontName;
-  if (parameters.italic) {
-    ctx.font = "italic ".concat(fontSize, "px ") + parameters.fontName;
-  }
-  if (parameters.bold) {
-    ctx.font = "bold ".concat(fontSize, "px ") + parameters.fontName;
-  }
-  if (parameters.bold && parameters.italic) {
-    ctx.font = "italic bold ".concat(fontSize, "px ") + parameters.fontName;
-  }
-  var textMetrics = ctx.measureText(integral);
-  var width = 70;
-  var height = fontSize + 20;
-
-  // Resize canvas to match text size
-  canvas.width = width;
-  canvas.height = height;
-  canvas.style.width = width + 'px';
-  canvas.style.height = height + 'px';
-
-  // Re-apply font since canvas is resized.
-  ctx.font = "".concat(fontSize, "px ") + parameters.fontName;
-  if (parameters.italic) {
-    ctx.font = "italic ".concat(fontSize, "px ") + parameters.fontName;
-  }
-  if (parameters.bold) {
-    ctx.font = "bold ".concat(fontSize, "px ") + parameters.fontName;
-  }
-  if (parameters.bold && parameters.italic) {
-    ctx.font = "italic bold ".concat(fontSize, "px ") + parameters.fontName;
-  }
-  //ctx.textAlign = parameters.align || "center";
-  ctx.textBaseline = parameters.baseline || 'middle';
-  var r = 10;
-  // Make the canvas transparent for simplicity
-  ctx.fillStyle = ARROW_TEXT_BACKCOLOR;
-  // ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-  var w = ctx.canvas.width;
-  var h = ctx.canvas.height;
-  ctx.beginPath();
-  ctx.moveTo(r, 0);
-  ctx.lineTo(w - r, 0);
-  ctx.arcTo(w, 0, w, r, r);
-  ctx.lineTo(w, h - r);
-  ctx.arcTo(w, h, w - r, h, r);
-  ctx.lineTo(r, h);
-  ctx.arcTo(0, h, 0, h - r, r);
-  ctx.lineTo(0, r);
-  ctx.arcTo(0, 0, r, 0, r);
-  // ctx.arcTo(w+r, h+2*r, w+r, 0, r);
-  ctx.fill();
-  ctx.fillStyle = parameters.fillColor || ARROW_TEXT_FORECOLOR;
-  ctx.fillText(integral, (width - textMetrics.width) / 2, height / 2);
-  ctx.strokeStyle = parameters.strokeColor || ARROW_TEXT_FORECOLOR;
-  ctx.strokeText(integral, (width - textMetrics.width) / 2, height / 2);
-
-  // ctx.font = `${fontSize - 5}px ` + parameters.fontName;
-  // const denoMetrics = ctx.measureText(deno);
-  // const numoMetrics = ctx.measureText(numo);
-  // ctx.fillStyle = ARROW_TEXT_FORECOLOR;
-  // ctx.fillRect(
-  //   ctx.canvas.width / 2 + 3,
-  //   ctx.canvas.height / 2 - 2,
-  //   denoMetrics.width,
-  //   1
-  // );
-
-  // const denoMetrics = ctx.measureText(deno);
-  // ctx.fillStyle = ARROW_TEXT_FORECOLOR;
-  // ctx.fillRect(
-  //   ctx.canvas.width / 2 + 3,
-  //   ctx.canvas.height / 2 - 2,
-  //   denoMetrics.width,
-  //   1
-  // );
-
-  // ctx.fillStyle = parameters.fillColor || ARROW_TEXT_FORECOLOR;
-  // ctx.fillText(
-  //   numo,
-  //   ctx.canvas.width / 2 + 3 + (denoMetrics.width - numoMetrics.width) / 2,
-  //   height / 2 - 8
-  // );
-  // ctx.font = `${fontSize}px ` + parameters.fontName;
-  // ctx.fillText(
-  //   "''",
-  //   ctx.canvas.width / 2 + 4 + denoMetrics.width,
-  //   height / 2 - 7
-  // );
-  // ctx.font = `${fontSize - 5}px ` + parameters.fontName;
-
-  // ctx.strokeStyle = parameters.strokeColor || ARROW_TEXT_FORECOLOR;
-  // ctx.strokeText(
-  //   numo,
-  //   ctx.canvas.width / 2 + 3 + (denoMetrics.width - numoMetrics.width) / 2,
-  //   height / 2 - 8
-  // );
-
-  // ctx.fillStyle = parameters.fillColor || ARROW_TEXT_FORECOLOR;
-  // ctx.fillText(deno, ctx.canvas.width / 2 + 3, height / 2 + 8);
-  // ctx.strokeStyle = parameters.strokeColor || ARROW_TEXT_FORECOLOR;
-  // ctx.strokeText(deno, ctx.canvas.width / 2 + 3, height / 2 + 8);
-  return canvas;
-}
-function removeObject(modifiedPath, layer, planData, actions, sceneData, oldSceneData, catalog) {
-  var promises = [];
-  switch (modifiedPath[3]) {
-    case 'lines':
-      // Here I remove the line with all its holes
-      var lineID = modifiedPath[4];
-      oldSceneData.getIn(['layers', layer.id, 'lines', lineID, 'holes']).forEach(function (holeID) {
-        removeHole(planData, layer.id, holeID);
-      });
-      removeLine(planData, layer.id, lineID);
-      var mode = oldSceneData.mode;
-      if (ARRAY_3D_MODES.includes(mode)) mode = MODE_IDLE_3D;else mode = MODE_IDLE;
-      if (modifiedPath.length > 5) {
-        // I removed an hole, so I should add the new line
-        promises.push(addLine(sceneData, planData, layer, lineID, catalog, actions.linesActions));
-        layer.getIn(['lines', lineID, 'holes']).forEach(function (holeID) {
-          promises.push(addHole(sceneData, planData, layer, holeID, catalog, actions.holesActions, mode));
-        });
-      }
-      break;
-    case 'areas':
-      if (modifiedPath.length === 5) {
-        // I am removing an entire area
-        removeArea(planData, layer.id, modifiedPath[4]);
-      }
-      break;
-    case 'items':
-      if (modifiedPath.length === 5) {
-        // I am removing an item
-        removeItem(planData, layer.id, modifiedPath[4], oldSceneData.getIn(['layers', layer.id]), layer);
-      }
-      break;
-  }
-  Promise.all(promises).then(function (values) {
-    return updateBoundingBox(planData);
-  });
-}
-function removeLayer(layerId, planData) {
-  var layerGraph = planData.sceneGraph.layers[layerId];
-  for (var lineID in layerGraph.lines) removeLine(planData, layerId, lineID);
-  for (var areaID in layerGraph.areas) removeArea(planData, layerId, areaID);
-  for (var itemID in layerGraph.items) removeItem(planData, layerId, itemID);
-  for (var holeID in layerGraph.holes) removeHole(planData, layerId, holeID);
-  delete planData.sceneGraph.layers[layerId];
-}
-function removeHole(planData, layerId, holeID) {
-  if (planData.sceneGraph.busyResources.layers[layerId].holes[holeID]) {
-    setTimeout(function () {
-      return removeHole(planData, layerId, holeID);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layerId].holes[holeID] = true;
-  var hole3D = planData.sceneGraph.layers[layerId].holes[holeID];
-  if (hole3D) {
-    planData.plan.remove(hole3D);
-    disposeObject(hole3D);
-    delete planData.sceneGraph.layers[layerId].holes[holeID];
-    delete planData.sceneGraph.LODs[holeID];
-    hole3D = null;
-    updateBoundingBox(planData, true);
-  }
-  planData.sceneGraph.busyResources.layers[layerId].holes[holeID] = false;
-}
-function removeLine(planData, layerId, lineID) {
-  if (planData.sceneGraph.busyResources.layers[layerId].lines[lineID]) {
-    setTimeout(function () {
-      return removeLine(planData, layerId, lineID);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layerId].lines[lineID] = true;
-  var line3D = planData.sceneGraph.layers[layerId].lines[lineID];
-  if (line3D) {
-    planData.plan.remove(line3D);
-    disposeObject(line3D);
-    delete planData.sceneGraph.layers[layerId].lines[lineID];
-    delete planData.sceneGraph.LODs[lineID];
-    line3D = null;
-    updateBoundingBox(planData, true);
-  }
-  planData.sceneGraph.busyResources.layers[layerId].lines[lineID] = false;
-}
-function removeArea(planData, layerId, areaID) {
-  if (planData.sceneGraph.busyResources.layers[layerId].areas[areaID]) {
-    setTimeout(function () {
-      return removeArea(planData, layerId, areaID);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layerId].areas[areaID] = true;
-  var area3D = planData.sceneGraph.layers[layerId].areas[areaID];
-  if (area3D) {
-    planData.plan.remove(area3D);
-    disposeObject(area3D);
-    delete planData.sceneGraph.layers[layerId].areas[areaID];
-    delete planData.sceneGraph.LODs[areaID];
-    area3D = null;
-    updateBoundingBox(planData, true);
-  }
-  planData.sceneGraph.busyResources.layers[layerId].areas[areaID] = false;
-}
-export function removeItem(planData, layerId, itemID) {
-  var oldSceneLayer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  var newSceneLayer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-  if (planData.sceneGraph.busyResources.layers[layerId].items[itemID]) {
-    setTimeout(function () {
-      return removeItem(planData, layerId, itemID, oldSceneLayer, newSceneLayer);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layerId].items[itemID] = true;
-
-  // The layer variable is layer that contains the deleted item.
-  var layer = oldSceneLayer ? oldSceneLayer : planData.sceneData.getIn(['layers', layerId]);
-  var item = layer.getIn(['items', itemID]); // deleted item.
-  deleteCountertop(planData.sceneGraph.layers[layerId].countertops, item, planData, layer);
-  planData.sceneGraph.layers[layerId].moldingGroups = deleteAllMolding(planData.sceneGraph.layers[layerId].moldingGroups, item, planData, layer, newSceneLayer);
-  var item3D = planData.sceneGraph.layers[layerId].items[itemID];
-  if (item3D) {
-    planData.plan.remove(item3D);
-    disposeObject(item3D);
-    delete planData.sceneGraph.layers[layerId].items[itemID];
-    delete planData.sceneGraph.LODs[itemID];
-    item3D = null;
-    updateBoundingBox(planData, true);
-  }
-  planData.sceneGraph.busyResources.layers[layerId].items[itemID] = false;
-}
-function removeItemWithoutItem(planData, layerId, itemID) {
-  if (planData.sceneGraph.busyResources.layers[layerId].items[itemID]) {
-    setTimeout(function () {
-      return removeItemWithoutItem(planData, layerId, itemID);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layerId].items[itemID] = true;
-  var layer = planData.sceneData.getIn(['layers', layerId]);
-  var item = layer.getIn(['items', itemID]);
-  deleteCountertop(planData.sceneGraph.layers[layerId].countertops, item, planData, layer);
-  var item3D = planData.sceneGraph.layers[layerId].items[itemID];
-  if (item3D) {
-    planData.plan.remove(item3D);
-    disposeObject(item3D);
-    item3D = null;
-    updateBoundingBox(planData);
-    delete planData.sceneGraph.layers[layerId].items[itemID];
-    delete planData.sceneGraph.LODs[itemID];
-  }
-  planData.sceneGraph.busyResources.layers[layerId].items[itemID] = false;
-}
-
-//TODO generate an area's replace if vertex has been changed
-function addObject(modifiedPath, layer, planData, actions, sceneData, oldSceneData, catalog, mode, toolObj) {
-  if (modifiedPath.length >= 5) {
-    var addPromise = null,
-      addAction = null;
-    switch (modifiedPath[3]) {
-      case 'lines':
-        if (modifiedPath[5] === 'holes' && scene_mode !== 'MODE_DRAWING_HOLE_3D' && scene_mode !== 'MODE_DRAGGING_HOLE_3D') {
-          removeLine(planData, layer.id, modifiedPath[4]);
-        }
-        if (scene_mode !== 'MODE_DRAWING_HOLE_3D' && scene_mode !== 'MODE_DRAGGING_HOLE_3D') {
-          addPromise = addLine;
-        }
-        addAction = actions.linesActions;
-        break;
-      case 'areas':
-        addPromise = addArea;
-        addAction = actions.areaActions;
-        break;
-      case 'items':
-        addPromise = addItem;
-        addAction = actions.itemsActions;
-        break;
-      case 'holes':
-        addPromise = addHole;
-        addAction = actions.holesActions;
-        break;
-    }
-    if (addPromise) {
-      // if( addPromise(sceneData, planData, layer, modifiedPath[4], catalog, addAction) === undefined ) {
-      //   return;
-      // }
-      addPromise(sceneData, planData, layer, modifiedPath[4], catalog, addAction, mode, toolObj).then(function () {
-        return updateBoundingBox(planData);
-      });
-    }
-  }
-}
-function addHole(sceneData, planData, layer, holeID, catalog, holesActions, mode) {
-  var toolObj = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  var holeData = layer.getIn(['holes', holeID]);
-
-  // Create the hole object
-  return holeData === undefined ? '' : catalog.getElement(holeData.type).render3D(holeData, layer, sceneData).then(function (object) {
-    if (object instanceof Three.LOD) {
-      planData.sceneGraph.LODs[holeID] = object;
-    }
-    object.children.forEach(function (item) {
-      var name = item.name;
-      item.castShadow = true;
-      var texture;
-      if (name.includes('_wood')) {
-        texture = loadTexture('/assets/img/texture/white1px.jpg');
-      } else if (name.includes('_glass')) {
-        var material = new Three.MeshPhysicalMaterial({
-          roughness: 0.5,
-          transmission: 1,
-          thickness: 0.5,
-          // Add refraction!
-          transparency: 0.6
-        });
-        item.material = material;
-        return item;
-      } else if (name.includes('_steel')) {
-        texture = loadTexture('/assets/img/texture/steel.jpg');
-      } else if (name.includes('_glass')) {
-        var _material2 = new Three.MeshPhysicalMaterial({
-          roughness: 0.5,
-          transmission: 1,
-          thickness: 0.5,
-          // Add refraction!
-          transparency: 0.6
-        });
-        item.material = _material2;
-        return item;
-      }
-    });
-    if (holeData.selected) {
-      // if object is drawing in 3d mode and selected
-      if (holeData.type === 'FrameLess Doorway') {
-        var x, y, z;
-        x = holeData.getIn(['properties', 'width', 'length']) || 0;
-        y = holeData.getIn(['properties', 'height', 'length']) || 0;
-        z = holeData.getIn(['properties', 'thickness', 'length']) || 0;
-        var moveBox = new Three.BoxGeometry(x, y, z);
-        var mBox = new Three.Mesh(moveBox, new Three.MeshBasicMaterial({
-          color: 0x99c3fb,
-          side: Three.DoubleSide,
-          transparent: true,
-          opacity: 0.4
-        }));
-        mBox.name = 'FrameLessDoormBox';
-        mBox.renderOrder = 1;
-        if (mBox !== undefined) {
-          object.add(mBox);
-        }
-      } else {
-        var _boundingBox = GeomUtils.baseBox3FromObject(object);
-        if (_boundingBox === undefined) return;
-        var max = _boundingBox.max;
-        if (!Number.isFinite(max.x)) return;
-        var transGroup = new Three.Group();
-        var extrudeSettings = {
-          depth: 1,
-          bevelEnabled: true,
-          bevelSegments: 2,
-          steps: 2,
-          bevelSize: 1,
-          bevelThickness: 1
-        };
-        var triangleShape = new Three.Shape().moveTo(max.x, 15) // A
-        .lineTo(max.x + 6, 15) // B
-        .lineTo(max.x + 6, 30) // C
-        .lineTo(max.x + 16, 0) // D
-        .lineTo(max.x + 6, -29) // E
-        .lineTo(max.x + 6, -15) // F
-        .lineTo(max.x, -15) // G
-        .lineTo(max.x, 15); // close path
-        var transHole_Right = GeomUtils.addShape(triangleShape, extrudeSettings, scene_mode !== 'MODE_DRAGGING_HOLE_3D' ? 0x000000 : 0x99c3fb, 0, 0, 0, 0, 0, 0, 1);
-        transHole_Right.name = 'transHole_Right';
-        transGroup.add(transHole_Right);
-        triangleShape = new Three.Shape().moveTo(-max.x, 15) // A
-        .lineTo(-(max.x + 6), 15) // B
-        .lineTo(-(max.x + 6), 30) // C
-        .lineTo(-(max.x + 16), 0) // D
-        .lineTo(-(max.x + 6), -29) // E
-        .lineTo(-(max.x + 6), -15) // F
-        .lineTo(-max.x, -15) // G
-        .lineTo(-max.x, 15); // close path
-        var transHole_Left = GeomUtils.addShape(triangleShape, extrudeSettings, scene_mode !== 'MODE_DRAGGING_HOLE_3D' ? 0x000000 : 0x99c3fb, 0, 0, 0, 0, 0, 0, 1);
-        transHole_Left.name = 'transHole_Left';
-        transGroup.add(transHole_Left);
-        transGroup.scale.set(1 / object.scale.x, 1 / object.scale.y, 1 / object.scale.z);
-        object.add(transGroup);
-      }
-    }
-    var pivot = new Three.Object3D();
-    pivot.name = 'pivot';
-    if (isElevationView(mode)) {
-      var lineID = holeData.getIn(['line']);
-      if (planData.sceneGraph.layers['layer-1'].lines[lineID].visible) {
-        pivot.visible = true;
-      } else {
-        pivot.visible = false;
-      }
-      object.traverse(function (obj) {
-        replaceMeshesWithLineSegments(obj);
-      });
-    }
-    pivot.add(object);
-    var line = layer.getIn(['lines', holeData.line]);
-
-    // First of all I need to find the vertices of this line
-    var vertex0 = layer.vertices.get(line.vertices.get(0));
-    var vertex1 = layer.vertices.get(line.vertices.get(1));
-    var offset = holeData.offset;
-    if (vertex0.x > vertex1.x) {
-      var tmp = vertex0;
-      vertex0 = vertex1;
-      vertex1 = tmp;
-      offset = 1 - offset;
-    }
-    var distance = Math.sqrt(Math.pow(vertex0.x - vertex1.x, 2) + Math.pow(vertex0.y - vertex1.y, 2));
-    var alpha = Math.asin((vertex1.y - vertex0.y) / distance);
-    var boundingBox = new Three.Box3().setFromObject(pivot);
-    var center = [(boundingBox.max.x - boundingBox.min.x) / 2 + boundingBox.min.x, (boundingBox.max.y - boundingBox.min.y) / 2 + boundingBox.min.y, (boundingBox.max.z - boundingBox.min.z) / 2 + boundingBox.min.z];
-    var holeAltitude = holeData.properties.getIn(['altitude', 'length']);
-    var holeHeight = holeData.properties.getIn(['height', 'length']);
-    pivot.rotation.y = alpha;
-    pivot.position.x = vertex0.x + distance * offset * Math.cos(alpha) - center[0] * Math.cos(alpha) - center[2] * Math.sin(alpha);
-    pivot.position.y = holeAltitude + holeHeight / 2 - center[1] + layer.altitude;
-    pivot.position.z = -vertex0.y - distance * offset * Math.sin(alpha) - center[2] * Math.cos(alpha) + center[0] * Math.sin(alpha);
-    pivot.userData.type = 'hole';
-    pivot.userData.layerId = layer.id;
-    pivot.userData.holeId = holeData.id;
-
-    // if holeId is existing, remove it first
-    var childLen = planData.plan.children.length;
-    var children = [];
-    for (var i = 0; i < childLen; i++) {
-      if (planData.plan.children[i].userData.holeId != holeData.id) children.push(planData.plan.children[i]);
-    }
-    planData.plan.children = children;
-    planData.plan.add(pivot);
-    planData.sceneGraph.layers[layer.id].holes[holeData.id] = pivot;
-    applyInteract(pivot, function () {
-      // document.getElementById('setting_dialog').style.display = 'none';
-      return holesActions.selectHole(layer.id, holeData.id);
-    });
-    var opacity = layer.opacity;
-    if (holeData.selected) {
-      opacity = 1;
-    }
-    applyOpacity(pivot, opacity);
-  });
-}
-function updateHole(sceneData, oldSceneData, planData, layer, holeID, differences, catalog, holesActions, selfDestroy, selfBuild) {
-  var hole = layer.getIn(['holes', holeID]);
-  var oldHole = oldSceneData.getIn(['layers', layer.id, 'holes', holeID]);
-  var mesh = planData.sceneGraph.layers[layer.id].holes[holeID];
-  if (!mesh) return null;
-  return catalog.getElement(hole.type).updateRender3D(hole, layer, sceneData, mesh, oldHole, differences, selfDestroy, selfBuild);
-}
-function addLine(sceneData, planData, layer, lineID, catalog, linesActions) {
-  var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
-  var toolObj = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  if (planData.sceneGraph.busyResources.layers[layer.id].lines[lineID]) {
-    setTimeout(function () {
-      return addLine(sceneData, planData, layer, lineID, catalog, linesActions, mode);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layer.id].lines[lineID] = true;
-  var line = layer.getIn(['lines', lineID]);
-  line.userData.stateMode = scene_mode;
-
-  // First of all I need to find the vertices of this line
-  var vertex0 = layer.vertices.get(line.vertices.get(0));
-  var vertex1 = layer.vertices.get(line.vertices.get(1));
-  if (vertex0.x > vertex1.x) {
-    var tmp = vertex0;
-    vertex0 = vertex1;
-    vertex1 = tmp;
-  }
-  return catalog.getElement(line.type).render3D(line, layer, sceneData, mode).then(function (line3D) {
-    if (line3D === null) {
-      return;
-    }
-    if (line3D instanceof Three.LOD) {
-      planData.sceneGraph.LODs[line.id] = line3D;
-    }
-    var pivot = new Three.Object3D();
-    pivot.name = 'pivot';
-    pivot.add(line3D);
-    pivot.position.x = (vertex0.x + vertex1.x) / 2;
-    pivot.position.y = layer.altitude;
-    pivot.position.z = -(vertex0.y + vertex1.y) / 2;
-    pivot.userData.type = 'line';
-
-    // In elevation view, show(visible = true) just selected wall pivot. If not, hidden(visible = false)
-    if (isElevationView(mode)) {
-      var lineVisible;
-      if (line.selected) {
-        pivot.traverse(function (obj) {
-          replaceMeshesWithLineSegments(obj);
-        });
-        lineVisible = true;
-      } else {
-        lineVisible = false;
-      }
-      pivot.visible = lineVisible;
-    }
-    pivot.userData.layerId = layer.id;
-    pivot.userData.lineId = lineID;
-    planData.plan.add(pivot);
-    planData.sceneGraph.layers[layer.id].lines[lineID] = pivot;
-    applyInteract(pivot, function () {
-      // document.getElementById('setting_dialog').style.display = 'none';
-      return linesActions.selectLine(layer.id, line.id);
-    });
-    var opacity = layer.opacity;
-    if (line.selected) {
-      opacity = 1;
-    }
-    applyOpacity(pivot, opacity);
-    planData.sceneGraph.busyResources.layers[layer.id].lines[lineID] = false;
-  });
-}
-function updateLine(sceneData, oldSceneData, planData, layer, lineID, differences, catalog, linesActions, selfDestroy, selfBuild) {
-  var line = layer.getIn(['lines', lineID]);
-  var oldLine = oldSceneData.getIn(['layers', layer.id, 'lines', lineID]);
-  var mesh = planData.sceneGraph.layers[layer.id].lines[lineID];
-  if (!mesh) return null;
-  return catalog.getElement(line.type).updateRender3D(line, layer, sceneData, mesh, oldLine, differences, selfDestroy, selfBuild);
-}
-function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode) {
-  var toolObj = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  if (planData.sceneGraph.busyResources.layers[layer.id].areas[areaID]) {
-    setTimeout(function () {
-      return addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode);
-    }, 100);
-    return;
-  }
-  planData.sceneGraph.busyResources.layers[layer.id].areas[areaID] = true;
-  var area = layer.getIn(['areas', areaID]);
-  var interactFunction = function interactFunction() {
-    return areaActions.selectArea(layer.id, areaID);
-  };
-  return catalog.getElement(area.type).render3D(area, layer, sceneData).then(function (area3D) {
-    if (area3D instanceof Three.LOD) {
-      planData.sceneGraph.LODs[areaID] = area3D;
-    }
-    var pivot = new Three.Object3D();
-    var floorSupport = area3D.userData.floorSupport;
-    floorSupport.onBeforeRender = function (renderer, scene, camera, geometry, material, group) {
-      var floorMesh = this.parent.getObjectByName('floor');
-      if (geometry.attributes.normal === undefined) return floorMesh.visible = false;
-      geometry.computeVertexNormals();
-      var normals = geometry.attributes.normal.array;
-      var pos = new Three.Vector4(0, 0, 0, 1);
-      pos = pos.applyMatrix4(this.matrixWorld);
-      pos = pos.applyMatrix4(camera.matrixWorldInverse);
-      var normal = new Three.Vector4(normals[0], normals[1], normals[2], 0);
-      normal = normal.applyMatrix4(this.matrixWorld);
-      normal = normal.applyMatrix4(camera.matrixWorldInverse);
-      if (floorMesh) {
-        if (normal.dot(pos) <= 0) {
-          floorMesh.visible = true;
-        } else {
-          floorMesh.visible = false;
-        }
-      }
-    };
-    var ceil = area3D.userData.floorSupport.clone();
-    var ceilMaterial = new Three.MeshStandardMaterial({
-      color: 0xdfdfdf,
-      side: Three.BackSide,
-      roughness: 0.3,
-      metalness: 0.4
-    });
-    ceil.name = 'ceil';
-    ceil.material = ceilMaterial;
-    var vertices = [];
-    var lines = [];
-    var height = 100;
-    area.vertices.forEach(function (data) {
-      vertices.push(data);
-    });
-    layer.lines.forEach(function (data) {
-      lines.push(data);
-    });
-    var _loop2 = function _loop2() {
-      var data = lines[i];
-      var realVec = [];
-      data.vertices.forEach(function (vec) {
-        realVec.push(vec);
-      });
-      if (vertices.includes(realVec[0]) && vertices.includes(realVec[1])) {
-        height = convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER);
-        // height = data.properties.getIn(["height", "length"]);
-        return 1; // break
-      }
-    };
-    for (var i = 0; i < lines.length; i++) {
-      if (_loop2()) break;
-    }
-    ceil.translateZ(convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER));
-    pivot.name = 'pivot';
-    pivot.add(area3D);
-    pivot.add(area3D.userData.floorSupport);
-    pivot.add(ceil);
-    pivot.position.y = layer.altitude;
-
-    // if elevation view, show just wall - not show floor and ceil
-    if (isElevationView(mode)) pivot.visible = false;
-    planData.plan.add(pivot);
-    planData.sceneGraph.layers[layer.id].areas[areaID] = pivot;
-    // document.getElementById('setting_dialog').style.display = 'none';
-    applyInteract(pivot, interactFunction);
-    var opacity = layer.opacity;
-    if (area.selected) {
-      opacity = 1;
-    }
-    applyOpacity(pivot, opacity);
-    planData.sceneGraph.busyResources.layers[layer.id].areas[areaID] = false;
-  });
-}
-function updateArea(sceneData, oldSceneData, planData, layer, areaID, differences, catalog, areaActions, selfDestroy, selfBuild) {
-  var area = layer.getIn(['areas', areaID]);
-  var oldArea = oldSceneData.getIn(['layers', layer.id, 'areas', areaID]);
-  var mesh = planData.sceneGraph.layers[layer.id].areas[areaID];
-  if (!mesh) return null;
-  return catalog.getElement(area.type).updateRender3D(area, layer, sceneData, mesh, oldArea, differences, selfDestroy, selfBuild);
-}
-function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
-  var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
-  var toolObj = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  var rItem = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
-  var bAddMolding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : true;
-  if (planData.sceneGraph.busyResources.layers[layer.id].items[itemID]) {
-    setTimeout(function () {
-      return addItem(sceneData, planData, layer, itemID, catalog, itemsActions, mode, toolObj, rItem, bAddMolding);
-    }, 100);
-    return;
-  }
-  var item = layer.getIn(['items', itemID]);
-  if (item.doorStyle === null) {
-    console.log(item.name + 's doorStyle is null!');
-    return;
-  }
-  if (!sceneData.loadFlag && scene_mode == MODE_DRAWING_ITEM_3D) {
-    itemsActions.toggleLoadingCabinet();
-  }
-  var catalogElement = catalog.getElement(item.type);
-  if (!catalogElement) catalogElement = catalog.getElement(returnReplaceableDeepSearchType(item.type));
-  if (!catalogElement) return false;
-  return catalogElement.render3D(item, layer, sceneData, mode).then(function (item3D) {
-    if (item3D instanceof Three.LOD) {
-      planData.sceneGraph.LODs[itemID] = item3D;
-    }
-    if (rItem !== null) {
-      planData.plan.remove(rItem);
-      disposeObject(rItem);
-      rItem = null;
-    }
-    var pivot = new Three.Object3D();
-    pivot.name = 'pivot';
-    pivot.add(item3D);
-    if (pivot) {
-      var mBoxColor = 0x99c3fb;
-      var _item = item.toJS();
-      if (_item.doorStyle.doorStyles !== undefined && _item.doorStyle.doorStyles.cds) {
-        if (showYelloBox(_item)) {
-          mBoxColor = 'rgba(232,187,47,1)';
-        } else {
-          pivot.children[0].children.forEach(function (pivotElement) {
-            pivotElement.visible = false;
-          });
-        }
-        var mBox = GeomUtils.makeMBoxfromObject(pivot, mBoxColor);
-        var warningObj = createWarningObject();
-        warningObj.position.set(0, item.properties.get('height').get('length') / 3, 0);
-        if (mBox) {
-          mBox.add(warningObj);
-          pivot.add(mBox);
-        }
-      }
-    }
-    if (item.selected) {
-      var tranformControl = item3D.children[item3D.children.length - 1];
-      transformBox = tranformControl.children[tranformControl.children.length - 1];
-    }
-    pivot.rotation.y = item.rotation * Math.PI / 180 + Math.PI;
-    // pivot.rotation.y = item.rotation;
-    pivot.position.x = item.x;
-    pivot.position.y = layer.altitude;
-    pivot.position.z = -item.y;
-    applyInteract(item3D, function () {
-      // closes the setting dialog
-      // document.getElementById('setting_dialog').style.display = 'none';
-      return itemsActions.selectItem(layer.id, item.id);
-    });
-    var opacity = layer.opacity;
-    if (item.selected) {
-      opacity = 1;
-      fVLine = [];
-      var TransformGizmo = item3D.children[item3D.children.length - 1];
-      TransformGizmo.children.forEach(function (child) {
-        if (child.type === 'Line' && child.geometry.attributes !== undefined) fVLine.push(child);
-      });
-      setTimeout(function () {
-        getDistances();
-      }, 50);
-    }
-    applyOpacity(pivot, opacity);
-    pivot.userData.type = 'item';
-    pivot.userData.layerId = layer.id;
-    pivot.userData.itemId = item.id;
-
-    /**
-     *
-     * @param {array} itemRect Array of item's 4 side lines
-     * @returns {boolean} true (if item is snapped into wall) or false (if item is not snapped into wall)
-     */
-    //////////////////
-    ///// wall ///////
-    //  3 ***** 2
-    //  *       *
-    //  * item  *
-    //  *       *
-    //  0 ***** 1
-
-    var getItemVisible = function getItemVisible(itemRect) {
-      var selectedLine = layer.lines.get(layer.selected.lines.toJS()[0]);
-      var itemVisible = false;
-      var vertex0 = layer.vertices.get(selectedLine.vertices.get(0));
-      var vertex1 = layer.vertices.get(selectedLine.vertices.get(1));
-      var l0 = {
-        x: vertex0.x,
-        y: vertex0.y
-      };
-      var l1 = {
-        x: vertex1.x,
-        y: vertex1.y
-      };
-      var r0 = itemRect.rect[0];
-      var r1 = itemRect.rect[1];
-      var r2 = itemRect.rect[2];
-      var r3 = itemRect.rect[3];
-
-      // it doesn't need consider distance between item's line01 (frontside - it has door) and wall
-      var delta12 = GeometryUtils.distancePointFromLineSegment(l0, l1, (r1.x + r2.x) / 2, (r1.y + r2.y) / 2); // distance between item's line12 and wall
-      var delta23 = GeometryUtils.distancePointFromLineSegment(l0, l1, (r2.x + r3.x) / 2, (r2.y + r3.y) / 2); // distance between item's line23 and wall
-      var delta30 = GeometryUtils.distancePointFromLineSegment(l0, l1, (r3.x + r0.x) / 2, (r3.y + r0.y) / 2); // distance between item's line30 and wall
-
-      if (delta12 < DISTANCE_EPSILON || delta23 < DISTANCE_EPSILON || delta30 < DISTANCE_EPSILON) {
-        itemVisible = true;
-      }
-      return itemVisible;
-    };
-    var val = {
-      pos: {
-        x: item.x,
-        y: item.y
-      },
-      rotRad: item.rotation / 180 * Math.PI
-    };
-    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);
-    val.size = {
-      width: width,
-      height: height,
-      depth: depth
-    };
-    val.layoutpos = cat.info.layoutpos;
-    val.is_corner = cat.info.is_corner;
-    val.item = item;
-    var calcrect = GeometryUtils.getCalcRectFromItem3D(val);
-
-    // In elevation view, determin if item show or not
-    if (isElevationView(mode)) pivot.visible = getItemVisible(calcrect);
-    planData.plan.add(pivot);
-    planData.sceneGraph.layers[layer.id].items[item.id] = pivot;
-    //In a 3D view, merge each couterTop of equal height into a single conuterTop.
-    if (!isElevationView(mode)) {
-      addCountertop(planData.sceneGraph.layers[layer.id].countertops, item, planData, layer);
-    }
-    if (bAddMolding && item.category === 'cabinet' && (isElevationView(mode) && getItemVisible(calcrect) || !isElevationView(mode))) {
-      planData.sceneGraph.layers[layer.id].moldingGroups = addMolding(planData.sceneGraph.layers[layer.id].moldingGroups, item, planData, layer, itemsActions, mode) || planData.sceneGraph.layers[layer.id].moldingGroups;
-    }
-    if (pivot) {
-      // update the tool object's position to selected object's position
-      var selectedItem = planData.sceneGraph.layers[sceneData.selectedLayer].items[itemID];
-      var itemPos = selectedItem.position.clone();
-      if (!isEmpty(toolObj)) {
-        toolObj.position.set(planData.plan.position.x + itemPos.x, selectedItem.category === 'lighting' ? -planData.plan.position.y - selectedItem.properties.get('height').get('length') : planData.plan.position.y + selectedItem.children[0].position.y, planData.plan.position.z + itemPos.z);
-      }
-      pivot.children[0].children.forEach(function (pivotElement) {
-        pivotElement.visible = true;
-      });
-      if (pivot.children.length > 1) {
-        var _item4 = item.toJS();
-        if (_item4.doorStyle.doorStyles !== undefined) {
-          if (_item4.category === 'cabinet') {
-            if (_item4.doorStyle.doorStyles.cds.some(function (element) {
-              return element.itemID === item.itemID;
-            })) {
-              pivot.children.pop();
-            }
-          } else {
-            pivot.children.pop();
-          }
-        }
-      }
-    }
-    applyInteract(pivot, function () {
-      // document.getElementById('setting_dialog').style.display = 'none';
-      return itemsActions.selectItem(layer.id, item.id);
-    });
-    setTimeout(function () {
-      return getDistances(layer);
-    }, 100);
-    if (!sceneData.loadFlag && scene_mode == MODE_DRAWING_ITEM_3D) {
-      itemsActions.endLoading();
-      itemsActions.toggleLoadingCabinet();
-    }
-  });
-}
-function updateItem(sceneData, oldSceneData, planData, layer, itemID, differences, catalog, itemsActions, selfDestroy, selfBuild) {
-  var item = layer.getIn(['items', itemID]);
-  var oldItem = oldSceneData.getIn(['layers', layer.id, 'items', itemID]);
-  var mesh = planData.sceneGraph.layers[layer.id].items[itemID];
-  if (!mesh) return null;
-  return catalog.getElement(item.type).updateRender3D(item, layer, sceneData, mesh, oldItem, differences, selfDestroy, selfBuild);
-}
-
-// Apply interact function to children of an Object3D
-function applyInteract(object, interactFunction) {
-  // document.getElementById('setting_dialog').style.display = 'none';
-  object.traverse(function (child) {
-    if (child instanceof Three.Mesh) {
-      child.interact = interactFunction;
-    }
-  });
-}
-
-// Apply opacity to children of an Object3D
-function applyOpacity(object, opacity) {
-  object.traverse(function (child) {
-    if (child instanceof Three.Mesh) {
-      if (child.material && !Array.isArray(child.material)) {
-        // child.material.materials.forEach(materialChild => {
-        //   materialChild.transparent = true;
-        //   if (materialChild.maxOpacity) {
-        //     materialChild.opacity = Math.min(materialChild.maxOpacity, opacity);
-        //   } else if (materialChild.opacity && materialChild.opacity > opacity) {
-        //     materialChild.maxOpacity = materialChild.opacity;
-        //     materialChild.opacity = opacity;
-        //   }
-        // });
-      } else if (child.material instanceof Array) {
-        child.material.forEach(function (material) {
-          material.transparent = true;
-          if (material.maxOpacity) {
-            material.opacity = Math.min(material.maxOpacity, opacity);
-          } else if (material.opacity && material.opacity > opacity) {
-            material.maxOpacity = material.opacity;
-            material.opacity = opacity;
-          }
-        });
-      } else {
-        child.material.transparent = true;
-        if (child.material.maxOpacity) {
-          child.material.opacity = Math.min(child.material.maxOpacity, opacity);
-        } else if (child.material.opacity && child.material.opacity > opacity) {
-          child.material.maxOpacity = child.material.opacity;
-          child.material.opacity = opacity;
-        }
-      }
-    }
-  });
-}
-function updateBoundingBox(planData) {
-  var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var mode = arguments.length > 2 ? arguments[2] : undefined;
-  if (scene_mode == MODE_DRAWING_ITEM_3D) return;
-  var newBoundingBox = new Three.Box3().setFromObject(planData.plan);
-  if (isFinite(newBoundingBox.max.x) && isFinite(newBoundingBox.min.x) && isFinite(newBoundingBox.max.y) && isFinite(newBoundingBox.min.y) && isFinite(newBoundingBox.max.z) && isFinite(newBoundingBox.min.z)) {
-    var newCenter = new Three.Vector3((newBoundingBox.max.x - newBoundingBox.min.x) / 2 + newBoundingBox.min.x, (newBoundingBox.max.y - newBoundingBox.min.y) / 2 + newBoundingBox.min.y, (newBoundingBox.max.z - newBoundingBox.min.z) / 2 + newBoundingBox.min.z);
-    if (!flag) {
-      planData.plan.position.sub(newCenter);
-      planData.grid.position.sub(newCenter);
-      if (isElevationView(mode)) {
-        planData.cam.position.sub(newCenter);
-      }
-    }
-    newBoundingBox.min.sub(newCenter);
-    newBoundingBox.max.sub(newCenter);
-    planData.boundingBox = newBoundingBox;
-  }
-}
-
-/**
- * Filter the array of diffs
- * @param diffArray
- * @param sceneData
- * @param oldSceneData
- * @returns {Array}
- */
-function filterDiffs(diffArray, sceneData, oldSceneData) {
-  return minimizeRemoveDiffsWhenSwitchingLayers(minimizeChangePropertiesAfterSelectionsDiffs(minimizeChangePropertiesDiffs(diffArray, sceneData, oldSceneData), sceneData, oldSceneData), sceneData, oldSceneData);
-}
-
-/**
- * Reduces the number of remove diffs when switching an hidden layer
- * @param diffArray the array of the diffs
- * @param sceneData
- * @param oldSceneData
- * @returns {Array}
- */
-function minimizeRemoveDiffsWhenSwitchingLayers(diffArray, sceneData, oldSceneData) {
-  var foundDiff;
-  var i;
-  for (i = 0; i < diffArray.length && !foundDiff; i++) {
-    if (diffArray[i].path[1] === 'selectedLayer') {
-      foundDiff = diffArray[i];
-    }
-  }
-  if (foundDiff) {
-    if (!sceneData.getIn(['layers', oldSceneData.selectedLayer, 'visible'])) {
-      return diffArray.filter(function (_ref6) {
-        var op = _ref6.op,
-          path = _ref6.path;
-        return !(path[path.length - 1] === 'selected' && path[1] === 'layers' && path[2] === oldSceneData.selectedLayer) && !(op === 'remove' && path.indexOf(oldSceneData.selectedLayer) !== -1);
-      });
-    }
-  }
-  return diffArray;
-}
-
-/**
- * Reduces the number of change properties diffs for selected elements
- * @param diffArray the array of the diffs
- * @param sceneData
- * @param oldSceneData
- * @returns {Array}
- */
-function minimizeChangePropertiesAfterSelectionsDiffs(diffArray, sceneData, oldSceneData) {
-  var idsFound = {};
-  diffArray.forEach(function (_ref7) {
-    var path = _ref7.path;
-    if (path[5] === 'selected') {
-      idsFound[path[4]] = path[4];
-    }
-  });
-  return diffArray.filter(function (_ref8) {
-    var path = _ref8.path;
-    if (path[5] === 'properties') {
-      return idsFound[path[4]] ? false : true;
-    }
-    return true;
-  });
-}
-
-/**
- * Reduces the number of change properties diffs
- * @param diffArray the array of the diffs
- * @param sceneData
- * @param oldSceneData
- * @returns {Array}
- */
-function minimizeChangePropertiesDiffs(diffArray, sceneData, oldSceneData) {
-  var idsFound = {};
-  return diffArray.filter(function (_ref9) {
-    var path = _ref9.path;
-    if (path[5] === 'properties') {
-      return idsFound[path[4]] ? false : idsFound[path[4]] = true;
-    } else if (path[5] === 'misc') {
-      // Remove misc changes
-      return false;
-    }
-    return true;
-  });
-}
-
-// countertops:
-//   o id:
-//   o items: [itemid]
-//   o ct3d: 3d object
-//   o catid
-//   o pos
-//   o rotRad
-//   o size
-function createCTFromItem(item, unit, catalog) {
-  return createCTFromItems([item], unit, catalog);
-}
-function createCTFromItems(items, unit, catalog) {
-  var item0 = items[0];
-  var item1 = items[items.length - 1];
-  var CTId = IDBroker.acquireID();
-  var ct3d = null;
-  var catid = item0.type;
-  var pos = {
-    x: (item0.x + item1.x) / 2,
-    y: (item0.y + item1.y) / 2
-  };
-  var rotRad = item0.rotation / 180 * Math.PI;
-  var cat = catalog.elements[catid];
-  // let width = convert(item0.properties.getIn(['width', '_length'])).from('in').to('cm');
-  // let depth = convert(item0.properties.getIn(['depth', '_length'])).from('in').to('cm');
-  // let height = convert(item0.properties.getIn(['height', '_length'])).from('in').to('cm');
-  var width = item0.properties.get('width').get('_length');
-  var widthUnit = item0.properties.get('width').get('_unit') || 'cm';
-  width = convert(width).from(widthUnit).to('cm');
-  var depth = item0.properties.get('depth').get('_length');
-  var depthUnit = item0.properties.get('depth').get('_unit') || 'cm';
-  depth = convert(depth).from(depthUnit).to('cm');
-  var height = item0.properties.get('height').get('_length');
-  var heightUnit = item0.properties.get('height').get('_unit') || 'cm';
-  height = convert(height).from(heightUnit).to('cm');
-  var size = {
-    width: width * items.length,
-    depth: depth,
-    height: height
-  };
-  return {
-    id: CTId,
-    items: items,
-    ct3d: ct3d,
-    catid: catid,
-    pos: pos,
-    rotRad: rotRad,
-    size: size
-  };
-}
-export function createMDFromItem(item, lines, molding) {
-  var MDId = IDBroker.acquireID();
-  var z = item.properties.get('altitude').get('_length');
-  var zUnit = item.properties.get('altitude').get('_unit') || 'cm';
-  z = convert(z).from(zUnit).to('cm');
-  var height = item.properties.get('height').get('_length');
-  var heightUnit = item.properties.get('height').get('_unit') || 'cm';
-  height = convert(height).from(heightUnit).to('cm');
-  switch (molding.location_type) {
-    case TOP_MOLDING_LOCATION:
-      z += height;
-      break;
-    case MIDDLE_MOLDING_LOCATION:
-      z += height / 2;
-      break;
-    case BOTTOM_MOLDING_LOCATION:
-      z += 0;
-      break;
-    default:
-      break;
-  }
-  return {
-    id: MDId,
-    items: [item],
-    meshes: [],
-    pos: {
-      x: 0,
-      y: 0,
-      z: z
-    },
-    size: {
-      width: 0,
-      depth: 0,
-      height: 0
-    },
-    lines: lines,
-    molding: molding,
-    pointGroups: []
-  };
-}
-function tryAdjacent(ct1, ct2) {
-  if (ct1.catid.includes('Dishwasher') && ct1.catid.includes('BF')) {
-    var temp = ct1;
-    ct1 = ct2;
-    ct2 = temp;
-  }
-  log('----tryAdjacent', ct1.id, ct2.id);
-  if (!ct2.catid.includes('Dishwasher') && !ct2.catid.includes('BF') && ct1.catid != ct2.catid) return false;
-  if (ct1.rotRad != ct2.rotRad) return false;
-  log('ct1', ct1.pos.x, ct1.pos.y, ct1.size.width);
-  log('ct2', ct2.pos.x, ct2.pos.y, ct2.size.width);
-  var dist = GeometryUtils.verticesDistance(ct1.pos, ct2.pos);
-  var totalwidth = ct1.size.width + ct2.size.width;
-  log('epsilon', dist, totalwidth, Math.abs(2 * dist - totalwidth));
-  if (Math.abs(2 * dist - totalwidth) / totalwidth > 1e-3) return false;
-  log('----success');
-  var newpos = {
-    x: (ct1.pos.x * ct1.size.width + ct2.pos.x * ct2.size.width) / totalwidth,
-    y: (ct1.pos.y * ct1.size.width + ct2.pos.y * ct2.size.width) / totalwidth
-  };
-  var newsize = {
-    width: totalwidth,
-    depth: ct1.size.depth,
-    height: ct1.size.height
-  };
-  var CTId = IDBroker.acquireID();
-  var items = GeometryUtils.compareVertices(ct1.pos, ct2.pos) > 0 ? [].concat(_toConsumableArray(ct1.items), _toConsumableArray(ct2.items)) : [].concat(_toConsumableArray(ct2.items), _toConsumableArray(ct1.items));
-  var ct3d = null;
-  var catid = ct1.catid;
-  return {
-    id: CTId,
-    items: items,
-    ct3d: ct3d,
-    catid: catid,
-    pos: newpos,
-    rotRad: ct1.rotRad,
-    size: newsize
-  };
-}
-function isParallelLines(line1, line2) {
-  var isParallel = false;
-  if (Math.abs(line1[0].y - line1[1].y) <= EPSILON && Math.abs(line2[0].y - line2[1].y) <= EPSILON) isParallel = true;
-  if (Math.abs(line1[0].x - line1[1].x) <= EPSILON && Math.abs(line2[0].x - line2[1].x) <= EPSILON) isParallel = true;
-  if (Math.abs((line1[0].x - line1[1].x) / (line1[0].y - line1[1].y) - (line2[0].x - line2[1].x) / (line2[0].y - line2[1].y)) <= EPSILON) isParallel = true;
-  if (isParallel) {
-    return true;
-  }
-  return false;
-}
-export function tryAdjacentMD(md1, md2, molding) {
-  log('----tryAdjacent', md1.id, md2.id);
-  if (Math.abs(md1.pos.z - md2.pos.z) > EPSILON) return false;
-  var id1 = md1.items[0].doorStyle.hasOwnProperty('id') ? md1.items[0].doorStyle.id : md1.items[0].doorStyle.toJS().id,
-    id2 = md2.items[0].doorStyle.hasOwnProperty('id') ? md2.items[0].doorStyle.id : md2.items[0].doorStyle.toJS().id;
-  if (id1 !== id2) return false;
-  var newLines = md1.lines.concat(md2.lines);
-  var isMerge = false;
-  md1.lines.forEach(function (line1) {
-    md2.lines.map(function (line2) {
-      // filter removed lines
-      if (newLines.findIndex(function (a) {
-        return a[2] === line1[2];
-      }) === -1 || newLines.findIndex(function (a) {
-        return a[2] === line2[2];
-      }) === -1) return false;
-      // is parallel two lines
-      if (isParallelLines(line1, line2)) {
-        var disLine1 = GeometryUtils.verticesDistance(line1[0], line1[1]);
-        var disLine2 = GeometryUtils.verticesDistance(line2[0], line2[1]);
-        if (GeometryUtils.sameMDistances(GeometryUtils.verticesDistance(line2[0], line1[0]) + GeometryUtils.verticesDistance(line1[1], line2[1]), Math.abs(disLine2 - disLine1))) {
-          newLines = newLines.filter(function (a) {
-            return !(a[2] === line1[2] || a[2] === line2[2]);
-          });
-          if (!GeometryUtils.sameMPoints(line1[0], line2[0])) newLines.push([line1[0], line2[0], IDBroker.acquireID()]);
-          if (!GeometryUtils.sameMPoints(line1[1], line2[1])) newLines.push([line1[1], line2[1], IDBroker.acquireID()]);
-          isMerge = true;
-          return false;
-        }
-        if (GeometryUtils.sameMDistances(GeometryUtils.verticesDistance(line2[0], line1[1]) + GeometryUtils.verticesDistance(line1[0], line2[1]), Math.abs(disLine2 - disLine1))) {
-          newLines = newLines.filter(function (a) {
-            return !(a[2] === line1[2] || a[2] === line2[2]);
-          });
-          if (!GeometryUtils.sameMPoints(line1[1], line2[0])) newLines.push([line1[1], line2[0], IDBroker.acquireID()]);
-          if (!GeometryUtils.sameMPoints(line1[0], line2[1])) newLines.push([line1[0], line2[1], IDBroker.acquireID()]);
-          isMerge = true;
-          return false;
-        }
-        var samePointNum = -1,
-          i = 0;
-        while (i < 4 && samePointNum === -1) {
-          if (GeometryUtils.sameMPoints(line1[Math.floor(i / 2)], line2[i % 2]) && GeometryUtils.sameMDistances(disLine1 + disLine2, GeometryUtils.verticesDistance(line1[Math.floor((3 - i) / 2)], line2[(3 - i) % 2]))) {
-            samePointNum = 3 - i;
-          } else {
-            i++;
-          }
-        }
-        if (samePointNum > -1) {
-          newLines = newLines.filter(function (a) {
-            return !(a[2] === line1[2] || a[2] === line2[2]);
-          });
-          newLines.push([_objectSpread({}, line1[Math.floor(samePointNum / 2)]), _objectSpread({}, line2[samePointNum % 2]), IDBroker.acquireID()]);
-          isMerge = true;
-          return false;
-        }
-        var pointNum = -1,
-          k = 0;
-        while (k < 4 && pointNum === -1) {
-          if (GeometryUtils.sameMDistances(GeometryUtils.verticesDistance(line1[Math.floor(k / 2)], line2[k % 2]) + GeometryUtils.verticesDistance(line1[1 - Math.floor(k / 2)], line2[k % 2]), disLine1) && GeometryUtils.sameMDistances(GeometryUtils.verticesDistance(line1[1 - Math.floor(k / 2)], line2[k % 2]) + GeometryUtils.verticesDistance(line1[1 - Math.floor(k / 2)], line2[1 - k % 2]), disLine2)) {
-            pointNum = k;
-          } else {
-            k++;
-          }
-        }
-      }
-      return false;
-    });
-  });
-  if (!newLines.length) return _objectSpread({}, md2);
-  if (!isMerge) return false;
-  return {
-    id: IDBroker.acquireID(),
-    items: [].concat(_toConsumableArray(md2.items.filter(function (item) {
-      return md1.items.findIndex(function (it) {
-        return it.id === item.id;
-      }) === -1;
-    })), _toConsumableArray(md1.items)),
-    meshes: [],
-    pos: md1.pos,
-    size: md1.size,
-    lines: newLines,
-    molding: molding
-  };
-}
-function showItemCT(item, CT, visible, planData, layer) {
-  var item3D = planData.sceneGraph.layers[layer.id].items[item.id];
-  if (item3D === undefined) return undefined;
-  item3D.traverse(function (child) {
-    if (child.name.includes('countertop')) {
-      child.visible = visible;
-      if (child.material.map === null) {
-        var normalMap = item.counterTop.uri;
-        var interiortexture = loadTexture(normalMap);
-        applyTexture(child.material, interiortexture, 100, 100);
-        child.material.color = new Color(1, 1, 1);
-        return;
-      }
-      child.material.map.repeat.x = 1;
-    }
-  });
-}
-function getCountertopMesh(item, visible, planData, layer) {
-  if (item.type.includes('Dishwasher')) return undefined;
-  if (item.type.includes('BF')) return undefined;
-  var item3D = planData.sceneGraph.layers[layer.id].items[item.id];
-  var countertop = null;
-  if (item3D === undefined) return undefined;
-  item3D.traverse(function (child) {
-    if (child.name.includes('countertop')) {
-      countertop = child;
-    }
-  });
-  return countertop;
-}
-function getDoorStyleMaterial(items, planData, layer, name) {
-  var item3D = null;
-  // find Item with visible = true, in elevation mode
-  items.forEach(function (item) {
-    var tempItem = null;
-    tempItem = planData.sceneGraph.layers[layer.id].items[item.id];
-    if (tempItem && tempItem.visible) {
-      item3D = tempItem;
-    }
-  });
-  var door_mesh = null;
-  if (!item3D) return undefined;
-  item3D.traverse(function (child) {
-    if (!door_mesh && !child.name.includes('countertop') && !child.name.includes('_interior_') && !child.name.includes('handle') && child.type === OBJTYPE_MESH) {
-      door_mesh = child;
-    }
-  });
-  return door_mesh && door_mesh.material;
-}
-function addCTMesh(countertop, planData, layer) {
-  if (countertop.items.length == 1) {
-    showItemCT(countertop.items[0], countertop, true, planData, layer);
-  } else {
-    var ctMesh = null;
-    countertop.items.some(function (item) {
-      ctMesh = getCountertopMesh(item, true, planData, layer);
-      return ctMesh != null;
-    });
-    if (!ctMesh) return;
-    if (0) {
-      var material = ctMesh.material;
-      var thickness = 3.81;
-      var geometry = new Three.BoxGeometry(countertop.size.width, thickness, countertop.size.depth);
-      var ct3d = new Three.Mesh(geometry, material);
-      countertop.ct3d = ct3d;
-      planData.plan.add(ct3d);
-      ct3d.position.x = countertop.pos.x;
-      ct3d.position.z = -countertop.pos.y;
-      ct3d.position.y = countertop.size.height + thickness / 2;
-      ct3d.quaternion.setFromAxisAngle(new Three.Vector3(0, 1, 0), countertop.rotRad);
-      ct3d.name = 'countertops';
-    } else {
-      var _ct3d = ctMesh.clone();
-      countertop.ct3d = _ct3d;
-      _ct3d.visible = true;
-      _ct3d.material = ctMesh.material.clone();
-      if (_ct3d.material.map !== null) {
-        _ct3d.material.map.copy(ctMesh.material.map);
-        _ct3d.material.map.repeat.x = countertop.items.length;
-      }
-      ctMesh.updateMatrix();
-      ctMesh.parent.updateMatrix();
-      ctMesh.parent.parent.updateMatrix();
-      var ctmeshMat = ctMesh.matrix;
-      var objMat = ctMesh.parent.matrix;
-      var pivotMat = ctMesh.parent.parent.matrix;
-      pivotMat.setPosition(new Three.Vector3(countertop.pos.x, 0, -countertop.pos.y));
-      var width = countertop.items.find(function (ct) {
-        return !ct.type.includes('Dishwasher') && !ct.type.includes('BF');
-      }).properties.get('width').get('_length');
-      var unit_width = countertop.items.find(function (ct) {
-        return !ct.type.includes('Dishwasher') && !ct.type.includes('BF');
-      }).properties.get('width').get('_unit') || 'cm';
-      width = convert(width).from(unit_width).to('cm');
-      pivotMat.scale(new Three.Vector3(countertop.size.width / width, 1, 1));
-      var finalMat = objMat.premultiply(pivotMat);
-      _ct3d.applyMatrix4(finalMat);
-      planData.plan.add(_ct3d);
-      _ct3d.name = 'countertops';
-    }
-  }
-}
-function getArea(a, b, c) {
-  return a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y);
-}
-function isSingleQuadrilateral(groupCount, pointGroup) {
-  return groupCount === 1 && pointGroup.length === 4;
-}
-
-/**
- * @param MDV - molding points
- * @param width - cabinet width
- * @param depth - cabinet depth ( z axis )
- * @param model - molding info that appear in real 3D
- */
-function moldingVertices(mPointGroup, mdGeo, MDV, model, svg_width, svg_height, groupCount) {
-  var pointGroup = mPointGroup;
-  var length = pointGroup.length;
-  var isSnap = true;
-
-  // Point O
-  var o = new Three.Vector2(0, 0);
-  if (GeometryUtils.samePoints(pointGroup[0], pointGroup[length - 1])) {
-    pointGroup = pointGroup.slice(0, length - 1);
-    length--;
-    isSnap = false;
-  }
-  var verticesArray = [];
-  var t = [[-1, -1], [1, -1], [1, 1], [-1, 1]];
-  if (!isSnap && isSingleQuadrilateral(groupCount, pointGroup)) {
-    var tmp_pos = [];
-    t.forEach(function (tmp) {
-      pointGroup.forEach(function (point) {
-        if (point.x * tmp[0] > 0 && point.y * tmp[1] > 0) {
-          tmp_pos.push(point);
-        }
-      });
-    });
-    pointGroup = tmp_pos;
-  }
-  pointGroup.forEach(function (cur, i) {
-    var prev = isSnap && i === 0 ? cur : pointGroup[(i + length - 1) % length];
-    var next = isSnap && i === length - 1 ? cur : pointGroup[(i + 1) % length];
-    var vecPC = cur.clone().sub(prev); // vector from point `prev` to point `cur`
-    var vecNC = cur.clone().sub(next); // vector from point `next` to point `cur`
-
-    // Calculate normal vector to `vecPC`
-    var vecNorm = new Three.Vector2(0, 1);
-    if (vecPC.x) {
-      if (vecPC.x > 0) {
-        vecNorm = new Three.Vector2(-vecPC.y / vecPC.x, 1);
-      } else {
-        vecNorm = new Three.Vector2(vecPC.y / vecPC.x, -1);
-      }
-    } else {
-      if (vecPC.y === 0) {
-        if (vecNC.x) {
-          if (vecNC.x > 0) {
-            vecNorm = new Three.Vector2(vecNC.y / vecNC.x, -1);
-          } else {
-            vecNorm = new Three.Vector2(-vecNC.y / vecNC.x, 1);
-          }
-        } else {
-          if (vecNC.y > 0) {
-            vecNorm = new Three.Vector2(1, 0);
-          } else {
-            vecNorm = new Three.Vector2(-1, 0);
-          }
-        }
-      } else {
-        if (vecPC.y > 0) {
-          vecNorm = new Three.Vector2(-1, 0);
-        } else {
-          vecNorm = new Three.Vector2(1, 0);
-        }
-      }
-    }
-    var p1 = cur.clone().add(vecNorm); // the point that's away from `cur` by `vecNorm`
-    if (getArea(prev, p1, cur) > 0) {
-      vecNorm.multiplyScalar(-1);
-    }
-    var area = 0.5 * getArea(prev, cur, next);
-    var lenPN = next.clone().sub(prev).length();
-    var lenNC = vecNC.length();
-    var lenPC = vecPC.length();
-    var alpha = Math.acos((lenNC * lenNC + lenPC * lenPC - lenPN * lenPN) / (2 * lenNC * lenPC));
-    if (area < 0) alpha = 2 * Math.PI - alpha; // Exterior Angle
-    alpha /= 2;
-    if (isNaN(alpha)) {
-      alpha = Math.PI / 2;
-    }
-    vecNorm.rotateAround(o, Math.PI / 2 - alpha);
-    vecNorm.normalize();
-    vecNorm.multiplyScalar(1 / Math.sin(alpha));
-
-    // Make 3D Points
-    MDV.forEach(function (p) {
-      var x = cur.x - vecNorm.x * ((p.x / svg_width - 0.5) * model.length);
-      var y = (0.5 - p.y / svg_height) * model.width;
-      var z = -cur.y + vecNorm.y * ((p.x / svg_width - 0.5) * model.length);
-      if (mdGeo.attributes.hasOwnProperty('position')) verticesArray = mdGeo.attributes.position.array;
-      verticesArray.push(x, y, z);
-    });
-  });
-  var mdGeo1 = mdGeo.setAttribute('position', new Three.BufferAttribute(new Float32Array(verticesArray), 3));
-  mdGeo1.needsUpdate = true;
-  return mdGeo1;
-}
-var dcmFace = function dcmFace(a, leng, MDV) {
-  for (var i = a; i < a + 2; i++) {
-    var f_a1 = i;
-    var f_b1 = i + leng;
-    var f_c1 = i + leng + 1;
-    var f_a2 = i;
-    var f_b2 = i + 1;
-    var f_c2 = f_c1;
-    var _indices = Array.from(MDV.index.array);
-    _indices.push(f_a1, f_b1, f_c1, f_c2, f_b2, f_a2);
-    MDV.setIndex(_indices);
-  }
-  var indices = Array.from(MDV.index.array);
-  indices.push(a + 2, a + leng + 2, a + leng + 4, a + leng + 4, a + 4, a + 2);
-  MDV.setIndex(indices);
-  for (var _i = a + 4; _i < a + 74; _i++) {
-    var _f_a = _i;
-    var _f_b = _i + leng;
-    var _f_c = _i + leng + 1;
-    var _f_a2 = _i;
-    var _f_b2 = _i + 1;
-    var _f_c2 = _f_c;
-    var _indices2 = Array.from(MDV.index.array);
-    _indices2.push(_f_a, _f_b, _f_c, _f_c2, _f_b2, _f_a2);
-    MDV.setIndex(_indices2);
-  }
-  var faces = Array.from(MDV.index.array);
-  faces.push(a + 50, a + 3, a + 103, a + 103, a + 150, a + 50);
-  MDV.setIndex(faces);
-};
-var fbmFace = function fbmFace(a, leng, MDV) {
-  var total_leng = leng * 4;
-  for (var i = a; i < a + leng - 1; i++) {
-    var f_a1 = i;
-    var f_b1 = (i + leng) % total_leng;
-    var f_c1 = (i + leng + 1) % total_leng;
-    var f_a2 = i;
-    var f_b2 = i + 1;
-    var f_c2 = f_c1;
-    var indices = [];
-    if (MDV.index !== null) {
-      indices = Array.from(MDV.index.array);
-    }
-    indices.push(f_a1, f_b1, f_c1, f_c2, f_b2, f_a2);
-    MDV.setIndex(indices);
-  }
-};
-var assignUVs = function assignUVs(geometry) {
-  geometry.computeBoundingBox();
-  var h = 400;
-  var _geometry$boundingBox = geometry.boundingBox,
-    min = _geometry$boundingBox.min,
-    max = _geometry$boundingBox.max;
-  var offset = new Three.Vector2(0 - min.x, 0 - min.z);
-  var range = new Three.Vector2(max.x - min.x, max.z - min.z);
-  geometry.faceVertexUvs[0] = geometry.faces.map(function (face) {
-    var v1 = geometry.vertices[face.a];
-    var v2 = geometry.vertices[face.b];
-    var v3 = geometry.vertices[face.c];
-    return [new Three.Vector2((v1.x + offset.x) / range.x, (v1.z + offset.y) / (range.y + h)), new Three.Vector2((v2.x + offset.x) / range.x, (v2.z + offset.y) / (range.y + h)), new Three.Vector2((v3.x + offset.x) / range.x, (v3.z + offset.y) / (range.y + h))];
-  });
-  geometry.uvsNeedUpdate = true;
-};
-var assignUVsA = function assignUVsA(geometry) {
-  geometry.computeBoundingBox();
-  var h = 200;
-  var _geometry$boundingBox2 = geometry.boundingBox,
-    min = _geometry$boundingBox2.min,
-    max = _geometry$boundingBox2.max;
-  var offset = new Three.Vector2(0 - min.x, 0 - min.y);
-  var range = new Three.Vector2(max.x - min.x, max.y - min.y);
-  geometry.faceVertexUvs[0] = geometry.faces.map(function (face) {
-    var v1 = geometry.vertices[face.a];
-    var v2 = geometry.vertices[face.b];
-    var v3 = geometry.vertices[face.c];
-    return [new Three.Vector2((v1.x + offset.x) / (range.x + h), (v1.y + offset.y) / (range.y + h)), new Three.Vector2((v2.x + offset.x) / (range.x + h), (v2.y + offset.y) / (range.y + h)), new Three.Vector2((v3.x + offset.x) / (range.x + h), (v3.y + offset.y) / (range.y + h))];
-  });
-  geometry.uvsNeedUpdate = true;
-};
-
-/*
-  Remove specified type of 3d object easily
-*/
-export function deleteSpecifiedMeshObjects(type) {
-  var childLen = planData.plan.children.length;
-  var children = [];
-  for (var i = 0; i < childLen; i++) {
-    if (planData.plan.children[i].name != type) children.push(planData.plan.children[i]);
-  }
-  planData.plan.children = children;
-}
-export function getMeshesFromScene() {
-  var childLen = planData.plan.children.length;
-  var children = [];
-  for (var i = 0; i < childLen; i++) {
-    if (planData.plan.children[i].type == OBJTYPE_MESH) children.push(planData.plan.children[i]);
-  }
-  return children;
-}
-export function threedfabs(a) {
-  return a > 0 ? a : -a;
-}
-export function getDistanceBetweenLineSegment(pos1, pos2, pos3, pos4) {
-  if (pos1.x == pos2.x && pos3.x == pos4.x) return pos3.x - pos1.x;else if (pos1.y == pos2.y && pos3.y == pos4.y) return pos3.y - pos1.y;else return -1;
-}
-
-/**
- * check to see if an item is suitable for the given doorStyle.
- * @param _item
- * @returns true if it's not suitable.
- */
-export function showYelloBox(_item) {
-  var _doorStyle;
-  var doorStyle = _item === null || _item === void 0 ? void 0 : _item.doorStyle;
-
-  // If doorStyle is an Immutable Map, convert to plain JS
-  if (doorStyle && typeof doorStyle.toJS === 'function') {
-    doorStyle = doorStyle.toJS();
-  }
-  var isItemCabinet = (_item === null || _item === void 0 ? void 0 : _item.category) === 'cabinet';
-  var cds = (_doorStyle = doorStyle) === null || _doorStyle === void 0 || (_doorStyle = _doorStyle.doorStyles) === null || _doorStyle === void 0 ? void 0 : _doorStyle.cds;
-
-  // hasItemCDS: item is suitable if its itemID exists in cds
-  var hasItemCDS = isItemCabinet && Array.isArray(cds) ? cds.some(function (element) {
-    return element.itemID === _item.itemID;
-  }) : false;
-
-  // return true if it's a cabinet but not suitable for the current doorStyle
-  return isItemCabinet && !hasItemCDS;
-}
-function isSimilar(a, b) {
-  if (threedfabs(a - b) <= 0.01) return 1;
-  return 0;
-}
-export function sameSign(pos1, pos2, pos3) {
-  var ch1 = 0.0;
-  var ch2 = 1.0;
-  if (isSimilar(pos1.x, pos2.x) && isSimilar(pos1.x, pos3.x)) {
-    ch1 = (pos2.y - pos1.y) * (pos3.y - pos1.y);
-  } else if (isSimilar(pos1.y, pos2.y) && isSimilar(pos1.y, pos3.y)) {
-    ch1 = (pos2.x - pos1.x) * (pos3.x - pos1.x);
-  } else {
-    ch1 = (pos2.y - pos1.y) * 1.0 / (pos2.x - pos1.x);
-    ch2 = (pos3.y - pos1.y) * 1.0 / (pos3.x - pos1.x);
-  }
-  if (ch1 * ch2 >= 0) return 1;
-  return 0;
-}
-export function getTotalDistance(pos, rect) {
-  var sum = 0;
-  for (var i = 0; i < rect.length; i++) {
-    sum += verticesDistance(pos, rect[i]);
-  }
-  return sum;
-}
-var applyTexture = function applyTexture(material, texture, length, height) {
-  if (texture) {
-    material.map = texture;
-    material.needsUpdate = true;
-    material.map.wrapS = Three.RepeatWrapping;
-    material.map.wrapT = Three.RepeatWrapping;
-    material.map.repeat.set(length * 0.01, height * 0.01);
-    if (texture.normal) {
-      material.normalMap = loadTexture(texture.normal.uri);
-      material.normalScale = new Vector2(texture.normal.normalScaleX, texture.normal.normalScaleY);
-      material.normalMap.wrapS = Three.RepeatWrapping;
-      material.normalMap.wrapT = Three.RepeatWrapping;
-      material.normalMap.repeat.set(length * texture.normal.lengthRepeatScale, height * texture.normal.heightRepeatScale);
-    }
-  }
-};
-
-/**
- *
- * @param {{is_corner:number,itemInfo:Item,layoutpos:string,pos:{x:number,y:number},rect:[{x:number,y:number}],
- * rotRad:number,size:{depth:number,width:number,height:number}}} item
- * @param {Layer} layer
- * @param {{boundingBox:Box3,catalog:Catalog,grid: Object3D,plan: Object3D,sceneData: Scene,sceneGraph}} planData
- * @param {Scene} scene
- */
-export function createBacksplash(item, layer, planData, scene) {
-  var sceneGraph = planData.sceneGraph;
-  var selectedLayer = planData.sceneData.selectedLayer;
-  /**
-   * @type {[{backsplash,info:{rotY:number,posX:number,posY:number,posZ:number,splashWidth:number,splashHeight:number,splashDepth:number,id:string}}]}
-   */
-  var backsplashes = sceneGraph.layers[selectedLayer].backsplashes;
-  var backsplashApplied = layer.get('backsplashApplied');
-  var name = 'backsplash' + item.itemInfo.id;
-  var index = backsplashes.findIndex(function (item) {
-    return item.backsplash.name === name;
-  });
-  var itemToSave = {
-    backsplash: null,
-    info: {}
-  };
-  if (!item.itemInfo.backsplashVisible) {
-    // If backsplash is not visible
-    if (index >= 0) {
-      backsplashes.splice(index, 1); // Remove from backsplashes array
-    }
-    return;
-  }
-
-  // Get wall items
-
-  var i,
-    wallItems = [];
-  var allWallItems = GeometryUtils.getAllItemSpecified(scene, planData.catalog, WALL_CABINET_LAYOUTPOS);
-  for (i = 0; i < allWallItems.others.length; i++) wallItems.push(allWallItems.others[i]);
-  if (allWallItems.cur) wallItems.push(allWallItems.cur);
-
-  // Get information of item itself
-
-  var altitude = item.itemInfo.properties.get('altitude').get('_length');
-  var altitudeUnit = item.itemInfo.properties.get('altitude').get('_unit') || 'cm';
-  altitude = convert(altitude).from(altitudeUnit).to('cm');
-  var thickness = 1,
-    /** Height --- altitude */depth;
-
-  // Calc wall & hole items info
-
-  /**
-   * Wall & Hole items info
-   * @type {[{x:number,width:number,altitude:number}]}
-   */
-  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 = 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({
-      x: hole.x,
-      width: width,
-      altitude: altitude
-    });
-  });
-  if (altItems.length > 0) {
-    depth = altItems[0].altitude;
-    altItems.map(function (altItem) {
-      if (item.pos.x + item.size.width / 2 >= altItem.x - altItem.width / 2 && item.pos.x - item.size.width / 2 <= altItem.x + altItem.width / 2) {
-        if (depth >= altItem.altitude) {
-          depth = altItem.altitude;
-          flag = true;
-        }
-      }
-    });
-  }
-  if (!flag) depth = 52 * 2.54;
-
-  // Get backsplash info
-
-  var posX = item.pos.x - Math.sin(item.rotRad) * (item.size.depth / 2 - thickness);
-  var posY = altitude + depth / 2;
-  var posZ = -item.pos.y - Math.cos(item.rotRad) * (item.size.depth / 2 - thickness);
-  // TODO If you want apply backsplash to walls that's not vertical or horizontal ( slope )
-  // You must update this calcuating rotY
-  var rotY = item.rotRad;
-  var posX1 = item.pos.x + Math.cos(item.rotRad) * (item.size.width / 2 - thickness);
-  var posY1 = altitude + depth / 2;
-  var posZ1 = -item.pos.y - Math.sin(item.rotRad) * (item.size.width / 2 - thickness);
-  // TODO If you want apply backsplash to walls that's not vertical or horizontal ( slope )
-  // You must update this calcuating rotY
-  var rotY1 = item.rotRad + Math.PI / 2;
-  var splashWidth = item.size.width;
-  var splashHeight = depth;
-  var splashDepth = thickness;
-
-  // Find mergeable other backsplashes
-
-  var info, wholeWidth, /** Width factor */factor, distance, halfWidth, /** To get new center */centerFactor;
-  var _iterator = _createForOfIteratorHelper(backsplashes),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var back = _step.value;
-      info = back.info;
-      if (info.height === splashHeight && info.rotY === rotY) {
-        factor = Math.cos(rotY) || 1;
-        distance = Math.hypot(posX - info.posX, posZ - info.posZ) / factor;
-        halfWidth = (info.width + splashWidth) / 2;
-        if (Math.abs(distance - halfWidth) < 1e-2) {
-          // dispose `back`
-          if (info.id) {
-            deleteSpecifiedMeshObjects('backsplash' + info.id);
-          }
-
-          // Get center position
-          wholeWidth = info.width + splashWidth;
-          centerFactor = info.width / wholeWidth;
-          posX = posX + centerFactor * (info.posX - posX);
-          posZ = posZ + centerFactor * (info.posZ - posZ);
-          splashWidth = wholeWidth;
-        }
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  itemToSave.info.posX = posX;
-  itemToSave.info.posY = posY;
-  itemToSave.info.posZ = posZ;
-  itemToSave.info.rotY = rotY;
-  itemToSave.info.width = splashWidth;
-  itemToSave.info.height = splashHeight;
-  itemToSave.info.depth = splashDepth;
-
-  // Make material
-
-  var texture = layer.get('backsplash');
-  var areaMaterial = new Three.MeshStandardMaterial({
-    side: Three.DoubleSide,
-    metalness: texture.metalness,
-    roughness: texture.roughness
-  });
-  var interiortexture = loadTexture(texture.uri);
-  applyTexture(areaMaterial, interiortexture, splashWidth * 1.5, splashHeight * 1.5);
-
-  // Make geometry
-  var geometry = new Three.BoxGeometry(splashWidth, splashHeight, splashDepth);
-
-  // Make backsplash mesh
-
-  var backsplash = itemToSave.backsplash = new Three.Mesh(geometry, areaMaterial);
-  backsplash.position.x = itemToSave.info.posX;
-  backsplash.position.y = itemToSave.info.posY;
-  backsplash.position.z = itemToSave.info.posZ;
-  backsplash.rotation.y = itemToSave.info.rotY;
-  var allLines = GeometryUtils.getAllLines(layer);
-  var allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-  if (item.is_corner && GeometryUtils.isSnappedSideLine(item, allLineRects)) {
-    // corner cabinet item.itemInfo.getIn(["cabinet_category"]) === "Corner Base Cabinets"
-    var geometry1 = new Three.BoxGeometry(splashWidth, splashHeight, splashDepth);
-    // Make backsplash mesh
-    //console.log(sceneGraph.layers["layer-1"].lines);
-    var backsplash1 = itemToSave.backsplash = new Three.Mesh(geometry1, areaMaterial);
-    backsplash1.position.x = posX1;
-    backsplash1.position.y = posY1;
-    backsplash1.position.z = posZ1;
-    backsplash1.rotation.y = rotY1;
-    var newBacksplash = new Group();
-    newBacksplash.add(backsplash);
-    newBacksplash.add(backsplash1);
-    backsplash = newBacksplash;
-  }
-  itemToSave.info.id = item.itemInfo.id;
-  deleteSpecifiedMeshObjects('backsplash' + item.itemInfo.id);
-  if (item.rotRad % (Math.PI / 2) === 0) planData.plan.add(backsplash);
-  backsplash.name = name;
-  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && item.rotRad % (Math.PI / 2) === 0;
-
-  // Save to scene graph
-
-  if (index < 0) {
-    backsplashes.push(itemToSave);
-  } else {
-    disposeObject(backsplashes[index].backsplash);
-    backsplashes.splice(index, 1, itemToSave);
-  }
-}
-
-/**
- * @param {Map} item - Selected Item
- */
-function addMGMesh(molding, planData, layer) {
-  var _molding$molding;
-  var flag = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var point = [];
-  var data = molding === null || molding === void 0 || (_molding$molding = molding.molding) === null || _molding$molding === void 0 ? void 0 : _molding$molding.data;
-  if (isEmpty(data)) return;
-  var paths = data.paths,
-    svg_width = data.svg_width,
-    svg_height = data.svg_height;
-  for (var i = 0; i < paths.length; i++) {
-    var path = paths[i];
-    for (var j = 0, jl = path.subPaths.length; j < jl; j++) {
-      var subPath = new Three.Path();
-      if (path.subPaths[j].hasOwnProperty('metadata')) {
-        subPath.fromJSON(path.subPaths[j]);
-      } else {
-        subPath = path.subPaths[j];
-      }
-      point = subPath.getPoints();
-    }
-  }
-  _addMGMesh(molding, planData, layer, point, svg_width, svg_height, flag);
-}
-var isBaseCabinet = function isBaseCabinet(item) {
-  return item.layoutpos === BASE_CABINET_LAYOUTPOS;
-};
-
-/**
- * @param data  - Molding SVG Points
- */
-
-// function assignUVs
-function _addMGMesh(molding, planData, layer, data, svg_width, svg_height, flag) {
-  var child = molding.molding;
-  var material = getDoorStyleMaterial(molding.items, planData, layer, child.name);
-  if (!material) return;
-  material = new Three.MeshStandardMaterial(material);
-  // let texture = loadTexture(material.map.image.src);
-  // var material1 = new Three.MeshLambertMaterial( { map:texture } );
-  material.side = parseInt(Three.DoubleSide);
-  // let layoutType = molding.items[0].layoutpos;
-  // let visible = molding.items[0];
-  molding.pointGroups.forEach(function (pointGroup) {
-    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';
-    }
-    geometry.needsUpdate = true;
-    geometry = moldingVertices(pointGroup, geometry, data, child, svg_width, svg_height, molding.pointGroups.length);
-    var total = geometry.attributes.position.count;
-    var len = geometry.attributes.position.count / length;
-    if (!GeometryUtils.samePoints(pointGroup[0], pointGroup[pointGroup.length - 1])) {
-      len--;
-    }
-    for (var i = 0; i < len; i++) {
-      for (var j = i * length; j < (i + 1) * length - 1; j++) {
-        var f_a1 = j;
-        var f_b1 = (j + length) % total;
-        var f_c1 = (j + length + 1) % total;
-        var f_a2 = j;
-        var f_b2 = j + 1;
-        var f_c2 = f_c1;
-        var indices = [];
-        if (geometry.index !== null) {
-          indices = Array.from(geometry.index.array);
-        }
-        indices.push(f_a1, f_b1, f_c1, f_c2, f_b2, f_a2);
-        geometry.setIndex(indices);
-      }
-    }
-
-    // handle molding texture
-    // (0, e[i])   ------------- (1, e[i])
-    // ----------- ---           -----------
-    // -----------    ---        -----------
-    // -----------       ---     -----------
-    // -----------          ---  -----------
-    // (0, e[i+1]) ------------- (1, e[i+1])
-    geometry = geometry.toNonIndexed();
-    var sumDistance = 0;
-    var sumDistanceArray = [0];
-    var finalDistance = 0;
-    var uvs_element_array = [];
-    for (var _i2 = 0; _i2 < data.length - 1; _i2++) {
-      var v1 = {
-        x: data[_i2].x,
-        y: data[_i2].y
-      };
-      var v2 = {
-        x: data[_i2 + 1].x,
-        y: data[_i2 + 1].y
-      };
-      var posDistance = verticesDistance(v1, v2);
-      sumDistance += posDistance;
-      if (_i2 === data.length - 2) finalDistance = sumDistance;
-      sumDistanceArray.push(sumDistance);
-    }
-    for (var _i3 = 0; _i3 < sumDistanceArray.length; _i3++) {
-      uvs_element_array.push(sumDistanceArray[_i3] / finalDistance);
-    }
-    var uvs = [];
-    var uvs_item = [];
-    for (var _i4 = 0; _i4 < uvs_element_array.length - 1; _i4++) {
-      uvs_item = [0, uvs_element_array[_i4], 1, uvs_element_array[_i4], 1, uvs_element_array[_i4 + 1], 1, uvs_element_array[_i4 + 1], 0, uvs_element_array[_i4 + 1], 0, uvs_element_array[_i4]];
-      uvs.push.apply(uvs, _toConsumableArray(uvs_item));
-    }
-    var all_uvs = [];
-    for (var _i5 = 0; _i5 < pointGroup.length; _i5++) {
-      all_uvs.push.apply(all_uvs, uvs);
-    }
-    geometry.setAttribute('uv', new Three.BufferAttribute(new Float32Array(all_uvs), 2));
-    geometry.computeVertexNormals();
-    var fbm3d = new Three.Mesh(geometry, material);
-    fbm3d.position.x = molding.pos.x;
-    fbm3d.position.z = -molding.pos.y;
-    fbm3d.position.y = molding.pos.z;
-    planData.plan.add(fbm3d);
-    fbm3d.name = child.name + molding.id + 'molding';
-    molding.meshes.push(fbm3d);
-    fbm3d.visible = true;
-    fbm3d.castShadow = true;
-  });
-}
-function deleteCTMesh(countertop, planData, layer) {
-  log('--deleteCTMesh', countertop);
-  if (countertop.items.length == 1) {
-    showItemCT(countertop.items[0], countertop, false, planData, layer);
-  } else {
-    var ct3d = countertop.ct3d;
-    if (ct3d) {
-      planData.plan.remove(ct3d);
-      disposeObject(ct3d);
-    }
-  }
-}
-export function deleteMGMesh(molding, planData) {
-  var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  // mode is 3D or elevation
-  molding.meshes.forEach(function (mesh) {
-    if (isElevationView(mode)) {
-      var _planData$plan$childr;
-      // when elevation mode, remove obj same as selected global molding_name in platnData.plan
-      (_planData$plan$childr = planData.plan.children) === null || _planData$plan$childr === void 0 || _planData$plan$childr.forEach(function (obj) {
-        var parent = obj.parent;
-        if (obj.name.match(mesh.name)) parent.remove(obj);
-      });
-    } else {
-      // when 3D mode
-      planData.plan.remove(mesh);
-      disposeObject(mesh);
-    }
-  });
-  molding.meshes = [];
-}
-function log() {
-  // console.log(...arguments);
-}
-function addCountertop(CTArray, addItem, planData, layer) {
-  log('addCountertop', _toConsumableArray(CTArray), addItem.id);
-  var tmp = planData;
-  tmp = tmp && tmp.catalog.getElement(addItem.type);
-  if (!tmp) tmp = planData.catalog.getElement(returnReplaceableDeepSearchType(addItem.type));
-  var long_name = tmp && tmp.long_name;
-  if (long_name.includes('Sink ')) return;
-  var newCT = createCTFromItem(addItem, planData.sceneGraph.unit, planData.catalog);
-  var oldCT = null;
-  var extCT = false;
-  var extCTIndex = -1;
-  var tryMergeCT = function tryMergeCT() {
-    extCTIndex = CTArray.findIndex(function (el) {
-      extCT = tryAdjacent(newCT, el);
-      return extCT != false;
-    });
-    return extCTIndex >= 0;
-  };
-  while (tryMergeCT()) {
-    oldCT = CTArray.splice(extCTIndex, 1)[0];
-    deleteCTMesh(newCT, planData, layer);
-    deleteCTMesh(oldCT, planData, layer);
-    newCT = extCT;
-  }
-  addCTMesh(newCT, planData, layer);
-  CTArray.push(newCT);
-}
-export function deleteCountertop(CTArray, delItem, planData, layer) {
-  if (delItem == undefined) {
-    return;
-  }
-  log('deleteCountertop', _toConsumableArray(CTArray), delItem.id);
-  var delCT = null;
-  var delItemIndex = -1;
-  var delCTIndex = CTArray.findIndex(function (el) {
-    delItemIndex = el.items.findIndex(function (el) {
-      return el.id == delItem.id;
-    });
-    return delItemIndex >= 0;
-  });
-  if (delCTIndex < 0) return;
-  delCT = CTArray.splice(delCTIndex, 1)[0];
-  if (delCT.items.length > 1) {
-    deleteCTMesh(delCT, planData, layer);
-    var ct1 = delCT.items.slice(0, delItemIndex);
-    var ct2 = delCT.items.slice(delItemIndex + 1);
-    [ct1, ct2].forEach(function (cts) {
-      if (cts.length == 0) return;
-      var newCT = createCTFromItems(cts, planData.sceneGraph.unit, planData.catalog);
-      CTArray.push(newCT);
-      addCTMesh(newCT, planData, layer);
-    });
-  }
-}
-export function deleteAllMolding(MGArray, delItem, planData, oldSceneLayer, newSceneLayer) {
-  var tempMGArray = _toConsumableArray(MGArray);
-  if (isEmpty(delItem)) {
-    return tempMGArray;
-  }
-
-  // remove the MGs which includes delItem
-  tempMGArray = tempMGArray.filter(function (mg) {
-    if (mg.items.some(function (it) {
-      return it.id === delItem.id;
-    })) {
-      deleteMGMesh(mg, planData, null);
-      return false;
-    } else return true;
-  });
-  if (newSceneLayer !== null) {
-    // find the snapped items with delItem
-    var snappedItems = [];
-    oldSceneLayer.items.toArray().forEach(function (oItem) {
-      if (oItem.category === 'cabinet' && oItem.id !== delItem.id && MoldingUtils.isItemSnappedItem(delItem, oItem)) {
-        snappedItems.push(oItem);
-      }
-    });
-
-    // update molding group array with snapped items in the new scene layer
-    for (var i = 0; i < snappedItems.length; i++) {
-      tempMGArray = updateMoldingGroupArray(tempMGArray, snappedItems[i], planData, newSceneLayer, null, null, 0);
-    }
-  }
-  return tempMGArray;
-}
-export function addMolding(MGArray, addItem, planData, layer, itemActions, mode) {
-  if (addItem.selected && [MODE_DRAGGING_ITEM_3D, MODE_ROTATING_ITEM_3D].includes(mode)) return false;
-
-  // If the item is not available for current doorStyle
-  if (showYelloBox(addItem))
-    // Do not add molding to that item
-    return MGArray;
-
-  // if (
-  //   !(
-  //     (addItem.layoutpos === BASE_CABINET_LAYOUTPOS &&
-  //       !GeometryUtils.isSnappedLine(
-  //         MoldingUtils.getItemRect(addItem),
-  //         GeometryUtils.buildRectFromLines(
-  //           layer,
-  //           GeometryUtils.getAllLines(layer)
-  //         )
-  //       )) ||
-  //     ((addItem.layoutpos === WALL_CABINET_LAYOUTPOS ||
-  //       addItem.layoutpos === TALL_CABINET_LAYOUTPOS) &&
-  //       GeometryUtils.isSnappedLine(
-  //         MoldingUtils.getItemRect(addItem),
-  //         GeometryUtils.buildRectFromLines(
-  //           layer,
-  //           GeometryUtils.getAllLines(layer)
-  //         )
-  //       ))
-  //   )
-  // )
-  //   return false;
-
-  //  update the molding group array.
-  var temp_MGArray = updateMoldingGroupArray(MGArray, addItem, planData, layer, itemActions, mode, 0);
-  temp_MGArray.forEach(function (mg) {
-    var moldingMesh = mg.meshes[0];
-    if (isElevationView(mode)) {
-      if (!isEmpty(moldingMesh)) {
-        replaceMeshesWithLineSegments(moldingMesh);
-      }
-    }
-  });
-  return temp_MGArray;
-}
-export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
-  var itemActions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-  var mode = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-  var cnt = arguments.length > 6 ? arguments[6] : undefined;
-  try {
-    cnt++;
-    if (cnt > 500) {
-      console.log('updateMoldingGroupArray has limited!');
-      return MGArray;
-    }
-    var temp_MGArray = _toConsumableArray(MGArray);
-    if (isEmpty(selItem)) return temp_MGArray;
-    var isEnableMolding = MoldingUtils.isEnableItemForMolding(layer, selItem);
-    // Make a items group with selItem to create the new MG(molding group) array of selItem
-    var itemsForGroup = [selItem];
-    var i = 0;
-    while (i < itemsForGroup.length) {
-      layer.items.toArray().forEach(function (curItem) {
-        if (!itemsForGroup.some(function (it) {
-          return it.id === curItem.id;
-        }) && curItem.category === 'cabinet' && MoldingUtils.isSameMoldingLayoutpos(curItem, itemsForGroup[i]) && MoldingUtils.isItemSnappedItem(itemsForGroup[i], curItem)) {
-          itemsForGroup.push(curItem);
-        }
-      });
-      i++;
-    }
-
-    // Create the new MG(molding group) array of selItem
-    var new_MGArray = MoldingUtils.getAllMoldingGroups(layer, itemsForGroup);
-
-    // get molding settings of update molding from adjoined item's molding
-    var changeMoldings = [];
-    new_MGArray.forEach(function (mg) {
-      if (mg.items.some(function (it) {
-        return it.id === selItem.id;
-      }) && mg.items.length > 1) {
-        var destItem = mg.items.find(function (it) {
-          return it.id !== selItem.id;
-        });
-        var destMolding = destItem.molding.find(function (md) {
-          return md.location_type === mg.location_type;
-        });
-
-        // if current item has not destination molding then set it to the current molding
-        if (!isEmpty(destMolding) && !selItem.molding.some(function (md) {
-          return md.location_type === destMolding.location_type;
-        })) {
-          // only update with the same height cabinet or update the bottom molding setting
-          // itemActions.setMolding(destMoldings[i], false);
-          changeMoldings.push(destMolding);
-        } else if (isEmpty(destMolding) && selItem.molding.some(function (md) {
-          return md.location_type === mg.location_type;
-        })) {
-          // if current item has more molding than adjoined then remove theses moldings
-          // itemActions.setMolding(selItem.molding[i], false);
-          changeMoldings.push(selItem.molding.find(function (md) {
-            return md.location_type === mg.location_type;
-          }));
-        }
-      }
-    });
-    var regenMGItemList = [];
-    // An old MG and a new MG include a same item && The location_type of Two MGs are same
-    // Then replace the old MG with the new MG
-    temp_MGArray = temp_MGArray.filter(function (oldMG) {
-      var filteredNewMGList = new_MGArray.filter(function (mg) {
-        return mg.location_type === oldMG.location_type;
-      });
-      if (isEmpty(filteredNewMGList)) {
-        return true;
-      }
-      var _loop3 = function _loop3() {
-          var newMG = filteredNewMGList[k];
-          if (oldMG.items.some(function (it) {
-            return it.id === selItem.id;
-          })) {
-            // if current action is a seprating item from group, then have to regenerate the MGs of old snapped items
-            if (oldMG.items.filter(function (oIt) {
-              return !newMG.items.some(function (nIt) {
-                return nIt.id === oIt.id;
-              });
-            }).length > 0) {
-              oldMG.items.forEach(function (oIt) {
-                if (oIt.id !== selItem.id && !regenMGItemList.some(function (rIt) {
-                  return rIt.id === oIt.id;
-                })) regenMGItemList.push(oIt);
-              });
-            }
-          }
-          // remove the old MG meshes
-          for (var _i6 = 0; _i6 < oldMG.items.length; _i6++) {
-            var oItem = oldMG.items[_i6];
-            for (var j = 0; j < newMG.items.length; j++) {
-              var nItem = newMG.items[j];
-              if (oItem.id === nItem.id) {
-                deleteMGMesh(oldMG, planData, mode);
-                //   if (oldMG.items.length > 1) {
-                //     // separating item from group
-                //     oldMG.items.splice(i, 1);
-                //     // update the old molding group info
-                //     const mIdx = oldMG.items[0].molding.findIndex(
-                //       m => m.location_type == oldMG.location_type
-                //     );
-                //     if (mIdx >= 0) {
-                //       let molding = oldMG.items[0].molding[mIdx];
-                //       oldMG = MoldingUtils.createMonldingGroup(
-                //         oldMG,
-                //         layer,
-                //         molding,
-                //         planData.catalog
-                //       );
-                //       addMGMesh(oldMG, planData, layer);
-                //     }
-                //     return true;
-                //   }
-                return {
-                  v: false
-                };
-              }
-            }
-          }
-        },
-        _ret;
-      for (var k = 0; k < filteredNewMGList.length; k++) {
-        _ret = _loop3();
-        if (_ret) return _ret.v;
-      }
-      return true;
-    });
-    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 molding = mg.items[0].molding.filter(function (mol) {
-            return 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) {
-              deleteMGMesh(mg, planData, mode);
-            }
-            mg = MoldingUtils.createMonldingGroup(mg, layer, molding, planData.catalog);
-          }
-          if (!mg.meshes.length) {
-            addMGMesh(mg, planData, layer);
-          }
-        } else {
-          deleteMGMesh(mg, planData, mode);
-        }
-      });
-    }
-    new_MGArray.forEach(function (mg) {
-      return temp_MGArray.push(mg);
-    });
-    regenMGItemList.forEach(function (it) {
-      temp_MGArray = updateMoldingGroupArray(temp_MGArray, it, planData, layer, itemActions, mode, cnt);
-    });
-    if (changeMoldings.length > 0 && itemActions !== null) {
-      setTimeout(function () {
-        changeMoldings.forEach(function (chMolding) {
-          itemActions.setMolding(chMolding, false);
-        });
-      }, 200);
-    }
-    return temp_MGArray;
-  } catch (e) {
-    console.log('updateMoldingGroupArray catched :', e);
-    return MGArray;
-  }
-}
-export function removeSelItemMesh(MGArray, selItem, planData, mode) {
-  if (selItem) {
-    if (!selItem.selected) {
-      return;
-    }
-    MGArray.forEach(function (mg) {
-      if (mg.items.some(function (it) {
-        return it.id === selItem.id;
-      })) deleteMGMesh(mg, planData, mode);
-    });
-  }
-}
-
-/**
- * Flip door handle
- * @param item Scene state item ( redux )
- * @param item3D Mesh
- * @param {Boolean} flip Determines handle position.
- * @note When `flip` is set
- *
- * `true`
- * * Left side door - use left handle (LL)
- * * Right side door - use right handle (RR)
- *
- * `false`
- * * Left side door - use right handle (LR)
- * * Right side door - use left handle (RL)
- *
- * And one-door-cabinet is the same case with the left door of two-door-cabinet
- */
-export function updateDoorHandleMesh(_, item3D, flip) {
-  if (!item3D) {
-    console.error('Item mesh is undefined.');
-    return;
-  }
-
-  /**
-   * Mesh whose name pass this regexp is a place holder for a door
-   * which is the parent or grand parent of a door mesh and its handles
-   */
-  var doorReg = /ph_.*[^(drawer)]_door(?:_(L|R))?(?:_[1-9])?$/;
-  var doorHandleReg = /ph_.*_door_.*_handle_(L|R)?(_[1-9])?/;
-  item3D.traverse(function (child) {
-    /**
-     * Hold the name of the place holder for door and its position
-     * @type {[string,"L"|"R"|undefined]}
-     */
-    var doorRegResult = doorReg.exec(child.name);
-    if (doorRegResult) {
-      // `child` is place holder for door mesh, and also grand parent of on[0]e
-      var phDoor = child.children[0];
-      if (!phDoor) {
-        return console.error('Group is no valid.');
-      }
-      var doorHandle = null;
-      var phRight = null;
-      var phLeft = null;
-
-      // Find door_handle, ph_left, ph_right 3D item
-      phDoor.traverse(function (childOfDoor) {
-        /**
-         * @type {[string, "L"|"R"]}
-         */
-        var result = doorHandleReg.exec(childOfDoor.name);
-        if (result !== null) {
-          // `childOfDoor` is place holder for door handle
-
-          switch (result[1]) {
-            case 'L':
-              phLeft = childOfDoor;
-              break;
-            case 'R':
-              phRight = childOfDoor;
-              break;
-            default:
-              console.error('Place holder type should be L or R.');
-              return;
-          }
-          if (childOfDoor.children.length !== 0) {
-            // It has a door handle
-            doorHandle = childOfDoor.children[0];
-          }
-        }
-      });
-
-      // Change door handle position
-      if (doorHandle && phLeft && phRight) {
-        // Remove handles for re-addition
-        if (phLeft.children.length) {
-          phLeft.remove(doorHandle);
-        }
-        if (phRight.children.length) {
-          phRight.remove(doorHandle);
-        }
-        switch (doorRegResult[1]) {
-          case undefined: // Single door cabinet
-          case 'R':
-            // Right side door
-            (flip ? phRight : phLeft).add(doorHandle);
-            break;
-          case 'L':
-            // Left side door
-            (flip ? phLeft : phRight).add(doorHandle);
-            break;
-        }
-      } else {
-        console.error('door_handle or ph_left or ph_right is null.');
-      }
-    }
-  });
-}
-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 sBounding = item3D.children[0].userData;
-  var width = sBounding.max.x - sBounding.min.x;
-  var height = sBounding.max.y - sBounding.min.y;
-  var depth = sBounding.max.z - sBounding.min.z;
-  var warnBoxGeom = new Three.BoxGeometry(width, height, depth);
-  var warnBoxObj = new Three.Mesh(warnBoxGeom, new Three.MeshBasicMaterial({
-    color: 0xff2200,
-    opacity: 0.8,
-    transparent: true,
-    blending: Three.MultiplyBlending
-  }));
-  var box = new Three.BoxHelper(warnBoxObj, 0x000000);
-  box.material.linewidth = 2;
-  box.material.depthTest = false;
-  box.renderOrder = 200;
-  warnBoxObj.add(box);
-  warnBoxObj.position.set(item3D.position.x, altitudeLength + item3D.position.y + height / 2, item3D.position.z);
-  warnBoxObj.rotation.set(item3D.rotation.x, item3D.rotation.y, item3D.rotation.z);
-  warnBoxObj.name = 'WarningBox' + itemId;
-  // planData.plan.add(warnBoxObj);
-}
-export function checkCabinetOverlap(itemPos, itemRect, holeItems, planData) {
-  if (holeItems.length) {
-    var depth = itemRect.size.depth;
-    var i;
-    for (i = 0; i < holeItems.length; i++) {
-      var hole = holeItems[i];
-      var holeAlti = hole.altitude;
-      if (holeAlti >= depth) continue;
-      if (Math.abs(Math.sin(itemRect.rotRad)) === 1) {
-        if (itemPos.y + itemRect.size.width / 2 >= hole.y - hole.width / 2 && itemPos.y - itemRect.size.width / 2 <= hole.y + hole.width / 2 && (itemRect.rotRad == 0 || itemRect.rotRad == -Math.PI / 2 ? itemPos.x <= hole.x && itemPos.x + itemRect.size.height >= hole.x : itemPos.x >= hole.x && itemPos.x - itemRect.size.height <= hole.x)) break;
-      } else {
-        if (itemPos.x + itemRect.size.width / 2 >= hole.x - hole.width / 2 && itemPos.x - itemRect.size.width / 2 <= hole.x + hole.width / 2 && (itemRect.rotRad == 0 || itemRect.rotRad == -Math.PI / 2 ? itemPos.y <= hole.y && itemPos.y + itemRect.size.height >= hole.y : itemPos.y >= hole.y && itemPos.y - itemRect.size.height <= hole.y)) break;
-      }
-    }
-    if (i != holeItems.length) {
-      var altitude = itemRect.itemInfo.properties.get('altitude').get('_length');
-      var altitudeUnit = itemRect.itemInfo.properties.get('altitude').get('_unit') || 'cm';
-      altitude = convert(altitude).from(altitudeUnit).to('cm');
-      addWarningBox(itemRect.itemInfo.id, altitude, planData);
-    }
-  }
-}