@crystaldesign/web-planner-logic 25.13.0-beta.9 → 25.14.0-beta.1

package/build/esm/{DivaBoxPlanner-091c8b09.js → DivaBoxPlanner-8c163d35.js}

@@ -3,10 +3,10 @@ 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-f875e861.js';
+import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-f5485f21.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-80d37ff1.js';
+import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-af50a706.js';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import 'axios';
@@ -1822,6 +1822,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
      * Elements without bottom plate are "Garderobe" or "Offenes Fach ohne Boden"
      */
     _defineProperty(this, "getElementHasBottomPlate", function (curElement, optionHandler) {
+      if (!curElement) return false;
       if (_this.constructionRules.knotInfo.elementsWithGroundPlate) {
         for (var i = 0; i < _this.constructionRules.knotInfo.elementsWithGroundPlate.length; i++) {
           var onOPT = _this.constructionRules.knotInfo.elementsWithGroundPlate[i].onOPT;
@@ -1838,6 +1839,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
      * @param optionHandler
      */
     _defineProperty(this, "getElementIsCornerElement", function (curElement, optionHandler) {
+      if (!curElement) return false;
       return _this.constructionRules.hasCORNER && _this.arrayContainsValue(_this.constructionRules.knotInfo.cornerElements.onOPVs, _this.getOptionVal(curElement.getElementId(), _this.constructionRules.knotInfo.cornerElements.onOPT, optionHandler));
     });
     _defineProperty(this, "getElementIsGarderobeElement", function (curElement, optionHandler) {
@@ -1857,9 +1859,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       if (boxPlannerGrid.getElementHasTopElement(curElement.getElementId())) {
         var allTopElements = boxPlannerGrid.getTopElements(curElement.getElementId());
         var oneTrueFound = false;
-        for (var i = 0; i < allTopElements.length; i++) {
-          if (_this.getElementHasBottomPlate(allTopElements[i], optionHandler)) oneTrueFound = true;
-        }
+        if (_this.getElementHasBottomPlate(allTopElements[0], optionHandler)) oneTrueFound = true;
         return oneTrueFound;
       }
       return true;
@@ -2045,7 +2045,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
             }
           }
           if (cellsInGrid.endColIndex < colCount - 1) {
-            var rightElement = boxPlannerGrid.getPlannerElementAtGridPos(cellsInGrid.endColIndex + 1, 0, false);
+            var rightElement = boxPlannerGrid.getPlannerElementAtGridPos(cellsInGrid.endColIndex, 0, false);
             if (rightElement) {
               var _cornerVal = this.getOptionVal(rightElement.getElementId(), 'OPTELEMENT', optionHandler);
               if (_cornerVal == 'OPVECK_I') {
@@ -2060,7 +2060,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
         }
         if (this.constructionRules.avoidOptionLastCol) {
           var elementType = this.getOptionVal(allElementIds[i], this.constructionRules.avoidOptionLastCol.onOPT, optionHandler);
-          if (this.arrayContainsValue(this.constructionRules.avoidOptionLastCol.onOPVs, elementType) && cellsInGrid.endColIndex == colCount - 1) {
+          if (this.arrayContainsValue(this.constructionRules.avoidOptionLastCol.onOPVs, elementType) && cellsInGrid.endColIndex - 1 == colCount - 1) {
             this.setOptionValue(allElementIds[i], this.constructionRules.avoidOptionLastCol.onOPT, this.constructionRules.avoidOptionLastCol.defaultOpv, optionHandler);
           }
         }
@@ -2219,6 +2219,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
         //Setze alle Fuße zurück
         //DEPRECTED this.setOptionValue(allElementIds[i], "OPTFAF_LINKS", "OPVOHNE_FAF", optionHandler);
         //DEPRECTED this.setOptionValue(allElementIds[i], "OPTFAF_RECHTS", "OPVOHNE_FAF", optionHandler);
+
         this.setOptionValue(allElementIds[i], 'OPTFAF_L_V', 'OPVOHNE_FAF', optionHandler);
         this.setOptionValue(allElementIds[i], 'OPTFAF_L_H', 'OPVOHNE_FAF', optionHandler);
         this.setOptionValue(allElementIds[i], 'OPTFAF_R_V', 'OPVOHNE_FAF', optionHandler);
@@ -2433,35 +2434,17 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       var bottomElemts = boxPlannerGrid.getBottomElements(curElement.ElementId);
       var topRightElemt = !fromBackside ? boxPlannerGrid.getTopRightElement(curElement.ElementId) : boxPlannerGrid.getTopLeftElement(curElement.ElementId);
       if (rightElemts.length > 0) {
-        if (rightElemts.length > 1) {
-          LOG$2.error(new DivaError('BoxPlannerError - only one OPTNACHBAR_RECHTS allowed', {
-            code: 'WC_0012'
-          }));
-        } else {
-          this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_RECHTS', this.getOptionVal(rightElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
-        }
+        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_RECHTS', this.getOptionVal(rightElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_RECHTS', optionHandler);
       }
       if (leftElemts.length > 0) {
-        if (leftElemts.length > 1) {
-          LOG$2.error(new DivaError('BoxPlannerError - only one OPTNACHBAR_LINKS allowed', {
-            code: 'WC_0012'
-          }));
-        } else {
-          this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_LINKS', this.getOptionVal(leftElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
-        }
+        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_LINKS', this.getOptionVal(leftElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_LINKS', optionHandler);
       }
       if (topElemts.length > 0) {
-        if (topElemts.length > 1) {
-          LOG$2.error(new DivaError('BoxPlannerError - only one OPTNACHBAR_OBEN allowed', {
-            code: 'WC_0012'
-          }));
-        } else {
-          this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_OBEN', this.getOptionVal(topElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
-        }
+        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_OBEN', this.getOptionVal(topElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_OBEN', optionHandler);
       }
@@ -2472,13 +2455,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       }
       if (this.constructionRules.hasNeighbors && this.constructionRules.hasNeighbors.indexOf('OPTNACHBAR_UNTEN') >= 0) {
         if (bottomElemts.length > 0) {
-          if (bottomElemts.length > 1) {
-            LOG$2.error(new DivaError('BoxPlannerError - only one OPTNACHBAR_UNTEN allowed', {
-              code: 'WC_0012'
-            }));
-          } else {
-            this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_UNTEN', this.getOptionVal(bottomElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
-          }
+          this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_UNTEN', this.getOptionVal(bottomElemts[0].ElementId, 'OPTELEMENT', optionHandler), optionHandler);
         } else {
           this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_UNTEN', optionHandler);
         }
@@ -2532,7 +2509,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               }
             }
           }
-          if (this.getElementHasBottomPlate(backElement, optionHandler)) {
+          if (backElement && this.getElementHasBottomPlate(backElement, optionHandler)) {
             //Set the opposite element has rahmen unten vorne
             this.setOptionDoShow(frontElement, 'OPTOPP_RAHMEN_U_V', optionHandler);
           } else {
@@ -2604,31 +2581,112 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       }
       return undefined;
     }
+  }, {
+    key: "validateDimensionRule",
+    value: function validateDimensionRule(dimRule, boxPlannerSize) {
+      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 (isOver) {
+        if (dimRule.higherLimit.toLowerCase() == 'doshow') return true;else if (dimRule.higherLimit.toLowerCase() == 'dohide') return false;
+      } else if (isEqual) {
+        return true;
+      } else {
+        if (dimRule.lowerLimit.toLowerCase() == 'doshow') return true;else if (dimRule.lowerLimit.toLowerCase() == 'dohide') return false;
+      }
+      return false;
+    }
+
+    /*
+     *  This function corrects the elements in one row when the top element is wider then the bottom one.
+     *  Goal is to make all the bottom ones also atleast as wide as the top one because no element can overhang - omlin setup
+     */
+  }, {
+    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();
+      }
+    }
+  }, {
+    key: "correctFoot",
+    value: function correctFoot(boxPlannerGrid, optionHandler) {
+      var _this3 = this;
+      var elements = boxPlannerGrid.getAllElementsInFrontGrid();
+      elements.forEach(function (e) {
+        if (boxPlannerGrid.getElementHasBottomElement(e.ElementId)) _this3.setOptionValue(e.ElementId, 'OPTFUSS_SYS', 'OPVOHNE', optionHandler);
+      });
+    }
+
+    /*
+     *  This function corrects Options that are based on the total planning dimensions
+     * */
   }, {
     key: "correctOptionsInfluencedByDimensions",
     value: function correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler) {
-      var _this2 = this;
+      var _this4 = this;
       if (!this.constructionRules.optionsInfluencedByDimensions) return;
       var boxPlannerSize = boxPlannerGrid.getSizeOfWholeSet(false);
       var allElements = boxPlannerGrid.getAllElementsInFrontGrid();
       this.constructionRules.optionsInfluencedByDimensions.forEach(function (dimRule) {
-        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;
-        allElements.forEach(function (element) {
-          if (isOver) {
-            if (dimRule.higherLimit.toLowerCase() == 'doshow') _this2.setOptionDoShow(element.ElementId, dimRule.option, optionHandler);else if (dimRule.higherLimit.toLowerCase() == 'dohide') _this2.setOptionDoHide(element.ElementId, dimRule.option, optionHandler);
-          } else if (isEqual) {
-            _this2.setOptionDoShow(element.ElementId, dimRule.option, optionHandler);
-          } else {
-            if (dimRule.lowerLimit.toLowerCase() == 'doshow') _this2.setOptionDoShow(element.ElementId, dimRule.option, optionHandler);else if (dimRule.lowerLimit.toLowerCase() == 'dohide') _this2.setOptionDoHide(element.ElementId, dimRule.option, optionHandler);
-          }
-        });
+        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);
+          });
+        }
       });
     }
   }, {
@@ -2691,27 +2749,32 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
   }, {
     key: "correctCoverPlate",
     value: function correctCoverPlate(coverPlateRule, boxPlannerGrid, optionHandler) {
-      var _this3 = this;
+      var _this5 = this;
       if (coverPlateRule.onHighestElementsOnly) return; // System4 not handled by this logic yet
 
       var elementsPerSeries = boxPlannerGrid.getHighestElementsPerSeries(!!coverPlateRule.onBottom);
       elementsPerSeries.forEach(function (serie) {
         var seriesWidth = 0;
         var seriesWidthToPlateOpv = coverPlateRule.seriesWidthToPlateOpv;
+
+        // default => set all to ohne
         serie.forEach(function (element) {
-          var _element$Width;
-          seriesWidth += (_element$Width = element.Width) !== null && _element$Width !== void 0 ? _element$Width : 0;
-          _this3.setOptionValue(element.ElementId, coverPlateRule.optABD, 'OPVOHNE', optionHandler);
+          var _element$Width2;
+          seriesWidth += (_element$Width2 = element.Width) !== null && _element$Width2 !== void 0 ? _element$Width2 : 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);
         });
         var firstUncoveredElement = serie[0];
-        var _loop = function _loop() {
+        var _loop2 = function _loop2() {
             var opv = seriesWidthToPlateOpv.findLast(function (stp) {
               // is a clean element ending
               var helperWidth = 0;
               var isClean = false;
               serie.forEach(function (element) {
-                var _element$Width2;
-                helperWidth += (_element$Width2 = element.Width) !== null && _element$Width2 !== void 0 ? _element$Width2 : 0;
+                var _element$Width3;
+                helperWidth += (_element$Width3 = element.Width) !== null && _element$Width3 !== void 0 ? _element$Width3 : 0;
                 if (Math.abs(helperWidth - stp.limit) < 1) isClean = true;
               });
               if (stp.limit <= seriesWidth && isClean) return true;
@@ -2720,7 +2783,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
             if (!opv) return {
               v: void 0
             };
-            _this3.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;
@@ -2733,7 +2796,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
           },
           _ret;
         while (seriesWidth != 0) {
-          _ret = _loop();
+          _ret = _loop2();
           if (_ret) return _ret.v;
         }
       });
@@ -3059,6 +3122,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     key: "updateOptionLogicBoxPlanner",
     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;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -3133,8 +3197,10 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
                   }
                 }
               }
+              this.correctFoot(boxPlannerGrid, optionHandler);
               this.correctLadder(boxPlannerGrid, optionHandler);
               this.correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler);
+              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++) {
@@ -3143,13 +3209,13 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
                 }
               }
               doChangeRetailArticleNumbers = this.doChangeRetailArticleNumbers(boxPlannerGrid, optionHandler);
