@crystaldesign/diva-web-planner-react 24.12.0 → 24.12.1

package/build/esm/index-5b845a91.js

@@ -0,0 +1,88 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import 'react';
+import classnames from 'classnames';
+import Option from './index-f74d8f61.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import InfoIcon from './index-55f945c0.js';
+import { jsx, jsxs } 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/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import './index.module-d4c0130b.js';
+import './index.module-cb0c03a2.js';
+import './index-783af724.js';
+import 'react-laag';
+import './index-e4dd8413.js';
+import './index-2b309493.js';
+
+var container = "container-GW-AX";
+var sel = "sel-jrQj2";
+var titleContainer = "title-container-W41FT";
+var title = "title-FojkZ";
+var subTitle = "sub-title-RJrKO";
+var ccConstructionWarning = "ccConstructionWarning-8h9KH";
+var css_248z = ".container-GW-AX {\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  border: 2px solid #e8e9ed;\r\n  border-radius: 6px;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n}\r\n\r\n.container-GW-AX.sel-jrQj2 {\r\n  border: 2px solid var(--secondaryColor);\r\n}\r\n\r\n.container-GW-AX img {\r\n  width: 100%;\r\n\r\n  -o-object-fit: contain;\r\n\r\n     object-fit: contain;\r\n}\r\n\r\n.title-container-W41FT {\r\n  height: 30px;\r\n  color: #4b4b4b;\r\n  background: #f2f2f2;\r\n}\r\n.title-FojkZ,\r\n.sub-title-RJrKO {\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  height: 1.2em;\r\n  text-align: right;\r\n  margin: 0 3px;\r\n}\r\n\r\n.title-FojkZ {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  font-weight: 600;\r\n  font-size: 13px;\r\n  line-height: 15px;\r\n}\r\n\r\n.sub-title-RJrKO {\r\n  -webkit-line-clamp: 1;\r\n  white-space: nowrap;\r\n  font-size: 9px;\r\n  line-height: 12px;\r\n  font-weight: 300;\r\n}\r\n\r\n.ccConstructionWarning-8h9KH {\r\n  display: block;\r\n  height: 30px;\r\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 64 64%22%3E%3Cdefs%3E%3ClinearGradient gradientTransform%3D%22matrix(1.31117 0 0 1.30239 737.39 159.91)%22 gradientUnits%3D%22userSpaceOnUse%22 id%3D%220%22 y2%3D%22-.599%22 x2%3D%220%22 y1%3D%2245.47%22%3E%3Cstop stop-color%3D%22%23ffc515%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%23ffd55b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg transform%3D%22matrix(.85714 0 0 .85714-627.02-130.8)%22%3E%3Cpath d%3D%22m797.94 212.01l-25.607-48c-.736-1.333-2.068-2.074-3.551-2.074-1.483 0-2.822.889-3.569 2.222l-25.417 48c-.598 1.185-.605 2.815.132 4 .737 1.185 1.921 1.778 3.404 1.778h51.02c1.483 0 2.821-.741 3.42-1.926.747-1.185.753-2.667.165-4%22 fill%3D%22url(%230)%22%2F%3E%3Cpath d%3D%22m-26.309 18.07c-1.18 0-2.135.968-2.135 2.129v12.82c0 1.176.948 2.129 2.135 2.129 1.183 0 2.135-.968 2.135-2.129v-12.82c0-1.176-.946-2.129-2.135-2.129zm0 21.348c-1.18 0-2.135.954-2.135 2.135 0 1.18.954 2.135 2.135 2.135 1.181 0 2.135-.954 2.135-2.135 0-1.18-.952-2.135-2.135-2.135z%22 transform%3D%22matrix(1.05196 0 0 1.05196 796.53 161.87)%22 fill%3D%22%23000%22 stroke%3D%22%2340330d%22 fill-opacity%3D%22.75%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\r\n  width: 30px;\r\n  background-repeat: no-repeat;\r\n  background-size: contain;\r\n  padding: 0;\r\n  position: absolute;\r\n  z-index: 888;\r\n  top: 0;\r\n  right: 0;\r\n}\r\n";
+styleInject(css_248z);
+
+var OptionJungle = function OptionJungle(_ref) {
+  var _item$text, _item$text2;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+    _ref.type;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (item.layout == 'TEXT' || !viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(Option, {
+    item: item,
+    paletteId: paletteId
+  });
+  var header = (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.split(/,(.+)/)[0];
+  var subText = (_item$text2 = item.text) === null || _item$text2 === void 0 ? void 0 : _item$text2.split(/,(.+)/)[1];
+  if (!subText) {
+    var _item$text3, _item$text4;
+    header = (_item$text3 = item.text) === null || _item$text3 === void 0 ? void 0 : _item$text3.split(/\((.+)/)[0];
+    subText = (_item$text4 = item.text) === null || _item$text4 === void 0 || (_item$text4 = _item$text4.split(/\((.+)/)[1]) === null || _item$text4 === void 0 ? void 0 : _item$text4.replace(')', '');
+  }
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    id: item.codex,
+    className: classnames(container, item.sel ? sel : undefined),
+    onClick: onClick,
+    children: [/*#__PURE__*/jsx("img", {
+      style: {
+        maxHeight: viewHandler.settingsState.settingsWidth / 3
+      },
+      src: item.image,
+      title: item.text + (item.freeText ? item.freeText : '')
+    }), /*#__PURE__*/jsxs("div", {
+      className: titleContainer,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(title),
+        children: header
+      }), subText && /*#__PURE__*/jsx("div", {
+        className: classnames(subTitle),
+        children: subText
+      })]
+    }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+      item: item
+    }), item.disabledByConstructionRule && /*#__PURE__*/jsx("div", {
+      className: classnames(ccConstructionWarning),
+      title: t('configurator.' + item.disabledByConstructionRule)
+    })]
+  });
+};
+
+export { OptionJungle as default };

