kitchen-simulator 5.0.0-test.5 → 5.0.0-test.7

package/src/components/viewer2d/viewer2d.jsx

@@ -0,0 +1,1830 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ReactSVGPanZoom,
+  TOOL_AUTO,
+  TOOL_NONE,
+  TOOL_PAN,
+  TOOL_ZOOM_IN,
+  TOOL_ZOOM_OUT,
+  zoom
+} from 'react-svg-pan-zoom';
+import * as constants from '../../constants';
+import {
+  DECIMAL_PLACES_2,
+  LINE_THICKNESS,
+  MIN_ANGLE_DISALLOW_DRAW_WALL,
+  MODE_ELEVATION_VIEW,
+  MODE_IDLE,
+  UNIT_ANGLE
+} from '../../constants';
+import 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 'convert-units';
+import { Map } from 'immutable';
+import { formatNumber } from '../../../src/utils/math';
+import { isEmpty } from '../../utils/helper';
+
+// variables
+let pinFlag = false;
+let sFlag = false; //for all object move
+let sPoint = {}; //for all object move
+let endPoint = {};
+let current_sel_obj_id = null;
+let allItemRect;
+let allItemSnap;
+let allLines;
+let allLineRects;
+let allLineSnap;
+let allRect;
+let holeRect;
+let 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(
+  { state, width, height, setToolbar, replaceCabinet },
+  {
+    viewer2DActions,
+    linesActions,
+    holesActions,
+    verticesActions,
+    itemsActions,
+    areaActions,
+    projectActions,
+    catalog
+  }
+) {
+  const [rulerEdit, setRulerEdit] = useState(null);
+  const [rulerEditID, setRulerEditID] = useState(null);
+  const Viewer = useRef(null);
+
+  let { viewer2D, mode, scene } = state;
+
+  // let relatedLines = [];
+  const [relatedLines, setRelatedLines] = useState([]);
+  const [drawStart, setdrawStart] = useState(false);
+
+  useEffect(() => {
+    // move viewer point to center
+    let selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
+
+    if (!selectedLayer) {
+      return;
+    }
+
+    const vertices = selectedLayer.vertices;
+
+    if (vertices.isEmpty()) {
+      return;
+    }
+
+    let bottomX = 0,
+      bottomY = 100000,
+      topX = 100000,
+      topY = 0;
+
+    vertices.forEach(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;
+    });
+
+    let moveX = topX + (bottomX - topX) / 2;
+    let moveY = 2000 - (bottomY + (topY - bottomY) / 2);
+
+    Viewer.current.setPointOnViewerCenter(moveX, moveY, viewer2D.get('a'));
+  }, []);
+
+  let layerID = scene.selectedLayer;
+  let wall_thickness = LINE_THICKNESS / 2;
+  const layer = scene.getIn(['layers', layerID]);
+
+  let mapCursorPosition = ({ x, y }) => {
+    return { 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);
+
+  let prepareSnap = () => {
+    let layerID = scene.selectedLayer;
+    let 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);
+  };
+
+  let updateRulerDistAttribute = (elementData, value) => {
+    let newVal = value.get('length');
+    let oldVal = elementData.length;
+    let direct = elementData.direct;
+
+    const thisItem = scene
+      .getIn(['layers', elementData.layer, 'items', elementData.id])
+      .toJS();
+
+    let oldX = thisItem.x;
+    let oldY = thisItem.y;
+    let oldRotRad = (thisItem.rotation / 180) * Math.PI;
+
+    let rotRad = oldRotRad + (direct / 180) * Math.PI;
+    let delta = oldVal - newVal;
+
+    let newX = oldX + delta * Math.cos(rotRad);
+    let newY = oldY + delta * Math.sin(rotRad);
+
+    itemsActions.updateDraggingItemChanged(
+      newX,
+      newY,
+      elementData.layer,
+      elementData.id
+    );
+
+    setRulerEdit(null);
+  };
+
+  let updateangleChangeAttribute = (elementData, value) => {
+    let verArr = elementData.id.split(',');
+    let oldAngle = elementData.length;
+    let newAngle = value.getIn(['_length']);
+    let cenId = verArr[0];
+    let verId = verArr[1];
+    let x0 = state.scene.getIn(['layers', layerID, 'vertices', verArr[0], 'x']);
+    let y0 = state.scene.getIn(['layers', layerID, 'vertices', verArr[0], 'y']);
+    let x1 = state.scene.getIn(['layers', layerID, 'vertices', verArr[1], 'x']);
+    let y1 = state.scene.getIn(['layers', layerID, 'vertices', verArr[1], 'y']);
+    let 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);
+  };
+
+  let updateRulerAttribute = (elementData, value) => {
+    const selectedLine = scene
+      .getIn(['layers', elementData.layer, 'lines', elementData.id])
+      .toJS();
+
+    let v_0 = scene.getIn([
+      'layers',
+      elementData.layer,
+      'vertices',
+      selectedLine.vertices[0]
+    ]);
+
+    let v_1 = scene.getIn([
+      'layers',
+      elementData.layer,
+      'vertices',
+      selectedLine.vertices[1]
+    ]);
+
+    let [v_a, v_b] = GeometryUtils.orderVertices([v_0, v_1]);
+    let 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 = {
+        ...attributesData,
+        vertexTwo: v_b.merge(v_b_new),
+        vertexOne: v_a
+      };
+    } else {
+      attributesData = {
+        ...attributesData,
+        vertexOne: v_b.merge(v_b_new),
+        vertexTwo: v_a
+      };
+    }
+    let attributesFormData = new Map({
+      ...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);
+  };
+
+  let updateTwoHoleRulerAttribute = (elementData, value) => {
+    let elementIds = elementData.id.split(',');
+    elementData.id = elementIds[1];
+    elementData.length /= 2;
+    updateLeftHoleRulerAttribute(elementData, value);
+    elementData.id = elementIds[0];
+    updateRightHoleRulerAttribute(elementData, value);
+  };
+
+  let updateLeftHoleRulerAttribute = (elementData, value) => {
+    let newVal = value.get('length');
+    let oldVal = elementData.length;
+    const thisItem = scene
+      .getIn(['layers', elementData.layer, 'holes', elementData.id])
+      .toJS();
+    let oldX = thisItem.x;
+    let oldY = thisItem.y;
+    let oldRotRad = thisItem.rotation;
+    let delta = oldVal - newVal;
+    let newX = oldX - delta * Math.cos(oldRotRad);
+    let 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);
+  };
+
+  let updateHoleRulerAttribute = (elementData, value) => {
+    let newVal = value.get('length');
+    const thisItem = scene
+      .getIn(['layers', elementData.layer, 'holes', elementData.id])
+      .toJS();
+    let oldX = thisItem.x;
+    let oldY = thisItem.y;
+    holesActions.beginDraggingHole(
+      elementData.layer,
+      elementData.id,
+      oldX,
+      oldY
+    );
+    holesActions.updateDraggingHoleRulerChanged(
+      newVal,
+      elementData.layer,
+      elementData.id
+    );
+    holesActions.endDraggingHole(oldX, oldY);
+    setRulerEdit(null);
+  };
+
+  let updateRightHoleRulerAttribute = (elementData, value) => {
+    let newVal = value.get('length');
+    let oldVal = elementData.length;
+    const thisItem = scene
+      .getIn(['layers', elementData.layer, 'holes', elementData.id])
+      .toJS();
+    let oldX = thisItem.x;
+    let oldY = thisItem.y;
+    let oldRotRad = thisItem.rotation;
+    let delta = oldVal - newVal;
+    let newX = oldX + delta * Math.cos(oldRotRad);
+    let 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);
+  };
+
+  const getRelatedLines = (tlines, drawingLine, vertices, lines) => {
+    // if (drawingLine.vertices[0] !== drawingLine.vertices[1]) {
+    for (let i = 0; i < drawingLine.vertices.length; i++) {
+      let vertex = vertices[drawingLine.vertices[i]];
+      for (let j = 0; j < vertex.lines.length; j++) {
+        if (vertex.lines[j] !== drawingLine.id) {
+          if (!tlines.some(line => line.id === lines[vertex.lines[j]].id)) {
+            tlines.push(lines[vertex.lines[j]]);
+          }
+        }
+      }
+    }
+    // }
+  };
+
+  const getEndPoint = (vertices, x, y, mode) => {
+    let selLineID = state
+      .getIn(['scene', 'layers', layerID, 'selected', 'lines'])
+      .first();
+    if (isEmpty(selLineID)) {
+      return {
+        isEndDrag: true,
+        x: x,
+        y: y
+      };
+    }
+    let draggingLine = state
+      .getIn(['scene', 'layers', layerID, 'lines', selLineID])
+      .toJS();
+    let allLines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    let dragVertexId = state.getIn(['draggingSupport', 'vertexID']);
+    dragVertexId = !isEmpty(dragVertexId)
+      ? dragVertexId
+      : draggingLine.vertices[1];
+    let vtx, vty;
+    let stepUnit = false;
+    vtx = vertices[dragVertexId].x;
+    vty = vertices[dragVertexId].y;
+    if (!vertices[dragVertexId].lines.some(line => line !== draggingLine.id)) {
+      stepUnit = true;
+    }
+    let endDrag = [];
+    if (!isEmpty(relatedLines) && mode !== 'DRAGGING_LINE') {
+      vertices[dragVertexId].x = x;
+      vertices[dragVertexId].y = y;
+    }
+    let absAngle, lineAngle;
+    if (draggingLine.vertices[0] !== draggingLine.vertices[1]) {
+      for (let i = 0; i < relatedLines.length; i++) {
+        let line = relatedLines[i];
+        lineAngle = GeometryUtils.angleBetweenTwoLines(
+          line,
+          draggingLine,
+          vertices
+        );
+        absAngle = Math.abs(lineAngle);
+        let tmpRelated = [];
+        GeometryUtils.getRelatedLines(
+          tmpRelated,
+          line,
+          vertices,
+          allLines,
+          draggingLine.id
+        );
+        for (let j = 0; j < tmpRelated.length; j++) {
+          let 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(flag => flag === false)) {
+      vtx = x;
+      vty = y;
+    } else {
+      let rest = MIN_ANGLE_DISALLOW_DRAW_WALL - absAngle;
+      // the origin point of rotation(snapping)
+      let originVerId = draggingLine.vertices.findIndex(
+        vertice => vertice !== dragVertexId
+      );
+      originVerId =
+        originVerId < 0
+          ? draggingLine.vertices[0]
+          : draggingLine.vertices[originVerId];
+      if (stepUnit) {
+        let ox = vertices[originVerId].x;
+        let oy = vertices[originVerId].y;
+        // determine the direction of rotation.
+        rest = lineAngle > 0 ? -rest : rest;
+        // rotate the current point to last point around the first point of drawing line.
+        let 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(flag => flag === false) &&
+      !isEmpty(absAngle) &&
+      absAngle % UNIT_ANGLE !== 0 &&
+      stepUnit
+    ) {
+      let result = GeometryUtils.snapAngleByUnit(
+        lineAngle,
+        vertices,
+        draggingLine,
+        vtx,
+        vty,
+        dragVertexId
+      );
+      vtx = result.x;
+      vty = result.y;
+    }
+
+    let result = {
+      isEndDrag: endDrag,
+      x: vtx,
+      y: vty
+    };
+    return result;
+  };
+
+  const getProperties = (item, property) => {
+    if (!item?.properties?.getIn) return 0;
+    const length = item.properties.getIn([property, '_length']);
+    const unit = item.properties.getIn([property, '_unit']);
+    return length && unit ? convert(length).from(unit).to('cm') : 0;
+  };
+
+  const point = (x, y) => ({ x, y });
+
+  const getDistant = (x, y, rotRad, curItemInfo, allRect) => {
+    const center_h = (3 * height) / 8;
+    const center_x1 = x - center_h * Math.sin(rotRad);
+    const center_y1 = y + center_h * Math.cos(rotRad);
+
+    const pointArray = [];
+
+    curItemInfo.rectCenterPoint.forEach(centerpoint => {
+      if (!Array.isArray(centerpoint) || centerpoint.length < 2) return;
+
+      const [pt, angle] = centerpoint;
+      if (!pt) return;
+
+      // line through centerpoint and reference center
+      const 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;
+
+      let minDist;
+      allRect.forEach(linerect => {
+        if (!linerect?.rect || linerect.rect.length < 4) return;
+
+        const p0 = GeometryUtils.clone_point(linerect.rect[2]);
+        const p1 = GeometryUtils.clone_point(linerect.rect[3]);
+        if (!p0 || !p1 || (p0.x === p1.x && p0.y === p1.y)) return;
+
+        const lineFn = GeometryUtils.linePassingThroughTwoPoints(
+          p0.x,
+          p0.y,
+          p1.x,
+          p1.y
+        );
+        if (!lineFn) return;
+
+        const ip = GeometryUtils.twoLinesIntersection(
+          lineFn.a,
+          lineFn.b,
+          lineFn.c,
+          rectLine.a,
+          rectLine.b,
+          rectLine.c
+        );
+        if (!ip) return;
+
+        // intersection must lie within line segment
+        const 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
+        const distToCenter = GeometryUtils.pointsDistance(ip.x, ip.y, x, y);
+        const baseDist = GeometryUtils.pointsDistance(pt.x, pt.y, ip.x, ip.y);
+        if (distToCenter <= baseDist) return;
+
+        const candidate = baseDist;
+        minDist =
+          minDist !== undefined ? Math.min(minDist, candidate) : candidate;
+      });
+
+      pointArray.push([minDist ?? 0, angle]);
+    });
+
+    return pointArray;
+  };
+
+  const getCalcRectFromItem = item => {
+    if (!item?.pos || !item?.size) return { rectCenterPoint: [] };
+
+    const { x, y } = item.pos;
+    const w = item.size.width / 2;
+    const h = item.size.height / 2;
+    const rotRad = item.rotRad;
+    const mh = (3 * h) / 4;
+
+    const mx = x - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
+    const my = y - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
+    const m2x = x + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
+    const m2y = y + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
+    const m3x = x - h * Math.sin(rotRad);
+    const m3y = y + h * Math.cos(rotRad);
+    const m1x = x + h * Math.sin(rotRad);
+    const m1y = y - h * Math.cos(rotRad);
+
+    return {
+      rectCenterPoint: [
+        [point(mx, my), 180],
+        [point(m1x, m1y), -90],
+        [point(m2x, m2y), 0],
+        [point(m3x, m3y), 90]
+      ]
+    };
+  };
+
+  const calcDistanceArray = () => {
+    const items = layer?.get('items');
+    if (!items) return;
+
+    items.forEach(item => {
+      if (item?.selected === true) {
+        const { x, y, rotation, id } = item;
+        if (x == null || y == null) return;
+
+        const val = {
+          pos: { x, y },
+          rotRad: (rotation / 180) * Math.PI
+        };
+
+        const width = getProperties(item, 'width');
+        const depth = getProperties(item, 'depth');
+        val.size = { width, height: depth };
+
+        // collect geometry
+        const allLines = GeometryUtils.getAllLines(layer) || [];
+        const allLineRects =
+          GeometryUtils.buildRectFromLines(layer, allLines) || [];
+        const allItemRect = GeometryUtils.getAllItems(
+          scene,
+          catalog,
+          allLineRects
+        ) || { others: [] };
+        const allRect = [...(allItemRect.others || []), ...allLineRects];
+
+        // current item
+        const curItemInfo = getCalcRectFromItem(val);
+        const pointArray = getDistant(x, y, val.rotRad, curItemInfo, allRect);
+
+        // store results safely
+        if (Array.isArray(pointArray)) {
+          itemsActions.storeDistArray(layerID, id, pointArray);
+        }
+      }
+    });
+  };
+
+  let onMouseMove = viewerEvent => {
+    //workaround that allow imageful component to work
+
+    // let evt = new Event('mousemove-planner-event');
+    // evt.viewerEvent = viewerEvent;
+    // document.dispatchEvent(evt);
+    let { x, y } = mapCursorPosition(viewerEvent);
+    projectActions.updateMouseCoord({ x, y });
+    if (sFlag) {
+      let 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'])) {
+            let lineID = state
+              .getIn(['scene', 'layers', layerID, 'selected', 'lines'])
+              .first();
+
+            let vertices = state
+              .getIn(['scene', 'layers', layerID, 'vertices'])
+              .toJS();
+            let lines = state
+              .getIn(['scene', 'layers', layerID, 'lines'])
+              .toJS();
+            let drawingLine = state
+              .getIn(['scene', 'layers', layerID, 'lines', lineID])
+              .toJS();
+            let 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:
+          calcDistanceArray();
+          let layer = scene.layers.get(layerID);
+          let flag = false;
+          layer.items.some(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 { nx, ny, rot, rotRad } = GeometryUtils.calcSnap(
+              allItemRect,
+              allItemSnap,
+              allLineRects,
+              allLineSnap,
+              allRect,
+              x,
+              y,
+              allArea
+            );
+            let val = {
+              pos: { x, y },
+              rotRad,
+              size: allItemRect.cur && allItemRect.cur.size,
+              layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
+              is_corner: allItemRect.cur && allItemRect.cur.is_corner
+            };
+            let { isSect, snap } = GeometryUtils.getAllHoleRect(scene, val);
+            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 };
+              }
+              let interSect = GeometryUtils.validInterSect(
+                allItemRect.others,
+                val
+              );
+              if (interSect) {
+                nx = val.pos.x;
+                ny = val.pos.y;
+              }
+            }
+
+            val.pos = { x: nx, y: ny };
+            let 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:
+          let vertices = state
+            .getIn(['scene', 'layers', layerID, 'vertices'])
+            .toJS();
+          let result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
+          verticesActions.updateDraggingVertex(
+            result.x,
+            result.y,
+            state.snapMask
+          );
+          break;
+
+        case constants.MODE_DRAGGING_ITEM:
+          calcDistanceArray();
+          prepareSnap();
+          var { nx, ny, rot, rotRad } = GeometryUtils.calcSnap(
+            allItemRect,
+            allItemSnap,
+            allLineRects,
+            allLineSnap,
+            allRect,
+            x,
+            y,
+            allArea
+          );
+          let val = {
+            pos: { x, y },
+            rotRad,
+            size: allItemRect.cur && allItemRect.cur.size,
+            layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
+            is_corner: allItemRect.cur && allItemRect.cur.is_corner
+          };
+          let { isSect, snap } = GeometryUtils.getAllHoleRect(scene, val);
+          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 };
+            }
+            let interSect = GeometryUtils.validInterSect(
+              allItemRect.others,
+              val
+            );
+            if (interSect) {
+              nx = val.pos.x;
+              ny = val.pos.y;
+            }
+          }
+
+          val.pos = { x: nx, y: ny };
+          let 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();
+  };
+
+  let onMouseDown = viewerEvent => {
+    let event = viewerEvent.originalEvent;
+    //workaround that allow imageful component to work
+    // let evt = new Event('mousedown-planner-event');
+    // evt.viewerEvent = viewerEvent;
+    // document.dispatchEvent(evt);
+    let { x, y } = mapCursorPosition(viewerEvent);
+    let layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
+    let 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) {
+      let elementData = extractElementData(event.target);
+      if (!elementData) return;
+
+      if (sCount < 2)
+        switch (elementData.prototype) {
+          case 'lines':
+            if (elementData.selected) {
+              if (elementData.part === 'remove') break;
+              else if (elementData.part === 'elevation') break;
+              linesActions.beginDraggingLine(
+                elementData.layer,
+                elementData.id,
+                x,
+                y,
+                state.snapMask
+              );
+            }
+            break;
+          case 'vertices':
+            verticesActions.beginDraggingVertex(
+              elementData.layer,
+              elementData.id,
+              x,
+              y,
+              state.snapMask
+            );
+            break;
+
+          case 'items':
+            setToolbar('');
+            current_sel_obj_id = elementData.id;
+            if (elementData.part === 'rotation-anchor')
+              itemsActions.beginRotatingItem(
+                elementData.layer,
+                elementData.id,
+                x,
+                y
+              );
+            else if (elementData.part === 'remove') break;
+            else if (elementData.part === 'duplicate') break;
+            else if (elementData.part === 'warning_edit') break;
+            else {
+              // closes the setting dialog
+              // document.getElementById('setting_dialog').style.display = 'none';
+
+              itemsActions.selectItem(elementData.layer, elementData.id);
+              // projectActions.setMode(constants.MODE_DRAGGING_ITEM);
+              itemsActions.beginDraggingItem(
+                elementData.layer,
+                elementData.id,
+                x,
+                y
+              );
+              replaceCabinet(false);
+            }
+            break;
+
+          case 'holes':
+            if (elementData.selected)
+              holesActions.beginDraggingHole(
+                elementData.layer,
+                elementData.id,
+                x,
+                y
+              );
+            break;
+
+          default:
+            break;
+        }
+      else {
+        sPoint.x = x;
+        sPoint.y = y;
+        sFlag = true;
+      }
+    }
+    event.stopPropagation();
+  };
+
+  let onMouseUp = viewerEvent => {
+    //set move all flag false
+    sFlag = false;
+    // //////////////////////
+    // setRulerEdit(null);
+    let event = viewerEvent.originalEvent;
+    let 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);
+
+    let { x, y } = mapCursorPosition(viewerEvent);
+
+    let vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    let lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+
+    switch (mode) {
+      case constants.MODE_IDLE:
+        let elementData = extractElementData(event.target);
+        let selectedLayer = scene.getIn(['layers', layerID]);
+        switch (elementData ? elementData.prototype : 'none') {
+          case 'areas':
+            // document.getElementById('setting_dialog').style.display = 'none';
+            areaActions.selectArea(elementData.layer, elementData.id);
+            break;
+
+          case 'lines':
+            // 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
+              let mode = MODE_ELEVATION_VIEW;
+              projectActions.setMode(mode);
+              break;
+            } else {
+              let tlines = [];
+              let drawingLine = state
+                .getIn(['scene', 'layers', layerID, 'lines', elementData.id])
+                .toJS();
+              getRelatedLines(tlines, drawingLine, vertices, lines);
+              setRelatedLines(tlines);
+              linesActions.selectLine(elementData.layer, elementData.id);
+              break;
+            }
+
+          case 'holes':
+            // document.getElementById('setting_dialog').style.display = 'none';
+            holesActions.selectHole(elementData.layer, elementData.id);
+            break;
+
+          case 'items':
+            if (elementData.part === 'duplicate') {
+              let 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
+              // document.getElementById('setting_dialog').style.display = 'none';
+
+              itemsActions.selectItem(elementData.layer, elementData.id);
+              replaceCabinet(true);
+              break;
+            } else {
+              projectActions.unselectAll();
+              break;
+            }
+          case 'rulerDist':
+            let _length1 = convert(elementData.length)
+              .from(scene.unit)
+              .to(scene.rulerUnit);
+            let distanceText1 = `${formatNumber(_length1, DECIMAL_PLACES_2)}`;
+            const numberInput1 = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 150,
+                    height: 50,
+                    textAlign: 'center',
+                    paddingRight: 10,
+                    fontSize: '16px',
+                    lineHeight: '22px',
+                    fontWeight: 600
+                  }}
+                  value={distanceText1}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            setRulerEdit(numberInput1);
+            projectActions.unselectAll();
+            break;
+          case 'ruler':
+            let _length = convert(elementData.length)
+              .from(scene.unit)
+              .to(selectedLayer.unit);
+            const numberInput = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 150,
+                    height: 50,
+                    textAlign: 'center',
+                    paddingRight: 10,
+                    fontSize: '16px',
+                    lineHeight: '22px',
+                    fontWeight: 600
+                  }}
+                  value={formatNumber(_length, DECIMAL_PLACES_2)}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            setRulerEdit(numberInput);
+            projectActions.unselectAll();
+            break;
+          case 'twoHoleRuler':
+            let _lengthTwoHoleRuler = convert(elementData.length)
+              .from(scene.unit)
+              .to(scene.rulerUnit);
+            let distanceTextTwoHoleRuler = `${formatNumber(
+              _lengthTwoHoleRuler,
+              DECIMAL_PLACES_2
+            )}`;
+            const numberInputTwoHoleRuler = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 150,
+                    height: 50,
+                    textAlign: 'center',
+                    padding: 'auto',
+                    fontSize: '16px',
+                    lineHeight: '22px',
+                    fontWeight: 600
+                  }}
+                  value={distanceTextTwoHoleRuler}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            setRulerEdit(numberInputTwoHoleRuler);
+            projectActions.unselectAll();
+            break;
+          case 'leftHoleRuler':
+            let _lengthLeftHoleRuler = convert(elementData.length)
+              .from(scene.unit)
+              .to(scene.rulerUnit);
+            let distanceTextLeftHoleRuler = `${_lengthLeftHoleRuler.toFixed(
+              2
+            )}`;
+            const numberInputLeftHoleRuler = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 150,
+                    height: 50,
+                    textAlign: 'center',
+                    paddingRight: 10,
+                    fontSize: '16px',
+                    lineHeight: '22px',
+                    fontWeight: 600
+                  }}
+                  value={distanceTextLeftHoleRuler}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            setRulerEdit(numberInputLeftHoleRuler);
+            projectActions.unselectAll();
+            break;
+          case 'rulerHole':
+            let _lengthRulerHole = convert(elementData.length)
+              .from(scene.unit)
+              .to(scene.rulerUnit);
+            let distanceTextRulerHole = `${formatNumber(
+              _lengthRulerHole,
+              DECIMAL_PLACES_2
+            )}`;
+            const numberInputRulerHole = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 150,
+                    height: 50,
+                    textAlign: 'center',
+                    paddingRight: 10,
+                    fontSize: '16px',
+                    lineHeight: '22px',
+                    fontWeight: 600
+                  }}
+                  value={distanceTextRulerHole}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            setRulerEdit(numberInputRulerHole);
+            projectActions.unselectAll();
+            break;
+          case 'rightHoleRuler':
+            let _lengthRightHoleRuler = convert(elementData.length)
+              .from(scene.unit)
+              .to(scene.rulerUnit);
+            let distanceTextRightHoleRuler = `${_lengthRightHoleRuler.toFixed(
+              2
+            )}`;
+            const numberInputRightHoleRuler = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 150,
+                    height: 50,
+                    textAlign: 'center',
+                    paddingRight: 10,
+                    fontSize: '16px',
+                    lineHeight: '22px',
+                    fontWeight: 600
+                  }}
+                  value={distanceTextRightHoleRuler}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            setRulerEdit(numberInputRightHoleRuler);
+            projectActions.unselectAll();
+            break;
+          case 'angleChange':
+            let _length2 = elementData.length;
+            const numberInput2 = (
+              <div
+                id="ruler_numberInput"
+                style={{
+                  position: 'absolute',
+                  left: bbox.left - (150 - bbox.width) / 2,
+                  top: bbox.top - (50 - bbox.height) / 2,
+                  zIndex: 1000
+                }}
+              >
+                <FormNumberInput
+                  style={{
+                    width: 50,
+                    height: 50
+                  }}
+                  value={_length2}
+                  onChange={event => {
+                    const 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}
+                />
+              </div>
+            );
+            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);
+        let lineID = state
+          .getIn(['scene', 'layers', layerID, 'selected', 'lines'])
+          .first();
+        let drawingLine = state
+          .getIn(['scene', 'layers', layerID, 'lines', lineID])
+          .toJS();
+        // get the lines that have same points with drawing line.
+        let tlines = [];
+        getRelatedLines(tlines, drawingLine, vertices, lines);
+        setRelatedLines(tlines);
+        let endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
+        linesActions.endDrawingLine(
+          endInfor.x,
+          endInfor.y,
+          tlines,
+          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:
+        let 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;
+    }
+
+    event.stopPropagation();
+  };
+
+  let onChangeValue = value => {
+    if (sFlag) return;
+    let _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'
+    ) {
+      let _rulerEdit = document.getElementById('ruler_numberInput'),
+        _rect;
+      if (rulerEditID !== null) {
+        _rect = document.getElementById(rulerEditID);
+      }
+      let bbox;
+      if (_rect && _rulerEdit) {
+        bbox = _rect.getBoundingClientRect();
+        // bbox.width = _rect.getBBox().width;
+        // bbox.height = _rect.getBBox().height;
+        _rulerEdit.style.left = `${bbox.left - (150 - bbox.width) / 2}px`;
+        _rulerEdit.style.top = `${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);
+    }
+  };
+
+  let 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;
+    }
+  };
+
+  let onZoom = value => {
+    // var nextValue = viewer2D.toJS();
+    // nextValue = zoom(nextValue, 0, 0, value.a / nextValue.a)
+    // projectActions.updateZoomScale(nextValue.a);
+    // return viewer2DActions.updateCameraView(nextValue)
+  };
+
+  let { e, f, SVGWidth, SVGHeight } = state.get('viewer2D').toJS();
+
+  let rulerSize = 0; //px
+  let rulerUnitPixelSize = 100;
+  let rulerBgColor = SharedStyle.PRIMARY_COLOR.main;
+  let rulerFnColor = SharedStyle.COLORS.white;
+  let rulerMkColor = SharedStyle.SECONDARY_COLOR.main;
+  let sceneWidth = SVGWidth || state.getIn(['scene', 'width']);
+  let sceneHeight = SVGHeight || state.getIn(['scene', 'height']);
+  let sceneZoom = state.zoom || 1;
+  let rulerXElements = Math.ceil(sceneWidth / rulerUnitPixelSize) + 1;
+  let rulerYElements = Math.ceil(sceneHeight / rulerUnitPixelSize) + 1;
+  return (
+    <div>
+      {rulerEdit}
+      <div
+        style={{
+          margin: 0,
+          padding: 0,
+          display: 'grid',
+          gridRowGap: '0',
+          gridColumnGap: '0',
+          gridTemplateColumns: `${rulerSize}px ${width - rulerSize}px`,
+          gridTemplateRows: `${rulerSize}px ${height - rulerSize}px`,
+          position: 'relative'
+        }}
+      >
+        <div
+          style={{ gridColumn: 1, gridRow: 1, backgroundColor: rulerBgColor }}
+        ></div>
+        <div
+          style={{
+            gridRow: 1,
+            gridColumn: 2,
+            position: 'relative',
+            overflow: 'hidden'
+          }}
+          id="rulerX"
+        >
+          {sceneWidth ? (
+            <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}
+        </div>
+        <div
+          style={{
+            gridColumn: 1,
+            gridRow: 2,
+            position: 'relative',
+            overflow: 'hidden'
+          }}
+          id="rulerY"
+        >
+          {sceneHeight ? (
+            <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}
+        </div>
+        <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}
+        >
+          <svg width={scene.width} height={scene.height}>
+            <defs>
+              <pattern
+                id="diagonalFill"
+                patternUnits="userSpaceOnUse"
+                width="4"
+                height="4"
+                fill="#FFF"
+              >
+                <rect x="0" y="0" width="4" height="4" fill="#FFF" />
+                <path
+                  d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
+                  style={{ stroke: '#8E9BA2', strokeWidth: 1 }}
+                />
+              </pattern>
+            </defs>
+            <g
+              style={Object.assign(mode2Cursor(mode), mode2PointerEvents(mode))}
+            >
+              <State
+                state={state}
+                catalog={catalog}
+                viewer2DActions={viewer2DActions}
+                relatedLines={relatedLines}
+              />
+            </g>
+          </svg>
+        </ReactSVGPanZoom>
+      </div>
+    </div>
+  );
+}
+
+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
+};