@next2d/text 1.18.11 → 2.0.0

package/package.json

@@ -1,26 +1,18 @@
 {
   "name": "@next2d/text",
-  "version": "1.18.11",
-  "description": "Next2D Text Packages",
-  "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
+  "version": "2.0.0",
+  "description": "Next2D Text Package",
+  "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
   "homepage": "https://next2d.app",
   "bugs": "https://github.com/Next2D/Player/issues",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "import": "./src/index.js",
+      "require": "./src/index.js"
     }
   },
   "keywords": [
@@ -31,7 +23,11 @@
     "type": "git",
     "url": "git+https://github.com/Next2D/Player.git"
   },
-  "peerDependencies": {
-    "@next2d/share": "1.18.11"
+  "dependencies": {
+    "@next2d/display": "2.0.0",
+    "@next2d/geom": "2.0.0",
+    "@next2d/events": "2.0.0",
+    "@next2d/ui": "2.0.0",
+    "@next2d/cache": "2.0.0"
   }
 }

package/src/TextArea/service/TextAreaMovePositionService.d.ts

@@ -0,0 +1,11 @@
+import type { TextField } from "../../TextField";
+/**
+ * @description フォーカスしているテキストの位置にテキストエリアを移動します。
+ *              Move the text area to the position of the text that is focusing.
+ *
+ * @param  {TextField} text_field
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_field: TextField) => void;

package/src/TextArea/service/TextAreaMovePositionService.js

@@ -0,0 +1,42 @@
+import { Point } from "@next2d/geom";
+import { stage } from "@next2d/display";
+import { $textArea, $mainCanvasPosition } from "../../TextUtil";
+/**
+ * @type {number}
+ * @private
+ */
+const $devicePixelRatio = window.devicePixelRatio;
+/**
+ * @description フォーカスしているテキストの位置にテキストエリアを移動します。
+ *              Move the text area to the position of the text that is focusing.
+ *
+ * @param  {TextField} text_field
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (text_field) => {
+    const point = text_field.localToGlobal(new Point());
+    const textData = text_field.$textData;
+    if (textData) {
+        const focusTextObject = textData.textTable[text_field.focusIndex];
+        if (focusTextObject) {
+            for (let idx = text_field.focusIndex - 1; idx > -1; --idx) {
+                const textObject = textData.textTable[idx];
+                if (!textObject || textObject.line !== focusTextObject.line) {
+                    break;
+                }
+                point.x += textObject.w;
+            }
+            const line = focusTextObject.mode === "break"
+                ? focusTextObject.line - 1
+                : focusTextObject.line;
+            for (let idx = 0; idx < line; ++idx) {
+                point.y += textData.heightTable[idx];
+            }
+        }
+    }
+    const scale = stage.rendererScale / $devicePixelRatio;
+    $textArea.style.left = `${$mainCanvasPosition.x + point.x * scale}px`;
+    $textArea.style.top = `${$mainCanvasPosition.y + point.y * scale}px`;
+};

package/src/TextArea/usecase/TextAreaCompositionEndUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description テキストフィールドのコンポジションエンドイベントを処理します。
+ *              Processes the composition end event of the text field.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/TextArea/usecase/TextAreaCompositionEndUseCase.js

@@ -0,0 +1,17 @@
+import { $getSelectedTextField } from "../../TextUtil";
+import { execute as textFieldCompositionEndUseCase } from "../../TextField/usecase/TextFieldCompositionEndUseCase";
+/**
+ * @description テキストフィールドのコンポジションエンドイベントを処理します。
+ *              Processes the composition end event of the text field.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const textField = $getSelectedTextField();
+    if (!textField) {
+        return;
+    }
+    textFieldCompositionEndUseCase(textField);
+};

package/src/TextArea/usecase/TextAreaCompositionStartUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description IME などのテキスト変換システムが新しい変換セッションを開始した時に発生します。
+ *              Occurs when a text conversion system, such as an IME, starts a new conversion session.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/TextArea/usecase/TextAreaCompositionStartUseCase.js

@@ -0,0 +1,17 @@
+import { $getSelectedTextField } from "../../TextUtil";
+import { execute as textFieldCompositionStartService } from "../../TextField/service/TextFieldCompositionStartService";
+/**
+ * @description IME などのテキスト変換システムが新しい変換セッションを開始した時に発生します。
+ *              Occurs when a text conversion system, such as an IME, starts a new conversion session.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const textField = $getSelectedTextField();
+    if (!textField) {
+        return;
+    }
+    textFieldCompositionStartService(textField);
+};

package/src/TextArea/usecase/TextAreaCompositionUpdateUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。
+ *              Occurs when a new character is entered into a text conversion session controlled by a text conversion system such as an IME.
+ *
+ * @param  {CompositionEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: CompositionEvent) => void;

package/src/TextArea/usecase/TextAreaCompositionUpdateUseCase.js

@@ -0,0 +1,18 @@
+import { $getSelectedTextField } from "../../TextUtil";
+import { execute as textFieldCompositionUpdateUseCase } from "../../TextField/usecase/TextFieldCompositionUpdateUseCase";
+/**
+ * @description IME などのテキスト変換システムによって制御されているテキスト変換セッションに新しい文字が入力されたときに発生します。
+ *              Occurs when a new character is entered into a text conversion session controlled by a text conversion system such as an IME.
+ *
+ * @param  {CompositionEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    const textField = $getSelectedTextField();
+    if (!textField) {
+        return;
+    }
+    textFieldCompositionUpdateUseCase(textField, event.data);
+};

package/src/TextArea/usecase/TextAreaInputUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description テキストエリアに入力された文字を挿入します。
+ *              Inserts the characters entered in the text area.
+ *
+ * @param  {InputEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (event: InputEvent) => void;

package/src/TextArea/usecase/TextAreaInputUseCase.js

@@ -0,0 +1,25 @@
+import { $getSelectedTextField } from "../../TextUtil";
+import { Event } from "@next2d/events";
+import { execute as textFieldInsertTextUseCase } from "../../TextField/usecase/TextFieldInsertTextUseCase";
+/**
+ * @description テキストエリアに入力された文字を挿入します。
+ *              Inserts the characters entered in the text area.
+ *
+ * @param  {InputEvent} event
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (event) => {
+    if (!event.data) {
+        return;
+    }
+    const textField = $getSelectedTextField();
+    if (!textField) {
+        return;
+    }
+    textFieldInsertTextUseCase(textField, event.data);
+    if (textField.hasEventListener(Event.INPUT)) {
+        textField.dispatchEvent(new Event(Event.INPUT));
+    }
+};

package/src/TextArea/usecase/TextAreaRegisterEventUseCase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description テキストエリアにイベントを登録します。
+ *              Registers events in the text area.
+ *
+ * @param  {HTMLTextAreaElement} text_area
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_area: HTMLTextAreaElement) => void;

package/src/TextArea/usecase/TextAreaRegisterEventUseCase.js

@@ -0,0 +1,21 @@
+import { execute as textAreaCompositionStartUseCase } from "./TextAreaCompositionStartUseCase";
+import { execute as textAreaCompositionUpdateUseCase } from "./TextAreaCompositionUpdateUseCase";
+import { execute as textAreaCompositionEndUseCase } from "./TextAreaCompositionEndUseCase";
+import { execute as textAreaInputUseCase } from "./TextAreaInputUseCase";
+/**
+ * @description テキストエリアにイベントを登録します。
+ *              Registers events in the text area.
+ *
+ * @param  {HTMLTextAreaElement} text_area
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (text_area) => {
+    // omposition evnet
+    text_area.addEventListener("compositionstart", textAreaCompositionStartUseCase);
+    text_area.addEventListener("compositionupdate", textAreaCompositionUpdateUseCase);
+    text_area.addEventListener("compositionend", textAreaCompositionEndUseCase);
+    // input event
+    text_area.addEventListener("input", textAreaInputUseCase);
+};

package/src/TextData.d.ts

@@ -0,0 +1,103 @@
+import type { ITextObject } from "./interface/ITextObject";
+/**
+ * @description テキストの文字毎のデータ
+ *              Data for each character of text
+ * @class
+ * @public
+ */
+export declare class TextData {
+    private _$textWidth;
+    private _$textHeight;
+    /**
+     * @description テキストの行ごとの高さ
+     *              Height of each line of text
+     *
+     * @type {array}
+     * @public
+     */
+    readonly heightTable: number[];
+    /**
+     * @description テキストの行ごとのベースラインから上方線までの距離
+     *              Distance from the baseline to the top line of each line of text
+     *
+     * @type {array}
+     * @public
+     */
+    readonly ascentTable: number[];
+    /**
+     * @description テキストの行ごとの幅
+     *              Width of each line of text
+     *
+     * @type {array}
+     * @public
+     */
+    readonly widthTable: number[];
+    /**
+     * @description テキストの行ごとのテキストオブジェクト
+     *              Text object for each line of text
+     *
+     * @type {array}
+     * @public
+     */
+    readonly textTable: ITextObject[];
+    /**
+     * @description テキストの行ごとのテキストオブジェクト
+     *              Text object for each line of text
+     *
+     * @type {array}
+     * @public
+     */
+    readonly lineTable: ITextObject[];
+    /**
+     * @class
+     * @public
+     */
+    constructor();
+    /**
+     * @description テキストエリアの幅
+     *              Width of text area
+     *
+     * @member {number}
+     * @readonly
+     * @public
+     */
+    get textWidth(): number;
+    /**
+     * @description テキストエリアの高さ
+     *              Height of text area
+     *
+     * @member {number}
+     * @readonly
+     * @public
+     */
+    get textHeight(): number;
+    /**
+     * @description 指定した行のテキストの幅
+    *               Width of text for the specified line
+    *
+     * @param  {number} line_index
+     * @return {number}
+     * @method
+     * @public
+     */
+    getLineWidth(line_index: number): number;
+    /**
+     * @description 指定した行のテキストの高さ
+     *              Height of text for the specified line
+     *
+     * @param  {number} line_index
+     * @return {number}
+     * @method
+     * @public
+     */
+    getLineHeight(line_index: number): number;
+    /**
+     * @description 設定を初期化
+     *              Initialize settings
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    clear(): void;
+}

package/src/TextData.js

@@ -0,0 +1,183 @@
+/**
+ * @description テキストの文字毎のデータ
+ *              Data for each character of text
+ * @class
+ * @public
+ */
+export class TextData {
+    /**
+     * @class
+     * @public
+     */
+    constructor() {
+        Object.defineProperty(this, "_$textWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_$textHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description テキストの行ごとの高さ
+         *              Height of each line of text
+         *
+         * @type {array}
+         * @public
+         */
+        Object.defineProperty(this, "heightTable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description テキストの行ごとのベースラインから上方線までの距離
+         *              Distance from the baseline to the top line of each line of text
+         *
+         * @type {array}
+         * @public
+         */
+        Object.defineProperty(this, "ascentTable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description テキストの行ごとの幅
+         *              Width of each line of text
+         *
+         * @type {array}
+         * @public
+         */
+        Object.defineProperty(this, "widthTable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description テキストの行ごとのテキストオブジェクト
+         *              Text object for each line of text
+         *
+         * @type {array}
+         * @public
+         */
+        Object.defineProperty(this, "textTable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description テキストの行ごとのテキストオブジェクト
+         *              Text object for each line of text
+         *
+         * @type {array}
+         * @public
+         */
+        Object.defineProperty(this, "lineTable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @type {number}
+         * @private
+         */
+        this._$textWidth = -1;
+        /**
+         * @type {number}
+         * @private
+         */
+        this._$textHeight = -1;
+        this.widthTable = [];
+        this.heightTable = [];
+        this.ascentTable = [];
+        this.textTable = [];
+        this.lineTable = [];
+    }
+    /**
+     * @description テキストエリアの幅
+     *              Width of text area
+     *
+     * @member {number}
+     * @readonly
+     * @public
+     */
+    get textWidth() {
+        if (this._$textWidth !== -1) {
+            return this._$textWidth;
+        }
+        this._$textWidth = 0;
+        for (let idx = 0; idx < this.widthTable.length; ++idx) {
+            this._$textWidth = Math.max(this._$textWidth, this.widthTable[idx]);
+        }
+        return this._$textWidth;
+    }
+    /**
+     * @description テキストエリアの高さ
+     *              Height of text area
+     *
+     * @member {number}
+     * @readonly
+     * @public
+     */
+    get textHeight() {
+        if (this._$textHeight !== -1) {
+            return this._$textHeight;
+        }
+        this._$textHeight = 0;
+        for (let idx = 0; idx < this.heightTable.length; ++idx) {
+            this._$textHeight += this.heightTable[idx];
+        }
+        return this._$textHeight;
+    }
+    /**
+     * @description 指定した行のテキストの幅
+    *               Width of text for the specified line
+    *
+     * @param  {number} line_index
+     * @return {number}
+     * @method
+     * @public
+     */
+    getLineWidth(line_index) {
+        return line_index in this.widthTable ? this.widthTable[line_index] : 0;
+    }
+    /**
+     * @description 指定した行のテキストの高さ
+     *              Height of text for the specified line
+     *
+     * @param  {number} line_index
+     * @return {number}
+     * @method
+     * @public
+     */
+    getLineHeight(line_index) {
+        return line_index in this.heightTable ? this.heightTable[line_index] : 0;
+    }
+    /**
+     * @description 設定を初期化
+     *              Initialize settings
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    clear() {
+        this._$textWidth = -1;
+        this._$textHeight = -1;
+        this.widthTable.length = 0;
+        this.heightTable.length = 0;
+        this.ascentTable.length = 0;
+        this.textTable.length = 0;
+        this.lineTable.length = 0;
+    }
+}

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

@@ -0,0 +1,11 @@
+import type { DisplayObject } from "@next2d/display";
+/**
+ * @description DisplayObjectの更新フラグを立てる
+ *              Set the update flag of DisplayObject
+ *
+ * @param  {DisplayObject} display_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: <D extends DisplayObject>(display_object: D) => void;

package/src/TextField/service/TextFieldApplyChangesService.js

@@ -0,0 +1,16 @@
+/**
+ * @description DisplayObjectの更新フラグを立てる
+ *              Set the update flag of DisplayObject
+ *
+ * @param  {DisplayObject} display_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (display_object) => {
+    display_object.changed = true;
+    const parent = display_object.parent;
+    if (parent && !parent.changed) {
+        execute(parent);
+    }
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @description テキストの点滅のタイマーをクリアします。
+ *              Clear the text blinking timer.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/TextField/service/TextFieldBlinkingClearTimeoutService.js

@@ -0,0 +1,16 @@
+import { $getBlinkingTimerId, $setBlinkingTimerId } from "../../TextUtil";
+/**
+ * @description テキストの点滅のタイマーをクリアします。
+ *              Clear the text blinking timer.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const timerId = $getBlinkingTimerId();
+    if (timerId !== undefined) {
+        clearTimeout(timerId);
+    }
+    $setBlinkingTimerId(void 0);
+};

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

@@ -0,0 +1,11 @@
+import type { TextField } from "../../TextField";
+/**
+ * @description 選択中のインデックスを記録します。
+ *              Records the currently selected index.
+ *
+ * @param  {TextField} text_field
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_field: TextField) => void;

package/src/TextField/service/TextFieldCompositionStartService.js

@@ -0,0 +1,12 @@
+/**
+ * @description 選択中のインデックスを記録します。
+ *              Records the currently selected index.
+ *
+ * @param  {TextField} text_field
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (text_field) => {
+    text_field.compositionStartIndex = text_field.focusIndex;
+};

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

@@ -0,0 +1,11 @@
+import type { TextField } from "../../TextField";
+/**
+ * @description コピーしたテキストをペーストします。
+ *              Pastes the copied text.
+ *
+ * @param  {TextField} text_field
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_field: TextField) => Promise<void>;

package/src/TextField/service/TextFieldPasteService.js

@@ -0,0 +1,16 @@
+/**
+ * @description コピーしたテキストをペーストします。
+ *              Pastes the copied text.
+ *
+ * @param  {TextField} text_field
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = async (text_field) => {
+    const text = await navigator.clipboard.readText();
+    if (text === "" || text_field.focusIndex === -1) {
+        return;
+    }
+    text_field.insertText(text);
+};

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

@@ -0,0 +1,12 @@
+import type { TextField } from "../../TextField";
+/**
+ * @description テキストフィールドのフォーカスインデックスを下に移動します。
+ *              Moves the focus index of the text field down.
+ *
+ * @param  {TextField} text_field
+ * @param  {boolean} shift_key
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (text_field: TextField, shift_key: boolean) => void;