package/build/esm/index-5cb4c76e.js

@@ -0,0 +1,156 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { u as useViewHandler } from './index-945074f1.js';
+import { useState, useEffect } from 'react';
+import { n as notExpanded } from './index.module-94a16855.js';
+import { s as scrollable, h as header, t as table, c as column } from './index.module-d4c830a3.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var _excluded = ["onMouseDown"];
+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 PartList = function PartList(_ref) {
+  var onMouseDown = _ref.onMouseDown,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  useEffect(function () {
+    var asyncFunct = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return DivaUtils.Sleep(1000);
+            case 2:
+              setRerender(!rerender);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function asyncFunct() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    asyncFunct();
+  }, [viewHandler.settingsState.configChanged]);
+  var partlistArticles = [];
+  for (var basketId in articles) {
+    partlistArticles = _getPartlistArticles(articles[basketId], partlistArticles);
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      onMouseDown: onMouseDown,
+      children: "St\xFCcklisten \xDCbersicht"
+    }), /*#__PURE__*/jsxs("table", {
+      className: table,
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsxs("tr", {
+          className: column,
+          children: [/*#__PURE__*/jsx("th", {
+            children: "Name"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Artikle Nr."
+          }), /*#__PURE__*/jsx("th", {
+            children: "CatalogCodex"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Preis"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Nr"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Prefix"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Menge"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Rule"
+          })]
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        children: Object.values(partlistArticles).map(function (partListArticle, index) {
+          var _partListArticle$pric;
+          return /*#__PURE__*/jsxs("tr", {
+            className: column,
+            children: [/*#__PURE__*/jsxs("th", {
+              children: [" ", partListArticle.name]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [partListArticle.articleCodex, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [partListArticle.catalogCodex, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [" ", (_partListArticle$pric = partListArticle.price) !== null && _partListArticle$pric !== void 0 ? _partListArticle$pric : 0, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [" ", partListArticle.retailArticleNr, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [partListArticle.retailPrefix, " "]
+            }), /*#__PURE__*/jsxs("th", {
+              children: [partListArticle.quantity, " "]
+            }), /*#__PURE__*/jsx("th", {
+              children: partListArticle.rule
+            })]
+          }, partListArticle.articleCodex + partListArticle.retailArticleNr);
+        })
+      })]
+    })]
+  }));
+};
+var _getPartlistArticles = function getPartlistArticles(article, partlistArticles) {
+  for (var key in article.partlistArticles) {
+    var partlistArticle = article.partlistArticles[key];
+    if (partlistArticle.hasPartlistArticle) {
+      partlistArticles.push(getPartlsitArticleObj(partlistArticle, true));
+      partlistArticles = _getPartlistArticles(partlistArticle, partlistArticles);
+      continue;
+    }
+    var found = false;
+    for (var i = 0; i < partlistArticles.length; i++) {
+      if (partlistArticle.articleCodex === partlistArticles[i].articleCodex && partlistArticle.retailArticleNr === partlistArticles[i].retailArticleNr && partlistArticle.retailPrefix === partlistArticles[i].retailPrefix && partlistArticle.catalogCodex === partlistArticles[i].catalogCodex) {
+        found = true;
+        partlistArticles[i].quantity += partlistArticle.quantity;
+        break;
+      }
+    }
+    if (!found) {
+      partlistArticles.push(getPartlsitArticleObj(partlistArticle));
+    }
+  }
+  return partlistArticles;
+};
+var getPartlsitArticleObj = function getPartlsitArticleObj(partlistArticle, isWrapper) {
+  var _partlistArticle$reta, _partlistArticle$reta2, _partlistArticle$rule, _partlistArticle$arti, _partlistArticle$cata;
+  return {
+    name: (isWrapper ? 'Hülse: ' : '') + partlistArticle.posNr + ' ' + partlistArticle.name,
+    price: isWrapper ? '---' : partlistArticle.price,
+    retailArticleNr: (_partlistArticle$reta = partlistArticle.retailArticleNr) !== null && _partlistArticle$reta !== void 0 ? _partlistArticle$reta : '',
+    retailPrefix: (_partlistArticle$reta2 = partlistArticle.retailPrefix) !== null && _partlistArticle$reta2 !== void 0 ? _partlistArticle$reta2 : '',
+    quantity: partlistArticle.quantity,
+    ruleDesc: (_partlistArticle$rule = partlistArticle.ruleDesc) !== null && _partlistArticle$rule !== void 0 ? _partlistArticle$rule : '',
+    articleCodex: (_partlistArticle$arti = partlistArticle.articleCodex) !== null && _partlistArticle$arti !== void 0 ? _partlistArticle$arti : '',
+    catalogCodex: (_partlistArticle$cata = partlistArticle.catalogCodex) !== null && _partlistArticle$cata !== void 0 ? _partlistArticle$cata : '',
+    codex: partlistArticle.articleCodex,
+    rule: partlistArticle.partlistRule && partlistArticle.partListParentArticle ? DivaUtils.getRuleDescription(partlistArticle.partlistRule, partlistArticle.partListParentArticle.articleOptionStates, partlistArticle.set.api.ruleDescSeperator()) : ''
+  };
+};
+var PartListTable = observer(PartList);
+
+export { PartListTable as default };

