kitchen-simulator 4.1.7-react-18 → 5.0.0-react.18

package/lib/components/viewer2d/viewer2d.js

@@ -1,1509 +0,0 @@
-"use strict";
-
-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");
-var _constants = _interopRequireWildcard(require("../../constants"));
-var constants = _constants;
-var _state = _interopRequireDefault(require("./state"));
-var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
-var _export = require("./export");
-var _export2 = require("../../utils/export");
-var _formNumberInput = _interopRequireDefault(require("../style/form-number-input"));
-var _convertUnitsLite = require("../../utils/convert-units-lite");
-var _immutable = require("immutable");
-var _math = require("../../utils/math");
-var _helper = require("../../utils/helper");
-var _utils = require("./utils");
-var _useAppContext2 = require("../../useAppContext");
-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 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) { (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
-var sPoint = {}; //for all object move
-var mouseDownPoint = {}; // mouse clicked point
-var endPoint = {};
-var current_sel_obj_id = null;
-var allItemRect;
-var allItemSnap;
-var allLines;
-var allLineRects;
-var allLineSnap;
-var allRect;
-var holeRect;
-var allArea;
-
-// /////////
-function mode2Tool(mode) {
-  if (pinFlag) {
-    return _reactSvgPanZoom.TOOL_NONE;
-  }
-  switch (mode) {
-    case constants.MODE_2D_PAN:
-      return _reactSvgPanZoom.TOOL_PAN;
-    case constants.MODE_2D_ZOOM_IN:
-      return _reactSvgPanZoom.TOOL_ZOOM_IN;
-    case constants.MODE_2D_ZOOM_OUT:
-      return _reactSvgPanZoom.TOOL_ZOOM_OUT;
-    case constants.MODE_IDLE:
-      return _reactSvgPanZoom.TOOL_AUTO;
-    default:
-      return _reactSvgPanZoom.TOOL_NONE;
-  }
-}
-function mode2PointerEvents(mode) {
-  switch (mode) {
-    case constants.MODE_DRAWING_LINE:
-    case constants.MODE_DRAWING_HOLE:
-    case constants.MODE_DRAWING_ITEM:
-    case constants.MODE_DRAGGING_HOLE:
-    case constants.MODE_DRAGGING_ITEM:
-    case constants.MODE_DRAGGING_LINE:
-    case constants.MODE_DRAGGING_VERTEX:
-      return {
-        pointerEvents: 'none'
-      };
-    default:
-      return {};
-  }
-}
-function mode2Cursor(mode) {
-  switch (mode) {
-    case constants.MODE_DRAGGING_HOLE:
-    case constants.MODE_DRAGGING_LINE:
-    case constants.MODE_DRAGGING_VERTEX:
-    case constants.MODE_DRAGGING_ITEM:
-      return {
-        cursor: 'move'
-      };
-    case constants.MODE_ROTATING_ITEM:
-      return {
-        cursor: 'ew-resize'
-      };
-    case constants.MODE_WAITING_DRAWING_LINE:
-    case constants.MODE_DRAWING_LINE:
-      return {
-        cursor: 'crosshair'
-      };
-    default:
-      return {
-        cursor: 'default'
-      };
-  }
-}
-function mode2DetectAutopan(mode) {
-  switch (mode) {
-    case constants.MODE_DRAWING_LINE:
-    case constants.MODE_DRAGGING_LINE:
-    case constants.MODE_DRAGGING_VERTEX:
-    case constants.MODE_DRAGGING_HOLE:
-    case constants.MODE_DRAGGING_ITEM:
-    case constants.MODE_DRAWING_HOLE:
-    case constants.MODE_DRAWING_ITEM:
-      return true;
-    default:
-      return false;
-  }
-}
-function extractElementData(node) {
-  while (!node.attributes.getNamedItem('data-element-root') && node.tagName !== 'svg') {
-    node = node.parentNode;
-  }
-  if (node.tagName === 'svg') return null;
-  return {
-    length: node.attributes.getNamedItem('data-length') ? parseFloat(node.attributes.getNamedItem('data-length').value) : 0,
-    part: node.attributes.getNamedItem('data-part') ? node.attributes.getNamedItem('data-part').value : undefined,
-    layer: node.attributes.getNamedItem('data-layer').value,
-    prototype: node.attributes.getNamedItem('data-prototype').value,
-    selected: node.attributes.getNamedItem('data-selected').value === 'true',
-    id: node.attributes.getNamedItem('data-id').value,
-    direct: node.attributes.getNamedItem('data-direct') ? node.attributes.getNamedItem('data-direct').value : 0
-  };
-}
-function Viewer2D(_ref) {
-  var _state$get;
-  var state = _ref.state,
-    width = _ref.width,
-    height = _ref.height,
-    replaceCabinet = _ref.replaceCabinet,
-    onInternalEvent = _ref.onInternalEvent;
-  var _useAppContext = (0, _useAppContext2.useAppContext)(),
-    viewer2DActions = _useAppContext.viewer2DActions,
-    linesActions = _useAppContext.linesActions,
-    holesActions = _useAppContext.holesActions,
-    verticesActions = _useAppContext.verticesActions,
-    itemsActions = _useAppContext.itemsActions,
-    areaActions = _useAppContext.areaActions,
-    projectActions = _useAppContext.projectActions,
-    catalog = _useAppContext.catalog;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    rulerEdit = _useState2[0],
-    setRulerEdit = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    rulerEditID = _useState4[0],
-    setRulerEditID = _useState4[1];
-  var Viewer = (0, _react.useRef)(null);
-  var viewer2D = state.viewer2D,
-    mode = state.mode,
-    scene = state.scene;
-
-  // let relatedLines = [];
-  var _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    relatedLines = _useState6[0],
-    setRelatedLines = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    drawStart = _useState8[0],
-    setdrawStart = _useState8[1];
-  var _useState9 = (0, _react.useState)(function () {
-      return viewer2D && !viewer2D.isEmpty() ? viewer2D.toJS() : _reactSvgPanZoom.INITIAL_VALUE;
-    }),
-    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
-    svgValue = _useState0[0],
-    setSvgValue = _useState0[1];
-  var _useState1 = (0, _react.useState)(function () {
-      return mode2Tool(mode);
-    }),
-    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    svgTool = _useState10[0],
-    setSvgTool = _useState10[1];
-  (0, _react.useEffect)(function () {
-    // keep tool controlled from app mode
-    setSvgTool(mode2Tool(mode));
-  }, [mode]);
-  (0, _react.useEffect)(function () {
-    // keep value controlled from store, but never null
-    if (viewer2D && !viewer2D.isEmpty()) setSvgValue(viewer2D.toJS());
-  }, [viewer2D]);
-  (0, _react.useEffect)(function () {
-    // move viewer point to center
-    var selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
-    var vertices = selectedLayer.vertices;
-    if (vertices.isEmpty()) {
-      return;
-    }
-    var bottomX = 0,
-      bottomY = 100000,
-      topX = 100000,
-      topY = 0;
-    vertices.forEach(function (vertex) {
-      if (bottomX < vertex.x) bottomX = vertex.x;
-      if (bottomY > vertex.y) bottomY = vertex.y;
-      if (topX > vertex.x) topX = vertex.x;
-      if (topY < vertex.y) topY = vertex.y;
-    });
-    var moveX = topX + (bottomX - topX) / 2;
-    var moveY = 2000 - (bottomY + (topY - bottomY) / 2);
-    Viewer.current.setPointOnViewerCenter(moveX, moveY, viewer2D.get('a'));
-  }, []);
-  var layerID = scene.selectedLayer;
-  var wall_thickness = _constants.LINE_THICKNESS / 2;
-  var layer = scene.getIn(['layers', layerID]);
-  var mapCursorPosition = function mapCursorPosition(_ref2) {
-    var x = _ref2.x,
-      y = _ref2.y;
-    return {
-      x: x,
-      y: -y + scene.height
-    };
-  };
-  // let pinBackColor = pinFlag ? "#4488ff" : "black";
-  // let topRightImg = state.mode == MODE_IDLE || state.mode == MODE_2D_PAN ? "/assets/img/svg/topbar/edit_inactive.svg" : "/assets/img/svg/topbar/edit_active.svg";
-  // let topBtnAction = state.mode == MODE_IDLE || state.mode == MODE_2D_PAN ? () => linesActions.selectToolDrawingLine("wall") : () => projectActions.setMode(MODE_IDLE);
-
-  var prepareSnap = function prepareSnap() {
-    var layerID = scene.selectedLayer;
-    var layer = scene.layers.get(layerID);
-    allLines = _export2.GeometryUtils.getAllLines(layer);
-    allLineRects = _export2.GeometryUtils.buildRectFromLines(layer, allLines);
-    allItemRect = _export2.GeometryUtils.getAllItems(scene, catalog, allLineRects);
-    allItemSnap = _export2.GeometryUtils.getAllItemSnap(allItemRect);
-    allLineSnap = _export2.GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
-    allRect = allItemRect.others.concat(allLineRects);
-    allItemSnap = _export2.GeometryUtils.validateSnaps(allItemSnap, allRect);
-    allLineSnap = _export2.GeometryUtils.validateSnaps(allLineSnap, allRect);
-    allArea = _export2.GeometryUtils.getAllArea(layer);
-  };
-  var updateRulerDistAttribute = function updateRulerDistAttribute(elementData, value) {
-    var _scene$getIn;
-    var newVal = value.get('length');
-    var oldVal = elementData.length;
-    var direct = elementData.direct;
-    var thisItem = (_scene$getIn = scene.getIn(['layers', elementData.layer, 'items', elementData.id])) === null || _scene$getIn === void 0 ? void 0 : _scene$getIn.toJS();
-    var oldX = thisItem.x;
-    var oldY = thisItem.y;
-    var oldRotRad = thisItem.rotation / 180 * Math.PI;
-    var rotRad = oldRotRad + direct / 180 * Math.PI;
-    var delta = oldVal - newVal;
-    var newX = oldX + delta * Math.cos(rotRad);
-    var newY = oldY + delta * Math.sin(rotRad);
-    itemsActions.updateDraggingItemChanged(newX, newY, elementData.layer, elementData.id);
-    setRulerEdit(null);
-  };
-  var updateangleChangeAttribute = function updateangleChangeAttribute(elementData, value) {
-    var verArr = elementData.id.split(',');
-    var oldAngle = elementData.length;
-    var newAngle = value.getIn(['_length']);
-    var cenId = verArr[0];
-    var verId = verArr[1];
-    var x0 = state.scene.getIn(['layers', layerID, 'vertices', verArr[0], 'x']);
-    var y0 = state.scene.getIn(['layers', layerID, 'vertices', verArr[0], 'y']);
-    var x1 = state.scene.getIn(['layers', layerID, 'vertices', verArr[1], 'x']);
-    var y1 = state.scene.getIn(['layers', layerID, 'vertices', verArr[1], 'y']);
-    var x, y, delta;
-    delta = newAngle - oldAngle;
-    if (verArr[2] === 'true') {
-      delta = -delta;
-    }
-    x = (x1 - x0) * Math.cos(delta * Math.PI / 180) - (y1 - y0) * Math.sin(delta * Math.PI / 180) + x0;
-    y = (x1 - x0) * Math.sin(delta * Math.PI / 180) + (y1 - y0) * Math.cos(delta * Math.PI / 180) + y0;
-    setRulerEdit(null);
-    verticesActions.beginDraggingVertex(elementData.layer, verArr[1], x, y, state.snapMask);
-    verticesActions.updateDraggingVertex(x, y, state.snapMask);
-    verticesActions.endDraggingVertex(x, y, state.snapMask);
-  };
-  var updateRulerAttribute = function updateRulerAttribute(elementData, value) {
-    var _scene$getIn2;
-    var selectedLine = (_scene$getIn2 = scene.getIn(['layers', elementData.layer, 'lines', elementData.id])) === null || _scene$getIn2 === void 0 ? void 0 : _scene$getIn2.toJS();
-    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 = (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);
-
-    // Blocked function that as wall changed, opposite wall should changed together.
-    // let layer = scene.getIn(['layers', elementData.layer]);
-    // let allLines = layer.lines.toArray()
-    // let relatedLine = allLines.filter(line => { return line.vertices.toArray().includes(v_b.id) && line.id != selectedLine.id })[0];
-    // let relatedVertexID = relatedLine && (relatedLine.vertices.toArray()[0] == v_b.id ? relatedLine.vertices.toArray()[1] : relatedLine.vertices.toArray()[0]);
-    // let v_d = relatedVertexID && layer.getIn(['vertices', relatedVertexID]);
-    // let delta = {
-    //   x : v_b_new.x - v_b.x,
-    //   y : v_b_new.y - v_b.y
-    // };
-    // let newPosition = {
-    //   x : v_d.x + delta.x,
-    //   y : v_d.y + delta.y
-    // }
-
-    var attributesData = {
-      // (v_0 === v_a ? 'vertexTwo' : 'vertexOne') : v_b.merge(v_b_new)),
-      lineLength: value
-    };
-    if (v_0 === v_a) {
-      attributesData = _objectSpread(_objectSpread({}, attributesData), {}, {
-        vertexTwo: v_b.merge(v_b_new),
-        vertexOne: v_a
-      });
-    } else {
-      attributesData = _objectSpread(_objectSpread({}, attributesData), {}, {
-        vertexOne: v_b.merge(v_b_new),
-        vertexTwo: v_a
-      });
-    }
-    var attributesFormData = new _immutable.Map(_objectSpread({}, attributesData));
-    setRulerEdit(null);
-    projectActions.setLinesAttributes(attributesFormData, true, {
-      layerID: elementData.layer,
-      lineID: elementData.id
-    });
-
-    // Blocked function that as wall changed, opposite wall should changed together.
-    // verticesActions.beginDraggingVertex(elementData.layer, relatedVertexID, newPosition.x, newPosition.y, state.snapMask);
-    // verticesActions.updateDraggingVertex(newPosition.x, newPosition.y, state.snapMask);
-    // verticesActions.endDraggingVertex(newPosition.x, newPosition.y, state.snapMask);
-  };
-  var updateTwoHoleRulerAttribute = function updateTwoHoleRulerAttribute(elementData, value) {
-    var elementIds = elementData.id.split(',');
-    elementData.id = elementIds[1];
-    elementData.length /= 2;
-    updateLeftHoleRulerAttribute(elementData, value);
-    elementData.id = elementIds[0];
-    updateRightHoleRulerAttribute(elementData, value);
-  };
-  var updateLeftHoleRulerAttribute = function updateLeftHoleRulerAttribute(elementData, value) {
-    var _scene$getIn3;
-    var newVal = value.get('length');
-    var oldVal = elementData.length;
-    var thisItem = (_scene$getIn3 = scene.getIn(['layers', elementData.layer, 'holes', elementData.id])) === null || _scene$getIn3 === void 0 ? void 0 : _scene$getIn3.toJS();
-    var oldX = thisItem.x;
-    var oldY = thisItem.y;
-    var oldRotRad = thisItem.rotation;
-    var delta = oldVal - newVal;
-    var newX = oldX - delta * Math.cos(oldRotRad);
-    var newY = oldY - delta * Math.sin(oldRotRad);
-    holesActions.beginDraggingHole(elementData.layer, elementData.id, newX, newY);
-    holesActions.updateDraggingHoleChanged(newX, newY, elementData.layer, elementData.id);
-    holesActions.endDraggingHole(newX, newY);
-    setRulerEdit(null);
-  };
-  var updateHoleRulerAttribute = function updateHoleRulerAttribute(elementData, value) {
-    var _scene$getIn4;
-    var newVal = value.get('length');
-    var thisItem = (_scene$getIn4 = scene.getIn(['layers', elementData.layer, 'holes', elementData.id])) === null || _scene$getIn4 === void 0 ? void 0 : _scene$getIn4.toJS();
-    var oldX = thisItem.x;
-    var oldY = thisItem.y;
-    holesActions.beginDraggingHole(elementData.layer, elementData.id, oldX, oldY);
-    holesActions.updateDraggingHoleRulerChanged(newVal, elementData.layer, elementData.id);
-    holesActions.endDraggingHole(oldX, oldY);
-    setRulerEdit(null);
-  };
-  var updateRightHoleRulerAttribute = function updateRightHoleRulerAttribute(elementData, value) {
-    var _scene$getIn5;
-    var newVal = value.get('length');
-    var oldVal = elementData.length;
-    var thisItem = (_scene$getIn5 = scene.getIn(['layers', elementData.layer, 'holes', elementData.id])) === null || _scene$getIn5 === void 0 ? void 0 : _scene$getIn5.toJS();
-    var oldX = thisItem.x;
-    var oldY = thisItem.y;
-    var oldRotRad = thisItem.rotation;
-    var delta = oldVal - newVal;
-    var newX = oldX + delta * Math.cos(oldRotRad);
-    var newY = oldY + delta * Math.sin(oldRotRad);
-    holesActions.beginDraggingHole(elementData.layer, elementData.id, newX, newY);
-    holesActions.updateDraggingHoleChanged(newX, newY, elementData.layer, elementData.id);
-    holesActions.endDraggingHole(newX, newY);
-    setRulerEdit(null);
-  };
-  var getRelatedLines = function getRelatedLines(tlines, drawingLine, vertices, lines) {
-    var _loop = function _loop() {
-      var vertex = vertices[drawingLine.vertices[i]];
-      var _loop2 = function _loop2(j) {
-        if (vertex.lines[j] !== drawingLine.id) {
-          if (!tlines.some(function (line) {
-            return line.id === lines[vertex.lines[j]].id;
-          })) {
-            tlines.push(lines[vertex.lines[j]]);
-          }
-        }
-      };
-      for (var j = 0; j < vertex.lines.length; j++) {
-        _loop2(j);
-      }
-    };
-    // if (drawingLine.vertices[0] !== drawingLine.vertices[1]) {
-    for (var i = 0; i < drawingLine.vertices.length; i++) {
-      _loop();
-    }
-    // }
-  };
-  var getEndPoint = function getEndPoint(vertices, x, y, mode) {
-    var _state$getIn, _state$getIn2;
-    var selLineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-    if ((0, _helper.isEmpty)(selLineID)) {
-      return {
-        isEndDrag: true,
-        x: x,
-        y: y
-      };
-    }
-    var draggingLine = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'lines', selLineID])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
-    var allLines = (_state$getIn2 = state.getIn(['scene', 'layers', layerID, 'lines'])) === null || _state$getIn2 === void 0 ? void 0 : _state$getIn2.toJS();
-    var dragVertexId = state.getIn(['draggingSupport', 'vertexID']);
-    dragVertexId = !(0, _helper.isEmpty)(dragVertexId) ? dragVertexId : draggingLine.vertices[1];
-    var vtx, vty;
-    var stepUnit = false;
-    vtx = vertices[dragVertexId].x;
-    vty = vertices[dragVertexId].y;
-    if (!vertices[dragVertexId].lines.some(function (line) {
-      return line !== draggingLine.id;
-    })) {
-      stepUnit = true;
-    }
-    var endDrag = [];
-    if (!(0, _helper.isEmpty)(relatedLines) && mode !== 'DRAGGING_LINE') {
-      vertices[dragVertexId].x = x;
-      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) {
-            endDrag.push(false);
-          } else endDrag.push(true);
-        }
-        if (absAngle < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
-          endDrag.push(false);
-        } else endDrag.push(true);
-      }
-    }
-    if (!endDrag.some(function (flag) {
-      return flag === false;
-    })) {
-      vtx = x;
-      vty = y;
-    } else {
-      // the origin point of rotation(snapping)
-      var _originVerId = draggingLine.vertices.findIndex(function (vertice) {
-        return vertice !== dragVertexId;
-      });
-      _originVerId = _originVerId < 0 ? draggingLine.vertices[0] : draggingLine.vertices[_originVerId];
-      if (stepUnit) {
-        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;
-          }
-        });
-      }
-    }
-
-    // angle snapping as a value of UNIT_ANGLE
-    if (!endDrag.some(function (flag) {
-      return flag === false;
-    }) && !(0, _helper.isEmpty)(absAngle) && absAngle % _constants.UNIT_ANGLE !== 0 && stepUnit) {
-      var _result = _export2.GeometryUtils.snapAngleByUnit(lineAngle, vertices, draggingLine, vtx, vty, dragVertexId);
-      vtx = _result.x;
-      vty = _result.y;
-    }
-    var result = {
-      isEndDrag: endDrag,
-      x: vtx,
-      y: vty
-    };
-    return result;
-  };
-  var getProperties = function getProperties(item, property) {
-    var _item$properties;
-    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, _convertUnitsLite.convert)(length).from(unit).to('cm') : 0;
-  };
-  var point = function point(x, y) {
-    return {
-      x: x,
-      y: y
-    };
-  };
-  var getDistant = function getDistant(x, y, rotRad, curItemInfo, allRect) {
-    var center_h = 3 * height / 8;
-    var center_x1 = x - center_h * Math.sin(rotRad);
-    var center_y1 = y + center_h * Math.cos(rotRad);
-    var pointArray = [];
-    curItemInfo.rectCenterPoint.forEach(function (centerpoint) {
-      if (!Array.isArray(centerpoint) || centerpoint.length < 2) return;
-      var _centerpoint = (0, _slicedToArray2["default"])(centerpoint, 2),
-        pt = _centerpoint[0],
-        angle = _centerpoint[1];
-      if (!pt) return;
-
-      // line through centerpoint and reference center
-      var rectLine = angle === 180 || angle === 0 ? _export2.GeometryUtils.linePassingThroughTwoPoints(pt.x, pt.y, center_x1, center_y1) : _export2.GeometryUtils.linePassingThroughTwoPoints(pt.x, pt.y, x, y);
-      if (!rectLine) return;
-      var minDist;
-      allRect.forEach(function (linerect) {
-        if (!(linerect !== null && linerect !== void 0 && linerect.rect) || linerect.rect.length < 4) return;
-        var p0 = _export2.GeometryUtils.clone_point(linerect.rect[2]);
-        var p1 = _export2.GeometryUtils.clone_point(linerect.rect[3]);
-        if (!p0 || !p1 || p0.x === p1.x && p0.y === p1.y) return;
-        var lineFn = _export2.GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
-        if (!lineFn) return;
-        var ip = _export2.GeometryUtils.twoLinesIntersection(lineFn.a, lineFn.b, lineFn.c, rectLine.a, rectLine.b, rectLine.c);
-        if (!ip) return;
-
-        // intersection must lie within line segment
-        var segLen = _export2.GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y);
-        if (segLen <= _export2.GeometryUtils.pointsDistance(p0.x, p0.y, ip.x, ip.y) || segLen <= _export2.GeometryUtils.pointsDistance(p1.x, p1.y, ip.x, ip.y)) return;
-
-        // ensure intersection is farther than pt→center
-        var distToCenter = _export2.GeometryUtils.pointsDistance(ip.x, ip.y, x, y);
-        var baseDist = _export2.GeometryUtils.pointsDistance(pt.x, pt.y, ip.x, ip.y);
-        if (distToCenter <= baseDist) return;
-        var candidate = baseDist;
-        minDist = minDist !== undefined ? Math.min(minDist, candidate) : candidate;
-      });
-      pointArray.push([minDist !== null && minDist !== void 0 ? minDist : 0, angle]);
-    });
-    return pointArray;
-  };
-  var getCalcRectFromItem = function getCalcRectFromItem(item) {
-    if (!(item !== null && item !== void 0 && item.pos) || !(item !== null && item !== void 0 && item.size)) return {
-      rectCenterPoint: []
-    };
-    var _item$pos = item.pos,
-      x = _item$pos.x,
-      y = _item$pos.y;
-    var w = item.size.width / 2;
-    var h = item.size.height / 2;
-    var rotRad = item.rotRad;
-    var mh = 3 * h / 4;
-    var mx = x - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
-    var my = y - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
-    var m2x = x + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
-    var m2y = y + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
-    var m3x = x - h * Math.sin(rotRad);
-    var m3y = y + h * Math.cos(rotRad);
-    var m1x = x + h * Math.sin(rotRad);
-    var m1y = y - h * Math.cos(rotRad);
-    return {
-      rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
-    };
-  };
-  var getConnectedLines = function getConnectedLines() {
-    var _state$getIn3, _state$getIn4, _state$getIn5;
-    var vertices = (_state$getIn3 = state.getIn(['scene', 'layers', layerID, 'vertices'])) === null || _state$getIn3 === void 0 ? void 0 : _state$getIn3.toJS();
-    var lines = (_state$getIn4 = state.getIn(['scene', 'layers', layerID, 'lines'])) === null || _state$getIn4 === void 0 ? void 0 : _state$getIn4.toJS();
-    var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-    var drawingLine = (_state$getIn5 = state.getIn(['scene', 'layers', layerID, 'lines', lineID])) === null || _state$getIn5 === void 0 ? void 0 : _state$getIn5.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) {
-    var _state$getIn6, _state$getIn7, _state$getIn9;
-    //workaround that allow imageful component to work
-
-    // let evt = new Event('mousemove-planner-event');
-    // evt.viewerEvent = viewerEvent;
-    // document.dispatchEvent(evt);
-    var _mapCursorPosition = mapCursorPosition(viewerEvent),
-      x = _mapCursorPosition.x,
-      y = _mapCursorPosition.y;
-    projectActions.updateMouseCoord({
-      x: x,
-      y: y
-    });
-    if (sFlag) {
-      var differs = {
-        x: x - sPoint.x,
-        y: y - sPoint.y
-      };
-      projectActions.selectAll(differs);
-    } else {
-      switch (mode) {
-        case constants.MODE_DRAWING_LINE:
-          // check whether the drawing line is started.
-          var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-          var lines = (_state$getIn6 = state.getIn(['scene', 'layers', layerID, 'lines'])) === null || _state$getIn6 === void 0 ? void 0 : _state$getIn6.toJS();
-          var drawingLine = (_state$getIn7 = state.getIn(['scene', 'layers', layerID, 'lines', lineID])) === null || _state$getIn7 === void 0 ? void 0 : _state$getIn7.toJS();
-          var tlines = [];
-          if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
-            var _state$getIn8;
-            var _vertices = (_state$getIn8 = state.getIn(['scene', 'layers', layerID, 'vertices'])) === null || _state$getIn8 === void 0 ? void 0 : _state$getIn8.toJS();
-            setdrawStart(false);
-            // get the lines that have same points with drawing line.
-            getRelatedLines(tlines, drawingLine, _vertices, lines);
-            setRelatedLines(tlines);
-            linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
-          } else {
-            linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
-          }
-
-          // Blocked 90 degree snap.
-          // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
-          // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
-          // let dx = Math.abs(x - prevVertex.x);
-          // let dy = Math.abs(y - prevVertex.y);
-          // if (dx > dy) y = prevVertex.y
-          // else x = prevVertex.x;
-          break;
-        case constants.MODE_DRAWING_HOLE:
-          holesActions.updateDrawingHole(layerID, x, y);
-          break;
-        case constants.MODE_DRAWING_ITEM:
-          var _layer = scene.layers.get(layerID);
-          var flag = false;
-          _layer.items.some(function (item) {
-            if (item.selected) {
-              item.counterTop.uri = _layer.counterTop.uri;
-              current_sel_obj_id = item.id;
-              flag = true;
-            }
-          });
-          if (current_sel_obj_id === null || !flag) {
-            itemsActions.updateDrawingItem(layerID, x, y);
-            endPoint.x = x;
-            endPoint.y = y;
-          } else {
-            prepareSnap();
-            var _GeometryUtils$calcSn = _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$getIn9 = state.getIn(['scene', 'layers', layerID, 'vertices'])) === null || _state$getIn9 === void 0 ? void 0 : _state$getIn9.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;
-      }
-    }
-    viewerEvent.originalEvent.stopPropagation();
-  };
-  var onMouseDown = function onMouseDown(viewerEvent) {
-    var event = viewerEvent.originalEvent;
-    //workaround that allow imageful component to work
-    // let evt = new Event('mousedown-planner-event');
-    // evt.viewerEvent = viewerEvent;
-    // document.dispatchEvent(evt);
-    var _mapCursorPosition2 = mapCursorPosition(viewerEvent),
-      x = _mapCursorPosition2.x,
-      y = _mapCursorPosition2.y;
-    var layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
-    var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
-    if (mode === constants.MODE_DRAWING_LINE) {
-      if (event.nativeEvent.which === 3) {
-        projectActions.rollback();
-        event.stopPropagation();
-        return;
-      }
-    }
-    mouseDownPoint = {
-      x: x,
-      y: y
-    };
-    if (mode === constants.MODE_IDLE) {
-      var elementData = extractElementData(event.target);
-      if (!elementData) return;
-      if (sCount < 2) {
-        switch (elementData.prototype) {
-          case 'lines':
-            if (elementData.selected) {
-              if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
-              linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
-            }
-            break;
-          case 'vertices':
-            verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
-            break;
-          case 'items':
-            current_sel_obj_id = elementData.id;
-            if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
-              // closes the setting dialog
-              if (document.getElementById('setting_dialog')) {
-                document.getElementById('setting_dialog').style.display = 'none';
-              }
-              itemsActions.selectItem(elementData.layer, elementData.id);
-              // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
-              itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
-              replaceCabinet(false);
-            }
-            break;
-          case 'holes':
-            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
-            break;
-          default:
-            break;
-        }
-      } else {
-        sPoint.x = x;
-        sPoint.y = y;
-        sFlag = true;
-      }
-    }
-    event.stopPropagation();
-  };
-  var onMouseUp = function onMouseUp(viewerEvent) {
-    var _state$getIn0, _state$getIn1;
-    //set move all flag false
-    sFlag = false;
-    // //////////////////////
-    // setRulerEdit(null);
-    var event = viewerEvent.originalEvent;
-    var bbox = event.target.getBoundingClientRect();
-    // bbox.width = event.target.getBBox().width;
-    // bbox.height = event.target.getBBox().height;
-    if (event.target.tagName === 'rect') {
-      if (event.target.id) {
-        setRulerEditID(event.target.id);
-      }
-    }
-    setRulerEdit(null);
-    // let evt = new Event('mouseup-planner-event');
-    // evt.viewerEvent = viewerEvent;
-    // document.dispatchEvent(evt);
-
-    var _mapCursorPosition3 = mapCursorPosition(viewerEvent),
-      x = _mapCursorPosition3.x,
-      y = _mapCursorPosition3.y;
-    var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
-    var vertices = (_state$getIn0 = state.getIn(['scene', 'layers', layerID, 'vertices'])) === null || _state$getIn0 === void 0 ? void 0 : _state$getIn0.toJS();
-    var lines = (_state$getIn1 = state.getIn(['scene', 'layers', layerID, 'lines'])) === null || _state$getIn1 === void 0 ? void 0 : _state$getIn1.toJS();
-    var elementData = extractElementData(event.target);
-    var selectedLayer = scene.getIn(['layers', layerID]);
-    var elementPrototype = null;
-    var internalType = null;
-    switch (mode) {
-      case constants.MODE_DRAWING_LINE:
-        elementPrototype = 'lines';
-        internalType = _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_VERTEX:
-        elementPrototype = 'lines';
-        internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;
-        break;
-      case constants.MODE_ROTATING_ITEM:
-        elementPrototype = 'items';
-        internalType = _constants.INTERNAL_EVENT_ROTATE_ELEMENT;
-        break;
-
-      // item selection be came from dragging mode
-      case constants.MODE_DRAGGING_ITEM:
-        elementPrototype = 'items';
-        internalType = _constants.INTERNAL_EVENT_SELECT_ELEMENT;
-        break;
-      case constants.MODE_IDLE:
-        switch (elementData === null || elementData === void 0 ? void 0 : elementData.prototype) {
-          case 'areas':
-          case 'lines':
-          case 'holes':
-            if ((0, _helper.isEmpty)(elementData === null || elementData === void 0 ? void 0 : elementData.part)) {
-              elementPrototype = elementData === null || elementData === void 0 ? void 0 : elementData.prototype;
-              internalType = _constants.INTERNAL_EVENT_SELECT_ELEMENT;
-            }
-            break;
-        }
-        break;
-    }
-    switch (mode) {
-      case constants.MODE_IDLE:
-        switch (elementData ? elementData.prototype : 'none') {
-          case 'areas':
-            if (document.getElementById('setting_dialog')) {
-              document.getElementById('setting_dialog').style.display = 'none';
-            }
-            areaActions.selectArea(elementData.layer, elementData.id);
-            break;
-          case 'lines':
-            if (document.getElementById('setting_dialog')) {
-              document.getElementById('setting_dialog').style.display = 'none';
-            }
-            if (elementData.part === 'remove') {
-              projectActions.remove();
-              break;
-            } else if (elementData.part === 'elevation') {
-              // handle action when click elevation about selected line
-              var _mode = _constants.MODE_ELEVATION_VIEW;
-              projectActions.setMode(_mode);
-              break;
-            } else {
-              var _state$getIn10;
-              var tlines = [];
-              var drawingLine = (_state$getIn10 = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id])) === null || _state$getIn10 === void 0 ? void 0 : _state$getIn10.toJS();
-              getRelatedLines(tlines, drawingLine, vertices, lines);
-              setRelatedLines(tlines);
-              linesActions.selectLine(elementData.layer, elementData.id);
-              break;
-            }
-          case 'holes':
-            if (document.getElementById('setting_dialog')) {
-              document.getElementById('setting_dialog').style.display = 'none';
-            }
-            holesActions.selectHole(elementData.layer, elementData.id);
-            break;
-          case 'items':
-            if (elementData.part === 'duplicate') {
-              var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              if (!(0, _utils.isWarningItem)(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
-              break;
-            } else if (elementData.part === 'remove') {
-              projectActions.remove();
-              break;
-            } else if (elementData.part === 'warning_edit') {
-              // closes the setting dialog
-              if (document.getElementById('setting_dialog')) {
-                document.getElementById('setting_dialog').style.display = 'none';
-              }
-              internalType = constants.INTERNAL_EVENT_REPLACE_CABINET;
-              itemsActions.selectItem(elementData.layer, elementData.id);
-              replaceCabinet(true);
-              break;
-            } else {
-              projectActions.unselectAll();
-              break;
-            }
-          case 'rulerDist':
-            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",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                textAlign: 'center',
-                paddingRight: 10,
-                fontSize: '16px',
-                lineHeight: '22px',
-                fontWeight: 600
-              },
-              value: distanceText1,
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
-                  _length: event.target.value,
-                  _unit: scene.rulerUnit
-                });
-                updateRulerDistAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInput1);
-            projectActions.unselectAll();
-            break;
-          case 'ruler':
-            var _length = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(selectedLayer.unit);
-            var numberInput = /*#__PURE__*/_react["default"].createElement("div", {
-              id: "ruler_numberInput",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                textAlign: 'center',
-                paddingRight: 10,
-                fontSize: '16px',
-                lineHeight: '22px',
-                fontWeight: 600
-              },
-              value: (0, _math.formatNumber)(_length, _constants.DECIMAL_PLACES_2),
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value).from(selectedLayer.unit).to(scene.unit),
-                  _length: event.target.value,
-                  _unit: selectedLayer.unit
-                });
-                updateRulerAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInput);
-            projectActions.unselectAll();
-            break;
-          case 'twoHoleRuler':
-            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",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                textAlign: 'center',
-                padding: 'auto',
-                fontSize: '16px',
-                lineHeight: '22px',
-                fontWeight: 600
-              },
-              value: distanceTextTwoHoleRuler,
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value / 2).from(scene.rulerUnit).to(scene.unit),
-                  _length: event.target.value / 2,
-                  _unit: scene.rulerUnit
-                });
-                updateTwoHoleRulerAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInputTwoHoleRuler);
-            projectActions.unselectAll();
-            break;
-          case 'leftHoleRuler':
-            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",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                textAlign: 'center',
-                paddingRight: 10,
-                fontSize: '16px',
-                lineHeight: '22px',
-                fontWeight: 600
-              },
-              value: distanceTextLeftHoleRuler,
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
-                  _length: event.target.value,
-                  _unit: scene.rulerUnit
-                });
-                updateLeftHoleRulerAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInputLeftHoleRuler);
-            projectActions.unselectAll();
-            break;
-          case 'rulerHole':
-            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",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                textAlign: 'center',
-                paddingRight: 10,
-                fontSize: '16px',
-                lineHeight: '22px',
-                fontWeight: 600
-              },
-              value: distanceTextRulerHole,
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
-                  _length: event.target.value,
-                  _unit: scene.rulerUnit
-                });
-                updateHoleRulerAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInputRulerHole);
-            projectActions.unselectAll();
-            break;
-          case 'rightHoleRuler':
-            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",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                textAlign: 'center',
-                paddingRight: 10,
-                fontSize: '16px',
-                lineHeight: '22px',
-                fontWeight: 600
-              },
-              value: distanceTextRightHoleRuler,
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
-                  _length: event.target.value,
-                  _unit: scene.rulerUnit
-                });
-                updateRightHoleRulerAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInputRightHoleRuler);
-            projectActions.unselectAll();
-            break;
-          case 'angleChange':
-            var _length2 = elementData.length;
-            var numberInput2 = /*#__PURE__*/_react["default"].createElement("div", {
-              id: "ruler_numberInput",
-              style: {
-                position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
-                top: bbox.top - (50 - bbox.height) / 2,
-                zIndex: 1000
-              }
-            }, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
-              style: {
-                width: 50,
-                height: 50
-              },
-              value: _length2,
-              onChange: function onChange(event) {
-                var value = new _immutable.Map({
-                  length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
-                  _length: event.target.value,
-                  _unit: scene.rulerUnit
-                });
-                updateangleChangeAttribute(elementData, value);
-              },
-              precision: 2
-            }));
-            setRulerEdit(numberInput2);
-            projectActions.unselectAll();
-            break;
-          case 'none':
-            projectActions.unselectAll();
-            break;
-        }
-        break;
-      case constants.MODE_WAITING_DRAWING_LINE:
-        setdrawStart(true);
-        linesActions.beginDrawingLine(layerID, x, y, state.snapMask, onInternalEvent);
-        break;
-      case constants.MODE_DRAWING_LINE:
-        // 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;
-        setdrawStart(true);
-        getConnectedLines();
-        var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
-        linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
-        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
-        break;
-      case constants.MODE_DRAWING_HOLE:
-        holesActions.endDrawingHole(layerID, x, y);
-        break;
-      case constants.MODE_DRAWING_ITEM:
-        {
-          var itemData = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
-          itemsActions.endDrawingItem(layerID, itemData.isInitialPos ? itemData.x : endPoint.x, itemData.isInitialPos ? itemData.y : endPoint.y);
-        }
-        break;
-      case constants.MODE_DRAGGING_LINE:
-        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;
-      case constants.MODE_DRAGGING_ITEM:
-        itemsActions.updateMolding();
-        projectActions.setMode(_constants.MODE_IDLE);
-        break;
-      case constants.MODE_DRAGGING_HOLE:
-        holesActions.endDraggingHole(x, y);
-        break;
-      case constants.MODE_ROTATING_ITEM:
-        itemsActions.endRotatingItem(x, y);
-        break;
-    }
-    if (internalType) {
-      var _currentObject2;
-      var _currentObject = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
-      if (internalType === _constants.INTERNAL_EVENT_SELECT_ELEMENT && ((_currentObject2 = _currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.prototype) === 'items' && draggingDistance > constants.EPSILON) internalType = _constants.INTERNAL_EVENT_DRAG_ELEMENT;else if (internalType === _constants.INTERNAL_EVENT_DRAW_ELEMENT || draggingDistance > constants.EPSILON) {
-        var elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
-        _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
-      }
-      if (_currentObject) {
-        var _currentObject3, _currentObject4, _currentObject5;
-        var payload = (_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.toJS();
-        if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'lines') {
-          // caculating length of selected line//
-          var v_a = layer.vertices.get(_currentObject.vertices.get(0));
-          var v_b = layer.vertices.get(_currentObject.vertices.get(1));
-          var distance = _export2.GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
-          var _length3 = (0, _convertUnitsLite.convert)(distance).from('cm').to('in');
-          payload.length = _length3;
-          //////////////////////////////////////
-        } else if (((_currentObject5 = _currentObject) === null || _currentObject5 === void 0 ? void 0 : _currentObject5.prototype) === 'items') {
-          // check this cabinet has warning box
-          payload.isWarning = (0, _utils.isWarningItem)(_currentObject);
-          // check this item is available molding
-          payload.isMoldingAvailable = _export2.MoldingUtils.isEnableItemForMolding(layer, _currentObject);
-          // check this item is snapped to wall
-          payload.isAttachedWall = _export2.MoldingUtils.isAttachedWall(layer, _currentObject);
-        }
-
-        // send selection event befor replace event
-        if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
-          onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-            type: _constants.INTERNAL_EVENT_SELECT_ELEMENT,
-            value: payload
-          });
-        }
-        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-          type: internalType,
-          value: payload
-        });
-      }
-    }
-    event.stopPropagation();
-  };
-  var onChangeValue = function onChangeValue(value) {
-    if (sFlag) return;
-    setSvgValue(value);
-    var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
-    if (_zoomValue > constants.MAX_ZOOM_IN_SCALE) return;
-    if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
-    if (rulerEdit !== null && value.startX && value.startY || value.lastAction === 'zoom') {
-      var _rulerEdit = document.getElementById('ruler_numberInput') && document.getElementById('ruler_numberInput'),
-        _rect;
-      if (rulerEditID !== null) {
-        _rect = document.getElementById(rulerEditID) && document.getElementById(rulerEditID);
-      }
-      var bbox;
-      if (_rect && _rulerEdit) {
-        bbox = _rect.getBoundingClientRect();
-        // bbox.width = _rect.getBBox().width;
-        // bbox.height = _rect.getBBox().height;
-        _rulerEdit.style.left = "".concat(bbox.left - (150 - bbox.width) / 2, "px");
-        _rulerEdit.style.top = "".concat(bbox.top - (50 - bbox.height) / 2, "px");
-      }
-    }
-    if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-      /*let val = Object.assign({}, value);
-      if (refresh === 2) {
-        val.a += 0.4; val.d += 0.4;
-        val.e -= (val.SVGWidth * val.a - val.SVGWidth * (val.a - 0.4)) / 2;
-        val.f -= (val.SVGHeight * val.d - val.SVGHeight * (val.d - 0.4)) / 2;
-        console.log('----', val)
-      }*/
-      projectActions.updateZoomScale(value.a);
-      return viewer2DActions.updateCameraView(value);
-    }
-  };
-  var onChangeTool = function onChangeTool(tool) {
-    setSvgTool(tool);
-    switch (tool) {
-      case _reactSvgPanZoom.TOOL_NONE:
-        projectActions.selectToolEdit();
-        break;
-      case _reactSvgPanZoom.TOOL_PAN:
-        viewer2DActions.selectToolPan();
-        break;
-      case _reactSvgPanZoom.TOOL_ZOOM_IN:
-        viewer2DActions.selectToolZoomIn();
-        break;
-      case _reactSvgPanZoom.TOOL_ZOOM_OUT:
-        viewer2DActions.selectToolZoomOut();
-        break;
-    }
-  };
-  var onZoom = function onZoom(value) {
-    // var nextValue = viewer2D?.toJS();
-    // nextValue = zoom(nextValue, 0, 0, value.a / nextValue.a)
-    // projectActions.updateZoomScale(nextValue.a);
-    // return viewer2DActions.updateCameraView(nextValue)
-  };
-  var _state$get$toJS = (_state$get = state.get('viewer2D')) === null || _state$get === void 0 ? void 0 : _state$get.toJS(),
-    e = _state$get$toJS.e,
-    f = _state$get$toJS.f,
-    SVGWidth = _state$get$toJS.SVGWidth,
-    SVGHeight = _state$get$toJS.SVGHeight;
-  var rulerSize = 0; //px
-  var rulerUnitPixelSize = 100;
-  var rulerBgColor = SharedStyle.PRIMARY_COLOR.main;
-  var rulerFnColor = SharedStyle.COLORS.white;
-  var rulerMkColor = SharedStyle.SECONDARY_COLOR.main;
-  var sceneWidth = SVGWidth || state.getIn(['scene', 'width']);
-  var sceneHeight = SVGHeight || state.getIn(['scene', 'height']);
-  var sceneZoom = state.zoom || 1;
-  var rulerXElements = Math.ceil(sceneWidth / rulerUnitPixelSize) + 1;
-  var rulerYElements = Math.ceil(sceneHeight / rulerUnitPixelSize) + 1;
-  return /*#__PURE__*/_react["default"].createElement("div", null, rulerEdit, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      margin: 0,
-      padding: 0,
-      display: 'grid',
-      gridRowGap: '0',
-      gridColumnGap: '0',
-      gridTemplateColumns: "".concat(rulerSize, "px ").concat(width - rulerSize, "px"),
-      gridTemplateRows: "".concat(rulerSize, "px ").concat(height - rulerSize, "px"),
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      gridColumn: 1,
-      gridRow: 1,
-      backgroundColor: rulerBgColor
-    }
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      gridRow: 1,
-      gridColumn: 2,
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    id: "rulerX"
-  }, sceneWidth ? /*#__PURE__*/_react["default"].createElement(_export.RulerX, {
-    unitPixelSize: rulerUnitPixelSize,
-    zoom: sceneZoom,
-    mouseX: state.mouse.get('x'),
-    width: width - rulerSize,
-    zeroLeftPosition: e || 0,
-    backgroundColor: rulerBgColor,
-    fontColor: rulerFnColor,
-    markerColor: rulerMkColor,
-    positiveUnitsNumber: rulerXElements,
-    negativeUnitsNumber: 0
-  }) : null), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      gridColumn: 1,
-      gridRow: 2,
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    id: "rulerY"
-  }, sceneHeight ? /*#__PURE__*/_react["default"].createElement(_export.RulerY, {
-    unitPixelSize: rulerUnitPixelSize,
-    zoom: sceneZoom,
-    mouseY: state.mouse.get('y'),
-    height: height - rulerSize,
-    zeroTopPosition: sceneHeight * sceneZoom + f || 0,
-    backgroundColor: rulerBgColor,
-    fontColor: rulerFnColor,
-    markerColor: rulerMkColor,
-    positiveUnitsNumber: rulerYElements,
-    negativeUnitsNumber: 0
-  }) : null), /*#__PURE__*/_react["default"].createElement(_reactSvgPanZoom.ReactSVGPanZoom, {
-    style: {
-      gridColumn: 2,
-      gridRow: 2
-    },
-    width: width - rulerSize,
-    height: height - rulerSize,
-    value: svgValue,
-    tool: svgTool,
-    onChangeValue: onChangeValue,
-    onChangeTool: onChangeTool,
-    detectAutoPan: mode2DetectAutopan(mode),
-    onMouseDown: onMouseDown,
-    onMouseMove: onMouseMove,
-    onMouseUp: onMouseUp,
-    detectPinchGesture: false,
-    disableDoubleClickZoomWithToolAuto: true,
-    ref: Viewer,
-    miniatureProps: {
-      position: _reactSvgPanZoom.POSITION_NONE
-    },
-    toolbarProps: {
-      position: _reactSvgPanZoom.POSITION_NONE
-    }
-  }, /*#__PURE__*/_react["default"].createElement("svg", {
-    width: scene.width,
-    height: scene.height
-  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("pattern", {
-    id: "diagonalFill",
-    patternUnits: "userSpaceOnUse",
-    width: "4",
-    height: "4",
-    fill: "#FFF"
-  }, /*#__PURE__*/_react["default"].createElement("rect", {
-    x: "0",
-    y: "0",
-    width: "4",
-    height: "4",
-    fill: "#FFF"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2",
-    style: {
-      stroke: '#8E9BA2',
-      strokeWidth: 1
-    }
-  }))), /*#__PURE__*/_react["default"].createElement("g", {
-    style: Object.assign(mode2Cursor(mode), mode2PointerEvents(mode))
-  }, /*#__PURE__*/_react["default"].createElement(_state["default"], {
-    state: state,
-    catalog: catalog,
-    viewer2DActions: viewer2DActions,
-    relatedLines: relatedLines
-  }))))));
-}
-Viewer2D.propTypes = {
-  state: _propTypes["default"].object.isRequired,
-  width: _propTypes["default"].number.isRequired,
-  height: _propTypes["default"].number.isRequired
-};
-module.exports = exports.default;