@next2d/renderer 2.0.0

package/src/Shape/service/ShapeCommandService.js

@@ -0,0 +1,252 @@
+import { $context, $getArray } from "../../RendererUtil";
+/**
+ * @type {number}
+ * @private
+ */
+const MOVE_TO = 0;
+/**
+ * @type {number}
+ * @private
+ */
+const CURVE_TO = 1;
+/**
+ * @type {number}
+ * @private
+ */
+const LINE_TO = 2;
+/**
+ * @type {number}
+ * @private
+ */
+const CUBIC = 3;
+/**
+ * @type {number}
+ * @private
+ */
+const ARC = 4;
+/**
+ * @type {number}
+ * @private
+ */
+const FILL_STYLE = 5;
+/**
+ * @type {number}
+ * @private
+ */
+const STROKE_STYLE = 6;
+/**
+ * @type {number}
+ * @private
+ */
+const END_FILL = 7;
+/**
+ * @type {number}
+ * @private
+ */
+const END_STROKE = 8;
+/**
+ * @type {number}
+ * @private
+ */
+const BEGIN_PATH = 9;
+/**
+ * @type {number}
+ * @private
+ */
+const GRADIENT_FILL = 10;
+/**
+ * @type {number}
+ * @private
+ */
+const GRADIENT_STROKE = 11;
+/**
+ * @type {number}
+ * @private
+ */
+const CLOSE_PATH = 12;
+/**
+ * @type {number}
+ * @private
+ */
+const BITMAP_FILL = 13;
+/**
+ * @type {number}
+ * @private
+ */
+const BITMAP_STROKE = 14;
+/**
+ * @description Shapeのグラフィックコマンドを実行します。
+ *              Execute the graphic commands of Shape.
+ *
+ * @param  {Float32Array} commands
+ * @param  {boolean} [is_clip=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (commands, is_clip = false) => {
+    let index = 0;
+    while (commands.length > index) {
+        switch (commands[index++]) {
+            case BEGIN_PATH:
+                $context.beginPath();
+                break;
+            case MOVE_TO:
+                $context.moveTo(commands[index++], commands[index++]);
+                break;
+            case LINE_TO:
+                $context.lineTo(commands[index++], commands[index++]);
+                break;
+            case CURVE_TO:
+                $context.quadraticCurveTo(commands[index++], commands[index++], commands[index++], commands[index++]);
+                break;
+            case FILL_STYLE:
+                if (is_clip) {
+                    index += 4;
+                    break;
+                }
+                $context.fillStyle(commands[index++] / 255, commands[index++] / 255, commands[index++] / 255, commands[index++] / 255);
+                break;
+            case END_FILL:
+                $context.fill();
+                break;
+            case STROKE_STYLE:
+                if (is_clip) {
+                    index += 8;
+                    break;
+                }
+                $context.thickness = commands[index++];
+                $context.caps = commands[index++];
+                $context.joints = commands[index++];
+                $context.miterLimit = commands[index++];
+                $context.strokeStyle(commands[index++] / 255, commands[index++] / 255, commands[index++] / 255, commands[index++] / 255);
+                break;
+            case END_STROKE:
+                if (is_clip) {
+                    break;
+                }
+                $context.stroke();
+                break;
+            case CLOSE_PATH:
+                $context.closePath();
+                break;
+            case ARC:
+                $context.arc(commands[index++], commands[index++], commands[index++]);
+                break;
+            case CUBIC:
+                $context.bezierCurveTo(commands[index++], commands[index++], commands[index++], commands[index++], commands[index++], commands[index++]);
+                break;
+            case GRADIENT_FILL:
+                {
+                    if (is_clip) {
+                        index += 1;
+                        const length = commands[index++];
+                        index += length * 5;
+                        index += 9;
+                        $context.fill();
+                        break;
+                    }
+                    const type = commands[index++];
+                    const stops = $getArray();
+                    const length = commands[index++];
+                    for (let idx = 0; idx < length; ++idx) {
+                        stops.push(commands[index++], // ratio
+                        commands[index++], // red
+                        commands[index++], // green
+                        commands[index++], // blue
+                        commands[index++] // alpha
+                        );
+                    }
+                    const matrix = new Float32Array([
+                        commands[index++], commands[index++], commands[index++],
+                        commands[index++], commands[index++], commands[index++]
+                    ]);
+                    const spread = commands[index++];
+                    const interpolation = commands[index++];
+                    const focal = commands[index++];
+                    $context.gradientFill(type, stops, matrix, spread, interpolation, focal);
+                }
+                break;
+            case BITMAP_FILL:
+                {
+                    if (is_clip) {
+                        index += 2;
+                        const length = commands[index++];
+                        index += length;
+                        index += 8;
+                        $context.fill();
+                        break;
+                    }
+                    const width = commands[index++];
+                    const height = commands[index++];
+                    const length = commands[index++];
+                    const buffer = new Uint8Array(commands.subarray(index, index + length));
+                    index += length;
+                    const matrix = new Float32Array([
+                        commands[index++], commands[index++], commands[index++],
+                        commands[index++], commands[index++], commands[index++]
+                    ]);
+                    $context.bitmapFill(buffer, matrix, width, height, Boolean(commands[index++]), Boolean(commands[index++]));
+                }
+                break;
+            case GRADIENT_STROKE:
+                {
+                    if (is_clip) {
+                        index += 20;
+                        $context.fill();
+                        break;
+                    }
+                    $context.thickness = commands[index++];
+                    $context.caps = commands[index++];
+                    $context.joints = commands[index++];
+                    $context.miterLimit = commands[index++];
+                    const type = commands[index++];
+                    const stops = $getArray();
+                    const length = commands[index++];
+                    for (let idx = 0; idx < length; ++idx) {
+                        stops.push(commands[index++], // ratio
+                        commands[index++], // red
+                        commands[index++], // green
+                        commands[index++], // blue
+                        commands[index++] // alpha
+                        );
+                    }
+                    const matrix = new Float32Array([
+                        commands[index++], commands[index++], commands[index++],
+                        commands[index++], commands[index++], commands[index++]
+                    ]);
+                    const spread = commands[index++];
+                    const interpolation = commands[index++];
+                    const focal = commands[index++];
+                    $context.gradientStroke(type, stops, matrix, spread, interpolation, focal);
+                }
+                break;
+            case BITMAP_STROKE:
+                {
+                    if (is_clip) {
+                        index += 6;
+                        const length = commands[index++];
+                        index += length;
+                        index += 8;
+                        $context.fill();
+                        break;
+                    }
+                    $context.thickness = commands[index++];
+                    $context.caps = commands[index++];
+                    $context.joints = commands[index++];
+                    $context.miterLimit = commands[index++];
+                    const width = commands[index++];
+                    const height = commands[index++];
+                    const length = commands[index++];
+                    const buffer = new Uint8Array(commands.subarray(index, index + length));
+                    index += length;
+                    const matrix = new Float32Array([
+                        commands[index++], commands[index++], commands[index++],
+                        commands[index++], commands[index++], commands[index++]
+                    ]);
+                    $context.bitmapStroke(buffer, matrix, width, height, Boolean(commands[index++]), Boolean(commands[index++]));
+                }
+                break;
+        }
+    }
+};

package/src/Shape/usecase/ShapeClipRenderUseCase.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description シェイプクリップの描画を実行
+ *              Execute drawing of shape clip
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (render_queue: Float32Array, index: number) => number;

package/src/Shape/usecase/ShapeClipRenderUseCase.js

@@ -0,0 +1,33 @@
+import { execute as shapeCommandService } from "../service/ShapeCommandService";
+import { $context } from "../../RendererUtil";
+/**
+ * @description シェイプクリップの描画を実行
+ *              Execute drawing of shape clip
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (render_queue, index) => {
+    const matrix = render_queue.subarray(index, index + 6);
+    index += 6;
+    $context.reset();
+    $context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    const isGridEnabled = Boolean(render_queue[index++]);
+    const gridData = isGridEnabled
+        ? new Float32Array(28)
+        : null;
+    $context.useGrid(gridData);
+    if (gridData) {
+        gridData.set(render_queue.subarray(index, index + 24));
+        index += 24;
+    }
+    const length = render_queue[index++];
+    const commands = render_queue.subarray(index, index + length);
+    shapeCommandService(commands, true);
+    index += length;
+    $context.clip();
+    return index;
+};

package/src/Shape/usecase/ShapeRenderUseCase.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description Shapeの描画を実行します。
+ *              Execute the drawing of Shape.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (render_queue: Float32Array, index: number) => number;

package/src/Shape/usecase/ShapeRenderUseCase.js

@@ -0,0 +1,154 @@
+import { $cacheStore } from "@next2d/cache";
+import { execute as shapeCommandService } from "../service/ShapeCommandService";
+import { execute as displayObjectGetBlendModeService } from "../../DisplayObject/service/DisplayObjectGetBlendModeService";
+import { $context } from "../../RendererUtil";
+/**
+ * @description Shapeの描画を実行します。
+ *              Execute the drawing of Shape.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (render_queue, index) => {
+    const matrix = render_queue.subarray(index, index + 6);
+    index += 6;
+    const colorTransform = render_queue.subarray(index, index + 8);
+    index += 8;
+    const bounds = render_queue.subarray(index, index + 4);
+    index += 4;
+    // baseBounds
+    const xMin = render_queue[index++];
+    const yMin = render_queue[index++];
+    const xMax = render_queue[index++];
+    const yMax = render_queue[index++];
+    const isGridEnabled = Boolean(render_queue[index++]);
+    const isDrawable = Boolean(render_queue[index++]);
+    const isBitmap = Boolean(render_queue[index++]);
+    // cache uniqueKey
+    const uniqueKey = `${render_queue[index++]}`;
+    const cacheKey = render_queue[index++];
+    const xScale = Math.round(Math.sqrt(matrix[0] * matrix[0]
+        + matrix[1] * matrix[1]) * 10000) / 10000;
+    const yScale = Math.round(Math.sqrt(matrix[2] * matrix[2]
+        + matrix[3] * matrix[3]) * 10000) / 10000;
+    let node;
+    const hasCache = render_queue[index++];
+    if (!hasCache) {
+        const gridData = isGridEnabled
+            ? new Float32Array(28)
+            : null;
+        if (gridData) {
+            gridData.set(render_queue.subarray(index, index + 24));
+            index += 24;
+        }
+        $context.useGrid(gridData);
+        const length = render_queue[index++];
+        const commands = render_queue.subarray(index, index + length);
+        if (isBitmap && !isGridEnabled) {
+            // Bitmapなので、スケールなし
+            const width = Math.ceil(Math.abs(xMax - xMin));
+            const height = Math.ceil(Math.abs(yMax - yMin));
+            // fixed logic
+            node = $context.createNode(width, height);
+            $cacheStore.set(uniqueKey, `${cacheKey}`, node);
+            // fixed logic
+            const currentAttachment = $context.currentAttachmentObject;
+            $context.bind($context.atlasAttachmentObject);
+            $context.reset();
+            $context.beginNodeRendering(node);
+            const offsetY = $context.atlasAttachmentObject.height - node.y - height;
+            $context.setTransform(1, 0, 0, 1, node.x, offsetY);
+            if (isDrawable) {
+                shapeCommandService(commands);
+                $context.drawFill();
+            }
+            else {
+                $context.drawPixels(node, new Uint8Array(commands));
+            }
+            $context.endNodeRendering();
+            if (currentAttachment) {
+                $context.bind(currentAttachment);
+            }
+        }
+        else {
+            const width = Math.ceil(Math.abs(xMax - xMin) * xScale);
+            const height = Math.ceil(Math.abs(yMax - yMin) * yScale);
+            // fixed logic
+            node = $context.createNode(width, height);
+            $cacheStore.set(uniqueKey, `${cacheKey}`, node);
+            // fixed logic
+            const currentAttachment = $context.currentAttachmentObject;
+            $context.bind($context.atlasAttachmentObject);
+            // 初期化して、描画範囲を初期化
+            $context.reset();
+            $context.beginNodeRendering(node);
+            // matrix設定
+            const offsetY = $context.atlasAttachmentObject.height - node.y - height;
+            $context.setTransform(xScale, 0, 0, yScale, -xMin * xScale + node.x, -yMin * yScale + offsetY);
+            if (gridData) {
+                gridData[24] = node.x;
+                gridData[25] = offsetY;
+            }
+            // 描画コマンドを実行
+            shapeCommandService(commands);
+            // 描画実行
+            $context.drawFill();
+            // 描画終了
+            $context.endNodeRendering();
+            if (currentAttachment) {
+                $context.bind(currentAttachment);
+            }
+        }
+        index += length;
+    }
+    else {
+        node = $cacheStore.get(uniqueKey, `${cacheKey}`);
+        if (!node) {
+            return index;
+        }
+    }
+    const blendMode = render_queue[index++];
+    // フィルター設定があればフィルターを実行
+    const useFilfer = Boolean(render_queue[index++]);
+    if (useFilfer) {
+        const updated = Boolean(render_queue[index++]);
+        const filterBounds = render_queue.subarray(index, index + 4);
+        index += 4;
+        const length = render_queue[index++];
+        const params = render_queue.subarray(index, index + length);
+        const width = Math.ceil(Math.abs(bounds[2] - bounds[0]));
+        const height = Math.ceil(Math.abs(bounds[3] - bounds[1]));
+        $context.applyFilter(node, uniqueKey, updated, width, height, isBitmap, matrix, colorTransform, displayObjectGetBlendModeService(blendMode), filterBounds, params);
+        index += length;
+        return index;
+    }
+    $context.globalAlpha = Math.min(Math.max(0, colorTransform[3] + colorTransform[7] / 255), 1);
+    $context.imageSmoothingEnabled = true;
+    $context.globalCompositeOperation = displayObjectGetBlendModeService(blendMode);
+    if (isBitmap && !isGridEnabled) {
+        $context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        $context.drawDisplayObject(node, bounds[0], bounds[1], bounds[2], bounds[3], colorTransform);
+    }
+    else {
+        const radianX = Math.atan2(matrix[1], matrix[0]);
+        const radianY = Math.atan2(-matrix[2], matrix[3]);
+        if (radianX || radianY) {
+            const tx = xMin * xScale;
+            const ty = yMin * yScale;
+            const cosX = Math.cos(radianX);
+            const sinX = Math.sin(radianX);
+            const cosY = Math.cos(radianY);
+            const sinY = Math.sin(radianY);
+            $context.setTransform(cosX, sinX, -sinY, cosY, tx * cosX - ty * sinY + matrix[4], tx * sinX + ty * cosY + matrix[5]);
+        }
+        else {
+            $context.setTransform(1, 0, 0, 1, bounds[0], bounds[1]);
+        }
+        // 描画範囲をinstanced arrayに設定
+        $context.drawDisplayObject(node, bounds[0], bounds[1], bounds[2], bounds[3], colorTransform);
+    }
+    return index;
+};

package/src/TextField/service/TextFieldGenerateFontStyleService.d.ts

@@ -0,0 +1,11 @@
+import type { ITextFormat } from "../../interface/ITextFormat";
+/**
+ * @description テキストフォーマットを元にフォントスタイルを生成します。
+ *              Generate font style based on text format.
+ *
+ * @param  {ITextFormat} text_format
+ * @return {string}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_format: ITextFormat) => string;

package/src/TextField/service/TextFieldGenerateFontStyleService.js

@@ -0,0 +1,19 @@
+/**
+ * @description テキストフォーマットを元にフォントスタイルを生成します。
+ *              Generate font style based on text format.
+ *
+ * @param  {ITextFormat} text_format
+ * @return {string}
+ * @method
+ * @protected
+ */
+export const execute = (text_format) => {
+    let fontStyle = "";
+    if (text_format.italic) {
+        fontStyle += "italic ";
+    }
+    if (text_format.bold) {
+        fontStyle += "bold ";
+    }
+    return `${fontStyle}${text_format.size}px '${text_format.font}','sans-serif'`;
+};

