@crystaldesign/diva-web-planner-react 26.12.0-beta.9 → 26.12.0-rc.0

package/build/esm/Planner2DGrid-cc78031e.js

@@ -1,813 +0,0 @@
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import './index-249d6781.js';
-import { fabric } from 'fabric';
-import { Vector3, Vector2 } from '@crystaldesign/web-planner-logic';
-import { getLogger, DivaUtils } from '@crystaldesign/diva-core';
-import 'react';
-import 'react-dynamic-multi-render';
-import 'react/jsx-runtime';
-import 'mobx-react-lite';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import 'classnames';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@crystaldesign/real-time-viewer-next';
-import 'react-switch';
-import 'react-countup';
-
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var LOG = getLogger('Planner', 'Planner2DGrid');
-
-/** Upper bound for one fabric SVG parse; buildSvgShape must never hang. */
-var SVG_PARSE_TIMEOUT_MS = 10000;
-var Planner2DGrid = /*#__PURE__*/function () {
-  function Planner2DGrid(getConfiguratorState, getPlannerElementById, getPlannerViewConfig, forceViewToEnterPlannerMode, plannerPaletteViewInfo, settingsState) {
-    var _this = this;
-    _classCallCheck(this, Planner2DGrid);
-    _defineProperty(this, "autoDockingDistance", 20);
-    //Auto docking innerhalb von 10 cm
-    _defineProperty(this, "dimGroupWidthName", 'DimensionGroup_Width');
-    _defineProperty(this, "dimGroupHeightName", 'DimensionGroup_Height');
-    _defineProperty(this, "canvas", void 0);
-    /** Counts render passes so an overtaken one cannot paint: shape building is async, so passes finish in completion order, not call order. */
-    _defineProperty(this, "renderGeneration", 0);
-    _defineProperty(this, "canvas2DGridID", 'wcConfigurator-grid-2D-canvas');
-    _defineProperty(this, "borderFactorHori", 0.7);
-    //70 % des screens soll von der Planung ausgefüllt werden
-    _defineProperty(this, "borderFactorVert", 0.64);
-    //70 % des screens soll von der Planung ausgefüllt werden
-    _defineProperty(this, "maxZoom", 4);
-    _defineProperty(this, "deltaRotDeg", void 0);
-    _defineProperty(this, "inDragMode", false);
-    _defineProperty(this, "currZoomFactor", 1);
-    _defineProperty(this, "currCenteringOffset", new Vector2(0, 0));
-    //This saves the offset value that is used for centerings the whole set
-    _defineProperty(this, "zoomFactorBBoxDimLastFrame", new Vector2(0, 0));
-    //Saves the bbox from the last update zoom factor. Only zoom if dimension is bigger than 15 cm.
-    _defineProperty(this, "plannerPaletteViewInfo", void 0);
-    _defineProperty(this, "settingsState", void 0);
-    //methods from outside-------------------------------------------------------------------
-    _defineProperty(this, "getConfiguratorState", void 0);
-    _defineProperty(this, "updatePlannerTrans", void 0);
-    _defineProperty(this, "getPlannerElementById", void 0);
-    _defineProperty(this, "getPlannerViewConfig", void 0);
-    _defineProperty(this, "forceViewToEnterPlannerMode", void 0);
-    /**
-     * This function is called when the dragging of an element on the 2D Grid has started. If the configurator is not in planner mode - switch to planner mode.
-     */
-    //----------------------------------------------User Interaction (Dragging and Rotation)--------------------------------------------------\\
-    /**
-     *
-     * This function is called when a drag start is detected. The whole system is set up to detect drag movement on a shape.
-     */
-    _defineProperty(this, "onDragStarted", function (setId, elementId) {
-      _this.inDragMode = true;
-      LOG.debug('On Drag Started');
-      if (!['PLANNER', 'PRODUCTS', 'PROMOTED', 'ACC_PLANNER', 'PLANNER_2.0'].includes(_this.getConfiguratorState())) {
-        //Inform view to switch to planenr mode
-        _this.forceViewToEnterPlannerMode(true);
-      }
-      var element = _this.getPlannerElementById(setId, elementId);
-      if (element) _this.updatePlannerTrans(setId, elementId, new Vector3(0, 0, 0), 0, 0, 'START', _this.autoDockingDistance);
-    });
-    /**
-     * This function is calledn when the Element is currently dragged on the 2D Grid.
-     * The moving Information is updated in the logic
-     * @param setId
-     * @param elementId
-     * @param deltaMoveOnScreen
-     */
-    _defineProperty(this, "onDragMove", function (setId, elementId, deltaMoveOnScreen) {
-      var element = _this.getPlannerElementById(setId, elementId);
-      if (element) {
-        _this.updatePlannerTrans(setId, elementId, new Vector3(deltaMoveOnScreen.x / _this.currZoomFactor, 0, deltaMoveOnScreen.y / _this.currZoomFactor), 0, 45, 'UPDATE', _this.autoDockingDistance);
-      }
-    });
-    /**
-     * This function is called when the Element has stopped being dragged
-     * @param setId
-     * @param elementId
-     */
-    _defineProperty(this, "onDragEnd", function (setId, elementId) {
-      LOG.debug('On Drag END');
-      _this.inDragMode = false;
-      _this.updatePlannerTrans(setId, elementId, new Vector3(0, 0, 0), 0, 0, 'END', _this.autoDockingDistance);
-    });
-    _defineProperty(this, "resetSelectedElementsOnEnterPlannerMode", function () {
-      return false;
-    });
-    /**
-     * Converts the current planning into a base64 JPG string
-     */
-    _defineProperty(this, "getContentAsJPG", function () {
-      if (_this.canvas) {
-        var oldCanvasBackground = _this.canvas.backgroundColor;
-        var oldCanvasWidth = _this.canvas.width;
-        var oldCanvasHeight = _this.canvas.height;
-        _this.canvas.backgroundColor = '#fff';
-        var objectsOnCanvas = _this.canvas.getObjects();
-        var textWidthObj = undefined;
-        var textHeightObj = undefined;
-        for (var i = 0; i < objectsOnCanvas.length; i++) {
-          var groupObj = objectsOnCanvas[i];
-          if (groupObj.name == _this.dimGroupHeightName || groupObj.name == _this.dimGroupWidthName) {
-            groupObj.dirty = true;
-            for (var j = 0; j < groupObj.getObjects().length; j++) {
-              if (groupObj.getObjects()[j].type == 'text') {
-                var textObj = groupObj.getObjects()[j];
-                if (groupObj.name == _this.dimGroupHeightName) textHeightObj = textObj;else if (groupObj.name == _this.dimGroupWidthName) textWidthObj = textObj;
-              }
-            }
-            //groupObj.bringToFront();
-          }
-        }
-        var oldFontWidth = 0;
-        var oldFontWidthTop = 0;
-        var oldFontHeight = 0;
-        var fontSize = 30;
-        var deltaDistDont = 13;
-        var doMake2DImgSmaller = false;
-        if (_this.canvas.width && _this.canvas.width < 500) {
-          fontSize = 17;
-          deltaDistDont = 7;
-          doMake2DImgSmaller = true;
-        }
-        if (textWidthObj != undefined) {
-          oldFontWidth = textWidthObj.fontSize;
-          oldFontWidthTop = textWidthObj.top;
-          textWidthObj.fontSize = fontSize;
-          textWidthObj.dirty = true;
-          textWidthObj.top = textWidthObj.top + deltaDistDont;
-        }
-        if (textHeightObj != undefined) {
-          oldFontHeight = textHeightObj.fontSize;
-          textHeightObj.fontSize = fontSize;
-          textHeightObj.dirty = true;
-        }
-        LOG.debug('This.canvas.width: ' + _this.canvas.width + '; this.canvas.height: ' + _this.canvas.height);
-        if (_this.canvas.width && doMake2DImgSmaller) _this.canvas.setWidth(_this.canvas.width * 1.15);
-        if (_this.canvas.height && doMake2DImgSmaller) _this.canvas.setHeight(_this.canvas.height * 1.15);
-        _this.canvas.renderAll();
-        var dataURL = _this.canvas.toDataURL({
-          format: 'jpeg',
-          quality: 0.8
-        });
-        if (textWidthObj != undefined) {
-          textWidthObj.fontSize = oldFontWidth;
-          textWidthObj.top = oldFontWidthTop;
-          textWidthObj.group.dirty = true;
-        }
-        if (textHeightObj != undefined) {
-          textHeightObj.fontSize = oldFontHeight;
-          textHeightObj.group.dirty = true;
-        }
-        _this.canvas.backgroundColor = oldCanvasBackground;
-        if (oldCanvasWidth) _this.canvas.setWidth(oldCanvasWidth);
-        if (oldCanvasHeight) _this.canvas.setHeight(oldCanvasHeight);
-        _this.canvas.renderAll();
-        return dataURL;
-      }
-      return '';
-    });
-    this.getConfiguratorState = getConfiguratorState;
-    this.getPlannerElementById = getPlannerElementById;
-    this.getPlannerViewConfig = getPlannerViewConfig;
-    this.forceViewToEnterPlannerMode = forceViewToEnterPlannerMode;
-    this.updatePlannerTrans = undefined;
-    this.deltaRotDeg = this.getPlannerViewConfig().deltaRotDeg2D;
-    this.plannerPaletteViewInfo = plannerPaletteViewInfo;
-    this.settingsState = settingsState;
-  }
-
-  /**
-   * Method used for initializing the 3D Grid. All necessary document Elements are created.
-   * @param updatePlannerTrans
-   */
-  return _createClass(Planner2DGrid, [{
-    key: "initialize",
-    value: function initialize(updatePlannerTrans) {
-      this.updatePlannerTrans = updatePlannerTrans;
-      if (!this.canvas) {
-        this.canvas = new fabric.Canvas(this.canvas2DGridID);
-      } else {
-        if (this.canvas) this.canvas.clear();
-      }
-    }
-
-    //-------------------------------------------------Clean Up---------------------------------------------------------------------------
-
-    /**
-     * Clears the 2D Canvas of fabric. It clears both, User Interface elements and Fabric Shapes.
-     */
-  }, {
-    key: "clearView",
-    value: function clearView() {
-      if (this.canvas) this.canvas.clear();
-    }
-  }, {
-    key: "handleRotation",
-    value:
-    /**
-     * This function is called when clicking on a rotation button. This class knows how big is the angle to rotate the element.
-     * It informs the plannerLogic to update the rotation of an element. The planner logic then informs the view with the new rotation value.
-     * @param elementId     The element ID of the current selected Element
-     * @param direction     The rotation direction
-     */
-
-    function handleRotation(setId, elementId, direction) {
-      this.updatePlannerTrans(setId, elementId, new Vector3(0, 0, 0), 0, this.deltaRotDeg, 'START', 0);
-      switch (direction) {
-        case 'CLOCKWISE':
-          this.updatePlannerTrans(setId, elementId, new Vector3(0, 0, 0), this.deltaRotDeg, this.deltaRotDeg, 'UPDATE', 0);
-          break;
-        case 'COUNTERCLOCKWISE':
-          this.updatePlannerTrans(setId, elementId, new Vector3(0, 0, 0), -this.deltaRotDeg, this.deltaRotDeg, 'UPDATE', 0);
-          break;
-      }
-      this.updatePlannerTrans(setId, elementId, new Vector3(0, 0, 0), 0, this.deltaRotDeg, 'END', 10);
-    }
-
-    /**
-     * This function updates all userInterface elments on the 2D Grid.
-     * The position Number is rendered, the dimension lines.
-     * Furthermore, the trash icon and rotation icons for the current selected elements are rendered.
-     * @param plannerElements
-     * @param selectedElements
-     * @param selectableElements
-     * @param setAllElementsSelectable
-     * @param selectedDP
-     */
-  }, {
-    key: "updateUI",
-    value: function updateUI(plannerUIHandler, allPlannerElementsDict, selectedElementsDict, selectableElementsDict, setAllElementsSelectable) {
-      var _this2 = this;
-      if (this.inDragMode) return;
-      plannerUIHandler.clear2D3DViewerUI();
-      LOG.debug('UpdateUI', 'Planner2DGrid');
-      allPlannerElementsDict.forEach(function (allPlannedElements, setId) {
-        for (var i = 0; i < allPlannedElements.length; i++) {
-          if (allPlannedElements[i].getSVGShapeOLF2D()) {
-            var plannerElement = allPlannedElements[i];
-            var elementIsSelected = false;
-            var elementIsSelectable = setAllElementsSelectable;
-            if (selectedElementsDict.has(setId)) {
-              var selectedElements = selectedElementsDict.get(setId);
-              for (var j = 0; j < selectedElements.length; j++) {
-                if (plannerElement.getElementId() == selectedElements[j].getElementId()) {
-                  elementIsSelected = true;
-                  break;
-                }
-              }
-            }
-            if (!elementIsSelected && !elementIsSelectable) {
-              if (selectableElementsDict.has(setId)) {
-                var selectableElements = selectableElementsDict.get(setId);
-                for (var j = 0; j < selectableElements.length; j++) {
-                  if (plannerElement.getElementId() == selectableElements[j].getElementId()) {
-                    elementIsSelectable = true;
-                    break;
-                  }
-                }
-              }
-            }
-            _this2.addPosNrUI(plannerUIHandler, plannerElement, elementIsSelected, elementIsSelectable);
-            _this2.addDPUI(plannerUIHandler, plannerElement);
-            if (elementIsSelected) {
-              if (['PLANNER', 'PRODUCTS', 'PROMOTED', 'PLANNER_2.0'].includes(_this2.getConfiguratorState())) {
-                _this2.addDelIcon(plannerUIHandler, plannerElement);
-                _this2.addRotIcon(plannerUIHandler, plannerElement);
-              }
-              _this2.addElemOutline(plannerUIHandler, plannerElement, true, false);
-            } else if (elementIsSelectable) {
-              _this2.addElemOutline(plannerUIHandler, plannerElement, false, true);
-            }
-            if (_this2.getConfiguratorState() == 'ACC_PLANNER' && (plannerElement.getIsDockedAccessoire() || plannerElement.getIsNotDockedAccessoire())) {
-              _this2.addDelIcon(plannerUIHandler, plannerElement);
-            }
-          }
-        }
-      });
-    }
-
-    /**
-     * Returns the world corner to use for positioning UI elements.
-     * @param plannerElement
-     * @param useOltCorner  When true: OLT corner (for outline/draggable bbox with OLT dimensions).
-     *                      When false: corner aligned with displayed shape (OLF when HasOLFPolygon, for posNr/trash/DPs).
-     */
-  }, {
-    key: "getWorldCorner",
-    value: function getWorldCorner(plannerElement, useOltCorner) {
-      if (useOltCorner && plannerElement.HasOLFPolygon) return plannerElement.WorldPosCornerIgnoreOLF;
-      if (!useOltCorner && plannerElement.HasOLFPolygon) return plannerElement.getWorldPosCornerOLF();
-      return plannerElement.getWorldPosCorner();
-    }
-
-    /**
-     * This function adds a full transparent outline div Element over the fabric elements.
-     * The function distinguishes between the outline of the current selected element and the rest.
-     * The outline of the current selected element is draggable and the outline of the rest is selectable.
-     * @param plannerElement    The current selected Element
-     * @param isSelected
-     */
-  }, {
-    key: "addElemOutline",
-    value: function addElemOutline(plannerUIHandler, plannerElement, isSelected, isSelectable) {
-      if (plannerElement.getIsDockedAccessoire() && this.getConfiguratorState() !== 'ACC_PLANNER') return;
-      var cornerO = this.getWorldCorner(plannerElement, true);
-      var outlineW = plannerElement.getWidth();
-      var outlineD = plannerElement.getDepth();
-      var screenPosElem = this.worldPosToScreenPos(new Vector2(cornerO.x, cornerO.z));
-      plannerUIHandler.addElemOutlineUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getRotDeg(), screenPosElem, new Vector2(Math.round(outlineW * this.currZoomFactor), Math.round(outlineD * this.currZoomFactor)), this.getIconState(isSelected, isSelectable), this.onDragStarted, this.onDragMove, this.onDragEnd, '2D');
-    }
-  }, {
-    key: "getIconState",
-    value: function getIconState(elementIsSelected, elementIsSelectable) {
-      if (elementIsSelected) return 'selected';
-      if (elementIsSelectable) return 'selectable';
-      return 'unselectable';
-    }
-
-    /**
-     * Computes the position of the position number of the element.
-     * @param plannerElement
-     * @param elementIsSelected
-     * @param elementIsSelectable
-     */
-  }, {
-    key: "addPosNrUI",
-    value: function addPosNrUI(viewPlannerUI, plannerElement, elementIsSelected, elementIsSelectable) {
-      var _viewPlannerUI$getPos;
-      if (plannerElement.getIsDockedAccessoire() && this.getConfiguratorState() !== 'ACC_PLANNER') return;
-      var configuration = this.getPlannerViewConfig();
-      var screenPosElem = new Vector2(0, 0, 'pixel');
-      if (configuration.posNumIcon == 'TOP_LEFT_BACK') {
-        var cornerP = this.getWorldCorner(plannerElement, false);
-        screenPosElem = this.worldPosToScreenPos(new Vector2(cornerP.x, cornerP.z));
-      }
-      viewPlannerUI.addPosNrUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getIsDockedAccessoire(), screenPosElem, plannerElement.getRotDeg(), this.currZoomFactor, (_viewPlannerUI$getPos = viewPlannerUI.getPosNrByBasketId(plannerElement.getBasketId())) === null || _viewPlannerUI$getPos === void 0 ? void 0 : _viewPlannerUI$getPos.toString(), this.getIconState(elementIsSelected, elementIsSelectable), '2D');
-    }
-
-    /**
-     *This function adds the trash symbol to the 2D planner
-     * @param plannerElement    The current selected elemet.
-     * @param screenPosPosNr    If the trash icon has to be placed over the posNum icon - this param holds all necessary information over the position and size of the posNum Icon
-     */
-  }, {
-    key: "addDelIcon",
-    value: function addDelIcon(plannerUIHandler, plannerElement) {
-      if (plannerElement.getIsDockedAccessoire() && this.getConfiguratorState() != 'ACC_PLANNER') return;
-      var screenPos = new Vector2(0, 0);
-      var cornerD = this.getWorldCorner(plannerElement, false);
-      var screenPosElem = this.worldPosToScreenPos(new Vector2(cornerD.x, cornerD.z));
-      switch (this.getPlannerViewConfig().posTrashRotIcon) {
-        case 'POSNUM_TOP':
-          screenPos = screenPosElem;
-          break;
-        case 'TOP_RIGHT_BACK':
-          var offsetVec = new Vector2(plannerElement.getWidth() * this.currZoomFactor, 0);
-          offsetVec = Vector2.rotateOrigin(offsetVec, plannerElement.getRotDeg());
-          screenPos = new Vector2(screenPosElem.x + offsetVec.x, screenPosElem.y + offsetVec.y);
-          break;
-      }
-      plannerUIHandler.addTrashIconUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getRotDeg(), screenPos, '2D');
-    }
-
-    /**
-     * This function is used to add the rotation icon to the 2D Grid.
-     * @param plannerElement    The current selected planner Element
-     * @param screenPosPosNr    The information of the position and size of the posNr Icon
-     * @param screenPosTrashIcon    The information about position and size of the trash Icon
-     */
-  }, {
-    key: "addRotIcon",
-    value: function addRotIcon(plannerUIHandler, plannerElement) {
-      if (!plannerElement.getIsDockedAccessoire() || plannerElement.getIsNotDockedAccessoire()) {
-        plannerUIHandler.addRotationIconUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getRotDeg(), 'RotateC', new Vector2(0, 0), '2D');
-        plannerUIHandler.addRotationIconUI(plannerElement.getSetId(), plannerElement.getElementId(), plannerElement.getRotDeg(), 'RotateCC', new Vector2(0, 0), '2D');
-      }
-    }
-
-    /**
-     * This function adds all Docking Point user interfaces to the 2D Grid
-     * @param plannerElement    The current selected planner element
-     * @param selectedDP        This parameter is null when no DP is selected. If a DP is selected it is rendered in another optic.
-     */
-  }, {
-    key: "addDPUI",
-    value: function addDPUI(plannerUIHandler, plannerElement) {
-      var allFreeDPs = plannerElement.getAllDockingPoints();
-      for (var i = 0; i < allFreeDPs.length; i++) {
-        var _this$plannerPaletteV;
-        var dp = allFreeDPs[i];
-        if ((_this$plannerPaletteV = this.plannerPaletteViewInfo) !== null && _this$plannerPaletteV !== void 0 && (_this$plannerPaletteV = _this$plannerPaletteV.plannerConfiguration.hideAVButtons) !== null && _this$plannerPaletteV !== void 0 && _this$plannerPaletteV.includes(dp.Type)) continue;
-        if (!dp.IsDocking && (dp.Type == 'AVR' || dp.Type == 'AVL')) {
-          var corner = this.getWorldCorner(plannerElement, false);
-          var screenPosDP = this.worldPosToScreenPos(new Vector2(corner.x + dp.LocalWorldPos.x, corner.z + dp.LocalWorldPos.z));
-          var rotCenter = this.worldPosToScreenPos(new Vector2(corner.x, corner.z));
-          screenPosDP = Vector2.rotateAround(screenPosDP, rotCenter, plannerElement.getRotDeg());
-          plannerUIHandler.addDP(plannerElement.getSetId(), plannerElement.getElementId(), dp.DpId, dp.Type, 'NOT_DOCKING', undefined, plannerElement.getRotDeg(), dp.RotDeg, screenPosDP, '2D');
-        } else if ((dp.Type == 'AVO' || dp.Type == 'AVU' || dp.Type == 'AVC' || dp.Type == 'AVN' || dp.Type == 'AVS') && (!dp.IsDocking || !plannerElement.getIsDockedAccessoire())) {
-          if (!['PLANNER', 'PRODUCTS', 'PROMOTED', 'PLANNER_2.0'].includes(this.getConfiguratorState())) continue;
-          var cornerAcc = this.getWorldCorner(plannerElement, false);
-          var _screenPosDP = this.worldPosToScreenPos(new Vector2(cornerAcc.x + dp.LocalWorldPos.x, cornerAcc.z + dp.LocalWorldPos.z));
-          var _rotCenter = this.worldPosToScreenPos(new Vector2(cornerAcc.x, cornerAcc.z));
-          _screenPosDP = Vector2.rotateAround(_screenPosDP, _rotCenter, plannerElement.getRotDeg());
-          plannerUIHandler.addDP(plannerElement.getSetId(), plannerElement.getElementId(), dp.DpId, 'ACC', dp.IsDocking ? 'DOCKING' : 'NOT_DOCKING', dp.OnElementId, plannerElement.getRotDeg(), dp.RotDeg, _screenPosDP, '2D');
-        }
-      }
-    }
-
-    /**
-     * This function computes the current zoom factor. This depends on the bounding box information of the current planning and its world position
-     * @param boundingBox       The bounding box that holds size and position information of the planning
-     */
-  }, {
-    key: "calcZoomFactor",
-    value: function calcZoomFactor(boundingBox) {
-      var factor = 1;
-      var aspectRatioBBox = boundingBox.size.x / boundingBox.size.z;
-      var height = this.canvas.getHeight() - 62;
-      var aspectRatioScreen = this.canvas.getWidth() / height;
-      if (aspectRatioBBox >= aspectRatioScreen) {
-        factor = this.canvas.getWidth() * this.borderFactorHori / boundingBox.size.x;
-        //Sometimes there are problems with the height when the screen is not high enough. This causes the dimension lines to overlap with the navigation icons on the ground.
-        //Therefore check if it is enough space up and down
-        LOG.debug('ATTENTION: ' + (height - boundingBox.size.z * DivaUtils.UnitRecalc / factor));
-      } else {
-        factor = height * this.borderFactorVert / boundingBox.size.z;
-      }
-
-      //Do not change the zoom if it only changes a little bit (e.g. when changing the size of an arm rest)
-      if (Math.abs(boundingBox.size.x - this.zoomFactorBBoxDimLastFrame.x) < 0.01 && Math.abs(boundingBox.size.z - this.zoomFactorBBoxDimLastFrame.y) < 0.01) this.currZoomFactor = factor;else if (Math.abs(boundingBox.size.z - this.zoomFactorBBoxDimLastFrame.y) > 30 || Math.abs(boundingBox.size.x - this.zoomFactorBBoxDimLastFrame.x) > 30) this.currZoomFactor = factor;
-      this.zoomFactorBBoxDimLastFrame = new Vector2(boundingBox.size.x, boundingBox.size.z);
-    }
-
-    /**
-     * This function corrects the background position of the 2D grid. It is important that the world point 0/0 is always on the same position on the 2D grid.
-     */
-  }, {
-    key: "correctBackgroundPos",
-    value: function correctBackgroundPos(plannerUIHandler) {
-      plannerUIHandler.update2DGridBackground({
-        zoom: this.currZoomFactor,
-        position: new Vector2(this.currCenteringOffset.x / this.currZoomFactor, this.currCenteringOffset.y / this.currZoomFactor)
-      });
-    }
-
-    /**
-     * This function computes the correct position on the screen based on a world position
-     * @param worldPos  The world Position in 2D
-     */
-  }, {
-    key: "worldPosToScreenPos",
-    value: function worldPosToScreenPos(worldPos) {
-      var screenPos = new Vector2(worldPos.x * this.currZoomFactor, worldPos.y * this.currZoomFactor);
-      screenPos.x += this.currCenteringOffset.x;
-      screenPos.y += this.currCenteringOffset.y;
-      return screenPos;
-    }
-
-    /**
-     * This function computes the dimension lines in 2D (horizontal and vertical)
-     * @param setGroup      Set Group that contains all fabricShapes
-     * @param boundingBox   Size and position information of the whole planning
-     */
-  }, {
-    key: "drawDimensions",
-    value: function drawDimensions(setGroup, boundingBox) {
-      if (boundingBox.size.x == 0 || boundingBox.size.z == 0) return;
-      var marginW = 25;
-      var marginH = 25;
-      var arrowSize = 10;
-      var angle = 0,
-        dimensionGroup = null,
-        line = null,
-        text = null;
-      var sizeWidth = setGroup.width * this.currZoomFactor;
-      var sizeHeight = setGroup.height * this.currZoomFactor;
-      //if(debugGrid) debug("size: " + size.x + "  " + size.y + "  " + size.z);
-
-      var textW = 0;
-      var textH = 0;
-      if (boundingBox.digitsAfterComma == 0 || boundingBox.digitsAfterComma == undefined) {
-        textW = Math.round(boundingBox.size.x);
-        textH = Math.round(boundingBox.size.z);
-      } else if (boundingBox.digitsAfterComma == 1) {
-        textW = Math.round(boundingBox.size.x * 10) / 10;
-        textH = Math.round(boundingBox.size.z * 10) / 10;
-      } else if (boundingBox.digitsAfterComma == 2) {
-        textW = Math.round(boundingBox.size.x * 100) / 100;
-        textH = Math.round(boundingBox.size.z * 100) / 100;
-      } else if (boundingBox.digitsAfterComma == 3) {
-        textW = Math.round(boundingBox.size.x * 1000) / 1000;
-        textH = Math.round(boundingBox.size.z * 1000) / 1000;
-      } else if (boundingBox.digitsAfterComma == 4) {
-        textW = Math.round(boundingBox.size.x * 10000) / 10000;
-        textH = Math.round(boundingBox.size.z * 10000) / 10000;
-      }
-      var lineOpts = {
-        originX: 'center',
-        originY: 'center',
-        stroke: 'grey',
-        strokeWidth: 1
-      };
-      dimensionGroup = new fabric.Group([], {
-        name: this.dimGroupHeightName,
-        originX: 'left',
-        originY: 'top',
-        width: 100,
-        angle: angle,
-        left: setGroup.left - 50,
-        //substract the width for correct visualization
-        top: setGroup.top,
-        height: sizeHeight,
-        hasControls: false,
-        hasBorders: false,
-        selectable: false,
-        lockRotation: true,
-        lockMovementX: true,
-        lockMovementY: true,
-        lockUniScaling: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        hoverCursor: 'default'
-      });
-      var line;
-      line = new fabric.Line([-marginH, -sizeHeight / 2, -marginH, sizeHeight / 2], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([-marginH, -sizeHeight / 2, -marginH + arrowSize / 2, -sizeHeight / 2 + arrowSize], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([-marginH, -sizeHeight / 2, -marginH - arrowSize / 2, -sizeHeight / 2 + arrowSize], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([-marginH, sizeHeight / 2, -marginH + arrowSize / 2, sizeHeight / 2 - arrowSize], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([-marginH, sizeHeight / 2, -marginH - arrowSize / 2, sizeHeight / 2 - arrowSize], lineOpts);
-      dimensionGroup.add(line);
-      text = new fabric.Text(textH + ' cm', {
-        stroke: 'grey',
-        angle: -90,
-        fontSize: 19,
-        fontFamily: 'sans-serif',
-        left: -marginH - 3,
-        top: 0,
-        originX: 'center',
-        originY: 'bottom'
-      });
-      dimensionGroup.add(text);
-      this.canvas.add(dimensionGroup);
-      dimensionGroup.bringToFront();
-      dimensionGroup = new fabric.Group([], {
-        name: this.dimGroupWidthName,
-        originX: 'left',
-        originY: 'top',
-        angle: angle,
-        left: setGroup.left,
-        top: setGroup.top + sizeHeight,
-        width: sizeWidth,
-        height: 100,
-        hasControls: false,
-        hasBorders: false,
-        selectable: false,
-        lockRotation: true,
-        lockMovementX: true,
-        lockMovementY: true,
-        lockUniScaling: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        hoverCursor: 'default'
-      });
-      line = new fabric.Line([-sizeWidth / 2, -marginW, sizeWidth / 2, -marginW], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([-sizeWidth / 2, -marginW, -sizeWidth / 2 + arrowSize, -marginW + arrowSize / 2], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([-sizeWidth / 2, -marginW, -sizeWidth / 2 + arrowSize, -marginW - arrowSize / 2], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([sizeWidth / 2, -marginW, sizeWidth / 2 - arrowSize, -marginW + arrowSize / 2], lineOpts);
-      dimensionGroup.add(line);
-      line = new fabric.Line([sizeWidth / 2, -marginW, sizeWidth / 2 - arrowSize, -marginW - arrowSize / 2], lineOpts);
-      dimensionGroup.add(line);
-      text = new fabric.Text(textW + ' cm', {
-        stroke: 'grey',
-        fontSize: 19,
-        fontFamily: 'sans-serif',
-        left: 0,
-        top: -marginW + 24,
-        originX: 'center',
-        originY: 'bottom'
-      });
-      dimensionGroup.add(text);
-      this.canvas.add(dimensionGroup);
-      dimensionGroup.bringToFront();
-    }
-
-    /**
-     * Builds the fabric shape of every element that carries SVG data but no shape yet.
-     * The engine clears the shape when an element's SVG is reloaded, so a missing shape means stale or never built.
-     */
-  }, {
-    key: "ensureSvgShapes",
-    value: (function () {
-      var _ensureSvgShapes = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(plannerElementsDict) {
-        var _this3 = this;
-        var pending;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              pending = [];
-              plannerElementsDict.forEach(function (plannerElements) {
-                var _iterator = _createForOfIteratorHelper(plannerElements),
-                  _step;
-                try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    var plannerElement = _step.value;
-                    if (plannerElement.getSVGShapeOLF2D() || !plannerElement.SvgData) continue;
-                    pending.push(_this3.buildSvgShape(plannerElement));
-                  }
-                } catch (err) {
-                  _iterator.e(err);
-                } finally {
-                  _iterator.f();
-                }
-              });
-              _context.next = 4;
-              return Promise.all(pending);
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      function ensureSvgShapes(_x) {
-        return _ensureSvgShapes.apply(this, arguments);
-      }
-      return ensureSvgShapes;
-    }()
-    /**
-     * Parses the element's SVG into a fabric group. MUST always settle: fabric silently drops its callback
-     * on a malformed shape, and this promise is awaited up into the basket save, which would then hang forever.
-     */
-    )
-  }, {
-    key: "buildSvgShape",
-    value: function buildSvgShape(plannerElement) {
-      var _this4 = this;
-      return new Promise(function (resolve) {
-        var settled = false;
-        var finish = function finish() {
-          if (settled) return;
-          settled = true;
-          clearTimeout(timeout);
-          resolve();
-        };
-        var timeout = setTimeout(function () {
-          LOG.warn("2D shape build timed out after ".concat(SVG_PARSE_TIMEOUT_MS, "ms \u2014 element rendered without its SVG shape"), 'Planner2DGrid');
-          finish();
-        }, SVG_PARSE_TIMEOUT_MS);
-        try {
-          fabric.loadSVGFromString(plannerElement.SvgData, function (objects, options) {
-            // A late callback must be ignored: the element may already carry a newer SVG, and a stale shape counts as present.
-            if (settled) return;
-            try {
-              _this4.applySvgShape(plannerElement, objects, options);
-            } catch (error) {
-              LOG.warn("2D shape build failed: ".concat(error instanceof Error ? error.message : String(error)), 'Planner2DGrid');
-            }
-            finish();
-          });
-        } catch (error) {
-          LOG.warn("2D shape parse threw: ".concat(error instanceof Error ? error.message : String(error)), 'Planner2DGrid');
-          finish();
-        }
-      });
-    }
-  }, {
-    key: "applySvgShape",
-    value: function applySvgShape(plannerElement, objects, options) {
-      for (var objNo = 0; objNo < objects.length; objNo++) {
-        var _object$id;
-        var object = objects[objNo];
-        object.setCoords();
-        var objID = (_object$id = object.id) === null || _object$id === void 0 ? void 0 : _object$id.toString();
-        if (objID && (objID.startsWith('OLF') || objID.startsWith('OLT'))) {
-          object.stroke = 'none';
-        }
-      }
-      var shape = fabric.util.groupSVGElements(objects, options);
-      shape.set({
-        originX: 'left',
-        originY: 'top',
-        lockRotation: true,
-        hasRotatingPoint: true,
-        lockUniScaling: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        scaleX: 1,
-        scaleY: 1,
-        left: 0,
-        top: 0
-      });
-      plannerElement.SvgShapeOLF2D = shape;
-    }
-
-    /**
-     * This function is called in order to render the whole canvas with all planner shapes. First it cleans everything and then it updates everything.
-     * @param plannerElements   All planner elements in the scene
-     * @param boundingBox       The size and position information of the current planning
-     */
-  }, {
-    key: "updatePlannerView",
-    value: (function () {
-      var _updatePlannerView = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(plannerUIHandler, plannerElementsDict, boundingBox) {
-        var _this5 = this;
-        var generation, curCanvasSize, allplannerSVGs, screenPosSet, setGroup, offsetX, offsetY;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              LOG.debug('UpdatePlanner2DGrid', 'Planner2DGrid');
-              generation = ++this.renderGeneration;
-              _context2.next = 4;
-              return this.ensureSvgShapes(plannerElementsDict);
-            case 4:
-              if (!(generation !== this.renderGeneration)) {
-                _context2.next = 6;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 6:
-              this.clearView();
-              curCanvasSize = plannerUIHandler.getCanvas2DGridSize();
-              if (this.canvas.getWidth() != curCanvasSize.x) this.canvas.setWidth(curCanvasSize.x);
-              if (this.canvas.getHeight() != curCanvasSize.y) this.canvas.setHeight(curCanvasSize.y);
-              if (!(plannerElementsDict.size == 0)) {
-                _context2.next = 12;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 12:
-              allplannerSVGs = [];
-              plannerElementsDict.forEach(function (plannerElements, setId) {
-                for (var i = 0; i < plannerElements.length; i++) {
-                  if (plannerElements[i].getSVGShapeOLF2D()) {
-                    var svgShape2D = plannerElements[i].getSVGShapeOLF2D();
-                    svgShape2D.scaleX = 1 / DivaUtils.UnitRecalc;
-                    svgShape2D.scaleY = 1 / DivaUtils.UnitRecalc;
-                    var corner = _this5.getWorldCorner(plannerElements[i], false);
-                    svgShape2D.left = corner.x - boundingBox.worldPos.x;
-                    svgShape2D.top = corner.z - boundingBox.worldPos.y;
-                    svgShape2D.angle = plannerElements[i].getRotDeg();
-                    allplannerSVGs.push(svgShape2D);
-                  }
-                }
-              });
-              this.calcZoomFactor(boundingBox);
-              if (this.currZoomFactor > this.maxZoom) this.currZoomFactor = this.maxZoom;
-              screenPosSet = new Vector2(boundingBox.worldPos.x * this.currZoomFactor, boundingBox.worldPos.y * this.currZoomFactor);
-              setGroup = new fabric.Group(allplannerSVGs, {
-                originX: 'left',
-                originY: 'top',
-                left: screenPosSet.x,
-                top: screenPosSet.y,
-                opacity: 1,
-                scaleX: this.currZoomFactor,
-                scaleY: this.currZoomFactor,
-                hasControls: false,
-                selectable: false,
-                hoverCursor: 'default'
-              });
-              offsetX = this.canvas.getWidth() / 2 - (setGroup.left + setGroup.width * this.currZoomFactor / 2);
-              offsetY = this.canvas.getHeight() / 2 - (setGroup.top + setGroup.height * this.currZoomFactor / 2);
-              this.currCenteringOffset = new Vector2(offsetX, offsetY);
-              setGroup.left += offsetX;
-              setGroup.top += offsetY;
-              this.canvas.add(setGroup);
-              setGroup.bringToFront();
-              this.correctBackgroundPos(plannerUIHandler);
-              this.drawDimensions(setGroup, boundingBox);
-              this.canvas.renderAll();
-            case 28:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function updatePlannerView(_x2, _x3, _x4) {
-        return _updatePlannerView.apply(this, arguments);
-      }
-      return updatePlannerView;
-    }())
-  }]);
-}();
-
-export { Planner2DGrid as default };