kitchen-simulator 2.0.0 → 2.0.1-dot-color

package/es/components/viewer2d/viewer2d.js

@@ -0,0 +1,1433 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from 'react-svg-pan-zoom';
+import * as constants from "../../constants";
+import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT } from "../../constants";
+import State from "./state";
+import * as SharedStyle from "../../shared-style";
+import { RulerX, RulerY } from "./export";
+import { GeometryUtils } from "../../utils/export";
+import FormNumberInput from "../style/form-number-input";
+import { convert } from "../../utils/convert-units-lite";
+import { Map } from 'immutable';
+import { formatNumber } from "../../utils/math";
+import { isEmpty } from "../../utils/helper"; // variables
+// variables
+var pinFlag = false;
+var sFlag = false; //for all object move
+var sPoint = {}; //for all object move
+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 TOOL_NONE;
+  }
+  switch (mode) {
+    case constants.MODE_2D_PAN:
+      return TOOL_PAN;
+    case constants.MODE_2D_ZOOM_IN:
+      return TOOL_ZOOM_IN;
+    case constants.MODE_2D_ZOOM_OUT:
+      return TOOL_ZOOM_OUT;
+    case constants.MODE_IDLE:
+      return TOOL_AUTO;
+    default:
+      return 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
+  };
+}
+export default function Viewer2D(_ref, _ref2) {
+  var state = _ref.state,
+    width = _ref.width,
+    height = _ref.height,
+    setToolbar = _ref.setToolbar,
+    replaceCabinet = _ref.replaceCabinet,
+    onInternalEvent = _ref.onInternalEvent;
+  var viewer2DActions = _ref2.viewer2DActions,
+    linesActions = _ref2.linesActions,
+    holesActions = _ref2.holesActions,
+    verticesActions = _ref2.verticesActions,
+    itemsActions = _ref2.itemsActions,
+    areaActions = _ref2.areaActions,
+    projectActions = _ref2.projectActions,
+    catalog = _ref2.catalog;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    rulerEdit = _useState2[0],
+    setRulerEdit = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rulerEditID = _useState4[0],
+    setRulerEditID = _useState4[1];
+  var Viewer = useRef(null);
+  var viewer2D = state.viewer2D,
+    mode = state.mode,
+    scene = state.scene;
+
+  // let relatedLines = [];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    relatedLines = _useState6[0],
+    setRelatedLines = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    drawStart = _useState8[0],
+    setdrawStart = _useState8[1];
+  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 = LINE_THICKNESS / 2;
+  var layer = scene.getIn(['layers', layerID]);
+  var mapCursorPosition = function mapCursorPosition(_ref3) {
+    var x = _ref3.x,
+      y = _ref3.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 = GeometryUtils.getAllLines(layer);
+    allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
+    allItemRect = GeometryUtils.getAllItems(scene, catalog, allLineRects);
+    allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
+    allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
+    allRect = allItemRect.others.concat(allLineRects);
+    allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
+    allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
+    allArea = GeometryUtils.getAllArea(layer);
+  };
+  var updateRulerDistAttribute = function updateRulerDistAttribute(elementData, value) {
+    var newVal = value.get('length');
+    var oldVal = elementData.length;
+    var direct = elementData.direct;
+    var thisItem = scene.getIn(['layers', elementData.layer, 'items', elementData.id]).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 selectedLine = scene.getIn(['layers', elementData.layer, 'lines', elementData.id]).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 = GeometryUtils.orderVertices([v_0, v_1]),
+      _GeometryUtils$orderV2 = _slicedToArray(_GeometryUtils$orderV, 2),
+      v_a = _GeometryUtils$orderV2[0],
+      v_b = _GeometryUtils$orderV2[1];
+    var v_b_new = 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 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 newVal = value.get('length');
+    var oldVal = elementData.length;
+    var thisItem = scene.getIn(['layers', elementData.layer, 'holes', elementData.id]).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 newVal = value.get('length');
+    var thisItem = scene.getIn(['layers', elementData.layer, 'holes', elementData.id]).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 newVal = value.get('length');
+    var oldVal = elementData.length;
+    var thisItem = scene.getIn(['layers', elementData.layer, 'holes', elementData.id]).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 selLineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
+    if (isEmpty(selLineID)) {
+      return {
+        isEndDrag: true,
+        x: x,
+        y: y
+      };
+    }
+    var draggingLine = state.getIn(['scene', 'layers', layerID, 'lines', selLineID]).toJS();
+    var allLines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var dragVertexId = state.getIn(['draggingSupport', 'vertexID']);
+    dragVertexId = !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 (!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 (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 = GeometryUtils.angleBetweenTwoPointsAndOrigin(ox, oy, x, y);
+        absAngle = Math.abs(lineAngle);
+      }
+      for (var i = 0; i < relatedLines.length; i++) {
+        var line = relatedLines[i];
+        lineAngle = GeometryUtils.angleBetweenTwoLines(line, draggingLine, vertices);
+        absAngle = Math.abs(lineAngle);
+        var tmpRelated = [];
+        GeometryUtils.getRelatedLines(tmpRelated, line, vertices, allLines, draggingLine.id);
+        angles.push(lineAngle);
+        for (var j = 0; j < tmpRelated.length; j++) {
+          var tmpAngle = Math.abs(GeometryUtils.angleBetweenTwoLines(tmpRelated[j], line, vertices));
+          if (tmpAngle < MIN_ANGLE_DISALLOW_DRAW_WALL || tmpAngle > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
+            endDrag.push(false);
+          } else endDrag.push(true);
+        }
+        if (absAngle < MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - 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) < MIN_ANGLE_DISALLOW_DRAW_WALL || Math.abs(angle) > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
+            var absVal = Math.abs(angle);
+            var rest = MIN_ANGLE_DISALLOW_DRAW_WALL - absVal;
+            if (absVal > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
+              absVal = 360 - absVal;
+              rest = -(MIN_ANGLE_DISALLOW_DRAW_WALL - absVal);
+            }
+            // determine the direction of rotation.
+            rest = angle > 0 ? -rest : rest;
+            // rotate the current point to last point around the first point of drawing line.
+            var res = GeometryUtils.rotatePointAroundPoint(x, y, _ox, _oy, rest);
+            vtx = res.x;
+            vty = res.y;
+          }
+        });
+      }
+    }
+
+    // angle snapping as a value of UNIT_ANGLE
+    if (!endDrag.some(function (flag) {
+      return flag === false;
+    }) && !isEmpty(absAngle) && absAngle % UNIT_ANGLE !== 0 && stepUnit) {
+      var _result = 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 ? 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 = _slicedToArray(centerpoint, 2),
+        pt = _centerpoint[0],
+        angle = _centerpoint[1];
+      if (!pt) return;
+
+      // line through centerpoint and reference center
+      var rectLine = angle === 180 || angle === 0 ? GeometryUtils.linePassingThroughTwoPoints(pt.x, pt.y, center_x1, center_y1) : 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 = GeometryUtils.clone_point(linerect.rect[2]);
+        var p1 = GeometryUtils.clone_point(linerect.rect[3]);
+        if (!p0 || !p1 || p0.x === p1.x && p0.y === p1.y) return;
+        var lineFn = GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
+        if (!lineFn) return;
+        var ip = 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 = GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y);
+        if (segLen <= GeometryUtils.pointsDistance(p0.x, p0.y, ip.x, ip.y) || segLen <= GeometryUtils.pointsDistance(p1.x, p1.y, ip.x, ip.y)) return;
+
+        // ensure intersection is farther than pt→center
+        var distToCenter = GeometryUtils.pointsDistance(ip.x, ip.y, x, y);
+        var baseDist = 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$getIn;
+    var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
+    var drawingLine = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'lines', lineID])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
+    // get the lines that have same points with drawing line.
+    if (!isEmpty(drawingLine)) {
+      var tlines = [];
+      getRelatedLines(tlines, drawingLine, vertices, lines);
+      setRelatedLines(tlines);
+    }
+  };
+  var onMouseMove = function onMouseMove(viewerEvent) {
+    //workaround that allow imageful component to work
+
+    // 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.
+        if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
+          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 (current_sel_obj_id === null || !flag) {
+          itemsActions.updateDrawingItem(layerID, x, y);
+          endPoint.x = x;
+          endPoint.y = y;
+        } else {
+          prepareSnap();
+          var _GeometryUtils$calcSn = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
+            nx = _GeometryUtils$calcSn.nx,
+            ny = _GeometryUtils$calcSn.ny,
+            rot = _GeometryUtils$calcSn.rot,
+            rotRad = _GeometryUtils$calcSn.rotRad;
+          var _val = {
+            pos: {
+              x: x,
+              y: y
+            },
+            rotRad: rotRad,
+            size: allItemRect.cur && allItemRect.cur.size,
+            layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
+            is_corner: allItemRect.cur && allItemRect.cur.is_corner
+          };
+          var _GeometryUtils$getAll = GeometryUtils.getAllHoleRect(scene, _val),
+            _isSect = _GeometryUtils$getAll.isSect,
+            _snap = _GeometryUtils$getAll.snap;
+          if (!isEmpty(_snap) && _isSect) {
+            if (_snap.length == 1) _val.pos = {
+              x: _snap[0].x,
+              y: _snap[0].y
+            };else {
+              if ((_snap[0].x - x) * (_snap[0].x - x) + (_snap[0].y - y) * (_snap[0].y - y) < (_snap[1].x - x) * (_snap[1].x - x) + (_snap[1].y - y) * (_snap[1].y - y)) _val.pos = {
+                x: _snap[0].x,
+                y: _snap[0].y
+              };else _val.pos = {
+                x: _snap[1].x,
+                y: _snap[1].y
+              };
+            }
+            var interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+            if (interSect) {
+              nx = _val.pos.x;
+              ny = _val.pos.y;
+            }
+          }
+          _val.pos = {
+            x: nx,
+            y: ny
+          };
+          var _isrectSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+          if (_isrectSect && _isSect) {
+            itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+            itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+            endPoint.x = nx;
+            endPoint.y = ny;
+          }
+          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
+            itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+            itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+            endPoint.x = nx;
+            endPoint.y = ny;
+          }
+          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
+            itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+            itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+            endPoint.x = nx;
+            endPoint.y = ny;
+          }
+        }
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        holesActions.updateDraggingHole(x, y);
+        break;
+      case constants.MODE_DRAGGING_LINE:
+        linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
+        break;
+      case constants.MODE_DRAGGING_VERTEX:
+        var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+        getConnectedLines();
+        var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
+        verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
+        break;
+      case constants.MODE_DRAGGING_ITEM:
+        prepareSnap();
+        var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
+          nx = _GeometryUtils$calcSn2.nx,
+          ny = _GeometryUtils$calcSn2.ny,
+          rot = _GeometryUtils$calcSn2.rot,
+          rotRad = _GeometryUtils$calcSn2.rotRad;
+        var val = {
+          pos: {
+            x: x,
+            y: y
+          },
+          rotRad: rotRad,
+          size: allItemRect.cur && allItemRect.cur.size,
+          layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
+          is_corner: allItemRect.cur && allItemRect.cur.is_corner
+        };
+        var _GeometryUtils$getAll2 = GeometryUtils.getAllHoleRect(scene, val),
+          isSect = _GeometryUtils$getAll2.isSect,
+          snap = _GeometryUtils$getAll2.snap;
+        if (!isEmpty(snap) && isSect) {
+          if (snap.length == 1) val.pos = {
+            x: snap[0].x,
+            y: snap[0].y
+          };else if (snap.length == 2) {
+            if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
+              x: snap[0].x,
+              y: snap[0].y
+            };else val.pos = {
+              x: snap[1].x,
+              y: snap[1].y
+            };
+          }
+          var _interSect = GeometryUtils.validInterSect(allItemRect.others, val);
+          if (_interSect) {
+            nx = val.pos.x;
+            ny = val.pos.y;
+          }
+        }
+        val.pos = {
+          x: nx,
+          y: ny
+        };
+        var isrectSect = GeometryUtils.validInterSect(allItemRect.others, val);
+        if (isrectSect && isSect) {
+          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+        }
+        if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
+          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+        }
+        if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
+          itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
+          itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+        }
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        itemsActions.updateRotatingItem(x, y);
+        break;
+    }
+    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;
+      }
+    }
+    if (mode === constants.MODE_IDLE) {
+      var elementData = extractElementData(event.target);
+      if (!elementData) return;
+      if (sCount < 2) {
+        switch (elementData.prototype) {
+          case 'lines':
+            if (elementData.selected) {
+              if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
+              linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
+            }
+            break;
+          case 'vertices':
+            verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
+            break;
+          case 'items':
+            setToolbar('');
+            current_sel_obj_id = elementData.id;
+            if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
+              // closes the setting dialog
+              if (document.getElementById('setting_dialog')) {
+                document.getElementById('setting_dialog').style.display = 'none';
+              }
+              itemsActions.selectItem(elementData.layer, elementData.id);
+              // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
+              itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
+              replaceCabinet(false);
+            }
+            break;
+          case 'holes':
+            if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
+            break;
+          default:
+            break;
+        }
+        var currentObject = state.getIn(['scene', 'layers', layerID, elementData.prototype, elementData.id]);
+        onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+          type: INTERNAL_EVENT_SELECT_ELEMENT,
+          value: currentObject.toJS()
+        });
+      } else {
+        sPoint.x = x;
+        sPoint.y = y;
+        sFlag = true;
+      }
+    }
+    event.stopPropagation();
+  };
+  var onMouseUp = function onMouseUp(viewerEvent) {
+    //set move all flag false
+    sFlag = false;
+    // //////////////////////
+    // setRulerEdit(null);
+    var event = viewerEvent.originalEvent;
+    var bbox = event.target.getBoundingClientRect();
+    if (!mode.includes('ING')) {
+      setToolbar('');
+    }
+    // bbox.width = event.target.getBBox().width;
+    // bbox.height = event.target.getBBox().height;
+    if (event.target.tagName === 'rect') {
+      if (event.target.id) {
+        setRulerEditID(event.target.id);
+      }
+    }
+    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 vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var elementData = extractElementData(event.target);
+    var selectedLayer = scene.getIn(['layers', layerID]);
+    var elementPrototype = null;
+    var elementID = null;
+    var internalType = '';
+    switch (mode) {
+      case constants.MODE_DRAWING_LINE:
+        elementPrototype = 'lines';
+        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_HOLE:
+        elementPrototype = 'holes';
+        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAWING_ITEM:
+        elementPrototype = 'items';
+        internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_LINE:
+        elementPrototype = 'lines';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        elementPrototype = 'holes';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_ITEM:
+        elementPrototype = 'items';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_DRAGGING_VERTEX:
+        elementPrototype = 'lines';
+        internalType = INTERNAL_EVENT_DRAG_ELEMENT;
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        elementPrototype = 'items';
+        internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
+        break;
+    }
+    switch (mode) {
+      case constants.MODE_IDLE:
+        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 = MODE_ELEVATION_VIEW;
+              projectActions.setMode(_mode);
+              break;
+            } else {
+              var tlines = [];
+              var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id]).toJS();
+              getRelatedLines(tlines, drawingLine, vertices, lines);
+              setRelatedLines(tlines);
+              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]);
+              itemsActions.duplicateSelected(currentObject);
+              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';
+              }
+              itemsActions.selectItem(elementData.layer, elementData.id);
+              replaceCabinet(true);
+              break;
+            } else {
+              projectActions.unselectAll();
+              break;
+            }
+          case 'rulerDist':
+            var _length1 = convert(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var distanceText1 = "".concat(formatNumber(_length1, DECIMAL_PLACES_2));
+            var numberInput1 = /*#__PURE__*/React.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.createElement(FormNumberInput, {
+              style: {
+                width: 150,
+                height: 50,
+                textAlign: 'center',
+                paddingRight: 10,
+                fontSize: '16px',
+                lineHeight: '22px',
+                fontWeight: 600
+              },
+              value: distanceText1,
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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 = convert(elementData.length).from(scene.unit).to(selectedLayer.unit);
+            var numberInput = /*#__PURE__*/React.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.createElement(FormNumberInput, {
+              style: {
+                width: 150,
+                height: 50,
+                textAlign: 'center',
+                paddingRight: 10,
+                fontSize: '16px',
+                lineHeight: '22px',
+                fontWeight: 600
+              },
+              value: formatNumber(_length, DECIMAL_PLACES_2),
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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 = convert(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var distanceTextTwoHoleRuler = "".concat(formatNumber(_lengthTwoHoleRuler, DECIMAL_PLACES_2));
+            var numberInputTwoHoleRuler = /*#__PURE__*/React.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.createElement(FormNumberInput, {
+              style: {
+                width: 150,
+                height: 50,
+                textAlign: 'center',
+                padding: 'auto',
+                fontSize: '16px',
+                lineHeight: '22px',
+                fontWeight: 600
+              },
+              value: distanceTextTwoHoleRuler,
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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 = convert(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var distanceTextLeftHoleRuler = "".concat(_lengthLeftHoleRuler.toFixed(2));
+            var numberInputLeftHoleRuler = /*#__PURE__*/React.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.createElement(FormNumberInput, {
+              style: {
+                width: 150,
+                height: 50,
+                textAlign: 'center',
+                paddingRight: 10,
+                fontSize: '16px',
+                lineHeight: '22px',
+                fontWeight: 600
+              },
+              value: distanceTextLeftHoleRuler,
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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 = convert(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var distanceTextRulerHole = "".concat(formatNumber(_lengthRulerHole, DECIMAL_PLACES_2));
+            var numberInputRulerHole = /*#__PURE__*/React.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.createElement(FormNumberInput, {
+              style: {
+                width: 150,
+                height: 50,
+                textAlign: 'center',
+                paddingRight: 10,
+                fontSize: '16px',
+                lineHeight: '22px',
+                fontWeight: 600
+              },
+              value: distanceTextRulerHole,
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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 = convert(elementData.length).from(scene.unit).to(scene.rulerUnit);
+            var distanceTextRightHoleRuler = "".concat(_lengthRightHoleRuler.toFixed(2));
+            var numberInputRightHoleRuler = /*#__PURE__*/React.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.createElement(FormNumberInput, {
+              style: {
+                width: 150,
+                height: 50,
+                textAlign: 'center',
+                paddingRight: 10,
+                fontSize: '16px',
+                lineHeight: '22px',
+                fontWeight: 600
+              },
+              value: distanceTextRightHoleRuler,
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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.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.createElement(FormNumberInput, {
+              style: {
+                width: 50,
+                height: 50
+              },
+              value: _length2,
+              onChange: function onChange(event) {
+                var value = new Map({
+                  length: 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);
+        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);
+        break;
+      case constants.MODE_DRAWING_HOLE:
+        holesActions.endDrawingHole(layerID, x, y);
+        break;
+      case constants.MODE_DRAWING_ITEM:
+        itemsActions.endDrawingItem(layerID, endPoint.x, 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(MODE_IDLE);
+        break;
+      case constants.MODE_DRAGGING_HOLE:
+        holesActions.endDraggingHole(x, y);
+        break;
+      case constants.MODE_ROTATING_ITEM:
+        itemsActions.endRotatingItem(x, y);
+        break;
+    }
+    if (elementPrototype) {
+      elementID = state.getIn(['scene', 'layers', layerID, 'selected', elementPrototype]).first();
+      var _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: internalType,
+        value: _currentObject.toJS()
+      });
+    }
+    event.stopPropagation();
+  };
+  var onChangeValue = function onChangeValue(value) {
+    if (sFlag) return;
+    var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
+    if (_zoomValue > 404) return;
+    if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
+    if (rulerEdit !== null && value.startX && value.startY || value.lastAction === 'zoom') {
+      var _rulerEdit = document.getElementById('ruler_numberInput'),
+        _rect;
+      if (rulerEditID !== null) {
+        _rect = 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) {
+    switch (tool) {
+      case TOOL_NONE:
+        projectActions.selectToolEdit();
+        break;
+      case TOOL_PAN:
+        viewer2DActions.selectToolPan();
+        break;
+      case TOOL_ZOOM_IN:
+        viewer2DActions.selectToolZoomIn();
+        break;
+      case 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('viewer2D').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.createElement("div", null, rulerEdit, /*#__PURE__*/React.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.createElement("div", {
+    style: {
+      gridColumn: 1,
+      gridRow: 1,
+      backgroundColor: rulerBgColor
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridRow: 1,
+      gridColumn: 2,
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    id: "rulerX"
+  }, sceneWidth ? /*#__PURE__*/React.createElement(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.createElement("div", {
+    style: {
+      gridColumn: 1,
+      gridRow: 2,
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    id: "rulerY"
+  }, sceneHeight ? /*#__PURE__*/React.createElement(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.createElement(ReactSVGPanZoom, {
+    style: {
+      gridColumn: 2,
+      gridRow: 2
+    },
+    width: width - rulerSize,
+    height: height - rulerSize,
+    value: viewer2D.isEmpty() ? null : viewer2D.toJS(),
+    onChangeValue: onChangeValue,
+    tool: mode2Tool(mode),
+    onChangeTool: onChangeTool,
+    detectAutoPan: mode2DetectAutopan(mode),
+    onMouseDown: onMouseDown,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    miniaturePosition: "none",
+    toolbarPosition: "none",
+    detectPinchGesture: false,
+    disableDoubleClickZoomWithToolAuto: true,
+    ref: Viewer
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: scene.width,
+    height: scene.height
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+    id: "diagonalFill",
+    patternUnits: "userSpaceOnUse",
+    width: "4",
+    height: "4",
+    fill: "#FFF"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "4",
+    height: "4",
+    fill: "#FFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2",
+    style: {
+      stroke: '#8E9BA2',
+      strokeWidth: 1
+    }
+  }))), /*#__PURE__*/React.createElement("g", {
+    style: Object.assign(mode2Cursor(mode), mode2PointerEvents(mode))
+  }, /*#__PURE__*/React.createElement(State, {
+    state: state,
+    catalog: catalog,
+    viewer2DActions: viewer2DActions,
+    relatedLines: relatedLines
+  }))))));
+}
+Viewer2D.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
+};
+Viewer2D.contextTypes = {
+  viewer2DActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  verticesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  areaActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};