@crystaldesign/diva-web-planner-react 25.3.0-beta.4 → 25.3.0-beta.43

package/build/esm/index-929d738a.js

@@ -0,0 +1,553 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { a as usePlannerUIHandler, u as useViewHandler } from './index-22bc52cc.js';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import AVL from './index-b57f1933.js';
+import AVR from './index-b982b7ae.js';
+import Outline from './index-6c7ea049.js';
+import RotationClockwise from './index-faafdfdf.js';
+import RotationCounterClockwise from './index-9927cc17.js';
+import Trash from './index-a70e9aec.js';
+import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-1a252578.js';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import PosNr from './index-eaa5f37d.js';
+import BoxCopy from './index-5d3e98c9.js';
+import Move3DGrid from './index-5f0fd9bc.js';
+import Rotation3DGrid from './index-be643ecb.js';
+import { getLogger } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import ElementCopy from './index-3f1df536.js';
+import DistanceToGround from './index-fd1acb85.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/widget-contact-form';
+import 'classnames';
+import './index-73b1ffff.js';
+import 'react-draggable';
+
+function usePosNrPositioning(_ref) {
+  var _item$position$x, _item$position$y, _boundingState$width, _boundingState$height;
+  var posNrElement = _ref.posNrElement,
+    item = _ref.item;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = posNrElement === null || posNrElement === void 0 ? void 0 : posNrElement.getBoundingClientRect();
+  var left = (_item$position$x = item === null || item === void 0 ? void 0 : item.position.x) !== null && _item$position$x !== void 0 ? _item$position$x : 0;
+  var top = (_item$position$y = item === null || item === void 0 ? void 0 : item.position.y) !== null && _item$position$y !== void 0 ? _item$position$y : 0;
+  if (boundingState) {
+    var correctedPos = new Vector2(left, top);
+    var viewConfig = plannerUIHandler.getViewConfig();
+    var offsetVec = new Vector2(0, 0);
+    switch (item === null || item === void 0 ? void 0 : item.plannerMode) {
+      case '2D':
+        switch (viewConfig.iconPosition2DGrid) {
+          case 'BORDER':
+            offsetVec = new Vector2(boundingState.width, -boundingState.height * 0.1);
+            if (item !== null && item !== void 0 && item.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, item === null || item === void 0 ? void 0 : item.rotOfElement);
+            correctedPos = new Vector2(left + offsetVec.x, top + offsetVec.y, 'pixel');
+            break;
+          case 'OUTSIDE':
+            var distance = item !== null && item !== void 0 && item.iconZoom ? item.iconZoom : 1;
+            offsetVec = new Vector2(boundingState.width + distance, -boundingState.height / 2 - (boundingState.height / 2.5 - distance));
+            if (item !== null && item !== void 0 && item.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, item === null || item === void 0 ? void 0 : item.rotOfElement);
+            correctedPos = new Vector2(left + offsetVec.x, top + offsetVec.y, 'pixel');
+            break;
+        }
+        left = correctedPos.x;
+        top = correctedPos.y;
+        break;
+      case '3D':
+        top = 100 - top - 1;
+        left += 3;
+        if (left < 1) left = 1;
+        if (top < 1) top = 1;
+        break;
+    }
+  }
+  var posNrRect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left
+  };
+  return posNrRect;
+}
+
+var border$1 = 4;
+var collisionDistance$1 = 100; //indicates the minimal distance the icons posNr and trash can have without colliding. If the distance is smaller and the rotation should be placed like Pfister - set the rotation icon on top of the trash icon
+function useRotClockwisePositioning(_ref) {
+  var _rotItem$position$x, _rotItem$position$y, _boundingState$width, _boundingState$height;
+  var rotElement = _ref.rotElement,
+    posNrRect = _ref.posNrRect,
+    trashRect = _ref.trashRect,
+    rotItem = _ref.rotItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = rotElement === null || rotElement === void 0 ? void 0 : rotElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = (_rotItem$position$x = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.x) !== null && _rotItem$position$x !== void 0 ? _rotItem$position$x : 0;
+  var top = (_rotItem$position$y = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.y) !== null && _rotItem$position$y !== void 0 ? _rotItem$position$y : 0;
+  if (boundingState && posNrRect && trashRect) {
+    var offsetVec = new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        left = (posNrRect.left + trashRect.left) / 2;
+        top = (posNrRect.top + trashRect.top) / 2;
+        offsetVec = new Vector2(-boundingState.width, 0);
+        if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+        left += offsetVec.x;
+        top += offsetVec.y;
+        break;
+      case 'TOP_RIGHT_BACK':
+        var collisionDetected = Math.sqrt(Math.pow(posNrRect.left - trashRect.left, 2) + Math.pow(posNrRect.top - trashRect.top, 2)) <= collisionDistance$1;
+        if (collisionDetected) {
+          var delta = new Vector2(0, -boundingState.height - border$1);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement && rotItem.rotOfElement != 0) {
+            delta = Vector2.rotateOrigin(delta, rotItem.rotOfElement);
+          }
+          left = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.left) + delta.x;
+          top = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.top) + delta.y;
+        } else {
+          var _delta = new Vector2(-boundingState.width - border$1, 0);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement && rotItem.rotOfElement != 0) {
+            _delta = Vector2.rotateOrigin(_delta, rotItem.rotOfElement);
+          }
+          left = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.left) + _delta.x;
+          top = (trashRect === null || trashRect === void 0 ? void 0 : trashRect.top) + _delta.y;
+        }
+        break;
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left
+  };
+  return rect;
+}
+
+var border = 3;
+var collisionDistance = 100;
+function useRotCounterClockwisePositioning(_ref) {
+  var _rotItem$position$x, _rotItem$position$y, _boundingState$width, _boundingState$height;
+  var rotElement = _ref.rotElement,
+    posNrRect = _ref.posNrRect,
+    trashRect = _ref.trashRect,
+    rotClockRect = _ref.rotClockRect,
+    rotItem = _ref.rotItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = rotElement === null || rotElement === void 0 ? void 0 : rotElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = (_rotItem$position$x = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.x) !== null && _rotItem$position$x !== void 0 ? _rotItem$position$x : 0;
+  var top = (_rotItem$position$y = rotItem === null || rotItem === void 0 ? void 0 : rotItem.position.y) !== null && _rotItem$position$y !== void 0 ? _rotItem$position$y : 0;
+  if (boundingState && posNrRect && trashRect && rotClockRect) {
+    var offsetVec = new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        left = (posNrRect.left + trashRect.left) / 2;
+        top = (posNrRect.top + trashRect.top) / 2;
+        offsetVec = new Vector2(boundingState.width, 0);
+        if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+        left += offsetVec.x;
+        top += offsetVec.y;
+        break;
+      case 'TOP_RIGHT_BACK':
+        var collisionDetected = Math.sqrt(Math.pow(posNrRect.left - trashRect.left, 2) + Math.pow(posNrRect.top - trashRect.top, 2)) <= collisionDistance;
+        if (collisionDetected) {
+          offsetVec = new Vector2(0, -boundingState.height - border);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+          left = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.left) + offsetVec.x;
+          top = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.top) + offsetVec.y;
+        } else {
+          offsetVec = new Vector2(-boundingState.width - border, -0);
+          if (rotItem !== null && rotItem !== void 0 && rotItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, rotItem.rotOfElement);
+          left = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.left) + offsetVec.x;
+          top = (rotClockRect === null || rotClockRect === void 0 ? void 0 : rotClockRect.top) + offsetVec.y;
+        }
+        break;
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left
+  };
+  return rect;
+}
+
+function useTrashPositioning(_ref) {
+  var _trashItem$position$x, _trashItem$position$y, _boundingState$width, _boundingState$height;
+  var trashElement = _ref.trashElement,
+    posNrRect = _ref.posNrRect,
+    boxPlannerCopyLeftRect = _ref.boxPlannerCopyLeftRect,
+    boxPlannerCopyTopRect = _ref.boxPlannerCopyTopRect,
+    boxPlannerCopyRightRect = _ref.boxPlannerCopyRightRect,
+    trashItem = _ref.trashItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = trashElement === null || trashElement === void 0 ? void 0 : trashElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = (_trashItem$position$x = trashItem === null || trashItem === void 0 ? void 0 : trashItem.position.x) !== null && _trashItem$position$x !== void 0 ? _trashItem$position$x : 0;
+  var top = (_trashItem$position$y = trashItem === null || trashItem === void 0 ? void 0 : trashItem.position.y) !== null && _trashItem$position$y !== void 0 ? _trashItem$position$y : 0;
+  var leftCalc = '';
+  var topCalc = '';
+  var useCalc = false;
+  if (boundingState && posNrRect) {
+    var offsetVec = new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        // return new Vector2(screenPos.x, screenPos.y - trashBoundingState.height / 2, "pixel");
+        if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '2D') {
+          offsetVec = new Vector2(0, -posNrRect.height - boundingState.height / 2);
+          if (trashItem !== null && trashItem !== void 0 && trashItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, trashItem.rotOfElement);
+          left = posNrRect.left + offsetVec.x;
+          top = posNrRect.top + offsetVec.y;
+        } else if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '3D' || (trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == 'BOX') {
+          if (viewConfig.enableElementCopy) {
+            useCalc = true;
+            leftCalc = 'calc(' + posNrRect.left.toString() + '% - ' + posNrRect.width / 1.8 + 'px)';
+            // total space for trash is 35, 5 for offset up&down
+            if (posNrRect.top < 4) topCalc = 'calc(' + posNrRect.top + '% + 30px - var(--globalSize) / 2';else topCalc = 'calc(' + posNrRect.top + '% - (var(--globalSize) + 5px) / 2';
+          } else {
+            useCalc = true;
+            leftCalc = posNrRect.left.toString() + '%';
+            // space for trash is 30, 5 for offset up&down
+            if (posNrRect.top < 4) topCalc = 'calc(' + posNrRect.top + '% + 30px - var(--globalSize) / 2';else topCalc = 'calc(' + posNrRect.top + '% - (var(--globalSize) + 5px) / 2';
+          }
+        }
+        break;
+      case 'TOP_RIGHT_BACK':
+        if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '2D') {
+          var distance = trashItem !== null && trashItem !== void 0 && trashItem.iconZoom ? trashItem.iconZoom : 1;
+          offsetVec = new Vector2(-boundingState.width / 2 - (boundingState.width / 3 + distance), -boundingState.height / 2 - (boundingState.height / 3.7 - distance));
+          if (trashItem !== null && trashItem !== void 0 && trashItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, trashItem.rotOfElement);
+          left = left + offsetVec.x;
+          top = top + offsetVec.y;
+          var collisionDetected = Math.sqrt(Math.pow(posNrRect.left - left, 2) + Math.pow(posNrRect.top - top, 2)) <= posNrRect.width;
+          if (collisionDetected) {
+            offsetVec = new Vector2(posNrRect.width, 0);
+            if (trashItem !== null && trashItem !== void 0 && trashItem.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, trashItem.rotOfElement);
+            left = left + offsetVec.x;
+            top = top + offsetVec.y;
+          }
+        } else if ((trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == '3D' || (trashItem === null || trashItem === void 0 ? void 0 : trashItem.plannerMode) == 'BOX') {
+          if (boxPlannerCopyLeftRect || boxPlannerCopyRightRect || boxPlannerCopyTopRect) {
+            //if one of the bounding box Copy Icons is set -> check for collision with one copy element.
+            var collisionFound = false;
+            if (boxPlannerCopyLeftRect) {
+              var distanceLeft = Math.sqrt(Math.pow(boxPlannerCopyLeftRect.left - left, 2) + Math.pow(boxPlannerCopyLeftRect.top - top, 2));
+              if (distanceLeft < 9) {
+                top += 5;
+                collisionFound = true;
+              }
+              if (!collisionFound && boxPlannerCopyRightRect) {
+                var distanceRight = Math.sqrt(Math.pow(boxPlannerCopyRightRect.left - left, 2) + Math.pow(boxPlannerCopyRightRect.top - top, 2));
+                if (distanceRight < 9) {
+                  top += 5;
+                  collisionFound = true;
+                }
+              }
+              if (!collisionFound && boxPlannerCopyTopRect) {
+                var distanceTop = Math.sqrt(Math.pow(boxPlannerCopyTopRect.left - left, 2) + Math.pow(boxPlannerCopyTopRect.top - top, 2));
+                if (distanceTop < 9) {
+                  top += 5;
+                  collisionFound = true;
+                }
+              }
+            }
+          }
+          top = 100 - top - 2;
+          left -= 1;
+          if (left > 99) left = 99;
+          if (top < 1) top = 1;
+        }
+        break;
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left,
+    doUseCalc: useCalc,
+    topCalc: useCalc ? topCalc : undefined,
+    leftCalc: useCalc ? leftCalc : undefined
+  };
+  return rect;
+}
+
+var LOG = getLogger('Planner', 'CopyElementPositioning');
+function useCopyElementPositioning(_ref) {
+  var _boundingState$width, _boundingState$height;
+  var copyElement = _ref.copyElement,
+    posNrRect = _ref.posNrRect,
+    copyElementItem = _ref.copyElementItem;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = copyElement === null || copyElement === void 0 ? void 0 : copyElement.getBoundingClientRect();
+  var viewConfig = plannerUIHandler.getViewConfig();
+  var left = 0;
+  var top = 0;
+  var leftCalc = '';
+  var topCalc = '';
+  var useCalc = false;
+  if (boundingState && posNrRect) {
+    new Vector2(0, 0);
+    switch (viewConfig.posTrashRotIcon) {
+      case 'POSNUM_TOP':
+        // return new Vector2(screenPos.x, screenPos.y - trashBoundingState.height / 2, "pixel");
+        if ((copyElementItem === null || copyElementItem === void 0 ? void 0 : copyElementItem.plannerMode) == '3D') {
+          if (viewConfig.enableElementCopy) {
+            useCalc = true;
+            leftCalc = 'calc(' + posNrRect.left.toString() + '% + ' + posNrRect.width / 1.8 + 'px)';
+            topCalc = 'calc(' + posNrRect.top + '% - ' + (posNrRect.height + 2) + 'px)';
+          }
+        }
+        break;
+      case 'TOP_RIGHT_BACK':
+        LOG.error(new DivaError('Do implement copy Element for TOP_RIGHT_BACK Positioning', {
+          code: 'WC_0012'
+        }));
+    }
+  }
+  var rect = {
+    width: (_boundingState$width = boundingState === null || boundingState === void 0 ? void 0 : boundingState.width) !== null && _boundingState$width !== void 0 ? _boundingState$width : 0,
+    height: (_boundingState$height = boundingState === null || boundingState === void 0 ? void 0 : boundingState.height) !== null && _boundingState$height !== void 0 ? _boundingState$height : 0,
+    top: top,
+    left: left,
+    doUseCalc: useCalc,
+    topCalc: useCalc ? topCalc : undefined,
+    leftCalc: useCalc ? leftCalc : undefined
+  };
+  return rect;
+}
+
+/**
+ * render all Icons of one element
+ * @param  items Array of the items
+ */
+var ItemsContainer = function ItemsContainer(_ref) {
+  var items = _ref.items,
+    plannerUIProps = _ref.plannerUIProps;
+  var viewHandler = useViewHandler();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    posNrElement = _useState2[0],
+    setPosNrElement = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    avlElement = _useState4[0],
+    setAvlElement = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    avrElement = _useState6[0],
+    setAvrElement = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    boxPlannerCopyLeftElement = _useState8[0];
+    _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    boxPlannerCopyTopElement = _useState10[0];
+    _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    boxPlannerCopyRightElement = _useState12[0];
+    _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    trashElement = _useState14[0],
+    setTrashElement = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    copyElement = _useState16[0],
+    setCopyElement = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    rotClockwiseElement = _useState18[0],
+    setRotClockwiseElement = _useState18[1];
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2);
+    _useState20[0];
+    var setRotCounterClockwiseElement = _useState20[1];
+  var posNrItem = items.find(function (item) {
+    return item.type == 'PosNr';
+  });
+  var avlItem = items.find(function (item) {
+    return item.type == 'AVL';
+  });
+  var avrItem = items.find(function (item) {
+    return item.type == 'AVR';
+  });
+  var dpAccItems = [];
+  var distanceToGroundItems = [];
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].type == 'AccDP') {
+      dpAccItems.push(items[i]);
+    } else if (items[i].type == 'DistanceFromGround') {
+      distanceToGroundItems.push(items[i]);
+    }
+  }
+  var outlineItem = items.find(function (item) {
+    return item.type == 'Outline';
+  });
+  var trashItem = items.find(function (item) {
+    return item.type == 'TrashIcon';
+  });
+  var copyElementItem = items.find(function (item) {
+    return item.type == 'CopyElement';
+  });
+  var rotClockwiseItem = items.find(function (item) {
+    return item.type == 'RotateC';
+  });
+  var rotCounterClockwiseItem = items.find(function (item) {
+    return item.type == 'RotateCC';
+  });
+  var boxPlannerCopyLeftItem = items.find(function (item) {
+    return item.type == 'BoxCopyLeft';
+  });
+  var boxPlannerCopyTopItem = items.find(function (item) {
+    return item.type == 'BoxCopyTop';
+  });
+  var boxPlannerCopyRightItem = items.find(function (item) {
+    return item.type == 'BoxCopyRight';
+  });
+  var move3DGridItem = items.find(function (item) {
+    return item.type == 'Move3DGrid';
+  });
+  var rot3DGridItem = items.find(function (item) {
+    return item.type == 'Rot3DGrid';
+  });
+  var posNrRect = usePosNrPositioning({
+    item: posNrItem,
+    posNrElement: posNrElement
+  });
+  var avlRect = useDockingPointPositioning({
+    item: avlItem,
+    dpElement: avlElement
+  });
+  var avrRect = useDockingPointPositioning({
+    item: avrItem,
+    dpElement: avrElement
+  });
+  var boxPlannerCopyLeftRect = useDockingPointPositioning({
+    item: boxPlannerCopyLeftItem,
+    dpElement: boxPlannerCopyLeftElement
+  });
+  var boxPlannerCopyTopRect = useDockingPointPositioning({
+    item: boxPlannerCopyTopItem,
+    dpElement: boxPlannerCopyTopElement
+  });
+  var boxPlannerCopyRightRect = useDockingPointPositioning({
+    item: boxPlannerCopyRightItem,
+    dpElement: boxPlannerCopyRightElement
+  });
+  var trashRect = useTrashPositioning({
+    trashItem: trashItem,
+    posNrRect: posNrRect,
+    boxPlannerCopyLeftRect: boxPlannerCopyLeftRect,
+    boxPlannerCopyTopRect: boxPlannerCopyTopRect,
+    boxPlannerCopyRightRect: boxPlannerCopyRightRect,
+    trashElement: trashElement
+  });
+  var copyElementRect = useCopyElementPositioning({
+    copyElementItem: copyElementItem,
+    posNrRect: posNrRect,
+    copyElement: copyElement
+  });
+  var rotClockwiseRect = useRotClockwisePositioning({
+    rotItem: rotClockwiseItem,
+    posNrRect: posNrRect,
+    trashRect: trashRect,
+    rotElement: rotClockwiseElement
+  });
+  var rotCounterClockwiseRect = useRotCounterClockwisePositioning({
+    rotItem: rotClockwiseItem,
+    posNrRect: posNrRect,
+    trashRect: trashRect,
+    rotClockRect: rotClockwiseRect,
+    rotElement: rotClockwiseElement
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [posNrItem && /*#__PURE__*/jsx(PosNr, {
+      item: posNrItem,
+      rect: posNrRect,
+      onElement: setPosNrElement,
+      plannerUIProps: plannerUIProps,
+      hasTrash: !!trashItem
+    }), outlineItem && /*#__PURE__*/jsx(Outline, {
+      item: outlineItem,
+      plannerUIProps: plannerUIProps
+    }, outlineItem.key), avlItem && /*#__PURE__*/jsx(AVL, {
+      item: avlItem,
+      rect: avlRect,
+      onElement: setAvlElement,
+      plannerUIProps: plannerUIProps
+    }, avlItem === null || avlItem === void 0 ? void 0 : avlItem.key), avrItem && /*#__PURE__*/jsx(AVR, {
+      item: avrItem,
+      rect: avrRect,
+      onElement: setAvrElement,
+      plannerUIProps: plannerUIProps
+    }, avrItem === null || avrItem === void 0 ? void 0 : avrItem.key), boxPlannerCopyLeftItem && boxPlannerCopyRightItem && /*#__PURE__*/jsx(BoxCopy, {
+      item: boxPlannerCopyLeftItem,
+      rect: boxPlannerCopyLeftRect,
+      invertLeftRight: boxPlannerCopyRightRect.left < boxPlannerCopyLeftRect.left,
+      plannerUIProps: plannerUIProps
+    }, boxPlannerCopyLeftItem.key), boxPlannerCopyTopItem && /*#__PURE__*/jsx(BoxCopy, {
+      item: boxPlannerCopyTopItem,
+      rect: boxPlannerCopyTopRect,
+      invertLeftRight: false,
+      plannerUIProps: plannerUIProps
+    }, boxPlannerCopyTopItem.key), boxPlannerCopyRightItem && boxPlannerCopyLeftItem && /*#__PURE__*/jsx(BoxCopy, {
+      item: boxPlannerCopyRightItem,
+      rect: boxPlannerCopyRightRect,
+      invertLeftRight: boxPlannerCopyRightRect.left < boxPlannerCopyLeftRect.left,
+      plannerUIProps: plannerUIProps
+    }, boxPlannerCopyRightItem.key), trashItem && /*#__PURE__*/jsx(Trash, {
+      item: trashItem,
+      rect: trashRect,
+      onElement: setTrashElement,
+      plannerUIProps: plannerUIProps
+    }), copyElementItem && /*#__PURE__*/jsx(ElementCopy, {
+      item: copyElementItem,
+      rect: copyElementRect,
+      onElement: setCopyElement,
+      plannerUIProps: plannerUIProps
+    }), rotClockwiseItem && /*#__PURE__*/jsx(RotationClockwise, {
+      item: rotClockwiseItem,
+      rect: rotClockwiseRect,
+      onElement: setRotClockwiseElement,
+      plannerUIProps: plannerUIProps
+    }), rotCounterClockwiseItem && /*#__PURE__*/jsx(RotationCounterClockwise, {
+      item: rotCounterClockwiseItem,
+      rect: rotCounterClockwiseRect,
+      onElement: setRotCounterClockwiseElement,
+      plannerUIProps: plannerUIProps
+    }), dpAccItems.map(function (item, i) {
+      return /*#__PURE__*/jsx(ItemsDPAccContainer, {
+        item: item,
+        plannerUIProps: plannerUIProps
+      }, item.key);
+    }), viewHandler.productState.getDoShow3DDimensionLines() && distanceToGroundItems.map(function (item, i) {
+      return /*#__PURE__*/jsx(DistanceToGround, {
+        item: item,
+        plannerUIProps: plannerUIProps
+      }, item.key);
+    }), move3DGridItem && /*#__PURE__*/jsx(Move3DGrid, {
+      item: move3DGridItem,
+      plannerUIProps: plannerUIProps
+    }, move3DGridItem === null || move3DGridItem === void 0 ? void 0 : move3DGridItem.key), rot3DGridItem && /*#__PURE__*/jsx(Rotation3DGrid, {
+      item: rot3DGridItem,
+      plannerUIProps: plannerUIProps
+    }, rot3DGridItem === null || rot3DGridItem === void 0 ? void 0 : rot3DGridItem.key)]
+  });
+};
+var ItemsContainer$1 = observer(ItemsContainer);
+
+export { ItemsContainer$1 as default };

