kitchen-simulator 1.0.0-alin.8 → 1.0.0-clark.100

package/es/components/viewer2d/ruler.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { convert } from "../../utils/convert-units-lite";
 import IDBroker from "../../utils/id-broker";
 import { LINE_THICKNESS, TEXT_COLOR_NEUTRAL_7 } from "../../constants";
+import { STYLE_ROOM_SHAPE } from "./line";
 var STYLE = {
   stroke: TEXT_COLOR_NEUTRAL_7,
   strokeWidth: '1px'
@@ -15,6 +16,7 @@ var STYLE_TEXT = {
   textAnchor: 'middle',
   fontSize: '12px',
   pointerEvents: 'none',
+  fill: '#455A64',
   //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
   WebkitTouchCallout: 'none' /* iOS Safari */,
   WebkitUserSelect: 'none' /* Chrome/Safari/Opera */,
@@ -28,37 +30,9 @@ export default function Ruler(_ref) {
     unit = _ref.unit,
     rulerUnit = _ref.rulerUnit,
     transform = _ref.transform,
-    flag = _ref.flag;
-  var update = function update(lengthInput, unitInput, type) {
-    var newLength = toFixedFloat(lengthInput);
-    var merged = null;
-    if (type === 0) {
-      merged = value.merge({
-        _length: newLength,
-        length: convert(newLength).from(unitInput).to('cm')
-      });
-    } else {
-      merged = value.merge({
-        _length: convert(newLength).from(UNIT_INCH).to(unitInput),
-        _unit: unitInput
-      });
-    }
-    // if (hook) {
-    //   return hook(merged, sourceElement, internalState, state).then(val => {
-    //     return onUpdate(val);
-    //   });
-    // }
-    // return onUpdate(merged);
-  };
-  // let _unit = "in";
-  // let distanceText = convert(length).from(unit).to(rulerUnit);
+    style = _ref.style;
   var distanceText = convert(length).from(unit).to(rulerUnit).toFixed(0);
-  var thickness = convert(LINE_THICKNESS).from(unit).to(rulerUnit).toFixed(0);
-  // let _ft_len = convert(_length).from('in').to('ft');
-  // let _ft_val = Math.floor(_ft_len); _ft_len -= _ft_val;
-  // let _in_val = convert(_ft_len).from('ft').to('in').toFixed(0);
-  // let distanceText = `${_ft_val}'${_in_val}"`;
-  var textLength = (distanceText.length + layer.unit.length) * 18;
+  var textLength = (distanceText.length + layer.unit.length) * 9;
   return /*#__PURE__*/React.createElement("g", {
     transform: transform
   }, /*#__PURE__*/React.createElement("g", {
@@ -79,18 +53,24 @@ export default function Ruler(_ref) {
     style: STYLE_TEXT,
     fill: TEXT_COLOR_NEUTRAL_7
   }, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
-    x1: "0",
+    x1: style === STYLE_ROOM_SHAPE ? 0 : 4,
     y1: "0",
     x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
     y2: "0",
-    style: STYLE
+    style: style
   }), /*#__PURE__*/React.createElement("line", {
     x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
     y1: "0",
-    x2: length,
+    x2: style === STYLE_ROOM_SHAPE ? length : length - 4,
     y2: "0",
-    style: STYLE
-  }));
+    style: style
+  }), style !== STYLE_ROOM_SHAPE && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("polygon", {
+    points: "3, 0, 6.5, -2, 6.5, 2 ",
+    style: style
+  }), /*#__PURE__*/React.createElement("polygon", {
+    points: "".concat(length - 3, ", 0, ").concat(length - 6.5, ", 2, ").concat(length - 6.5, ", -2"),
+    style: style
+  })));
 }
 Ruler.propTypes = {
   length: PropTypes.number.isRequired,

package/es/components/viewer2d/rulerDist.js

@@ -7,13 +7,15 @@ var ARROW_STYLE = {
   strokeLinecap: 'round'
 };
 var STYLE = {
-  stroke: 'black',
-  strokeWidth: '1.1px'
+  stroke: '#455A64',
+  fill: '#455A64',
+  strokeWidth: '1.5px'
 };
 var STYLE_TEXT = {
   textAnchor: 'middle',
   fontSize: '10px',
   pointerEvents: 'none',
+  fill: '#455A64',
   //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
   WebkitTouchCallout: 'none' /* iOS Safari */,
   WebkitUserSelect: 'none' /* Chrome/Safari/Opera */,
@@ -75,32 +77,24 @@ export default function RulerDist(_ref) {
       y: "0",
       transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
       style: STYLE_TEXT
-    }, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit)), /*#__PURE__*/React.createElement("circle", {
-      cx: "1",
-      cy: "0",
-      fill: "white",
-      r: "1.1",
-      stroke: "black",
-      strokeWidth: "0.6"
-    }), /*#__PURE__*/React.createElement("line", {
+    }, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
       x1: "2",
       y1: "0",
       x2: (length - textLength) / 2 < 0 ? 0 : length,
       y2: "0",
       style: STYLE
+    }), /*#__PURE__*/React.createElement("polygon", {
+      points: "1, 0, 4.5, -2, 4.5, 2 ",
+      style: STYLE
     }), /*#__PURE__*/React.createElement("line", {
       x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
       y1: "0",
       x2: length,
       y2: "0",
       style: STYLE
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: length - 1,
-      cy: "0",
-      fill: "white",
-      r: "1.1",
-      stroke: "black",
-      strokeWidth: "0.6"
+    }), /*#__PURE__*/React.createElement("polygon", {
+      points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
+      style: STYLE
     }));
   } else {
     return /*#__PURE__*/React.createElement("g", {
@@ -110,32 +104,24 @@ export default function RulerDist(_ref) {
       y: "0",
       transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
       style: STYLE_TEXT
-    }, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit)), /*#__PURE__*/React.createElement("circle", {
-      cx: "1",
-      cy: "0",
-      fill: "white",
-      r: "1.1",
-      stroke: "black",
-      strokeWidth: "0.6"
-    }), /*#__PURE__*/React.createElement("line", {
+    }, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
       x1: "2",
       y1: "0",
       x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
       y2: "0",
       style: STYLE
+    }), /*#__PURE__*/React.createElement("polygon", {
+      points: "1, 0, 4.5, -2, 4.5, 2 ",
+      style: STYLE
     }), /*#__PURE__*/React.createElement("line", {
       x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
       y1: "0",
       x2: length,
       y2: "0",
       style: STYLE
-    }), /*#__PURE__*/React.createElement("circle", {
-      cx: length - 1,
-      cy: "0",
-      fill: "white",
-      r: "1.1",
-      stroke: "black",
-      strokeWidth: "0.6"
+    }), /*#__PURE__*/React.createElement("polygon", {
+      points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
+      style: STYLE
     }));
   }
 }

