kitchen-simulator 5.0.2-react.18 → 5.0.4-react.18

package/es/components/viewer2d/viewer2d.js

@@ -15,10 +15,11 @@ 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"; // variables
+import { isEmpty, updatePayloadOfInternalEvent } from "../../utils/helper";
 import { isWarningItem } from "./utils";
 import AppContext from "../../AppContext";
-// variables
+
+// variables (kept as in your original file)
 var pinFlag = false;
 var sFlag = false; //for all object move
 var sPoint = {}; //for all object move
@@ -107,10 +108,11 @@ function mode2DetectAutopan(mode) {
   }
 }
 function extractElementData(node) {
-  while (!node.attributes.getNamedItem('data-element-root') && node.tagName !== 'svg') {
+  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;
     node = node.parentNode;
   }
-  if (node.tagName === 'svg') return null;
+  if (!node || 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,
@@ -128,15 +130,16 @@ export default function Viewer2D(_ref) {
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     onInternalEvent = _ref.onInternalEvent;
-  var _useContext = useContext(AppContext),
-    viewer2DActions = _useContext.viewer2DActions,
-    linesActions = _useContext.linesActions,
-    holesActions = _useContext.holesActions,
-    verticesActions = _useContext.verticesActions,
-    itemsActions = _useContext.itemsActions,
-    areaActions = _useContext.areaActions,
-    projectActions = _useContext.projectActions,
-    catalog = _useContext.catalog;
+  // ✅ 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 _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     rulerEdit = _useState2[0],
@@ -146,22 +149,55 @@ 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;
-
-  // let relatedLines = [];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    relatedLines = _useState6[0],
-    setRelatedLines = _useState6[1];
-  var _useState7 = useState(false),
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    drawStart = _useState8[0],
-    setdrawStart = _useState8[1];
+    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;
   useEffect(function () {
-    if (!Viewer.current) return;
-    var zoom = viewer2D && !viewer2D.isEmpty() ? viewer2D.get('a') : 1;
+    if (!viewerReady || !Viewer.current) return;
 
     // move viewer point to center
     var selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
@@ -181,8 +217,10 @@ 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;
+    console.log('aici');
     Viewer.current.setPointOnViewerCenter(moveX, moveY, zoom);
-  }, []);
+  }, [viewerReady, state.scene.selectedLayer]);
   var layerID = scene.selectedLayer;
   var wall_thickness = LINE_THICKNESS / 2;
   var layer = scene.getIn(['layers', layerID]);
@@ -194,10 +232,6 @@ export default function Viewer2D(_ref) {
       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);
@@ -257,24 +291,7 @@ 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) {
@@ -294,11 +311,6 @@ 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(',');
@@ -364,11 +376,9 @@ 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();
@@ -435,7 +445,6 @@ 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;
       });
