@next2d/display 1.18.11 → 2.0.0

package/src/Graphics/service/GraphicsDrawEllipseService.js

@@ -0,0 +1,36 @@
+/**
+ * @description 楕円を描画データを登録
+ *              Register ellipse drawing data
+ *
+ * @param  {Graphics} graphics
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Graphics}
+ * @method
+ * @protected
+ */
+export const execute = (graphics, x, y, width, height) => {
+    x = +x || 0;
+    y = +y || 0;
+    width = +width || 0;
+    height = +height || 0;
+    width = Math.round(width);
+    height = Math.round(height);
+    const hw = width / 2; // half width
+    const hh = height / 2; // half height
+    const x0 = x + hw;
+    const y0 = y + hh;
+    const x1 = x + width;
+    const y1 = y + height;
+    const c = 4 / 3 * (Math.SQRT2 - 1);
+    const cw = c * hw;
+    const ch = c * hh;
+    return graphics
+        .moveTo(x0, y)
+        .cubicCurveTo(x0 + cw, y, x1, y0 - ch, x1, y0)
+        .cubicCurveTo(x1, y0 + ch, x0 + cw, y1, x0, y1)
+        .cubicCurveTo(x0 - cw, y1, x, y0 + ch, x, y0)
+        .cubicCurveTo(x, y0 - ch, x0 - cw, y, x0, y);
+};

package/src/Graphics/service/GraphicsDrawRectService.d.ts

@@ -0,0 +1,15 @@
+import type { Graphics } from "../../Graphics";
+/**
+ * @description 矩形を描画データを登録
+ *              Register rectangle drawing data
+ *
+ * @param  {Graphics} graphics
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Graphics}
+ * @method
+ * @protected
+ */
+export declare const execute: (graphics: Graphics, x: number, y: number, width: number, height: number) => Graphics;

package/src/Graphics/service/GraphicsDrawRectService.js

@@ -0,0 +1,28 @@
+/**
+ * @description 矩形を描画データを登録
+ *              Register rectangle drawing data
+ *
+ * @param  {Graphics} graphics
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Graphics}
+ * @method
+ * @protected
+ */
+export const execute = (graphics, x, y, width, height) => {
+    // valid
+    x = +x || 0;
+    y = +y || 0;
+    width = +width || 0;
+    height = +height || 0;
+    const xMax = Math.round(x + width);
+    const yMax = Math.round(y + height);
+    return graphics
+        .moveTo(x, y)
+        .lineTo(x, yMax)
+        .lineTo(xMax, yMax)
+        .lineTo(xMax, y)
+        .lineTo(x, y);
+};

package/src/Graphics/service/GraphicsDrawRoundRectService.d.ts

@@ -0,0 +1,17 @@
+import type { Graphics } from "../../Graphics";
+/**
+ * @description 角丸矩形を描画データを登録
+ *              Register rounded rectangle drawing data
+ *
+ * @param  {Graphics} graphics
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {number} ellipse_width
+ * @param  {number} [ellipse_height=NaN]
+ * @return {Graphics}
+ * @method
+ * @protected
+ */
+export declare const execute: (graphics: Graphics, x: number, y: number, width: number, height: number, ellipse_width: number, ellipse_height?: number) => Graphics;

package/src/Graphics/service/GraphicsDrawRoundRectService.js

@@ -0,0 +1,48 @@
+/**
+ * @description 角丸矩形を描画データを登録
+ *              Register rounded rectangle drawing data
+ *
+ * @param  {Graphics} graphics
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {number} ellipse_width
+ * @param  {number} [ellipse_height=NaN]
+ * @return {Graphics}
+ * @method
+ * @protected
+ */
+export const execute = (graphics, x, y, width, height, ellipse_width, ellipse_height = NaN) => {
+    x = +x || 0;
+    y = +y || 0;
+    width = +width || 0;
+    height = +height || 0;
+    ellipse_width = +ellipse_width || 0;
+    ellipse_height = +ellipse_height || ellipse_width;
+    width = Math.round(width);
+    height = Math.round(height);
+    ellipse_width = Math.round(ellipse_width);
+    ellipse_height = Math.round(ellipse_height);
+    const hew = ellipse_width / 2;
+    const heh = ellipse_height / 2;
+    const c = 4 / 3 * (Math.SQRT2 - 1);
+    const cw = c * hew;
+    const ch = c * heh;
+    const dx0 = x + hew;
+    const dx1 = x + width;
+    const dx2 = dx1 - hew;
+    const dy0 = y + heh;
+    const dy1 = y + height;
+    const dy2 = dy1 - heh;
+    return graphics
+        .moveTo(dx0, y)
+        .lineTo(dx2, y)
+        .cubicCurveTo(dx2 + cw, y, dx1, dy0 - ch, dx1, dy0)
+        .lineTo(dx1, dy2)
+        .cubicCurveTo(dx1, dy2 + ch, dx2 + cw, dy1, dx2, dy1)
+        .lineTo(dx0, dy1)
+        .cubicCurveTo(dx0 - cw, dy1, x, dy2 + ch, x, dy2)
+        .lineTo(x, dy0)
+        .cubicCurveTo(x, dy0 - ch, dx0 - cw, y, dx0, y);
+};

