kitchen-simulator 1.1.1-test.9 → 2.0.1

package/lib/components/viewer2d/vertex.js

@@ -1,6 +1,7 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 //Space from the center of the point(Use cases:x - vertexthickness,y + vertexthickness )
 var vertexthickness = 4;
 var STYLE = {
@@ -71,4 +71,5 @@ function Vertex(_ref) {
 Vertex.propTypes = {
   vertex: _propTypes["default"].object.isRequired,
   layer: _propTypes["default"].object.isRequired
-};
+};
+module.exports = exports.default;

package/lib/components/viewer2d/viewer2d.js

@@ -1,10 +1,13 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Viewer2D;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactSvgPanZoom = require("react-svg-pan-zoom");
@@ -15,27 +18,14 @@ var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _export = require("./export");
 var _export2 = require("../../utils/export");
 var _formNumberInput = _interopRequireDefault(require("../style/form-number-input"));
-var _convertUnits = _interopRequireDefault(require("convert-units"));
+var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _immutable = require("immutable");
 var _math = require("../../utils/math");
 var _helper = require("../../utils/helper");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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) { (0, _defineProperty2["default"])(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; }
+// variables
 // variables
 var pinFlag = false;
 var sFlag = false; //for all object move
@@ -143,7 +133,8 @@ 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,
@@ -153,11 +144,11 @@ function Viewer2D(_ref, _ref2) {
     projectActions = _ref2.projectActions,
     catalog = _ref2.catalog;
   var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     rulerEdit = _useState2[0],
     setRulerEdit = _useState2[1];
   var _useState3 = (0, _react.useState)(null),
-    _useState4 = _slicedToArray(_useState3, 2),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     rulerEditID = _useState4[0],
     setRulerEditID = _useState4[1];
   var Viewer = (0, _react.useRef)(null);
@@ -167,11 +158,11 @@ function Viewer2D(_ref, _ref2) {
 
   // let relatedLines = [];
   var _useState5 = (0, _react.useState)([]),
-    _useState6 = _slicedToArray(_useState5, 2),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     relatedLines = _useState6[0],
     setRelatedLines = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     drawStart = _useState8[0],
     setdrawStart = _useState8[1];
   (0, _react.useEffect)(function () {
@@ -265,7 +256,7 @@ function Viewer2D(_ref, _ref2) {
     var v_0 = scene.getIn(['layers', elementData.layer, 'vertices', selectedLine.vertices[0]]);
     var v_1 = scene.getIn(['layers', elementData.layer, 'vertices', selectedLine.vertices[1]]);
     var _GeometryUtils$orderV = _export2.GeometryUtils.orderVertices([v_0, v_1]),
-      _GeometryUtils$orderV2 = _slicedToArray(_GeometryUtils$orderV, 2),
+      _GeometryUtils$orderV2 = (0, _slicedToArray2["default"])(_GeometryUtils$orderV, 2),
       v_a = _GeometryUtils$orderV2[0],
       v_b = _GeometryUtils$orderV2[1];
     var v_b_new = _export2.GeometryUtils.extendLine(v_a.x, v_a.y, v_b.x, v_b.y, value.get('length'), 2);
@@ -410,13 +401,26 @@ function Viewer2D(_ref, _ref2) {
       vertices[dragVertexId].y = y;
     }
     var absAngle, lineAngle;
+    var angles = [];
     if (draggingLine.vertices[0] !== draggingLine.vertices[1]) {
+      if ((0, _helper.isEmpty)(relatedLines) && mode !== 'DRAGGING_LINE') {
+        endDrag.push(true);
+        var originVerIndex = draggingLine.vertices.findIndex(function (vertice) {
+          return vertice !== dragVertexId;
+        });
+        var originVerId = originVerIndex < 0 ? draggingLine.vertices[0] : draggingLine.vertices[originVerIndex];
+        var ox = vertices[originVerId].x;
+        var oy = vertices[originVerId].y;
+        lineAngle = _export2.GeometryUtils.angleBetweenTwoPointsAndOrigin(ox, oy, x, y);
+        absAngle = Math.abs(lineAngle);
+      }
       for (var i = 0; i < relatedLines.length; i++) {
         var line = relatedLines[i];
         lineAngle = _export2.GeometryUtils.angleBetweenTwoLines(line, draggingLine, vertices);
         absAngle = Math.abs(lineAngle);
         var tmpRelated = [];
         _export2.GeometryUtils.getRelatedLines(tmpRelated, line, vertices, allLines, draggingLine.id);
+        angles.push(lineAngle);
         for (var j = 0; j < tmpRelated.length; j++) {
           var tmpAngle = Math.abs(_export2.GeometryUtils.angleBetweenTwoLines(tmpRelated[j], line, vertices));
           if (tmpAngle < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || tmpAngle > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
@@ -434,21 +438,30 @@ function Viewer2D(_ref, _ref2) {
       vtx = x;
       vty = y;
     } else {
-      var rest = _constants.MIN_ANGLE_DISALLOW_DRAW_WALL - absAngle;
       // the origin point of rotation(snapping)
-      var originVerId = draggingLine.vertices.findIndex(function (vertice) {
+      var _originVerId = draggingLine.vertices.findIndex(function (vertice) {
         return vertice !== dragVertexId;
       });
-      originVerId = originVerId < 0 ? draggingLine.vertices[0] : draggingLine.vertices[originVerId];
+      _originVerId = _originVerId < 0 ? draggingLine.vertices[0] : draggingLine.vertices[_originVerId];
       if (stepUnit) {
-        var ox = vertices[originVerId].x;
-        var oy = vertices[originVerId].y;
-        // determine the direction of rotation.
-        rest = lineAngle > 0 ? -rest : rest;
-        // rotate the current point to last point around the first point of drawing line.
-        var res = _export2.GeometryUtils.rotatePointAroundPoint(x, y, ox, oy, rest);
-        vtx = res.x;
-        vty = res.y;
+        var _ox = vertices[_originVerId].x;
+        var _oy = vertices[_originVerId].y;
+        angles.forEach(function (angle, index) {
+          if (Math.abs(angle) < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || Math.abs(angle) > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
+            var absVal = Math.abs(angle);
+            var rest = _constants.MIN_ANGLE_DISALLOW_DRAW_WALL - absVal;
+            if (absVal > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
+              absVal = 360 - absVal;
+              rest = -(_constants.MIN_ANGLE_DISALLOW_DRAW_WALL - absVal);
+            }
+            // determine the direction of rotation.
+            rest = angle > 0 ? -rest : rest;
+            // rotate the current point to last point around the first point of drawing line.
+            var res = _export2.GeometryUtils.rotatePointAroundPoint(x, y, _ox, _oy, rest);
+            vtx = res.x;
+            vty = res.y;
+          }
+        });
       }
     }
 
@@ -472,7 +485,7 @@ function Viewer2D(_ref, _ref2) {
     if (!(item !== null && item !== void 0 && (_item$properties = item.properties) !== null && _item$properties !== void 0 && _item$properties.getIn)) return 0;
     var length = item.properties.getIn([property, '_length']);
     var unit = item.properties.getIn([property, '_unit']);
-    return length && unit ? (0, _convertUnits["default"])(length).from(unit).to('cm') : 0;
+    return length && unit ? (0, _convertUnitsLite.convert)(length).from(unit).to('cm') : 0;
   };
   var point = function point(x, y) {
     return {
@@ -487,7 +500,7 @@ function Viewer2D(_ref, _ref2) {
     var pointArray = [];
     curItemInfo.rectCenterPoint.forEach(function (centerpoint) {
       if (!Array.isArray(centerpoint) || centerpoint.length < 2) return;
-      var _centerpoint = _slicedToArray(centerpoint, 2),
+      var _centerpoint = (0, _slicedToArray2["default"])(centerpoint, 2),
         pt = _centerpoint[0],
         angle = _centerpoint[1];
       if (!pt) return;
@@ -544,48 +557,18 @@ function Viewer2D(_ref, _ref2) {
       rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
     };
   };
-  var calcDistanceArray = function calcDistanceArray() {
-    var items = layer === null || layer === void 0 ? void 0 : layer.get('items');
-    if (!items) return;
-    items.forEach(function (item) {
-      if ((item === null || item === void 0 ? void 0 : item.selected) === true) {
-        var x = item.x,
-          y = item.y,
-          rotation = item.rotation,
-          id = item.id;
-        if (x == null || y == null) return;
-        var val = {
-          pos: {
-            x: x,
-            y: y
-          },
-          rotRad: rotation / 180 * Math.PI
-        };
-        var _width = getProperties(item, 'width');
-        var depth = getProperties(item, 'depth');
-        val.size = {
-          width: _width,
-          height: depth
-        };
-
-        // collect geometry
-        var _allLines = _export2.GeometryUtils.getAllLines(layer) || [];
-        var _allLineRects = _export2.GeometryUtils.buildRectFromLines(layer, _allLines) || [];
-        var _allItemRect = _export2.GeometryUtils.getAllItems(scene, catalog, _allLineRects) || {
-          others: []
-        };
-        var _allRect = [].concat(_toConsumableArray(_allItemRect.others || []), _toConsumableArray(_allLineRects));
-
-        // current item
-        var curItemInfo = getCalcRectFromItem(val);
-        var pointArray = getDistant(x, y, val.rotRad, curItemInfo, _allRect);
-
-        // store results safely
-        if (Array.isArray(pointArray)) {
-          itemsActions.storeDistArray(layerID, id, pointArray);
-        }
-      }
-    });
+  var getConnectedLines = function getConnectedLines() {
+    var _state$getIn;
+    var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
+    var drawingLine = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'lines', lineID])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
+    // get the lines that have same points with drawing line.
+    if (!(0, _helper.isEmpty)(drawingLine)) {
+      var tlines = [];
+      getRelatedLines(tlines, drawingLine, vertices, lines);
+      setRelatedLines(tlines);
+    }
   };
   var onMouseMove = function onMouseMove(viewerEvent) {
     //workaround that allow imageful component to work
@@ -635,7 +618,6 @@ function Viewer2D(_ref, _ref2) {
         holesActions.updateDrawingHole(layerID, x, y);
         break;
       case constants.MODE_DRAWING_ITEM:
-        calcDistanceArray();
         var _layer = scene.layers.get(layerID);
         var flag = false;
         _layer.items.some(function (item) {
@@ -721,11 +703,11 @@ function Viewer2D(_ref, _ref2) {
         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:
-        calcDistanceArray();
         prepareSnap();
         var _GeometryUtils$calcSn2 = _export2.GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
           nx = _GeometryUtils$calcSn2.nx,
@@ -809,34 +791,42 @@ function Viewer2D(_ref, _ref2) {
     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
-            // 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;
+      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);
+            }
+            break;
+          case 'holes':
+            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
+            break;
+          default:
+            break;
+        }
+        var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+          type: _constants.INTERNAL_EVENT_SELECT_ELEMENT,
+          value: currentObject.toJS()
+        });
       } else {
         sPoint.x = x;
         sPoint.y = y;
@@ -872,17 +862,58 @@ function Viewer2D(_ref, _ref2) {
       y = _mapCursorPosition3.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 elementID = null;
+    var internalType = '';
+    switch (mode) {
+      case constants.MODE_DRAWING_LINE:
+        elementPrototype = 'lines';
+        internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_HOLE:
+        elementPrototype = 'holes';
+        internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_ITEM:
+        elementPrototype = 'items';
+        internalType = _constants.INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_LINE:
+        elementPrototype = 'lines';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        elementPrototype = 'holes';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_ITEM:
+        elementPrototype = 'items';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_VERTEX:
+        elementPrototype = 'lines';
+        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        elementPrototype = 'items';
+        internalType = _constants.INTERNAL_EVENT_ROTATE_ELEMENT;
+        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':
-            // document.getElementById('setting_dialog').style.display = 'none';
+            if (document.getElementById('setting_dialog')) {
+              document.getElementById('setting_dialog').style.display = 'none';
+            }
             areaActions.selectArea(elementData.layer, elementData.id);
             break;
           case 'lines':
-            // document.getElementById('setting_dialog').style.display = 'none';
+            if (document.getElementById('setting_dialog')) {
+              document.getElementById('setting_dialog').style.display = 'none';
+            }
             if (elementData.part === 'remove') {
               projectActions.remove();
               break;
@@ -892,15 +923,17 @@ function Viewer2D(_ref, _ref2) {
               projectActions.setMode(_mode);
               break;
             } else {
-              var _tlines = [];
-              var _drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id]).toJS();
-              getRelatedLines(_tlines, _drawingLine, vertices, lines);
-              setRelatedLines(_tlines);
+              var tlines = [];
+              var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id]).toJS();
+              getRelatedLines(tlines, drawingLine, vertices, lines);
+              setRelatedLines(tlines);
               linesActions.selectLine(elementData.layer, elementData.id);
               break;
             }
           case 'holes':
-            // document.getElementById('setting_dialog').style.display = 'none';
+            if (document.getElementById('setting_dialog')) {
+              document.getElementById('setting_dialog').style.display = 'none';
+            }
             holesActions.selectHole(elementData.layer, elementData.id);
             break;
           case 'items':
@@ -913,8 +946,9 @@ function Viewer2D(_ref, _ref2) {
               break;
             } else if (elementData.part === 'warning_edit') {
               // closes the setting dialog
-              // document.getElementById('setting_dialog').style.display = 'none';
-
+              if (document.getElementById('setting_dialog')) {
+                document.getElementById('setting_dialog').style.display = 'none';
+              }
               itemsActions.selectItem(elementData.layer, elementData.id);
               replaceCabinet(true);
               break;
@@ -923,7 +957,7 @@ function Viewer2D(_ref, _ref2) {
               break;
             }
           case 'rulerDist':
-            var _length1 = (0, _convertUnits["default"])(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var _length1 = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
             var distanceText1 = "".concat((0, _math.formatNumber)(_length1, _constants.DECIMAL_PLACES_2));
             var numberInput1 = /*#__PURE__*/_react["default"].createElement("div", {
               id: "ruler_numberInput",
@@ -946,7 +980,7 @@ function Viewer2D(_ref, _ref2) {
               value: distanceText1,
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value).from(scene.rulerUnit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
                   _length: event.target.value,
                   _unit: scene.rulerUnit
                 });
@@ -958,7 +992,7 @@ function Viewer2D(_ref, _ref2) {
             projectActions.unselectAll();
             break;
           case 'ruler':
-            var _length = (0, _convertUnits["default"])(elementData.length).from(scene.unit).to(selectedLayer.unit);
+            var _length = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(selectedLayer.unit);
             var numberInput = /*#__PURE__*/_react["default"].createElement("div", {
               id: "ruler_numberInput",
               style: {
@@ -980,7 +1014,7 @@ function Viewer2D(_ref, _ref2) {
               value: (0, _math.formatNumber)(_length, _constants.DECIMAL_PLACES_2),
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value).from(selectedLayer.unit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value).from(selectedLayer.unit).to(scene.unit),
                   _length: event.target.value,
                   _unit: selectedLayer.unit
                 });
@@ -992,7 +1026,7 @@ function Viewer2D(_ref, _ref2) {
             projectActions.unselectAll();
             break;
           case 'twoHoleRuler':
-            var _lengthTwoHoleRuler = (0, _convertUnits["default"])(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var _lengthTwoHoleRuler = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
             var distanceTextTwoHoleRuler = "".concat((0, _math.formatNumber)(_lengthTwoHoleRuler, _constants.DECIMAL_PLACES_2));
             var numberInputTwoHoleRuler = /*#__PURE__*/_react["default"].createElement("div", {
               id: "ruler_numberInput",
@@ -1015,7 +1049,7 @@ function Viewer2D(_ref, _ref2) {
               value: distanceTextTwoHoleRuler,
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value / 2).from(scene.rulerUnit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value / 2).from(scene.rulerUnit).to(scene.unit),
                   _length: event.target.value / 2,
                   _unit: scene.rulerUnit
                 });
@@ -1027,7 +1061,7 @@ function Viewer2D(_ref, _ref2) {
             projectActions.unselectAll();
             break;
           case 'leftHoleRuler':
-            var _lengthLeftHoleRuler = (0, _convertUnits["default"])(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var _lengthLeftHoleRuler = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
             var distanceTextLeftHoleRuler = "".concat(_lengthLeftHoleRuler.toFixed(2));
             var numberInputLeftHoleRuler = /*#__PURE__*/_react["default"].createElement("div", {
               id: "ruler_numberInput",
@@ -1050,7 +1084,7 @@ function Viewer2D(_ref, _ref2) {
               value: distanceTextLeftHoleRuler,
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value).from(scene.rulerUnit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
                   _length: event.target.value,
                   _unit: scene.rulerUnit
                 });
@@ -1062,7 +1096,7 @@ function Viewer2D(_ref, _ref2) {
             projectActions.unselectAll();
             break;
           case 'rulerHole':
-            var _lengthRulerHole = (0, _convertUnits["default"])(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var _lengthRulerHole = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
             var distanceTextRulerHole = "".concat((0, _math.formatNumber)(_lengthRulerHole, _constants.DECIMAL_PLACES_2));
             var numberInputRulerHole = /*#__PURE__*/_react["default"].createElement("div", {
               id: "ruler_numberInput",
@@ -1085,7 +1119,7 @@ function Viewer2D(_ref, _ref2) {
               value: distanceTextRulerHole,
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value).from(scene.rulerUnit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
                   _length: event.target.value,
                   _unit: scene.rulerUnit
                 });
@@ -1097,7 +1131,7 @@ function Viewer2D(_ref, _ref2) {
             projectActions.unselectAll();
             break;
           case 'rightHoleRuler':
-            var _lengthRightHoleRuler = (0, _convertUnits["default"])(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var _lengthRightHoleRuler = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
             var distanceTextRightHoleRuler = "".concat(_lengthRightHoleRuler.toFixed(2));
             var numberInputRightHoleRuler = /*#__PURE__*/_react["default"].createElement("div", {
               id: "ruler_numberInput",
@@ -1120,7 +1154,7 @@ function Viewer2D(_ref, _ref2) {
               value: distanceTextRightHoleRuler,
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value).from(scene.rulerUnit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
                   _length: event.target.value,
                   _unit: scene.rulerUnit
                 });
@@ -1149,7 +1183,7 @@ function Viewer2D(_ref, _ref2) {
               value: _length2,
               onChange: function onChange(event) {
                 var value = new _immutable.Map({
-                  length: (0, _convertUnits["default"])(event.target.value).from(scene.rulerUnit).to(scene.unit),
+                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
                   _length: event.target.value,
                   _unit: scene.rulerUnit
                 });
@@ -1178,12 +1212,7 @@ function Viewer2D(_ref, _ref2) {
         // if (dx > dy) y = prevVertex.y
         // else x = prevVertex.x;
         setdrawStart(true);
-        var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-        var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
-        // get the lines that have same points with drawing line.
-        var tlines = [];
-        getRelatedLines(tlines, drawingLine, vertices, lines);
-        setRelatedLines(tlines);
+        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);
@@ -1198,6 +1227,7 @@ function Viewer2D(_ref, _ref2) {
         linesActions.endDraggingLine(x, y, relatedLines, state.snapMask);
         break;
       case constants.MODE_DRAGGING_VERTEX:
+        getConnectedLines();
         var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
         verticesActions.endDraggingVertex(result.x, result.y, state.snapMask);
         break;
@@ -1212,6 +1242,14 @@ function Viewer2D(_ref, _ref2) {
         itemsActions.endRotatingItem(x, y);
         break;
     }
+    if (elementPrototype) {
+      elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
+      var _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: internalType,
+        value: _currentObject.toJS()
+      });
+    }
     event.stopPropagation();
   };
   var onChangeValue = function onChangeValue(value) {
@@ -1402,4 +1440,5 @@ Viewer2D.contextTypes = {
   areaActions: _propTypes["default"].object.isRequired,
   projectActions: _propTypes["default"].object.isRequired,
   catalog: _propTypes["default"].object.isRequired
-};
+};
+module.exports = exports.default;