@next2d/player 2.6.1 → 2.6.2

package/README.md

@@ -123,7 +123,98 @@ start();
 | `bgColor`    | string  | "transparent" | 你可以指定一个十六进制的背景颜色。默认为无色。                           |
 
 ##  Flowchart
-![Flowchart](./drawing_flow_chart.svg)
+
+```mermaid
+flowchart TB
+    %% Main Drawing Flow Chart
+    subgraph MainFlow["🎨 Drawing Flow Chart - Main Rendering Pipeline"]
+        direction TB
+        
+        subgraph Inputs["Display Objects"]
+            Shape["Shape<br/>(Bitmap/Vector)"]
+            TextField["TextField<br/>(canvas2d)"]
+            Video["Video Element"]
+        end
+        
+        Shape --> MaskCheck
+        TextField --> MaskCheck
+        Video --> MaskCheck
+        
+        MaskCheck{"mask<br/>rendering?"}
+        
+        MaskCheck -->|YES| DirectRender["Direct Rendering"]
+        DirectRender -->|drawArrays| FinalRender
+        
+        MaskCheck -->|NO| CacheCheck1{"cache<br/>exists?"}
+        
+        CacheCheck1 -->|NO| TextureAtlas["📦 Texture Atlas<br/>(Binary Tree Packing)"]
+        TextureAtlas --> Coordinates
+        
+        CacheCheck1 -->|YES| Coordinates["📍 Coordinates DB<br/>(x, y, w, h)"]
+        
+        Coordinates --> FilterBlendCheck{"filter or<br/>blend?"}
+        
+        FilterBlendCheck -->|NO| MainArrays
+        FilterBlendCheck -->|YES| NeedCache{"cache<br/>exists?"}
+        
+        NeedCache -->|NO| CacheRender["Render to Cache"]
+        CacheRender --> TextureCache
+        NeedCache -->|YES| TextureCache["💾 Texture Cache"]
+        
+        TextureCache -->|drawArrays| FinalRender
+        
+        MainArrays["⚡ Instanced Arrays<br/>━━━━━━━━━━━━━━━<br/>matrix<br/>colorTransform<br/>Coordinates<br/>━━━━━━━━━━━━━━━<br/><b>Batch Rendering</b>"]
+        
+        MainArrays -->|drawArraysInstanced<br/><b>Multiple objects in one call</b>| FinalRender["🎬 Final Rendering"]
+        
+        FinalRender -->|60fps| MainFramebuffer["🖥️ Main Framebuffer<br/>(Display)"]
+    end
+    
+    %% Branch Flow for Filter/Blend/Mask
+    subgraph BranchFlow["🎭 Filter/Blend/Mask - Branch Processing"]
+        direction TB
+        
+        subgraph FilterInputs["Display Objects"]
+            Shape2["Shape<br/>(Bitmap/Vector)"]
+            TextField2["TextField<br/>(canvas2d)"]
+            Video2["Video Element"]
+        end
+        
+        Shape2 --> CacheCheck2
+        TextField2 --> CacheCheck2
+        Video2 --> CacheCheck2
+        
+        CacheCheck2{"cache<br/>exists?"}
+        
+        CacheCheck2 -->|NO| EffectRender["Effect Rendering"]
+        CacheCheck2 -->|YES| BranchArrays
+        EffectRender --> BranchArrays
+        
+        BranchArrays["⚡ Instanced Arrays<br/>━━━━━━━━━━━━━━━<br/>matrix<br/>colorTransform<br/>Coordinates<br/>━━━━━━━━━━━━━━━<br/><b>Batch Rendering</b>"]
+        
+        BranchArrays -->|drawArraysInstanced<br/><b>Multiple objects in one call</b>| BranchRender["Effect Result"]
+        
+        BranchRender -->|filter/blend| TextureCache
+    end
+    
+    %% Connections between flows
+    FilterBlendCheck -.->|"trigger<br/>branch flow"| BranchFlow
+    BranchArrays -.->|"rendering info<br/>(coordinates)"| MainArrays
+    
+    %% Styling
+    style MainFlow fill:#e3f2fd,stroke:#1976d2,stroke-width:3px
+    style BranchFlow fill:#fff3e0,stroke:#f57c00,stroke-width:3px
+    style Inputs fill:#f5f5f5,stroke:#9e9e9e,stroke-width:1px
+    style FilterInputs fill:#f5f5f5,stroke:#9e9e9e,stroke-width:1px
+    
+    style MainArrays fill:#c8e6c9,stroke:#388e3c,stroke-width:3px
+    style BranchArrays fill:#c8e6c9,stroke:#388e3c,stroke-width:3px
+    style FinalRender fill:#ffecb3,stroke:#f57f17,stroke-width:2px
+    style MainFramebuffer fill:#c5e1a5,stroke:#689f38,stroke-width:3px
+    style TextureCache fill:#e1bee7,stroke:#8e24aa,stroke-width:2px
+    style Coordinates fill:#b3e5fc,stroke:#0277bd,stroke-width:2px
+    style TextureAtlas fill:#fff9c4,stroke:#f9a825,stroke-width:2px
+```
 
 ## License
 This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.

