@next2d/text 1.15.0 → 1.16.0

package/dist/TextField.d.ts

@@ -59,6 +59,8 @@ export declare class TextField extends InteractiveObject {
     private _$thicknessColor;
     private _$verticalAlign;
     private _$createdTextData;
+    private _$cacheKeys;
+    private _$cacheParams;
     /**
      * @constructor
      * @public

package/dist/TextField.js

@@ -3,8 +3,8 @@ import { InteractiveObject, Sprite } from "@next2d/display";
 import { FocusEvent, Event as Next2DEvent, MouseEvent as Next2DMouseEvent } from "@next2d/events";
 import { Tween } from "@next2d/ui";
 import { Rectangle } from "@next2d/geom";
-import { $currentPlayer, $DIV, $isSafari, $MOUSE_DOWN, $MOUSE_UP, $MOUSE_WHEEL, $P_TAG, $PREFIX, $rendererWorker, $SCROLL, $textContext, $TOUCH_END, $TOUCH_START, $devicePixelRatio, $document, $RegExp } from "@next2d/util";
-import { $doUpdated, $clamp, $getArray, $intToRGBA, $isNaN, $Math, $requestAnimationFrame, $toColorInt, $getMap, $poolFloat32Array6, $boundsMatrix, $multiplicationMatrix, $poolBoundsObject, $multiplicationColor, $Infinity, $Number, $poolArray, $poolFloat32Array8, $generateFontStyle, $getBoundsObject } from "@next2d/share";
+import { $currentPlayer, $DIV, $isSafari, $MOUSE_DOWN, $MOUSE_UP, $MOUSE_WHEEL, $P_TAG, $PREFIX, $rendererWorker, $SCROLL, $textContext, $TOUCH_END, $TOUCH_START, $document, $RegExp } from "@next2d/util";
+import { $cacheStore, $doUpdated, $clamp, $getArray, $intToRGBA, $isNaN, $Math, $requestAnimationFrame, $toColorInt, $getMap, $poolFloat32Array6, $boundsMatrix, $multiplicationMatrix, $poolBoundsObject, $multiplicationColor, $Infinity, $Number, $poolArray, $poolFloat32Array8, $generateFontStyle, $devicePixelRatio, $getBoundsObject } from "@next2d/share";
 /**
  * TextField クラスは、テキストの表示と入力用の表示オブジェクトを作成するために使用されます。
  * プロパティインスペクターを使用して、テキストフィールドにインスタンス名を付けることができます。
@@ -287,6 +287,16 @@ export class TextField extends InteractiveObject {
          * @private
          */
         this._$heightCache = $getMap();
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$cacheKeys = $getArray();
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$cacheParams = $getArray(0, 0, 0);
     }
     /**
      * @description 指定されたクラスのストリングを返します。
@@ -1711,8 +1721,7 @@ export class TextField extends InteractiveObject {
         this._$doChanged();
         $doUpdated();
         // cache clear
-        const player = $currentPlayer();
-        player.cacheStore.removeCache(this._$instanceId);
+        $cacheStore.removeCache(this._$instanceId);
     }
     /**
      * @return {void}
@@ -2027,17 +2036,6 @@ export class TextField extends InteractiveObject {
             default:
                 break;
         }
-        if (0 > xMin + width || 0 > yMin + height) {
-            return;
-        }
-        // cache current buffer
-        const manager = context.frameBuffer;
-        const currentAttachment = manager.currentAttachment;
-        if (!currentAttachment
-            || xMin > currentAttachment.width
-            || yMin > currentAttachment.height) {
-            return;
-        }
         let xScale = +$Math.sqrt(multiMatrix[0] * multiMatrix[0]
             + multiMatrix[1] * multiMatrix[1]);
         if (!$Number.isInteger(xScale)) {
@@ -2059,47 +2057,58 @@ export class TextField extends InteractiveObject {
             yScale = +yScale.toFixed(4);
         }
         const filters = this._$filters || this.filters;
-        if (0 > xMin + width || 0 > yMin + height) {
-            if (filters.length && this._$canApply(filters)) {
-                let filterBounds = $getBoundsObject(0, width, 0, height);
-                for (let idx = 0; idx < filters.length; ++idx) {
-                    filterBounds = filters[idx]
-                        ._$generateFilterRect(filterBounds, xScale, yScale);
-                }
-                if (0 > filterBounds.xMin + filterBounds.xMax
-                    || 0 > filterBounds.yMin + filterBounds.yMax) {
-                    $poolBoundsObject(filterBounds);
-                    return;
-                }
-                $poolBoundsObject(filterBounds);
-            }
-            else {
-                return;
+        const canApply = filters !== null
+            && filters.length > 0
+            && this._$canApply(filters);
+        let filterBounds = $getBoundsObject(0, width, 0, height);
+        if (canApply && filters) {
+            for (let idx = 0; idx < filters.length; ++idx) {
+                filterBounds = filters[idx]
+                    ._$generateFilterRect(filterBounds, xScale, yScale);
             }
         }
-        const blendMode = this._$blendMode || this.blendMode;
-        const keys = $getArray(xScale, yScale);
-        const instanceId = this._$instanceId;
-        const player = $currentPlayer();
-        const cacheStore = player.cacheStore;
-        const cacheKeys = cacheStore.generateKeys(instanceId, keys);
-        let texture = cacheStore.get(cacheKeys);
+        // cache current buffer
+        const manager = context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        if (!currentAttachment
+            || xMin - filterBounds.xMin > currentAttachment.width
+            || yMin - filterBounds.yMin > currentAttachment.height) {
+            $poolBoundsObject(filterBounds);
+            return;
+        }
+        if (0 > xMin + filterBounds.xMax || 0 > yMin + filterBounds.yMax) {
+            $poolBoundsObject(filterBounds);
+            return;
+        }
+        $poolBoundsObject(filterBounds);
         // texture is small or renew
         if (this._$isUpdated()) {
-            cacheStore.removeCache(instanceId);
-            texture = null;
+            $cacheStore.removeCache(this._$instanceId);
+            context.cachePosition = null;
+            this._$cacheKeys.length = 0;
+        }
+        if (!this._$cacheKeys.length
+            || this._$cacheParams[0] !== xScale
+            || this._$cacheParams[1] !== yScale
+            || this._$cacheParams[2] !== color_transform[7]) {
+            const keys = $getArray(xScale, yScale);
+            this._$cacheKeys = $cacheStore.generateKeys(this._$instanceId, keys);
+            $poolArray(keys);
+            this._$cacheParams[0] = xScale;
+            this._$cacheParams[1] = yScale;
+            this._$cacheParams[2] = color_transform[7];
         }
-        if (!texture) {
+        const blendMode = this._$blendMode || this.blendMode;
+        context.cachePosition = $cacheStore.get(this._$cacheKeys);
+        if (!context.cachePosition) {
             // resize
             const lineWidth = $Math.min(1, $Math.max(xScale, yScale));
-            const baseWidth = $Math.ceil($Math.abs(baseBounds.xMax - baseBounds.xMin) * xScale);
-            const baseHeight = $Math.ceil($Math.abs(baseBounds.yMax - baseBounds.yMin) * yScale);
-            // alpha reset
-            multiColor[3] = 1;
+            const width = $Math.ceil($Math.abs(baseBounds.xMax - baseBounds.xMin) * xScale);
+            const height = $Math.ceil($Math.abs(baseBounds.yMax - baseBounds.yMin) * yScale);
             // new canvas
-            const canvas = cacheStore.getCanvas();
-            canvas.width = baseWidth + lineWidth * 2;
-            canvas.height = baseHeight + lineWidth * 2;
+            const canvas = $cacheStore.getCanvas();
+            canvas.width = width + lineWidth * 2;
+            canvas.height = height + lineWidth * 2;
             const ctx = canvas.getContext("2d");
             if (!ctx) {
                 throw new Error("the context is null.");
@@ -2108,19 +2117,19 @@ export class TextField extends InteractiveObject {
             if (this._$background || this._$border) {
                 ctx.beginPath();
                 ctx.moveTo(0, 0);
-                ctx.lineTo(baseWidth, 0);
-                ctx.lineTo(baseWidth, baseHeight);
-                ctx.lineTo(0, baseHeight);
+                ctx.lineTo(width, 0);
+                ctx.lineTo(width, height);
+                ctx.lineTo(0, height);
                 ctx.lineTo(0, 0);
                 if (this._$background) {
                     const rgb = $intToRGBA(this._$backgroundColor);
-                    const alpha = $Math.max(0, $Math.min(rgb.A * 255 * multiColor[3] + multiColor[7], 255)) / 255;
+                    const alpha = $Math.max(0, $Math.min(rgb.A * 255 + multiColor[7], 255)) / 255;
                     ctx.fillStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
                     ctx.fill();
                 }
                 if (this._$border) {
                     const rgb = $intToRGBA(this._$borderColor);
-                    const alpha = $Math.max(0, $Math.min(rgb.A * 255 * multiColor[3] + multiColor[7], 255)) / 255;
+                    const alpha = $Math.max(0, $Math.min(rgb.A * 255 + multiColor[7], 255)) / 255;
                     ctx.lineWidth = lineWidth;
                     ctx.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
                     ctx.stroke();
@@ -2130,20 +2139,25 @@ export class TextField extends InteractiveObject {
             ctx.save();
             ctx.beginPath();
             ctx.moveTo(2, 2);
-            ctx.lineTo(baseWidth - 2, 2);
-            ctx.lineTo(baseWidth - 2, baseHeight - 2);
-            ctx.lineTo(2, baseHeight - 2);
+            ctx.lineTo(width - 2, 2);
+            ctx.lineTo(width - 2, height - 2);
+            ctx.lineTo(2, height - 2);
             ctx.lineTo(2, 2);
             ctx.clip();
             ctx.beginPath();
             ctx.setTransform(xScale, 0, 0, yScale, 0, 0);
-            this._$doDraw(ctx, matrix, multiColor, baseWidth / xScale);
+            this._$doDraw(ctx, matrix, multiColor, width / xScale);
             ctx.restore();
-            texture = manager.createTextureFromCanvas(ctx.canvas);
+            const position = manager
+                .createCachePosition(width, height);
+            const texture = manager
+                .createTextureFromCanvas(ctx.canvas);
+            context.drawTextureFromRect(texture, position);
             // set cache
-            cacheStore.set(cacheKeys, texture);
+            context.cachePosition = position;
+            $cacheStore.set(this._$cacheKeys, position);
             // destroy cache
-            cacheStore.destroy(ctx);
+            $cacheStore.destroy(ctx);
         }
         let drawFilter = false;
         let offsetX = 0;
@@ -2151,9 +2165,15 @@ export class TextField extends InteractiveObject {
         if (filters && filters.length
             && this._$canApply(filters)) {
             drawFilter = true;
-            texture = this._$drawFilter(context, texture, multiMatrix, filters, width, height);
-            offsetX = texture._$offsetX;
-            offsetY = texture._$offsetY;
+            const position = this._$drawFilter(context, multiMatrix, filters, width, height);
+            if (position.offsetX) {
+                offsetX = position.offsetX;
+            }
+            if (position.offsetY) {
+                offsetY = position.offsetY;
+            }
+            // update
+            context.cachePosition = position;
         }
         const radianX = $Math.atan2(multiMatrix[1], multiMatrix[0]);
         const radianY = $Math.atan2(-multiMatrix[2], multiMatrix[3]);
@@ -2170,13 +2190,15 @@ export class TextField extends InteractiveObject {
             context.setTransform(1, 0, 0, 1, xMin - offsetX, yMin - offsetY);
         }
         // draw
-        context.reset();
-        context.globalAlpha = alpha;
-        context.imageSmoothingEnabled = true;
-        context.globalCompositeOperation = blendMode;
-        context.drawImage(texture, 0, 0, texture.width, texture.height, multiColor);
+        if (context.cachePosition) {
+            context.globalAlpha = alpha;
+            context.imageSmoothingEnabled = true;
+            context.globalCompositeOperation = blendMode;
+            context.drawInstance(xMin - offsetX, yMin - offsetY, xMax, yMax, color_transform);
+            // cache position clear
+            context.cachePosition = null;
+        }
         // get cache
-        $poolArray(cacheKeys);
         $poolBoundsObject(baseBounds);
         // pool
         if (multiMatrix !== matrix) {
@@ -2230,11 +2252,11 @@ export class TextField extends InteractiveObject {
             const tf = obj.textFormat;
             // color
             const rgb = $intToRGBA(tf.color || 0);
-            const alpha = $Math.max(0, $Math.min(rgb.A * 255 * color_transform[3] + color_transform[7], 255)) / 255;
+            const alpha = $Math.max(0, $Math.min(rgb.A * 255 + color_transform[7], 255)) / 255;
             context.fillStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
             if (this._$thickness) {
                 const rgb = $intToRGBA(this._$thicknessColor);
-                const alpha = $Math.max(0, $Math.min(rgb.A * 255 * color_transform[3] + color_transform[7], 255)) / 255;
+                const alpha = $Math.max(0, $Math.min(rgb.A * 255 + color_transform[7], 255)) / 255;
                 context.lineWidth = this._$thickness;
                 context.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
             }
@@ -2251,7 +2273,7 @@ export class TextField extends InteractiveObject {
                     if (tf.underline) {
                         const offset = tf.size ? tf.size / 12 : 0;
                         const rgb = $intToRGBA(tf.color || 0);
-                        const alpha = $Math.max(0, $Math.min(rgb.A * 255 * color_transform[3] + color_transform[7], 255)) / 255;
+                        const alpha = $Math.max(0, $Math.min(rgb.A * 255 + color_transform[7], 255)) / 255;
                         context.lineWidth = $Math.max(1, 1 / $Math.min(matrix[0], matrix[3]));
                         context.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
                         context.beginPath();

package/package.json

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