package/build/esm/index-5ef7c748.js

@@ -0,0 +1,78 @@
+import { s as styleInject } from './index-945074f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
+import { jsx, jsxs, Fragment } 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/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var row = "row-aKbIG";
+var rowPaddingTop = "row-padding-top-SRH2s";
+var rowPaddingTopArticle = "row-padding-top-article-Iwelk";
+var columnLeft = "column-left-jSCha";
+var columnRight = "column-right-rkkBn";
+var columnRightRed = "column-right-red-Lmt65";
+var columnOption = "column-option-2v7Hm";
+var columnPartlist = "column-partlist-0LS9Z";
+var codexes = "codexes--r2fL";
+var tabGroup = "tab-group-an6TP";
+var css_248z = ".row-aKbIG {\r\n  height: -moz-fit-content;\r\n  height: fit-content;\r\n  position: relative;\r\n  font-weight: 300;\r\n  padding-right: 0.9375rem;\r\n  padding-left: 0.9375rem;\r\n  display: flow-root;\r\n  color: #404040;\r\n}\r\n.row-padding-top-SRH2s {\r\n  padding-top: 8px;\r\n}\r\n\r\n.row-padding-top-article-Iwelk {\r\n  padding-top: 1rem;\r\n}\r\n\r\n.column-left-jSCha {\r\n  float: left;\r\n}\r\n.column-left-jSCha a {\r\n  color: var(--primaryColor);\r\n}\r\n.column-right-rkkBn {\r\n  float: right;\r\n  text-align: right;\r\n}\r\n\r\n.column-right-red-Lmt65 {\r\n  color: var(--primaryColor);\r\n}\r\n.column-option-2v7Hm {\r\n  font-size: 0.8125rem;\r\n  font-weight: normal;\r\n  line-height: 1.1;\r\n}\r\n.column-partlist-0LS9Z {\r\n  max-width: 70%;\r\n}\r\n\r\n.codexes--r2fL {\r\n  font-style: italic;\r\n}\r\n\r\n.tab-group-an6TP {\r\n  border-bottom: 1px solid var(--primaryColor);\r\n  font-size: 1.125rem;\r\n  margin: 1.5rem 0 0 0;\r\n  color: var(--primaryColor);\r\n  padding: 0;\r\n  text-align: left;\r\n  text-transform: capitalize;\r\n  font-weight: 300;\r\n}\r\n";
+styleInject(css_248z);
+
+var OptiontreeSerious = function OptiontreeSerious(_ref) {
+  var itemP = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var item = itemP;
+  if (item.isTabGroup) {
+    return /*#__PURE__*/jsx("div", {
+      className: tabGroup,
+      children: item.title
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [item.isPartlistArticle && /*#__PURE__*/jsxs("div", {
+      className: classnames(row, rowPaddingTopArticle),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames(columnPartlist, columnLeft),
+        children: item.title
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnRight),
+        children: (item.quantity && item.quantity > 1 ? '(x' + item.quantity + ') ' : '') + (!hidePrices && item.price ? DivaUtils.formatPrice(item.price) : '')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(row, item.isPartlistArticle ? rowPaddingTop : undefined),
+      children: [/*#__PURE__*/jsxs("span", {
+        className: classnames(columnOption, columnLeft),
+        children: [item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            children: item.size && item.size !== '' ? t('configurator.size') : item.description
+          }), ": ", item.size]
+        }), !item.isPartlistArticle && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("a", {
+            children: item.title
+          }), item.description && ': ' + item.description]
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: classnames(columnOption, columnRight, columnRightRed, codexes),
+        children: item.codex
+      })]
+    })]
+  });
+};
+var index = observer(OptiontreeSerious);
+
+export { index as default };

