@next2d/display 1.17.4 → 1.18.0

package/dist/TextField.js

@@ -1,10 +1,10 @@
 import { InteractiveObject, Shape } from "@next2d/display";
-import { FocusEvent, Event as Next2DEvent, MouseEvent as Next2DMouseEvent } from "@next2d/events";
+import { FocusEvent, Event as Next2DEvent } from "@next2d/events";
 import { Tween, Easing } from "@next2d/ui";
 import { TextFormat, parsePlainText, parseHtmlText } from "@next2d/text";
-import { Rectangle } from "@next2d/geom";
-import { $currentPlayer, $MOUSE_DOWN, $MOUSE_UP, $MOUSE_WHEEL, $PREFIX, $rendererWorker, $SCROLL, $TOUCH_END, $TOUCH_START, $document, $RegExp } from "@next2d/util";
-import { $cacheStore, $doUpdated, $clamp, $getArray, $intToRGBA, $isNaN, $Math, $requestAnimationFrame, $toColorInt, $poolFloat32Array6, $boundsMatrix, $multiplicationMatrix, $poolBoundsObject, $multiplicationColor, $Infinity, $Number, $poolArray, $poolFloat32Array8, $generateFontStyle, $devicePixelRatio, $getBoundsObject } from "@next2d/share";
+import { Rectangle, Point } from "@next2d/geom";
+import { $document, $rendererWorker, $getEventType, $TOUCH_MOVE, $MOUSE_MOVE, $textArea, $currentPlayer } from "@next2d/util";
+import { $cacheStore, $doUpdated, $clamp, $getArray, $intToRGBA, $isNaN, $Math, $toColorInt, $poolFloat32Array6, $boundsMatrix, $multiplicationMatrix, $poolBoundsObject, $multiplicationColor, $Infinity, $Number, $poolArray, $poolFloat32Array8, $generateFontStyle, $getBoundsObject, $setTimeout, $clearTimeout } from "@next2d/share";
 /**
  * TextField クラスは、テキストの表示と入力用の表示オブジェクトを作成するために使用されます。
  * プロパティインスペクターを使用して、テキストフィールドにインスタンス名を付けることができます。
@@ -91,6 +91,24 @@ export class TextField extends InteractiveObject {
          * @private
          */
         this._$maxChars = 0;
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$stopIndex = -1;
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$compositionStartIndex = -1;
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$compositionEndIndex = -1;
         // TextFormat
         const textFormat = new TextFormat();
         textFormat._$setDefault();
