modern-canvas 0.10.2 → 0.10.3

package/dist/index.cjs

@@ -14577,6 +14577,7 @@ async function start(sleep = 100) {
 async function task(options) {
   const { debug = false, fonts, width, height, time = 0, data } = options;
   engine ??= new Engine({
+    pixelRatio: 1,
     width: 1,
     height: 1,
     preserveDrawingBuffer: true

package/dist/index.js

@@ -1027,4 +1027,4 @@ void main(void) {
   coord = twist(coord, radius - (progress * radius));
   coord = unmapCoord(coord);
   gl_FragColor = texture2D(sampler, coord);
-}`})),u.TwistTransition=km([W("TwistTransition")],u.TwistTransition);class oc extends Ut{install(e){const t=async r=>{const{decodeFrames:i}=await import("modern-gif");return await e.fetch(r).then(n=>n.arrayBuffer()).then(n=>i(n)).then(n=>new Fi(n.map(o=>({duration:o.delay,texture:new Js(o.data,o.width,o.height)}))))};return this.load=r=>e.loadBy(r,()=>t(r)),["image/gif"].forEach(r=>{e.register(r,t)}),e.gif=this,this}}class ac extends Ut{install(e){const t=r=>e.fetch(r).then(i=>i.json());return this.load=r=>e.loadBy(r,()=>t(r)),["json"].forEach(r=>{e.register(r,t)}),e.json=this,this}}class lc extends Ut{install(e){const t=async(r,i)=>(await import("lottie-web").then(o=>o.default)).loadAnimation({container:null,renderer:"canvas",rendererSettings:{context:i.getContext("2d")},loop:!1,autoplay:!1,animationData:await e.fetch(r).then(o=>o.json())});return this.load=(r,i)=>e.loadBy(r,()=>t(r,i)),["lottie"].forEach(r=>{e.register(r,t)}),e.lottie=this,this}}class cc extends Ut{install(e){const t=async r=>await e.fetch(r).then(i=>i.text());return this.load=r=>e.loadBy(r,()=>t(r)),e.text=this,this}}class hc extends Ut{install(e){const t=r=>e.fetchImageBitmap(r,{premultiplyAlpha:"premultiply"}).then(i=>new le(i));return this.load=r=>e.loadBy(r,()=>t(r)),["image/gif","image/jpeg","image/png","image/tiff","image/vnd.wap.wbmp","image/x-icon","image/x-jng","image/x-ms-bmp","image/svg+xml","image/webp"].forEach(r=>{e.register(r,t)}),e.texture=this,this}}class uc extends Ut{install(e){const t=r=>new Ga(r).load();return this.load=r=>e.loadBy(r,()=>t(r)),["video/3gpp","video/mpeg","video/quicktime","video/x-flv","video/x-mng","video/x-ms-asf","video/x-ms-wmv","video/x-msvideo","video/mp4"].forEach(r=>{e.register(r,t)}),e.video=this,this}}const Dm=Object.entries({"text/html":["html","htm","shtml"],"text/css":["css"],"text/xml":["xml"],"image/gif":["gif"],"image/jpeg":["jpeg","jpg"],"application/x-javascript":["js"],"application/atom+xml":["atom"],"application/rss+xml":["rss"],"text/mathml":["mml"],"text/plain":["txt"],"text/vnd.sun.j2me.app-descriptor":["jad"],"text/vnd.wap.wml":["wml"],"text/x-component":["htc"],"image/png":["png"],"image/tiff":["tif","tiff"],"image/vnd.wap.wbmp":["wbmp"],"image/x-icon":["ico"],"image/x-jng":["jng"],"image/x-ms-bmp":["bmp"],"image/svg+xml":["svg"],"image/webp":["webp"],"application/java-archive":["jar","war","ear"],"application/mac-binhex40":["hqx"],"application/msword":["doc"],"application/pdf":["pdf"],"application/postscript":["ps","eps","ai"],"application/rtf":["rtf"],"application/vnd.ms-excel":["xls"],"application/vnd.ms-powerpoint":["ppt"],"application/vnd.wap.wmlc":["wmlc"],"application/vnd.google-earth.kml+xml":["kml"],"application/vnd.google-earth.kmz":["kmz"],"application/x-7z-compressed":["7z"],"application/x-cocoa":["cco"],"application/x-java-archive-diff":["jardiff"],"application/x-java-jnlp-file":["jnlp"],"application/x-makeself":["run"],"application/x-perl":["pl","pm"],"application/x-pilot":["prc","pdb"],"application/x-rar-compressed":["rar"],"application/x-redhat-package-manager":["rpm"],"application/x-sea":["sea"],"application/x-shockwave-flash":["swf"],"application/x-stuffit":["sit"],"application/x-tcl":["tcl","tk"],"application/x-x509-ca-cert":["der","pem","crt"],"application/x-xpinstall":["xpi"],"application/xhtml+xml":["xhtml"],"application/zip":["zip"],"application/octet-stream":["bin","exe","dll","deb","dmg","eot","iso","img","msi","msp","msm"],"audio/midi":["mid","midi","kar"],"audio/mpeg":["mp3"],"audio/ogg":["ogg"],"audio/x-realaudio":["ra"],"video/3gpp":["3gpp","3gp"],"video/mpeg":["mpeg","mpg"],"video/quicktime":["mov"],"video/x-flv":["flv"],"video/x-mng":["mng"],"video/x-ms-asf":["asx","asf"],"video/x-ms-wmv":["wmv"],"video/x-msvideo":["avi"],"video/mp4":["m4v","mp4"]});function Im(s){for(const[e,t]of Dm)if(t.includes(s))return e}async function Um(s){let e;if(s.startsWith("data:"))e=s.match(/^data:(.+?);/)?.[1];else if(s.startsWith("http")){const t=s.split(/[#?]/)[0].split(".").pop()?.trim();t&&(e=Im(t))}return e??await fetch(s).then(t=>t.headers.get("Content-Type"))??""}const fs="WeakRef"in globalThis;class fc{defaultHandler=e=>this.fetch(e);_handlers=new Map;_handleing=new Map;_handled=new Map;_gc=fs?new FinalizationRegistry(e=>{const t=this.get(e);t&&"destroy"in t&&t.destroy(),this._handled.delete(e)}):void 0;constructor(){fs||Ce.on(this.gc.bind(this),{sort:2})}use(e){return e.install(this),this}register(e,t){return this._handlers.set(e,t),this}fetch(e){return fetch(e)}_fixSVG(e){let t;e.includes(";base64,")?t=atob(e.split(",")[1]):t=decodeURIComponent(e.split(",")[1]);const r=new DOMParser().parseFromString(t,"image/svg+xml").documentElement,i=r.getAttribute("width"),n=r.getAttribute("height"),o=i&&/^[\d.]+$/.test(i),a=n&&/^[\d.]+$/.test(n);if(!o||!a){const l=r.getAttribute("viewBox")?.split(" ").map(c=>Number(c));o||r.setAttribute("width",String(l?l[2]-l[0]:512)),a||r.setAttribute("height",String(l?l[3]-l[1]:512))}return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(r.outerHTML)}`}async fetchImageBitmap(e,t){return e.startsWith("http")?await this.fetch(e).then(r=>r.blob()).then(r=>r.type==="image/svg+xml"?r.text().then(i=>this.fetchImageBitmap(this._fixSVG(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(i)}`),t)):createImageBitmap(r,t)):(e.startsWith("data:image/svg+xml;")&&(e=this._fixSVG(e)),new Promise(r=>{const i=new Image;i.src=e,i.onload=()=>{i.decode().finally(()=>{r(i)})}}).then(r=>createImageBitmap(r,t)))}get(e){let t=this._handled.get(e);return fs&&t instanceof WeakRef&&(t=t.deref(),t||this._handleing.delete(e)),t}set(e,t){let r=t;fs&&typeof t=="object"&&(this._gc.register(t,e),r=new WeakRef(t)),this._handled.set(e,r)}async loadBy(e,t){const r=this.get(e)??this._handleing.get(e);if(r)return r;const i=t().then(n=>(this.set(e,n),n)).finally(()=>{this._handleing.delete(e)});return this._handleing.set(e,i),i}async load(e,t){return this.loadBy(e,async()=>{const r=await Um(e);return(this._handlers.get(r)??this.defaultHandler)(e,t)})}async waitUntilLoad(){await Promise.all(Array.from(this._handleing.values()).map(e=>e.catch(t=>{console.error(t)})))}gc(){this._handled.forEach((e,t)=>{const r=this.get(t);r&&"destroy"in r&&r.destroy()}),this._handled.clear()}}const Ze=new fc().use(new fa).use(new oc).use(new ac).use(new lc).use(new cc).use(new hc).use(new uc);var Bm=Object.getOwnPropertyDescriptor,Lm=(s,e,t,r)=>{for(var i=r>1?void 0:r?Bm(e,t):e,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=o(i)||i);return i};u.CanvasItemEditor=class extends u.Control{_pointerStart;_pointerOffset;selected;dragging;hovered;hover=new u.Element2D({name:"hover",internalMode:"back",style:{visibility:"hidden",outlineStyle:"solid",outlineColor:"#00FF00FF",outlineWidth:2,pointerEvents:"none"}});transformRect=new Zn({name:"transformRect",internalMode:"back",style:{visibility:"hidden",pointerEvents:"none"}});scaler=new u.Scaler({name:"Scaler",internalMode:"back"}).on("updateScale",e=>{this.ruler.gapScale=e,this._updateScrollbars(),this._updateSelectionRect()});xScrollBar=new u.XScrollBar({name:"XScrollBar",internalMode:"back",style:{visibility:"hidden"}});yScrollBar=new u.YScrollBar({name:"yScrollBar",internalMode:"back",style:{visibility:"hidden"}});drawboard=new u.Element2D({name:"drawboard",style:{width:500,height:500,backgroundColor:"#00FFFFFF",pointerEvents:"none"}},[this.scaler]);ruler=new u.Ruler({name:"ruler",offsetX:100,offsetY:100,style:{pointerEvents:"none"}},[this.drawboard,this.hover,this.transformRect,this.xScrollBar,this.yScrollBar]);constructor(){super(),this._onPointerdown=this._onPointerdown.bind(this),this._onPointermove=this._onPointermove.bind(this),this._onPointerup=this._onPointerup.bind(this),this.append(this.ruler)}_updateStyleProperty(e,t,r){switch(super._updateStyleProperty(e,t,r),e){case"width":this.drawboard.style.left=(this.size.width-this.drawboard.size.width)/2,this.ruler.offsetX=this.drawboard.style.left;break;case"height":this.drawboard.style.top=(this.size.height-this.drawboard.size.height)/2,this.ruler.offsetY=this.drawboard.style.top;break}}_guiInput(e,t){switch(super._guiInput(e,t),t){case"pointerdown":this._onPointerdown(e);break;case"pointermove":this._onPointermove(e);break;case"pointerup":this._onPointerup();break}}_onPointerdown(e){let t=e.target;t?.equal(this)&&(t=void 0),t?.equal(this.transformRect)&&(t=this.selected),this._pointerOffset={x:e.offsetX,y:e.offsetY},this.selected=t,this.dragging=t,t instanceof u.Element2D?this._pointerStart=t.style.clone():this._pointerStart=void 0,this._updateHover(),this._updateSelectionRect()}_onPointermove(e){let t=e.target;t?.equal(this)&&(t=void 0),t?.equal(this.transformRect)&&(t=this.selected);const{selected:r,dragging:i,_pointerStart:n,_pointerOffset:o}=this;r&&t?.equal(r)?this.hovered=void 0:this.hovered=t;const a=o?{x:e.offsetX-o.x,y:e.offsetY-o.y}:{x:0,y:0};i&&n&&(i.style.left=n.left+a.x/this.scaler.scale,i.style.top=n.top+a.y/this.scaler.scale,i.update()),this._updateHover(),this._updateSelectionRect()}_onPointerup(){this.dragging=void 0,this._updateHover(),this._updateSelectionRect()}_copyGlobalTransform(e,t){e.style.visibility="visible",e.style.width=t.globalScale.x*t.size.x,e.style.height=t.globalScale.y*t.size.y,e.style.left=t.globalPosition.x,e.style.top=t.globalPosition.y,e.style.rotate=t.globalRotation,e.update()}_updateHover(){const e=this.hovered;e instanceof u.Element2D?(this.hover.style.visibility="visible",this._copyGlobalTransform(this.hover,e),this.hover.requestRedraw()):this.hover.style.visibility="hidden"}_updateSelectionRect(){this.selected?(this.transformRect.style.visibility="visible",this._copyGlobalTransform(this.transformRect,this.selected)):this.transformRect.style.visibility="hidden"}_updateScrollbars(){const e=this.ruler.gapScale,t=this.drawboard.size.height*e,r=this.drawboard.size.width*e;t>this.size.height?(this.yScrollBar.style.visibility="visible",this.yScrollBar.maxValue=t,this.yScrollBar.page=this.size.height):this.yScrollBar.style.visibility="hidden",r>this.size.width?(this.xScrollBar.style.visibility="visible",this.xScrollBar.maxValue=r,this.xScrollBar.page=this.size.width):this.xScrollBar.style.visibility="hidden"}},u.CanvasItemEditor=Lm([W("CanvasItemEditor")],u.CanvasItemEditor);var Fm=Object.defineProperty,Qn=(s,e,t,r)=>{for(var i=void 0,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=o(e,t,i)||i);return i&&Fm(e,t,i),i};const ar={alpha:!0,stencil:!0,antialias:!1,premultipliedAlpha:!0,preserveDrawingBuffer:!1,powerPreference:"default"};class _i extends rr{renderer;get view(){return this.renderer.view}get gl(){return this.renderer.gl}get screen(){return this.renderer.screen}get width(){return this.screen.width}get height(){return this.screen.height}get pixelRatio(){return this.renderer.pixelRatio}set pixelRatio(e){this.renderer.pixelRatio=e,this.resize(this.width,this.height)}_resizeObserver=ko?new ResizeObserver(e=>{const t=e[0];if(t.target===this.view){const{inlineSize:r,blockSize:i}=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.resize(r,i)}}):void 0;constructor(e={}){const{view:t,width:r,height:i,pixelRatio:n=Rs,autoResize:o}=e;super(),this.renderer=new ua(t,{alpha:ar.alpha??e.alpha,stencil:ar.stencil??e.stencil,antialias:ar.antialias??e.antialias,premultipliedAlpha:ar.premultipliedAlpha??e.premultipliedAlpha,preserveDrawingBuffer:ar.preserveDrawingBuffer??e.preserveDrawingBuffer,powerPreference:ar.powerPreference??e.powerPreference}),this._setupInput(),this.pixelRatio=n,o?!t&&this.renderer.view&&(this.renderer.view.style.width="100%",this.renderer.view.style.height="100%"):this.resize(r||this.gl.drawingBufferWidth||this.view?.clientWidth||200,i||this.gl.drawingBufferHeight||this.view?.clientHeight||200,!t),this.setProperties(e)}_updateProperty(e,t,r){switch(super._updateProperty(e,t,r),e){case"autoResize":this.view&&(this.autoResize?this._resizeObserver?.observe(this.view):this._resizeObserver?.unobserve(this.view));break;case"autoStart":this.autoStart&&this.start();break}}_setupInput(){return this.view&&(this.input.setTarget(this.view),["pointerdown","pointerover","pointermove","pointerup","wheel","keydown","keypress","keyup"].forEach(e=>{this.input.on(e,t=>{this.root.input(t,e),this.emit(e,t)})})),this}resize(e,t,r=!1){return this.renderer.resize(e,t,r),this.root.width=e,this.root.height=t,this.root.requestUpload(),this.render(),this}nextTick(){return Cs()}async waitUntilLoad(){await Ze.waitUntilLoad(),await this.nextTick()}async waitAndRender(e=0){await Ze.waitUntilLoad(),this._process(e),await this.nextTick(),this._render(this.renderer)}render(e=0){this._process(e),this._render(this.renderer)}async start(){await this.waitAndRender(),super.start(e=>{this._process(e),this._render(this.renderer)})}toPixels(){return this.renderer.toPixels()}toImageData(){return new ImageData(this.toPixels(),this.gl.drawingBufferWidth,this.gl.drawingBufferHeight)}toCanvas2D(){const e=this.toImageData(),t=document.createElement("canvas");t.width=e.width,t.height=e.height;const r=t.getContext("2d");r&&(r.fillStyle="rgba(0, 0, 0, 0)",r.clearRect(0,0,t.width,t.height),r.putImageData(e,0,0));const i=document.createElement("canvas");i.width=this.width,i.height=this.height;const n=i.getContext("2d");return n&&(n.fillStyle="rgba(0, 0, 0, 0)",n.clearRect(0,0,i.width,i.height),n.drawImage(t,0,0,t.width,t.height,0,0,i.width,i.height)),i}destroy(){this._resizeObserver?.disconnect(),this.renderer.destroy(),super.destroy()}}Qn([v({alias:"root.msaa"})],_i.prototype,"msaa"),Qn([v({fallback:!1})],_i.prototype,"autoResize"),Qn([v({fallback:!1})],_i.prototype,"autoStart");let ot;const eo=[];let to=!1;async function Nm(s=100){if(!to){for(to=!0;eo.length;){const e=eo.shift();if(e)try{await e()}catch(t){console.error(t)}else await new Promise(t=>setTimeout(t,s))}to=!1}}async function $m(s){const{debug:e=!1,fonts:t,width:r,height:i,time:n=0,data:o}=s;return ot??=new _i({width:1,height:1,preserveDrawingBuffer:!0}),ot.debug=e,ot.fonts=t,ot.root.removeChildren(),ot.timeline.currentTime=n,ot.resize(r,i,!0),(Array.isArray(o)?o:[o]).forEach(a=>{a instanceof u.Node?(a.parent=void 0,ot.root.appendChild(a)):ot.root.appendChild(u.Node.parse(a))}),await s.onBeforeRender?.(ot),await ot.waitAndRender(),ot.toCanvas2D()}async function zm(s){return new Promise(e=>{eo.push(async()=>e(await $m(s))),Nm()})}u.AnimatedTexture=Fi,u.Assets=fc,u.AudioPipeline=Jn,u.AudioProcessor=Vg,u.AudioSpectrum=Kg,u.BaseElement2DBackground=In,u.BaseElement2DFill=ke,u.BaseElement2DForeground=Un,u.BaseElement2DOutline=ir,u.BaseElement2DShadow=sr,u.BaseElement2DShape=nr,u.BaseElement2DStyle=pi,u.BaseElement2DText=_t,u.CanvasContext=ja,u.CanvasTexture=Ni,u.Color=et,u.ColorMatrix=Bs,u.ColorTexture=lf,u.CoreObject=Pt,u.DEG_TO_RAD=Ho,u.DEVICE_PIXEL_RATIO=Rs,u.EffectMaterial=zr,u.Element2DStyle=Vn,u.Engine=_i,u.FlexElement2DStyle=Xl,u.FlexLayout=ls,u.FontLoader=fa,u.Geometry=Li,u.GifLoader=oc,u.GradientTexture=Gr,u.HTMLAudio=rc,u.HTMLAudioContext=hs,u.HTMLSound=yi,u.IN_BROWSER=Ir,u.ImageTexture=hf,u.IndexBuffer=gr,u.Input=Wo,u.InputEvent=Ur,u.JsonLoader=ac,u.KeyboardInputEvent=Vo,u.Loader=Ut,u.LottieLoader=lc,u.MainLoop=Mi,u.Material=se,u.Matrix=ut,u.Matrix2=Th,u.Matrix3=Ls,u.Matrix4=Xo,u.Meta=Wa,u.MouseInputEvent=Us,u.PI=Ei,u.PI_2=Fe,u.PixelsTexture=Js,u.PointerInputEvent=Go,u.Projection2D=Ko,u.QuadGeometry=Qu,u.QuadUvGeometry=Q,u.RAD_TO_DEG=Sh,u.RawWeakMap=Is,u.Rect2=It,u.RefCounted=qo,u.Renderer=Ai,u.Resource=St,u.SUPPORTS_AUDIO_CONTEXT=As,u.SUPPORTS_CLICK_EVENTS=Do,u.SUPPORTS_CREATE_IMAGE_BITMAP=Ms,u.SUPPORTS_IMAGE_BITMAP=Oo,u.SUPPORTS_MOUSE_EVENTS=vh,u.SUPPORTS_OFFLINE_AUDIO_CONTEXT=ks,u.SUPPORTS_POINTER_EVENTS=hr,u.SUPPORTS_RESIZE_OBSERVER=ko,u.SUPPORTS_TOUCH_EVENTS=xt,u.SUPPORTS_WEBGL2=Ao,u.SUPPORTS_WEBKIT_AUDIO_CONTEXT=Os,u.SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT=Io,u.SUPPORTS_WEB_AUDIO=Uo,u.SUPPORTS_WHEEL_EVENTS=Ro,u.SceneTree=rr,u.TextLoader=cc,u.Texture2D=le,u.TextureLoader=hc,u.TextureRect2D=Kn,u.Ticker=Ce,u.Transform2D=ve,u.TransformRect2D=Zn,u.UvGeometry=sf,u.UvMaterial=Vr,u.Vector=tt,u.Vector2=de,u.Vector3=Eh,u.Vector4=Yo,u.VertexAttribute=je,u.VertexBuffer=Et,u.VideoLoader=uc,u.VideoTexture=Ga,u.ViewportTexture=en,u.WebAudio=sc,u.WebAudioContext=Wt,u.WebGLBatch2DModule=ta,u.WebGLBlendMode=ur,u.WebGLBufferModule=ra,u.WebGLFramebufferModule=ia,u.WebGLMaskModule=sa,u.WebGLModule=Ye,u.WebGLProgramModule=na,u.WebGLRenderer=ua,u.WebGLScissorModule=oa,u.WebGLState=Xt,u.WebGLStateModule=ea,u.WebGLStencilModule=aa,u.WebGLTextureModule=la,u.WebGLVertexArrayModule=ca,u.WebGLViewportModule=ha,u.WebSound=ic,u.WheelInputEvent=jo,u.alignMap=or,u.assets=Ze,u.boxSizingMap=Yn,u.clamp=Ge,u.clampFrag=Dl,u.createHTMLCanvas=No,u.createNode=dh,u.crossOrigin=zo,u.cubicBezier=Er,u.curves=Ch,u.customNode=W,u.customNodes=Ti,u.defaultOptions=ar,u.determineCrossOrigin=$o,u.directionMap=as,u.displayMap=Gn,u.ease=Jl,u.easeIn=Ql,u.easeInOut=tc,u.easeOut=ec,u.edgeMap=fe,u.flexDirectionMap=jn,u.flexWrapMap=Wn,u.frag=Rl,u.getDefaultCssPropertyValue=Es,u.gutterMap=Hl,u.isCanvasElement=Lo,u.isElementNode=Ds,u.isImageElement=bh,u.isPow2=Ts,u.isVideoElement=Bo,u.isWebgl2=Fo,u.justifyMap=qn,u.lerp=he,u.linear=Zl,u.log2=Ns,u.mapWebGLBlendModes=Qo,u.nextPow2=Fs,u.nextTick=Cs,u.overflowMap=Xn,u.parseCSSFilter=lp,u.parseCSSTransform=ml,u.parseCSSTransformOrigin=yl,u.parseCssFunctions=Dr,u.parseCssProperty=Rr,u.positionTypeMap=Hn,u.render=zm,u.timingFunctions=cs,u.uid=Eo,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+}`})),u.TwistTransition=km([W("TwistTransition")],u.TwistTransition);class oc extends Ut{install(e){const t=async r=>{const{decodeFrames:i}=await import("modern-gif");return await e.fetch(r).then(n=>n.arrayBuffer()).then(n=>i(n)).then(n=>new Fi(n.map(o=>({duration:o.delay,texture:new Js(o.data,o.width,o.height)}))))};return this.load=r=>e.loadBy(r,()=>t(r)),["image/gif"].forEach(r=>{e.register(r,t)}),e.gif=this,this}}class ac extends Ut{install(e){const t=r=>e.fetch(r).then(i=>i.json());return this.load=r=>e.loadBy(r,()=>t(r)),["json"].forEach(r=>{e.register(r,t)}),e.json=this,this}}class lc extends Ut{install(e){const t=async(r,i)=>(await import("lottie-web").then(o=>o.default)).loadAnimation({container:null,renderer:"canvas",rendererSettings:{context:i.getContext("2d")},loop:!1,autoplay:!1,animationData:await e.fetch(r).then(o=>o.json())});return this.load=(r,i)=>e.loadBy(r,()=>t(r,i)),["lottie"].forEach(r=>{e.register(r,t)}),e.lottie=this,this}}class cc extends Ut{install(e){const t=async r=>await e.fetch(r).then(i=>i.text());return this.load=r=>e.loadBy(r,()=>t(r)),e.text=this,this}}class hc extends Ut{install(e){const t=r=>e.fetchImageBitmap(r,{premultiplyAlpha:"premultiply"}).then(i=>new le(i));return this.load=r=>e.loadBy(r,()=>t(r)),["image/gif","image/jpeg","image/png","image/tiff","image/vnd.wap.wbmp","image/x-icon","image/x-jng","image/x-ms-bmp","image/svg+xml","image/webp"].forEach(r=>{e.register(r,t)}),e.texture=this,this}}class uc extends Ut{install(e){const t=r=>new Ga(r).load();return this.load=r=>e.loadBy(r,()=>t(r)),["video/3gpp","video/mpeg","video/quicktime","video/x-flv","video/x-mng","video/x-ms-asf","video/x-ms-wmv","video/x-msvideo","video/mp4"].forEach(r=>{e.register(r,t)}),e.video=this,this}}const Dm=Object.entries({"text/html":["html","htm","shtml"],"text/css":["css"],"text/xml":["xml"],"image/gif":["gif"],"image/jpeg":["jpeg","jpg"],"application/x-javascript":["js"],"application/atom+xml":["atom"],"application/rss+xml":["rss"],"text/mathml":["mml"],"text/plain":["txt"],"text/vnd.sun.j2me.app-descriptor":["jad"],"text/vnd.wap.wml":["wml"],"text/x-component":["htc"],"image/png":["png"],"image/tiff":["tif","tiff"],"image/vnd.wap.wbmp":["wbmp"],"image/x-icon":["ico"],"image/x-jng":["jng"],"image/x-ms-bmp":["bmp"],"image/svg+xml":["svg"],"image/webp":["webp"],"application/java-archive":["jar","war","ear"],"application/mac-binhex40":["hqx"],"application/msword":["doc"],"application/pdf":["pdf"],"application/postscript":["ps","eps","ai"],"application/rtf":["rtf"],"application/vnd.ms-excel":["xls"],"application/vnd.ms-powerpoint":["ppt"],"application/vnd.wap.wmlc":["wmlc"],"application/vnd.google-earth.kml+xml":["kml"],"application/vnd.google-earth.kmz":["kmz"],"application/x-7z-compressed":["7z"],"application/x-cocoa":["cco"],"application/x-java-archive-diff":["jardiff"],"application/x-java-jnlp-file":["jnlp"],"application/x-makeself":["run"],"application/x-perl":["pl","pm"],"application/x-pilot":["prc","pdb"],"application/x-rar-compressed":["rar"],"application/x-redhat-package-manager":["rpm"],"application/x-sea":["sea"],"application/x-shockwave-flash":["swf"],"application/x-stuffit":["sit"],"application/x-tcl":["tcl","tk"],"application/x-x509-ca-cert":["der","pem","crt"],"application/x-xpinstall":["xpi"],"application/xhtml+xml":["xhtml"],"application/zip":["zip"],"application/octet-stream":["bin","exe","dll","deb","dmg","eot","iso","img","msi","msp","msm"],"audio/midi":["mid","midi","kar"],"audio/mpeg":["mp3"],"audio/ogg":["ogg"],"audio/x-realaudio":["ra"],"video/3gpp":["3gpp","3gp"],"video/mpeg":["mpeg","mpg"],"video/quicktime":["mov"],"video/x-flv":["flv"],"video/x-mng":["mng"],"video/x-ms-asf":["asx","asf"],"video/x-ms-wmv":["wmv"],"video/x-msvideo":["avi"],"video/mp4":["m4v","mp4"]});function Im(s){for(const[e,t]of Dm)if(t.includes(s))return e}async function Um(s){let e;if(s.startsWith("data:"))e=s.match(/^data:(.+?);/)?.[1];else if(s.startsWith("http")){const t=s.split(/[#?]/)[0].split(".").pop()?.trim();t&&(e=Im(t))}return e??await fetch(s).then(t=>t.headers.get("Content-Type"))??""}const fs="WeakRef"in globalThis;class fc{defaultHandler=e=>this.fetch(e);_handlers=new Map;_handleing=new Map;_handled=new Map;_gc=fs?new FinalizationRegistry(e=>{const t=this.get(e);t&&"destroy"in t&&t.destroy(),this._handled.delete(e)}):void 0;constructor(){fs||Ce.on(this.gc.bind(this),{sort:2})}use(e){return e.install(this),this}register(e,t){return this._handlers.set(e,t),this}fetch(e){return fetch(e)}_fixSVG(e){let t;e.includes(";base64,")?t=atob(e.split(",")[1]):t=decodeURIComponent(e.split(",")[1]);const r=new DOMParser().parseFromString(t,"image/svg+xml").documentElement,i=r.getAttribute("width"),n=r.getAttribute("height"),o=i&&/^[\d.]+$/.test(i),a=n&&/^[\d.]+$/.test(n);if(!o||!a){const l=r.getAttribute("viewBox")?.split(" ").map(c=>Number(c));o||r.setAttribute("width",String(l?l[2]-l[0]:512)),a||r.setAttribute("height",String(l?l[3]-l[1]:512))}return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(r.outerHTML)}`}async fetchImageBitmap(e,t){return e.startsWith("http")?await this.fetch(e).then(r=>r.blob()).then(r=>r.type==="image/svg+xml"?r.text().then(i=>this.fetchImageBitmap(this._fixSVG(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(i)}`),t)):createImageBitmap(r,t)):(e.startsWith("data:image/svg+xml;")&&(e=this._fixSVG(e)),new Promise(r=>{const i=new Image;i.src=e,i.onload=()=>{i.decode().finally(()=>{r(i)})}}).then(r=>createImageBitmap(r,t)))}get(e){let t=this._handled.get(e);return fs&&t instanceof WeakRef&&(t=t.deref(),t||this._handleing.delete(e)),t}set(e,t){let r=t;fs&&typeof t=="object"&&(this._gc.register(t,e),r=new WeakRef(t)),this._handled.set(e,r)}async loadBy(e,t){const r=this.get(e)??this._handleing.get(e);if(r)return r;const i=t().then(n=>(this.set(e,n),n)).finally(()=>{this._handleing.delete(e)});return this._handleing.set(e,i),i}async load(e,t){return this.loadBy(e,async()=>{const r=await Um(e);return(this._handlers.get(r)??this.defaultHandler)(e,t)})}async waitUntilLoad(){await Promise.all(Array.from(this._handleing.values()).map(e=>e.catch(t=>{console.error(t)})))}gc(){this._handled.forEach((e,t)=>{const r=this.get(t);r&&"destroy"in r&&r.destroy()}),this._handled.clear()}}const Ze=new fc().use(new fa).use(new oc).use(new ac).use(new lc).use(new cc).use(new hc).use(new uc);var Bm=Object.getOwnPropertyDescriptor,Lm=(s,e,t,r)=>{for(var i=r>1?void 0:r?Bm(e,t):e,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=o(i)||i);return i};u.CanvasItemEditor=class extends u.Control{_pointerStart;_pointerOffset;selected;dragging;hovered;hover=new u.Element2D({name:"hover",internalMode:"back",style:{visibility:"hidden",outlineStyle:"solid",outlineColor:"#00FF00FF",outlineWidth:2,pointerEvents:"none"}});transformRect=new Zn({name:"transformRect",internalMode:"back",style:{visibility:"hidden",pointerEvents:"none"}});scaler=new u.Scaler({name:"Scaler",internalMode:"back"}).on("updateScale",e=>{this.ruler.gapScale=e,this._updateScrollbars(),this._updateSelectionRect()});xScrollBar=new u.XScrollBar({name:"XScrollBar",internalMode:"back",style:{visibility:"hidden"}});yScrollBar=new u.YScrollBar({name:"yScrollBar",internalMode:"back",style:{visibility:"hidden"}});drawboard=new u.Element2D({name:"drawboard",style:{width:500,height:500,backgroundColor:"#00FFFFFF",pointerEvents:"none"}},[this.scaler]);ruler=new u.Ruler({name:"ruler",offsetX:100,offsetY:100,style:{pointerEvents:"none"}},[this.drawboard,this.hover,this.transformRect,this.xScrollBar,this.yScrollBar]);constructor(){super(),this._onPointerdown=this._onPointerdown.bind(this),this._onPointermove=this._onPointermove.bind(this),this._onPointerup=this._onPointerup.bind(this),this.append(this.ruler)}_updateStyleProperty(e,t,r){switch(super._updateStyleProperty(e,t,r),e){case"width":this.drawboard.style.left=(this.size.width-this.drawboard.size.width)/2,this.ruler.offsetX=this.drawboard.style.left;break;case"height":this.drawboard.style.top=(this.size.height-this.drawboard.size.height)/2,this.ruler.offsetY=this.drawboard.style.top;break}}_guiInput(e,t){switch(super._guiInput(e,t),t){case"pointerdown":this._onPointerdown(e);break;case"pointermove":this._onPointermove(e);break;case"pointerup":this._onPointerup();break}}_onPointerdown(e){let t=e.target;t?.equal(this)&&(t=void 0),t?.equal(this.transformRect)&&(t=this.selected),this._pointerOffset={x:e.offsetX,y:e.offsetY},this.selected=t,this.dragging=t,t instanceof u.Element2D?this._pointerStart=t.style.clone():this._pointerStart=void 0,this._updateHover(),this._updateSelectionRect()}_onPointermove(e){let t=e.target;t?.equal(this)&&(t=void 0),t?.equal(this.transformRect)&&(t=this.selected);const{selected:r,dragging:i,_pointerStart:n,_pointerOffset:o}=this;r&&t?.equal(r)?this.hovered=void 0:this.hovered=t;const a=o?{x:e.offsetX-o.x,y:e.offsetY-o.y}:{x:0,y:0};i&&n&&(i.style.left=n.left+a.x/this.scaler.scale,i.style.top=n.top+a.y/this.scaler.scale,i.update()),this._updateHover(),this._updateSelectionRect()}_onPointerup(){this.dragging=void 0,this._updateHover(),this._updateSelectionRect()}_copyGlobalTransform(e,t){e.style.visibility="visible",e.style.width=t.globalScale.x*t.size.x,e.style.height=t.globalScale.y*t.size.y,e.style.left=t.globalPosition.x,e.style.top=t.globalPosition.y,e.style.rotate=t.globalRotation,e.update()}_updateHover(){const e=this.hovered;e instanceof u.Element2D?(this.hover.style.visibility="visible",this._copyGlobalTransform(this.hover,e),this.hover.requestRedraw()):this.hover.style.visibility="hidden"}_updateSelectionRect(){this.selected?(this.transformRect.style.visibility="visible",this._copyGlobalTransform(this.transformRect,this.selected)):this.transformRect.style.visibility="hidden"}_updateScrollbars(){const e=this.ruler.gapScale,t=this.drawboard.size.height*e,r=this.drawboard.size.width*e;t>this.size.height?(this.yScrollBar.style.visibility="visible",this.yScrollBar.maxValue=t,this.yScrollBar.page=this.size.height):this.yScrollBar.style.visibility="hidden",r>this.size.width?(this.xScrollBar.style.visibility="visible",this.xScrollBar.maxValue=r,this.xScrollBar.page=this.size.width):this.xScrollBar.style.visibility="hidden"}},u.CanvasItemEditor=Lm([W("CanvasItemEditor")],u.CanvasItemEditor);var Fm=Object.defineProperty,Qn=(s,e,t,r)=>{for(var i=void 0,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=o(e,t,i)||i);return i&&Fm(e,t,i),i};const ar={alpha:!0,stencil:!0,antialias:!1,premultipliedAlpha:!0,preserveDrawingBuffer:!1,powerPreference:"default"};class _i extends rr{renderer;get view(){return this.renderer.view}get gl(){return this.renderer.gl}get screen(){return this.renderer.screen}get width(){return this.screen.width}get height(){return this.screen.height}get pixelRatio(){return this.renderer.pixelRatio}set pixelRatio(e){this.renderer.pixelRatio=e,this.resize(this.width,this.height)}_resizeObserver=ko?new ResizeObserver(e=>{const t=e[0];if(t.target===this.view){const{inlineSize:r,blockSize:i}=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.resize(r,i)}}):void 0;constructor(e={}){const{view:t,width:r,height:i,pixelRatio:n=Rs,autoResize:o}=e;super(),this.renderer=new ua(t,{alpha:ar.alpha??e.alpha,stencil:ar.stencil??e.stencil,antialias:ar.antialias??e.antialias,premultipliedAlpha:ar.premultipliedAlpha??e.premultipliedAlpha,preserveDrawingBuffer:ar.preserveDrawingBuffer??e.preserveDrawingBuffer,powerPreference:ar.powerPreference??e.powerPreference}),this._setupInput(),this.pixelRatio=n,o?!t&&this.renderer.view&&(this.renderer.view.style.width="100%",this.renderer.view.style.height="100%"):this.resize(r||this.gl.drawingBufferWidth||this.view?.clientWidth||200,i||this.gl.drawingBufferHeight||this.view?.clientHeight||200,!t),this.setProperties(e)}_updateProperty(e,t,r){switch(super._updateProperty(e,t,r),e){case"autoResize":this.view&&(this.autoResize?this._resizeObserver?.observe(this.view):this._resizeObserver?.unobserve(this.view));break;case"autoStart":this.autoStart&&this.start();break}}_setupInput(){return this.view&&(this.input.setTarget(this.view),["pointerdown","pointerover","pointermove","pointerup","wheel","keydown","keypress","keyup"].forEach(e=>{this.input.on(e,t=>{this.root.input(t,e),this.emit(e,t)})})),this}resize(e,t,r=!1){return this.renderer.resize(e,t,r),this.root.width=e,this.root.height=t,this.root.requestUpload(),this.render(),this}nextTick(){return Cs()}async waitUntilLoad(){await Ze.waitUntilLoad(),await this.nextTick()}async waitAndRender(e=0){await Ze.waitUntilLoad(),this._process(e),await this.nextTick(),this._render(this.renderer)}render(e=0){this._process(e),this._render(this.renderer)}async start(){await this.waitAndRender(),super.start(e=>{this._process(e),this._render(this.renderer)})}toPixels(){return this.renderer.toPixels()}toImageData(){return new ImageData(this.toPixels(),this.gl.drawingBufferWidth,this.gl.drawingBufferHeight)}toCanvas2D(){const e=this.toImageData(),t=document.createElement("canvas");t.width=e.width,t.height=e.height;const r=t.getContext("2d");r&&(r.fillStyle="rgba(0, 0, 0, 0)",r.clearRect(0,0,t.width,t.height),r.putImageData(e,0,0));const i=document.createElement("canvas");i.width=this.width,i.height=this.height;const n=i.getContext("2d");return n&&(n.fillStyle="rgba(0, 0, 0, 0)",n.clearRect(0,0,i.width,i.height),n.drawImage(t,0,0,t.width,t.height,0,0,i.width,i.height)),i}destroy(){this._resizeObserver?.disconnect(),this.renderer.destroy(),super.destroy()}}Qn([v({alias:"root.msaa"})],_i.prototype,"msaa"),Qn([v({fallback:!1})],_i.prototype,"autoResize"),Qn([v({fallback:!1})],_i.prototype,"autoStart");let ot;const eo=[];let to=!1;async function Nm(s=100){if(!to){for(to=!0;eo.length;){const e=eo.shift();if(e)try{await e()}catch(t){console.error(t)}else await new Promise(t=>setTimeout(t,s))}to=!1}}async function $m(s){const{debug:e=!1,fonts:t,width:r,height:i,time:n=0,data:o}=s;return ot??=new _i({pixelRatio:1,width:1,height:1,preserveDrawingBuffer:!0}),ot.debug=e,ot.fonts=t,ot.root.removeChildren(),ot.timeline.currentTime=n,ot.resize(r,i,!0),(Array.isArray(o)?o:[o]).forEach(a=>{a instanceof u.Node?(a.parent=void 0,ot.root.appendChild(a)):ot.root.appendChild(u.Node.parse(a))}),await s.onBeforeRender?.(ot),await ot.waitAndRender(),ot.toCanvas2D()}async function zm(s){return new Promise(e=>{eo.push(async()=>e(await $m(s))),Nm()})}u.AnimatedTexture=Fi,u.Assets=fc,u.AudioPipeline=Jn,u.AudioProcessor=Vg,u.AudioSpectrum=Kg,u.BaseElement2DBackground=In,u.BaseElement2DFill=ke,u.BaseElement2DForeground=Un,u.BaseElement2DOutline=ir,u.BaseElement2DShadow=sr,u.BaseElement2DShape=nr,u.BaseElement2DStyle=pi,u.BaseElement2DText=_t,u.CanvasContext=ja,u.CanvasTexture=Ni,u.Color=et,u.ColorMatrix=Bs,u.ColorTexture=lf,u.CoreObject=Pt,u.DEG_TO_RAD=Ho,u.DEVICE_PIXEL_RATIO=Rs,u.EffectMaterial=zr,u.Element2DStyle=Vn,u.Engine=_i,u.FlexElement2DStyle=Xl,u.FlexLayout=ls,u.FontLoader=fa,u.Geometry=Li,u.GifLoader=oc,u.GradientTexture=Gr,u.HTMLAudio=rc,u.HTMLAudioContext=hs,u.HTMLSound=yi,u.IN_BROWSER=Ir,u.ImageTexture=hf,u.IndexBuffer=gr,u.Input=Wo,u.InputEvent=Ur,u.JsonLoader=ac,u.KeyboardInputEvent=Vo,u.Loader=Ut,u.LottieLoader=lc,u.MainLoop=Mi,u.Material=se,u.Matrix=ut,u.Matrix2=Th,u.Matrix3=Ls,u.Matrix4=Xo,u.Meta=Wa,u.MouseInputEvent=Us,u.PI=Ei,u.PI_2=Fe,u.PixelsTexture=Js,u.PointerInputEvent=Go,u.Projection2D=Ko,u.QuadGeometry=Qu,u.QuadUvGeometry=Q,u.RAD_TO_DEG=Sh,u.RawWeakMap=Is,u.Rect2=It,u.RefCounted=qo,u.Renderer=Ai,u.Resource=St,u.SUPPORTS_AUDIO_CONTEXT=As,u.SUPPORTS_CLICK_EVENTS=Do,u.SUPPORTS_CREATE_IMAGE_BITMAP=Ms,u.SUPPORTS_IMAGE_BITMAP=Oo,u.SUPPORTS_MOUSE_EVENTS=vh,u.SUPPORTS_OFFLINE_AUDIO_CONTEXT=ks,u.SUPPORTS_POINTER_EVENTS=hr,u.SUPPORTS_RESIZE_OBSERVER=ko,u.SUPPORTS_TOUCH_EVENTS=xt,u.SUPPORTS_WEBGL2=Ao,u.SUPPORTS_WEBKIT_AUDIO_CONTEXT=Os,u.SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT=Io,u.SUPPORTS_WEB_AUDIO=Uo,u.SUPPORTS_WHEEL_EVENTS=Ro,u.SceneTree=rr,u.TextLoader=cc,u.Texture2D=le,u.TextureLoader=hc,u.TextureRect2D=Kn,u.Ticker=Ce,u.Transform2D=ve,u.TransformRect2D=Zn,u.UvGeometry=sf,u.UvMaterial=Vr,u.Vector=tt,u.Vector2=de,u.Vector3=Eh,u.Vector4=Yo,u.VertexAttribute=je,u.VertexBuffer=Et,u.VideoLoader=uc,u.VideoTexture=Ga,u.ViewportTexture=en,u.WebAudio=sc,u.WebAudioContext=Wt,u.WebGLBatch2DModule=ta,u.WebGLBlendMode=ur,u.WebGLBufferModule=ra,u.WebGLFramebufferModule=ia,u.WebGLMaskModule=sa,u.WebGLModule=Ye,u.WebGLProgramModule=na,u.WebGLRenderer=ua,u.WebGLScissorModule=oa,u.WebGLState=Xt,u.WebGLStateModule=ea,u.WebGLStencilModule=aa,u.WebGLTextureModule=la,u.WebGLVertexArrayModule=ca,u.WebGLViewportModule=ha,u.WebSound=ic,u.WheelInputEvent=jo,u.alignMap=or,u.assets=Ze,u.boxSizingMap=Yn,u.clamp=Ge,u.clampFrag=Dl,u.createHTMLCanvas=No,u.createNode=dh,u.crossOrigin=zo,u.cubicBezier=Er,u.curves=Ch,u.customNode=W,u.customNodes=Ti,u.defaultOptions=ar,u.determineCrossOrigin=$o,u.directionMap=as,u.displayMap=Gn,u.ease=Jl,u.easeIn=Ql,u.easeInOut=tc,u.easeOut=ec,u.edgeMap=fe,u.flexDirectionMap=jn,u.flexWrapMap=Wn,u.frag=Rl,u.getDefaultCssPropertyValue=Es,u.gutterMap=Hl,u.isCanvasElement=Lo,u.isElementNode=Ds,u.isImageElement=bh,u.isPow2=Ts,u.isVideoElement=Bo,u.isWebgl2=Fo,u.justifyMap=qn,u.lerp=he,u.linear=Zl,u.log2=Ns,u.mapWebGLBlendModes=Qo,u.nextPow2=Fs,u.nextTick=Cs,u.overflowMap=Xn,u.parseCSSFilter=lp,u.parseCSSTransform=ml,u.parseCSSTransformOrigin=yl,u.parseCssFunctions=Dr,u.parseCssProperty=Rr,u.positionTypeMap=Hn,u.render=zm,u.timingFunctions=cs,u.uid=Eo,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.mjs

@@ -14571,6 +14571,7 @@ async function start(sleep = 100) {
 async function task(options) {
   const { debug = false, fonts, width, height, time = 0, data } = options;
   engine ??= new Engine({
+    pixelRatio: 1,
     width: 1,
     height: 1,
     preserveDrawingBuffer: true

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "packageManager": "pnpm@10.18.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",