kitchen-simulator 2.0.16 → 2.0.17

package/es/utils/isolate-event-handler.js

@@ -5,7 +5,7 @@ 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Map } from 'immutable';
-import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, ZOOM_VARIABLE, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_DUPLICATE_ELEMENT, EXTERNAL_EVENT_DELETE_ELEMENT, ELEMENT_HOLE, ELEMENT_ITEM, ELEMENT_LINE, MAX_ZOOM_IN_SCALE } from "../constants";
+import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, MODE_DRAWING_LINE, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, ZOOM_VARIABLE, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING, EXTERNAL_EVENT_PROJECT_SETTING, PROJECT_SETTING_OPTION, EXTERNAL_EVENT_SYNC_SCENE, INTERNAL_EVENT_SYNC_SCENE, EXTERNAL_EVENT_UPDATE_ATTRIBUTE, ATT_ITEM_POS, ATT_LINE_LENGTH, ATT_VERTEXT_ONE, ATT_VERTEXT_TWO, ATT_HOLE_OFFSET_A, ATT_HOLE_OFFSET_B, UNIT_CENTIMETER, UNIT_INCH, EXTERNAL_EVENT_UPDATE_PROPERTY, PROP_FLIP_DOOR_HANDLE, PROP_OPEN_DOORS, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG, EXTERNAL_EVENT_ADD_HOLE, EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_DUPLICATE_ELEMENT, EXTERNAL_EVENT_DELETE_ELEMENT, ELEMENT_HOLE, ELEMENT_ITEM, ELEMENT_LINE, MAX_ZOOM_IN_SCALE, EXTERNAL_EVENT_REPLACE_CABINET } from "../constants";
 import { isEmpty } from "./helper";
 import exporter from "../catalog/utils/exporter";
 import { render2DItem, render3DItem, render3DApplianceItem, render3DLightingItem } from "../catalog/utils/item-loader";