@@ -142,12 +160,6 @@ export class TextField extends InteractiveObject {
          * @private
          */
         this._$textData = null;
-        /**
-         * @type {HTMLTextAreaElement}
-         * @default null
-         * @private
-         */
-        this._$textarea = null;
         /**
          * @type {string}
          * @default TextFieldAutoSize.NONE
@@ -162,10 +174,28 @@ export class TextField extends InteractiveObject {
         this._$autoFontSize = false;
         /**
          * @type {boolean}
-         * @default false
+         * @default true
+         * @private
+         */
+        this._$focusVisible = false;
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$timerId = -1;
+        /**
+         * @type {number}
+         * @default -1
+         * @private
+         */
+        this._$focusIndex = -1;
+        /**
+         * @type {number}
+         * @default -1
          * @private
          */
-        this._$textAreaActive = false;
+        this._$selectIndex = -1;
         /**
          * @type {boolean}
          * @default true
@@ -197,11 +227,11 @@ export class TextField extends InteractiveObject {
          */
         this._$focus = false;
         /**
-         * @type {boolean}
-         * @default false
+         * @type {string}
+         * @default ""
          * @private
          */
-        this._$isComposing = false;
+        this._$copyText = "";
         /**
          * @type {number}
          * @default 0
@@ -215,11 +245,11 @@ export class TextField extends InteractiveObject {
          */
         this._$thicknessColor = 0;
         /**
-         * @type {string}
-         * @default "bottom"
+         * @type {array}
+         * @default null
          * @private
          */
-        this._$verticalAlign = "bottom";
+        this._$textFormats = null;
         /**
          * @type {array}
          * @private
@@ -383,6 +413,87 @@ export class TextField extends InteractiveObject {
             this._$reset();
         }
     }
+    /**
+     * @description テキストの任意の表示終了位置の設定
+     *              Setting an arbitrary display end position for text.
+     *
+     * @member {number}
+     * @default -1
+     * @public
+     */
+    get stopIndex() {
+        return this._$stopIndex;
+    }
+    set stopIndex(index) {
+        index |= 0;
+        if (this._$stopIndex === index) {
+            return;
+        }
+        this._$stopIndex = index;
+        const textData = this.getTextData();
+        if (!textData.textTable.length) {
+            return;
+        }
+        let currentTextWidth = 2;
+        let targetIndex = 0;
+        for (let idx = 0; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            let countUp = false;
+            if (textObject.mode === "text") {
+                countUp = true;
+                currentTextWidth += textObject.w;
+            }
+            if (targetIndex >= index) {
+                targetIndex = idx;
+                break;
+            }
+            if (textObject.mode === "break") {
+                countUp = true;
+                // reset
+                this._$scrollX = 0;
+                currentTextWidth = 2;
+            }
+            if (countUp) {
+                targetIndex++;
+            }
+        }
+        const textObject = textData.textTable[targetIndex];
+        const line = textObject.line;
+        let currentTextHeight = 0;
+        for (let idx = 0; idx <= line; ++idx) {
+            currentTextHeight += textData.heightTable[idx];
+        }
+        const height = this.height;
+        let viewTextHeight = 0;
+        for (let idx = line; idx > -1; --idx) {
+            const lineHeight = textData.heightTable[idx];
+            if (height < viewTextHeight + lineHeight) {
+                break;
+            }
+            viewTextHeight += lineHeight;
+        }
+        if (currentTextHeight > height) {
+            const scaleY = (this.textHeight - height) / height;
+            this._$scrollY = $Math.min((currentTextHeight - viewTextHeight) / scaleY, height);
+        }
+        const width = this.width;
+        let viewTextWidth = 0;
+        for (let idx = targetIndex; idx > 0; --idx) {
+            const textObject = textData.textTable[idx];
+            if (textObject.mode !== "text") {
+                continue;
+            }
+            if (width < viewTextWidth + textObject.w) {
+                break;
+            }
+            viewTextWidth += textObject.w;
+        }
+        if (currentTextWidth > width) {
+            const scaleX = (this.textWidth - width) / width;
+            this._$scrollX = $Math.min((currentTextWidth - viewTextWidth) / scaleX, width + 0.5);
+        }
+        this._$doChanged();
+    }
     /**
      * @description テキストに適用するフォーマットを指定します。
      *              Specifies the formatting to be applied to the text.
@@ -415,52 +526,26 @@ export class TextField extends InteractiveObject {
         if (this._$type !== "input") {
             return;
         }
-        this._$focus = focus;
+        this._$focus = !!focus;
+        const name = this._$focus
+            ? FocusEvent.FOCUS_IN
+            : FocusEvent.FOCUS_OUT;
+        if (this.willTrigger(name)) {
+            this.dispatchEvent(new FocusEvent(name));
+        }
+        $textArea.value = "";
         if (this._$focus) {
-            const player = $currentPlayer();
-            const div = $document
-                .getElementById(player.contentElementId);
-            if (!div) {
-                return;
-            }
-            this._$createTextAreaElement(player._$scale);
-            // setup
-            const element = this._$textarea;
-            if (!element) {
-                return;
-            }
-            const matrix = this._$transform.concatenatedMatrix;
-            const bounds = this._$getBounds(null);
-            const color = $intToRGBA($toColorInt(this._$defaultTextFormat.color), 100);
-            element.style.color = `rgb(${color.R},${color.G},${color.B})`;
-            element.style.left = `${(matrix.tx + bounds.xMin + player.x / player._$scale / $devicePixelRatio) * player._$scale}px`;
-            element.style.top = `${(matrix.ty + bounds.yMin + player.y / player._$scale / $devicePixelRatio) * player._$scale}px`;
-            element.style.width = `${$Math.ceil(this.width * player._$scale)}px`;
-            element.style.height = `${$Math.ceil(this.height * player._$scale)}px`;
-            // set text
-            element.value = this.text;
-            div.appendChild(element);
-            $requestAnimationFrame(() => {
-                element.focus();
-            });
-            this._$doChanged();
-            $doUpdated();
-            this._$textAreaActive = true;
-            // focus in event
-            if (this.willTrigger(FocusEvent.FOCUS_IN)) {
-                this.dispatchEvent(new FocusEvent(FocusEvent.FOCUS_IN));
-            }
+            $textArea.focus();
         }
         else {
-            // execute
-            if (this._$textarea) {
-                this._$textarea.dispatchEvent(new Event(`${$PREFIX}_blur`));
-                if (this.willTrigger(FocusEvent.FOCUS_OUT)) {
-                    this.dispatchEvent(new FocusEvent(FocusEvent.FOCUS_OUT));
-                }
-                this._$textarea.remove();
-            }
+            this._$focusIndex = -1;
+            this._$selectIndex = -1;
+            this._$focusVisible = false;
+            $clearTimeout(this._$timerId);
+            $textArea.blur();
         }
+        this._$doChanged();
+        $doUpdated();
     }
     /**
      * @description テキストフィールドの内容を HTML で表します。
@@ -471,7 +556,44 @@ export class TextField extends InteractiveObject {
      * @public
      */
     get htmlText() {
-        return this._$htmlText;
+        if (this._$htmlText) {
+            return this._$htmlText;
+        }
+        const textData = this.getTextData();
+        let prevTextFormat = textData.textTable[0].textFormat;
+        let htmlText = "<span";
+        const style = prevTextFormat._$toStyleString();
+        if (style) {
+            htmlText += ` style="${style}"`;
+        }
+        htmlText += ">";
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (textObject.mode === "wrap") {
+                continue;
+            }
+            if (textObject.mode === "break") {
+                htmlText += "<br>";
+                continue;
+            }
+            const textFormat = textObject.textFormat;
+            if (!prevTextFormat._$isSame(textFormat)) {
+                htmlText += "</span><span";
+                const style = textFormat._$toStyleString();
+                if (style) {
+                    htmlText += ` style="${style}"`;
+                }
+                htmlText += ">";
+                // change
+                prevTextFormat = textFormat;
+            }
+            if (textObject.mode === "text") {
+                htmlText += textObject.text;
+            }
+        }
+        htmlText += "</span>";
+        this._$htmlText = htmlText;
+        return htmlText;
     }
     set htmlText(html_text) {
         if (this._$htmlText !== html_text) {
@@ -564,6 +686,17 @@ export class TextField extends InteractiveObject {
     set scrollEnabled(scroll_enabled) {
         this._$scrollEnabled = scroll_enabled;
     }
+    /**
+     * @description テキストの選択位置を返す
+     *              Returns the text selection position
+     *
+     * @member {number}
+     * @readonly
+     * @public
+     */
+    get selectIndex() {
+        return this._$selectIndex;
+    }
     /**
      * @description テキストフィールドのスクロール垂直位置です。
      *              The scroll vertical position of the text field.
@@ -584,7 +717,7 @@ export class TextField extends InteractiveObject {
             && this._$yScrollShape.hasLocalVariable("job")) {
             return;
         }
-        scroll_x = $clamp(scroll_x, 0, this.width, 0);
+        scroll_x = $clamp(scroll_x, 0, this.width + 0.5, 0);
         if (this._$scrollX !== scroll_x) {
             const width = this.width;
             if (this._$xScrollShape && this.textWidth > width) {
@@ -593,8 +726,12 @@ export class TextField extends InteractiveObject {
                 this._$xScrollShape.width = width * width / this.textWidth;
                 const parent = this._$parent;
                 if (parent) {
+                    // start animation
+                    if (this._$xScrollShape.hasLocalVariable("job")) {
+                        this._$xScrollShape.getLocalVariable("job").stop();
+                    }
                     // view start
-                    Tween.add(this._$xScrollShape, { "alpha": 0 }, { "alpha": 0.8 }, 0, 0.3, Easing.outQuad);
+                    this._$xScrollShape.alpha = 0.9;
                     // set position
                     this._$xScrollShape.x = this.x + 1
                         + (width - 1 - this._$xScrollShape.width)
@@ -603,11 +740,7 @@ export class TextField extends InteractiveObject {
                     this._$xScrollShape.y = this.y + this.height - this._$xScrollShape.height - 0.5;
                     // added sprite
                     parent.addChildAt(this._$xScrollShape, parent.getChildIndex(this) + 1);
-                    // start animation
-                    if (this._$xScrollShape.hasLocalVariable("job")) {
-                        this._$xScrollShape.getLocalVariable("job").stop();
-                    }
-                    const job = Tween.add(this._$xScrollShape, { "alpha": 0.8 }, { "alpha": 0 }, 0.2, 0.6, Easing.outQuad);
+                    const job = Tween.add(this._$xScrollShape, { "alpha": 0.9 }, { "alpha": 0 }, 0.5, 0.2, Easing.outQuad);
                     job.addEventListener(Next2DEvent.COMPLETE, (event) => {
                         const shape = event.target.target;
                         shape.deleteLocalVariable("job");
@@ -654,8 +787,12 @@ export class TextField extends InteractiveObject {
                 this._$yScrollShape.height = height * height / this.textHeight;
                 const parent = this._$parent;
                 if (parent) {
+                    // start animation
+                    if (this._$yScrollShape.hasLocalVariable("job")) {
+                        this._$yScrollShape.getLocalVariable("job").stop();
+                    }
                     // view start
-                    Tween.add(this._$yScrollShape, { "alpha": 0 }, { "alpha": 0.8 }, 0, 0.3, Easing.outQuad);
+                    this._$yScrollShape.alpha = 0.9;
                     // set position
                     this._$yScrollShape.x = this.x + this.width - this._$yScrollShape.width - 0.5;
                     this._$yScrollShape.y = this.y + 0.5
@@ -664,11 +801,7 @@ export class TextField extends InteractiveObject {
                             * (this._$scrollY - 1);
                     // added sprite
                     parent.addChildAt(this._$yScrollShape, parent.getChildIndex(this) + 1);
-                    // start animation
-                    if (this._$yScrollShape.hasLocalVariable("job")) {
-                        this._$yScrollShape.getLocalVariable("job").stop();
-                    }
-                    const job = Tween.add(this._$yScrollShape, { "alpha": 0.8 }, { "alpha": 0 }, 0.2, 0.6, Easing.outQuad);
+                    const job = Tween.add(this._$yScrollShape, { "alpha": 0.9 }, { "alpha": 0 }, 0.5, 0.2, Easing.outQuad);
                     job.addEventListener(Next2DEvent.COMPLETE, (event) => {
                         const shape = event.target.target;
                         shape.deleteLocalVariable("job");
@@ -703,14 +836,16 @@ export class TextField extends InteractiveObject {
         let text = "";
         const textData = this.getTextData();
         for (let idx = 1; idx < textData.textTable.length; ++idx) {
-            const object = textData.textTable[idx];
-            switch (object.mode) {
+            const textObject = textData.textTable[idx];
+            switch (textObject.mode) {
                 case "text":
-                    text += object.text;
+                    text += textObject.text;
                     break;
                 case "break":
                     text += "\r";
                     break;
+                default:
+                    continue;
             }
         }
         this._$rawHtmlText = text;
@@ -718,12 +853,18 @@ export class TextField extends InteractiveObject {
     }
     set text(text) {
         if (text === null) {
-            text = "";
+            this._$text = "";
+            this._$htmlText = "";
+            this._$rawHtmlText = "";
+            this._$isHTML = false;
+            this._$reload();
+            return;
         }
         text = `${text}`;
         if (text !== this._$text) {
             this._$text = text;
             this._$htmlText = "";
+            this._$rawHtmlText = "";
             this._$isHTML = false;
             this._$reload();
         }
@@ -813,26 +954,6 @@ export class TextField extends InteractiveObject {
     }
     set type(type) {
         this._$type = type;
-        if (type === "static") {
-            this._$textarea = null;
-        }
-    }
-    /**
-     * @description 縦方向の揃え位置を指定するプロパティです。
-     *              This property specifies the vertical alignment position.
-     *
-     * @member {string}
-     * @default "bottom"
-     * @public
-     */
-    get verticalAlign() {
-        return this._$verticalAlign;
-    }
-    set verticalAlign(vertical_align) {
-        if (vertical_align !== this._$verticalAlign) {
-            this._$verticalAlign = vertical_align;
-            this._$reset();
-        }
     }
     /**
      * @description テキストフィールドのテキストを折り返すかどうかを示すブール値です。
@@ -1027,7 +1148,8 @@ export class TextField extends InteractiveObject {
                 "width": this.width,
                 "multiline": this._$multiline,
                 "wordWrap": this._$wordWrap,
-                "subFontSize": sub_font_size
+                "subFontSize": sub_font_size,
+                "textFormats": this._$textFormats
             });
         }
         else {
@@ -1035,7 +1157,8 @@ export class TextField extends InteractiveObject {
                 "width": this.width,
                 "multiline": this._$multiline,
                 "wordWrap": this._$wordWrap,
-                "subFontSize": sub_font_size
+                "subFontSize": sub_font_size,
+                "textFormats": this._$textFormats
             });
         }
         return this._$textData;
@@ -1043,121 +1166,865 @@ export class TextField extends InteractiveObject {
     /**
      * @return {void}
      * @method
-     * @private
+     * @public
      */
-    _$reset() {
-        this._$textData = null;
-        this._$doChanged();
-        $doUpdated();
-        // cache clear
-        $cacheStore.removeCache(this._$instanceId);
+    selectAll() {
+        const textData = this.getTextData();
+        if (!textData.textTable.length) {
+            return;
+        }
+        this._$selectIndex = 1;
+        this._$focusIndex = textData.textTable.length;
     }
     /**
      * @return {void}
      * @method
-     * @private
+     * @public
      */
-    _$reload() {
-        this._$reset();
-        this.getTextData();
-        if (this._$autoSize === "none" && this._$autoFontSize) {
-            let maxFontSize = 0;
-            const textData = this.getTextData();
-            for (let idx = 0; idx < textData.textTable.length; ++idx) {
-                const textObject = textData.textTable[idx];
-                maxFontSize = $Math.max(maxFontSize, textObject.textFormat.size || 0);
-            }
-            let subSize = 1;
-            if (this.width && this.textWidth) {
-                while (maxFontSize > subSize
-                    && this.textWidth + 4 > this.width) {
-                    this._$reset();
-                    this.getTextData(subSize++);
-                }
+    copy() {
+        if (this._$focusIndex === -1 || this._$selectIndex === -1) {
+            return;
+        }
+        let text = "";
+        const minIndex = $Math.min(this._$focusIndex, this._$selectIndex);
+        const maxIndex = $Math.max(this._$focusIndex, this._$selectIndex) + 1;
+        const textData = this.getTextData();
+        for (let idx = minIndex; idx < maxIndex; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (!textObject || textObject.mode === "wrap") {
+                continue;
             }
-            if (this.height && this.textHeight) {
-                while (maxFontSize > subSize
-                    && this.textHeight + 4 > this.height) {
-                    this._$reset();
-                    this.getTextData(subSize++);
-                }
+            switch (textObject.mode) {
+                case "text":
+                    text += textObject.text;
+                    break;
+                case "break":
+                    text += "\n";
+                    break;
             }
         }
-        this._$resize();
+        this._$copyText = text;
     }
     /**
      * @return {void}
      * @method
-     * @private
+     * @public
      */
-    _$resize() {
-        // update bounds
-        if (this._$autoSize !== "none") {
-            const tf = this._$defaultTextFormat;
-            const width = this.textWidth + 4 + tf._$widthMargin();
-            if (this._$wordWrap) {
-                this._$bounds.xMax = this._$originBounds.xMax;
-                this._$bounds.xMin = this._$originBounds.xMin;
-            }
-            else {
-                switch (this._$autoSize) {
-                    case "left":
-                        this._$bounds.xMax = width + this._$bounds.xMin;
-                        break;
-                    case "center":
-                        this._$bounds.xMax = width + this._$bounds.xMin;
-                        break;
-                    case "right":
-                        this._$bounds.xMax = this._$originBounds.xMax
-                            - (this._$originBounds.xMax - this._$originBounds.xMin
-                                - (width - this._$originBounds.xMin));
-                        break;
-                    default:
-                        break;
-                }
-            }
-            // set height
-            this._$bounds.yMax = this.textHeight + this._$originBounds.yMin;
-        }
-        else {
-            if (this._$scrollEnabled) {
-                if (!this._$xScrollShape) {
-                    this._$xScrollShape = new Shape();
-                    this
-                        ._$xScrollShape
-                        .graphics
-                        .beginFill("#000", 0.3)
-                        .drawRoundRect(0, 0, 3, 3, 3);
-                    this
-                        ._$xScrollShape
-                        .scale9Grid = new Rectangle(1.5, 1.5, 0.1, 0.1);
-                }
-                if (!this._$yScrollShape) {
-                    this._$yScrollShape = new Shape();
-                    this
-                        ._$yScrollShape
-                        .graphics
-                        .beginFill("#000", 0.3)
-                        .drawRoundRect(0, 0, 3, 3, 3);
-                    this
-                        ._$yScrollShape
-                        .scale9Grid = new Rectangle(1.5, 1.5, 0.1, 0.1);
-                }
-            }
+    paste() {
+        if (!this._$copyText || this._$focusIndex === -1) {
+            return;
         }
+        this.insertText(this._$copyText);
     }
     /**
-     * @param  {object} text_object
-     * @param  {number} width
-     * @return {number}
+     * @return {void}
      * @method
-     * @private
+     * @public
      */
-    _$getAlignOffset(text_object, width) {
-        // default
-        const lineWidth = this
-            .getTextData()
-            .getLineWidth(text_object.line);
+    arrowUp() {
+        if (this._$focusIndex === -1) {
+            return;
+        }
+        const textData = this.getTextData();
+        if (!textData.textTable.length) {
+            return;
+        }
+        const index = textData.textTable.length === this._$focusIndex
+            ? this._$focusIndex - 1
+            : this._$focusIndex;
+        const textObject = textData.textTable[index];
+        if (!textObject.line) {
+            return;
+        }
+        const line = textObject.mode === "text"
+            ? textObject.line
+            : textObject.line - 1;
+        let currentWidth = 2;
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (this._$focusIndex === idx) {
+                if (textObject.mode === "text") {
+                    currentWidth += textObject.w / 2;
+                }
+                break;
+            }
+            if (textObject.line > line) {
+                break;
+            }
+            if (textObject.line !== line || textObject.mode !== "text") {
+                continue;
+            }
+            currentWidth += textObject.w;
+        }
+        let textWidth = 2;
+        const targetLine = line - 1;
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (textObject.line > targetLine) {
+                this._$focusIndex = textObject.mode === "text" ? idx - 1 : idx;
+                this._$selectIndex = -1;
+                $clearTimeout(this._$timerId);
+                this._$blinking();
+                return;
+            }
+            if (textObject.line !== targetLine || textObject.mode !== "text") {
+                continue;
+            }
+            textWidth += textObject.w;
+            if (textWidth > currentWidth) {
+                this._$focusIndex = idx;
+                this._$selectIndex = -1;
+                $clearTimeout(this._$timerId);
+                this._$blinking();
+                return;
+            }
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    arrowDown() {
+        if (this._$focusIndex === -1) {
+            return;
+        }
+        const textData = this.getTextData();
+        if (!textData.textTable.length) {
+            return;
+        }
+        const textObject = textData.textTable[this._$focusIndex];
+        const line = textObject.mode === "text"
+            ? textObject.line
+            : textObject.line - 1;
+        if (line === textData.lineTable.length - 1) {
+            return;
+        }
+        let currentWidth = 2;
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (this._$focusIndex === idx) {
+                if (textObject.mode === "text") {
+                    currentWidth += textObject.w / 2;
+                }
+                break;
+            }
+            if (textObject.line > line) {
+                break;
+            }
+            if (textObject.line !== line || textObject.mode !== "text") {
+                continue;
+            }
+            currentWidth += textObject.w;
+        }
+        let textWidth = 2;
+        const targetLine = line + 1;
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (textObject.line > targetLine) {
+                this._$focusIndex = textObject.mode === "text" ? idx - 1 : idx;
+                this._$selectIndex = -1;
+                $clearTimeout(this._$timerId);
+                this._$blinking();
+                return;
+            }
+            if (textObject.line !== targetLine || textObject.mode !== "text") {
+                continue;
+            }
+            textWidth += textObject.w;
+            if (textWidth > currentWidth) {
+                this._$focusIndex = idx;
+                this._$selectIndex = -1;
+                $clearTimeout(this._$timerId);
+                this._$blinking();
+                return;
+            }
+        }
+        this._$focusIndex = textData.textTable.length;
+        this._$selectIndex = -1;
+        $clearTimeout(this._$timerId);
+        this._$blinking();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    arrowLeft() {
+        if (!this._$focusIndex) {
+            return;
+        }
+        const textData = this.getTextData();
+        if (textData.textTable.length && this._$focusIndex < 2) {
+            this._$focusIndex = 1;
+            return;
+        }
+        this._$focusIndex--;
+        this._$selectIndex = -1;
+        $clearTimeout(this._$timerId);
+        this._$blinking();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    arrowRight() {
+        const textData = this.getTextData();
+        if (textData.textTable.length === this._$focusIndex) {
+            return;
+        }
+        this._$focusIndex++;
+        this._$selectIndex = -1;
+        $clearTimeout(this._$timerId);
+        this._$blinking();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    deleteText() {
+        if (this._$compositionStartIndex > -1) {
+            return;
+        }
+        let minIndex = 0;
+        let maxIndex = 0;
+        if (this._$selectIndex > -1) {
+            minIndex = $Math.min(this._$focusIndex, this._$selectIndex);
+            maxIndex = $Math.max(this._$focusIndex, this._$selectIndex) + 1;
+            this._$focusIndex = minIndex;
+        }
+        else {
+            if (2 > this._$focusIndex) {
+                return;
+            }
+            this._$focusIndex--;
+        }
+        const textData = this.getTextData();
+        const textObject = textData.textTable[this._$focusIndex];
+        if (textObject && textObject.mode === "wrap") {
+            this._$focusIndex--;
+        }
+        const textFormats = $getArray();
+        let newText = "";
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (this._$focusIndex === idx || minIndex <= idx && maxIndex > idx) {
+                continue;
+            }
+            switch (textObject.mode) {
+                case "break":
+                    textFormats.push(textObject.textFormat);
+                    newText += "\n";
+                    break;
+                case "text":
+                    textFormats.push(textObject.textFormat);
+                    newText += textObject.text;
+                    break;
+                default:
+                    continue;
+            }
+        }
+        if (textData.textTable.length === this._$focusIndex) {
+            textFormats.pop();
+            newText = newText.slice(0, -1);
+        }
+        this._$selectIndex = -1;
+        if (!newText) {
+            // reset
+            this.text = null;
+            this._$scrollX = 0;
+            this._$scrollY = 0;
+            this._$focusIndex = 0;
+        }
+        else {
+            const beforeTextWidth = this.textWidth;
+            const beforeTextHeight = this.textHeight;
+            this._$textFormats = textFormats;
+            this.text = newText;
+            if (this._$scrollX > 0) {
+                const textWidth = this.textWidth;
+                const width = this.width;
+                switch (true) {
+                    case width > textWidth:
+                        this._$scrollY = 0;
+                        break;
+                    case beforeTextWidth !== textWidth:
+                        this._$scrollY -= (beforeTextWidth - textWidth)
+                            / (textWidth / width);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            if (this._$scrollY > 0) {
+                const textHeight = this.textHeight;
+                const height = this.height;
+                switch (true) {
+                    case height > textHeight:
+                        this._$scrollY = 0;
+                        break;
+                    case beforeTextHeight !== textHeight:
+                        this._$scrollY -= (beforeTextHeight - textHeight)
+                            / (textHeight / height);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            // reset
+            this._$textFormats = null;
+            $poolArray(textFormats);
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    compositionStart() {
+        this._$compositionStartIndex = this._$focusIndex;
+    }
+    /**
+     * @param  {string} texts
+     * @return {void}
+     * @method
+     * @public
+     */
+    compositionUpdate(texts) {
+        if (this._$compositionEndIndex > -1) {
+            const cacheIndex = this._$compositionStartIndex;
+            this._$focusIndex = this._$compositionStartIndex;
+            this._$selectIndex = this._$compositionEndIndex - 1;
+            this._$compositionStartIndex = -1;
+            this.deleteText();
+            // reset
+            this._$compositionStartIndex = cacheIndex;
+            this._$selectIndex = -1;
+        }
+        let textData = this.getTextData();
+        const textFormats = $getArray();
+        const length = texts.length;
+        let newText = "";
+        if (!textData.textTable.length) {
+            newText = texts;
+            this._$focusIndex = 1;
+            this._$compositionStartIndex = 1;
+        }
+        else {
+            for (let idx = 1; idx < textData.textTable.length; ++idx) {
+                const textObject = textData.textTable[idx];
+                if (this._$compositionStartIndex === idx) {
+                    for (let idx = 0; idx < length; ++idx) {
+                        textFormats.push(textObject.textFormat._$clone());
+                        newText += texts[idx];
+                    }
+                }
+                switch (textObject.mode) {
+                    case "break":
+                        textFormats.push(textObject.textFormat);
+                        newText += "\n";
+                        break;
+                    case "text":
+                        textFormats.push(textObject.textFormat);
+                        newText += textObject.text;
+                        break;
+                    default:
+                        continue;
+                }
+            }
+            // last text
+            if (this._$compositionStartIndex === textData.textTable.length) {
+                const textObject = textData.textTable[this._$compositionStartIndex - 1];
+                for (let idx = 0; idx < length; ++idx) {
+                    textFormats.push(textObject.textFormat._$clone());
+                    newText += texts[idx];
+                }
+            }
+        }
+        // update
+        if (textFormats.length) {
+            this._$textFormats = textFormats;
+        }
+        this.text = newText;
+        // reset
+        this._$textFormats = null;
+        $poolArray(textFormats);
+        textData = this.getTextData();
+        let index = this._$compositionStartIndex + length;
+        for (let idx = this._$compositionStartIndex; idx < index; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (!textObject) {
+                break;
+            }
+            textObject.textFormat.underline = true;
+            if (textObject.mode === "wrap") {
+                if (idx === this._$compositionStartIndex) {
+                    let subIndex = 1;
+                    for (;;) {
+                        const textObject = textData.textTable[idx - subIndex];
+                        if (!textObject) {
+                            break;
+                        }
+                        if (textObject.mode === "text") {
+                            textObject.textFormat.underline = true;
+                            break;
+                        }
+                        subIndex++;
+                    }
+                }
+                if (idx > this._$compositionStartIndex) {
+                    index++;
+                }
+            }
+        }
+        this._$compositionEndIndex = this._$focusIndex = index;
+        // move textarea element
+        const player = $currentPlayer();
+        const lastIndex = $Math.min(textData.textTable.length - 1, this._$compositionEndIndex);
+        const textObject = textData.textTable[lastIndex];
+        if (textObject) {
+            const line = textObject.line;
+            let offsetHeight = 0;
+            for (let idx = 0; idx < line; ++idx) {
+                offsetHeight += textData.heightTable[idx];
+            }
+            const verticalAlign = textData.ascentTable[line];
+            let offsetWidth = 0;
+            let targetIndex = this._$compositionEndIndex;
+            for (;;) {
+                const textObject = textData.textTable[targetIndex--];
+                if (!textObject || textObject.line !== line) {
+                    break;
+                }
+                offsetWidth += textObject.w;
+            }
+            const lineObject = textData.lineTable[line];
+            const offsetAlign = this._$getAlignOffset(lineObject, this.width);
+            const point = this.localToGlobal(new Point(offsetWidth + offsetAlign, offsetHeight + verticalAlign));
+            const div = $document
+                .getElementById(player.contentElementId);
+            let left = point.x * player._$scale;
+            let top = point.y * player._$scale;
+            if (div) {
+                const rect = div.getBoundingClientRect();
+                left += rect.left;
+                top += rect.top;
+            }
+            $textArea.style.left = `${left}px`;
+            $textArea.style.top = `${top}px`;
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    compositionEnd() {
+        if (this._$compositionEndIndex > -1) {
+            const textData = this.getTextData();
+            for (let idx = this._$compositionStartIndex; idx < this._$compositionEndIndex; ++idx) {
+                const textObject = textData.textTable[idx];
+                textObject.textFormat.underline = false;
+            }
+            this._$focusIndex = this._$compositionEndIndex;
+        }
+        $textArea.blur();
+        $textArea.value = "";
+        if (this._$focus) {
+            $textArea.focus();
+        }
+        this._$selectIndex = -1;
+        this._$compositionStartIndex = -1;
+        this._$compositionEndIndex = -1;
+    }
+    /**
+     * @param  {string} text
+     * @return {void}
+     * @method
+     * @public
+     */
+    insertText(texts) {
+        if (this._$focusIndex === -1
+            || this._$compositionStartIndex > -1) {
+            return;
+        }
+        if (this._$selectIndex > -1) {
+            this.deleteText();
+        }
+        const textData = this.getTextData();
+        const textFormats = $getArray();
+        let newText = "";
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            if (this._$focusIndex === idx) {
+                for (let idx = 0; idx < texts.length; ++idx) {
+                    textFormats.push(textObject.textFormat);
+                    newText += texts[idx];
+                }
+            }
+            switch (textObject.mode) {
+                case "break":
+                    textFormats.push(textObject.textFormat);
+                    newText += "\n";
+                    break;
+                case "text":
+                    textFormats.push(textObject.textFormat);
+                    newText += textObject.text;
+                    break;
+                default:
+                    continue;
+            }
+        }
+        if (textData.textTable.length === this._$focusIndex) {
+            let textFormat;
+            if (textData.textTable.length) {
+                const textObject = textData.textTable[textData.textTable.length - 1];
+                textFormat = textObject.textFormat._$clone();
+            }
+            else {
+                textFormat = this.defaultTextFormat;
+                this._$focusIndex++;
+            }
+            for (let idx = 0; idx < texts.length; ++idx) {
+                textFormats.push(textFormat._$clone());
+                newText += texts[idx];
+            }
+        }
+        // update
+        this._$textFormats = textFormats;
+        this.text = newText;
+        // reset
+        this._$textFormats = null;
+        $poolArray(textFormats);
+        this._$focusIndex += texts.length;
+        this._$selectIndex = -1;
+        $textArea.value = "";
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$reset() {
+        this._$textData = null;
+        this._$doChanged();
+        $doUpdated();
+        // cache clear
+        $cacheStore.removeCache(this._$instanceId);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$reload() {
+        this._$reset();
+        this.getTextData();
+        if (this._$autoSize === "none" && this._$autoFontSize) {
+            let maxFontSize = 0;
+            const textData = this.getTextData();
+            for (let idx = 0; idx < textData.textTable.length; ++idx) {
+                const textObject = textData.textTable[idx];
+                maxFontSize = $Math.max(maxFontSize, textObject.textFormat.size || 0);
+            }
+            let subSize = 1;
+            if (this.width && this.textWidth) {
+                while (maxFontSize > subSize
+                    && this.textWidth + 4 > this.width) {
+                    this._$reset();
+                    this.getTextData(subSize++);
+                }
+            }
+            if (this.height && this.textHeight) {
+                while (maxFontSize > subSize
+                    && this.textHeight + 4 > this.height) {
+                    this._$reset();
+                    this.getTextData(subSize++);
+                }
+            }
+        }
+        this._$resize();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$blinking() {
+        this._$focusVisible = !this._$focusVisible;
+        this._$doChanged();
+        $doUpdated();
+        this._$timerId = +$setTimeout(() => {
+            this._$blinking();
+        }, 500);
+        this._$timerId |= 0;
+    }
+    /**
+     * @param  {number} stage_x
+     * @param  {number} stage_y
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setIndex(stage_x, stage_y) {
+        if (this._$type !== "input") {
+            return;
+        }
+        const textData = this.getTextData();
+        if (!textData.textTable.length) {
+            this._$focusIndex = 0;
+            this._$selectIndex = -1;
+            this.setBlinkingTimer();
+            return;
+        }
+        const width = this.width;
+        const height = this.height;
+        let tx = 0;
+        if (this._$scrollX > 0) {
+            tx += this._$scrollX * (this.textWidth - width) / width;
+        }
+        let ty = 0;
+        if (this._$scrollY) {
+            ty += this._$scrollY * (this.textHeight - height) / height;
+        }
+        const eventType = $getEventType();
+        const point = this.globalToLocal(new Point(stage_x, stage_y));
+        const x = point.x + tx;
+        const y = point.y + ty;
+        let w = 2;
+        let yMin = 2;
+        let yMax = yMin + textData.heightTable[0];
+        for (let idx = 1; idx < textData.textTable.length; ++idx) {
+            const textObject = textData.textTable[idx];
+            switch (textObject.mode) {
+                case "break":
+                case "wrap":
+                    if (x > w && y > yMin
+                        && yMax > y
+                        && width > x) {
+                        const index = idx;
+                        switch (eventType) {
+                            case $TOUCH_MOVE:
+                            case $MOUSE_MOVE:
+                                if (this._$selectIndex !== index && this._$focusIndex === index) {
+                                    this._$selectIndex = index;
+                                    if (this._$focusIndex !== index) {
+                                        this._$focusVisible = false;
+                                        $clearTimeout(this._$timerId);
+                                        this._$doChanged();
+                                        $doUpdated();
+                                    }
+                                }
+                                break;
+                            default:
+                                if (this._$focusIndex !== index || this._$selectIndex > -1) {
+                                    this._$focusIndex = index;
+                                    this._$selectIndex = -1;
+                                    this.setBlinkingTimer();
+                                }
+                                break;
+                        }
+                        return;
+                    }
+                    w = 2;
+                    yMin += textData.heightTable[textObject.line - 1];
+                    yMax = yMin + textData.heightTable[textObject.line];
+                    break;
+                case "text":
+                    if (idx === textData.textTable.length - 1
+                        && x > w && y > yMin && yMax > y
+                        && width > x) {
+                        const index = textData.textTable.length;
+                        switch (eventType) {
+                            case $TOUCH_MOVE:
+                            case $MOUSE_MOVE:
+                                if (this._$selectIndex !== index) {
+                                    this._$selectIndex = index;
+                                    if (this._$focusIndex !== index) {
+                                        this._$focusVisible = false;
+                                        $clearTimeout(this._$timerId);
+                                        this._$doChanged();
+                                        $doUpdated();
+                                    }
+                                }
+                                break;
+                            default:
+                                if (this._$focusIndex !== index || this._$selectIndex > -1) {
+                                    this._$focusIndex = index;
+                                    this._$selectIndex = -1;
+                                    this.setBlinkingTimer();
+                                }
+                                break;
+                        }
+                        return;
+                    }
+                    if (x > w && y > yMin
+                        && yMax > y
+                        && w + textObject.w > x) {
+                        let index = idx;
+                        switch (eventType) {
+                            case $TOUCH_MOVE:
+                            case $MOUSE_MOVE:
+                                if (this._$focusIndex > index) { // left
+                                    if (this._$focusIndex === index + 1) {
+                                        if (w + textObject.w / 2 < x) {
+                                            index = -1;
+                                        }
+                                    }
+                                    else {
+                                        if (w + textObject.w / 2 < x) {
+                                            index += 1;
+                                        }
+                                    }
+                                }
+                                else { // right
+                                    if (this._$focusIndex === index) {
+                                        if (w + textObject.w / 2 > x) {
+                                            index = -1;
+                                        }
+                                    }
+                                    else {
+                                        if (w + textObject.w / 2 > x) {
+                                            index -= 1;
+                                        }
+                                    }
+                                }
+                                if (this._$selectIndex !== index) {
+                                    this._$selectIndex = index;
+                                    if (this._$selectIndex > -1) {
+                                        this._$focusVisible = false;
+                                        $clearTimeout(this._$timerId);
+                                    }
+                                    this._$doChanged();
+                                    $doUpdated();
+                                }
+                                break;
+                            default:
+                                if (w + textObject.w / 2 < x) {
+                                    const textObject = textData.textTable[index + 1];
+                                    if (!textObject || textObject.mode === "text") {
+                                        index += 1;
+                                    }
+                                }
+                                if (this._$focusIndex !== index || this._$selectIndex > -1) {
+                                    this._$focusIndex = index;
+                                    this._$selectIndex = -1;
+                                    this.setBlinkingTimer();
+                                }
+                                break;
+                        }
+                        return;
+                    }
+                    w += textObject.w;
+                    break;
+                default:
+                    break;
+            }
+        }
+        switch (eventType) {
+            case $TOUCH_MOVE:
+            case $MOUSE_MOVE:
+                // reset
+                this._$focusIndex = -1;
+                this._$selectIndex = -1;
+                break;
+            default:
+                this._$focusIndex = textData.textTable.length;
+                this._$selectIndex = -1;
+                this.setBlinkingTimer();
+                break;
+        }
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    setBlinkingTimer() {
+        this._$focusVisible = false;
+        this._$doChanged();
+        $doUpdated();
+        $clearTimeout(this._$timerId);
+        this._$timerId = +$setTimeout(() => {
+            this._$blinking();
+        }, 500);
+        this._$timerId |= 0;
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$resize() {
+        // update bounds
+        if (this._$autoSize !== "none") {
+            const tf = this._$defaultTextFormat;
+            const width = this.textWidth + 4 + tf._$widthMargin();
+            if (this._$wordWrap) {
+                this._$bounds.xMax = this._$originBounds.xMax;
+                this._$bounds.xMin = this._$originBounds.xMin;
+            }
+            else {
+                switch (this._$autoSize) {
+                    case "left":
+                        this._$bounds.xMax = width + this._$bounds.xMin;
+                        break;
+                    case "center":
+                        this._$bounds.xMax = width + this._$bounds.xMin;
+                        break;
+                    case "right":
+                        this._$bounds.xMax = this._$originBounds.xMax
+                            - (this._$originBounds.xMax - this._$originBounds.xMin
+                                - (width - this._$originBounds.xMin));
+                        break;
+                    default:
+                        break;
+                }
+            }
+            // set height
+            this._$bounds.yMax = this.textHeight + this._$originBounds.yMin;
+        }
+        else {
+            if (this._$scrollEnabled) {
+                if (!this._$xScrollShape) {
+                    this._$xScrollShape = new Shape();
+                    this
+                        ._$xScrollShape
+                        .graphics
+                        .beginFill("#000", 0.3)
+                        .drawRoundRect(0, 0, 3, 3, 3);
+                    this
+                        ._$xScrollShape
+                        .scale9Grid = new Rectangle(1.5, 1.5, 0.1, 0.1);
+                }
+                if (!this._$yScrollShape) {
+                    this._$yScrollShape = new Shape();
+                    this
+                        ._$yScrollShape
+                        .graphics
+                        .beginFill("#000", 0.3)
+                        .drawRoundRect(0, 0, 3, 3, 3);
+                    this
+                        ._$yScrollShape
+                        .scale9Grid = new Rectangle(1.5, 1.5, 0.1, 0.1);
+                }
+            }
+        }
+    }
+    /**
+     * @param  {object} text_object
+     * @param  {number} width
+     * @return {number}
+     * @method
+     * @private
+     */
+    _$getAlignOffset(text_object, width) {
+        // default
+        const lineWidth = this
+            .getTextData()
+            .getLineWidth(text_object.line);
         const textFormat = text_object.textFormat;
         const leftMargin = textFormat.leftMargin || 0;
         if (!this._$wordWrap && lineWidth > width) {
@@ -1326,10 +2193,13 @@ export class TextField extends InteractiveObject {
      * @private
      */
     _$draw(context, matrix, color_transform) {
-        if (!this._$visible || this._$textAreaActive) {
+        if (!this._$visible) {
             return;
         }
-        if (!this._$background && !this._$border && !this.text) {
+        if (this._$focusIndex === -1
+            && !this._$background
+            && !this._$border
+            && !this.text) {
             return;
         }
         let multiColor = color_transform;
@@ -1483,16 +2353,16 @@ export class TextField extends InteractiveObject {
             ctx.lineTo(2, height - 2);
             ctx.lineTo(2, 2);
             ctx.clip();
-            let ty = 2;
-            if (this._$scrollY > 0) {
-                const scaleY = (this.textHeight - this.height) / this.height;
-                ty += -this._$scrollY * scaleY;
-            }
             let tx = 2;
             if (this._$scrollX > 0) {
                 const scaleX = (this.textWidth - this.width) / this.width;
                 tx += -this._$scrollX * scaleX;
             }
+            let ty = 2;
+            if (this._$scrollY > 0) {
+                const scaleY = (this.textHeight - this.height) / this.height;
+                ty += -this._$scrollY * scaleY;
+            }
             ctx.setTransform(xScale, 0, 0, yScale, tx * xScale, ty * yScale);
             ctx.beginPath();
             this._$doDraw(ctx, multiColor, width / xScale, lineWidth);
@@ -1569,6 +2439,69 @@ export class TextField extends InteractiveObject {
     _$doDraw(context, color_transform, width, line_width) {
         // init
         const textData = this.getTextData();
+        if (!textData.textTable.length
+            && this._$focusIndex > -1
+            && this._$focusVisible) {
+            const textFormat = this._$defaultTextFormat;
+            const rgb = $intToRGBA(textFormat.color || 0);
+            const alpha = $Math.max(0, $Math.min(rgb.A * 255 + color_transform[7], 255)) / 255;
+            context.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
+            context.beginPath();
+            context.moveTo(0, 0);
+            context.lineTo(0, 0 + (textFormat.size || 12));
+            context.stroke();
+            return;
+        }
+        if (this._$selectIndex > -1 && this._$focusIndex > -1) {
+            const range = textData.textTable.length - 1;
+            let minIndex = 0;
+            let maxIndex = 0;
+            if (this._$focusIndex <= this._$selectIndex) {
+                minIndex = $Math.min(this._$focusIndex, range);
+                maxIndex = $Math.min(this._$selectIndex, range);
+            }
+            else {
+                minIndex = $Math.min(this._$selectIndex, range);
+                maxIndex = $Math.min(this._$focusIndex - 1, range);
+            }
+            const textObject = textData.textTable[minIndex];
+            const lineObject = textData.lineTable[textObject.line];
+            const offsetAlign = this._$getAlignOffset(lineObject, width);
+            let x = 0;
+            if (minIndex && textObject.mode === "text") {
+                let idx = minIndex;
+                while (idx) {
+                    const textObject = textData.textTable[--idx];
+                    if (textObject.mode !== "text") {
+                        break;
+                    }
+                    x += textObject.w;
+                }
+            }
+            context.fillStyle = "#b4d7ff";
+            let w = 0;
+            for (let idx = minIndex; idx <= maxIndex; ++idx) {
+                const textObject = textData.textTable[idx];
+                if (textObject.mode === "text") {
+                    w += textObject.w;
+                    if (idx !== maxIndex) {
+                        continue;
+                    }
+                }
+                let y = 0;
+                const line = textObject.mode === "text"
+                    ? textObject.line
+                    : textObject.line - 1;
+                for (let idx = 0; idx < line; ++idx) {
+                    y += textData.heightTable[idx];
+                }
+                context.beginPath();
+                context.rect(x, y, w + offsetAlign, textData.heightTable[line]);
+                context.fill();
+                x = 0;
+                w = 0;
+            }
+        }
         const tw = this.width;
         let scrollX = 0;
         if (this._$scrollX > 0) {
@@ -1589,8 +2522,15 @@ export class TextField extends InteractiveObject {
         let offsetAlign = 0;
         let verticalAlign = 0;
         let skip = false;
+        let currentIndex = -1;
         for (let idx = 0; idx < textData.textTable.length; ++idx) {
             const textObject = textData.textTable[idx];
+            if (textObject.mode === "text" || textObject.mode === "break") {
+                currentIndex++;
+                if (this._$stopIndex > -1 && currentIndex > this._$stopIndex) {
+                    break;
+                }
+            }
             if (skip && textObject.mode === "text") {
                 continue;
             }
@@ -1612,6 +2552,34 @@ export class TextField extends InteractiveObject {
             const rgb = $intToRGBA(textFormat.color || 0);
             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})`;
+            // focus line
+            if (this._$focusVisible && this._$focusIndex === idx) {
+                const x = offsetWidth + offsetAlign + 0.1;
+                let line = textObject.line;
+                let h = textObject.y;
+                let y = textData.ascentTable[line];
+                if (textObject.mode !== "text") {
+                    h = textObject.mode === "break"
+                        ? textObject.h
+                        : textData.ascentTable[line - 1];
+                    if (line > 0 && !textData.ascentTable[line - 1]) {
+                        line = textObject.line;
+                        y = textData.ascentTable[line - 1];
+                    }
+                    else {
+                        line = textObject.line - 1;
+                        y = textData.ascentTable[line];
+                    }
+                }
+                for (let idx = 0; idx < line; ++idx) {
+                    y += textData.heightTable[idx];
+                }
+                context.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
+                context.beginPath();
+                context.moveTo(x, y);
+                context.lineTo(x, y - h);
+                context.stroke();
+            }
             if (this._$thickness) {
                 const rgb = $intToRGBA(this._$thicknessColor);
                 const alpha = $Math.max(0, $Math.min(rgb.A * 255 + color_transform[7], 255)) / 255;
@@ -1625,7 +2593,7 @@ export class TextField extends InteractiveObject {
                     // reset width
                     offsetWidth = 0;
                     if (line) {
-                        offsetHeight += textData.heightTable[line - 1] + 1;
+                        offsetHeight += textData.heightTable[line - 1];
                     }
                     if (scrollY > offsetHeight + textData.heightTable[line]) {
                         skip = true;
@@ -1647,8 +2615,8 @@ export class TextField extends InteractiveObject {
                             context.lineWidth = line_width;
                             context.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
                             context.beginPath();
-                            context.moveTo(x, y + 1);
-                            context.lineTo(x + textObject.w, y + 1);
+                            context.moveTo(x, y + 2);
+                            context.lineTo(x + textObject.w, y + 2);
                             context.stroke();
                         }
                         if (this._$thickness) {
@@ -1670,6 +2638,26 @@ export class TextField extends InteractiveObject {
                 //     break;
             }
         }
+        if (this._$focusVisible && this._$focusIndex >= textData.textTable.length) {
+            const textObject = textData.textTable[this._$focusIndex - 1];
+            if (textObject) {
+                const rgb = $intToRGBA(textObject.textFormat.color || 0);
+                const alpha = $Math.max(0, $Math.min(rgb.A * 255 + color_transform[7], 255)) / 255;
+                context.strokeStyle = `rgba(${rgb.R},${rgb.G},${rgb.B},${alpha})`;
+                const x = offsetWidth + offsetAlign + 0.1;
+                const y = offsetHeight + verticalAlign;
+                context.beginPath();
+                if (textObject.mode === "text") {
+                    context.moveTo(x, y - textObject.y);
+                    context.lineTo(x, y);
+                }
+                else {
+                    context.moveTo(x, y + textObject.h);
+                    context.lineTo(x, y);
+                }
+                context.stroke();
+            }
+        }
     }
     /**
      * @param  {CanvasRenderingContext2D} context
@@ -1723,215 +2711,6 @@ export class TextField extends InteractiveObject {
         }
         return context.isPointInPath(options.x, options.y);
     }
-    /**
-     * @param  {number} scale
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$createTextAreaElement(scale) {
-        // new text area
-        if (!this._$textarea) {
-            this._$textarea = $document.createElement("textarea");
-            this._$textarea.value = this.text;
-            this._$textarea.id = `${$PREFIX}_TextField_${this._$instanceId}`;
-            if (!this._$wordWrap) {
-                this._$textarea.wrap = "off";
-            }
-            const textFormat = this._$defaultTextFormat;
-            // setup
-            let style = "";
-            style += "position: absolute;";
-            style += "outline: 0;";
-            style += `padding: 2px 2px 2px ${$Math.max(3, textFormat.leftMargin || 0)}px;`;
-            style += "margin: 0;";
-            style += "appearance: none;";
-            style += "resize: none;";
-            style += "overflow: hidden;";
-            style += `z-index: ${0x7fffffff};`;
-            style += "vertical-align: top;";
-            this._$textarea.setAttribute("style", style);
-            // add blur event
-            this._$textarea.addEventListener(`${$PREFIX}_blur`, (event) => {
-                // set new text
-                const element = event.target;
-                let value = element.value;
-                if (value && this._$restrict) {
-                    let pattern = this._$restrict;
-                    if (pattern[0] !== "[") {
-                        pattern = "[" + pattern;
-                    }
-                    if (pattern[pattern.length - 1] !== "]") {
-                        pattern += "]";
-                    }
-                    const found = value.match(new $RegExp(pattern, "gm"));
-                    value = found ? found.join("") : "";
-                }
-                const player = $currentPlayer();
-                const div = $document.getElementById(player.contentElementId);
-                if (div) {
-                    const element = $document.getElementById(`${$PREFIX}_TextField_${this._$instanceId}`);
-                    if (element) {
-                        element.remove();
-                    }
-                }
-                this.text = value;
-                this._$focus = false;
-                this._$textAreaActive = false;
-                this._$doChanged();
-                $doUpdated();
-            });
-            // input event
-            this._$textarea.addEventListener("input", (event) => {
-                // set new text
-                const element = event.target;
-                const player = $currentPlayer();
-                let value = element.value;
-                // SafariではInputEvent.isComposingがundefined
-                if (this._$restrict && !this._$isComposing && value) {
-                    let pattern = this._$restrict;
-                    if (pattern[0] !== "[") {
-                        pattern = "[" + pattern;
-                    }
-                    if (pattern[pattern.length - 1] !== "]") {
-                        pattern += "]";
-                    }
-                    const found = value.match(new $RegExp(pattern, "gm"));
-                    value = found ? found.join("") : "";
-                }
-                if (!this._$isComposing && this.text !== value) {
-                    // update
-                    this.text = value;
-                    element.value = value;
-                    if (this.willTrigger(Next2DEvent.CHANGE)) {
-                        this.dispatchEvent(new Next2DEvent(Next2DEvent.CHANGE, true));
-                    }
-                    // setup
-                    // const element = this._$textarea;
-                    const matrix = this._$transform.concatenatedMatrix;
-                    const bounds = this._$getBounds(null);
-                    element.style.left = `${$Math.floor((matrix.tx + bounds.xMin + player.x / player._$scale / $devicePixelRatio) * player._$scale)}px`;
-                    element.style.top = `${$Math.floor((matrix.ty + bounds.yMin + player.y / player._$scale / $devicePixelRatio) * player._$scale)}px`;
-                    element.style.width = `${$Math.ceil((this.width - 1) * player._$scale)}px`;
-                    element.style.height = `${$Math.ceil((this.height - 1) * player._$scale)}px`;
-                }
-            });
-            // IME入力開始時のevent
-            this._$textarea.addEventListener("compositionstart", () => {
-                this._$isComposing = true;
-            });
-            // IME入力確定時のevent
-            this._$textarea.addEventListener("compositionend", (event) => {
-                this._$isComposing = false;
-                const element = event.target;
-                let value = element.value;
-                if (!this._$restrict || !value) {
-                    return;
-                }
-                let pattern = this._$restrict;
-                if (pattern[0] !== "[") {
-                    pattern = "[" + pattern;
-                }
-                if (pattern[pattern.length - 1] !== "]") {
-                    pattern += "]";
-                }
-                const found = value.match(new $RegExp(pattern, "gm"));
-                value = found ? found.join("") : "";
-                // update
-                this.text = value;
-                element.value = value;
-            });
-            // add click event
-            this._$textarea.addEventListener("click", () => {
-                if (this.willTrigger(Next2DMouseEvent.CLICK)) {
-                    this.dispatchEvent(new Next2DMouseEvent(Next2DMouseEvent.CLICK));
-                }
-            });
-            // add mousewheel event
-            this._$textarea.addEventListener($MOUSE_WHEEL, (event) => {
-                this.scrollY += event.deltaY;
-            });
-            // add scroll event
-            this._$textarea.addEventListener($SCROLL, (event) => {
-                const element = event.target;
-                this.scrollY = element.scrollTop;
-            });
-            // down event
-            this._$textarea.addEventListener($TOUCH_START, () => {
-                const player = $currentPlayer();
-                player._$state = "down";
-            });
-            // up event
-            this._$textarea.addEventListener($TOUCH_END, () => {
-                const player = $currentPlayer();
-                player._$state = "up";
-            });
-            // down event
-            this._$textarea.addEventListener($MOUSE_DOWN, () => {
-                const player = $currentPlayer();
-                player._$state = "down";
-            });
-            // up event
-            this._$textarea.addEventListener($MOUSE_UP, () => {
-                const player = $currentPlayer();
-                player._$state = "up";
-            });
-        }
-        // change style
-        const tf = this._$defaultTextFormat;
-        const fontSize = tf.size
-            ? $Math.ceil(tf.size * scale * this._$transform.concatenatedMatrix.d)
-            : 0;
-        this._$textarea.style.fontSize = `${fontSize}px`;
-        this._$textarea.style.fontFamily = tf.font || "Times New Roman";
-        this._$textarea.style.lineHeight = `${(fontSize + $Math.max(0, tf.leading || 0)) / fontSize}em`;
-        if (this._$autoSize !== "none") {
-            this._$textarea.style.textAlign = "center";
-        }
-        else {
-            this._$textarea.style.textAlign = tf.align || "none";
-        }
-        this._$textarea.addEventListener("keydown", (event) => {
-            const element = event.target;
-            let value = element.value;
-            // SafariではInputEvent.isComposingがundefined
-            if (this._$restrict && !this._$isComposing && value) {
-                let pattern = this._$restrict;
-                if (pattern[0] !== "[") {
-                    pattern = "[" + pattern;
-                }
-                if (pattern[pattern.length - 1] !== "]") {
-                    pattern += "]";
-                }
-                const found = value.match(new $RegExp(pattern, "gm"));
-                value = found ? found.join("") : "";
-            }
-            // update
-            if (!this._$isComposing) {
-                this.text = value;
-                element.value = value;
-            }
-            // enter off
-            if (event.code === "Enter" && !this._$multiline) {
-                return false;
-            }
-        });
-        const style = this._$textarea.style;
-        if (this._$border) {
-            style.border = `solid 1px #${this.borderColor.toString(16)}`;
-        }
-        else {
-            style.border = "none";
-        }
-        if (this._$border || this._$background) {
-            style.backgroundColor = `#${this.backgroundColor.toString(16)}`;
-        }
-        else {
-            style.backgroundColor = "transparent";
-        }
-        //reset
-        this._$textarea.maxLength = this._$maxChars ? this._$maxChars : 0x7fffffff;
-    }
     /**
      * @return {void}
      * @method
@@ -1955,7 +2734,6 @@ export class TextField extends InteractiveObject {
             "limitWidth": this.width,
             "limitHeight": this.height,
             "textHeight": this.textHeight,
-            "verticalAlign": this._$verticalAlign,
             "autoSize": this._$autoSize,
             "wordWrap": this._$wordWrap,
             "border": this._$border,
@@ -1997,7 +2775,6 @@ export class TextField extends InteractiveObject {
             return;
         }
         const message = this._$createMessage();
-        message.textAreaActive = this._$textAreaActive;
         const bounds = this._$getBounds(null);
         message.xMin = bounds.xMin;
         message.yMin = bounds.yMin;
@@ -2008,7 +2785,6 @@ export class TextField extends InteractiveObject {
             message.limitWidth = this.width;
             message.limitHeight = this.height;
             message.textHeight = this.textHeight;
-            message.verticalAlign = this._$verticalAlign;
             message.autoSize = this._$autoSize;
             message.wordWrap = this._$wordWrap;
             message.border = this._$border;