@crystaldesign/web-planner-logic 25.14.0-beta.27 → 25.14.0-beta.29

package/build/esm/{DivaBoxPlanner-5c85ac91.js → DivaBoxPlanner-90c95fe0.js}

@@ -3,11 +3,11 @@ import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-b308b21a.js';
+import { c as Vector2, V as Vector3, P as PlannerElementData, B as BoundingBox } from './index-8f6efc60.js';
 import DivaUtils, { DivaError, md5 } from '@crystaldesign/diva-utils';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-5f12e286.js';
+import { d as dockingPointHandlerInst, h as handler2D } from './PlannerHandler2D-67320283.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import 'axios';
 import '@crystaldesign/basket-model';
@@ -2596,21 +2596,21 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
     }
   }, {
     key: "validateDimensionRule",
-    value: function validateDimensionRule(dimRule, boxPlannerSize) {
+    value: function validateDimensionRule(dimension, dimensionLimit, boxPlannerSize, higherLimit, lowerLimit) {
       var isOver = false;
       var isEqual = false;
-      if (dimRule.dimension.toLowerCase() == 'height' && boxPlannerSize.y > dimRule.dimensionLimit) isOver = true;
-      if (dimRule.dimension.toLowerCase() == 'height' && boxPlannerSize.y == dimRule.dimensionLimit) isEqual = true;
-      if (dimRule.dimension.toLowerCase() == 'width' && boxPlannerSize.x > dimRule.dimensionLimit) isOver = true;
-      if (dimRule.dimension.toLowerCase() == 'width' && boxPlannerSize.x == dimRule.dimensionLimit) isEqual = true;
-      if (dimRule.dimension.toLowerCase() == 'depth' && boxPlannerSize.z > dimRule.dimensionLimit) isOver = true;
-      if (dimRule.dimension.toLowerCase() == 'depth' && boxPlannerSize.z == dimRule.dimensionLimit) isEqual = true;
+      if (dimension.toLowerCase() == 'height' && boxPlannerSize.y > dimensionLimit) isOver = true;
+      if (dimension.toLowerCase() == 'height' && boxPlannerSize.y == dimensionLimit) isEqual = true;
+      if (dimension.toLowerCase() == 'width' && boxPlannerSize.x > dimensionLimit) isOver = true;
+      if (dimension.toLowerCase() == 'width' && boxPlannerSize.x == dimensionLimit) isEqual = true;
+      if (dimension.toLowerCase() == 'depth' && boxPlannerSize.z > dimensionLimit) isOver = true;
+      if (dimension.toLowerCase() == 'depth' && boxPlannerSize.z == dimensionLimit) isEqual = true;
       if (isOver) {
-        return dimRule.higherLimit;
+        return higherLimit;
       } else if (isEqual) {
-        return dimRule.higherLimit;
+        return higherLimit;
       } else {
-        return dimRule.lowerLimit;
+        return lowerLimit;
       }
     }
 
@@ -2636,15 +2636,19 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       elements.forEach(function (element, idx) {
         if (idx < changedElementIdx) {
           //under the changed one
-          var rightNeighbours = boxPlannerGrid.getNeighborElements(element.ElementId, "RIGHT");
+          var rightNeighbours = boxPlannerGrid.getNeighborElements(element.ElementId, 'RIGHT', false);
           var freeSpace = element.Width;
           rightNeighbours.forEach(function (n) {
             if (n.ElementId == changedElement.ElementId) return;
-            if (!boxPlannerGrid.getNeighborElements(n.ElementId, "TOP", false).find(function (n) {
+            var topElements = boxPlannerGrid.getNeighborElements(n.ElementId, 'TOP', false).filter(function (n) {
               return n.ElementId != changedElement.ElementId;
-            })) freeSpace += n.Width;
+            });
+            var topWidth = topElements.reduce(function (totalwidth, e) {
+              return totalwidth += e.Width;
+            }, 0);
+            if (topWidth < n.Width) freeSpace += n.Width - topWidth;
           });
-          if (changedElement.Width > freeSpace) _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
+          if (Math.round(changedElement.Width) > Math.round(freeSpace)) _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
         } else {
           // over the changed one
           if (changedElement.Width < element.Width) _this2.setOptionValue(element.ElementId, opt, opv, optionHandler);
@@ -2657,7 +2661,10 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       var _this3 = this;
       var elements = boxPlannerGrid.getAllElementsInFrontGrid();
       elements.forEach(function (e) {
-        if (boxPlannerGrid.getElementHasBottomElement(e.ElementId)) _this3.setOptionValue(e.ElementId, 'OPTFUSS_SYS', 'OPVOHNE', optionHandler);
+        if (boxPlannerGrid.getElementHasBottomElement(e.ElementId)) {
+          _this3.setOptionValue(e.ElementId, 'OPTFUSS_SYS', 'OPVOHNE', optionHandler);
+          _this3.setOptionValue(e.ElementId, 'OPTPOSSIBILITY_FUSS_OHNE', 'OPVTRUE', optionHandler);
+        }
       });
     }
 
@@ -2671,14 +2678,13 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
       if (!this.constructionRules.optionsInfluencedByDimensions) return;
       var boxPlannerSize = boxPlannerGrid.getSizeOfWholeSet(false);
       var allElements = boxPlannerGrid.getAllElementsInFrontGrid();
-      var setRule = function setRule(rule) {
-        var res = _this4.validateDimensionRule(rule, boxPlannerSize);
+      var setRule = function setRule(option, res) {
         if (changedOPTs) {
           var changedOpt = Object.entries(changedOPTs).find(function (_ref) {
             var _ref2 = _slicedToArray(_ref, 2),
               key = _ref2[0];
               _ref2[1];
-            return key == rule.option;
+            return key == option;
           });
           if (changedOpt) {
             allElements.forEach(function (element) {
@@ -2688,13 +2694,29 @@ var ConstructionRulesHandler = /*#__PURE__*/function () {
           }
         }
         allElements.forEach(function (element) {
-          return _this4.setOptionDoCustom(element.ElementId, res, rule.option, optionHandler);
+          return _this4.setOptionDoCustom(element.ElementId, option, res, optionHandler);
         });
       };
-      this.constructionRules.optionsInfluencedByDimensions.forEach(function (dimRule) {
-        if (Array.isArray(dimRule)) dimRule.forEach(function (rule) {
-          return setRule(rule);
-        });else setRule(dimRule);
+      var dim = this.constructionRules.optionsInfluencedByDimensions;
+      dim.forEach(function (dimRule) {
+        if (Array.isArray(dimRule)) {
+          var res = dimRule.every(function (r) {
+            return _this4.validateDimensionRule(r.dimension, r.dimensionLimit, boxPlannerSize, r.higherLimit, r.lowerLimit).toLowerCase() == 'doshow';
+          });
+          var t = dimRule[0];
+          if (res) setRule(t.option, 'doShow');else setRule(t.option, 'doHide');
+        } else {
+          var seriesDimRule = dimRule;
+          var baseDimRule = dimRule;
+          if (seriesDimRule.series) {
+            var _dimRule = seriesDimRule.series.findLast(function (r) {
+              return _this4.validateDimensionRule(r.dimension, r.dimensionLimit, boxPlannerSize, '1', '2') == '1';
+            });
+            if (_dimRule) setRule(seriesDimRule.option, _dimRule.value);
+          } else {
+            setRule(baseDimRule.option, _this4.validateDimensionRule(baseDimRule.option, baseDimRule.dimensionLimit, boxPlannerSize, baseDimRule.higherLimit, baseDimRule.lowerLimit));
+          }
+        }
       });
     }
   }, {
@@ -3509,7 +3531,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getGridColumnWidth",
     value: function getGridColumnWidth(x) {
       var frontGrid = this.generalPlanningState.grids[0].matrix;
-      for (var y = 0; x < frontGrid[y].length; x++) {
+      for (var y = 0; y < frontGrid[y].length; y++) {
         var _plannedElement$size$, _plannedElement;
         var cell = frontGrid[x][y];
         if (cell) return (_plannedElement$size$ = (_plannedElement = cell.plannedElement) === null || _plannedElement === void 0 ? void 0 : _plannedElement.size.width) !== null && _plannedElement$size$ !== void 0 ? _plannedElement$size$ : 0;
@@ -4093,7 +4115,6 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
     key: "getNeighborElements",
     value: function getNeighborElements(elementId, dir) {
       var _this = this,
-        _plannedElement3,
         _curGrid$area$fromX,
         _downNeighbour$planne;
       var clean = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -4105,22 +4126,32 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var currentRow = curGrid[plannedElement.area.fromX];
       var startHeight = 0;
       var endHeight = 0;
-      currentRow.forEach(function (cell) {
-        if (cell.index.y < res.startRowIndex) startHeight = Math.round((startHeight + cell.plannedElement.size.height) * 1000);
-        if (cell.index.y < res.endRowIndex) endHeight = Math.round((endHeight + cell.plannedElement.size.height) * 1000);
-      });
+      for (var y = 0; y < currentRow.length;) {
+        var cell = currentRow[y];
+        if (cell.index.y < res.startRowIndex) startHeight = Math.round((startHeight + cell.plannedElement.size.height) * 1000) / 1000;
+        if (cell.index.y < res.endRowIndex) endHeight = Math.round((endHeight + cell.plannedElement.size.height) * 1000) / 1000;
+        y = cell.plannedElement.area.toY;
+      }
+      var neighbourSize = 0;
+      var neighbours = [];
       switch (dir) {
         case 'RIGHT':
           // only clean neighbours (for docking) add property if you also need clean ones
 
-          var neighbourRow = curGrid[plannedElement.area.toX];
-          if (!neighbourRow) break;
-          var neighbourSize = 0;
-          var neighbours = neighbourRow.filter(function (cell) {
-            if (clean && neighbourSize == startHeight) return true;else if (!clean && neighbourSize > endHeight) return true;
-            neighbourSize = Math.round((neighbourSize + cell.plannedElement.size.height) * 1000);
-            return false;
-          });
+          for (var x = plannedElement.area.toX; x < curGrid.length;) {
+            var _neighbourRow$0$plann, _neighbourRow$0$plann2;
+            var neighbourRow = curGrid[x];
+            for (var _y = 0; _y < neighbourRow.length;) {
+              var _cell5$plannedElement, _cell5$plannedElement2;
+              var _cell5 = neighbourRow[_y];
+              if (neighbours.includes(_cell5)) continue;
+              if (clean && neighbourSize == startHeight) neighbours.push(_cell5);else if (!clean && neighbourSize >= startHeight && neighbourSize <= endHeight) neighbours.push(_cell5);
+              neighbourSize = Math.round((neighbourSize + _cell5.plannedElement.size.height) * 1000) / 1000;
+              _y = (_cell5$plannedElement = (_cell5$plannedElement2 = _cell5.plannedElement) === null || _cell5$plannedElement2 === void 0 ? void 0 : _cell5$plannedElement2.area.toY) !== null && _cell5$plannedElement !== void 0 ? _cell5$plannedElement : _y + 1;
+            }
+            neighbourSize = 0;
+            x = (_neighbourRow$0$plann = (_neighbourRow$0$plann2 = neighbourRow[0].plannedElement) === null || _neighbourRow$0$plann2 === void 0 ? void 0 : _neighbourRow$0$plann2.area.toX) !== null && _neighbourRow$0$plann !== void 0 ? _neighbourRow$0$plann : x + 1;
+          }
           neighbours.forEach(function (n) {
             return !result.find(function (r) {
               return r.ElementId == n.plannedElement.elementId;
@@ -4128,25 +4159,40 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           });
           break;
         case 'LEFT':
-          var leftNeighbourRow = curGrid[plannedElement.area.fromX - 1];
-          if (!leftNeighbourRow) break;
-          var leftNeighbourSize = 0;
-          var leftStartElement = leftNeighbourRow.find(function (cell) {
-            if (leftNeighbourSize == startHeight) return true;
-            leftNeighbourSize = Math.round((leftNeighbourSize + cell.plannedElement.size.height) * 1000);
-            return false;
+          for (var _x2 = plannedElement.area.fromX - 1; _x2 > 0;) {
+            var _neighbourRow = curGrid[_x2];
+            for (var _y2 = 0; _y2 < _neighbourRow.length;) {
+              var _cell6$plannedElement, _cell6$plannedElement2;
+              var _cell6 = _neighbourRow[_y2];
+              if (neighbours.includes(_cell6)) continue;
+              if (clean && neighbourSize == startHeight) neighbours.push(_cell6);else if (!clean && neighbourSize >= startHeight && neighbourSize <= endHeight) neighbours.push(_cell6);
+              neighbourSize = Math.round((neighbourSize + _cell6.plannedElement.size.height) * 1000) / 1000;
+              _y2 = (_cell6$plannedElement = (_cell6$plannedElement2 = _cell6.plannedElement) === null || _cell6$plannedElement2 === void 0 ? void 0 : _cell6$plannedElement2.area.toY) !== null && _cell6$plannedElement !== void 0 ? _cell6$plannedElement : _y2 + 1;
+            }
+            neighbourSize = 0;
+            _x2 = _neighbourRow[0].plannedElement ? _neighbourRow[0].plannedElement.area.fromX - 1 : _x2 + 1;
+          }
+          neighbours.forEach(function (n) {
+            return !result.find(function (r) {
+              return r.ElementId == n.plannedElement.elementId;
+            }) && result.push(_this.plannerElements.get(n.plannedElement.elementId));
           });
-          if (leftStartElement) result.push(this.plannerElements.get(leftStartElement.plannedElement.elementId));
           break;
         case 'TOP':
-          var topNeighbour = undefined;
-          for (var y = plannedElement.area.toY; y < curGrid[plannedElement.area.fromX].length; y++) {
-            topNeighbour = curGrid[plannedElement.area.fromX][y];
-            break;
+          var topNeighbours = [];
+          for (var _x3 = plannedElement.area.fromX; _x3 < plannedElement.area.toX;) {
+            var _cell7 = curGrid[_x3][plannedElement.area.toY];
+            if (!_cell7) break;
+            topNeighbours.push(_cell7);
+            if (clean) break;
+            _x3 = _cell7.plannedElement.area.toX;
           }
-          if (!topNeighbour) break;
-          var tElementId = (_plannedElement3 = topNeighbour.plannedElement) === null || _plannedElement3 === void 0 ? void 0 : _plannedElement3.elementId;
-          if (tElementId) result.push(this.plannerElements.get(tElementId));
+          if (topNeighbours.length == 0) break;
+          topNeighbours.forEach(function (topNeighbour) {
+            var _plannedElement3;
+            var tElementId = (_plannedElement3 = topNeighbour.plannedElement) === null || _plannedElement3 === void 0 ? void 0 : _plannedElement3.elementId;
+            if (tElementId) result.push(_this.plannerElements.get(tElementId));
+          });
           break;
         case 'DOWN':
           var downNeighbour = (_curGrid$area$fromX = curGrid[plannedElement.area.fromX]) === null || _curGrid$area$fromX === void 0 ? void 0 : _curGrid$area$fromX[plannedElement.area.fromY - 1];
@@ -4219,12 +4265,12 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         var curHeight = 0;
         var row = frontGrid[x];
         for (var y = 0; y < row.length;) {
-          var _cell5, _cell$plannedElement$, _cell$plannedElement8;
+          var _cell8, _cell$plannedElement$, _cell$plannedElement8;
           var cell = row[y];
-          var elementId = (_cell5 = cell) === null || _cell5 === void 0 || (_cell5 = _cell5.plannedElement) === null || _cell5 === void 0 ? void 0 : _cell5.elementId;
+          var elementId = (_cell8 = cell) === null || _cell8 === void 0 || (_cell8 = _cell8.plannedElement) === null || _cell8 === void 0 ? void 0 : _cell8.elementId;
           if (elementId && cell && checkedElementIds.indexOf(elementId) == -1) {
             curHeight += this.plannerElements.get(elementId).getHeight();
-            if (x == 0 && y == 0) depth = this.plannerElements.get(elementId).getDepth();
+            if (x == 0 && y == 0) depth = cell.plannedElement.size.depth;
           }
           y = (_cell$plannedElement$ = (_cell$plannedElement8 = cell.plannedElement) === null || _cell$plannedElement8 === void 0 ? void 0 : _cell$plannedElement8.area.toY) !== null && _cell$plannedElement$ !== void 0 ? _cell$plannedElement$ : y + 1;
         }
@@ -4264,9 +4310,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         }
         if (Math.round(height) == Math.round(lastHeight) || onBottom) {
           if (!result[result.length - 1]) result.push([]);
-          result[result.length - 1].push(grid[x][row.length - 1].plannedElement);
+          result[result.length - 1].push(grid[x][onBottom ? 0 : row.length - 1].plannedElement);
         } else if (grid[x][row.length - 1].plannedElement.area.fromX == x) {
-          result.push([grid[x][row.length - 1].plannedElement]);
+          result.push([grid[x][onBottom ? 0 : row.length - 1].plannedElement]);
         }
         lastHeight = height;
         var new_x = row[row.length - 1].plannedElement.area.toX;
@@ -4334,37 +4380,52 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       };
       var curGrid = curPos.backside ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
       var plannerIdsToFill = [];
-      var existingPlannerIds = [];
-      var lastFreeSpace = 0;
-      var _loop = function _loop(_y) {
-        var _curGrid$index$x$_y;
-        var elementToCopy = (_curGrid$index$x$_y = curGrid[index.x][_y]) === null || _curGrid$index$x$_y === void 0 ? void 0 : _curGrid$index$x$_y.plannedElement;
-        if (!elementToCopy) {
-          y = _y;
-          return 1;
-        } // break
-        var length = element.area.toX - element.area.fromX;
-        var d = dir == 'RIGHT' ? +length : -length;
-        var isPlanned = curGrid.find(function (x, idx) {
-          return idx == element.area.toX + d - 1 && x[x.length - 1].index.y >= elementToCopy.area.fromY;
-        });
-        var neighbours = _this2.getNeighborElements(elementToCopy.elementId, dir);
-        var freeSpace = 0;
-        neighbours.forEach(function (n) {
-          if (_this2.getNeighborElements(n.ElementId, "TOP").length == 0) freeSpace += n.Width;
-        });
-        if (neighbours.length == 0 && lastFreeSpace >= elementToCopy.size.width && !isPlanned && elementToCopy) plannerIdsToFill.push(elementToCopy.elementId);
-        if (neighbours.length > 0 && freeSpace > element.size.width) plannerIdsToFill.push(neighbours[neighbours.length - 1].ElementId);else if (elementToCopy) existingPlannerIds.push(elementToCopy.elementId);
-        _y = elementToCopy.area.toY;
-        lastFreeSpace = freeSpace;
-        y = _y;
-      };
-      for (var y = 0; y <= index.y;) {
-        if (_loop(y)) break;
+      var length = element.area.toX - element.area.fromX;
+      var d = dir == 'RIGHT' ? +length : -length;
+      plannerIdsToFill.push(element.elementId);
+      _objectSpread(_objectSpread({}, element.area), {}, {
+        fromX: element.area.fromX + d,
+        toX: element.area.toX + d
+      });
+      var _loop = function _loop(_y3) {
+          var _curGrid$index$x$_y;
+          var supportElement = (_curGrid$index$x$_y = curGrid[index.x][_y3]) === null || _curGrid$index$x$_y === void 0 ? void 0 : _curGrid$index$x$_y.plannedElement;
+          if (!supportElement) {
+            y = _y3;
+            return 0;
+          } // break
+          var topElements = _this2.getNeighborElements(supportElement.elementId, 'TOP', false);
+          var topWidth = 0;
+          topElements.forEach(function (t) {
+            return topWidth += t.Width;
+          });
+          var freeSpace = 0;
+          if (supportElement.size.width > topWidth) freeSpace = supportElement.size.width - topWidth;
+          var neighbours = _this2.getNeighborElements(supportElement.elementId, dir, false);
+          neighbours.forEach(function (n) {
+            if (_this2.getNeighborElements(n.ElementId, 'TOP').length > 0) return;
+            freeSpace += n.Width;
+          });
+          if (freeSpace >= element.size.width) {
+            y = _y3;
+            return 0;
+          } // break
+          var missingWidth = element.size.width - freeSpace;
+          while (missingWidth > 0) {
+            plannerIdsToFill.push(supportElement.elementId);
+            missingWidth = Math.round(missingWidth - supportElement.size.width);
+          }
+          _y3 = supportElement.area.fromY - 1;
+          y = _y3;
+        },
+        _ret;
+      for (var y = index.y - 1; y >= 0;) {
+        _ret = _loop(y);
+        if (_ret === 0) break;
       }
       // if there is nothing to fill we copy everyting
       return {
-        elements: plannerIdsToFill.length == 0 ? existingPlannerIds : plannerIdsToFill,
+        elements: plannerIdsToFill.reverse(),
         backside: curPos.backside
       };
     }
@@ -4460,11 +4521,32 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       // [][] ->   |  [][][]
       // [][]      |  [][][]
       // [][][]    |  [][][][]
-      function moveGrid(plannedCells) {
+      var moveGrid = function moveGrid(plannedCells) {
         var grid = new Array();
         var rightNeighbour = plannedCells.filter(function (c) {
           return c.index.x == element.area.toX;
         });
+        var col = [];
+        var support = [];
+        var _loop2 = function _loop2() {
+          var c = frontGrid[x][element.area.fromY];
+          var s = frontGrid[x][element.area.fromY - 1];
+          if (c && !col.find(function (_c) {
+            return _c.plannedElement.elementId == c.plannedElement.elementId;
+          })) col.push(frontGrid[x][element.area.fromY]);
+          if (s && !support.find(function (_c) {
+            return _c.plannedElement.elementId == s.plannedElement.elementId;
+          })) support.push(frontGrid[x][element.area.fromY - 1]);
+        };
+        for (var x = 0; x < frontGrid.length; x++) {
+          _loop2();
+        }
+        var sizeXTop = col.reduce(function (acc, n) {
+          return acc += n.plannedElement.size.width;
+        }, 0);
+        var sizeXUnder = support ? support.reduce(function (acc, n) {
+          return acc += n.plannedElement.size.width;
+        }, 0) : 0;
         var rightNeighbourOfCopy = rightNeighbour.find(function (c) {
           return c.index.y == absoluteCopyIndex.y;
         });
@@ -4476,7 +4558,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         });
         plannedCells.forEach(function (cell) {
           // if we can't fill up (need to move the grid)
-          if (cell.index.x >= absoluteCopyIndex.x && (copyDirectionIsRight && (rightNeighbourOfCopy || rightNeighbour.length == 0) || !copyDirectionIsRight && (leftNeighbourOfCopy || leftNeighbour.length == 0) || absoluteCopyIndex.x == -1)) {
+          if (cell.index.x >= absoluteCopyIndex.x && (copyDirectionIsRight && (rightNeighbourOfCopy || rightNeighbour.length == 0) && (
+          // no free space or on the right height == move
+          !(sizeXTop <= sizeXUnder - element.size.width) || cell.index.y >= element.area.fromY && cell.index.y < element.area.toY) || !copyDirectionIsRight && (leftNeighbourOfCopy || leftNeighbour.length == 0) || absoluteCopyIndex.x == -1)) {
             cell.index.x += widthCopyArea;
             cell.plannedElement.area.fromX += widthCopyArea;
             cell.plannedElement.area.toX += widthCopyArea;
@@ -4485,13 +4569,13 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           grid[cell.index.x][cell.index.y] = cell;
         });
         return grid;
-      }
+      };
       frontGrid = moveGrid(this.getAllUsedCellsInGrid(false));
       for (var x = 0; x < widthCopyArea; x++) if (!frontGrid[absoluteCopyIndex.x + x]) frontGrid[absoluteCopyIndex.x + x] = [];
       this.generalPlanningState.grids[0].matrix = frontGrid;
       if (this.hasActiveBackside) {
         backGrid = moveGrid(this.getAllUsedCellsInGrid(true));
-        for (var _x2 = 0; _x2 < widthCopyArea; _x2++) if (!backGrid[absoluteCopyIndex.x + _x2]) backGrid[absoluteCopyIndex.x + _x2] = [];
+        for (var _x4 = 0; _x4 < widthCopyArea; _x4++) if (!backGrid[absoluteCopyIndex.x + _x4]) backGrid[absoluteCopyIndex.x + _x4] = [];
         this.generalPlanningState.grids[1].matrix = backGrid;
       }
     }
@@ -4606,8 +4690,6 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       var backsideForCopy = copyIndex.z == -1 || curPos.backside == true;
       if (cellIndex.x < 0) cellIndex.x = 0; // can't plan to negative space see prepareGridForColCopy
       var curGrid = backsideForCopy ? this.generalPlanningState.grids[1].matrix : this.generalPlanningState.grids[0].matrix;
-      // can't float need to dock
-      if (curGrid[cellIndex.x].length < cellIndex.y) cellIndex.y = curGrid[cellIndex.x].length;
       var cells = this.createNewCells(newElement, cellIndex.x, cellIndex.y, backsideForCopy);
       for (var i = 0; i < cells.length; i++) {
         if (!curGrid[cells[i].index.x]) curGrid[cells[i].index.x] = [];
@@ -4656,6 +4738,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         var el = cell.plannedElement;
         el.size.width = elementData.width;
         el.size.height = elementData.height;
+        el.size.depth = elementData.depth;
         el.area = {
           fromX: el.area.fromX,
           toX: !scpe ? Math.round(el.area.fromX + elementData.width / _this3.gridSetupParams.fixCellRasterWidth) : cell.index.x + 1,
@@ -4682,23 +4765,23 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           }
         }
       } else if (diff.x != 0) {
-        for (var _x3 = cell.plannedElement.area.fromX; _x3 < grid.length; _x3++) {
-          for (var _y2 = cell.plannedElement.area.fromY; _y2 < cell.plannedElement.area.toY; _y2++) {
-            var _cell6 = grid[_x3][_y2];
-            if (!_cell6 || _cell6.plannedElement.elementId == elementId) continue; //already corrected
-            _cell6.index.x += diff.x;
-            _cell6.plannedElement.area.fromX += diff.x;
-            _cell6.plannedElement.area.toX += diff.x;
+        for (var _x5 = cell.plannedElement.area.fromX; _x5 < grid.length; _x5++) {
+          for (var _y4 = cell.plannedElement.area.fromY; _y4 < cell.plannedElement.area.toY; _y4++) {
+            var _cell9 = grid[_x5][_y4];
+            if (!_cell9 || _cell9.plannedElement.elementId == elementId) continue; //already corrected
+            _cell9.index.x += diff.x;
+            _cell9.plannedElement.area.fromX += diff.x;
+            _cell9.plannedElement.area.toX += diff.x;
           }
         }
       }
 
       // after indices/areas are corrected rebuild the grid
       if (scpe) return false;
-      var changedElementData = res.cells[0].plannedElement;
+      res.cells[0].plannedElement;
       var newGrid = new Array();
       var plannedCells = this.getAllUsedCellsInGrid(false);
-      var _loop2 = function _loop2() {
+      var _loop3 = function _loop3() {
           var cell = plannedCells[idx];
           var area = cell.plannedElement.area;
           if (newGrid.find(function (x) {
@@ -4707,16 +4790,15 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
               return (y === null || y === void 0 || (_y$plannedElement3 = y.plannedElement) === null || _y$plannedElement3 === void 0 ? void 0 : _y$plannedElement3.elementId) == ((_cell$plannedElement9 = cell.plannedElement) === null || _cell$plannedElement9 === void 0 ? void 0 : _cell$plannedElement9.elementId);
             });
           })) return 0; // continue
-          for (var _x4 = area.fromX; _x4 < area.toX; _x4++) {
-            for (var _y3 = area.fromY; _y3 < area.toY; _y3++) {
-              var _support$plannedEleme;
-              if (!newGrid[_x4] && area.fromY == 0) newGrid[_x4] = [];
+          for (var _x6 = area.fromX; _x6 < area.toX; _x6++) {
+            for (var _y5 = area.fromY; _y5 < area.toY; _y5++) {
+              if (!newGrid[_x6] && area.fromY == 0) newGrid[_x6] = [];
 
               // we have a so called overhanging element not so nice, let's correct:
               var support = plannedCells.find(function (c) {
                 return c.plannedElement.area.toX >= cell.plannedElement.area.toX && c.plannedElement.area.toY == cell.index.y;
               });
-              if (!support && !newGrid[_x4]) {
+              if (!support && !newGrid[_x6]) {
                 _this3.generalPlanningState = backup;
                 return {
                   v: true
@@ -4724,19 +4806,19 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
               }
 
               // the element below got smaller
-              if (!newGrid[_x4] && (!support || ((_support$plannedEleme = support.plannedElement) === null || _support$plannedEleme === void 0 ? void 0 : _support$plannedEleme.elementId) == changedElementData.elementId)) {
+              if (!newGrid[_x6] && !support) {
                 _this3.generalPlanningState = backup;
                 return {
                   v: true
                 };
-              } else if (!newGrid[_x4]) newGrid[_x4] = [];
+              } else if (!newGrid[_x6]) newGrid[_x6] = [];
               // when the element above starts early and goes over multiple ones
 
               // regular case
-              newGrid[_x4][_y3] = _objectSpread(_objectSpread({}, cell), {}, {
+              newGrid[_x6][_y5] = _objectSpread(_objectSpread({}, cell), {}, {
                 index: {
-                  x: _x4,
-                  y: _y3
+                  x: _x6,
+                  y: _y5
                 },
                 plannedElement: _objectSpread(_objectSpread({}, cell.plannedElement), {}, {
                   area: {
@@ -4744,19 +4826,21 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
                     toX: cell.plannedElement.area.fromX + (cell.plannedElement.area.toX - cell.plannedElement.area.fromX),
                     fromY: cell.plannedElement.area.fromY,
                     toY: cell.plannedElement.area.fromY + (cell.plannedElement.area.toY - cell.plannedElement.area.fromY)
-                  }
+                  },
+                  size: _objectSpread(_objectSpread({}, cell.plannedElement.size), {}, {
+                    depth: elementData.depth
+                  })
                 })
               });
             }
           }
         },
-        _ret;
+        _ret2;
       for (var idx = 0; idx < plannedCells.length; idx++) {
-        _ret = _loop2();
-        if (_ret === 0) continue;
-        if (_ret) return _ret.v;
+        _ret2 = _loop3();
+        if (_ret2 === 0) continue;
+        if (_ret2) return _ret2.v;
       }
-      console.log('thoula 2 => ', newGrid);
       if (res.backside) this.generalPlanningState.grids[1].matrix = newGrid;else this.generalPlanningState.grids[0].matrix = newGrid;
       return false;
     }
@@ -4803,7 +4887,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             if (topNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVO', [topNeighbors[0]]);
             if (leftNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVL', [leftNeighbors[0]]);
             if (rightNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVR', [rightNeighbors[0]]);
-            if (rightNeighbors.length == 0 && leftNeighbors.length == 0 && downNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVU', [downNeighbors[0]]);
+            if (downNeighbors.length > 0) dockingPointHandlerInst.tryDockElement(element, 'AVU', [downNeighbors[0]]);
             element.PosNr = posNr;
             posNr++;
           }
@@ -4811,9 +4895,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
       }
       for (var i = 0; i < backGrid.length; i++) {
         for (var j = 0; j < backGrid[i].length; j++) {
-          var _cell7$plannedElement;
-          var _cell7 = backGrid[i][j];
-          var _elementId6 = _cell7 === null || _cell7 === void 0 || (_cell7$plannedElement = _cell7.plannedElement) === null || _cell7$plannedElement === void 0 ? void 0 : _cell7$plannedElement.elementId;
+          var _cell10$plannedElemen;
+          var _cell10 = backGrid[i][j];
+          var _elementId6 = _cell10 === null || _cell10 === void 0 || (_cell10$plannedElemen = _cell10.plannedElement) === null || _cell10$plannedElemen === void 0 ? void 0 : _cell10$plannedElemen.elementId;
           if (_elementId6 && allCheckedElementIds.indexOf(_elementId6) == -1) {
             var _element2 = this.plannerElements.get(_elementId6);
             allCheckedElementIds.push(_elementId6);
@@ -5151,9 +5235,9 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             var targetRowIndex = endRowIndex + 1;
             var _copyPossible = false;
             // Iterate through columns within the element's width
-            for (var _x5 = endColIndex; _x5 >= startColIndex; _x5--) {
-              if (isValidCell(_x5, targetRowIndex)) {
-                copyStartColIndex = _x5;
+            for (var _x7 = endColIndex; _x7 >= startColIndex; _x7--) {
+              if (isValidCell(_x7, targetRowIndex)) {
+                copyStartColIndex = _x7;
                 _copyPossible = true;
               }
             }
@@ -5170,19 +5254,19 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
             var _targetColIndex = endColIndex;
             var _copyPossible2 = false;
             // Iterate through rows within the element's height
-            for (var _y4 = startRowIndex; _y4 <= endRowIndex; _y4++) {
-              if (isValidCell(_targetColIndex, _y4)) {
-                copyStartRowIndex = _y4;
+            for (var _y6 = startRowIndex; _y6 <= endRowIndex; _y6++) {
+              if (isValidCell(_targetColIndex, _y6)) {
+                copyStartRowIndex = _y6;
                 _copyPossible2 = true;
                 break;
               }
             }
             if (!_copyPossible2) return undefined;
             _copyPossible2 = false;
-            for (var _x6 = endColIndex; _x6 <= endColIndex + elementCells.colCount; _x6++) {
-              if (isValidCell(_x6, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x6, copyStartRowIndex - 1))) {
+            for (var _x8 = endColIndex; _x8 <= endColIndex + elementCells.colCount; _x8++) {
+              if (isValidCell(_x8, copyStartRowIndex) && (copyStartRowIndex == 0 || !isValidCell(_x8, copyStartRowIndex - 1))) {
                 //check also for overhang
-                copyEndColIndex = _x6;
+                copyEndColIndex = _x8;
                 _copyPossible2 = true;
               } else {
                 break; //when you find one situation where it is not valid skip outside.
@@ -5385,7 +5469,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
         //system 4 useacse
         var totalColCount = matrix[0].length;
         var colSizes = Array(totalColCount).fill(-1);
-        var _loop3 = function _loop3(i) {
+        var _loop4 = function _loop4(i) {
           var _matrix$find;
           var cell = (_matrix$find = matrix.find(function (row) {
             var _row$i$plannedElement, _row$i$plannedElement2;
@@ -5399,7 +5483,7 @@ var BoxPlannerGrid = /*#__PURE__*/function () {
           if (colSizes[i] === -1) return 1; // break
         };
         for (var i = 0; i < totalColCount; i++) {
-          if (_loop3(i)) break;
+          if (_loop4(i)) break;
         }
         if (colSizes.includes(-1)) LOG$1.error(new Error('Column sizes are not set'));
         return colSizes;
@@ -5787,11 +5871,10 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
     value: (function () {
       var _copyPlannerElement = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(articleCopyRelation, copyInfo) {
         var _this = this;
-        var gridIsPrepared, plannerElementsToLoadSVG, that, i, cellPos, allDPs, j;
+        var plannerElementsToLoadSVG, that, i, cellPos, allDPs, j;
         return _regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              gridIsPrepared = false;
               if (copyInfo) {
                 _context5.next = 3;
                 break;
@@ -5801,25 +5884,22 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
               if (copyInfo.copyType == 'STD') copyInfo.targetElements = [];
               plannerElementsToLoadSVG = [];
               that = this;
-              articleCopyRelation.forEach(function (basketIDNewArticle, elementToCopyId) {
+              articleCopyRelation.forEach(function (val) {
                 var _copyInfo$targetEleme;
-                if (!gridIsPrepared) {
-                  if (copyInfo.copyIndex.z == -1) {
-                    if (!_this.boxPlannerGrid.getPlannerHasActiveBackside()) _this.boxPlannerGrid.prepareGridForBackSideCopy();
-                  } else {
-                    _this.boxPlannerGrid.prepareGridForColCopy(elementToCopyId, copyInfo.copyIndex);
-                  }
+                if (copyInfo.copyIndex.z == -1) {
+                  if (!_this.boxPlannerGrid.getPlannerHasActiveBackside()) _this.boxPlannerGrid.prepareGridForBackSideCopy();
+                } else {
+                  _this.boxPlannerGrid.prepareGridForColCopy(val.key, copyInfo.copyIndex);
                 }
-                gridIsPrepared = true;
 
                 //Init Planner Element
-                var plannerElement = new PlannerElementData(_this.set.getSetId(), basketIDNewArticle, _this.nextElementId, DivaBoxPlanner.plannerType);
+                var plannerElement = new PlannerElementData(_this.set.getSetId(), val.value, _this.nextElementId, DivaBoxPlanner.plannerType);
                 _this.nextElementId++;
-                _this.set.setElementId(basketIDNewArticle, plannerElement.ElementId);
+                _this.set.setElementId(val.value, plannerElement.ElementId);
                 var data = _this.set.getPlannerData(plannerElement.ElementId);
                 plannerElement.updatePlannerData(data);
-                _this.boxPlannerGrid.addElementAsCopy(elementToCopyId, plannerElement, copyInfo.copyIndex);
-                _this.constructionRulesHandler.onElementCopy(elementToCopyId, plannerElement.getElementId());
+                _this.boxPlannerGrid.addElementAsCopy(val.key, plannerElement, copyInfo.copyIndex);
+                _this.constructionRulesHandler.onElementCopy(val.key, plannerElement.getElementId());
                 plannerElementsToLoadSVG.push(plannerElement);
                 if (copyInfo.copyType == 'STD') (_copyInfo$targetEleme = copyInfo.targetElements) === null || _copyInfo$targetEleme === void 0 || _copyInfo$targetEleme.push(plannerElement.getElementId());
               });
@@ -5950,7 +6030,7 @@ var DivaBoxPlanner = /*#__PURE__*/function () {
         }
       }
       //remove duplicate
-      return Array.from(new Set(allElementsToCopy));
+      return allElementsToCopy;
     }
 
     /**