@@ -984,7 +984,7 @@ export function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, _evt$payload5, moveType, moveValue, value, defaulTitle, _evt$payload6, doorStyle, itemCDS, isAll, _doorStyle, _value, _value2, layer, bb, w, h, viewer, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value3, layerId, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i2, _i3, _i4, _props$onInternalEven2, _t5, _t6;
+    var evt, state, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, _evt$payload5, moveType, moveValue, value, defaulTitle, _evt$payload6, doorStyle, itemCDS, isAll, _doorStyle, _value, _value2, layer, bb, w, h, viewer, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value3, layerId, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i2, _i3, _i4, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven2, _t5, _t6;
     return _regeneratorRuntime.wrap(function (_context9) {
       while (1) switch (_context9.prev = _context9.next) {
         case 0:
@@ -992,7 +992,7 @@ function _handleExternalEvent() {
           evt = props.externalEvent;
           state = props.state.get('KitchenConfigurator');
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
-          _context9.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 19 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 20 : _t5 === EXTERNAL_EVENT_SET_INITIAL_DATA ? 21 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 22 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 23 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 24 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 25 : _t5 === EXTERNAL_EVENT_UNDO ? 26 : _t5 === EXTERNAL_EVENT_REDO ? 27 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 28 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 30 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 31 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 32 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 33 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 33 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 34 : 35;
+          _context9.next = _t5 === EXTERNAL_EVENT_LOAD_PROJECT ? 1 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 5 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 6 : _t5 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 7 : _t5 === EXTERNAL_EVENT_ADD_WALL ? 8 : _t5 === EXTERNAL_EVENT_ADD_ITEM ? 9 : _t5 === EXTERNAL_EVENT_ADD_HOLE ? 12 : _t5 === EXTERNAL_EVENT_MOVE_PAN ? 13 : _t5 === EXTERNAL_EVENT_NEW_PROJECT ? 19 : _t5 === EXTERNAL_EVENT_CHANGE_DOORSTYLE ? 20 : _t5 === EXTERNAL_EVENT_SET_INITIAL_DATA ? 21 : _t5 === EXTERNAL_EVENT_ADD_ROOM_SHAPE ? 22 : _t5 === EXTERNAL_EVENT_ZOOM_IN ? 23 : _t5 === EXTERNAL_EVENT_ZOOM_OUT ? 24 : _t5 === EXTERNAL_EVENT_CENTERING_2D ? 25 : _t5 === EXTERNAL_EVENT_UNDO ? 26 : _t5 === EXTERNAL_EVENT_REDO ? 27 : _t5 === EXTERNAL_EVENT_SET_MOLDING ? 28 : _t5 === EXTERNAL_EVENT_DUPLICATE_ELEMENT ? 30 : _t5 === EXTERNAL_EVENT_DELETE_ELEMENT ? 31 : _t5 === EXTERNAL_EVENT_PROJECT_SETTING ? 32 : _t5 === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? 33 : _t5 === EXTERNAL_EVENT_UPDATE_PROPERTY ? 33 : _t5 === EXTERNAL_EVENT_REPLACE_CABINET ? 34 : _t5 === EXTERNAL_EVENT_SYNC_SCENE ? 36 : 37;
           break;
         case 1:
           // prepare item data request
@@ -1068,23 +1068,23 @@ function _handleExternalEvent() {
               };
             }());
           }
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 5:
           props.projectActions.setMode(MODE_IDLE_3D);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 6:
           props.projectActions.setMode(MODE_IDLE);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 7:
           sLineCnt = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size;
           if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 8:
           if (state.mode === MODE_IDLE || state.mode === MODE_2D_PAN) props.linesActions.selectToolDrawingLine('wall');else {
             props.projectActions.setMode(MODE_IDLE);
             props.linesActions.selectToolDrawingLine('wall');
           }
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 9:
           if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
             _context9.next = 11;
@@ -1115,10 +1115,10 @@ function _handleExternalEvent() {
           props.projectActions.pushLastSelectedCatalogElementToHistory(element);
           props.projectActions.setIsCabinetDrawing(true);
         case 11:
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 12:
           ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 13:
           _evt$payload5 = evt.payload, moveType = _evt$payload5.moveType, moveValue = _evt$payload5.moveValue;
           value = state.getIn(['viewer2D']).toJS();
@@ -1139,23 +1139,23 @@ function _handleExternalEvent() {
           return _context9.abrupt("continue", 18);
         case 18:
           updateViwer2D(value, props.viewer2DActions);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 19:
           defaulTitle = 'Untitle';
           props.projectActions.newProject();
           props.projectActions.rename(defaulTitle);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 20:
           _evt$payload6 = evt.payload, doorStyle = _evt$payload6.doorStyle, itemCDS = _evt$payload6.itemCDS, isAll = _evt$payload6.isAll;
           props.itemsActions.setDoorStyle(doorStyle, itemCDS, isAll);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 21:
           _doorStyle = evt.payload.doorStyle;
           props.itemsActions.setInitialDoorStyle(_doorStyle.doorStyle);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 22:
           props.projectActions.loadProject(evt.payload);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 23:
           _value = state.getIn(['viewer2D']).toJS();
           _value.a += 0.1;
@@ -1163,7 +1163,7 @@ function _handleExternalEvent() {
           _value.e -= _value.SVGWidth * 0.1 / 2;
           _value.f -= _value.SVGHeight * 0.1 / 2;
           updateViwer2D(_value, props.viewer2DActions);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 24:
           _value2 = state.getIn(['viewer2D']).toJS();
           _value2.a -= 0.1;
@@ -1171,7 +1171,7 @@ function _handleExternalEvent() {
           _value2.e += _value2.SVGWidth * 0.1 / 2;
           _value2.f += _value2.SVGHeight * 0.1 / 2;
           updateViwer2D(_value2, props.viewer2DActions);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 25:
           // calculate the bounding box of all elements in plan
           layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
@@ -1205,28 +1205,28 @@ function _handleExternalEvent() {
             viewer.d = 0.99;
           }
           updateViwer2D(viewer, props.viewer2DActions);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 26:
           props.projectActions.undo();
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 27:
           props.projectActions.redo();
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 28:
           _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
           _context9.next = 29;
           return loadMoldingSvg(moldingInfo);
         case 29:
           props.itemsActions.setMolding(moldingInfo, isGlobal);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 30:
           distElement = getElement(evt.payload, state);
           if (distElement) props.itemsActions.duplicateSelected(distElement);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 31:
           _distElement = getElement(evt.payload, state);
           if (_distElement) props.projectActions.remove(_distElement);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 32:
           _evt$payload8 = evt.payload, option = _evt$payload8.option, _value3 = _evt$payload8.value;
           if (option === PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT) {
@@ -1241,7 +1241,7 @@ function _handleExternalEvent() {
           } else if (option === PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE) {
             props.viewer2DActions.changeWindowDoorMeasure(_value3);
           }
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 33:
           layerId = state.getIn(['scene', 'selectedLayer']);
           _layer = state.getIn(['scene', 'layers', layerId]);
@@ -1249,8 +1249,31 @@ function _handleExternalEvent() {
           for (_i2 = 0; _i2 < selectedLines.size; _i2++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i2)]), evt.payload, state, _layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['lines', selectedLines.get(_i2)]), evt.payload, props.catalog, props.projectActions, evt.callback);
           for (_i3 = 0; _i3 < selectedHoles.size; _i3++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i3)]), evt.payload, state, _layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['holes', selectedHoles.get(_i3)]), evt.payload, props.catalog, props.projectActions, evt.callback);
           for (_i4 = 0; _i4 < selectedItems.size; _i4++) (evt === null || evt === void 0 ? void 0 : evt.type) === EXTERNAL_EVENT_UPDATE_ATTRIBUTE ? updateAttributeOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i4)]), evt.payload, state, _layer, props.projectActions, evt.callback) : updatePropertyOfSelectedElement(_layer.getIn(['items', selectedItems.get(_i4)]), evt.payload, props.catalog, props.projectActions, evt.callback);
