kitchen-simulator 11.0.0-react.18 → 11.1.0

package/es/components/viewer2d/viewer2d.js

@@ -2,7 +2,7 @@ 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, { useContext, useEffect, useRef, useState } from 'react';
+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";
@@ -15,11 +15,9 @@ 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, updatePayloadOfInternalEvent } from "../../utils/helper";
-import { isWarningItem } from "./utils";
-import AppContext from "../../AppContext";
-
-// variables (kept as in your original file)
+import { isEmpty, updatePayloadOfInternalEvent } from "../../utils/helper"; // variables
+import { isWarningCabinet } from "../../shared/domain/cabinet-warning";
+// variables
 var pinFlag = false;
 var sFlag = false; //for all object move
 var sPoint = {}; //for all object move
@@ -32,7 +30,6 @@ var allLines;
 var allLineRects;
 var allLineSnap;
 var allRect;
-var holeRect;
 var allArea;
 
 // /////////
@@ -108,11 +105,10 @@ function mode2DetectAutopan(mode) {
   }
 }
 function extractElementData(node) {
-  while (!((_node = node) !== null && _node !== void 0 && (_node = _node.attributes) !== null && _node !== void 0 && (_node$getNamedItem = _node.getNamedItem) !== null && _node$getNamedItem !== void 0 && _node$getNamedItem.call(_node, 'data-element-root')) && ((_node2 = node) === null || _node2 === void 0 ? void 0 : _node2.tagName) !== 'svg') {
-    var _node, _node$getNamedItem, _node2;
+  while (!node.attributes.getNamedItem('data-element-root') && node.tagName !== 'svg') {
     node = node.parentNode;
   }
-  if (!node || node.tagName === 'svg') return null;
+  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,
@@ -123,23 +119,21 @@ function extractElementData(node) {
     direct: node.attributes.getNamedItem('data-direct') ? node.attributes.getNamedItem('data-direct').value : 0
   };
 }
-export default function Viewer2D(_ref) {
+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;
-  // ✅ React 18: useContext instead of legacy contextTypes
-  var ctx = useContext(AppContext);
-  var viewer2DActions = ctx.viewer2DActions,
-    linesActions = ctx.linesActions,
-    holesActions = ctx.holesActions,
-    verticesActions = ctx.verticesActions,
-    itemsActions = ctx.itemsActions,
-    areaActions = ctx.areaActions,
-    projectActions = ctx.projectActions,
-    catalog = ctx.catalog;
+  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],
@@ -149,56 +143,20 @@ export default function Viewer2D(_ref) {
     rulerEditID = _useState4[0],
     setRulerEditID = _useState4[1];
   var Viewer = useRef(null);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    viewerReady = _useState6[0],
-    setViewerReady = _useState6[1];
-  var setViewerRef = function setViewerRef(node) {
-    Viewer.current = node;
-    if (node && !viewerReady) setViewerReady(true);
-  };
   var viewer2D = state.viewer2D,
     mode = state.mode,
     scene = state.scene;
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    relatedLines = _useState8[0],
-    setRelatedLines = _useState8[1];
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    drawStart = _useState0[0],
-    setdrawStart = _useState0[1];
-
-  /**
-   * ✅ CRITICAL FIX (keeps same behavior):
-   * react-svg-pan-zoom does NOT always provide viewerEvent.x/y on mousedown/mouseup.
-   * If you treat viewerEvent as {x,y}, you inject NaN into Redux state -> SVG crash.
-   */
-  var getXY = function getXY(viewerEvent) {
-    var _viewerEvent$original;
-    // mousemove usually has viewer coords
-    if (Number.isFinite(viewerEvent === null || viewerEvent === void 0 ? void 0 : viewerEvent.x) && Number.isFinite(viewerEvent === null || viewerEvent === void 0 ? void 0 : viewerEvent.y)) {
-      return {
-        x: viewerEvent.x,
-        y: viewerEvent.y
-      };
-    }
-
-    // fallback for mousedown/mouseup
-    var ev = (viewerEvent === null || viewerEvent === void 0 || (_viewerEvent$original = viewerEvent.originalEvent) === null || _viewerEvent$original === void 0 ? void 0 : _viewerEvent$original.nativeEvent) || (viewerEvent === null || viewerEvent === void 0 ? void 0 : viewerEvent.originalEvent);
-    if (!ev || !Viewer.current) return null;
 
-    // most versions expose getSVGPoint
-    if (typeof Viewer.current.getSVGPoint === 'function') {
-      var pt = Viewer.current.getSVGPoint(ev.clientX, ev.clientY);
-      if (Number.isFinite(pt === null || pt === void 0 ? void 0 : pt.x) && Number.isFinite(pt === null || pt === void 0 ? void 0 : pt.y)) return pt;
-    }
-    return null;
-  };
-  var viewer2DState = state.viewer2D;
+  // 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 () {
-    if (!viewerReady || !Viewer.current) return;
-
     // move viewer point to center
     var selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
     var vertices = selectedLayer.vertices;
@@ -217,20 +175,23 @@ export default function Viewer2D(_ref) {
     });
     var moveX = topX + (bottomX - topX) / 2;
     var moveY = 2000 - (bottomY + (topY - bottomY) / 2);
-    var zoom = viewer2DState && !viewer2DState.isEmpty() ? viewer2DState.get('a') : 1;
-    Viewer.current.setPointOnViewerCenter(moveX, moveY, zoom);
-  }, [viewerReady, state.scene.selectedLayer]);
+    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(_ref2) {
-    var x = _ref2.x,
-      y = _ref2.y;
+  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);
@@ -290,7 +251,24 @@ export default function Viewer2D(_ref) {
       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) {
@@ -310,6 +288,11 @@ export default function Viewer2D(_ref) {
       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(',');
@@ -375,9 +358,11 @@ export default function Viewer2D(_ref) {
         _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();
@@ -444,6 +429,7 @@ export default function Viewer2D(_ref) {
       vtx = x;
       vty = y;
     } else {
+      // the origin point of rotation(snapping)
       var _originVerId = draggingLine.vertices.findIndex(function (vertice) {
         return vertice !== dragVertexId;
       });
@@ -451,7 +437,7 @@ export default function Viewer2D(_ref) {
       if (stepUnit) {
         var _ox = vertices[_originVerId].x;
         var _oy = vertices[_originVerId].y;
-        angles.forEach(function (angle) {
+        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;
@@ -459,7 +445,9 @@ export default function Viewer2D(_ref) {
               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;
@@ -467,18 +455,98 @@ export default function Viewer2D(_ref) {
         });
       }
     }
+
+    // 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 = GeometryUtils.snapAngleByUnit(lineAngle, vertices, draggingLine, vtx, vty, dragVertexId);
+      vtx = _result.x;
+      vty = _result.y;
     }
-    return {
+    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;
@@ -486,22 +554,20 @@ export default function Viewer2D(_ref) {
     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);
     }
   };
-
-  // =========================
-  // ✅ Mouse handlers (only x/y extraction changed; logic preserved)
-  // =========================
-
   var onMouseMove = function onMouseMove(viewerEvent) {
-    var _viewerEvent$original2, _viewerEvent$original3;
-    var raw = getXY(viewerEvent);
-    if (!raw) return;
-    var _mapCursorPosition = mapCursorPosition(raw),
+    //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({
@@ -517,127 +583,54 @@ export default function Viewer2D(_ref) {
     } else {
       switch (mode) {
         case constants.MODE_DRAWING_LINE:
-          {
-            var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-            var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
-            var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
-            var tlines = [];
-            if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
-              var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
-              setdrawStart(false);
-              getRelatedLines(tlines, drawingLine, vertices, lines);
-              setRelatedLines(tlines);
-              linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
-            } else {
-              linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
-            }
-            break;
+          // check whether the drawing line is started.
+          var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
+          var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+          var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
+          var tlines = [];
+          if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
+            var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+            setdrawStart(false);
+            // get the lines that have same points with drawing line.
+            getRelatedLines(tlines, drawingLine, _vertices, lines);
+            setRelatedLines(tlines);
+            linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
+          } else {
+            linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
           }
+
+          // 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;
-              }
+          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;
             }
-            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:
-          {
+          });
+          if (current_sel_obj_id === null || !flag) {
+            itemsActions.updateDrawingItem(layerID, x, y);
+            endPoint.x = x;
+            endPoint.y = y;
+          } else {
             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 _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,
@@ -648,14 +641,14 @@ export default function Viewer2D(_ref) {
               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;
+            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.length == 2) {
+              };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
@@ -664,8 +657,8 @@ export default function Viewer2D(_ref) {
                   y: _snap[1].y
                 };
               }
-              var _interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
-              if (_interSect) {
+              var interSect = GeometryUtils.validInterSect(allItemRect.others, _val);
+              if (interSect) {
                 nx = _val.pos.x;
                 ny = _val.pos.y;
               }
@@ -678,33 +671,106 @@ export default function Viewer2D(_ref) {
             if (_isrectSect && _isSect) {
               itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
               itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+              endPoint.x = nx;
+              endPoint.y = ny;
             }
-            if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
+            if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
               itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
               itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+              endPoint.x = nx;
+              endPoint.y = ny;
             }
             if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
               itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
               itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
+              endPoint.x = nx;
+              endPoint.y = ny;
+            }
+          }
+          break;
+        case constants.MODE_DRAGGING_HOLE:
+          holesActions.updateDraggingHole(x, y);
+          break;
+        case constants.MODE_DRAGGING_LINE:
+          linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
+          break;
+        case constants.MODE_DRAGGING_VERTEX:
+          var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+          getConnectedLines();
+          var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
+          verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
+          break;
+        case constants.MODE_DRAGGING_ITEM:
+          prepareSnap();
+          var _GeometryUtils$calcSn2 = 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;
             }
-            break;
           }
