@crystaldesign/web-planner-logic 25.14.0-beta.4 → 25.14.0-beta.40

package/build/esm/{DivaBoxPlanner-556bd49b.js → DivaBoxPlanner-90c95fe0.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-13aa8d15.js';
+import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-8f6efc60.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-bfed02e3.js';
-import '@babel/runtime/helpers/slicedToArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-67320283.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);
@@ -2583,23 +2596,22 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     }
   }, {
     key: "validateDimensionRule",
-    value: function validateDimensionRule(dimRule, boxPlannerSize) {
+    value: function validateDimensionRule(dimension, dimensionLimit, boxPlannerSize, higherLimit, lowerLimit) {
       var isOver = false;
       var isEqual = false;
-      if (dimRule.dimension.toLowerCase() == 'height' && boxPlannerSize.y > dimRule.dimensionLimit) isOver = true;
-      if (dimRule.dimension.toLowerCase() == 'height' && boxPlannerSize.y == dimRule.dimensionLimit) isEqual = true;
-      if (dimRule.dimension.toLowerCase() == 'width' && boxPlannerSize.x > dimRule.dimensionLimit) isOver = true;
-      if (dimRule.dimension.toLowerCase() == 'width' && boxPlannerSize.x == dimRule.dimensionLimit) isEqual = true;
-      if (dimRule.dimension.toLowerCase() == 'depth' && boxPlannerSize.z > dimRule.dimensionLimit) isOver = true;
-      if (dimRule.dimension.toLowerCase() == 'depth' && boxPlannerSize.z == dimRule.dimensionLimit) isEqual = true;
+      if (dimension.toLowerCase() == 'height' && boxPlannerSize.y > dimensionLimit) isOver = true;
+      if (dimension.toLowerCase() == 'height' && boxPlannerSize.y == dimensionLimit) isEqual = true;
+      if (dimension.toLowerCase() == 'width' && boxPlannerSize.x > dimensionLimit) isOver = true;
+      if (dimension.toLowerCase() == 'width' && boxPlannerSize.x == dimensionLimit) isEqual = true;
+      if (dimension.toLowerCase() == 'depth' && boxPlannerSize.z > dimensionLimit) isOver = true;
+      if (dimension.toLowerCase() == 'depth' && boxPlannerSize.z == dimensionLimit) isEqual = true;
       if (isOver) {
-        if (dimRule.higherLimit.toLowerCase() == 'doshow') return true;else if (dimRule.higherLimit.toLowerCase() == 'dohide') return false;
+        return higherLimit;
       } else if (isEqual) {
-        return true;
+        return higherLimit;
       } else {
-        if (dimRule.lowerLimit.toLowerCase() == 'doshow') return true;else if (dimRule.lowerLimit.toLowerCase() == 'dohide') return false;
+        return lowerLimit;
       }
-      return false;
     }
 
     /*
@@ -2610,42 +2622,38 @@ 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', false);
+          var freeSpace = element.Width;
+          rightNeighbours.forEach(function (n) {
+            if (n.ElementId == changedElement.ElementId) return;
+            var topElements = boxPlannerGrid.getNeighborElements(n.ElementId, 'TOP', false).filter(function (n) {
+              return n.ElementId != changedElement.ElementId;
+            });
+            var topWidth = topElements.reduce(function (totalwidth, e) {
+              return totalwidth += e.Width;
+            }, 0);
+            if (topWidth < n.Width) freeSpace += n.Width - topWidth;
+          });
+          if (Math.round(changedElement.Width) > Math.round(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",
@@ -2653,7 +2661,10 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       var _this3 = this;
       var elements = boxPlannerGrid.getAllElementsInFrontGrid();
       elements.forEach(function (e) {
-        if (boxPlannerGrid.getElementHasBottomElement(e.ElementId)) _this3.setOptionValue(e.ElementId, 'OPTFUSS_SYS', 'OPVOHNE', optionHandler);
+        if (boxPlannerGrid.getElementHasBottomElement(e.ElementId)) {
+          _this3.setOptionValue(e.ElementId, 'OPTFUSS_SYS', 'OPVOHNE', optionHandler);
+          _this3.setOptionValue(e.ElementId, 'OPTPOSSIBILITY_FUSS_OHNE', 'OPVTRUE', optionHandler);
+        }
       });
     }
 
@@ -2662,30 +2673,49 @@ 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);
+      var setRule = function setRule(option, res) {
+        if (changedOPTs) {
+          var changedOpt = Object.entries(changedOPTs).find(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+              key = _ref2[0];
+              _ref2[1];
+            return key == 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, option, res, optionHandler);
+        });
+      };
+      var dim = this.constructionRules.optionsInfluencedByDimensions;
+      dim.forEach(function (dimRule) {
+        if (Array.isArray(dimRule)) {
+          var res = dimRule.every(function (r) {
+            return _this4.validateDimensionRule(r.dimension, r.dimensionLimit, boxPlannerSize, r.higherLimit, r.lowerLimit).toLowerCase() == 'doshow';
           });
+          var t = dimRule[0];
+          if (res) setRule(t.option, 'doShow');else setRule(t.option, 'doHide');
         } 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 seriesDimRule = dimRule;
+          var baseDimRule = dimRule;
+          if (seriesDimRule.series) {
+            var _dimRule = seriesDimRule.series.findLast(function (r) {
+              return _this4.validateDimensionRule(r.dimension, r.dimensionLimit, boxPlannerSize, '1', '2') == '1';
+            });
+            if (_dimRule) setRule(seriesDimRule.option, _dimRule.value);
+          } else {
+            setRule(baseDimRule.option, _this4.validateDimensionRule(baseDimRule.option, baseDimRule.dimensionLimit, boxPlannerSize, baseDimRule.higherLimit, baseDimRule.lowerLimit));
+          }
         }
       });
     }
@@ -2759,22 +2789,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 +2813,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 +2826,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
           },
           _ret;
         while (seriesWidth != 0) {
-          _ret = _loop2();
+          _ret = _loop();
           if (_ret) return _ret.v;
         }
       });
@@ -3123,7 +3153,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 +3188,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 +3200,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 +3447,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 +3466,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             },
             index: new Vector2(startColIndex + i, startRowIndex + j)
           };
-          cells.push(_cell);
+          cells.push(_cell2);
         }
       }
       return cells;
@@ -3427,7 +3531,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getGridColumnWidth",
     value: function getGridColumnWidth(x) {
       var frontGrid = this.generalPlanningState.grids[0].matrix;
-      for (var y = 0; x < frontGrid[y].length; x++) {
+      for (var y = 0; y < frontGrid[y].length; y++) {
         var _plannedElement$size$, _plannedElement;
         var cell = frontGrid[x][y];
         if (cell) return (_plannedElement$size$ = (_plannedElement = cell.plannedElement) === null || _plannedElement === void 0 ? void 0 : _plannedElement.size.width) !== null && _plannedElement$size$ !== void 0 ? _plannedElement$size$ : 0;
@@ -3651,10 +3755,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 +4022,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 +4114,88 @@ 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,
+        _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;
+      for (var y = 0; y < currentRow.length;) {
+        var cell = currentRow[y];
+        if (cell.index.y < res.startRowIndex) startHeight = Math.round((startHeight + cell.plannedElement.size.height) * 1000) / 1000;
+        if (cell.index.y < res.endRowIndex) endHeight = Math.round((endHeight + cell.plannedElement.size.height) * 1000) / 1000;
+        y = cell.plannedElement.area.toY;
+      }
+      var neighbourSize = 0;
+      var neighbours = [];
       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));
+
+          for (var x = plannedElement.area.toX; x < curGrid.length;) {
+            var _neighbourRow$0$plann, _neighbourRow$0$plann2;
+            var neighbourRow = curGrid[x];
+            for (var _y = 0; _y < neighbourRow.length;) {
+              var _cell5$plannedElement, _cell5$plannedElement2;
+              var _cell5 = neighbourRow[_y];
+              if (neighbours.includes(_cell5)) continue;
+              if (clean && neighbourSize == startHeight) neighbours.push(_cell5);else if (!clean && neighbourSize >= startHeight && neighbourSize <= endHeight) neighbours.push(_cell5);
+              neighbourSize = Math.round((neighbourSize + _cell5.plannedElement.size.height) * 1000) / 1000;
+              _y = (_cell5$plannedElement = (_cell5$plannedElement2 = _cell5.plannedElement) === null || _cell5$plannedElement2 === void 0 ? void 0 : _cell5$plannedElement2.area.toY) !== null && _cell5$plannedElement !== void 0 ? _cell5$plannedElement : _y + 1;
+            }
+            neighbourSize = 0;
+            x = (_neighbourRow$0$plann = (_neighbourRow$0$plann2 = neighbourRow[0].plannedElement) === null || _neighbourRow$0$plann2 === void 0 ? void 0 : _neighbourRow$0$plann2.area.toX) !== null && _neighbourRow$0$plann !== void 0 ? _neighbourRow$0$plann : x + 1;
+          }
+          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));
+          for (var _x2 = plannedElement.area.fromX - 1; _x2 > 0;) {
+            var _neighbourRow = curGrid[_x2];
+            for (var _y2 = 0; _y2 < _neighbourRow.length;) {
+              var _cell6$plannedElement, _cell6$plannedElement2;
+              var _cell6 = _neighbourRow[_y2];
+              if (neighbours.includes(_cell6)) continue;
+              if (clean && neighbourSize == startHeight) neighbours.push(_cell6);else if (!clean && neighbourSize >= startHeight && neighbourSize <= endHeight) neighbours.push(_cell6);
+              neighbourSize = Math.round((neighbourSize + _cell6.plannedElement.size.height) * 1000) / 1000;
+              _y2 = (_cell6$plannedElement = (_cell6$plannedElement2 = _cell6.plannedElement) === null || _cell6$plannedElement2 === void 0 ? void 0 : _cell6$plannedElement2.area.toY) !== null && _cell6$plannedElement !== void 0 ? _cell6$plannedElement : _y2 + 1;
+            }
+            neighbourSize = 0;
+            _x2 = _neighbourRow[0].plannedElement ? _neighbourRow[0].plannedElement.area.fromX - 1 : _x2 + 1;
+          }
+          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 '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;
-          if (tElementId) result.push(this.plannerElements.get(tElementId));
+          var topNeighbours = [];
+          for (var _x3 = plannedElement.area.fromX; _x3 < plannedElement.area.toX;) {
+            var _cell7 = curGrid[_x3][plannedElement.area.toY];
+            if (!_cell7) break;
+            topNeighbours.push(_cell7);
+            if (clean) break;
+            _x3 = _cell7.plannedElement.area.toX;
+          }
+          if (topNeighbours.length == 0) break;
+          topNeighbours.forEach(function (topNeighbour) {
+            var _plannedElement3;
+            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,12 +4265,12 @@ 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 _cell8, _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 = (_cell8 = cell) === null || _cell8 === void 0 || (_cell8 = _cell8.plannedElement) === null || _cell8 === void 0 ? void 0 : _cell8.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();
+            if (x == 0 && y == 0) depth = cell.plannedElement.size.depth;
           }
           y = (_cell$plannedElement$ = (_cell$plannedElement8 = cell.plannedElement) === null || _cell$plannedElement8 === void 0 ? void 0 : _cell$plannedElement8.area.toY) !== null && _cell$plannedElement$ !== void 0 ? _cell$plannedElement$ : y + 1;
         }
@@ -4136,9 +4297,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 +4310,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][onBottom ? 0 : row.length - 1].plannedElement);
+        } else if (grid[x][row.length - 1].plannedElement.area.fromX == x) {
+          result.push([grid[x][onBottom ? 0 : 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,42 +4369,63 @@ 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 _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;
-        if (!elementToCopy) {
-          y = _y;
-          return 1;
-        } // 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 neighbour = _this.getNeighborElements(elementToCopy.elementId, dir);
-        if (neighbour.length == 0 && !isPlanned && elementToCopy) plannerIdsToFill.push(elementToCopy.elementId);else if (elementToCopy) existingPlannerIds.push(elementToCopy.elementId);
-        _y = elementToCopy.area.toY;
-        y = _y;
-      };
-      for (var y = 0; y <= index.y;) {
-        if (_loop(y)) break;
+      var length = element.area.toX - element.area.fromX;
+      var d = dir == 'RIGHT' ? +length : -length;
+      plannerIdsToFill.push(element.elementId);
+      _objectSpread(_objectSpread({}, element.area), {}, {
+        fromX: element.area.fromX + d,
+        toX: element.area.toX + d
+      });
+      var _loop = function _loop(_y3) {
+          var _curGrid$index$x$_y;
+          var supportElement = (_curGrid$index$x$_y = curGrid[index.x][_y3]) === null || _curGrid$index$x$_y === void 0 ? void 0 : _curGrid$index$x$_y.plannedElement;
+          if (!supportElement) {
+            y = _y3;
+            return 0;
+          } // break
+          var topElements = _this2.getNeighborElements(supportElement.elementId, 'TOP', false);
+          var topWidth = 0;
+          topElements.forEach(function (t) {
+            return topWidth += t.Width;
+          });
+          var freeSpace = 0;
+          if (supportElement.size.width > topWidth) freeSpace = supportElement.size.width - topWidth;
+          var neighbours = _this2.getNeighborElements(supportElement.elementId, dir, false);
+          neighbours.forEach(function (n) {
+            if (_this2.getNeighborElements(n.ElementId, 'TOP').length > 0) return;
+            freeSpace += n.Width;
+          });
+          if (freeSpace >= element.size.width) {
+            y = _y3;
+            return 0;
+          } // break
+          var missingWidth = element.size.width - freeSpace;
+          while (missingWidth > 0) {
+            plannerIdsToFill.push(supportElement.elementId);
+            missingWidth = Math.round(missingWidth - supportElement.size.width);
+          }
+          _y3 = supportElement.area.fromY - 1;
+          y = _y3;
+        },
+        _ret;
+      for (var y = index.y - 1; y >= 0;) {
+        _ret = _loop(y);
+        if (_ret === 0) break;
       }
       // if there is nothing to fill we copy everyting
       return {
-        elements: plannerIdsToFill.length == 0 ? existingPlannerIds : plannerIdsToFill,
+        elements: plannerIdsToFill.reverse(),
         backside: curPos.backside
       };
     }
@@ -4329,11 +4521,32 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       // [][] ->   |  [][][]
       // [][]      |  [][][]
       // [][][]    |  [][][][]
-      function moveGrid(plannedCells) {
+      var moveGrid = function moveGrid(plannedCells) {
         var grid = new Array();
         var rightNeighbour = plannedCells.filter(function (c) {
           return c.index.x == element.area.toX;
         });
+        var col = [];
+        var support = [];
+        var _loop2 = function _loop2() {
+          var c = frontGrid[x][element.area.fromY];
+          var s = frontGrid[x][element.area.fromY - 1];
+          if (c && !col.find(function (_c) {
+            return _c.plannedElement.elementId == c.plannedElement.elementId;
+          })) col.push(frontGrid[x][element.area.fromY]);
+          if (s && !support.find(function (_c) {
+            return _c.plannedElement.elementId == s.plannedElement.elementId;
+          })) support.push(frontGrid[x][element.area.fromY - 1]);
+        };
+        for (var x = 0; x < frontGrid.length; x++) {
+          _loop2();
+        }
+        var sizeXTop = col.reduce(function (acc, n) {
+          return acc += n.plannedElement.size.width;
+        }, 0);
+        var sizeXUnder = support ? support.reduce(function (acc, n) {
+          return acc += n.plannedElement.size.width;
+        }, 0) : 0;
         var rightNeighbourOfCopy = rightNeighbour.find(function (c) {
           return c.index.y == absoluteCopyIndex.y;
         });
@@ -4345,7 +4558,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         });
         plannedCells.forEach(function (cell) {
           // if we can't fill up (need to move the grid)
-          if (cell.index.x >= absoluteCopyIndex.x && (copyDirectionIsRight && (rightNeighbourOfCopy || rightNeighbour.length == 0) || !copyDirectionIsRight && (leftNeighbourOfCopy || leftNeighbour.length == 0) || absoluteCopyIndex.x == -1)) {
+          if (cell.index.x >= absoluteCopyIndex.x && (copyDirectionIsRight && (rightNeighbourOfCopy || rightNeighbour.length == 0) && (
+          // no free space or on the right height == move
+          !(sizeXTop <= sizeXUnder - element.size.width) || cell.index.y >= element.area.fromY && cell.index.y < element.area.toY) || !copyDirectionIsRight && (leftNeighbourOfCopy || leftNeighbour.length == 0) || absoluteCopyIndex.x == -1)) {
             cell.index.x += widthCopyArea;
             cell.plannedElement.area.fromX += widthCopyArea;
             cell.plannedElement.area.toX += widthCopyArea;
@@ -4354,13 +4569,13 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           grid[cell.index.x][cell.index.y] = cell;
         });
         return grid;
-      }
+      };
       frontGrid = moveGrid(this.getAllUsedCellsInGrid(false));
       for (var x = 0; x < widthCopyArea; x++) if (!frontGrid[absoluteCopyIndex.x + x]) frontGrid[absoluteCopyIndex.x + x] = [];
       this.generalPlanningState.grids[0].matrix = frontGrid;
       if (this.hasActiveBackside) {
         backGrid = moveGrid(this.getAllUsedCellsInGrid(true));
-        for (var _x2 = 0; _x2 < widthCopyArea; _x2++) if (!backGrid[absoluteCopyIndex.x + _x2]) backGrid[absoluteCopyIndex.x + _x2] = [];
+        for (var _x4 = 0; _x4 < widthCopyArea; _x4++) if (!backGrid[absoluteCopyIndex.x + _x4]) backGrid[absoluteCopyIndex.x + _x4] = [];
         this.generalPlanningState.grids[1].matrix = backGrid;
       }
     }
@@ -4406,13 +4621,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 +4635,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 +4660,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++) {
@@ -4476,8 +4690,6 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var backsideForCopy = copyIndex.z == -1 || curPos.backside == true;
       if (cellIndex.x < 0) cellIndex.x = 0; // can't plan to negative space see prepareGridForColCopy
       var curGrid = backsideForCopy ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
-      // can't float need to dock
-      if (curGrid[cellIndex.x].length < cellIndex.y) cellIndex.y = curGrid[cellIndex.x].length;
       var cells = this.createNewCells(newElement, cellIndex.x, cellIndex.y, backsideForCopy);
       for (var i = 0; i < cells.length; i++) {
         if (!curGrid[cells[i].index.x]) curGrid[cells[i].index.x] = [];
@@ -4508,75 +4720,129 @@ 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.size.depth = elementData.depth;
+        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 _x5 = cell.plannedElement.area.fromX; _x5 < grid.length; _x5++) {
+          for (var _y4 = cell.plannedElement.area.fromY; _y4 < cell.plannedElement.area.toY; _y4++) {
+            var _cell9 = grid[_x5][_y4];
+            if (!_cell9 || _cell9.plannedElement.elementId == elementId) continue; //already corrected
+            _cell9.index.x += diff.x;
+            _cell9.plannedElement.area.fromX += diff.x;
+            _cell9.plannedElement.area.toX += diff.x;
+          }
+        }
+      }
+
+      // after indices/areas are corrected rebuild the grid
+      if (scpe) return false;
+      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 _loop3 = function _loop3() {
+          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 _x6 = area.fromX; _x6 < area.toX; _x6++) {
+            for (var _y5 = area.fromY; _y5 < area.toY; _y5++) {
+              if (!newGrid[_x6] && area.fromY == 0) newGrid[_x6] = [];
+
+              // 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[_x6]) {
+                _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[_x6] && !support) {
+                _this3.generalPlanningState = backup;
+                return {
+                  v: true
+                };
+              } else if (!newGrid[_x6]) newGrid[_x6] = [];
+              // when the element above starts early and goes over multiple ones
+
+              // regular case
+              newGrid[_x6][_y5] = _objectSpread(_objectSpread({}, cell), {}, {
                 index: {
-                  x: x,
-                  y: y
+                  x: _x6,
+                  y: _y5
                 },
                 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)
+                  },
+                  size: _objectSpread(_objectSpread({}, cell.plannedElement.size), {}, {
+                    depth: elementData.depth
+                  })
                 })
               });
-            },
-            _ret;
-          for (var y = 0; y < area.toY; y++) {
-            _ret = _loop2(y);
-            if (_ret === 0) continue;
+            }
           }
-        }
-      });
+        },
+        _ret2;
+      for (var idx = 0; idx < plannedCells.length; idx++) {
+        _ret2 = _loop3();
+        if (_ret2 === 0) continue;
+        if (_ret2) return _ret2.v;
+      }
       if (res.backside) this.generalPlanningState.grids[1].matrix = newGrid;else this.generalPlanningState.grids[0].matrix = newGrid;
+      return false;
     }
 
     /**
@@ -4617,9 +4883,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 (downNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVU', [downNeighbors[0]]);
             element.PosNr = posNr;
             posNr++;
           }
@@ -4627,9 +4895,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 _cell10$plannedElemen;
+          var _cell10 = backGrid[i][j];
+          var _elementId6 = _cell10 === null || _cell10 === void 0 || (_cell10$plannedElemen = _cell10.plannedElement) === null || _cell10$plannedElemen === void 0 ? void 0 : _cell10$plannedElemen.elementId;
           if (_elementId6 && allCheckedElementIds.indexOf(_elementId6) == -1) {
             var _element2 = this.plannerElements.get(_elementId6);
             allCheckedElementIds.push(_elementId6);
@@ -4967,9 +5235,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 _x7 = endColIndex; _x7 >= startColIndex; _x7--) {
+              if (isValidCell(_x7, targetRowIndex)) {
+                copyStartColIndex = _x7;
                 _copyPossible = true;
               }
             }
@@ -4986,19 +5254,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 _y6 = startRowIndex; _y6 <= endRowIndex; _y6++) {
+              if (isValidCell(_targetColIndex, _y6)) {
+                copyStartRowIndex = _y6;
                 _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 _x8 = endColIndex; _x8 <= endColIndex + elementCells.colCount; _x8++) {
+              if (isValidCell(_x8, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x8, copyStartRowIndex - 1))) {
                 //check also for overhang
-                copyEndColIndex = _x4;
+                copyEndColIndex = _x8;
                 _copyPossible2 = true;
               } else {
                 break; //when you find one situation where it is not valid skip outside.
@@ -5038,16 +5306,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 +5362,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 +5409,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 +5432,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 +5445,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
         }
       }];
@@ -5198,7 +5469,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         //system 4 useacse
         var totalColCount = matrix[0].length;
         var colSizes = Array(totalColCount).fill(-1);
-        var _loop3 = function _loop3(i) {
+        var _loop4 = function _loop4(i) {
           var _matrix$find;
           var cell = (_matrix$find = matrix.find(function (row) {
             var _row$i$plannedElement, _row$i$plannedElement2;
@@ -5212,7 +5483,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           if (colSizes[i] === -1) return 1; // break
         };
         for (var i = 0; i < totalColCount; i++) {
-          if (_loop3(i)) break;
+          if (_loop4(i)) break;
         }
         if (colSizes.includes(-1)) LOG$1.error(new Error('Column sizes are not set'));
         return colSizes;
@@ -5326,7 +5597,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 +5627,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 +5768,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 +5792,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,
@@ -5587,11 +5871,10 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     value: (function () {
       var _copyPlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(articleCopyRelation, copyInfo) {
         var _this = this;
-        var gridIsPrepared, plannerElementsToLoadSVG, that, i, cellPos, allDPs, j;
+        var plannerElementsToLoadSVG, that, i, cellPos, allDPs, j;
         return _regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              gridIsPrepared = false;
               if (copyInfo) {
                 _context5.next = 3;
                 break;
@@ -5601,25 +5884,22 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               if (copyInfo.copyType == 'STD') copyInfo.targetElements = [];
               plannerElementsToLoadSVG = [];
               that = this;
-              articleCopyRelation.forEach(function (basketIDNewArticle, elementToCopyId) {
+              articleCopyRelation.forEach(function (val) {
                 var _copyInfo$targetEleme;
-                if (!gridIsPrepared) {
-                  if (copyInfo.copyIndex.z == -1) {
-                    if (!_this.boxPlannerGrid.getPlannerHasActiveBackside()) _this.boxPlannerGrid.prepareGridForBackSideCopy();
-                  } else {
-                    _this.boxPlannerGrid.prepareGridForColCopy(elementToCopyId, copyInfo.copyIndex);
-                  }
+                if (copyInfo.copyIndex.z == -1) {
+                  if (!_this.boxPlannerGrid.getPlannerHasActiveBackside()) _this.boxPlannerGrid.prepareGridForBackSideCopy();
+                } else {
+                  _this.boxPlannerGrid.prepareGridForColCopy(val.key, copyInfo.copyIndex);
                 }
-                gridIsPrepared = true;
 
                 //Init Planner Element
-                var plannerElement = new PlannerElementData(_this.set.getSetId(), basketIDNewArticle, _this.nextElementId, DivaBoxPlanner.plannerType);
+                var plannerElement = new PlannerElementData(_this.set.getSetId(), val.value, _this.nextElementId, DivaBoxPlanner.plannerType);
                 _this.nextElementId++;
-                _this.set.setElementId(basketIDNewArticle, plannerElement.ElementId);
+                _this.set.setElementId(val.value, plannerElement.ElementId);
                 var data = _this.set.getPlannerData(plannerElement.ElementId);
                 plannerElement.updatePlannerData(data);
-                _this.boxPlannerGrid.addElementAsCopy(elementToCopyId, plannerElement, copyInfo.copyIndex);
-                _this.constructionRulesHandler.onElementCopy(elementToCopyId, plannerElement.getElementId());
+                _this.boxPlannerGrid.addElementAsCopy(val.key, plannerElement, copyInfo.copyIndex);
+                _this.constructionRulesHandler.onElementCopy(val.key, plannerElement.getElementId());
                 plannerElementsToLoadSVG.push(plannerElement);
                 if (copyInfo.copyType == 'STD') (_copyInfo$targetEleme = copyInfo.targetElements) === null || _copyInfo$targetEleme === void 0 || _copyInfo$targetEleme.push(plannerElement.getElementId());
               });
@@ -5750,7 +6030,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
         }
       }
       //remove duplicate
-      return Array.from(new Set(allElementsToCopy));
+      return allElementsToCopy;
     }
 
     /**
@@ -5904,42 +6184,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 +6243,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 +6265,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 copyType: 'BoxPlanner_COL'
               });
               return _context7.abrupt("return", {
+                failed: false,
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: allElementsToCopy,
@@ -5977,17 +6274,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 +6296,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 +6324,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 +6351,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();
           }