@@ -443,7 +452,7 @@ export default function Viewer2D(_ref) {
       if (stepUnit) {
         var _ox = vertices[_originVerId].x;
         var _oy = vertices[_originVerId].y;
-        angles.forEach(function (angle, index) {
+        angles.forEach(function (angle) {
           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;
@@ -451,9 +460,7 @@ 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;
@@ -461,98 +468,18 @@ 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;
     }
-    var result = {
+    return {
       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;
@@ -560,20 +487,22 @@ 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);
     }
   };
-  var onMouseMove = function onMouseMove(viewerEvent) {
-    //workaround that allow imageful component to work
 
-    // let evt = new Event('mousemove-planner-event');
-    // evt.viewerEvent = viewerEvent;
-    // document.dispatchEvent(evt);
-    var _mapCursorPosition = mapCursorPosition(viewerEvent),
+  // =========================
+  // ✅ 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),
       x = _mapCursorPosition.x,
       y = _mapCursorPosition.y;
     projectActions.updateMouseCoord({
@@ -589,54 +518,127 @@ export default function Viewer2D(_ref) {
     } else {
       switch (mode) {
         case constants.MODE_DRAWING_LINE:
-          // check whether the drawing line is started.
-          var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-          var lines = state.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);
+          {
+            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;
           }
-
-          // 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;
+          {
+            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;
+              }
             }
-          });
-          if (current_sel_obj_id === null || !flag) {
-            itemsActions.updateDrawingItem(layerID, x, y);
-            endPoint.x = x;
-            endPoint.y = y;
-          } else {
+            break;
+          }
+        case constants.MODE_DRAGGING_HOLE:
+          holesActions.updateDraggingHole(x, y);
+          break;
+        case constants.MODE_DRAGGING_LINE:
+          linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
+          break;
+        case constants.MODE_DRAGGING_VERTEX:
+          {
+            var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+            getConnectedLines();
+            var result = getEndPoint(_vertices, x, y, 'DRAGGING_VERTEX');
+            verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
+            break;
+          }
+        case constants.MODE_DRAGGING_ITEM:
+          {
             prepareSnap();
-            var _GeometryUtils$calcSn = 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 _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,
@@ -647,14 +649,14 @@ export default function Viewer2D(_ref) {
               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;
+            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 {
+              };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
@@ -663,8 +665,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;
               }
@@ -677,106 +679,33 @@ 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;
           }
-          break;
-        case constants.MODE_DRAGGING_HOLE:
-          holesActions.updateDraggingHole(x, y);
-          break;
-        case constants.MODE_DRAGGING_LINE:
-          linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
-          break;
-        case constants.MODE_DRAGGING_VERTEX:
-          var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
-          getConnectedLines();
-          var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
-          verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
-          break;
-        case constants.MODE_DRAGGING_ITEM:
-          prepareSnap();
-          var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
-            nx = _GeometryUtils$calcSn2.nx,
-            ny = _GeometryUtils$calcSn2.ny,
-            rot = _GeometryUtils$calcSn2.rot,
-            rotRad = _GeometryUtils$calcSn2.rotRad;
-          var val = {
-            pos: {
-              x: x,
-              y: y
-            },
-            rotRad: rotRad,
-            size: allItemRect.cur && allItemRect.cur.size,
-            layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
-            is_corner: allItemRect.cur && allItemRect.cur.is_corner
-          };
-          var _GeometryUtils$getAll2 = GeometryUtils.getAllHoleRect(scene, val),
-            isSect = _GeometryUtils$getAll2.isSect,
-            snap = _GeometryUtils$getAll2.snap;
-          if (!isEmpty(snap) && isSect) {
-            if (snap.length == 1) val.pos = {
-              x: snap[0].x,
-              y: snap[0].y
-            };else if (snap.length == 2) {
-              if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
-                x: snap[0].x,
-                y: snap[0].y
-              };else val.pos = {
-                x: snap[1].x,
-                y: snap[1].y
-              };
-            }
-            var _interSect = GeometryUtils.validInterSect(allItemRect.others, val);
-            if (_interSect) {
-              nx = val.pos.x;
-              ny = val.pos.y;
-            }
-          }
-          val.pos = {
-            x: nx,
-            y: ny
-          };
-          var isrectSect = GeometryUtils.validInterSect(allItemRect.others, val);
-          if (isrectSect && isSect) {
-            itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-            itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-          }
-          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
-            itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-            itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-          }
-          if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
-            itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
-            itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
-          }
-          break;
         case constants.MODE_ROTATING_ITEM:
           itemsActions.updateRotatingItem(x, y);
           break;
+        default:
+          break;
       }
     }
-    viewerEvent.originalEvent.stopPropagation();
+    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);
   };
   var onMouseDown = function onMouseDown(viewerEvent) {
     var event = viewerEvent.originalEvent;
-    //workaround that allow imageful component to work
-    // let evt = new Event('mousedown-planner-event');
-    // evt.viewerEvent = viewerEvent;
-    // document.dispatchEvent(evt);
-    var _mapCursorPosition2 = mapCursorPosition(viewerEvent),
+
+    // ✅ fixed: do not treat viewerEvent as {x,y}
+    var raw = getXY(viewerEvent);
+    if (!raw) return;
+    var _mapCursorPosition2 = mapCursorPosition(raw),
       x = _mapCursorPosition2.x,
       y = _mapCursorPosition2.y;
     var layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
@@ -810,12 +739,10 @@ 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);
             }
@@ -835,9 +762,15 @@ 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;
@@ -858,13 +791,6 @@ 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();
@@ -901,8 +827,6 @@ 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;
@@ -917,8 +841,12 @@ export default function Viewer2D(_ref) {
               internalType = INTERNAL_EVENT_SELECT_ELEMENT;
             }
             break;
+          default:
+            break;
         }
         break;
+      default:
+        break;
     }
     switch (mode) {
       case constants.MODE_IDLE:
@@ -937,7 +865,6 @@ 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;
@@ -959,13 +886,12 @@ 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); // send draw internal event when duplicating
+              if (!isWarningItem(currentObject)) itemsActions.duplicateSelected(currentObject, onInternalEvent);
               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';
               }
@@ -978,234 +904,250 @@ 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;
+            {
+              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':
             projectActions.unselectAll();
             break;
+          default:
+            break;
         }
         break;
       case constants.MODE_WAITING_DRAWING_LINE:
