@crystaldesign/web-planner-logic 25.13.0-beta.42 → 25.13.0-beta.43

package/build/esm/{DivaBoxPlanner-6e6c1465.js → DivaBoxPlanner-e4a3c8dd.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-dcce5e3a.js';
+import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-9aa6880b.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-79196c59.js';
+import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-f28b33b6.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);
           }
         }
@@ -2433,35 +2433,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 +2454,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 +2508,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 {
@@ -2628,26 +2604,34 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     /*
      *  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(boxPlannerGrid, optionHandler, changedOPTs) {
+    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 elements = boxPlannerGrid.getAllElementsInColumn(columndIdx, false, false); // from bottom to top
         var lastElement = null;
-        elements.forEach(function (element) {
+        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)) {
-            var t = Object.entries(changedOPTs); // should be the new wider width that causes the overhanging
+            // 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];
-            _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
+            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
@@ -3128,6 +3112,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) {
@@ -3204,7 +3189,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               }
               this.correctLadder(boxPlannerGrid, optionHandler);
               this.correctOptionsInfluencedByDimensions(boxPlannerGrid, optionHandler);
-              this.correctOverHangingElement(boxPlannerGrid, optionHandler, changedOPTs);
+              this.correctOverHangingElement((_targetElements = targetElements) === null || _targetElements === void 0 ? void 0 : _targetElements[0], boxPlannerGrid, optionHandler, changedOPTs);
               this.partlistHelper.calculateKnots(boxPlannerGrid, optionHandler);
               this.partlistHelper.calculateRahmen(boxPlannerGrid, optionHandler);
               for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
@@ -3281,21 +3266,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;
@@ -3314,50 +3304,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",
@@ -3403,7 +3400,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]);
@@ -3418,8 +3415,10 @@ 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;
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      for (var i = 0; i < frontGrid[columnIndex].length; i++) {
+        var _plannedElement$size$, _plannedElement;
+        if (frontGrid[columnIndex][i]) return (_plannedElement$size$ = (_plannedElement = frontGrid[columnIndex][i].plannedElement) === null || _plannedElement === void 0 ? void 0 : _plannedElement.size.width) !== null && _plannedElement$size$ !== void 0 ? _plannedElement$size$ : 0;
       }
       return 0;
     }
@@ -3434,11 +3433,12 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     value: function getGridColumnHeight(columnIdex) {
       var height = 0;
       var firstElementFound = false;
-      if (this.frontGrid.length > columnIdex) {
-        var allCellsInCol = this.frontGrid[columnIdex];
+      var frontGrid = this.generalPlanningState.grids[0].matrix;
+      if (frontGrid.length > columnIdex) {
+        var allCellsInCol = 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;
+          if (firstElementFound) height += allCellsInCol[i] == undefined ? 0 : allCellsInCol[i].plannedElement.size.height;
         }
       }
       return height;
@@ -3451,31 +3451,16 @@ 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);
+      });
+      if (gridCellsToDelete.backside) this.generalPlanningState.grids[1].matrix = curGrid;else this.generalPlanningState.grids[0].matrix = curGrid;
     }
 
     /**
@@ -3488,11 +3473,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;
     }
@@ -3506,82 +3494,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
@@ -3598,11 +3557,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));
           }
         }
       }
@@ -3611,17 +3571,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;
       });
     }
@@ -3636,24 +3596,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);
           }
         }
@@ -3685,9 +3652,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;
     }
 
     /**
@@ -3698,10 +3665,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;
         }
       }
@@ -3715,19 +3682,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;
     }
@@ -3740,10 +3706,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;
     }
@@ -3756,10 +3722,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;
     }
@@ -3787,22 +3753,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;
     }
 
     /**
@@ -3813,9 +3778,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;
@@ -3832,18 +3797,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;
@@ -3857,7 +3822,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;
       }
@@ -3875,21 +3840,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;
     }
 
     /*
@@ -3901,24 +3866,28 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getAllElementsInColumn",
     value: function getAllElementsInColumn(index, fromBackmodul) {
       var orderBottomDown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var curGrid = fromBackmodul ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var allElements = [];
       var allElementIds = [];
       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 _cell4 = curGrid[index][i];
-          if (_cell4 && allElementIds.indexOf(_cell4.plannerElementId) == -1) {
-            allElementIds.push(_cell4.plannerElementId);
-            allElements.push(this.plannerElements.get(_cell4.plannerElementId));
+          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));
           }
         }
       }
@@ -3931,7 +3900,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getColumnCount",
     value: function getColumnCount() {
-      return this.frontGrid.length;
+      return this.generalPlanningState.grids[0].matrix.length;
     }
 
     /**
@@ -3941,7 +3910,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;
     }
 
     /*
@@ -3952,15 +3921,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));
           }
         }
       }
@@ -3974,7 +3945,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--) {
@@ -4003,69 +3974,38 @@ 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, _rightNeighbour$plann, _curGrid2, _leftNeightbour$plann, _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':
+          var rightNeighbour = (_curGrid$area$toX = curGrid[plannedElement.area.toX]) === null || _curGrid$area$toX === void 0 ? void 0 : _curGrid$area$toX[plannedElement.area.fromY];
+          var rElementId = rightNeighbour === null || rightNeighbour === void 0 || (_rightNeighbour$plann = rightNeighbour.plannedElement) === null || _rightNeighbour$plann === void 0 ? void 0 : _rightNeighbour$plann.elementId;
+          if (rElementId) result.push(this.plannerElements.get(rElementId));
           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 leftNeightbour = (_curGrid2 = curGrid[plannedElement.area.fromX - 1]) === null || _curGrid2 === void 0 ? void 0 : _curGrid2[plannedElement.area.fromY];
+          var lElementId = leftNeightbour === null || leftNeightbour === void 0 || (_leftNeightbour$plann = leftNeightbour.plannedElement) === null || _leftNeightbour$plann === void 0 ? void 0 : _leftNeightbour$plann.elementId;
+          if (lElementId) result.push(this.plannerElements.get(lElementId));
           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;
     }
@@ -4121,13 +4061,16 @@ 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 i = 0; i < frontGrid.length; i++) {
         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();
+        for (var j = 0; j < frontGrid[i].length; j++) {
+          var _cell4;
+          var cell = frontGrid[i][j];
+          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 (i == 0 && j == 0) depth = this.plannerElements.get(elementId).getDepth();
           }
         }
         if (curHeight > height) height = curHeight;
@@ -4154,7 +4097,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var result = [];
       var lastHeight = -1;
       for (var idx = 0; idx < this.getColumnCount(); idx++) {
-        var row = this.frontGrid[idx];
+        var row = this.generalPlanningState.grids[0].matrix[idx];
         var height = row.reduce(function (added, column) {
           return column.height + added;
         }, 0);
@@ -4199,38 +4142,51 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     /**
      * Get all the Elements need  to fill up for the copy of Element x fxe:
      *
-     * [4]   ->      
-     * [3]        
-     * [2]        
+     * [4]   ->
+     * [3]
+     * [2]
      * [0][1]
      *
-     * returns element 4, 3 and 2 because those are needed to copy in order 
+     * 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);
-      if (curPos.startRowIndex == 0) return {
-        elements: [],
-        backside: false
-      };
-      var d = dir == 'RIGHT' ? +1 : -1;
+
       //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.backGrid : this.frontGrid;
+      var curGrid = curPos.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var plannerIdsToFill = [];
       var existingPlannerIds = [];
-      for (var colIdx = 0; colIdx <= index.y; colIdx++) {
-        var _curGrid$index$x$colI, _curGrid;
-        var elementToCopy = (_curGrid$index$x$colI = curGrid[index.x][colIdx]) === null || _curGrid$index$x$colI === void 0 ? void 0 : _curGrid$index$x$colI.plannerElementId;
-        var neighbour = (_curGrid = curGrid[index.x + d]) === null || _curGrid === void 0 ? void 0 : _curGrid[colIdx];
-        if (!neighbour && elementToCopy) plannerIdsToFill.push(elementToCopy);else if (elementToCopy) existingPlannerIds.push(elementToCopy);
+      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 
+      // if there is nothing to fill we copy everyting
       return {
         elements: plannerIdsToFill.length == 0 ? existingPlannerIds : plannerIdsToFill,
         backside: curPos.backside
@@ -4253,13 +4209,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 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);
           }
         }
       }
@@ -4296,25 +4254,29 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "prepareGridForColCopy",
     value: function prepareGridForColCopy(elementId, relativeCopyIndex) {
-      var _this$frontGrid;
+      var _this$generalPlanning4, _this$generalPlanning5, _frontGrid;
       if (relativeCopyIndex.y > 0) return;
       var elementToCopyPos = this.getCellsInGridByElementId(elementId);
       var copyDirectionIsRight = relativeCopyIndex.x > 0;
-      // We add the relativeCopyIndex only if positive otherwise the whole grid get's 
+      // 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: elementToCopyPos.cells[0].index.x + relativeCopyIndex.x,
-        y: elementToCopyPos.cells[0].index.y + relativeCopyIndex.y
+        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;
 
       // 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 isBlocked = (_this$frontGrid = this.frontGrid[elementToCopyPos.cells[0].index.x + relativeCopyIndex.x]) === null || _this$frontGrid === void 0 ? void 0 : _this$frontGrid[elementToCopyPos.cells[0].index.y];
+      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: 
+      // new copy logic fill up like this:
       // [][] ->   |  [][][]
       // [][]      |  [][][]
       // [][][]    |  [][][]
@@ -4322,42 +4284,48 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       // [][] ->   |  [][][]
       // [][]      |  [][][]
       // [][][]    |  [][][][]
-
+      this.getGeneralPlanningState();
       function moveGrid(plannedCells) {
         var grid = new Array();
-        var rightNeighbourOfCopy = plannedCells.find(function (c) {
-          return c.index.x == (copyDirectionIsRight ? absoluteCopyIndex.x : absoluteCopyIndex.x + 1) && c.index.y == absoluteCopyIndex.y;
+        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 = plannedCells.find(function (c) {
-          return c.index.x == (!copyDirectionIsRight ? absoluteCopyIndex.x : absoluteCopyIndex.x - 1) && c.index.y == absoluteCopyIndex.y;
+        var leftNeighbourOfCopy = leftNeighbour.find(function (neighbour) {
+          return neighbour.index.y == absoluteCopyIndex.y;
         });
         plannedCells.forEach(function (cell) {
-          // if i planned to -1 or absolute corrected 0 all the others get moved
-          // if we the copied element does not have a neighbour we can just fill
-
-          //if (copyDirectionIsRight && cell.index.x >= absoluteCopyIndex) {}
-          if (cell.index.x >= absoluteCopyIndex.x && (copyDirectionIsRight && rightNeighbourOfCopy || !copyDirectionIsRight && leftNeighbourOfCopy || absoluteCopyIndex.x == -1)) cell.index.x += 1;
-          if (!grid[cell.index.x]) {
-            grid[cell.index.x] = [];
-          }
-          if (!grid[cell.index.x][cell.index.y]) {
-            grid[cell.index.x][cell.index.y] = 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;
       }
-      this.frontGrid = moveGrid(this.getAllUsedCellsInGrid(false));
-      if (!this.frontGrid[absoluteCopyIndex.x]) this.frontGrid[absoluteCopyIndex.x] = [];
+      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) {
-        this.backGrid = moveGrid(this.getAllUsedCellsInGrid(true));
-        //Init empty cols
-        if (!this.backGrid[absoluteCopyIndex.x]) this.backGrid[absoluteCopyIndex.y] = [];
+        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;
     }
 
@@ -4371,11 +4339,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] = [];
         }
@@ -4395,16 +4362,20 @@ 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 cells = this.createNewCells(newElement, cellIndex.x, cellIndex.y, backsideForCopy);
+      var curGrid = backsideForCopy ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
+      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);
     }
@@ -4431,12 +4402,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 ? cell.index.x + elementData.width / _this2.gridSetupParams.fixCellRasterWidth : cell.index.x + 1,
+          fromY: cell.index.y,
+          toY: !scpe ? 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$plannedElement8;
+            return ((_y$plannedElement3 = y.plannedElement) === null || _y$plannedElement3 === void 0 ? void 0 : _y$plannedElement3.elementId) == ((_cell$plannedElement8 = cell.plannedElement) === null || _cell$plannedElement8 === void 0 ? void 0 : _cell$plannedElement8.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;
     }
 
     /**
@@ -4446,6 +4480,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;
@@ -4463,14 +4498,18 @@ 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');
+      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$plannedElement9;
+          var cell = frontGrid[x][y];
+          var elementId = cell === null || cell === void 0 || (_cell$plannedElement9 = cell.plannedElement) === null || _cell$plannedElement9 === void 0 ? void 0 : _cell$plannedElement9.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');
             for (var n = 0; n < topNeighbors.length; n++) {
               dockingPointHandlerInst.tryDockElement(element, 'AVO', [topNeighbors[n]]);
             }
@@ -4482,20 +4521,22 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           }
         }
       }
-      for (var i = 0; i < this.backGrid.length; i++) {
-        for (var j = 0; j < this.backGrid[i].length; j++) {
-          var _cell5 = this.backGrid[i][j];
-          if (allCheckedElementIds.indexOf(_cell5.plannerElementId) == -1) {
-            var _element2 = this.plannerElements.get(_cell5.plannerElementId);
-            allCheckedElementIds.push(_cell5.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(_cell5.plannerElementId, 'TOP');
-            var _rightNeighbors = this.getNeighborElements(_cell5.plannerElementId, 'RIGHT');
+            var _topNeighbors = this.getNeighborElements(_elementId6, 'TOP');
+            var _rightNeighbors = this.getNeighborElements(_elementId6, 'RIGHT');
             for (var n = 0; n < _topNeighbors.length; n++) {
               dockingPointHandlerInst.tryDockElement(_element2, 'AVO', [_topNeighbors[n]]);
             }
@@ -4529,10 +4570,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 = [];
       }
     }
 
@@ -4558,7 +4599,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         _iterator3.f();
       }
       allElements = [];
-      this.backGrid = new Array();
+      this.generalPlanningState.grids[1].matrix = [];
     }
   }, {
     key: "getPlannerHasActiveBackside",
@@ -4573,26 +4614,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') {
@@ -4661,7 +4707,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 {
@@ -4680,7 +4726,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 {
@@ -4689,7 +4735,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)) {
@@ -4762,7 +4808,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;
@@ -4821,9 +4867,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;
               }
             }
@@ -4837,29 +4883,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;
@@ -4876,7 +4922,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(),
@@ -4892,14 +4938,16 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       } else {
         var distToOriginX = 0;
         for (var i = 0; i < cellsStartColIndex; i++) {
-          distToOriginX += curGrid[i][0].width;
+          var _plannedElement$size$2, _plannedElement2;
+          distToOriginX += (_plannedElement$size$2 = (_plannedElement2 = curGrid[i][0].plannedElement) === null || _plannedElement2 === void 0 ? void 0 : _plannedElement2.size.width) !== null && _plannedElement$size$2 !== void 0 ? _plannedElement$size$2 : 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$3, _plannedElement3;
+          distToOriginY += (_plannedElement$size$3 = (_plannedElement3 = curGrid[cellsStartColIndex][i].plannedElement) === null || _plannedElement3 === void 0 ? void 0 : _plannedElement3.size.width) !== null && _plannedElement$size$3 !== void 0 ? _plannedElement$size$3 : 0;
         }
         elementLocation.startIndexWorldPos = new Vector2(distToOriginX, distToOriginY);
       }
@@ -4915,7 +4963,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');
@@ -4942,9 +4991,11 @@ 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) {
+      return this.generalPlanningState;
+      /*
+      let matrix: Cell[][] = [];
+      let selectedElement: SelectedElement | undefined = undefined;
+       const plannedElements: PlannedElement[] = Array.from(this.plannerElements.values()).map((p) => {
         return {
           basketId: p.getBasketId(),
           elementId: p.getElementId(),
@@ -4952,67 +5003,67 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           size: {
             width: p.getWidth(),
             height: p.getHeight(),
-            depth: p.getDepth()
+            depth: p.getDepth(),
           },
           area: {
             fromX: undefined,
             toX: undefined,
             fromY: undefined,
-            toY: undefined
-          }
+            toY: undefined,
+          } as any,
         };
       });
-      for (var i = 0; i < this.frontGrid.length; i++) {
+       let frontGrid = this.generalPlanningState.grids[0].matrix;
+      let index = { x: 0, y: 0 };
+      for (let i = 0; i < 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;
+        const frontGridRow = frontGrid[i];
+        for (let j = 0; j < frontGridRow.length; j++) {
+          const cell = frontGridRow[j];
+          let elementId = cell.plannedElement?.elementId;
+          if (elementId && cell) {
+            const plannedElement = plannedElements.find((p) => p.elementId === elementId);
+            let matrixIndex = 0;
+            for (let idx = cell.index.x - 1; idx >= 0; idx--)
+              matrixIndex += frontGridRow[idx]!.plannedElement!.size.width / 19.2;
+             if (plannedElement) {
+              
+              plannedElement.area.fromX = matrixIndex;
+              plannedElement.area.toX = matrixIndex + cell.plannedElement!.size.width / 19.2;
+              plannedElement.area.fromY = cell.index.y;
+              plannedElement.area.toY = cell.index.y + cell.plannedElement!.size.height / 19.2;
+               for (let x = plannedElement.area.fromX; x < plannedElement.area.toX; x++) {
+                for (let y = plannedElement.area.fromY; y < plannedElement.area.toY; y++) {
+                  if (!matrix[x]) matrix[x] = [];
+                  matrix[x][y] = { index: { x, y }, plannedElement };
+                }
+              }
+              continue;
             }
-            matrix[i].push({
-              index: cell.index,
-              plannedElement: plannedElement
-            });
+            matrix[matrixIndex].push({ index: index, 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) {
+       // Fill matrix rows to equal length
+      const maxLength = Math.max(...matrix.map((row) => row.length));
+      matrix.forEach((row) => {
         while (row.length < maxLength) {
-          var _row$;
-          var lastCell = row[row.length - 1];
-          var newY = lastCell ? lastCell.index.y + 1 : 0;
+          const lastCell = row[row.length - 1];
+          const 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
+            index: new Vector2(row[0]?.index.x || 0, newY),
+            plannedElement: undefined,
           });
         }
       });
-      var selectedPlannedElement = selectedElementId ? plannedElements.find(function (p) {
-        return p.elementId === selectedElementId;
-      }) : undefined;
+       let selectedPlannedElement = selectedElementId ? plannedElements.find((p) => 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) {
+        let planningLeftLocation = this.getFreePlanningLocation(selectedPlannedElement.elementId, 'LEFT');
+        let planningRightLocation = this.getFreePlanningLocation(selectedPlannedElement.elementId, 'RIGHT');
+        let planningTopLocation = this.getFreePlanningLocation(selectedPlannedElement.elementId, 'TOP');
+         let fixedPositionRules: FixedPositonRule[] = [];
+         if (planningLeftLocation) {
           this.addFreeCellsToMatrix(matrix, planningLeftLocation.cells, fixedPositionRules);
         }
         if (planningRightLocation) {
@@ -5021,27 +5072,28 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         if (planningTopLocation) {
           this.addFreeCellsToMatrix(matrix, planningTopLocation.cells, fixedPositionRules);
         }
-        selectedElement = {
+         selectedElement = {
           articleCodex: selectedPlannedElement.articleCodex,
           size: selectedPlannedElement.size,
           gridSpace: {
             rows: selectedPlannedElement.area.toY - selectedPlannedElement.area.fromY + 1,
-            colums: selectedPlannedElement.area.toX - selectedPlannedElement.area.fromX + 1
+            colums: selectedPlannedElement.area.toX - selectedPlannedElement.area.fromX + 1,
           },
           rules: fixedPositionRules,
-          elementId: selectedElementId
+          elementId: selectedElementId!,
         };
       }
       return {
-        grids: [{
-          index: 0,
-          // boxplanner usecase grid index always 0
-          rowSizes: this.getRowSizes(matrix, selectedElement),
-          columnSizes: this.getColumnSizes(matrix, selectedElement),
-          matrix: matrix
-        }],
-        selectedElement: selectedElement
-      };
+        grids: [
+          {
+            index: 0, // boxplanner usecase grid index always 0
+            rowSizes: this.getRowSizes(matrix, selectedElement),
+            columnSizes: this.getColumnSizes(matrix, selectedElement),
+            matrix,
+          },
+        ],
+        selectedElement,
+      }; */
     }
   }, {
     key: "getRowSizes",
@@ -5050,7 +5102,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;
@@ -5064,7 +5116,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;
@@ -5127,9 +5179,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
             });
           });
@@ -5336,7 +5388,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:
@@ -5355,7 +5407,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) {
@@ -5549,7 +5613,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               result.backside;
             } else {
               var _result = this.boxPlannerGrid.getAllElementsToFillUp(elementId, copyInfo.copyIndex.x > 0 ? 'RIGHT' : 'LEFT');
-              allElementsToCopy = allElementsToCopy.concat(_result.elements);
+              allElementsToCopy = _result.elements;
               _result.backside;
             }
           }