#154 TextFieldのキーボード移動を実装(WIP)

Next2D · Nov 28, 2024 · e7e68b9 · e7e68b9
1 parent 3d57193
commit e7e68b9
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
         textFiled.type = "input";
         textFiled.multiline = true;
         // textFiled.wordWrap = true;
-        textFiled.text = "Hello Next2D\nTest Mode On Test Mode On Test Mode On Test Mode On Test Mode On Test Mode On Test Mode On\nText Field\nText Field\n\n\n\n\nTest Mode On Test Mode On Test Mode On Test Mode On Test Mode On";
+        textFiled.text = "Hello Next2D\nTest Mode On Test Mode On Test Mode On Test Mode On Test Mode On Test Mode On Test Mode On\nText Field\nText Field\n\n\n\nText Field\nTest Mode On Test Mode On Test Mode On Test Mode On Test Mode On";
 
         const shape = sprite.addChild(new Shape());
         shape

diff --git a/packages/text/src/TextArea/service/TextAreaMovePositionService.ts b/packages/text/src/TextArea/service/TextAreaMovePositionService.ts
@@ -0,0 +1,54 @@
+import type { TextField } from "../../TextField";
+import { Point } from "@next2d/geom";
+import { $stage } from "@next2d/display";
+import {
+    $textArea,
+    $mainCanvasPosition
+} from "../../TextUtil";
+
+/**
+ * @type {number}
+ * @private
+ */
+const $devicePixelRatio: number = 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: TextField): void =>
+{
+    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`;
+};
diff --git a/packages/text/src/TextField.ts b/packages/text/src/TextField.ts
@@ -954,7 +954,17 @@ export class TextField extends InteractiveObject
     set text (text: string)
     {
         text = `${text}`;
-        if (text !== "" && text === this._$text) {
+        if (text === "") {
+            if (this.scrollX) {
+                this.scrollX = 0;
+            }
+            if (this.scrollY) {
+                this.scrollY = 0;
+            }
+            return ;
+        }
+
+        if (text === this._$text) {
             return ;
         }
 

diff --git a/packages/text/src/TextField/usecase/TextFieldArrowUpUseCase.ts b/packages/text/src/TextField/usecase/TextFieldArrowUpUseCase.ts
@@ -121,7 +121,7 @@ export const execute = (text_field: TextField, shift_key: boolean): void =>
                 }
             }
 
-            if (startLine > textObject.line) {
+            if (startLine >= textObject.line) {
                 if (text_field.xScrollShape.hasLocalVariable("job")) {
                     text_field.xScrollShape.deleteLocalVariable("job");
                 }

diff --git a/packages/text/src/TextField/usecase/TextFieldBlinkingUseCase.ts b/packages/text/src/TextField/usecase/TextFieldBlinkingUseCase.ts
@@ -1,18 +1,7 @@
-import { Point } from "@next2d/geom";
-import { $stage } from "@next2d/display";
 import type { TextField } from "../../TextField";
 import { execute as textFieldApplyChangesService } from "../service/TextFieldApplyChangesService";
-import {
-    $setBlinkingTimerId,
-    $textArea,
-    $mainCanvasPosition
-} from "../../TextUtil";
-
-/**
- * @type {number}
- * @private
- */
-const $devicePixelRatio: number = window.devicePixelRatio;
+import { execute as textAreaMovePositionService } from "../../TextArea/service/TextAreaMovePositionService";
+import { $setBlinkingTimerId } from "../../TextUtil";
 
 /**
  * @description テキストの点滅を実行します。
@@ -32,32 +21,6 @@ export const execute = (text_field: TextField): void =>
     // next timer
     $setBlinkingTimerId(setTimeout(() => execute(text_field), 500));
 
-    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`;
+    // TextArea move position
+    textAreaMovePositionService(text_field);
 };
diff --git a/packages/text/src/TextField/usecase/TextFieldResetUseCase.ts b/packages/text/src/TextField/usecase/TextFieldResetUseCase.ts
@@ -15,8 +15,6 @@ import { execute as textFieldApplyChangesService } from "../service/TextFieldApp
 export const execute = (text_field: TextField): void =>
 {
     text_field.$textData = null;
-    text_field.$scrollX  = 0;
-    text_field.$scrollY  = 0;
 
     textFieldApplyChangesService(text_field);