@next2d/core 1.15.0 → 1.17.0

package/dist/Display.js

@@ -1,4 +1,4 @@
-import { DisplayObject, InteractiveObject, DisplayObjectContainer, Sprite, MovieClip, BitmapData, BlendMode, FrameLabel, Graphics, Loader, LoaderInfo, Shape, Stage } from "@next2d/display";
+import { DisplayObject, InteractiveObject, DisplayObjectContainer, Sprite, MovieClip, BitmapData, BlendMode, FrameLabel, Graphics, Loader, LoaderInfo, Shape, Stage, TextField } from "@next2d/display";
 const display = {
     DisplayObject,
     InteractiveObject,
@@ -12,7 +12,8 @@ const display = {
     Loader,
     LoaderInfo,
     Shape,
-    Stage
+    Stage,
+    TextField
 };
 Object.entries(display).forEach(([key, DisplayClass]) => {
     Object.defineProperty(display, key, {

package/dist/Next2D.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { events } from "./Events";
 import { display } from "./Display";
 import { filters } from "./Filters";
@@ -169,22 +178,24 @@ export class Next2D {
      * @public
      */
     createRootMovieClip(width = 240, height = 240, fps = 24, options = null) {
-        return Promise
-            .all(this._$promises)
-            .then(() => {
-            $poolArray(this._$promises);
-            const player = this._$player;
-            // setup
-            player.width = width | 0;
-            player.height = height | 0;
-            player.mode = "create";
-            player.stage._$frameRate = fps | 0;
-            player.setOptions(options);
-            player._$initialize();
-            const root = player.stage.addChild(new Sprite());
-            player._$loadStatus = Player.LOAD_END;
-            player.play();
-            return Promise.resolve(root);
+        return __awaiter(this, void 0, void 0, function* () {
+            return Promise
+                .all(this._$promises)
+                .then(() => {
+                $poolArray(this._$promises);
+                const player = this._$player;
+                // setup
+                player.width = width | 0;
+                player.height = height | 0;
+                player.mode = "create";
+                player.stage._$frameRate = fps | 0;
+                player.setOptions(options);
+                player._$initialize();
+                const root = player.stage.addChild(new Sprite());
+                player._$loadStatus = Player.LOAD_END;
+                player.play();
+                return root;
+            });
         });
     }
 }

package/dist/Player.d.ts

@@ -1,9 +1,9 @@
-import { CacheStore } from "@next2d/share";
 import { Stage, MovieClip } from "@next2d/display";
 import { Event as Next2DEvent } from "@next2d/events";
 import { Video, Sound } from "@next2d/media";
 import { CanvasToWebGLContext } from "@next2d/webgl";
 import { PlayerOptionsImpl, PlayerModeImpl, AttachmentImpl, EventListenerImpl, EventDispatcherImpl } from "@next2d/interface";
+import { CacheStore } from "@next2d/share";
 /**
  * 描画のイベントや設定やコントロールの管理クラス
  * Management classes for drawing events, settings and controls
@@ -11,55 +11,52 @@ import { PlayerOptionsImpl, PlayerModeImpl, AttachmentImpl, EventListenerImpl, E
  * @class
  */
 export declare class Player {
-    private readonly _$stage;
-    private readonly _$cacheStore;
-    private _$mode;
+    _$stopFlag: boolean;
     _$actionOffset: number;
     _$actions: MovieClip[];
     _$loaders: EventDispatcherImpl<any>[];
     _$sounds: Map<any, MovieClip>;
+    _$loadStatus: number;
+    _$width: number;
+    _$height: number;
+    _$scale: number;
+    _$state: "up" | "down";
+    _$attachment: AttachmentImpl | null;
+    readonly _$videos: Video[];
+    readonly _$sources: Sound[];
+    private _$mode;
     private _$context;
-    private readonly _$hitObject;
     private _$rollOverObject;
     private _$mouseOverTarget;
-    private readonly _$ratio;
-    _$stopFlag: boolean;
     private _$startTime;
     private _$fps;
-    private _$isLoad;
-    _$loadStatus: number;
-    _$width: number;
-    _$height: number;
     private _$baseWidth;
     private _$baseHeight;
-    _$scale: number;
-    private readonly _$matrix;
     private _$tx;
     private _$ty;
-    _$state: "up" | "down";
     private _$hitTestStart;
     private _$stageX;
     private _$stageY;
-    private readonly _$broadcastEvents;
     private _$optionWidth;
     private _$optionHeight;
     private _$tagId;
     private _$bgColor;
     private _$base;
-    readonly _$videos: Video[];
-    readonly _$sources: Sound[];
     private _$fullScreen;
-    private readonly _$quality;
     private _$textField;
-    private _$touchY;
     private _$timerId;
     private _$loadId;
-    _$attachment: AttachmentImpl | null;
-    private readonly _$canvas;
     private _$deltaX;
     private _$deltaY;
     private _$clickTarget;
     private _$actionProcess;
+    private readonly _$stage;
+    private readonly _$hitObject;
+    private readonly _$ratio;
+    private readonly _$matrix;
+    private readonly _$broadcastEvents;
+    private readonly _$quality;
+    private readonly _$canvas;
     /**
      * @constructor
      * @public
@@ -80,24 +77,23 @@ export declare class Player {
      */
     static get LOAD_END(): number;
     /**
-     * @type {HTMLCanvasElement}
+     * @return {CacheStore}
      * @readonly
      * @public
      */
-    get canvas(): HTMLCanvasElement;
+    get cacheStore(): CacheStore;
     /**
-     * @return {Map}
+     * @type {HTMLCanvasElement}
      * @readonly
      * @public
      */
-    get broadcastEvents(): Map<string, EventListenerImpl[]>;
+    get canvas(): HTMLCanvasElement;
     /**
-     * @member {CacheStore}
-     * @return {CacheStore}
+     * @return {Map}
      * @readonly
      * @public
      */
-    get cacheStore(): CacheStore;
+    get broadcastEvents(): Map<string, EventListenerImpl[]>;
     /**
      * @member {CanvasToWebGLContext|null}
      * @default null

package/dist/Player.js

@@ -1,10 +1,9 @@
-import { CacheStore } from "@next2d/share";
 import { Stage } from "@next2d/display";
 import { Event as Next2DEvent, MouseEvent as Next2DMouseEvent, EventPhase } from "@next2d/events";
 import { SoundMixer } from "@next2d/media";
 import { CanvasToWebGLContext } from "@next2d/webgl";
-import { $devicePixelRatio, $document, $window, $rendererWorker, $PREFIX, $audioContext, $TOUCH_START, $TOUCH_MOVE, $TOUCH_END, $MOUSE_DOWN, $MOUSE_MOVE, $MOUSE_UP, $MOUSE_WHEEL, $DOUBLE_CLICK, $MOUSE_LEAVE, $loadAudioData, $MATRIX_HIT_ARRAY_IDENTITY, $hitContext, $isTouch, $dropTarget, $dragRules, $isSafari, $getEvent, $setEvent, $setEventType, $setCurrentLoaderInfo, $getEventType } from "@next2d/util";
-import { $Math, $performance, $COLOR_ARRAY_IDENTITY, $doUpdated, $isUpdated, $getArray, $getFloat32Array6, $getMap, $uintToRGBA, $toColorInt, $requestAnimationFrame, $cancelAnimationFrame, $poolArray, $clamp } from "@next2d/share";
+import { $document, $window, $rendererWorker, $PREFIX, $audioContext, $TOUCH_START, $TOUCH_MOVE, $TOUCH_END, $MOUSE_DOWN, $MOUSE_MOVE, $MOUSE_UP, $MOUSE_WHEEL, $DOUBLE_CLICK, $MOUSE_LEAVE, $loadAudioData, $MATRIX_HIT_ARRAY_IDENTITY, $hitContext, $isTouch, $dropTarget, $dragRules, $isSafari, $getEvent, $setEvent, $setEventType, $setCurrentLoaderInfo, $getEventType, $getRenderBufferArray, $getRenderMessageObject, $poolRenderMessageObject } from "@next2d/util";
+import { $Math, $performance, $COLOR_ARRAY_IDENTITY, $doUpdated, $isUpdated, $getArray, $getFloat32Array6, $getMap, $uintToRGBA, $toColorInt, $requestAnimationFrame, $cancelAnimationFrame, $poolArray, $clamp, $devicePixelRatio, $setDevicePixelRatio, $cacheStore } from "@next2d/share";
 /**
  * 描画のイベントや設定やコントロールの管理クラス
  * Management classes for drawing events, settings and controls
@@ -17,17 +16,14 @@ export class Player {
      * @public
      */
     constructor() {
+        // init
+        $setDevicePixelRatio(window.devicePixelRatio);
         /**
          * @type {Stage}
          * @private
          */
         this._$stage = new Stage();
         this._$stage._$player = this;
-        /**
-         * @type {CacheStore}
-         * @private
-         */
-        this._$cacheStore = new CacheStore();
         /**
          * @type {string}
          * @private
@@ -98,12 +94,6 @@ export class Player {
          * @private
          */
         this._$fps = 16;
-        /**
-         * @type {boolean}
-         * @default false
-         * @private
-         */
-        this._$isLoad = false;
         /**
          * @type {number}
          * @default 0
@@ -256,12 +246,6 @@ export class Player {
          * @private
          */
         this._$textField = null;
-        /**
-         * @type {number}
-         * @default 0
-         * @private
-         */
-        this._$touchY = 0;
         /**
          * @type {number}
          * @default -1
@@ -322,6 +306,14 @@ export class Player {
     static get LOAD_END() {
         return 2;
     }
+    /**
+     * @return {CacheStore}
+     * @readonly
+     * @public
+     */
+    get cacheStore() {
+        return $cacheStore;
+    }
     /**
      * @type {HTMLCanvasElement}
      * @readonly
@@ -338,15 +330,6 @@ export class Player {
     get broadcastEvents() {
         return this._$broadcastEvents;
     }
-    /**
-     * @member {CacheStore}
-     * @return {CacheStore}
-     * @readonly
-     * @public
-     */
-    get cacheStore() {
-        return this._$cacheStore;
-    }
     /**
      * @member {CanvasToWebGLContext|null}
      * @default null
@@ -507,7 +490,7 @@ export class Player {
         this._$stopFlag = true;
         this._$timerId = -1;
         SoundMixer.stopAll();
-        this._$cacheStore.reset();
+        $cacheStore.reset();
         if ($rendererWorker) {
             $rendererWorker.postMessage({
                 "command": "stop"
@@ -521,7 +504,7 @@ export class Player {
      * @public
      */
     removeCache(id) {
-        this._$cacheStore.removeCache(id);
+        $cacheStore.removeCache(id);
         if ($rendererWorker) {
             $rendererWorker.postMessage({
                 "command": "removeCache",
@@ -638,12 +621,6 @@ export class Player {
      * @private
      */
     _$initialize() {
-        if ($document.readyState === "loading") {
-            $window.addEventListener("DOMContentLoaded", () => {
-                this._$initialize();
-            });
-            return;
-        }
         const contentElementId = this.contentElementId;
         if (!this._$tagId) {
             $document
@@ -793,20 +770,22 @@ export class Player {
         this._$canvas.width = 1;
         this._$canvas.height = 1;
         if ($rendererWorker) {
-            $rendererWorker.postMessage({
-                "command": "setStage",
-                "instanceId": this._$stage._$instanceId
-            });
             const offscreenCanvas = this
                 ._$canvas
                 .transferControlToOffscreen();
+            const buffer = $getRenderBufferArray();
+            let index = 0;
+            buffer[index++] = this._$stage._$instanceId;
+            buffer[index++] = +$isSafari;
+            buffer[index++] = $devicePixelRatio;
+            buffer[index++] = this._$getSamples();
+            const options = $getArray(offscreenCanvas, buffer.buffer);
             $rendererWorker.postMessage({
                 "command": "initialize",
                 "canvas": offscreenCanvas,
-                "samples": this._$getSamples(),
-                "devicePixelRatio": $devicePixelRatio,
-                "isSafari": $isSafari
-            }, [offscreenCanvas]);
+                "buffer": buffer
+            }, options);
+            $poolArray(options);
         }
         else {
             // create gl context
@@ -819,7 +798,7 @@ export class Player {
             });
             if (gl) {
                 this._$context = new CanvasToWebGLContext(gl, this._$getSamples());
-                this._$cacheStore.context = this._$context;
+                $cacheStore.context = this._$context;
             }
             else {
                 alert("WebGL setting is off. Please turn the setting on.");
@@ -853,7 +832,6 @@ export class Player {
             $setEvent(event);
             $setEventType($TOUCH_START);
             // start position
-            this._$touchY = event.changedTouches[0].pageY;
             this._$hitTest();
         });
         this._$canvas.addEventListener($TOUCH_MOVE, (event) => {
@@ -868,10 +846,6 @@ export class Player {
         });
         // mouse wheel
         this._$canvas.addEventListener($TOUCH_MOVE, (event) => {
-            // update
-            const pageY = event.changedTouches[0].pageY;
-            this._$deltaY = this._$touchY - pageY;
-            this._$touchY = pageY;
             $setEvent(event);
             $setEventType($TOUCH_MOVE);
             this._$hitTest();
@@ -941,9 +915,6 @@ export class Player {
         const div = $document
             .getElementById(this.contentElementId);
         if (div) {
-            // cache reset
-            this._$stage._$doChanged();
-            this._$cacheStore.reset();
             const parent = div.parentElement;
             if (!parent) {
                 throw new Error("the parentElement is null.");
@@ -982,6 +953,13 @@ export class Player {
                 : `${screenWidth / 2 - width / 2}px`;
             width *= $devicePixelRatio;
             height *= $devicePixelRatio;
+            // no resize
+            if (this._$width === width && this._$height === height) {
+                return;
+            }
+            // cache reset
+            this._$stage._$doChanged();
+            $cacheStore.reset();
             // params
             this._$scale = scale;
             this._$width = width;
@@ -1022,10 +1000,17 @@ export class Player {
      */
     _$setBackgroundColor(background_color = "transparent") {
         if ($rendererWorker) {
-            $rendererWorker.postMessage({
-                "command": "setBackgroundColor",
-                "backgroundColor": background_color
-            });
+            const buffer = $getRenderBufferArray();
+            buffer[0] = background_color === "transparent"
+                ? -1
+                : $toColorInt(background_color);
+            const message = $getRenderMessageObject();
+            message.command = "setBackgroundColor";
+            message.buffer = buffer;
+            const options = $getArray(buffer.buffer);
+            $rendererWorker.postMessage(message, options);
+            $poolRenderMessageObject(message);
+            $poolArray(options);
         }
         else {
             const context = this._$context;
@@ -1053,20 +1038,28 @@ export class Player {
      */
     _$resizeCanvas(width, height, scale, tx = 0, ty = 0) {
         if ($rendererWorker) {
-            $rendererWorker.postMessage({
-                "command": "resize",
-                "width": width,
-                "height": height,
-                "scale": scale,
-                "tx": tx,
-                "ty": ty
-            });
+            const buffer = $getRenderBufferArray();
+            let index = 0;
+            buffer[index++] = width;
+            buffer[index++] = height;
+            buffer[index++] = scale;
+            buffer[index++] = tx;
+            buffer[index++] = ty;
+            const message = $getRenderMessageObject();
+            const options = $getArray(buffer.buffer);
+            message.command = "resize";
+            message.buffer = buffer;
+            $rendererWorker.postMessage(message, options);
+            // reset
+            $poolRenderMessageObject(message);
+            $poolArray(options);
         }
         else {
             const context = this._$context;
             if (!context) { // unit test
                 return;
             }
+            context.clearInstacedArray();
             this._$canvas.width = width;
             this._$canvas.height = height;
             context._$gl.viewport(0, 0, width, height);
@@ -1076,9 +1069,10 @@ export class Player {
                 manager.releaseAttachment(this._$attachment, true);
             }
             this._$attachment = manager
-                .createCacheAttachment(width, height, false);
+                .createCacheAttachment(width, height, true);
             // update cache max size
             context.setMaxSize(width, height);
+            context._$bind(this._$attachment);
         }
     }
     /**
@@ -1412,19 +1406,18 @@ export class Player {
         if (!this._$width || !this._$height) {
             return;
         }
+        if (!this._$stage._$isUpdated()) {
+            return;
+        }
         if ($rendererWorker) {
             $rendererWorker.postMessage({
                 "command": "draw"
             });
         }
-        if (!this._$stage._$isUpdated()) {
-            return;
-        }
         const context = this._$context;
         if (!context) {
             return;
         }
-        context._$bind(this._$attachment);
         // reset
         context.reset();
         context.setTransform(1, 0, 0, 1, 0, 0);
@@ -1433,17 +1426,10 @@ export class Player {
         this._$stage._$draw(context, this._$matrix, $COLOR_ARRAY_IDENTITY);
         // stage end
         this._$stage._$updated = false;
-        const manager = context.frameBuffer;
-        const texture = manager
-            .getTextureFromCurrentAttachment();
-        manager.unbind();
-        // reset and draw to main canvas
-        context.reset();
-        context.setTransform(1, 0, 0, 1, 0, 0);
-        context.clearRect(0, 0, this._$width, this._$height);
-        context.drawImage(texture, 0, 0, this._$width, this._$height);
-        // re bind
-        context._$bind(this._$attachment);
+        context.drawInstacedArray();
+        context
+            .frameBuffer
+            .transferToMainTexture();
     }
     /**
      * @return {void}
@@ -1516,20 +1502,20 @@ export class Player {
             x += rect.left;
             y += rect.top;
         }
-        let stageX = 0;
-        let stageY = 0;
+        let pageX = 0;
+        let pageY = 0;
         if ("changedTouches" in event) {
             const changedTouche = event.changedTouches[0];
-            stageX = changedTouche.pageX;
-            stageY = changedTouche.pageY;
+            pageX = changedTouche.pageX;
+            pageY = changedTouche.pageY;
         }
         else if ("pageX" in event) {
-            stageX = event.pageX;
-            stageY = event.pageY;
+            pageX = event.pageX;
+            pageY = event.pageY;
         }
         // drop point
-        stageX = (stageX - x) / this._$scale;
-        stageY = (stageY - y) / this._$scale;
+        const stageX = (pageX - x) / this._$scale;
+        const stageY = (pageY - y) / this._$scale;
         // update
         this._$stageX = stageX;
         this._$stageY = stageY;
@@ -1574,9 +1560,23 @@ export class Player {
                     $dropTarget.x = dragX;
                     $dropTarget.y = dragY;
                 }
+                if (this._$clickTarget
+                    && "_$text" in this._$clickTarget
+                    && this._$clickTarget.scrollEnabled) {
+                    const deltaX = this._$deltaX - pageX;
+                    const deltaY = this._$deltaY - pageY;
+                    // @ts-ignore
+                    this._$clickTarget.scrollX += deltaX / (this._$clickTarget.textWidth / this._$clickTarget.width);
+                    // @ts-ignore
+                    this._$clickTarget.scrollY += deltaY / (this._$clickTarget.textHeight / this._$clickTarget.height);
+                }
+                this._$deltaX = pageX;
+                this._$deltaY = pageY;
                 break;
             case $TOUCH_START:
             case $MOUSE_DOWN:
+                this._$deltaX = pageX;
+                this._$deltaY = pageY;
                 this._$state = "down";
                 canPointer = this._$canvas.style.cursor === "pointer";
                 staticPointer = true;
@@ -1584,6 +1584,8 @@ export class Player {
             case $TOUCH_END:
             case $MOUSE_UP:
             case $DOUBLE_CLICK:
+                this._$deltaX = 0;
+                this._$deltaY = 0;
                 this._$state = "up";
                 break;
         }
@@ -1749,18 +1751,6 @@ export class Player {
                     // down event
                     case $TOUCH_START:
                     case $MOUSE_DOWN:
-                        // TextField focus out
-                        if (this._$textField
-                            && instance !== this._$textField
-                            && "_$text" in this._$textField) {
-                            this._$textField.focus = false;
-                            this._$textField = null;
-                        }
-                        // TextField focus out
-                        if ("_$text" in instance) {
-                            instance.focus = true;
-                            this._$textField = instance;
-                        }
                         // (3) mouseDown
                         if (instance.willTrigger(Next2DMouseEvent.MOUSE_DOWN)) {
                             instance.dispatchEvent(new Next2DMouseEvent(Next2DMouseEvent.MOUSE_DOWN, true, false));
@@ -1778,6 +1768,11 @@ export class Player {
                             this._$textField.focus = false;
                             this._$textField = null;
                         }
+                        // TextField focus out
+                        if ("_$text" in instance) {
+                            instance.focus = true;
+                            this._$textField = instance;
+                        }
                         // (1) mouseUp
                         if (instance.willTrigger(Next2DMouseEvent.MOUSE_UP)) {
                             instance.dispatchEvent(new Next2DMouseEvent(Next2DMouseEvent.MOUSE_UP, true, false));
@@ -1795,9 +1790,15 @@ export class Player {
                         if (instance.willTrigger(Next2DMouseEvent.MOUSE_WHEEL)) {
                             instance.dispatchEvent(new Next2DMouseEvent(Next2DMouseEvent.MOUSE_WHEEL));
                         }
-                        if ("deltaY" in event && instance.scrollEnabled) {
-                            // @ts-ignore
-                            instance.scrollV += $clamp(event.deltaY, -1, 1, 0);
+                        if (instance.scrollEnabled) {
+                            if ("deltaX" in event) {
+                                // @ts-ignore
+                                instance.scrollX += event.deltaX / (instance.textWidth / instance.width);
+                            }
+                            if ("deltaY" in event) {
+                                // @ts-ignore
+                                instance.scrollY += event.deltaY / (instance.textHeight / instance.height);
+                            }
                         }
                         break;
                     case $DOUBLE_CLICK:

package/dist/Text.js

@@ -1,6 +1,5 @@
-import { TextField, TextFormat } from "@next2d/text";
+import { TextFormat } from "@next2d/text";
 const text = {
-    TextField,
     TextFormat
 };
 Object.entries(text).forEach(([key, TextClass]) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/core",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "Next2D Core Packages",
   "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -32,16 +32,16 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "peerDependencies": {
-    "@next2d/interface": "1.15.0",
-    "@next2d/webgl": "1.15.0",
-    "@next2d/display": "1.15.0",
-    "@next2d/core": "1.15.0",
-    "@next2d/net": "1.15.0",
-    "@next2d/share": "1.15.0",
-    "@next2d/events": "1.15.0",
-    "@next2d/media": "1.15.0",
-    "@next2d/text": "1.15.0",
-    "@next2d/geom": "1.15.0",
-    "@next2d/util": "1.15.0"
+    "@next2d/interface": "1.17.0",
+    "@next2d/webgl": "1.17.0",
+    "@next2d/display": "1.17.0",
+    "@next2d/core": "1.17.0",
+    "@next2d/net": "1.17.0",
+    "@next2d/share": "1.17.0",
+    "@next2d/events": "1.17.0",
+    "@next2d/media": "1.17.0",
+    "@next2d/text": "1.17.0",
+    "@next2d/geom": "1.17.0",
+    "@next2d/util": "1.17.0"
   }
 }