kitchen-simulator 5.0.0-test.5 → 5.0.0-test.6

package/src/class/item.js

@@ -0,0 +1,2050 @@
+import convert from 'convert-units';
+import { Layer, Group, Hole } from './export';
+import {
+  IDBroker,
+  NameGenerator,
+  GeometryUtils,
+  MoldingUtils
+} from '../utils/export';
+import { Map, fromJS } from 'immutable';
+import path from 'path';
+import {
+  MODE_IDLE,
+  MODE_IDLE_3D,
+  MODE_DRAWING_ITEM,
+  MODE_DRAWING_ITEM_3D,
+  MODE_DRAGGING_ITEM,
+  MODE_DRAGGING_ITEM_3D,
+  MODE_ROTATING_ITEM,
+  MODE_ROTATING_ITEM_3D,
+  MOLDING_LOCATIONS,
+  INSTALLATION_SUFFIX_TYPE
+} from '../constants';
+import { debugUtil } from '../utils/helper';
+import { isUndefined } from 'util';
+import { hasMoldingLayout } from '../utils/molding';
+import { getInstallationSuffix } from '../components/viewer2d/utils';
+let allItemRect;
+let allItemSnap;
+let allLines;
+let allLineRects;
+let allLineSnap;
+let allRect;
+let time1;
+let time2;
+
+class Item {
+  static create(
+    state,
+    layerID,
+    type,
+    x,
+    y,
+    width,
+    height,
+    rotation,
+    isDuplication,
+    molding = []
+  ) {
+    let itemID = IDBroker.acquireID();
+
+    let 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,
+        height,
+        width,
+        x,
+        y,
+        rotation,
+        isDuplication
+      },
+      null,
+      state
+    );
+
+    if (item.category === 'cabinet') {
+      const layer = state.getIn(['scene', 'layers', layerID]);
+      if (state.doorStyle !== null && state.doorStyle !== undefined) {
+        const temp = layer.doorStyle ? layer.doorStyle : state.doorStyle.toJS();
+        let cds = temp?.doorStyles?.cds.find(
+          elem =>
+            elem.itemID === state.catalog.getIn(['elements', type, 'itemID'])
+        );
+        let tmpDS = temp;
+        if (cds !== undefined && cds !== null) {
+          tmpDS.doorStyles = {
+            ...temp.doorStyles,
+            ...cds.data[0],
+            cabinet_door_style_id: cds.cabinet_door_style_id
+          };
+          item = item.merge({
+            doorStyle: fromJS(tmpDS)
+          });
+        } else {
+          let styleObj = state.oStyle?.toJS()?.oStyle;
+          if (styleObj) {
+            for (let x in styleObj) {
+              cds = styleObj[x].data.doorStyles.cds.find(
+                elem =>
+                  elem.itemID ===
+                  state.catalog.getIn(['elements', type, 'itemID'])
+              );
+              if (cds !== null && cds !== undefined && cds) {
+                tmpDS = styleObj[x].data;
+                tmpDS.doorStyles = {
+                  ...tmpDS.doorStyles,
+                  ...cds.data[0],
+                  cabinet_door_style_id: cds.cabinet_door_style_id
+                };
+                item = item.merge({
+                  doorStyle: fromJS(tmpDS)
+                });
+                break;
+              }
+            }
+          }
+        }
+      } else {
+        let styleObj = state.oStyle?.toJS()?.oStyle;
+        if (styleObj) {
+          for (let x in styleObj) {
+            cds = styleObj[x].data.doorStyles.cds.find(
+              elem =>
+                elem.itemID ===
+                state.catalog.getIn(['elements', type, 'itemID'])
+            );
+            if (cds !== null && cds !== undefined && cds) {
+              let tmpDS = styleObj[x].data;
+              tmpDS.doorStyles = {
+                ...tmpDS.doorStyles,
+                ...cds.data[0],
+                cabinet_door_style_id: cds.cabinet_door_style_id
+              };
+              item = item.merge({
+                doorStyle: fromJS(tmpDS)
+              });
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    if (item.get('type') === 'cabinet' && item.get('doorStyle').size === 0) {
+      return { updatedState: state, item: null };
+    }
+
+    let setSizeOfItemByDoorStyle = () => {
+      let doorStyle = item.get('doorStyle').toJS();
+      var cds = doorStyle?.doorStyles?.cds?.find(
+        elem => elem.itemID === item.itemID
+      );
+      let euro_cds = [];
+      if (cds !== undefined) {
+        euro_cds = cds && cds.data.filter(element => element.is_euro_cds);
+      }
+      if (
+        doorStyle.door_style_name === 'Euro & Frameless' &&
+        euro_cds.length > 0
+      ) {
+        let 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(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'
+          });
+        }
+        item = item.merge({ properties: fromJS(newProperties) });
+      } else {
+        let 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')) {
+      let ceilHeight = state.getIn(['scene', 'layers', layerID, 'ceilHeight']);
+      let ceilUnit = state.getIn(['scene', 'layers', layerID, 'unit']);
+      ceilHeight = convert(ceilHeight).from(ceilUnit).to('cm');
+      let 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.
+      let layerMolding = state
+        .getIn(['scene', 'layers', layerID, 'molding'])
+        .filter(md => hasMoldingLayout(md, item.layoutpos));
+      state = state.setIn(
+        ['scene', 'layers', layerID, 'items', itemID, 'molding'],
+        layerMolding.length ? layerMolding : molding
+      );
+    }
+    return { updatedState: state, item };
+  }
+
+  static updateDoorHandle(item, layer) {
+    const doorHandle = layer.get('doorHandle');
+
+    if (doorHandle == '') return item;
+    const dataJSON = item.toJS();
+    let itemID = dataJSON.id;
+    var doorStyle = dataJSON.doorStyle;
+    var tmpDS = {
+      ...doorStyle,
+      handle_gltf: doorHandle,
+      metalness: 0.2,
+      roughness: 0.1
+    };
+    let cnt = 0;
+    for (let 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;
+  }
+
+  static 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,
+        itemID
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static selectHole(state, layerID, holeID) {
+    state = Layer.select(state, layerID).updatedState;
+    state = Layer.selectElement(state, layerID, 'holes', holeID).updatedState;
+
+    return { updatedState: state };
+  }
+
+  static editWidth(state, newWidth, layerID, itemID) {
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    let properties = item.properties;
+    if (newWidth === 0) {
+      alert('You can not set width to 0');
+      return { updatedState: state };
+    }
+    let 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 };
+  }
+
+  static prepareSnap(state, layerID) {
+    let layer = state.getIn(['scene', 'layers', layerID]);
+    let scene = state.get('scene');
+    let 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);
+  }
+
+  static duplicateSelected(state, currentObject) {
+    let layerID = state.getIn(['scene', 'selectedLayer']);
+    let layer = state.getIn(['scene', 'layers', layerID]);
+    let objectID = currentObject.id;
+    let myObject;
+    let x = currentObject.x;
+    let y = currentObject.y;
+    let 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);
+        let 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;
+        let isrectSect = GeometryUtils.validInterSect(allRect, val);
+        if (isrectSect) {
+          // Duplicated object has a original object's molding property
+          let { updatedState: stateI, item } = this.create(
+            state,
+            layerID,
+            sceneComponentType,
+            x + width * Math.cos(rotRad),
+            y + width * Math.sin(rotRad),
+            200,
+            100,
+            (rotRad * 180) / Math.PI,
+            true,
+            myObject.molding
+          );
+          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 {
+          let 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;
+          let isRect = GeometryUtils.validInterSect(allRect, val);
+          if (isRect) {
+            let { updatedState: stateI, item } = this.create(
+              state,
+              layerID,
+              sceneComponentType,
+              x - width * Math.cos(rotRad),
+              y - width * Math.sin(rotRad),
+              200,
+              100,
+              (rotRad * 180) / Math.PI,
+              true,
+              myObject.molding
+            );
+            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 {
+            let val = {
+              pos: {
+                x: x - depth * Math.sin(rotRad),
+                y: y - depth * Math.cos(rotRad)
+              },
+              rotRad: rotRad
+            };
+            val.size = allItemRect.cur.size;
+            val.layoutpos = allItemRect.cur.layoutpos;
+            val.is_corner = allItemRect.cur.is_corner;
+            let isRectDown = GeometryUtils.validInterSect(allRect, val);
+            if (isRectDown) {
+              let { updatedState: stateI, item } = this.create(
+                state,
+                layerID,
+                sceneComponentType,
+                x - depth * Math.sin(rotRad),
+                y - depth * Math.cos(rotRad),
+                200,
+                100,
+                (rotRad * 180) / Math.PI,
+                true,
+                myObject.molding
+              );
+              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 {
+              let val = {
+                pos: {
+                  x: x + depth * Math.sin(rotRad),
+                  y: y + depth * Math.cos(rotRad)
+                },
+                rotRad: rotRad
+              };
+              val.size = allItemRect.cur.size;
+              val.layoutpos = allItemRect.cur.layoutpos;
+              val.is_corner = allItemRect.cur.is_corner;
+              let isRectUp = GeometryUtils.validInterSect(allRect, val);
+              if (isRectUp) {
+                let { updatedState: stateI, item } = this.create(
+                  state,
+                  layerID,
+                  sceneComponentType,
+                  x + depth * Math.sin(rotRad),
+                  y + depth * Math.cos(rotRad),
+                  200,
+                  100,
+                  (rotRad * 180) / Math.PI,
+                  true,
+                  myObject.molding
+                );
+                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 {
+                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]);
+        let line = state.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'lines',
+          myObject.line
+        ]);
+        sceneComponentType = myObject.type;
+        width = myObject.get('properties').get('width').get('length');
+        let myOffset = myObject.offset;
+        let v0 = layer.getIn(['vertices', line.vertices.get(0)]);
+        let v1 = layer.getIn(['vertices', line.vertices.get(1)]);
+        let lineLength = GeometryUtils.pointsDistance(v0.x, v0.y, v1.x, v1.y);
+        let delta = width / 2 / lineLength + 0.00001;
+        let allHoles = state.getIn(['scene', 'layers', layerID, 'holes']);
+        let rightAble = true;
+        let leftAble = true;
+        if (myOffset + 3 * delta > 1) rightAble = false;
+        else if (myOffset - 3 * delta < 0) leftAble = false;
+        if (allHoles.size === 0) {
+          let { updatedState: stateH, hole } = this.createHole(
+            state,
+            layerID,
+            sceneComponentType,
+            myObject.line,
+            myOffset + delta * 2,
+            myObject.get('properties')
+          );
+          state = this.selectHole(stateH, layerID, hole.id).updatedState;
+          state = state.setIn(['drawingSupport', 'currentID'], hole.id);
+        } else {
+          allHoles.forEach(hole => {
+            if (hole.line === line.id)
+              if (!hole.selected) {
+                let 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) {
+          let { updatedState: stateH, hole } = this.createHole(
+            state,
+            layerID,
+            sceneComponentType,
+            myObject.line,
+            myOffset + delta * 2,
+            myObject.get('properties')
+          );
+          state = this.selectHole(stateH, layerID, hole.id).updatedState;
+          state = state.setIn(['drawingSupport', 'currentID'], hole.id);
+        } else {
+          if (leftAble) {
+            let { updatedState: stateH, hole } = this.createHole(
+              state,
+              layerID,
+              sceneComponentType,
+              myObject.line,
+              myOffset - delta * 2,
+              myObject.get('properties')
+            );
+            state = this.selectHole(stateH, layerID, hole.id).updatedState;
+            state = state.setIn(['drawingSupport', 'currentID'], hole.id);
+          } else alert('No more space');
+        }
+        break;
+      case 'lines':
+        alert('Duplicating lines is not currently supported yet.');
+        break;
+      default:
+        break;
+    }
+    return { updatedState: state };
+  }
+
+  static storeDistArray(state, layerID, itemID, distArray) {
+    let curDistArray = state.getIn([
+      'scene',
+      'layers',
+      layerID,
+      'items',
+      itemID,
+      'distArray'
+    ]);
+    let isEqualDist = (a, b) => {
+      return a == b;
+    };
+    if (curDistArray) {
+      let equal = curDistArray.every((curElement, index) => {
+        return isEqualDist(curElement[0], distArray[index][0]);
+      });
+      if (!equal) {
+        state = state.setIn(
+          ['scene', 'layers', layerID, 'items', itemID, 'distArray'],
+          distArray
+        );
+      }
+    }
+
+    return { updatedState: state };
+  }
+
+  static validateItemPositions(state, layerID) {
+    let layer = state.getIn(['scene', 'layers', layerID]);
+
+    function isItemInRect(item) {
+      let { width, height } = state.getIn(['scene']);
+      return item.x >= 0 && item.x <= width && item.y >= 0 && item.y <= height;
+    }
+
+    layer.items.forEach(item => {
+      if (!isItemInRect(item))
+        state = this.remove(state, layerID, item.id).updatedState;
+    });
+    return { updatedState: state };
+  }
+
+  static remove(state, layerID, itemID) {
+    state = this.unselect(state, layerID, itemID).updatedState;
+    state = Layer.removeElement(state, layerID, 'items', itemID).updatedState;
+
+    state
+      .getIn(['scene', 'groups'])
+      .forEach(
+        group =>
+          (state = Group.removeElement(
+            state,
+            group.id,
+            layerID,
+            'items',
+            itemID
+          ).updatedState)
+      );
+
+    return { updatedState: state };
+  }
+
+  static 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 };
+  }
+
+  static unselect(state, layerID, itemID) {
+    state = Layer.unselect(state, layerID, 'items', itemID).updatedState;
+    return { updatedState: state };
+  }
+
+  static selectToolDrawingItem(state, sceneComponentType) {
+    state = state.merge({
+      mode: MODE_DRAWING_ITEM,
+      drawingSupport: new Map({
+        type: sceneComponentType
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static selectToolDrawingItem3D(state, sceneComponentType) {
+    state = state.merge({
+      mode: MODE_DRAWING_ITEM_3D,
+      drawingSupport: new Map({
+        type: sceneComponentType
+      })
+    });
+    state = state.mergeIn(['scene', 'loadFlag'], false);
+    return { updatedState: state };
+  }
+
+  static endCreatingCabinet(state) {
+    state = state.merge({
+      isOpen: false,
+      openedType: 0
+    });
+    return { updatedState: state };
+  }
+  static updatePopupOpen(state, value) {
+    state = state.merge({
+      openedType: value
+    });
+    return { updatedState: state };
+  }
+
+  static updateDrawingItem(state, layerID, x, y) {
+    if (state.hasIn(['drawingSupport', 'currentID'])) {
+      let mode = state.get('mode');
+      if ([MODE_DRAWING_ITEM_3D].includes(mode)) {
+        state = state.updateIn(
+          [
+            'scene',
+            'layers',
+            layerID,
+            'items',
+            state.getIn(['drawingSupport', 'currentID'])
+          ],
+          item => item && item.merge({ x, 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'])
+          ],
+          item => item && item.merge({ x, y })
+        );
+      }
+    } else {
+      let { updatedState: stateI, item } = this.create(
+        state,
+        layerID,
+        state.getIn(['drawingSupport', 'type']),
+        x,
+        y,
+        200,
+        100,
+        0,
+        false
+      );
+      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 };
+  }
+
+  static updateDraggingItemChanged(state, x, y, layerID, itemID) {
+    let { scene } = state;
+    // let originalX = draggingSupport.get('originalX');
+    // let originalY = draggingSupport.get('originalY');
+
+    // let diffX = x;
+    // let diffY = y;
+
+    let 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 };
+  }
+
+  static endDrawingItem(state, layerID, x, y) {
+    let catalog = state.catalog;
+    state = this.updateDrawingItem(state, layerID, x, y, catalog).updatedState;
+    state = Layer.unselectAll(state, layerID).updatedState;
+    let 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 };
+  }
+
+  static beginDraggingItem(state, layerID, itemID, x, y) {
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+
+    time1 = debugUtil();
+    if (isUndefined(item)) return;
+    state = state.merge({
+      mode: MODE_DRAGGING_ITEM,
+      draggingSupport: Map({
+        layerID,
+        itemID,
+        startPointX: x,
+        startPointY: y,
+        originalX: item.x,
+        originalY: item.y
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static beginDraggingItem3D(state, layerID, itemID, x, y) {
+    let 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,
+        itemID,
+        startPointX: x,
+        startPointY: y,
+        originalX: item.x,
+        originalY: item.y
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static updateDraggingItem(state, x, y) {
+    let { draggingSupport, scene } = state;
+
+    let layerID = draggingSupport.get('layerID');
+    let itemID = draggingSupport.get('itemID');
+    let startPointX = draggingSupport.get('startPointX');
+    let startPointY = draggingSupport.get('startPointY');
+    let originalX = draggingSupport.get('originalX');
+    let originalY = draggingSupport.get('originalY');
+
+    let diffX = startPointX - x;
+    let diffY = startPointY - y;
+
+    let item = scene.getIn(['layers', layerID, 'items', itemID]);
+    if (isUndefined(item)) return { updatedState: state };
+    let tX = originalX - diffX;
+    let 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 };
+  }
+
+  static updateDraggingItem3DX(state, x) {
+    let { draggingSupport, scene } = state;
+
+    let layerID = draggingSupport.get('layerID');
+    let itemID = draggingSupport.get('itemID');
+    let startPointX = draggingSupport.get('startPointX');
+    let originalX = draggingSupport.get('originalX');
+
+    let diffX = startPointX - x;
+
+    let 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 };
+  }
+
+  static updateDraggingItem3DY(state, y) {
+    let { draggingSupport, scene } = state;
+
+    let layerID = draggingSupport.get('layerID');
+    let itemID = draggingSupport.get('itemID');
+    let startPointY = draggingSupport.get('startPointY');
+    let originalY = draggingSupport.get('originalY');
+
+    let diffY = startPointY - y;
+
+    let 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 };
+  }
+
+  static endDraggingItem(state, x, y) {
+    state = this.updateDraggingItem(state, x, y).updatedState;
+    state = state.merge({ mode: MODE_IDLE });
+
+    return { updatedState: state };
+  }
+
+  static 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 };
+  }
+
+  static beginRotatingItem(state, layerID, itemID, x, y) {
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    let originRotation = item.get('rotation');
+
+    state = state.merge({
+      mode: MODE_ROTATING_ITEM,
+      rotatingSupport: Map({
+        layerID,
+        itemID,
+        x,
+        y,
+        originRotation
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static beginRotatingItem3D(state, layerID, itemID, x, y) {
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    let originRotation = item.get('rotation');
+
+    state = state.merge({
+      mode: MODE_ROTATING_ITEM_3D,
+      rotatingSupport: Map({
+        layerID,
+        itemID,
+        x,
+        y,
+        originRotation
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static updateRotatingItem(state, x, y) {
+    let { rotatingSupport, scene } = state;
+    let layerID = rotatingSupport.get('layerID');
+    let itemID = rotatingSupport.get('itemID');
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    let origin = {
+      x: rotatingSupport.get('x'),
+      y: rotatingSupport.get('y'),
+      originRotation: rotatingSupport.get('originRotation')
+    };
+
+    let newRot =
+      (Math.atan2(origin.y - item.y, origin.x - item.x) * 180) / Math.PI + 90;
+    let deltaRot = newRot - origin.originRotation;
+
+    let deltaX = x - item.x;
+    let deltaY = y - item.y;
+
+    let 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
+    });
+
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+    });
+
+    return { updatedState: state };
+  }
+
+  static updateRotatingItemChanged(state, rotation, layerID, itemID) {
+    let scene = state.scene;
+
+    // let originalX = draggingSupport.get('originalX');
+    // let originalY = draggingSupport.get('originalY');
+
+    // let diffX = x;
+    // let diffY = y;
+
+    let 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 };
+  }
+
+  static endRotatingItem(state, x, y) {
+    //state = this.updateRotatingItem(state, x, y).updatedState;
+    state = state.merge({ mode: MODE_IDLE });
+
+    return { updatedState: state };
+  }
+
+  static endRotatingItem3D(state, x, y) {
+    state = this.updateRotatingItem(state, x, y).updatedState;
+    state = state.merge({ mode: MODE_IDLE_3D });
+
+    return { updatedState: state };
+  }
+
+  static replaceSubmodule(state, url) {
+    let { replacingSupport, scene } = state;
+    url = 'catalog/texture.png';
+    let urlData = url.split('/');
+    let newURL = '';
+    let addURL = false;
+    for (let i = 0; i < urlData.length; i++) {
+      if (urlData[i] == '') {
+        continue;
+      }
+      newURL += '/' + urlData[i];
+    }
+    let layerID = replacingSupport.get('layerID');
+    let itemID = replacingSupport.get('itemID');
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    let submodule = [];
+    let normalMap = [];
+
+    for (let i = 0; i < item.submodule.size; i++)
+      submodule.push(item.submodule.get(i));
+    for (let i = 0; i < item.normalMap.size; i++)
+      normalMap.push(item.normalMap.get(i));
+    //let submodule = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'submodule']);
+    urlData = newURL.split('/');
+    let flag = false;
+    if (urlData[urlData.length - 1].includes('.gltf')) {
+      for (let i = 0; i < submodule.length; i++) {
+        let pathData = submodule[i].split('/');
+        if (pathData[pathData.length - 2] === urlData[urlData.length - 2]) {
+          submodule[i] = newURL;
+          flag = true;
+        }
+      }
+      if (!flag) submodule.push(newURL);
+      item = item.merge({
+        submodule
+      });
+    } else {
+      for (let i = 0; i < normalMap.length; i++) {
+        let pathData = normalMap[i].split('/');
+        if (pathData[pathData.length - 2] === urlData[urlData.length - 2]) {
+          normalMap[i] = newURL;
+          flag = true;
+        }
+      }
+      if (!flag) normalMap.push(newURL);
+
+      item = item.merge({
+        normalMap
+      });
+    }
+
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
+    });
+    state = state.merge({ mode: MODE_IDLE_3D });
+
+    return { updatedState: state };
+  }
+
+  static setProperties(state, layerID, itemID, properties) {
+    state = state.mergeIn(
+      ['scene', 'layers', layerID, 'items', itemID, 'properties'],
+      properties
+    );
+
+    return { updatedState: state };
+  }
+
+  static setJsProperties(state, layerID, itemID, properties) {
+    return this.setProperties(state, layerID, itemID, fromJS(properties));
+  }
+
+  static updateProperties(state, layerID, itemID, properties) {
+    properties.forEach((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 };
+  }
+
+  static updateJsProperties(state, layerID, itemID, properties) {
+    return this.updateProperties(state, layerID, itemID, fromJS(properties));
+  }
+
+  static setAttributes(state, layerID, itemID, itemAttributes) {
+    state = state.mergeIn(
+      ['scene', 'layers', layerID, 'items', itemID],
+      itemAttributes
+    );
+    return { updatedState: state };
+  }
+
+  static setJsAttributes(state, layerID, itemID, itemAttributes) {
+    itemAttributes = fromJS(itemAttributes);
+    return this.setAttributes(state, layerID, itemID, itemAttributes);
+  }
+
+  static animateObject(state, value) {
+    let { replacingSupport, scene } = state;
+    let layerID = replacingSupport.get('layerID');
+    let itemID = replacingSupport.get('itemID');
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    if (item !== undefined) {
+      let 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 };
+  }
+
+  static removeReplacingSupport(state) {
+    state = state.merge({
+      replacingSupport: new Map()
+    });
+    return { updatedState: state };
+  }
+
+  static setInitialDoorStyle(state, doorStyle, oStyle) {
+    if (doorStyle === undefined) {
+      state = state.merge({
+        oStyle: new Map({
+          oStyle
+        })
+      });
+    } else {
+      state = state.merge({
+        doorStyle: doorStyle,
+        oStyle: new Map({
+          oStyle
+        })
+      });
+      let { scene } = state;
+      let layerID = scene.get('selectedLayer');
+      let layers = scene.layers.get(layerID);
+      let items = layers.items;
+      items.forEach(data => {
+        {
+          let itemID = data.id;
+
+          var tmpDS = {
+            ...data.doorStyle,
+            doorStyles: {
+              ...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 };
+  }
+
+  static setDoorStyle(state, doorStyle, pathes, isAll) {
+    var keys = Object.keys(doorStyle.doorStyles);
+    keys = keys.filter(elem => !elem.endsWith('_gltf'));
+    var tmp = {};
+    for (let 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
+    });
+    let layerID = state.scene.get('selectedLayer');
+    let temp_layer_molding = state.scene.getIn(['layers', layerID, 'molding']);
+    temp_layer_molding = temp_layer_molding.filter(md =>
+      doorStyle.doorStyles.cds.some(ds => md.itemID === ds.itemID)
+    );
+    state = state.setIn(
+      ['scene', 'layers', layerID, 'molding'],
+      temp_layer_molding
+    );
+    let itemIDs = state.scene.layers
+      .getIn([layerID, 'selected', 'items'])
+      .toJS();
+
+    let setDoorStyleOfItem = data => {
+      if (data.category !== 'cabinet') return; //CDS should effect to cabinets
+      let itemID = data.id;
+      const curItem = state.getIn([
+        'scene',
+        'layers',
+        layerID,
+        'items',
+        itemID
+      ]);
+      const layer = state.getIn(['scene', 'layers', layerID]);
+      let tmpMolding = [...curItem.molding];
+      let temp_item_molding = [...curItem.molding];
+      temp_item_molding = temp_item_molding.filter(md =>
+        doorStyle.doorStyles.cds.some(ds => ds.itemID === md.itemID)
+      );
+      tmpMolding.forEach(md => {
+        const itemGroup = MoldingUtils.getItemGroupFromMolding(
+          layer,
+          curItem,
+          md
+        );
+        itemGroup.forEach(it => {
+          state = state.setIn(
+            ['scene', 'layers', layerID, 'items', it.id, 'molding'],
+            temp_item_molding
+          );
+        });
+      });
+      var cds = doorStyle.doorStyles.cds.find(
+        elem => elem.itemID === data.itemID
+      );
+      let euro_cds = [];
+      if (cds !== undefined) {
+        euro_cds = cds && cds.data.filter(element => element.is_euro_cds);
+      }
+      let cds_data;
+      if (
+        doorStyle.door_style_name === 'Euro & Frameless' &&
+        euro_cds.length > 0
+      ) {
+        cds_data = cds
+          ? { ...euro_cds[0], cabinet_door_style_id: cds.cabinet_door_style_id }
+          : {};
+        let 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 = this.setJsProperties(
+          state,
+          layerID,
+          itemID,
+          newProperties
+        ).updatedState;
+      } else {
+        cds_data = cds
+          ? { ...cds.data[0], cabinet_door_style_id: cds.cabinet_door_style_id }
+          : {};
+        let 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 = this.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: {
+          ...tmp,
+          ...cds_data
+        }
+      };
+      state = state.mergeIn(
+        ['scene', 'layers', layerID, 'items', itemID, 'doorStyle'],
+        fromJS(tmpDS)
+      );
+    };
+
+    if (isAll) {
+      let items = state.scene.layers.get(layerID).items;
+      items.forEach(setDoorStyleOfItem);
+    } else {
+      if (itemIDs.length > 0) {
+        for (let i = 0; i < itemIDs.length; i++) {
+          let itemID = itemIDs[i];
+          let items = state.scene.layers.get(layerID).items;
+          items.forEach(data => {
+            if (itemID === data.id) {
+              setDoorStyleOfItem(data);
+            }
+          });
+        }
+      }
+    }
+    return { updatedState: state };
+  }
+  static setCounterTop(state, counterTop) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layers = scene.layers.get(layerID);
+    layers = layers.mergeIn(['counterTop'], counterTop);
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID], layers)
+    });
+    let items = layers.items;
+    items.forEach(data => {
+      {
+        const dataJSON = data.toJS();
+        let itemID = dataJSON.id;
+        let newCounter = dataJSON.counterTop;
+        newCounter = { ...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 };
+  }
+
+  static setItemsDoorHandle(state, scene, layer, layerID, elements_item) {
+    elements_item.forEach(data => {
+      let itemID = data.id;
+      let item = this.updateDoorHandle(data, layer);
+      layer = layer.mergeIn(['items', itemID], item);
+      state = state.merge({
+        scene: scene.mergeIn(['layers', layerID], layer)
+      });
+    });
+    return { updatedState: state };
+  }
+
+  static setDoorHandle(state, doorHandle) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layer = scene.layers.get(layerID);
+
+    layer = layer.mergeIn(['doorHandle'], doorHandle);
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID], layer)
+    });
+
+    let items = layer.items;
+    let selectedItems = items.filter(element => 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 };
+  }
+  static setHandleMaterial(state, material) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layers = scene.layers.get(layerID);
+    let items = layers.items;
+    items.forEach(data => {
+      const dataJSON = data.toJS();
+      let itemID = dataJSON.id;
+      var doorStyle = dataJSON.doorStyle;
+      var tmpDS = {
+        ...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 };
+  }
+
+  static setWallColor(state, wallColor) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layer = scene.layers.get(layerID);
+
+    layer = layer.merge({ wallColor });
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID], layer)
+    });
+
+    let lines = layer.lines;
+    lines.forEach(data => {
+      const dataJSON = data.toJS();
+      let 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 };
+  }
+
+  static setBacksplash(state, backsplash) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layer = scene.layers.get(layerID);
+    const dataJSON = layer.toJS();
+    let newBack = dataJSON.backsplash;
+    let flag = true; // selected or not
+    // if backsplash is already set
+    if (layer.getIn(['backsplash']).uri === backsplash.uri) {
+      // unselect
+      newBack = { ...newBack, uri: '' };
+      flag = false;
+    }
+    // else then, set backsplash
+    else newBack = { ...newBack, ...backsplash };
+    layer = layer.mergeIn(['backsplash'], newBack);
+    layer = layer.set('backsplashApplied', flag);
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID], layer)
+    });
+    return { updatedState: state };
+  }
+
+  static setMolding(state, molding, isAll) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layer = scene.layers.get(layerID);
+    if (isAll) {
+      let tempLayerMolding = layer.molding;
+      let flag = tempLayerMolding.some(mol => mol.name === molding.name);
+      if (flag) {
+        tempLayerMolding = tempLayerMolding.filter(
+          mol => mol.name !== molding.name
+        );
+      } else {
+        if (
+          tempLayerMolding.some(
+            mol =>
+              mol.molding_type === molding.molding_type &&
+              mol.location_type === molding.location_type
+          )
+        ) {
+          tempLayerMolding = tempLayerMolding.filter(
+            mol =>
+              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(item => {
+        if (MoldingUtils.isEnableItemForMolding(layer, item, molding)) {
+          let tempItemMolding = item.molding;
+          if (flag) {
+            if (tempItemMolding.some(mol => mol.name === molding.name)) {
+              tempItemMolding = tempItemMolding.filter(
+                mol => mol.name !== molding.name
+              );
+            }
+          } else {
+            if (
+              tempItemMolding.some(
+                mol =>
+                  mol.molding_type === molding.molding_type &&
+                  mol.location_type === molding.location_type
+              )
+            ) {
+              tempItemMolding = tempItemMolding.filter(
+                mol =>
+                  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 {
+      const selectedItem = layer.getIn([
+        'items',
+        layer.selected.toJS().items[0]
+      ]);
+      if (MoldingUtils.isEnableItemForMolding(layer, selectedItem, molding)) {
+        let moldingGroup = MoldingUtils.getItemGroupFromMolding(
+          layer,
+          selectedItem,
+          molding
+        );
+        let tempSelItemMolding = selectedItem.molding;
+        let flag = tempSelItemMolding.some(mol => mol.name === molding.name);
+        moldingGroup.forEach(item => {
+          let tempItemMolding = item.molding;
+          if (flag) {
+            if (tempItemMolding.some(mol => mol.name === molding.name)) {
+              tempItemMolding = tempItemMolding.filter(
+                mol => mol.name !== molding.name
+              );
+            }
+          } else {
+            if (
+              tempItemMolding.some(
+                mol =>
+                  mol.molding_type === molding.molding_type &&
+                  mol.location_type === molding.location_type
+              )
+            ) {
+              tempItemMolding = tempItemMolding.filter(
+                mol =>
+                  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 };
+  }
+
+  static updateMolding(state) {
+    const { scene } = state;
+    const layerID = scene.get('selectedLayer');
+    const layer = scene.layers.get(layerID);
+    const selectedItem = layer.getIn(['items', layer.selected.toJS().items[0]]);
+    let snappedItemGroup = []; // The array that include snapped items with selected item.
+    if (!!selectedItem && selectedItem.category === 'cabinet') {
+      let itemGroups = [];
+      layer.items.toArray().forEach(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(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
+                  });
+                }
+              });
+            }
+          }
+        }
+      });
+      const updateSelectItemMolding = () => {
+        for (let i = 0; i < snappedItemGroup.length; i++) {
+          // 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).
+            let delMoldings = [];
+            for (let k = 0; k < selectedItem.molding.length; k++) {
+              if (
+                MoldingUtils.isItemSameItemByLocation(
+                  selectedItem,
+                  snappedItemGroup[i],
+                  selectedItem.molding[k].location_type
+                )
+              ) {
+                delMoldings.push(selectedItem.molding[k].itemID);
+              }
+            }
+            let resultMol = [];
+            selectedItem.molding.forEach(mol => {
+              if (!delMoldings.some(id => id === mol.itemID)) {
+                resultMol.push(mol);
+              }
+            });
+            state = state.setIn(
+              ['scene', 'layers', layerID, 'items', selectedItem.id, 'molding'],
+              resultMol
+            );
+          }
+        }
+      };
+      const emptyMoldingArray = () => {
+        let temp_items = [selectedItem];
+        let groupMoldings = [];
+        itemGroups.forEach(itGroup => {
+          groupMoldings.push(itGroup.molding);
+          itGroup.group.forEach(it => {
+            if (!temp_items.some(i => i.id === it.id)) {
+              temp_items.push(it);
+            }
+          });
+        });
+        temp_items.forEach(item => {
+          let finalMoldings = [];
+          let tempMoldings = state.getIn([
+            'scene',
+            'layers',
+            layerID,
+            'items',
+            item.id,
+            'molding'
+          ]);
+          tempMoldings.forEach(molding => {
+            if (!groupMoldings.some(ml => ml.itemID === molding.itemID)) {
+              finalMoldings.push(molding);
+            }
+          });
+          state = state.setIn(
+            ['scene', 'layers', layerID, 'items', item.id, 'molding'],
+            finalMoldings
+          );
+        });
+        updateSelectItemMolding();
+      };
+      const setLocationMolding = location => {
+        let locationMolding = itemGroups
+          .filter(it => it.molding.location_type === location)
+          .sort((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) {
+          let locationMoldingItems = MoldingUtils.getItemGroupFromMolding(
+            layer,
+            selectedItem,
+            locationMolding[0].molding
+          );
+          locationMoldingItems.forEach(item => {
+            let tempMoldings = state.getIn([
+              'scene',
+              'layers',
+              layerID,
+              'items',
+              item.id,
+              'molding'
+            ]);
+            if (
+              !tempMoldings.some(
+                mol => 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(
+          it =>
+            MoldingUtils.isItemSnappedItem(selectedItem, it) &&
+            it.category === 'cabinet'
+        )
+      ) {
+        emptyMoldingArray();
+        for (let 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 };
+  }
+
+  static setBacksplashVisible(state, itemID, backsplashVisible) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let 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 };
+  }
+  static setApplianceMaterial(state, material) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layers = scene.layers.get(layerID);
+    let items = layers.items;
+    items.forEach(data => {
+      const dataJSON = data.toJS();
+      let 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 };
+  }
+
+  static setModelling(state, molding) {
+    let { scene } = state;
+    let layerID = scene.get('selectedLayer');
+    let layers = scene.layers.get(layerID);
+    let items = layers.items;
+    items.forEach(data => {
+      const dataJSON = data.toJS();
+      let itemID = dataJSON.id;
+    });
+    state = state.merge({
+      scene: scene.mergeIn(['layers', layerID], layers)
+    });
+    return { updatedState: state };
+  }
+
+  static updateItemsAltitude(state, layerID, itemID, value) {
+    let item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
+    let properties = item.get('properties');
+    let altitude = properties.get('altitude');
+    let length = altitude.get('length');
+    let _length = altitude.get('_length');
+    let _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 };
+  }
+
+  static createHole(state, layerID, type, lineID, offset, properties) {
+    let holeID = IDBroker.acquireID();
+    let hole = state.catalog.factoryElement(
+      type,
+      {
+        id: holeID,
+        url: state.catalog.getIn(['elements', type, 'info', 'url']),
+        type,
+        offset,
+        line: lineID
+      },
+      properties
+    );
+
+    state = state.setIn(['scene', 'layers', layerID, 'holes', holeID], hole);
+    state = state.updateIn(
+      ['scene', 'layers', layerID, 'lines', lineID, 'holes'],
+      holes => holes && holes.push(holeID)
+    );
+    // get vertex order/////
+    let element = state.scene.layers.getIn([layerID, 'lines', lineID]);
+    let layer = state.getIn(['scene', 'layers', layerID]);
+    let vetName0 = element.vertices.get(0);
+    let vetName1 = element.vertices.get(1);
+    let verticesArray = [];
+    layer.areas.forEach(data => {
+      verticesArray.push(data.vertices.toJS());
+    });
+    for (let i = 0; i < verticesArray.length; i++) {
+      let vertices = verticesArray[i];
+      if (vertices.includes(vetName0) && vertices.includes(vetName1)) {
+        let index0 = vertices.indexOf(vetName0);
+        let index1 = vertices.indexOf(vetName1);
+        // if vertex order chanege//
+        if (index1 + 1 == index0) {
+          return { updatedState: state, hole };
+        }
+        if (index0 == 0 && index1 == vertices.length - 1) {
+          return { updatedState: state, 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 };
+  }
+
+  static toggleLoadingCabinet(state) {
+    let { scene } = state;
+    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 };
+  }
+  static endLoading(state) {
+    let { scene } = state;
+    state = state.setIn(['scene', 'loadFlag'], true);
+    return { updatedState: state };
+  }
+}
+
+export { Item as default };