hengine/dist/hengine.min.js

A simple graphic engine for `canvasom`.

import{CanvasNode as t,CanvasRoot as e,Schedule as i,Event as n}from"canvasom";var d;!function(t){t.fill=t=>{const{paddingLeft:e,paddingTop:i}=t;return{width:t.containerWidth-e-t.paddingRight,height:t.containerHeight-i-t.paddingBottom,left:e,top:i,scale:1}},t.fixedWidth=t=>{const{targetWidth:e,paddingLeft:i,paddingTop:n}=t,d=t.containerWidth-i-t.paddingRight;return{width:d,height:t.containerHeight-n-t.paddingBottom,left:i,top:n,scale:d/e}},t.fixedHeight=t=>{const{targetHeight:e,paddingLeft:i,paddingTop:n}=t,d=t.containerWidth-i-t.paddingRight,a=t.containerHeight-n-t.paddingBottom;return{width:d,height:a,left:i,top:n,scale:a/e}},t.semifixed=e=>{const{targetWidth:i,targetHeight:n,paddingLeft:d,paddingTop:a}=e;return(e.containerWidth-d-e.paddingRight)/(e.containerHeight-a-e.paddingBottom)<i/n?t.fixedWidth(e):t.fixedHeight(e)},t.contain=t=>{const{targetWidth:e,targetHeight:i,paddingLeft:n,paddingTop:d}=t,a=t.containerWidth-n-t.paddingRight,h=t.containerHeight-d-t.paddingBottom;if(a/h<e/i){const t=a/e,s=i*t;return{width:a,height:s,left:n,top:(h-s)/2+d,scale:t}}{const t=h/i,s=e*t;return{width:s,height:h,left:(a-s)/2+n,top:d,scale:t}}},t.center=t=>{const{targetWidth:e,targetHeight:i,paddingLeft:n,paddingTop:d}=t;return{width:e,height:i,left:(t.containerWidth-n-t.paddingRight-e)/2+n,top:(t.containerHeight-d-t.paddingBottom-i)/2+d,scale:1}}}(d||(d={}));class Resizer{constructor(t){const e=t?.target||null;this.target=e,this.container=t?.container??(e&&e.parentElement);const i=t?.padding??0;this.paddingTop=t?.paddingTop??i,this.paddingRight=t?.paddingRight??i,this.paddingBottom=t?.paddingBottom??i,this.paddingLeft=t?.paddingLeft??i,this.active=t?.active??!0,this.width=t?.width??0,this.height=t?.height??0,this.sizing=t?.sizing??d.center,this.callback=t?.callback||null,this.updateSync=this.updateSync.bind(this),this.onResize=this.onResize.bind(this),this.update=((t,e)=>{let i=null;const debounceWrapper=(...t)=>{null!==i&&clearTimeout(i),i=setTimeout(e,debounceWrapper.debounceTimeout,...t)};return debounceWrapper.debounceTimeout=100,debounceWrapper})(0,this.updateSync),!1!==t?.autoResize&&(window.addEventListener("resize",this.onResize),window.addEventListener("orientationchange",this.onResize)),this.active&&this.update()}active;target;container;width;height;sizing;paddingTop;paddingRight;paddingBottom;paddingLeft;callback;updateSync(t){const{target:e,container:i}=this;if(!this.active||!e||!i)return;const{style:n}=e,d=i.getBoundingClientRect(),a=this.sizing({containerWidth:d.width,containerHeight:d.height,paddingTop:this.paddingTop,paddingRight:this.paddingRight,paddingBottom:this.paddingBottom,paddingLeft:this.paddingLeft,targetWidth:this.width,targetHeight:this.height});n.width=a.width+"px",n.height=a.height+"px",n.marginLeft=a.left+"px",n.marginTop=a.top+"px",this.callback?.(a),t?.(a)}update;onResize(){this.update()}}class SceneNode extends t{constructor(t){super({stretch:1,penetrable:!0,...t})}}class CanvasEngine extends e{constructor(t){super(t),this.onResize=this.onResize.bind(this);const e={width:this.renderer.width,height:this.renderer.height,target:this.renderer.canvas,sizing:d.contain,callback:this.onResize};t?.resizerOptions&&Object.assign(e,t.resizerOptions),this.resizer=new Resizer(e),this.renderer.autoStyle=!1}resizer;currentScene=null;onResize(t){const{scale:e}=t;this.renderer.resize(t.width/e,t.height/e),i.updateAndRender(this)}enter(t){const{currentScene:e}=this;if(e){const i=new n({name:"exit",stoppable:!0,cancelable:!0,data:{nextScene:t}});if(e.emit(i),i.canceled)return!1}if(t){const i=new n({name:"enter",stoppable:!0,cancelable:!0,data:{currentScene:e}});if(t.emit(i),i.canceled)return!1;this.appendChild(t)}return e&&this.removeChild(e),this.currentScene=t,(e||t)&&i.updateAndRender(this),!0}}export{CanvasEngine,Resizer,SceneNode,d as Sizing};