package/es/components/viewer2d/viewer2d.js

@@ -1,13 +1,12 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import 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";
@@ -124,7 +123,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,
@@ -391,6 +391,7 @@ export default function Viewer2D(_ref, _ref2) {
       vertices[dragVertexId].y = y;
     }
     var absAngle, lineAngle;
+    var angles = [];
     if (draggingLine.vertices[0] !== draggingLine.vertices[1]) {
       if (isEmpty(relatedLines) && mode !== 'DRAGGING_LINE') {
         endDrag.push(true);
@@ -409,6 +410,7 @@ export default function Viewer2D(_ref, _ref2) {
         absAngle = Math.abs(lineAngle);
         var tmpRelated = [];
         GeometryUtils.getRelatedLines(tmpRelated, line, vertices, allLines, draggingLine.id);
+        angles.push(lineAngle);
         for (var j = 0; j < tmpRelated.length; j++) {
           var tmpAngle = Math.abs(GeometryUtils.angleBetweenTwoLines(tmpRelated[j], line, vertices));
           if (tmpAngle < MIN_ANGLE_DISALLOW_DRAW_WALL || tmpAngle > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
@@ -426,7 +428,6 @@ export default function Viewer2D(_ref, _ref2) {
       vtx = x;
       vty = y;
     } else {
-      var rest = MIN_ANGLE_DISALLOW_DRAW_WALL - absAngle;
       // the origin point of rotation(snapping)
       var _originVerId = draggingLine.vertices.findIndex(function (vertice) {
         return vertice !== dragVertexId;
@@ -435,12 +436,22 @@ export default function Viewer2D(_ref, _ref2) {
       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 = GeometryUtils.rotatePointAroundPoint(x, y, _ox, _oy, rest);
-        vtx = res.x;
-        vty = res.y;
+        angles.forEach(function (angle, index) {
+          if (Math.abs(angle) < MIN_ANGLE_DISALLOW_DRAW_WALL || Math.abs(angle) > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
+            var absVal = Math.abs(angle);
+            var rest = MIN_ANGLE_DISALLOW_DRAW_WALL - absVal;
+            if (absVal > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
+              absVal = 360 - absVal;
+              rest = -(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 = GeometryUtils.rotatePointAroundPoint(x, y, _ox, _oy, rest);
+            vtx = res.x;
+            vty = res.y;
+          }
+        });
       }
     }
 
@@ -536,48 +547,18 @@ export default 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 = GeometryUtils.getAllLines(layer) || [];
-        var _allLineRects = GeometryUtils.buildRectFromLines(layer, _allLines) || [];
-        var _allItemRect = 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 (!isEmpty(drawingLine)) {
+      var tlines = [];
+      getRelatedLines(tlines, drawingLine, vertices, lines);
+      setRelatedLines(tlines);
+    }
   };
   var onMouseMove = function onMouseMove(viewerEvent) {
     //workaround that allow imageful component to work
@@ -627,7 +608,6 @@ export default 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) {
@@ -713,11 +693,11 @@ export default 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 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
           nx = _GeometryUtils$calcSn2.nx,
@@ -801,35 +781,42 @@ export default 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
-            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;
+        }
+        var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+          type: INTERNAL_EVENT_SELECT_ELEMENT,
+          value: currentObject.toJS()
+        });
       } else {
         sPoint.x = x;
         sPoint.y = y;
@@ -865,10 +852,47 @@ export default 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 = 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_ITEM:
+        elementPrototype = 'items';
+        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;
+    }
     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')) {
@@ -889,10 +913,10 @@ export default 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;
             }
@@ -1178,12 +1202,7 @@ export default 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 +1217,7 @@ export default 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 +1232,14 @@ export default 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) {

package/es/components/viewer3d/libs/mtl-loader.js

@@ -4,7 +4,7 @@
  * @author angelxuanchang
  */
 
-var THREE = window.THREE || require('three');
+import * as THREE from 'three';
 var MTLLoader;
 MTLLoader = function MTLLoader(manager) {
   this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;
@@ -354,4 +354,4 @@ MTLLoader.MaterialCreator.prototype = {
     return texture;
   }
 };
-module.exports = MTLLoader;
+export default MTLLoader;

package/es/components/viewer3d/libs/obj-loader.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-var THREE = window.THREE || require('three');
+import * as THREE from 'three';
 var OBJLoader;
 OBJLoader = function OBJLoader(manager) {
   this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;
@@ -459,4 +459,4 @@ OBJLoader.prototype = {
     return container;
   }
 };
-module.exports = OBJLoader;
+export default OBJLoader;

package/es/components/viewer3d/libs/orbit-controls.js

@@ -13,9 +13,8 @@
 //    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
 //    Pan - right mouse, or arrow keys / touch: three finter swipe
 
-var THREE = window.THREE || require('three');
-var OrbitControls;
-module.exports = OrbitControls = function OrbitControls(object, domElement) {
+import * as THREE from 'three';
+export default function OrbitControls(object, domElement) {
   this.object = object;
   this.domElement = domElement !== undefined ? domElement : document;
 
@@ -623,7 +622,7 @@ module.exports = OrbitControls = function OrbitControls(object, domElement) {
   // force an update at start
 
   this.update();
-};
+}
 OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
 OrbitControls.prototype.constructor = OrbitControls;
 Object.defineProperties(OrbitControls.prototype, {

package/es/components/viewer3d/libs/pointer-lock-controls.js

@@ -1,10 +1,10 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ * Converted to ESM
  */
 
-var THREE = window.THREE || require('three');
-var PointerLockControls;
-module.exports = PointerLockControls = function PointerLockControls(camera) {
+import * as THREE from 'three';
+export default function PointerLockControls(camera) {
   var scope = this;
   camera.rotation.set(0, 0, 0);
   var pitchObject = new THREE.Object3D();
@@ -15,14 +15,14 @@ module.exports = PointerLockControls = function PointerLockControls(camera) {
   yawObject.position.y = 10;
   yawObject.add(pitchObject);
   var PI_2 = Math.PI / 2;
-  var onMouseMove = function onMouseMove(event) {
+  function onMouseMove(event) {
     if (scope.enabled === false) return;
     var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
     var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
     yawObject.rotation.y -= movementX * 0.002;
     pitchObject.rotation.x -= movementY * 0.002;
     pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, pitchObject.rotation.x));
-  };
+  }
   this.dispose = function () {
     document.removeEventListener('mousemove', onMouseMove, false);
   };
@@ -33,7 +33,6 @@ module.exports = PointerLockControls = function PointerLockControls(camera) {
   };
   this.getDirection = function () {
     // assumes the camera itself is not rotated
-
     var direction = new THREE.Vector3(0, 0, -1);
     var rotation = new THREE.Euler(0, 0, 0, 'YXZ');
     return function (v) {
@@ -42,4 +41,4 @@ module.exports = PointerLockControls = function PointerLockControls(camera) {
       return v;
     };
   }();
-};
+}