@crystaldesign/web-planner-logic 25.1.0-beta.44 → 25.1.0-beta.46

package/build/cjs/{DivaBoxPlanner-c16778e5.js → DivaBoxPlanner-af1807d8.js}

@@ -5,10 +5,10 @@ var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var index = require('./index-7d055329.js');
+var index = require('./index-89f4528c.js');
 var DivaUtils = require('@crystaldesign/diva-utils');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var PlannerHandler2D = require('./PlannerHandler2D-3fd88d44.js');
+var PlannerHandler2D = require('./PlannerHandler2D-ddb09d94.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('axios');
@@ -57,23 +57,35 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "getGroundPlatesNumOfRightNeighbors",
     value: function getGroundPlatesNumOfRightNeighbors(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function getGroundPlatesNumOfRightNeighbors not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       var plateCount = 0;
       if (this.getElementHasBottomPlate(curElement, optionHandler)) plateCount++;
       if (boxPlannerGrid.getPlannerHasActiveBackside()) {
         var opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
         if (this.getElementHasBottomPlate(opposideElement, optionHandler)) plateCount++;
         if (boxPlannerGrid.getElementHasRightElement(curElement.getElementId())) {
-          var rightElement = boxPlannerGrid.getRightElement(curElement.getElementId());
-          var rightOpposideElemnt = boxPlannerGrid.getOppositeElement(rightElement.getElementId());
-          if (this.getElementHasBottomPlate(rightElement, optionHandler)) plateCount++;
-          if (this.getElementHasBottomPlate(rightOpposideElemnt, optionHandler)) plateCount++;
+          var rightElements = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (rightElements.length > 0) {
+            var rightElement = rightElements[0];
+            var rightOpposideElemnt = boxPlannerGrid.getOppositeElement(rightElement.getElementId());
+            if (this.getElementHasBottomPlate(rightElement, optionHandler)) plateCount++;
+            if (this.getElementHasBottomPlate(rightOpposideElemnt, optionHandler)) plateCount++;
+          }
           return plateCount;
         }
         return plateCount;
       } else {
         if (boxPlannerGrid.getElementHasRightElement(curElement.getElementId())) {
-          var _rightElement = boxPlannerGrid.getRightElement(curElement.getElementId());
-          if (this.getElementHasBottomPlate(_rightElement, optionHandler)) plateCount++;
+          var _rightElements = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (_rightElements.length > 0) {
+            var _rightElement = _rightElements[0];
+            if (this.getElementHasBottomPlate(_rightElement, optionHandler)) plateCount++;
+          }
           return plateCount;
         }
         return plateCount;
@@ -82,23 +94,35 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "getTopPlatesNumOfRightNeighbors",
     value: function getTopPlatesNumOfRightNeighbors(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function getTopPlatesNumOfRightNeighbors not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       var plateCount = 0;
       if (this.getElementHasTopPlate(curElement, boxPlannerGrid, optionHandler)) plateCount++;
       if (boxPlannerGrid.getPlannerHasActiveBackside()) {
         var opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
         if (this.getElementHasTopPlate(opposideElement, boxPlannerGrid, optionHandler)) plateCount++;
         if (boxPlannerGrid.getElementHasRightElement(curElement.getElementId())) {
-          var rightElement = boxPlannerGrid.getRightElement(curElement.getElementId());
-          var rightOpposideElemnt = boxPlannerGrid.getOppositeElement(rightElement.getElementId());
-          if (this.getElementHasTopPlate(rightElement, boxPlannerGrid, optionHandler)) plateCount++;
-          if (this.getElementHasTopPlate(rightOpposideElemnt, boxPlannerGrid, optionHandler)) plateCount++;
+          var rightElements = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (rightElements.length > 0) {
+            var rightElement = rightElements[0];
+            var rightOpposideElemnt = boxPlannerGrid.getOppositeElement(rightElement.getElementId());
+            if (this.getElementHasTopPlate(rightElement, boxPlannerGrid, optionHandler)) plateCount++;
+            if (this.getElementHasTopPlate(rightOpposideElemnt, boxPlannerGrid, optionHandler)) plateCount++;
+          }
           return plateCount;
         }
         return plateCount;
       } else {
         if (boxPlannerGrid.getElementHasRightElement(curElement.getElementId())) {
-          var _rightElement2 = boxPlannerGrid.getRightElement(curElement.getElementId());
-          if (this.getElementHasTopPlate(_rightElement2, boxPlannerGrid, optionHandler)) plateCount++;
+          var _rightElements2 = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (_rightElements2.length > 0) {
+            var _rightElement2 = _rightElements2[0];
+            if (this.getElementHasTopPlate(_rightElement2, boxPlannerGrid, optionHandler)) plateCount++;
+          }
           return plateCount;
         }
         return plateCount;
@@ -133,7 +157,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "calculateRahmen",
     value: function calculateRahmen(boxPlannerGrid, optionHandler) {
-      var allElements = boxPlannerGrid.getAllElementsInGrid();
+      var allElements = boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
       for (var i = 0; i < allElements.length; i++) {
         if (this.constructionRules.VarticalRahmenInfo) {
           this.correctRahmenVerticalLeftFront(allElements[i], boxPlannerGrid, optionHandler);
@@ -163,7 +187,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctRahmenDepthLeftBottom",
     value: function correctRahmenDepthLeftBottom(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_LeftBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
 
       //Only set the bottom left Tiefenverbinder if the element is on the ground
@@ -208,7 +232,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctRahmenDepthLeftTop",
     value: function correctRahmenDepthLeftTop(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_LeftTop, this.constructionRules.DepthRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
 
       //ONly set this Tiefenverbidner wenn es links kein Element gibt
@@ -270,8 +294,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctRahmenDepthRightBottom",
     value: function correctRahmenDepthRightBottom(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctRahmenDepthRightBottom not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       if (boxPlannerGrid.getElementHasBottomElement(curElement.getElementId())) return;
       if (boxPlannerGrid.getPlannerHasActiveBackside()) {
@@ -299,31 +329,34 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
               //-> Setze breitenverbindung
               //Sonst
               //-> Setze Tiefenverbinder
-              var rightElement = boxPlannerGrid.getRightElement(curElement.getElementId());
-              if (!this.getElementHasBottomPlate(curElement, optionHandler) || this.getElementIsCornerElement(curElement, optionHandler)) {
-                switch (this.getElementDepth(curElement, optionHandler)) {
-                  case '18':
-                    //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_18_chrom, optionHandler);
-                    break;
-                  case '37':
-                    //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_37_chrom, optionHandler);
-                    break;
-                }
-              } else if (!this.getElementHasBottomPlate(rightElement, optionHandler) || this.getElementIsCornerElement(rightElement, optionHandler)) {
-                switch (this.getElementDepth(curElement, optionHandler)) {
-                  case '18':
-                    //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_18_chrom, optionHandler);
-                    break;
-                  case '37':
-                    //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_37_chrom, optionHandler);
-                    break;
+              var rightElements = boxPlannerGrid.getRightElements(curElement.getElementId());
+              if (rightElements.length > 0) {
+                var rightElement = rightElements[0];
+                if (!this.getElementHasBottomPlate(curElement, optionHandler) || this.getElementIsCornerElement(curElement, optionHandler)) {
+                  switch (this.getElementDepth(curElement, optionHandler)) {
+                    case '18':
+                      //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_18_chrom, optionHandler);
+                      break;
+                    case '37':
+                      //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_37_chrom, optionHandler);
+                      break;
+                  }
+                } else if (!this.getElementHasBottomPlate(rightElement, optionHandler) || this.getElementIsCornerElement(rightElement, optionHandler)) {
+                  switch (this.getElementDepth(curElement, optionHandler)) {
+                    case '18':
+                      //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_18_chrom, optionHandler);
+                      break;
+                    case '37':
+                      //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_37_chrom, optionHandler);
+                      break;
+                  }
+                } else {
+                  this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenTV_Middle_chrom, optionHandler);
                 }
-              } else {
-                this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightBottom, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenTV_Middle_chrom, optionHandler);
               }
             } else {
               //Wenn das element keinen Rechten nachbarn hat
@@ -360,8 +393,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctRahmenDepthRightTop",
     value: function correctRahmenDepthRightTop(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctRahmenDepthRightTop not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightTop, this.constructionRules.DepthRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       if (boxPlannerGrid.getPlannerHasActiveBackside()) {
         //wenn das Doppelmodul aktiviert ist, setze immer den Breitenverbinder
@@ -397,21 +436,23 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
 
             //Check more if Element has right neighbor
             if (hasRightElement) {
-              var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
-
-              //Setze Breitenverbinder, wenn Nachbar rechts keinen Deckel hat oder ein Eckelement ist
-              if (!this.getElementHasTopPlate(rightNeighbor, boxPlannerGrid, optionHandler) || this.getElementIsCornerElement(rightNeighbor, optionHandler)) {
-                switch (this.getElementDepth(curElement, optionHandler)) {
-                  case '18':
-                    //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightTop, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_18_chrom, optionHandler);
-                    break;
-                  case '37':
-                    //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightTop, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_37_chrom, optionHandler);
-                    break;
+              var rightNeighbors = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+              if (rightNeighbors.length > 0) {
+                var rightNeighbor = rightNeighbors[0];
+                //Setze Breitenverbinder, wenn Nachbar rechts keinen Deckel hat oder ein Eckelement ist
+                if (!this.getElementHasTopPlate(rightNeighbor, boxPlannerGrid, optionHandler) || this.getElementIsCornerElement(rightNeighbor, optionHandler)) {
+                  switch (this.getElementDepth(curElement, optionHandler)) {
+                    case '18':
+                      //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightTop, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_18_chrom, optionHandler);
+                      break;
+                    case '37':
+                      //Wenn das Element keinen Boden hat, dann setze einen Breitenverbinden statt tiefenverbinder.
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.DepthRahmenInfo.rahmenOPT_RightTop, this.constructionRules.DepthRahmenInfo.rahmenOPVs.rahmenBV_37_chrom, optionHandler);
+                      break;
+                  }
+                  return;
                 }
-                return;
               }
 
               //es trifft nichts zu, setze normalen Tiefenverbinder für an und weiterbau
@@ -444,7 +485,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctRahmenVerticalLeftFront",
     value: function correctRahmenVerticalLeftFront(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_LeftFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (hasLeftElement) return;
       switch (this.getElementHeight(curElement, optionHandler)) {
@@ -491,7 +532,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctRahmenVerticalLeftBack",
     value: function correctRahmenVerticalLeftBack(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_LeftBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       if (elementIsOnBackside) return;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (hasLeftElement) return;
@@ -548,8 +589,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctRahmenVerticalRightFront",
     value: function correctRahmenVerticalRightFront(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctRahmenVerticalRightFront not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       switch (this.getElementHeight(curElement, optionHandler)) {
         case '6':
@@ -576,11 +623,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
               case 'CHROM':
                 //Check if element has opposide Element
                 if (hasRightElement) {
-                  var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
-                  if (this.getElementIsGarderobeElement(rightNeighbor, optionHandler)) {
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH18_Garderobe, optionHandler);
-                  } else {
-                    this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
+                  var rightNeighbors = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+                  if (rightNeighbors.length > 0) {
+                    var rightNeighbor = rightNeighbors[0];
+                    if (this.getElementIsGarderobeElement(rightNeighbor, optionHandler)) {
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH18_Garderobe, optionHandler);
+                    } else {
+                      this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
+                    }
                   }
                 } else {
                   this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightFront, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
@@ -605,7 +655,13 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctRahmenVerticalRightBack",
     value: function correctRahmenVerticalRightBack(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.noRahmen, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctRahmenVerticalRightBack not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       if (elementIsOnBackside) return;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       switch (this.getElementHeight(curElement, optionHandler)) {
@@ -633,23 +689,26 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
               case 'CHROM':
                 //Check if element has opposide Element
                 if (hasRightElement) {
-                  var rightElem = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
-                  if (!rightElem) return;
-                  if (boxPlannerGrid.getPlannerHasActiveBackside()) {
-                    var opposideElem = boxPlannerGrid.getOppositeElement(curElement.getElementId());
-                    if (!opposideElem) return;
-                    var opposideRightElement = boxPlannerGrid.getOppositeElement(rightElem.getElementId());
-                    if (!opposideRightElement) return;
-                    if (this.getElementIsGarderobeElement(rightElem, optionHandler) || this.getElementIsGarderobeElement(opposideElem, optionHandler) || this.getElementIsGarderobeElement(opposideRightElement, optionHandler)) {
-                      this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH18_Garderobe, optionHandler);
-                    } else {
-                      this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
-                    }
-                  } else {
-                    if (this.getElementIsGarderobeElement(rightElem, optionHandler)) {
-                      this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH18_Garderobe, optionHandler);
+                  var rightElems = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+                  if (rightElems.length == 0) return;
+                  if (rightElems.length > 0) {
+                    var rightElem = rightElems[0];
+                    if (boxPlannerGrid.getPlannerHasActiveBackside()) {
+                      var opposideElem = boxPlannerGrid.getOppositeElement(curElement.getElementId());
+                      if (!opposideElem) return;
+                      var opposideRightElement = boxPlannerGrid.getOppositeElement(rightElem.getElementId());
+                      if (!opposideRightElement) return;
+                      if (this.getElementIsGarderobeElement(rightElem, optionHandler) || this.getElementIsGarderobeElement(opposideElem, optionHandler) || this.getElementIsGarderobeElement(opposideRightElement, optionHandler)) {
+                        this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH18_Garderobe, optionHandler);
+                      } else {
+                        this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
+                      }
                     } else {
-                      this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
+                      if (this.getElementIsGarderobeElement(rightElem, optionHandler)) {
+                        this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH18_Garderobe, optionHandler);
+                      } else {
+                        this.setOptionValue(curElement.getElementId(), this.constructionRules.VarticalRahmenInfo.rahmenOPT_RightBack, this.constructionRules.VarticalRahmenInfo.rahmenOPVs.rahmenH37_chrom, optionHandler);
+                      }
                     }
                   }
                 } else {
@@ -678,7 +737,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "calculateKnots",
     value: function calculateKnots(boxPlannerGrid, optionHandler) {
       if (!this.constructionRules.hasKNOTS) return; //If the boxPlanner has no knots - ignore them
-      var allElements = boxPlannerGrid.getAllElementsInGrid();
+      var allElements = boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
       for (var i = 0; i < allElements.length; i++) {
         this.correctKnotLeftTopFront(allElements[i], boxPlannerGrid, optionHandler);
         this.correctKnotLeftTopBack(allElements[i], boxPlannerGrid, optionHandler);
@@ -706,8 +765,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotLeftBottomFront",
     value: function correctKnotLeftBottomFront(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotLeftBottomFront not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (boxPlannerGrid.getElementHasBottomElement(curElement.getElementId())) return;
       if (!hasLeftElement) {
@@ -723,33 +788,39 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
       //IT is the bottom Element. There has to be a left element, otherwise we have another problem
       if (this.getElementIsCornerElement(curElement, optionHandler)) {
         //Only if left is no other corner element
-        var leftElement = boxPlannerGrid.getLeftElement(curElement.getElementId());
-        //Wenn links ecke ist continue. Setze linke Ecken nur, wenn links kein Corner Element ist.
-        if (this.getElementIsCornerElement(leftElement, optionHandler)) return;
-        var rightElement = boxPlannerGrid.getRightElement(curElement.getElementId());
-        switch (this.getCornerType(curElement, optionHandler)) {
-          case 'INSIDE':
-            if (this.getElementHasBottomPlate(leftElement, optionHandler)) {
-              if (this.getElementHasBottomPlate(rightElement, optionHandler)) {
-                this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
-              } else {
-                this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
-              }
-            } else {
-              if (this.getElementHasBottomPlate(rightElement, optionHandler)) {
-                this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
-              } else {
-                this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
-              }
-            }
-            break;
-          case 'OUTSIDE':
-            if (this.getElementHasBottomPlate(leftElement, optionHandler)) {
-              this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
-            } else {
-              this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
+        var leftElements = boxPlannerGrid.getLeftElements(curElement.getElementId());
+        if (leftElements.length > 0) {
+          var leftElement = leftElements[0];
+          //Wenn links ecke ist continue. Setze linke Ecken nur, wenn links kein Corner Element ist.
+          if (this.getElementIsCornerElement(leftElement, optionHandler)) return;
+          var rightElements = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (rightElements.length > 0) {
+            var rightElement = rightElements[0];
+            switch (this.getCornerType(curElement, optionHandler)) {
+              case 'INSIDE':
+                if (this.getElementHasBottomPlate(leftElement, optionHandler)) {
+                  if (this.getElementHasBottomPlate(rightElement, optionHandler)) {
+                    this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
+                  } else {
+                    this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
+                  }
+                } else {
+                  if (this.getElementHasBottomPlate(rightElement, optionHandler)) {
+                    this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
+                  } else {
+                    this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
+                  }
+                }
+                break;
+              case 'OUTSIDE':
+                if (this.getElementHasBottomPlate(leftElement, optionHandler)) {
+                  this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
+                } else {
+                  this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
+                }
+                break;
             }
-            break;
+          }
         }
       }
     }
@@ -757,7 +828,13 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctKnotLeftTopFront",
     value: function correctKnotLeftTopFront(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotLeftTopFront not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (!hasLeftElement) {
         if (boxPlannerGrid.getPlannerHasActiveBackside() && this.getElementHasTopPlate(curElement, boxPlannerGrid, optionHandler)) {
@@ -772,38 +849,44 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
       if (this.getElementIsCornerElement(curElement, optionHandler)) {
         //wenn Element keinen Nachbarn links und keinen Nachbarn rechts hat
         var hasLeftNeighbor = boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
-        if (hasLeftElement && this.getElementIsCornerElement(boxPlannerGrid.getLeftElement(curElement.getElementId()), optionHandler)) return; //Wenn der Nachbar links ein Eckelement ist, sett diesen Knoten nicht
+        if (hasLeftElement && this.getElementIsCornerElement(boxPlannerGrid.getLeftElements(curElement.getElementId())[0], optionHandler)) return; //Wenn der Nachbar links ein Eckelement ist, sett diesen Knoten nicht
         var hasRightNeighbor = boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
         if (!hasLeftNeighbor && !hasRightNeighbor) {
           //setze in beiden Eck Fällen einen 2er Knoten mit 1GT
           this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
         } else if (hasRightNeighbor && !hasLeftNeighbor) {
           //Der Knoten hat einen rechten aber keinen linken  Nachbarn
-          var neighbor = boxPlannerGrid.getRightElement(curElement.getElementId());
-          switch (this.getCornerType(curElement, optionHandler)) {
-            case 'INSIDE':
-              if (this.getElementHasTopPlate(neighbor, boxPlannerGrid, optionHandler)) {
-                this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
-              } else {
+          var neighbors = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (neighbors.length > 0) {
+            var neighbor = neighbors[0];
+            switch (this.getCornerType(curElement, optionHandler)) {
+              case 'INSIDE':
+                if (this.getElementHasTopPlate(neighbor, boxPlannerGrid, optionHandler)) {
+                  this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
+                } else {
+                  this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
+                }
+                break;
+              case 'OUTSIDE':
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
-              }
-              break;
-            case 'OUTSIDE':
-              this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
-              break;
+                break;
+            }
           }
         } else if (!hasRightNeighbor && hasLeftNeighbor) {
           //Der Knoten hat einen linken aber keinen rechten nachbarn
-          var _neighbor = boxPlannerGrid.getLeftElement(curElement.getElementId());
-          if (this.getElementHasTopPlate(_neighbor, boxPlannerGrid, optionHandler)) {
-            this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot3erer_2GT, optionHandler);
-          } else {
-            this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
+          var _neighbors = boxPlannerGrid.getLeftElements(curElement.getElementId());
+          if (_neighbors.length > 0) {
+            var _neighbor = _neighbors[0];
+            if (this.getElementHasTopPlate(_neighbor, boxPlannerGrid, optionHandler)) {
+              this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot3erer_2GT, optionHandler);
+            } else {
+              this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
+            }
           }
         } else if (hasRightNeighbor && hasLeftNeighbor) {
           //Wenn der Knoten sowohl links als auch rechts nachbaren hat
-          var neighborLeft = boxPlannerGrid.getLeftElement(curElement.getElementId());
-          var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighborLeft = boxPlannerGrid.getLeftElements(curElement.getElementId())[0];
+          var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               if (this.getElementHasTopPlate(neighborLeft, boxPlannerGrid, optionHandler)) {
@@ -834,12 +917,18 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotLeftBottomBack",
     value: function correctKnotLeftBottomBack(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotLeftBottomBack not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomBack, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (boxPlannerGrid.getElementHasBottomElement(curElement.getElementId())) return;
       if (!hasLeftElement) {
-        if (boxPlannerGrid.getPlannerHasActiveBackside() && !boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside) {
+        if (boxPlannerGrid.getPlannerHasActiveBackside() && !boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside) {
           //The backside is set up, however the current element is at the front side of the grid
           var opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
           if (opposideElement) {
@@ -872,7 +961,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
         }
       }
       if (this.getElementIsCornerElement(curElement, optionHandler)) {
-        var neighborLeft = boxPlannerGrid.getLeftElement(curElement.getElementId());
+        var neighborLeft = boxPlannerGrid.getLeftElements(curElement.getElementId())[0];
         //setze linken Corner nur, wenn links kein Corner Element ist
         if (this.getElementIsCornerElement(neighborLeft, optionHandler)) return;
         switch (this.getCornerType(curElement, optionHandler)) {
@@ -884,7 +973,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             }
             break;
           case 'OUTSIDE':
-            var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+            var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
             if (this.getElementHasBottomPlate(neighborLeft, optionHandler)) {
               if (this.getElementHasBottomPlate(neighborRight, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftBottomBack, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
@@ -905,11 +994,17 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotLeftTopBack",
     value: function correctKnotLeftTopBack(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotLeftTopBack not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopBack, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (!hasLeftElement) {
-        if (boxPlannerGrid.getPlannerHasActiveBackside() && !boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside) {
+        if (boxPlannerGrid.getPlannerHasActiveBackside() && !boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside) {
           //The backside is set up, however the current element is at the front side of the grid
           var opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
           if (opposideElement) {
@@ -942,14 +1037,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
       if (this.getElementIsCornerElement(curElement, optionHandler)) {
         //wenn Element keinen Nachbarn links und keinen Nachbarn rechts hat
         var hasLeftNeighbor = boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
-        if (hasLeftElement && this.getElementIsCornerElement(boxPlannerGrid.getLeftElement(curElement.getElementId()), optionHandler)) return; //Wenn der Nachbar links ein Eckelement ist, sett diesen Knoten nicht
+        if (hasLeftElement && this.getElementIsCornerElement(boxPlannerGrid.getLeftElements(curElement.getElementId())[0], optionHandler)) return; //Wenn der Nachbar links ein Eckelement ist, sett diesen Knoten nicht
         var hasRightNeighbor = boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
         if (!hasLeftNeighbor && !hasRightNeighbor) {
           //setze in beiden Eck Fällen einen 2er Knoten mit 1GT
           this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
         } else if (hasRightNeighbor && !hasLeftNeighbor) {
           //Der Knoten hat einen rechten aber keinen linken  Nachbarn
-          var neighbor = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighbor = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -964,7 +1059,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           }
         } else if (!hasRightNeighbor && hasLeftNeighbor) {
           //Der Knoten hat einen linken aber keinen rechten nachbarn
-          var _neighbor2 = boxPlannerGrid.getLeftElement(curElement.getElementId());
+          var _neighbor2 = boxPlannerGrid.getLeftElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               if (this.getElementHasTopPlate(_neighbor2, boxPlannerGrid, optionHandler)) {
@@ -983,8 +1078,8 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           }
         } else if (hasRightNeighbor && hasLeftNeighbor) {
           //Wenn der Knoten sowohl links als auch rechts nachbaren hat
-          var neighborLeft = boxPlannerGrid.getLeftElement(curElement.getElementId());
-          var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighborLeft = boxPlannerGrid.getLeftElements(curElement.getElementId())[0];
+          var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               if (this.getElementHasTopPlate(neighborLeft, boxPlannerGrid, optionHandler)) {
@@ -1017,20 +1112,27 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotRightMiddleBack",
     value: function correctKnotRightMiddleBack(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotRightMiddleBack not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightMiddleBack, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
 
       //Set it only if current Element is garderobe and is on the front side
 
       if (!this.getElementIsGarderobeElement(curElement, optionHandler)) return;
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       if (elementIsOnBackside) return;
       var hasRightElement = boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       if (hasRightElement) {
         if (boxPlannerGrid.getPlannerHasActiveBackside()) {
           var opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
           if (!opposideElement) return;
-          var rightElement = boxPlannerGrid.getRightElement(curElement.getElementId());
-          if (!rightElement) return;
+          var rightElements = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (rightElements.length == 0) return;
+          var rightElement = rightElements[0];
           var opposideRightElement = boxPlannerGrid.getOppositeElement(rightElement.getElementId());
           if (!opposideRightElement) return;
           if (this.getElementIsGarderobeElement(opposideRightElement, optionHandler)) {
@@ -1047,8 +1149,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightMiddleBack, this.constructionRules.knotInfo.knotOPVs.knot2er_0GT, optionHandler);
           }
         } else {
-          var _rightElement3 = boxPlannerGrid.getRightElement(curElement.getElementId());
-          if (!_rightElement3) return;
+          var _rightElements3 = boxPlannerGrid.getRightElements(curElement.getElementId());
+          if (_rightElements3.length == 0) return;
+          var _rightElement3 = _rightElements3[0];
           if (this.getElementIsGarderobeElement(_rightElement3, optionHandler)) {
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightMiddleBack, this.constructionRules.knotInfo.knotOPVs.knot3er_0GT, optionHandler);
           } else {
@@ -1074,21 +1177,28 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotLeftMiddleBack",
     value: function correctKnotLeftMiddleBack(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotLeftMiddleBack not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_LeftMiddleBack, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
 
       //Set it only if current Element is garderobe and is on the front side and if left element is not a garderobe
       if (!this.getElementIsGarderobeElement(curElement, optionHandler)) return;
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       if (elementIsOnBackside) return;
       var hasLeftElement = elementIsOnBackside ? boxPlannerGrid.getElementHasRightElement(curElement.getElementId()) : boxPlannerGrid.getElementHasLeftElement(curElement.getElementId());
       if (hasLeftElement) {
-        var leftElement = boxPlannerGrid.getLeftElement(curElement.getElementId());
+        var leftElement = boxPlannerGrid.getLeftElements(curElement.getElementId())[0];
         if (this.getElementIsGarderobeElement(leftElement, optionHandler)) return;
       }
       if (hasLeftElement) {
         if (boxPlannerGrid.getPlannerHasActiveBackside()) {
-          var _leftElement = boxPlannerGrid.getLeftElement(curElement.getElementId());
-          if (!_leftElement) return;
+          var leftElements = boxPlannerGrid.getLeftElements(curElement.getElementId());
+          if (leftElements.length == 0) return;
+          var _leftElement = leftElements[0];
           var opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
           if (!opposideElement) return;
           var opposideLeftElement = boxPlannerGrid.getOppositeElement(_leftElement === null || _leftElement === void 0 ? void 0 : _leftElement.getElementId());
@@ -1120,8 +1230,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotRightBottomFront",
     value: function correctKnotRightBottomFront(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotRightBottomFront not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       if (boxPlannerGrid.getElementHasBottomElement(curElement.getElementId())) return;
       if (!boxPlannerGrid.getPlannerHasActiveBackside()) {
@@ -1132,7 +1248,10 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             //no right neighbor
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot1er, optionHandler);
           } else {
-            var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var rightNeighbors = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var rightNeighbor = undefined;
+            if (rightNeighbors.length > 0) rightNeighbor = rightNeighbors[0];
+
             //Only set something if element is no corner element
             if (rightNeighbor && !this.getElementIsCornerElement(rightNeighbor, optionHandler)) {
               if (!this.getElementHasBottomPlate(rightNeighbor, optionHandler)) {
@@ -1145,7 +1264,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           }
         } else {
           //Element has Ground Plate
-          var _rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+          var _rightNeighbors = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+          var _rightNeighbor = undefined;
+          if (_rightNeighbors.length > 0) _rightNeighbor = _rightNeighbors[0];
           if (_rightNeighbor && !this.getElementHasBottomPlate(_rightNeighbor, optionHandler)) {
             //if neighbor right has no ground plate
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -1159,7 +1280,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             //element has no right neighbor
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot1er, optionHandler);
           } else {
-            var _rightNeighbor2 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbors2 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var _rightNeighbor2 = undefined;
+            if (_rightNeighbors2.length > 0) _rightNeighbor2 = _rightNeighbors2[0];
             if (_rightNeighbor2) {
               if (!this.getElementHasBottomPlate(_rightNeighbor2, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot1er, optionHandler);
@@ -1174,7 +1297,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             //element has no right neighbor
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
           } else {
-            var _rightNeighbor3 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbors3 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var _rightNeighbor3 = undefined;
+            if (_rightNeighbors3.length > 0) _rightNeighbor3 = _rightNeighbors3[0];
             if (_rightNeighbor3) {
               if (!this.getElementHasBottomPlate(_rightNeighbor3, optionHandler)) {
                 //right neighbor has no ground plate
@@ -1192,13 +1317,13 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
         //Es gibt sicher einen linken und einen rechten nachbarn
         switch (this.getCornerType(curElement, optionHandler)) {
           case 'INSIDE':
-            var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+            var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
             if (neighborRight && this.getElementIsCornerElement(neighborRight, optionHandler)) {
               var hasNextNeighbor = boxPlannerGrid.getElementHasRightElement(neighborRight.getElementId());
               if (!hasNextNeighbor) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
               } else {
-                var nextNeighbor = boxPlannerGrid.getRightElement(neighborRight.getElementId());
+                var nextNeighbor = boxPlannerGrid.getRightElements(neighborRight.getElementId())[0];
                 if (this.getElementHasBottomPlate(nextNeighbor, optionHandler)) {
                   this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomFront, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
                 } else {
@@ -1222,8 +1347,14 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotRightTopFront",
     value: function correctKnotRightTopFront(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotRightTopFront not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       if (!boxPlannerGrid.getPlannerHasActiveBackside()) {
         //No active backside
@@ -1233,7 +1364,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             //element has no right neighbor
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot1er, optionHandler);
           } else {
-            var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var rightNeighbors = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var rightNeighbor = undefined;
+            if (rightNeighbors.length > 0) rightNeighbor = rightNeighbors[0];
             if (rightNeighbor && !this.getElementIsCornerElement(rightNeighbor, optionHandler)) {
               if (this.getElementHasTopPlate(rightNeighbor, boxPlannerGrid, optionHandler)) {
                 //right element has top plate
@@ -1247,7 +1380,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
         } else {
           //Element has top Plate
           if (hasRightElement) {
-            var _rightNeighbor4 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbors4 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var _rightNeighbor4 = undefined;
+            if (_rightNeighbors4.length > 0) _rightNeighbor4 = _rightNeighbors4[0];
             if (_rightNeighbor4) {
               if (!this.getElementHasTopPlate(_rightNeighbor4, boxPlannerGrid, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -1263,7 +1398,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             //element has no right neighbor
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot1er, optionHandler);
           } else {
-            var _rightNeighbor5 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbors5 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var _rightNeighbor5 = undefined;
+            if (_rightNeighbors5.length > 0) _rightNeighbor5 = _rightNeighbors5[0];
             if (_rightNeighbor5) {
               if (this.getElementHasTopPlate(_rightNeighbor5, boxPlannerGrid, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -1278,7 +1415,9 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             //element has no neighbor right
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
           } else {
-            var _rightNeighbor6 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbors6 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var _rightNeighbor6 = undefined;
+            if (_rightNeighbors6.length > 0) _rightNeighbor6 = _rightNeighbors6[0];
             if (_rightNeighbor6) {
               if (this.getElementHasTopPlate(_rightNeighbor6, boxPlannerGrid, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
@@ -1297,7 +1436,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
         } else if (hasRightNeighbor && !hasLeftNeighbor) {
           //Der Knoten hat einen rechten aber keinen linken  Nachbarn
-          var neighbor = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighbor = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               //Check if right element is Corner element
@@ -1306,7 +1445,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
                 if (!hasNextNeighbor) {
                   this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
                 } else {
-                  var nextNeighbor = boxPlannerGrid.getRightElement(neighbor.getElementId());
+                  var nextNeighbor = boxPlannerGrid.getRightElements(neighbor.getElementId())[0];
                   if (this.getElementHasTopPlate(nextNeighbor, boxPlannerGrid, optionHandler)) {
                     this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
                   } else {
@@ -1327,7 +1466,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           }
         } else if (!hasRightNeighbor && hasLeftNeighbor) {
           //Der Knoten hat einen linken aber keinen rechten nachbarn
-          boxPlannerGrid.getLeftElement(curElement.getElementId());
+          boxPlannerGrid.getLeftElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -1338,7 +1477,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           }
         } else if (hasRightNeighbor && hasLeftNeighbor) {
           //Wenn der Knoten sowohl links als auch rechts nachbaren hat
-          var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               if (this.getElementIsCornerElement(neighborRight, optionHandler)) {
@@ -1346,7 +1485,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
                 if (!_hasNextNeighbor) {
                   this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
                 } else {
-                  var _nextNeighbor = boxPlannerGrid.getRightElement(neighborRight.getElementId());
+                  var _nextNeighbor = boxPlannerGrid.getRightElements(neighborRight.getElementId())[0];
                   if (this.getElementHasTopPlate(_nextNeighbor, boxPlannerGrid, optionHandler)) {
                     this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopFront, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
                   } else {
@@ -1371,18 +1510,26 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
   }, {
     key: "correctKnotRightBottomBack",
     value: function correctKnotRightBottomBack(curElement, boxPlannerGrid, optionHandler) {
+      if (!boxPlannerGrid.getForceSingleCellPerElement()) {
+        LOG$3.error(new DivaUtils.DivaError('BoxPlannerError - function correctKnotRightBottomBack not supported for complex boxPlaner', {
+          code: 'WC_0012'
+        }));
+        return;
+      }
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomBack, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
       if (boxPlannerGrid.getElementHasBottomElement(curElement.getElementId())) return;
-      if (boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside) return;
+      if (boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside) return;
       if (!boxPlannerGrid.getPlannerHasActiveBackside()) {
         //No active backside
         if (!this.getElementHasBottomPlate(curElement, optionHandler)) {
           if (!hasRightElement) {
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomBack, this.constructionRules.knotInfo.knotOPVs.knot2er_0GT, optionHandler);
           } else {
-            var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var rightNeighbors = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var rightNeighbor = undefined;
+            if (rightNeighbors.length > 0) rightNeighbor = rightNeighbors[0];
             if (rightNeighbor && !this.getElementIsCornerElement(rightNeighbor, optionHandler)) {
               if (this.getElementHasBottomPlate(rightNeighbor, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomBack, this.constructionRules.knotInfo.knotOPVs.knot3er_1GT, optionHandler);
@@ -1394,7 +1541,11 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
         } else {
           //Element has ground plate
           if (hasRightElement) {
-            var _rightNeighbor7 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbors7 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId()) : boxPlannerGrid.getRightElements(curElement.getElementId());
+            var _rightNeighbor7 = undefined;
+            if (_rightNeighbors7.length > 0) {
+              _rightNeighbor7 = _rightNeighbors7[0];
+            }
             if (_rightNeighbor7) {
               if (!this.getElementHasBottomPlate(_rightNeighbor7, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomBack, this.constructionRules.knotInfo.knotOPVs.knot3er_1GT, optionHandler);
@@ -1437,77 +1588,6 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             }
             break;
         }
-        /*
-        if (!this.getElementHasBottomPlate(curElement, optionHandler)) {
-          //Element has no ground plate
-          if (!boxPlannerGrid.getElementHasRightElement(curElement.getElementId())) {
-            let opposideElement = boxPlannerGrid.getOppositeElement(curElement.getElementId());
-            if (opposideElement) {
-              if (this.getElementHasBottomPlate(opposideElement, optionHandler)) {
-                //The opposide element has a ground plate
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot3er_1GT,
-                  optionHandler,
-                );
-              } else {
-                //The opposide element has no ground plate
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot3er_0GT,
-                  optionHandler,
-                );
-              }
-            }
-          } else {
-            //Element has neighbor element
-            //Set the Glasteller count depending on the plates of the neighbors
-            switch (this.getGroundPlatesNumOfRightNeighbors(curElement, boxPlannerGrid, optionHandler)) {
-              case 0:
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot4er_0GT,
-                  optionHandler,
-                );
-                break;
-              case 1:
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot4er_1GT,
-                  optionHandler,
-                );
-                break;
-              case 2:
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot4er_2GT,
-                  optionHandler,
-                );
-                break;
-              case 3:
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot4er_3GT,
-                  optionHandler,
-                );
-                break;
-              case 4:
-                this.setOptionValue(
-                  curElement.getElementId(),
-                  this.constructionRules.knotInfo.knotOPT_RightBottomBack,
-                  this.constructionRules.knotInfo.knotOPVs.knot4er_4GT,
-                  optionHandler,
-                );
-                break;
-            }
-          }
-        }*/
       }
       if (this.getElementIsCornerElement(curElement, optionHandler)) {
         //Element hat sicher ienen linken und rechten nachbarn
@@ -1516,11 +1596,11 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
             break;
           case 'OUTSIDE':
-            var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+            var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
             if (this.getElementIsCornerElement(neighborRight, optionHandler)) {
               //we are on the ground, so there is shourly a nextRightElement
 
-              var nextNeighbor = boxPlannerGrid.getRightElement(neighborRight.getElementId());
+              var nextNeighbor = boxPlannerGrid.getRightElements(neighborRight.getElementId())[0];
               if (this.getElementHasBottomPlate(nextNeighbor, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightBottomBack, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
               } else {
@@ -1541,16 +1621,16 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
     key: "correctKnotRightTopBack",
     value: function correctKnotRightTopBack(curElement, boxPlannerGrid, optionHandler) {
       this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.noKnot, optionHandler);
-      var elementIsOnBackside = boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside;
+      var elementIsOnBackside = boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside;
       var hasRightElement = elementIsOnBackside ? boxPlannerGrid.getElementHasLeftElement(curElement.getElementId()) : boxPlannerGrid.getElementHasRightElement(curElement.getElementId());
-      if (boxPlannerGrid.getIndexInGridByElementId(curElement.getElementId()).backside) return;
+      if (boxPlannerGrid.getCellsInGridByElementId(curElement.getElementId()).backside) return;
       if (!boxPlannerGrid.getPlannerHasActiveBackside()) {
         if (!this.getElementHasTopPlate(curElement, boxPlannerGrid, optionHandler)) {
           if (!hasRightElement) {
             //Element has no right neighbor
             this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_0GT, optionHandler);
           } else {
-            var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var rightNeighbor = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId())[0] : boxPlannerGrid.getRightElements(curElement.getElementId())[0];
             if (rightNeighbor && !this.getElementIsCornerElement(rightNeighbor, optionHandler)) {
               if (this.getElementHasTopPlate(rightNeighbor, boxPlannerGrid, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot3er_1GT, optionHandler);
@@ -1562,7 +1642,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           }
         } else {
           if (hasRightElement) {
-            var _rightNeighbor8 = elementIsOnBackside ? boxPlannerGrid.getLeftElement(curElement.getElementId()) : boxPlannerGrid.getRightElement(curElement.getElementId());
+            var _rightNeighbor8 = elementIsOnBackside ? boxPlannerGrid.getLeftElements(curElement.getElementId())[0] : boxPlannerGrid.getRightElements(curElement.getElementId())[0];
             if (!this.getElementIsCornerElement(_rightNeighbor8, optionHandler)) {
               if (!this.getElementHasTopPlate(_rightNeighbor8, boxPlannerGrid, optionHandler)) {
                 this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot3er_1GT, optionHandler);
@@ -1614,7 +1694,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
         } else if (hasRightNeighbor && !hasLeftNeighbor) {
           //Der Knoten hat einen rechten aber keinen linken  Nachbarn
-          var neighbor = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighbor = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -1625,7 +1705,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
                 if (!hasNextNeighbor) {
                   this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
                 } else {
-                  var nextNeighbor = boxPlannerGrid.getRightElement(neighbor.getElementId());
+                  var nextNeighbor = boxPlannerGrid.getRightElements(neighbor.getElementId())[0];
                   if (this.getElementHasTopPlate(nextNeighbor, boxPlannerGrid, optionHandler)) {
                     this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
                   } else {
@@ -1647,7 +1727,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
           this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
         } else if (hasRightNeighbor && hasLeftNeighbor) {
           //Wenn der Knoten sowohl links als auch rechts nachbaren hat
-          var neighborRight = boxPlannerGrid.getRightElement(curElement.getElementId());
+          var neighborRight = boxPlannerGrid.getRightElements(curElement.getElementId())[0];
           switch (this.getCornerType(curElement, optionHandler)) {
             case 'INSIDE':
               this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot2er_1GT, optionHandler);
@@ -1658,7 +1738,7 @@ var BoxPlannerPartlistHelper = /*#__PURE__*/function () {
                 if (!_hasNextNeighbor2) {
                   this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot3er_2GT, optionHandler);
                 } else {
-                  var _nextNeighbor2 = boxPlannerGrid.getRightElement(neighborRight.getElementId());
+                  var _nextNeighbor2 = boxPlannerGrid.getRightElements(neighborRight.getElementId())[0];
                   if (this.getElementHasTopPlate(_nextNeighbor2, boxPlannerGrid, optionHandler)) {
                     this.setOptionValue(curElement.getElementId(), this.constructionRules.knotInfo.knotOPT_RightTopBack, this.constructionRules.knotInfo.knotOPVs.knot4er_3GT, optionHandler);
                   } else {
@@ -1736,7 +1816,6 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
      */
     _defineProperty__default["default"](this, "setOptionValue", function (elementId, option, optionValue, optionHandler) {
       var _optionHandler$get;
-      //LOG.log("Update Box Planner Logic.Set default Option: elementId: " + elementId + "; Option:  " + option);
       if (!optionHandler.has(elementId)) optionHandler.set(elementId, new Map());
       (_optionHandler$get = optionHandler.get(elementId)) === null || _optionHandler$get === void 0 || _optionHandler$get.set(option, optionValue);
       if (_this.hideOptionsForConstruction.has(elementId)) {
@@ -1777,14 +1856,19 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       return 'NOCORNER';
     });
     /**
-     * This function returns true, if the element has a top plate. It has a top plate if it has no element on the top or the element on the top has a ground plate.
+     * This function returns true, if the element has a top plate. It has a top plate if it has no element on the top or one of the elements on the top has a ground plate.
      * It has no top plate, if the element on top has no ground plate, like a "Garderobe"
      * @param curElement
      * @param optionHandler
      */
     _defineProperty__default["default"](this, "getElementHasTopPlate", function (curElement, boxPlannerGrid, optionHandler) {
       if (boxPlannerGrid.getElementHasTopElement(curElement.getElementId())) {
-        return _this.getElementHasBottomPlate(boxPlannerGrid.getTopElement(curElement.getElementId()), optionHandler);
+        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;
+        }
+        return oneTrueFound;
       }
       return true;
     });
@@ -1945,14 +2029,15 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
         this.setOptionValue(allElementIds[i], 'OPTCORNER_COL_R', 'OPVOHNE', optionHandler);
 
         //Check if first col or last Col are eckelemente.
-        var posInGrid = boxPlannerGrid.getIndexInGridByElementId(allElementIds[i]);
-        if (posInGrid.backside) {
+        //let posInGrid = boxPlannerGrid.getIndexInGridByElementId(allElementIds[i]);
+        var cellsInGrid = boxPlannerGrid.getCellsInGridByElementId(allElementIds[i]);
+        if (cellsInGrid.backside) {
           this.setOptionValue(allElementIds[i], 'OPTELEM_ON_BACK', 'OPVJA', optionHandler);
         } else {
           this.setOptionValue(allElementIds[i], 'OPTELEM_ON_BACK', 'OPVNEIN', optionHandler);
           //Set if col left is column with corners
-          if (posInGrid.col > 0) {
-            var leftElement = boxPlannerGrid.getPlannerElementAtGridPos(posInGrid.col - 1, 0, false);
+          if (cellsInGrid.startColIndex > 0) {
+            var leftElement = boxPlannerGrid.getPlannerElementAtGridPos(cellsInGrid.startColIndex - 1, 0, false);
             if (leftElement) {
               var cornerVal = this.getOptionVal(leftElement.getElementId(), 'OPTELEMENT', optionHandler);
               if (cornerVal == 'OPVECK_I') {
@@ -1964,8 +2049,8 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               }
             }
           }
-          if (posInGrid.col < colCount - 1) {
-            var rightElement = boxPlannerGrid.getPlannerElementAtGridPos(posInGrid.col + 1, 0, false);
+          if (cellsInGrid.endColIndex < colCount - 1) {
+            var rightElement = boxPlannerGrid.getPlannerElementAtGridPos(cellsInGrid.endColIndex + 1, 0, false);
             if (rightElement) {
               var _cornerVal = this.getOptionVal(rightElement.getElementId(), 'OPTELEMENT', optionHandler);
               if (_cornerVal == 'OPVECK_I') {
@@ -1980,13 +2065,13 @@ 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) && posInGrid.col == colCount - 1) {
+          if (this.arrayContainsValue(this.constructionRules.avoidOptionLastCol.onOPVs, elementType) && cellsInGrid.endColIndex == colCount - 1) {
             this.setOptionValue(allElementIds[i], this.constructionRules.avoidOptionLastCol.onOPT, this.constructionRules.avoidOptionLastCol.defaultOpv, optionHandler);
           }
         }
         if (this.constructionRules.avoidOptionFirstCol) {
           var _elementType = this.getOptionVal(allElementIds[i], this.constructionRules.avoidOptionFirstCol.onOPT, optionHandler);
-          if (this.arrayContainsValue(this.constructionRules.avoidOptionFirstCol.onOPVs, _elementType) && posInGrid.col == 0) {
+          if (this.arrayContainsValue(this.constructionRules.avoidOptionFirstCol.onOPVs, _elementType) && cellsInGrid.startColIndex == 0) {
             this.setOptionValue(allElementIds[i], this.constructionRules.avoidOptionFirstCol.onOPT, this.constructionRules.avoidOptionFirstCol.defaultOpv, optionHandler);
           }
         }
@@ -1995,7 +2080,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
           this.setOptionDoShow(allElementIds[i], 'OPTWERKZEUGKASTEN', optionHandler);
           //Check if set Winkel
           if (hasOPTWW) {
-            if (boxPlannerGrid.getSizeOfWholeSet().y > 173 && !boxPlannerGrid.getPlannerHasActiveBackside()) {
+            if (boxPlannerGrid.getSizeOfWholeSet(true).y > 173 && !boxPlannerGrid.getPlannerHasActiveBackside()) {
               this.setOptionDoShow(allElementIds[i], 'OPTWW', optionHandler);
             } else {
               this.setOptionDoHide(allElementIds[i], 'OPTWW', optionHandler);
@@ -2043,18 +2128,44 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
                 var doCheckRule = false;
                 if (rule.dir && targetElements && targetElements.length > 0) {
                   //If rule == dir only correct this element if it is the target
-                  if (rule.dir == 'TOP' && boxPlannerGrid.getElementHasBottomElement(allElementIds[i]) && targetElements.indexOf(boxPlannerGrid.getBottomElement(allElementIds[i]).getElementId()) >= 0) {
-                    doCheckRule = true;
+
+                  if (rule.dir == 'TOP' && boxPlannerGrid.getElementHasBottomElement(allElementIds[i])) {
+                    var bottomElements = boxPlannerGrid.getBottomElements(allElementIds[i]);
+                    for (var bElemNr = 0; bElemNr < bottomElements.length; bElemNr++) {
+                      if (targetElements.indexOf(bottomElements[bElemNr].getElementId()) >= 0) {
+                        doCheckRule = true;
+                      }
+                    }
                   }
-                  if (rule.dir == 'DOWN' && boxPlannerGrid.getElementHasTopElement(allElementIds[i]) && targetElements.indexOf(boxPlannerGrid.getTopElement(allElementIds[i]).getElementId()) >= 0) {
-                    doCheckRule = true;
+                  if (rule.dir == 'DOWN' && boxPlannerGrid.getElementHasTopElement(allElementIds[i])) {
+                    var topElements = boxPlannerGrid.getTopElements(allElementIds[i]);
+                    for (var tElemNr = 0; tElemNr < topElements.length; tElemNr++) {
+                      if (targetElements.indexOf(topElements[tElemNr].getElementId()) >= 0) {
+                        doCheckRule = true;
+                      }
+                    }
                   }
-                  if (rule.dir == 'LEFT_RIGHT' && (boxPlannerGrid.getElementHasLeftElement(allElementIds[i]) && targetElements.indexOf(boxPlannerGrid.getLeftElement(allElementIds[i]).getElementId()) >= 0 || boxPlannerGrid.getElementHasRightElement(allElementIds[i]) && targetElements.indexOf(boxPlannerGrid.getRightElement(allElementIds[i]).getElementId()) >= 0)) {
-                    doCheckRule = true;
+                  if (rule.dir == 'LEFT_RIGHT') {
+                    if (boxPlannerGrid.getElementHasLeftElement(allElementIds[i])) {
+                      var allLeftElements = boxPlannerGrid.getLeftElements(allElementIds[i]);
+                      for (var lElemNr = 0; lElemNr < allLeftElements.length; lElemNr++) {
+                        if (targetElements.indexOf(allLeftElements[lElemNr].getElementId()) >= 0) {
+                          doCheckRule = true;
+                        }
+                      }
+                    }
+                    if (boxPlannerGrid.getElementHasRightElement(allElementIds[i])) {
+                      var allRightElements = boxPlannerGrid.getRightElements(allElementIds[i]);
+                      for (var rElemNr = 0; rElemNr < allRightElements.length; rElemNr++) {
+                        if (targetElements.indexOf(allRightElements[rElemNr].getElementId()) >= 0) {
+                          doCheckRule = true;
+                        }
+                      }
+                    }
                   }
                   if (rule.dir == 'COL') {
-                    var _posInGrid = boxPlannerGrid.getIndexInGridByElementId(allElementIds[i]);
-                    var allElementsInCol = boxPlannerGrid.getAllElementsInColumn(_posInGrid.col, _posInGrid.backside);
+                    var cellPos = boxPlannerGrid.getCellsInGridByElementId(allElementIds[i]);
+                    var allElementsInCol = boxPlannerGrid.getAllElementsInColumn(cellPos.startColIndex, cellPos.backside);
                     allElementsInCol.forEach(function (plannerElement) {
                       return targetElements.indexOf(plannerElement.ElementId) >= 0 ? doCheckRule = true : undefined;
                     });
@@ -2077,7 +2188,6 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
                     if (this.arrayContainsValue(rule.unvalidOPVs, articleOPV) && this.arrayContainsValue(rule.onOPVs, changedOPTs[changedOpt])) {
                       //Es ist nicht gültig
                       this.setOptionValue(allElementIds[i], rule.influenceOPT, rule.defaultOpv, optionHandler);
-                      //article[rule.influenceOPT].val = rule.defaultOpv;
                       if (rule.warning) messageForView = rule.warning;
                     }
                   }
@@ -2138,8 +2248,8 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
           for (var opt in changedOPTs) {
             if (this.constructionRules.forceSameOptionInGrid && this.arrayContainsValue(this.constructionRules.forceSameOptionInGrid, opt)) {
               //Bitte auf alle anwenden
-              var _pos = boxPlannerGrid.getIndexInGridByElementId(targetElementId);
-              var _affectedElements = _pos.backside ? boxPlannerGrid.getAllElementsInBackGrid() : boxPlannerGrid.getAllElementsInFrontGrid();
+              var _cellPos = boxPlannerGrid.getCellsInGridByElementId(targetElementId);
+              var _affectedElements = _cellPos.backside ? boxPlannerGrid.getAllElementsInBackGrid() : boxPlannerGrid.getAllElementsInFrontGrid();
               if (_affectedElements != undefined) {
                 for (var i = 0; i < _affectedElements.length; i++) {
                   this.setOptionValue(_affectedElements[i].ElementId, opt, changedOPTs[opt], optionHandler);
@@ -2148,12 +2258,12 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
             }
             if (this.arrayContainsValue(this.constructionRules.forceSameOptionInCol, opt)) {
               //Bitte auf alle anwenden
-              var _pos2 = boxPlannerGrid.getIndexInGridByElementId(targetElementId);
-              var _affectedElements2 = boxPlannerGrid.getAllElementsInColumn(_pos2.col, _pos2.backside);
+              var _cellPos2 = boxPlannerGrid.getCellsInGridByElementId(targetElementId);
+              var _affectedElements2 = boxPlannerGrid.getAllElementsInColumn(_cellPos2.startColIndex, _cellPos2.backside);
               if (_affectedElements2 != undefined) {
                 if (boxPlannerGrid.getPlannerHasActiveBackside()) {
                   var _affectedElements3;
-                  var affectedBackside = boxPlannerGrid.getAllElementsInColumn(_pos2.col, !_pos2.backside);
+                  var affectedBackside = boxPlannerGrid.getAllElementsInColumn(_cellPos2.startColIndex, !_cellPos2.backside);
                   if (affectedBackside) _affectedElements2 = (_affectedElements3 = _affectedElements2) === null || _affectedElements3 === void 0 ? void 0 : _affectedElements3.concat(affectedBackside);
                 }
                 for (var i = 0; i < _affectedElements2.length; i++) {
@@ -2163,11 +2273,11 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
             }
             if (this.arrayContainsValue(this.constructionRules.forceSameOptionInRow, opt)) {
               //Bitte auf alle anwenden
-              var _pos3 = boxPlannerGrid.getIndexInGridByElementId(targetElementId);
-              var affectedElements = boxPlannerGrid.getAllElementsInRow(_pos3.row, _pos3.backside);
+              var _cellPos3 = boxPlannerGrid.getCellsInGridByElementId(targetElementId);
+              var affectedElements = boxPlannerGrid.getAllElementsInRow(_cellPos3.startRowIndex, _cellPos3.backside);
               if (affectedElements) {
                 if (boxPlannerGrid.getPlannerHasActiveBackside()) {
-                  var _affectedBackside = boxPlannerGrid.getAllElementsInRow(_pos3.row, !_pos3.backside);
+                  var _affectedBackside = boxPlannerGrid.getAllElementsInRow(_cellPos3.startRowIndex, !_cellPos3.backside);
                   if (_affectedBackside) affectedElements = affectedElements.concat(_affectedBackside);
                 }
               }
@@ -2179,8 +2289,8 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
         }
 
         //if the targetElement has another height than the other elements in the col - force same height
-        var pos = boxPlannerGrid.getIndexInGridByElementId(targetElementId);
-        var allElementsInRow = boxPlannerGrid.getAllElementsInRow(pos.row, pos.backside);
+        var cellPos = boxPlannerGrid.getCellsInGridByElementId(targetElementId);
+        var allElementsInRow = boxPlannerGrid.getAllElementsInRow(cellPos.startRowIndex, cellPos.backside);
         for (var i = 0; i < allElementsInRow.length; i++) {
           if (allElementsInRow[i].getElementId() == targetElementId) continue;
           for (var j = 0; j < this.constructionRules.forceSameOptionInRow.length; j++) {
@@ -2322,34 +2432,58 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       }
 
       //Korrigiere if it has neighbors
-      var rightElem = !fromBackside ? boxPlannerGrid.getRightElement(curElement.ElementId) : boxPlannerGrid.getLeftElement(curElement.ElementId);
-      var leftElem = !fromBackside ? boxPlannerGrid.getLeftElement(curElement.ElementId) : boxPlannerGrid.getRightElement(curElement.ElementId);
-      var topElem = boxPlannerGrid.getTopElement(curElement.ElementId);
-      var bottomElem = boxPlannerGrid.getBottomElement(curElement.ElementId);
-      var topRihtElem = !fromBackside ? boxPlannerGrid.getTopRightElement(curElement.ElementId) : boxPlannerGrid.getTopLeftElement(curElement.ElementId);
-      if (rightElem) {
-        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_RECHTS', this.getOptionVal(rightElem.ElementId, 'OPTELEMENT', optionHandler), optionHandler);
+      var rightElemts = !fromBackside ? boxPlannerGrid.getRightElements(curElement.ElementId) : boxPlannerGrid.getLeftElements(curElement.ElementId);
+      var leftElemts = !fromBackside ? boxPlannerGrid.getLeftElements(curElement.ElementId) : boxPlannerGrid.getRightElements(curElement.ElementId);
+      var topElemts = boxPlannerGrid.getTopElements(curElement.ElementId);
+      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 DivaUtils.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);
+        }
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_RECHTS', optionHandler);
       }
-      if (leftElem) {
-        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_LINKS', this.getOptionVal(leftElem.ElementId, 'OPTELEMENT', optionHandler), optionHandler);
+      if (leftElemts.length > 0) {
+        if (leftElemts.length > 1) {
+          LOG$2.error(new DivaUtils.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);
+        }
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_LINKS', optionHandler);
       }
-      if (topElem) {
-        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_OBEN', this.getOptionVal(topElem.ElementId, 'OPTELEMENT', optionHandler), optionHandler);
+      if (topElemts.length > 0) {
+        if (topElemts.length > 1) {
+          LOG$2.error(new DivaUtils.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);
+        }
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_OBEN', optionHandler);
       }
-      if (topRihtElem) {
-        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_OBEN_RECHTS', this.getOptionVal(topRihtElem.ElementId, 'OPTELEMENT', optionHandler), optionHandler);
+      if (topRightElemt) {
+        this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_OBEN_RECHTS', this.getOptionVal(topRightElemt.ElementId, 'OPTELEMENT', optionHandler), optionHandler);
       } else {
         this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_OBEN_RECHTS', optionHandler);
       }
       if (this.constructionRules.hasNeighbors && this.constructionRules.hasNeighbors.indexOf('OPTNACHBAR_UNTEN') >= 0) {
-        if (bottomElem) {
-          this.setOptionValue(curElement.ElementId, 'OPTNACHBAR_UNTEN', this.getOptionVal(bottomElem.ElementId, 'OPTELEMENT', optionHandler), optionHandler);
+        if (bottomElemts.length > 0) {
+          if (bottomElemts.length > 1) {
+            LOG$2.error(new DivaUtils.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);
+          }
         } else {
           this.setOptionDoHide(curElement.ElementId, 'OPTNACHBAR_UNTEN', optionHandler);
         }
@@ -2485,7 +2619,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       //Zuerst korrigieren wir die unterste Reihe, indem wir die richtigen leitern setzen
       var allBottomElements = boxPlannerGrid.getAllElementsInRow(this.constructionRules.correctLadder.rowIndex, false);
       for (var i = 0; i < allBottomElements.length; i++) {
-        var rowCount = boxPlannerGrid.getRowCount(i);
+        var rowCount = boxPlannerGrid.getRowCount(i, false);
         //If the count of elements in column is not valid for the height 18, then the height is corrected
         if (this.constructionRules.correctLadder.onElementHighestRowCount) {
           if (this.constructionRules.correctLadder.onElementHighestRowCount.indexOf(rowCount) == -1) {
@@ -2575,7 +2709,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
 
           var curColI = 0;
           var elementsPerCol = boxPlannerGrid.getAllElementsInColumn(curColI, false);
-          while (elementsPerCol != undefined) {
+          while (elementsPerCol.length > 0) {
             if (elementsPerCol.length == sizeOfHighesRow) {
               var element = elementsPerCol[sizeOfHighesRow - 1];
               curRow.push(element);
@@ -2615,12 +2749,12 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               opvValue = 'OPVABDECKPLATTE_227';
             }
             if (opvValue != '' && !oneCornerColumn) {
-              var _allElements = boxPlannerGrid.getAllElementsInGrid();
+              var _allElements = boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
               for (var _i = 0; _i < _allElements.length; _i++) {
                 if (this.checkArticleHasOption(_allElements[_i].getElementId(), 'OPTABD_HIDE')) this.setOptionDoHide(_allElements[_i].getElementId(), 'OPTABD_HIDE', optionHandler);
               }
             } else {
-              var _allElements2 = boxPlannerGrid.getAllElementsInGrid();
+              var _allElements2 = boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
               for (var _i2 = 0; _i2 < _allElements2.length; _i2++) {
                 if (this.checkArticleHasOption(_allElements2[_i2].getElementId(), 'OPTABD_HIDE')) this.setOptionDoShow(_allElements2[_i2].getElementId(), 'OPTABD_HIDE', optionHandler);
               }
@@ -2640,8 +2774,8 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
   }, {
     key: "correctForceOptOfElement",
     value: function correctForceOptOfElement(curElementId, boxPlannerGrid, optionHandler, fromBackside) {
-      var curElemPos = boxPlannerGrid.getIndexInGridByElementId(curElementId);
-      if (!curElemPos) return;
+      var curCellPos = boxPlannerGrid.getCellsInGridByElementId(curElementId);
+      if (curCellPos.cells.length == 0) return;
       var rulesForCurArticle = this.getCurOptionBasedConstructionRules(curElementId, optionHandler);
       for (var ruleNum = 0; ruleNum < rulesForCurArticle.length; ruleNum++) {
         //Das muss angepasst werden die Option
@@ -2661,88 +2795,86 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               if (fromBackside) {
                 if (tempComplementDir == 'LEFT') tempComplementDir = 'RIGHT';else if (tempComplementDir == 'RIGHT') tempComplementDir = 'LEFT';
               }
-              var neighbourElement = boxPlannerGrid.getNeighborElement(curElemPos.col, curElemPos.row, tempComplementDir, curElemPos.backside);
-              if (neighbourElement != undefined) {
-                //Check complementary option
-                /*
-                if (forceOptValue == "dShow") {
-                  //beim aktuellen artikel MUSS es gesetzt werden
-                  this.setOptionDoShow(curElementId, optName, optionHandler);
-                }*/
-                var rulesForNeighborArticle = this.getCurOptionBasedConstructionRules(neighbourElement.ElementId, optionHandler);
-                var complementOptName = optInfo.complementOPT;
-                var complementOptNameIsForce = false;
-                for (var ruleNum2 = 0; ruleNum2 < rulesForNeighborArticle.length; ruleNum2++) {
-                  if (!rulesForNeighborArticle[ruleNum2].forceOptions) continue;
-                  for (var forceOptNum2 = 0; forceOptNum2 < rulesForNeighborArticle[ruleNum2].forceOptions.length; forceOptNum2++) {
-                    var forceOption2 = rulesForNeighborArticle[ruleNum2].forceOptions[forceOptNum2];
-                    if (forceOption2.rule && forceOption2.rule != '') {
-                      if (!this.evalRule(neighbourElement.ElementId, forceOption2.rule, optionHandler)) continue;
-                    }
-                    if (this.arrayContainsValue(forceOption2.options, complementOptName)) {
-                      //Es wurde gefunden als FORCE. jetzt müssen beide angepasst werden.
-                      complementOptNameIsForce = true;
-                      //case 2 curOption is force und complementOPT is force
-                      // - Beide to show: Show opt von actConfig, hide complementOPT
-                      // - Beide to hide: Hide both options
-                      if (forceOptValue == 'doShow' && forceOption2.value == 'doShow') {
-                        //Zeige option von aktuellem an und hide andere
-                        //setOptionDoShow(curArticle, optName);
-                        //Außnahme wenn Beide Element mit FUELLUNG sind - da darf jetzt keine Füllung dazwischen sein.
-                        if (this.getOptionVal(curElementId, 'OPTELEMENT', optionHandler) == 'OPVFUELLUNG' && this.getOptionVal(neighbourElement.ElementId, 'OPTELEMENT', optionHandler) == 'OPVFUELLUNG') {
-                          this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
-                          this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
-                        } else {
-                          this.setOptionDoShow(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
-                        }
+              var neighbourElements = boxPlannerGrid.getNeighborElements(curElementId, tempComplementDir);
+              if (neighbourElements.length > 0) {
+                for (var i = 0; i < neighbourElements.length; i++) {
+                  //Check complementary option
+                  var neighbourElement = neighbourElements[i];
+                  var rulesForNeighborArticle = this.getCurOptionBasedConstructionRules(neighbourElement.ElementId, optionHandler);
+                  var complementOptName = optInfo.complementOPT;
+                  var complementOptNameIsForce = false;
+                  for (var ruleNum2 = 0; ruleNum2 < rulesForNeighborArticle.length; ruleNum2++) {
+                    if (!rulesForNeighborArticle[ruleNum2].forceOptions) continue;
+                    for (var forceOptNum2 = 0; forceOptNum2 < rulesForNeighborArticle[ruleNum2].forceOptions.length; forceOptNum2++) {
+                      var forceOption2 = rulesForNeighborArticle[ruleNum2].forceOptions[forceOptNum2];
+                      if (forceOption2.rule && forceOption2.rule != '') {
+                        if (!this.evalRule(neighbourElement.ElementId, forceOption2.rule, optionHandler)) continue;
                       }
-                      if (forceOptValue == 'doHide' && forceOption2.value == 'doHide') {
-                        //Hide beide
-                        this.setOptionDoHide(curElementId, optName, optionHandler);
-                        this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
-                      }
-                      if (forceOptValue == 'doShow' && forceOption2.value == 'doHide' || forceOptValue == 'doHide' && forceOption2.value == 'doShow') {
-                        //Tausche die Option Element vom anderen!
-                        //Now evaluate if one option has the higher prio than the other. The lower the number the higher the prio. If the prio is the same - do nothing!
-                        var doPrioCurArt = true;
-                        if (forceOption.prio && forceOption2.prio) {
-                          doPrioCurArt = forceOption.prio <= forceOption2.prio;
-                        } else if (forceOption.prio) {
-                          doPrioCurArt = true;
-                        } else if (forceOption2.prio) {
-                          doPrioCurArt = false;
-                        }
-                        if (doPrioCurArt) {
-                          if (forceOptValue == 'doHide') {
-                            this.setOptionDoHide(curElementId, optName, optionHandler);
-                            this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
-                          } else if (forceOptValue == 'doShow') {
-                            this.setOptionDoShow(curElementId, optName, optionHandler); //In diesem Fall müssen beide gesetzt werden
+                      if (this.arrayContainsValue(forceOption2.options, complementOptName)) {
+                        //Es wurde gefunden als FORCE. jetzt müssen beide angepasst werden.
+                        complementOptNameIsForce = true;
+                        //case 2 curOption is force und complementOPT is force
+                        // - Beide to show: Show opt von actConfig, hide complementOPT
+                        // - Beide to hide: Hide both options
+                        if (forceOptValue == 'doShow' && forceOption2.value == 'doShow') {
+                          //Zeige option von aktuellem an und hide andere
+                          //setOptionDoShow(curArticle, optName);
+                          //Außnahme wenn Beide Element mit FUELLUNG sind - da darf jetzt keine Füllung dazwischen sein.
+                          if (this.getOptionVal(curElementId, 'OPTELEMENT', optionHandler) == 'OPVFUELLUNG' && this.getOptionVal(neighbourElement.ElementId, 'OPTELEMENT', optionHandler) == 'OPVFUELLUNG') {
                             this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
-                          }
-                        } else {
-                          if (forceOption2.value == 'doHide') {
-                            this.setOptionDoHide(curElementId, optName, optionHandler);
                             this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
-                          } else if (forceOption2.value == 'doShow') {
-                            this.setOptionDoHide(curElementId, optName, optionHandler);
+                          } else {
                             this.setOptionDoShow(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
                           }
                         }
+                        if (forceOptValue == 'doHide' && forceOption2.value == 'doHide') {
+                          //Hide beide
+                          this.setOptionDoHide(curElementId, optName, optionHandler);
+                          this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
+                        }
+                        if (forceOptValue == 'doShow' && forceOption2.value == 'doHide' || forceOptValue == 'doHide' && forceOption2.value == 'doShow') {
+                          //Tausche die Option Element vom anderen!
+                          //Now evaluate if one option has the higher prio than the other. The lower the number the higher the prio. If the prio is the same - do nothing!
+                          var doPrioCurArt = true;
+                          if (forceOption.prio && forceOption2.prio) {
+                            doPrioCurArt = forceOption.prio <= forceOption2.prio;
+                          } else if (forceOption.prio) {
+                            doPrioCurArt = true;
+                          } else if (forceOption2.prio) {
+                            doPrioCurArt = false;
+                          }
+                          if (doPrioCurArt) {
+                            if (forceOptValue == 'doHide') {
+                              this.setOptionDoHide(curElementId, optName, optionHandler);
+                              this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
+                            } else if (forceOptValue == 'doShow') {
+                              this.setOptionDoShow(curElementId, optName, optionHandler); //In diesem Fall müssen beide gesetzt werden
+                              this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
+                            }
+                          } else {
+                            if (forceOption2.value == 'doHide') {
+                              this.setOptionDoHide(curElementId, optName, optionHandler);
+                              this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
+                            } else if (forceOption2.value == 'doShow') {
+                              this.setOptionDoHide(curElementId, optName, optionHandler);
+                              this.setOptionDoShow(neighbourElement.ElementId, complementOptName, optionHandler); //In diesem Fall müssen beide gesetzt werden
+                            }
+                          }
+                        }
                       }
                     }
                   }
-                }
-                if (!complementOptNameIsForce) {
-                  //Case 1 curOption is force and complementOPT is obligatory
-                  // Zeige curOption an oder nicht an - complementOPT wird NICHT angezeigt
-                  if (forceOptValue == 'doShow') {
-                    this.setOptionDoShow(curElementId, optName, optionHandler);
-                    this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
-                  }
-                  if (forceOptValue == 'doHide') {
-                    this.setOptionDoHide(curElementId, optName, optionHandler);
-                    this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
+                  if (!complementOptNameIsForce) {
+                    //Case 1 curOption is force and complementOPT is obligatory
+                    // Zeige curOption an oder nicht an - complementOPT wird NICHT angezeigt
+                    if (forceOptValue == 'doShow') {
+                      this.setOptionDoShow(curElementId, optName, optionHandler);
+                      this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
+                    }
+                    if (forceOptValue == 'doHide') {
+                      this.setOptionDoHide(curElementId, optName, optionHandler);
+                      this.setOptionDoHide(neighbourElement.ElementId, complementOptName, optionHandler);
+                    }
                   }
                 }
               } else {
@@ -2781,30 +2913,17 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
         }
       }
     }
-
-    /*
-    "_comment_correctRetailArticleNumberByRule": "Specifies that SAP numbers have to be switched when all Elements (range=global) satisfy the rule",
-        "range": "global",
-        "rule": "OPTFARBE_RAHMEN=OPVCHROM&OPTFARBE=OPVWEISS",
-        "retailArticleRules": [
-          {
-            "origRetailArticleNr": 91194,
-            "origPrefix": "SAP",
-            "newRetailArticleNr": 90771,
-            "newPrefix": "SAP"
-          },
-    */
   }, {
     key: "correctNeighborCustomOLTs",
     value: function correctNeighborCustomOLTs(curElementId, boxPlannerGrid, optionHandler) {
       if (!this.constructionRules.correctNeighborOPT || this.constructionRules.correctNeighborOPT.length == 0) return;
       for (var i = 0; i < this.constructionRules.correctNeighborOPT.length; i++) {
-        var curElemPos = boxPlannerGrid.getIndexInGridByElementId(curElementId);
+        var curCellPos = boxPlannerGrid.getCellsInGridByElementId(curElementId);
         this.setOptionValue(curElementId, this.constructionRules.correctNeighborOPT[i].opt, 'OPVOHNE', optionHandler);
-        if (!curElemPos) return;
-        var neighbourElement = boxPlannerGrid.getNeighborElement(curElemPos.col, curElemPos.row, this.constructionRules.correctNeighborOPT[i].dir, curElemPos.backside);
-        if (neighbourElement != undefined) {
-          var optionNeighborVal = this.getOptionVal(neighbourElement.ElementId, this.constructionRules.correctNeighborOPT[i].neighborOPT, optionHandler);
+        if (curCellPos.cells.length == 0) return;
+        var neighbourElements = boxPlannerGrid.getNeighborElements(curElementId, this.constructionRules.correctNeighborOPT[i].dir);
+        if (neighbourElements.length > 0) {
+          var optionNeighborVal = this.getOptionVal(neighbourElements[0].ElementId, this.constructionRules.correctNeighborOPT[i].neighborOPT, optionHandler);
           if (optionNeighborVal != '') this.setOptionValue(curElementId, this.constructionRules.correctNeighborOPT[i].opt, optionNeighborVal, optionHandler);
         }
       }
@@ -2812,7 +2931,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
   }, {
     key: "doChangeRetailArticleNumbers",
     value: function doChangeRetailArticleNumbers(boxPlannerGrid, optionHandler) {
-      var allElements = boxPlannerGrid.getAllElementsInGrid();
+      var allElements = boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
       if (this.constructionRules.correctRetailArticleNumberByRule && this.constructionRules.correctRetailArticleNumberByRule.length > 0) {
         var allValid = true;
         for (var i = 0; i < this.constructionRules.correctRetailArticleNumberByRule.length; i++) {
@@ -2904,26 +3023,26 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               if (boxPlannerGrid.getPlannerHasActiveBackside()) this.correctBottom(boxPlannerGrid, optionHandler, true);
               this.correctSeries(boxPlannerGrid, optionHandler);
               for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
-                for (j = 0; j < boxPlannerGrid.getRowCount(i); j++) {
+                for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
                   this.correctSimpleOpt(i, j, boxPlannerGrid, optionHandler, false);
                 }
               }
               if (boxPlannerGrid.getPlannerHasActiveBackside()) {
                 for (i = boxPlannerGrid.getColumnCount() - 1; i >= 0; i--) {
-                  for (j = 0; j < boxPlannerGrid.getRowCount(i); j++) {
+                  for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
                     this.correctSimpleOpt(i, j, boxPlannerGrid, optionHandler, true);
                   }
                 }
               }
               for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
-                for (j = 0; j < boxPlannerGrid.getRowCount(i); j++) {
+                for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
                   this.correctForceOptOfElement(boxPlannerGrid.getPlannerElementAtGridPos(i, j, false).ElementId, boxPlannerGrid, optionHandler, false);
                   this.correctNeighborCustomOLTs(boxPlannerGrid.getPlannerElementAtGridPos(i, j, false).ElementId, boxPlannerGrid, optionHandler);
                 }
               }
               if (boxPlannerGrid.getPlannerHasActiveBackside()) {
                 for (i = boxPlannerGrid.getColumnCount() - 1; i >= 0; i--) {
-                  for (j = 0; j < boxPlannerGrid.getRowCount(i); j++) {
+                  for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
                     this.correctForceOptOfElement(boxPlannerGrid.getPlannerElementAtGridPos(i, j, true).ElementId, boxPlannerGrid, optionHandler, true);
                     this.correctNeighborCustomOLTs(boxPlannerGrid.getPlannerElementAtGridPos(i, j, true).ElementId, boxPlannerGrid, optionHandler);
                   }
@@ -2933,7 +3052,7 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
               this.partlistHelper.calculateKnots(boxPlannerGrid, optionHandler);
               this.partlistHelper.calculateRahmen(boxPlannerGrid, optionHandler);
               for (i = 0; i < boxPlannerGrid.getColumnCount(); i++) {
-                for (j = 0; j < boxPlannerGrid.getRowCount(i); j++) {
+                for (j = 0; j < boxPlannerGrid.getRowCount(i, false); j++) {
                   this.correctBack(boxPlannerGrid, optionHandler, boxPlannerGrid.getPlannerElementAtGridPos(i, j, false).getElementId());
                 }
               }
@@ -3003,99 +3122,208 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
   }]);
 }();
 
-var LOG$1 = DivaUtils__default["default"].initLog('Planner', 'WEB-PLANNER-LOGIC');
+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; }
+var LOG$1 = DivaUtils__default["default"].initLog('Planner', 'BOX-PLANNER_GRID');
 var BoxPlannerGrid = /*#__PURE__*/function () {
-  function BoxPlannerGrid(getValueOfOptionOfArticle) {
+  function BoxPlannerGrid(gridSetupParams, getValueOfOptionOfArticle) {
     _classCallCheck__default["default"](this, BoxPlannerGrid);
-    _defineProperty__default["default"](this, "plannedElementGrid", void 0);
-    _defineProperty__default["default"](this, "backModulPlannedElementGrid", void 0);
-    //Contains the reversed grid accessible from the other side
+    _defineProperty__default["default"](this, "plannerElements", void 0);
+    _defineProperty__default["default"](this, "frontGrid", void 0);
+    //first entry is width, second height
+    _defineProperty__default["default"](this, "backGrid", void 0);
+    //if cell is empty it is undefined
     _defineProperty__default["default"](this, "hasActiveBackside", void 0);
     _defineProperty__default["default"](this, "getValueOfOptionOfArticle", void 0);
-    this.plannedElementGrid = new Array(new Array());
-    this.backModulPlannedElementGrid = new Array(new Array());
-    this.hasActiveBackside = false;
+    _defineProperty__default["default"](this, "gridSetupParams", void 0);
+    this.plannerElements = new Map();
+    this.frontGrid = new Array();
+    this.backGrid = new Array();
+    this.gridSetupParams = gridSetupParams;
     this.getValueOfOptionOfArticle = getValueOfOptionOfArticle;
+    this.hasActiveBackside = false;
   }
 
-  /*
-   * Gibt die Breite einer Spalte im Grid zurück. Die Spalte ist immer so breit wie das breiteste Element darin
+  /**
+   * This function creates the new cells that are needed when copying an element
+   * @param newElement
+   * @param startColIndex
+   * @param startRowIndex
+   * @returns
    */
   return _createClass__default["default"](BoxPlannerGrid, [{
+    key: "createNewCells",
+    value: function createNewCells(newElement, startColIndex, startRowIndex, backside) {
+      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(),
+          index: new index.Vector2(startColIndex, startRowIndex)
+        };
+        return {
+          cells: [cell],
+          startColIndex: startColIndex,
+          endColIndex: startColIndex,
+          startRowIndex: startRowIndex,
+          endRowIndex: startRowIndex,
+          backside: backside,
+          colCount: 1,
+          rowCount: 1
+        };
+      }
+      if (!this.gridSetupParams.forceFixCellRasterSize) {
+        LOG$1.error(new DivaUtils.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 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,
+            index: new index.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
+      };
+    }
+  }, {
+    key: "createEmptyCells",
+    value: function createEmptyCells(colStartIndex, rowStartIndex, colEndIndex, rowEndIndex, refElementWidth, refElementHeight) {
+      var cells = [];
+      for (var i = colStartIndex; i <= colEndIndex; i++) {
+        for (var j = rowStartIndex; j <= rowEndIndex; j++) {
+          var cell = {
+            plannerElementId: -1,
+            width: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterWidth : refElementWidth,
+            height: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterHeight : refElementHeight,
+            index: new index.Vector2(i, j)
+          };
+          cells.push(cell);
+        }
+      }
+      return cells;
+    }
+
+    /**
+     * This function returns the amount of cols and rows an element occupies inside the grid
+     * @param element
+     * @returns
+     */
+  }, {
+    key: "getCellCount",
+    value: function getCellCount(element) {
+      if (this.gridSetupParams.forceSingleCellPerElement) {
+        return {
+          colCount: 1,
+          rowCount: 1
+        };
+      }
+      var colCount = Math.round(element.getWidth() / this.gridSetupParams.fixCellRasterWidth);
+      var rowCount = Math.round(element.getHeight() / this.gridSetupParams.fixCellRasterWidth);
+      return {
+        colCount: colCount,
+        rowCount: rowCount
+      };
+    }
+    /** this function returns all not Empty cells in the grid */
+  }, {
+    key: "getAllUsedCellsInGrid",
+    value: function getAllUsedCellsInGrid(backside) {
+      var allCellsInGrid = new Array();
+      var curGrid = backside ? this.backGrid : this.frontGrid;
+      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]);
+        }
+      }
+      return allCellsInGrid;
+    }
+
+    /*
+     * Gibt die Breite einer Spalte im Grid zurück. Die Spalten sind immer gleich breit
+     */
+  }, {
     key: "getGridColumnWidth",
-    value: function getGridColumnWidth(columnIndex, fromBackmodul) {
-      var biggestWidth = -1;
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      for (var j = 0; j < curElementGrid[columnIndex].length; j++) {
-        var width = curElementGrid[columnIndex][j] ? curElementGrid[columnIndex][j].Width == undefined ? 0 : curElementGrid[columnIndex][j].Width : 0;
-        if (width > biggestWidth) biggestWidth = width;
+    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;
       }
-      return biggestWidth;
+      return 0;
     }
+
+    /**
+     * Gibt die Höhe einer Spalte zurück
+     * @param columnIdex
+     * @returns
+     */
   }, {
     key: "getGridColumnHeight",
     value: function getGridColumnHeight(columnIdex) {
       var height = 0;
-      if (this.plannedElementGrid.length > columnIdex) {
-        var allElementsInCol = this.plannedElementGrid[columnIdex];
-        for (var i = 0; i < allElementsInCol.length; i++) {
-          var _allElementsInCol$i;
-          height += (_allElementsInCol$i = allElementsInCol[i]) === null || _allElementsInCol$i === void 0 ? void 0 : _allElementsInCol$i.Height;
+      var firstElementFound = false;
+      if (this.frontGrid.length > columnIdex) {
+        var allCellsInCol = this.frontGrid[columnIdex];
+        for (var i = allCellsInCol.length; i >= 0; i--) {
+          if (!firstElementFound && allCellsInCol[i]) firstElementFound = true;
+          if (firstElementFound) height += allCellsInCol[i] == undefined ? 0 : allCellsInCol[i].height;
         }
       }
       return height;
     }
+
     /*
        Deletes the Element on the specified grid Position. If there is no other element in the column, the whole column is deleted.
        */
   }, {
-    key: "deleteGridPos",
-    value: function deleteGridPos(gridPos) {
-      var helperGrid = new Array();
-      var curElementGrid = gridPos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (curElementGrid[gridPos.col].length == 1) {
-        //Lösche ganze spalte
-        for (var i = 0; i < curElementGrid.length; i++) {
-          if (i == gridPos.col) {
-            //Diese Spalte kann gelöscht werden, also nicht mitnehmen
-            continue;
-          }
-          if (i < gridPos.col) {
-            helperGrid[i] = curElementGrid[i];
-          } else {
-            helperGrid[i - 1] = curElementGrid[i];
+    key: "deleteElementByIdFromGrid",
+    value: function deleteElementByIdFromGrid(elementIdTodelete) {
+      var gridCellsToDelete = this.getCellsInGridByElementId(elementIdTodelete);
+      var curGrid = gridCellsToDelete.backside ? this.backGrid : this.frontGrid;
+      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;
           }
-        }
-      } else {
-        //Lösche nur Element
-        for (var i = 0; i < curElementGrid.length; i++) {
-          if (i != gridPos.col) {
-            //Diese Spalte kann gelöscht werden, also nicht mitnehmen
-            helperGrid[i] = curElementGrid[i];
-          } else {
-            helperGrid[i] = new Array();
-            for (var j = 0; j < curElementGrid[i].length; j++) {
-              if (j != gridPos.row) {
-                helperGrid[i][j] = curElementGrid[i][j];
-              }
-            }
+          if (!curGrid[curCellFrontGrid.index.x]) {
+            curGrid[curCellFrontGrid.index.x] = [];
           }
+          curGrid[curCellFrontGrid.index.x][curCellFrontGrid.index.y] = curCellFrontGrid;
         }
       }
-      if (gridPos.backside) {
-        this.backModulPlannedElementGrid = helperGrid;
-      } else {
-        this.plannedElementGrid = helperGrid;
-      }
+      if (gridCellsToDelete.backside) this.backGrid = curGrid;else this.frontGrid = curGrid;
     }
 
-    /*
-          private correctWorldPosInGrid(plannerElement: PlannerElementData) {
-              //Braucht es das überhaupt?
-          }
-      */
-
     /**
+     * CHECK OK
      * This function returns the ElementID of the element at a specific GridPosition.
      * If there is no element at this position, the function returns undefined
      * @param curXPos
@@ -3104,111 +3332,182 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getPlannerElementAtGridPos",
     value: function getPlannerElementAtGridPos(curXPos, curYPos, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
+      var curElementGrid = fromBackmodul ? this.backGrid : this.frontGrid;
       if (curElementGrid[curXPos] && curElementGrid[curXPos][curYPos]) {
-        return curElementGrid[curXPos][curYPos];
+        var cell = curElementGrid[curXPos][curYPos];
+        if (cell == undefined) return undefined;
+        return this.plannerElements.get(cell.plannerElementId);
       }
       return undefined;
     }
-
     /**
+     *
      * This function returns the index of an element by elementId in the grid.
      * It returns the column and row position in the grid and if it is in the front or backgrid
+     * With onlin it is possible, that one element occupies more than one grid cell. All occupied grid cells are returned in an array
      * @param elementId
      */
   }, {
-    key: "getIndexInGridByElementId",
-    value: function getIndexInGridByElementId(elementId) {
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          if (this.plannedElementGrid[i][j] && this.plannedElementGrid[i][j].ElementId == elementId) return {
-            col: i,
-            row: j,
-            backside: false
-          };
+    key: "getCellsInGridByElementId",
+    value: function getCellsInGridByElementId(elementId) {
+      var firstCell = undefined;
+      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;
+          }
         }
       }
-      for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-        for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-          if (this.backModulPlannedElementGrid[i][j] && this.backModulPlannedElementGrid[i][j].ElementId == elementId) return {
-            col: i,
-            row: j,
-            backside: true
-          };
+      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;
+            }
+          }
+        }
+      }
+      if (firstCell == undefined) return {
+        cells: [],
+        backside: false,
+        startColIndex: -1,
+        endColIndex: -1,
+        startRowIndex: -1,
+        endRowIndex: -1,
+        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;
+          }
         }
       }
       return {
-        col: -1,
-        row: -1,
-        backside: false
+        cells: cells,
+        backside: onBacksideFound,
+        startColIndex: startColIndex,
+        endColIndex: endColIndex,
+        startRowIndex: startRowIndex,
+        endRowIndex: endRowIndex,
+        colCount: endColIndex - startColIndex + 1,
+        rowCount: endRowIndex - startRowIndex + 1
       };
     }
+
     /**
      * This function returns all elementIds that are inside the grid
      */
   }, {
     key: "getAllElementIdsInGrid",
     value: function getAllElementIdsInGrid() {
+      return Array.from(this.plannerElements.keys());
+    }
+  }, {
+    key: "_getAllElementsInGrid",
+    value: function _getAllElementsInGrid(grid) {
       var allElementIds = [];
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          if (this.plannedElementGrid[i][j]) allElementIds.push(this.plannedElementGrid[i][j].ElementId);
-        }
-      }
-      for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-        for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-          if (this.backModulPlannedElementGrid[i][j]) allElementIds.push(this.backModulPlannedElementGrid[i][j].ElementId);
+      var allElements = [];
+      for (var i = 0; i < grid.length; i++) {
+        for (var j = 0; j < grid[i].length; j++) {
+          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));
+          }
         }
       }
-      return allElementIds;
+      return allElements;
     }
   }, {
     key: "getAllElementsInFrontGrid",
     value: function getAllElementsInFrontGrid() {
-      var allElements = [];
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          allElements.push(this.plannedElementGrid[i][j]);
-        }
-      }
-      return allElements;
+      return this._getAllElementsInGrid(this.frontGrid);
     }
   }, {
     key: "getAllElementsInBackGrid",
     value: function getAllElementsInBackGrid() {
-      var allElements = [];
-      for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-        for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-          allElements.push(this.backModulPlannedElementGrid[i][j]);
-        }
-      }
-      return allElements;
+      return this._getAllElementsInGrid(this.backGrid);
+    }
+  }, {
+    key: "getAllElementsInBacksideModuleGrid",
+    value: function getAllElementsInBacksideModuleGrid() {
+      return this._getAllElementsInGrid(this.backGrid).map(function (element) {
+        return element.ElementId;
+      });
     }
     /**
      * This function returns all elements In grid - from frontside and from backside
      */
   }, {
-    key: "getAllElementsInGrid",
-    value: function getAllElementsInGrid() {
-      var allElements = [];
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          allElements.push(this.plannedElementGrid[i][j]);
+    key: "getAllElementsInGridSortedbyElementId",
+    value: function getAllElementsInGridSortedbyElementId() {
+      return Array.from(this.plannerElements.values());
+    }
+  }, {
+    key: "getAllElementsInGridSortedbyGridPos",
+    value: function getAllElementsInGridSortedbyGridPos() {
+      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);
+            returnElements.push(element);
+          }
         }
       }
-      for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-        for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-          if (this.backModulPlannedElementGrid[i][j]) allElements.push(this.backModulPlannedElementGrid[i][j]);
+      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);
+            returnElements.push(_element);
+          }
         }
       }
-      return allElements;
+      return returnElements;
     }
   }, {
     key: "getElementById",
     value: function getElementById(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      return curElementGrid[pos.col][pos.row];
+      return this.plannerElements.get(elementId);
     }
 
     /**
@@ -3218,8 +3517,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementIsFirstInGrid",
     value: function getElementIsFirstInGrid(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      return pos.col == 0 && pos.row == 0 && !pos.backside;
+      var result = this.getCellsInGridByElementId(elementId);
+      if (result.cells.length == 0) return false;
+      return result.cells[0].index.x == 0 && result.cells[0].index.y == 0 && !result.backside;
     }
 
     /**
@@ -3229,9 +3529,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementIsInLastCol",
     value: function getElementIsInLastCol(elementId, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      var pos = this.getIndexInGridByElementId(elementId);
-      return pos.col + 1 == curElementGrid.length;
+      var curElementGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var result = this.getCellsInGridByElementId(elementId);
+      return result.endColIndex + 1 == curElementGrid.length;
     }
 
     /**
@@ -3241,22 +3541,39 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementHasTopElement",
     value: function getElementHasTopElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (curElementGrid[pos.col].length > pos.row + 1) return true;
+      var result = this.getCellsInGridByElementId(elementId);
+      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      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]) {
+          return true;
+        }
+      }
       return false;
     }
+
     /**
-     * returns the element on the top of the current element
+     * returns the elements on the top of the current element
      * @param elementId
      */
   }, {
-    key: "getTopElement",
-    value: function getTopElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (curElementGrid[pos.col].length > pos.row + 1) return curElementGrid[pos.col][pos.row + 1];
-      return undefined;
+    key: "getTopElements",
+    value: function getTopElements(elementId) {
+      var result = this.getCellsInGridByElementId(elementId);
+      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      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));
+          }
+        }
+      }
+      return neighborPlannerElements;
     }
 
     /**
@@ -3266,9 +3583,12 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getTopRightElement",
     value: function getTopRightElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (curElementGrid.length > pos.col + 1 && curElementGrid[pos.col + 1][pos.row + 1] != undefined) return curElementGrid[pos.col + 1][pos.row + 1];
+      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);
+      }
       return undefined;
     }
 
@@ -3279,11 +3599,15 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getTopLeftElement",
     value: function getTopLeftElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (pos.col > 0 && curElementGrid[pos.col - 1][pos.row - 1] != undefined) return curElementGrid[pos.col - 1][pos.row - 1];
+      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);
+      }
       return undefined;
     }
+
     /**
      * returns true if the element has another element on the bottom
      * @param elementId
@@ -3291,22 +3615,40 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementHasBottomElement",
     value: function getElementHasBottomElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      if (pos.row - 1 >= 0) return true;
+      var result = this.getCellsInGridByElementId(elementId);
+      if (result.startRowIndex - 1 >= 0) return true;
       return false;
     }
+
     /**
-     * returns the element on the bottom of the current element
+     * returns all elements on the bottom of the current element from left to right
+     * now following construction of elements is possible. When you want to return the bottom elements of a it returns b,c,d
+     * aaaaaa
+     * bbccdd
+     *
      * @param elementId
      */
   }, {
-    key: "getBottomElement",
-    value: function getBottomElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (pos.row - 1 >= 0) return curElementGrid[pos.col][pos.row - 1];
-      return undefined;
+    key: "getBottomElements",
+    value: function getBottomElements(elementId) {
+      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));
+            }
+          }
+        }
+      }
+      return bottomElements;
     }
+
     /**
      * returns true if the element has another element on its right side
      * @param elementId
@@ -3314,22 +3656,41 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementHasRightElement",
     value: function getElementHasRightElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (curElementGrid.length > pos.col + 1) {
-        if (curElementGrid[pos.col + 1][pos.row] != undefined) return true;
+      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];
+        if (cell) return true;
       }
       return false;
     }
+    /**
+     * returns all elements right  of the current element from bottom to up
+     * now following construction of elements is possible. When getting right Elements of Element a it returns b and c
+     * aabb
+     * aabb
+     * aacc
+     * @param elementId
+     */
   }, {
-    key: "getRightElement",
-    value: function getRightElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      var curElementGrid = pos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (curElementGrid.length > pos.col + 1) {
-        if (curElementGrid[pos.col + 1][pos.row] != undefined) return curElementGrid[pos.col + 1][pos.row];
+    key: "getRightElements",
+    value: function getRightElements(elementId) {
+      var result = this.getCellsInGridByElementId(elementId);
+      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      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));
+            }
+          }
+        }
       }
-      return undefined;
+      return rightElements;
     }
 
     /**
@@ -3339,39 +3700,72 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "getElementHasLeftElement",
     value: function getElementHasLeftElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      if (pos.col > 0 && this.getPlannerElementAtGridPos(pos.col - 1, pos.row, pos.backside) != undefined) return true;
+      var result = this.getCellsInGridByElementId(elementId);
+      var curGrid = result.backside ? this.backGrid : this.frontGrid;
+      if (result.startColIndex > 0 && curGrid[result.startColIndex - 1][result.startRowIndex]) {
+        return true;
+      }
       return false;
     }
+    /**
+     * returns all elements left of the current element from bottom to up
+     * now following construction of elements is possible. When getting left Elements of Element a it returns b and c
+     * bbaa
+     * bbaa
+     * ccaa
+     * @param elementId
+     */
   }, {
-    key: "getLeftElement",
-    value: function getLeftElement(elementId) {
-      var pos = this.getIndexInGridByElementId(elementId);
-      if (pos.col > 0 && this.getPlannerElementAtGridPos(pos.col - 1, pos.row, pos.backside) != undefined) return this.getPlannerElementAtGridPos(pos.col - 1, pos.row, pos.backside);
-      return undefined;
+    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));
+            }
+          }
+        }
+      }
+      return leftElements;
     }
+
     /*
+    CHECK OK
     returns all Elements in the column. 
     index: index of the column in the grid
     */
   }, {
     key: "getAllElementsInColumn",
     value: function getAllElementsInColumn(index, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      var result = new Array();
-      if (index >= curElementGrid.length) return undefined;
-      for (var i = 0; i < curElementGrid[index].length; i++) {
-        if (curElementGrid[index][i]) result.push(curElementGrid[index][i]);
+      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
+      var allElements = [];
+      var allElementIds = [];
+      if (curGrid.length > index) {
+        for (var i = 0; i < curGrid[index].length; i++) {
+          var cell = curGrid[index][i];
+          if (cell && allElementIds.indexOf(cell.plannerElementId) == -1) {
+            allElementIds.push(cell.plannerElementId);
+            allElements.push(this.plannerElements.get(cell.plannerElementId));
+          }
+        }
       }
-      return curElementGrid.length > index ? result : undefined;
+      return allElements;
     }
+
     /**
      * This function returns the count of columns in the grid
      */
   }, {
     key: "getColumnCount",
     value: function getColumnCount() {
-      return this.plannedElementGrid.length;
+      return this.frontGrid.length;
     }
 
     /**
@@ -3380,95 +3774,171 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
      */
   }, {
     key: "getRowCount",
-    value: function getRowCount(colIndex) {
-      return this.plannedElementGrid[colIndex].length;
+    value: function getRowCount(colIndex, fromBackmodul) {
+      return fromBackmodul ? this.backGrid[colIndex].length : this.frontGrid[colIndex].length;
     }
 
     /*
+    CHECK OK
     returns all Elements in the row of the grid. 
     index: index of the row in the grid
     */
   }, {
     key: "getAllElementsInRow",
     value: function getAllElementsInRow(index, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
+      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
       var allElements = [];
-      for (var i = 0; i < curElementGrid.length; i++) {
-        if (curElementGrid[i].length > index) allElements.push(curElementGrid[i][index]);
+      var allElementIds = [];
+      for (var i = 0; i < curGrid.length; i++) {
+        if (curGrid[i].length > index) {
+          var cell = curGrid[i][index];
+          if (cell && allElementIds.indexOf(cell.plannerElementId) == -1) {
+            allElementIds.push(cell.plannerElementId);
+            allElements.push(this.plannerElements.get(cell.plannerElementId));
+          }
+        }
       }
       return allElements;
     }
 
     /**
+     * CHECK OK
      * This function returns the size of the highes row element over all columns
      */
   }, {
     key: "getSizeOfHighesRow",
     value: function getSizeOfHighesRow(fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
+      var curGrid = fromBackmodul ? this.backGrid : this.frontGrid;
       var highestRow = 0;
-      for (var i = 0; i < curElementGrid.length; i++) {
-        if (highestRow < curElementGrid[i].length) highestRow = curElementGrid[i].length;
+      for (var i = 0; i < curGrid.length; i++) {
+        for (var j = curGrid[i].length; j >= 0; j--) {
+          var cell = curGrid[i][j];
+          if (cell) {
+            if (highestRow < j) highestRow = j;
+            break; //first cell that is not empty was found, skip this loop
+          }
+        }
       }
-      return highestRow;
+      return highestRow + 1;
     }
 
     /**
-     * This function returns the neighbor element in the grid
+     * This function returns the neighbor elements in the grid. Now it can be more than one element.
+     * If for example the element has several grid cells in one colum, the function checks all grid cells on the right side. It returns then one or more Elements, depending on the construction
+     * Example:
+     * AAB
+     * AAB
+     * AAC
+     * The right elements of A are B and C
      * @param curXPos
      * @param curYPos
      * @param dir
      */
   }, {
-    key: "getNeighborElement",
-    value: function getNeighborElement(curXPos, curYPos, dir, fromBackmodul) {
-      var neighborXPos = curXPos;
-      var neighborYPos = curYPos;
+    key: "getNeighborElements",
+    value: function getNeighborElements(elementId, dir) {
+      console.log('ELEMENT ID beim aufruf von getNeighborElements ' + elementId + '; dir: ' + dir);
+      var cellPos = this.getCellsInGridByElementId(elementId);
+      var curGrid = cellPos.backside ? this.backGrid : this.frontGrid;
+      var result = [];
+      var resultPlannerIds = [];
       switch (dir) {
         case 'TOP':
-          neighborYPos++;
+          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':
-          neighborYPos--;
+          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));
+              }
+            }
+          }
           break;
         case 'LEFT':
-          neighborXPos--;
+          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));
+              }
+            }
+          }
           break;
         case 'RIGHT':
-          neighborXPos++;
+          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));
+              }
+            }
+          }
           break;
         case 'BACK':
           if (this.hasActiveBackside) {
-            fromBackmodul = !fromBackmodul;
+            var plannerElement = this.getPlannerElementAtGridPos(cellPos.startColIndex, cellPos.startRowIndex, true);
+            if (plannerElement != undefined) result = [plannerElement];
           }
           break;
       }
-      return this.getPlannerElementAtGridPos(neighborXPos, neighborYPos, fromBackmodul);
+      return result;
     }
+
+    /**
+     * Returns the opposide element in the grid. This function only looks at the element that is placed at the same grid pos as the start Col und start Row Index of the element.
+     * It always returns only one element or none
+     * @param elementId
+     * @returns
+     */
   }, {
     key: "getOppositeElement",
     value: function getOppositeElement(elementId) {
       if (this.hasActiveBackside) {
-        var pos = this.getIndexInGridByElementId(elementId);
+        var pos = this.getCellsInGridByElementId(elementId);
         if (pos.backside) {
-          return this.plannedElementGrid[pos.col][pos.row];
+          return this.getPlannerElementAtGridPos(pos.startColIndex, pos.startRowIndex, false);
         } else {
-          return this.backModulPlannedElementGrid[pos.col][pos.row];
+          return this.getPlannerElementAtGridPos(pos.startColIndex, pos.startRowIndex, true);
         }
       }
       return undefined;
     }
+    /**
+     * Returns the opposide elements in the grid given an array of element ids. This function only looks at the element that is placed at the same grid pos as the start Col und start Row Index of the element.
+     * It always returns only one element or none
+     * @param elementId
+     * @returns
+     */
   }, {
-    key: "getAllOppositeElements",
-    value: function getAllOppositeElements(elementIds) {
+    key: "getOppositeElements",
+    value: function getOppositeElements(elementIds) {
       var oppositeElements = [];
       if (this.hasActiveBackside) {
         for (var i = 0; i < elementIds.length; i++) {
-          var pos = this.getIndexInGridByElementId(elementIds[i]);
-          if (pos.backside) {
-            oppositeElements.push(this.plannedElementGrid[pos.col][pos.row].getElementId());
-          } else {
-            if (this.backModulPlannedElementGrid[pos.col][pos.row]) oppositeElements.push(this.backModulPlannedElementGrid[pos.col][pos.row].getElementId());
+          var oppositeElement = this.getOppositeElement(elementIds[i]);
+          if (oppositeElement != undefined) {
+            oppositeElements.push(oppositeElement);
           }
         }
       }
@@ -3481,20 +3951,23 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
      */
   }, {
     key: "getSizeOfWholeSet",
-    value: function getSizeOfWholeSet() {
+    value: function getSizeOfWholeSet(correctSizeSystem4) {
       var width = 0;
       var depth = 0;
       var height = 0;
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
+      var checkedElementIds = [];
+      for (var i = 0; i < this.frontGrid.length; i++) {
         var curHeight = 0;
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          var element = this.plannedElementGrid[i][j];
-          curHeight += element.getHeight();
-          if (i == 0 && j == 0) depth = element.getDepth();
+        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();
+          }
         }
         if (curHeight > height) height = curHeight;
-        var curWidth = this.getGridColumnWidth(i, false);
-        if (i > 0) {
+        var curWidth = this.getGridColumnWidth(i);
+        if (correctSizeSystem4 && i > 0) {
           //Correct width
           if (curWidth == 77.9) curWidth = 75;else if (curWidth == 40.4) curWidth = 37.5;else if (curWidth == 21.7) curWidth = 18.75;
         }
@@ -3505,193 +3978,226 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     }
 
     /**
-     * Returns all other elements in the grid that are in the same row as the elementId from the parameter
+     * Returns all other elements in the grid that are in the same row as the elementId from the parameter. It only returns the elements on along the startRowIndex
+     * Excample:
+     * AAC
+     * AAB
+     * AABD
+     * EEED
+     * The elements that are in the same row as A are B and D
      * @param elementId
      */
   }, {
     key: "getAllElementsInSameRowByElementId",
     value: function getAllElementsInSameRowByElementId(elementId) {
-      var gridPos = this.getIndexInGridByElementId(elementId);
-      var allElementsInRow = this.getAllElementsInRow(gridPos.row, false);
+      var curPos = this.getCellsInGridByElementId(elementId);
+      var allElementsInRow = this.getAllElementsInRow(curPos.startRowIndex, false);
       if (this.hasActiveBackside) {
-        allElementsInRow = allElementsInRow.concat(this.getAllElementsInRow(gridPos.row, true));
+        allElementsInRow = allElementsInRow.concat(this.getAllElementsInRow(curPos.startRowIndex, true));
       }
       return {
         elementIds: allElementsInRow.map(function (obj) {
           return obj.ElementId;
         }),
         plannerElements: allElementsInRow,
-        backside: gridPos.backside
+        backside: curPos.backside
       };
     }
 
     /**
      * Returns all Elements that are under the specified element
+     * AAAE
+     * BBCE
+     * DDDD
+     * DDDD
+     * The Elements that are under A are B, C and D
      */
   }, {
     key: "getAllElementsDown",
     value: function getAllElementsDown(elementId) {
-      var gridPos = this.getIndexInGridByElementId(elementId);
-      if (gridPos.row == 0) return {
+      var curPos = this.getCellsInGridByElementId(elementId);
+      if (curPos.startRowIndex == 0) return {
         elements: [],
         backside: false
       };
-      var otherElements = [];
-      for (var i = 0; i < gridPos.row; i++) {
-        var elem = this.getPlannerElementAtGridPos(gridPos.col, i, gridPos.backside);
-        if (elem != undefined) {
-          otherElements.push(elem.ElementId);
+      var curGrid = curPos.backside ? this.backGrid : this.frontGrid;
+      var resultPlannerIds = [];
+      for (var i = curPos.startColIndex; i <= curPos.endColIndex; i++) {
+        for (var j = curPos.startRowIndex--; j >= 0; j--) {
+          var neighborCell = curGrid[i][j];
+          if (neighborCell && resultPlannerIds.indexOf(neighborCell.plannerElementId) == -1) {
+            resultPlannerIds.push(neighborCell.plannerElementId);
+          }
         }
       }
       return {
-        elements: otherElements,
-        backside: gridPos.backside
+        elements: resultPlannerIds,
+        backside: curPos.backside
       };
     }
+    /**
+     * Returns all other elements in the grid that are in the same col as the elementId from the parameter. It only returns the elements on along the startRowIndex
+     * Excample:
+     * HHHH
+     * FAAC
+     * FAAB
+     * FAABD
+     * FEEED
+     * GGGGG
+     * The elements that are in the same col  as A are E, G and H
+     * @param elementId
+     */
   }, {
     key: "getAllElementsInSameCol",
     value: function getAllElementsInSameCol(elementId) {
-      var gridPos = this.getIndexInGridByElementId(elementId);
-      var allElements = this.getAllElementsInColumn(gridPos.col, gridPos.backside);
+      var curPos = this.getCellsInGridByElementId(elementId);
+      var allElements = this.getAllElementsInColumn(curPos.startColIndex, curPos.backside);
       if (allElements == undefined) allElements = [];
       return {
         elements: allElements.map(function (obj) {
           return obj.ElementId;
         }),
-        backside: gridPos.backside
+        backside: curPos.backside
       };
     }
   }, {
-    key: "prepareGridForCopy",
-    value: function prepareGridForCopy(elementId, copyDir) {
-      var gridPos = this.getIndexInGridByElementId(elementId);
-      var colIndexToMove = 0;
-      switch (copyDir) {
-        case 'AVL':
-          colIndexToMove = gridPos.col;
-          break;
-        case 'AVR':
-          colIndexToMove = gridPos.col + 1;
-          break;
-      }
-      //Move alle Elemente mit dem gleichen Index um 1 nach rechts.
-      var helperGrid = new Array();
-      //First init all x arrays
-      for (var i = 0; i < this.plannedElementGrid.length + 1; i++) {
-        helperGrid[i] = new Array();
-      }
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          if (i < colIndexToMove) {
-            helperGrid[i][j] = this.plannedElementGrid[i][j];
-          } else {
-            helperGrid[i + 1][j] = this.plannedElementGrid[i][j];
-          }
+    key: "prepareGridForColCopy",
+    value: function prepareGridForColCopy(elementId, copyDir) {
+      if (copyDir == 'AVO') return;
+      var elementToCopyPos = this.getCellsInGridByElementId(elementId);
+      this.plannerElements.get(elementId);
+      //Kopiere das Grid nach rechts abhängig von der Breite des aktuellen Elementes
+      //now correct all indices in all cells:
+
+      var copyStartIndex = 0;
+      if (copyDir == 'AVR') copyStartIndex = elementToCopyPos.endColIndex + 1;else if (copyDir == 'AVL') copyStartIndex = elementToCopyPos.startColIndex;
+      var copyIndexCount = 1 + (elementToCopyPos.endColIndex - elementToCopyPos.startColIndex);
+      var allUsedCellsFrontGrid = this.getAllUsedCellsInGrid(false);
+      this.frontGrid = new Array();
+      for (var i = 0; i < allUsedCellsFrontGrid.length; i++) {
+        var curCellFrontGrid = allUsedCellsFrontGrid[i];
+        if (curCellFrontGrid.index.x >= copyStartIndex) {
+          curCellFrontGrid.index.x += copyIndexCount;
         }
+        if (!this.frontGrid[curCellFrontGrid.index.x]) {
+          this.frontGrid[curCellFrontGrid.index.x] = [];
+        }
+        this.frontGrid[curCellFrontGrid.index.x][curCellFrontGrid.index.y] = curCellFrontGrid;
+      }
+      //Init empty cols
+      for (var i = copyStartIndex; i < copyStartIndex + copyIndexCount; i++) {
+        if (!this.frontGrid[i]) this.frontGrid[i] = [];
       }
-      this.plannedElementGrid = helperGrid;
       if (this.hasActiveBackside) {
-        helperGrid = new Array();
-        //First init all x arrays
-        for (var i = 0; i < this.backModulPlannedElementGrid.length + 1; i++) {
-          helperGrid[i] = new Array();
-        }
-        for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-          for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-            if (i < colIndexToMove) {
-              helperGrid[i][j] = this.backModulPlannedElementGrid[i][j];
-            } else {
-              helperGrid[i + 1][j] = this.backModulPlannedElementGrid[i][j];
-            }
+        var allUsedCellsBackGrid = this.getAllUsedCellsInGrid(true);
+        this.backGrid = new Array();
+        for (var i = 0; i < allUsedCellsBackGrid.length; i++) {
+          var curCellBackGrid = allUsedCellsBackGrid[i];
+          if (curCellBackGrid.index.x >= copyStartIndex) {
+            curCellBackGrid.index.x += copyIndexCount;
           }
+          if (!this.backGrid[curCellBackGrid.index.x]) {
+            this.backGrid[curCellBackGrid.index.x] = [];
+          }
+          this.backGrid[curCellBackGrid.index.x][curCellBackGrid.index.y] = curCellBackGrid;
+        }
+
+        //Init empty cols
+        for (var i = copyStartIndex; i < copyStartIndex + copyIndexCount; i++) {
+          if (!this.backGrid[i]) this.backGrid[i] = [];
         }
-        this.backModulPlannedElementGrid = helperGrid;
       }
     }
   }, {
     key: "prepareGridForBackSideCopy",
     value: function prepareGridForBackSideCopy() {
-      this.backModulPlannedElementGrid = new Array();
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        this.backModulPlannedElementGrid.push(new Array());
-      }
+      this.backGrid = new Array();
       this.hasActiveBackside = true;
     }
+
+    /**
+     * This function adds an element to the grid. It gives the start col and row and calculates how many grid cells are used by the element
+     * @param newElement
+     * @param col
+     * @param row
+     * @param fromBackmodul
+     */
   }, {
     key: "addElementAtGridPos",
     value: function addElementAtGridPos(newElement, col, row, fromBackmodul) {
-      var curElementGrid = fromBackmodul ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      if (!curElementGrid || curElementGrid.length == 0) {
-        curElementGrid = new Array();
-      }
-      if (!curElementGrid[col] || curElementGrid[col].length == 0) {
-        curElementGrid[col] = new Array();
-      }
-      curElementGrid[col][row] = newElement;
-      if (fromBackmodul) {
-        this.hasActiveBackside = true;
-        this.backModulPlannedElementGrid = curElementGrid;
-      } else {
-        this.plannedElementGrid = curElementGrid;
+      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
+        if (!curGrid[cell.index.x]) {
+          curGrid[cell.index.x] = [];
+        }
+        curGrid[cell.index.x][cell.index.y] = cell;
       }
+      this.plannerElements.set(newElement.getElementId(), newElement);
+      if (fromBackmodul) this.hasActiveBackside = true;
     }
+
+    /**
+     * Assume that the grid is already prepared and there is enough empty space for the new element.
+     * @param elementIDToCopy
+     * @param newElement
+     * @param copyInfo
+     */
   }, {
     key: "addElementAsCopy",
     value: function addElementAsCopy(elementIDToCopy, newElement, copyDir) {
-      var gridPos = this.getIndexInGridByElementId(elementIDToCopy);
-      var curElementGrid = gridPos.backside ? this.backModulPlannedElementGrid : this.plannedElementGrid;
-      var updateGrid = true;
+      var curPos = this.getCellsInGridByElementId(elementIDToCopy);
+      var startColIndexForCopy = -1;
+      var startRowIndexForCopy = -1;
+      var backsideForCopy = copyDir == 'BACKSIDE' ? !curPos.backside : curPos.backside;
+      var cellCount = this.getCellCount(newElement);
       switch (copyDir) {
         case 'AVR':
-          curElementGrid[gridPos.col + 1][gridPos.row] = newElement;
+          startColIndexForCopy = curPos.endColIndex + 1;
+          startRowIndexForCopy = curPos.startRowIndex;
           break;
         case 'AVL':
-          curElementGrid[gridPos.col - 1][gridPos.row] = newElement;
+          startColIndexForCopy = curPos.startColIndex - cellCount.colCount;
+          startRowIndexForCopy = curPos.startRowIndex;
           break;
         case 'AVO':
-          curElementGrid[gridPos.col][gridPos.row + 1] = newElement;
+          startColIndexForCopy = curPos.startColIndex;
+          startRowIndexForCopy = curPos.endRowIndex + 1;
           break;
         case 'BACKSIDE':
-          this.backModulPlannedElementGrid[gridPos.col][gridPos.row] = newElement;
-          updateGrid = false;
+          startColIndexForCopy = curPos.startColIndex;
+          startRowIndexForCopy = curPos.startRowIndex;
           break;
       }
-      if (updateGrid) {
-        if (gridPos.backside) {
-          this.backModulPlannedElementGrid = curElementGrid;
-        } else {
-          this.plannedElementGrid = curElementGrid;
-        }
+      var newCellInfos = this.createNewCells(newElement, startColIndexForCopy, startRowIndexForCopy, 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];
       }
+      this.plannerElements.set(newElement.getElementId(), newElement);
     }
 
     /**
      * This function deletes an Element from the grid.
      * If backsideModule is active, than the oppsite Element is deleted as well
      * If the boxPlanner_backside switch deletion type is set, do not delete the opposite element
+     * If the last element in col was deleted, do delete whole col.
      * @param elementId
-     * @returns all elements that are deleted - it can happen that multiple elements get deleted
      */
   }, {
     key: "deleteElement",
     value: function deleteElement(elementId, deletionType) {
-      var gridPos = this.getIndexInGridByElementId(elementId);
-      var elementsToDelete = [];
-      if (this.hasActiveBackside && (!deletionType || deletionType != 'BoxPlanner_backside')) {
-        //Delete also element on the opposide side
-        elementsToDelete.push(this.backModulPlannedElementGrid[gridPos.col][gridPos.row]);
-      }
-      elementsToDelete.push(this.plannedElementGrid[gridPos.col][gridPos.row]);
-      var result = [];
-      for (var i = 0; i < elementsToDelete.length; i++) {
-        PlannerHandler2D.dockingPointHandlerInst.removeDockingPointRelations(elementsToDelete[i]);
-        if (!deletionType || deletionType != 'BoxPlanner_backside') this.deleteGridPos(this.getIndexInGridByElementId(elementsToDelete[i].ElementId));else if (deletionType && deletionType == 'BoxPlanner_backside') {
-          //Do not delete gridPos - only delete element.
-          this.backModulPlannedElementGrid[gridPos.col][gridPos.row] = undefined;
-        }
-        result.push(elementsToDelete[i].getElementId());
-      }
-      return result;
+      if (!this.plannerElements.has(elementId)) {
+        LOG$1.error(new DivaUtils.DivaError('Try to delete an elementId that does not exist'));
+      }
+      this.getCellsInGridByElementId(elementId);
+      PlannerHandler2D.dockingPointHandlerInst.removeDockingPointRelations(this.plannerElements.get(elementId));
+      this.deleteElementByIdFromGrid(elementId);
+      this.plannerElements["delete"](elementId);
+      if (this.hasActiveBackside) ;
     }
 
     /**
@@ -3701,55 +4207,65 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "updateWorldPosOfElements",
     value: function updateWorldPosOfElements() {
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          var plannerElement = this.plannedElementGrid[i][j];
-          PlannerHandler2D.dockingPointHandlerInst.removeDockingPointRelations(plannerElement);
-        }
-      }
-      if (this.hasActiveBackside) {
-        for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-          for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-            var _plannerElement = this.backModulPlannedElementGrid[i][j];
-            if (_plannerElement) PlannerHandler2D.dockingPointHandlerInst.removeDockingPointRelations(_plannerElement);
-          }
+      //First remove all docking Point relation information
+      var _iterator = _createForOfIteratorHelper(this.plannerElements.values()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _element3 = _step.value;
+          PlannerHandler2D.dockingPointHandlerInst.removeDockingPointRelations(_element3);
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
       var posNr = 1;
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          var _plannerElement2 = this.plannedElementGrid[i][j];
-          if (this.plannedElementGrid[i] && this.plannedElementGrid[i][j + 1]) {
-            //Has top Element   correct dp
-            PlannerHandler2D.dockingPointHandlerInst.tryDockElement(_plannerElement2, 'AVO', [this.plannedElementGrid[i][j + 1]]);
+      //First remove all docking Point relation information
+
+      var allCheckedElementIds = [];
+      for (var i = 0; i < this.frontGrid.length; i++) {
+        for (var j = 0; j < this.frontGrid[i].length; j++) {
+          var cell = this.frontGrid[i][j];
+          if (allCheckedElementIds.indexOf(cell.plannerElementId) == -1) {
+            var element = this.plannerElements.get(cell.plannerElementId);
+            allCheckedElementIds.push(cell.plannerElementId);
+            var topNeighbors = this.getNeighborElements(cell.plannerElementId, 'TOP');
+            var rightNeighbors = this.getNeighborElements(cell.plannerElementId, 'RIGHT');
+            for (var n = 0; n < topNeighbors.length; n++) {
+              PlannerHandler2D.dockingPointHandlerInst.tryDockElement(element, 'AVO', [topNeighbors[n]]);
+            }
+            for (var n = 0; n < rightNeighbors.length; n++) {
+              PlannerHandler2D.dockingPointHandlerInst.tryDockElement(element, 'AVR', [rightNeighbors[n]]);
+            }
+            element.PosNr = posNr;
+            posNr++;
           }
-          //correct PosNr
-          _plannerElement2.PosNr = posNr;
-          posNr++;
-        }
-        //check if Elements are on the right side and dock them
-        if (this.plannedElementGrid[i + 1] && this.plannedElementGrid[i + 1][0]) {
-          PlannerHandler2D.dockingPointHandlerInst.tryDockElement(this.plannedElementGrid[i][0], 'AVR', [this.plannedElementGrid[i + 1][0]]);
         }
       }
-      if (this.hasActiveBackside) {
-        for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-          for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-            var _plannerElement3 = this.backModulPlannedElementGrid[i][j];
-            var targetDPFirstGrid = this.plannedElementGrid[i][j].getDockingPointById('AVO_AVO_2_IL');
-            if (!targetDPFirstGrid) LOG$1.error(new DivaUtils.DivaError('Error Loading DockingPoint AVO_2 for plannerElement'));else if (_plannerElement3) PlannerHandler2D.dockingPointHandlerInst.tryDockElementToDP(_plannerElement3, this.plannedElementGrid[i][j], targetDPFirstGrid);
-            if (this.backModulPlannedElementGrid[i] && this.backModulPlannedElementGrid[i][j + 1]) {
-              //Has top Element   correct dp
-              if (_plannerElement3 && this.backModulPlannedElementGrid[i][j + 1]) PlannerHandler2D.dockingPointHandlerInst.tryDockElement(_plannerElement3, 'AVO', [this.backModulPlannedElementGrid[i][j + 1]]);
+      for (var i = 0; i < this.backGrid.length; i++) {
+        for (var j = 0; j < this.backGrid[i].length; j++) {
+          var _cell4 = this.backGrid[i][j];
+          if (allCheckedElementIds.indexOf(_cell4.plannerElementId) == -1) {
+            var _element2 = this.plannerElements.get(_cell4.plannerElementId);
+            allCheckedElementIds.push(_cell4.plannerElementId);
+            var cellFrontGrid = this.frontGrid[i][j];
+            var elementFrontGrid = this.plannerElements.get(cellFrontGrid.plannerElementId);
+            if (elementFrontGrid) {
+              var targetDPFrontGrid = elementFrontGrid === null || elementFrontGrid === void 0 ? void 0 : elementFrontGrid.getDockingPointById('AVO_AVO_2_IL');
+              if (!targetDPFrontGrid) LOG$1.error(new DivaUtils.DivaError('Error Loading DockingPoint AVO_2 for plannerElement'));else if (_element2) PlannerHandler2D.dockingPointHandlerInst.tryDockElementToDP(_element2, elementFrontGrid, targetDPFrontGrid);
             }
-            //correct PosNr
-            if (_plannerElement3) _plannerElement3.PosNr = posNr;
+            var _topNeighbors = this.getNeighborElements(_cell4.plannerElementId, 'TOP');
+            var _rightNeighbors = this.getNeighborElements(_cell4.plannerElementId, 'RIGHT');
+            for (var n = 0; n < _topNeighbors.length; n++) {
+              PlannerHandler2D.dockingPointHandlerInst.tryDockElement(_element2, 'AVO', [_topNeighbors[n]]);
+            }
+            for (var n = 0; n < _rightNeighbors.length; n++) {
+              PlannerHandler2D.dockingPointHandlerInst.tryDockElement(_element2, 'AVL', [_rightNeighbors[n]]);
+            }
+            _element2.PosNr = posNr;
             posNr++;
           }
-          //check if Elements are on the right side and dock them
-          if (this.backModulPlannedElementGrid[i + 1] && this.backModulPlannedElementGrid[i + 1][0] && this.backModulPlannedElementGrid[i][0]) {
-            PlannerHandler2D.dockingPointHandlerInst.tryDockElement(this.backModulPlannedElementGrid[i][0], 'AVL', [this.backModulPlannedElementGrid[i + 1][0]]);
-          }
         }
       }
     }
@@ -3761,66 +4277,60 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
   }, {
     key: "destroyBoxPlannerGrid",
     value: function destroyBoxPlannerGrid() {
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        for (var j = 0; j < this.plannedElementGrid[i].length; j++) {
-          var plannerElement = this.plannedElementGrid[i][j];
-          plannerElement.destroy();
+      var _iterator2 = _createForOfIteratorHelper(this.plannerElements.values()),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var element = _step2.value;
+          element.destroy();
         }
-        this.plannedElementGrid[i] = [];
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
       }
-      this.plannedElementGrid = [];
+      this.plannerElements.clear();
+      this.frontGrid = new Array();
       if (this.hasActiveBackside) {
         this.hasActiveBackside = false;
-        for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-          for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-            var _plannerElement4 = this.backModulPlannedElementGrid[i][j];
-            if (_plannerElement4) _plannerElement4.destroy();
-          }
-          this.backModulPlannedElementGrid[i] = [];
-        }
-        this.backModulPlannedElementGrid = [];
-      }
-    }
-    /**
-     
-     */
-  }, {
-    key: "getAllElementsInBacksideModuleGrid",
-    value: function getAllElementsInBacksideModuleGrid() {
-      var elementsInGrid = [];
-      for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-        for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-          if (this.backModulPlannedElementGrid[i][j]) elementsInGrid.push(this.backModulPlannedElementGrid[i][j].ElementId);
-        }
+        this.backGrid = new Array();
       }
-      return elementsInGrid;
     }
 
     /**
-     * Destroys the backside module Grid and returns all Element ids inside the backside grid
+     * Destroys the backside module Grid
      */
   }, {
     key: "destroyBacksideModuleGrid",
     value: function destroyBacksideModuleGrid() {
       this.hasActiveBackside = false;
-      var elementidsToDelete = [];
-      for (var i = 0; i < this.backModulPlannedElementGrid.length; i++) {
-        for (var j = 0; j < this.backModulPlannedElementGrid[i].length; j++) {
-          var plannerElement = this.backModulPlannedElementGrid[i][j];
-          if (plannerElement) {
-            elementidsToDelete.push(plannerElement.ElementId);
-            plannerElement.destroy();
-          }
+      var allElements = this.getAllElementsInBackGrid();
+      var _iterator3 = _createForOfIteratorHelper(allElements.values()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var element = _step3.value;
+          this.plannerElements["delete"](element.ElementId);
+          element.destroy();
         }
-        this.backModulPlannedElementGrid[i] = [];
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
       }
-      this.backModulPlannedElementGrid = [];
+      allElements = [];
+      this.backGrid = new Array();
     }
   }, {
     key: "getPlannerHasActiveBackside",
     value: function getPlannerHasActiveBackside() {
       return this.hasActiveBackside;
     }
+  }, {
+    key: "getForceSingleCellPerElement",
+    value: function getForceSingleCellPerElement() {
+      return this.gridSetupParams.forceSingleCellPerElement;
+    }
   }, {
     key: "getBoundingBox",
     value: function getBoundingBox() {
@@ -3829,56 +4339,63 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var maxX = 0;
       var curX = 0;
       var minZ = 0;
-      var curZ = this.plannedElementGrid[0][0].getDepth();
+      var curZ = this.plannerElements.get(this.frontGrid[0][0].plannerElementId).getDepth();
       var maxZ = 0;
       var curDir;
       curDir = 'RIGHT';
-      for (var i = 0; i < this.plannedElementGrid.length; i++) {
-        var groundElement = this.plannedElementGrid[i][0];
-
-        //Check if the col has a corner.
-        var elementOption = this.getValueOfOptionOfArticle(groundElement.getElementId(), 'OPTELEMENT');
-        if (curDir == 'RIGHT') {
-          curX += this.plannedElementGrid[i][0].getWidth();
-        } else if (curDir == 'FRONT') {
-          curZ += this.plannedElementGrid[i][0].getWidth();
-        } else if (curDir == 'LEFT') {
-          curX -= this.plannedElementGrid[i][0].getWidth();
-        } else if (curDir == 'BACK') {
-          curZ -= this.plannedElementGrid[i][0].getWidth();
-        }
-        if (elementOption == 'OPVECK_I') {
+      var allCheckedElementIds = [];
+      for (var i = 0; i < this.frontGrid.length; i++) {
+        var groundCell = this.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);
+          if (!groundElement) continue;
+          //Check if the col has a corner.
+          var elementOption = this.getValueOfOptionOfArticle(groundCell.plannerElementId, 'OPTELEMENT');
           if (curDir == 'RIGHT') {
-            curDir = 'FRONT';
+            curX += groundElement.getWidth();
           } else if (curDir == 'FRONT') {
-            curDir = 'LEFT';
+            curZ += groundElement.getWidth();
           } else if (curDir == 'LEFT') {
-            curDir = 'BACK';
+            curX -= groundElement.getWidth();
           } else if (curDir == 'BACK') {
-            curDir = 'RIGHT';
+            curZ -= groundElement.getWidth();
           }
-        } else if (elementOption == 'OPVECK_A') {
-          if (curDir == 'RIGHT') {
-            curDir = 'BACK';
-          } else if (curDir == 'FRONT') {
-            curDir = 'RIGHT';
-          } else if (curDir == 'LEFT') {
-            curDir = 'FRONT';
-          } else if (curDir == 'BACK') {
-            curDir = 'LEFT';
+          if (elementOption == 'OPVECK_I') {
+            if (curDir == 'RIGHT') {
+              curDir = 'FRONT';
+            } else if (curDir == 'FRONT') {
+              curDir = 'LEFT';
+            } else if (curDir == 'LEFT') {
+              curDir = 'BACK';
+            } else if (curDir == 'BACK') {
+              curDir = 'RIGHT';
+            }
+          } else if (elementOption == 'OPVECK_A') {
+            if (curDir == 'RIGHT') {
+              curDir = 'BACK';
+            } else if (curDir == 'FRONT') {
+              curDir = 'RIGHT';
+            } else if (curDir == 'LEFT') {
+              curDir = 'FRONT';
+            } else if (curDir == 'BACK') {
+              curDir = 'LEFT';
+            }
           }
+          if (curX < minX) minX = curX;
+          if (curX > maxX) maxX = curX;
+          if (curZ < minZ) minZ = curZ;
+          if (curZ > maxZ) maxZ = curZ;
+          var colHeight = this.getGridColumnHeight(i);
+          height = height < colHeight ? colHeight : height;
         }
-        if (curX < minX) minX = curX;
-        if (curX > maxX) maxX = curX;
-        if (curZ < minZ) minZ = curZ;
-        if (curZ > maxZ) maxZ = curZ;
-        var colHeight = this.getGridColumnHeight(i);
-        height = height < colHeight ? colHeight : height;
       }
       var depth = maxZ - minZ;
       var width = maxX - minX;
       if (this.hasActiveBackside) {
-        depth = this.plannedElementGrid[0][0].getDepth() * 2;
+        depth = curZ * 2;
       }
       return {
         width: Math.round(width * 1000) / 1000,
@@ -3886,6 +4403,304 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         depth: Math.round(depth * 1000) / 1000
       };
     }
+
+    /**
+     * This function returns all free cell locations to move a specific element
+     * @param elementId
+     * @returns
+     */
+  }, {
+    key: "getFreeMoveLocation",
+    value: function getFreeMoveLocation(elementId) {
+      var element = this.getElementById(elementId);
+      if (!element) return [];
+      var elementCells = this.getCellsInGridByElementId(elementId);
+      if (elementCells.cells.length === 0) return [];
+      var allFreeMoveLocations = [];
+      // Helper function to check if a cell is valid and empty
+      var isEmptyCell = function isEmptyCell(x, y) {
+        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 _iterator4 = _createForOfIteratorHelper(this.plannerElements.keys()),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var otherElementId = _step4.value;
+          if (otherElementId != elementId) {
+            var otherElement = this.getElementById(otherElementId);
+            if (this.gridSetupParams.forceSingleCellPerElement) {
+              //Check if the with is ok and the height
+
+              if (!this.getElementHasTopElement(otherElementId) && otherElement.getWidth() == element.getWidth()) {
+                //now check if there is another element for the correct height
+                var otherElementCells = this.getCellsInGridByElementId(otherElementId);
+                var allElementsInRowAbove = this.getAllElementsInRow(otherElementCells.endRowIndex + 1, otherElementCells.backside);
+                if (allElementsInRowAbove.length > 0 && allElementsInRowAbove[0].getHeight() != element.getHeight()) continue;
+
+                //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);
+                allFreeMoveLocations.push(locationInformation);
+              }
+            } else {
+              //In this case it is more complex
+
+              var _otherElementCells = this.getCellsInGridByElementId(otherElementId);
+              var freeStartTopColIndex = -1;
+              var freeEndTopColIndex = -1;
+              var topRow = _otherElementCells.endRowIndex + 1;
+              for (var x = _otherElementCells.startColIndex; x <= _otherElementCells.startColIndex + _otherElementCells.colCount - 1; x++) {
+                var freeSpaceFound = false;
+                if (isEmptyCell(x, topRow)) {
+                  if (freeStartTopColIndex == -1) {
+                    freeStartTopColIndex = x;
+                    freeEndTopColIndex = x;
+                  } else {
+                    freeEndTopColIndex = x;
+                  }
+                  if (x == _otherElementCells.startColIndex + _otherElementCells.colCount - 1) {
+                    if (elementCells.colCount <= freeEndTopColIndex - freeStartTopColIndex + 1) {
+                      freeSpaceFound = true;
+                    } else {
+                      //Check overstand
+                      freeSpaceFound = true;
+                      for (var i = 0; i < elementCells.colCount; i++) {
+                        if (isEmptyCell(freeStartTopColIndex + i, _otherElementCells.endRowIndex)) {
+                          freeSpaceFound = false; //invalid overstand found
+                          break;
+                        }
+                      }
+                    }
+                  }
+                } else {
+                  //we found a obstacle
+                  if (elementCells.colCount <= freeEndTopColIndex - freeStartTopColIndex + 1) {
+                    //The element has place here
+                    freeSpaceFound = true;
+                  }
+                }
+                if (freeSpaceFound) {
+                  var _locationInformation = this.createLocationInformation(element, elementCells.backside, this.createEmptyCells(freeStartTopColIndex, _otherElementCells.endRowIndex + 1, freeStartTopColIndex + elementCells.colCount - 1, _otherElementCells.endRowIndex + elementCells.rowCount - 1, element.getWidth(), element.getHeight()), freeStartTopColIndex, _otherElementCells.endRowIndex + 1, elementCells.colCount, elementCells.rowCount);
+                  allFreeMoveLocations.push(_locationInformation);
+                }
+              }
+            }
+          }
+        }
+
+        //now add most left and most right location
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      var locationInformationLeft = this.createLocationInformation(element, elementCells.backside, this.createEmptyCells(-elementCells.colCount, 0, -1, elementCells.rowCount - 1, element.getWidth(), element.getHeight()), -elementCells.colCount, 0, elementCells.colCount, elementCells.rowCount);
+      allFreeMoveLocations.push(locationInformationLeft);
+      var locationInformationRight = this.createLocationInformation(element, elementCells.backside, this.createEmptyCells(this.getColumnCount(), 0, this.getColumnCount() + elementCells.colCount - 1, elementCells.rowCount - 1, element.getWidth(), element.getHeight()), this.getColumnCount(), 0, elementCells.colCount, elementCells.rowCount);
+      allFreeMoveLocations.push(locationInformationRight);
+      return allFreeMoveLocations;
+    }
+
+    /**
+     * This function returns free locations for an element when trying to copy it in LEFT TOP or RIGHT direction
+     * @param elementId
+     * @param direction
+     * @returns
+     */
+  }, {
+    key: "getFreePlanningLocation",
+    value: function getFreePlanningLocation(elementId, direction) {
+      // Retrieve all cells associated with the element
+      var element = this.getElementById(elementId);
+      if (!element) return undefined;
+      var elementCells = this.getCellsInGridByElementId(elementId);
+
+      // If no cells are found, return an empty array as the element cannot be copied
+      if (elementCells.cells.length === 0) {
+        return undefined;
+      }
+
+      // Determine the grid to work with (front or back) based on the element's location
+      var curGrid = elementCells.backside ? this.backGrid : this.frontGrid;
+
+      // Get the boundaries of the element in the grid
+      var startColIndex = elementCells.startColIndex;
+      var endColIndex = elementCells.endColIndex;
+      var startRowIndex = elementCells.startRowIndex;
+      var endRowIndex = elementCells.endRowIndex;
+      var copyStartColIndex = -1;
+      var copyStartRowIndex = -1;
+      var copyEndColIndex = -1;
+      var copyEndRowIndex = -1;
+
+      // Store potential free cells for copying
+      var freeCells = [];
+
+      // Helper function to check if a cell is valid and empty
+      var isValidCell = function isValidCell(x, y) {
+        var _curGrid$x2;
+        return ((_curGrid$x2 = curGrid[x]) === null || _curGrid$x2 === void 0 ? void 0 : _curGrid$x2[y]) === undefined;
+      };
+
+      // Handle logic for each copy direction
+      switch (direction) {
+        case 'LEFT':
+          {
+            // Target column to the left of the element
+            var targetColIndex = startColIndex - 1;
+            var copyPossible = false;
+            // Iterate through rows within the element's height
+            for (var y = startRowIndex; y <= endRowIndex; y++) {
+              if (isValidCell(targetColIndex, y)) {
+                copyStartRowIndex = y;
+                copyPossible = true;
+                break;
+              }
+            }
+            if (!copyPossible) return undefined;
+            copyPossible = false;
+            for (var x = startColIndex - 1; x >= startColIndex - elementCells.colCount; x--) {
+              if (isValidCell(x, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(x, copyStartRowIndex - 1))) {
+                //check also for overhang
+                copyPossible = true;
+                copyStartColIndex = x;
+              } else {
+                break; //when you find one situation where it is not valid skip outside.
+              }
+            }
+            if (!copyPossible) return undefined;
+            copyEndColIndex = startColIndex - 1;
+            copyEndRowIndex = endRowIndex;
+            freeCells = this.createEmptyCells(copyStartColIndex, copyStartRowIndex, copyEndColIndex, copyEndRowIndex, element.getWidth(), element.getHeight());
+            break;
+          }
+        case 'TOP':
+          {
+            // Target row above the element
+            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;
+                _copyPossible = true;
+              }
+            }
+            if (!_copyPossible) return undefined;
+            copyStartRowIndex = targetRowIndex;
+            copyEndColIndex = endColIndex;
+            copyEndRowIndex = targetRowIndex + elementCells.rowCount - 1;
+            freeCells = this.createEmptyCells(copyStartColIndex, copyStartRowIndex, copyEndColIndex, copyEndRowIndex, element.getWidth(), element.getHeight());
+            break;
+          }
+        case 'RIGHT':
+          {
+            // Target column to the left of the element
+            var _targetColIndex = endColIndex + 1;
+            var _copyPossible2 = false;
+            // Iterate through rows within the element's height
+            for (var _y = startRowIndex; _y <= endRowIndex; _y++) {
+              if (isValidCell(_targetColIndex, _y)) {
+                copyStartRowIndex = _y;
+                _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))) {
+                //check also for overhang
+                copyEndColIndex = _x2;
+                _copyPossible2 = true;
+              } else {
+                break; //when you find one situation where it is not valid skip outside.
+              }
+            }
+            if (!_copyPossible2) return undefined;
+            copyStartColIndex = endColIndex + 1;
+            copyEndRowIndex = endRowIndex;
+            freeCells = this.createEmptyCells(copyStartColIndex, copyStartRowIndex, copyEndColIndex, copyEndRowIndex, element.getWidth(), element.getHeight());
+            break;
+          }
+        default:
+          // If direction is invalid, return an empty array
+          return undefined;
+      }
+
+      // Return the collected free cells for the given direction
+      var locationInformation = this.createLocationInformation(element, elementCells.backside, freeCells, copyStartColIndex, copyStartRowIndex, copyEndColIndex - copyStartColIndex + 1, copyEndRowIndex - copyStartRowIndex + 1);
+      return locationInformation;
+    }
+  }, {
+    key: "createLocationInformation",
+    value: function createLocationInformation(element, fromBackside, cells, cellsStartColIndex, cellsStartRowIndex, cellsColCount, cellsRowCount) {
+      var curGrid = fromBackside ? this.backGrid : this.frontGrid;
+      var elementLocation = {
+        cells: cells,
+        widthPerCell: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterWidth : element.getWidth(),
+        heightPerCell: this.gridSetupParams.forceFixCellRasterSize ? this.gridSetupParams.fixCellRasterHeight : element.getHeight(),
+        depthPerCell: element.getDepth(),
+        width: this.gridSetupParams.forceFixCellRasterSize ? cellsColCount * this.gridSetupParams.fixCellRasterWidth : element.getWidth(),
+        height: this.gridSetupParams.forceFixCellRasterSize ? cellsRowCount * this.gridSetupParams.fixCellRasterHeight : element.getHeight(),
+        depth: element.getDepth(),
+        startIndexWorldPos: new index.Vector2(0, 0)
+      };
+      if (this.gridSetupParams.forceFixCellRasterSize) {
+        elementLocation.startIndexWorldPos = new index.Vector2(cellsStartColIndex * this.gridSetupParams.fixCellRasterWidth, cellsStartRowIndex * this.gridSetupParams.fixCellRasterHeight);
+      } else {
+        var distToOriginX = 0;
+        for (var i = 0; i < cellsStartColIndex; i++) {
+          distToOriginX += curGrid[i][0].width;
+        }
+        if (cellsStartColIndex < 0) {
+          distToOriginX = -element.getWidth();
+        }
+        var distToOriginY = 0;
+        for (var i = 0; i < cellsStartRowIndex; i++) {
+          distToOriginY += curGrid[cellsStartColIndex][i].height;
+        }
+        elementLocation.startIndexWorldPos = new index.Vector2(distToOriginX, distToOriginY);
+      }
+      return elementLocation;
+    }
+  }, {
+    key: "getPlannerInteractionInformation",
+    value: function getPlannerInteractionInformation() {
+      var allElements = this.getAllElementsInGridSortedbyGridPos();
+      var plannerInteractionInfo = {
+        boxPlannerInteractionInformationPerElement: new Map()
+      };
+      for (var i = 0; i < allElements.length; i++) {
+        var element = allElements[i];
+        var elementCells = this.getCellsInGridByElementId(element.getElementId());
+        elementCells.backside ? this.backGrid : this.frontGrid;
+        var elementLocation = this.createLocationInformation(element, elementCells.backside, elementCells.cells, elementCells.startColIndex, elementCells.startRowIndex, elementCells.colCount, elementCells.rowCount);
+        var planningLeftLocation = this.getFreePlanningLocation(element.getElementId(), 'LEFT');
+        var planningRighttLocation = this.getFreePlanningLocation(element.getElementId(), 'RIGHT');
+        var planningTopLocation = this.getFreePlanningLocation(element.getElementId(), 'TOP');
+        var hasTopElements = this.getElementHasTopElement(element.getElementId());
+        var moveLocations = [];
+        if (!hasTopElements && allElements.length > 1) {
+          //Calculate positions where element can be moved.
+          moveLocations = this.getFreeMoveLocation(element.getElementId());
+        }
+        var plannerInteractionInfoElement = {
+          location: elementLocation,
+          isDeletable: !hasTopElements && allElements.length > 1,
+          availablePlanningLocations: {
+            availableBoxPlannerCellsLeft: planningLeftLocation,
+            availableBoxPlannerCellsTop: planningTopLocation,
+            availableBoxPlannerCellsRight: planningRighttLocation
+          },
+          availableMovingLocations: moveLocations
+        };
+        plannerInteractionInfo.boxPlannerInteractionInformationPerElement.set(element.getElementId(), plannerInteractionInfoElement);
+      }
+      return plannerInteractionInfo;
+    }
   }]);
 }();
 
@@ -3902,7 +4717,13 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     this.set = set;
     this.plannerID = plannerId;
     this.constructionRulesHandler = new ConstructionRulesHandler(this.set.getValueOfOptionOfArticle, this.set.checkArticleHasOption, this.set.updateCfgValuesByPlanner);
-    this.boxPlannerGrid = new BoxPlannerGrid(this.set.getValueOfOptionOfArticle);
+    var gridSetupParams = {
+      hasMaxGridRasterHeight: false,
+      hasMaxGridRasterWidth: false,
+      forceSingleCellPerElement: true,
+      forceFixCellRasterSize: false
+    };
+    this.boxPlannerGrid = new BoxPlannerGrid(gridSetupParams, this.set.getValueOfOptionOfArticle);
   }
   return _createClass__default["default"](DivaBoxPlanner, [{
     key: "initPlanner",
@@ -4006,7 +4827,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
       for (var i = 0; i < allElementIds.length; i++) {
         var plannerElement = this.boxPlannerGrid.getElementById(allElementIds[i]);
         if (!plannerElement) continue;
-        var posInGrid = this.boxPlannerGrid.getIndexInGridByElementId(allElementIds[i]);
+        var posInGrid = this.boxPlannerGrid.getCellsInGridByElementId(allElementIds[i]);
         var dockingDPs = plannerElement.getDockingDockingPoints();
         var dpArr = [];
         for (var j = 0; j < dockingDPs.length; j++) {
@@ -4033,8 +4854,8 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
           depth: plannerElement.Depth ? plannerElement.Depth : -1,
           DP: dpArr,
           boxPlannerInfo: {
-            gridPosCol: posInGrid.col,
-            gridPosRow: posInGrid.row,
+            gridPosCol: posInGrid.startColIndex,
+            gridPosRow: posInGrid.startRowIndex,
             isOnBackside: posInGrid.backside
           }
         };
@@ -4135,7 +4956,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     value: (function () {
       var _copyPlannerElement = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee4(articleCopyRelation, copyInfo) {
         var _this = this;
-        var gridIsPrepared, plannerElementsToLoadSVG, that, copyType, i, allDPs, j;
+        var gridIsPrepared, plannerElementsToLoadSVG, that, copyType, i, cellPos, allDPs, j;
         return _regeneratorRuntime__default["default"].wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
@@ -4157,7 +4978,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 var _copyInfo$targetEleme;
                 if (!gridIsPrepared) {
                   if (copyInfo && (copyInfo.dpType == 'AVL' || copyInfo.dpType == 'AVR')) {
-                    _this.boxPlannerGrid.prepareGridForCopy(elementToCopyId, copyInfo.dpType);
+                    _this.boxPlannerGrid.prepareGridForColCopy(elementToCopyId, copyInfo.dpType);
                   } else if (copyInfo && copyInfo.copyType && copyInfo.copyType == 'BoxPlanner_backside') {
                     if (!_this.boxPlannerGrid.getPlannerHasActiveBackside()) _this.boxPlannerGrid.prepareGridForBackSideCopy();
                   }
@@ -4187,7 +5008,8 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               //Check if we have to prevent to build even higher in this col
               if (copyType == 'AVO' && this.constructionRulesHandler.getHasMaxElemCountPerColumn()) {
                 //The max height of col is reached
-                if (that.boxPlannerGrid.getIndexInGridByElementId(plannerElementsToLoadSVG[i].ElementId).row + 1 == that.constructionRulesHandler.getMaxElemCountPerColumn()) {
+                cellPos = this.boxPlannerGrid.getCellsInGridByElementId(plannerElementsToLoadSVG[i].ElementId);
+                if (cellPos.endRowIndex + 1 == that.constructionRulesHandler.getMaxElemCountPerColumn()) {
                   allDPs = plannerElementsToLoadSVG[i].getFreeDockingPointsByType('AVO');
                   for (j = 0; j < allDPs.length; j++) {
                     allDPs[j].disableDP(true);
@@ -4226,15 +5048,27 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
      */
   }, {
     key: "getPlannerElementsInfluencedByDeletion",
-    value: function getPlannerElementsInfluencedByDeletion(elementId) {
+    value: function getPlannerElementsInfluencedByDeletion(elementId, deletionType) {
       if (this.constructionRulesHandler.getForceWholePlanningSameHeight()) {
-        var index = this.boxPlannerGrid.getIndexInGridByElementId(elementId);
-        if (index.row == 0) return []; //In the base row only delete the actual element, not the whole row
+        var cellPos = this.boxPlannerGrid.getCellsInGridByElementId(elementId);
+        if (cellPos.startRowIndex == 0) return []; //In the base row only delete the actual element, not the whole row
         var result = this.boxPlannerGrid.getAllElementsInSameRowByElementId(elementId);
         return result.elementIds.filter(function (eId) {
           return eId != elementId;
         });
       } else {
+        if (this.boxPlannerGrid.getPlannerHasActiveBackside()) {
+          if (deletionType == 'BoxPlanner_backside') {
+            return this.boxPlannerGrid.getAllElementsInBackGrid().map(function (element) {
+              return element.ElementId;
+            }).filter(function (eId) {
+              return eId != elementId;
+            });
+          } else {
+            var opposideElement = this.boxPlannerGrid.getOppositeElement(elementId);
+            if (opposideElement) return [opposideElement.getElementId()];
+          }
+        }
         return [];
       }
     }
@@ -4254,8 +5088,8 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
         return this.boxPlannerGrid.getAllElementIdsInGrid();
       } else if (copyInfo && copyInfo.copyType == 'BoxPlanner_COL') {
         //Copy all col
-        var gridPos = this.boxPlannerGrid.getIndexInGridByElementId(elementId);
-        var allElementsInCol = this.boxPlannerGrid.getAllElementsInColumn(gridPos.col, gridPos.backside);
+        var cellPos = this.boxPlannerGrid.getCellsInGridByElementId(elementId);
+        var allElementsInCol = this.boxPlannerGrid.getAllElementsInColumn(cellPos.startColIndex, cellPos.backside);
         for (var i = 0; i < allElementsInCol.length; i++) {
           allElementsToCopy.push(allElementsInCol[i].getElementId());
         }
@@ -4284,11 +5118,14 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               }
           }
           if (this.boxPlannerGrid.getPlannerHasActiveBackside()) {
-            allElementsToCopy = allElementsToCopy.concat(this.boxPlannerGrid.getAllOppositeElements(allElementsToCopy));
+            allElementsToCopy = allElementsToCopy.concat(this.boxPlannerGrid.getOppositeElements(allElementsToCopy).map(function (element) {
+              return element.ElementId;
+            }));
           }
         }
       }
-      return allElementsToCopy;
+      //remove duplicate
+      return Array.from(new Set(allElementsToCopy));
     }
 
     /**
@@ -4302,26 +5139,24 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     key: "deletePlannerElement",
     value: (function () {
       var _deletePlannerElement = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee5(elementId, autoCorrectAVL_AVR, deletionType) {
-        var pos, newSelectedPos, newSelectedCol, allElements, allElementsToDelete, i, doUpdateWholeLogic, _this$boxPlannerGrid$;
+        var cellPos, newSelectedPos, doUpdateWholeLogic, _this$boxPlannerGrid$;
         return _regeneratorRuntime__default["default"].wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              pos = this.boxPlannerGrid.getIndexInGridByElementId(elementId);
+              //TODO ÜBERLEGEN WIE MAN DAS JETZT RICHTET: BESSER WÄRE ES MAN GIBT DAS NÄCHSTE ZU SELECTIERENDE ELEMENT ID ZURÜCK
+              //var pos = this.boxPlannerGrid.getIndexInGridByElementId(elementId);
+              cellPos = this.boxPlannerGrid.getCellsInGridByElementId(elementId);
               newSelectedPos = {
-                row: pos.row,
-                col: pos.col,
-                backside: pos.backside
+                row: cellPos.startRowIndex,
+                col: cellPos.startColIndex,
+                backside: false
               };
               if (!deletionType || deletionType != 'BoxPlanner_backside') {
-                if (pos.row > 0) {
+                if (cellPos.startRowIndex > 0) {
                   newSelectedPos.row--;
                 } else {
-                  newSelectedCol = pos.col == 0 ? 0 : pos.col - 1;
-                  allElements = this.boxPlannerGrid.getAllElementsInColumn(newSelectedCol, pos.backside);
-                  if (allElements && allElements.length > 0) {
-                    newSelectedPos.col = newSelectedCol;
-                    newSelectedPos.row = allElements.length - 1;
-                  }
+                  newSelectedPos.col = cellPos.startColIndex == 0 ? 0 : cellPos.startColIndex - 1;
+                  newSelectedPos.row = this.boxPlannerGrid.getRowCount(newSelectedPos.col, cellPos.backside) - 1;
                 }
               } else {
                 newSelectedPos = {
@@ -4330,18 +5165,14 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                   backside: false
                 };
               }
-              allElementsToDelete = this.boxPlannerGrid.deleteElement(elementId, deletionType);
-              for (i = 0; i < allElementsToDelete.length; i++) {
-                this.constructionRulesHandler.onElemDeleted(allElementsToDelete[i]);
-              }
+              this.boxPlannerGrid.deleteElement(elementId, deletionType);
+              this.constructionRulesHandler.onElemDeleted(elementId);
               doUpdateWholeLogic = true;
-              if (deletionType && deletionType == 'BoxPlanner_backside') {
-                if (this.boxPlannerGrid.getAllElementsInBacksideModuleGrid().length == 0) {
+              if (deletionType) {
+                if (deletionType == 'BoxPlanner_backside') {
                   this.boxPlannerGrid.destroyBacksideModuleGrid();
                   doUpdateWholeLogic = true;
-                } else {
-                  doUpdateWholeLogic = false;
-                }
+                } else if (deletionType == 'STD_DONTUPDATE') doUpdateWholeLogic = false;
               }
               if (!doUpdateWholeLogic) {
                 _context5.next = 11;
@@ -4378,7 +5209,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
   }, {
     key: "getAllViewPlannerElements",
     value: function getAllViewPlannerElements() {
-      return this.boxPlannerGrid.getAllElementsInGrid();
+      return this.boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
     }
   }, {
     key: "getNeighborElements",
@@ -4447,7 +5278,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     key: "updatePlanner",
     value: (function () {
       var _updatePlanner = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee6(changedOPT, targetElements) {
-        var message, posInGrid, elemToCheck, copyDir, allElementsToCopy, _allElementsToCopy, allElementsToDelete, _allElementsToDelete, _message;
+        var message, cellPos, elemToCheck, copyDir, allElementsToCopy, _allElementsToCopy, allElementsInBackGrid, _allElementsInBackGrid, _message;
         return _regeneratorRuntime__default["default"].wrap(function _callee6$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
             case 0:
@@ -4469,19 +5300,21 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 break;
               }
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 viewMessageCodex: message
               });
             case 8:
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: []
               });
             case 9:
               //If the most bottom element has no neighbor right or left - copy element
-              posInGrid = this.boxPlannerGrid.getIndexInGridByElementId(targetElements[0]);
+              cellPos = this.boxPlannerGrid.getCellsInGridByElementId(targetElements[0]);
               elemToCheck = targetElements[0];
-              if (posInGrid.row > 0) {
-                elemToCheck = this.boxPlannerGrid.getPlannerElementAtGridPos(posInGrid.col, 0, false).getElementId();
+              if (cellPos.startRowIndex > 0) {
+                elemToCheck = this.boxPlannerGrid.getPlannerElementAtGridPos(cellPos.startColIndex, 0, false).getElementId();
               }
               if (!(!this.boxPlannerGrid.getElementHasLeftElement(elemToCheck) || !this.boxPlannerGrid.getElementHasRightElement(elemToCheck))) {
                 _context6.next = 18;
@@ -4502,6 +5335,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 copyType: 'BoxPlanner_COL'
               });
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: allElementsToCopy,
                 copyDPType: copyDir,
@@ -4512,11 +5346,11 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               });
             case 18:
               if (!(changedOPT && changedOPT['OPTDMOD'])) {
-                _context6.next = 32;
+                _context6.next = 33;
                 break;
               }
               _context6.t0 = changedOPT['OPTDMOD'];
-              _context6.next = _context6.t0 === 'OPVD_EIN' ? 22 : _context6.t0 === 'OPVD_AUS' ? 26 : 30;
+              _context6.next = _context6.t0 === 'OPVD_EIN' ? 22 : _context6.t0 === 'OPVD_AUS' ? 26 : 31;
               break;
             case 22:
               if (this.boxPlannerGrid.getPlannerHasActiveBackside()) {
@@ -4528,65 +5362,86 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
                 copyType: 'BoxPlanner_backside'
               });
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 elementIdToCopy: _allElementsToCopy,
                 copyType: 'BoxPlanner_backside',
                 changedOPT: changedOPT
               });
             case 25:
-              return _context6.abrupt("break", 30);
+              return _context6.abrupt("break", 31);
             case 26:
               if (!this.boxPlannerGrid.getPlannerHasActiveBackside()) {
-                _context6.next = 29;
+                _context6.next = 30;
+                break;
+              }
+              allElementsInBackGrid = this.boxPlannerGrid.getAllElementsInBackGrid();
+              if (!(allElementsInBackGrid.length > 0)) {
+                _context6.next = 30;
                 break;
               }
-              allElementsToDelete = this.boxPlannerGrid.getAllElementsInBacksideModuleGrid();
               return _context6.abrupt("return", {
-                elemIdsToDelete: allElementsToDelete,
+                doDeleteBackGrid: true,
+                elemIdsToDelete: allElementsInBackGrid.map(function (element) {
+                  return element.ElementId;
+                }),
                 deletionType: 'BoxPlanner_backside',
                 changedOPT: changedOPT
               });
-            case 29:
-              return _context6.abrupt("break", 30);
             case 30:
-              _context6.next = 45;
+              return _context6.abrupt("break", 31);
+            case 31:
+              _context6.next = 47;
               break;
-            case 32:
+            case 33:
               if (!(changedOPT && changedOPT['OPTFARBE_RAHMEN'] && changedOPT['OPTFARBE_RAHMEN'] == 'OPVSCHWARZ_MATT' && this.boxPlannerGrid.getPlannerHasActiveBackside())) {
-                _context6.next = 37;
+                _context6.next = 39;
                 break;
               }
               //If the double modul is active but the color is changed to black - disable double modul
-              _allElementsToDelete = this.boxPlannerGrid.getAllElementsInBacksideModuleGrid();
+              _allElementsInBackGrid = this.boxPlannerGrid.getAllElementsInBackGrid();
+              if (!(_allElementsInBackGrid.length > 0)) {
+                _context6.next = 37;
+                break;
+              }
               return _context6.abrupt("return", {
-                elemIdsToDelete: _allElementsToDelete,
+                doDeleteBackGrid: true,
+                elemIdsToDelete: _allElementsInBackGrid.map(function (element) {
+                  return element.ElementId;
+                }),
                 deletionType: 'BoxPlanner_backside',
                 changedOPT: changedOPT,
                 targetElements: targetElements,
                 viewMessageCodex: 'BOXPLAN_BLACKFRAME_INCOMPATIBLE_ELEMENT_WARNING'
               });
             case 37:
-              _context6.next = 39;
-              return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, changedOPT, targetElements);
+              _context6.next = 47;
+              break;
             case 39:
+              _context6.next = 41;
+              return this.constructionRulesHandler.updateOptionLogicBoxPlanner(this.boxPlannerGrid, changedOPT, targetElements);
+            case 41:
               _message = _context6.sent;
               if (!_message) {
-                _context6.next = 44;
+                _context6.next = 46;
                 break;
               }
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: [],
                 viewMessageCodex: _message
               });
-            case 44:
+            case 46:
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: []
               });
-            case 45:
+            case 47:
               return _context6.abrupt("return", {
+                doDeleteBackGrid: false,
                 elemIdsToDelete: []
               });
-            case 46:
+            case 48:
             case "end":
               return _context6.stop();
           }
@@ -4616,7 +5471,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
         Cat: this.set.getCatalogCodex(),
         ShowDim: doShow3DDimensionLines
       };
-      var allPlannerElemnts = this.boxPlannerGrid.getAllElementsInGrid();
+      var allPlannerElemnts = this.boxPlannerGrid.getAllElementsInGridSortedbyGridPos();
       for (var i = 0; i < allPlannerElemnts.length; i++) {
         var elem = allPlannerElemnts[i];
         var elemId = elem.ElementId;
@@ -4713,6 +5568,11 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
       clone.initPlanner(setData);
       return clone;
     }
+  }, {
+    key: "getPlannerInteractionInformation",
+    value: function getPlannerInteractionInformation() {
+      return this.boxPlannerGrid.getPlannerInteractionInformation();
+    }
   }]);
 }();
 _defineProperty__default["default"](DivaBoxPlanner, "plannerType", 'BOX');