@albi_scando/as-design-system-threejs-lib 1.1.11 → 1.1.12
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.
|
@@ -30638,7 +30638,7 @@ const zC = "as-language-picker", jC = /* @__PURE__ */ Object.freeze(/* @__PURE__
|
|
|
30638
30638
|
</section>
|
|
30639
30639
|
<confirmation-dialog id="confirmation-dialog"></confirmation-dialog>
|
|
30640
30640
|
</section>
|
|
30641
|
-
`, VC = "*{box-sizing:border-box}:host{display:block;width:100%;height:100%}.root{position:relative;width:100%;height:100%;overflow:hidden}canvas{
|
|
30641
|
+
`, VC = "*{box-sizing:border-box}:host{display:block;width:100%;height:100%}.root{position:relative;width:100%;height:100%;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.preview-dialog-container{position:absolute;bottom:5%;left:50%;width:30%;transform:translate(-50%)}.preview-dialog-container .preview-dialog::part(dialog){position:relative}.preview-dialog-container .preview-dialog .title{font-size:16px;font-weight:700;letter-spacing:.01em}.preview-dialog-container .preview-dialog .subtitle{font-size:12px;opacity:.75}.preview-dialog-container .preview-dialog .footer{display:flex;justify-content:flex-end}@media(max-width:768px){.preview-dialog-container{width:90%}}", Ic = new CSSStyleSheet();
|
|
30642
30642
|
Ic.replaceSync(VC);
|
|
30643
30643
|
const WC = 3;
|
|
30644
30644
|
class us extends HTMLElement {
|
|
@@ -3985,4 +3985,4 @@ void main() {
|
|
|
3985
3985
|
</section>
|
|
3986
3986
|
<confirmation-dialog id="confirmation-dialog"></confirmation-dialog>
|
|
3987
3987
|
</section>
|
|
3988
|
-
`,jI="*{box-sizing:border-box}:host{display:block;width:100%;height:100%}.root{position:relative;width:100%;height:100%;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.preview-dialog-container{position:absolute;bottom:clamp(0rem,40vh,35%);left:50%;transform:translate(-50%);width:30%}.preview-dialog-container .preview-dialog{display:block;width:100%}.preview-dialog-container .preview-dialog::part(dialog){translate:0 0}.preview-dialog-container .preview-dialog .title{font-size:16px;font-weight:700;letter-spacing:.01em}.preview-dialog-container .preview-dialog .subtitle{font-size:12px;opacity:.75}@media(max-width:768px){.preview-dialog-container{bottom:clamp(0rem,40vh,40%);width:90%}}",fc=new CSSStyleSheet;fc.replaceSync(jI);const QI=3;class ws extends HTMLElement{static textureLoader=new bh;shadowRoot;static get observedAttributes(){return Object.values(pa)}static CUBE_SIDE_LENGTH=2;options=PA.options;selected=PA.selected;selectedTmp=PA.selected;_renderer;_scene;_camera;_root;_canvas;_resizeObserver;_clock=new Lh;_lastTime=0;_cube;_cubeGeometry;_cubeMaterials=[];_animationFrameId=0;previewDialog=null;_previewTitle;_previewSub;_applyBtn;_confirmationDialog;_isConfirmationDialogOpen=!1;_themeTextures={};_currentFaceThemeId;_isDragging=!1;_lastPointerX=0;_lastPointerY=0;_dragPointerId=null;_rotX=.24;_rotY=.45;_rotZ=0;_idleSeconds=0;_autoSpinEnabled=!1;_autoVelX=0;_autoVelY=0;_isInitialized=!1;_isInitializing=!1;_tmpCamDir=new F;_tmpWorldNormal=new F;constructor(){super(),this.shadowRoot=this.attachShadow({mode:"open"}),this.shadowRoot.adoptedStyleSheets.push(fc)}attributeChangedCallback(t,e,i){if(!(e===i||i==null))switch(t){case pa.OPTIONS:{const n=JSON.parse(i);this.init(new Set(n))}break;case pa.SELECTED:{const n=i;this.select(n)}break}}connectedCallback(){this._isInitialized&&this._animationFrameId===0&&(this._clock.start(),this._animationFrameId=requestAnimationFrame(this._animate))}disconnectedCallback(){cancelAnimationFrame(this._animationFrameId),this._animationFrameId=0,this._unbindEvents(),this._cubeMaterials.forEach(t=>{t.map?.dispose(),t.dispose()}),this._cubeMaterials=[],this._cubeGeometry!=null&&this._cubeGeometry.dispose(),this._scene!=null&&this._scene.clear(),this._renderer!=null&&this._renderer.dispose(),this._resizeObserver!=null&&this._resizeObserver.disconnect(),this._confirmationDialog?.removeEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_CONFIRM,this._handleConfirmation),this._confirmationDialog?.removeEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_UNDO,this._handleConfirmationCancel),this.selected!==this.selectedTmp&&FA(this.selected)}init(t){if(!(this._isInitialized||this._isInitializing)){if(this.options=t,this.options.size===0){console.warn(`${this.constructor.name}: No themes provided`);return}this._isInitializing=!0,this.setupHtmlElements(),this.setupScene(),this.setupUI(),this.setupCube(),this.setupConfirmationDialog(),this.setupApplyButton(),this._bindEvents(),this._isInitialized=!0,this._isInitializing=!1,this._updatePreviewDialog(this.selected),this._syncRotationToSelected(),this._updatePanelPosition(),this.isConnected&&this._animationFrameId===0&&(this._clock.start(),this._animationFrameId=requestAnimationFrame(this._animate))}}setupHtmlElements(){this.shadowRoot.innerHTML=JI,this._root=this.shadowRoot.querySelector(".root")??(()=>{throw new Error(`${this.constructor.name}: root element not found`)})(),this._canvas=this.shadowRoot.querySelector(NA.CANVAS)??(()=>{throw new Error(`${this.constructor.name}: canvas element not found`)})(),this._confirmationDialog=this.shadowRoot.querySelector(Yi.selector)??(()=>{throw new Error(`${this.constructor.name}: confirmation-dialog element not found`)})()}setupScene(){const t=this._root.clientWidth!==0?this._root.clientWidth:800,e=this._root.clientHeight!==0?this._root.clientHeight:600;this._renderer=new hc({canvas:this._canvas,antialias:!0,alpha:!0}),this._renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)),this._renderer.setSize(t,e,!1),this._renderer.setClearColor(0,0),this._scene=new Sh,this._scene.background=new Vt(1710618),this._camera=new ze(44,t/e,.1,100),this._updateCameraForLayout(),this._camera.lookAt(0,0,0),this.resizeHandler()}setupUI(){this.previewDialog=this.shadowRoot.querySelector(".preview-dialog"),this.previewDialog!=null&&setTimeout(()=>{this.previewDialog?.show()}),this._previewTitle=this.shadowRoot.querySelector(".preview-title")??(()=>{throw new Error(`${this.constructor.name}: .preview-title not found`)})(),this._previewSub=this.shadowRoot.querySelector(".preview-sub")??(()=>{throw new Error(`${this.constructor.name}: .preview-sub not found`)})(),this._applyBtn=this.shadowRoot.querySelector(".apply-btn")??(()=>{throw new Error(`${this.constructor.name}: .apply-btn not found`)})()}setupCube(){const t=Object.keys(ga).length;this._cubeMaterials=Array.from({length:t},(e,i)=>{const n=this._getThemeIdForFace(i),s=this._resolveThemeFaceVisual(n),a=new hA({color:"#ece9e4"});return this._setMaterialTexture(a,n,s),a}),this._cubeGeometry=new vs(ws.CUBE_SIDE_LENGTH,ws.CUBE_SIDE_LENGTH,ws.CUBE_SIDE_LENGTH),this._cube=new mi(this._cubeGeometry,this._cubeMaterials),this._cube.rotation.x=this._rotX,this._cube.rotation.y=this._rotY,this._cube.translateY(1.25),this._scene.add(this._cube)}resizeHandler=()=>{const t=()=>{const e=this._root.clientWidth,i=this._root.clientHeight;e===0||i===0||(this._renderer.setSize(e,i,!1),this._camera.aspect=e/i,this._camera.updateProjectionMatrix(),this._updateCameraForLayout(),this._updatePanelPosition())};this._resizeObserver=new ResizeObserver(t),this._resizeObserver.observe(this._root),t()};setupApplyButton(){this._applyBtn.addEventListener(fr.CLICK,this._handleApplyClick)}setupConfirmationDialog(){this._confirmationDialog.addEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_CONFIRM,this._handleConfirmation),this._confirmationDialog.addEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_UNDO,this._handleConfirmationCancel)}select(t){if(this._isInitialized===!1){this.selected=t,this.selectedTmp=t;return}if(this.options.has(t)===!1){console.warn(`${this.constructor.name}: Theme '${t}' not found`);return}t!==this.selected&&(this.selected=t,this.selectedTmp=t,this._syncRotationToSelected(),this._updatePreviewDialog(t),this._stopAutoSpinFromInteraction())}_syncRotationToSelected(){const e=[...this.options].indexOf(this.selected);if(e<0)return;const i=Object.values(ga)[e%Object.keys(ga).length],n=new F(0,0,1),s=new as;s.setFromUnitVectors(i,n);const a=new fi;a.setFromQuaternion(s),this._rotX=a.x,this._rotY=a.y,this._rotZ=a.z,this._currentFaceThemeId=this.selected}_handleApplyClick=()=>{this._applyTheme()};_applyTheme(){if(this._currentFaceThemeId==null)return;const t=this._resolveThemeFaceVisual(this._currentFaceThemeId);this._confirmationDialog.value=this._currentFaceThemeId,this._confirmationDialog.headline="Apply theme?",this._confirmationDialog.text=`Are you sure you want to apply the theme ${t.name}?`,this._confirmationDialog.showModal(),this._isConfirmationDialogOpen=!0,this._stopAutoSpinFromInteraction()}_updatePreviewDialog(t){const e=this._resolveThemeFaceVisual(t),i=t===this.selected;this._previewTitle.textContent=`${e.icon} ${e.name}`,this._previewSub.textContent=e.description,this._applyBtn.disabled=i,this._applyBtn.textContent=i?"Already active":"Apply",this._applyBtn.title=i?"Already the active theme":"Apply this theme"}_animate=()=>{this._animationFrameId=requestAnimationFrame(this._animate);try{if(!this._isInitialized)return;const t=this._clock.getElapsedTime(),e=t-this._lastTime;this._lastTime=t;const i=Math.min(Math.max(e,0),1/24);!this._isDragging&&!this._isConfirmationDialogOpen&&this._updateIdleAutoSpin(i),this._cube.rotation.x=this._rotX,this._cube.rotation.y=this._rotY,this._cube.rotation.z=this._rotZ;const n=this._getFrontFaceIndex(),s=this._getThemeIdForFace(n);s!==this._currentFaceThemeId&&(this._currentFaceThemeId=s,this._updatePreviewDialog(s),this.selectedTmp=s,FA(s)),this._renderer.render(this._scene,this._camera)}catch(t){console.error("Animation loop error:",t),cancelAnimationFrame(this._animationFrameId),this._animationFrameId=0}};_updateIdleAutoSpin(t){this._idleSeconds+=t,!this._autoSpinEnabled&&this._idleSeconds>=QI&&(this._autoSpinEnabled=!0,this._autoVelX=.0015,this._autoVelY=.0015*(1+Math.sqrt(5))/2),this._autoSpinEnabled&&(this._rotX+=this._autoVelX,this._rotY+=this._autoVelY,this._rotX>Math.PI/2.2&&(this._autoVelX=-Math.abs(this._autoVelX)),this._rotX<-Math.PI/2.2&&(this._autoVelX=Math.abs(this._autoVelX)))}_getFrontFaceIndex(){this._camera.getWorldDirection(this._tmpCamDir),this._tmpCamDir.negate();const t=Object.values(ga);let e=-1,i=-1/0;for(let n=0;n<t.length;n+=1){this._tmpWorldNormal.copy(t[n]).applyQuaternion(this._cube.quaternion);const s=this._tmpWorldNormal.dot(this._tmpCamDir);s>i&&(i=s,e=n)}return e}_updateCameraForLayout(){this._camera.position.set(0,.9,8),this._camera.lookAt(0,0,0)}_updatePanelPosition(){}_setMaterialTexture(t,e,i){const n=this._themeTextures[e];if(n==null||n.length===0){t.map?.dispose(),t.map=this._createFallbackFaceTexture(i),t.needsUpdate=!0;return}ws.textureLoader.load(n,s=>{s.colorSpace=_e,s.needsUpdate=!0,t.map?.dispose(),t.map=s,t.needsUpdate=!0},void 0,()=>{t.map?.dispose(),t.map=this._createFallbackFaceTexture(i),t.needsUpdate=!0})}_createFallbackFaceTexture(t){const i=document.createElement("canvas");i.width=768,i.height=768;const n=i.getContext("2d");if(n==null){const o=new Mh(i);return o.colorSpace=_e,o}const s=n.createLinearGradient(0,0,768,768);s.addColorStop(0,"#ece9e4"),s.addColorStop(1,"#ddd9d2"),n.fillStyle=s,n.fillRect(0,0,768,768),n.fillStyle="rgba(0, 0, 0, 0.04)",n.beginPath(),n.roundRect(48,48,672,672,28),n.fill(),n.strokeStyle="#f3f3f3",n.lineWidth=6,n.beginPath(),n.roundRect(48,48,672,672,28),n.stroke(),n.fillStyle="#6366f1",n.fillRect(48,48,672,6),n.fillStyle="#141414",n.font="140px serif",n.textAlign="center",n.textBaseline="middle",n.fillText(t.icon,768/2,768/2-70),n.font="bold 72px sans-serif",n.fillText(t.name,768/2,768/2+80,648);const a=new Mh(i);return a.colorSpace=_e,a.needsUpdate=!0,a}_getThemeIdForFace(t){const e=[...this.options];return e.length===0?me.DARK:e[t%e.length]??me.DARK}_stopAutoSpinFromInteraction(){this._idleSeconds=0,this._autoSpinEnabled=!1,this._autoVelX=0,this._autoVelY=0}_onPointerDown=t=>{this._isDragging=!0,this._dragPointerId=t.pointerId,this._lastPointerX=t.clientX,this._lastPointerY=t.clientY,this._canvas.classList.add("dragging"),this._stopAutoSpinFromInteraction(),this._canvas.setPointerCapture(t.pointerId)};_onPointerMove=t=>{if(!this._isDragging||this._dragPointerId!==t.pointerId)return;const e=t.clientX-this._lastPointerX,i=t.clientY-this._lastPointerY;this._rotY+=e*.008,this._rotX+=i*.008,this._lastPointerX=t.clientX,this._lastPointerY=t.clientY,this._stopAutoSpinFromInteraction()};_onPointerUp=t=>{this._dragPointerId===t.pointerId&&(this._isDragging=!1,this._dragPointerId=null,this._canvas.classList.remove("dragging"),this._idleSeconds=0)};_bindEvents(){this._canvas.addEventListener(Vi.POINTER_DOWN,this._onPointerDown),this._canvas.addEventListener(Vi.POINTER_MOVE,this._onPointerMove),this._applyBtn.addEventListener(fr.CLICK,this._handleApplyClick),window.addEventListener(Vi.POINTER_UP,this._onPointerUp),window.addEventListener(Vi.POINTER_CANCEL,this._onPointerUp)}_unbindEvents(){this._canvas?.removeEventListener(Vi.POINTER_DOWN,this._onPointerDown),this._canvas?.removeEventListener(Vi.POINTER_MOVE,this._onPointerMove),this._applyBtn?.removeEventListener(fr.CLICK,this._handleApplyClick),window.removeEventListener(Vi.POINTER_UP,this._onPointerUp),window.removeEventListener(Vi.POINTER_CANCEL,this._onPointerUp)}_handleConfirmation=()=>{this.selectedTmp!==this.selected&&(this.dispatchEvent(new CustomEvent(dc.THEME_CHANGE_CONFIRMED,{detail:{value:this.selectedTmp},bubbles:!0,composed:!0})),this._isConfirmationDialogOpen=!1,this._idleSeconds=0)};_handleConfirmationCancel=()=>{this._isConfirmationDialogOpen=!1};_resolveThemeFaceVisual(t){return Ec.get(t)}}const qI=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:dc,OBSERVED_ATTRIBUTES:pa,ThemePickerComponent:ws,selector:"theme-picker"},Symbol.toStringTag,{value:"Module"}));ei.APPLICATION_NAME=_s,ei.CUSTOM_MESSAGES=Ca,ei.LanguagePicker=XI,ei.THEME_TEXTURES_MAPPER=Oc,ei.ThemePicker=qI,ei.WebComponentsRegistry=xc,Object.defineProperty(ei,Symbol.toStringTag,{value:"Module"})}));
|
|
3988
|
+
`,jI="*{box-sizing:border-box}:host{display:block;width:100%;height:100%}.root{position:relative;width:100%;height:100%;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.preview-dialog-container{position:absolute;bottom:5%;left:50%;width:30%;transform:translate(-50%)}.preview-dialog-container .preview-dialog::part(dialog){position:relative}.preview-dialog-container .preview-dialog .title{font-size:16px;font-weight:700;letter-spacing:.01em}.preview-dialog-container .preview-dialog .subtitle{font-size:12px;opacity:.75}.preview-dialog-container .preview-dialog .footer{display:flex;justify-content:flex-end}@media(max-width:768px){.preview-dialog-container{width:90%}}",fc=new CSSStyleSheet;fc.replaceSync(jI);const QI=3;class ws extends HTMLElement{static textureLoader=new bh;shadowRoot;static get observedAttributes(){return Object.values(pa)}static CUBE_SIDE_LENGTH=2;options=PA.options;selected=PA.selected;selectedTmp=PA.selected;_renderer;_scene;_camera;_root;_canvas;_resizeObserver;_clock=new Lh;_lastTime=0;_cube;_cubeGeometry;_cubeMaterials=[];_animationFrameId=0;previewDialog=null;_previewTitle;_previewSub;_applyBtn;_confirmationDialog;_isConfirmationDialogOpen=!1;_themeTextures={};_currentFaceThemeId;_isDragging=!1;_lastPointerX=0;_lastPointerY=0;_dragPointerId=null;_rotX=.24;_rotY=.45;_rotZ=0;_idleSeconds=0;_autoSpinEnabled=!1;_autoVelX=0;_autoVelY=0;_isInitialized=!1;_isInitializing=!1;_tmpCamDir=new F;_tmpWorldNormal=new F;constructor(){super(),this.shadowRoot=this.attachShadow({mode:"open"}),this.shadowRoot.adoptedStyleSheets.push(fc)}attributeChangedCallback(t,e,i){if(!(e===i||i==null))switch(t){case pa.OPTIONS:{const n=JSON.parse(i);this.init(new Set(n))}break;case pa.SELECTED:{const n=i;this.select(n)}break}}connectedCallback(){this._isInitialized&&this._animationFrameId===0&&(this._clock.start(),this._animationFrameId=requestAnimationFrame(this._animate))}disconnectedCallback(){cancelAnimationFrame(this._animationFrameId),this._animationFrameId=0,this._unbindEvents(),this._cubeMaterials.forEach(t=>{t.map?.dispose(),t.dispose()}),this._cubeMaterials=[],this._cubeGeometry!=null&&this._cubeGeometry.dispose(),this._scene!=null&&this._scene.clear(),this._renderer!=null&&this._renderer.dispose(),this._resizeObserver!=null&&this._resizeObserver.disconnect(),this._confirmationDialog?.removeEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_CONFIRM,this._handleConfirmation),this._confirmationDialog?.removeEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_UNDO,this._handleConfirmationCancel),this.selected!==this.selectedTmp&&FA(this.selected)}init(t){if(!(this._isInitialized||this._isInitializing)){if(this.options=t,this.options.size===0){console.warn(`${this.constructor.name}: No themes provided`);return}this._isInitializing=!0,this.setupHtmlElements(),this.setupScene(),this.setupUI(),this.setupCube(),this.setupConfirmationDialog(),this.setupApplyButton(),this._bindEvents(),this._isInitialized=!0,this._isInitializing=!1,this._updatePreviewDialog(this.selected),this._syncRotationToSelected(),this._updatePanelPosition(),this.isConnected&&this._animationFrameId===0&&(this._clock.start(),this._animationFrameId=requestAnimationFrame(this._animate))}}setupHtmlElements(){this.shadowRoot.innerHTML=JI,this._root=this.shadowRoot.querySelector(".root")??(()=>{throw new Error(`${this.constructor.name}: root element not found`)})(),this._canvas=this.shadowRoot.querySelector(NA.CANVAS)??(()=>{throw new Error(`${this.constructor.name}: canvas element not found`)})(),this._confirmationDialog=this.shadowRoot.querySelector(Yi.selector)??(()=>{throw new Error(`${this.constructor.name}: confirmation-dialog element not found`)})()}setupScene(){const t=this._root.clientWidth!==0?this._root.clientWidth:800,e=this._root.clientHeight!==0?this._root.clientHeight:600;this._renderer=new hc({canvas:this._canvas,antialias:!0,alpha:!0}),this._renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)),this._renderer.setSize(t,e,!1),this._renderer.setClearColor(0,0),this._scene=new Sh,this._scene.background=new Vt(1710618),this._camera=new ze(44,t/e,.1,100),this._updateCameraForLayout(),this._camera.lookAt(0,0,0),this.resizeHandler()}setupUI(){this.previewDialog=this.shadowRoot.querySelector(".preview-dialog"),this.previewDialog!=null&&setTimeout(()=>{this.previewDialog?.show()}),this._previewTitle=this.shadowRoot.querySelector(".preview-title")??(()=>{throw new Error(`${this.constructor.name}: .preview-title not found`)})(),this._previewSub=this.shadowRoot.querySelector(".preview-sub")??(()=>{throw new Error(`${this.constructor.name}: .preview-sub not found`)})(),this._applyBtn=this.shadowRoot.querySelector(".apply-btn")??(()=>{throw new Error(`${this.constructor.name}: .apply-btn not found`)})()}setupCube(){const t=Object.keys(ga).length;this._cubeMaterials=Array.from({length:t},(e,i)=>{const n=this._getThemeIdForFace(i),s=this._resolveThemeFaceVisual(n),a=new hA({color:"#ece9e4"});return this._setMaterialTexture(a,n,s),a}),this._cubeGeometry=new vs(ws.CUBE_SIDE_LENGTH,ws.CUBE_SIDE_LENGTH,ws.CUBE_SIDE_LENGTH),this._cube=new mi(this._cubeGeometry,this._cubeMaterials),this._cube.rotation.x=this._rotX,this._cube.rotation.y=this._rotY,this._cube.translateY(1.25),this._scene.add(this._cube)}resizeHandler=()=>{const t=()=>{const e=this._root.clientWidth,i=this._root.clientHeight;e===0||i===0||(this._renderer.setSize(e,i,!1),this._camera.aspect=e/i,this._camera.updateProjectionMatrix(),this._updateCameraForLayout(),this._updatePanelPosition())};this._resizeObserver=new ResizeObserver(t),this._resizeObserver.observe(this._root),t()};setupApplyButton(){this._applyBtn.addEventListener(fr.CLICK,this._handleApplyClick)}setupConfirmationDialog(){this._confirmationDialog.addEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_CONFIRM,this._handleConfirmation),this._confirmationDialog.addEventListener(Yi.COMPONENT_CUSTOM_MESSAGES.CONFIRMATION_DIALOG_UNDO,this._handleConfirmationCancel)}select(t){if(this._isInitialized===!1){this.selected=t,this.selectedTmp=t;return}if(this.options.has(t)===!1){console.warn(`${this.constructor.name}: Theme '${t}' not found`);return}t!==this.selected&&(this.selected=t,this.selectedTmp=t,this._syncRotationToSelected(),this._updatePreviewDialog(t),this._stopAutoSpinFromInteraction())}_syncRotationToSelected(){const e=[...this.options].indexOf(this.selected);if(e<0)return;const i=Object.values(ga)[e%Object.keys(ga).length],n=new F(0,0,1),s=new as;s.setFromUnitVectors(i,n);const a=new fi;a.setFromQuaternion(s),this._rotX=a.x,this._rotY=a.y,this._rotZ=a.z,this._currentFaceThemeId=this.selected}_handleApplyClick=()=>{this._applyTheme()};_applyTheme(){if(this._currentFaceThemeId==null)return;const t=this._resolveThemeFaceVisual(this._currentFaceThemeId);this._confirmationDialog.value=this._currentFaceThemeId,this._confirmationDialog.headline="Apply theme?",this._confirmationDialog.text=`Are you sure you want to apply the theme ${t.name}?`,this._confirmationDialog.showModal(),this._isConfirmationDialogOpen=!0,this._stopAutoSpinFromInteraction()}_updatePreviewDialog(t){const e=this._resolveThemeFaceVisual(t),i=t===this.selected;this._previewTitle.textContent=`${e.icon} ${e.name}`,this._previewSub.textContent=e.description,this._applyBtn.disabled=i,this._applyBtn.textContent=i?"Already active":"Apply",this._applyBtn.title=i?"Already the active theme":"Apply this theme"}_animate=()=>{this._animationFrameId=requestAnimationFrame(this._animate);try{if(!this._isInitialized)return;const t=this._clock.getElapsedTime(),e=t-this._lastTime;this._lastTime=t;const i=Math.min(Math.max(e,0),1/24);!this._isDragging&&!this._isConfirmationDialogOpen&&this._updateIdleAutoSpin(i),this._cube.rotation.x=this._rotX,this._cube.rotation.y=this._rotY,this._cube.rotation.z=this._rotZ;const n=this._getFrontFaceIndex(),s=this._getThemeIdForFace(n);s!==this._currentFaceThemeId&&(this._currentFaceThemeId=s,this._updatePreviewDialog(s),this.selectedTmp=s,FA(s)),this._renderer.render(this._scene,this._camera)}catch(t){console.error("Animation loop error:",t),cancelAnimationFrame(this._animationFrameId),this._animationFrameId=0}};_updateIdleAutoSpin(t){this._idleSeconds+=t,!this._autoSpinEnabled&&this._idleSeconds>=QI&&(this._autoSpinEnabled=!0,this._autoVelX=.0015,this._autoVelY=.0015*(1+Math.sqrt(5))/2),this._autoSpinEnabled&&(this._rotX+=this._autoVelX,this._rotY+=this._autoVelY,this._rotX>Math.PI/2.2&&(this._autoVelX=-Math.abs(this._autoVelX)),this._rotX<-Math.PI/2.2&&(this._autoVelX=Math.abs(this._autoVelX)))}_getFrontFaceIndex(){this._camera.getWorldDirection(this._tmpCamDir),this._tmpCamDir.negate();const t=Object.values(ga);let e=-1,i=-1/0;for(let n=0;n<t.length;n+=1){this._tmpWorldNormal.copy(t[n]).applyQuaternion(this._cube.quaternion);const s=this._tmpWorldNormal.dot(this._tmpCamDir);s>i&&(i=s,e=n)}return e}_updateCameraForLayout(){this._camera.position.set(0,.9,8),this._camera.lookAt(0,0,0)}_updatePanelPosition(){}_setMaterialTexture(t,e,i){const n=this._themeTextures[e];if(n==null||n.length===0){t.map?.dispose(),t.map=this._createFallbackFaceTexture(i),t.needsUpdate=!0;return}ws.textureLoader.load(n,s=>{s.colorSpace=_e,s.needsUpdate=!0,t.map?.dispose(),t.map=s,t.needsUpdate=!0},void 0,()=>{t.map?.dispose(),t.map=this._createFallbackFaceTexture(i),t.needsUpdate=!0})}_createFallbackFaceTexture(t){const i=document.createElement("canvas");i.width=768,i.height=768;const n=i.getContext("2d");if(n==null){const o=new Mh(i);return o.colorSpace=_e,o}const s=n.createLinearGradient(0,0,768,768);s.addColorStop(0,"#ece9e4"),s.addColorStop(1,"#ddd9d2"),n.fillStyle=s,n.fillRect(0,0,768,768),n.fillStyle="rgba(0, 0, 0, 0.04)",n.beginPath(),n.roundRect(48,48,672,672,28),n.fill(),n.strokeStyle="#f3f3f3",n.lineWidth=6,n.beginPath(),n.roundRect(48,48,672,672,28),n.stroke(),n.fillStyle="#6366f1",n.fillRect(48,48,672,6),n.fillStyle="#141414",n.font="140px serif",n.textAlign="center",n.textBaseline="middle",n.fillText(t.icon,768/2,768/2-70),n.font="bold 72px sans-serif",n.fillText(t.name,768/2,768/2+80,648);const a=new Mh(i);return a.colorSpace=_e,a.needsUpdate=!0,a}_getThemeIdForFace(t){const e=[...this.options];return e.length===0?me.DARK:e[t%e.length]??me.DARK}_stopAutoSpinFromInteraction(){this._idleSeconds=0,this._autoSpinEnabled=!1,this._autoVelX=0,this._autoVelY=0}_onPointerDown=t=>{this._isDragging=!0,this._dragPointerId=t.pointerId,this._lastPointerX=t.clientX,this._lastPointerY=t.clientY,this._canvas.classList.add("dragging"),this._stopAutoSpinFromInteraction(),this._canvas.setPointerCapture(t.pointerId)};_onPointerMove=t=>{if(!this._isDragging||this._dragPointerId!==t.pointerId)return;const e=t.clientX-this._lastPointerX,i=t.clientY-this._lastPointerY;this._rotY+=e*.008,this._rotX+=i*.008,this._lastPointerX=t.clientX,this._lastPointerY=t.clientY,this._stopAutoSpinFromInteraction()};_onPointerUp=t=>{this._dragPointerId===t.pointerId&&(this._isDragging=!1,this._dragPointerId=null,this._canvas.classList.remove("dragging"),this._idleSeconds=0)};_bindEvents(){this._canvas.addEventListener(Vi.POINTER_DOWN,this._onPointerDown),this._canvas.addEventListener(Vi.POINTER_MOVE,this._onPointerMove),this._applyBtn.addEventListener(fr.CLICK,this._handleApplyClick),window.addEventListener(Vi.POINTER_UP,this._onPointerUp),window.addEventListener(Vi.POINTER_CANCEL,this._onPointerUp)}_unbindEvents(){this._canvas?.removeEventListener(Vi.POINTER_DOWN,this._onPointerDown),this._canvas?.removeEventListener(Vi.POINTER_MOVE,this._onPointerMove),this._applyBtn?.removeEventListener(fr.CLICK,this._handleApplyClick),window.removeEventListener(Vi.POINTER_UP,this._onPointerUp),window.removeEventListener(Vi.POINTER_CANCEL,this._onPointerUp)}_handleConfirmation=()=>{this.selectedTmp!==this.selected&&(this.dispatchEvent(new CustomEvent(dc.THEME_CHANGE_CONFIRMED,{detail:{value:this.selectedTmp},bubbles:!0,composed:!0})),this._isConfirmationDialogOpen=!1,this._idleSeconds=0)};_handleConfirmationCancel=()=>{this._isConfirmationDialogOpen=!1};_resolveThemeFaceVisual(t){return Ec.get(t)}}const qI=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:dc,OBSERVED_ATTRIBUTES:pa,ThemePickerComponent:ws,selector:"theme-picker"},Symbol.toStringTag,{value:"Module"}));ei.APPLICATION_NAME=_s,ei.CUSTOM_MESSAGES=Ca,ei.LanguagePicker=XI,ei.THEME_TEXTURES_MAPPER=Oc,ei.ThemePicker=qI,ei.WebComponentsRegistry=xc,Object.defineProperty(ei,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@albi_scando/as-design-system-threejs-lib",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.12",
|
|
4
4
|
"description": "A library of reusable, strongly typed threejs Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|