package/build/esm/index-5f65411c.js

@@ -0,0 +1,83 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { a as usePlannerUIHandler } from './index-945074f1.js';
+import { useState } from 'react';
+import DPACC from './index-3a96f3a0.js';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function useDockingPointPositioning(_ref) {
+  var _item$position$x, _item$position$y, _boundingState$width, _boundingState$height;
+  var dpElement = _ref.dpElement,
+    item = _ref.item;
+  var plannerUIHandler = usePlannerUIHandler();
+  var boundingState = dpElement === null || dpElement === void 0 ? void 0 : dpElement.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 && item) {
+    var correctedPos = new Vector2(left, top);
+    var viewConfig = plannerUIHandler.getViewConfig();
+    var offsetVec = new Vector2(0, 0);
+    if ((item === null || item === void 0 ? void 0 : item.type) == 'AVL' || (item === null || item === void 0 ? void 0 : item.type) == 'AVR') {
+      switch (item.plannerMode) {
+        case '2D':
+          switch (viewConfig.posDPIcon2D) {
+            case 'CORNER':
+              //Standard
+              //  offsetVec = new Vector2(-boundingState, -boundingState.height / 2);
+              // if (item?.rotOfElement) offsetVec = Vector2.rotateOrigin(offsetVec, item?.rotOfElement);
+              // correctedPos = new Vector2(left + offsetVec.x, top + offsetVec.y, "pixel");
+
+              break;
+            case 'SIDE_TOP':
+              //Pfister
+              if ((item === null || item === void 0 ? void 0 : item.type) == 'AVL') {
+                offsetVec = new Vector2(-boundingState.width, 0);
+                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;
+          }
+          break;
+      }
+    } else if ((item === null || item === void 0 ? void 0 : item.type) == 'AccDP' && (item === null || item === void 0 ? void 0 : item.plannerMode) == '3D') {
+      correctedPos.y = 100 - correctedPos.y;
+    } else if (item.type == 'BoxCopyLeft' || (item === null || item === void 0 ? void 0 : item.type) == 'BoxCopyRight' || (item === null || item === void 0 ? void 0 : item.type) == 'BoxCopyTop') ;
+    left = correctedPos.x;
+    top = correctedPos.y;
+  }
+  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 ItemsDPAccContainer = function ItemsDPAccContainer(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dpAccElement = _useState2[0],
+    setDpAccElement = _useState2[1];
+  var dpAccRect = useDockingPointPositioning({
+    item: item,
+    dpElement: dpAccElement
+  });
+  return /*#__PURE__*/jsx(Fragment, {
+    children: item && /*#__PURE__*/jsx(DPACC, {
+      item: item,
+      rect: dpAccRect,
+      onElement: setDpAccElement,
+      plannerUIProps: plannerUIProps
+    }, item === null || item === void 0 ? void 0 : item.key)
+  });
+};
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ItemsDPAccContainer
+});
+
+export { ItemsDPAccContainer as I, index as i, useDockingPointPositioning as u };