+          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;
-        default:
-          break;
       }
     }
-    viewerEvent === null || viewerEvent === void 0 || (_viewerEvent$original2 = viewerEvent.originalEvent) === null || _viewerEvent$original2 === void 0 || (_viewerEvent$original3 = _viewerEvent$original2.stopPropagation) === null || _viewerEvent$original3 === void 0 || _viewerEvent$original3.call(_viewerEvent$original2);
+    viewerEvent.originalEvent.stopPropagation();
   };
   var onMouseDown = function onMouseDown(viewerEvent) {
     var event = viewerEvent.originalEvent;
-
-    // ✅ fixed: do not treat viewerEvent as {x,y}
-    var raw = getXY(viewerEvent);
-    if (!raw) return;
-    var _mapCursorPosition2 = mapCursorPosition(raw),
+    //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]);
@@ -738,10 +804,12 @@ export default function Viewer2D(_ref) {
             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);
             }
@@ -761,15 +829,9 @@ export default function Viewer2D(_ref) {
     event.stopPropagation();
   };
   var onMouseUp = function onMouseUp(viewerEvent) {
+    //set move all flag false
     sFlag = false;
     var event = viewerEvent.originalEvent;
-
-    // ✅ fixed: do not treat viewerEvent as {x,y}
-    var raw = getXY(viewerEvent);
-    if (!raw) return;
-    var _mapCursorPosition3 = mapCursorPosition(raw),
-      x = _mapCursorPosition3.x,
-      y = _mapCursorPosition3.y;
     var parent = document.querySelector('#kitchen-simulator-container');
     var targetRect = event.target.getBoundingClientRect();
     var left = targetRect.left;
@@ -790,6 +852,13 @@ export default function Viewer2D(_ref) {
       }
     }
     setRulerEdit(null);
