#154 stroke meshのバグ修正、frameworkとの同期処理を追加

Next2D · Feb 3, 2025 · d5b2ef5 · d5b2ef5
1 parent 34294ce
commit d5b2ef5
Show file tree

Hide file tree

Showing 19 changed files with 203 additions and 120 deletions.
diff --git a/index.html b/index.html
@@ -10,28 +10,28 @@
 <script>
     window.addEventListener("DOMContentLoaded", async () => 
     {
-        // next2d.load("develop");
-
-        const root = await next2d.createRootMovieClip(400, 400, 60, {
-            bgColor: "#0000ff"
-        });
-
-        const { Shape, BitmapData } = next2d.display;
-        const { TextField } = next2d.text;
-        const { Video } = next2d.media;
-        const { Event } = next2d.events;
-        const { Matrix } = next2d.geom;
-        const {
-            BlurFilter,
-            ColorMatrixFilter,
-            GlowFilter,
-            BevelFilter,
-            GradientBevelFilter,
-            GradientGlowFilter,
-            DropShadowFilter,
-            ConvolutionFilter,
-            DisplacementMapFilter
-        } = next2d.filters;
+        next2d.load("develop");
+
+        // const root = await next2d.createRootMovieClip(400, 400, 60, {
+        //     bgColor: "#0000ff"
+        // });
+
+        // const { Shape, BitmapData } = next2d.display;
+        // const { TextField } = next2d.text;
+        // const { Video } = next2d.media;
+        // const { Event } = next2d.events;
+        // const { Matrix } = next2d.geom;
+        // const {
+        //     BlurFilter,
+        //     ColorMatrixFilter,
+        //     GlowFilter,
+        //     BevelFilter,
+        //     GradientBevelFilter,
+        //     GradientGlowFilter,
+        //     DropShadowFilter,
+        //     ConvolutionFilter,
+        //     DisplacementMapFilter
+        // } = next2d.filters;
 
         // const image = new Image();
         // image.addEventListener("load", () => 
@@ -82,6 +82,7 @@
 
         // shape1
         //     .graphics
+        //     // .lineStyle(15, "#ff0000")
         //     .beginFill("#ff0000")
         //     .drawRect(0, 0, 100, 100);
 
@@ -105,18 +106,18 @@
 
         // textField.blendMode = "invert";
 
-        const shape2 = root.addChild(new Shape());
-        shape2.x = 100;
-        shape2.y = 100;
-        shape2.rotation = 25;
-        shape2
-            .graphics
-            .beginFill("#00ff00")
-            .moveTo(0, 0)
-            .lineTo(100, 0)
-            .lineTo(100, 100)
-            .lineTo(0, 0)
-            .endFill();
+        // const shape2 = root.addChild(new Shape());
+        // shape2.x = 100;
+        // shape2.y = 100;
+        // shape2.rotation = 25;
+        // shape2
+        //     .graphics
+        //     .beginFill("#00ff00")
+        //     .moveTo(0, 0)
+        //     .lineTo(100, 0)
+        //     .lineTo(100, 100)
+        //     .lineTo(0, 0)
+        //     .endFill();
 
         // shape2.blendMode = "invert";
         // shape2.filters = [

diff --git a/packages/display/src/DisplayObject.ts b/packages/display/src/DisplayObject.ts
@@ -1054,4 +1054,18 @@ export class DisplayObject extends EventDispatcher
     {
         displayObjectRemoveService(this);
     }
+
+    /**
+     * @description 指定の LoaderInfo を DisplayObject に同期します。
+     *              Synchronizes the specified LoaderInfo with the DisplayObject.
+     *
+     * @param  {LoaderInfo} loader_info
+     * @return {void}
+     * @method
+     * @protected
+     */
+    $syncLoaderInfo (loader_info: LoaderInfo): void
+    {
+        $loaderInfoMap.set(this, loader_info);
+    }
 }
diff --git a/packages/display/src/Graphics/service/GraphicsToNumberArrayService.ts b/packages/display/src/Graphics/service/GraphicsToNumberArrayService.ts
@@ -7,7 +7,6 @@ import type { IJointStyle } from "../../interface/IJointStyle";
 import { $getArray } from "../../DisplayObjectUtil";
 import { Graphics } from "../../Graphics";
 import { BitmapData } from "../../BitmapData";
-import { $cacheStore } from "@next2d/cache";
 
 /**
  * @description Graphicsのrecodesを解析して数値配列を生成します。
@@ -253,41 +252,20 @@ export const execute = (recodes : any[] | null): any[] =>
             case Graphics.BITMAP_FILL:
                 {
                     const bitmapData: BitmapData = recodes[idx++];
-
-                    let imageArray: Uint8Array;
-                    if (bitmapData.image !== null || bitmapData.canvas !== null) {
-
-                        const canvas  = $cacheStore.getCanvas();
-                        const width   = bitmapData.width;
-                        const height  = bitmapData.height;
-                        canvas.width  = width;
-                        canvas.height = height;
-
-                        const context = canvas.getContext("2d") as CanvasRenderingContext2D;
-                        context.drawImage(
-                            bitmapData.image as HTMLImageElement
-                            || bitmapData.canvas as HTMLCanvasElement,
-                            0, 0
-                        );
-
-                        imageArray = new Uint8Array(context.getImageData(0, 0, width, height).data);
-
-                        $cacheStore.destroy(context);
-
-                    } else if (bitmapData.buffer !== null) {
-                        imageArray = bitmapData.buffer;
-                    } else {
+                    const buffer = bitmapData.buffer;
+                    if (!buffer) {
+                        idx += 3;
                         break;
                     }
 
                     array.push(
                         bitmapData.width,
                         bitmapData.height,
-                        imageArray.length
+                        buffer.length
                     );
 
-                    for (let idx = 0; idx < imageArray.length; idx += 4096) {
-                        array.push(...imageArray.subarray(idx, idx + 4096));
+                    for (let idx = 0; idx < buffer.length; idx += 4096) {
+                        array.push(...buffer.subarray(idx, idx + 4096));
                     }
 
                     const matrix: Float32Array = recodes[idx++];
@@ -347,34 +325,9 @@ export const execute = (recodes : any[] | null): any[] =>
                     array.push(recodes[idx++]);
 
                     const bitmapData: BitmapData = recodes[idx++];
-
-                    let buffer: Uint8Array;
-                    if (bitmapData.image !== null || bitmapData.canvas !== null) {
-
-                        const canvas: HTMLCanvasElement = $cacheStore.getCanvas();
-
-                        const width: number  = bitmapData.width;
-                        const height: number = bitmapData.height;
-                        canvas.width  = width;
-                        canvas.height = height;
-
-                        const context: CanvasRenderingContext2D | null = canvas.getContext("2d", { "willReadFrequently": true });
-                        if (!context) {
-                            throw new Error("the context is null.");
-                        }
-
-                        // @ts-ignore
-                        context.drawImage(bitmapData.image || bitmapData.canvas, 0, 0);
-
-                        buffer = new Uint8Array(
-                            context.getImageData(0, 0, width, height).data
-                        );
-
-                        $cacheStore.destroy(context);
-
-                    } else if (bitmapData.buffer !== null) {
-                        buffer = bitmapData.buffer;
-                    } else {
+                    const buffer = bitmapData.buffer;
+                    if (!buffer) {
+                        idx += 3;
                         break;
                     }
 

diff --git a/packages/display/src/Loader/service/LoaderBuildService.ts b/packages/display/src/Loader/service/LoaderBuildService.ts
@@ -1,9 +1,9 @@
 import type { IAnimationToolData } from "../../interface/IAnimationToolData";
 import type { Loader } from "../../Loader";
+import type { IMovieClipCharacter } from "../../interface/IMovieClipCharacter";
 import { Event } from "@next2d/events";
 import { MovieClip } from "../../MovieClip";
 import { execute as displayObjectBaseBuildService } from "../../DisplayObject/service/DisplayObjectBaseBuildService";
-import { execute as movieClipBuildFromCharacterUseCase } from "../../MovieClip/usecase/MovieClipBuildFromCharacterUseCase";
 
 /**
  * @description 読み込んだJSONオブジェクトからrootのMovieClipを構築
@@ -37,7 +37,7 @@ export const execute = async (loader: Loader, object: IAnimationToolData): Promi
     // build root content
     const movieClip = new MovieClip();
 
-    const character = object.characters[0];
+    const character = object.characters[0] as IMovieClipCharacter;
     displayObjectBaseBuildService(movieClip, -1, {
         "characterId": 0,
         "name": "main",
@@ -46,7 +46,7 @@ export const execute = async (loader: Loader, object: IAnimationToolData): Promi
         "endFrame": character.controller.length,
         "startFrame": 1
     }, loader);
-    movieClipBuildFromCharacterUseCase(movieClip, character);
+    movieClip.$sync(character, loaderInfo);
 
     movieClip.parent   = null;
     loaderInfo.content = movieClip;

diff --git a/packages/display/src/MovieClip.ts b/packages/display/src/MovieClip.ts
@@ -1,4 +1,7 @@
 import type { IDisplayObject } from "./interface/IDisplayObject";
+import type { ICharacter } from "./interface/ICharacter";
+import type { LoaderInfo } from "./LoaderInfo";
+import type { IMovieClipCharacter } from "./interface/IMovieClipCharacter";
 import { Sprite } from "./Sprite";
 import { FrameLabel } from "./FrameLabel";
 import { Sound } from "@next2d/media";
@@ -11,6 +14,7 @@ import { execute as movieClipGotoAndPlayUseCase } from "./MovieClip/usecase/Movi
 import { execute as movieClipGotoAndStopUseCase } from "./MovieClip/usecase/MovieClipGotoAndStopUseCase";
 import { execute as movieClipNextFrameUseCase } from "./MovieClip/usecase/MovieClipNextFrameUseCase";
 import { execute as movieClipPrevFrameUseCase } from "./MovieClip/usecase/MovieClipPrevFrameUseCase";
+import { execute as movieClipBuildFromCharacterUseCase } from "./MovieClip/usecase/MovieClipBuildFromCharacterUseCase";
 
 /**
  * @description MovieClip クラスは、Sprite、DisplayObjectContainer、InteractiveObject、DisplayObject
@@ -387,4 +391,22 @@ export class MovieClip extends Sprite
     {
         movieClipAddFrameLabelService(this, frame_label);
     }
+
+    /**
+     * @description character 情報を元に DisplayObject を構築
+     *              Build DisplayObject based on character
+     *
+     * @param  {ICharacter} character
+     * @param  {LoaderInfo} [loader_info=null]
+     * @return {void}
+     * @method
+     * @protected
+     */
+    $sync (character: ICharacter, loader_info: LoaderInfo | null = null): void
+    {
+        if (loader_info) {
+            super.$syncLoaderInfo(loader_info);
+        }
+        movieClipBuildFromCharacterUseCase(this, character as IMovieClipCharacter);
+    }
 }