@@ -1213,19 +1155,14 @@ export default function Viewer2D(_ref) {
         linesActions.beginDrawingLine(layerID, x, y, state.snapMask, onInternalEvent);
         break;
       case constants.MODE_DRAWING_LINE:
-        // Blocked 90 degree snap.
-        // let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
-        // let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
-        // let dx = Math.abs(x - prevVertex.x);
-        // let dy = Math.abs(y - prevVertex.y);
-        // if (dx > dy) y = prevVertex.y
-        // else x = prevVertex.x;
-        setdrawStart(true);
-        getConnectedLines();
-        var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
-        linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
-        linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask, onInternalEvent);
-        break;
+        {
+          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;
@@ -1233,16 +1170,18 @@ 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);
@@ -1253,6 +1192,8 @@ export default function Viewer2D(_ref) {
       case constants.MODE_ROTATING_ITEM:
         itemsActions.endRotatingItem(x, y);
         break;
+      default:
+        break;
     }
     if (internalType) {
       var _currentObject2;
@@ -1263,8 +1204,6 @@ export default function Viewer2D(_ref) {
       }
       if (_currentObject) {
         var payload = updatePayloadOfInternalEvent(_currentObject, layer, catalog);
-
-        // send selection event befor replace event
         if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
           onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
             type: INTERNAL_EVENT_SELECT_ELEMENT,
@@ -1279,22 +1218,12 @@ export default function Viewer2D(_ref) {
     }
     event.stopPropagation();
   };
-  var normalizeValue = function normalizeValue(v) {
-    var _v$viewerWidth, _v$viewerHeight, _v$SVGWidth, _v$SVGHeight;
-    return _objectSpread(_objectSpread({}, v), {}, {
-      viewerWidth: (_v$viewerWidth = v.viewerWidth) !== null && _v$viewerWidth !== void 0 ? _v$viewerWidth : width - rulerSize,
-      viewerHeight: (_v$viewerHeight = v.viewerHeight) !== null && _v$viewerHeight !== void 0 ? _v$viewerHeight : height - rulerSize,
-      SVGWidth: (_v$SVGWidth = v.SVGWidth) !== null && _v$SVGWidth !== void 0 ? _v$SVGWidth : scene.width,
-      SVGHeight: (_v$SVGHeight = v.SVGHeight) !== null && _v$SVGHeight !== void 0 ? _v$SVGHeight : scene.height
-    });
-  };
   var onChangeValue = function onChangeValue(value) {
     if (sFlag) return;
-    var normalized = normalizeValue(value);
-    var _zoomValue = parseInt((normalized.a - 0.5) / constants.ZOOM_VARIABLE);
+    var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE, 10);
     if (_zoomValue > constants.MAX_ZOOM_IN_SCALE) return;
     if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
-    if (rulerEdit !== null && normalized.startX && normalized.startY || normalized.lastAction === 'zoom') {
+    if (rulerEdit !== null && value.startX && value.startY || value.lastAction === 'zoom') {
       var _rulerEdit = document.getElementById('ruler_numberInput') && document.getElementById('ruler_numberInput'),
         _rect;
       if (rulerEditID !== null) {
@@ -1307,13 +1236,16 @@ export default function Viewer2D(_ref) {
         _rulerEdit.style.top = "".concat(bbox.top - (50 - bbox.height) / 2, "px");
       }
     }
-    if (normalized.e <= 10 && normalized.e + normalized.a * normalized.SVGWidth + 10 >= normalized.viewerWidth && normalized.f <= 80 && normalized.f + normalized.d * normalized.SVGHeight + 10 >= normalized.viewerHeight) {
-      projectActions.updateZoomScale(normalized.a);
-      return viewer2DActions.updateCameraView(normalized);
+    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) {
+      projectActions.updateZoomScale(value.a);
+      return viewer2DActions.updateCameraView(value);
     }
   };
   var onChangeTool = function onChangeTool(tool) {
     switch (tool) {
+      case TOOL_NONE:
+        projectActions.selectToolEdit();
+        break;
       case TOOL_PAN:
         viewer2DActions.selectToolPan();
         break;
@@ -1323,18 +1255,10 @@ export default function Viewer2D(_ref) {
       case TOOL_ZOOM_OUT:
         viewer2DActions.selectToolZoomOut();
         break;
-      case TOOL_NONE:
-      case TOOL_AUTO:
       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,
@@ -1432,15 +1356,15 @@ export default function Viewer2D(_ref) {
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onMouseUp: onMouseUp,
-    detectPinchGesture: false,
+    miniatureProps: {
+      position: 'none'
+    },
     toolbarProps: {
-      position: 'none',
-      style: {
-        display: 'none'
-      }
+      position: 'none'
     },
+    detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
-    ref: Viewer
+    ref: setViewerRef
   }, /*#__PURE__*/React.createElement("svg", {
     width: scene.width,
     height: scene.height
@@ -1474,5 +1398,8 @@ export default function Viewer2D(_ref) {
 Viewer2D.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
+  setToolbar: PropTypes.func,
+  replaceCabinet: PropTypes.func,
+  onInternalEvent: PropTypes.func
 };