package/src/TextField/service/TextFiledGetAlignOffsetService.d.ts

@@ -0,0 +1,15 @@
+import type { ITextData } from "../../interface/ITextData";
+import type { ITextObject } from "../../interface/ITextObject";
+import type { ITextSetting } from "../../interface/ITextSetting";
+/**
+ * @description テキストの揃え位置のオフセット値を取得します。
+ *              Get the offset value of the alignment position of the text.
+ *
+ * @param  {ITextData} text_data
+ * @param  {ITextObject} text_object
+ * @param  {ITextSetting} text_setting
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_data: ITextData, text_object: ITextObject, text_setting: ITextSetting) => number;

package/src/TextField/service/TextFiledGetAlignOffsetService.js

@@ -0,0 +1,33 @@
+/**
+ * @description テキストの揃え位置のオフセット値を取得します。
+ *              Get the offset value of the alignment position of the text.
+ *
+ * @param  {ITextData} text_data
+ * @param  {ITextObject} text_object
+ * @param  {ITextSetting} text_setting
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (text_data, text_object, text_setting) => {
+    const lineWidth = text_data.widthTable[text_object.line] || 0;
+    const textFormat = text_object.textFormat;
+    const leftMargin = textFormat.leftMargin || 0;
+    if (!text_setting.wordWrap && lineWidth > text_setting.rawWidth) {
+        return Math.max(0, leftMargin);
+    }
+    const rightMargin = textFormat.rightMargin || 0;
+    if (textFormat.align === "center" // format CENTER
+        || text_setting.autoSize === "center" // autoSize CENTER
+    ) {
+        return Math.max(0, text_setting.rawWidth / 2 - leftMargin - rightMargin - lineWidth / 2 - 2);
+    }
+    if (textFormat.align === "right" // format RIGHT
+        || text_setting.autoSize === "right" // autoSize RIGHT
+    ) {
+        return Math.max(0, text_setting.rawWidth - leftMargin - lineWidth - rightMargin - 4);
+    }
+    // autoSize LEFT
+    // format LEFT
+    return Math.max(0, leftMargin);
+};

package/src/TextField/usecase/TextFieldDrawOffscreenCanvasUseCase.d.ts

@@ -0,0 +1,15 @@
+import type { ITextData } from "../../interface/ITextData";
+import type { ITextSetting } from "../../interface/ITextSetting";
+/**
+ * @description TextDataを元にOffscreenCanvasにテキストを描画
+ *              Draw text in OffscreenCanvas based on TextData
+ *
+ * @param  {ITextData} text_data
+ * @param  {object} text_setting
+ * @param  {number} x_scale
+ * @param  {number} y_scale
+ * @return {OffscreenCanvas}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_data: ITextData | null, text_setting: ITextSetting, x_scale: number, y_scale: number) => OffscreenCanvas;