modern-canvas 0.8.7 → 0.8.8

package/dist/index.cjs

@@ -14428,21 +14428,31 @@ class Engine extends SceneTree {
     const canvas1 = document.createElement("canvas");
     canvas1.width = imageData.width;
     canvas1.height = imageData.height;
-    canvas1.getContext("2d")?.putImageData(imageData, 0, 0);
+    const ctx1 = canvas1.getContext("2d");
+    if (ctx1) {
+      ctx1.fillStyle = "rgba(0, 0, 0, 0)";
+      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+      ctx1.putImageData(imageData, 0, 0);
+    }
     const canvas2 = document.createElement("canvas");
     canvas2.width = this.width;
     canvas2.height = this.height;
-    canvas2.getContext("2d")?.drawImage(
-      canvas1,
-      0,
-      0,
-      canvas1.width,
-      canvas1.height,
-      0,
-      0,
-      canvas2.width,
-      canvas2.height
-    );
+    const ctx2 = canvas2.getContext("2d");
+    if (ctx2) {
+      ctx2.fillStyle = "rgba(0, 0, 0, 0)";
+      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+      ctx2.drawImage(
+        canvas1,
+        0,
+        0,
+        canvas1.width,
+        canvas1.height,
+        0,
+        0,
+        canvas2.width,
+        canvas2.height
+      );
+    }
     return canvas2;
   }
 }

package/dist/index.js