package/src/Graphics/service/GraphicsHitTestService.d.ts

@@ -0,0 +1,13 @@
+import type { IPlayerHitObject } from "../../interface/IPlayerHitObject";
+/**
+ * @description 指定のパスが描画のヒット範囲か判定
+ *              Determines if the specified path is within the hit range for drawing
+ *
+ * @param  {CanvasRenderingContext2D} context
+ * @param  {array} recodes
+ * @param  {IPlayerHitObject} hit_object
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: CanvasRenderingContext2D, recodes: Float32Array, hit_object: IPlayerHitObject) => boolean;

package/src/Graphics/service/GraphicsHitTestService.js

@@ -0,0 +1,73 @@
+import { Graphics } from "../../Graphics";
+/**
+ * @description 指定のパスが描画のヒット範囲か判定
+ *              Determines if the specified path is within the hit range for drawing
+ *
+ * @param  {CanvasRenderingContext2D} context
+ * @param  {array} recodes
+ * @param  {IPlayerHitObject} hit_object
+ * @return {boolean}
+ * @method
+ * @protected
+ */
+export const execute = (context, recodes, hit_object) => {
+    for (let idx = 0; idx < recodes.length;) {
+        switch (recodes[idx++]) {
+            case Graphics.BEGIN_PATH:
+                context.beginPath();
+                break;
+            case Graphics.MOVE_TO:
+                context.moveTo(recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.LINE_TO:
+                context.lineTo(recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.CURVE_TO:
+                context.quadraticCurveTo(recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.FILL_STYLE:
+                idx += 4;
+                continue;
+            case Graphics.END_FILL:
+                if (context.isPointInPath(hit_object.x, hit_object.y)) {
+                    return true;
+                }
+                break;
+            case Graphics.STROKE_STYLE:
+                idx += 8;
+                continue;
+            case Graphics.END_STROKE:
+                break;
+            case Graphics.CLOSE_PATH:
+                context.closePath();
+                break;
+            case Graphics.CUBIC:
+                context.bezierCurveTo(recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.ARC:
+                context.arc(recodes[idx++], recodes[idx++], recodes[idx++], 0, 2 * Math.PI);
+                break;
+            case Graphics.GRADIENT_FILL:
+                if (context.isPointInPath(hit_object.x, hit_object.y)) {
+                    return true;
+                }
+                idx += 6;
+                continue;
+            case Graphics.GRADIENT_STROKE:
+                idx += 12;
+                continue;
+            case Graphics.BITMAP_FILL:
+                if (context.isPointInPath(hit_object.x, hit_object.y)) {
+                    return true;
+                }
+                idx += 6;
+                continue;
+            case Graphics.BITMAP_STROKE:
+                idx += 9;
+                continue;
+            default:
+                break;
+        }
+    }
+    return false;
+};

package/src/Graphics/service/GraphicsMargePathService.d.ts

@@ -0,0 +1,15 @@
+import type { Graphics } from "../../Graphics";
+/**
+ * @description 追加のパスを描画データに追加
+ *              Add additional paths to the drawing data
+ *
+ * @param  {boolean} has_fill_enabled
+ * @param  {boolean} has_line_enabled
+ * @param  {array | null} fills
+ * @param  {array | null} lines
+ * @param  {array} args
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (graphics: Graphics, has_fill_enabled: boolean, has_line_enabled: boolean, fills: any[] | null, lines: any[] | null, ...args: any[]) => void;

package/src/Graphics/service/GraphicsMargePathService.js

@@ -0,0 +1,23 @@
+/**
+ * @description 追加のパスを描画データに追加
+ *              Add additional paths to the drawing data
+ *
+ * @param  {boolean} has_fill_enabled
+ * @param  {boolean} has_line_enabled
+ * @param  {array | null} fills
+ * @param  {array | null} lines
+ * @param  {array} args
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (graphics, has_fill_enabled, has_line_enabled, fills, lines, ...args) => {
+    // 確定フラグを解除
+    graphics.isConfirmed = false;
+    if (has_fill_enabled && fills) {
+        fills.push(...args);
+    }
+    if (has_line_enabled && lines) {
+        lines.push(...args);
+    }
+};

package/src/Graphics/service/GraphicsToNumberArrayService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description Graphicsのrecodesを解析して数値配列を生成します。
+ *              Parses Graphics recodes and generates a numerical array.
+ *
+ * @param  {array} recodes
+ * @return {any[]}
+ * @method
+ * @public
+ */
+export declare const execute: (recodes: any[] | null) => any[];

package/src/Graphics/service/GraphicsToNumberArrayService.js

@@ -0,0 +1,242 @@
+import { $getArray } from "../../DisplayObjectUtil";
+import { Graphics } from "../../Graphics";
+/**
+ * @description Graphicsのrecodesを解析して数値配列を生成します。
+ *              Parses Graphics recodes and generates a numerical array.
+ *
+ * @param  {array} recodes
+ * @return {any[]}
+ * @method
+ * @public
+ */
+export const execute = (recodes) => {
+    if (!recodes) {
+        return [];
+    }
+    const array = $getArray();
+    for (let idx = 0; idx < recodes.length;) {
+        const type = recodes[idx++];
+        array.push(type);
+        switch (type) {
+            case Graphics.BEGIN_PATH:
+            case Graphics.END_FILL:
+            case Graphics.END_STROKE:
+            case Graphics.CLOSE_PATH:
+                break;
+            case Graphics.MOVE_TO:
+            case Graphics.LINE_TO:
+                array.push(recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.CURVE_TO:
+            case Graphics.FILL_STYLE:
+                array.push(recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.CUBIC:
+                array.push(recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.STROKE_STYLE:
+                {
+                    array.push(recodes[idx++]);
+                    const lineCap = recodes[idx++];
+                    switch (lineCap) {
+                        case "none":
+                            array.push(0);
+                            break;
+                        case "round":
+                            array.push(1);
+                            break;
+                        case "square":
+                            array.push(2);
+                            break;
+                    }
+                    const lineJoin = recodes[idx++];
+                    switch (lineJoin) {
+                        case "bevel":
+                            array.push(0);
+                            break;
+                        case "miter":
+                            array.push(1);
+                            break;
+                        case "round":
+                            array.push(2);
+                            break;
+                    }
+                    array.push(recodes[idx++], // MITER LIMIT
+                    recodes[idx++], recodes[idx++], recodes[idx++], recodes[idx++]);
+                }
+                break;
+            case Graphics.ARC:
+                array.push(recodes[idx++], recodes[idx++], recodes[idx++]);
+                break;
+            case Graphics.GRADIENT_FILL:
+                {
+                    const type = recodes[idx++];
+                    const stops = recodes[idx++];
+                    const matrix = recodes[idx++];
+                    const spread = recodes[idx++];
+                    const interpolation = recodes[idx++];
+                    const focal = recodes[idx++];
+                    array.push(type === "linear" ? 0 : 1);
+                    array.push(stops.length);
+                    // 昇順に並び替え
+                    const sortStops = stops.sort((a, b) => a.ratio - b.ratio);
+                    for (let idx = 0; idx < sortStops.length; ++idx) {
+                        const color = sortStops[idx];
+                        array.push(color.ratio, color.R, color.G, color.B, color.A);
+                    }
+                    array.push(...matrix);
+                    switch (spread) {
+                        case "reflect":
+                            array.push(0);
+                            break;
+                        case "repeat":
+                            array.push(1);
+                            break;
+                        default:
+                            array.push(2);
+                            break;
+                    }
+                    array.push(interpolation === "linearRGB" ? 0 : 1);
+                    array.push(focal);
+                }
+                break;
+            case Graphics.GRADIENT_STROKE:
+                {
+                    array.push(recodes[idx++]);
+                    const lineCap = recodes[idx++];
+                    switch (lineCap) {
+                        case "none":
+                            array.push(0);
+                            break;
+                        case "round":
+                            array.push(1);
+                            break;
+                        case "square":
+                            array.push(2);
+                            break;
+                    }
+                    const lineJoin = recodes[idx++];
+                    switch (lineJoin) {
+                        case "bevel":
+                            array.push(0);
+                            break;
+                        case "miter":
+                            array.push(1);
+                            break;
+                        case "round":
+                            array.push(2);
+                            break;
+                    }
+                    // miterLimit
+                    array.push(recodes[idx++]);
+                    const type = recodes[idx++];
+                    const stops = recodes[idx++];
+                    const matrix = recodes[idx++];
+                    const spread = recodes[idx++];
+                    const interpolation = recodes[idx++];
+                    const focal = recodes[idx++];
+                    array.push(type === "linear" ? 0 : 1);
+                    array.push(stops.length);
+                    for (let idx = 0; idx < stops.length; ++idx) {
+                        const color = stops[idx];
+                        array.push(color.ratio, color.R, color.G, color.B, color.A);
+                    }
+                    array.push(...matrix);
+                    switch (spread) {
+                        case "reflect":
+                            array.push(0);
+                            break;
+                        case "repeat":
+                            array.push(1);
+                            break;
+                        default:
+                            array.push(2);
+                            break;
+                    }
+                    array.push(interpolation === "linearRGB" ? 0 : 1);
+                    array.push(focal);
+                }
+                break;
+            case Graphics.BITMAP_FILL:
+                {
+                    const bitmapData = recodes[idx++];
+                    const buffer = bitmapData.buffer;
+                    if (!buffer) {
+                        idx += 3;
+                        break;
+                    }
+                    array.push(bitmapData.width, bitmapData.height, buffer.length);
+                    for (let idx = 0; idx < buffer.length; idx += 4096) {
+                        array.push(...buffer.subarray(idx, idx + 4096));
+                    }
+                    const matrix = recodes[idx++];
+                    if (matrix) {
+                        array.push(...matrix.rawData);
+                    }
+                    else {
+                        array.push(1, 0, 0, 1, 0, 0);
+                    }
+                    const repeat = recodes[idx++];
+                    array.push(repeat ? 1 : 0);
+                    const smooth = recodes[idx++];
+                    array.push(smooth ? 1 : 0);
+                }
+                break;
+            case Graphics.BITMAP_STROKE:
+                {
+                    array.push(recodes[idx++]);
+                    const lineCap = recodes[idx++];
+                    switch (lineCap) {
+                        case "none":
+                            array.push(0);
+                            break;
+                        case "round":
+                            array.push(1);
+                            break;
+                        case "square":
+                            array.push(2);
+                            break;
+                    }
+                    const lineJoin = recodes[idx++];
+                    switch (lineJoin) {
+                        case "bevel":
+                            array.push(0);
+                            break;
+                        case "miter":
+                            array.push(1);
+                            break;
+                        case "round":
+                            array.push(2);
+                            break;
+                    }
+                    // MITER LIMIT
+                    array.push(recodes[idx++]);
+                    const bitmapData = recodes[idx++];
+                    const buffer = bitmapData.buffer;
+                    if (!buffer) {
+                        idx += 3;
+                        break;
+                    }
+                    array.push(bitmapData.width, bitmapData.height, buffer.length);
+                    for (let idx = 0; idx < buffer.length; idx += 4096) {
+                        array.push(...buffer.subarray(idx, idx + 4096));
+                    }
+                    const matrix = recodes[idx++];
+                    if (matrix) {
+                        array.push(...matrix);
+                    }
+                    else {
+                        array.push(1, 0, 0, 1, 0, 0);
+                    }
+                    const repeat = recodes[idx++];
+                    array.push(repeat ? 1 : 0);
+                    const smooth = recodes[idx++];
+                    array.push(smooth ? 1 : 0);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    return array;
+};

package/src/Graphics/usecase/GraphicsCalcBoundsUseCase.d.ts

@@ -0,0 +1,17 @@
+import type { Graphics } from "../../Graphics";
+/**
+ * @description 描画範囲のバウンディングボックスを計算
+ *              Calculate the bounding box of the drawing range
+ *
+ * @param  {Graphics} graphics
+ * @param  {boolean} has_line_enabled
+ * @param  {number} position_x
+ * @param  {number} position_y
+ * @param  {number} line_width
+ * @param  {string} caps
+ * @param  {number[]} args
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (graphics: Graphics, has_line_enabled: boolean, position_x?: number, position_y?: number, line_width?: number, caps?: string, ...args: number[]) => void;

package/src/Graphics/usecase/GraphicsCalcBoundsUseCase.js

@@ -0,0 +1,28 @@
+import { execute as graphicsCalcFillBoundsService } from "../service/GraphicsCalcFillBoundsService";
+import { execute as graphicsCalcLineBoundsService } from "../service/GraphicsCalcLineBoundsService";
+/**
+ * @description 描画範囲のバウンディングボックスを計算
+ *              Calculate the bounding box of the drawing range
+ *
+ * @param  {Graphics} graphics
+ * @param  {boolean} has_line_enabled
+ * @param  {number} position_x
+ * @param  {number} position_y
+ * @param  {number} line_width
+ * @param  {string} caps
+ * @param  {number[]} args
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (graphics, has_line_enabled, position_x = 0, position_y = 0, line_width = 0, caps = "none", ...args) => {
+    for (let idx = 0; idx < args.length;) {
+        const x = args[idx++];
+        const y = args[idx++];
+        graphicsCalcFillBoundsService(graphics, x, y);
+        if (has_line_enabled) {
+            graphicsCalcLineBoundsService(graphics, x, y, position_x, position_y, line_width, caps);
+            graphicsCalcLineBoundsService(graphics, position_x, position_y, x, y, line_width, caps);
+        }
+    }
+};