kitchen-simulator 2.0.0 → 2.0.1-test.1

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

@@ -0,0 +1,3617 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 _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 _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; }
+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; }
+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 "../../utils/convert-units-lite";
+import { verticesDistance } from "../../utils/geometry";
+import * as GeomUtils from "../../catalog/utils/geom-utils";
+import { loadTexture } from "../../catalog/utils/item-loader";
+import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
+import { animateDoor, isElevationView, isEmpty, replaceMeshesWithLineSegments, translateDrawer } from "../../utils/helper";
+import { 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]]);
+      if (isEmpty(item)) break;
+      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
+              if (document.getElementById('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 () {
+      if (document.getElementById('setting_dialog')) {
+        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 () {
+      if (document.getElementById('setting_dialog')) {
+        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;
+    if (document.getElementById('setting_dialog')) {
+      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
+      if (document.getElementById('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 () {
+      if (document.getElementById('setting_dialog')) {
+        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) {
+  if (document.getElementById('setting_dialog')) {
+    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);
+    }
+  }
+}