diff --git a/packages/display/src/MovieClip/service/MovieClipGetChildrenService.ts b/packages/display/src/MovieClip/service/MovieClipGetChildrenService.ts
@@ -83,7 +83,7 @@ export const execute = <D extends DisplayObject>(
                 continue;
             }
 
-            children.push(displayObject);
+            children.push(displayObject as D);
 
             if (displayObject.isContainerEnabled) {
                 caches.push(displayObject as unknown as DisplayObjectContainer);
@@ -176,7 +176,7 @@ export const execute = <D extends DisplayObject>(
             continue;
         }
 
-        children.push(displayObject);
+        children.push(displayObject as D);
 
         if (displayObject.isContainerEnabled) {
             caches.push(displayObject as unknown as DisplayObjectContainer);

diff --git a/packages/display/src/MovieClip/usecase/MovieClipBuildDictionaryCharacterUseCase.ts b/packages/display/src/MovieClip/usecase/MovieClipBuildDictionaryCharacterUseCase.ts
@@ -1,19 +1,15 @@
 import type { IDictionaryTag } from "../../interface/IDictionaryTag";
 import type { ICharacter } from "../../interface/ICharacter";
-import type { IDisplayObject } from "../../interface/IDisplayObject";
 import type { IMovieClipCharacter } from "../../interface/IMovieClipCharacter";
 import type { IShapeCharacter } from "../../interface/IShapeCharacter";
 import type { ITextFieldCharacter } from "../../interface/ITextFieldCharacter";
 import type { IVideoCharacter } from "../../interface/IVideoCharacter";
+import type { DisplayObject } from "../../DisplayObject";
 import { MovieClip } from "../../MovieClip";
 import { Shape } from "../../Shape";
 import { TextField } from "@next2d/text";
 import { Video } from "@next2d/media";
 import { execute as displayObjectBaseBuildService } from "../../DisplayObject/service/DisplayObjectBaseBuildService";
-import { execute as movieClipBuildFromCharacterUseCase } from "../../MovieClip/usecase/MovieClipBuildFromCharacterUseCase";
-import { execute as shapeBuildFromCharacterUseCase } from "../../Shape/usecase/ShapeBuildFromCharacterUseCase";
-import { execute as textFieldBuildFromCharacterUseCase } from "../../TextField/usecase/TextFieldBuildFromCharacterUseCase";
-import { execute as videoBuildFromCharacterUseCase } from "../../Video/usecase/VideoBuildFromCharacterUseCase";
 
 /**
  * @description cahracterを元にDisplayObjectを構築
@@ -27,50 +23,50 @@ import { execute as videoBuildFromCharacterUseCase } from "../../Video/usecase/V
  * @method
  * @protected
  */
-export const execute = (
+export const execute = <D extends DisplayObject> (
     dictionary_id: number,
     tag: IDictionaryTag,
     character: ICharacter,
     parent: MovieClip,
     placeId: number = -1
-): IDisplayObject<any> => {
+): D => {
 
     switch (character.extends) {
 
         case MovieClip.namespace:
         {
             const movieClip = new MovieClip();
             displayObjectBaseBuildService(movieClip, dictionary_id, tag, parent, placeId);
-            movieClipBuildFromCharacterUseCase(movieClip, character as IMovieClipCharacter);
-            return movieClip as IDisplayObject<MovieClip>;
+            movieClip.$sync(character as IMovieClipCharacter);
+            return movieClip as unknown as D;
         }
 
         case Shape.namespace:
         {
             const shape = new Shape();
             displayObjectBaseBuildService(shape, dictionary_id, tag, parent, placeId);
-            shapeBuildFromCharacterUseCase(shape, character as IShapeCharacter);
-            return shape;
+            shape.$sync(character as IShapeCharacter);
+            return shape as unknown as D;
         }
 
         case TextField.namespace:
         {
             const textField = new TextField();
             displayObjectBaseBuildService(textField, dictionary_id, tag, parent, placeId);
-            textFieldBuildFromCharacterUseCase(textField, character as ITextFieldCharacter);
-            return textField;
+            textField.$sync(character as ITextFieldCharacter);
+            return textField as unknown as D;
         }
 
         case Video.namespace:
         {
             const video = new Video();
             displayObjectBaseBuildService(video, dictionary_id, tag, parent, placeId);
-            videoBuildFromCharacterUseCase(video, character as IVideoCharacter);
-            return video;
+            video.$sync(character as IVideoCharacter);
+            return video as unknown as D;
         }
 
         default:
-            break;
+            throw new Error(`Character extends not found: ${character.extends}`);
 
     }
 };