+    // let evt = new Event('mouseup-planner-event');
+    // evt.viewerEvent = viewerEvent;
+    // document.dispatchEvent(evt);
+
+    var _mapCursorPosition3 = mapCursorPosition(viewerEvent),
+      x = _mapCursorPosition3.x,
+      y = _mapCursorPosition3.y;
     var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
     var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
     var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
@@ -826,6 +895,8 @@ export default function Viewer2D(_ref) {
         elementPrototype = 'items';
         internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
         break;
+
+      // item selection be came from dragging mode
       case constants.MODE_DRAGGING_ITEM:
         elementPrototype = 'items';
         internalType = INTERNAL_EVENT_SELECT_ELEMENT;
@@ -840,12 +911,8 @@ export default function Viewer2D(_ref) {
               internalType = INTERNAL_EVENT_SELECT_ELEMENT;
             }
             break;
-          default:
-            break;
         }
         break;
-      default:
-        break;
     }
     switch (mode) {
       case constants.MODE_IDLE:
@@ -864,6 +931,7 @@ export default function Viewer2D(_ref) {
               projectActions.remove();
               break;
             } else if (elementData.part === 'elevation') {
+              // handle action when click elevation about selected line
               var _mode = MODE_ELEVATION_VIEW;
               projectActions.setMode(_mode);
               internalType = constants.INTERNAL_EVENT_TOGGLE_TO_ELEVATION;
@@ -885,12 +953,13 @@ export default function Viewer2D(_ref) {
           case 'items':
             if (elementData.part === 'duplicate') {
               var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              if (!isWarningItem(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent);
+              if (!isWarningCabinet(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
               break;
             } else if (elementData.part === 'remove') {
               projectActions.remove();
               break;
             } else if (elementData.part === 'warning_edit') {
+              // closes the setting dialog
               if (document.getElementById('setting_dialog')) {
                 document.getElementById('setting_dialog').style.display = 'none';
               }
@@ -903,249 +972,233 @@ export default function Viewer2D(_ref) {
               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: left,
-                  top: top,
-                  zIndex: 1000
-                }
-              }, /*#__PURE__*/React.createElement(FormNumberInput, {
-                style: {
-                  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;
-            }
+            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: left,
+                top: top,
+                zIndex: 1000
+              }
+            }, /*#__PURE__*/React.createElement(FormNumberInput, {
+              style: {
+                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: left,
-                  top: top,
-                  zIndex: 1000
-                }
-              }, /*#__PURE__*/React.createElement(FormNumberInput, {
-                style: {
-                  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;
-            }
+            var _length = convert(elementData.length).from(scene.unit).to(selectedLayer.unit);
+            var numberInput = /*#__PURE__*/React.createElement("div", {
+              id: "ruler_numberInput",
+              style: {
+                position: 'absolute',
+                left: left,
+                top: top,
+                zIndex: 1000
+              }
+            }, /*#__PURE__*/React.createElement(FormNumberInput, {
+              style: {
+                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: left,
-                  top: top,
-                  zIndex: 1000
-                }
-              }, /*#__PURE__*/React.createElement(FormNumberInput, {
-                style: {
-                  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;
-            }
+            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: left,
+                top: top,
+                zIndex: 1000
+              }
+            }, /*#__PURE__*/React.createElement(FormNumberInput, {
+              style: {
+                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: left,
-                  top: top,
-                  zIndex: 1000
-                }
-              }, /*#__PURE__*/React.createElement(FormNumberInput, {
-                style: {
-                  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;
-            }
+            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: left,
+                top: top,
+                zIndex: 1000
+              }
+            }, /*#__PURE__*/React.createElement(FormNumberInput, {
+              style: {
+                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: left,
-                  top: top,
-                  zIndex: 1000
-                }
-              }, /*#__PURE__*/React.createElement(FormNumberInput, {
-                style: {
-                  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;
-            }
+            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: left,
+                top: top,
+                zIndex: 1000
+              }
+            }, /*#__PURE__*/React.createElement(FormNumberInput, {
+              style: {
+                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: left,
-                  top: top,
-                  zIndex: 1000
-                }
-              }, /*#__PURE__*/React.createElement(FormNumberInput, {
-                style: {
-                  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;
-            }
+            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: left,
+                top: top,
+                zIndex: 1000
+              }
+            }, /*#__PURE__*/React.createElement(FormNumberInput, {
+              style: {
+                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: left,
-                  top: top,
-                  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':
+            var _length2 = elementData.length;
+            var numberInput2 = /*#__PURE__*/React.createElement("div", {
+              id: "ruler_numberInput",
+              style: {
+                position: 'absolute',
+                left: left,
+                top: top,
+                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;
-          default:
+          case 'none':
+            projectActions.unselectAll();
             break;
         }
         break;
@@ -1154,14 +1207,19 @@ export default function Viewer2D(_ref) {
         linesActions.beginDrawingLine(layerID, x, y, state.snapMask, onInternalEvent);
         break;
       case constants.MODE_DRAWING_LINE:
-        {
-          setdrawStart(true);
-          getConnectedLines();
-          var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
-          linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
-          linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
-          break;
-        }
+        // Blocked 90 degree snap.
+        // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
+        // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
+        // let dx = Math.abs(x - prevVertex.x);
+        // let dy = Math.abs(y - prevVertex.y);
+        // if (dx > dy) y = prevVertex.y
+        // else x = prevVertex.x;
+        setdrawStart(true);
+        getConnectedLines();
+        var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
+        linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
+        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
+        break;
       case constants.MODE_DRAWING_HOLE:
         holesActions.endDrawingHole(layerID, x, y);
         break;
@@ -1169,18 +1227,16 @@ export default function Viewer2D(_ref) {
         {
           var itemData = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
           itemsActions.endDrawingItem(layerID, itemData.isInitialPos ? itemData.x : endPoint.x, itemData.isInitialPos ? itemData.y : endPoint.y);
-          break;
         }
+        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;
-        }
+        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);
@@ -1191,8 +1247,6 @@ export default function Viewer2D(_ref) {
       case constants.MODE_ROTATING_ITEM:
         itemsActions.endRotatingItem(x, y);
         break;
-      default:
-        break;
     }
     if (internalType) {
       var _currentObject2;
@@ -1202,7 +1256,9 @@ export default function Viewer2D(_ref) {
         _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
       }
       if (_currentObject) {
-        var payload = updatePayloadOfInternalEvent(_currentObject, layer, catalog);
+        var payload = updatePayloadOfInternalEvent(_currentObject, layer);
+
+        // send selection event befor replace event
         if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
           onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
             type: INTERNAL_EVENT_SELECT_ELEMENT,
@@ -1219,7 +1275,7 @@ export default function Viewer2D(_ref) {
   };
   var onChangeValue = function onChangeValue(value) {
     if (sFlag) return;
-    var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE, 10);
+    var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
     if (_zoomValue > constants.MAX_ZOOM_IN_SCALE) return;
     if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
     if (rulerEdit !== null && value.startX && value.startY || value.lastAction === 'zoom') {
@@ -1236,6 +1292,13 @@ export default function Viewer2D(_ref) {
       }
     }
     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);
     }
@@ -1254,10 +1317,14 @@ export default function Viewer2D(_ref) {
       case TOOL_ZOOM_OUT:
         viewer2DActions.selectToolZoomOut();
         break;
-      default:
-        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,
@@ -1273,18 +1340,6 @@ export default function Viewer2D(_ref) {
   var sceneZoom = state.zoom || 1;
   var rulerXElements = Math.ceil(sceneWidth / rulerUnitPixelSize) + 1;
   var rulerYElements = Math.ceil(sceneHeight / rulerUnitPixelSize) + 1;
-  var defaultViewerValue = {
-    a: 1,
-    b: 0,
-    c: 0,
-    d: 1,
-    e: 0,
-    f: 0,
-    viewerWidth: width - rulerSize,
-    viewerHeight: height - rulerSize,
-    SVGWidth: scene.width,
-    SVGHeight: scene.height
-  };
   return /*#__PURE__*/React.createElement("div", null, rulerEdit, /*#__PURE__*/React.createElement("div", {
     style: {
       margin: 0,
@@ -1347,7 +1402,7 @@ export default function Viewer2D(_ref) {
     },
     width: width - rulerSize,
     height: height - rulerSize,
-    value: viewer2D && !viewer2D.isEmpty() ? viewer2D.toJS() : defaultViewerValue,
+    value: viewer2D.isEmpty() ? null : viewer2D.toJS(),
     onChangeValue: onChangeValue,
     tool: mode2Tool(mode),
     onChangeTool: onChangeTool,
@@ -1355,15 +1410,11 @@ export default function Viewer2D(_ref) {
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onMouseUp: onMouseUp,
-    miniatureProps: {
-      position: 'none'
-    },
-    toolbarProps: {
-      position: 'none'
-    },
+    miniaturePosition: "none",
+    toolbarPosition: "none",
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
-    ref: setViewerRef
+    ref: Viewer
   }, /*#__PURE__*/React.createElement("svg", {
     width: scene.width,
     height: scene.height
@@ -1397,8 +1448,15 @@ export default function Viewer2D(_ref) {
 Viewer2D.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  setToolbar: PropTypes.func,
-  replaceCabinet: PropTypes.func,
-  onInternalEvent: PropTypes.func
+  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
 };