@crystaldesign/web-planner-logic 24.10.0-beta.2 → 24.10.0-beta.21

package/build/cjs/{PlannerHandler2D-a941c306.js → PlannerHandler2D-085a6eb4.js}

@@ -1,29 +1,819 @@
 'use strict';
 
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var index = require('./index-3703fcc3.js');
+var DivaUtils = require('@crystaldesign/diva-utils');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var index = require('./index-0cf8efc1.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var fabric = require('fabric');
-var DivaUtils = require('@crystaldesign/diva-utils');
 var serialize = require('w3c-xmlserializer');
-var DockingPointHandler = require('./DockingPointHandler-5c6b6024.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
 var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DivaUtils__default = /*#__PURE__*/_interopDefaultLegacy(DivaUtils);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var DivaUtils__default = /*#__PURE__*/_interopDefaultLegacy(DivaUtils);
 var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
 
-var LOG$1 = DivaUtils__default["default"].initLog('Planner', 'WEB-PLANNER-LOGIC');
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PlannerElementData = /*#__PURE__*/function () {
+  function PlannerElementData(setId, basketId, _elementId, plannerType) {
+    _classCallCheck__default["default"](this, PlannerElementData);
+    _defineProperty__default["default"](this, "planElement", void 0);
+    _defineProperty__default["default"](this, "plannerStateHash", void 0);
+    //this value saves the state of the plannerData - used to check if plannerData state changed
+    // private dockingPoints: Map<string, DockingPoint[]>; //This map saves all docking Points accessioated to a type
+    _defineProperty__default["default"](this, "dockingPoints", void 0);
+    //This map saves all docking Points accessioated to a type
+    _defineProperty__default["default"](this, "tempDockingPoints", void 0);
+    //When reloading the element this array saves the previous docking points for redocking
+    _defineProperty__default["default"](this, "plannerType", void 0);
+    _defineProperty__default["default"](this, "basketId", void 0);
+    _defineProperty__default["default"](this, "doSetWidthFromSVG", void 0);
+    _defineProperty__default["default"](this, "doSetDepthFromSVG", void 0);
+    this.basketId = basketId;
+    this.planElement = {
+      elementId: _elementId,
+      setId: setId,
+      worldPosCenter: new index.Vector3(0, 0, 0),
+      //welt Position der linken hinteren unteren Ecke des Elementes
+      rotDeg: 0,
+      posNr: -1,
+      setPosNr: -1
+    };
+    // this.dockingPoints = new Map<string, DockingPoint[]>();
+    this.dockingPoints = [];
+    this.tempDockingPoints = [];
+    this.plannerStateHash = '';
+    this.plannerType = plannerType;
+    this.doSetWidthFromSVG = false;
+    this.doSetDepthFromSVG = false;
+  }
+  return _createClass__default["default"](PlannerElementData, [{
+    key: "destroy",
+    value: function destroy() {
+      this.planElement.svgShapeOLF2D = null;
+      this.planElement.svgShapeOLT2D = null;
+      this.planElement.svgAsHTMLCanvas = undefined;
+      this.dockingPoints = [];
+      this.tempDockingPoints = [];
+    }
+  }, {
+    key: "getTempDockingPoints",
+    value: function getTempDockingPoints() {
+      return this.tempDockingPoints;
+    }
+  }, {
+    key: "clearTempDockingPoints",
+    value: function clearTempDockingPoints() {
+      this.tempDockingPoints = [];
+    }
+  }, {
+    key: "getDockingPoints",
+    value: function getDockingPoints() {
+      return this.dockingPoints;
+    }
+
+    /**
+     * This function returns true if any docking Point of the type is docking. For example, the type is AVL. if no AVL is docking - return false. If at least one AVL is docking - return true.
+     * @param type Type of the docking point
+     */
+  }, {
+    key: "dockingTypeIsDocking",
+    value: function dockingTypeIsDocking(type) {
+      var dockingPoints = this.getDockingPointsByType(type);
+      for (var i = 0; i < dockingPoints.length; i++) {
+        if (dockingPoints[i].IsDocking) return true;
+      }
+      return false;
+    }
+
+    /**
+     * This function returns all docking DPs of a specific type.
+     * @param type  The type of the docking Point , e.g. AVL
+     */
+  }, {
+    key: "getDockingDockingPointsByType",
+    value: function getDockingDockingPointsByType(type) {
+      var dockingPoints = this.getDockingPointsByType(type);
+      var ret = [];
+      for (var i = 0; i < dockingPoints.length; i++) {
+        if (dockingPoints[i].IsDocking) ret.push(dockingPoints[i]);
+      }
+      return ret;
+    }
+
+    /**
+     * This function returns all docking DPs of any type.
+     */
+  }, {
+    key: "getDockingDockingPoints",
+    value: function getDockingDockingPoints() {
+      var ret = [];
+      for (var i = 0; i < this.dockingPoints.length; i++) {
+        if (this.dockingPoints[i].IsDocking) ret.push(this.dockingPoints[i]);
+      }
+      return ret;
+    }
+
+    /**
+     * This function returns all notDocking DPs of a specific type.
+     * @param type  The type of the docking Point , e.g. AVL
+     */
+  }, {
+    key: "getFreeDockingPointsByType",
+    value: function getFreeDockingPointsByType(type) {
+      var dockingPoints = this.getDockingPointsByType(type);
+      var ret = [];
+      for (var i = 0; i < dockingPoints.length; i++) {
+        if (!dockingPoints[i].IsDocking) ret.push(dockingPoints[i]);
+      }
+      return ret;
+    }
+
+    /**
+     * This function returns the free docking with the specific type and number
+     * @param type
+     * @param number
+     */
+  }, {
+    key: "getFreeDockingPointByTypeAndNumber",
+    value: function getFreeDockingPointByTypeAndNumber(type, number) {
+      for (var i = 0; i < this.dockingPoints.length; i++) {
+        if (!this.dockingPoints[i].IsDocking && this.dockingPoints[i].Type == type && this.dockingPoints[i].Number == number) return this.dockingPoints[i];
+      }
+      return undefined;
+    }
+
+    /**
+     * This function returns all docking points of the element. It returns docking and not docking points with any type.
+     */
+  }, {
+    key: "getAllDockingPoints",
+    value: function getAllDockingPoints() {
+      return this.dockingPoints;
+    }
+  }, {
+    key: "getDockingPointsByType",
+    value: function getDockingPointsByType(type) {
+      var dps = [];
+      for (var i = 0; i < this.dockingPoints.length; i++) {
+        if (this.dockingPoints[i].Type == type) {
+          dps.push(this.dockingPoints[i]);
+        }
+      }
+      return dps;
+    }
+  }, {
+    key: "getDockingPointById",
+    value: function getDockingPointById(id) {
+      for (var i = 0; i < this.dockingPoints.length; i++) {
+        if (this.dockingPoints[i].DpId == id) {
+          return this.dockingPoints[i];
+        }
+      }
+      return undefined;
+    }
+    /**
+     * This function retuns the DockingPoint info in a string format that is used for the 3D image rendering planningData.
+     */
+  }, {
+    key: "getDockingPointJS3D",
+    value: function getDockingPointJS3D() {
+      var dpJS = '';
+      for (var i = 0; i < this.dockingPoints.length; i++) {
+        var dockingPoint = this.dockingPoints[i];
+        if (dockingPoint.IsDocking) {
+          if (dpJS != '') dpJS += ',';
+          dpJS += dockingPoint.Name + ':' + 'E' + dockingPoint.OnElementId;
+        }
+      }
+      return dpJS;
+    }
+  }, {
+    key: "ArticleCodex",
+    get: function get() {
+      var _this$planElement$pla, _this$planElement$pla2;
+      return (_this$planElement$pla = this.planElement.plannerData) !== null && _this$planElement$pla !== void 0 && _this$planElement$pla.articleCodex ? (_this$planElement$pla2 = this.planElement.plannerData) === null || _this$planElement$pla2 === void 0 ? void 0 : _this$planElement$pla2.articleCodex : '';
+    }
+    /**
+     * Returns true if the accessoire is docked to another element in the planner (relatedToBasketID is set).
+     */
+  }, {
+    key: "IsDockedAccessoire",
+    get: function get() {
+      return this.planElement.plannerData ? this.planElement.plannerData.isAccessoire : false;
+    }
+
+    //this.planElement.plannerData && this.planElement.plannerData.isAccessoire -> Becomes true if the accessoire is placed in the planner and docked to an element - this must not be true when loading the accessoire for the first time
+    //this.planElement.plannerData?.filterType == "Accessoire" -> This is always true - The Accesssoire article is listed as accessoire
+  }, {
+    key: "IsAccessoire",
+    get: function get() {
+      var _this$planElement$pla3;
+      return ((_this$planElement$pla3 = this.planElement.plannerData) === null || _this$planElement$pla3 === void 0 ? void 0 : _this$planElement$pla3.filterType) == 'Accessoire';
+    }
+  }, {
+    key: "FilterAVL",
+    get: function get() {
+      return this.getFilterAVL();
+    }
+  }, {
+    key: "FilterAVR",
+    get: function get() {
+      return this.getFilterAVR();
+    }
+  }, {
+    key: "PosNr",
+    get: function get() {
+      return this.planElement.posNr;
+    },
+    set: function set(posNr) {
+      this.planElement.posNr = posNr;
+    }
+  }, {
+    key: "SetPosNr",
+    set: function set(setPosNr) {
+      this.planElement.setPosNr = setPosNr;
+    }
+  }, {
+    key: "AccessoirePosNr",
+    get: function get() {
+      return this.planElement.posNrAcc != undefined ? this.planElement.posNrAcc : -1;
+    },
+    set: function set(posNr) {
+      this.planElement.posNrAcc = posNr;
+    }
+  }, {
+    key: "WorldPosCenter",
+    get: function get() {
+      return this.planElement.worldPosCenter;
+    }
+
+    /**
+     * This function returns the world pos of the top left bottom corner.
+     */,
+    set: function set(pos) {
+      this.planElement.worldPosCenter = pos;
+    }
+  }, {
+    key: "WorldPosCorner",
+    get: function get() {
+      if (this.planElement.plannerData == null) return new index.Vector3(0, 0, 0);
+      var cornerDir = new index.Vector2(-this.planElement.plannerData.width / 2, -this.planElement.plannerData.depth / 2);
+      cornerDir = index.Vector2.rotateOrigin(cornerDir, this.planElement.rotDeg);
+      return new index.Vector3(this.planElement.worldPosCenter.x + cornerDir.x, this.planElement.worldPosCenter.y - this.planElement.plannerData.height / 2, this.planElement.worldPosCenter.z + cornerDir.y);
+    },
+    set: function set(cornerPos) {
+      if (!this.planElement.plannerData) return;
+      var centerDir = new index.Vector2(this.planElement.plannerData.width / 2, this.planElement.plannerData.depth / 2);
+      centerDir = index.Vector2.rotateOrigin(centerDir, this.planElement.rotDeg);
+      this.planElement.worldPosCenter = new index.Vector3(cornerPos.x + centerDir.x, cornerPos.y + this.planElement.plannerData.height / 2, cornerPos.z + centerDir.y);
+    }
+
+    /**
+     * This function updates the world position and rotation of the element based of some delta Elements
+     * @param deltaMove     delta translation in cm
+     * @param deltaRotDeg   delta rotation in degrees
+     * @param rotCorrection Specifies the degrees the rotation is corrected. For Example if rotCorrection is 5 degrees and the final angle is between 20 and 25: Then the final angle is rounded to the nearest angle
+     */
+  }, {
+    key: "updateDeltaTrans",
+    value: function updateDeltaTrans(deltaMove, deltaRotDeg, rotCorrection, correctAngle) {
+      this.WorldPosCenter = new index.Vector3(this.WorldPosCenter.x + deltaMove.x, this.WorldPosCenter.y + deltaMove.y, this.WorldPosCenter.z + deltaMove.z);
+      if (deltaRotDeg != 0 || correctAngle) {
+        if (correctAngle) {
+          var newRot = this.RotDeg + deltaRotDeg;
+          if (rotCorrection != 0) {
+            if (Math.abs(newRot % rotCorrection) > rotCorrection / 2) {
+              deltaRotDeg = deltaRotDeg + rotCorrection - Math.abs(newRot % rotCorrection);
+            } else {
+              deltaRotDeg = deltaRotDeg + Math.abs(newRot % rotCorrection);
+            }
+          }
+        }
+        this.processCenterRot(deltaRotDeg);
+      }
+    }
+  }, {
+    key: "processCenterRot",
+    value: function processCenterRot(deltaRot) {
+      this.RotDeg = this.RotDeg + deltaRot;
+    }
+    /**
+     * Returns the position in world coordinates of the DP of the element depending on the position and rotation of the planner element
+     * @param dpID
+     */
+  }, {
+    key: "getWorldPosOfDP",
+    value: function getWorldPosOfDP(dpID) {
+      var dp = this.getDockingPointById(dpID);
+      if (dp == undefined) return new index.Vector3(0, 0, 0);
+      var rotatedDir = index.Vector2.rotateOrigin(new index.Vector2(dp === null || dp === void 0 ? void 0 : dp.LocalWorldPos.x, dp === null || dp === void 0 ? void 0 : dp.LocalWorldPos.z), this.RotDeg);
+      return new index.Vector3(this.WorldPosCorner.x + rotatedDir.x, this.WorldPosCorner.y, this.WorldPosCorner.z + rotatedDir.y);
+    }
+
+    /**
+     * Returns the outlines of the bounding box in world coordinates
+     */
+  }, {
+    key: "getWorld2DBBoxOutline",
+    value: function getWorld2DBBoxOutline() {
+      var bboxPoints = [];
+      bboxPoints.push(new index.Vector2(this.WorldPosCorner.x, this.WorldPosCorner.z));
+      var helper = index.Vector2.rotateOrigin(new index.Vector2(this.getGlobalWidth(), 0), this.RotDeg);
+      bboxPoints.push(new index.Vector2(this.WorldPosCorner.x + helper.x, this.WorldPosCorner.z + helper.y));
+      helper = index.Vector2.rotateOrigin(new index.Vector2(this.getGlobalWidth(), this.getGlobalDepth()), this.RotDeg);
+      bboxPoints.push(new index.Vector2(this.WorldPosCorner.x + helper.x, this.WorldPosCorner.z + helper.y));
+      helper = index.Vector2.rotateOrigin(new index.Vector2(0, this.getGlobalDepth()), this.RotDeg);
+      bboxPoints.push(new index.Vector2(this.WorldPosCorner.x + helper.x, this.WorldPosCorner.z + helper.y));
+      return bboxPoints;
+    }
+  }, {
+    key: "RotDeg",
+    get: function get() {
+      return this.planElement.rotDeg;
+    }
+
+    /**
+     * Saves the current docking point state
+     */,
+    set: function set(rot) {
+      this.planElement.rotDeg = rot;
+    }
+  }, {
+    key: "saveCurrentDPState",
+    value: function saveCurrentDPState() {
+      if (this.dockingPoints && this.dockingPoints.length > 0) {
+        this.tempDockingPoints = [];
+        for (var i = 0; i < this.dockingPoints.length; i++) {
+          this.tempDockingPoints.push(this.dockingPoints[i].clone());
+        }
+      }
+    }
+  }, {
+    key: "clearAllDockingPoints",
+    value: function clearAllDockingPoints() {
+      this.dockingPoints = [];
+    }
+  }, {
+    key: "addDockingPoint",
+    value: function addDockingPoint(dockingPoint) {
+      this.dockingPoints.push(dockingPoint);
+    }
+
+    //Sets the planner Data. Returns true if something changed -> Reload
+  }, {
+    key: "updatePlannerData",
+    value: function updatePlannerData(data) {
+      //The plannerData ist keine Kopie, sondern ein verweis - wenn im Konfigurator das PlannerData Object geändert wird, dann wird es das hier auch.
+      if ((data === null || data === void 0 ? void 0 : data.width) == undefined || data.width == -1) {
+        this.doSetWidthFromSVG = true;
+      } else {
+        this.doSetWidthFromSVG = false;
+      }
+      if ((data === null || data === void 0 ? void 0 : data.depth) == undefined || data.depth == -1) {
+        this.doSetDepthFromSVG = true;
+      } else {
+        this.doSetDepthFromSVG = false;
+      }
+      if (this.planElement.plannerData == null && data != null) {
+        this.planElement.plannerData = data;
+        this.plannerStateHash = DivaUtils.md5(JSON.stringify(this.planElement.plannerData));
+        return true;
+      }
+      if (data != null) this.planElement.plannerData = data;
+      if (!this.planElement.plannerData) return false;
+      var plannerDataForCache = _objectSpread(_objectSpread({}, this.planElement.plannerData), {}, {
+        currentAccessorires: []
+      });
+      var currentHash = DivaUtils.md5(JSON.stringify(plannerDataForCache));
+      if (this.plannerStateHash != currentHash) {
+        this.plannerStateHash = currentHash;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "cleanShapeOLF2D",
+    value: function cleanShapeOLF2D() {
+      this.planElement.svgShapeOLF2D = undefined;
+    }
+  }, {
+    key: "cleanShapeOLT2D",
+    value: function cleanShapeOLT2D() {
+      this.planElement.svgShapeOLT2D = undefined;
+    }
+  }, {
+    key: "DoSetWidthFromSVG",
+    get: function get() {
+      return this.doSetWidthFromSVG;
+    }
+  }, {
+    key: "DoSetDepthFromSVG",
+    get: function get() {
+      return this.doSetDepthFromSVG;
+    }
+  }, {
+    key: "WidthFromSVG",
+    set: function set(svgWidth) {
+      if (this.planElement.plannerData) this.planElement.plannerData.width = svgWidth;
+      this.doSetWidthFromSVG = false;
+    }
+  }, {
+    key: "DepthFromSVG",
+    set: function set(svgDepth) {
+      if (this.planElement.plannerData) this.planElement.plannerData.depth = svgDepth;
+      this.doSetDepthFromSVG = false;
+    }
+  }, {
+    key: "ElementId",
+    get: function get() {
+      return this.planElement.elementId;
+    }
+  }, {
+    key: "SvgFileName",
+    get: function get() {
+      var _this$planElement$pla4;
+      return (_this$planElement$pla4 = this.planElement.plannerData) === null || _this$planElement$pla4 === void 0 ? void 0 : _this$planElement$pla4.curSVG;
+    }
+  }, {
+    key: "Width",
+    get: function get() {
+      var _this$planElement$pla5;
+      return (_this$planElement$pla5 = this.planElement.plannerData) === null || _this$planElement$pla5 === void 0 ? void 0 : _this$planElement$pla5.width;
+    }
+  }, {
+    key: "Height",
+    get: function get() {
+      var _this$planElement$pla6;
+      return (_this$planElement$pla6 = this.planElement.plannerData) === null || _this$planElement$pla6 === void 0 ? void 0 : _this$planElement$pla6.height;
+    }
+  }, {
+    key: "Depth",
+    get: function get() {
+      var _this$planElement$pla7;
+      return (_this$planElement$pla7 = this.planElement.plannerData) === null || _this$planElement$pla7 === void 0 ? void 0 : _this$planElement$pla7.depth;
+    }
+  }, {
+    key: "HasAVL",
+    get: function get() {
+      var _this$planElement$pla8;
+      return (_this$planElement$pla8 = this.planElement.plannerData) === null || _this$planElement$pla8 === void 0 ? void 0 : _this$planElement$pla8.hasAVL;
+    }
+  }, {
+    key: "HasAVR",
+    get: function get() {
+      var _this$planElement$pla9;
+      return (_this$planElement$pla9 = this.planElement.plannerData) === null || _this$planElement$pla9 === void 0 ? void 0 : _this$planElement$pla9.hasAVR;
+    }
+  }, {
+    key: "HasAVO",
+    get: function get() {
+      return this.planElement.plannerData != undefined ? this.planElement.plannerData.countAVO > 0 ? true : false : false;
+    }
+  }, {
+    key: "HasAVU",
+    get: function get() {
+      return this.planElement.plannerData != undefined ? this.planElement.plannerData.countAVU > 0 ? true : false : false;
+    }
+  }, {
+    key: "HasAVC",
+    get: function get() {
+      return this.planElement.plannerData != undefined ? this.planElement.plannerData.countAVC > 0 ? true : false : false;
+    }
+  }, {
+    key: "SvgShapeOLF2D",
+    get: function get() {
+      return this.planElement.svgShapeOLF2D;
+    },
+    set: function set(shape) {
+      this.planElement.svgShapeOLF2D = shape;
+    }
+  }, {
+    key: "SvgShapeOLT2D",
+    get: function get() {
+      return this.planElement.svgShapeOLT2D;
+    },
+    set: function set(shape) {
+      this.planElement.svgShapeOLT2D = shape;
+    }
+  }, {
+    key: "OLTPolygon",
+    get: function get() {
+      return this.planElement.oltPolygon;
+    },
+    set: function set(polygon) {
+      this.planElement.oltPolygon = polygon;
+    }
+  }, {
+    key: "setupOLF",
+    value: function setupOLF(polygon, olfWidth, olfHeight) {
+      this.planElement.olfPolygon = polygon;
+      this.planElement.olfDepth = olfHeight;
+      this.planElement.olfWidth = olfWidth;
+    }
+  }, {
+    key: "clearOLF",
+    value: function clearOLF() {
+      this.planElement.olfPolygon = undefined;
+      this.planElement.olfDepth = undefined;
+      this.planElement.olfWidth = undefined;
+    }
+  }, {
+    key: "getGlobalWidth",
+    value: function getGlobalWidth() {
+      if (this.HasOLFPolygon) {
+        return this.planElement.olfWidth / DivaUtils__default["default"].UnitRecalc;
+      }
+      return this.Width;
+    }
+  }, {
+    key: "getGlobalDepth",
+    value: function getGlobalDepth() {
+      if (this.HasOLFPolygon) {
+        return this.planElement.olfDepth / DivaUtils__default["default"].UnitRecalc;
+      }
+      return this.Depth;
+    }
+  }, {
+    key: "HasOLTPolygon",
+    get: function get() {
+      return this.planElement.oltPolygon != null;
+    }
+  }, {
+    key: "HasOLFPolygon",
+    get: function get() {
+      return this.planElement.olfPolygon != null;
+    }
+  }, {
+    key: "getOLTPolygonWorldPos",
+    value: function getOLTPolygonWorldPos() {
+      if (!this.planElement.oltPolygon) return [];
+      var polygon = [];
+      for (var i = 0; i < this.planElement.oltPolygon.length; i++) {
+        var localWorldPos = new index.Vector2(this.planElement.oltPolygon[i].x / DivaUtils__default["default"].UnitRecalc, this.planElement.oltPolygon[i].y / DivaUtils__default["default"].UnitRecalc);
+        localWorldPos = index.Vector2.rotateOrigin(localWorldPos, this.RotDeg);
+        polygon.push(new index.Vector2(this.WorldPosCorner.x + localWorldPos.x, this.WorldPosCorner.z + localWorldPos.y));
+      }
+      return polygon;
+    }
+  }, {
+    key: "getOLFPolygonWorldPos",
+    value: function getOLFPolygonWorldPos() {
+      var polygon = [];
+      if (!this.planElement.olfPolygon) return [];
+      for (var i = 0; i < this.planElement.olfPolygon.length; i++) {
+        var localWorldPos = new index.Vector2(this.planElement.olfPolygon[i].x / DivaUtils__default["default"].UnitRecalc, this.planElement.olfPolygon[i].y / DivaUtils__default["default"].UnitRecalc);
+        localWorldPos = index.Vector2.rotateOrigin(localWorldPos, this.RotDeg);
+        polygon.push(new index.Vector2(this.WorldPosCorner.x + localWorldPos.x, this.WorldPosCorner.z + localWorldPos.y));
+      }
+      return polygon;
+    }
+  }, {
+    key: "SvgData",
+    get: function get() {
+      return this.planElement.svgData ? this.planElement.svgData : '';
+    },
+    set: function set(svgData) {
+      this.planElement.svgData = svgData;
+    }
+  }, {
+    key: "SvgDataOLTBase64",
+    set: function set(svgData) {
+      this.planElement.SvgDataOLTBase64 = svgData;
+    }
+  }, {
+    key: "Layer",
+    get: function get() {
+      return this.planElement.plannerData.layer;
+    }
+  }, {
+    key: "HasSvgAsHTMLCanvas",
+    get: function get() {
+      return this.planElement.svgAsHTMLCanvas == undefined ? false : true;
+    }
+  }, {
+    key: "SvgAsHTMLCanvas",
+    get: function get() {
+      return this.planElement.svgAsHTMLCanvas;
+    }
+
+    /** ---------------------------------Getter und setter for the view------------------------- */,
+    set: function set(ctx) {
+      this.planElement.svgAsHTMLCanvas = ctx;
+    }
+  }, {
+    key: "getPosNr",
+    value: function getPosNr() {
+      return this.planElement.setPosNr;
+    }
+  }, {
+    key: "getAccessoirePosNr",
+    value: function getAccessoirePosNr() {
+      return this.planElement.posNrAcc;
+    }
+  }, {
+    key: "getPosNrWithAccessoirePosNr",
+    value: function getPosNrWithAccessoirePosNr() {
+      return this.getIsDockedAccessoire() ? this.getPosNr() + '.' + (this.getAccessoirePosNr() != undefined && this.getAccessoirePosNr() < 10 ? '0' + this.getAccessoirePosNr() : this.getAccessoirePosNr()) : this.getPosNr().toString();
+    }
+  }, {
+    key: "getIsDockedAccessoire",
+    value: function getIsDockedAccessoire() {
+      return this.IsDockedAccessoire;
+    }
+  }, {
+    key: "getIsNotDockedAccessoire",
+    value: function getIsNotDockedAccessoire() {
+      var _this$planElement$pla10;
+      return !!((_this$planElement$pla10 = this.planElement.plannerData) !== null && _this$planElement$pla10 !== void 0 && _this$planElement$pla10.isNotDockedAccessoire);
+    }
+  }, {
+    key: "getParentElementId",
+    value: function getParentElementId() {
+      var _this$planElement$pla11;
+      return (_this$planElement$pla11 = this.planElement.plannerData) === null || _this$planElement$pla11 === void 0 ? void 0 : _this$planElement$pla11.parentElementId;
+    }
+  }, {
+    key: "getElementId",
+    value: function getElementId() {
+      return this.planElement.elementId;
+    }
+  }, {
+    key: "getBasketId",
+    value: function getBasketId() {
+      return this.basketId;
+    }
+  }, {
+    key: "getSetId",
+    value: function getSetId() {
+      return this.planElement.setId;
+    }
+  }, {
+    key: "getWorldPosCorner",
+    value: function getWorldPosCorner() {
+      return this.WorldPosCorner;
+    }
+
+    /**
+     * This function returns the position in world coordinates of the CENTER of the plannerElement
+     */
+  }, {
+    key: "getWorldPosCenter",
+    value: function getWorldPosCenter() {
+      return this.WorldPosCenter;
+    }
+  }, {
+    key: "getRotDeg",
+    value: function getRotDeg() {
+      return this.planElement.rotDeg;
+    }
+  }, {
+    key: "getRotRad",
+    value: function getRotRad() {
+      return this.planElement.rotDeg * Math.PI / 180;
+    }
+  }, {
+    key: "getHasAVL",
+    value: function getHasAVL() {
+      return this.planElement.plannerData ? this.planElement.plannerData.hasAVL : false;
+    }
+  }, {
+    key: "getHasAVR",
+    value: function getHasAVR() {
+      return this.planElement.plannerData ? this.planElement.plannerData.hasAVR : false;
+    }
+  }, {
+    key: "getHasAVO",
+    value: function getHasAVO() {
+      return this.planElement.plannerData != undefined ? this.planElement.plannerData.countAVO > 0 ? true : false : false;
+    }
+  }, {
+    key: "getHasAVU",
+    value: function getHasAVU() {
+      return this.planElement.plannerData != undefined ? this.planElement.plannerData.countAVU > 0 ? true : false : false;
+    }
+  }, {
+    key: "getHasAVC",
+    value: function getHasAVC() {
+      return this.planElement.plannerData != undefined ? this.planElement.plannerData.countAVC > 0 ? true : false : false;
+    }
+  }, {
+    key: "getFilterAVL",
+    value: function getFilterAVL() {
+      var _this$planElement$pla12;
+      return this.planElement.plannerData ? (_this$planElement$pla12 = this.planElement.plannerData) === null || _this$planElement$pla12 === void 0 ? void 0 : _this$planElement$pla12.AVLFilter : [];
+    }
+  }, {
+    key: "getFilterAVR",
+    value: function getFilterAVR() {
+      return this.planElement.plannerData ? this.planElement.plannerData.AVRFilter : [];
+    }
+  }, {
+    key: "getSVGShapeOLF2D",
+    value: function getSVGShapeOLF2D() {
+      return this.planElement.svgShapeOLF2D;
+    }
+  }, {
+    key: "getSVGShapeOLT2D",
+    value: function getSVGShapeOLT2D() {
+      return this.planElement.svgShapeOLT2D;
+    }
+  }, {
+    key: "getPlannerType",
+    value: function getPlannerType() {
+      return this.plannerType;
+    }
+
+    /**
+     * Returns the original svg XML
+     */
+  }, {
+    key: "getSVGData",
+    value: function getSVGData() {
+      return this.planElement.svgData ? this.planElement.svgData : '';
+    }
+  }, {
+    key: "getWidth",
+    value: function getWidth() {
+      return this.planElement.plannerData ? this.getGlobalWidth() : -1;
+    }
+  }, {
+    key: "getHeight",
+    value: function getHeight() {
+      return this.planElement.plannerData ? this.planElement.plannerData.height : -1;
+    }
+  }, {
+    key: "getDepth",
+    value: function getDepth() {
+      return this.planElement.plannerData ? this.getGlobalDepth() : -1;
+    }
+  }, {
+    key: "getDepthOLT",
+    value: function getDepthOLT() {
+      return this.Depth ? this.Depth : -1;
+    }
+  }, {
+    key: "getWidthOLT",
+    value: function getWidthOLT() {
+      return this.Width ? this.Width : -1;
+    }
+  }, {
+    key: "getLayer",
+    value: function getLayer() {
+      return this.planElement.plannerData ? this.planElement.plannerData.layer : 20;
+    }
+  }, {
+    key: "hasSvgAsHtmlCanvas",
+    value: function hasSvgAsHtmlCanvas() {
+      return this.planElement.svgAsHTMLCanvas == undefined ? false : true;
+    }
+  }, {
+    key: "getSvgAsHtmlCanvas",
+    value: function getSvgAsHtmlCanvas() {
+      return this.planElement.svgAsHTMLCanvas;
+    }
+  }, {
+    key: "hasSvgDataOLTBase64",
+    value: function hasSvgDataOLTBase64() {
+      return this.planElement.SvgDataOLTBase64 != undefined && this.planElement.SvgDataOLTBase64 != '';
+    }
+  }, {
+    key: "getSvgDataOLTBase64",
+    value: function getSvgDataOLTBase64() {
+      return this.planElement.SvgDataOLTBase64 != undefined ? this.planElement.SvgDataOLTBase64 : '';
+    }
+  }, {
+    key: "getAccessoires",
+    value: function getAccessoires() {
+      var _this$planElement$pla13;
+      return this.planElement.plannerData ? (_this$planElement$pla13 = this.planElement.plannerData) === null || _this$planElement$pla13 === void 0 ? void 0 : _this$planElement$pla13.accessoireList : [];
+    }
+  }, {
+    key: "getSVGsWithFormula",
+    value: function getSVGsWithFormula() {
+      var _this$planElement$pla14;
+      return (_this$planElement$pla14 = this.planElement.plannerData) === null || _this$planElement$pla14 === void 0 ? void 0 : _this$planElement$pla14.svgsWithFormula;
+    }
+  }, {
+    key: "getCurrentAccessorires",
+    value: function getCurrentAccessorires() {
+      var _this$planElement$pla15;
+      return this.planElement.plannerData ? (_this$planElement$pla15 = this.planElement.plannerData) === null || _this$planElement$pla15 === void 0 ? void 0 : _this$planElement$pla15.currentAccessorires : [];
+    }
+  }]);
+}();
+
+var LOG$2 = DivaUtils__default["default"].initLog('Planner', 'WEB-PLANNER-LOGIC');
 var SVGUtils = /*#__PURE__*/function () {
   function SVGUtils() {
     _classCallCheck__default["default"](this, SVGUtils);
@@ -589,7 +1379,7 @@ var SVGUtils = /*#__PURE__*/function () {
         }
       }
       function correctViewBoxScaleStyle(styleNode, scaleFactorSvgViewBox) {
-        if (styleNode.getAttribute('type') != 'text/css') LOG$1.debug('Warnung komisches style Element bei diesem CSS.');
+        if (styleNode.getAttribute('type') != 'text/css') LOG$2.debug('Warnung komisches style Element bei diesem CSS.');
         var styleText = styleNode.innerHTML;
         var styleParts = styleText.split('{');
         var newStyleContent = '';
@@ -1359,7 +2149,7 @@ var SVGUtils = /*#__PURE__*/function () {
               deltaParameter = 4;
               break;
             default:
-              LOG$1.error(new DivaUtils.DivaError('svg path command: ' + command + ' unknown'));
+              LOG$2.error(new DivaUtils.DivaError('svg path command: ' + command + ' unknown'));
               return;
           }
           for (var a = 0; a < number.length; a = a + deltaParameter) {
@@ -1488,6 +2278,453 @@ var SVGUtils = /*#__PURE__*/function () {
   }]);
 }();
 
+var LOG$1 = DivaUtils__default["default"].initLog('Planner', 'WEB-PLANNER-LOGIC');
+/**
+ * This class is used like a service.
+ * It handles different actions on planner Elements and its docking Points
+ */
+var DockingPointHandler = /*#__PURE__*/function () {
+  function DockingPointHandler() {
+    _classCallCheck__default["default"](this, DockingPointHandler);
+  }
+  return _createClass__default["default"](DockingPointHandler, [{
+    key: "getRotOfDP",
+    value:
+    /**
+     * This function returns the rotation of a vector that is specified by two positions in the 2 Dim Space
+     * The rotation is 0 when the Vector is pointing downwards (pos1 is directly above pos2). The rotation is then computed clockwise
+     * The result is resturned in degrees
+     * @param pos1 2 Dimensional position
+     * @param pos2 2 Dimensional position
+     */
+    function getRotOfDP(pos1, pos2) {
+      var directionVec = index.Vector2.getDirection(pos2, pos1);
+      var refDirection = new index.Vector2(0, 1);
+      var smallAngle = index.Vector2.angleDeg(refDirection, directionVec);
+      if (directionVec.x > 0) {
+        return 360 - smallAngle;
+      }
+      return smallAngle;
+    }
+  }, {
+    key: "getReferenceDPType",
+    value: function getReferenceDPType(dpType) {
+      switch (dpType) {
+        case 'AVR':
+          return 'AVL';
+        case 'AVL':
+          return 'AVR';
+        case 'AVO':
+          return 'AVU';
+        case 'AVU':
+          return 'AVO';
+        case 'AVC':
+          return 'AVC';
+      }
+      return '';
+    }
+  }, {
+    key: "sortDockingPoints",
+    value: function sortDockingPoints(dir, dockingPoints) {
+      if (dir == 'LEFT_TO_RIGHT') return dockingPoints.sort(function (a, b) {
+        return a.LocalWorldPos.x > b.LocalWorldPos.x ? 1 : -1;
+      });else return dockingPoints.sort(function (a, b) {
+        return a.LocalWorldPos.x < b.LocalWorldPos.x ? 1 : -1;
+      });
+    }
+    /**
+     * Check if the docking Points Filter match for the two elements.
+     * @param plannerElement1
+     * @param plannerElement2
+     */
+  }, {
+    key: "checkDPAVLFilterDoMatch",
+    value: function checkDPAVLFilterDoMatch(plannerElement1, plannerElement2) {
+      var avrFilter1 = plannerElement1.FilterAVR;
+      var avlFilter2 = plannerElement2.FilterAVL;
+      if (avlFilter2.length == 0 && avrFilter1.length == 0) return true; //Diese überprüfung bin ich mir nicht sicher, dass es so passt.
+
+      for (var i = 0; i < avrFilter1.length; i++) {
+        for (var j = 0; j < avlFilter2.length; j++) {
+          if (avrFilter1[i] == avlFilter2[j]) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  }, {
+    key: "checkDPAVRFilterDoMatch",
+    value: function checkDPAVRFilterDoMatch(plannerElement1, plannerElement2) {
+      var avlFilter1 = plannerElement1.FilterAVL;
+      var avrFilter2 = plannerElement2.FilterAVR;
+      if (avlFilter1.length == 0 && avrFilter2.length == 0) return true; //Diese überprüfung bin ich mir nicht sicher, dass es so passt.
+      for (var i = 0; i < avlFilter1.length; i++) {
+        for (var j = 0; j < avrFilter2.length; j++) {
+          if (avlFilter1[i] == avrFilter2[j]) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+
+    /**
+     * This function checks if two docking Points can be docked
+     */
+  }, {
+    key: "checkDPsDoMatch",
+    value: function checkDPsDoMatch(dp1, dp2, sourcePlannerElement, targetElement) {
+      dp1.ElementId;
+      var avrDockable = this.checkDPAVRFilterDoMatch(sourcePlannerElement, targetElement);
+      var avlDockable = this.checkDPAVLFilterDoMatch(sourcePlannerElement, targetElement);
+      var refDPType = this.getReferenceDPType(dp1.Type);
+      if (refDPType == 'AVL' && !avlDockable) return false;
+      if (refDPType == 'AVR' && !avrDockable) return false;
+      if (dp2.Type != refDPType) return false;
+      if (dp1.IsDocking || dp2.IsDocking) return false;
+      if (!dp1.IgnoreLayer || !dp2.IgnoreLayer) {
+        var doCheckLayer = true;
+        if (dp1.PlannerConfig.ignoreLayerAVC && (dp1.Type == 'AVC' || dp2.Type == 'AVC')) {
+          doCheckLayer = false;
+        }
+        if (dp1.PlannerConfig.ignoreLayerAVOAVU && (dp1.Type == 'AVO' || dp1.Type == 'AVU') && (dp2.Type == 'AVO' || dp2.Type == 'AVU')) {
+          doCheckLayer = false;
+        }
+
+        //Check layer
+        if (doCheckLayer && dp2.Layer == dp1.Layer) return false;
+      }
+      if (dp1.HasNumber && dp2.HasNumber && dp1.Number != dp2.Number) return false;
+      return true;
+    }
+
+    /**
+     * This function assumes that the two docking points are matching and can be docked
+     * @param dp1
+     * @param dp2
+     */
+  }, {
+    key: "doDock",
+    value: function doDock(dp1, dp2, elemId1, elemId2) {
+      dp1.doDock(dp2, elemId2);
+      dp2.doDock(dp1, elemId1);
+    }
+    /*
+      This function inits all docking points of a planner Element Data. The information of the docking Points is currently loaded from the SVG Loader
+      catalogCodex indicates the catalogCodex of the plannerElement
+      */
+  }, {
+    key: "initDockingPointsFromSvg",
+    value: function initDockingPointsFromSvg(plannerElement, dockingVectors, plannerconfig) {
+      plannerElement.saveCurrentDPState();
+      this.removeDockingPointRelations(plannerElement);
+      plannerElement.clearAllDockingPoints();
+      for (var i = 0; i < dockingVectors.length; i++) {
+        var dockingVector = dockingVectors[i];
+        var localWorldPos1 = new index.Vector2(dockingVector.x1 / DivaUtils__default["default"].UnitRecalc, dockingVector.y1 / DivaUtils__default["default"].UnitRecalc);
+        var localWorldPos2 = new index.Vector2(dockingVector.x2 / DivaUtils__default["default"].UnitRecalc, dockingVector.y2 / DivaUtils__default["default"].UnitRecalc);
+        var angle = this.getRotOfDP(localWorldPos1, localWorldPos2);
+        var dockingfilter = undefined;
+        if (dockingVector.dockingType == 'AVL') dockingfilter = plannerElement.getFilterAVL();else if (dockingVector.dockingType == 'AVR') dockingfilter = plannerElement.getFilterAVR();
+        var dockingPoint = new index.DockingPoint(plannerElement.getElementId(), dockingVector.dockingType, dockingVector.dockingName, new index.Vector3(localWorldPos1.x, 0, localWorldPos1.y), angle, plannerElement.Layer, plannerconfig, dockingfilter);
+        plannerElement.addDockingPoint(dockingPoint);
+      }
+    }
+
+    /**
+     * This function removes all docking Point relations from the Element .
+     * It removes them as well in the docked elements.
+     * This function is used when deleting a plannerElement
+     * @param plannerElement
+     */
+  }, {
+    key: "removeDockingPointRelations",
+    value: function removeDockingPointRelations(plannerElement) {
+      var dockingPoints = plannerElement.getDockingPoints();
+      for (var i = 0; i < dockingPoints.length; i++) {
+        var dockingPoint = dockingPoints[i];
+        if (dockingPoint.IsDocking) {
+          var refDockingPoint = dockingPoint.OnDP;
+          refDockingPoint.undock();
+          dockingPoint.undock();
+        }
+      }
+    }
+    /**
+     * This function removes all docking Point relations with the type from the Element .
+     * It removes them as well in the docked elements.
+     * This function is used when deleting a plannerElement
+     * @param plannerElement
+     * @param dpTypeList    The Type of the docking Point like AVL or AVR
+     */
+  }, {
+    key: "removeDockingPointRelationsByType",
+    value: function removeDockingPointRelationsByType(plannerElement, dpTypeList) {
+      var undockedFromElements = [];
+      var dockingPoints = plannerElement.getDockingPoints();
+      for (var i = 0; i < dockingPoints.length; i++) {
+        var dockingPoint = dockingPoints[i];
+        if (dpTypeList.indexOf(dockingPoint.Type) > -1 && dockingPoint.IsDocking) {
+          var refDockingPoint = dockingPoint.OnDP;
+          undockedFromElements.push(refDockingPoint.ElementId);
+          refDockingPoint.undock();
+          dockingPoint.undock();
+        }
+      }
+      return undockedFromElements;
+    }
+    /**
+     * This function returns a list of docking points that are dockable to the source Planner Element. The function only returns docking Points that lay within a specific area.
+     *
+     * @param sourceElement
+     * @param targetElements
+     * @param autoDockingDistance   //gibt die distance an in der er automatisch snappen muss. Infinity _> Docke überall. 0 Docke nie
+     * @returns saves dockable dockingpoints per type with the distance
+     */
+  }, {
+    key: "searchDockableElementsInArea",
+    value: function searchDockableElementsInArea(sourceElement, targetElements, autoDockingDistance // Wenn 0, dann dockt es immer
+    ) {
+      var sourceDPs = sourceElement.getAllDockingPoints();
+      var dockableDPPairs = new Map(); //saves all dockable dockingpoints per type
+      for (var i = 0; i < targetElements.length; i++) {
+        var targetElement = targetElements[i];
+        if (sourceElement.getElementId() == targetElement.getElementId()) continue;
+        for (var di = 0; di < sourceDPs.length; di++) {
+          var sourceDP = sourceDPs[di];
+          var targetType = this.getReferenceDPType(sourceDP.Type);
+          var targetDPS = targetElement.getFreeDockingPointsByType(targetType);
+          for (var j = 0; j < targetDPS.length; j++) {
+            var targetDP = targetDPS[j];
+            if (this.checkDPsDoMatch(sourceDP, targetDP, sourceElement, targetElement)) {
+              var worldPosSourceDP = sourceElement.getWorldPosOfDP(sourceDP.DpId);
+              var worldPosTargetDP = targetElement.getWorldPosOfDP(targetDP.DpId);
+              var distance = Math.sqrt(Math.pow(worldPosSourceDP.x - worldPosTargetDP.x, 2) + Math.pow(worldPosSourceDP.z - worldPosTargetDP.z, 2));
+              if (autoDockingDistance != 0 && (autoDockingDistance == Infinity || distance < autoDockingDistance)) {
+                //  dockableDPs.set();
+                //TODO Lea - ich muss mir das paar merken!!!! Hier habe ich ein potentielles Paar gefunden.
+                //Pro dockingPoint merke dir den mit dem kleinsten Abstand
+                if (dockableDPPairs.has(sourceDP.Type)) {
+                  if (distance < dockableDPPairs.get(sourceDP.Type).distance) {
+                    dockableDPPairs.set(sourceDP.Type, {
+                      sourceDP: sourceDP,
+                      targetDP: targetDP,
+                      distance: distance
+                    });
+                  }
+                } else {
+                  dockableDPPairs.set(sourceDP.Type, {
+                    sourceDP: sourceDP,
+                    targetDP: targetDP,
+                    distance: distance
+                  });
+                }
+              }
+            }
+          }
+        }
+      }
+      return dockableDPPairs;
+    }
+
+    /**
+     * This function tries to dock an element sourcePlannerElement to one element in the targetElements
+     * @param sourcePlannerElement  the element that must be docked
+     * @param sourceDPType  the type of the element that must be docked
+     * @param targetElements    the target Element on which the element should be docked
+     * the function returns true when the Element is docked
+     */
+  }, {
+    key: "tryDockElement",
+    value: function tryDockElement(sourcePlannerElement, sourceDPType, targetElements) {
+      var dockingPoints = sourcePlannerElement.getDockingPointsByType(sourceDPType);
+      if (!dockingPoints) {
+        return false;
+      }
+      var refDPType = this.getReferenceDPType(sourceDPType);
+      for (var i = 0; i < targetElements.length; i++) {
+        var targetElement = targetElements[i];
+        if (targetElement.ElementId == sourcePlannerElement.ElementId) continue;
+
+        //this if denies an element (with is not an accessorie) to dock to an accessorie of another element
+        if (!sourcePlannerElement.IsAccessoire && targetElement.IsAccessoire && targetElement.getParentElementId() != sourcePlannerElement.getElementId()) continue;
+        if (sourcePlannerElement.IsAccessoire && !targetElement.getAccessoires().includes(sourcePlannerElement.ArticleCodex)) continue;
+        var targetDockingPoints = targetElement.getDockingPointsByType(refDPType);
+        if (sourcePlannerElement.getIsDockedAccessoire() || sourcePlannerElement.IsAccessoire) {
+          targetDockingPoints = this.sortDockingPoints('LEFT_TO_RIGHT', targetDockingPoints);
+        }
+        if (!targetDockingPoints) continue; //Das target Element hat keinen solchen dp
+        for (var j = 0; j < targetDockingPoints.length; j++) {
+          var targetDockingPoint = targetDockingPoints[j];
+          for (var dpNr = 0; dpNr < dockingPoints.length; dpNr++) {
+            var dockingPoint = dockingPoints[dpNr];
+            if (this.checkDPsDoMatch(dockingPoint, targetDockingPoint, sourcePlannerElement, targetElement)) {
+              //The two docking Points match
+              this.doDock(dockingPoint, targetDockingPoint, sourcePlannerElement.ElementId, targetElement.ElementId); //Passender Docking Point wurde gefunden. Nun erfolgt das docken
+              return dockingPoint;
+            }
+          }
+        }
+      }
+      return false;
+    }
+
+    /**
+     * This function tries to dock an element sourcePlannerElement to the targetElement and a specific DockingPoint of the targetElement
+     * @param sourcePlannerElement  the element that must be docked
+     * @param sourceDPType  the type of the element that must be docked
+     * @param targetElements    the target Element on which the element should be docked
+     * the function returns true when the Element is docked
+     */
+  }, {
+    key: "tryDockElementToDP",
+    value: function tryDockElementToDP(sourcePlannerElement, targetElement, targetDP) {
+      var sourceDPType = this.getReferenceDPType(targetDP.Type);
+      var dockingPoints = sourcePlannerElement.getFreeDockingPointsByType(sourceDPType);
+      if (!dockingPoints) {
+        return false;
+      }
+      for (var i = 0; i < dockingPoints.length; i++) {
+        if (this.checkDPsDoMatch(dockingPoints[i], targetDP, sourcePlannerElement, targetElement)) {
+          //The two docking Points match
+          this.doDock(dockingPoints[i], targetDP, sourcePlannerElement.ElementId, targetElement.ElementId); //Passender Docking Point wurde gefunden. Nun erfolgt das docken
+          return dockingPoints[i];
+        }
+      }
+      return false;
+    }
+
+    /**
+     * This function tries to dock an element sourcePlannerElement to the targetElement and a specific DockingPoint of the targetElement
+     * @param sourcePlannerElement  the element that must be docked
+     * @param sourceDPType  the type of the element that must be docked
+     * @param sourceDP      The source DP
+     * @param targetElements    the target Element on which the element should be docked
+     * the function returns true when the Element is docked
+     */
+  }, {
+    key: "tryDockElementDPToDP",
+    value: function tryDockElementDPToDP(sourcePlannerElement, targetElement, sourceDP, targetDP) {
+      if (this.checkDPsDoMatch(sourceDP, targetDP, sourcePlannerElement, targetElement)) {
+        this.doDock(sourceDP, targetDP, sourcePlannerElement.getElementId(), targetElement.getElementId());
+        return true;
+      }
+      return false;
+    }
+
+    /**
+     * this function updates the dockingPoint relations. It is called after reloading one or more SVGs (StretchAreas / SVG Tausch) . For example when changing the ArmRests of
+     * two docking sofas - the old docking information is saved in the plannerElement. The new DockingPoints must be updated based on the previous docking information.
+     * @param plannerElements
+     * @returns returns the list of all Articles that have lost their dockingPoint relations
+     */
+  }, {
+    key: "updateDockingRelations",
+    value: function updateDockingRelations(plannerElements) {
+      //Sort the elements by pos nr
+      var sortedPlannerElementsbyPosNr = [];
+      var accElems = [];
+      plannerElements.forEach(function (plannerElement, elementId) {
+        if (!plannerElement.IsDockedAccessoire) {
+          sortedPlannerElementsbyPosNr[plannerElement.PosNr - 1] = plannerElement;
+        } else {
+          accElems.push(plannerElement);
+        }
+      });
+      sortedPlannerElementsbyPosNr = sortedPlannerElementsbyPosNr.concat(accElems);
+      var elementsLostDockingRelation = [];
+      //nun laufe alle Elemente durch und schaue, ob sie vorher zu einem DP gedockt haben. Diese müssen nun auch gedockt werden, falls möglich
+      for (var i = 0; i < sortedPlannerElementsbyPosNr.length; i++) {
+        if (sortedPlannerElementsbyPosNr[i]) {
+          var element = sortedPlannerElementsbyPosNr[i];
+          var tempDPs = element.getTempDockingPoints();
+          for (var j = 0; j < tempDPs.length; j++) {
+            var tempDP = tempDPs[j];
+            if (tempDP.IsDocking && tempDP.OnElementId) {
+              //Check if tempDP still exists.
+              var dp = element.getDockingPointById(tempDP.DpId);
+              if (dp == undefined) {
+                //In this case the dockingPoint does not exist anymore
+                var targetElement = plannerElements.get(tempDP.OnElementId);
+
+                //In some cases like hasena fjord it can happen - that the Dockingpoint nummer has changed.
+                //First kopfteil and rahmen have docked using AVO_1 and AVU_1. When changing the size of the bedframe the docking Points get changed AVO_2 and AVU_2.
+                //In this case -look if both elements only have 1 dockingpoint of the same Type - and then redock them.
+
+                var dockingPointsCurElement = element.getFreeDockingPointsByType(tempDP.Type);
+                if (dockingPointsCurElement.length == 1) {
+                  var dockingPointsToDockElement = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getFreeDockingPointsByType(this.getReferenceDPType(tempDP.Type));
+                  if ((dockingPointsToDockElement === null || dockingPointsToDockElement === void 0 ? void 0 : dockingPointsToDockElement.length) == 1) {
+                    this.tryDockElementDPToDP(element, targetElement, dockingPointsCurElement[0], dockingPointsToDockElement[0]);
+                    continue;
+                  }
+                }
+                if (targetElement) elementsLostDockingRelation.push(targetElement);
+                continue;
+              }
+              //Suche den targetDP und schaue ob sie schon docken
+              if (plannerElements.has(tempDP.OnElementId)) {
+                var _targetElement = plannerElements.get(tempDP.OnElementId);
+                var targetDP = _targetElement === null || _targetElement === void 0 ? void 0 : _targetElement.getDockingPointById(tempDP.OnDP.DpId);
+                this.tryDockElementDPToDP(element, _targetElement, dp, targetDP);
+              }
+            }
+          }
+        }
+      }
+      for (var i = 0; i < sortedPlannerElementsbyPosNr.length; i++) {
+        if (sortedPlannerElementsbyPosNr[i]) sortedPlannerElementsbyPosNr[i].clearTempDockingPoints();
+      }
+      return elementsLostDockingRelation;
+    }
+    /**
+     * This function is used when initialiazing a planning. In the old planner we do only know that a docking point of a specific kind (AVL) of the source Element docks with any docking Point of the targetPlannerElement.
+     * If there is only one target docking Point in the reference object - dock to that. However, when looking at AVOs, there can be that the target element has two AVUs. In this case search the docking point that is the neares.
+     * @param sourcePlannerElement
+     * @param targetPlannerElement
+     * @param sourceDPType  The type of the dockingPoint
+     */
+  }, {
+    key: "initDockingPointRelationByArea",
+    value: function initDockingPointRelationByArea(sourcePlannerElement, targetPlannerElement, sourceDPType) {
+      // let refDPTarget = this.getReferenceDPType(sourceDPType);
+      var freeSourceDPs = sourcePlannerElement.getFreeDockingPointsByType(sourceDPType);
+      //let allTargetDPs = targetPlannerElement.getDockingPointsByType(refDPTarget);
+
+      if (freeSourceDPs.length > 0) {
+        var allDockingPairs = this.searchDockableElementsInArea(sourcePlannerElement, [targetPlannerElement], Infinity);
+        if (allDockingPairs.has(sourceDPType)) {
+          var dockingPair = allDockingPairs.get(sourceDPType);
+          if (dockingPair) {
+            var success = this.tryDockElementDPToDP(sourcePlannerElement, targetPlannerElement, dockingPair.sourceDP, dockingPair.targetDP);
+            if (!success) {
+              LOG$1.debug('Error when initializing docking Points. Two dockingpoints could not be matched. sourceDP: ' + dockingPair.sourceDP.DpId + '; sourceRlementId: ' + dockingPair.sourceDP.ElementId + '; targetDP: ' + dockingPair.targetDP.DpId + ' targetElemId: ' + dockingPair.targetDP.ElementId);
+            }
+          }
+        }
+      }
+    }
+
+    /**
+     * This function returns true if the two elements are docking. False if they are not
+     * @param element1
+     * @param element2
+     */
+  }, {
+    key: "checkElementsAreDocking",
+    value: function checkElementsAreDocking(element1, element2) {
+      var allDockingDockingPoints = element1.getDockingDockingPoints();
+      for (var i = 0; i < allDockingDockingPoints.length; i++) {
+        var dp = allDockingDockingPoints[i];
+        if (dp.OnElementId == element2.getElementId()) return true;
+      }
+      return false;
+    }
+  }]);
+}();
+var dockingPointHandlerInst = new DockingPointHandler();
+
 var LOG = DivaUtils__default["default"].initLog('Planner', 'WEB-PLANNER-LOGIC');
 //Diese Klasse dient dazu, die 2D Shapes zu verwalten. Achtung_ Hier wird es aber noch nicht angezeigt
 var PlannerHandler2D = /*#__PURE__*/function () {
@@ -1608,7 +2845,7 @@ var PlannerHandler2D = /*#__PURE__*/function () {
       var that = this;
       svgXml = this.svgUtils.removeMaskFromSvg(svgXml); //Correct mask attributes
       var svgXmlOLT = this.svgUtils.removeOLFFromSvg(svgXml);
-      DockingPointHandler.dockingPointHandlerInst.initDockingPointsFromSvg(plannerElement, this.svgUtils.getDPsInSVG(svgXml), plannerconfig);
+      dockingPointHandlerInst.initDockingPointsFromSvg(plannerElement, this.svgUtils.getDPsInSVG(svgXml), plannerconfig);
       var oltPoints = this.svgUtils.getPointOfPoligonById(svgXml, 'OLT');
       if (oltPoints === undefined) throw new Error('no olt fount in svg');
       plannerElement.OLTPolygon = oltPoints;
@@ -1794,4 +3031,6 @@ var PlannerHandler2D = /*#__PURE__*/function () {
 }();
 var handler2D = new PlannerHandler2D();
 
+exports.PlannerElementData = PlannerElementData;
+exports.dockingPointHandlerInst = dockingPointHandlerInst;
 exports.handler2D = handler2D;