kitchen-simulator 4.3.4 → 4.3.6

package/es/components/viewer3d/scene-creator.js

@@ -1,8 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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 * as Three from 'three';
@@ -3014,11 +3011,11 @@ export function createBacksplash(item, layer, planData, scene) {
   var wLines = getSnappedWallLines(item.itemInfo, layer, planData.catalog);
   var curLine = wLines.length > 0 ? wLines[0] : null;
 
-  // Get wall items
+  // Get wall items which snapped to the curLine
 
   var i,
     wallItems = [];
-  var allWallItems = GeometryUtils.getAllItemSpecified(scene, planData.catalog, WALL_CABINET_LAYOUTPOS);
+  var allWallItems = GeometryUtils.getAllItemSpecified(scene, planData.catalog, WALL_CABINET_LAYOUTPOS, curLine === null || curLine === void 0 ? void 0 : curLine.lineRect);
   for (i = 0; i < allWallItems.others.length; i++) wallItems.push(allWallItems.others[i]);
   if (allWallItems.cur) wallItems.push(allWallItems.cur);
 
@@ -3095,37 +3092,37 @@ export function createBacksplash(item, layer, planData, scene) {
 
   // Find mergeable other backsplashes
 
-  var info, wholeWidth, /** Width factor */factor, distance, halfWidth, /** To get new center */centerFactor;
-  var _iterator = _createForOfIteratorHelper(backsplashes),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var back = _step.value;
-      info = back.info;
-      if (info.height === splashHeight && info.rotY === rotY) {
-        factor = Math.cos(rotY) || 1;
-        distance = Math.hypot(posX - info.posX, posZ - info.posZ) / factor;
-        halfWidth = (info.width + splashWidth) / 2;
-        if (Math.abs(distance - halfWidth) < 1e-2) {
-          // dispose `back`
-          if (info.id) {
-            deleteSpecifiedMeshObjects('backsplash' + info.id);
-          }
+  // let info,
+  //   wholeWidth,
+  //   /** Width factor */ factor,
+  //   distance,
+  //   halfWidth,
+  //   /** To get new center */ centerFactor;
+
+  // for (let back of backsplashes) {
+  //   info = back.info;
+  //   if (info.height === splashHeight && info.rotY === rotY) {
+  //     factor = Math.cos(rotY) || 1;
+  //     distance = Math.hypot(posX - info.posX, posZ - info.posZ) / factor;
+  //     halfWidth = (info.width + splashWidth) / 2;
+
+  //     if (Math.abs(distance - halfWidth) < 1e-2) {
+  //       // dispose `back`
+  //       if (info.id) {
+  //         deleteSpecifiedMeshObjects('backsplash' + info.id);
+  //       }
+
+  //       // Get center position
+  //       wholeWidth = info.width + splashWidth;
+  //       centerFactor = info.width / wholeWidth;
+  //       posX = posX + centerFactor * (info.posX - posX);
+  //       posZ = posZ + centerFactor * (info.posZ - posZ);
+
+  //       splashWidth = wholeWidth;
+  //     }
+  //   }
+  // }
 
-          // Get center position
-          wholeWidth = info.width + splashWidth;
-          centerFactor = info.width / wholeWidth;
-          posX = posX + centerFactor * (info.posX - posX);
-          posZ = posZ + centerFactor * (info.posZ - posZ);
-          splashWidth = wholeWidth;
-        }
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
   itemToSave.info.posX = posX;
   itemToSave.info.posY = posY;
   itemToSave.info.posZ = posZ;
@@ -3174,9 +3171,9 @@ export function createBacksplash(item, layer, planData, scene) {
   }
   itemToSave.info.id = item.itemInfo.id;
   deleteSpecifiedMeshObjects('backsplash' + item.itemInfo.id);
-  if (item.rotRad % (Math.PI / 2) === 0) planData.plan.add(backsplash);
+  if (Math.abs(item.rotRad % (Math.PI / 2)) < EPSILON) planData.plan.add(backsplash);
   backsplash.name = name;
-  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && item.rotRad % (Math.PI / 2) === 0;
+  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && Math.abs(item.rotRad % (Math.PI / 2)) < EPSILON;
 
   // Save to scene graph
 

package/es/utils/geometry.js

@@ -719,6 +719,7 @@ export function getAllItems(scene, catalog, allLineRects) {
 }
 export function getAllItemSpecified(scene, catalog, filter) {
   var _scene$layers, _scene$layers$get;
+  var snappedLineRect = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   var layerID = scene === null || scene === void 0 ? void 0 : scene.selectedLayer;
   var layer = scene === null || scene === void 0 || (_scene$layers = scene.layers) === null || _scene$layers === void 0 || (_scene$layers$get = _scene$layers.get) === null || _scene$layers$get === void 0 ? void 0 : _scene$layers$get.call(_scene$layers, layerID);
   if (!layer || !layer.items) return {
@@ -765,6 +766,39 @@ export function getAllItemSpecified(scene, catalog, filter) {
 
     // Current vs others
     var rect = getCalcRectFromItem3D(val);
+
+    // check current item is snapped to the [snappedLineRect]
+    if (!isEmpty(snappedLineRect)) {
+      var isSnapped = false;
+      var overlapList = [OVERLAP_INCLUDED, OVERLAP_SAME, OVERLAP_SOME];
+      for (var i = 0; i < (rect === null || rect === void 0 || (_rect$rect = rect.rect) === null || _rect$rect === void 0 ? void 0 : _rect$rect.length); i++) {
+        var _rect$rect;
+        if (isSnapped) break;
+        var curItemPt = rect.rect[i];
+        var nextItemPt = i === rect.rect.length - 1 ? rect.rect[0] : rect.rect[i + 1];
+        var srcLine = {
+          x1: curItemPt.x,
+          y1: curItemPt.y,
+          x2: nextItemPt.x,
+          y2: nextItemPt.y
+        };
+        for (var j = 0; j < (snappedLineRect === null || snappedLineRect === void 0 ? void 0 : snappedLineRect.length); j++) {
+          var curLineRectPt = snappedLineRect[j];
+          var nextLineRectPt = j === snappedLineRect.length - 1 ? snappedLineRect[0] : snappedLineRect[j + 1];
+          var destLine = {
+            x1: curLineRectPt.x,
+            y1: curLineRectPt.y,
+            x2: nextLineRectPt.x,
+            y2: nextLineRectPt.y
+          };
+          if (overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine).result)) {
+            isSnapped = true;
+            break;
+          }
+        }
+      }
+      if (!isSnapped) return;
+    }
     if (item.selected) {
       curiteminfo = rect;
     } else {
@@ -2621,18 +2655,23 @@ export function calcDistancesFromHoleToNearestOneOrWall(curHole, layer) {
   var line = (_layer$lines = layer.lines) === null || _layer$lines === void 0 ? void 0 : _layer$lines.get(curHole.line);
   var v0 = (_layer$vertices2 = layer.vertices) === null || _layer$vertices2 === void 0 ? void 0 : _layer$vertices2.get(line === null || line === void 0 || (_line$vertices = line.vertices) === null || _line$vertices === void 0 ? void 0 : _line$vertices.get(0));
   var v1 = (_layer$vertices3 = layer.vertices) === null || _layer$vertices3 === void 0 ? void 0 : _layer$vertices3.get(line === null || line === void 0 || (_line$vertices2 = line.vertices) === null || _line$vertices2 === void 0 ? void 0 : _line$vertices2.get(1));
+  var lineLength = pointsDistance(v0.x, v0.y, v1.x, v1.y);
   if (isEmpty(line) || isEmpty(v0) || isEmpty(v1)) return distArray;
   var angle = angleBetweenTwoPoints(v0.x, v0.y, v1.x, v1.y);
 
   // start point and end point of current hole
   var chw = (_curHole$properties$g = (_curHole$properties = curHole.properties) === null || _curHole$properties === void 0 || (_curHole$properties = _curHole$properties.get('width')) === null || _curHole$properties === void 0 ? void 0 : _curHole$properties.get('length')) !== null && _curHole$properties$g !== void 0 ? _curHole$properties$g : 0;
+  var chPt = {
+    x: v0.x + lineLength * curHole.offset * Math.cos(angle),
+    y: v0.y + lineLength * curHole.offset * Math.sin(angle)
+  };
   var chsp = {
-    x: curHole.x - chw / 2 * Math.cos(angle),
-    y: curHole.y - chw / 2 * Math.sin(angle)
+    x: chPt.x - chw / 2 * Math.cos(angle),
+    y: chPt.y - chw / 2 * Math.sin(angle)
   };
   var chep = {
-    x: curHole.x + chw / 2 * Math.cos(angle),
-    y: curHole.y + chw / 2 * Math.sin(angle)
+    x: chPt.x + chw / 2 * Math.cos(angle),
+    y: chPt.y + chw / 2 * Math.sin(angle)
   };
   distArray.distLeft = pointsDistance(v0.x, v0.y, chsp.x, chsp.y);
   distArray.distRight = pointsDistance(v1.x, v1.y, chep.x, chep.y);
@@ -2642,13 +2681,17 @@ export function calcDistancesFromHoleToNearestOneOrWall(curHole, layer) {
       var hole = (_layer$holes = layer.holes) === null || _layer$holes === void 0 ? void 0 : _layer$holes.get(hId);
       // start point and end point of other hole
       var hw = (_hole$properties$get$ = (_hole$properties = hole.properties) === null || _hole$properties === void 0 || (_hole$properties = _hole$properties.get('width')) === null || _hole$properties === void 0 ? void 0 : _hole$properties.get('length')) !== null && _hole$properties$get$ !== void 0 ? _hole$properties$get$ : 0;
+      var hPt = {
+        x: v0.x + lineLength * hole.offset * Math.cos(angle),
+        y: v0.y + lineLength * hole.offset * Math.sin(angle)
+      };
       var hsp = {
-        x: hole.x - hw / 2 * Math.cos(angle),
-        y: hole.y - hw / 2 * Math.sin(angle)
+        x: hPt.x - hw / 2 * Math.cos(angle),
+        y: hPt.y - hw / 2 * Math.sin(angle)
       };
       var hep = {
-        x: hole.x + hw / 2 * Math.cos(angle),
-        y: hole.y + hw / 2 * Math.sin(angle)
+        x: hPt.x + hw / 2 * Math.cos(angle),
+        y: hPt.y + hw / 2 * Math.sin(angle)
       };
       var relation = relationshipOfTwoOverlappedLines({
         x1: chsp.x,
@@ -2734,15 +2777,15 @@ export function getSnappedWallLines(item, layer, catalog) {
       var _loop2 = function _loop2(j) {
         var destLine1 = {
           x1: rectLines[j].rect[2].x,
-          y1: rectLines[j].rect[3].y,
-          x2: v1.x,
-          y2: v1.y
+          y1: rectLines[j].rect[2].y,
+          x2: rectLines[j].rect[3].x,
+          y2: rectLines[j].rect[3].y
         };
         var destLine2 = {
           x1: rectLines[j].rect[0].x,
-          y1: rectLines[j].rect[1].y,
-          x2: v1.x,
-          y2: v1.y
+          y1: rectLines[j].rect[0].y,
+          x2: rectLines[j].rect[1].x,
+          y2: rectLines[j].rect[1].y
         };
         if (overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine1).result) || overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine2).result)) {
           var idx = snappedWallLines.findIndex(function (v) {
@@ -2751,6 +2794,7 @@ export function getSnappedWallLines(item, layer, catalog) {
           var snapSide = 'unknown';
           if (idx < 0) snappedWallLines.push({
             id: rectLines[j].lineId,
+            lineRect: rectLines[j].rect,
             snapSide: snapSide
           });else snappedWallLines[idx].snapSide = snapSide;
         }
@@ -2790,6 +2834,7 @@ export function getSnappedWallLines(item, layer, catalog) {
           var snapSide = _i === 0 || _i === 2 ? 'front' : 'side';
           if (idx < 0) snappedWallLines.push({
             id: rectLines[_j].lineId,
+            lineRect: rectLines[_j].rect,
             snapSide: snapSide
           });else snappedWallLines[idx].snapSide = snapSide;
         }

package/es/utils/isolate-event-handler.js

@@ -899,13 +899,14 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
                 x1 = _layer$vertices$get4.x,
                 y1 = _layer$vertices$get4.y;
               var alpha = GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+              var lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
               // move curHole
               var _calcDistancesFromHol = calcDistancesFromHoleToNearestOneOrWall(curHole, layer),
                 distLeft = _calcDistancesFromHol.distLeft,
                 distRight = _calcDistancesFromHol.distRight; // old distArray
               var mDistance = attributeName === ATT_HOLE_OFFSET_A ? distLeft - value.get('length') : value.get('length') - distRight; // movement distance
-              var xp = curHole.x - mDistance * Math.cos(alpha);
-              var yp = curHole.y - mDistance * Math.sin(alpha);
+              var xp = x0 + (lineLength * curHole.offset - mDistance) * Math.cos(alpha);
+              var yp = y0 + (lineLength * curHole.offset - mDistance) * Math.sin(alpha);
               var offset = GeometryUtils.pointPositionOnLineSegment(x0, y0, x1, y1, xp, yp);
               // make temp hole for calc new distArray
               var newHole = {

package/lib/components/viewer3d/scene-creator.js

@@ -48,9 +48,6 @@ var _utils = require("../viewer2d/utils");
 var _helper = require("../../utils/helper");
 var _math = require("../../utils/math");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var transformBox;
@@ -3049,11 +3046,11 @@ function createBacksplash(item, layer, planData, scene) {
   var wLines = (0, _geometry2.getSnappedWallLines)(item.itemInfo, layer, planData.catalog);
   var curLine = wLines.length > 0 ? wLines[0] : null;
 
-  // Get wall items
+  // Get wall items which snapped to the curLine
 
   var i,
     wallItems = [];
-  var allWallItems = _export.GeometryUtils.getAllItemSpecified(scene, planData.catalog, _constants.WALL_CABINET_LAYOUTPOS);
+  var allWallItems = _export.GeometryUtils.getAllItemSpecified(scene, planData.catalog, _constants.WALL_CABINET_LAYOUTPOS, curLine === null || curLine === void 0 ? void 0 : curLine.lineRect);
   for (i = 0; i < allWallItems.others.length; i++) wallItems.push(allWallItems.others[i]);
   if (allWallItems.cur) wallItems.push(allWallItems.cur);
 
@@ -3130,37 +3127,37 @@ function createBacksplash(item, layer, planData, scene) {
 
   // Find mergeable other backsplashes
 
-  var info, wholeWidth, /** Width factor */factor, distance, halfWidth, /** To get new center */centerFactor;
-  var _iterator = _createForOfIteratorHelper(backsplashes),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var back = _step.value;
-      info = back.info;
-      if (info.height === splashHeight && info.rotY === rotY) {
-        factor = Math.cos(rotY) || 1;
-        distance = Math.hypot(posX - info.posX, posZ - info.posZ) / factor;
-        halfWidth = (info.width + splashWidth) / 2;
-        if (Math.abs(distance - halfWidth) < 1e-2) {
-          // dispose `back`
-          if (info.id) {
-            deleteSpecifiedMeshObjects('backsplash' + info.id);
-          }
+  // let info,
+  //   wholeWidth,
+  //   /** Width factor */ factor,
+  //   distance,
+  //   halfWidth,
+  //   /** To get new center */ centerFactor;
+
+  // for (let back of backsplashes) {
+  //   info = back.info;
+  //   if (info.height === splashHeight && info.rotY === rotY) {
+  //     factor = Math.cos(rotY) || 1;
+  //     distance = Math.hypot(posX - info.posX, posZ - info.posZ) / factor;
+  //     halfWidth = (info.width + splashWidth) / 2;
+
+  //     if (Math.abs(distance - halfWidth) < 1e-2) {
+  //       // dispose `back`
+  //       if (info.id) {
+  //         deleteSpecifiedMeshObjects('backsplash' + info.id);
+  //       }
+
+  //       // Get center position
+  //       wholeWidth = info.width + splashWidth;
+  //       centerFactor = info.width / wholeWidth;
+  //       posX = posX + centerFactor * (info.posX - posX);
+  //       posZ = posZ + centerFactor * (info.posZ - posZ);
+
+  //       splashWidth = wholeWidth;
+  //     }
+  //   }
+  // }
 
-          // Get center position
-          wholeWidth = info.width + splashWidth;
-          centerFactor = info.width / wholeWidth;
-          posX = posX + centerFactor * (info.posX - posX);
-          posZ = posZ + centerFactor * (info.posZ - posZ);
-          splashWidth = wholeWidth;
-        }
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
   itemToSave.info.posX = posX;
   itemToSave.info.posY = posY;
   itemToSave.info.posZ = posZ;
@@ -3209,9 +3206,9 @@ function createBacksplash(item, layer, planData, scene) {
   }
   itemToSave.info.id = item.itemInfo.id;
   deleteSpecifiedMeshObjects('backsplash' + item.itemInfo.id);
-  if (item.rotRad % (Math.PI / 2) === 0) planData.plan.add(backsplash);
+  if (Math.abs(item.rotRad % (Math.PI / 2)) < _constants.EPSILON) planData.plan.add(backsplash);
   backsplash.name = name;
-  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && item.rotRad % (Math.PI / 2) === 0;
+  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && Math.abs(item.rotRad % (Math.PI / 2)) < _constants.EPSILON;
 
   // Save to scene graph
 

package/lib/utils/geometry.js

@@ -821,6 +821,7 @@ function getAllItems(scene, catalog, allLineRects) {
 }
 function getAllItemSpecified(scene, catalog, filter) {
   var _scene$layers, _scene$layers$get;
+  var snappedLineRect = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   var layerID = scene === null || scene === void 0 ? void 0 : scene.selectedLayer;
   var layer = scene === null || scene === void 0 || (_scene$layers = scene.layers) === null || _scene$layers === void 0 || (_scene$layers$get = _scene$layers.get) === null || _scene$layers$get === void 0 ? void 0 : _scene$layers$get.call(_scene$layers, layerID);
   if (!layer || !layer.items) return {
@@ -867,6 +868,39 @@ function getAllItemSpecified(scene, catalog, filter) {
 
     // Current vs others
     var rect = getCalcRectFromItem3D(val);
+
+    // check current item is snapped to the [snappedLineRect]
+    if (!(0, _helper.isEmpty)(snappedLineRect)) {
+      var isSnapped = false;
+      var overlapList = [_constants.OVERLAP_INCLUDED, _constants.OVERLAP_SAME, _constants.OVERLAP_SOME];
+      for (var i = 0; i < (rect === null || rect === void 0 || (_rect$rect = rect.rect) === null || _rect$rect === void 0 ? void 0 : _rect$rect.length); i++) {
+        var _rect$rect;
+        if (isSnapped) break;
+        var curItemPt = rect.rect[i];
+        var nextItemPt = i === rect.rect.length - 1 ? rect.rect[0] : rect.rect[i + 1];
+        var srcLine = {
+          x1: curItemPt.x,
+          y1: curItemPt.y,
+          x2: nextItemPt.x,
+          y2: nextItemPt.y
+        };
+        for (var j = 0; j < (snappedLineRect === null || snappedLineRect === void 0 ? void 0 : snappedLineRect.length); j++) {
+          var curLineRectPt = snappedLineRect[j];
+          var nextLineRectPt = j === snappedLineRect.length - 1 ? snappedLineRect[0] : snappedLineRect[j + 1];
+          var destLine = {
+            x1: curLineRectPt.x,
+            y1: curLineRectPt.y,
+            x2: nextLineRectPt.x,
+            y2: nextLineRectPt.y
+          };
+          if (overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine).result)) {
+            isSnapped = true;
+            break;
+          }
+        }
+      }
+      if (!isSnapped) return;
+    }
     if (item.selected) {
       curiteminfo = rect;
     } else {
@@ -2723,18 +2757,23 @@ function calcDistancesFromHoleToNearestOneOrWall(curHole, layer) {
   var line = (_layer$lines = layer.lines) === null || _layer$lines === void 0 ? void 0 : _layer$lines.get(curHole.line);
   var v0 = (_layer$vertices2 = layer.vertices) === null || _layer$vertices2 === void 0 ? void 0 : _layer$vertices2.get(line === null || line === void 0 || (_line$vertices = line.vertices) === null || _line$vertices === void 0 ? void 0 : _line$vertices.get(0));
   var v1 = (_layer$vertices3 = layer.vertices) === null || _layer$vertices3 === void 0 ? void 0 : _layer$vertices3.get(line === null || line === void 0 || (_line$vertices2 = line.vertices) === null || _line$vertices2 === void 0 ? void 0 : _line$vertices2.get(1));
+  var lineLength = pointsDistance(v0.x, v0.y, v1.x, v1.y);
   if ((0, _helper.isEmpty)(line) || (0, _helper.isEmpty)(v0) || (0, _helper.isEmpty)(v1)) return distArray;
   var angle = angleBetweenTwoPoints(v0.x, v0.y, v1.x, v1.y);
 
   // start point and end point of current hole
   var chw = (_curHole$properties$g = (_curHole$properties = curHole.properties) === null || _curHole$properties === void 0 || (_curHole$properties = _curHole$properties.get('width')) === null || _curHole$properties === void 0 ? void 0 : _curHole$properties.get('length')) !== null && _curHole$properties$g !== void 0 ? _curHole$properties$g : 0;
+  var chPt = {
+    x: v0.x + lineLength * curHole.offset * Math.cos(angle),
+    y: v0.y + lineLength * curHole.offset * Math.sin(angle)
+  };
   var chsp = {
-    x: curHole.x - chw / 2 * Math.cos(angle),
-    y: curHole.y - chw / 2 * Math.sin(angle)
+    x: chPt.x - chw / 2 * Math.cos(angle),
+    y: chPt.y - chw / 2 * Math.sin(angle)
   };
   var chep = {
-    x: curHole.x + chw / 2 * Math.cos(angle),
-    y: curHole.y + chw / 2 * Math.sin(angle)
+    x: chPt.x + chw / 2 * Math.cos(angle),
+    y: chPt.y + chw / 2 * Math.sin(angle)
   };
   distArray.distLeft = pointsDistance(v0.x, v0.y, chsp.x, chsp.y);
   distArray.distRight = pointsDistance(v1.x, v1.y, chep.x, chep.y);
@@ -2744,13 +2783,17 @@ function calcDistancesFromHoleToNearestOneOrWall(curHole, layer) {
       var hole = (_layer$holes = layer.holes) === null || _layer$holes === void 0 ? void 0 : _layer$holes.get(hId);
       // start point and end point of other hole
       var hw = (_hole$properties$get$ = (_hole$properties = hole.properties) === null || _hole$properties === void 0 || (_hole$properties = _hole$properties.get('width')) === null || _hole$properties === void 0 ? void 0 : _hole$properties.get('length')) !== null && _hole$properties$get$ !== void 0 ? _hole$properties$get$ : 0;
+      var hPt = {
+        x: v0.x + lineLength * hole.offset * Math.cos(angle),
+        y: v0.y + lineLength * hole.offset * Math.sin(angle)
+      };
       var hsp = {
-        x: hole.x - hw / 2 * Math.cos(angle),
-        y: hole.y - hw / 2 * Math.sin(angle)
+        x: hPt.x - hw / 2 * Math.cos(angle),
+        y: hPt.y - hw / 2 * Math.sin(angle)
       };
       var hep = {
-        x: hole.x + hw / 2 * Math.cos(angle),
-        y: hole.y + hw / 2 * Math.sin(angle)
+        x: hPt.x + hw / 2 * Math.cos(angle),
+        y: hPt.y + hw / 2 * Math.sin(angle)
       };
       var relation = relationshipOfTwoOverlappedLines({
         x1: chsp.x,
@@ -2836,15 +2879,15 @@ function getSnappedWallLines(item, layer, catalog) {
       var _loop2 = function _loop2(j) {
         var destLine1 = {
           x1: rectLines[j].rect[2].x,
-          y1: rectLines[j].rect[3].y,
-          x2: v1.x,
-          y2: v1.y
+          y1: rectLines[j].rect[2].y,
+          x2: rectLines[j].rect[3].x,
+          y2: rectLines[j].rect[3].y
         };
         var destLine2 = {
           x1: rectLines[j].rect[0].x,
-          y1: rectLines[j].rect[1].y,
-          x2: v1.x,
-          y2: v1.y
+          y1: rectLines[j].rect[0].y,
+          x2: rectLines[j].rect[1].x,
+          y2: rectLines[j].rect[1].y
         };
         if (overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine1).result) || overlapList.includes(relationshipOfTwoOverlappedLines(srcLine, destLine2).result)) {
           var idx = snappedWallLines.findIndex(function (v) {
@@ -2853,6 +2896,7 @@ function getSnappedWallLines(item, layer, catalog) {
           var snapSide = 'unknown';
           if (idx < 0) snappedWallLines.push({
             id: rectLines[j].lineId,
+            lineRect: rectLines[j].rect,
             snapSide: snapSide
           });else snappedWallLines[idx].snapSide = snapSide;
         }
@@ -2892,6 +2936,7 @@ function getSnappedWallLines(item, layer, catalog) {
           var snapSide = _i === 0 || _i === 2 ? 'front' : 'side';
           if (idx < 0) snappedWallLines.push({
             id: rectLines[_j].lineId,
+            lineRect: rectLines[_j].rect,
             snapSide: snapSide
           });else snappedWallLines[idx].snapSide = snapSide;
         }

package/lib/utils/isolate-event-handler.js

@@ -907,13 +907,14 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
                 x1 = _layer$vertices$get4.x,
                 y1 = _layer$vertices$get4.y;
               var alpha = _export.GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+              var lineLength = _export.GeometryUtils.pointsDistance(x0, y0, x1, y1);
               // move curHole
               var _calcDistancesFromHol = (0, _geometry.calcDistancesFromHoleToNearestOneOrWall)(curHole, layer),
                 distLeft = _calcDistancesFromHol.distLeft,
                 distRight = _calcDistancesFromHol.distRight; // old distArray
               var mDistance = attributeName === _constants.ATT_HOLE_OFFSET_A ? distLeft - value.get('length') : value.get('length') - distRight; // movement distance
-              var xp = curHole.x - mDistance * Math.cos(alpha);
-              var yp = curHole.y - mDistance * Math.sin(alpha);
+              var xp = x0 + (lineLength * curHole.offset - mDistance) * Math.cos(alpha);
+              var yp = y0 + (lineLength * curHole.offset - mDistance) * Math.sin(alpha);
               var offset = _export.GeometryUtils.pointPositionOnLineSegment(x0, y0, x1, y1, xp, yp);
               // make temp hole for calc new distArray
               var newHole = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "4.3.4",
+  "version": "4.3.6",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",