package/build/esm/index-9776ff9f.js

@@ -0,0 +1,114 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-22bc52cc.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import RalDropdownFilter from './index-ec1feb6e.js';
+import SlideFilter from './index-71baa7c6.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'react-dropdown';
+import 'classnames';
+import './index-d83850f6.js';
+import '@crystaldesign/content-box';
+import './index-70b4f016.js';
+
+var css_248z = "#wcConfigurator .Dropdown-root {\n  position: relative;\n}\n\n#wcConfigurator .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 4px 24px 4px 10px;\n  transition: all 200ms ease;\n}\n\n#wcConfigurator .Dropdown-control:hover {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n}\n\n#wcConfigurator .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 10px;\n  top: 14px;\n  width: 0;\n}\n\n#wcConfigurator .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n#wcConfigurator .Dropdown-menu {\n  background-color: white;\n  border: 1px solid #ccc;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n  box-sizing: border-box;\n  margin-top: -1px;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n#wcConfigurator .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n#wcConfigurator .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n#wcConfigurator .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n#wcConfigurator .Dropdown-option:hover {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n#wcConfigurator .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n#wcConfigurator .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
+styleInject(css_248z);
+
+var defaultColorFilters = [{
+  rgb: '#CC3300',
+  text: 'red'
+}, {
+  rgb: '#FF8C00',
+  text: 'orange'
+}, {
+  rgb: '#E1C699',
+  text: 'beige'
+}, {
+  rgb: '#330000',
+  text: 'brown'
+}, {
+  rgb: '#F0E68C',
+  text: 'yellow'
+}, {
+  rgb: '#006633',
+  text: 'green'
+}, {
+  rgb: '#3333FF',
+  text: 'blue'
+}, {
+  rgb: '#6633FF',
+  text: 'violet'
+}, {
+  rgb: '#CCCCCC',
+  text: 'grey'
+}, {
+  rgb: '#000000',
+  text: 'black'
+}, {
+  rgb: '#eeeeee',
+  text: 'white'
+}, {
+  rgb: '#eeeeee',
+  text: 'else'
+}];
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RalFilter = function RalFilter(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var palette = viewHandler.settingsState.itemPalettes.get(props.id);
+  var visibleColorItems = [];
+  var deleteCurValue = function deleteCurValue() {
+    viewHandler.paletteViewHandler.onSelectFilter(props.id, '', 'RAL');
+  };
+  useEffect(function () {
+    if (palette && !(palette !== null && palette !== void 0 && palette.deleteCurFilter)) palette.deleteCurFilter = deleteCurValue;
+  }, [palette]);
+  palette === null || palette === void 0 || palette.groups.map(function (group) {
+    return group.items.map(function (itemP) {
+      var _item$colorGroups;
+      var item = itemP;
+      if (!((_item$colorGroups = item.colorGroups1) !== null && _item$colorGroups !== void 0 && _item$colorGroups.length)) return;
+      var colorGroups = [item.colorGroups1, item.colorGroups2, item.colorGroups3];
+      var _loop = function _loop() {
+        var groups = colorGroups[i];
+        var group = defaultColorFilters.find(function (group) {
+          return group.text === groups;
+        });
+        if (group && !visibleColorItems.find(function (i) {
+          return i.text === groups;
+        })) {
+          visibleColorItems.push(group);
+        }
+      };
+      for (var i = 0; i < colorGroups.length; i++) {
+        _loop();
+      }
+    });
+  });
+  if (viewHandler.uiState.isInMobileView && viewHandler.getViewConfig().ralFilter) return /*#__PURE__*/jsx(SlideFilter, _objectSpread({
+    deleteCurValue: deleteCurValue,
+    visibleColorItems: visibleColorItems
+  }, props));else return /*#__PURE__*/jsx(RalDropdownFilter, _objectSpread({
+    deleteCurValue: deleteCurValue,
+    visibleColorItems: visibleColorItems
+  }, props));
+};
+var RALFilter = observer(RalFilter);
+
+export { RALFilter as default };