package/next2d.js

@@ -681,4 +681,4 @@ void main() {
     }
 }
 </style>
-<div id="${t}"></div>`};let en=-1;const Ll=()=>{window.addEventListener("resize",()=>{cancelAnimationFrame(en),en=requestAnimationFrame(ou)})},vr=(e=null)=>{M.setOptions(e);const t=kl();Ol(t,M.fixedWidth,M.fixedHeight),Fl(t),!M.fixedWidth&&!M.fixedHeight&&Ll(),ou()},Cl=async(e,t=null)=>{if(e==="develop"){const r=location.search.slice(1).split("&")[0];if(!r)return;e=`${location.origin}/${r}`}if(!e)return;e.charAt(1)==="/"&&(e=e.slice(1)),vr(t);const u=new hr,s=u.contentLoaderInfo;if(s.addEventListener(Re.IO_ERROR,r=>{alert("Error: "+r.text)}),await u.load(new yr(e)),!s.data)return;const n=s.data.stage;T.stageWidth=n.width,T.stageHeight=n.height,T.frameRate=Ct(n.fps,1,60,60),T.backgroundColor=t&&t.bgColor?t.bgColor:n.bgColor,T.addChild(s.content),ou(),Ar(),Mr(),wr(),ms()};let tn=!1;const Nl=(e=240,t=240,u=60,s=null)=>{if(tn)return T.getChildAt(0);tn=!0,T.stageWidth=e|0,T.stageHeight=t|0,T.frameRate=Ct(u,1,60,60),vr(s);const n=T.addChild(new cs);return Ar(),Mr(),wr(),ms(),n},Ee={command:"capture",buffer:null,bgColor:16777215,bgAlpha:0,width:0,height:0,length:0,imageBitmaps:null},It=[],it=[],Pl=async(e,t,u,s,n=0,r=0)=>await new Promise(a=>{if(E.offset=0,It.length=0,it.length=0,T.$generateRenderQueue(e,it,t,u),!E.offset)return a(s);Ee.buffer=E.buffer,Ee.width=s.width,Ee.height=s.height,Ee.bgColor=n,Ee.bgAlpha=r,Ee.length=E.offset,It.push(E.buffer.buffer),Ee.imageBitmaps=null,it.length&&(Ee.imageBitmaps=it,It.push(...it));const i=c=>{if(c.data.message!=="capture")return;const o=c.data.buffer;return E.buffer.length<o.length&&(E.buffer=o),s.getContext("2d").drawImage(c.data.imageBitmap,0,0),we.removeEventListener("message",i),a(s)};we.addEventListener("message",i),we.postMessage(Ee,It)}),Ir=async e=>{switch(!0){case e.isVideo:{const t=e.muted;e.muted=!0,await e.play(),e.pause(),e.muted=t,await new Promise(u=>{const s=async()=>{e.loaded?(e.seek(0),u()):requestAnimationFrame(s)};requestAnimationFrame(s)})}break;case e.isContainerEnabled:{const t=e.children;for(let u=0;u<t.length;++u){const s=t[u];s&&(!s.isVideo&&!s.isContainerEnabled||await Ir(s))}}break}},Bl=new Float32Array([1,0,0,1,0,0]),_l=new Float32Array([1,1,1,1,0,0,0,0]),Dl=async(e,t=null)=>{t&&t.videoSync&&await Ir(e);const u=t&&t.colorTransform?t.colorTransform.rawData:_l,s=new Float32Array([1,0,0,1,-e.width/2,-e.height/2]),n=t&&t.matrix?A.multiply(t.matrix.rawData,s):A.multiply(Bl,s),r=t&&t.canvas?t.canvas:O.getCanvas(),a=Math.sqrt(n[0]*n[0]+n[1]*n[1]),i=Math.sqrt(n[2]*n[2]+n[3]*n[3]),c=Math.ceil(e.width*a),o=Math.ceil(e.height*i);if(c<=0||o<=0)return r;n[4]+=c/2,n[5]+=o/2,r.width=c,r.height=o;const d=M.stopFlag;d||M.stop();let l=!1;const h=M.rendererWidth,b=M.rendererHeight,f=M.rendererScale;if(c>h||o>b){l=!0;const p=Math.min(c/T.stageWidth,o/T.stageHeight)*Ge;T.rendererScale=M.rendererScale=p,T.rendererWidth=M.rendererWidth=c,T.rendererHeight=M.rendererHeight=o,Wu(!1)}return await Pl(e,n,u,r,t&&t.bgColor?parseInt(t.bgColor.replace("#",""),16):0,t&&t.bgAlpha?t.bgAlpha:0),l&&(T.rendererScale=M.rendererScale=f,T.rendererWidth=M.rendererWidth=h,T.rendererHeight=M.rendererHeight=b,Wu(!1)),d||M.play(),A.release(n),t&&t.colorTransform&&L.release(u),r};class Ul{display;events;filters;geom;media;net;text;ui;_$promise;constructor(){this.display=zu,this.events=Hu,this.filters=Gu,this.geom=Ku,this.media=Qu,this.net=Zu,this.text=Ju,this.ui=ju,this._$promise=new Promise(t=>{document.readyState==="loading"?window.addEventListener("DOMContentLoaded",()=>t(),{once:!0}):t()})}async load(t,u=null){await Promise.all([this._$promise]),await Cl(t,u)}async createRootMovieClip(t=240,u=240,s=60,n=null){return await Promise.all([this._$promise]),Nl(t,u,s,n)}async captureToCanvas(t,u=null){return await Dl(t,u)}}"next2d"in window||(console.log("%c Next2D Player %c 2.6.1 %c https://next2d.app","color: #fff; background: #5f5f5f","color: #fff; background: #4bc729",""),window.next2d=new Ul);
+<div id="${t}"></div>`};let en=-1;const Ll=()=>{window.addEventListener("resize",()=>{cancelAnimationFrame(en),en=requestAnimationFrame(ou)})},vr=(e=null)=>{M.setOptions(e);const t=kl();Ol(t,M.fixedWidth,M.fixedHeight),Fl(t),!M.fixedWidth&&!M.fixedHeight&&Ll(),ou()},Cl=async(e,t=null)=>{if(e==="develop"){const r=location.search.slice(1).split("&")[0];if(!r)return;e=`${location.origin}/${r}`}if(!e)return;e.charAt(1)==="/"&&(e=e.slice(1)),vr(t);const u=new hr,s=u.contentLoaderInfo;if(s.addEventListener(Re.IO_ERROR,r=>{alert("Error: "+r.text)}),await u.load(new yr(e)),!s.data)return;const n=s.data.stage;T.stageWidth=n.width,T.stageHeight=n.height,T.frameRate=Ct(n.fps,1,60,60),T.backgroundColor=t&&t.bgColor?t.bgColor:n.bgColor,T.addChild(s.content),ou(),Ar(),Mr(),wr(),ms()};let tn=!1;const Nl=(e=240,t=240,u=60,s=null)=>{if(tn)return T.getChildAt(0);tn=!0,T.stageWidth=e|0,T.stageHeight=t|0,T.frameRate=Ct(u,1,60,60),vr(s);const n=T.addChild(new cs);return Ar(),Mr(),wr(),ms(),n},Ee={command:"capture",buffer:null,bgColor:16777215,bgAlpha:0,width:0,height:0,length:0,imageBitmaps:null},It=[],it=[],Pl=async(e,t,u,s,n=0,r=0)=>await new Promise(a=>{if(E.offset=0,It.length=0,it.length=0,T.$generateRenderQueue(e,it,t,u),!E.offset)return a(s);Ee.buffer=E.buffer,Ee.width=s.width,Ee.height=s.height,Ee.bgColor=n,Ee.bgAlpha=r,Ee.length=E.offset,It.push(E.buffer.buffer),Ee.imageBitmaps=null,it.length&&(Ee.imageBitmaps=it,It.push(...it));const i=c=>{if(c.data.message!=="capture")return;const o=c.data.buffer;return E.buffer.length<o.length&&(E.buffer=o),s.getContext("2d").drawImage(c.data.imageBitmap,0,0),we.removeEventListener("message",i),a(s)};we.addEventListener("message",i),we.postMessage(Ee,It)}),Ir=async e=>{switch(!0){case e.isVideo:{const t=e.muted;e.muted=!0,await e.play(),e.pause(),e.muted=t,await new Promise(u=>{const s=async()=>{e.loaded?(e.seek(0),u()):requestAnimationFrame(s)};requestAnimationFrame(s)})}break;case e.isContainerEnabled:{const t=e.children;for(let u=0;u<t.length;++u){const s=t[u];s&&(!s.isVideo&&!s.isContainerEnabled||await Ir(s))}}break}},Bl=new Float32Array([1,0,0,1,0,0]),_l=new Float32Array([1,1,1,1,0,0,0,0]),Dl=async(e,t=null)=>{t&&t.videoSync&&await Ir(e);const u=t&&t.colorTransform?t.colorTransform.rawData:_l,s=new Float32Array([1,0,0,1,-e.width/2,-e.height/2]),n=t&&t.matrix?A.multiply(t.matrix.rawData,s):A.multiply(Bl,s),r=t&&t.canvas?t.canvas:O.getCanvas(),a=Math.sqrt(n[0]*n[0]+n[1]*n[1]),i=Math.sqrt(n[2]*n[2]+n[3]*n[3]),c=Math.ceil(e.width*a),o=Math.ceil(e.height*i);if(c<=0||o<=0)return r;n[4]+=c/2,n[5]+=o/2,r.width=c,r.height=o;const d=M.stopFlag;d||M.stop();let l=!1;const h=M.rendererWidth,b=M.rendererHeight,f=M.rendererScale;if(c>h||o>b){l=!0;const p=Math.min(c/T.stageWidth,o/T.stageHeight)*Ge;T.rendererScale=M.rendererScale=p,T.rendererWidth=M.rendererWidth=c,T.rendererHeight=M.rendererHeight=o,Wu(!1)}return await Pl(e,n,u,r,t&&t.bgColor?parseInt(t.bgColor.replace("#",""),16):0,t&&t.bgAlpha?t.bgAlpha:0),l&&(T.rendererScale=M.rendererScale=f,T.rendererWidth=M.rendererWidth=h,T.rendererHeight=M.rendererHeight=b,Wu(!1)),d||M.play(),A.release(n),t&&t.colorTransform&&L.release(u),r};class Ul{display;events;filters;geom;media;net;text;ui;_$promise;constructor(){this.display=zu,this.events=Hu,this.filters=Gu,this.geom=Ku,this.media=Qu,this.net=Zu,this.text=Ju,this.ui=ju,this._$promise=new Promise(t=>{document.readyState==="loading"?window.addEventListener("DOMContentLoaded",()=>t(),{once:!0}):t()})}async load(t,u=null){await Promise.all([this._$promise]),await Cl(t,u)}async createRootMovieClip(t=240,u=240,s=60,n=null){return await Promise.all([this._$promise]),Nl(t,u,s,n)}async captureToCanvas(t,u=null){return await Dl(t,u)}}"next2d"in window||(console.log("%c Next2D Player %c 2.6.2 %c https://next2d.app","color: #fff; background: #5f5f5f","color: #fff; background: #4bc729",""),window.next2d=new Ul);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/player",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Experience the fast and beautiful anti-aliased rendering of WebGL. You can create rich, interactive graphics, cross-platform applications and games without worrying about browser or device compatibility.",
   "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -43,17 +43,17 @@
   "dependencies": {
     "fflate": "^0.8.2",
     "htmlparser2": "^10.0.0",
-    "@next2d/cache": "2.6.1",
-    "@next2d/core": "2.6.1",
-    "@next2d/display": "2.6.1",
-    "@next2d/events": "2.6.1",
-    "@next2d/filters": "2.6.1",
-    "@next2d/geom": "2.6.1",
-    "@next2d/media": "2.6.1",
-    "@next2d/net": "2.6.1",
-    "@next2d/render-queue": "2.6.1",
-    "@next2d/text": "2.6.1",
-    "@next2d/ui": "2.6.1"
+    "@next2d/cache": "2.6.2",
+    "@next2d/core": "2.6.2",
+    "@next2d/display": "2.6.2",
+    "@next2d/events": "2.6.2",
+    "@next2d/filters": "2.6.2",
+    "@next2d/geom": "2.6.2",
+    "@next2d/media": "2.6.2",
+    "@next2d/net": "2.6.2",
+    "@next2d/render-queue": "2.6.2",
+    "@next2d/text": "2.6.2",
+    "@next2d/ui": "2.6.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -62,19 +62,20 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@types/node": "^24.10.0",
-    "@typescript-eslint/eslint-plugin": "^8.46.3",
-    "@typescript-eslint/parser": "^8.46.3",
-    "@vitest/web-worker": "^4.0.7",
+    "@types/node": "^24.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "@vitest/web-worker": "^4.0.8",
     "eslint": "^9.39.1",
     "eslint-plugin-unused-imports": "^4.3.0",
     "globals": "^16.5.0",
-    "jsdom": "^27.1.0",
-    "rollup": "^4.52.5",
+    "jsdom": "^27.2.0",
+    "rollup": "^4.53.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
-    "vitest": "^4.0.7",
-    "vitest-webgl-canvas-mock": "^1.1.0"
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8",
+    "vitest-webgl-canvas-mock": "^1.1.0",
+    "xml2js": "^0.6.2"
   }
 }

package/src/index.js

@@ -1,6 +1,6 @@
 "use strict";
 import { Next2D } from "@next2d/core";
 if (!("next2d" in window)) {
-    console.log("%c Next2D Player %c 2.6.1 %c https://next2d.app", "color: #fff; background: #5f5f5f", "color: #fff; background: #4bc729", "");
+    console.log("%c Next2D Player %c 2.6.2 %c https://next2d.app", "color: #fff; background: #5f5f5f", "color: #fff; background: #4bc729", "");
     window.next2d = new Next2D();
 }