-              _context.next = 27;
+              _context.next = 29;
               return this.updateCfgValuesByPlanner(optionHandler, undefined, this.constructionRules.partlistRules.bundleRules, doChangeRetailArticleNumbers);
-            case 27:
+            case 29:
               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 30:
+            case 32:
             case "end":
               return _context.stop();
           }
@@ -3211,21 +3277,26 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG$1 = DivaUtils.initLog('Planner', 'BOX-PLANNER_GRID');
 var BoxPlannerGrid = /*#__PURE__*/function () {
   function BoxPlannerGrid(gridSetupParams, getValueOfOptionOfArticle) {
     _classCallCheck(this, BoxPlannerGrid);
     _defineProperty(this, "plannerElements", void 0);
-    _defineProperty(this, "frontGrid", void 0);
-    //first entry is width, second height
-    _defineProperty(this, "backGrid", void 0);
-    //if cell is empty it is undefined
+    _defineProperty(this, "generalPlanningState", void 0);
+    // [0] == frontgrid, and [1] == backgrid
     _defineProperty(this, "hasActiveBackside", void 0);
     _defineProperty(this, "getValueOfOptionOfArticle", void 0);
     _defineProperty(this, "gridSetupParams", void 0);
     this.plannerElements = new Map();
-    this.frontGrid = new Array();
-    this.backGrid = new Array();
+
+    // the old logic
+    this.generalPlanningState = {
+      grids: [{
+        matrix: [[]]
+      }]
+    };
     this.gridSetupParams = gridSetupParams;
     this.getValueOfOptionOfArticle = getValueOfOptionOfArticle;
     this.hasActiveBackside = false;
@@ -3244,50 +3315,57 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       if (this.gridSetupParams.forceSingleCellPerElement) {
         var cell = {
           //isEmpty: false,
-          plannerElementId: newElement.ElementId,
-          width: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterWidth : newElement.getWidth(),
-          height: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterHeight : newElement.getHeight(),
+          plannedElement: {
+            elementId: newElement.ElementId,
+            basketId: newElement.getBasketId(),
+            size: {
+              width: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterWidth : newElement.getWidth(),
+              height: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterHeight : newElement.getHeight(),
+              depth: newElement.getDepth()
+            },
+            articleCodex: newElement.ArticleCodex,
+            area: {
+              fromX: startColIndex,
+              toX: startColIndex + 1,
+              fromY: startRowIndex,
+              toY: startRowIndex + 1
+            }
+          },
           index: new Vector2(startColIndex, startRowIndex)
         };
-        return {
-          cells: [cell],
-          startColIndex: startColIndex,
-          endColIndex: startColIndex,
-          startRowIndex: startRowIndex,
-          endRowIndex: startRowIndex,
-          backside: backside,
-          colCount: 1,
-          rowCount: 1
-        };
+        return [cell];
       }
       if (!this.gridSetupParams.forceFixCellRasterSize) {
         LOG$1.error(new DivaError('Box planner with params forceSingleCellPerElement is false and forceFixCellRasterSize is false are not allowed'));
       }
       var colCount = Math.round(newElement.getWidth() / this.gridSetupParams.fixCellRasterWidth);
-      var rowCount = Math.round(newElement.getHeight() / this.gridSetupParams.fixCellRasterWidth);
+      var rowCount = Math.round(newElement.getHeight() / this.gridSetupParams.fixCellRasterHeight);
       var cells = [];
       for (var i = 0; i < colCount; i++) {
         for (var j = 0; j < rowCount; j++) {
           var _cell = {
-            // isEmpty: false,
-            plannerElementId: newElement.ElementId,
-            width: this.gridSetupParams.fixCellRasterWidth,
-            height: this.gridSetupParams.fixCellRasterHeight,
+            plannedElement: {
+              basketId: newElement.getBasketId(),
+              elementId: newElement.getElementId(),
+              articleCodex: newElement.ArticleCodex,
+              size: {
+                width: newElement.getWidth(),
+                depth: newElement.getDepth(),
+                height: newElement.getHeight()
+              },
+              area: {
+                fromX: startColIndex,
+                toX: startColIndex + newElement.getWidth() / this.gridSetupParams.fixCellRasterWidth,
+                fromY: startRowIndex,
+                toY: startRowIndex + newElement.getHeight() / this.gridSetupParams.fixCellRasterHeight
+              }
+            },
             index: new Vector2(startColIndex + i, startRowIndex + j)
           };
           cells.push(_cell);
         }
       }
-      return {
-        cells: cells,
-        startColIndex: startColIndex,
-        endColIndex: startColIndex + colCount - 1,
-        startRowIndex: startRowIndex,
-        endRowIndex: startRowIndex + rowCount - 1,
-        backside: backside,
-        colCount: colCount,
-        rowCount: rowCount
-      };
+      return cells;
     }
   }, {
     key: "createEmptyCells",
@@ -3333,7 +3411,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getAllUsedCellsInGrid",
     value: function getAllUsedCellsInGrid(backside) {
       var allCellsInGrid = new Array();
-      var curGrid = backside ? this.backGrid : this.frontGrid;
+      var curGrid = backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       for (var i = 0; i < curGrid.length; i++) {
         for (var j = 0; j < curGrid[i].length; j++) {
           if (curGrid[i][j] != undefined) allCellsInGrid.push(curGrid[i][j]);
@@ -3347,9 +3425,12 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
      */
   }, {
     key: "getGridColumnWidth",
-    value: function getGridColumnWidth(columnIndex) {
-      for (var i = 0; i < this.frontGrid[columnIndex].length; i++) {
-        if (this.frontGrid[columnIndex][i]) return this.frontGrid[columnIndex][i].width;
+    value: function getGridColumnWidth(x) {
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      for (var y = 0; x < frontGrid[y].length; x++) {
+        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;
       }
       return 0;
     }
@@ -3361,14 +3442,18 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
      */
   }, {
     key: "getGridColumnHeight",
-    value: function getGridColumnHeight(columnIdex) {
+    value: function getGridColumnHeight(x) {
       var height = 0;
       var firstElementFound = false;
-      if (this.frontGrid.length > columnIdex) {
-        var allCellsInCol = this.frontGrid[columnIdex];
-        for (var i = allCellsInCol.length; i >= 0; i--) {
-          if (!firstElementFound && allCellsInCol[i]) firstElementFound = true;
-          if (firstElementFound) height += allCellsInCol[i] == undefined ? 0 : allCellsInCol[i].height;
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      if (frontGrid.length > x) {
+        var column = frontGrid[x];
+        for (var y = column.length - 1; y >= 0; y--) {
+          var _plannedElement$size$2, _plannedElement2;
+          var cell = column[y];
+          if (!firstElementFound && cell) firstElementFound = true;
+          if (firstElementFound) height += (_plannedElement$size$2 = (_plannedElement2 = cell.plannedElement) === null || _plannedElement2 === void 0 ? void 0 : _plannedElement2.size.height) !== null && _plannedElement$size$2 !== void 0 ? _plannedElement$size$2 : 0;
+          y = cell.plannedElement ? cell.plannedElement.area.fromY - 1 : y - 1;
         }
       }
       return height;
@@ -3381,31 +3466,37 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "deleteElementByIdFromGrid",
     value: function deleteElementByIdFromGrid(elementIdTodelete) {
       var gridCellsToDelete = this.getCellsInGridByElementId(elementIdTodelete);
-      var curGrid = gridCellsToDelete.backside ? this.backGrid : this.frontGrid;
+      var curGrid = gridCellsToDelete.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var rowCountToDelete = 1 + (gridCellsToDelete.endRowIndex - gridCellsToDelete.startRowIndex);
-      var doDeleteCol = false;
-      var startColToDelete = gridCellsToDelete.startColIndex;
-      var colCountToDelete = 1 + (gridCellsToDelete.startColIndex - gridCellsToDelete.endColIndex);
 
       //check if we need to delete all cols
-      if (this.getRowCount(gridCellsToDelete.startColIndex, gridCellsToDelete.backside) == rowCountToDelete) {
-        doDeleteCol = true;
-      }
-      var allUsedCellCurGrid = this.getAllUsedCellsInGrid(gridCellsToDelete.backside);
-      curGrid = new Array();
-      for (var i = 0; i < allUsedCellCurGrid.length; i++) {
-        var curCellFrontGrid = allUsedCellCurGrid[i];
-        if (curCellFrontGrid.plannerElementId != elementIdTodelete) {
-          if (doDeleteCol && curCellFrontGrid.index.x > startColToDelete) {
-            curCellFrontGrid.index.x -= colCountToDelete;
-          }
-          if (!curGrid[curCellFrontGrid.index.x]) {
-            curGrid[curCellFrontGrid.index.x] = [];
-          }
-          curGrid[curCellFrontGrid.index.x][curCellFrontGrid.index.y] = curCellFrontGrid;
-        }
-      }
-      if (gridCellsToDelete.backside) this.backGrid = curGrid;else this.frontGrid = curGrid;
+      if (this.getRowCount(gridCellsToDelete.startColIndex, gridCellsToDelete.backside) == rowCountToDelete) ;
+      gridCellsToDelete.cells.reverse().forEach(function (cell) {
+        curGrid[cell.index.x].splice(cell.index.y, 1);
+        if (curGrid[cell.index.x].length == 0) curGrid.splice(cell.index.x, 1);
+      });
+      var refreshedGrid = [];
+      curGrid.forEach(function (row, x) {
+        refreshedGrid[x] = [];
+        row.forEach(function (column, y) {
+          var area = column.plannedElement.area;
+          refreshedGrid[x][y] = {
+            index: {
+              x: x,
+              y: y
+            },
+            plannedElement: _objectSpread(_objectSpread({}, column.plannedElement), {}, {
+              area: {
+                fromX: x,
+                fromY: y,
+                toX: x + (area.toX - area.fromX),
+                toY: y + (area.toY - area.fromY)
+              }
+            })
+          };
+        });
+      });
+      if (gridCellsToDelete.backside) this.generalPlanningState.grids[1].matrix = refreshedGrid;else this.generalPlanningState.grids[0].matrix = refreshedGrid;
     }
 
     /**
@@ -3418,11 +3509,14 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getPlannerElementAtGridPos",
     value: function getPlannerElementAtGridPos(curXPos, curYPos, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var curElementGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       if (curElementGrid[curXPos] && curElementGrid[curXPos][curYPos]) {
+        var _cell$plannedElement;
         var cell = curElementGrid[curXPos][curYPos];
         if (cell == undefined) return undefined;
-        return this.plannerElements.get(cell.plannerElementId);
+        var elementId = (_cell$plannedElement = cell.plannedElement) === null || _cell$plannedElement === void 0 ? void 0 : _cell$plannedElement.elementId;
+        if (!elementId) return undefined;
+        return this.plannerElements.get(elementId);
       }
       return undefined;
     }
@@ -3436,82 +3530,53 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getCellsInGridByElementId",
     value: function getCellsInGridByElementId(elementId) {
-      var firstCell = undefined;
+      var _this$generalPlanning, _cells$0$plannedEleme, _area$fromX, _area$toX, _area$fromY, _area$toY;
       var onBacksideFound = false;
-      for (var i = 0; i < this.frontGrid.length; i++) {
-        for (var j = 0; j < this.frontGrid[i].length; j++) {
-          var cell = this.frontGrid[i][j];
-          if (cell && cell.plannerElementId == elementId) {
-            firstCell = cell;
-            onBacksideFound = false;
-          }
-        }
-      }
-      if (firstCell == undefined) {
-        for (var i = 0; i < this.backGrid.length; i++) {
-          for (var j = 0; j < this.backGrid[i].length; j++) {
-            var _cell2 = this.backGrid[i][j];
-            if (_cell2 && _cell2.plannerElementId == elementId) {
-              firstCell = _cell2;
-              onBacksideFound = true;
-            }
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      var backGrid = (_this$generalPlanning = this.generalPlanningState.grids[1]) === null || _this$generalPlanning === void 0 ? void 0 : _this$generalPlanning.matrix;
+      var cells = [];
+      frontGrid.forEach(function (x) {
+        return x.forEach(function (y) {
+          var _y$plannedElement;
+          if (((_y$plannedElement = y.plannedElement) === null || _y$plannedElement === void 0 ? void 0 : _y$plannedElement.elementId) == elementId) cells.push(y);
+        });
+      });
+      backGrid === null || backGrid === void 0 || backGrid.forEach(function (x) {
+        return x.forEach(function (y) {
+          var _y$plannedElement2;
+          if (((_y$plannedElement2 = y.plannedElement) === null || _y$plannedElement2 === void 0 ? void 0 : _y$plannedElement2.elementId) == elementId) {
+            cells.push(y);
+            onBacksideFound = true;
           }
-        }
-      }
-      if (firstCell == undefined) return {
-        cells: [],
-        backside: false,
-        startColIndex: -1,
-        endColIndex: -1,
-        startRowIndex: -1,
-        endRowIndex: -1,
+        });
+      });
+      if (cells.length == 0) return {
+        cells: cells,
+        backside: onBacksideFound,
+        startColIndex: 0,
+        endColIndex: 0,
+        startRowIndex: 0,
+        endRowIndex: 0,
         colCount: 0,
         rowCount: 0
       };
-      if (this.gridSetupParams.forceSingleCellPerElement) return {
-        cells: [firstCell],
-        backside: onBacksideFound,
-        startColIndex: firstCell.index.x,
-        endColIndex: firstCell.index.x,
-        startRowIndex: firstCell.index.y,
-        endRowIndex: firstCell.index.y,
-        colCount: 1,
-        rowCount: 1
-      };
-      //Now find the other cells that have the same element
-
-      var curGrid = onBacksideFound ? this.backGrid : this.frontGrid;
-      var cells = [firstCell];
-      var startColIndex = Infinity;
-      var endColIndex = -Infinity;
-      var startRowIndex = Infinity;
-      var endRowIndex = -Infinity;
-      for (var i = firstCell.index.x; i < curGrid.length; i++) {
-        for (var j = firstCell.index.y + 1; j < curGrid.length; j++) {
-          var nextCell = curGrid[i][j];
-          if (nextCell && nextCell.plannerElementId == elementId) {
-            if (i < startColIndex) startColIndex = i;
-            if (i > endColIndex) endColIndex = i;
-            if (j < startRowIndex) startRowIndex = j;
-            if (j > endColIndex) endRowIndex = j;
-            cells.push(nextCell); //also this cell has the same element
-            //TODO
-          } else {
-            break;
-          }
-        }
-      }
+      var area = (_cells$0$plannedEleme = cells[0].plannedElement) === null || _cells$0$plannedEleme === void 0 ? void 0 : _cells$0$plannedEleme.area;
       return {
         cells: cells,
         backside: onBacksideFound,
-        startColIndex: startColIndex,
-        endColIndex: endColIndex,
-        startRowIndex: startRowIndex,
-        endRowIndex: endRowIndex,
-        colCount: endColIndex - startColIndex + 1,
-        rowCount: endRowIndex - startRowIndex + 1
+        startColIndex: (_area$fromX = area === null || area === void 0 ? void 0 : area.fromX) !== null && _area$fromX !== void 0 ? _area$fromX : 0,
+        endColIndex: (_area$toX = area === null || area === void 0 ? void 0 : area.toX) !== null && _area$toX !== void 0 ? _area$toX : 0,
+        startRowIndex: (_area$fromY = area === null || area === void 0 ? void 0 : area.fromY) !== null && _area$fromY !== void 0 ? _area$fromY : 0,
+        endRowIndex: (_area$toY = area === null || area === void 0 ? void 0 : area.toY) !== null && _area$toY !== void 0 ? _area$toY : 0,
+        colCount: area ? area.toX - area.toX : 0,
+        rowCount: area ? area.toY - area.fromY : 0
       };
     }
+  }, {
+    key: "GridSetupParams",
+    set: function set(gridSetupParams) {
+      this.gridSetupParams = gridSetupParams;
+    }
 
     /**
      * This function returns all elementIds that are inside the grid
@@ -3528,11 +3593,12 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var allElements = [];
       for (var i = 0; i < grid.length; i++) {
         for (var j = 0; j < grid[i].length; j++) {
+          var _cell$plannedElement2;
           var cell = grid[i][j];
           if (cell == undefined) continue;
-          if (allElementIds.indexOf(cell.plannerElementId) == -1) {
-            allElementIds.push(cell.plannerElementId);
-            allElements.push(this.plannerElements.get(cell.plannerElementId));
+          if ((_cell$plannedElement2 = cell.plannedElement) !== null && _cell$plannedElement2 !== void 0 && _cell$plannedElement2.elementId && allElementIds.indexOf(cell.plannedElement.elementId) == -1) {
+            allElementIds.push(cell.plannedElement.elementId);
+            allElements.push(this.plannerElements.get(cell.plannedElement.elementId));
           }
         }
       }
@@ -3541,17 +3607,17 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getAllElementsInFrontGrid",
     value: function getAllElementsInFrontGrid() {
-      return this._getAllElementsInGrid(this.frontGrid);
+      return this._getAllElementsInGrid(this.generalPlanningState.grids[0].matrix);
     }
   }, {
     key: "getAllElementsInBackGrid",
     value: function getAllElementsInBackGrid() {
-      return this._getAllElementsInGrid(this.backGrid);
+      return this._getAllElementsInGrid(this.generalPlanningState.grids[1].matrix);
     }
   }, {
     key: "getAllElementsInBacksideModuleGrid",
     value: function getAllElementsInBacksideModuleGrid() {
-      return this._getAllElementsInGrid(this.backGrid).map(function (element) {
+      return this._getAllElementsInGrid(this.generalPlanningState.grids[1].matrix).map(function (element) {
         return element.ElementId;
       });
     }
@@ -3566,24 +3632,31 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getAllElementsInGridSortedbyGridPos",
     value: function getAllElementsInGridSortedbyGridPos() {
+      var _this$generalPlanning2, _this$generalPlanning3;
       var returnElements = [];
       var allCheckedElementIds = [];
-      for (var i = 0; i < this.frontGrid.length; i++) {
-        for (var j = 0; j < this.frontGrid[i].length; j++) {
-          var cell = this.frontGrid[i][j];
-          if (cell && allCheckedElementIds.indexOf(cell.plannerElementId) == -1) {
-            var element = this.getElementById(cell.plannerElementId);
-            allCheckedElementIds.push(cell.plannerElementId);
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      var backGrid = (_this$generalPlanning2 = (_this$generalPlanning3 = this.generalPlanningState.grids[1]) === null || _this$generalPlanning3 === void 0 ? void 0 : _this$generalPlanning3.matrix) !== null && _this$generalPlanning2 !== void 0 ? _this$generalPlanning2 : 0;
+      for (var i = 0; i < frontGrid.length; i++) {
+        for (var j = 0; j < frontGrid[i].length; j++) {
+          var _cell$plannedElement3;
+          var cell = frontGrid[i][j];
+          var elementId = (_cell$plannedElement3 = cell.plannedElement) === null || _cell$plannedElement3 === void 0 ? void 0 : _cell$plannedElement3.elementId;
+          if (cell && elementId && allCheckedElementIds.indexOf(elementId) == -1) {
+            var element = this.getElementById(elementId);
+            allCheckedElementIds.push(elementId);
             returnElements.push(element);
           }
         }
       }
-      for (var i = 0; i < this.backGrid.length; i++) {
-        for (var j = 0; j < this.backGrid[i].length; j++) {
-          var _cell3 = this.backGrid[i][j];
-          if (_cell3 && allCheckedElementIds.indexOf(_cell3.plannerElementId) == -1) {
-            var _element = this.getElementById(_cell3.plannerElementId);
-            allCheckedElementIds.push(_cell3.plannerElementId);
+      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 _element = this.getElementById(_elementId);
+            allCheckedElementIds.push(_elementId);
             returnElements.push(_element);
           }
         }
@@ -3615,9 +3688,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementIsInLastCol",
     value: function getElementIsInLastCol(elementId, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var curElementGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var result = this.getCellsInGridByElementId(elementId);
-      return result.endColIndex + 1 == curElementGrid.length;
+      return result.endColIndex == curElementGrid.length;
     }
 
     /**
@@ -3628,10 +3701,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getElementHasTopElement",
     value: function getElementHasTopElement(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
-      for (var i = result.startColIndex; i <= result.endColIndex; i++) {
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      for (var i = result.startColIndex; i < result.endColIndex; i++) {
         //Check if in one of the top cells is another element
-        if (curGrid[i].length > result.endRowIndex + 1 && curGrid[i][result.endRowIndex + 1]) {
+        if (curGrid[i].length > result.endRowIndex && curGrid[i][result.endRowIndex]) {
           return true;
         }
       }
@@ -3645,19 +3718,18 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getTopElements",
     value: function getTopElements(elementId) {
+      var _curGrid$plannedEleme;
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var neighborPlannerElements = [];
-      var neighborElementIds = [];
-      for (var i = result.startColIndex; i <= result.endColIndex; i++) {
-        if (curGrid[i].length > result.endRowIndex + 1 && curGrid[i][result.endRowIndex + 1]) {
-          var neighborCell = curGrid[i][result.endRowIndex + 1];
-          if (!neighborCell) continue;
-          if (neighborElementIds.indexOf(neighborCell.plannerElementId) == -1) {
-            neighborElementIds.push(neighborCell.plannerElementId);
-            neighborPlannerElements.push(this.plannerElements.get(neighborCell.plannerElementId));
-          }
-        }
+      var plannedElement = result.cells[0].plannedElement;
+      if (!plannedElement) return neighborPlannerElements;
+      var topElement = (_curGrid$plannedEleme = curGrid[plannedElement.area.fromX]) === null || _curGrid$plannedEleme === void 0 ? void 0 : _curGrid$plannedEleme[plannedElement.area.toY];
+      while (topElement) {
+        var element = topElement.plannedElement;
+        if (!element) break;
+        neighborPlannerElements.push(this.plannerElements.get(element.elementId));
+        topElement = curGrid[element.area.fromX][element.area.toY];
       }
       return neighborPlannerElements;
     }
@@ -3670,10 +3742,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getTopRightElement",
     value: function getTopRightElement(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
-      if (curGrid.length > result.endColIndex + 1 && curGrid[result.endColIndex + 1].length > result.endRowIndex + 1 && curGrid[result.endColIndex + 1][result.endRowIndex + 1]) {
-        var cell = curGrid[result.endColIndex + 1][result.endRowIndex + 1];
-        return this.plannerElements.get(cell.plannerElementId);
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      if (curGrid.length > result.endColIndex && curGrid[result.endColIndex].length > result.endRowIndex && curGrid[result.endColIndex][result.endRowIndex]) {
+        var cell = curGrid[result.endColIndex][result.endRowIndex];
+        return this.plannerElements.get(cell.plannedElement.elementId);
       }
       return undefined;
     }
@@ -3686,10 +3758,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getTopLeftElement",
     value: function getTopLeftElement(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
-      if (result.startColIndex > 0 && curGrid[result.startColIndex - 1].length > 0 && curGrid[result.startColIndex - 1][result.endRowIndex + 1]) {
-        var cell = curGrid[result.startColIndex - 1][result.endRowIndex + 1];
-        return this.plannerElements.get(cell.plannerElementId);
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      if (result.startColIndex > 0 && curGrid[result.startColIndex - 1].length > 0 && curGrid[result.startColIndex - 1][result.endRowIndex]) {
+        var cell = curGrid[result.startColIndex - 1][result.endRowIndex];
+        return this.plannerElements.get(cell.plannedElement.elementId);
       }
       return undefined;
     }
@@ -3717,22 +3789,21 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getBottomElements",
     value: function getBottomElements(elementId) {
+      var _curGrid$plannedEleme2;
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
-      var bottomElements = [];
-      var bottomElementIds = [];
-      if (result.startRowIndex - 1 >= 0) {
-        for (var i = result.startColIndex; i <= result.endColIndex; i++) {
-          var cell = curGrid[i][result.startRowIndex - 1];
-          if (cell) {
-            if (bottomElementIds.indexOf(cell.plannerElementId) == -1) {
-              bottomElementIds.push(cell.plannerElementId);
-              bottomElements.push(this.plannerElements.get(cell.plannerElementId));
-            }
-          }
-        }
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      var neighborPlannerElements = [];
+      var plannedElement = result.cells[0].plannedElement;
+      if (!plannedElement) return neighborPlannerElements;
+      var topElement = (_curGrid$plannedEleme2 = curGrid[plannedElement.area.fromX]) === null || _curGrid$plannedEleme2 === void 0 ? void 0 : _curGrid$plannedEleme2[plannedElement.area.fromY - 1];
+      while (topElement) {
+        var _curGrid$element$area;
+        var element = topElement.plannedElement;
+        if (!element) break;
+        neighborPlannerElements.push(this.plannerElements.get(element.elementId));
+        topElement = (_curGrid$element$area = curGrid[element.area.fromX]) === null || _curGrid$element$area === void 0 ? void 0 : _curGrid$element$area[element.area.fromY - 1];
       }
-      return bottomElements;
+      return neighborPlannerElements;
     }
 
     /**
@@ -3743,9 +3814,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getElementHasRightElement",
     value: function getElementHasRightElement(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
-      if (curGrid.length > result.endColIndex + 1 && curGrid[result.endColIndex + 1].length > result.startRowIndex) {
-        var cell = curGrid[result.endColIndex + 1][result.startRowIndex];
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      if (curGrid.length > result.endColIndex && curGrid[result.endColIndex].length > result.startRowIndex) {
+        var cell = curGrid[result.endColIndex][result.startRowIndex];
         if (cell) return true;
       }
       return false;
@@ -3762,18 +3833,18 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getRightElements",
     value: function getRightElements(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var rightElements = [];
       var rightElementIds = [];
-      if (curGrid.length > result.endColIndex + 1) {
-        for (var i = result.startRowIndex; i <= result.endRowIndex; i++) {
-          var cell = curGrid[result.endColIndex + 1][i];
-          if (cell) {
-            if (rightElementIds.indexOf(cell.plannerElementId) == -1) {
-              rightElementIds.push(cell.plannerElementId);
-              rightElements.push(this.plannerElements.get(cell.plannerElementId));
-            }
-          }
+      var element = result.cells[0].plannedElement;
+      if (!element) return rightElements;
+      for (var y = element.area.fromY; y < element.area.toY; y++) {
+        var _curGrid$element$area2, _cell$plannedElement4;
+        var cell = (_curGrid$element$area2 = curGrid[element.area.toX]) === null || _curGrid$element$area2 === void 0 ? void 0 : _curGrid$element$area2[y];
+        var _elementId2 = cell === null || cell === void 0 || (_cell$plannedElement4 = cell.plannedElement) === null || _cell$plannedElement4 === void 0 ? void 0 : _cell$plannedElement4.elementId;
+        if (cell && _elementId2 && rightElementIds.indexOf(_elementId2) == -1) {
+          rightElementIds.push(_elementId2);
+          rightElements.push(this.plannerElements.get(_elementId2));
         }
       }
       return rightElements;
@@ -3787,7 +3858,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getElementHasLeftElement",
     value: function getElementHasLeftElement(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       if (result.startColIndex > 0 && curGrid[result.startColIndex - 1][result.startRowIndex]) {
         return true;
       }
@@ -3805,21 +3876,21 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getLeftElements",
     value: function getLeftElements(elementId) {
       var result = this.getCellsInGridByElementId(elementId);
-      var curGrid = result.backside ? this.backGrid : this.frontGrid;
-      var leftElements = [];
-      var leftElementIds = [];
-      if (result.startColIndex - 1 >= 0) {
-        for (var i = result.startRowIndex; i <= result.endRowIndex; i++) {
-          var cell = curGrid[result.startColIndex - 1][i];
-          if (cell) {
-            if (leftElementIds.indexOf(cell.plannerElementId) == -1) {
-              leftElementIds.push(cell.plannerElementId);
-              leftElements.push(this.plannerElements.get(cell.plannerElementId));
-            }
-          }
+      var curGrid = result.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      var rightElements = [];
+      var rightElementIds = [];
+      var element = result.cells[0].plannedElement;
+      if (!element) return rightElements;
+      for (var y = element.area.fromY; y < element.area.toY; y++) {
+        var _curGrid, _cell$plannedElement5;
+        var cell = (_curGrid = curGrid[element.area.fromX - 1]) === null || _curGrid === void 0 ? void 0 : _curGrid[y];
+        var _elementId3 = cell === null || cell === void 0 || (_cell$plannedElement5 = cell.plannedElement) === null || _cell$plannedElement5 === void 0 ? void 0 : _cell$plannedElement5.elementId;
+        if (cell && _elementId3 && rightElementIds.indexOf(_elementId3) == -1) {
+          rightElementIds.push(_elementId3);
+          rightElements.push(this.plannerElements.get(_elementId3));
         }
       }
-      return leftElements;
+      return rightElements;
     }
 
     /*
@@ -3830,15 +3901,29 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getAllElementsInColumn",
     value: function getAllElementsInColumn(index, fromBackmodul) {
-      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var orderBottomDown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var curGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var allElements = [];
       var allElementIds = [];
-      if (curGrid.length > index) {
+      if (!curGrid[index]) return allElements;
+      if (orderBottomDown) {
         for (var i = 0; i < curGrid[index].length; i++) {
+          var _cell$plannedElement6;
           var cell = curGrid[index][i];
-          if (cell && allElementIds.indexOf(cell.plannerElementId) == -1) {
-            allElementIds.push(cell.plannerElementId);
-            allElements.push(this.plannerElements.get(cell.plannerElementId));
+          var elementId = cell === null || cell === void 0 || (_cell$plannedElement6 = cell.plannedElement) === null || _cell$plannedElement6 === void 0 ? void 0 : _cell$plannedElement6.elementId;
+          if (elementId && cell && allElementIds.indexOf(elementId) == -1) {
+            allElementIds.push(elementId);
+            allElements.push(this.plannerElements.get(elementId));
+          }
+        }
+      } 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) {
+            allElementIds.push(_elementId4);
+            allElements.push(this.plannerElements.get(_elementId4));
           }
         }
       }
@@ -3851,7 +3936,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getColumnCount",
     value: function getColumnCount() {
-      return this.frontGrid.length;
+      return this.generalPlanningState.grids[0].matrix.length;
     }
 
     /**
@@ -3861,7 +3946,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getRowCount",
     value: function getRowCount(colIndex, fromBackmodul) {
-      return fromBackmodul ? this.backGrid[colIndex].length : this.frontGrid[colIndex].length;
+      return fromBackmodul ? this.generalPlanningState.grids[1].matrix[colIndex].length : this.generalPlanningState.grids[0].matrix[colIndex].length;
     }
 
     /*
@@ -3872,15 +3957,17 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getAllElementsInRow",
     value: function getAllElementsInRow(index, fromBackmodul) {
-      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var curGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var allElements = [];
       var allElementIds = [];
       for (var i = 0; i < curGrid.length; i++) {
         if (curGrid[i].length > index) {
+          var _cell$plannedElement7;
           var cell = curGrid[i][index];
-          if (cell && allElementIds.indexOf(cell.plannerElementId) == -1) {
-            allElementIds.push(cell.plannerElementId);
-            allElements.push(this.plannerElements.get(cell.plannerElementId));
+          var elementId = cell === null || cell === void 0 || (_cell$plannedElement7 = cell.plannedElement) === null || _cell$plannedElement7 === void 0 ? void 0 : _cell$plannedElement7.elementId;
+          if (cell && elementId && allElementIds.indexOf(elementId) == -1) {
+            allElementIds.push(elementId);
+            allElements.push(this.plannerElements.get(elementId));
           }
         }
       }
@@ -3894,7 +3981,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getSizeOfHighesRow",
     value: function getSizeOfHighesRow(fromBackmodul) {
-      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var curGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var highestRow = 0;
       for (var i = 0; i < curGrid.length; i++) {
         for (var j = curGrid[i].length; j >= 0; j--) {
@@ -3923,69 +4010,39 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getNeighborElements",
     value: function getNeighborElements(elementId, dir) {
-      var cellPos = this.getCellsInGridByElementId(elementId);
-      var curGrid = cellPos.backside ? this.backGrid : this.frontGrid;
+      var _curGrid$area$toX, _curGrid$area$toX2, _curGrid2, _curGrid3, _curGrid$area$fromX, _topNeighbour$planned, _curGrid$area$fromX2, _downNeighbour$planne;
+      var res = this.getCellsInGridByElementId(elementId);
+      var curGrid = res.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var result = [];
-      var resultPlannerIds = [];
+      var plannedElement = res.cells[0].plannedElement;
+      if (!plannedElement) return result;
       switch (dir) {
-        case 'TOP':
-          for (var i = cellPos.startColIndex; i <= cellPos.endColIndex; i++) {
-            var neighborX = i;
-            var neighborY = cellPos.endRowIndex + 1;
-            if (curGrid[neighborX].length > neighborY) {
-              var neighborCell = curGrid[neighborX][neighborY];
-              if (neighborCell && resultPlannerIds.indexOf(neighborCell.plannerElementId) == -1) {
-                resultPlannerIds.push(neighborCell.plannerElementId);
-                result.push(this.plannerElements.get(neighborCell.plannerElementId));
-              }
-            }
-          }
-          break;
-        case 'DOWN':
-          for (var i = cellPos.startColIndex; i <= cellPos.endColIndex; i++) {
-            var _neighborX = i;
-            var _neighborY = cellPos.startRowIndex - 1;
-            if (_neighborY >= 0) {
-              var _neighborCell = curGrid[_neighborX][_neighborY];
-              if (_neighborCell && resultPlannerIds.indexOf(_neighborCell.plannerElementId) == -1) {
-                resultPlannerIds.push(_neighborCell.plannerElementId);
-                result.push(this.plannerElements.get(_neighborCell.plannerElementId));
-              }
-            }
-          }
+        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));
           break;
         case 'LEFT':
-          for (var i = cellPos.startRowIndex; i <= cellPos.endRowIndex; i++) {
-            var _neighborX2 = cellPos.startColIndex - 1;
-            var _neighborY2 = i;
-            if (_neighborX2 >= 0) {
-              var _neighborCell2 = curGrid[_neighborX2][_neighborY2];
-              if (_neighborCell2 && resultPlannerIds.indexOf(_neighborCell2.plannerElementId) == -1) {
-                resultPlannerIds.push(_neighborCell2.plannerElementId);
-                result.push(this.plannerElements.get(_neighborCell2.plannerElementId));
-              }
-            }
-          }
+          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));
           break;
-        case 'RIGHT':
-          for (var i = cellPos.startRowIndex; i <= cellPos.endRowIndex; i++) {
-            var _neighborX3 = cellPos.startColIndex + 1;
-            var _neighborY3 = i;
-            if (curGrid.length > _neighborX3) {
-              var _neighborCell3 = curGrid[_neighborX3][_neighborY3];
-              if (_neighborCell3 && resultPlannerIds.indexOf(_neighborCell3.plannerElementId) == -1) {
-                resultPlannerIds.push(_neighborCell3.plannerElementId);
-                result.push(this.plannerElements.get(_neighborCell3.plannerElementId));
-              }
-            }
-          }
+        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));
+          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 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;
         case 'BACK':
           if (this.hasActiveBackside) {
-            var plannerElement = this.getPlannerElementAtGridPos(cellPos.startColIndex, cellPos.startRowIndex, true);
+            var plannerElement = this.getPlannerElementAtGridPos(res.startColIndex, res.startRowIndex, true);
             if (plannerElement != undefined) result = [plannerElement];
           }
-          break;
       }
       return result;
     }
@@ -4041,22 +4098,29 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var depth = 0;
       var height = 0;
       var checkedElementIds = [];
-      for (var i = 0; i < this.frontGrid.length; i++) {
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      for (var x = 0; x < frontGrid.length;) {
+        var _row$0$plannedElement, _row$0$plannedElement2;
         var curHeight = 0;
-        for (var j = 0; j < this.frontGrid[i].length; j++) {
-          var cell = this.frontGrid[i][j];
-          if (cell && checkedElementIds.indexOf(cell.plannerElementId) == -1) {
-            curHeight += this.plannerElements.get(cell.plannerElementId).getHeight();
-            if (i == 0 && j == 0) depth = this.plannerElements.get(cell.plannerElementId).getDepth();
+        var row = frontGrid[x];
+        for (var y = 0; y < row.length;) {
+          var _cell4, _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;
+          if (elementId && cell && checkedElementIds.indexOf(elementId) == -1) {
+            curHeight += this.plannerElements.get(elementId).getHeight();
+            if (x == 0 && y == 0) depth = this.plannerElements.get(elementId).getDepth();
           }
+          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;
         }
         if (curHeight > height) height = curHeight;
-        var curWidth = this.getGridColumnWidth(i);
-        if (correctSizeSystem4 && i > 0) {
+        var curWidth = this.getGridColumnWidth(x);
+        if (correctSizeSystem4 && x > 0) {
           //Correct width
           if (curWidth == 77.9) curWidth = 75;else if (curWidth == 40.4) curWidth = 37.5;else if (curWidth == 21.7) curWidth = 18.75;
         }
         width += curWidth;
+        x = (_row$0$plannedElement = (_row$0$plannedElement2 = row[0].plannedElement) === null || _row$0$plannedElement2 === void 0 ? void 0 : _row$0$plannedElement2.area.toX) !== null && _row$0$plannedElement !== void 0 ? _row$0$plannedElement : x + 1;
       }
       if (this.hasActiveBackside) depth *= 2;
       return new Vector3(width, height, depth);
@@ -4069,21 +4133,26 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getHighestElementsPerSeries",
     value: function getHighestElementsPerSeries() {
+      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 lastHeight = -1;
-      for (var idx = 0; idx < this.getColumnCount(); idx++) {
-        var row = this.frontGrid[idx];
-        var height = row.reduce(function (added, column) {
-          return column.height + added;
-        }, 0);
-        if (height == lastHeight) {
+      for (var x = 0; x < this.getColumnCount();) {
+        var row = this.generalPlanningState.grids[0].matrix[x];
+        var height = 0;
+        for (var y = 0; y < row.length;) {
+          var element = row[y].plannedElement;
+          height += element.size.height;
+          y = element.area.toY;
+        }
+        if (Math.round(height) == Math.round(lastHeight) || onBottom) {
           if (!result[result.length - 1]) result.push([]);
-          result[result.length - 1].push(this.getPlannerElementAtGridPos(idx, row.length - 1, false));
+          result[result.length - 1].push(this.getPlannerElementAtGridPos(x, row.length - 1, false));
         } else {
-          result.push([this.getPlannerElementAtGridPos(idx, row.length - 1, false)]);
+          result.push([this.getPlannerElementAtGridPos(x, row.length - 1, false)]);
         }
         lastHeight = height;
+        x = row[row.length - 1].plannedElement ? row[row.length - 1].plannedElement.area.toX : x + 1;
       }
       return result;
     }
@@ -4115,6 +4184,60 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       };
     }
 
+    /**
+     * Get all the Elements need  to fill up for the copy of Element x fxe:
+     *
+     * [4]   ->
+     * [3]
+     * [2]
+     * [0][1]
+     *
+     * returns element 4, 3 and 2 because those are needed to copy in order
+     * for the copy of element 4 to not float
+     */
+  }, {
+    key: "getAllElementsToFillUp",
+    value: function getAllElementsToFillUp(elementId, dir) {
+      var _this = 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,
+        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;
+      }
+      // if there is nothing to fill we copy everyting
+      return {
+        elements: plannerIdsToFill.length == 0 ? existingPlannerIds : plannerIdsToFill,
+        backside: curPos.backside
+      };
+    }
+
     /**
      * Returns all Elements that are under the specified element
      * AAAE
@@ -4131,13 +4254,15 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         elements: [],
         backside: false
       };
-      var curGrid = curPos.backside ? this.backGrid : this.frontGrid;
+      var curGrid = curPos.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var resultPlannerIds = [];
-      for (var i = curPos.startColIndex; i <= curPos.endColIndex; i++) {
+      for (var i = curPos.startColIndex; i < curPos.endColIndex; i++) {
         for (var j = curPos.startRowIndex--; j >= 0; j--) {
+          var _neighborCell$planned;
           var neighborCell = curGrid[i][j];
-          if (neighborCell && resultPlannerIds.indexOf(neighborCell.plannerElementId) == -1) {
-            resultPlannerIds.push(neighborCell.plannerElementId);
+          var _elementId5 = neighborCell === null || neighborCell === void 0 || (_neighborCell$planned = neighborCell.plannedElement) === null || _neighborCell$planned === void 0 ? void 0 : _neighborCell$planned.elementId;
+          if (neighborCell && _elementId5 && resultPlannerIds.indexOf(_elementId5) == -1) {
+            resultPlannerIds.push(_elementId5);
           }
         }
       }
@@ -4173,56 +4298,78 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     }
   }, {
     key: "prepareGridForColCopy",
-    value: function prepareGridForColCopy(elementId, copyIndex) {
-      if (copyIndex.y > 0) return;
+    value: function prepareGridForColCopy(elementId, relativeCopyIndex) {
+      var _this$generalPlanning4, _this$generalPlanning5, _frontGrid;
+      if (relativeCopyIndex.y > 0) return;
       var elementToCopyPos = this.getCellsInGridByElementId(elementId);
-      this.plannerElements.get(elementId);
-      //Kopiere das Grid nach rechts abhängig von der Breite des aktuellen Elementes
-      //now correct all indices in all cells:
-
-      var copyStartIndex = 0;
-      if (copyIndex.x > 0) copyStartIndex = elementToCopyPos.endColIndex + 1;else if (copyIndex.x < 0) copyStartIndex = elementToCopyPos.startColIndex;
-      var copyIndexCount = 1 + (elementToCopyPos.endColIndex - elementToCopyPos.startColIndex);
-      var allUsedCellsFrontGrid = this.getAllUsedCellsInGrid(false);
-      this.frontGrid = new Array();
-      for (var i = 0; i < allUsedCellsFrontGrid.length; i++) {
-        var curCellFrontGrid = allUsedCellsFrontGrid[i];
-        if (curCellFrontGrid.index.x >= copyStartIndex) {
-          curCellFrontGrid.index.x += copyIndexCount;
-        }
-        if (!this.frontGrid[curCellFrontGrid.index.x]) {
-          this.frontGrid[curCellFrontGrid.index.x] = [];
-        }
-        this.frontGrid[curCellFrontGrid.index.x][curCellFrontGrid.index.y] = curCellFrontGrid;
-      }
-      //Init empty cols
-      for (var i = copyStartIndex; i < copyStartIndex + copyIndexCount; i++) {
-        if (!this.frontGrid[i]) this.frontGrid[i] = [];
+      var copyDirectionIsRight = relativeCopyIndex.x > 0;
+      // We add the relativeCopyIndex only if positive otherwise the whole grid get's
+      // shifted to the right bexause can`t got negative
+      var element = elementToCopyPos.cells[0].plannedElement;
+      var absoluteCopyIndex = {
+        x: element.area.toX - 1 + relativeCopyIndex.x,
+        y: element.area.fromY + relativeCopyIndex.y
+      };
+      if (relativeCopyIndex.x < 0) absoluteCopyIndex.x = elementToCopyPos.cells[0].plannedElement.area.fromX - 1;
+
+      // check if the side we copy to is already blocked
+      // if blocked and we copy to the left the grid get's shifted so the copy
+      // get's the index of the copied
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      var backGrid = (_this$generalPlanning4 = (_this$generalPlanning5 = this.generalPlanningState.grids[1]) === null || _this$generalPlanning5 === void 0 ? void 0 : _this$generalPlanning5.matrix) !== null && _this$generalPlanning4 !== void 0 ? _this$generalPlanning4 : 0;
+      var widthCopyArea = element.area.toX - element.area.fromX;
+      var isBlocked = (_frontGrid = frontGrid[elementToCopyPos.cells[0].index.x + relativeCopyIndex.x]) === null || _frontGrid === void 0 ? void 0 : _frontGrid[elementToCopyPos.cells[0].index.y];
+      if (absoluteCopyIndex.x == -1 || isBlocked && !copyDirectionIsRight) absoluteCopyIndex.x -= relativeCopyIndex.x;
+
+      // new copy logic fill up like this:
+      // [][] ->   |  [][][]
+      // [][]      |  [][][]
+      // [][][]    |  [][][]
+      // not like this (old logic)
+      // [][] ->   |  [][][]
+      // [][]      |  [][][]
+      // [][][]    |  [][][][]
+      function moveGrid(plannedCells) {
+        var grid = new Array();
+        var rightNeighbour = plannedCells.filter(function (c) {
+          return c.index.x == element.area.toX;
+        });
+        var rightNeighbourOfCopy = rightNeighbour.find(function (c) {
+          return c.index.y == absoluteCopyIndex.y;
+        });
+        var leftNeighbour = plannedCells.filter(function (c) {
+          return c.index.x == element.area.fromX - 1;
+        });
+        var leftNeighbourOfCopy = leftNeighbour.find(function (neighbour) {
+          return neighbour.index.y == absoluteCopyIndex.y;
+        });
+        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)) {
+            cell.index.x += widthCopyArea;
+            cell.plannedElement.area.fromX += widthCopyArea;
+            cell.plannedElement.area.toX += widthCopyArea;
+          }
+          if (!grid[cell.index.x]) grid[cell.index.x] = [];
+          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) {
-        var allUsedCellsBackGrid = this.getAllUsedCellsInGrid(true);
-        this.backGrid = new Array();
-        for (var i = 0; i < allUsedCellsBackGrid.length; i++) {
-          var curCellBackGrid = allUsedCellsBackGrid[i];
-          if (curCellBackGrid.index.x >= copyStartIndex) {
-            curCellBackGrid.index.x += copyIndexCount;
-          }
-          if (!this.backGrid[curCellBackGrid.index.x]) {
-            this.backGrid[curCellBackGrid.index.x] = [];
-          }
-          this.backGrid[curCellBackGrid.index.x][curCellBackGrid.index.y] = curCellBackGrid;
-        }
-
-        //Init empty cols
-        for (var i = copyStartIndex; i < copyStartIndex + copyIndexCount; i++) {
-          if (!this.backGrid[i]) this.backGrid[i] = [];
-        }
+        backGrid = moveGrid(this.getAllUsedCellsInGrid(true));
+        for (var _x2 = 0; _x2 < widthCopyArea; _x2++) if (!backGrid[absoluteCopyIndex.x + _x2]) backGrid[absoluteCopyIndex.x + _x2] = [];
+        this.generalPlanningState.grids[1].matrix = backGrid;
       }
     }
   }, {
     key: "prepareGridForBackSideCopy",
     value: function prepareGridForBackSideCopy() {
-      this.backGrid = new Array();
+      this.generalPlanningState.grids[1] = {
+        matrix: [[]]
+      };
       this.hasActiveBackside = true;
     }
 
@@ -4236,11 +4383,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "addElementAtGridPos",
     value: function addElementAtGridPos(newElement, col, row, fromBackmodul) {
-      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
-      var result = this.createNewCells(newElement, col, row, fromBackmodul);
-      for (var i = 0; i < result.cells.length; i++) {
-        var cell = result.cells[i];
-        // Prüfen, ob das innere Array existiert, sonst erstellen
+      var curGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      var cells = this.createNewCells(newElement, col, row, fromBackmodul);
+      for (var i = 0; i < cells.length; i++) {
+        var cell = cells[i];
         if (!curGrid[cell.index.x]) {
           curGrid[cell.index.x] = [];
         }
@@ -4249,6 +4395,67 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       this.plannerElements.set(newElement.getElementId(), newElement);
       if (fromBackmodul) this.hasActiveBackside = true;
     }
+    /**
+     *  move element
+     * @param elementIDToMove
+     * @param copyInfo
+     */
+  }, {
+    key: "moveElementAsCopy",
+    value: function moveElementAsCopy(elementId, absoluteIndex) {
+      var elementData = this.plannerElements.get(elementId);
+      var deletedCells = this.getCellsInGridByElementId(elementId);
+      if (!elementData) return;
+      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
+      ) {
+        var dir = deletedCells.endColIndex >= absoluteIndex.x;
+        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 = [];
+        var element = cells[0].plannedElement;
+        curGrid.forEach(function (_, x) {
+          _.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 (!movedGrid[newX]) movedGrid[newX] = [];
+            var cellElem = curGrid[x][y].plannedElement;
+            var newCell = {
+              plannedElement: _objectSpread(_objectSpread({}, cellElem), {}, {
+                area: {
+                  fromX: newX,
+                  toX: cellElem.area.toX + shiftX,
+                  fromY: cellElem.area.fromY,
+                  toY: cellElem.area.toY
+                }
+              }),
+              index: {
+                x: newX,
+                y: y
+              }
+            };
+            movedGrid[newX][y] = newCell;
+          });
+        });
+        curGrid = movedGrid;
+      } else {
+        if (absoluteIndex.x > deletedCells.startColIndex && absoluteIndex.y == deletedCells.startRowIndex) absoluteIndex.x -= deletedCells.endColIndex - deletedCells.startColIndex;
+        cells = this.createNewCells(elementData, absoluteIndex.x, absoluteIndex.y, false);
+      }
+      for (var i = 0; i < cells.length; i++) {
+        if (!curGrid[cells[i].index.x]) curGrid[cells[i].index.x] = [];
+        curGrid[cells[i].index.x][cells[i].index.y] = cells[i];
+      }
+      this.plannerElements.set(elementId, elementData);
+      this.generalPlanningState.grids[0].matrix = curGrid;
+    }
 
     /**
      * Assume that the grid is already prepared and there is enough empty space for the new element.
@@ -4260,22 +4467,27 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "addElementAsCopy",
     value: function addElementAsCopy(copiedElementId, newElement, copyIndex) {
       var curPos = this.getCellsInGridByElementId(copiedElementId);
+      var area = curPos.cells[0].plannedElement.area;
       var cellIndex = {
-        x: curPos.endColIndex + copyIndex.x,
-        y: curPos.endRowIndex + copyIndex.y
+        x: area.fromX,
+        y: area.fromY
       };
+      if (copyIndex.x > 0) cellIndex.x = area.toX - 1 + copyIndex.x;else if (copyIndex.x < 0) cellIndex.x = area.fromX - (area.toX - area.fromX);else if (copyIndex.y > 0) cellIndex.y = area.toY - 1 + copyIndex.y;
       var backsideForCopy = copyIndex.z == -1 || curPos.backside == true;
-      var newCellInfos = this.createNewCells(newElement, cellIndex.x, cellIndex.y, backsideForCopy);
-      var curGrid = backsideForCopy ? this.backGrid : this.frontGrid;
-      for (var i = 0; i < newCellInfos.cells.length; i++) {
-        if (!curGrid[newCellInfos.cells[i].index.x]) curGrid[newCellInfos.cells[i].index.x] = [];
-        curGrid[newCellInfos.cells[i].index.x][newCellInfos.cells[i].index.y] = newCellInfos.cells[i];
+      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] = [];
+        curGrid[cells[i].index.x][cells[i].index.y] = cells[i];
       }
       this.plannerElements.set(newElement.getElementId(), newElement);
     }
 
     /**
-     * This function deletes an Element from the grid.
+     * This function deletes an Element from the grid.ShaderMaterial
      * If backsideModule is active, than the oppsite Element is deleted as well
      * If the boxPlanner_backside switch deletion type is set, do not delete the opposite element
      * If the last element in col was deleted, do delete whole col.
@@ -4296,12 +4508,75 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "updateGridElementDimensions",
     value: function updateGridElementDimensions(elementId, elementData) {
+      var _this2 = this;
       if (!elementData) return;
       var res = this.getCellsInGridByElementId(elementId);
+      var scpe = this.gridSetupParams.forceSingleCellPerElement;
       res.cells.forEach(function (cell) {
-        cell.width = elementData.width;
-        cell.height = elementData.height;
+        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
+        };
       });
+      if (scpe) return;
+      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
+                };
+                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), {}, {
+                index: {
+                  x: x,
+                  y: y
+                },
+                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)
+                  }
+                })
+              });
+            },
+            _ret;
+          for (var y = 0; y < area.toY; y++) {
+            _ret = _loop2(y);
+            if (_ret === 0) continue;
+          }
+        }
+      });
+      if (res.backside) this.generalPlanningState.grids[1].matrix = newGrid;else this.generalPlanningState.grids[0].matrix = newGrid;
     }
 
     /**
@@ -4311,6 +4586,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "updateWorldPosOfElements",
     value: function updateWorldPosOfElements() {
+      var _this$generalPlanning6, _this$generalPlanning7;
       //First remove all docking Point relation information
       var _iterator = _createForOfIteratorHelper(this.plannerElements.values()),
         _step;
@@ -4328,45 +4604,45 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       //First remove all docking Point relation information
 
       var allCheckedElementIds = [];
-      for (var i = 0; i < this.frontGrid.length; i++) {
-        for (var j = 0; j < this.frontGrid[i].length; j++) {
-          var cell = this.frontGrid[i][j];
-          if (allCheckedElementIds.indexOf(cell.plannerElementId) == -1) {
-            var element = this.plannerElements.get(cell.plannerElementId);
-            allCheckedElementIds.push(cell.plannerElementId);
-            var topNeighbors = this.getNeighborElements(cell.plannerElementId, 'TOP');
-            var rightNeighbors = this.getNeighborElements(cell.plannerElementId, 'RIGHT');
-            for (var n = 0; n < topNeighbors.length; n++) {
-              dockingPointHandlerInst.tryDockElement(element, 'AVO', [topNeighbors[n]]);
-            }
-            for (var n = 0; n < rightNeighbors.length; n++) {
-              dockingPointHandlerInst.tryDockElement(element, 'AVR', [rightNeighbors[n]]);
-            }
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      var backGrid = (_this$generalPlanning6 = (_this$generalPlanning7 = this.generalPlanningState.grids[1]) === null || _this$generalPlanning7 === void 0 ? void 0 : _this$generalPlanning7.matrix) !== null && _this$generalPlanning6 !== void 0 ? _this$generalPlanning6 : [];
+      for (var x = 0; x < frontGrid.length; x++) {
+        for (var y = 0; y < frontGrid[x].length; y++) {
+          var _cell$plannedElement10;
+          var cell = frontGrid[x][y];
+          var elementId = cell === null || cell === void 0 || (_cell$plannedElement10 = cell.plannedElement) === null || _cell$plannedElement10 === void 0 ? void 0 : _cell$plannedElement10.elementId;
+          if (elementId && allCheckedElementIds.indexOf(elementId) == -1) {
+            var element = this.plannerElements.get(elementId);
+            allCheckedElementIds.push(elementId);
+            var topNeighbors = this.getNeighborElements(elementId, 'TOP');
+            var rightNeighbors = this.getNeighborElements(elementId, 'RIGHT');
+            var leftNeighbors = this.getNeighborElements(elementId, 'LEFT');
+            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]]);
             element.PosNr = posNr;
             posNr++;
           }
         }
       }
-      for (var i = 0; i < this.backGrid.length; i++) {
-        for (var j = 0; j < this.backGrid[i].length; j++) {
-          var _cell4 = this.backGrid[i][j];
-          if (allCheckedElementIds.indexOf(_cell4.plannerElementId) == -1) {
-            var _element2 = this.plannerElements.get(_cell4.plannerElementId);
-            allCheckedElementIds.push(_cell4.plannerElementId);
-            var cellFrontGrid = this.frontGrid[i][j];
-            var elementFrontGrid = this.plannerElements.get(cellFrontGrid.plannerElementId);
+      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;
+          if (_elementId6 && allCheckedElementIds.indexOf(_elementId6) == -1) {
+            var _element2 = this.plannerElements.get(_elementId6);
+            allCheckedElementIds.push(_elementId6);
+            var frontCell = frontGrid[i][j];
+            var elementFrontGrid = this.plannerElements.get(frontCell.plannedElement.elementId);
             if (elementFrontGrid) {
               var targetDPFrontGrid = elementFrontGrid === null || elementFrontGrid === void 0 ? void 0 : elementFrontGrid.getDockingPointById('AVO_AVO_2_IL');
               if (!targetDPFrontGrid) LOG$1.error(new DivaError('Error Loading DockingPoint AVO_2 for plannerElement'));else if (_element2) dockingPointHandlerInst.tryDockElementToDP(_element2, elementFrontGrid, targetDPFrontGrid);
             }
-            var _topNeighbors = this.getNeighborElements(_cell4.plannerElementId, 'TOP');
-            var _rightNeighbors = this.getNeighborElements(_cell4.plannerElementId, 'RIGHT');
-            for (var n = 0; n < _topNeighbors.length; n++) {
-              dockingPointHandlerInst.tryDockElement(_element2, 'AVO', [_topNeighbors[n]]);
-            }
-            for (var n = 0; n < _rightNeighbors.length; n++) {
-              dockingPointHandlerInst.tryDockElement(_element2, 'AVL', [_rightNeighbors[n]]);
-            }
+            var _topNeighbors = this.getNeighborElements(_elementId6, 'TOP');
+            var _rightNeighbors = this.getNeighborElements(_elementId6, 'RIGHT');
+            if (_topNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(_element2, 'AVO', [_topNeighbors[0]]);
+            if (_rightNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(_element2, 'AVL', [_rightNeighbors[0]]);
             _element2.PosNr = posNr;
             posNr++;
           }
@@ -4394,10 +4670,10 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         _iterator2.f();
       }
       this.plannerElements.clear();
-      this.frontGrid = new Array();
+      this.generalPlanningState.grids[0].matrix = [];
       if (this.hasActiveBackside) {
         this.hasActiveBackside = false;
-        this.backGrid = new Array();
+        this.generalPlanningState.grids[1].matrix = [];
       }
     }
 
@@ -4423,7 +4699,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         _iterator3.f();
       }
       allElements = [];
-      this.backGrid = new Array();
+      this.generalPlanningState.grids[1].matrix = [];
     }
   }, {
     key: "getPlannerHasActiveBackside",
@@ -4438,26 +4714,31 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getBoundingBox",
     value: function getBoundingBox() {
+      var _frontGrid$;
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      var element = frontGrid === null || frontGrid === void 0 || (_frontGrid$ = frontGrid[0]) === null || _frontGrid$ === void 0 || (_frontGrid$ = _frontGrid$[0]) === null || _frontGrid$ === void 0 ? void 0 : _frontGrid$.plannedElement;
       var height = 0;
       var minX = 0;
       var maxX = 0;
       var curX = 0;
       var minZ = 0;
-      var curZ = this.plannerElements.get(this.frontGrid[0][0].plannerElementId).getDepth();
+      var curZ = element ? element.size.depth : 0;
       var maxZ = 0;
       var curDir;
       curDir = 'RIGHT';
       var allCheckedElementIds = [];
-      for (var i = 0; i < this.frontGrid.length; i++) {
-        var groundCell = this.frontGrid[i][0];
+      for (var i = 0; i < frontGrid.length; i++) {
+        var _groundCell$plannedEl;
+        var groundCell = frontGrid[i][0];
         if (!groundCell) break; //if on the lowest position the cell is empty, the grid ist finished - no wholes are allowed
 
-        if (allCheckedElementIds.indexOf(groundCell.plannerElementId) == -1) {
-          allCheckedElementIds.push(groundCell.plannerElementId);
-          var groundElement = this.plannerElements.get(groundCell.plannerElementId);
+        var elementId = (_groundCell$plannedEl = groundCell.plannedElement) === null || _groundCell$plannedEl === void 0 ? void 0 : _groundCell$plannedEl.elementId;
+        if (elementId && allCheckedElementIds.indexOf(elementId) == -1) {
+          allCheckedElementIds.push(elementId);
+          var groundElement = this.plannerElements.get(elementId);
           if (!groundElement) continue;
           //Check if the col has a corner.
-          var elementOption = this.getValueOfOptionOfArticle(groundCell.plannerElementId, 'OPTELEMENT');
+          var elementOption = this.getValueOfOptionOfArticle(elementId, 'OPTELEMENT');
           if (curDir == 'RIGHT') {
             curX += groundElement.getWidth();
           } else if (curDir == 'FRONT') {
@@ -4526,7 +4807,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         var _curGrid$x;
         return ((_curGrid$x = curGrid[x]) === null || _curGrid$x === void 0 ? void 0 : _curGrid$x[y]) === undefined;
       };
-      var curGrid = elementCells.backside ? this.backGrid : this.frontGrid;
+      var curGrid = elementCells.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var _iterator4 = _createForOfIteratorHelper(this.plannerElements.keys()),
         _step4;
       try {
@@ -4545,7 +4826,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
 
                 //Now we found a possible place
 
-                var locationInformation = this.createLocationInformation(element, elementCells.backside, this.createEmptyCells(otherElementCells.startColIndex, otherElementCells.endRowIndex + 1, otherElementCells.startColIndex, otherElementCells.endRowIndex + 1, element.getWidth(), element.getHeight()), otherElementCells.startColIndex, otherElementCells.endRowIndex + 1, 1, 1);
+                var locationInformation = this.createLocationInformation(element, elementCells.backside, this.createEmptyCells(otherElementCells.cells[0].plannedElement.area.fromX, otherElementCells.cells[0].plannedElement.area.toX, otherElementCells.cells[0].plannedElement.area.fromY, otherElementCells.cells[0].plannedElement.area.toY + 1, element.getWidth(), element.getHeight()), otherElementCells.cells[0].plannedElement.area.fromX, otherElementCells.cells[0].plannedElement.area.toX, 1, 1);
                 allFreeMoveLocations.push(locationInformation);
               }
             } else {
@@ -4554,7 +4835,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
               var _otherElementCells = this.getCellsInGridByElementId(otherElementId);
               var freeStartTopColIndex = -1;
               var freeEndTopColIndex = -1;
-              var topRow = _otherElementCells.endRowIndex + 1;
+              var topRow = _otherElementCells.cells[0].plannedElement.area.toY + 1;
               for (var x = _otherElementCells.startColIndex; x <= _otherElementCells.startColIndex + _otherElementCells.colCount - 1; x++) {
                 var freeSpaceFound = false;
                 if (isEmptyCell(x, topRow)) {
@@ -4627,7 +4908,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       }
 
       // Determine the grid to work with (front or back) based on the element's location
-      var curGrid = elementCells.backside ? this.backGrid : this.frontGrid;
+      var curGrid = elementCells.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
 
       // Get the boundaries of the element in the grid
       var startColIndex = elementCells.startColIndex;
@@ -4686,9 +4967,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             var targetRowIndex = endRowIndex + 1;
             var _copyPossible = false;
             // Iterate through columns within the element's width
-            for (var _x = endColIndex; _x >= startColIndex; _x--) {
-              if (isValidCell(_x, targetRowIndex)) {
-                copyStartColIndex = _x;
+            for (var _x3 = endColIndex; _x3 >= startColIndex; _x3--) {
+              if (isValidCell(_x3, targetRowIndex)) {
+                copyStartColIndex = _x3;
                 _copyPossible = true;
               }
             }
@@ -4702,29 +4983,29 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         case 'RIGHT':
           {
             // Target column to the left of the element
-            var _targetColIndex = endColIndex + 1;
+            var _targetColIndex = endColIndex;
             var _copyPossible2 = false;
             // Iterate through rows within the element's height
-            for (var _y = startRowIndex; _y <= endRowIndex; _y++) {
-              if (isValidCell(_targetColIndex, _y)) {
-                copyStartRowIndex = _y;
+            for (var _y2 = startRowIndex; _y2 <= endRowIndex; _y2++) {
+              if (isValidCell(_targetColIndex, _y2)) {
+                copyStartRowIndex = _y2;
                 _copyPossible2 = true;
                 break;
               }
             }
             if (!_copyPossible2) return undefined;
             _copyPossible2 = false;
-            for (var _x2 = endColIndex + 1; _x2 <= endColIndex + elementCells.colCount; _x2++) {
-              if (isValidCell(_x2, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x2, copyStartRowIndex - 1))) {
+            for (var _x4 = endColIndex; _x4 <= endColIndex + elementCells.colCount; _x4++) {
+              if (isValidCell(_x4, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x4, copyStartRowIndex - 1))) {
                 //check also for overhang
-                copyEndColIndex = _x2;
+                copyEndColIndex = _x4;
                 _copyPossible2 = true;
               } else {
                 break; //when you find one situation where it is not valid skip outside.
               }
             }
             if (!_copyPossible2) return undefined;
-            copyStartColIndex = endColIndex + 1;
+            copyStartColIndex = endColIndex;
             copyEndRowIndex = endRowIndex;
             freeCells = this.createEmptyCells(copyStartColIndex, copyStartRowIndex, copyEndColIndex, copyEndRowIndex, element.getWidth(), element.getHeight());
             break;
@@ -4741,7 +5022,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "createLocationInformation",
     value: function createLocationInformation(element, fromBackside, cells, cellsStartColIndex, cellsStartRowIndex, cellsColCount, cellsRowCount) {
-      var curGrid = fromBackside ? this.backGrid : this.frontGrid;
+      var curGrid = fromBackside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var elementLocation = {
         cells: cells,
         widthPerCell: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterWidth : element.getWidth(),
@@ -4757,14 +5038,16 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       } else {
         var distToOriginX = 0;
         for (var i = 0; i < cellsStartColIndex; i++) {
-          distToOriginX += curGrid[i][0].width;
+          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;
         }
         if (cellsStartColIndex < 0) {
           distToOriginX = -element.getWidth();
         }
         var distToOriginY = 0;
         for (var i = 0; i < cellsStartRowIndex; i++) {
-          distToOriginY += curGrid[cellsStartColIndex][i].height;
+          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;
         }
         elementLocation.startIndexWorldPos = new Vector2(distToOriginX, distToOriginY);
       }
@@ -4780,7 +5063,8 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       for (var i = 0; i < allElements.length; i++) {
         var element = allElements[i];
         var elementCells = this.getCellsInGridByElementId(element.getElementId());
-        var elementLocation = this.createLocationInformation(element, elementCells.backside, elementCells.cells, elementCells.startColIndex, elementCells.startRowIndex, elementCells.colCount, elementCells.rowCount);
+        var area = elementCells.cells[0].plannedElement.area;
+        var elementLocation = this.createLocationInformation(element, elementCells.backside, elementCells.cells, area.fromX, area.toX, area.fromY, area.toY);
         var planningLeftLocation = this.getFreePlanningLocation(element.getElementId(), 'LEFT');
         var planningRightLocation = this.getFreePlanningLocation(element.getElementId(), 'RIGHT');
         var planningTopLocation = this.getFreePlanningLocation(element.getElementId(), 'TOP');
@@ -4806,10 +5090,20 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     }
   }, {
     key: "getGeneralPlanningState",
-    value: function getGeneralPlanningState(selectedElementId) {
-      var matrix = [];
-      var selectedElement = undefined;
-      var plannedElements = Array.from(this.plannerElements.values()).map(function (p) {
+    value: function getGeneralPlanningState() {
+      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;
+      // fill to equal size
+      var matrix = this.generalPlanningState.grids[0].matrix;
+      var matrixWithMovables = [];
+      var maxWidth = matrix.length;
+      var maxHeight = 0;
+      matrix.forEach(function (x) {
+        if (x.length > maxHeight) maxHeight = x.length;
+      });
+      Array.from(this.plannerElements.values()).map(function (p) {
         return {
           basketId: p.getBasketId(),
           elementId: p.getElementId(),
@@ -4827,86 +5121,75 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           }
         };
       });
-      for (var i = 0; i < this.frontGrid.length; i++) {
-        matrix.push([]);
-        var frontGridRow = this.frontGrid[i];
-        var _loop = function _loop() {
-          var cell = frontGridRow[j];
-          if (cell) {
-            var plannedElement = plannedElements.find(function (p) {
-              return p.elementId === cell.plannerElementId;
-            });
-            if (plannedElement) {
-              if (plannedElement.area.fromX === undefined || plannedElement.area.fromX > cell.index.x) plannedElement.area.fromX = cell.index.x;
-              if (plannedElement.area.toX === undefined || plannedElement.area.toX < cell.index.x) plannedElement.area.toX = cell.index.x;
-              if (plannedElement.area.fromY === undefined || plannedElement.area.fromY > cell.index.y) plannedElement.area.fromY = cell.index.y;
-              if (plannedElement.area.toY === undefined || plannedElement.area.toY < cell.index.y) plannedElement.area.toY = cell.index.y;
-            }
-            matrix[i].push({
-              index: cell.index,
-              plannedElement: plannedElement
-            });
-          }
-        };
-        for (var j = 0; j < frontGridRow.length; j++) {
-          _loop();
-        }
-      }
-
-      // Fill matrix rows to equal length
-      var maxLength = Math.max.apply(Math, _toConsumableArray(matrix.map(function (row) {
-        return row.length;
-      })));
-      matrix.forEach(function (row) {
-        while (row.length < maxLength) {
-          var _row$;
-          var lastCell = row[row.length - 1];
-          var newY = lastCell ? lastCell.index.y + 1 : 0;
-          row.push({
-            index: new Vector2(((_row$ = row[0]) === null || _row$ === void 0 ? void 0 : _row$.index.x) || 0, newY),
-            plannedElement: undefined
-          });
-        }
-      });
-      var selectedPlannedElement = selectedElementId ? plannedElements.find(function (p) {
-        return p.elementId === selectedElementId;
-      }) : undefined;
-      if (selectedPlannedElement) {
-        //add the free let planningLeftLocation = this.getFreePlanningLocation(element.getElementId(), 'LEFT');
-        var planningLeftLocation = this.getFreePlanningLocation(selectedPlannedElement.elementId, 'LEFT');
-        var planningRightLocation = this.getFreePlanningLocation(selectedPlannedElement.elementId, 'RIGHT');
-        var planningTopLocation = this.getFreePlanningLocation(selectedPlannedElement.elementId, 'TOP');
-        var fixedPositionRules = [];
-        if (planningLeftLocation) {
-          this.addFreeCellsToMatrix(matrix, planningLeftLocation.cells, fixedPositionRules);
-        }
-        if (planningRightLocation) {
-          this.addFreeCellsToMatrix(matrix, planningRightLocation.cells, fixedPositionRules);
-        }
-        if (planningTopLocation) {
-          this.addFreeCellsToMatrix(matrix, planningTopLocation.cells, fixedPositionRules);
-        }
+      var isSupport = false;
+      var selectedElement = undefined;
+      var ele = undefined;
+      if (selectedElementId) {
+        var res = this.getCellsInGridByElementId(selectedElementId);
+        ele = res.cells[0].plannedElement;
         selectedElement = {
-          articleCodex: selectedPlannedElement.articleCodex,
-          size: selectedPlannedElement.size,
+          articleCodex: ele.articleCodex,
+          elementId: ele.elementId,
           gridSpace: {
-            rows: selectedPlannedElement.area.toY - selectedPlannedElement.area.fromY + 1,
-            colums: selectedPlannedElement.area.toX - selectedPlannedElement.area.fromX + 1
+            rows: ele.area.toY - ele.area.fromY + 1,
+            colums: ele.area.toX - ele.area.fromX + 1
           },
-          rules: fixedPositionRules,
-          elementId: selectedElementId
+          area: ele.area,
+          size: ele.size,
+          rules: []
         };
-      }
-      return {
-        grids: [{
-          index: 0,
-          // boxplanner usecase grid index always 0
-          rowSizes: this.getRowSizes(matrix, selectedElement),
-          columnSizes: this.getColumnSizes(matrix, selectedElement),
-          matrix: matrix
-        }],
-        selectedElement: selectedElement
-      };
+        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 (isSupport) return this.generalPlanningState;
+      for (var x = 0; x < maxWidth; x++) {
+        var _x = ele.area.fromX == 0 ? x : x + 1;
+        if (!matrixWithMovables[_x]) if (matrix[x]) matrixWithMovables[_x] = _toConsumableArray(matrix[x]);
+        for (var y = 0; y < maxHeight; y++) {
+          if (matrix[x].length > y && matrix[x][y]) {
+            matrixWithMovables[_x][y].plannedElement;
+            matrixWithMovables[_x][y] = _objectSpread({}, matrix[x][y]);
+          }
+        }
+      }
+
+      // add movable to the top
+      var from = ele.area.fromX == 0 ? ele.area.fromX : ele.area.fromX + 1;
+      var to = ele.area.fromX == 0 ? ele.area.toX : ele.area.toX + 1;
+      matrixWithMovables.forEach(function (_, x) {
+        if (x >= from && x < to) return;
+        var row = matrixWithMovables[x];
+        var len = row.length;
+        var _x = ele.fromX == 0 ? x : x - 1;
+        row[len] = {
+          index: {
+            x: _x,
+            y: len
+          }
+        };
+      });
+
+      // add movable to the side
+      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,
+          y: 0
+        }
+      }];
+      if (((_ele3 = ele) === null || _ele3 === void 0 ? void 0 : _ele3.area.fromX) != 0) matrixWithMovables[0] = [{
+        index: {
+          x: -1,
+          y: 0
+        }
+      }];
+      return _objectSpread(_objectSpread({}, this.generalPlanningState), {}, {
+        selectedElement: selectedElement,
+        grids: [_objectSpread(_objectSpread({}, this.generalPlanningState.grids[0]), {}, {
+          matrix: matrixWithMovables
+        })]
+      });
     }
   }, {
     key: "getRowSizes",
@@ -4915,7 +5198,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         //system 4 useacse
         var totalColCount = matrix[0].length;
         var colSizes = Array(totalColCount).fill(-1);
-        var _loop2 = function _loop2(i) {
+        var _loop3 = function _loop3(i) {
           var _matrix$find;
           var cell = (_matrix$find = matrix.find(function (row) {
             var _row$i$plannedElement, _row$i$plannedElement2;
@@ -4929,7 +5212,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           if (colSizes[i] === -1) return 1; // break
         };
         for (var i = 0; i < totalColCount; i++) {
-          if (_loop2(i)) break;
+          if (_loop3(i)) break;
         }
         if (colSizes.includes(-1)) LOG$1.error(new Error('Column sizes are not set'));
         return colSizes;
@@ -4992,9 +5275,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         });
         if (!column) {
           matrix.map(function (row) {
-            var _row$2;
+            var _row$;
             return row.push({
-              index: new Vector2(((_row$2 = row[0]) === null || _row$2 === void 0 ? void 0 : _row$2.index.x) || 0, y),
+              index: new Vector2(((_row$ = row[0]) === null || _row$ === void 0 ? void 0 : _row$.index.x) || 0, y),
               plannedElement: undefined
             });
           });
@@ -5201,7 +5484,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     key: "addPlannerElement",
     value: (function () {
       var _addPlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(basketID, params) {
-        var plannerElement, data;
+        var plannerElement, data, constructionRules, _constructionRules$co, _constructionRules$co2;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -5220,7 +5503,19 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               return handler2D.loadSVG(plannerElement, this.set);
             case 9:
               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);
+                }
               }
               this.boxPlannerGrid.addElementAtGridPos(plannerElement, params.boxCol, params.boxRow, params.backside != undefined ? params.backside : false);
               if (!params.boxUpdateWholePlanning) {
@@ -5260,6 +5555,28 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
       }
       return extendPlanner;
     }()
+  }, {
+    key: "movePlannerElement",
+    value: function () {
+      var _movePlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(elementId, absoluteIndex) {
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              this.boxPlannerGrid.moveElementAsCopy(elementId, absoluteIndex);
+              this.boxPlannerGrid.updateWorldPosOfElements();
+              _context4.next = 4;
+              return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, "", [elementId]);
+            case 4:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function movePlannerElement(_x6, _x7) {
+        return _movePlannerElement.apply(this, arguments);
+      }
+      return movePlannerElement;
+    }()
     /**
      * Handles copyying the planner Element. it can happen that also other planner elements are influenced
      * @param articleCopyRelation Holds the relation - which element with elementID is copyed and has a new Article. ElementToCopyID -> BasketID of new Article
@@ -5268,18 +5585,18 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
   }, {
     key: "copyPlannerElement",
     value: (function () {
-      var _copyPlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(articleCopyRelation, copyInfo) {
+      var _copyPlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(articleCopyRelation, copyInfo) {
         var _this = this;
         var gridIsPrepared, plannerElementsToLoadSVG, that, i, cellPos, allDPs, j;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               gridIsPrepared = false;
               if (copyInfo) {
-                _context4.next = 3;
+                _context5.next = 3;
                 break;
               }
-              return _context4.abrupt("return");
+              return _context5.abrupt("return");
             case 3:
               if (copyInfo.copyType == 'STD') copyInfo.targetElements = [];
               plannerElementsToLoadSVG = [];
@@ -5309,10 +5626,10 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               i = 0;
             case 8:
               if (!(i < plannerElementsToLoadSVG.length)) {
-                _context4.next = 15;
+                _context5.next = 15;
                 break;
               }
-              _context4.next = 11;
+              _context5.next = 11;
               return handler2D.loadSVG(plannerElementsToLoadSVG[i], this.set);
             case 11:
               //Check if we have to prevent to build even higher in this col
@@ -5328,19 +5645,19 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               }
             case 12:
               i++;
-              _context4.next = 8;
+              _context5.next = 8;
               break;
             case 15:
               this.boxPlannerGrid.updateWorldPosOfElements();
-              _context4.next = 18;
+              _context5.next = 18;
               return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, copyInfo.changedOPT, copyInfo.targetElements);
             case 18:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4, this);
+        }, _callee5, this);
       }));
-      function copyPlannerElement(_x6, _x7) {
+      function copyPlannerElement(_x8, _x9) {
         return _copyPlannerElement.apply(this, arguments);
       }
       return copyPlannerElement;
@@ -5413,8 +5730,8 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               allElementsToCopy = result.elements;
               result.backside;
             } else {
-              var _result = this.boxPlannerGrid.getAllElementsDown(elementId);
-              allElementsToCopy = allElementsToCopy.concat(_result.elements);
+              var _result = this.boxPlannerGrid.getAllElementsToFillUp(elementId, copyInfo.copyIndex.x > 0 ? 'RIGHT' : 'LEFT');
+              allElementsToCopy = _result.elements;
               _result.backside;
             }
           }
@@ -5446,10 +5763,10 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
   }, {
     key: "deletePlannerElement",
     value: (function () {
-      var _deletePlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(elementId, autoCorrectAVL_AVR, deletionType) {
+      var _deletePlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(elementId, autoCorrectAVL_AVR, deletionType) {
         var cellPos, newSelectedPos, doUpdateWholeLogic, _this$boxPlannerGrid$;
-        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               //TODO ÜBERLEGEN WIE MAN DAS JETZT RICHTET: BESSER WÄRE ES MAN GIBT DAS NÄCHSTE ZU SELECTIERENDE ELEMENT ID ZURÜCK
               //var pos = this.boxPlannerGrid.getIndexInGridByElementId(elementId);
@@ -5483,29 +5800,29 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 } else if (deletionType == 'STD_DONTUPDATE') doUpdateWholeLogic = false;
               }
               if (!doUpdateWholeLogic) {
-                _context5.next = 11;
+                _context6.next = 11;
                 break;
               }
               this.boxPlannerGrid.updateWorldPosOfElements();
-              _context5.next = 11;
+              _context6.next = 11;
               return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid);
             case 11:
               if (!this.boxPlannerGrid.getPlannerElementAtGridPos(newSelectedPos.col, newSelectedPos.row, newSelectedPos.backside)) {
-                _context5.next = 13;
+                _context6.next = 13;
                 break;
               }
-              return _context5.abrupt("return", {
+              return _context6.abrupt("return", {
                 newElementToSelect: (_this$boxPlannerGrid$ = this.boxPlannerGrid.getPlannerElementAtGridPos(newSelectedPos.col, newSelectedPos.row, newSelectedPos.backside)) === null || _this$boxPlannerGrid$ === void 0 ? void 0 : _this$boxPlannerGrid$.getElementId()
               });
             case 13:
-              return _context5.abrupt("return", {});
+              return _context6.abrupt("return", {});
             case 14:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
-      function deletePlannerElement(_x8, _x9, _x10) {
+      function deletePlannerElement(_x10, _x11, _x12) {
         return _deletePlannerElement.apply(this, arguments);
       }
       return deletePlannerElement;
@@ -5585,11 +5902,11 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
   }, {
     key: "updatePlanner",
     value: (function () {
-      var _updatePlanner = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(changedOPT, targetElements) {
+      var _updatePlanner = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7(changedOPT, targetElements) {
         var _this2 = this;
         var message, cellPos, elemToCheck, copyIndex, allElementsToCopy, _allElementsToCopy, allElementsInBackGrid, _allElementsInBackGrid, _message;
-        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+        return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
             case 0:
               LOG.debug('BoxPlanner - configurationHasChanged ' + changedOPT);
               targetElements === null || targetElements === void 0 || targetElements.forEach(function (e) {
@@ -5597,28 +5914,28 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 return _this2.boxPlannerGrid.updateGridElementDimensions(e, (_this2$set$getArticle = _this2.set.getArticleByElementId(e)) === null || _this2$set$getArticle === void 0 ? void 0 : _this2$set$getArticle.plannerData);
               });
               if (!(changedOPT && targetElements && targetElements.length > 0 && changedOPT['OPTELEMENT'] && (changedOPT['OPTELEMENT'] == 'OPVECK_I' || changedOPT['OPTELEMENT'] == 'OPVECK_A'))) {
-                _context6.next = 19;
+                _context7.next = 19;
                 break;
               }
               if (!(targetElements.length > 1)) {
-                _context6.next = 10;
+                _context7.next = 10;
                 break;
               }
-              _context6.next = 6;
+              _context7.next = 6;
               return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, changedOPT, targetElements, true);
             case 6:
-              message = _context6.sent;
+              message = _context7.sent;
               if (!message) {
-                _context6.next = 9;
+                _context7.next = 9;
                 break;
               }
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 viewMessageCodex: message
               });
             case 9:
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: []
               });
@@ -5630,7 +5947,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 elemToCheck = this.boxPlannerGrid.getPlannerElementAtGridPos(cellPos.startColIndex, 0, false).getElementId();
               }
               if (!(!this.boxPlannerGrid.getElementHasLeftElement(elemToCheck) || !this.boxPlannerGrid.getElementHasRightElement(elemToCheck))) {
-                _context6.next = 19;
+                _context7.next = 19;
                 break;
               }
               //Someone has changed Eck innen or aussen. If the current eselected Element has no neighbor left or right copy neighbor
@@ -5651,7 +5968,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 copyIndex: copyIndex,
                 copyType: 'BoxPlanner_COL'
               });
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: allElementsToCopy,
@@ -5662,15 +5979,15 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               });
             case 19:
               if (!(changedOPT && changedOPT['OPTDMOD'])) {
-                _context6.next = 34;
+                _context7.next = 34;
                 break;
               }
-              _context6.t0 = changedOPT['OPTDMOD'];
-              _context6.next = _context6.t0 === 'OPVD_EIN' ? 23 : _context6.t0 === 'OPVD_AUS' ? 27 : 32;
+              _context7.t0 = changedOPT['OPTDMOD'];
+              _context7.next = _context7.t0 === 'OPVD_EIN' ? 23 : _context7.t0 === 'OPVD_AUS' ? 27 : 32;
               break;
             case 23:
               if (this.boxPlannerGrid.getPlannerHasActiveBackside()) {
-                _context6.next = 26;
+                _context7.next = 26;
                 break;
               }
               _allElementsToCopy = this.getPlannerElementsInfluencedByCopy(-1, {
@@ -5681,7 +5998,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 },
                 copyType: 'BoxPlanner_backside'
               });
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: _allElementsToCopy,
@@ -5689,18 +6006,18 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 changedOPT: changedOPT
               });
             case 26:
-              return _context6.abrupt("break", 32);
+              return _context7.abrupt("break", 32);
             case 27:
               if (!this.boxPlannerGrid.getPlannerHasActiveBackside()) {
-                _context6.next = 31;
+                _context7.next = 31;
                 break;
               }
               allElementsInBackGrid = this.boxPlannerGrid.getAllElementsInBackGrid();
               if (!(allElementsInBackGrid.length > 0)) {
-                _context6.next = 31;
+                _context7.next = 31;
                 break;
               }
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: true,
                 elemIdsToDelete: allElementsInBackGrid.map(function (element) {
                   return element.ElementId;
@@ -5709,22 +6026,22 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 changedOPT: changedOPT
               });
             case 31:
-              return _context6.abrupt("break", 32);
+              return _context7.abrupt("break", 32);
             case 32:
-              _context6.next = 48;
+              _context7.next = 48;
               break;
             case 34:
               if (!(changedOPT && changedOPT['OPTFARBE_RAHMEN'] && changedOPT['OPTFARBE_RAHMEN'] == 'OPVSCHWARZ_MATT' && this.boxPlannerGrid.getPlannerHasActiveBackside())) {
-                _context6.next = 40;
+                _context7.next = 40;
                 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)) {
-                _context6.next = 38;
+                _context7.next = 38;
                 break;
               }
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: true,
                 elemIdsToDelete: _allElementsInBackGrid.map(function (element) {
                   return element.ElementId;
@@ -5735,39 +6052,39 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 viewMessageCodex: 'BOXPLAN_BLACKFRAME_INCOMPATIBLE_ELEMENT_WARNING'
               });
             case 38:
-              _context6.next = 48;
+              _context7.next = 48;
               break;
             case 40:
-              _context6.next = 42;
+              _context7.next = 42;
               return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, changedOPT, targetElements);
             case 42:
-              _message = _context6.sent;
+              _message = _context7.sent;
               if (!_message) {
-                _context6.next = 47;
+                _context7.next = 47;
                 break;
               }
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 viewMessageCodex: _message
               });
             case 47:
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: []
               });
             case 48:
-              return _context6.abrupt("return", {
+              return _context7.abrupt("return", {
                 doDeleteBackGrid: false,
                 elemIdsToDelete: []
               });
             case 49:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
-      function updatePlanner(_x11, _x12) {
+      function updatePlanner(_x13, _x14) {
         return _updatePlanner.apply(this, arguments);
       }
       return updatePlanner;
@@ -5896,7 +6213,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
   }, {
     key: "getGeneralPlanningState",
     value: function getGeneralPlanningState(selectedElementId) {
-      return this.boxPlannerGrid.getGeneralPlanningState(selectedElementId);
+      return this.boxPlannerGrid.getGeneralPlanningState(true, selectedElementId);
     }
   }]);
 }();