kitchen-simulator 2.0.0 → 2.0.1

package/es/class/item.js

@@ -0,0 +1,1845 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 { convert } from "../utils/convert-units-lite";
+import { Group, Hole, Layer } from "./export";
+import { GeometryUtils, IDBroker, MoldingUtils, NameGenerator } from "../utils/export";
+import { fromJS, Map } from 'immutable';
+import { INSTALLATION_SUFFIX_TYPE, MODE_DRAGGING_ITEM, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM, MODE_ROTATING_ITEM_3D, MOLDING_LOCATIONS } from "../constants";
+import { debugUtil } from "../utils/helper";
+import { isUndefined } from 'util';
+import { hasMoldingLayout } from "../utils/molding";
+import { getInstallationSuffix } from "../components/viewer2d/utils";
+var allItemRect;
+var allItemSnap;
+var allLines;
+var allLineRects;
+var allLineSnap;
+var allRect;
+var time1;
+var time2;
+var Item = /*#__PURE__*/function () {
+  function Item() {
+    _classCallCheck(this, Item);
+  }
+  return _createClass(Item, null, [{
+    key: "create",
+    value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
+      var molding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : [];
+      var itemID = IDBroker.acquireID();
+      var item = state.catalog.factoryElement(type, {
+        id: itemID,
+        itemID: state.catalog.getIn(['elements', type, 'itemID']),
+        name: NameGenerator.generateName('items', state.catalog.getIn(['elements', type, 'info', 'title'])),
+        sku_number: state.catalog.getIn(['elements', type, 'obj']).toJS().sku_number,
+        //style: state.catalog.getIn(['elements', type, 'info', 'door']),
+        category: state.catalog.getIn(['elements', type, 'type']),
+        layoutpos: state.catalog.getIn(['elements', type, 'info', 'layoutpos']),
+        cabinet_category: state.catalog.getIn(['elements', type, 'obj']).toJS().cabinet_category,
+        type: type,
+        height: height,
+        width: width,
+        x: x,
+        y: y,
+        rotation: rotation,
+        isDuplication: isDuplication
+      }, null, state);
+      if (item.category === 'cabinet') {
+        var _state$doorStyle;
+        var layer = state.getIn(['scene', 'layers', layerID]);
+        var temp = layer.doorStyle || ((_state$doorStyle = state.doorStyle) === null || _state$doorStyle === void 0 ? void 0 : _state$doorStyle.toJS());
+        var cds = state.catalog.getIn(['elements', type, 'cds']);
+        if (cds) {
+          var updatedDoorStyles = _objectSpread(_objectSpread({}, temp.doorStyles), {}, {
+            cds: [cds]
+          });
+          item = item.merge({
+            doorStyle: fromJS(_objectSpread(_objectSpread({}, temp), {}, {
+              doorStyles: updatedDoorStyles
+            }))
+          });
+        }
+      }
+      if (item.get('type') === 'cabinet' && item.get('doorStyle').size === 0) {
+        return {
+          updatedState: state,
+          item: null
+        };
+      }
+      var setSizeOfItemByDoorStyle = function setSizeOfItemByDoorStyle() {
+        var doorStyle = item.get('doorStyle').toJS();
+        var euroCDS = state.catalog.getIn(['elements', type, 'customer_property']).is_euro_cds;
+        if (doorStyle.door_style_name === 'Euro & Frameless' && euroCDS.length > 0) {
+          var newProperties = item.get('properties').toJS();
+          if (newProperties.hasOwnProperty('depth')) {
+            if (!newProperties.hasOwnProperty('oldDepth')) {
+              newProperties['oldDepth'] = new Map({
+                length: newProperties.depth.length,
+                _length: newProperties.depth._length,
+                _unit: newProperties.depth._unit
+              });
+            }
+            newProperties['depth'] = new Map({
+              length: convert(euroCDS[0].euro_length).from('in').to('cm'),
+              _length: euroCDS[0].euro_length,
+              _unit: 'in'
+            });
+          }
+          if (newProperties.hasOwnProperty('height')) {
+            if (!newProperties.hasOwnProperty('oldHeight')) {
+              newProperties['oldHeight'] = new Map({
+                length: newProperties.height.length,
+                _length: newProperties.height._length,
+                _unit: newProperties.height._unit
+              });
+            }
+            newProperties['height'] = new Map({
+              length: convert(euroCDS[0].euro_height).from('in').to('cm'),
+              _length: euroCDS[0].euro_height,
+              _unit: 'in'
+            });
+          }
+          if (newProperties.hasOwnProperty('width')) {
+            if (!newProperties.hasOwnProperty('oldWidth')) {
+              newProperties['oldWidth'] = new Map({
+                length: newProperties.width.length,
+                _length: newProperties.width._length,
+                _unit: newProperties.width._unit
+              });
+            }
+            newProperties['width'] = new Map({
+              length: convert(euroCDS[0].euro_width).from('in').to('cm') - 10,
+              _length: euroCDS[0].euro_width,
+              _unit: 'in'
+            });
+          }
+          item = item.merge({
+            properties: fromJS(newProperties)
+          });
+        } else {
+          var properties = item.get('properties').toJS();
+          if (properties.hasOwnProperty('oldDepth')) {
+            properties['depth'] = new Map({
+              length: properties.oldDepth.length,
+              _length: properties.oldDepth._length,
+              _unit: properties.oldDepth._unit
+            });
+          }
+          if (properties.hasOwnProperty('oldHeight')) {
+            properties['height'] = new Map({
+              length: properties.oldHeight.length,
+              _length: properties.oldHeight._length,
+              _unit: properties.oldHeight._unit
+            });
+          }
+          if (properties.hasOwnProperty('oldWidth')) {
+            properties['width'] = new Map({
+              length: properties.oldWidth.length,
+              _length: properties.oldWidth._length,
+              _unit: properties.oldWidth._unit
+            });
+          }
+          item = item.merge({
+            properties: fromJS(properties)
+          });
+        }
+      };
+      item.category === 'cabinet' && setSizeOfItemByDoorStyle();
+      item = this.updateDoorHandle(item, state.getIn(['scene', 'layers', layerID]));
+      state = state.setIn(['scene', 'layers', layerID, 'items', itemID], item);
+      if (item.type.includes('Light')) {
+        var ceilHeight = state.getIn(['scene', 'layers', layerID, 'ceilHeight']);
+        var ceilUnit = state.getIn(['scene', 'layers', layerID, 'unit']);
+        ceilHeight = convert(ceilHeight).from(ceilUnit).to('cm');
+        var newAltitude = ceilHeight - item.properties.getIn(['height', 'length']);
+        newAltitude = convert(newAltitude).from('cm').to(ceilUnit);
+        item = item.setIn(['properties', 'altitude', '_length'], newAltitude);
+        state = state.setIn(['scene', 'layers', layerID, 'items', item.id], item);
+      }
+      if (item.category === 'cabinet') {
+        // If create a copied object, copied object has original object's molding property.And if create a object, it has a layer's molding property.
+        var layerMolding = state.getIn(['scene', 'layers', layerID, 'molding']).filter(function (md) {
+          return hasMoldingLayout(md, item.layoutpos);
+        });
+        state = state.setIn(['scene', 'layers', layerID, 'items', itemID, 'molding'], layerMolding.length ? layerMolding : molding);
+      }
+      return {
+        updatedState: state,
+        item: item
+      };
+    }
+  }, {
+    key: "updateDoorHandle",
+    value: function updateDoorHandle(item, layer) {
+      var doorHandle = layer.get('doorHandle');
+      if (doorHandle == '') return item;
+      var dataJSON = item.toJS();
+      var itemID = dataJSON.id;
+      var doorStyle = dataJSON.doorStyle;
+      var tmpDS = _objectSpread(_objectSpread({}, doorStyle), {}, {
+        handle_gltf: doorHandle,
+        metalness: 0.2,
+        roughness: 0.1
+      });
+      var cnt = 0;
+      for (var prop in doorStyle.doorStyles) cnt++;
+      if (cnt !== 0) {
+        for (var i = 1; i < 10; i++) {
+          tmpDS['doorStyles']['door_handle_' + i + '_gltf'] = doorHandle;
+          tmpDS['doorStyles']['fixed_drawer_door_handle_' + i + '_gltf'] = doorHandle;
+          tmpDS['doorStyles']['drawer_door_handle_' + i + '_gltf'] = doorHandle;
+        }
+      }
+      item = item.mergeIn(['doorStyle'], fromJS(tmpDS));
+      return item;
+    }
+  }, {
+    key: "select",
+    value: function select(state, layerID, itemID) {
+      state = Layer.select(state, layerID).updatedState;
+      state = Layer.selectElement(state, layerID, 'items', itemID).updatedState;
+      state = state.merge({
+        replacingSupport: new Map({
+          layerID: layerID,
+          itemID: itemID
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "selectHole",
+    value: function selectHole(state, layerID, holeID) {
+      state = Layer.select(state, layerID).updatedState;
+      state = Layer.selectElement(state, layerID, 'holes', holeID).updatedState;
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "editWidth",
+    value: function editWidth(state, newWidth, layerID, itemID) {
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      var properties = item.properties;
+      if (newWidth === 0) {
+        alert('You can not set width to 0');
+        return {
+          updatedState: state
+        };
+      }
+      var width = new Map({
+        _length: newWidth,
+        _unit: 'in',
+        length: convert(newWidth).from('in').to('cm')
+      });
+      properties = properties.set('width', width);
+      state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties'], properties);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "prepareSnap",
+    value: function prepareSnap(state, layerID) {
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var scene = state.get('scene');
+      var catalog = state.catalog.toJS();
+      allLines = GeometryUtils.getAllLines(layer);
+      allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
+      allItemRect = GeometryUtils.getAllItems(scene, catalog, allLineRects);
+      allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
+      allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
+      allRect = allItemRect.others.concat(allLineRects);
+      allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
+      allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
+    }
+  }, {
+    key: "duplicateSelected",
+    value: function duplicateSelected(state, currentObject) {
+      var layerID = state.getIn(['scene', 'selectedLayer']);
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var objectID = currentObject.id;
+      var myObject;
+      var x = currentObject.x;
+      var y = currentObject.y;
+      var sceneComponentType, width, depth, rotRad;
+      switch (currentObject.prototype) {
+        case 'items':
+          myObject = state.getIn(['scene', 'layers', layerID, 'items', objectID]);
+          sceneComponentType = myObject.type;
+          width = myObject.properties.getIn(['width', 'length']);
+          depth = myObject.properties.getIn(['depth', 'length']);
+          rotRad = myObject.rotation * Math.PI / 180;
+          this.prepareSnap(state, layerID);
+          var val = {
+            pos: {
+              x: x + width * Math.cos(rotRad),
+              y: y + width * Math.sin(rotRad)
+            },
+            rotRad: rotRad
+          };
+          val.size = allItemRect.cur.size;
+          val.layoutpos = allItemRect.cur.layoutpos;
+          val.is_corner = allItemRect.cur.is_corner;
+          var isrectSect = GeometryUtils.validInterSect(allRect, val);
+          if (isrectSect) {
+            // Duplicated object has a original object's molding property
+            var _this$create = this.create(state, layerID, sceneComponentType, x + width * Math.cos(rotRad), y + width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
+              stateI = _this$create.updatedState,
+              item = _this$create.item;
+            if (item === null) {
+              alert('There are no Door Colors in this cabinet.');
+              state = state.merge({
+                mode: MODE_IDLE,
+                drawingSupport: new Map()
+              });
+            } else {
+              state = Item.select(stateI, layerID, item.id).updatedState;
+              state = state.setIn(['drawingSupport', 'currentID'], item.id);
+            }
+          } else {
+            var _val = {
+              pos: {
+                x: x - width * Math.cos(rotRad),
+                y: y - width * Math.sin(rotRad)
+              },
+              rotRad: rotRad
+            };
+            _val.size = allItemRect.cur.size;
+            _val.layoutpos = allItemRect.cur.layoutpos;
+            _val.is_corner = allItemRect.cur.is_corner;
+            var isRect = GeometryUtils.validInterSect(allRect, _val);
+            if (isRect) {
+              var _this$create2 = this.create(state, layerID, sceneComponentType, x - width * Math.cos(rotRad), y - width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
+                _stateI = _this$create2.updatedState,
+                _item = _this$create2.item;
+              if (_item === null) {
+                alert('There are no Door Colors in this cabinet.');
+                state = state.merge({
+                  mode: MODE_IDLE,
+                  drawingSupport: new Map()
+                });
+              } else {
+                state = Item.select(_stateI, layerID, _item.id).updatedState;
+                state = state.setIn(['drawingSupport', 'currentID'], _item.id);
+              }
+            } else {
+              var _val2 = {
+                pos: {
+                  x: x - depth * Math.sin(rotRad),
+                  y: y - depth * Math.cos(rotRad)
+                },
+                rotRad: rotRad
+              };
+              _val2.size = allItemRect.cur.size;
+              _val2.layoutpos = allItemRect.cur.layoutpos;
+              _val2.is_corner = allItemRect.cur.is_corner;
+              var isRectDown = GeometryUtils.validInterSect(allRect, _val2);
+              if (isRectDown) {
+                var _this$create3 = this.create(state, layerID, sceneComponentType, x - depth * Math.sin(rotRad), y - depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
+                  _stateI2 = _this$create3.updatedState,
+                  _item2 = _this$create3.item;
+                if (_item2 === null) {
+                  alert('There are no Door Colors in this cabinet.');
+                  state = state.merge({
+                    mode: MODE_IDLE,
+                    drawingSupport: new Map()
+                  });
+                } else {
+                  state = Item.select(_stateI2, layerID, _item2.id).updatedState;
+                  state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
+                }
+              } else {
+                var _val3 = {
+                  pos: {
+                    x: x + depth * Math.sin(rotRad),
+                    y: y + depth * Math.cos(rotRad)
+                  },
+                  rotRad: rotRad
+                };
+                _val3.size = allItemRect.cur.size;
+                _val3.layoutpos = allItemRect.cur.layoutpos;
+                _val3.is_corner = allItemRect.cur.is_corner;
+                var isRectUp = GeometryUtils.validInterSect(allRect, _val3);
+                if (isRectUp) {
+                  var _this$create4 = this.create(state, layerID, sceneComponentType, x + depth * Math.sin(rotRad), y + depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
+                    _stateI3 = _this$create4.updatedState,
+                    _item3 = _this$create4.item;
+                  if (_item3 === null) {
+                    alert('There are no Door Colors in this cabinet.');
+                    state = state.merge({
+                      mode: MODE_IDLE,
+                      drawingSupport: new Map()
+                    });
+                  } else {
+                    state = Item.select(_stateI3, layerID, _item3.id).updatedState;
+                    state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
+                  }
+                } else {
+                  console.log('there is no space');
+                  alert('No more space!');
+                }
+              }
+            }
+          }
+          break;
+        case 'holes':
+          this.prepareSnap(state, layerID);
+          myObject = state.getIn(['scene', 'layers', layerID, 'holes', objectID]);
+          var line = state.getIn(['scene', 'layers', layerID, 'lines', myObject.line]);
+          sceneComponentType = myObject.type;
+          width = myObject.get('properties').get('width').get('length');
+          var myOffset = myObject.offset;
+          var v0 = layer.getIn(['vertices', line.vertices.get(0)]);
+          var v1 = layer.getIn(['vertices', line.vertices.get(1)]);
+          var lineLength = GeometryUtils.pointsDistance(v0.x, v0.y, v1.x, v1.y);
+          var delta = width / 2 / lineLength + 0.00001;
+          var allHoles = state.getIn(['scene', 'layers', layerID, 'holes']);
+          var rightAble = true;
+          var leftAble = true;
+          if (myOffset + 3 * delta > 1) rightAble = false;else if (myOffset - 3 * delta < 0) leftAble = false;
+          if (allHoles.size === 0) {
+            var _this$createHole = this.createHole(state, layerID, sceneComponentType, myObject.line, myOffset + delta * 2, myObject.get('properties')),
+              stateH = _this$createHole.updatedState,
+              hole = _this$createHole.hole;
+            state = this.selectHole(stateH, layerID, hole.id).updatedState;
+            state = state.setIn(['drawingSupport', 'currentID'], hole.id);
+          } else {
+            allHoles.forEach(function (hole) {
+              if (hole.line === line.id) if (!hole.selected) {
+                var newDelta = hole.get('properties').get('width').get('length') / 2 / lineLength;
+                if (myOffset < hole.offset) {
+                  if (myOffset + delta * 3 > hole.offset - newDelta) {
+                    rightAble = false;
+                  }
+                } else {
+                  if (myOffset - delta * 3 < hole.offset + newDelta) {
+                    leftAble = false;
+                  }
+                }
+              }
+            });
+          }
+          if (rightAble) {
+            var _this$createHole2 = this.createHole(state, layerID, sceneComponentType, myObject.line, myOffset + delta * 2, myObject.get('properties')),
+              _stateH = _this$createHole2.updatedState,
+              _hole = _this$createHole2.hole;
+            state = this.selectHole(_stateH, layerID, _hole.id).updatedState;
+            state = state.setIn(['drawingSupport', 'currentID'], _hole.id);
+          } else {
+            if (leftAble) {
+              var _this$createHole3 = this.createHole(state, layerID, sceneComponentType, myObject.line, myOffset - delta * 2, myObject.get('properties')),
+                _stateH2 = _this$createHole3.updatedState,
+                _hole2 = _this$createHole3.hole;
+              state = this.selectHole(_stateH2, layerID, _hole2.id).updatedState;
+              state = state.setIn(['drawingSupport', 'currentID'], _hole2.id);
+            } else alert('No more space');
+          }
+          break;
+        case 'lines':
+          alert('Duplicating lines is not currently supported yet.');
+          break;
+        default:
+          break;
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "storeDistArray",
+    value: function storeDistArray(state, layerID, itemID, distArray) {
+      var curDistArray = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'distArray']);
+      var isEqualDist = function isEqualDist(a, b) {
+        return a == b;
+      };
+      if (curDistArray) {
+        var equal = curDistArray.every(function (curElement, index) {
+          return isEqualDist(curElement[0], distArray[index][0]);
+        });
+        if (!equal) {
+          state = state.setIn(['scene', 'layers', layerID, 'items', itemID, 'distArray'], distArray);
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "validateItemPositions",
+    value: function validateItemPositions(state, layerID) {
+      var _this = this;
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      function isItemInRect(item) {
+        var _state$getIn = state.getIn(['scene']),
+          width = _state$getIn.width,
+          height = _state$getIn.height;
+        return item.x >= 0 && item.x <= width && item.y >= 0 && item.y <= height;
+      }
+      layer.items.forEach(function (item) {
+        if (!isItemInRect(item)) state = _this.remove(state, layerID, item.id).updatedState;
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "remove",
+    value: function remove(state, layerID, itemID) {
+      state = this.unselect(state, layerID, itemID).updatedState;
+      state = Layer.removeElement(state, layerID, 'items', itemID).updatedState;
+      state.getIn(['scene', 'groups']).forEach(function (group) {
+        return state = Group.removeElement(state, group.id, layerID, 'items', itemID).updatedState;
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "replaceItem",
+    value: function replaceItem(state, selectedPos, currentObject, selectedObject) {
+      state = this.remove(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
+      state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false).updatedState;
+      // state = this.select(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "unselect",
+    value: function unselect(state, layerID, itemID) {
+      state = Layer.unselect(state, layerID, 'items', itemID).updatedState;
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "selectToolDrawingItem",
+    value: function selectToolDrawingItem(state, sceneComponentType) {
+      state = state.merge({
+        mode: MODE_DRAWING_ITEM,
+        drawingSupport: new Map({
+          type: sceneComponentType
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "selectToolDrawingItem3D",
+    value: function selectToolDrawingItem3D(state, sceneComponentType) {
+      state = state.merge({
+        mode: MODE_DRAWING_ITEM_3D,
+        drawingSupport: new Map({
+          type: sceneComponentType
+        })
+      });
+      state = state.mergeIn(['scene', 'loadFlag'], false);
+
+      // place the item at random position
+      var layerID = state.scene.get('selectedLayer');
+      state = this.updateDrawingItem(state, layerID, 0, 0).updatedState;
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endCreatingCabinet",
+    value: function endCreatingCabinet(state) {
+      state = state.merge({
+        isOpen: false,
+        openedType: 0
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updatePopupOpen",
+    value: function updatePopupOpen(state, value) {
+      state = state.merge({
+        openedType: value
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDrawingItem",
+    value: function updateDrawingItem(state, layerID, x, y) {
+      if (state.hasIn(['drawingSupport', 'currentID'])) {
+        var mode = state.get('mode');
+        if ([MODE_DRAWING_ITEM_3D].includes(mode)) {
+          state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
+            return item && item.merge({
+              x: x,
+              y: y
+            });
+          });
+          state = state.merge({
+            mode: MODE_IDLE_3D
+          });
+        }
+        if ([MODE_DRAWING_ITEM].includes(mode)) {
+          state = state.merge({
+            mode: MODE_IDLE
+          });
+          state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
+            return item && item.merge({
+              x: x,
+              y: y
+            });
+          });
+        }
+      } else {
+        var _this$create5 = this.create(state, layerID, state.getIn(['drawingSupport', 'type']), x, y, 200, 100, 0, false),
+          stateI = _this$create5.updatedState,
+          item = _this$create5.item;
+        if (item === null) {
+          alert('There are no Door Colors in this cabinet.');
+          state = state.merge({
+            mode: MODE_IDLE,
+            drawingSupport: new Map()
+          });
+        } else {
+          state = Item.select(stateI, layerID, item.id).updatedState;
+          state = state.setIn(['drawingSupport', 'currentID'], item.id);
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingItemChanged",
+    value: function updateDraggingItemChanged(state, x, y, layerID, itemID) {
+      var _state = state,
+        scene = _state.scene;
+      // let originalX = draggingSupport.get('originalX');
+      // let originalY = draggingSupport.get('originalY');
+
+      // let diffX = x;
+      // let diffY = y;
+
+      var item = scene.getIn(['layers', layerID, 'items', itemID]);
+      // let tX = originalX - diffX;
+      // let tY = originalY - diffY;
+      // tX = tX > 500 ? 500 : tX < 0 ? 0 : tX;
+      // tY = tY > 500 ? 500 : tY < 0 ? 0 : tY;
+      item = item.merge({
+        x: x,
+        y: y
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      time2 = debugUtil();
+      false && console.log('FPS:', Math.round(1000 / (time2 - time1)), ' Delta Time:', (time2 - time1) / 1000, '(s)');
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endDrawingItem",
+    value: function endDrawingItem(state, layerID, x, y) {
+      var catalog = state.catalog;
+      state = this.updateDrawingItem(state, layerID, x, y, catalog).updatedState;
+      state = Layer.unselectAll(state, layerID).updatedState;
+      var popup = state.get('popup');
+      state = state.merge({
+        drawingSupport: Map({
+          type: state.drawingSupport.get('type')
+        }),
+        isOpen: !popup
+      });
+      state = Layer.unselectAll(state, layerID).updatedState;
+      this.updateMolding(state);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginDraggingItem",
+    value: function beginDraggingItem(state, layerID, itemID, x, y) {
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      time1 = debugUtil();
+      if (isUndefined(item)) return;
+      state = state.merge({
+        mode: MODE_DRAGGING_ITEM,
+        draggingSupport: Map({
+          layerID: layerID,
+          itemID: itemID,
+          startPointX: x,
+          startPointY: y,
+          originalX: item.x,
+          originalY: item.y
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginDraggingItem3D",
+    value: function beginDraggingItem3D(state, layerID, itemID, x, y) {
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      state = state.setIn(['scene', 'isEndDragging'], false);
+      if (isUndefined(item)) return {
+        updatedState: state
+      };
+      state = state.merge({
+        mode: MODE_DRAGGING_ITEM_3D,
+        draggingSupport: Map({
+          layerID: layerID,
+          itemID: itemID,
+          startPointX: x,
+          startPointY: y,
+          originalX: item.x,
+          originalY: item.y
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingItem",
+    value: function updateDraggingItem(state, x, y) {
+      var _state2 = state,
+        draggingSupport = _state2.draggingSupport,
+        scene = _state2.scene;
+      var layerID = draggingSupport.get('layerID');
+      var itemID = draggingSupport.get('itemID');
+      var startPointX = draggingSupport.get('startPointX');
+      var startPointY = draggingSupport.get('startPointY');
+      var originalX = draggingSupport.get('originalX');
+      var originalY = draggingSupport.get('originalY');
+      var diffX = startPointX - x;
+      var diffY = startPointY - y;
+      var item = scene.getIn(['layers', layerID, 'items', itemID]);
+      if (isUndefined(item)) return {
+        updatedState: state
+      };
+      var tX = originalX - diffX;
+      var tY = originalY - diffY;
+      tX = tX > scene.width ? scene.width : tX < 0 ? 0 : tX;
+      tY = tY > scene.height ? scene.height : tY < 0 ? 0 : tY;
+      item = item.merge({
+        x: tX,
+        y: tY
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingItem3DX",
+    value: function updateDraggingItem3DX(state, x) {
+      var _state3 = state,
+        draggingSupport = _state3.draggingSupport,
+        scene = _state3.scene;
+      var layerID = draggingSupport.get('layerID');
+      var itemID = draggingSupport.get('itemID');
+      var startPointX = draggingSupport.get('startPointX');
+      var originalX = draggingSupport.get('originalX');
+      var diffX = startPointX - x;
+      var item = scene.getIn(['layers', layerID, 'items', itemID]);
+      item = item.merge({
+        x: originalX - diffX
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingItem3DY",
+    value: function updateDraggingItem3DY(state, y) {
+      var _state4 = state,
+        draggingSupport = _state4.draggingSupport,
+        scene = _state4.scene;
+      var layerID = draggingSupport.get('layerID');
+      var itemID = draggingSupport.get('itemID');
+      var startPointY = draggingSupport.get('startPointY');
+      var originalY = draggingSupport.get('originalY');
+      var diffY = startPointY - y;
+      var item = scene.getIn(['layers', layerID, 'items', itemID]);
+      item = item.merge({
+        y: originalY - diffY
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endDraggingItem",
+    value: function endDraggingItem(state, x, y) {
+      state = this.updateDraggingItem(state, x, y).updatedState;
+      state = state.merge({
+        mode: MODE_IDLE
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endDraggingItem3D",
+    value: function endDraggingItem3D(state) {
+      // state = this.updateDraggingItem(state, x, y).updatedState;
+      state = state.merge({
+        mode: MODE_IDLE_3D
+      });
+      state = state.setIn(['scene', 'isEndDragging'], true);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginRotatingItem",
+    value: function beginRotatingItem(state, layerID, itemID, x, y) {
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      var originRotation = item.get('rotation');
+      state = state.merge({
+        mode: MODE_ROTATING_ITEM,
+        rotatingSupport: Map({
+          layerID: layerID,
+          itemID: itemID,
+          x: x,
+          y: y,
+          originRotation: originRotation
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginRotatingItem3D",
+    value: function beginRotatingItem3D(state, layerID, itemID, x, y) {
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      var originRotation = item.get('rotation');
+      state = state.merge({
+        mode: MODE_ROTATING_ITEM_3D,
+        rotatingSupport: Map({
+          layerID: layerID,
+          itemID: itemID,
+          x: x,
+          y: y,
+          originRotation: originRotation
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateRotatingItem",
+    value: function updateRotatingItem(state, x, y) {
+      var _state5 = state,
+        rotatingSupport = _state5.rotatingSupport,
+        scene = _state5.scene;
+      var layerID = rotatingSupport.get('layerID');
+      var itemID = rotatingSupport.get('itemID');
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      var origin = {
+        x: rotatingSupport.get('x'),
+        y: rotatingSupport.get('y'),
+        originRotation: rotatingSupport.get('originRotation')
+      };
+      var newRot = Math.atan2(origin.y - item.y, origin.x - item.x) * 180 / Math.PI + 90;
+      var deltaRot = newRot - origin.originRotation;
+      var deltaX = x - item.x;
+      var deltaY = y - item.y;
+      var rotation = Math.atan2(deltaY, deltaX) * 180 / Math.PI + 90;
+      rotation -= deltaRot;
+      if (-5 < rotation && rotation < 5) rotation = 0;
+      if (-95 < rotation && rotation < -85) rotation = -90;
+      if (-185 < rotation && rotation < -175) rotation = -180;
+      if (85 < rotation && rotation < 95) rotation = 90;
+      if (-270 < rotation && rotation < -265) rotation = 90;
+      if (175 < rotation && rotation < 185) rotation = 180;
+      if (265 < rotation && rotation < 275) rotation = -90;
+      item = item.merge({
+        rotation: rotation
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateRotatingItemChanged",
+    value: function updateRotatingItemChanged(state, rotation, layerID, itemID) {
+      var scene = state.scene;
+
+      // let originalX = draggingSupport.get('originalX');
+      // let originalY = draggingSupport.get('originalY');
+
+      // let diffX = x;
+      // let diffY = y;
+
+      var item = scene.getIn(['layers', layerID, 'items', itemID]);
+      // let tX = originalX - diffX;
+      // let tY = originalY - diffY;
+      // tX = tX > 500 ? 500 : tX < 0 ? 0 : tX;
+      // tY = tY > 500 ? 500 : tY < 0 ? 0 : tY;
+      item = item.merge({
+        rotation: rotation
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endRotatingItem",
+    value: function endRotatingItem(state, x, y) {
+      //state = this.updateRotatingItem(state, x, y).updatedState;
+      state = state.merge({
+        mode: MODE_IDLE
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endRotatingItem3D",
+    value: function endRotatingItem3D(state, x, y) {
+      state = this.updateRotatingItem(state, x, y).updatedState;
+      state = state.merge({
+        mode: MODE_IDLE_3D
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "replaceSubmodule",
+    value: function replaceSubmodule(state, url) {
+      var _state6 = state,
+        replacingSupport = _state6.replacingSupport,
+        scene = _state6.scene;
+      url = 'catalog/texture.png';
+      var urlData = url.split('/');
+      var newURL = '';
+      var addURL = false;
+      for (var i = 0; i < urlData.length; i++) {
+        if (urlData[i] == '') {
+          continue;
+        }
+        newURL += '/' + urlData[i];
+      }
+      var layerID = replacingSupport.get('layerID');
+      var itemID = replacingSupport.get('itemID');
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      var submodule = [];
+      var normalMap = [];
+      for (var _i = 0; _i < item.submodule.size; _i++) submodule.push(item.submodule.get(_i));
+      for (var _i2 = 0; _i2 < item.normalMap.size; _i2++) normalMap.push(item.normalMap.get(_i2));
+      //let submodule = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'submodule']);
+      urlData = newURL.split('/');
+      var flag = false;
+      if (urlData[urlData.length - 1].includes('.gltf')) {
+        for (var _i3 = 0; _i3 < submodule.length; _i3++) {
+          var pathData = submodule[_i3].split('/');
+          if (pathData[pathData.length - 2] === urlData[urlData.length - 2]) {
+            submodule[_i3] = newURL;
+            flag = true;
+          }
+        }
+        if (!flag) submodule.push(newURL);
+        item = item.merge({
+          submodule: submodule
+        });
+      } else {
+        for (var _i4 = 0; _i4 < normalMap.length; _i4++) {
+          var _pathData = normalMap[_i4].split('/');
+          if (_pathData[_pathData.length - 2] === urlData[urlData.length - 2]) {
+            normalMap[_i4] = newURL;
+            flag = true;
+          }
+        }
+        if (!flag) normalMap.push(newURL);
+        item = item.merge({
+          normalMap: normalMap
+        });
+      }
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+      });
+      state = state.merge({
+        mode: MODE_IDLE_3D
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setProperties",
+    value: function setProperties(state, layerID, itemID, properties) {
+      state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties'], properties);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setJsProperties",
+    value: function setJsProperties(state, layerID, itemID, properties) {
+      return this.setProperties(state, layerID, itemID, fromJS(properties));
+    }
+  }, {
+    key: "updateProperties",
+    value: function updateProperties(state, layerID, itemID, properties) {
+      properties.forEach(function (v, k) {
+        if (state.hasIn(['scene', 'layers', layerID, 'items', itemID, 'properties', k])) state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties', k], v);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateJsProperties",
+    value: function updateJsProperties(state, layerID, itemID, properties) {
+      return this.updateProperties(state, layerID, itemID, fromJS(properties));
+    }
+  }, {
+    key: "setAttributes",
+    value: function setAttributes(state, layerID, itemID, itemAttributes) {
+      state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID], itemAttributes);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setJsAttributes",
+    value: function setJsAttributes(state, layerID, itemID, itemAttributes) {
+      itemAttributes = fromJS(itemAttributes);
+      return this.setAttributes(state, layerID, itemID, itemAttributes);
+    }
+  }, {
+    key: "animateObject",
+    value: function animateObject(state, value) {
+      var _state7 = state,
+        replacingSupport = _state7.replacingSupport,
+        scene = _state7.scene;
+      var layerID = replacingSupport.get('layerID');
+      var itemID = replacingSupport.get('itemID');
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      if (item !== undefined) {
+        var animCount = item.get('animate');
+        item = item.merge({
+          animValue: value,
+          animate: animCount + 1
+        });
+        state = state.merge({
+          scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+        });
+        state = state.merge({
+          mode: MODE_IDLE_3D
+        });
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "removeReplacingSupport",
+    value: function removeReplacingSupport(state) {
+      state = state.merge({
+        replacingSupport: new Map()
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setInitialDoorStyle",
+    value: function setInitialDoorStyle(state, doorStyle) {
+      state = state.merge({
+        doorStyle: doorStyle
+      });
+      var _state8 = state,
+        scene = _state8.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      var items = layers.items;
+      items.forEach(function (data) {
+        {
+          var itemID = data.id;
+          var tmpDS = _objectSpread(_objectSpread({}, data.doorStyle), {}, {
+            doorStyles: _objectSpread(_objectSpread({}, data.doorStyle.doorStyles), {}, {
+              counttop: doorStyle.doorStyles.counttop
+            })
+          });
+          data = data.mergeIn(['doorStyle'], fromJS(tmpDS));
+          layers = layers.mergeIn(['items', itemID], data);
+          state = state.merge({
+            scene: scene.mergeIn(['layers', layerID], layers)
+          });
+        }
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setDoorStyle",
+    value: function setDoorStyle(state, doorStyle, itemCDS, isAll) {
+      var _this2 = this;
+      var keys = Object.keys(doorStyle.doorStyles);
+      keys = keys.filter(function (elem) {
+        return !elem.endsWith('_gltf');
+      });
+      var tmp = {};
+      for (var x in keys) {
+        tmp[keys[x]] = doorStyle.doorStyles[keys[x]];
+      }
+      state = state.setIn(['scene', 'layers', state.scene.selectedLayer, 'doorStyle'], doorStyle);
+      state = state.merge({
+        doorStyle: doorStyle
+      });
+      var layerID = state.scene.get('selectedLayer');
+      var temp_layer_molding = state.scene.getIn(['layers', layerID, 'molding']);
+      temp_layer_molding = temp_layer_molding.filter(function (md) {
+        return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
+          return md.itemID === ds.itemID;
+        });
+      });
+      state = state.setIn(['scene', 'layers', layerID, 'molding'], temp_layer_molding);
+      var itemIDs = state.scene.layers.getIn([layerID, 'selected', 'items']).toJS();
+      var setDoorStyleOfItem = function setDoorStyleOfItem(data) {
+        var _cds$data;
+        if (data.category !== 'cabinet') return; //CDS should effect to cabinets
+        var itemID = data.id;
+        var curItem = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+        var layer = state.getIn(['scene', 'layers', layerID]);
+        var tmpMolding = _toConsumableArray(curItem.molding);
+        var temp_item_molding = _toConsumableArray(curItem.molding);
+        temp_item_molding = temp_item_molding.filter(function (md) {
+          return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
+            return ds.itemID === md.itemID;
+          });
+        });
+        tmpMolding.forEach(function (md) {
+          var itemGroup = MoldingUtils.getItemGroupFromMolding(layer, curItem, md);
+          itemGroup.forEach(function (it) {
+            state = state.setIn(['scene', 'layers', layerID, 'items', it.id, 'molding'], temp_item_molding);
+          });
+        });
+        var cds = itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.find(function (elem) {
+          return elem.itemID === data.itemID;
+        });
+        var euro_cds = (cds === null || cds === void 0 || (_cds$data = cds.data) === null || _cds$data === void 0 ? void 0 : _cds$data.filter(function (element) {
+          return element && element.is_euro_cds;
+        })) || [];
+        var cds_data = cds ? [cds] : [];
+        if (
+        // doorStyle.door_style_name === 'Euro & Frameless' &&
+        euro_cds.length > 0) {
+          var newProperties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
+          if (newProperties.hasOwnProperty('depth')) {
+            if (!newProperties.hasOwnProperty('oldDepth')) {
+              newProperties['oldDepth'] = new Map({
+                length: newProperties.depth.length,
+                _length: newProperties.depth._length,
+                _unit: newProperties.depth._unit
+              });
+            }
+            newProperties['depth'] = new Map({
+              length: convert(euro_cds[0].euro_length).from('in').to('cm'),
+              _length: euro_cds[0].euro_length,
+              _unit: 'in'
+            });
+          }
+          if (newProperties.hasOwnProperty('height')) {
+            if (!newProperties.hasOwnProperty('oldHeight')) {
+              newProperties['oldHeight'] = new Map({
+                length: newProperties.height.length,
+                _length: newProperties.height._length,
+                _unit: newProperties.height._unit
+              });
+            }
+            newProperties['height'] = new Map({
+              length: convert(euro_cds[0].euro_height).from('in').to('cm'),
+              _length: euro_cds[0].euro_height,
+              _unit: 'in'
+            });
+          }
+          if (newProperties.hasOwnProperty('width')) {
+            if (!newProperties.hasOwnProperty('oldWidth')) {
+              newProperties['oldWidth'] = new Map({
+                length: newProperties.width.length,
+                _length: newProperties.width._length,
+                _unit: newProperties.width._unit
+              });
+            }
+            newProperties['width'] = new Map({
+              length: convert(euro_cds[0].euro_width).from('in').to('cm') - 10,
+              _length: euro_cds[0].euro_width,
+              _unit: 'in'
+            });
+          }
+          state = _this2.setJsProperties(state, layerID, itemID, newProperties).updatedState;
+        } else {
+          var properties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
+          if (properties.hasOwnProperty('oldDepth')) {
+            properties['depth'] = new Map({
+              length: properties.oldDepth.length,
+              _length: properties.oldDepth._length,
+              _unit: properties.oldDepth._unit
+            });
+          }
+          if (properties.hasOwnProperty('oldHeight')) {
+            properties['height'] = new Map({
+              length: properties.oldHeight.length,
+              _length: properties.oldHeight._length,
+              _unit: properties.oldHeight._unit
+            });
+          }
+          if (properties.hasOwnProperty('oldWidth')) {
+            properties['width'] = new Map({
+              length: properties.oldWidth.length,
+              _length: properties.oldWidth._length,
+              _unit: properties.oldWidth._unit
+            });
+          }
+          state = _this2.setJsProperties(state, layerID, itemID, properties).updatedState;
+        }
+        var tmpDS = {
+          id: doorStyle.id,
+          brightness: doorStyle.brightness,
+          color: doorStyle.color,
+          glossness: doorStyle.glossness,
+          name: doorStyle.name,
+          door_style_name: doorStyle.door_style_name,
+          texture: doorStyle.texture,
+          thumbnail: doorStyle.thumbnail,
+          type: doorStyle.type,
+          sku: doorStyle.sku,
+          color_sku_alias: doorStyle.color_sku_alias,
+          // alias name of color_sku for the current dealer
+          install: getInstallationSuffix(INSTALLATION_SUFFIX_TYPE.NAME, doorStyle),
+          doorStyles: _objectSpread(_objectSpread({}, tmp), {}, {
+            cds: cds_data
+          })
+        };
+        state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'doorStyle'], fromJS(tmpDS));
+      };
+      if (isAll) {
+        var items = state.scene.layers.get(layerID).items;
+        items.forEach(setDoorStyleOfItem);
+      } else {
+        if (itemIDs.length > 0) {
+          var _loop = function _loop() {
+            var itemID = itemIDs[i];
+            var items = state.scene.layers.get(layerID).items;
+            items.forEach(function (data) {
+              if (itemID === data.id) {
+                setDoorStyleOfItem(data);
+              }
+            });
+          };
+          for (var i = 0; i < itemIDs.length; i++) {
+            _loop();
+          }
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "changeDistance",
+    value: function changeDistance(state, distancePayload) {
+      var _state9 = state,
+        scene = _state9.scene;
+      var Left = distancePayload.distanceLeft;
+      var Right = distancePayload.distanceRight;
+      var Back = distancePayload.distanceBack;
+      var Front = distancePayload.distanceFront;
+      var LeftRotRad = Left ? 180 : null;
+      var RightRotRad = Right ? 0 : null;
+      var BackRotRad = Back ? -90 : null;
+      var FrontRotRad = Front ? 90 : null;
+      var directR = LeftRotRad || RightRotRad || BackRotRad || FrontRotRad;
+      var dist = Left || Right || Back || Front;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID).toJS();
+      var selectedItemId = layer.selected.items[0];
+      var selectedItem = layer.items[selectedItemId];
+      if (selectedItem) {
+        var renderedR = selectedItem.rotation || 0;
+        var rotRad = (directR + renderedR) / 180 * Math.PI;
+        var newX = selectedItem.x + convert(dist * Math.cos(rotRad)).from('in').to('cm');
+        var newY = selectedItem.y + convert(dist * Math.sin(rotRad)).from('in').to('cm');
+        state = state.setIn(['scene', 'layers', layerID, 'items', layer.selected.items[0], 'x'], newX);
+        state = state.setIn(['scene', 'layers', layerID, 'items', layer.selected.items[0], 'y'], newY);
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setCounterTop",
+    value: function setCounterTop(state, counterTop) {
+      var _state0 = state,
+        scene = _state0.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      layers = layers.mergeIn(['counterTop'], counterTop);
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layers)
+      });
+      var items = layers.items;
+      items.forEach(function (data) {
+        {
+          var dataJSON = data.toJS();
+          var itemID = dataJSON.id;
+          var newCounter = dataJSON.counterTop;
+          newCounter = _objectSpread(_objectSpread({}, newCounter), counterTop);
+          data = data.mergeIn(['counterTop'], newCounter);
+          layers = layers.mergeIn(['items', itemID], data);
+          state = state.merge({
+            scene: scene.mergeIn(['layers', layerID], layers)
+          });
+        }
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setItemsDoorHandle",
+    value: function setItemsDoorHandle(state, scene, layer, layerID, elements_item) {
+      var _this3 = this;
+      elements_item.forEach(function (data) {
+        var itemID = data.id;
+        var item = _this3.updateDoorHandle(data, layer);
+        layer = layer.mergeIn(['items', itemID], item);
+        state = state.merge({
+          scene: scene.mergeIn(['layers', layerID], layer)
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setDoorHandle",
+    value: function setDoorHandle(state, doorHandle) {
+      var _state1 = state,
+        scene = _state1.scene;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID);
+      layer = layer.mergeIn(['doorHandle'], doorHandle);
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layer)
+      });
+      var items = layer.items;
+      var selectedItems = items.filter(function (element) {
+        return element.selected === true;
+      }); // find selected items (default 1 selected)
+
+      if (selectedItems.size === 0) {
+        state = this.setItemsDoorHandle(state, scene, layer, layerID, items).updatedState;
+      } else {
+        state = this.setItemsDoorHandle(state, scene, layer, layerID, selectedItems).updatedState;
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setHandleMaterial",
+    value: function setHandleMaterial(state, material) {
+      var _state10 = state,
+        scene = _state10.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      var items = layers.items;
+      items.forEach(function (data) {
+        var dataJSON = data.toJS();
+        var itemID = dataJSON.id;
+        var doorStyle = dataJSON.doorStyle;
+        var tmpDS = _objectSpread(_objectSpread({}, doorStyle), {}, {
+          metalness: material.metalness,
+          roughness: material.roughness
+        });
+        data = data.mergeIn(['doorStyle'], fromJS(tmpDS));
+        layers = layers.mergeIn(['items', itemID], data);
+        state = state.merge({
+          scene: scene.mergeIn(['layers', layerID], layers)
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setWallColor",
+    value: function setWallColor(state, wallColor) {
+      var _state11 = state,
+        scene = _state11.scene;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID);
+      layer = layer.merge({
+        wallColor: wallColor
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layer)
+      });
+      var lines = layer.lines;
+      lines.forEach(function (data) {
+        var dataJSON = data.toJS();
+        var lineID = dataJSON.id;
+        data = data.mergeIn(['wallColor'], wallColor);
+        layer = layer.mergeIn(['lines', lineID], data);
+        state = state.merge({
+          scene: scene.mergeIn(['layers', layerID], layer)
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setBacksplash",
+    value: function setBacksplash(state, backsplash) {
+      var _state12 = state,
+        scene = _state12.scene;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID);
+      var dataJSON = layer.toJS();
+      var newBack = dataJSON.backsplash;
+      var flag = true; // selected or not
+      // if backsplash is already set
+      if (layer.getIn(['backsplash']).uri === backsplash.uri) {
+        // unselect
+        newBack = _objectSpread(_objectSpread({}, newBack), {}, {
+          uri: ''
+        });
+        flag = false;
+      }
+      // else then, set backsplash
+      else newBack = _objectSpread(_objectSpread({}, newBack), backsplash);
+      layer = layer.mergeIn(['backsplash'], newBack);
+      layer = layer.set('backsplashApplied', flag);
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layer)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setMolding",
+    value: function setMolding(state, molding, isAll) {
+      var _state13 = state,
+        scene = _state13.scene;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID);
+      if (isAll) {
+        var tempLayerMolding = layer.molding;
+        var flag = tempLayerMolding.some(function (mol) {
+          return mol.name === molding.name;
+        });
+        if (flag) {
+          tempLayerMolding = tempLayerMolding.filter(function (mol) {
+            return mol.name !== molding.name;
+          });
+        } else {
+          if (tempLayerMolding.some(function (mol) {
+            return mol.molding_type === molding.molding_type && mol.location_type === molding.location_type;
+          })) {
+            tempLayerMolding = tempLayerMolding.filter(function (mol) {
+              return mol.molding_type !== molding.molding_type || mol.location_type !== molding.location_type;
+            });
+          }
+          tempLayerMolding = tempLayerMolding.concat(molding);
+        }
+        layer = layer.set('molding', tempLayerMolding);
+        state = state.merge({
+          scene: scene.mergeIn(['layers', layerID], layer)
+        });
+        layer.items.toArray().forEach(function (item) {
+          if (MoldingUtils.isEnableItemForMolding(layer, item, molding)) {
+            var tempItemMolding = item.molding;
+            if (flag) {
+              if (tempItemMolding.some(function (mol) {
+                return mol.name === molding.name;
+              })) {
+                tempItemMolding = tempItemMolding.filter(function (mol) {
+                  return mol.name !== molding.name;
+                });
+              }
+            } else {
+              if (tempItemMolding.some(function (mol) {
+                return mol.molding_type === molding.molding_type && mol.location_type === molding.location_type;
+              })) {
+                tempItemMolding = tempItemMolding.filter(function (mol) {
+                  return mol.molding_type !== molding.molding_type || mol.location_type !== molding.location_type;
+                });
+              }
+              tempItemMolding = tempItemMolding.concat(molding);
+            }
+            state = state.setIn(['scene', 'layers', layerID, 'items', item.id, 'molding'], tempItemMolding);
+          }
+        });
+      } else {
+        var selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]);
+        if (MoldingUtils.isEnableItemForMolding(layer, selectedItem, molding)) {
+          var moldingGroup = MoldingUtils.getItemGroupFromMolding(layer, selectedItem, molding);
+          var tempSelItemMolding = selectedItem.molding;
+          var _flag = tempSelItemMolding.some(function (mol) {
+            return mol.name === molding.name;
+          });
+          moldingGroup.forEach(function (item) {
+            var tempItemMolding = item.molding;
+            if (_flag) {
+              if (tempItemMolding.some(function (mol) {
+                return mol.name === molding.name;
+              })) {
+                tempItemMolding = tempItemMolding.filter(function (mol) {
+                  return mol.name !== molding.name;
+                });
+              }
+            } else {
+              if (tempItemMolding.some(function (mol) {
+                return mol.molding_type === molding.molding_type && mol.location_type === molding.location_type;
+              })) {
+                tempItemMolding = tempItemMolding.filter(function (mol) {
+                  return mol.molding_type !== molding.molding_type || mol.location_type !== molding.location_type;
+                });
+              }
+              tempItemMolding = tempItemMolding.concat(molding);
+            }
+            state = state.setIn(['scene', 'layers', layerID, 'items', item.id, 'molding'], tempItemMolding);
+          });
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateMolding",
+    value: function updateMolding(state) {
+      var _state14 = state,
+        scene = _state14.scene;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID);
+      var selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]);
+      var snappedItemGroup = []; // The array that include snapped items with selected item.
+      if (!!selectedItem && selectedItem.category === 'cabinet') {
+        var itemGroups = [];
+        layer.items.toArray().forEach(function (curItem) {
+          if (selectedItem.id !== curItem.id && curItem.category === 'cabinet') {
+            if (MoldingUtils.isItemSnappedItem(selectedItem, curItem)) {
+              snappedItemGroup.push(curItem); // add the snapped item.
+              // add the snapped item that has same molding location type, layoutpos and height to itemGroups.
+              if (curItem.molding.length) {
+                curItem.molding.forEach(function (md) {
+                  // This code check whether the curItem can be grouped with selected Item in molding.
+                  if (MoldingUtils.tryMergeMDItem(layer, selectedItem, curItem, [selectedItem], md)) {
+                    itemGroups.push({
+                      base_item: curItem,
+                      group: MoldingUtils.getItemGroupFromMolding(layer, curItem, md),
+                      molding: md
+                    });
+                  }
+                });
+              }
+            }
+          }
+        });
+        var updateSelectItemMolding = function updateSelectItemMolding() {
+          var _loop2 = function _loop2() {
+            // check whether snapped item is same as selected item in layoutpos(Wall, Tall, Base)
+            if (MoldingUtils.isSameMoldingLayoutpos(selectedItem, snappedItemGroup[i])) {
+              // check whether snapped item is same in location(same location type and height).
+              var delMoldings = [];
+              for (var k = 0; k < selectedItem.molding.length; k++) {
+                if (MoldingUtils.isItemSameItemByLocation(selectedItem, snappedItemGroup[i], selectedItem.molding[k].location_type)) {
+                  delMoldings.push(selectedItem.molding[k].itemID);
+                }
+              }
+              var resultMol = [];
+              selectedItem.molding.forEach(function (mol) {
+                if (!delMoldings.some(function (id) {
+                  return id === mol.itemID;
+                })) {
+                  resultMol.push(mol);
+                }
+              });
+              state = state.setIn(['scene', 'layers', layerID, 'items', selectedItem.id, 'molding'], resultMol);
+            }
+          };
+          for (var i = 0; i < snappedItemGroup.length; i++) {
+            _loop2();
+          }
+        };
+        var emptyMoldingArray = function emptyMoldingArray() {
+          var temp_items = [selectedItem];
+          var groupMoldings = [];
+          itemGroups.forEach(function (itGroup) {
+            groupMoldings.push(itGroup.molding);
+            itGroup.group.forEach(function (it) {
+              if (!temp_items.some(function (i) {
+                return i.id === it.id;
+              })) {
+                temp_items.push(it);
+              }
+            });
+          });
+          temp_items.forEach(function (item) {
+            var finalMoldings = [];
+            var tempMoldings = state.getIn(['scene', 'layers', layerID, 'items', item.id, 'molding']);
+            tempMoldings.forEach(function (molding) {
+              if (!groupMoldings.some(function (ml) {
+                return ml.itemID === molding.itemID;
+              })) {
+                finalMoldings.push(molding);
+              }
+            });
+            state = state.setIn(['scene', 'layers', layerID, 'items', item.id, 'molding'], finalMoldings);
+          });
+          updateSelectItemMolding();
+        };
+        var setLocationMolding = function setLocationMolding(location) {
+          var locationMolding = itemGroups.filter(function (it) {
+            return it.molding.location_type === location;
+          }).sort(function (a, b) {
+            if (a.group.length === b.group.length) {
+              return GeometryUtils.pointsDistance(a.base_item.x, a.base_item.y, selectedItem.x, selectedItem.y) - GeometryUtils.pointsDistance(b.base_item.x, b.base_item.y, selectedItem.x, selectedItem.y);
+            } else {
+              return a.group.length - b.group.length;
+            }
+          });
+          if (locationMolding.length) {
+            var locationMoldingItems = MoldingUtils.getItemGroupFromMolding(layer, selectedItem, locationMolding[0].molding);
+            locationMoldingItems.forEach(function (item) {
+              var tempMoldings = state.getIn(['scene', 'layers', layerID, 'items', item.id, 'molding']);
+              if (!tempMoldings.some(function (mol) {
+                return mol.itemID === locationMolding[0].molding.itemID;
+              })) tempMoldings.push(locationMolding[0].molding);
+              state = state.setIn(['scene', 'layers', layerID, 'items', item.id, 'molding'], tempMoldings);
+            });
+          }
+        };
+        if (itemGroups.length && layer.items.some(function (it) {
+          return MoldingUtils.isItemSnappedItem(selectedItem, it) && it.category === 'cabinet';
+        })) {
+          emptyMoldingArray();
+          for (var i = 0; i < MOLDING_LOCATIONS.length; i++) {
+            setLocationMolding(MOLDING_LOCATIONS[i]);
+          }
+        } else if (!itemGroups.length && selectedItem.molding.length) {
+          // Delete the selected Item's molding property if selItem attached the group that has no molding.
+          // If snapped items have no moldings and one item's property is same as selected Item, selected Item's molding should be deleted.
+          updateSelectItemMolding();
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setBacksplashVisible",
+    value: function setBacksplashVisible(state, itemID, backsplashVisible) {
+      var _state15 = state,
+        scene = _state15.scene;
+      var layerID = scene.get('selectedLayer');
+      var layer = scene.layers.get(layerID);
+      layer = layer.mergeIn(['items', itemID, 'backsplashVisible'], backsplashVisible);
+      // let cabinet_category = layer.getIn(["items"], itemID).toJS()[itemID].cabinet_category;
+      // if (cabinet_category && (cabinet_category.search("Sink") !== -1 || cabinet_category.search("End/Angle") !== -1)) {
+      //   layer = layer.mergeIn(["items", itemID, "backsplashVisible"], true);
+      // } else {
+      //   layer = layer.mergeIn(["items", itemID, "backsplashVisible"], false);
+      // }
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layer)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setApplianceMaterial",
+    value: function setApplianceMaterial(state, material) {
+      var _state16 = state,
+        scene = _state16.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      var items = layers.items;
+      items.forEach(function (data) {
+        var dataJSON = data.toJS();
+        var itemID = dataJSON.id;
+        var newMaterial = {
+          metalness: material.metalness,
+          roughness: material.roughness
+        };
+        data = data.mergeIn(['applianceMaterial'], newMaterial);
+        layers = layers.mergeIn(['items', itemID], data);
+        state = state.merge({
+          scene: scene.mergeIn(['layers', layerID], layers)
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "setModelling",
+    value: function setModelling(state, molding) {
+      var _state17 = state,
+        scene = _state17.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      var items = layers.items;
+      items.forEach(function (data) {
+        var dataJSON = data.toJS();
+        var itemID = dataJSON.id;
+      });
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layers)
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateItemsAltitude",
+    value: function updateItemsAltitude(state, layerID, itemID, value) {
+      var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+      var properties = item.get('properties');
+      var altitude = properties.get('altitude');
+      var length = altitude.get('length');
+      var _length = altitude.get('_length');
+      var _unit = altitude.get('_unit');
+      length = length - value;
+      switch (_unit) {
+        case 'mm':
+          _length = length * 10;
+          break;
+        case 'm':
+          _length = length * 0.01;
+          break;
+        default:
+          _length = length;
+      }
+      if (length <= 0) {
+        length = 0;
+        _length = 0;
+      }
+      state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties', 'altitude'], new Map({
+        length: length,
+        _length: _length,
+        _unit: _unit
+      }));
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "createHole",
+    value: function createHole(state, layerID, type, lineID, offset, properties) {
+      var holeID = IDBroker.acquireID();
+      var hole = state.catalog.factoryElement(type, {
+        id: holeID,
+        url: state.catalog.getIn(['elements', type, 'info', 'url']),
+        type: type,
+        offset: offset,
+        line: lineID
+      }, properties);
+      state = state.setIn(['scene', 'layers', layerID, 'holes', holeID], hole);
+      state = state.updateIn(['scene', 'layers', layerID, 'lines', lineID, 'holes'], function (holes) {
+        return holes && holes.push(holeID);
+      });
+      // get vertex order/////
+      var element = state.scene.layers.getIn([layerID, 'lines', lineID]);
+      var layer = state.getIn(['scene', 'layers', layerID]);
+      var vetName0 = element.vertices.get(0);
+      var vetName1 = element.vertices.get(1);
+      var verticesArray = [];
+      layer.areas.forEach(function (data) {
+        verticesArray.push(data.vertices.toJS());
+      });
+      for (var i = 0; i < verticesArray.length; i++) {
+        var vertices = verticesArray[i];
+        if (vertices.includes(vetName0) && vertices.includes(vetName1)) {
+          var index0 = vertices.indexOf(vetName0);
+          var index1 = vertices.indexOf(vetName1);
+          // if vertex order chanege//
+          if (index1 + 1 == index0) {
+            return {
+              updatedState: state,
+              hole: hole
+            };
+          }
+          if (index0 == 0 && index1 == vertices.length - 1) {
+            return {
+              updatedState: state,
+              hole: hole
+            };
+          }
+          // ////////////////////////
+        }
+      }
+      // ///////////////////////////
+      properties = hole.properties.toJS();
+      if (properties.hasOwnProperty('flip_orizzontal')) {
+        properties['flip_orizzontal'] = true;
+      }
+      if (properties.hasOwnProperty('flip_horizontal')) {
+        properties['flip_horizontal'] = true;
+      }
+      state = Hole.setJsProperties(state, layerID, holeID, properties).updatedState;
+      return {
+        updatedState: state,
+        hole: hole
+      };
+    }
+  }, {
+    key: "toggleLoadingCabinet",
+    value: function toggleLoadingCabinet(state) {
+      var _state18 = state,
+        scene = _state18.scene;
+      console.log('scene.isLoadingCabinet: ', !scene.isLoadingCabinet);
+      // scene = scene.set('isLoadingCabinet', !scene.isLoadingCabinet);
+      // state = state.set('scene', scene);
+      state = state.setIn(['scene', 'isLoadingCabinet'], !scene.isLoadingCabinet);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endLoading",
+    value: function endLoading(state) {
+      var _state19 = state,
+        scene = _state19.scene;
+      state = state.setIn(['scene', 'loadFlag'], true);
+      return {
+        updatedState: state
+      };
+    }
+  }]);
+}();
+export { Item as default };