@@ -1000,4 +1000,4 @@ void main(void) {
   coord = twist(coord, radius - (progress * radius));
   coord = unmapCoord(coord);
   gl_FragColor = texture2D(sampler, coord);
-}`})),f.TwistTransition=wm([W("TwistTransition")],f.TwistTransition);class Zl 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 Ii(n.map(o=>({duration:o.delay,texture:new Xs(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 Jl 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 Ql 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 ec 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 tc 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 rc extends Ut{install(e){const t=r=>new Ra(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 Pm=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 Sm(s){for(const[e,t]of Pm)if(t.includes(s))return e}async function Cm(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=Sm(t))}return e??await fetch(s).then(t=>t.headers.get("Content-Type"))??""}const as="WeakRef"in globalThis;class ic{defaultHandler=e=>this.fetch(e);_handlers=new Map;_handleing=new Map;_handled=new Map;_gc=as?new FinalizationRegistry(e=>{const t=this.get(e);t&&"free"in t&&t.free(),this._handled.delete(e)}):void 0;constructor(){as||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 as&&t instanceof WeakRef&&(t=t.deref(),t||this._handleing.delete(e)),t}set(e,t){let r=t;as&&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 Cm(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&&"free"in r&&r.free()}),this._handled.clear()}}const nt=new ic().use(new ia).use(new Zl).use(new Jl).use(new Ql).use(new ec).use(new tc).use(new rc);var Tm=Object.getOwnPropertyDescriptor,Em=(s,e,t,r)=>{for(var i=r>1?void 0:r?Tm(e,t):e,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=o(i)||i);return i};f.CanvasItemEditor=class extends f.Control{_pointerStart;_pointerOffset;selected;dragging;hovered;hover=new f.Element2D({name:"hover",internalMode:"back",style:{visibility:"hidden",outlineStyle:"solid",outlineColor:"#00FF00FF",outlineWidth:2,pointerEvents:"none"}});transformRect=new qn({name:"transformRect",internalMode:"back",style:{visibility:"hidden",pointerEvents:"none"}});scaler=new f.Scaler({name:"Scaler",internalMode:"back"}).on("updateScale",e=>{this.ruler.gapScale=e,this._updateScrollbars(),this._updateSelectionRect()});xScrollBar=new f.XScrollBar({name:"XScrollBar",internalMode:"back",style:{visibility:"hidden"}});yScrollBar=new f.YScrollBar({name:"yScrollBar",internalMode:"back",style:{visibility:"hidden"}});drawboard=new f.Element2D({name:"drawboard",style:{width:500,height:500,backgroundColor:"#00FFFFFF",pointerEvents:"none"}},[this.scaler]);ruler=new f.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,i){switch(super._updateStyleProperty(e,t,r,i),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 f.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 f.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"}},f.CanvasItemEditor=Em([W("CanvasItemEditor")],f.CanvasItemEditor);const sc={alpha:!0,stencil:!0,antialias:!1,premultipliedAlpha:!0,preserveDrawingBuffer:!1,powerPreference:"default"};class nc extends Wr{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),this.view&&(this.view.dataset.pixelRatio=String(e))}_resizeObserver=xo?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{debug:t=!1,view:r,width:i,height:n,pixelRatio:o=Es,backgroundColor:a=0,autoResize:l,autoStart:c,timeline:h,...u}=e;super(h),this.debug=t,this.renderer=new ra(r,{...sc,...u}),this._setupInput(),this.pixelRatio=o,this.backgroundColor=a,l?(!r&&this.renderer.view&&(this.renderer.view.style.width="100%",this.renderer.view.style.height="100%"),this.enableAutoResize(l)):this.resize(i||this.gl.drawingBufferWidth||this.view?.clientWidth||200,n||this.gl.drawingBufferHeight||this.view?.clientHeight||200,!r),c&&this.start()}_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}enableAutoResize(e=!0){return this.view&&(e?this._resizeObserver?.observe(this.view):this._resizeObserver?.unobserve(this.view)),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 bs()}async waitUntilLoad(){await nt.waitUntilLoad(),await this.nextTick()}async waitAndRender(e=0){await nt.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)})}free(){super.free(),this.enableAutoResize(!1),this.renderer.free()}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,t.getContext("2d")?.putImageData(e,0,0);const r=document.createElement("canvas");return r.width=this.width,r.height=this.height,r.getContext("2d")?.drawImage(t,0,0,t.width,t.height,0,0,r.width,r.height),r}}let vt;const Hn=[];let Yn=!1;async function Mm(s=100){if(!Yn){for(Yn=!0;Hn.length;){const e=Hn.shift();if(e)try{await e()}catch(t){console.error(t)}else await new Promise(t=>setTimeout(t,s))}Yn=!1}}async function Am(s){const{data:e,width:t,height:r,debug:i=!1,time:n=0}=s;return vt??=new nc({width:1,height:1,preserveDrawingBuffer:!0}),vt.debug=i,vt.root.removeChildren(),vt.timeline.currentTime=n,vt.resize(t,r,!0),(Array.isArray(e)?e:[e]).forEach(o=>{o instanceof f.Node?(o.parent=void 0,vt.root.appendChild(o)):vt.root.appendChild(f.Node.parse(o))}),await s.onBeforeRender?.(vt),await vt.waitAndRender(),vt.toCanvas2D()}async function Om(s){return new Promise(e=>{Hn.push(async()=>e(await Am(s))),Mm()})}f.AnimatedTexture=Ii,f.Assets=ic,f.AudioPipeline=Xn,f.AudioProcessor=Dg,f.AudioSpectrum=$g,f.BaseElement2DBackground=nn,f.BaseElement2DFill=Te,f.BaseElement2DForeground=on,f.BaseElement2DOutline=Kt,f.BaseElement2DShadow=Zt,f.BaseElement2DShape=Jt,f.BaseElement2DStyle=Jr,f.BaseElement2DText=Dt,f.CanvasContext=Ua,f.CanvasTexture=Ri,f.Color=Qe,f.ColorMatrix=ks,f.ColorTexture=Ju,f.CoreObject=It,f.DEG_TO_RAD=Fo,f.DEVICE_PIXEL_RATIO=Es,f.EffectMaterial=Lr,f.Element2DStyle=Ln,f.Engine=nc,f.FlexElement2DStyle=Nl,f.FlexLayout=is,f.FontLoader=ia,f.Geometry=Di,f.GifLoader=Zl,f.GradientTexture=Fr,f.HTMLAudio=Xl,f.HTMLAudioContext=ns,f.HTMLSound=pi,f.IN_BROWSER=Or,f.ImageTexture=ef,f.IndexBuffer=fr,f.Input=Bo,f.InputEvent=kr,f.JsonLoader=Jl,f.KeyboardInputEvent=Io,f.Loader=Ut,f.LottieLoader=Ql,f.MainLoop=Si,f.Material=se,f.Matrix=ht,f.Matrix2=_h,f.Matrix3=Ds,f.Matrix4=No,f.MouseInputEvent=Os,f.PI=Pi,f.PI_2=Ne,f.PixelsTexture=Xs,f.PointerInputEvent=Ro,f.Projection2D=zo,f.QuadGeometry=ju,f.QuadUvGeometry=Q,f.RAD_TO_DEG=yh,f.RawWeakMap=As,f.Rect2=Rt,f.RefCounted=Lo,f.Renderer=Go,f.Resource=Pt,f.SUPPORTS_AUDIO_CONTEXT=Ss,f.SUPPORTS_CLICK_EVENTS=So,f.SUPPORTS_CREATE_IMAGE_BITMAP=Ps,f.SUPPORTS_IMAGE_BITMAP=wo,f.SUPPORTS_MOUSE_EVENTS=fh,f.SUPPORTS_OFFLINE_AUDIO_CONTEXT=Ts,f.SUPPORTS_POINTER_EVENTS=ar,f.SUPPORTS_RESIZE_OBSERVER=xo,f.SUPPORTS_TOUCH_EVENTS=xt,f.SUPPORTS_WEBGL2=bo,f.SUPPORTS_WEBKIT_AUDIO_CONTEXT=Cs,f.SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT=Co,f.SUPPORTS_WEB_AUDIO=To,f.SUPPORTS_WHEEL_EVENTS=Po,f.SceneTree=Wr,f.TextLoader=ec,f.Texture2D=le,f.TextureLoader=tc,f.TextureRect2D=Wn,f.Ticker=Ce,f.Transform2D=_e,f.TransformRect2D=qn,f.UvGeometry=Hu,f.UvMaterial=Nr,f.Vector=et,f.Vector2=de,f.Vector3=bh,f.Vector4=$o,f.VertexAttribute=je,f.VertexBuffer=Tt,f.VideoLoader=rc,f.VideoTexture=Ra,f.ViewportTexture=Ys,f.WebAudio=Yl,f.WebAudioContext=jt,f.WebGLBatch2DModule=qo,f.WebGLBlendMode=lr,f.WebGLBufferModule=Xo,f.WebGLFramebufferModule=Ho,f.WebGLMaskModule=Yo,f.WebGLModule=Ye,f.WebGLProgramModule=Ko,f.WebGLRenderer=ra,f.WebGLScissorModule=Zo,f.WebGLState=qt,f.WebGLStateModule=Wo,f.WebGLStencilModule=Jo,f.WebGLTextureModule=Qo,f.WebGLVertexArrayModule=ea,f.WebGLViewportModule=ta,f.WebSound=Hl,f.WheelInputEvent=Uo,f.alignMap=nr,f.assets=nt,f.boxSizingMap=jn,f.clamp=Ge,f.clampFrag=rl,f.createHTMLCanvas=Oo,f.createNode=oh,f.crossOrigin=Do,f.cubicBezier=Pr,f.curves=vh,f.customNode=W,f.customNodes=xi,f.defaultOptions=sc,f.determineCrossOrigin=ko,f.directionMap=rs,f.displayMap=Nn,f.ease=Gl,f.easeIn=jl,f.easeInOut=ql,f.easeOut=Wl,f.edgeMap=fe,f.flexDirectionMap=Fn,f.flexWrapMap=$n,f.frag=tl,f.getDefaultCssPropertyValue=xs,f.gutterMap=Fl,f.isCanvasElement=Mo,f.isElementNode=Ms,f.isImageElement=dh,f.isPow2=ws,f.isVideoElement=Eo,f.isWebgl2=Ao,f.justifyMap=zn,f.lerp=he,f.linear=Vl,f.log2=Rs,f.mapWebGLBlendModes=jo,f.nextPow2=Is,f.nextTick=bs,f.overflowMap=Vn,f.parseCSSFilter=Ef,f.parseCSSTransform=Fa,f.parseCSSTransformOrigin=$a,f.parseCssFunctions=Ar,f.parseCssProperty=Mr,f.positionTypeMap=Gn,f.render=Om,f.timingFunctions=ss,f.uid=vo,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+}`})),f.TwistTransition=wm([W("TwistTransition")],f.TwistTransition);class Zl 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 Ii(n.map(o=>({duration:o.delay,texture:new Xs(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 Jl 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 Ql 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 ec 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 tc 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 rc extends Ut{install(e){const t=r=>new Ra(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 Pm=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 Sm(s){for(const[e,t]of Pm)if(t.includes(s))return e}async function Cm(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=Sm(t))}return e??await fetch(s).then(t=>t.headers.get("Content-Type"))??""}const as="WeakRef"in globalThis;class ic{defaultHandler=e=>this.fetch(e);_handlers=new Map;_handleing=new Map;_handled=new Map;_gc=as?new FinalizationRegistry(e=>{const t=this.get(e);t&&"free"in t&&t.free(),this._handled.delete(e)}):void 0;constructor(){as||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 as&&t instanceof WeakRef&&(t=t.deref(),t||this._handleing.delete(e)),t}set(e,t){let r=t;as&&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 Cm(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&&"free"in r&&r.free()}),this._handled.clear()}}const nt=new ic().use(new ia).use(new Zl).use(new Jl).use(new Ql).use(new ec).use(new tc).use(new rc);var Tm=Object.getOwnPropertyDescriptor,Em=(s,e,t,r)=>{for(var i=r>1?void 0:r?Tm(e,t):e,n=s.length-1,o;n>=0;n--)(o=s[n])&&(i=o(i)||i);return i};f.CanvasItemEditor=class extends f.Control{_pointerStart;_pointerOffset;selected;dragging;hovered;hover=new f.Element2D({name:"hover",internalMode:"back",style:{visibility:"hidden",outlineStyle:"solid",outlineColor:"#00FF00FF",outlineWidth:2,pointerEvents:"none"}});transformRect=new qn({name:"transformRect",internalMode:"back",style:{visibility:"hidden",pointerEvents:"none"}});scaler=new f.Scaler({name:"Scaler",internalMode:"back"}).on("updateScale",e=>{this.ruler.gapScale=e,this._updateScrollbars(),this._updateSelectionRect()});xScrollBar=new f.XScrollBar({name:"XScrollBar",internalMode:"back",style:{visibility:"hidden"}});yScrollBar=new f.YScrollBar({name:"yScrollBar",internalMode:"back",style:{visibility:"hidden"}});drawboard=new f.Element2D({name:"drawboard",style:{width:500,height:500,backgroundColor:"#00FFFFFF",pointerEvents:"none"}},[this.scaler]);ruler=new f.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,i){switch(super._updateStyleProperty(e,t,r,i),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 f.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 f.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"}},f.CanvasItemEditor=Em([W("CanvasItemEditor")],f.CanvasItemEditor);const sc={alpha:!0,stencil:!0,antialias:!1,premultipliedAlpha:!0,preserveDrawingBuffer:!1,powerPreference:"default"};class nc extends Wr{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),this.view&&(this.view.dataset.pixelRatio=String(e))}_resizeObserver=xo?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{debug:t=!1,view:r,width:i,height:n,pixelRatio:o=Es,backgroundColor:a=0,autoResize:l,autoStart:c,timeline:h,...u}=e;super(h),this.debug=t,this.renderer=new ra(r,{...sc,...u}),this._setupInput(),this.pixelRatio=o,this.backgroundColor=a,l?(!r&&this.renderer.view&&(this.renderer.view.style.width="100%",this.renderer.view.style.height="100%"),this.enableAutoResize(l)):this.resize(i||this.gl.drawingBufferWidth||this.view?.clientWidth||200,n||this.gl.drawingBufferHeight||this.view?.clientHeight||200,!r),c&&this.start()}_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}enableAutoResize(e=!0){return this.view&&(e?this._resizeObserver?.observe(this.view):this._resizeObserver?.unobserve(this.view)),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 bs()}async waitUntilLoad(){await nt.waitUntilLoad(),await this.nextTick()}async waitAndRender(e=0){await nt.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)})}free(){super.free(),this.enableAutoResize(!1),this.renderer.free()}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}}let vt;const Hn=[];let Yn=!1;async function Mm(s=100){if(!Yn){for(Yn=!0;Hn.length;){const e=Hn.shift();if(e)try{await e()}catch(t){console.error(t)}else await new Promise(t=>setTimeout(t,s))}Yn=!1}}async function Am(s){const{data:e,width:t,height:r,debug:i=!1,time:n=0}=s;return vt??=new nc({width:1,height:1,preserveDrawingBuffer:!0}),vt.debug=i,vt.root.removeChildren(),vt.timeline.currentTime=n,vt.resize(t,r,!0),(Array.isArray(e)?e:[e]).forEach(o=>{o instanceof f.Node?(o.parent=void 0,vt.root.appendChild(o)):vt.root.appendChild(f.Node.parse(o))}),await s.onBeforeRender?.(vt),await vt.waitAndRender(),vt.toCanvas2D()}async function Om(s){return new Promise(e=>{Hn.push(async()=>e(await Am(s))),Mm()})}f.AnimatedTexture=Ii,f.Assets=ic,f.AudioPipeline=Xn,f.AudioProcessor=Dg,f.AudioSpectrum=$g,f.BaseElement2DBackground=nn,f.BaseElement2DFill=Te,f.BaseElement2DForeground=on,f.BaseElement2DOutline=Kt,f.BaseElement2DShadow=Zt,f.BaseElement2DShape=Jt,f.BaseElement2DStyle=Jr,f.BaseElement2DText=Dt,f.CanvasContext=Ua,f.CanvasTexture=Ri,f.Color=Qe,f.ColorMatrix=ks,f.ColorTexture=Ju,f.CoreObject=It,f.DEG_TO_RAD=Fo,f.DEVICE_PIXEL_RATIO=Es,f.EffectMaterial=Lr,f.Element2DStyle=Ln,f.Engine=nc,f.FlexElement2DStyle=Nl,f.FlexLayout=is,f.FontLoader=ia,f.Geometry=Di,f.GifLoader=Zl,f.GradientTexture=Fr,f.HTMLAudio=Xl,f.HTMLAudioContext=ns,f.HTMLSound=pi,f.IN_BROWSER=Or,f.ImageTexture=ef,f.IndexBuffer=fr,f.Input=Bo,f.InputEvent=kr,f.JsonLoader=Jl,f.KeyboardInputEvent=Io,f.Loader=Ut,f.LottieLoader=Ql,f.MainLoop=Si,f.Material=se,f.Matrix=ht,f.Matrix2=_h,f.Matrix3=Ds,f.Matrix4=No,f.MouseInputEvent=Os,f.PI=Pi,f.PI_2=Ne,f.PixelsTexture=Xs,f.PointerInputEvent=Ro,f.Projection2D=zo,f.QuadGeometry=ju,f.QuadUvGeometry=Q,f.RAD_TO_DEG=yh,f.RawWeakMap=As,f.Rect2=Rt,f.RefCounted=Lo,f.Renderer=Go,f.Resource=Pt,f.SUPPORTS_AUDIO_CONTEXT=Ss,f.SUPPORTS_CLICK_EVENTS=So,f.SUPPORTS_CREATE_IMAGE_BITMAP=Ps,f.SUPPORTS_IMAGE_BITMAP=wo,f.SUPPORTS_MOUSE_EVENTS=fh,f.SUPPORTS_OFFLINE_AUDIO_CONTEXT=Ts,f.SUPPORTS_POINTER_EVENTS=ar,f.SUPPORTS_RESIZE_OBSERVER=xo,f.SUPPORTS_TOUCH_EVENTS=xt,f.SUPPORTS_WEBGL2=bo,f.SUPPORTS_WEBKIT_AUDIO_CONTEXT=Cs,f.SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT=Co,f.SUPPORTS_WEB_AUDIO=To,f.SUPPORTS_WHEEL_EVENTS=Po,f.SceneTree=Wr,f.TextLoader=ec,f.Texture2D=le,f.TextureLoader=tc,f.TextureRect2D=Wn,f.Ticker=Ce,f.Transform2D=_e,f.TransformRect2D=qn,f.UvGeometry=Hu,f.UvMaterial=Nr,f.Vector=et,f.Vector2=de,f.Vector3=bh,f.Vector4=$o,f.VertexAttribute=je,f.VertexBuffer=Tt,f.VideoLoader=rc,f.VideoTexture=Ra,f.ViewportTexture=Ys,f.WebAudio=Yl,f.WebAudioContext=jt,f.WebGLBatch2DModule=qo,f.WebGLBlendMode=lr,f.WebGLBufferModule=Xo,f.WebGLFramebufferModule=Ho,f.WebGLMaskModule=Yo,f.WebGLModule=Ye,f.WebGLProgramModule=Ko,f.WebGLRenderer=ra,f.WebGLScissorModule=Zo,f.WebGLState=qt,f.WebGLStateModule=Wo,f.WebGLStencilModule=Jo,f.WebGLTextureModule=Qo,f.WebGLVertexArrayModule=ea,f.WebGLViewportModule=ta,f.WebSound=Hl,f.WheelInputEvent=Uo,f.alignMap=nr,f.assets=nt,f.boxSizingMap=jn,f.clamp=Ge,f.clampFrag=rl,f.createHTMLCanvas=Oo,f.createNode=oh,f.crossOrigin=Do,f.cubicBezier=Pr,f.curves=vh,f.customNode=W,f.customNodes=xi,f.defaultOptions=sc,f.determineCrossOrigin=ko,f.directionMap=rs,f.displayMap=Nn,f.ease=Gl,f.easeIn=jl,f.easeInOut=ql,f.easeOut=Wl,f.edgeMap=fe,f.flexDirectionMap=Fn,f.flexWrapMap=$n,f.frag=tl,f.getDefaultCssPropertyValue=xs,f.gutterMap=Fl,f.isCanvasElement=Mo,f.isElementNode=Ms,f.isImageElement=dh,f.isPow2=ws,f.isVideoElement=Eo,f.isWebgl2=Ao,f.justifyMap=zn,f.lerp=he,f.linear=Vl,f.log2=Rs,f.mapWebGLBlendModes=jo,f.nextPow2=Is,f.nextTick=bs,f.overflowMap=Vn,f.parseCSSFilter=Ef,f.parseCSSTransform=Fa,f.parseCSSTransformOrigin=$a,f.parseCssFunctions=Ar,f.parseCssProperty=Mr,f.positionTypeMap=Gn,f.render=Om,f.timingFunctions=ss,f.uid=vo,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.mjs

@@ -14422,21 +14422,31 @@ class Engine extends SceneTree {
     const canvas1 = document.createElement("canvas");
     canvas1.width = imageData.width;
     canvas1.height = imageData.height;
-    canvas1.getContext("2d")?.putImageData(imageData, 0, 0);
+    const ctx1 = canvas1.getContext("2d");
+    if (ctx1) {
+      ctx1.fillStyle = "rgba(0, 0, 0, 0)";
+      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+      ctx1.putImageData(imageData, 0, 0);
+    }
     const canvas2 = document.createElement("canvas");
     canvas2.width = this.width;
     canvas2.height = this.height;
-    canvas2.getContext("2d")?.drawImage(
-      canvas1,
-      0,
-      0,
-      canvas1.width,
-      canvas1.height,
-      0,
-      0,
-      canvas2.width,
-      canvas2.height
-    );
+    const ctx2 = canvas2.getContext("2d");
+    if (ctx2) {
+      ctx2.fillStyle = "rgba(0, 0, 0, 0)";
+      ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+      ctx2.drawImage(
+        canvas1,
+        0,
+        0,
+        canvas1.width,
+        canvas1.height,
+        0,
+        0,
+        canvas2.width,
+        canvas2.height
+      );
+    }
     return canvas2;
   }
 }

package/package.json

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