kitchen-simulator 3.1.14 → 4.0.0-alpha.12

package/es/components/viewer2d/viewer2d.js

@@ -4,9 +4,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from 'react-svg-pan-zoom';
+import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT, zoom } from 'react-svg-pan-zoom';
 import * as constants from "../../constants";
-import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT } from "../../constants";
+import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE } from "../../constants";
 import State from "./state";
 import * as SharedStyle from "../../shared-style";
 import { RulerX, RulerY } from "./export";
@@ -16,13 +16,10 @@ import { convert } from "../../utils/convert-units-lite";
 import { Map } from 'immutable';
 import { formatNumber } from "../../utils/math";
 import { isEmpty } from "../../utils/helper"; // variables
-import { isWarningItem } from "./utils";
-import { MoldingUtils } from "../../utils/export";
 // variables
 var pinFlag = false;
 var sFlag = false; //for all object move
 var sPoint = {}; //for all object move
-var mouseDownPoint = {}; // mouse clicked point
 var endPoint = {};
 var current_sel_obj_id = null;
 var allItemRect;
@@ -126,8 +123,7 @@ export default function Viewer2D(_ref, _ref2) {
     width = _ref.width,
     height = _ref.height,
     setToolbar = _ref.setToolbar,
-    replaceCabinet = _ref.replaceCabinet,
-    onInternalEvent = _ref.onInternalEvent;
+    replaceCabinet = _ref.replaceCabinet;
   var viewer2DActions = _ref2.viewer2DActions,
     linesActions = _ref2.linesActions,
     holesActions = _ref2.holesActions,
@@ -582,134 +578,56 @@ export default function Viewer2D(_ref, _ref2) {
         y: y - sPoint.y
       };
       projectActions.selectAll(differs);
-    } else {
-      switch (mode) {
-        case constants.MODE_DRAWING_LINE:
-          // check whether the drawing line is started.
+    } else switch (mode) {
+      case constants.MODE_DRAWING_LINE:
+        // check whether the drawing line is started.
+        if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
           var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
+          var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
           var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
           var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
           var tlines = [];
-          if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
-            var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
-            setdrawStart(false);
-            // get the lines that have same points with drawing line.
-            getRelatedLines(tlines, drawingLine, _vertices, lines);
-            setRelatedLines(tlines);
-            linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
-          } else {
-            linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
-          }
-
-          // Blocked 90 degree snap.
-          // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
-          // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
-          // let dx = Math.abs(x - prevVertex.x);
-          // let dy = Math.abs(y - prevVertex.y);
-          // if (dx > dy) y = prevVertex.y
-          // else x = prevVertex.x;
-          break;
-        case constants.MODE_DRAWING_HOLE:
-          holesActions.updateDrawingHole(layerID, x, y);
-          break;
-        case constants.MODE_DRAWING_ITEM:
-          var _layer = scene.layers.get(layerID);
-          var flag = false;
-          _layer.items.some(function (item) {
-            if (item.selected) {
-              item.counterTop.uri = _layer.counterTop.uri;
-              current_sel_obj_id = item.id;
-              flag = true;
-            }
-          });
-          if (current_sel_obj_id === null || !flag) {
-            itemsActions.updateDrawingItem(layerID, x, y);
-            endPoint.x = x;
-            endPoint.y = y;
-          } else {
-            prepareSnap();
-            var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
-              nx = _GeometryUtils$calcSn.nx,
-              ny = _GeometryUtils$calcSn.ny,
-              rot = _GeometryUtils$calcSn.rot,
-              rotRad = _GeometryUtils$calcSn.rotRad;
-            var _val = {
-              pos: {
-                x: x,
-                y: y
-              },
-              rotRad: rotRad,
-              size: allItemRect.cur && allItemRect.cur.size,
-              layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
-              is_corner: allItemRect.cur && allItemRect.cur.is_corner
-            };
-            var _GeometryUtils$getAll = GeometryUtils.getAllHoleRect(scene, _val),
-              _isSect = _GeometryUtils$getAll.isSect,
-              _snap = _GeometryUtils$getAll.snap;
-            if (!isEmpty(_snap) && _isSect) {
-              if (_snap.length == 1) _val.pos = {
-                x: _snap[0].x,
-                y: _snap[0].y
-              };else {
-                if ((_snap[0].x - x) * (_snap[0].x - x) + (_snap[0].y - y) * (_snap[0].y - y) < (_snap[1].x - x) * (_snap[1].x - x) + (_snap[1].y - y) * (_snap[1].y - y)) _val.pos = {
-                  x: _snap[0].x,
-                  y: _snap[0].y
-                };else _val.pos = {
-                  x: _snap[1].x,
-                  y: _snap[1].y
-                };
-              }
-              var interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
-              if (interSect) {
-                nx = _val.pos.x;
-                ny = _val.pos.y;
-              }
-            }
-            _val.pos = {
-              x: nx,
-              y: ny
-            };
-            var _isrectSect = GeometryUtils.validInterSect(allItemRect.others, _val);
-            if (_isrectSect && _isSect) {
-              itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-              itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-              endPoint.x = nx;
-              endPoint.y = ny;
-            }
-            if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
-              itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-              itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-              endPoint.x = nx;
-              endPoint.y = ny;
-            }
-            if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
-              itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-              itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-              endPoint.x = nx;
-              endPoint.y = ny;
-            }
+          setdrawStart(false);
+          // get the lines that have same points with drawing line.
+          getRelatedLines(tlines, drawingLine, _vertices, lines);
+          setRelatedLines(tlines);
+          linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
+        } else {
+          linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
+        }
+        // Blocked 90 degree snap.
+        // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
+        // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
+        // let dx = Math.abs(x - prevVertex.x);
+        // let dy = Math.abs(y - prevVertex.y);
+        // if (dx > dy) y = prevVertex.y
+        // else x = prevVertex.x;
+        break;
+      case constants.MODE_DRAWING_HOLE:
+        holesActions.updateDrawingHole(layerID, x, y);
+        break;
+      case constants.MODE_DRAWING_ITEM:
+        var _layer = scene.layers.get(layerID);
+        var flag = false;
+        _layer.items.some(function (item) {
+          if (item.selected) {
+            item.counterTop.uri = _layer.counterTop.uri;
+            current_sel_obj_id = item.id;
+            flag = true;
           }
-          break;
-        case constants.MODE_DRAGGING_HOLE:
-          holesActions.updateDraggingHole(x, y);
-          break;
-        case constants.MODE_DRAGGING_LINE:
-          linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
-          break;
-        case constants.MODE_DRAGGING_VERTEX:
-          var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
-          getConnectedLines();
-          var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
-          verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
-          break;
-        case constants.MODE_DRAGGING_ITEM:
+        });
+        if (current_sel_obj_id === null || !flag) {
+          itemsActions.updateDrawingItem(layerID, x, y);
+          endPoint.x = x;
+          endPoint.y = y;
+        } else {
           prepareSnap();
-          var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
-            nx = _GeometryUtils$calcSn2.nx,
-            ny = _GeometryUtils$calcSn2.ny,
-            rot = _GeometryUtils$calcSn2.rot,
-            rotRad = _GeometryUtils$calcSn2.rotRad;
-          var val = {
+          var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
+            nx = _GeometryUtils$calcSn.nx,
+            ny = _GeometryUtils$calcSn.ny,
+            rot = _GeometryUtils$calcSn.rot,
+            rotRad = _GeometryUtils$calcSn.rotRad;
+          var _val = {
             pos: {
               x: x,
               y: y
@@ -719,50 +637,125 @@ export default function Viewer2D(_ref, _ref2) {
             layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
             is_corner: allItemRect.cur && allItemRect.cur.is_corner
           };
-          var _GeometryUtils$getAll2 = GeometryUtils.getAllHoleRect(scene, val),
-            isSect = _GeometryUtils$getAll2.isSect,
-            snap = _GeometryUtils$getAll2.snap;
-          if (!isEmpty(snap) && isSect) {
-            if (snap.length == 1) val.pos = {
-              x: snap[0].x,
-              y: snap[0].y
-            };else if (snap.length == 2) {
-              if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
-                x: snap[0].x,
-                y: snap[0].y
-              };else val.pos = {
-                x: snap[1].x,
-                y: snap[1].y
+          var _GeometryUtils$getAll = GeometryUtils.getAllHoleRect(scene, _val),
+            _isSect = _GeometryUtils$getAll.isSect,
+            _snap = _GeometryUtils$getAll.snap;
+          if (!isEmpty(_snap) && _isSect) {
+            if (_snap.length == 1) _val.pos = {
+              x: _snap[0].x,
+              y: _snap[0].y
+            };else {
+              if ((_snap[0].x - x) * (_snap[0].x - x) + (_snap[0].y - y) * (_snap[0].y - y) < (_snap[1].x - x) * (_snap[1].x - x) + (_snap[1].y - y) * (_snap[1].y - y)) _val.pos = {
+                x: _snap[0].x,
+                y: _snap[0].y
+              };else _val.pos = {
+                x: _snap[1].x,
+                y: _snap[1].y
               };
             }
-            var _interSect = GeometryUtils.validInterSect(allItemRect.others, val);
-            if (_interSect) {
-              nx = val.pos.x;
-              ny = val.pos.y;
+            var interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+            if (interSect) {
+              nx = _val.pos.x;
+              ny = _val.pos.y;
             }
           }
-          val.pos = {
+          _val.pos = {
             x: nx,
             y: ny
           };
-          var isrectSect = GeometryUtils.validInterSect(allItemRect.others, val);
-          if (isrectSect && isSect) {
+          var _isrectSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+          if (_isrectSect && _isSect) {
             itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
             itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+            endPoint.x = nx;
+            endPoint.y = ny;
           }
-          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
+          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
             itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
             itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+            endPoint.x = nx;
+            endPoint.y = ny;
           }
           if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
             itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
             itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+            endPoint.x = nx;
+            endPoint.y = ny;
           }
-          break;
-        case constants.MODE_ROTATING_ITEM:
-          itemsActions.updateRotatingItem(x, y);
-          break;
-      }
+        }
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        holesActions.updateDraggingHole(x, y);
+        break;
+      case constants.MODE_DRAGGING_LINE:
+        linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
+        break;
+      case constants.MODE_DRAGGING_VERTEX:
+        var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+        getConnectedLines();
+        var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
+        verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
+        break;
+      case constants.MODE_DRAGGING_ITEM:
+        prepareSnap();
+        var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
+          nx = _GeometryUtils$calcSn2.nx,
+          ny = _GeometryUtils$calcSn2.ny,
+          rot = _GeometryUtils$calcSn2.rot,
+          rotRad = _GeometryUtils$calcSn2.rotRad;
+        var val = {
+          pos: {
+            x: x,
+            y: y
+          },
+          rotRad: rotRad,
+          size: allItemRect.cur && allItemRect.cur.size,
+          layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
+          is_corner: allItemRect.cur && allItemRect.cur.is_corner
+        };
+        var _GeometryUtils$getAll2 = GeometryUtils.getAllHoleRect(scene, val),
+          isSect = _GeometryUtils$getAll2.isSect,
+          snap = _GeometryUtils$getAll2.snap;
+        if (!isEmpty(snap) && isSect) {
+          if (snap.length == 1) val.pos = {
+            x: snap[0].x,
+            y: snap[0].y
+          };else if (snap.length == 2) {
+            if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
+              x: snap[0].x,
+              y: snap[0].y
+            };else val.pos = {
+              x: snap[1].x,
+              y: snap[1].y
+            };
+          }
+          var _interSect = GeometryUtils.validInterSect(allItemRect.others, val);
+          if (_interSect) {
+            nx = val.pos.x;
+            ny = val.pos.y;
+          }
+        }
+        val.pos = {
+          x: nx,
+          y: ny
+        };
+        var isrectSect = GeometryUtils.validInterSect(allItemRect.others, val);
+        if (isrectSect && isSect) {
+          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+        }
+        if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
+          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+        }
+        if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
+          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+        }
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        itemsActions.updateRotatingItem(x, y);
+        break;
     }
     viewerEvent.originalEvent.stopPropagation();
   };