-          return _context9.abrupt("continue", 35);
+          return _context9.abrupt("continue", 37);
         case 34:
+          _layerID = state.scene.selectedLayer;
+          _layer2 = state.scene.getIn(['layers', _layerID]).toJS();
+          orginalItemInfo = evt === null || evt === void 0 || (_evt$payload9 = evt.payload) === null || _evt$payload9 === void 0 ? void 0 : _evt$payload9.orginalItemInfo;
+          originalItem = _layer2 === null || _layer2 === void 0 ? void 0 : _layer2.items[orginalItemInfo.id];
+          _context9.next = 35;
+          return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
+        case 35:
+          originalItemPos = {
+            rotation: originalItem.rotation,
+            selectedItemId: originalItem.id,
+            x: originalItem.x,
+            y: originalItem.y
+          };
+          replaceItem = {
+            name: evt === null || evt === void 0 || (_evt$payload0 = evt.payload) === null || _evt$payload0 === void 0 || (_evt$payload0 = _evt$payload0.replaceItemInfo) === null || _evt$payload0 === void 0 ? void 0 : _evt$payload0.name,
+            info: {
+              width: evt === null || evt === void 0 || (_evt$payload1 = evt.payload) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.replaceItemInfo) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.sizeinfo) === null || _evt$payload1 === void 0 ? void 0 : _evt$payload1.width,
+              height: evt === null || evt === void 0 || (_evt$payload10 = evt.payload) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.replaceItemInfo) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.sizeinfo) === null || _evt$payload10 === void 0 ? void 0 : _evt$payload10.height
+            }
+          };
+          props.itemsActions.replaceItem(originalItemPos, originalItem, replaceItem);
+          return _context9.abrupt("continue", 37);
+        case 36:
           // send scene object from 3DTool to HostApp using internalEvent
           (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
             type: INTERNAL_EVENT_SYNC_SCENE,
@@ -1258,8 +1281,8 @@ function _handleExternalEvent() {
               scene: state.scene.toJS()
             }
           });
-          return _context9.abrupt("continue", 35);
-        case 35:
+          return _context9.abrupt("continue", 37);
+        case 37:
         case "end":
           return _context9.stop();
       }

package/lib/components/viewer2d/viewer2d.js

