@crystaldesign/diva-web-planner-react 24.9.0-beta.8 → 24.9.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 6096.diva-web-planner-react.umd.min.js.LICENSE.txt */
|
|
2
|
-
(self.webpackChunkCrystaldesignDivaWebPlannerReact=self.webpackChunkCrystaldesignDivaWebPlannerReact||[]).push([[6096],{72919:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function classNames(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var r=typeof n;if("string"===r||"number"===r)e.push(n);else if(Array.isArray(n)){if(n.length){var a=classNames.apply(null,n);a&&e.push(a)}}else if("object"===r)if(n.toString===Object.prototype.toString)for(var c in n)o.call(n,c)&&n[c]&&e.push(c);else e.push(n.toString())}}return e.join(" ")}e.exports?(classNames.default=classNames,e.exports=classNames):void 0===(n=function(){return classNames}.apply(t,[]))||(e.exports=n)}()},9006:(e,t,n)=>{"use strict";n.d(t,{A:()=>b});var o=n(88893),r=n(26376),a=n(41594),c=n.n(a),i=n(82246),s=n(79383);!function(){const e={STAGE:"production"};try{if(s)return s.env=Object.assign({},s.env),void Object.assign(s.env,e)}catch(e){}globalThis.process={env:e}}();var l="cube-face-obv-V";function clearTextSelection(){var e,t,n;if(window.getSelection)if(null!==(e=window.getSelection())&&void 0!==e&&e.empty)null===(n=window.getSelection())||void 0===n||n.empty();else if(null!==(t=window.getSelection())&&void 0!==t&&t.removeAllRanges){var o;null===(o=window.getSelection())||void 0===o||o.removeAllRanges()}}function ownKeys$3(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$3(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$3(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$3(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function isNumericalObject(e){return"number"==typeof e[Object.keys(e)[0]]}!function styleInject(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(":root {\n --faceTransparency: 0.7;\n --size: 120px;\n --fontSize: 1.4rem;\n}\n\n.control-element-container-SW7qx,\n.control-element-container-SW7qx * {\n box-sizing: border-box;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-user-select: none;\n -webkit-user-drag: none;\n -webkit-app-region: no-drag;\n cursor: default;\n opacity: 1;\n}\n\n.hidden-Tqm-e {\n opacity: 0;\n transition: opacity calc(var(--autoHideDuration) / 2);\n transition-delay: calc(var(--autoHideDuration) / 2);\n}\n\n.control-element-container-SW7qx {\n width: 100%;\n height: 100%;\n perspective: 400px;\n}\n\n.control-element-WF71u {\n width: 120px;\n width: var(--size);\n height: 120px;\n height: var(--size);\n position: relative;\n transform-style: preserve-3d;\n transform: scale(var(--zoomFactor)) translateZ(-100px)\n rotate3d(1, 0, 0, var(--rotX)) rotate3d(0, 1, 0, var(--rotY));\n}\n\n.control-element-WF71u .cube-face-obv-V {\n outline: 1px solid transparent;\n}\n\n.cube-face-obv-V {\n position: absolute;\n width: 120px;\n width: var(--size);\n height: 120px;\n height: var(--size);\n border: 2px solid black;\n line-height: 120px;\n line-height: var(--size);\n color: rgba(255, 255, 255, 0.4);\n text-align: center;\n text-transform: uppercase;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: sans-serif;\n font-size: 1.4rem;\n font-size: var(--fontSize);\n transition: background 0.2s;\n}\n\n.cube-face-obv-V:hover {\n --faceTransparency: 1;\n cursor: pointer;\n}\n\n.cube-face-front-Frhsh {\n background: rgba(0, 0, 0, 0.7);\n background: rgba(0, 0, 0, var(--faceTransparency));\n transform: rotateY(0deg) translateZ(calc(120px / 2));\n transform: rotateY(0deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-right-LeBsy {\n background: rgba(200, 200, 200, 0.7);\n background: rgba(200, 200, 200, var(--faceTransparency));\n transform: rotateY(90deg) translateZ(calc(120px / 2));\n transform: rotateY(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-back-o1-8s {\n background: rgba(0, 0, 0, 0.7);\n background: rgba(0, 0, 0, var(--faceTransparency));\n transform: rotateY(180deg) translateZ(calc(120px / 2));\n transform: rotateY(180deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-left-DFZf- {\n background: rgba(200, 200, 200, 0.7);\n background: rgba(200, 200, 200, var(--faceTransparency));\n transform: rotateY(-90deg) translateZ(calc(120px / 2));\n transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-top-Hw8SM {\n background: rgba(100, 100, 100, 0.7);\n background: rgba(100, 100, 100, var(--faceTransparency));\n transform: rotateX(90deg) translateZ(calc(120px / 2));\n transform: rotateX(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-bottom-NYTq6 {\n background: rgba(100, 100, 100, 0.7);\n background: rgba(100, 100, 100, var(--faceTransparency));\n transform: rotateX(-90deg) translateZ(calc(120px / 2));\n transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));\n}\n\n.rotate-icon-8ePmj {\n --rotateIconSize: calc(var(--size) / 3);\n position: absolute;\n width: var(--rotateIconSize);\n}\n\n/* .rotate-icon img {\n width: 100%;\n height: auto;\n}\n\n.rotate-icon-horizontal {\n top: calc(var(--size) / 2 * -1);\n left: calc(50% - var(--rotateIconSize) / 2);\n transform: translateZ(-100px) rotate3d(1, 0, 0, 50deg);\n}\n\n.rotate-icon-vertical {\n top: calc(var(--size) / 2 - var(--rotateIconSize) / 2);\n left: calc(var(--size) / 2 * -1);\n transform: translateZ(-100px) rotate3d(0, 1, 0, 80deg);\n} */\n");const u={top:{rotX:-90,rotY:0},back:{rotX:0,rotY:180},left:{rotX:0,rotY:90},right:{rotX:0,rotY:270},front:{rotX:0,rotY:0}};function animateToRotation({targetRotation:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){!function animateObjectValues({to:e,from:t,duration:n,onAnimate:o,onAnimationEnd:r=(()=>{})}){if(!isNumericalObject(e)||!isNumericalObject(t))return;const a=Object.keys(e).reduce(((n,o)=>{const r=e[o]-t[o];return _objectSpread$3(_objectSpread$3({},n),{},{[o]:r})}),{}),c=Object.keys(e).reduce(((e,t)=>{const o=a[t]/n;return _objectSpread$3(_objectSpread$3({},e),{},{[t]:o})}),{});let i=0,s=!1;const animate=(a=Date.now())=>{i||(i=a);const l=a-i,u=Object.keys(e).reduce(((e,n)=>{let o=t[n]+c[n]*l;return _objectSpread$3(_objectSpread$3({},e),{},{[n]:o})}),{});o(u),l<n&&!s?window.setTimeout((()=>animate()),1e3/60):(o(e),r(e))};return animate(),()=>{s=!0}}({from:t,to:e,duration:500,onAnimate:n,onAnimationEnd:o})}function rotateToCubeSide({side:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){animateToRotation({currentRotation:t,onRotationChange:n,onRotationEnd:o,targetRotation:u[e]})}function ownKeys$2(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$2(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$2(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$2(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function normalizeRotationFormat(e){return function isInvertedRotation(e){return void 0!==e.horizontal}(e)?function convertFromInverted(e){return{rotY:e.horizontal,rotX:-1*e.vertical}}(e):e}function toCubeRotation(e){return _objectSpread$2(_objectSpread$2({},e),function convertToInverted(e){return{horizontal:e.rotY,vertical:-1*e.rotX}}(e))}function sanitizeRotation({rotX:e,rotY:t}){let n=e,o=t;return n>0&&(n=0),n<-90&&(n=-90),o>360&&(o-=360),o<0&&(o=360+o),{rotX:n,rotY:o}}function calculateElementRotation({startPos:e,currentPos:t,elemWidth:n}){const o=function calcAngleDegrees({x:e,y:t}){return 180*Math.atan2(t,e)/Math.PI}({x:e.x-t.x,y:e.y-t.y}),r=Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2),a=210/n*r;let c=0,i=0,s="+x";return o<45&&o>=-45&&(i=-1*a,s="-y"),o<-45&&o>=-135&&(c=-1*a,s="-x"),(o<-135&&o>=-180||o>=135&&o<=180)&&(i=a,s="+y"),o>=45&&o<135&&(c=a,s="+x"),{rotX:c,rotY:i,quadrant:s}}function normalizePointerEvent(e){if(function isTouchEvent(e){return!!e.touches}(e)){const t=e.touches.item(0)||e.changedTouches.item(0);return t||{clientX:0,clientY:0,target:null}}return e}function ownKeys$1(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$1(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$1(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$1(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function calcTwoFingerDistance(e){return Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY)}function usePinch({interactionElement:e,interactionMoveElement:t=document.body,minZoom:n=-10,maxZoom:o=10,onZoomEnd:r=(()=>{}),zoomFactorResetDelay:c=500,maxCssScale:i=3,minCssScale:s=0,disableDefaultScrollBehaviour:l}){const[u,d]=(0,a.useState)({absoluteZoom:0,relativeZoom:0}),[b,m]=(0,a.useState)(!1),validateZoomFactor=e=>{let t=e;return t=Math.min(o,t),t=Math.max(n,t),t};function resetRelativeZoom(){window.setTimeout((()=>{d((e=>_objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:0})))}),c)}(0,a.useEffect)((()=>{let n=!1;if(!e||!t)return;const pxToZoomFactor=t=>{const{width:n}=e.getBoundingClientRect();return 5/n*t};let o;function onZoomEndEvent(){d((e=>{let t=validateZoomFactor(e.absoluteZoom+e.relativeZoom);return t=function snapZoomValue(e){return.5*Math.round(e/.5)}(t),0!==e.relativeZoom&&window.requestAnimationFrame((()=>{o&&r({relativeZoom:e.relativeZoom,absoluteZoom:t,zoomCenter:o})})),_objectSpread$1(_objectSpread$1({},e),{},{absoluteZoom:t})})),n||resetRelativeZoom()}let a,c=0;function onTouchStart(t){clearTextSelection(),2===t.touches.length?(c=calcTwoFingerDistance(t),e&&(o=function calcTwoFingerCenter(e,t){const{top:n,left:o}=t.getBoundingClientRect();return{x:(e.touches[0].pageX+e.touches[1].pageX)/2-o,y:(e.touches[0].pageY+e.touches[1].pageY)/2-n}}(t,e))):c=0,l&&t.preventDefault()}function onTouchMove(e){if(!c)return;m(!0);const t=calcTwoFingerDistance(e),n=t-c;c=t,d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(n));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}function onTouchEnd(e){e.touches.length<2&&(c=0,m(!1),onZoomEndEvent())}function onMouseWheel(t){if(!e)return;l&&t.preventDefault(),m(!0),void 0!==a&&window.clearTimeout(a),a=window.setTimeout((()=>{n||(m(!1),onZoomEndEvent())}),400);const r=-1*t.deltaY,{top:c,left:i}=e.getBoundingClientRect();o={x:t.pageX-i,y:t.pageY-c},d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(r));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}return t.addEventListener("touchmove",onTouchMove),e.addEventListener("touchstart",onTouchStart),t.addEventListener("touchend",onTouchEnd),e.addEventListener("wheel",onMouseWheel),()=>{n=!0,t.removeEventListener("touchmove",onTouchMove),e.removeEventListener("touchstart",onTouchStart),t.removeEventListener("touchend",onTouchEnd),e.removeEventListener("wheel",onMouseWheel)}}),[e,n,o,t,c,l]);return{zoom:_objectSpread$1(_objectSpread$1({},u),{},{relativeZoomCssScaleFactor:(e=>{let t=1;return t=e<0?1-Math.abs(e/n):e/o*(i-1)+1,Math.max(t,s)})(u.relativeZoom)}),isPinching:b,setAbsoluteZoomFromOutside:function setAbsoluteZoomFromOutside(t){const n=validateZoomFactor(t);d((t=>{const o=null==e?void 0:e.getBoundingClientRect(),a=o?o.width/2:0,c=o?o.height/2:0;return window.requestAnimationFrame((()=>{r({relativeZoom:0,absoluteZoom:n,zoomCenter:{x:a,y:c}}),resetRelativeZoom()})),_objectSpread$1(_objectSpread$1({},t),{},{relativeZoom:n-t.absoluteZoom,absoluteZoom:n})}))}}}const d=["hiddenState","interactionElement","interactionMoveElement","size","onRotationChange","onZoomChange","classnames","initialRotation","cubeFaceChildren","autoHide"];function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const b=c().forwardRef(((e,t)=>{let{hiddenState:n,interactionElement:o=document.body,interactionMoveElement:c=document.body,size:s="130px",onRotationChange:u=(()=>{}),onZoomChange:b=(()=>{}),classnames:m,initialRotation:f={rotX:0,rotY:0},cubeFaceChildren:p={back:"hinten",bottom:"",front:"vorne",left:"links",right:"rechts",top:"oben"},autoHide:v}=e,h=(0,r.A)(e,d);const[g,y]=(0,a.useState)(sanitizeRotation(normalizeRotationFormat(f))),[j,w]=(0,a.useState)(0),onRotationEndCallback=e=>{y(e),u(toCubeRotation(e))},{zoom:S,isPinching:O,setAbsoluteZoomFromOutside:E}=usePinch(_objectSpread({interactionElement:o,interactionMoveElement:c,onZoomEnd:b},h));(0,a.useImperativeHandle)(t,(()=>({getAbsoluteZoom:()=>S.absoluteZoom,setZoom:E,rotateTo:e=>{const t=normalizeRotationFormat(e);e.smooth?animateToRotation({currentRotation:g,onRotationChange:y,onRotationEnd:onRotationEndCallback,targetRotation:t}):onRotationEndCallback(t)}})),[g,y,S]);const R=void 0!==v,[x,Z]=null!=n?n:(0,a.useState)(R),C=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"back",onRotationEnd:onRotationEndCallback})}),[g,y]),T=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"front",onRotationEnd:onRotationEndCallback})}),[g,y]),$=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"left",onRotationEnd:onRotationEndCallback})}),[g,y]),z=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"right",onRotationEnd:onRotationEndCallback})}),[g,y]),k=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"top",onRotationEnd:onRotationEndCallback})}),[g,y]);(0,a.useEffect)((()=>{if(O)return void Z(!1);if(Z(!0),!o||!c)return;let e,t=!1;const{width:n}=o.getBoundingClientRect(),onPointerDown=n=>{clearTextSelection(),t=!0,Z(!1);const o=normalizePointerEvent(n);e=o},onPointerMove=o=>{t&&Z(!1);const r=normalizePointerEvent(o);if(e){const t=calculateElementRotation({startPos:{x:e.clientX,y:e.clientY},currentPos:{x:r.clientX,y:r.clientY},elemWidth:n});e=r,y((e=>{const n=sanitizeRotation({rotX:e.rotX+t.rotX,rotY:e.rotY+t.rotY});return _objectSpread(_objectSpread({},t),n)}))}},onInteractionEnd=n=>{t&&(Z(!0),e=void 0,y((e=>{const t=function snapRotation({rotX:e,rotY:t}){return{rotX:5*Math.round(e/5),rotY:5*Math.round(t/5)}}(e);let n=_objectSpread(_objectSpread({},e),t);return window.requestAnimationFrame((()=>{const e=toCubeRotation(n);u(e)})),n}))),t=!1};return o.addEventListener("touchstart",onPointerDown),o.addEventListener("mousedown",onPointerDown),c.addEventListener("touchmove",onPointerMove),c.addEventListener("mousemove",onPointerMove),c.addEventListener("touchend",onInteractionEnd),c.addEventListener("mouseup",onInteractionEnd),()=>{setTimeout((()=>{o.removeEventListener("touchstart",onPointerDown),o.removeEventListener("mousedown",onPointerDown),c.removeEventListener("touchmove",onPointerMove),c.removeEventListener("touchend",onInteractionEnd),c.removeEventListener("mousemove",onPointerMove),c.removeEventListener("mouseup",onInteractionEnd)}),0)}}),[o,c,O]);const P=(0,a.useCallback)((()=>{Z(!1)}),[Z]),F=(0,a.useCallback)((()=>{Z(!0)}),[Z]);return(0,i.jsx)("div",{className:"control-element-container-SW7qx"+(x&&R?" hidden-Tqm-e":""),style:{"--size":s,"--zoomFactor":S.relativeZoomCssScaleFactor,"--rotY":`${g.rotY}deg`,"--rotX":`${g.rotX}deg`,"--fontSize":j/4.4+"px","--autoHideDuration":(null!=v?v:0)/1e3+"s"},onMouseEnter:P,onMouseLeave:F,children:(0,i.jsxs)("div",{className:"control-element-WF71u",children:[(0,i.jsx)("div",{onClick:T,className:`${l} cube-face-front-Frhsh ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceFront}`,ref:e=>{if(e&&0===j){const{height:t}=e.getBoundingClientRect();w(t)}},children:p.front}),(0,i.jsx)("div",{onClick:C,className:`${l} cube-face-back-o1-8s ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBack}`,children:p.back}),(0,i.jsx)("div",{onClick:z,className:`${l} cube-face-right-LeBsy ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceRight}`,children:p.right}),(0,i.jsx)("div",{onClick:$,className:`${l} cube-face-left-DFZf- ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceLeft}`,children:p.left}),(0,i.jsx)("div",{onClick:k,className:`${l} cube-face-top-Hw8SM ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceTop}`,children:p.top}),(0,i.jsx)("div",{className:`${l} cube-face-bottom-NYTq6 ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBottom}`,children:p.bottom})]})})}))}}]);
|
|
2
|
+
(self.webpackChunkCrystaldesignDivaWebPlannerReact=self.webpackChunkCrystaldesignDivaWebPlannerReact||[]).push([[6096],{72919:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function classNames(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var r=typeof n;if("string"===r||"number"===r)e.push(n);else if(Array.isArray(n)){if(n.length){var a=classNames.apply(null,n);a&&e.push(a)}}else if("object"===r)if(n.toString===Object.prototype.toString)for(var c in n)o.call(n,c)&&n[c]&&e.push(c);else e.push(n.toString())}}return e.join(" ")}e.exports?(classNames.default=classNames,e.exports=classNames):void 0===(n=function(){return classNames}.apply(t,[]))||(e.exports=n)}()},9006:(e,t,n)=>{"use strict";n.d(t,{A:()=>b});var o=n(88893),r=n(26376),a=n(41594),c=n.n(a),i=n(82246),s=n(79383);!function(){const e={STAGE:"production"};try{if(s)return s.env=Object.assign({},s.env),void Object.assign(s.env,e)}catch(e){}globalThis.process={env:e}}();var l="cube-face-obv-V";function clearTextSelection(){var e,t,n;if(window.getSelection)if(null!==(e=window.getSelection())&&void 0!==e&&e.empty)null===(n=window.getSelection())||void 0===n||n.empty();else if(null!==(t=window.getSelection())&&void 0!==t&&t.removeAllRanges){var o;null===(o=window.getSelection())||void 0===o||o.removeAllRanges()}}function ownKeys$3(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$3(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$3(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$3(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function isNumericalObject(e){return"number"==typeof e[Object.keys(e)[0]]}!function styleInject(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(":root {\n --faceTransparency: 0.7;\n --size: 120px;\n --fontSize: 1.4rem;\n}\n\n.control-element-container-SW7qx,\n.control-element-container-SW7qx * {\n box-sizing: border-box;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-user-select: none;\n -webkit-user-drag: none;\n -webkit-app-region: no-drag;\n cursor: default;\n opacity: 1;\n}\n\n.hidden-Tqm-e {\n opacity: 0;\n transition: opacity calc(var(--autoHideDuration) / 2);\n transition-delay: calc(var(--autoHideDuration) / 2);\n}\n\n.control-element-container-SW7qx {\n width: 100%;\n height: 100%;\n perspective: 400px;\n}\n\n.control-element-WF71u {\n width: 120px;\n width: var(--size);\n height: 120px;\n height: var(--size);\n position: relative;\n transform-style: preserve-3d;\n transform: scale(var(--zoomFactor)) translateZ(-100px)\n rotate3d(1, 0, 0, var(--rotX)) rotate3d(0, 1, 0, var(--rotY));\n}\n\n.control-element-WF71u .cube-face-obv-V {\n outline: 1px solid transparent;\n}\n\n.cube-face-obv-V {\n position: absolute;\n width: 120px;\n width: var(--size);\n height: 120px;\n height: var(--size);\n border: 2px solid black;\n line-height: 120px;\n line-height: var(--size);\n color: rgba(255, 255, 255, 0.4);\n text-align: center;\n text-transform: uppercase;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: sans-serif;\n font-size: 1.4rem;\n font-size: var(--fontSize);\n transition: background 0.2s;\n}\n\n.cube-face-obv-V:hover {\n --faceTransparency: 1;\n cursor: pointer;\n}\n\n.cube-face-front-Frhsh {\n background: rgba(0, 0, 0, 0.7);\n background: rgba(0, 0, 0, var(--faceTransparency));\n transform: rotateY(0deg) translateZ(calc(120px / 2));\n transform: rotateY(0deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-right-LeBsy {\n background: rgba(200, 200, 200, 0.7);\n background: rgba(200, 200, 200, var(--faceTransparency));\n transform: rotateY(90deg) translateZ(calc(120px / 2));\n transform: rotateY(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-back-o1-8s {\n background: rgba(0, 0, 0, 0.7);\n background: rgba(0, 0, 0, var(--faceTransparency));\n transform: rotateY(180deg) translateZ(calc(120px / 2));\n transform: rotateY(180deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-left-DFZf- {\n background: rgba(200, 200, 200, 0.7);\n background: rgba(200, 200, 200, var(--faceTransparency));\n transform: rotateY(-90deg) translateZ(calc(120px / 2));\n transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-top-Hw8SM {\n background: rgba(100, 100, 100, 0.7);\n background: rgba(100, 100, 100, var(--faceTransparency));\n transform: rotateX(90deg) translateZ(calc(120px / 2));\n transform: rotateX(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-bottom-NYTq6 {\n background: rgba(100, 100, 100, 0.7);\n background: rgba(100, 100, 100, var(--faceTransparency));\n transform: rotateX(-90deg) translateZ(calc(120px / 2));\n transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));\n}\n\n.rotate-icon-8ePmj {\n --rotateIconSize: calc(var(--size) / 3);\n position: absolute;\n width: var(--rotateIconSize);\n}\n\n/* .rotate-icon img {\n width: 100%;\n height: auto;\n}\n\n.rotate-icon-horizontal {\n top: calc(var(--size) / 2 * -1);\n left: calc(50% - var(--rotateIconSize) / 2);\n transform: translateZ(-100px) rotate3d(1, 0, 0, 50deg);\n}\n\n.rotate-icon-vertical {\n top: calc(var(--size) / 2 - var(--rotateIconSize) / 2);\n left: calc(var(--size) / 2 * -1);\n transform: translateZ(-100px) rotate3d(0, 1, 0, 80deg);\n} */\n");const u={top:{rotX:-90,rotY:0},back:{rotX:0,rotY:180},left:{rotX:0,rotY:90},right:{rotX:0,rotY:270},front:{rotX:0,rotY:0}};function animateToRotation({targetRotation:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){!function animateObjectValues({to:e,from:t,duration:n,onAnimate:o,onAnimationEnd:r=()=>{}}){if(!isNumericalObject(e)||!isNumericalObject(t))return;const a=Object.keys(e).reduce(((n,o)=>{const r=e[o]-t[o];return _objectSpread$3(_objectSpread$3({},n),{},{[o]:r})}),{}),c=Object.keys(e).reduce(((e,t)=>{const o=a[t]/n;return _objectSpread$3(_objectSpread$3({},e),{},{[t]:o})}),{});let i=0,s=!1;const animate=(a=Date.now())=>{i||(i=a);const l=a-i,u=Object.keys(e).reduce(((e,n)=>{let o=t[n]+c[n]*l;return _objectSpread$3(_objectSpread$3({},e),{},{[n]:o})}),{});o(u),l<n&&!s?window.setTimeout((()=>animate()),1e3/60):(o(e),r(e))};return animate(),()=>{s=!0}}({from:t,to:e,duration:500,onAnimate:n,onAnimationEnd:o})}function rotateToCubeSide({side:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){animateToRotation({currentRotation:t,onRotationChange:n,onRotationEnd:o,targetRotation:u[e]})}function ownKeys$2(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$2(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$2(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$2(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function normalizeRotationFormat(e){return function isInvertedRotation(e){return void 0!==e.horizontal}(e)?function convertFromInverted(e){return{rotY:e.horizontal,rotX:-1*e.vertical}}(e):e}function toCubeRotation(e){return _objectSpread$2(_objectSpread$2({},e),function convertToInverted(e){return{horizontal:e.rotY,vertical:-1*e.rotX}}(e))}function sanitizeRotation({rotX:e,rotY:t}){let n=e,o=t;return n>0&&(n=0),n<-90&&(n=-90),o>360&&(o-=360),o<0&&(o=360+o),{rotX:n,rotY:o}}function calculateElementRotation({startPos:e,currentPos:t,elemWidth:n}){const o=function calcAngleDegrees({x:e,y:t}){return 180*Math.atan2(t,e)/Math.PI}({x:e.x-t.x,y:e.y-t.y}),r=Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2),a=210/n*r;let c=0,i=0,s="+x";return o<45&&o>=-45&&(i=-1*a,s="-y"),o<-45&&o>=-135&&(c=-1*a,s="-x"),(o<-135&&o>=-180||o>=135&&o<=180)&&(i=a,s="+y"),o>=45&&o<135&&(c=a,s="+x"),{rotX:c,rotY:i,quadrant:s}}function normalizePointerEvent(e){if(function isTouchEvent(e){return!!e.touches}(e)){const t=e.touches.item(0)||e.changedTouches.item(0);return t||{clientX:0,clientY:0,target:null}}return e}function ownKeys$1(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$1(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$1(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$1(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function calcTwoFingerDistance(e){return Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY)}function usePinch({interactionElement:e,interactionMoveElement:t=document.body,minZoom:n=-10,maxZoom:o=10,onZoomEnd:r=()=>{},zoomFactorResetDelay:c=500,maxCssScale:i=3,minCssScale:s=0,disableDefaultScrollBehaviour:l}){const[u,d]=(0,a.useState)({absoluteZoom:0,relativeZoom:0}),[b,m]=(0,a.useState)(!1),validateZoomFactor=e=>{let t=e;return t=Math.min(o,t),t=Math.max(n,t),t};function resetRelativeZoom(){window.setTimeout((()=>{d((e=>_objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:0})))}),c)}(0,a.useEffect)((()=>{let n=!1;if(!e||!t)return;const pxToZoomFactor=t=>{const{width:n}=e.getBoundingClientRect();return 5/n*t};let o;function onZoomEndEvent(){d((e=>{let t=validateZoomFactor(e.absoluteZoom+e.relativeZoom);return t=function snapZoomValue(e){return.5*Math.round(e/.5)}(t),0!==e.relativeZoom&&window.requestAnimationFrame((()=>{o&&r({relativeZoom:e.relativeZoom,absoluteZoom:t,zoomCenter:o})})),_objectSpread$1(_objectSpread$1({},e),{},{absoluteZoom:t})})),n||resetRelativeZoom()}let a,c=0;function onTouchStart(t){clearTextSelection(),2===t.touches.length?(c=calcTwoFingerDistance(t),e&&(o=function calcTwoFingerCenter(e,t){const{top:n,left:o}=t.getBoundingClientRect();return{x:(e.touches[0].pageX+e.touches[1].pageX)/2-o,y:(e.touches[0].pageY+e.touches[1].pageY)/2-n}}(t,e))):c=0,l&&t.preventDefault()}function onTouchMove(e){if(!c)return;m(!0);const t=calcTwoFingerDistance(e),n=t-c;c=t,d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(n));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}function onTouchEnd(e){e.touches.length<2&&(c=0,m(!1),onZoomEndEvent())}function onMouseWheel(t){if(!e)return;l&&t.preventDefault(),m(!0),void 0!==a&&window.clearTimeout(a),a=window.setTimeout((()=>{n||(m(!1),onZoomEndEvent())}),400);const r=-1*t.deltaY,{top:c,left:i}=e.getBoundingClientRect();o={x:t.pageX-i,y:t.pageY-c},d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(r));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}return t.addEventListener("touchmove",onTouchMove),e.addEventListener("touchstart",onTouchStart),t.addEventListener("touchend",onTouchEnd),e.addEventListener("wheel",onMouseWheel),()=>{n=!0,t.removeEventListener("touchmove",onTouchMove),e.removeEventListener("touchstart",onTouchStart),t.removeEventListener("touchend",onTouchEnd),e.removeEventListener("wheel",onMouseWheel)}}),[e,n,o,t,c,l]);return{zoom:_objectSpread$1(_objectSpread$1({},u),{},{relativeZoomCssScaleFactor:(e=>{let t=1;return t=e<0?1-Math.abs(e/n):e/o*(i-1)+1,Math.max(t,s)})(u.relativeZoom)}),isPinching:b,setAbsoluteZoomFromOutside:function setAbsoluteZoomFromOutside(t){const n=validateZoomFactor(t);d((t=>{const o=null==e?void 0:e.getBoundingClientRect(),a=o?o.width/2:0,c=o?o.height/2:0;return window.requestAnimationFrame((()=>{r({relativeZoom:0,absoluteZoom:n,zoomCenter:{x:a,y:c}}),resetRelativeZoom()})),_objectSpread$1(_objectSpread$1({},t),{},{relativeZoom:n-t.absoluteZoom,absoluteZoom:n})}))}}}const d=["hiddenState","interactionElement","interactionMoveElement","size","onRotationChange","onZoomChange","classnames","initialRotation","cubeFaceChildren","autoHide"];function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(n),!0).forEach((function(t){(0,o.A)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const b=c().forwardRef(((e,t)=>{let{hiddenState:n,interactionElement:o=document.body,interactionMoveElement:c=document.body,size:s="130px",onRotationChange:u=()=>{},onZoomChange:b=()=>{},classnames:m,initialRotation:f={rotX:0,rotY:0},cubeFaceChildren:p={back:"hinten",bottom:"",front:"vorne",left:"links",right:"rechts",top:"oben"},autoHide:v}=e,h=(0,r.A)(e,d);const[g,y]=(0,a.useState)(sanitizeRotation(normalizeRotationFormat(f))),[j,w]=(0,a.useState)(0),onRotationEndCallback=e=>{y(e),u(toCubeRotation(e))},{zoom:S,isPinching:O,setAbsoluteZoomFromOutside:E}=usePinch(_objectSpread({interactionElement:o,interactionMoveElement:c,onZoomEnd:b},h));(0,a.useImperativeHandle)(t,(()=>({getAbsoluteZoom:()=>S.absoluteZoom,setZoom:E,rotateTo:e=>{const t=normalizeRotationFormat(e);e.smooth?animateToRotation({currentRotation:g,onRotationChange:y,onRotationEnd:onRotationEndCallback,targetRotation:t}):onRotationEndCallback(t)}})),[g,y,S]);const R=void 0!==v,[x,Z]=null!=n?n:(0,a.useState)(R),C=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"back",onRotationEnd:onRotationEndCallback})}),[g,y]),T=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"front",onRotationEnd:onRotationEndCallback})}),[g,y]),$=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"left",onRotationEnd:onRotationEndCallback})}),[g,y]),z=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"right",onRotationEnd:onRotationEndCallback})}),[g,y]),k=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"top",onRotationEnd:onRotationEndCallback})}),[g,y]);(0,a.useEffect)((()=>{if(O)return void Z(!1);if(Z(!0),!o||!c)return;let e,t=!1;const{width:n}=o.getBoundingClientRect(),onPointerDown=n=>{clearTextSelection(),t=!0,Z(!1);const o=normalizePointerEvent(n);e=o},onPointerMove=o=>{t&&Z(!1);const r=normalizePointerEvent(o);if(e){const t=calculateElementRotation({startPos:{x:e.clientX,y:e.clientY},currentPos:{x:r.clientX,y:r.clientY},elemWidth:n});e=r,y((e=>{const n=sanitizeRotation({rotX:e.rotX+t.rotX,rotY:e.rotY+t.rotY});return _objectSpread(_objectSpread({},t),n)}))}},onInteractionEnd=n=>{t&&(Z(!0),e=void 0,y((e=>{const t=function snapRotation({rotX:e,rotY:t}){return{rotX:5*Math.round(e/5),rotY:5*Math.round(t/5)}}(e);let n=_objectSpread(_objectSpread({},e),t);return window.requestAnimationFrame((()=>{const e=toCubeRotation(n);u(e)})),n}))),t=!1};return o.addEventListener("touchstart",onPointerDown),o.addEventListener("mousedown",onPointerDown),c.addEventListener("touchmove",onPointerMove),c.addEventListener("mousemove",onPointerMove),c.addEventListener("touchend",onInteractionEnd),c.addEventListener("mouseup",onInteractionEnd),()=>{setTimeout((()=>{o.removeEventListener("touchstart",onPointerDown),o.removeEventListener("mousedown",onPointerDown),c.removeEventListener("touchmove",onPointerMove),c.removeEventListener("touchend",onInteractionEnd),c.removeEventListener("mousemove",onPointerMove),c.removeEventListener("mouseup",onInteractionEnd)}),0)}}),[o,c,O]);const P=(0,a.useCallback)((()=>{Z(!1)}),[Z]),F=(0,a.useCallback)((()=>{Z(!0)}),[Z]);return(0,i.jsx)("div",{className:"control-element-container-SW7qx"+(x&&R?" hidden-Tqm-e":""),style:{"--size":s,"--zoomFactor":S.relativeZoomCssScaleFactor,"--rotY":`${g.rotY}deg`,"--rotX":`${g.rotX}deg`,"--fontSize":j/4.4+"px","--autoHideDuration":(null!=v?v:0)/1e3+"s"},onMouseEnter:P,onMouseLeave:F,children:(0,i.jsxs)("div",{className:"control-element-WF71u",children:[(0,i.jsx)("div",{onClick:T,className:`${l} cube-face-front-Frhsh ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceFront}`,ref:e=>{if(e&&0===j){const{height:t}=e.getBoundingClientRect();w(t)}},children:p.front}),(0,i.jsx)("div",{onClick:C,className:`${l} cube-face-back-o1-8s ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBack}`,children:p.back}),(0,i.jsx)("div",{onClick:z,className:`${l} cube-face-right-LeBsy ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceRight}`,children:p.right}),(0,i.jsx)("div",{onClick:$,className:`${l} cube-face-left-DFZf- ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceLeft}`,children:p.left}),(0,i.jsx)("div",{onClick:k,className:`${l} cube-face-top-Hw8SM ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceTop}`,children:p.top}),(0,i.jsx)("div",{className:`${l} cube-face-bottom-NYTq6 ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBottom}`,children:p.bottom})]})})}))}}]);
|