kitchen-simulator 4.0.0-queuedEvents → 4.0.0

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, zoom } from 'react-svg-pan-zoom';
+import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } 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 } 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 State from "./state";
 import * as SharedStyle from "../../shared-style";
 import { RulerX, RulerY } from "./export";
@@ -15,11 +15,13 @@ import FormNumberInput from "../style/form-number-input";
 import { convert } from "../../utils/convert-units-lite";
 import { Map } from 'immutable';
 import { formatNumber } from "../../utils/math";
-import { isEmpty } from "../../utils/helper"; // variables
+import { isEmpty, updatePayloadOfInternalEvent } from "../../utils/helper"; // variables
+import { isWarningItem } from "./utils";
 // 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;
@@ -123,7 +125,8 @@ export default function Viewer2D(_ref, _ref2) {
     width = _ref.width,
     height = _ref.height,
     setToolbar = _ref.setToolbar,
-    replaceCabinet = _ref.replaceCabinet;
+    replaceCabinet = _ref.replaceCabinet,
+    onInternalEvent = _ref.onInternalEvent;
   var viewer2DActions = _ref2.viewer2DActions,
     linesActions = _ref2.linesActions,
     holesActions = _ref2.holesActions,
@@ -578,56 +581,134 @@ 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.
-        if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
+    } else {
+      switch (mode) {
+        case constants.MODE_DRAWING_LINE:
+          // check whether the drawing line is started.
           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 = [];
-          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 (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);
           }
-        });
-        if (current_sel_obj_id === null || !flag) {
-          itemsActions.updateDrawingItem(layerID, x, y);
-          endPoint.x = x;
-          endPoint.y = y;
-        } else {
+
+          // 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;
+            }
+          }
+          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$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 = {
+          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
@@ -637,125 +718,50 @@ export default function Viewer2D(_ref, _ref2) {
             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 _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;
+            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_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;
+          break;
+        case constants.MODE_ROTATING_ITEM:
+          itemsActions.updateRotatingItem(x, y);
+          break;
+      }
     }
     viewerEvent.originalEvent.stopPropagation();
   };
@@ -777,38 +783,44 @@ 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';
+      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);
             }
-            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;
+            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);
+            }
+            break;
+          case 'holes':
+            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
+            break;
+          default:
+            break;
+        }
       } else {
         sPoint.x = x;
         sPoint.y = y;
@@ -820,15 +832,17 @@ export default function Viewer2D(_ref, _ref2) {
   var onMouseUp = function onMouseUp(viewerEvent) {
     //set move all flag false
     sFlag = false;
-    // //////////////////////
-    // setRulerEdit(null);
     var event = viewerEvent.originalEvent;
-    var bbox = event.target.getBoundingClientRect();
+    var parent = document.querySelector('#kitchen-simulator-container');
+    var targetRect = event.target.getBoundingClientRect();
+    var parentRect = parent.getBoundingClientRect();
+    var left = targetRect.left - parentRect.left;
+    var top = targetRect.top - parentRect.top;
+    left = left - (200 - targetRect.width) / 2;
+    top = top - (50 - targetRect.height) / 2;
     if (!mode.includes('ING')) {
       setToolbar('');
     }
-    // bbox.width = event.target.getBBox().width;
-    // bbox.height = event.target.getBBox().height;
     if (event.target.tagName === 'rect') {
       if (event.target.id) {
         setRulerEditID(event.target.id);
@@ -842,12 +856,63 @@ 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')) {
@@ -884,7 +949,7 @@ export default function Viewer2D(_ref, _ref2) {
           case 'items':
             if (elementData.part === 'duplicate') {
               var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              itemsActions.duplicateSelected(currentObject);
+              if (!isWarningItem(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
               break;
             } else if (elementData.part === 'remove') {
               projectActions.remove();
@@ -894,6 +959,7 @@ 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;
@@ -908,14 +974,12 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
-                width: 150,
-                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -942,14 +1006,12 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
-                width: 150,
-                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -977,14 +1039,12 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
-                width: 150,
-                height: 50,
                 textAlign: 'center',
                 padding: 'auto',
                 fontSize: '16px',
@@ -1012,14 +1072,12 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
-                width: 150,
-                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1047,14 +1105,12 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
-                width: 150,
-                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1082,14 +1138,12 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
               style: {
-                width: 150,
-                height: 50,
                 textAlign: 'center',
                 paddingRight: 10,
                 fontSize: '16px',
@@ -1116,8 +1170,8 @@ export default function Viewer2D(_ref, _ref2) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
+                left: left,
+                top: top,
                 zIndex: 1000
               }
             }, /*#__PURE__*/React.createElement(FormNumberInput, {
@@ -1146,7 +1200,7 @@ export default function Viewer2D(_ref, _ref2) {
         break;
       case constants.MODE_WAITING_DRAWING_LINE:
         setdrawStart(true);
-        linesActions.beginDrawingLine(layerID, x, y, state.snapMask);
+        linesActions.beginDrawingLine(layerID, x, y, state.snapMask, onInternalEvent);
         break;
       case constants.MODE_DRAWING_LINE:
         // Blocked 90 degree snap.
@@ -1160,13 +1214,16 @@ 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);
+        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
         break;
       case constants.MODE_DRAWING_HOLE:
         holesActions.endDrawingHole(layerID, x, y);
         break;
       case constants.MODE_DRAWING_ITEM:
-        itemsActions.endDrawingItem(layerID, endPoint.x, endPoint.y);
+        {
+          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);
+        }
         break;
       case constants.MODE_DRAGGING_LINE:
         linesActions.endDraggingLine(x, y, relatedLines, state.snapMask);
@@ -1187,24 +1244,45 @@ 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 payload = updatePayloadOfInternalEvent(_currentObject, layer, catalog);
+
+        // 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 > 404) return;
+    if (_zoomValue > constants.MAX_ZOOM_IN_SCALE) return;
     if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
     if (rulerEdit !== null && value.startX && value.startY || value.lastAction === 'zoom') {
-      var _rulerEdit = document.getElementById('ruler_numberInput'),
+      var _rulerEdit = document.getElementById('ruler_numberInput') && document.getElementById('ruler_numberInput'),
         _rect;
       if (rulerEditID !== null) {
-        _rect = document.getElementById(rulerEditID);
+        _rect = document.getElementById(rulerEditID) && document.getElementById(rulerEditID);
       }
       var bbox;
       if (_rect && _rulerEdit) {
         bbox = _rect.getBoundingClientRect();
-        // bbox.width = _rect.getBBox().width;
-        // bbox.height = _rect.getBBox().height;
         _rulerEdit.style.left = "".concat(bbox.left - (150 - bbox.width) / 2, "px");
         _rulerEdit.style.top = "".concat(bbox.top - (50 - bbox.height) / 2, "px");
       }