@crystaldesign/web-planner-logic 25.14.0-beta.2 → 25.14.0-beta.21

package/build/esm/{DivaBoxPlanner-c3688dbb.js → DivaBoxPlanner-68835bff.js}

@@ -3,11 +3,11 @@ import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-14f79ee4.js';
+import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-07df9d4d.js';
 import DivaUtils, { DivaError, md5 } from '@crystaldesign/diva-utils';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-43910df5.js';
-import '@babel/runtime/helpers/slicedToArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-6aa7326e.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import 'axios';
 import '@crystaldesign/basket-model';
@@ -1959,6 +1959,18 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       if (!this.hideOptionsForConstruction.has(elementId)) this.hideOptionsForConstruction.set(elementId, []);
       (_this$hideOptionsForC2 = this.hideOptionsForConstruction.get(elementId)) === null || _this$hideOptionsForC2 === void 0 || _this$hideOptionsForC2.push(option);
     }
+  }, {
+    key: "setOptionDoCustom",
+    value: function setOptionDoCustom(elementId, option, val, optionHandler) {
+      var _optionHandler$get4, _this$hideOptionsForC3;
+      // LOG.log("Update Box Planner Logic. SetOptionDoHide: elementId: " + elementId + "; Option:  " + option);
+      var curOptVisibilityInfo = this.constructionRules.optionsVisibilityInfo[option];
+      if (!curOptVisibilityInfo) return;
+      if (!optionHandler.has(elementId)) optionHandler.set(elementId, new Map());
+      (_optionHandler$get4 = optionHandler.get(elementId)) === null || _optionHandler$get4 === void 0 || _optionHandler$get4.set(option, curOptVisibilityInfo[val]);
+      if (!this.hideOptionsForConstruction.has(elementId)) this.hideOptionsForConstruction.set(elementId, []);
+      (_this$hideOptionsForC3 = this.hideOptionsForConstruction.get(elementId)) === null || _this$hideOptionsForC3 === void 0 || _this$hideOptionsForC3.push(option);
+    }
 
     //Returns all
   }, {
@@ -1999,7 +2011,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       }
       var allElementIds = boxPlannerGrid.getAllElementIdsInGrid(); //run through front an backside grid
       for (var i = 0; i < allElementIds.length; i++) {
-        var _optionHandler$get4;
+        var _optionHandler$get5;
         if (this.hideOptionsForConstruction.has(allElementIds[i]) && this.hideOptionsForConstruction.get(allElementIds[i]).length > 0) {
           while (this.hideOptionsForConstruction.get(allElementIds[i]).length > 0) {
             var optName = this.hideOptionsForConstruction.get(allElementIds[i])[0];
@@ -2088,7 +2100,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
 
         ///Add debug input
         if (!optionHandler.has(allElementIds[i])) optionHandler.set(allElementIds[i], new Map());
-        (_optionHandler$get4 = optionHandler.get(allElementIds[i])) === null || _optionHandler$get4 === void 0 || _optionHandler$get4.set('DEBUG', boxPlannerGrid.getElementById(allElementIds[i]).getPosNr() + '');
+        (_optionHandler$get5 = optionHandler.get(allElementIds[i])) === null || _optionHandler$get5 === void 0 || _optionHandler$get5.set('DEBUG', boxPlannerGrid.getElementById(allElementIds[i]).getPosNr() + '');
         if (opvToReset.length > 0) {
           for (var r = 0; r < opvToReset.length; r++) {
             var articleOPV = this.getOptionVal(allElementIds[i], opvToReset[r].opt, optionHandler);
@@ -2368,6 +2380,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     key: "correctSimpleOpt",
     value: function correctSimpleOpt(xIndex, yIndex, boxPlannerGrid, optionHandler, fromBackside) {
       var curElement = boxPlannerGrid.getPlannerElementAtGridPos(xIndex, yIndex, fromBackside);
+      if (!curElement) return;
       //Schauen ob Element top Element hat.
       if (this.constructionRules.defaultConstructionRules.TOP) {
         var hasTopElement = boxPlannerGrid.getElementHasTopElement(curElement.ElementId);
@@ -2593,13 +2606,12 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       if (dimRule.dimension.toLowerCase() == 'depth' && boxPlannerSize.z > dimRule.dimensionLimit) isOver = true;
       if (dimRule.dimension.toLowerCase() == 'depth' && boxPlannerSize.z == dimRule.dimensionLimit) isEqual = true;
       if (isOver) {
-        if (dimRule.higherLimit.toLowerCase() == 'doshow') return true;else if (dimRule.higherLimit.toLowerCase() == 'dohide') return false;
+        return dimRule.higherLimit;
       } else if (isEqual) {
-        return true;
+        return dimRule.higherLimit;
       } else {
-        if (dimRule.lowerLimit.toLowerCase() == 'doshow') return true;else if (dimRule.lowerLimit.toLowerCase() == 'dohide') return false;
+        return dimRule.lowerLimit;
       }
-      return false;
     }
 
     /*
@@ -2610,42 +2622,34 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     key: "correctOverHangingElement",
     value: function correctOverHangingElement(changedElementId, boxPlannerGrid, optionHandler, changedOPTs) {
       var _this2 = this;
-      if (!changedOPTs) return;
-      var _loop = function _loop() {
-        var elements = boxPlannerGrid.getAllElementsInColumn(columndIdx, false, false); // from bottom to top
-        var lastElement = null;
-        var changedElementIdx = elements.findIndex(function (e) {
-          return e.ElementId == changedElementId;
-        });
-        elements.forEach(function (element, idx) {
-          var _lastElement$Width, _element$Width, _lastElement$Depth, _element$Depth;
-          if (!lastElement) {
-            lastElement = element;
-            return;
-          }
-          if (((_lastElement$Width = lastElement.Width) !== null && _lastElement$Width !== void 0 ? _lastElement$Width : 0) > ((_element$Width = element.Width) !== null && _element$Width !== void 0 ? _element$Width : 0)) {
-            // is either the above wider opt or the one under and smaller
-            var t = Object.entries(changedOPTs);
-            var opt = t[0][0];
-            var opv = t[0][1];
-            if (idx < changedElementIdx) {
-              _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
-            } else {
-              _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
-            }
-          }
-          if (((_lastElement$Depth = lastElement.Depth) !== null && _lastElement$Depth !== void 0 ? _lastElement$Depth : 0) > ((_element$Depth = element.Depth) !== null && _element$Depth !== void 0 ? _element$Depth : 0)) {
-            var _t = Object.entries(changedOPTs); // should be the new wider width that causes the overhanging
-            var _opt = _t[0][0];
-            var _opv2 = _t[0][1];
-            _this2.setOptionValue(element.ElementId, _opt, _opv2, optionHandler);
-          }
-          lastElement = element;
-        });
-      };
-      for (var columndIdx = 0; columndIdx < boxPlannerGrid.getColumnCount(); columndIdx++) {
-        _loop();
-      }
+      if (!changedOPTs || !changedElementId) return;
+      var startIdx = boxPlannerGrid.getCellsInGridByElementId(changedElementId).startColIndex;
+      var elements = boxPlannerGrid.getAllElementsInColumn(startIdx, false, true); // from bottom to top
+      var changedElementIdx = elements.findIndex(function (e) {
+        return e.ElementId == changedElementId;
+      });
+      var changedElement = elements[changedElementIdx];
+      if (!changedElement) return; // nothing changed in this row
+      var t = Object.entries(changedOPTs);
+      var opt = t[0][0];
+      var opv = t[0][1];
+      elements.forEach(function (element, idx) {
+        if (idx < changedElementIdx) {
+          //under the changed one
+          var rightNeighbours = boxPlannerGrid.getNeighborElements(element.ElementId, "RIGHT");
+          var freeSpace = element.Width;
+          rightNeighbours.forEach(function (n) {
+            if (n.ElementId == changedElement.ElementId) return;
+            if (!boxPlannerGrid.getNeighborElements(n.ElementId, "TOP", false).find(function (n) {
+              return n.ElementId != changedElement.ElementId;
+            })) freeSpace += n.Width;
+          });
+          if (changedElement.Width > freeSpace) _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
+        } else {
+          // over the changed one
+          if (changedElement.Width < element.Width) _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
+        }
+      });
     }
   }, {
     key: "correctFoot",
@@ -2662,31 +2666,35 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
      * */
   }, {
     key: "correctOptionsInfluencedByDimensions",
-    value: function correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler) {
+    value: function correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler, changedOPTs) {
       var _this4 = this;
       if (!this.constructionRules.optionsInfluencedByDimensions) return;
       var boxPlannerSize = boxPlannerGrid.getSizeOfWholeSet(false);
       var allElements = boxPlannerGrid.getAllElementsInFrontGrid();
-      this.constructionRules.optionsInfluencedByDimensions.forEach(function (dimRule) {
-        if (Array.isArray(dimRule)) {
-          if (dimRule.every(function (rule) {
-            return _this4.validateDimensionRule(rule, boxPlannerSize);
-          })) dimRule.forEach(function (rule) {
-            return allElements.forEach(function (element) {
-              return _this4.setOptionDoShow(element.ElementId, rule.option, optionHandler);
-            });
-          });else dimRule.forEach(function (rule) {
-            return allElements.forEach(function (element) {
-              return _this4.setOptionDoHide(element.ElementId, rule.option, optionHandler);
-            });
-          });
-        } else {
-          if (_this4.validateDimensionRule(dimRule, boxPlannerSize)) allElements.forEach(function (element) {
-            return _this4.setOptionDoShow(element.ElementId, dimRule.option, optionHandler);
-          });else allElements.forEach(function (element) {
-            return _this4.setOptionDoHide(element.ElementId, dimRule.option, optionHandler);
+      var setRule = function setRule(rule) {
+        var res = _this4.validateDimensionRule(rule, boxPlannerSize);
+        if (changedOPTs) {
+          var changedOpt = Object.entries(changedOPTs).find(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+              key = _ref2[0];
+              _ref2[1];
+            return key == rule.option;
           });
+          if (changedOpt) {
+            allElements.forEach(function (element) {
+              return _this4.setOptionValue(element.ElementId, changedOpt[0], changedOpt[1], optionHandler);
+            });
+            return;
+          }
         }
+        allElements.forEach(function (element) {
+          return _this4.setOptionDoCustom(element.ElementId, res, rule.option, optionHandler);
+        });
+      };
+      this.constructionRules.optionsInfluencedByDimensions.forEach(function (dimRule) {
+        if (Array.isArray(dimRule)) dimRule.forEach(function (rule) {
+          return setRule(rule);
+        });else setRule(dimRule);
       });
     }
   }, {
@@ -2759,22 +2767,22 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
 
         // default => set all to ohne
         serie.forEach(function (element) {
-          var _element$Width2;
-          seriesWidth += (_element$Width2 = element.Width) !== null && _element$Width2 !== void 0 ? _element$Width2 : 0;
-          boxPlannerGrid.getAllElementsDown(element.ElementId).elements.forEach(function (e) {
+          var _element$size$width;
+          seriesWidth += (_element$size$width = element.size.width) !== null && _element$size$width !== void 0 ? _element$size$width : 0;
+          boxPlannerGrid.getAllElementsDown(element.elementId).elements.forEach(function (e) {
             return _this5.setOptionValue(e, coverPlateRule.optABD, 'OPVOHNE', optionHandler);
           });
-          _this5.setOptionValue(element.ElementId, coverPlateRule.optABD, 'OPVOHNE', optionHandler);
+          _this5.setOptionValue(element.elementId, coverPlateRule.optABD, 'OPVOHNE', optionHandler);
         });
         var firstUncoveredElement = serie[0];
-        var _loop2 = function _loop2() {
+        var _loop = function _loop() {
             var opv = seriesWidthToPlateOpv.findLast(function (stp) {
               // is a clean element ending
               var helperWidth = 0;
               var isClean = false;
               serie.forEach(function (element) {
-                var _element$Width3;
-                helperWidth += (_element$Width3 = element.Width) !== null && _element$Width3 !== void 0 ? _element$Width3 : 0;
+                var _element$size$width2;
+                helperWidth += (_element$size$width2 = element.size.width) !== null && _element$size$width2 !== void 0 ? _element$size$width2 : 0;
                 if (Math.abs(helperWidth - stp.limit) < 1) isClean = true;
               });
               if (stp.limit <= seriesWidth && isClean) return true;
@@ -2783,11 +2791,11 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
             if (!opv) return {
               v: void 0
             };
-            _this5.setOptionValue(firstUncoveredElement.ElementId, coverPlateRule.optABD, opv.plateOpv, optionHandler);
+            _this5.setOptionValue(firstUncoveredElement.elementId, coverPlateRule.optABD, opv.plateOpv, optionHandler);
             var helperWidth = 0;
             firstUncoveredElement = serie.find(function (e) {
-              var _e$Width;
-              helperWidth += (_e$Width = e.Width) !== null && _e$Width !== void 0 ? _e$Width : 0;
+              var _e$size$width;
+              helperWidth += (_e$size$width = e.size.width) !== null && _e$size$width !== void 0 ? _e$size$width : 0;
               if (helperWidth > opv.limit) return true;
               return false;
             });
@@ -2796,7 +2804,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
           },
           _ret;
         while (seriesWidth != 0) {
-          _ret = _loop2();
+          _ret = _loop();
           if (_ret) return _ret.v;
         }
       });
@@ -3123,7 +3131,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     value: function () {
       var _updateOptionLogicBoxPlanner = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(boxPlannerGrid, changedOPTs, targetElements, forceResetCornerElements) {
         var _targetElements;
-        var startTime, resultMessage, optionHandler, allElements, i, _iterator, _step, coverPlateRule, j, doChangeRetailArticleNumbers;
+        var startTime, resultMessage, optionHandler, allElements, i, j, _boxPlannerGrid$getPl2, elementId, _boxPlannerGrid$getPl3, _elementId, _iterator, _step, coverPlateRule, _boxPlannerGrid$getPl4, _elementId2, doChangeRetailArticleNumbers;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -3158,19 +3166,6 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               this.correctBottom(boxPlannerGrid, optionHandler, false);
               if (boxPlannerGrid.getPlannerHasActiveBackside()) this.correctBottom(boxPlannerGrid, optionHandler, true);
               this.correctSeries(boxPlannerGrid, optionHandler);
-              if (this.constructionRules.coverPlateRule) {
-                _iterator = _createForOfIteratorHelper$1(this.constructionRules.coverPlateRule);
-                try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    coverPlateRule = _step.value;
-                    this.correctCoverPlate(coverPlateRule, boxPlannerGrid, optionHandler);
-                  }
-                } catch (err) {
-                  _iterator.e(err);
-                } finally {
-                  _iterator.f();
-                }
-              }
               for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
                 for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
                   this.correctSimpleOpt(i, j, boxPlannerGrid, optionHandler, false);
@@ -3183,39 +3178,126 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
                   }
                 }
               }
-              for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
-                for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
-                  this.correctForceOptOfElement(boxPlannerGrid.getPlannerElementAtGridPos(i, j, false).ElementId, boxPlannerGrid, optionHandler, false);
-                  this.correctNeighborCustomOLTs(boxPlannerGrid.getPlannerElementAtGridPos(i, j, false).ElementId, boxPlannerGrid, optionHandler);
-                }
+              i = 0;
+            case 17:
+              if (!(i < boxPlannerGrid.getColumnCount())) {
+                _context.next = 31;
+                break;
               }
-              if (boxPlannerGrid.getPlannerHasActiveBackside()) {
-                for (i = boxPlannerGrid.getColumnCount() - 1; i >= 0; i--) {
-                  for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
-                    this.correctForceOptOfElement(boxPlannerGrid.getPlannerElementAtGridPos(i, j, true).ElementId, boxPlannerGrid, optionHandler, true);
-                    this.correctNeighborCustomOLTs(boxPlannerGrid.getPlannerElementAtGridPos(i, j, true).ElementId, boxPlannerGrid, optionHandler);
-                  }
-                }
+              j = 0;
+            case 19:
+              if (!(j < boxPlannerGrid.getRowCount(i, false))) {
+                _context.next = 28;
+                break;
+              }
+              elementId = (_boxPlannerGrid$getPl2 = boxPlannerGrid.getPlannerElementAtGridPos(i, j, false)) === null || _boxPlannerGrid$getPl2 === void 0 ? void 0 : _boxPlannerGrid$getPl2.ElementId;
+              if (elementId) {
+                _context.next = 23;
+                break;
               }
+              return _context.abrupt("continue", 25);
+            case 23:
+              this.correctForceOptOfElement(elementId, boxPlannerGrid, optionHandler, false);
+              this.correctNeighborCustomOLTs(elementId, boxPlannerGrid, optionHandler);
+            case 25:
+              j++;
+              _context.next = 19;
+              break;
+            case 28:
+              i++;
+              _context.next = 17;
+              break;
+            case 31:
+              if (!boxPlannerGrid.getPlannerHasActiveBackside()) {
+                _context.next = 47;
+                break;
+              }
+              i = boxPlannerGrid.getColumnCount() - 1;
+            case 33:
+              if (!(i >= 0)) {
+                _context.next = 47;
+                break;
+              }
+              j = 0;
+            case 35:
+              if (!(j < boxPlannerGrid.getRowCount(i, false))) {
+                _context.next = 44;
+                break;
+              }
+              _elementId = (_boxPlannerGrid$getPl3 = boxPlannerGrid.getPlannerElementAtGridPos(i, j, false)) === null || _boxPlannerGrid$getPl3 === void 0 ? void 0 : _boxPlannerGrid$getPl3.ElementId;
+              if (_elementId) {
+                _context.next = 39;
+                break;
+              }
+              return _context.abrupt("continue", 41);
+            case 39:
+              this.correctForceOptOfElement(_elementId, boxPlannerGrid, optionHandler, true);
+              this.correctNeighborCustomOLTs(_elementId, boxPlannerGrid, optionHandler);
+            case 41:
+              j++;
+              _context.next = 35;
+              break;
+            case 44:
+              i--;
+              _context.next = 33;
+              break;
+            case 47:
               this.correctFoot(boxPlannerGrid, optionHandler);
               this.correctLadder(boxPlannerGrid, optionHandler);
-              this.correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler);
+              this.correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler, changedOPTs);
               this.correctOverHangingElement((_targetElements = targetElements) === null || _targetElements === void 0 ? void 0 : _targetElements[0], boxPlannerGrid, optionHandler, changedOPTs);
               this.partlistHelper.calculateKnots(boxPlannerGrid, optionHandler);
               this.partlistHelper.calculateRahmen(boxPlannerGrid, optionHandler);
-              for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
-                for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
-                  this.correctBack(boxPlannerGrid, optionHandler, boxPlannerGrid.getPlannerElementAtGridPos(i, j, false).getElementId());
+              if (this.constructionRules.coverPlateRule) {
+                _iterator = _createForOfIteratorHelper$1(this.constructionRules.coverPlateRule);
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    coverPlateRule = _step.value;
+                    this.correctCoverPlate(coverPlateRule, boxPlannerGrid, optionHandler);
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
                 }
               }
+              i = 0;
+            case 55:
+              if (!(i < boxPlannerGrid.getColumnCount())) {
+                _context.next = 68;
+                break;
+              }
+              j = 0;
+            case 57:
+              if (!(j < boxPlannerGrid.getRowCount(i, false))) {
+                _context.next = 65;
+                break;
+              }
+              _elementId2 = (_boxPlannerGrid$getPl4 = boxPlannerGrid.getPlannerElementAtGridPos(i, j, false)) === null || _boxPlannerGrid$getPl4 === void 0 ? void 0 : _boxPlannerGrid$getPl4.getElementId();
+              if (_elementId2) {
+                _context.next = 61;
+                break;
+              }
+              return _context.abrupt("continue", 62);
+            case 61:
+              this.correctBack(boxPlannerGrid, optionHandler, _elementId2);
+            case 62:
+              j++;
+              _context.next = 57;
+              break;
+            case 65:
+              i++;
+              _context.next = 55;
+              break;
+            case 68:
               doChangeRetailArticleNumbers = this.doChangeRetailArticleNumbers(boxPlannerGrid, optionHandler);
-              _context.next = 29;
+              _context.next = 71;
               return this.updateCfgValuesByPlanner(optionHandler, undefined, this.constructionRules.partlistRules.bundleRules, doChangeRetailArticleNumbers);
-            case 29:
+            case 71:
               LOG$2.debug('BoxPlanner updateOptionLogic - Duration after setting Option Values of all Articles: ' + (new Date().getTime() - startTime));
               LOG$2.debug('BoxPlanner updateOptionLogic - Duration after setting updating configurator: ' + (new Date().getTime() - startTime));
               return _context.abrupt("return", resultMessage);
-            case 32:
+            case 74:
             case "end":
               return _context.stop();
           }
@@ -3343,7 +3425,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var cells = [];
       for (var i = 0; i < colCount; i++) {
         for (var j = 0; j < rowCount; j++) {
-          var _cell = {
+          var _cell2 = {
             plannedElement: {
               basketId: newElement.getBasketId(),
               elementId: newElement.getElementId(),
@@ -3362,7 +3444,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             },
             index: new Vector2(startColIndex + i, startRowIndex + j)
           };
-          cells.push(_cell);
+          cells.push(_cell2);
         }
       }
       return cells;
@@ -3651,10 +3733,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       }
       for (var i = 0; i < backGrid.length; i++) {
         for (var j = 0; j < backGrid[i].length; j++) {
-          var _cell2$plannedElement;
-          var _cell2 = backGrid[i][j];
-          var _elementId = (_cell2$plannedElement = _cell2.plannedElement) === null || _cell2$plannedElement === void 0 ? void 0 : _cell2$plannedElement.elementId;
-          if (_cell2 && _elementId && allCheckedElementIds.indexOf(_elementId) == -1) {
+          var _cell3$plannedElement;
+          var _cell3 = backGrid[i][j];
+          var _elementId = (_cell3$plannedElement = _cell3.plannedElement) === null || _cell3$plannedElement === void 0 ? void 0 : _cell3$plannedElement.elementId;
+          if (_cell3 && _elementId && allCheckedElementIds.indexOf(_elementId) == -1) {
             var _element = this.getElementById(_elementId);
             allCheckedElementIds.push(_elementId);
             returnElements.push(_element);
@@ -3918,10 +4000,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         }
       } else {
         for (var i = curGrid[index].length - 1; i >= 0; i--) {
-          var _cell3$plannedElement;
-          var _cell3 = curGrid[index][i];
-          var _elementId4 = _cell3 === null || _cell3 === void 0 || (_cell3$plannedElement = _cell3.plannedElement) === null || _cell3$plannedElement === void 0 ? void 0 : _cell3$plannedElement.elementId;
-          if (_cell3 && _elementId4 && allElementIds.indexOf(_elementId4) == -1) {
+          var _cell4$plannedElement;
+          var _cell4 = curGrid[index][i];
+          var _elementId4 = _cell4 === null || _cell4 === void 0 || (_cell4$plannedElement = _cell4.plannedElement) === null || _cell4$plannedElement === void 0 ? void 0 : _cell4$plannedElement.elementId;
+          if (_cell4 && _elementId4 && allElementIds.indexOf(_elementId4) == -1) {
             allElementIds.push(_elementId4);
             allElements.push(this.plannerElements.get(_elementId4));
           }
@@ -4010,31 +4092,64 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getNeighborElements",
     value: function getNeighborElements(elementId, dir) {
-      var _curGrid$area$toX, _curGrid$area$toX2, _curGrid2, _curGrid3, _curGrid$area$fromX, _topNeighbour$planned, _curGrid$area$fromX2, _downNeighbour$planne;
+      var _this = this,
+        _plannedElement3,
+        _curGrid$area$fromX,
+        _downNeighbour$planne;
+      var clean = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var res = this.getCellsInGridByElementId(elementId);
       var curGrid = res.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var result = [];
       var plannedElement = res.cells[0].plannedElement;
       if (!plannedElement) return result;
+      var currentRow = curGrid[plannedElement.area.fromX];
+      var startHeight = 0;
+      var endHeight = 0;
+      currentRow.forEach(function (cell) {
+        if (cell.index.y < res.startRowIndex) startHeight = Math.round((startHeight + cell.plannedElement.size.height) * 1000);
+        if (cell.index.y < res.endRowIndex) endHeight = Math.round((endHeight + cell.plannedElement.size.height) * 1000);
+      });
       switch (dir) {
         case 'RIGHT':
           // only clean neighbours (for docking) add property if you also need clean ones
-          var rLowestNeighbour = (_curGrid$area$toX = curGrid[plannedElement.area.toX]) === null || _curGrid$area$toX === void 0 || (_curGrid$area$toX = _curGrid$area$toX[plannedElement.area.fromY]) === null || _curGrid$area$toX === void 0 || (_curGrid$area$toX = _curGrid$area$toX.plannedElement) === null || _curGrid$area$toX === void 0 ? void 0 : _curGrid$area$toX.elementId;
-          var rHighestNeighbour = (_curGrid$area$toX2 = curGrid[plannedElement.area.toX]) === null || _curGrid$area$toX2 === void 0 || (_curGrid$area$toX2 = _curGrid$area$toX2[plannedElement.area.toY - 1]) === null || _curGrid$area$toX2 === void 0 || (_curGrid$area$toX2 = _curGrid$area$toX2.plannedElement) === null || _curGrid$area$toX2 === void 0 ? void 0 : _curGrid$area$toX2.elementId;
-          if (rLowestNeighbour == rHighestNeighbour && rLowestNeighbour) result.push(this.plannerElements.get(rLowestNeighbour));
+
+          var neighbourRow = curGrid[plannedElement.area.toX];
+          if (!neighbourRow) break;
+          var neighbourSize = 0;
+          var neighbours = neighbourRow.filter(function (cell) {
+            if (clean && neighbourSize == startHeight) return true;else if (!clean && neighbourSize > endHeight) return true;
+            neighbourSize = Math.round((neighbourSize + cell.plannedElement.size.height) * 1000);
+            return false;
+          });
+          neighbours.forEach(function (n) {
+            return !result.find(function (r) {
+              return r.ElementId == n.plannedElement.elementId;
+            }) && result.push(_this.plannerElements.get(n.plannedElement.elementId));
+          });
           break;
         case 'LEFT':
-          var lowestNeighbour = (_curGrid2 = curGrid[plannedElement.area.fromX - 1]) === null || _curGrid2 === void 0 || (_curGrid2 = _curGrid2[plannedElement.area.fromY]) === null || _curGrid2 === void 0 || (_curGrid2 = _curGrid2.plannedElement) === null || _curGrid2 === void 0 ? void 0 : _curGrid2.elementId;
-          var highestNeighbour = (_curGrid3 = curGrid[plannedElement.area.fromX - 1]) === null || _curGrid3 === void 0 || (_curGrid3 = _curGrid3[plannedElement.area.toY - 1]) === null || _curGrid3 === void 0 || (_curGrid3 = _curGrid3.plannedElement) === null || _curGrid3 === void 0 ? void 0 : _curGrid3.elementId;
-          if (lowestNeighbour == highestNeighbour && lowestNeighbour) result.push(this.plannerElements.get(lowestNeighbour));
+          var leftNeighbourRow = curGrid[plannedElement.area.fromX - 1];
+          if (!leftNeighbourRow) break;
+          var leftNeighbourSize = 0;
+          var leftStartElement = leftNeighbourRow.find(function (cell) {
+            if (leftNeighbourSize == startHeight) return true;
+            leftNeighbourSize = Math.round((leftNeighbourSize + cell.plannedElement.size.height) * 1000);
+            return false;
+          });
+          if (leftStartElement) result.push(this.plannerElements.get(leftStartElement.plannedElement.elementId));
           break;
         case 'TOP':
-          var topNeighbour = (_curGrid$area$fromX = curGrid[plannedElement.area.fromX]) === null || _curGrid$area$fromX === void 0 ? void 0 : _curGrid$area$fromX[plannedElement.area.toY];
-          var tElementId = topNeighbour === null || topNeighbour === void 0 || (_topNeighbour$planned = topNeighbour.plannedElement) === null || _topNeighbour$planned === void 0 ? void 0 : _topNeighbour$planned.elementId;
+          var topNeighbour = undefined;
+          for (var y = plannedElement.area.toY; y < curGrid[plannedElement.area.fromX].length; y++) {
+            topNeighbour = curGrid[plannedElement.area.fromX][y];
+            break;
+          }
+          if (!topNeighbour) break;
+          var tElementId = (_plannedElement3 = topNeighbour.plannedElement) === null || _plannedElement3 === void 0 ? void 0 : _plannedElement3.elementId;
           if (tElementId) result.push(this.plannerElements.get(tElementId));
           break;
         case 'DOWN':
-          var downNeighbour = (_curGrid$area$fromX2 = curGrid[plannedElement.area.fromX]) === null || _curGrid$area$fromX2 === void 0 ? void 0 : _curGrid$area$fromX2[plannedElement.area.fromY - 1];
+          var downNeighbour = (_curGrid$area$fromX = curGrid[plannedElement.area.fromX]) === null || _curGrid$area$fromX === void 0 ? void 0 : _curGrid$area$fromX[plannedElement.area.fromY - 1];
           var dElementId = downNeighbour === null || downNeighbour === void 0 || (_downNeighbour$planne = downNeighbour.plannedElement) === null || _downNeighbour$planne === void 0 ? void 0 : _downNeighbour$planne.elementId;
           if (dElementId) result.push(this.plannerElements.get(dElementId));
           break;
@@ -4104,9 +4219,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         var curHeight = 0;
         var row = frontGrid[x];
         for (var y = 0; y < row.length;) {
-          var _cell4, _cell$plannedElement$, _cell$plannedElement8;
+          var _cell5, _cell$plannedElement$, _cell$plannedElement8;
           var cell = row[y];
-          var elementId = (_cell4 = cell) === null || _cell4 === void 0 || (_cell4 = _cell4.plannedElement) === null || _cell4 === void 0 ? void 0 : _cell4.elementId;
+          var elementId = (_cell5 = cell) === null || _cell5 === void 0 || (_cell5 = _cell5.plannedElement) === null || _cell5 === void 0 ? void 0 : _cell5.elementId;
           if (elementId && cell && checkedElementIds.indexOf(elementId) == -1) {
             curHeight += this.plannerElements.get(elementId).getHeight();
             if (x == 0 && y == 0) depth = this.plannerElements.get(elementId).getDepth();
@@ -4136,9 +4251,11 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var onBottom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (this.hasActiveBackside) throw new Error('this function is doesnt implement the backside logic (yet)');
       var result = [];
+      var grid = this.generalPlanningState.grids[0].matrix;
       var lastHeight = -1;
-      for (var x = 0; x < this.getColumnCount();) {
-        var row = this.generalPlanningState.grids[0].matrix[x];
+      for (var x = 0; x < grid.length;) {
+        var _grid$new_x;
+        var row = grid[x];
         var height = 0;
         for (var y = 0; y < row.length;) {
           var element = row[y].plannedElement;
@@ -4147,12 +4264,20 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         }
         if (Math.round(height) == Math.round(lastHeight) || onBottom) {
           if (!result[result.length - 1]) result.push([]);
-          result[result.length - 1].push(this.getPlannerElementAtGridPos(x, row.length - 1, false));
-        } else {
-          result.push([this.getPlannerElementAtGridPos(x, row.length - 1, false)]);
+          result[result.length - 1].push(grid[x][row.length - 1].plannedElement);
+        } else if (grid[x][row.length - 1].plannedElement.area.fromX == x) {
+          result.push([grid[x][row.length - 1].plannedElement]);
         }
         lastHeight = height;
-        x = row[row.length - 1].plannedElement ? row[row.length - 1].plannedElement.area.toX : x + 1;
+        var new_x = row[row.length - 1].plannedElement.area.toX;
+        var newHeight = (_grid$new_x = grid[new_x]) === null || _grid$new_x === void 0 ? void 0 : _grid$new_x.length;
+
+        // if the next row is fx. lower and doesn't have a clean cut here we need to skip more
+        if (newHeight && newHeight != row.length) {
+          var cell = grid[new_x][newHeight - 1];
+          if (cell.index.x != cell.plannedElement.area.fromX) new_x = cell.plannedElement.area.toX;
+        }
+        x = new_x;
       }
       return result;
     }
@@ -4198,18 +4323,19 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getAllElementsToFillUp",
     value: function getAllElementsToFillUp(elementId, dir) {
-      var _this = this;
+      var _this2 = this;
       var curPos = this.getCellsInGridByElementId(elementId);
 
       //columns and rows are swapped don't ask me why
       var element = curPos.cells[0].plannedElement;
       var index = {
-        x: curPos.startColIndex,
+        x: dir == 'LEFT' ? curPos.startColIndex : curPos.endColIndex - 1,
         y: curPos.startRowIndex
       };
       var curGrid = curPos.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var plannerIdsToFill = [];
       var existingPlannerIds = [];
+      var lastFreeSpace = 0;
       var _loop = function _loop(_y) {
         var _curGrid$index$x$_y;
         var elementToCopy = (_curGrid$index$x$_y = curGrid[index.x][_y]) === null || _curGrid$index$x$_y === void 0 ? void 0 : _curGrid$index$x$_y.plannedElement;
@@ -4219,13 +4345,18 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         } // break
         var length = element.area.toX - element.area.fromX;
         var d = dir == 'RIGHT' ? +length : -length;
-        var isPlanned = curGrid.every(function (x, idx) {
-          var _x$_y;
-          return idx < element.area.fromX + d || idx >= element.area.toX + d || ((_x$_y = x[_y]) === null || _x$_y === void 0 ? void 0 : _x$_y.plannedElement);
+        var isPlanned = curGrid.find(function (x, idx) {
+          return idx == element.area.toX + d - 1 && x[x.length - 1].index.y >= elementToCopy.area.fromY;
+        });
+        var neighbours = _this2.getNeighborElements(elementToCopy.elementId, dir);
+        var freeSpace = 0;
+        neighbours.forEach(function (n) {
+          if (_this2.getNeighborElements(n.ElementId, "TOP").length == 0) freeSpace += n.Width;
         });
-        var neighbour = _this.getNeighborElements(elementToCopy.elementId, dir);
-        if (neighbour.length == 0 && !isPlanned && elementToCopy) plannerIdsToFill.push(elementToCopy.elementId);else if (elementToCopy) existingPlannerIds.push(elementToCopy.elementId);
+        if (neighbours.length == 0 && lastFreeSpace >= elementToCopy.size.width && !isPlanned && elementToCopy) plannerIdsToFill.push(elementToCopy.elementId);
+        if (neighbours.length > 0 && freeSpace > element.size.width) plannerIdsToFill.push(neighbours[neighbours.length - 1].ElementId);else if (elementToCopy) existingPlannerIds.push(elementToCopy.elementId);
         _y = elementToCopy.area.toY;
+        lastFreeSpace = freeSpace;
         y = _y;
       };
       for (var y = 0; y <= index.y;) {
@@ -4406,13 +4537,12 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var elementData = this.plannerElements.get(elementId);
       var deletedCells = this.getCellsInGridByElementId(elementId);
       if (!elementData) return;
-      this.deleteElement(elementId, "STD");
+      this.deleteElement(elementId, 'STD');
       var curGrid = this.generalPlanningState.grids[0].matrix;
       var cells = undefined;
-      if (absoluteIndex.x < 0 || absoluteIndex.y == 0 && deletedCells.endRowIndex >= absoluteIndex.x // moved 0 to 4 so now shift to left
-      ) {
+      if (absoluteIndex.x < 0 && absoluteIndex.y == 0) {
         var dir = deletedCells.endColIndex >= absoluteIndex.x;
-        if (deletedCells.startColIndex >= absoluteIndex.x) absoluteIndex.x -= deletedCells.endColIndex - deletedCells.startColIndex;
+        if (deletedCells.startColIndex <= absoluteIndex.x) absoluteIndex.x -= deletedCells.endColIndex - deletedCells.startColIndex;
         if (absoluteIndex.x < 0) absoluteIndex.x = 0;
         cells = this.createNewCells(elementData, absoluteIndex.x, absoluteIndex.y, false);
         var movedGrid = [];
@@ -4421,9 +4551,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           _.forEach(function (_, y) {
             var newX = x;
             var shiftX = 0;
-            if (y == absoluteIndex.y) {
-              newX += dir ? element.area.toX - element.area.fromX : -(element.area.toX - element.area.fromX);
-              shiftX = dir ? element.area.toX - element.area.fromX : -(element.area.toX - element.area.fromX);
+            if (y == absoluteIndex.y || absoluteIndex.y == 0) {
+              newX += dir ? element.area.toX - element.area.fromX : 0;
+              shiftX = dir ? element.area.toX - element.area.fromX : 0;
             }
             if (!movedGrid[newX]) movedGrid[newX] = [];
             var cellElem = curGrid[x][y].plannedElement;
@@ -4446,7 +4576,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         });
         curGrid = movedGrid;
       } else {
-        if (absoluteIndex.x > deletedCells.startColIndex && absoluteIndex.y == deletedCells.startRowIndex) absoluteIndex.x -= deletedCells.endColIndex - deletedCells.startColIndex;
+        if (absoluteIndex.x > deletedCells.startColIndex && deletedCells.startRowIndex == 0) absoluteIndex.x -= deletedCells.endColIndex - deletedCells.startColIndex;
         cells = this.createNewCells(elementData, absoluteIndex.x, absoluteIndex.y, false);
       }
       for (var i = 0; i < cells.length; i++) {
@@ -4508,75 +4638,127 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "updateGridElementDimensions",
     value: function updateGridElementDimensions(elementId, elementData) {
-      var _this2 = this;
-      if (!elementData) return;
+      var _this3 = this;
+      if (!elementData) return false;
+      var backup = structuredClone(this.generalPlanningState);
       var res = this.getCellsInGridByElementId(elementId);
       var scpe = this.gridSetupParams.forceSingleCellPerElement;
+      var origin = {
+        x: res.cells[0].plannedElement.area.toX,
+        y: res.cells[0].plannedElement.area.toY
+      };
+      var diff = {
+        x: 0,
+        y: 0
+      };
       res.cells.forEach(function (cell) {
         if (!cell.plannedElement) return;
-        cell.plannedElement.size.width = elementData.width;
-        cell.plannedElement.size.height = elementData.height;
-        cell.plannedElement.area = {
-          fromX: cell.index.x,
-          toX: !scpe ? Math.round(cell.index.x + elementData.width / _this2.gridSetupParams.fixCellRasterWidth) : cell.index.x + 1,
-          fromY: cell.index.y,
-          toY: !scpe ? Math.round(cell.index.y + elementData.height / _this2.gridSetupParams.fixCellRasterHeight) : cell.index.y + 1
+        var el = cell.plannedElement;
+        el.size.width = elementData.width;
+        el.size.height = elementData.height;
+        el.area = {
+          fromX: el.area.fromX,
+          toX: !scpe ? Math.round(el.area.fromX + elementData.width / _this3.gridSetupParams.fixCellRasterWidth) : cell.index.x + 1,
+          fromY: el.area.fromY,
+          toY: !scpe ? Math.round(el.area.fromY + elementData.height / _this3.gridSetupParams.fixCellRasterHeight) : cell.index.y + 1
         };
+        diff.y = cell.plannedElement.area.toY - origin.y;
+        diff.x = cell.plannedElement.area.toX - origin.x;
       });
-      if (scpe) return;
+      var cell = res.cells[0];
+      var grid = this.generalPlanningState.grids[0].matrix;
+      // if the element got bigger we need to move all the above elements up
+      // if it got wider we need to move all the elements to the right
+      if (diff.y != 0) {
+        for (var x = cell.plannedElement.area.fromX; x < cell.plannedElement.area.toX; x++) {
+          var row = grid[x];
+          if (!row) continue;
+          for (var y = origin.y; y < row.length; y++) {
+            var _cell = row[y];
+            if (_cell.index.y != y || _cell.plannedElement.elementId == cell.plannedElement.elementId) continue; //already corrected
+            _cell.index.y += diff.y;
+            _cell.plannedElement.area.fromY += diff.y;
+            _cell.plannedElement.area.toY += diff.y;
+          }
+        }
+      } else if (diff.x != 0) {
+        for (var _x3 = cell.plannedElement.area.fromX; _x3 < grid.length; _x3++) {
+          for (var _y2 = cell.plannedElement.area.fromY; _y2 < cell.plannedElement.area.toY; _y2++) {
+            var _cell6 = grid[_x3][_y2];
+            if (!_cell6 || _cell6.plannedElement.elementId == elementId) continue; //already corrected
+            _cell6.index.x += diff.x;
+            _cell6.plannedElement.area.fromX += diff.x;
+            _cell6.plannedElement.area.toX += diff.x;
+          }
+        }
+      }
+
+      // after indices/areas are corrected rebuild the grid
+      if (scpe) return false;
+      var changedElementData = res.cells[0].plannedElement;
       var newGrid = new Array();
       var plannedCells = this.getAllUsedCellsInGrid(false);
-      plannedCells.forEach(function (cell) {
-        var area = cell.plannedElement.area;
-        if (newGrid.find(function (x) {
-          return x.find(function (y) {
-            var _y$plannedElement3, _cell$plannedElement9;
-            return ((_y$plannedElement3 = y.plannedElement) === null || _y$plannedElement3 === void 0 ? void 0 : _y$plannedElement3.elementId) == ((_cell$plannedElement9 = cell.plannedElement) === null || _cell$plannedElement9 === void 0 ? void 0 : _cell$plannedElement9.elementId);
-          });
-        })) return;
-        for (var x = area.fromX; x < area.toX; x++) {
-          var _loop2 = function _loop2(y) {
-              if (!newGrid[x]) newGrid[x] = [];
-              if (y < area.fromY) {
-                if (newGrid[x][y]) return 0; // continue
-                var el = _this2.generalPlanningState.grids[0].matrix.findLast(function (_x) {
-                  return _x[y].plannedElement;
-                });
-                newGrid[x][y] = {
-                  index: {
-                    x: x,
-                    y: y
-                  },
-                  plannedElement: el && el.length > 0 ? el[0].plannedElement : undefined
+      var _loop2 = function _loop2() {
+          var cell = plannedCells[idx];
+          var area = cell.plannedElement.area;
+          if (newGrid.find(function (x) {
+            return x.find(function (y) {
+              var _y$plannedElement3, _cell$plannedElement9;
+              return (y === null || y === void 0 || (_y$plannedElement3 = y.plannedElement) === null || _y$plannedElement3 === void 0 ? void 0 : _y$plannedElement3.elementId) == ((_cell$plannedElement9 = cell.plannedElement) === null || _cell$plannedElement9 === void 0 ? void 0 : _cell$plannedElement9.elementId);
+            });
+          })) return 0; // continue
+          for (var _x4 = area.fromX; _x4 < area.toX; _x4++) {
+            for (var _y3 = area.fromY; _y3 < area.toY; _y3++) {
+              var _support$plannedEleme;
+              if (!newGrid[_x4] && area.fromY == 0) newGrid[_x4] = [];
+
+              // we have a so called overhanging element not so nice, let's correct:
+              var support = plannedCells.find(function (c) {
+                return c.plannedElement.area.toX >= cell.plannedElement.area.toX && c.plannedElement.area.toY == cell.index.y;
+              });
+              if (!support && !newGrid[_x4]) {
+                _this3.generalPlanningState = backup;
+                return {
+                  v: true
                 };
-                return 0; // continue
               }
 
-              // if the element got smaller we need to move it to the neighbour
-              //newGrid[x][y] = { ...cell, index: { x, y: y } };
-              newGrid[x][y] = _objectSpread(_objectSpread({}, cell), {}, {
+              // the element below got smaller
+              if (!newGrid[_x4] && (!support || ((_support$plannedEleme = support.plannedElement) === null || _support$plannedEleme === void 0 ? void 0 : _support$plannedEleme.elementId) == changedElementData.elementId)) {
+                _this3.generalPlanningState = backup;
+                return {
+                  v: true
+                };
+              } else if (!newGrid[_x4]) newGrid[_x4] = [];
+              // when the element above starts early and goes over multiple ones
+
+              // regular case
+              newGrid[_x4][_y3] = _objectSpread(_objectSpread({}, cell), {}, {
                 index: {
-                  x: x,
-                  y: y
+                  x: _x4,
+                  y: _y3
                 },
                 plannedElement: _objectSpread(_objectSpread({}, cell.plannedElement), {}, {
                   area: {
-                    fromX: x,
-                    toX: x + (cell.plannedElement.area.toX - cell.plannedElement.area.fromX),
-                    fromY: y,
-                    toY: y + (cell.plannedElement.area.toY - cell.plannedElement.area.fromY)
+                    fromX: cell.plannedElement.area.fromX,
+                    toX: cell.plannedElement.area.fromX + (cell.plannedElement.area.toX - cell.plannedElement.area.fromX),
+                    fromY: cell.plannedElement.area.fromY,
+                    toY: cell.plannedElement.area.fromY + (cell.plannedElement.area.toY - cell.plannedElement.area.fromY)
                   }
                 })
               });
-            },
-            _ret;
-          for (var y = 0; y < area.toY; y++) {
-            _ret = _loop2(y);
-            if (_ret === 0) continue;
+            }
           }
-        }
-      });
+        },
+        _ret;
+      for (var idx = 0; idx < plannedCells.length; idx++) {
+        _ret = _loop2();
+        if (_ret === 0) continue;
+        if (_ret) return _ret.v;
+      }
+      console.log('thoula 2 => ', newGrid);
       if (res.backside) this.generalPlanningState.grids[1].matrix = newGrid;else this.generalPlanningState.grids[0].matrix = newGrid;
+      return false;
     }
 
     /**
@@ -4617,9 +4799,11 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             var topNeighbors = this.getNeighborElements(elementId, 'TOP');
             var rightNeighbors = this.getNeighborElements(elementId, 'RIGHT');
             var leftNeighbors = this.getNeighborElements(elementId, 'LEFT');
+            var downNeighbors = this.getNeighborElements(elementId, 'DOWN');
             if (topNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVO', [topNeighbors[0]]);
             if (leftNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVL', [leftNeighbors[0]]);
             if (rightNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVR', [rightNeighbors[0]]);
+            if (rightNeighbors.length == 0 && leftNeighbors.length == 0 && downNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVU', [downNeighbors[0]]);
             element.PosNr = posNr;
             posNr++;
           }
@@ -4627,9 +4811,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       }
       for (var i = 0; i < backGrid.length; i++) {
         for (var j = 0; j < backGrid[i].length; j++) {
-          var _cell5$plannedElement;
-          var _cell5 = backGrid[i][j];
-          var _elementId6 = _cell5 === null || _cell5 === void 0 || (_cell5$plannedElement = _cell5.plannedElement) === null || _cell5$plannedElement === void 0 ? void 0 : _cell5$plannedElement.elementId;
+          var _cell7$plannedElement;
+          var _cell7 = backGrid[i][j];
+          var _elementId6 = _cell7 === null || _cell7 === void 0 || (_cell7$plannedElement = _cell7.plannedElement) === null || _cell7$plannedElement === void 0 ? void 0 : _cell7$plannedElement.elementId;
           if (_elementId6 && allCheckedElementIds.indexOf(_elementId6) == -1) {
             var _element2 = this.plannerElements.get(_elementId6);
             allCheckedElementIds.push(_elementId6);
@@ -4967,9 +5151,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             var targetRowIndex = endRowIndex + 1;
             var _copyPossible = false;
             // Iterate through columns within the element's width
-            for (var _x3 = endColIndex; _x3 >= startColIndex; _x3--) {
-              if (isValidCell(_x3, targetRowIndex)) {
-                copyStartColIndex = _x3;
+            for (var _x5 = endColIndex; _x5 >= startColIndex; _x5--) {
+              if (isValidCell(_x5, targetRowIndex)) {
+                copyStartColIndex = _x5;
                 _copyPossible = true;
               }
             }
@@ -4986,19 +5170,19 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             var _targetColIndex = endColIndex;
             var _copyPossible2 = false;
             // Iterate through rows within the element's height
-            for (var _y2 = startRowIndex; _y2 <= endRowIndex; _y2++) {
-              if (isValidCell(_targetColIndex, _y2)) {
-                copyStartRowIndex = _y2;
+            for (var _y4 = startRowIndex; _y4 <= endRowIndex; _y4++) {
+              if (isValidCell(_targetColIndex, _y4)) {
+                copyStartRowIndex = _y4;
                 _copyPossible2 = true;
                 break;
               }
             }
             if (!_copyPossible2) return undefined;
             _copyPossible2 = false;
-            for (var _x4 = endColIndex; _x4 <= endColIndex + elementCells.colCount; _x4++) {
-              if (isValidCell(_x4, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x4, copyStartRowIndex - 1))) {
+            for (var _x6 = endColIndex; _x6 <= endColIndex + elementCells.colCount; _x6++) {
+              if (isValidCell(_x6, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x6, copyStartRowIndex - 1))) {
                 //check also for overhang
-                copyEndColIndex = _x4;
+                copyEndColIndex = _x6;
                 _copyPossible2 = true;
               } else {
                 break; //when you find one situation where it is not valid skip outside.
@@ -5038,16 +5222,16 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       } else {
         var distToOriginX = 0;
         for (var i = 0; i < cellsStartColIndex; i++) {
-          var _plannedElement$size$3, _plannedElement3;
-          distToOriginX += (_plannedElement$size$3 = (_plannedElement3 = curGrid[i][0].plannedElement) === null || _plannedElement3 === void 0 ? void 0 : _plannedElement3.size.width) !== null && _plannedElement$size$3 !== void 0 ? _plannedElement$size$3 : 0;
+          var _plannedElement$size$3, _plannedElement4;
+          distToOriginX += (_plannedElement$size$3 = (_plannedElement4 = curGrid[i][0].plannedElement) === null || _plannedElement4 === void 0 ? void 0 : _plannedElement4.size.width) !== null && _plannedElement$size$3 !== void 0 ? _plannedElement$size$3 : 0;
         }
         if (cellsStartColIndex < 0) {
           distToOriginX = -element.getWidth();
         }
         var distToOriginY = 0;
         for (var i = 0; i < cellsStartRowIndex; i++) {
-          var _plannedElement$size$4, _plannedElement4;
-          distToOriginY += (_plannedElement$size$4 = (_plannedElement4 = curGrid[cellsStartColIndex][i].plannedElement) === null || _plannedElement4 === void 0 ? void 0 : _plannedElement4.size.width) !== null && _plannedElement$size$4 !== void 0 ? _plannedElement$size$4 : 0;
+          var _plannedElement$size$4, _plannedElement5;
+          distToOriginY += (_plannedElement$size$4 = (_plannedElement5 = curGrid[cellsStartColIndex][i].plannedElement) === null || _plannedElement5 === void 0 ? void 0 : _plannedElement5.size.width) !== null && _plannedElement$size$4 !== void 0 ? _plannedElement$size$4 : 0;
         }
         elementLocation.startIndexWorldPos = new Vector2(distToOriginX, distToOriginY);
       }
@@ -5094,7 +5278,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var _ele2, _ele3;
       var movables = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var selectedElementId = arguments.length > 1 ? arguments[1] : undefined;
-      if (!movables) return this.generalPlanningState;
+      if (!movables || !selectedElementId) return this.generalPlanningState;
       // fill to equal size
       var matrix = this.generalPlanningState.grids[0].matrix;
       var matrixWithMovables = [];
@@ -5141,6 +5325,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         isSupport = !!matrix.find(function (x, idx) {
           return idx >= ele.area.fromX && idx < ele.area.toX && matrix[idx].length > ele.area.toY;
         }); // can't move if there is anything above these cells
+
+        // if it has left and right neighbour and is on the bottom
+        if (ele.area.fromX == 0 && this.getNeighborElements(ele.elementId, 'LEFT').length > 0 && this.getNeighborElements(ele.elementId, 'RIGHT').length > 0) isSupport = true;
       }
       if (isSupport) return this.generalPlanningState;
       for (var x = 0; x < maxWidth; x++) {
@@ -5161,7 +5348,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         if (x >= from && x < to) return;
         var row = matrixWithMovables[x];
         var len = row.length;
-        var _x = ele.fromX == 0 ? x : x - 1;
+        var _x = ele.area.fromX == 0 ? x : x - 1;
         row[len] = {
           index: {
             x: _x,
@@ -5174,7 +5361,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var len = matrixWithMovables.length;
       if (((_ele2 = ele) === null || _ele2 === void 0 ? void 0 : _ele2.area.toX) != matrix.length) matrixWithMovables[len] = [{
         index: {
-          x: ele.fromX == 0 ? len : len - 1,
+          x: ele.area.fromX == 0 ? len : len - 1,
           y: 0
         }
       }];
@@ -5326,7 +5513,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     key: "initPlanner",
     value: function () {
       var _initPlanner = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(setPlanData) {
-        var planData, jsonElements, i, jsonElement, elementID, plannerElement, data, highesElemId, _jsonElement, params;
+        var planData, jsonElements, i, jsonElement, elementID, plannerElement, constructionRules, _constructionRules$co, _constructionRules$co2, data, highesElemId, _jsonElement, params;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -5356,7 +5543,20 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               if (this.nextElementId < elementID + 1) this.nextElementId = elementID + 1;
               this.set.setElementId(jsonElement.basketID, plannerElement.ElementId);
               if (!this.constructionRulesHandler.getConstructionRulesLoaded()) {
-                this.constructionRulesHandler.setConstructionRules(this.set.getConstructionRuleOfElementId(plannerElement.ElementId));
+                constructionRules = this.set.getConstructionRuleOfElementId(plannerElement.ElementId);
+                if (constructionRules) {
+                  this.boxPlannerGrid.GridSetupParams = {
+                    fixCellRasterHeight: 19.2,
+                    fixCellRasterWidth: 19.2,
+                    forceFixCellRasterSize: (_constructionRules$co = constructionRules.constructionRules.forceFixCellRasterSize) !== null && _constructionRules$co !== void 0 ? _constructionRules$co : true,
+                    forceSingleCellPerElement: (_constructionRules$co2 = constructionRules.constructionRules.forceSingleCellPerElement) !== null && _constructionRules$co2 !== void 0 ? _constructionRules$co2 : true,
+                    hasMaxGridRasterHeight: constructionRules.constructionRules.hasMaxGridRasterHeight,
+                    maxGridRasterHeight: constructionRules.constructionRules.maxGridRasterHeight,
+                    hasMaxGridRasterWidth: constructionRules.constructionRules.hasMaxGridRasterWidth,
+                    maxGridRasterWidth: constructionRules.constructionRules.maxGridRasterWidth
+                  };
+                }
+                this.constructionRulesHandler.setConstructionRules(constructionRules);
               }
               data = this.set.getPlannerData(plannerElement.ElementId);
               if (data) plannerElement.updatePlannerData(data);
@@ -5484,7 +5684,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     key: "addPlannerElement",
     value: (function () {
       var _addPlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(basketID, params) {
-        var plannerElement, data, constructionRules, _constructionRules$co, _constructionRules$co2;
+        var plannerElement, data, constructionRules, _constructionRules$co3, _constructionRules$co4;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -5508,8 +5708,8 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                   this.boxPlannerGrid.GridSetupParams = {
                     fixCellRasterHeight: 19.2,
                     fixCellRasterWidth: 19.2,
-                    forceFixCellRasterSize: (_constructionRules$co = constructionRules.constructionRules.forceFixCellRasterSize) !== null && _constructionRules$co !== void 0 ? _constructionRules$co : true,
-                    forceSingleCellPerElement: (_constructionRules$co2 = constructionRules.constructionRules.forceSingleCellPerElement) !== null && _constructionRules$co2 !== void 0 ? _constructionRules$co2 : true,
+                    forceFixCellRasterSize: (_constructionRules$co3 = constructionRules.constructionRules.forceFixCellRasterSize) !== null && _constructionRules$co3 !== void 0 ? _constructionRules$co3 : true,
+                    forceSingleCellPerElement: (_constructionRules$co4 = constructionRules.constructionRules.forceSingleCellPerElement) !== null && _constructionRules$co4 !== void 0 ? _constructionRules$co4 : true,
                     hasMaxGridRasterHeight: constructionRules.constructionRules.hasMaxGridRasterHeight,
                     maxGridRasterHeight: constructionRules.constructionRules.maxGridRasterHeight,
                     hasMaxGridRasterWidth: constructionRules.constructionRules.hasMaxGridRasterWidth,
@@ -5904,42 +6104,58 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     value: (function () {
       var _updatePlanner = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(changedOPT, targetElements) {
         var _this2 = this;
-        var message, cellPos, elemToCheck, copyIndex, allElementsToCopy, _allElementsToCopy, allElementsInBackGrid, _allElementsInBackGrid, _message;
+        var failed, message, cellPos, elemToCheck, copyIndex, allElementsToCopy, _allElementsToCopy, allElementsInBackGrid, _allElementsInBackGrid, _message;
         return _regeneratorRuntime.wrap(function _callee7$(_context7) {
           while (1) switch (_context7.prev = _context7.next) {
             case 0:
               LOG.debug('BoxPlanner - configurationHasChanged ' + changedOPT);
+              failed = false;
               targetElements === null || targetElements === void 0 || targetElements.forEach(function (e) {
                 var _this2$set$getArticle;
-                return _this2.boxPlannerGrid.updateGridElementDimensions(e, (_this2$set$getArticle = _this2.set.getArticleByElementId(e)) === null || _this2$set$getArticle === void 0 ? void 0 : _this2$set$getArticle.plannerData);
+                failed = _this2.boxPlannerGrid.updateGridElementDimensions(e, (_this2$set$getArticle = _this2.set.getArticleByElementId(e)) === null || _this2$set$getArticle === void 0 ? void 0 : _this2$set$getArticle.plannerData);
+                if (failed) return;
+              });
+              if (!failed) {
+                _context7.next = 5;
+                break;
+              }
+              return _context7.abrupt("return", {
+                doDeleteBackGrid: false,
+                elemIdsToDelete: [],
+                viewMessageCodex: "resizeerror",
+                failed: true
               });
+            case 5:
+              this.boxPlannerGrid.updateWorldPosOfElements();
               if (!(changedOPT && targetElements && targetElements.length > 0 && changedOPT['OPTELEMENT'] && (changedOPT['OPTELEMENT'] == 'OPVECK_I' || changedOPT['OPTELEMENT'] == 'OPVECK_A'))) {
-                _context7.next = 19;
+                _context7.next = 23;
                 break;
               }
               if (!(targetElements.length > 1)) {
-                _context7.next = 10;
+                _context7.next = 14;
                 break;
               }
-              _context7.next = 6;
+              _context7.next = 10;
               return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, changedOPT, targetElements, true);
-            case 6:
+            case 10:
               message = _context7.sent;
               if (!message) {
-                _context7.next = 9;
+                _context7.next = 13;
                 break;
               }
               return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
-                viewMessageCodex: message
+                viewMessageCodex: message,
+                failed: false
               });
-            case 9:
+            case 13:
               return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
-                elemIdsToDelete: []
+                elemIdsToDelete: [],
+                failed: false
               });
-            case 10:
+            case 14:
               //If the most bottom element has no neighbor right or left - copy element
               cellPos = this.boxPlannerGrid.getCellsInGridByElementId(targetElements[0]);
               elemToCheck = targetElements[0];
@@ -5947,7 +6163,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 elemToCheck = this.boxPlannerGrid.getPlannerElementAtGridPos(cellPos.startColIndex, 0, false).getElementId();
               }
               if (!(!this.boxPlannerGrid.getElementHasLeftElement(elemToCheck) || !this.boxPlannerGrid.getElementHasRightElement(elemToCheck))) {
-                _context7.next = 19;
+                _context7.next = 23;
                 break;
               }
               //Someone has changed Eck innen or aussen. If the current eselected Element has no neighbor left or right copy neighbor
@@ -5969,6 +6185,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 copyType: 'BoxPlanner_COL'
               });
               return _context7.abrupt("return", {
+                failed: false,
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: allElementsToCopy,
@@ -5977,17 +6194,17 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 changedOPT: changedOPT,
                 targetElements: targetElements
               });
-            case 19:
+            case 23:
               if (!(changedOPT && changedOPT['OPTDMOD'])) {
-                _context7.next = 34;
+                _context7.next = 38;
                 break;
               }
               _context7.t0 = changedOPT['OPTDMOD'];
-              _context7.next = _context7.t0 === 'OPVD_EIN' ? 23 : _context7.t0 === 'OPVD_AUS' ? 27 : 32;
+              _context7.next = _context7.t0 === 'OPVD_EIN' ? 27 : _context7.t0 === 'OPVD_AUS' ? 31 : 36;
               break;
-            case 23:
+            case 27:
               if (this.boxPlannerGrid.getPlannerHasActiveBackside()) {
-                _context7.next = 26;
+                _context7.next = 30;
                 break;
               }
               _allElementsToCopy = this.getPlannerElementsInfluencedByCopy(-1, {
@@ -5999,25 +6216,27 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 copyType: 'BoxPlanner_backside'
               });
               return _context7.abrupt("return", {
+                failed: false,
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: _allElementsToCopy,
                 copyType: 'BoxPlanner_backside',
                 changedOPT: changedOPT
               });
-            case 26:
-              return _context7.abrupt("break", 32);
-            case 27:
+            case 30:
+              return _context7.abrupt("break", 36);
+            case 31:
               if (!this.boxPlannerGrid.getPlannerHasActiveBackside()) {
-                _context7.next = 31;
+                _context7.next = 35;
                 break;
               }
               allElementsInBackGrid = this.boxPlannerGrid.getAllElementsInBackGrid();
               if (!(allElementsInBackGrid.length > 0)) {
-                _context7.next = 31;
+                _context7.next = 35;
                 break;
               }
               return _context7.abrupt("return", {
+                failed: false,
                 doDeleteBackGrid: true,
                 elemIdsToDelete: allElementsInBackGrid.map(function (element) {
                   return element.ElementId;
@@ -6025,23 +6244,24 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 deletionType: 'BoxPlanner_backside',
                 changedOPT: changedOPT
               });
-            case 31:
-              return _context7.abrupt("break", 32);
-            case 32:
-              _context7.next = 48;
+            case 35:
+              return _context7.abrupt("break", 36);
+            case 36:
+              _context7.next = 52;
               break;
-            case 34:
+            case 38:
               if (!(changedOPT && changedOPT['OPTFARBE_RAHMEN'] && changedOPT['OPTFARBE_RAHMEN'] == 'OPVSCHWARZ_MATT' && this.boxPlannerGrid.getPlannerHasActiveBackside())) {
-                _context7.next = 40;
+                _context7.next = 44;
                 break;
               }
               //If the double modul is active but the color is changed to black - disable double modul
               _allElementsInBackGrid = this.boxPlannerGrid.getAllElementsInBackGrid();
               if (!(_allElementsInBackGrid.length > 0)) {
-                _context7.next = 38;
+                _context7.next = 42;
                 break;
               }
               return _context7.abrupt("return", {
+                failed: false,
                 doDeleteBackGrid: true,
                 elemIdsToDelete: _allElementsInBackGrid.map(function (element) {
                   return element.ElementId;
@@ -6051,34 +6271,37 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 targetElements: targetElements,
                 viewMessageCodex: 'BOXPLAN_BLACKFRAME_INCOMPATIBLE_ELEMENT_WARNING'
               });
-            case 38:
-              _context7.next = 48;
+            case 42:
+              _context7.next = 52;
               break;
-            case 40:
-              _context7.next = 42;
+            case 44:
+              _context7.next = 46;
               return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, changedOPT, targetElements);
-            case 42:
+            case 46:
               _message = _context7.sent;
               if (!_message) {
-                _context7.next = 47;
+                _context7.next = 51;
                 break;
               }
               return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
-                viewMessageCodex: _message
+                viewMessageCodex: _message,
+                failed: false
               });
-            case 47:
+            case 51:
               return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
-                elemIdsToDelete: []
+                elemIdsToDelete: [],
+                failed: false
               });
-            case 48:
+            case 52:
               return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
-                elemIdsToDelete: []
+                elemIdsToDelete: [],
+                failed: false
               });
-            case 49:
+            case 53:
             case "end":
               return _context7.stop();
           }