@hatiolab/things-scene 9.0.0-beta.69 → 9.0.0-beta.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hatiolab/things-scene",
-  "version": "9.0.0-beta.69",
+  "version": "9.0.0-beta.70",
   "description": "2D graphic library",
   "main": "things-scene-min.js",
   "module": "things-scene.mjs",

package/things-scene-min.js

@@ -22,7 +22,7 @@ const rot=globalThis,not=rot.trustedTypes,iot=not?not.createPolicy("lit-html",{c
 	 * @license
 	 * Copyright 2017 Google LLC
 	 * SPDX-License-Identifier: BSD-3-Clause
-	 */},zot=globalThis;class Bot extends eot{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Fot(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Aot}}Bot._$litElement$=!0,Bot.finalized=!0,zot.litElementHydrateSupport?.({LitElement:Bot});const Uot=zot.litElementPolyfillSupport;Uot?.({LitElement:Bot}),(zot.litElementVersions??=[]).push("4.2.0");const $ot=["mousemove","mouseup","mousedown","mouseout","wheel","tap","click","touchstart","touchmove","touchend","mouseenter","mouseleave","dragstart","dragmove","dragend","dblclick"];var Yot,Got=t=>class extends t{constructor(){super(...arguments),this.userInputEventHandler=t=>{Knt(this,t.type,t),t.stopPropagation()}}isHTMLElement(){return!0}isShadowable(){return!0}get element(){return this._element}set element(t){this._element=t}get tagName(){return this.get("type")}setElementProperties(t){throw new Error("Not Implemented Yet")}createElement(){this.element=document.createElement(this.tagName),this.element&&(this.parent.isHTMLElement()?this.parent.element.appendChild(this.element):this.rootModel.getOverlay(this).appendChild(this.element),$ot.forEach((t=>{this.element.addEventListener(t,this.userInputEventHandler)})),O9.forEach((t=>{this.element.addEventListener(t,this.userInputEventHandler)})),this.oncreate_element&&this.oncreate_element(this.element))}reposition(){this.element&&Ptt(this)}disposeElement(){if(this.element){$ot.forEach((t=>{this.element.removeEventListener(t,this.userInputEventHandler)})),O9.forEach((t=>{this.element.removeEventListener(t,this.userInputEventHandler)}));var t=this.element;t&&t.parentElement&&t.parentElement.removeChild(t),this.element=null}}ready(){super.ready(),!this.element&&this.createElement(),this.parent.isHTMLElement()?this.parent.element.appendChild(this.element):this.rootModel.getOverlay(this).appendChild(this.element),this.setElementProperties(this.element),this.reposition()}dispose(){this.disposeElement(this),super.dispose()}get hasTextProperty(){return!0}get textHidden(){return!0}get hidden(){return super.hidden}set hidden(t){super.hidden=t,this.element.style.display=t?"none":"block"}onchange(t,e){this.element&&this.setElementProperties(this.element),"position"in t&&this.onchangePosition(),this.reposition()}onchangePosition(){this.element&&("static"==this.position&&this.parent.isHTMLElement()?this.parent.element.appendChild(this.element):this.rootModel.getOverlay(this).appendChild(this.element))}isDescendible(t){return t.isHTMLElement()}};const Hot={x:1,y:1},Wot={boxSizing:"border-box",margin:"0px",position:"absolute",outline:"none"},qot={mutable:!1,resizable:!0,rotatable:!0,properties:[{type:"select",label:"position-origin",name:"origin",property:{options:[{display:"",value:""},{display:"left-top",value:"left-top"},{display:"center-top",value:"center-top"},{display:"right-top",value:"right-top"},{display:"left-middle",value:"left-middle"},{display:"center-middle",value:"center-middle"},{display:"right-middle",value:"right-middle"},{display:"left-bottom",value:"left-bottom"},{display:"center-bottom",value:"center-bottom"},{display:"right-bottom",value:"right-bottom"}]}},{type:"number",label:"offset-x",name:"offsetX"},{type:"number",label:"offset-y",name:"offsetY"},{type:"layout",label:"layout",name:"layoutOption"},{type:"checkbox",label:"closable",name:"closable"},{type:"checkbox",label:"draggable",name:"draggable"},{type:"checkbox",label:"minimizable",name:"minimizable"},{type:"checkbox",label:"minimized",name:"minimized"}],help:"scene/component/container"};class Vot extends(Got(ket)){constructor(){super(...arguments),Yot.set(this,null),this.startDragging=t=>{if(!this.state.draggable)return;t.preventDefault(),t.stopPropagation();let e=t.clientX,r=t.clientY;const{left:n,top:i}=this.bounds,o=this.rootModel.getOverlay(this).style.transform.match(/scale\(([^,]+),\s*([^)]+)\)/),a=o?parseFloat(o[1]):1,s=o?parseFloat(o[2]):a,c=t=>{t.preventDefault(),t.stopPropagation();const o=(t.clientX-e)/a,c=(t.clientY-r)/s;this.setState({left:n+o,top:i+c})},l=t=>{t.preventDefault(),t.stopPropagation(),document.removeEventListener("mousemove",c,!0),document.removeEventListener("mouseup",l,!0)};document.addEventListener("mousemove",c,!0),document.addEventListener("mouseup",l,!0)},this.toggleMinimizable=()=>{const{minimized:t}=this.state;this.setState("minimized",!t)},this.closeContainer=()=>{this.setState("hidden",!0)}}get tagName(){return"div"}get nature(){return qot}isPositionable(){return!0}setElementProperties(t){}get layout(){return iet.get(this.get("layout"))||oet}reposition(){if(this.element){var t=this,{id:e,class:r,scale:n=Hot}=t.state,{rotation:i=0,hidden:o}=t,{left:a,top:s,width:c,height:l}=t.bounds,u=c/2,h=l/2,f=t.element;f.hidden=o,e&&(f.id=e),r&&(f.className=r),Object.assign(f.style,Wot,{left:a+"px",top:s+"px",width:"0px",height:"0px",backgroundColor:"transparent"});var d=t.delta(),p=(n&&n.x||1)*d.sx,g=(n&&n.y||1)*d.sy,m=(i||0)+d.theta,v=d.tx||0,y=d.ty||0;f.style.transform=`translate(${v+u}px, ${y+h}px) rotate(${m}rad) translate(${-u}px, ${-h}px) scale(${p}, ${g}) perspective(1px)`}}set path(t){const{minimized:e}=this.state;var r=t[0],n=t[2];e?this.set({left:r.x,top:r.y,width:n.x-r.x}):this.set({left:r.x,top:r.y,width:n.x-r.x,height:n.y-r.y})}get path(){var{left:t=0,top:e=0,width:r=0,height:n=0}=this.state;return[{x:t,y:e},{x:t+r,y:e},{x:t+r,y:e+n},{x:t,y:e+n}]}get bounds(){const{left:t=0,top:e=0,width:r=0,height:n=0}=this.state;return{left:t,top:e,width:r,height:n}}set bounds(t){const{minimized:e}=this.state,{left:r=0,top:n=0,width:i=0,height:o=0}=t;let a={left:r,top:n};e?this.set({...a,width:i}):this.set({...a,width:i,height:o})}get origin(){return this.state.origin}get offset(){const{offsetX:t=0,offsetY:e=0}=this.state;return{x:t,y:e}}updatePosition(){if("left-top"===this.origin)return void(Rit(this,Yot,"f")&&(Rit(this,Yot,"f").disconnect(),Dit(this,Yot,null,"f")));const t=this.rootModel.auxOverlay,e=this.bounds,{width:r,height:n}="static"!==this.position?t.getBoundingClientRect():this.parent.bounds,{x:i,y:o}=function(t,e,r){const{left:n,top:i,width:o,height:a}=e,{width:s,height:c}=r;return t?{x:t.includes("left")?n:t.includes("center")?n+(o-s)/2:n+(o-s),y:t.includes("top")?i:t.includes("middle")?i+(a-c)/2:i+(a-c)}:{x:r.left,y:r.top}}(this.origin,{left:0,top:0,width:r,height:n},e),a=this.offset;this.bounds={left:i+(this.origin.includes("right")?-a.x:+a.x),top:o+(this.origin.includes("bottom")?-a.y:+a.y),width:e.width,height:height},Rit(this,Yot,"f")||(Dit(this,Yot,new ResizeObserver((()=>{requestAnimationFrame((()=>this.updatePosition()))})),"f"),Rit(this,Yot,"f").observe(t))}onchange(t,e){super.onchange(t,e),("draggable"in t||"minimizable"in t||"closable"in t||"minimized"in t||"width"in t||"height"in t||"origin"in t||"offsetX"in t||"offsetY"in t)&&this.onchangeButtons(),"minimized"in t&&this.onchangeMinimized(),("origin"in t||"offsetX"in t||"offsetY"in t)&&this.updatePosition()}ready(){super.ready(),this.updatePosition()}dispose(){Rit(this,Yot,"f")&&(Rit(this,Yot,"f").disconnect(),Dit(this,Yot,null,"f")),super.dispose()}createElement(){super.createElement(),this.onchangeButtons(),this.onchangeMinimized()}onchangeButtons(){if(!this.element)return;const{draggable:t,minimizable:e,closable:r,minimized:n}=this.state,{width:i}=this.bounds;this.element.style.setProperty("--container-width",`${i}px`),Fot(wot`
+	 */},zot=globalThis;class Bot extends eot{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=Fot(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Aot}}Bot._$litElement$=!0,Bot.finalized=!0,zot.litElementHydrateSupport?.({LitElement:Bot});const Uot=zot.litElementPolyfillSupport;Uot?.({LitElement:Bot}),(zot.litElementVersions??=[]).push("4.2.0");const $ot=["mousemove","mouseup","mousedown","mouseout","wheel","tap","click","touchstart","touchmove","touchend","mouseenter","mouseleave","dragstart","dragmove","dragend","dblclick"];var Yot,Got=t=>class extends t{constructor(){super(...arguments),this.userInputEventHandler=t=>{Knt(this,t.type,t),t.stopPropagation()}}isHTMLElement(){return!0}isShadowable(){return!0}get element(){return this._element}set element(t){this._element=t}get tagName(){return this.get("type")}setElementProperties(t){throw new Error("Not Implemented Yet")}createElement(){this.element=document.createElement(this.tagName),this.element&&(this.parent.isHTMLElement()?this.parent.element.appendChild(this.element):this.rootModel.getOverlay(this).appendChild(this.element),$ot.forEach((t=>{this.element.addEventListener(t,this.userInputEventHandler)})),O9.forEach((t=>{this.element.addEventListener(t,this.userInputEventHandler)})),this.oncreate_element&&this.oncreate_element(this.element))}reposition(){this.element&&Ptt(this)}disposeElement(){if(this.element){$ot.forEach((t=>{this.element.removeEventListener(t,this.userInputEventHandler)})),O9.forEach((t=>{this.element.removeEventListener(t,this.userInputEventHandler)}));var t=this.element;t&&t.parentElement&&t.parentElement.removeChild(t),this.element=null}}ready(){super.ready(),!this.element&&this.createElement(),this.parent.isHTMLElement()?this.parent.element.appendChild(this.element):this.rootModel.getOverlay(this).appendChild(this.element),this.setElementProperties(this.element),this.reposition()}dispose(){this.disposeElement(this),super.dispose()}get hasTextProperty(){return!0}get textHidden(){return!0}get hidden(){return super.hidden}set hidden(t){super.hidden=t,this.element.style.display=t?"none":"block"}onchange(t,e){this.element&&this.setElementProperties(this.element),"position"in t&&this.onchangePosition(),this.reposition()}onchangePosition(){this.element&&("static"==this.position&&this.parent.isHTMLElement()?this.parent.element.appendChild(this.element):this.rootModel.getOverlay(this).appendChild(this.element))}isDescendible(t){return t.isHTMLElement()}};const Hot={x:1,y:1},Wot={boxSizing:"border-box",margin:"0px",position:"absolute",outline:"none"},qot={mutable:!1,resizable:!0,rotatable:!0,properties:[{type:"select",label:"position-origin",name:"origin",property:{options:[{display:"",value:""},{display:"left-top",value:"left-top"},{display:"center-top",value:"center-top"},{display:"right-top",value:"right-top"},{display:"left-middle",value:"left-middle"},{display:"center-middle",value:"center-middle"},{display:"right-middle",value:"right-middle"},{display:"left-bottom",value:"left-bottom"},{display:"center-bottom",value:"center-bottom"},{display:"right-bottom",value:"right-bottom"}]}},{type:"number",label:"offset-x",name:"offsetX"},{type:"number",label:"offset-y",name:"offsetY"},{type:"layout",label:"layout",name:"layoutOption"},{type:"checkbox",label:"closable",name:"closable"},{type:"checkbox",label:"draggable",name:"draggable"},{type:"checkbox",label:"minimizable",name:"minimizable"},{type:"checkbox",label:"minimized",name:"minimized"}],help:"scene/component/container"};class Vot extends(Got(ket)){constructor(){super(...arguments),Yot.set(this,null),this.startDragging=t=>{if(!this.state.draggable)return;t.preventDefault(),t.stopPropagation();let e=t.clientX,r=t.clientY;const{left:n,top:i}=this.bounds,o=this.rootModel.getOverlay(this).style.transform.match(/scale\(([^,]+),\s*([^)]+)\)/),a=o?parseFloat(o[1]):1,s=o?parseFloat(o[2]):a,c=t=>{t.preventDefault(),t.stopPropagation();const o=(t.clientX-e)/a,c=(t.clientY-r)/s;this.setState({left:n+o,top:i+c})},l=t=>{t.preventDefault(),t.stopPropagation(),document.removeEventListener("mousemove",c,!0),document.removeEventListener("mouseup",l,!0)};document.addEventListener("mousemove",c,!0),document.addEventListener("mouseup",l,!0)},this.toggleMinimizable=()=>{const{minimized:t}=this.state;this.setState("minimized",!t)},this.closeContainer=()=>{this.setState("hidden",!0)}}get tagName(){return"div"}get nature(){return qot}isPositionable(){return!0}setElementProperties(t){}get layout(){return iet.get(this.get("layout"))||oet}reposition(){if(this.element){var t=this,{id:e,class:r,scale:n=Hot}=t.state,{rotation:i=0,hidden:o}=t,{left:a,top:s,width:c,height:l}=t.bounds,u=c/2,h=l/2,f=t.element;f.hidden=o,e&&(f.id=e),r&&(f.className=r),Object.assign(f.style,Wot,{left:a+"px",top:s+"px",width:"0px",height:"0px",backgroundColor:"transparent"});var d=t.delta(),p=(n&&n.x||1)*d.sx,g=(n&&n.y||1)*d.sy,m=(i||0)+d.theta,v=d.tx||0,y=d.ty||0;f.style.transform=`translate(${v+u}px, ${y+h}px) rotate(${m}rad) translate(${-u}px, ${-h}px) scale(${p}, ${g}) perspective(1px)`}}set path(t){const{minimized:e}=this.state;var r=t[0],n=t[2];e?this.set({left:r.x,top:r.y,width:n.x-r.x}):this.set({left:r.x,top:r.y,width:n.x-r.x,height:n.y-r.y})}get path(){var{left:t=0,top:e=0,width:r=0,height:n=0}=this.state;return[{x:t,y:e},{x:t+r,y:e},{x:t+r,y:e+n},{x:t,y:e+n}]}get bounds(){const{left:t=0,top:e=0,width:r=0,height:n=0}=this.state;return{left:t,top:e,width:r,height:n}}set bounds(t){const{minimized:e}=this.state,{left:r=0,top:n=0,width:i=0,height:o=0}=t;let a={left:r,top:n};e?this.set({...a,width:i}):this.set({...a,width:i,height:o})}get origin(){return this.state.origin}get offset(){const{offsetX:t=0,offsetY:e=0}=this.state;return{x:t,y:e}}updatePosition(){if("left-top"===this.origin)return void(Rit(this,Yot,"f")&&(Rit(this,Yot,"f").disconnect(),Dit(this,Yot,null,"f")));const t=this.rootModel.auxOverlay,e=this.bounds,{width:r,height:n}="static"!==this.position?t.getBoundingClientRect():this.parent.bounds,{x:i,y:o}=function(t,e,r){const{left:n,top:i,width:o,height:a}=e,{width:s,height:c}=r;return t?{x:t.includes("left")?n:t.includes("center")?n+(o-s)/2:n+(o-s),y:t.includes("top")?i:t.includes("middle")?i+(a-c)/2:i+(a-c)}:{x:r.left,y:r.top}}(this.origin,{left:0,top:0,width:r,height:n},e),a=this.offset;this.bounds={left:i+(this.origin.includes("right")?-a.x:+a.x),top:o+(this.origin.includes("bottom")?-a.y:+a.y),width:e.width,height:e.height},Rit(this,Yot,"f")||(Dit(this,Yot,new ResizeObserver((()=>{requestAnimationFrame((()=>this.updatePosition()))})),"f"),Rit(this,Yot,"f").observe(t))}onchange(t,e){super.onchange(t,e),("draggable"in t||"minimizable"in t||"closable"in t||"minimized"in t||"width"in t||"height"in t||"origin"in t||"offsetX"in t||"offsetY"in t)&&this.onchangeButtons(),"minimized"in t&&this.onchangeMinimized(),("origin"in t||"offsetX"in t||"offsetY"in t)&&this.updatePosition()}ready(){super.ready(),this.updatePosition()}dispose(){Rit(this,Yot,"f")&&(Rit(this,Yot,"f").disconnect(),Dit(this,Yot,null,"f")),super.dispose()}createElement(){super.createElement(),this.onchangeButtons(),this.onchangeMinimized()}onchangeButtons(){if(!this.element)return;const{draggable:t,minimizable:e,closable:r,minimized:n}=this.state,{width:i}=this.bounds;this.element.style.setProperty("--container-width",`${i}px`),Fot(wot`
         <style>
           .buttons {
             position: absolute;