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

package/build/cjs/PlannerHandler2D-dbe1d858.js

@@ -1,2470 +0,0 @@
-'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 _regeneratorRuntime = require('@babel/runtime/regenerator');
-var index = require('./index-d63749e4.js');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var fabric = require('fabric');
-var DivaUtils = require('@crystaldesign/diva-utils');
-var serialize = require('w3c-xmlserializer');
-
-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 _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var DivaUtils__default = /*#__PURE__*/_interopDefaultLegacy(DivaUtils);
-var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
-
-var LOG$2 = DivaUtils__default["default"].initLog('Planner', 'WEB-PLANNER-LOGIC');
-var SVGUtils = /*#__PURE__*/function () {
-  function SVGUtils() {
-    _classCallCheck__default["default"](this, SVGUtils);
-  }
-  /**
-   * This function removes all VIF and OLF information from the SVG. This is used for displaying only the OLT information
-   * @param content The svg with OLF and OLT
-   * @returns SVG with only OLT information
-   */
-  return _createClass__default["default"](SVGUtils, [{
-    key: "removeOLFFromSvg",
-    value: function removeOLFFromSvg(content) {
-      var parser = new DOMParser();
-      var xmlDocument;
-      xmlDocument = parser.parseFromString(content, 'application/xml');
-      var vifObjs = xmlDocument.evaluate("//*[starts-with(@id,'VIF')]", xmlDocument, null, 7, null);
-      if (vifObjs.snapshotLength > 0) {
-        for (var i = 0; i < vifObjs.snapshotLength; i++) {
-          var _parentElement;
-          (_parentElement = vifObjs.snapshotItem(i).parentElement) === null || _parentElement === void 0 || _parentElement.removeChild(vifObjs.snapshotItem(i));
-        }
-      }
-      var olfObjs = xmlDocument.evaluate("//*[starts-with(@id,'OLF')]", xmlDocument, null, 7, null);
-      if (olfObjs.snapshotLength > 0) {
-        for (var i = 0; i < olfObjs.snapshotLength; i++) {
-          var _parentElement2;
-          (_parentElement2 = olfObjs.snapshotItem(i).parentElement) === null || _parentElement2 === void 0 || _parentElement2.removeChild(olfObjs.snapshotItem(i));
-        }
-      }
-      if (typeof XMLSerializer !== 'undefined') return new XMLSerializer().serializeToString(xmlDocument);else {
-        return serialize__default["default"](xmlDocument);
-      }
-    }
-
-    /**
-     * This function returns the DPs of an svg
-     * @param content The svg with OLF and OLT
-     * @returns SVG with only OLT information
-     */
-  }, {
-    key: "getDPsInSVG",
-    value: function getDPsInSVG(content) {
-      var dockingpointsSvgLine = [];
-      var parser = new DOMParser();
-      var xmlDocument = parser.parseFromString(content, 'application/xml');
-      var dpObjs = xmlDocument.evaluate("//*[starts-with(@id,'AV')]", xmlDocument, null, 7, null);
-      if (dpObjs.snapshotLength > 0) {
-        for (var i = 0; i < dpObjs.snapshotLength; i++) {
-          var obj = dpObjs.snapshotItem(i);
-          if ((obj === null || obj === void 0 ? void 0 : obj.nodeName) === 'line') {
-            dockingpointsSvgLine.push({
-              x1: Number(obj.getAttribute('x1')),
-              y1: Number(obj.getAttribute('y1')),
-              x2: Number(obj.getAttribute('x2')),
-              y2: Number(obj.getAttribute('y2')),
-              dockingName: obj.getAttribute('id'),
-              dockingType: obj.getAttribute('id').substring(0, 3)
-            });
-          } else {
-            throw new Error('nodename type: ' + obj.nodeName + ' not implemented');
-          }
-        }
-      }
-      dockingpointsSvgLine.sort(function (a, b) {
-        if (a.dockingType === 'AVL') return -1;
-        if (a.dockingType === 'AVR' && ['AVR', 'AVC', 'AVU', 'AVO', 'AVS', 'AVN'].includes(b.dockingType)) return -1;
-        return 0;
-      });
-      return dockingpointsSvgLine;
-    }
-
-    /**
-     * This function returns the DPs of an svg
-     * @param content The svg with OLF and OLT
-     * @returns SVG with only OLT information
-     */
-  }, {
-    key: "getPointOfPoligonById",
-    value: function getPointOfPoligonById(content, id) {
-      var points = [];
-      var parser = new DOMParser();
-      var xmlDocument = parser.parseFromString(content, 'application/xml');
-      var dpObjs = xmlDocument.evaluate("//*[starts-with(@id,'" + id + "')]", xmlDocument, null, 7, null);
-      if (dpObjs.snapshotLength > 1 || dpObjs.snapshotLength == 0) return undefined;
-      for (var i = 0; i < dpObjs.snapshotLength; i++) {
-        var obj = dpObjs.snapshotItem(i);
-        if ((obj === null || obj === void 0 ? void 0 : obj.nodeName) === 'polygon') {
-          var pointsAsString = obj.getAttribute('points');
-          if (pointsAsString) {
-            var pointsFromString = pointsAsString.split(' ');
-            for (var j = 0; j < pointsFromString.length; j++) {
-              var xandY = pointsFromString[j].split(',');
-              if (xandY.length !== 2) continue;
-              points.push(new index.Vector2(Number(xandY[0]), Number(xandY[1])));
-            }
-          } else {
-            return undefined;
-          }
-        }
-      }
-      return points;
-    }
-  }, {
-    key: "getBoundingBoxOfPoints",
-    value: function getBoundingBoxOfPoints(points) {
-      var xArr = points.map(function (c) {
-        return c.x;
-      });
-      var yArr = points.map(function (c) {
-        return c.y;
-      });
-      var minX = Math.min.apply(Math, _toConsumableArray__default["default"](xArr));
-      var maxX = Math.max.apply(Math, _toConsumableArray__default["default"](xArr));
-      var minY = Math.min.apply(Math, _toConsumableArray__default["default"](yArr));
-      var maxY = Math.max.apply(Math, _toConsumableArray__default["default"](yArr));
-      var width = maxX - minX;
-      var height = maxY - minY;
-      return {
-        width: width,
-        height: height,
-        minX: minX,
-        minY: minY
-      };
-    }
-
-    /**
-     * Returns OLF geometry (minX, minY, width, height) from SVG - supports rect and polygon.
-     * Iterates through matches to find first rect/polygon (handles Illustrator group wrappers).
-     */
-  }, {
-    key: "getOLFGeometryFromSvg",
-    value: function getOLFGeometryFromSvg(content) {
-      var parser = new DOMParser();
-      var xmlDocument = parser.parseFromString(content, 'application/xml');
-      var olfObjs = xmlDocument.evaluate("//*[starts-with(@id,'OLF')]", xmlDocument, null, 7, null);
-      for (var i = 0; i < olfObjs.snapshotLength; i++) {
-        var obj = olfObjs.snapshotItem(i);
-        if ((obj === null || obj === void 0 ? void 0 : obj.nodeName) === 'rect') {
-          var _obj$getAttribute, _obj$getAttribute2, _obj$getAttribute3, _obj$getAttribute4;
-          var x = parseFloat((_obj$getAttribute = obj.getAttribute('x')) !== null && _obj$getAttribute !== void 0 ? _obj$getAttribute : '0');
-          var y = parseFloat((_obj$getAttribute2 = obj.getAttribute('y')) !== null && _obj$getAttribute2 !== void 0 ? _obj$getAttribute2 : '0');
-          var width = parseFloat((_obj$getAttribute3 = obj.getAttribute('width')) !== null && _obj$getAttribute3 !== void 0 ? _obj$getAttribute3 : '0');
-          var height = parseFloat((_obj$getAttribute4 = obj.getAttribute('height')) !== null && _obj$getAttribute4 !== void 0 ? _obj$getAttribute4 : '0');
-          return {
-            minX: x,
-            minY: y,
-            width: width,
-            height: height
-          };
-        }
-        if ((obj === null || obj === void 0 ? void 0 : obj.nodeName) === 'polygon') {
-          var pts = obj.getAttribute('points');
-          if (pts) {
-            var points = pts.split(/\s+/).reduce(function (acc, p) {
-              var _p$split = p.split(','),
-                _p$split2 = _slicedToArray__default["default"](_p$split, 2),
-                x = _p$split2[0],
-                y = _p$split2[1];
-              if (x != null && y != null) acc.push(new index.Vector2(Number(x), Number(y)));
-              return acc;
-            }, []);
-            if (points.length) {
-              var bbox = this.getBoundingBoxOfPoints(points);
-              return {
-                minX: bbox.minX,
-                minY: bbox.minY,
-                width: bbox.width,
-                height: bbox.height
-              };
-            }
-          }
-        }
-      }
-      return undefined;
-    }
-
-    /**
-     * Returns OLT geometry (x, y, width, height) from SVG attributes - untransformed coords.
-     * Iterates through matches to find first rect/polygon (handles Illustrator group wrappers).
-     */
-  }, {
-    key: "getOLTGeometryFromSvg",
-    value: function getOLTGeometryFromSvg(content) {
-      var parser = new DOMParser();
-      var xmlDocument = parser.parseFromString(content, 'application/xml');
-      var oltObjs = xmlDocument.evaluate("//*[starts-with(@id,'OLT')]", xmlDocument, null, 7, null);
-      for (var i = 0; i < oltObjs.snapshotLength; i++) {
-        var obj = oltObjs.snapshotItem(i);
-        if ((obj === null || obj === void 0 ? void 0 : obj.nodeName) === 'rect') {
-          var _obj$getAttribute5, _obj$getAttribute6, _obj$getAttribute7, _obj$getAttribute8;
-          var x = parseFloat((_obj$getAttribute5 = obj.getAttribute('x')) !== null && _obj$getAttribute5 !== void 0 ? _obj$getAttribute5 : '0');
-          var y = parseFloat((_obj$getAttribute6 = obj.getAttribute('y')) !== null && _obj$getAttribute6 !== void 0 ? _obj$getAttribute6 : '0');
-          var width = parseFloat((_obj$getAttribute7 = obj.getAttribute('width')) !== null && _obj$getAttribute7 !== void 0 ? _obj$getAttribute7 : '0');
-          var height = parseFloat((_obj$getAttribute8 = obj.getAttribute('height')) !== null && _obj$getAttribute8 !== void 0 ? _obj$getAttribute8 : '0');
-          return {
-            x: x,
-            y: y,
-            width: width,
-            height: height
-          };
-        }
-        if ((obj === null || obj === void 0 ? void 0 : obj.nodeName) === 'polygon') {
-          var pts = obj.getAttribute('points');
-          if (pts) {
-            var points = pts.split(/\s+/).reduce(function (acc, p) {
-              var _p$split3 = p.split(','),
-                _p$split4 = _slicedToArray__default["default"](_p$split3, 2),
-                x = _p$split4[0],
-                y = _p$split4[1];
-              if (x != null && y != null) acc.push(new index.Vector2(Number(x), Number(y)));
-              return acc;
-            }, []);
-            if (points.length) {
-              var bbox = this.getBoundingBoxOfPoints(points);
-              return {
-                x: bbox.minX,
-                y: bbox.minY,
-                width: bbox.width,
-                height: bbox.height
-              };
-            }
-          }
-        }
-      }
-      return undefined;
-    }
-
-    /**
-     * This function looks if the svg has a Mask HTML element. If so it removes all masks from SVG
-     * @param content
-     */
-  }, {
-    key: "removeMaskFromSvg",
-    value: function removeMaskFromSvg(content) {
-      if (content.toLowerCase().indexOf('<mask') >= 0) {
-        var parser = new DOMParser();
-        var xmlDocument;
-        xmlDocument = parser.parseFromString(content, 'image/svg+xml');
-        var maskObjs = xmlDocument.evaluate('//*["mask"=local-name()]', xmlDocument, null, 7, null);
-        for (var i = 0; i < maskObjs.snapshotLength; i++) {
-          var _parentElement3;
-          (_parentElement3 = maskObjs.snapshotItem(i).parentElement) === null || _parentElement3 === void 0 || _parentElement3.removeChild(maskObjs.snapshotItem(i));
-        }
-        var objMaskIds = xmlDocument.evaluate('//*[@mask]', xmlDocument, null, 7, null);
-        for (var i = 0; i < objMaskIds.snapshotLength; i++) {
-          var _parentElement4;
-          (_parentElement4 = objMaskIds.snapshotItem(i).parentElement) === null || _parentElement4 === void 0 || _parentElement4.removeChild(objMaskIds.snapshotItem(i));
-        }
-        if (typeof XMLSerializer !== 'undefined') return new XMLSerializer().serializeToString(xmlDocument);else {
-          return serialize__default["default"](xmlDocument);
-        }
-      }
-      return content;
-    }
-
-    /*
-     * @param content 	xml Document as String representing SVG
-     * @param newWidth 	new width of SVG (written in the OLT tag)
-     * @param newHeight	new height of SCG( written in the OLT tag)
-     * @param svgMinBorderXVal : number returns the minimum coordinate in x left direction in the SVG. Used to correct viewBox.
-     * @param svgSourceUrl optional URL / path of the loaded SVG for diagnostics
-     */
-  }, {
-    key: "ccCheckStretchAreas",
-    value: function ccCheckStretchAreas(content, newWidthCM, newHeightCM, useglobalSvgScale, svgMinBorderXVal, svgMinBorderYVal, callback, svgSourceUrl) {
-      //var parse = require("xml-parser");
-      //var svg = parse(content);
-      var unitRecalc = DivaUtils__default["default"].UnitRecalc;
-      var newWidthOLT = newWidthCM * unitRecalc;
-      var newHeightOLT = newHeightCM * unitRecalc;
-      var xmlDocument;
-      var root;
-      var SAH = [];
-      var SAV = [];
-      var ratioSAH = []; //contains proportions from single SAH
-      var ratioSAV = [];
-      //var minHeight: number;
-      //var minWidth: number;
-
-      var origOLTWidth; //saves original width of OLT
-      var origOLTHeight; //saves original height of OLT
-      var scaleFactorSvgViewBox = {
-        x: 0,
-        y: 0
-      };
-      var widthOLT = 0; //saves  temp Width
-      var heightOLT = 0; // saves temp oltHeight
-      var widthOLF = 0; //saves temp olfWidth
-      var heightOLF = 0; //Saves temp olfHeight
-      var startWidthOLT = 0; //saves start position of temp Width
-      var startHeightOLT = 0;
-      var startWidthOLF = 0;
-      var startHeightOLF = 0;
-      var svgHasOLF = false; //true, if SVG has OLF
-      var deltaOLFWidth = 0; //originale widthOLF - widthOLT	-> saves proportions. Das Strecken bezieht sich  immer auf die OLT. Bei den OLF wird einfach das delta dazuaddiert
-      var deltaOLFHeight = 0; //originale heightOLF - HeightOLT
-      var result = '';
-      var globalScaleFactorWidth;
-      var globalScaleFactorHeight;
-      var scaleFactorSvgViewBox = {
-        x: 1,
-        y: 1
-      }; //Es kann sein, dass das SVG in einem anderen Koordinaten system gespeichert wurde. Nun m�ssen die werte angepasst werden.
-
-      var replacer = new RegExp('svg', 'g');
-      var content = content.replace(replacer, 'xxx');
-      var parser = new DOMParser();
-      xmlDocument = parser.parseFromString(content, 'application/xml');
-      root = xmlDocument.getElementsByTagName('xxx')[0];
-      replacer = new RegExp('xxx', 'g');
-      correctSVG(root);
-      scaleFactorSvgViewBox = calcScaleFactorSvgViewBox(root);
-      recalcScaleFactorSvgViewBox(root);
-      correctSVGViewBoxScale(root, scaleFactorSvgViewBox);
-      var origWidthCM = Math.round(parseFloat(root.getAttribute('width')) / unitRecalc * 100) / 100; //Change the size only if the the svg in cm is different from the cm to scale
-      var origHeightCM = Math.round(parseFloat(root.getAttribute('height')) / unitRecalc * 100) / 100;
-      if (newWidthOLT == 0) {
-        origWidthCM = parseFloat(root.getAttribute('width'));
-      }
-      if (newHeightOLT == 0) {
-        newHeightOLT = parseFloat(root.getAttribute('height'));
-      }
-      correctTEAttributes();
-      findStretchAreas(root.children, scaleFactorSvgViewBox, function () {
-        newWidthOLT = newWidthOLT / scaleFactorSvgViewBox.x;
-        newHeightOLT = newHeightOLT / scaleFactorSvgViewBox.y;
-        if (newWidthCM == origWidthCM && newHeightCM == origHeightCM) {
-          var result2;
-          if (typeof XMLSerializer !== 'undefined') result2 = new XMLSerializer().serializeToString(xmlDocument);else {
-            result2 = serialize__default["default"](xmlDocument);
-          }
-          result2 = result2.replace(replacer, 'svg');
-          callback(result2);
-        } else {
-          //Resize OLT and VIT
-          resizeXml(newWidthOLT, newHeightOLT, 'OLT', function () {
-            //Resize OLF and VIF
-            if (svgHasOLF) {
-              resizeXml(newWidthOLT + deltaOLFWidth, newHeightOLT + deltaOLFHeight, 'OLF', function () {
-                root = fixViewBox(root, svgMinBorderXVal, svgMinBorderYVal);
-                //scaleFactorSvgViewBox = calcScaleFactorSvgViewBox(root);
-
-                if (typeof XMLSerializer !== 'undefined') result = new XMLSerializer().serializeToString(xmlDocument);else {
-                  result = serialize__default["default"](xmlDocument);
-                }
-                result = result.replace(replacer, 'svg');
-                callback(result);
-              });
-            } else {
-              root = fixViewBox(root, svgMinBorderXVal, svgMinBorderYVal);
-              //scaleFactorSvgViewBox = calcScaleFactorSvgViewBox(root);
-              if (typeof XMLSerializer !== 'undefined') result = new XMLSerializer().serializeToString(xmlDocument);else {
-                result = serialize__default["default"](xmlDocument);
-              }
-              result = result.replace(replacer, 'svg');
-              callback(result);
-            }
-          });
-        }
-      });
-      function correctSVG(root) {
-        //Check if svg has width and height attribute. Otherwise set it as the values in the viewBox
-        var viewBox = root.getAttribute('viewBox');
-        if (viewBox && root.getAttribute('width') == null) {
-          root.setAttribute('width', viewBox.split(' ')[2]);
-        }
-        if (viewBox && root.getAttribute('height') == null) {
-          root.setAttribute('height', viewBox.split(' ')[3]);
-        }
-
-        //Convert mm to px and remove px from width and height
-        var origWidthTxt = root.getAttribute('width');
-        var origWidth;
-        if (origWidthTxt.indexOf('mm') > 0) {
-          origWidth = parseFloat(origWidthTxt.substring(0, origWidthTxt.length - 2));
-          origWidth = origWidth * unitRecalc;
-        } else if (origWidthTxt.indexOf('px') > 0) {
-          origWidth = parseFloat(origWidthTxt.substring(0, origWidthTxt.length - 2));
-        } else {
-          origWidth = parseFloat(origWidthTxt);
-        }
-        //Convert to dpi 96
-        root.setAttribute('width', origWidth.toString()); //Eventuell nicht runden
-        var origHeightTxt = root.getAttribute('height');
-        var origHeight;
-        if (origHeightTxt.indexOf('mm') > 0) {
-          origHeight = parseFloat(origHeightTxt.substring(0, origHeightTxt.length - 2));
-          origHeight = origHeight * unitRecalc;
-        } else if (origHeightTxt.indexOf('px') > 0) {
-          origHeight = parseFloat(origHeightTxt.substring(0, origHeightTxt.length - 2));
-        } else {
-          origHeight = parseFloat(origHeightTxt);
-        }
-        root.setAttribute('height', origHeight.toString());
-        if (!viewBox) root.setAttribute('viewBox', '0 0 ' + origWidth + ' ' + origHeight);
-      }
-      function correctTEAttributes() {
-        var teObj = xmlDocument.evaluate("//*[starts-with(@id,'TE')]", xmlDocument, null, 7, null);
-        if (teObj.snapshotLength == 0) {
-          //f�ge TE Objekt hinzu
-          var oltObj = xmlDocument.evaluate("//*[starts-with(@id,'OLT')]", xmlDocument, null, 7, null);
-          if (oltObj.snapshotLength > 0) {
-            for (var i = 0; i < oltObj.snapshotLength; i++) {
-              var _oltObj$snapshotItem;
-              if (((_oltObj$snapshotItem = oltObj.snapshotItem(i)) === null || _oltObj$snapshotItem === void 0 ? void 0 : _oltObj$snapshotItem.nodeName) != 'g') {
-                var _oltObj$snapshotItem2;
-                var parentOLTNode = (_oltObj$snapshotItem2 = oltObj.snapshotItem(i)) === null || _oltObj$snapshotItem2 === void 0 ? void 0 : _oltObj$snapshotItem2.parentNode;
-                if (parentOLTNode.tagName == 'g') {
-                  parentOLTNode.setAttribute('id', 'TE');
-                }
-              }
-            }
-          }
-          teObj = xmlDocument.evaluate("//*[starts-with(@id,'TE')]", xmlDocument, null, 7, null);
-        }
-        if (teObj.snapshotLength > 0) {
-          for (var i = 0; i < teObj.snapshotLength; i++) {
-            var _teObj$snapshotItem;
-            if (((_teObj$snapshotItem = teObj.snapshotItem(i)) === null || _teObj$snapshotItem === void 0 ? void 0 : _teObj$snapshotItem.nodeName) == 'g') {
-              var obj = teObj.snapshotItem(i);
-              obj.setAttribute('display', 'none');
-            }
-          }
-        }
-      }
-      function calcScaleFactorSvgViewBox(root) {
-        var viewBox = root.getAttribute('viewBox');
-        var xScale = 1;
-        var yScale = 1;
-        if (viewBox != null) {
-          var origWidth = Number(root.getAttribute('width'));
-          var splittedViewBox = viewBox.split(' ');
-          var vBwidth = Number(splittedViewBox[2]);
-          xScale = origWidth / vBwidth;
-          var origHeight = Number(root.getAttribute('height'));
-          var vBheight = Number(splittedViewBox[3]);
-          yScale = origHeight / vBheight;
-        }
-        return new fabric.fabric.Point(xScale, yScale);
-      }
-      function recalcScaleFactorSvgViewBox(root) {
-        var viewBox = root.getAttribute('viewBox');
-        if (viewBox != null) {
-          var origWidth = Math.ceil(parseFloat(root.getAttribute('width')));
-          var origHeight = Math.ceil(parseFloat(root.getAttribute('height')));
-          var origXTxt = root.getAttribute('x');
-          var origX;
-          if (origXTxt) {
-            if (origXTxt.indexOf('mm') > 0) {
-              origX = parseFloat(origXTxt.substring(0, origXTxt.length - 2));
-              origX = origX * unitRecalc;
-            } else if (origXTxt.indexOf('px') > 0) {
-              origX = parseFloat(origXTxt.substring(0, origXTxt.length - 2));
-            } else {
-              origX = parseFloat(origXTxt);
-            }
-            origX = Math.ceil(origX);
-          } else {
-            origX = 0;
-          }
-          var origYTxt = root.getAttribute('y');
-          var origY;
-          if (origYTxt) {
-            if (origYTxt.indexOf('mm') > 0) {
-              origY = parseFloat(origYTxt.substring(0, origYTxt.length - 2));
-              origY = origY * unitRecalc;
-            } else if (origYTxt.indexOf('px') > 0) {
-              origY = parseFloat(origYTxt.substring(0, origYTxt.length - 2));
-            } else {
-              origY = parseFloat(origYTxt);
-            }
-            origY = Math.ceil(origY);
-          } else {
-            origY = 0;
-          }
-          root.setAttribute('viewBox', origX + ' ' + origY + ' ' + origWidth + ' ' + origHeight);
-        }
-      }
-
-      /*
-          Geht alle Elemente durch und sucht zuerst nach den Technischen Eigenschaften
-          Danach geht er davon alle Kinder durch und speichert alle horizontalen StrechAreas in SAH Array
-          und alle vertikalen Strech Areas in SAV Array.
-          */
-      function findStretchAreas(root, scaleFactorSvgViewBox, callback) {
-        var sahWidth = 0;
-        var savHeight = 0;
-        var i = 0;
-        var SAHRefobj = xmlDocument.evaluate("//*[starts-with(@id,'SAH')]", xmlDocument, null, 7, null);
-        var SAHobj = [];
-        for (var i = 0; i < SAHRefobj.snapshotLength; i++) {
-          SAHobj.push(SAHRefobj.snapshotItem(i));
-        }
-        for (i = 0; i < SAHobj.length; i++) {
-          if (SAHobj[i].nodeName == 'polygon') {
-            SAHobj[i] = convertPolygonToRect(SAHobj[i], xmlDocument);
-          }
-          if (SAHobj[i].nodeName == 'rect') {
-            SAHobj[i].setAttribute('style', 'fill:none;');
-            correctViewBoxScaleRectangle(SAHobj[i], scaleFactorSvgViewBox);
-          }
-          sahWidth += parseFloat(SAHobj[i].getAttribute('width'));
-          SAH.push(SAHobj[i]);
-        }
-        var SAVRefobj = xmlDocument.evaluate("//*[starts-with(@id,'SAV')]", xmlDocument, null, 7, null);
-        var SAVobj = [];
-        for (var i = 0; i < SAVRefobj.snapshotLength; i++) {
-          SAVobj.push(SAVRefobj.snapshotItem(i));
-        }
-        for (i = 0; i < SAVobj.length; i++) {
-          if (SAVobj[i].nodeName == 'polygon') {
-            SAVobj[i] = convertPolygonToRect(SAVobj[i], xmlDocument);
-          }
-          if (SAVobj[i].nodeName == 'rect') {
-            SAVobj[i].setAttribute('style', 'fill:none;');
-            correctViewBoxScaleRectangle(SAVobj[i], scaleFactorSvgViewBox);
-          }
-          savHeight += parseFloat(SAVobj[i].getAttribute('height'));
-          SAV.push(SAVobj[i]);
-        }
-        var OLFobj = xmlDocument.evaluate("//*[starts-with(@id,'OLF')]", xmlDocument, null, 7, null);
-        for (i = 0; i < OLFobj.snapshotLength; i++) {
-          svgHasOLF = true;
-          calcOlfAndOlt(OLFobj.snapshotItem(i), 'OLF');
-        }
-        var OLTobj = xmlDocument.evaluate("//*[starts-with(@id,'OLT')]", xmlDocument, null, 7, null);
-        for (i = 0; i < OLTobj.snapshotLength; i++) {
-          var _OLTobj$snapshotItem;
-          if (OLTobj.snapshotLength > 1 && ((_OLTobj$snapshotItem = OLTobj.snapshotItem(i)) === null || _OLTobj$snapshotItem === void 0 || (_OLTobj$snapshotItem = _OLTobj$snapshotItem.parentElement) === null || _OLTobj$snapshotItem === void 0 ? void 0 : _OLTobj$snapshotItem.getAttribute('id')) != 'TE') {
-            continue;
-          }
-          calcOlfAndOlt(OLTobj.snapshotItem(i), 'OLT');
-        }
-        if (svgHasOLF) {
-          deltaOLFWidth = widthOLF - widthOLT;
-          deltaOLFHeight = heightOLF - heightOLT;
-        }
-        origOLTWidth = widthOLT;
-        origOLTHeight = heightOLT;
-        sortSA(); //verh�ltnisse berechnen
-
-        calcRatioSA(sahWidth, savHeight);
-        clearSA();
-
-        //var sahWidht: number = 0;
-        //var savHeigh: number = 0;
-
-        callback();
-
-        //Calculates the max X and Y coordinates depending on the parameter "name": "OLF" or "OLT"
-        function convertPolygonToRect(polygon, document) {
-          var rect = document.createElement('rect');
-          rect.setAttribute('id', polygon.getAttribute('id'));
-          var points = createPolygonElement(polygon.getAttribute('points')).points;
-          if (points.length > 0) {
-            var minX = points[0].x;
-            var maxX = points[0].x;
-            var minY = points[0].y;
-            var maxY = points[0].y;
-            for (var i = 1; i < points.length; i++) {
-              if (points[i].x < minX) minX = points[i].x;else if (points[i].x > maxX) maxX = points[i].x;
-              if (points[i].y < minY) minY = points[i].y;else if (points[i].y > maxY) maxY = points[i].y;
-            }
-            rect.setAttribute('x', minX);
-            rect.setAttribute('y', minY);
-            rect.setAttribute('width', maxX - minX);
-            rect.setAttribute('height', maxY - minY);
-            polygon.parentElement.appendChild(rect);
-            rect.parentElement.removeChild(polygon);
-          }
-          return rect;
-        }
-        function calcOlfAndOlt(element, name, scaleFactorSvgViewBox) {
-          switch (element.localName) {
-            case 'rect':
-              if (!element.hasAttribute('x')) element.setAttribute('x', '0');
-              if (!element.hasAttribute('y') == null) element.setAttribute('y', '0');
-              if (name == 'OLT') {
-                widthOLT = parseFloat(element.getAttribute('width'));
-                heightOLT = parseFloat(element.getAttribute('height'));
-              } else if (name == 'OLF') {
-                widthOLF = parseFloat(element.getAttribute('width'));
-                heightOLF = parseFloat(element.getAttribute('height'));
-              }
-              break;
-            case 'polygon':
-              var poly = createPolygonElement(element.getAttribute('points'));
-              var maxX = 0;
-              var maxY = 0;
-              var minX;
-              var minY;
-              if (poly.points[0]) {
-                minX = poly.points[0].x;
-                minY = poly.points[0].y;
-              }
-              for (var i = 0; i < poly.points.length; i++) {
-                if (poly.points[i].x > maxX) maxX = poly.points[i].x;
-                if (poly.points[i].y > maxY) maxY = poly.points[i].y;
-                if (poly.points[i].x < minX) minX = poly.points[i].x;
-                if (poly.points[i].y < minY) minY = poly.points[i].y;
-              }
-              if (name == 'OLT') {
-                widthOLT = maxX - minX;
-                heightOLT = maxY - minY;
-                startWidthOLT = minX; //saves start position of temp Width
-                startHeightOLT = minY;
-              } else if (name == 'OLF') {
-                widthOLF = maxX - minX;
-                heightOLF = maxY - minY;
-                startWidthOLF = minX;
-                startHeightOLF = minY;
-              }
-              break;
-            case 'path':
-              var path = new fabric.fabric.Path(element.getAttribute('d'));
-              if (name == 'OLT') {
-                widthOLT = path.width;
-                heightOLT = path.height;
-              } else if (name == 'OLF') {
-                widthOLF = path.width;
-                heightOLF = path.height;
-              }
-              break;
-            case 'g':
-              var children = element.children;
-              element.setAttribute('id', '');
-              for (var i = 0; i < children.length; i++) {
-                switch (children[i].localName) {
-                  case 'rect':
-                  case 'path':
-                  case 'polygon':
-                    children[i].setAttribute('id', name);
-                    //element.parentElement.replaceChild(children[1], element);
-                    calcOlfAndOlt(children[i], name);
-                    break;
-                }
-                break;
-              }
-              break;
-          }
-        }
-      }
-      function correctSVGViewBoxScale(root, scaleFactorSvgViewBox) {
-        if (scaleFactorSvgViewBox.x == 1 && scaleFactorSvgViewBox.y == 1) return;
-        //Correct all rectangles in scene
-        var children = root.children;
-        if (!children) return;
-        for (var i = 0; i < children.length; i++) {
-          switch (children[i].tagName) {
-            case 'rect':
-              correctViewBoxScaleRectangle(children[i], scaleFactorSvgViewBox);
-              break;
-            case 'polygon':
-              correctViewBoxScalePolygon(children[i], scaleFactorSvgViewBox);
-              break;
-            case 'path':
-              correctViewBoxScalePath(children[i], scaleFactorSvgViewBox);
-              break;
-            case 'line':
-              correctViewBoxScaleLine(children[i], scaleFactorSvgViewBox);
-              break;
-            case 'style':
-              correctViewBoxScaleStyle(children[i], scaleFactorSvgViewBox);
-              break;
-          }
-          correctSVGViewBoxScale(children[i], scaleFactorSvgViewBox);
-        }
-      }
-      function correctViewBoxScaleStyle(styleNode, scaleFactorSvgViewBox) {
-        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 = '';
-        for (var i = 0; i < styleParts.length; i++) {
-          var indWidth = styleParts[i].indexOf('width');
-          if (indWidth >= 0) {
-            var value = '';
-            var startIndNumber = -1;
-            var endIndNumber = -1;
-            for (var j = indWidth + 'width'.length; j < styleParts[i].length; j++) {
-              if (styleParts[i][j] == ';' || styleParts[i][j] == '}') {
-                endIndNumber = j;
-                break;
-              }
-              if (startIndNumber > -1) value += styleParts[i][j];
-              if (styleParts[i][j] == ':') {
-                startIndNumber = j;
-              }
-            }
-            var correctedNumber = parseFloat(value) * scaleFactorSvgViewBox.x;
-            var newPartString = styleParts[i].substring(0, startIndNumber + 1) + correctedNumber + styleParts[i].substring(endIndNumber, styleParts[i].lenght);
-            styleParts[i] = newPartString;
-          }
-          var indHeight = styleParts[i].indexOf('height');
-          if (indHeight >= 0) {
-            var value = '';
-            var startIndNumber = -1;
-            var endIndNumber = -1;
-            for (var j = indHeight + 'height'.length; j < styleParts[i].length; j++) {
-              if (styleParts[i][j] == ';' || styleParts[i][j] == '}') {
-                endIndNumber = j;
-                break;
-              }
-              if (startIndNumber > -1) value += styleParts[i][j];
-              if (styleParts[i][j] == ':') {
-                startIndNumber = j;
-              }
-            }
-            var correctedNumber = parseFloat(value) * scaleFactorSvgViewBox.y;
-            var newPartString = styleParts[i].substring(0, startIndNumber + 1) + correctedNumber + styleParts[i].substring(endIndNumber, styleParts[i].lenght);
-            styleParts[i] = newPartString;
-          }
-          newStyleContent += styleParts[i];
-          if (i < styleParts.length - 1) newStyleContent = newStyleContent + '{';
-        }
-        styleNode.innerHTML = newStyleContent;
-      }
-      function correctViewBoxScaleLine(lineNode, scaleFactorSvgViewBox) {
-        var x1Attr = lineNode.getAttribute('x1');
-        if (!x1Attr) x1Attr = 0;
-        var x2Attr = lineNode.getAttribute('x2');
-        var y1Attr = lineNode.getAttribute('y1');
-        if (!y1Attr) y1Attr = 0;
-        var y2Attr = lineNode.getAttribute('y2');
-        lineNode.setAttribute('x1', parseFloat(x1Attr) * scaleFactorSvgViewBox.x);
-        lineNode.setAttribute('y1', parseFloat(y1Attr) * scaleFactorSvgViewBox.y);
-        lineNode.setAttribute('x2', parseFloat(x2Attr) * scaleFactorSvgViewBox.x);
-        lineNode.setAttribute('y2', parseFloat(y2Attr) * scaleFactorSvgViewBox.y);
-      }
-      function correctViewBoxScalePath(pathNode, scaleFactorSvgViewBox) {
-        var path = createPathElement(pathNode.getAttribute('d'), scaleFactorSvgViewBox);
-        var d = getPathStringFromPathElement(path);
-        pathNode.setAttribute('d', d);
-      }
-      function correctViewBoxScalePolygon(polygonNode, scaleFactorSvgViewBox) {
-        var polygon = createPolygonElement(polygonNode.getAttribute('points'), scaleFactorSvgViewBox);
-        polygonNode.setAttribute('points', polygon.points);
-      }
-      function correctViewBoxScaleRectangle(rect, scaleFactorSvgViewBox) {
-        var xAttr = rect.getAttribute('x');
-        if (!xAttr) xAttr = 0;
-        var yAttr = rect.getAttribute('y');
-        if (!yAttr) yAttr = 0;
-        var widthAttr = rect.getAttribute('width');
-        var heightAttr = rect.getAttribute('height');
-        rect.setAttribute('x', parseFloat(xAttr) * scaleFactorSvgViewBox.x);
-        rect.setAttribute('y', parseFloat(yAttr) * scaleFactorSvgViewBox.y);
-        rect.setAttribute('width', parseFloat(widthAttr) * scaleFactorSvgViewBox.x);
-        rect.setAttribute('height', parseFloat(heightAttr) * scaleFactorSvgViewBox.y);
-      }
-
-      /*
-          Wird aufgerufen, wenn die Gr��e des SVG ge�ndert werden soll.
-          Es berechnet die neuen Gr��en der Stretch Areas 
-          Ruft fixXMLObject() auf, worauf hin, die Koordinaten der Einzelnen Elemente (rect, line, path) des SVG angepasst werden
-          Wird eine zu kleine Breite oder H�he eingegeben, wird der Eingabe einfach die minimale Breite / H�he �bergeben 
-          newWidth and newHeigth h�ngt vom Wert in OLT_OLF ab. Ist die OLT, so wird der Wert zum Anpassen der
-          Olt �bergeben und umgekehrt.
-          */
-      function resizeXml(newWidth, newHeight, OLT_OLF, callback) {
-        var currentWidth = OLT_OLF == 'OLT' ? widthOLT : widthOLF;
-        var currentHeight = OLT_OLF == 'OLT' ? heightOLT : heightOLF;
-        if (!useglobalSvgScale && SAV[0] && newHeight != currentHeight) {
-          if (OLT_OLF == 'OLT') {
-            heightOLT = newHeight;
-          } else {
-            heightOLF = newHeight;
-          }
-          var deltaY = round(newHeight - currentHeight);
-          var newY = 0;
-          for (var i = 0; i < SAV.length; i++) {
-            SAV[i].setAttribute('y', round(parseFloat(SAV[i].getAttribute('y')) + newY));
-            SAV[i].setAttribute('height', round(deltaY * ratioSAV[i]));
-            newY += round(deltaY * ratioSAV[i]);
-          }
-          fixXMLObject(root, 'SAV', OLT_OLF);
-        }
-
-        //resize only if width has changed or if there is a SAH
-        if (!useglobalSvgScale && newWidth != currentWidth && SAH[0]) {
-          if (OLT_OLF == 'OLT') {
-            widthOLT = newWidth;
-          } else {
-            widthOLF = newWidth;
-          }
-          var deltaX = round(newWidth - currentWidth);
-          var newX = 0; //if i change the width of a SAH, i have to fix the position of the following SAH
-          for (var i = 0; i < SAH.length; i++) {
-            if (OLT_OLF == 'OLT') {
-              SAH[i].setAttribute('x', round(parseFloat(SAH[i].getAttribute('x')) + newX));
-              newX += round(deltaX * ratioSAH[i]);
-            }
-            SAH[i].setAttribute('width', round(deltaX * ratioSAH[i]));
-          }
-          fixXMLObject(root, 'SAH', OLT_OLF);
-        }
-        var doScale = false;
-        if (useglobalSvgScale && newHeight != currentHeight) {
-          globalScaleFactorHeight = newHeight / currentHeight;
-          doScale = true;
-          if (OLT_OLF == 'OLT') {
-            heightOLT = newHeight;
-          } else {
-            heightOLF = newHeight;
-          }
-        }
-        if (useglobalSvgScale && newWidth != currentWidth) {
-          globalScaleFactorWidth = newWidth / currentWidth;
-          doScale = true;
-          if (OLT_OLF == 'OLT') {
-            widthOLT = newWidth;
-          } else {
-            widthOLF = newWidth;
-          }
-        }
-        if (doScale) {
-          fixXMLObject(root, 'GLOBAL_SCALE', OLT_OLF);
-        }
-        callback();
-      }
-
-      /*
-          Diese Methode geht nun rekursiv alle Elemente des Xml Dokuments durch und passt die Koordinaten den neuen Stretch Areas an.
-          Neben dem aktuellen Element wird noch eine Weitere Variable SA �bergeben. Sie beinhaltet entweder den Wert "SAH" oder "SAV". 
-          Je nach Eingabe werden entweder die Methoden bzg der Horizontalen doer vertikalen Stretch Areas aufgerufen.
-          Weiterer �bergabeparameter ist VI. Die Werte die in SAH oder SAV stehen, sind abh�ngig davon, ob man gerade die OLT oder OLF 
-          �ndern will. Je nachdem was man gerade �ndern will, wird der andere Fall ignoriert.
-          */
-      function fixXMLObject(parent, SA, VI) {
-        //If fixing the OLT, ignore the OLF and VIF || if fixing OLF, ignore OLT and VIT
-        var VIToIgnore;
-        var OLToIgnore;
-        if (VI == 'OLT') {
-          VIToIgnore = 'VIF';
-          OLToIgnore = 'OLF';
-        } else {
-          VIToIgnore = 'VIT';
-          OLToIgnore = 'OLT';
-        }
-        var children = parent.children;
-        for (var i = 0; i < children.length; i++) {
-          if (children[i].getAttribute('id') != VIToIgnore && children[i].getAttribute('id') != OLToIgnore) {
-            switch (children[i].localName) {
-              case 'g':
-                break;
-              case 'rect':
-                if (!children[i].hasAttribute('id') || children[i].getAttribute('id').substring(0, 3) != 'SAV' && children[i].getAttribute('id').substring(0, 3) != 'SAH') {
-                  parent.replaceChild(fixRectangle(children[i], SA), children[i]);
-                }
-                break;
-              case 'path':
-                var path = createPathElement(children[i].getAttribute('d'));
-                var d = fixPath(path, SA);
-                children[i].setAttribute('d', d);
-                break;
-              case 'line':
-                if (children[i].hasAttribute('id') && children[i].getAttribute('id').substring(0, 2) == 'AV') {
-                  if (VI == 'OLT') {
-                    parent.replaceChild(fixLine(children[i], SA), children[i]);
-                  }
-                } else {
-                  parent.replaceChild(fixLine(children[i], SA), children[i]);
-                }
-                break;
-              case 'polygon':
-              case 'polyline':
-                var polygon = createPolygonElement(children[i].getAttribute('points'));
-                var points = fixPolygon(polygon, SA);
-                children[i].setAttribute('points', points);
-                break;
-              case 'image':
-                fixImage(children[i], SA);
-                break;
-            }
-            fixXMLObject(children[i], SA, VI);
-          }
-        }
-      }
-      /*
-              Berechnet die Gr��e des Bildelementes neu, wobei in SA drin steht, ob gerade die Breite oder H�he gerichtet wird
-              */
-      function fixImage(image, SA) {
-        image.setAttribute('preserveAspectRatio', 'none');
-        if (SA == 'SAH') {
-          var imageWidth = parseInt(image.getAttribute('width'), 10);
-          var deltaWidth = newWidthOLT / origOLTWidth; //Faktor, um den den die Breite des Image verg��ert oder verkleinert wird
-
-          imageWidth = Math.round(imageWidth * deltaWidth);
-          image.setAttribute('width', imageWidth + 'px');
-        } else if (SA == 'SAV') {
-          var imageHeight = parseInt(image.getAttribute('height'), 10);
-          var deltaHeight = newHeightOLT / origOLTHeight; //Faktor, um den den die H�he des Image verg��ert oder verkleinert wird
-
-          imageHeight = Math.round(imageHeight * deltaHeight);
-          image.setAttribute('height', imageHeight + 'px');
-        }
-      }
-
-      /*
-          Berechnet die Koordinaten eines <line> Elementes neu
-          */
-      function fixLine(line, SA) {
-        var x1;
-        var y1;
-        var x2;
-        var y2;
-        if (SA == 'SAH') {
-          for (var i = 0; i < SAH.length; i++) {
-            x1 = parseFloat(line.getAttribute('x1'));
-            x2 = parseFloat(line.getAttribute('x2'));
-            var saXBegin = parseFloat(SAH[i].getAttribute('x'));
-            var saXEnd = round(saXBegin + parseFloat(SAH[i].getAttribute('width')));
-            scaleLineX(x1, x2, saXBegin, saXEnd);
-          }
-        } else if (SA == 'SAV') {
-          for (var i = 0; i < SAV.length; i++) {
-            y1 = parseFloat(line.getAttribute('y1'));
-            y2 = parseFloat(line.getAttribute('y2'));
-            var saYBegin = parseFloat(SAV[i].getAttribute('y'));
-            var saYEnd = round(saYBegin + parseFloat(SAV[i].getAttribute('height')));
-            scaleLineY(y1, y2, saYBegin, saYEnd);
-          }
-        } else if (SA == 'GLOBAL_SCALE') {
-          x1 = parseFloat(line.getAttribute('x1'));
-          x2 = parseFloat(line.getAttribute('x2'));
-          y1 = parseFloat(line.getAttribute('y1'));
-          y2 = parseFloat(line.getAttribute('y2'));
-          line.setAttribute('x1', round(x1 * globalScaleFactorWidth));
-          line.setAttribute('x2', round(x2 * globalScaleFactorWidth));
-          line.setAttribute('y1', round(y1 * globalScaleFactorHeight));
-          line.setAttribute('y2', round(y2 * globalScaleFactorHeight));
-        }
-        //Passt die Linie bei horizontalen Strech Areas an
-        function scaleLineX(x1, x2, saXBegin, saXEnd) {
-          if (x1 > saXBegin) {
-            line.setAttribute('x1', round(x1 + (saXEnd - saXBegin)));
-            line.setAttribute('x2', round(x2 + (saXEnd - saXBegin)));
-          } else if (x1 < saXBegin && x2 > saXBegin) {
-            line.setAttribute('x2', round(x2 + (saXEnd - saXBegin)));
-          }
-        }
-
-        //Passt die Linie  bei vertikalen Strech Areas an
-        function scaleLineY(y1, y2, saYBegin, saYEnd) {
-          if (y1 > saYBegin) {
-            line.setAttribute('y1', round(y1 + (saYEnd - saYBegin)));
-            line.setAttribute('y2', round(y2 + (saYEnd - saYBegin)));
-          } else if (y1 < saYBegin && y2 > saYBegin) {
-            line.setAttribute('y2', round(y2 + (saYEnd - saYBegin)));
-          }
-        }
-        return line;
-      }
-      /*
-          Berechnet die Koordinaten f�r das Polygon neu. Polygon ist ein Array aus Punkten mit jeweils zwei Koordinaten
-          */
-      function fixPolygon(polygon, SA) {
-        if (SA == 'SAH') {
-          for (var j = 0; j < SAH.length; j++) {
-            var saXBegin = parseFloat(SAH[j].getAttribute('x'));
-            var saXEnd = round(saXBegin + parseFloat(SAH[j].getAttribute('width')));
-            for (var i = 0; i < polygon.points.length; i++) {
-              if (polygon.points[i].x > saXBegin) {
-                polygon.points[i].x += saXEnd - saXBegin;
-              }
-            }
-          }
-        } else if (SA == 'SAV') {
-          for (var j = 0; j < SAV.length; j++) {
-            var saYBegin = parseFloat(SAV[j].getAttribute('y'));
-            var saYEnd = round(saYBegin + parseFloat(SAV[j].getAttribute('height')));
-            for (var i = 0; i < polygon.points.length; i++) {
-              if (polygon.points[i].y > saYBegin) {
-                polygon.points[i].y += saYEnd - saYBegin;
-              }
-            }
-          }
-        } else if (SA == 'GLOBAL_SCALE') {
-          for (var i = 0; i < polygon.points.length; i++) {
-            polygon.points[i].x = polygon.points[i].x * globalScaleFactorWidth;
-            polygon.points[i].y = polygon.points[i].y * globalScaleFactorHeight;
-          }
-        }
-        var points = '';
-        //nun m�ssen die Punkte wieder zu einem String zusammengesetzt werden
-        for (var i = 0; i < polygon.points.length; i++) {
-          points += polygon.points[i].x + ',' + polygon.points[i].y + ' ';
-        }
-        return points;
-      }
-
-      /*
-          Berechnet die Koordinaten eines Dreieckes neu
-          */
-      function fixRectangle(rect, SA) {
-        if (SA == 'SAH') {
-          for (var i = 0; i < SAH.length; i++) {
-            var rectXBegin = parseFloat(rect.getAttribute('x'));
-            var rectXEnd = round(rectXBegin + parseFloat(rect.getAttribute('width')));
-            var saXBegin = parseFloat(SAH[i].getAttribute('x'));
-            var saXEnd = round(saXBegin + parseFloat(SAH[i].getAttribute('width')));
-            scaleRectX(rectXBegin, rectXEnd, saXBegin, saXEnd);
-          }
-        } else if (SA == 'SAV') {
-          for (var i = 0; i < SAV.length; i++) {
-            var saYBegin = parseFloat(SAV[i].getAttribute('y'));
-            var saYEnd = round(saYBegin + parseFloat(SAV[i].getAttribute('height')));
-            var rectYBegin = parseFloat(rect.getAttribute('y'));
-            var rectYEnd = round(rectYBegin + parseFloat(rect.getAttribute('height')));
-            scaleRectY(rectYBegin, rectYEnd, saYBegin, saYEnd);
-          }
-        } else if (SA == 'GLOBAL_SCALE') {
-          var rectX = parseFloat(rect.getAttribute('x'));
-          var rectWidth = parseFloat(rect.getAttribute('width'));
-          var rectY = parseFloat(rect.getAttribute('y'));
-          var rectHeight = parseFloat(rect.getAttribute('height'));
-          rect.setAttribute('x', round(rectX * globalScaleFactorWidth));
-          rect.setAttribute('width', round(rectWidth * globalScaleFactorWidth));
-          rect.setAttribute('y', round(rectY * globalScaleFactorHeight));
-          rect.setAttribute('height', round(rectHeight * globalScaleFactorHeight));
-        }
-
-        //Skaliert das Dreieck anhand einer bestimten horizontalen Stretch Area
-        function scaleRectX(rectXBegin, rectXEnd, saXBegin, saXEnd) {
-          //1. Fall -> Begin des rect befindet sich links von SA, ende hinter begin von SA und vor ende von SA
-          //2. Fall -> SA befindet sich genau im Bereich von rect
-          if (rectXBegin <= saXBegin && rectXEnd >= saXBegin) {
-            rect.setAttribute('width', round(rectXEnd - rectXBegin + (saXEnd - saXBegin)));
-          }
-          //3. Fall -> rect ist komplett rechts
-          else if (rectXBegin > saXBegin) {
-            rect.setAttribute('x', round(rectXBegin + (saXEnd - saXBegin)));
-          }
-        }
-
-        //Skaliert das Dreieck entlang einer vertikalen Stretch Area
-        function scaleRectY(rectYBegin, rectYEnd, saYBegin, saYEnd) {
-          //2. Fall -> SA befindet sich genau im Bereich von rect
-          if (rectYBegin <= saYBegin && rectYEnd >= saYBegin) {
-            rect.setAttribute('height', round(rectYEnd - rectYBegin + (saYEnd - saYBegin)));
-          }
-          //3. Fall -> rect ist komplett rechts
-          else if (rectYBegin > saYBegin) {
-            rect.setAttribute('y', round(rectYBegin + (saYEnd - saYBegin)));
-          }
-        }
-        return rect;
-      }
-
-      /*
-          Berechnet die Koordinaten eines <path> Elementes neu
-          */
-      function fixPath(path, SA) {
-        if (SA == 'SAH') {
-          for (var j = 0; j < SAH.length; j++) {
-            var saXBegin = parseFloat(SAH[j].getAttribute('x'));
-            var saXEnd = round(saXBegin + parseFloat(SAH[j].getAttribute('width')));
-            var lastX; //Speichert die letzte x Koordinate ab.
-
-            for (var i = 0; i < path.elements.length; i++) {
-              switch (path.elements[i].command) {
-                case 'M':
-                case 'L':
-                case 'H':
-                  lastX = path.elements[i].parameter[0];
-                  if (path.elements[i].parameter[0] > saXBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                  }
-                  break;
-                case 'm': //LEA zu �ndern---------------------------------------------
-                case 'l':
-                case 'h':
-                  var help = path.elements[i].parameter[0];
-                  if (help >= 0 && lastX < saXBegin && lastX + path.elements[i].parameter[0] > saXBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                  } else if (help < 0 && lastX >= saXBegin && lastX + path.elements[i].parameter[0] < saXBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] - (saXEnd - saXBegin));
-                  }
-                  lastX += help;
-                  break;
-                case 'C':
-                  lastX = path.elements[i].parameter[4];
-                  if (path.elements[i].parameter[4] > saXBegin) {
-                    path.elements[i].parameter[4] = round(path.elements[i].parameter[4] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[2] = round(path.elements[i].parameter[2] + (saXEnd - saXBegin));
-                  }
-                  break;
-                case 'c':
-                  var help = path.elements[i].parameter[4];
-                  if (lastX < saXBegin && path.elements[i].parameter[4] + lastX > saXBegin) {
-                    path.elements[i].parameter[4] = round(path.elements[i].parameter[4] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[2] = round(path.elements[i].parameter[2] + (saXEnd - saXBegin));
-                  } else if (help < 0 && lastX >= saXBegin && lastX + path.elements[i].parameter[0] < saXBegin) {
-                    path.elements[i].parameter[4] = round(path.elements[i].parameter[4] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[2] = round(path.elements[i].parameter[2] + (saXEnd - saXBegin));
-                  }
-                  lastX += help;
-                  break;
-                case 'S':
-                  lastX = path.elements[i].parameter[2];
-                  if (path.elements[i].parameter[2] > saXBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[2] = round(path.elements[i].parameter[2] + (saXEnd - saXBegin));
-                  }
-                  break;
-                case 's':
-                  var help = path.elements[i].parameter[2];
-                  if (lastX < saXBegin && path.elements[i].parameter[2] + lastX > saXBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saXEnd - saXBegin));
-                    path.elements[i].parameter[2] = round(path.elements[i].parameter[2] + (saXEnd - saXBegin));
-                  } else if (help < 0 && lastX >= saXBegin && lastX + path.elements[i].parameter[0] < saXBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] - (saXEnd - saXBegin));
-                    path.elements[i].parameter[2] = round(path.elements[i].parameter[2] - (saXEnd - saXBegin));
-                  }
-                  lastX += help;
-                  break;
-              }
-            }
-          }
-        } else if (SA == 'SAV') {
-          for (var j = 0; j < SAV.length; j++) {
-            var saYBegin = parseFloat(SAV[j].getAttribute('y'));
-            var saYEnd = round(saYBegin + parseFloat(SAV[j].getAttribute('height')));
-            var lastY;
-            for (var i = 0; i < path.elements.length; i++) {
-              switch (path.elements[i].command) {
-                case 'M':
-                case 'L':
-                  lastY = path.elements[i].parameter[1];
-                  if (path.elements[i].parameter[1] > saYBegin) {
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] + (saYEnd - saYBegin));
-                  }
-                  break;
-                case 'm':
-                case 'l':
-                  var help = path.elements[i].parameter[1];
-                  if (lastY < saYBegin && path.elements[i].parameter[1] + lastY > saYBegin) {
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] + (saYEnd - saYBegin));
-                  } else if (help < 0 && lastY >= saYBegin && lastY + path.elements[i].parameter[1] < saYBegin) {
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] - (saYEnd - saYBegin));
-                  }
-                  lastY += help;
-                  break;
-                case 'V':
-                  lastY = path.elements[i].parameter[0];
-                  if (path.elements[i].parameter[0] > saYBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saYEnd - saYBegin));
-                  }
-                  break;
-                case 'v':
-                  var help = path.elements[i].parameter[0];
-                  if (lastY < saYBegin && path.elements[i].parameter[0] + lastY > saYBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] + (saYEnd - saYBegin));
-                  } else if (help < 0 && lastY >= saYBegin && lastY + path.elements[i].parameter[0] < saYBegin) {
-                    path.elements[i].parameter[0] = round(path.elements[i].parameter[0] - (saYEnd - saYBegin));
-                  }
-                  lastY += help;
-                  break;
-                case 'C':
-                  lastY = path.elements[i].parameter[5];
-                  if (path.elements[i].parameter[5] > saYBegin) {
-                    path.elements[i].parameter[5] = round(path.elements[i].parameter[5] + (saYEnd - saYBegin));
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] + (saYEnd - saYBegin));
-                    path.elements[i].parameter[3] = round(path.elements[i].parameter[3] + (saYEnd - saYBegin));
-                  }
-                  break;
-                case 'c':
-                  var help = path.elements[i].parameter[5];
-                  if (lastY < saYBegin && path.elements[i].parameter[5] + lastY > saYBegin) {
-                    path.elements[i].parameter[5] = round(path.elements[i].parameter[5] + (saYEnd - saYBegin));
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] + (saYEnd - saYBegin));
-                    path.elements[i].parameter[3] = round(path.elements[i].parameter[3] + (saYEnd - saYBegin));
-                  } else if (help < 0 && lastY >= saYBegin && lastY + path.elements[i].parameter[0] < saYBegin) {
-                    path.elements[i].parameter[5] = round(path.elements[i].parameter[5] - (saYEnd - saYBegin));
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] - (saYEnd - saYBegin));
-                    path.elements[i].parameter[3] = round(path.elements[i].parameter[3] - (saYEnd - saYBegin));
-                  }
-                  lastY += help;
-                  break;
-                case 'S':
-                  lastY = path.elements[i].parameter[3];
-                  if (path.elements[i].parameter[3] > saYBegin) {
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] + (saYEnd - saYBegin));
-                    path.elements[i].parameter[3] = round(path.elements[i].parameter[3] + (saYEnd - saYBegin));
-                  }
-                  break;
-                case 's':
-                  var help = path.elements[i].parameter[3];
-                  if (lastY < saYBegin && path.elements[i].parameter[3] + lastY > saYBegin) {
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] + (saYEnd - saYBegin));
-                    path.elements[i].parameter[3] = round(path.elements[i].parameter[3] + (saYEnd - saYBegin));
-                  } else if (help < 0 && lastY >= saYBegin && lastY + path.elements[i].parameter[0] < saYBegin) {
-                    path.elements[i].parameter[1] = round(path.elements[i].parameter[1] - (saYEnd - saYBegin));
-                    path.elements[i].parameter[3] = round(path.elements[i].parameter[3] - (saYEnd - saYBegin));
-                  }
-                  lastY += help;
-                  break;
-              }
-            }
-          }
-        } else if (SA == 'GLOBAL_SCALE') {
-          for (var i = 0; i < path.elements.length; i++) {
-            switch (path.elements[i].command) {
-              case 'M':
-              case 'm':
-              case 'l':
-              case 'L':
-                path.elements[i].parameter[0] = round(path.elements[i].parameter[0] * globalScaleFactorWidth);
-                path.elements[i].parameter[1] = round(path.elements[i].parameter[1] * globalScaleFactorHeight);
-                break;
-              case 'v':
-              case 'V':
-                path.elements[i].parameter[0] = round(path.elements[i].parameter[0] * globalScaleFactorHeight);
-                break;
-              case 'h':
-              case 'H':
-                path.elements[i].parameter[0] = round(path.elements[i].parameter[0] * globalScaleFactorWidth);
-                break;
-              case 'C':
-              case 'c':
-                path.elements[i].parameter[0] = round(path.elements[i].parameter[0] * globalScaleFactorWidth);
-                path.elements[i].parameter[1] = round(path.elements[i].parameter[1] * globalScaleFactorHeight);
-                path.elements[i].parameter[2] = round(path.elements[i].parameter[2] * globalScaleFactorWidth);
-                path.elements[i].parameter[3] = round(path.elements[i].parameter[3] * globalScaleFactorHeight);
-                path.elements[i].parameter[4] = round(path.elements[i].parameter[4] * globalScaleFactorWidth);
-                path.elements[i].parameter[5] = round(path.elements[i].parameter[5] * globalScaleFactorHeight);
-                break;
-              case 'S':
-              case 's':
-                path.elements[i].parameter[0] = round(path.elements[i].parameter[0] * globalScaleFactorWidth);
-                path.elements[i].parameter[1] = round(path.elements[i].parameter[1] * globalScaleFactorHeight);
-                path.elements[i].parameter[2] = round(path.elements[i].parameter[2] * globalScaleFactorWidth);
-                path.elements[i].parameter[3] = round(path.elements[i].parameter[3] * globalScaleFactorHeight);
-                break;
-            }
-          }
-        }
-        return getPathStringFromPathElement(path);
-      }
-      function getPathStringFromPathElement(path) {
-        //Nun muss d wieder hergestellt werden
-        var d = '';
-        for (var i = 0; i < path.elements.length; i++) {
-          d += path.elements[i].command;
-          if (path.elements[i].command != 'z') {
-            for (var a = 0; a < path.elements[i].parameter.length; a++) {
-              d += path.elements[i].parameter[a];
-              if (a != path.elements[i].parameter.length - 1) {
-                d += ',';
-              }
-            }
-          }
-        }
-        return d;
-      }
-      /*
-          Die ViewBox zum Anzeigen des SVG wird auf die richtige Gr��e gebracht
-          */
-      function fixViewBox(root, svgMinBorderXVal, svgMinBorderYVal) {
-        var viewBox = '';
-        var maxWidth = startWidthOLF + widthOLF > startWidthOLT + widthOLT ? startWidthOLF + widthOLF : startWidthOLT + widthOLT;
-        var maxHeight = startHeightOLF + heightOLF > startHeightOLT + heightOLT ? startHeightOLF + heightOLF : startHeightOLT + heightOLT;
-        root.setAttribute('height', (Math.round(maxHeight * 100) / 100).toString());
-        root.setAttribute('width', (Math.round(maxWidth * 100) / 100).toString());
-        svgMinBorderXVal = Math.round(svgMinBorderXVal * 100.0) / 100.0;
-        svgMinBorderYVal = Math.round(svgMinBorderYVal * 100.0) / 100.0;
-
-        //check if there exist x and y.
-        if (root.hasAttribute('x') && root.hasAttribute('y')) {
-          viewBox = Number.parseFloat(root.getAttribute('x').substring(0, root.getAttribute('x').length - 2)) + svgMinBorderXVal + ' ' + (Number.parseFloat(root.getAttribute('y').substring(0, root.getAttribute('y').length - 2)) + svgMinBorderYVal) + ' ' + Math.round(maxWidth * 100) / 100 + ' ' + Math.round(maxHeight * 100) / 100;
-        } else {
-          var oldViewBox = root.getAttribute('viewBox');
-          var pieces = oldViewBox.split(' ');
-          viewBox = Number.parseFloat(pieces[0]) + svgMinBorderXVal + ' ' + (Number.parseFloat(pieces[1]) + svgMinBorderYVal);
-          if (SAH[0]) {
-            //Viewbox muss nur ge�ndert werden, wenn es Stretch areas gibt
-            viewBox = viewBox + ' ' + Math.round(maxWidth * 100) / 100;
-          } else {
-            //Gibt es keine Stretch ares, dann wird nur width und height angepasst, aber nicht die Viewbox. Es wird nur skaliert.
-            viewBox = viewBox + ' ' + pieces[2];
-          }
-          if (SAV[0]) {
-            viewBox = viewBox + ' ' + Math.round(maxHeight * 100) / 100;
-          } else {
-            viewBox = viewBox + ' ' + pieces[3];
-          }
-        }
-        var enableBackGround = 'new ' + viewBox;
-        root.setAttribute('x', svgMinBorderXVal);
-        root.setAttribute('y', svgMinBorderYVal);
-        root.setAttribute('viewBox', viewBox);
-        root.setAttribute('enable-background', enableBackGround);
-        root.setAttribute('style', 'enable-background:new ' + viewBox + ';');
-        return root;
-      }
-
-      /*
-          Bekommt das d Attribut eines <path> Elementes �bergeben, welches die Koordinateninformationen beinhaltet
-          Diese Methode liest die Koordinaten heraus und erstellt jeweils einen Punkt f�r jede einzelne Koordinaten.
-          Besitzt dann die Variable elements, in der die ganzen Punkte gespeichert sind.
-          Ein PUnkt besteht immer aus einem Befehl und den jeweiligen Parametern. 
-          */
-
-      function createPolygonElement(polygonString, scaleFactorSvgViewBox) {
-        var xKoordBool = true;
-        var xKoord = '';
-        var yKoord = '';
-        var _points = [];
-        var ret = {};
-        var separaterChar = polygonString.includes(',') ? ',' : polygonString.includes(' ') ? ' ' : ',';
-        polygonString = polygonString.trimEnd().trimStart();
-        for (var i = 0; i < polygonString.length; i++) {
-          var character = polygonString.charAt(i);
-          if (!xKoordBool && character == ' ') {
-            if (xKoord != '') {
-              _points.push(createPoint(xKoord, yKoord));
-              xKoord = '';
-              yKoord = '';
-              xKoordBool = true;
-            }
-          } else if (character == separaterChar) {
-            xKoordBool = false;
-          } else {
-            if (xKoordBool) {
-              xKoord += character;
-            } else {
-              yKoord += character;
-            }
-          }
-        }
-        if (xKoord != '') {
-          if (scaleFactorSvgViewBox && (scaleFactorSvgViewBox.x != 1 || scaleFactorSvgViewBox.y != 1)) {
-            _points.push(createPoint(xKoord, yKoord) * scaleFactorSvgViewBox);
-          } else {
-            _points.push(createPoint(xKoord, yKoord));
-          }
-        }
-        ret.points = _points;
-        function createPoint(_x, _y) {
-          var point = {};
-          point.x = parseFloat(_x);
-          point.y = parseFloat(_y);
-          return point;
-        }
-        return ret;
-      }
-      function createPathElement(d, correctViewBoxScale) {
-        /*---------------------------------------------------------------
-              
-              Lea -> Man muss bei den ueberpruefungen if(number[anzParam]) auf if(number[anzParam] != null) aendern
-              Der Grund liegt darin, da es stellen in d geben kann, wo viele aufeinanderfolgende Leerzeichen sind. 
-              Nach dem ersten leerzeichen wird der Eintrag in number[anzParam] in eine Zahl umgewandelt. 
-              Wenn dann weitere Leerzeichen kommen, will ich wissen, ob in if(number[anzParam]) noch etwas drinnen steht. 
-              Das tut es zwar, aber wenn die Zahl 0 drinnensteht wird sie f�lschlicherwei�e als 0 interpretiert. 
-              Ich springe in das if also nicht hinein, obwohl etwas drinnen w�re. 
-              ------------------------------------------------------------------*/
-
-        var points = [];
-        var command;
-        var number = [];
-        var anzParam = 0;
-        var ret = {};
-        d = d == null ? '' : String(d).trim();
-        if (d === '') {
-          ret.elements = [];
-          return ret;
-        }
-        for (var i = 0; i < d.length; i++) {
-          var character = d.charAt(i);
-          // falls ein leerzeichen direkt nach einem commandLetter folgt soll dieses zeichen übersprungen werden
-          if (character == ' ' && i - 1 > 0 && isLetter(d.charAt(i - 1))) {
-            continue;
-          }
-          if (character != ' ' && (!isNaN(character) || character == '.' || character == '-')) {
-            if (number[anzParam] != null && character == '-') {
-              number[anzParam] = parseFloat(number[anzParam]);
-              anzParam++;
-              number[anzParam] = character;
-            } else if (number[anzParam] != null) {
-              number[anzParam] += character;
-            } else {
-              number[anzParam] = character;
-            }
-          } else {
-            if (character == ',' || character == ' ') {
-              if (number[anzParam] != null) {
-                number[anzParam] = parseFloat(number[anzParam]);
-              }
-              if (!isNaN(d.charAt(i + 1)) && d.charAt(i + 1) != ' ') {
-                anzParam++;
-              }
-            } else if (character != ' ' && character != '.' && character != '-') {
-              //Es handelt sich um einen buchstaben
-
-              if (command == null) {
-                // die erste zahl wird eingelesen
-                command = character;
-              } else {
-                if (number[anzParam] != null) {
-                  number[anzParam] = parseFloat(number[anzParam]);
-                  checkForSkippedLiterals(correctViewBoxScale);
-                  if (character == 'z') {
-                    points.push(createPoint('z', null));
-                  }
-                }
-                command = character;
-                number = [];
-                anzParam = 0;
-              }
-            }
-          }
-        }
-        if (d.charAt(d.length - 1) != 'z') {
-          checkForSkippedLiterals(correctViewBoxScale);
-        }
-        function isLetter(str) {
-          return str.length === 1 && str.match(/[a-z]/i);
-        }
-
-        //Diese Funktion untersucht, ob aus Platzgr�nden Zeichen weggelassen wurden.
-        //Denn beim Path kann man, um platz zu sparen, sollten zwei h aufeinander folgen, das zweite h weglassen
-        function checkForSkippedLiterals(correctViewBoxScale) {
-          var deltaParameter = 0;
-          switch (command) {
-            case 'M':
-            case 'm':
-            case 'L':
-            case 'l':
-              deltaParameter = 2;
-              break;
-            case 'H':
-            case 'h':
-            case 'V':
-            case 'v':
-              deltaParameter = 1;
-              break;
-            case 'C':
-            case 'c':
-              deltaParameter = 6;
-              break;
-            case 'S':
-            case 's':
-              deltaParameter = 4;
-              break;
-            default:
-              LOG$2.warn('[SVGUtils] ccCheckStretchAreas: svg path command: ' + command + ' unknown; path d: ' + d + (svgSourceUrl != null && svgSourceUrl !== '' ? '; svg url: ' + svgSourceUrl : ''));
-              return;
-          }
-          for (var a = 0; a < number.length; a = a + deltaParameter) {
-            var help = [];
-            for (var h = 0; h < deltaParameter; h++) {
-              help.push(number[a + h]);
-            }
-            points.push(createPoint(command, help, correctViewBoxScale));
-          }
-        }
-
-        //Repr�sentiert einen Punkt f�r ein pathElement.
-        function createPoint(com, number, correctViewBoxScale) {
-          var point = {};
-          point.command = com; //Wie zum Beispiel
-          point.parameter = number;
-          if (correctViewBoxScale && (correctViewBoxScale.x != 1 || correctViewBoxScale.y != 1)) {
-            switch (point.command) {
-              case 'M':
-              case 'm':
-              case 'L':
-              case 'l':
-                point.parameter[0] = point.parameter[0] * correctViewBoxScale.x;
-                point.parameter[1] = point.parameter[1] * correctViewBoxScale.y;
-                break;
-              case 'H':
-              case 'h':
-                point.parameter[0] = point.parameter[0] * correctViewBoxScale.x;
-                break;
-              case 'V':
-              case 'v':
-                point.parameter[0] = point.parameter[0] * correctViewBoxScale.y;
-                break;
-              case 'C':
-              case 'c':
-                point.parameter[0] = point.parameter[0] * correctViewBoxScale.x;
-                point.parameter[1] = point.parameter[1] * correctViewBoxScale.y;
-                point.parameter[2] = point.parameter[2] * correctViewBoxScale.x;
-                point.parameter[3] = point.parameter[3] * correctViewBoxScale.y;
-                point.parameter[4] = point.parameter[4] * correctViewBoxScale.x;
-                point.parameter[5] = point.parameter[5] * correctViewBoxScale.y;
-                break;
-              case 'S':
-              case 's':
-                point.parameter[0] = point.parameter[0] * correctViewBoxScale.x;
-                point.parameter[1] = point.parameter[1] * correctViewBoxScale.y;
-                point.parameter[2] = point.parameter[2] * correctViewBoxScale.x;
-                point.parameter[3] = point.parameter[3] * correctViewBoxScale.y;
-                break;
-            }
-          }
-          return point;
-        }
-        ret.elements = points;
-        return ret;
-      }
-
-      //Die Elemente in SAV und SAH m�ssen entweder nach x oder y aufsteigend sortiert sein
-      function sortSA() {
-        //Sortiere SAH
-        for (var j = 0; j < SAH.length; j++) {
-          var minpos = j;
-          for (var i = j + 1; i < SAH.length; i++) {
-            if (parseFloat(SAH[i].getAttribute('x')) < parseFloat(SAH[minpos].getAttribute('x'))) {
-              minpos = i;
-            }
-          }
-          if (minpos > j) {
-            var help = SAH[j];
-            SAH[j] = SAH[minpos];
-            SAH[minpos] = help;
-          }
-        }
-
-        //Sortiere SAV
-        for (var j = 0; j < SAV.length; j++) {
-          var minpos = j;
-          for (var i = j + 1; i < SAV.length; i++) {
-            if (parseFloat(SAV[i].getAttribute('y')) < parseFloat(SAV[minpos].getAttribute('y'))) {
-              minpos = i;
-            }
-          }
-          if (minpos > j) {
-            var help = SAV[j];
-            SAV[j] = SAV[minpos];
-            SAV[minpos] = help;
-          }
-        }
-      }
-
-      //Ermittelt die Verh�ltnisse zwischen den einzelnen StrechAreas
-      function calcRatioSA(sahWidth, savHeight) {
-        if (sahWidth > 0) {
-          for (var i = 0; i < SAH.length; i++) {
-            ratioSAH[i] = parseFloat(SAH[i].getAttribute('width')) / sahWidth;
-          }
-        }
-        if (savHeight > 0) {
-          for (var i = 0; i < SAV.length; i++) {
-            ratioSAV[i] = parseFloat(SAV[i].getAttribute('height')) / savHeight;
-          }
-        }
-      }
-
-      //Setzt Breite bzw. H�he der Strech Areas auf 0
-      function clearSA() {
-        for (var i = 0; i < SAH.length; i++) {
-          SAH[i].setAttribute('width', '0');
-        }
-        for (var i = 0; i < SAV.length; i++) {
-          SAV[i].setAttribute('height', '0');
-        }
-      }
-
-      //Rundet auf drei Nachkommastellen
-      function round(zahl) {
-        return Math.round(zahl * 1000) / 1000;
-      }
-      return {
-        heightOLF: heightOLF,
-        widthOLF: widthOLF,
-        heightOLT: heightOLT,
-        widthOLT: widthOLT
-      };
-    }
-  }]);
-}();
-
-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';
-        case 'AVS':
-          return 'AVN';
-        case 'AVN':
-          return 'AVS';
-      }
-      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;
-
-      // An empty filter on either side means "no connector restriction" -> always dockable.
-      if (avlFilter2.length == 0 || avrFilter1.length == 0) return true;
-      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;
-
-      // An empty filter on either side means "no connector restriction" -> always dockable.
-      if (avlFilter1.length == 0 || avrFilter2.length == 0) return true;
-      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) {
-      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;
-        }
-        if (dp1.PlannerConfig.ignoreLayerAVNAVS && (dp1.Type == 'AVN' || dp1.Type == 'AVS') && (dp2.Type == 'AVN' || dp2.Type == 'AVS')) {
-          doCheckLayer = false;
-        }
-        //Check layer
-        if (doCheckLayer && dp2.Layer == dp1.Layer) {
-          return false;
-        }
-      }
-      if (!dp1.PlannerConfig.ignoreDockingNumber && 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, minBorderSVG, 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 - minBorderSVG.svgMinXVal) / DivaUtils__default["default"].UnitRecalc, (dockingVector.y1 - minBorderSVG.svgMinYVal) / DivaUtils__default["default"].UnitRecalc);
-        var localWorldPos2 = new index.Vector2((dockingVector.x2 - minBorderSVG.svgMinXVal) / DivaUtils__default["default"].UnitRecalc, (dockingVector.y2 - minBorderSVG.svgMinYVal) / 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 () {
-  function PlannerHandler2D() {
-    _classCallCheck__default["default"](this, PlannerHandler2D);
-    _defineProperty__default["default"](this, "svgUtils", void 0);
-    this.svgUtils = new SVGUtils();
-  }
-  /**
-   * This function computes the collision between two elements.
-   * First it computes the collision with the  bounding Box. Only if these collide - we compute the collision between the OLF Polygons
-   * @param element1
-   * @param element2
-   */
-  return _createClass__default["default"](PlannerHandler2D, [{
-    key: "checkCollision",
-    value: function checkCollision(element1, element2, checkCollisionForDifferentLayers) {
-      //Do not check Collision
-      DivaUtils__default["default"].startSpanOfApm('PlannerHandler2D checkCollision');
-      if (element1.Layer != element2.Layer && (!checkCollisionForDifferentLayers.includes(Number(element1.Layer)) || !checkCollisionForDifferentLayers.includes(Number(element2.Layer)))) return false;
-      var bboxPoints1 = element1.getWorld2DBBoxOutline();
-      var bboxPoints2 = element2.getWorld2DBBoxOutline();
-      var checkCollisionPolygonPolygon = function checkCollisionPolygonPolygon(polyLinePoints1, polyLinePoint2) {
-        for (var i = 0; i < polyLinePoints1.length; i++) {
-          var start1 = polyLinePoints1[i];
-          var end1 = polyLinePoints1[(i + 1) % polyLinePoints1.length];
-          for (var j = 0; j < polyLinePoint2.length; j++) {
-            var start2 = polyLinePoint2[j];
-            var end2 = polyLinePoint2[(j + 1) % polyLinePoint2.length];
-            var doCollide = fabric.fabric.Intersection.intersectLineLine(new fabric.fabric.Point(start1.x, start1.y), new fabric.fabric.Point(end1.x, end1.y), new fabric.fabric.Point(start2.x, start2.y), new fabric.fabric.Point(end2.x, end2.y));
-            if (doCollide.status == 'Intersection') {
-              return true;
-            }
-          }
-        }
-        return false;
-      };
-
-      /**
-       * This function checks if one Polygon is inside the other
-       */
-      var checkPolygonInsidePolygon = function checkPolygonInsidePolygon(polyLinePoints1, polyLinePoint2) {
-        var pointOutsideCount = 0;
-        var pointInsideCount = 0;
-        for (var i = 0; i < polyLinePoints1.length; i++) {
-          var start1 = polyLinePoints1[i];
-          var end1 = new index.Vector2(start1.x + 999999, start1.y);
-          var intersectionCount = 0;
-          //check if curPoint lies outside or inside the polygon
-          for (var j = 0; j < polyLinePoint2.length; j++) {
-            var start2 = polyLinePoint2[j];
-            var end2 = polyLinePoint2[(j + 1) % polyLinePoint2.length];
-            var doCollide = fabric.fabric.Intersection.intersectLineLine(new fabric.fabric.Point(start1.x, start1.y), new fabric.fabric.Point(end1.x, end1.y), new fabric.fabric.Point(start2.x, start2.y), new fabric.fabric.Point(end2.x, end2.y));
-            if (doCollide.status == 'Intersection') intersectionCount++;
-          }
-          if (intersectionCount % 2 == 0) {
-            //Der Punkt lag außerhalb
-            pointOutsideCount++;
-          } else {
-            pointInsideCount++;
-          }
-          if (pointOutsideCount > 0 && pointInsideCount > 0) return false;
-        }
-        if (pointOutsideCount > 0 && pointInsideCount > 0) return false;else return pointInsideCount == polyLinePoints1.length;
-      };
-      if (checkCollisionPolygonPolygon(bboxPoints1, bboxPoints2)) {
-        if (!element1.HasOLTPolygon && !element1.HasOLFPolygon) {
-          LOG.error(new DivaUtils.DivaError('checkCollision PlannerHandler2D - The element with id: ' + element1.getElementId() + ' has no OLT AND no OLF', {
-            code: 'WC_0012'
-          }));
-          DivaUtils__default["default"].endSpanOfApm('PlannerHandler2D checkCollision');
-          return false;
-        } else if (!element2.HasOLTPolygon && !element2.HasOLFPolygon) {
-          LOG.error(new DivaUtils.DivaError('checkCollision PlannerHandler2D - The element with id: ' + element2.getElementId() + ' has no OLT AND no OLF', {
-            code: 'WC_0012'
-          }));
-          DivaUtils__default["default"].endSpanOfApm('PlannerHandler2D checkCollision');
-          return false;
-        }
-        var detailPolygon1 = element1.HasOLFPolygon ? element1.getOLFPolygonWorldPos() : element1.getOLTPolygonWorldPos();
-        var detailPolygon2 = element2.HasOLFPolygon ? element2.getOLFPolygonWorldPos() : element2.getOLTPolygonWorldPos();
-        DivaUtils__default["default"].endSpanOfApm('PlannerHandler2D checkCollision');
-        return checkCollisionPolygonPolygon(detailPolygon1, detailPolygon2);
-      } else {
-        DivaUtils__default["default"].endSpanOfApm('PlannerHandler2D checkCollision');
-        return checkPolygonInsidePolygon(bboxPoints1, bboxPoints2); //wenn sie sich nicht überschneiden untersuche, ob ein Polygon genau innerhalb des anderen liegt
-      }
-    }
-
-    /**
-     * This function creates a HTML Canvas Element of the SVg. This canvas is used by the 3D Grid in order to display the Svg as PNG on the ground.
-     * Before creating the canvas element, the SVG is parsed to be a PNG.
-     * @param plannerElement    The planner Element whoes SVGData is used for creating the canvas Element.
-     */
-  }, {
-    key: "caluclatePNGOfSVG",
-    value: function caluclatePNGOfSVG(plannerElement) {
-      DivaUtils__default["default"].startSpanOfApm('PlannerHandler2D caluclatePNGOfSVG');
-      var canvasHtml = document.createElement('canvas');
-      canvasHtml.id = 'helperCanvasConverter';
-      var canvas = new fabric.fabric.Canvas('helperCanvasConverter');
-      canvas.backgroundColor = '#fff';
-      canvas.setWidth(DivaUtils__default["default"].UnitRecalc * plannerElement.getWidthOLT());
-      canvas.setHeight(DivaUtils__default["default"].UnitRecalc * plannerElement.getHeightOLT());
-      var shape = plannerElement.getSVGShapeOLT2D();
-      canvas.add(shape);
-      shape.bringToFront();
-      canvas.renderAll();
-      var base46Image = canvas.toDataURL({
-        format: 'jpeg',
-        quality: 1
-      });
-      plannerElement.SvgDataOLTBase64 = base46Image;
-    }
-  }, {
-    key: "parseSvg",
-    value: function parseSvg(plannerElement, svgXml, minBorderSVG, plannerconfig, sizes) {
-      var that = this;
-      svgXml = this.svgUtils.removeMaskFromSvg(svgXml); //Correct mask attributes
-      dockingPointHandlerInst.initDockingPointsFromSvg(plannerElement, this.svgUtils.getDPsInSVG(svgXml), minBorderSVG, plannerconfig);
-      var svgXmlOLT = this.svgUtils.removeOLFFromSvg(svgXml);
-      var oltPoints = this.svgUtils.getPointOfPoligonById(svgXml, 'OLT');
-      if (!(oltPoints !== null && oltPoints !== void 0 && oltPoints.length)) {
-        LOG.warn('no olt fount in svg for element' + plannerElement.ArticleCodex + ' with id ' + plannerElement.getElementId());
-      }
-      plannerElement.OLTPolygon = oltPoints;
-      var olf = this.svgUtils.getPointOfPoligonById(svgXml, 'OLF');
-      var olfGeoEarly = this.svgUtils.getOLFGeometryFromSvg(svgXml);
-      if (olf !== null && olf !== void 0 && olf.length) {
-        var _olfGeoEarly$width, _olfGeoEarly$height;
-        var olfBBox = this.svgUtils.getBoundingBoxOfPoints(olf);
-        // Prefer getOLFGeometryFromSvg for dims - single source of truth, handles split(/\s+/) correctly
-        var olfW = (_olfGeoEarly$width = olfGeoEarly === null || olfGeoEarly === void 0 ? void 0 : olfGeoEarly.width) !== null && _olfGeoEarly$width !== void 0 ? _olfGeoEarly$width : olfBBox.width;
-        var olfD = (_olfGeoEarly$height = olfGeoEarly === null || olfGeoEarly === void 0 ? void 0 : olfGeoEarly.height) !== null && _olfGeoEarly$height !== void 0 ? _olfGeoEarly$height : olfBBox.height;
-        plannerElement.setupOLF(olf, olfW, olfD);
-      } else {
-        var olfGeo = this.svgUtils.getOLFGeometryFromSvg(svgXml);
-        if (olfGeo) {
-          var olfRectPoints = [new index.Vector2(olfGeo.minX, olfGeo.minY), new index.Vector2(olfGeo.minX + olfGeo.width, olfGeo.minY), new index.Vector2(olfGeo.minX + olfGeo.width, olfGeo.minY + olfGeo.height), new index.Vector2(olfGeo.minX, olfGeo.minY + olfGeo.height)];
-          plannerElement.setupOLF(olfRectPoints, olfGeo.width, olfGeo.height);
-        } else if (sizes !== null && sizes !== void 0 && sizes.heightOLF, sizes !== null && sizes !== void 0 && sizes.widthOLF) {
-          plannerElement.setupOLF(olf, sizes === null || sizes === void 0 ? void 0 : sizes.widthOLF, sizes === null || sizes === void 0 ? void 0 : sizes.heightOLF);
-        } else {
-          plannerElement.clearOLF();
-        }
-      }
-
-      //if we are running in node js dont do fabric stuff
-      if (typeof window === 'undefined') return;
-      return new Promise(function (resolve, reject) {
-        fabric.fabric.loadSVGFromString(svgXml, function (objects, options) {
-          plannerElement.cleanShapeOLF2D();
-          var olfObjects = [];
-          var oltTop = 0;
-          var oltLeft = 0;
-          var oltWidth = 0;
-          var oltDepth = 0;
-          for (var objNo = 0; objNo < objects.length; objNo++) {
-            var object = objects[objNo];
-            object.setCoords();
-            var objID;
-            if (object.id) {
-              objID = object.id.toString();
-              switch (objID.substring(0, 3)) {
-                case 'OLF':
-                  object.stroke = 'none';
-                  break;
-                case 'OLT':
-                  object.stroke = 'none';
-                  oltWidth = object.width;
-                  oltDepth = object.height;
-                  break;
-              }
-            }
-            olfObjects.push(object);
-          }
-          // oltLeft/oltTop/oltWidth/oltDepth from SVG attributes (untransformed) - Fabric values wrong for transformed rects
-          var olfGeo = that.svgUtils.getOLFGeometryFromSvg(svgXml);
-          var oltGeo = that.svgUtils.getOLTGeometryFromSvg(svgXml);
-          if (olfGeo && oltGeo) {
-            oltLeft = oltGeo.x - olfGeo.minX;
-            oltTop = oltGeo.y - olfGeo.minY;
-            oltWidth = oltGeo.width;
-            oltDepth = oltGeo.height;
-          }
-
-          //hier wird definitv fabric.js Element erstellt
-          var fabricShapeOLF = fabric.fabric.util.groupSVGElements(olfObjects, options);
-          fabricShapeOLF.set({
-            originX: 'left',
-            originY: 'top',
-            lockRotation: true,
-            hasRotatingPoint: true,
-            lockUniScaling: true,
-            lockScalingX: true,
-            lockScalingY: true,
-            scaleX: 1,
-            scaleY: 1,
-            left: 0,
-            top: 0
-          });
-          if (plannerElement.DoSetWidthFromSVG && fabricShapeOLF.width) plannerElement.WidthFromSVG = fabricShapeOLF.width / DivaUtils__default["default"].UnitRecalc;
-          // since the svg is always top down perspective height in 2D represents depth in 2D planner and 3D
-          if (plannerElement.DoSetDepthFromSVG && fabricShapeOLF.height) plannerElement.DepthFromSVG = fabricShapeOLF.height / DivaUtils__default["default"].UnitRecalc;
-          plannerElement.SvgShapeOLF2D = fabricShapeOLF;
-          plannerElement.OLTDepth = oltDepth;
-          plannerElement.OLTWidth = oltWidth;
-          plannerElement.OLTTop = oltTop;
-          plannerElement.OLTLeft = oltLeft;
-          plannerElement.SvgData = svgXml;
-          fabric.fabric.loadSVGFromString(svgXmlOLT, function (objectsOLT, optionsOLT) {
-            plannerElement.cleanShapeOLT2D();
-            if (oltGeo) {
-              optionsOLT.width = oltGeo.width;
-              optionsOLT.height = oltGeo.height;
-            } else {
-              for (var objNo = 0; objNo < objects.length; objNo++) {
-                var object = objects[objNo];
-                var objID;
-                if (object.id) {
-                  objID = object.id.toString();
-                  if (objID.startsWith('OLT')) {
-                    optionsOLT.height = object.height;
-                    optionsOLT.width = object.width;
-                    break;
-                  }
-                }
-              }
-            }
-            var fabricShapeOLT = fabric.fabric.util.groupSVGElements(objectsOLT, optionsOLT);
-            fabricShapeOLT.set({
-              originX: 'left',
-              originY: 'top',
-              lockRotation: true,
-              hasRotatingPoint: true,
-              lockUniScaling: true,
-              lockScalingX: true,
-              lockScalingY: true,
-              scaleX: 1,
-              scaleY: 1,
-              left: 0,
-              top: 0
-            });
-            plannerElement.SvgShapeOLT2D = fabricShapeOLT;
-            that.caluclatePNGOfSVG(plannerElement);
-            resolve();
-          });
-        });
-      });
-    }
-  }, {
-    key: "getMinBorderSVG",
-    value: function getMinBorderSVG(svgXml) {
-      //if we are running in node js dont do fabric stuff
-      if (typeof window === 'undefined') return {
-        svgMinXVal: 0,
-        svgMinYVal: 0
-      };
-      return new Promise(function (resolve, reject) {
-        var svgMinXVal = Number.POSITIVE_INFINITY;
-        var svgMinYVal = Number.POSITIVE_INFINITY;
-        fabric.fabric.loadSVGFromString(svgXml, function (objects, options) {
-          var objID;
-          for (var objNo = 0; objNo < objects.length; objNo++) {
-            var object = objects[objNo];
-            if (object.id) objID = object.id.toString();
-            if (objID == null || !objID.startsWith('AV')) {
-              if (svgMinXVal > object.left) svgMinXVal = object.left;
-              if (svgMinYVal > object.top) svgMinYVal = object.top;
-            }
-          }
-          resolve({
-            svgMinXVal: svgMinXVal,
-            svgMinYVal: svgMinYVal
-          });
-        });
-      });
-    }
-    /*
-      This function is used to load the SVG of the element and set everything up.
-      */
-  }, {
-    key: "loadSVG",
-    value: (function () {
-      var _loadSVG = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(plannerElement, set) {
-        var _this = this;
-        var svgFile, svgContentXML, svgContent, result, svgNewWidth, svgNewDepth, sizes, minBoderSVG, svgSourceUrl, correctedContent;
-        return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              svgFile = plannerElement.SvgFileName;
-              if (svgFile) {
-                _context.next = 3;
-                break;
-              }
-              return _context.abrupt("return", false);
-            case 3:
-              if (!set.CatalogData.isIDMFormat) {
-                _context.next = 9;
-                break;
-              }
-              _context.next = 6;
-              return set.api.fetchData(svgFile, {
-                method: 'GET',
-                config: {},
-                data: {}
-              });
-            case 6:
-              svgContentXML = _context.sent;
-              _context.next = 16;
-              break;
-            case 9:
-              _context.next = 11;
-              return set.api.getDataCache(this.getSVGUrl(svgFile, set.CatalogData.mediaUrl), undefined, set.CatalogData.accountSessionGuid);
-            case 11:
-              result = _context.sent;
-              if (!result.Error) {
-                _context.next = 14;
-                break;
-              }
-              throw new Error(result.Error);
-            case 14:
-              if (result.Result.toLowerCase() == 'success') {
-                svgContent = result.Content;
-              }
-              svgContentXML = DivaUtils__default["default"].decodeBase64(svgContent);
-            case 16:
-              if (!svgContentXML) {
-                LOG.error(new DivaUtils.DivaError('Fehler beim laden des SVGs ', {
-                  code: 'WC_0009',
-                  custom: {
-                    svgFile: svgFile
-                  }
-                }));
-              }
-              plannerElement.svgBefore = svgContentXML;
-              svgNewWidth = plannerElement.Width;
-              svgNewDepth = plannerElement.Depth;
-              //fix for "kissen" that didnt had a depth but do have a height https://app.asana.com/0/1201426433314773/1201432109700389
-              if (svgNewDepth === -1 && plannerElement.Height !== -1) svgNewDepth = plannerElement.Height;
-              if (!(svgNewWidth != undefined && svgNewWidth > 0 && svgNewDepth != undefined && svgNewDepth > 0)) {
-                _context.next = 34;
-                break;
-              }
-              _context.next = 24;
-              return this.getMinBorderSVG(svgContentXML);
-            case 24:
-              minBoderSVG = _context.sent;
-              svgSourceUrl = set.CatalogData.isIDMFormat ? svgFile : "".concat(set.CatalogData.mediaUrl, "pln_").concat(svgFile);
-              correctedContent = '';
-              _context.next = 29;
-              return new Promise(function (resolve, reject) {
-                sizes = _this.svgUtils.ccCheckStretchAreas(svgContentXML, svgNewWidth, svgNewDepth, set.CatalogData.useGlobalSVGScale, minBoderSVG.svgMinXVal, minBoderSVG.svgMinYVal, function (_correctedContent) {
-                  correctedContent = _correctedContent;
-                  resolve();
-                }, svgSourceUrl);
-              });
-            case 29:
-              plannerElement.svgAfter = correctedContent;
-              _context.next = 32;
-              return this.parseSvg(plannerElement, correctedContent, minBoderSVG, set.CatalogData.getPlannerConfig(), sizes);
-            case 32:
-              _context.next = 37;
-              break;
-            case 34:
-              plannerElement.svgAfter = svgContentXML;
-              _context.next = 37;
-              return this.parseSvg(plannerElement, svgContentXML, {
-                svgMinXVal: 0,
-                svgMinYVal: 0
-              }, set.CatalogData.getPlannerConfig());
-            case 37:
-              return _context.abrupt("return", true);
-            case 38:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function loadSVG(_x, _x2) {
-        return _loadSVG.apply(this, arguments);
-      }
-      return loadSVG;
-    }())
-  }, {
-    key: "getSVGUrl",
-    value: function getSVGUrl(svgFile, mediaUrl) {
-      var url = mediaUrl + 'pln_' + svgFile;
-      //Split url
-      var index = url.indexOf('/files/');
-      url = url.substring(index);
-      return 'function=GetFileAsString' + '&fileUrl=' + encodeURIComponent(url);
-    }
-  }]);
-}();
-var handler2D = new PlannerHandler2D();
-
-exports.dockingPointHandlerInst = dockingPointHandlerInst;
-exports.handler2D = handler2D;