@@ -784,44 +777,38 @@ export default function Viewer2D(_ref, _ref2) {
         return;
       }
     }
-    mouseDownPoint = {
-      x: x,
-      y: y
-    };
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
-      if (sCount < 2) {
-        switch (elementData.prototype) {
-          case 'lines':
-            if (elementData.selected) {
-              if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
-              linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
-            }
-            break;
-          case 'vertices':
-            verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
-            break;
-          case 'items':
-            setToolbar('');
-            current_sel_obj_id = elementData.id;
-            if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
-              // closes the setting dialog
-              if (document.getElementById('setting_dialog')) {
-                document.getElementById('setting_dialog').style.display = 'none';
-              }
-              itemsActions.selectItem(elementData.layer, elementData.id);
-              // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
-              itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
-              replaceCabinet(false);
+      if (sCount < 2) switch (elementData.prototype) {
+        case 'lines':
+          if (elementData.selected) {
+            if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
+            linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
+          }
+          break;
+        case 'vertices':
+          verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
+          break;
+        case 'items':
+          setToolbar('');
+          current_sel_obj_id = elementData.id;
+          if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
+            // closes the setting dialog
+            if (document.getElementById('setting_dialog')) {
+              document.getElementById('setting_dialog').style.display = 'none';
             }
-            break;
-          case 'holes':
-            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
-            break;
-          default:
-            break;
-        }
+            itemsActions.selectItem(elementData.layer, elementData.id);
+            // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
+            itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
+            replaceCabinet(false);
+          }
+          break;
+        case 'holes':
+          if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
+          break;
+        default:
+          break;
       } else {
         sPoint.x = x;
         sPoint.y = y;
@@ -855,63 +842,12 @@ export default function Viewer2D(_ref, _ref2) {
     var _mapCursorPosition3 = mapCursorPosition(viewerEvent),
       x = _mapCursorPosition3.x,
       y = _mapCursorPosition3.y;
-    var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
     var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
     var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
-    var elementData = extractElementData(event.target);
-    var selectedLayer = scene.getIn(['layers', layerID]);
-    var elementPrototype = null;
-    var internalType = null;
-    switch (mode) {
-      case constants.MODE_DRAWING_LINE:
-        elementPrototype = 'lines';
-        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
-        break;
-      case constants.MODE_DRAWING_HOLE:
-        elementPrototype = 'holes';
-        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
-        break;
-      case constants.MODE_DRAWING_ITEM:
-        elementPrototype = 'items';
-        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
-        break;
-      case constants.MODE_DRAGGING_LINE:
-        elementPrototype = 'lines';
-        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
-        break;
-      case constants.MODE_DRAGGING_HOLE:
-        elementPrototype = 'holes';
-        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
-        break;
-      case constants.MODE_DRAGGING_VERTEX:
-        elementPrototype = 'lines';
-        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
-        break;
-      case constants.MODE_ROTATING_ITEM:
-        elementPrototype = 'items';
-        internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
-        break;
-
-      // item selection be came from dragging mode
-      case constants.MODE_DRAGGING_ITEM:
-        elementPrototype = 'items';
-        internalType = INTERNAL_EVENT_SELECT_ELEMENT;
-        break;
-      case constants.MODE_IDLE:
-        switch (elementData === null || elementData === void 0 ? void 0 : elementData.prototype) {
-          case 'areas':
-          case 'lines':
-          case 'holes':
-            if (isEmpty(elementData === null || elementData === void 0 ? void 0 : elementData.part)) {
-              elementPrototype = elementData === null || elementData === void 0 ? void 0 : elementData.prototype;
-              internalType = INTERNAL_EVENT_SELECT_ELEMENT;
-            }
-            break;
-        }
-        break;
-    }
     switch (mode) {
       case constants.MODE_IDLE:
+        var elementData = extractElementData(event.target);
+        var selectedLayer = scene.getIn(['layers', layerID]);
         switch (elementData ? elementData.prototype : 'none') {
           case 'areas':
             if (document.getElementById('setting_dialog')) {
@@ -948,7 +884,7 @@ export default function Viewer2D(_ref, _ref2) {
           case 'items':
             if (elementData.part === 'duplicate') {
               var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              if (!isWarningItem(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
+              itemsActions.duplicateSelected(currentObject);
               break;
             } else if (elementData.part === 'remove') {
               projectActions.remove();
@@ -958,7 +894,6 @@ export default function Viewer2D(_ref, _ref2) {
               if (document.getElementById('setting_dialog')) {
                 document.getElementById('setting_dialog').style.display = 'none';
               }
-              internalType = constants.INTERNAL_EVENT_REPLACE_CABINET;
               itemsActions.selectItem(elementData.layer, elementData.id);
               replaceCabinet(true);
               break;
@@ -973,12 +908,14 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
+                width: 150,
+                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1005,12 +942,14 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
+                width: 150,
+                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1038,12 +977,14 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
+                width: 150,
+                height: 50,
                 textAlign: 'center',
                 padding: 'auto',
                 fontSize: '16px',
@@ -1071,12 +1012,14 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
+                width: 150,
+                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1104,12 +1047,14 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
+                width: 150,
+                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1137,12 +1082,14 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
+                width: 150,
+                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1169,7 +1116,7 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (200 - bbox.width) / 2,
+                left: bbox.left - (150 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1199,7 +1146,7 @@ export default function Viewer2D(_ref, _ref2) {
         break;
       case constants.MODE_WAITING_DRAWING_LINE:
         setdrawStart(true);
-        linesActions.beginDrawingLine(layerID, x, y, state.snapMask, onInternalEvent);
+        linesActions.beginDrawingLine(layerID, x, y, state.snapMask);
         break;
       case constants.MODE_DRAWING_LINE:
         // Blocked 90 degree snap.
@@ -1213,16 +1160,13 @@ export default function Viewer2D(_ref, _ref2) {
         getConnectedLines();
         var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
         linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
-        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
+        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask);
         break;
       case constants.MODE_DRAWING_HOLE:
         holesActions.endDrawingHole(layerID, x, y);
         break;
       case constants.MODE_DRAWING_ITEM:
-        {
-          var itemData = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
-          itemsActions.endDrawingItem(layerID, itemData.isInitialPos ? itemData.x : endPoint.x, itemData.isInitialPos ? itemData.y : endPoint.y);
-        }
+        itemsActions.endDrawingItem(layerID, endPoint.x, endPoint.y);
         break;
       case constants.MODE_DRAGGING_LINE:
         linesActions.endDraggingLine(x, y, relatedLines, state.snapMask);
@@ -1243,58 +1187,18 @@ export default function Viewer2D(_ref, _ref2) {
         itemsActions.endRotatingItem(x, y);
         break;
     }
-    if (internalType) {
-      var _currentObject2;
-      var _currentObject = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
-      if (internalType === INTERNAL_EVENT_SELECT_ELEMENT && ((_currentObject2 = _currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.prototype) === 'items' && draggingDistance > constants.EPSILON) internalType = INTERNAL_EVENT_DRAG_ELEMENT;else if (internalType === INTERNAL_EVENT_DRAW_ELEMENT || draggingDistance > constants.EPSILON) {
-        var elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
-        _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
-      }
-      if (_currentObject) {
-        var _currentObject3, _currentObject4, _currentObject5;
-        var payload = (_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.toJS();
-        if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'lines') {
-          // caculating length of selected line//
-          var v_a = layer.vertices.get(_currentObject.vertices.get(0));
-          var v_b = layer.vertices.get(_currentObject.vertices.get(1));
-          var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-          var _length3 = convert(distance).from('cm').to(layer.unit);
-          payload.length = _length3;
-          //////////////////////////////////////
-        } else if (((_currentObject5 = _currentObject) === null || _currentObject5 === void 0 ? void 0 : _currentObject5.prototype) === 'items') {
-          // check this cabinet has warning box
-          payload.isWarning = isWarningItem(_currentObject);
-          // check this item is available molding
-          payload.isMoldingAvailable = MoldingUtils.isEnableItemForMolding(layer, _currentObject);
-          // check this item is snapped to wall
-          payload.isAttachedWall = MoldingUtils.isAttachedWall(layer, _currentObject);
-        }
-
-        // send selection event befor replace event
-        if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
-          onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-            type: INTERNAL_EVENT_SELECT_ELEMENT,
-            value: payload
-          });
-        }
-        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-          type: internalType,
-          value: payload
-        });
-      }
-    }
     event.stopPropagation();
   };
   var onChangeValue = function onChangeValue(value) {
     if (sFlag) return;
     var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
-    if (_zoomValue > constants.MAX_ZOOM_IN_SCALE) return;
+    if (_zoomValue > 404) return;
     if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
     if (rulerEdit !== null && value.startX && value.startY || value.lastAction === 'zoom') {
-      var _rulerEdit = document.getElementById('ruler_numberInput') && document.getElementById('ruler_numberInput'),
+      var _rulerEdit = document.getElementById('ruler_numberInput'),
         _rect;
       if (rulerEditID !== null) {
-        _rect = document.getElementById(rulerEditID) && document.getElementById(rulerEditID);
+        _rect = document.getElementById(rulerEditID);
       }
       var bbox;
       if (_rect && _rulerEdit) {