package/build/esm/index-60737a14.js

@@ -0,0 +1,128 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler, a as usePlannerUIHandler } from './index-945074f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { jsx, Fragment } 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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var mouseDownDetected = false;
+var polygonSelected = false;
+var Outline3D = function Outline3D(_ref) {
+  var items = _ref.items,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var viewHandler = useViewHandler();
+  var plannerUIHandler = usePlannerUIHandler();
+  if (viewHandler.uiState.isLoading) return /*#__PURE__*/jsx(Fragment, {});
+  var on3DPlannerBGClick = function on3DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+  };
+  var renderPolygon = function renderPolygon(item) {
+    switch (item.elemState) {
+      case 'selectable':
+        return /*#__PURE__*/jsx("polygon", {
+          onMouseUp: function onMouseUp(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction;
+              (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onTouchEnd: function onTouchEnd(e) {
+            polygonSelected = true;
+            if (!isDragging) {
+              var _item$clickFunction2;
+              (_item$clickFunction2 = item.clickFunction) === null || _item$clickFunction2 === void 0 || _item$clickFunction2.call(item, item.setId, Number(item.elementId));
+            }
+          },
+          onMouseEnter: function onMouseEnter() {
+            if (!isDragging) plannerUIHandler.updateOnHoverOutline3D(true, item, 'PosNr');
+          },
+          onMouseLeave: function onMouseLeave() {
+            plannerUIHandler.updateOnHoverOutline3D(false, item, 'PosNr');
+          },
+          points: item.polygonPoints,
+          style: {
+            zIndex: item.zIndex
+          },
+          className: classnames(item.type == 'Outline3D' ? plannerUIProps.classes.outline.outline3D.outlinePolygon : undefined, item.type == 'Outline3D_Contour' ? plannerUIProps.classes.outline.outline3D.outlinePolygonContours : undefined)
+        }, item.key.toString());
+      case 'selected':
+        if (item.type == 'Outline3D_Contour') {
+          return /*#__PURE__*/jsx("polygon", {
+            points: item.polygonPoints,
+            style: {
+              zIndex: item.zIndex
+            },
+            className: classnames(plannerUIProps.classes.outline.outline3D.outlinePolygonContoursSel)
+          }, item.key.toString());
+        }
+    }
+    return '';
+  };
+  return /*#__PURE__*/jsx("svg", {
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onTouchStart: function onTouchStart(e) {
+      mouseDownDetected = true;
+      polygonSelected = false;
+      setIsDragging(false);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onTouchMove: function onTouchMove(e) {
+      if ((mouseDownDetected || viewHandler.viewPlannerHandler.getPlanner3DGridIsInTransformMode()) && !isDragging) {
+        setIsDragging(true);
+      }
+    },
+    onMouseUp: function onMouseUp(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!isDragging && !polygonSelected) {
+        on3DPlannerBGClick();
+      }
+      mouseDownDetected = false;
+    },
+    ref: function ref(_ref2) {
+      viewHandler.productState.setPlanner3DImageSvgArea(_ref2);
+      //viewHandler.viewModel.htmlElementRefs.planner3DImageSvgArea = ref as any;
+    },
+    style: {
+      zIndex: 100,
+      touchAction: 'pan-x pan-y',
+      height: '100%'
+    },
+    className: classnames(plannerUIProps.classes.outline.outline3D.outlineSVG),
+    children: items.map(function (item, i) {
+      return renderPolygon(item);
+    })
+  }, items.length > 0 ? items[0].key : Math.random());
+};
+var Outline3D$1 = observer(Outline3D);
+
+export { Outline3D$1 as default };