@@ -577,6 +577,7 @@ function Viewer2D(_ref, _ref2) {
     // let evt = new Event('mousemove-planner-event');
     // evt.viewerEvent = viewerEvent;
     // document.dispatchEvent(evt);
+    var elementPrototype, internalType;
     var _mapCursorPosition = mapCursorPosition(viewerEvent),
       x = _mapCursorPosition.x,
       y = _mapCursorPosition.y;
@@ -590,56 +591,168 @@ 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:
+          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_HOLE:
+          elementPrototype = 'holes';
+          internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_LINE:
+          elementPrototype = 'lines';
+          internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_VERTEX:
+          elementPrototype = 'lines';
+          internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
+          break;
+        case constants.MODE_DRAGGING_ITEM:
+          elementPrototype = 'items';
+          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_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 = _export2.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 = _export2.GeometryUtils.getAllHoleRect(scene, _val),
+              _isSect = _GeometryUtils$getAll.isSect,
+              _snap = _GeometryUtils$getAll.snap;
+            if (!(0, _helper.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 = _export2.GeometryUtils.validInterSect(allItemRect.others, _val);
+              if (interSect) {
+                nx = _val.pos.x;
+                ny = _val.pos.y;
+              }
+            }
+            _val.pos = {
+              x: nx,
+              y: ny
+            };
+            var _isrectSect = _export2.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 = _export2.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 = _export2.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
@@ -649,125 +762,58 @@ function Viewer2D(_ref, _ref2) {
             layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
             is_corner: allItemRect.cur && allItemRect.cur.is_corner
           };
-          var _GeometryUtils$getAll = _export2.GeometryUtils.getAllHoleRect(scene, _val),
-            _isSect = _GeometryUtils$getAll.isSect,
-            _snap = _GeometryUtils$getAll.snap;
-          if (!(0, _helper.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 = _export2.GeometryUtils.getAllHoleRect(scene, val),
+            isSect = _GeometryUtils$getAll2.isSect,
+            snap = _GeometryUtils$getAll2.snap;
+          if (!(0, _helper.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 = _export2.GeometryUtils.validInterSect(allItemRect.others, _val);
-            if (interSect) {
-              nx = _val.pos.x;
-              ny = _val.pos.y;
+            var _interSect = _export2.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 = _export2.GeometryUtils.validInterSect(allItemRect.others, _val);
-          if (_isrectSect && _isSect) {
+          var isrectSect = _export2.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 = _export2.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 = _export2.GeometryUtils.getAllHoleRect(scene, val),
-          isSect = _GeometryUtils$getAll2.isSect,
-          snap = _GeometryUtils$getAll2.snap;
-        if (!(0, _helper.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 = _export2.GeometryUtils.validInterSect(allItemRect.others, val);
-          if (_interSect) {
-            nx = val.pos.x;
-            ny = val.pos.y;
           }
-        }
-        val.pos = {
-          x: nx,
-          y: ny
-        };
-        var isrectSect = _export2.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;
+      }
+    }
+    if (!(0, _helper.isEmpty)(elementPrototype)) {
+      var 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 === null || currentObject === void 0 ? void 0 : currentObject.toJS()
+      });
     }
     viewerEvent.originalEvent.stopPropagation();
   };
@@ -789,6 +835,10 @@ function Viewer2D(_ref, _ref2) {
         return;
       }
     }
+    if (mode === constants.MODE_DRAWING_ITEM) {
+      endPoint.x = x;
+      endPoint.y = y;
+    }
     if (mode === constants.MODE_IDLE) {
       var elementData = extractElementData(event.target);
       if (!elementData) return;
@@ -828,9 +878,22 @@ function Viewer2D(_ref, _ref2) {
             break;
         }
         var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        if (elementData.prototype === 'lines' && currentObject) {
+          // caculating length of selected line//
+          var v_a = layer.vertices.get(currentObject.vertices.get(0));
+          var v_b = layer.vertices.get(currentObject.vertices.get(1));
+          var distance = _export2.GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+          var _length = (0, _convertUnitsLite.convert)(distance).from('cm').to('in');
+          elementData.length = _length;
+          //////////////////////////////////////
+        }
+        // Adding length field to internal event payload when selected lines
+        var payloadValue = (elementData === null || elementData === void 0 ? void 0 : elementData.prototype) === 'lines' ? _objectSpread(_objectSpread({}, currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS()), {}, {
+          length: elementData === null || elementData === void 0 ? void 0 : elementData.length
+        }) : currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS();
         onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
           type: _constants.INTERNAL_EVENT_SELECT_ELEMENT,
-          value: currentObject === null || currentObject === void 0 ? void 0 : currentObject.toJS()
+          value: payloadValue
         });
       } else {
         sPoint.x = x;
@@ -954,6 +1017,10 @@ function Viewer2D(_ref, _ref2) {
               if (document.getElementById('setting_dialog')) {
                 document.getElementById('setting_dialog').style.display = 'none';
               }
+              onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+                type: constants.INTERNAL_EVENT_REPLACE_CABINET,
+                value: state.getIn(['scene', 'layers', layerID, 'items', elementData.id]).toJS()
+              });
               itemsActions.selectItem(elementData.layer, elementData.id);
               replaceCabinet(true);
               break;