#154 TextFieldのinput機能を実装(WIP)

Next2D · Nov 24, 2024 · 947cdd3 · 947cdd3
1 parent 2821fce
commit 947cdd3
Show file tree

Hide file tree

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

diff --git a/packages/core/src/Canvas/service/CanvasSetPositionService.ts b/packages/core/src/Canvas/service/CanvasSetPositionService.ts
@@ -0,0 +1,36 @@
+import { $mainCanvasPosition } from "@next2d/text";
+import { $stage } from "@next2d/display";
+import { $getMainElement } from "../../CoreUtil";
+
+/**
+ * @type {number}
+ * @private
+ */
+const $devicePixelRatio: number = window.devicePixelRatio || 1;
+
+/**
+ * @description メインキャンバスの位置を設定します。
+ *              Set the position of the main canvas.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (): void =>
+{
+    $mainCanvasPosition.x = 0;
+    $mainCanvasPosition.y = 0;
+
+    const element: HTMLDivElement = $getMainElement();
+    if (!element) {
+        return ;
+    }
+
+    const canvas = element.children[0] as HTMLCanvasElement;
+    if (!canvas || canvas.localName !== "canvas") {
+        return ;
+    }
+
+    $mainCanvasPosition.x = (element.clientWidth  - $stage.rendererWidth  / $devicePixelRatio) / 2;
+    $mainCanvasPosition.y = (element.clientHeight - $stage.rendererHeight / $devicePixelRatio) / 2;
+};
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts
@@ -56,10 +56,7 @@ export const execute = (event: PointerEvent): void =>
             $wait = false;
         }, 300);
 
-        playerPointerDownEventService(
-            event.pageX,
-            event.pageY
-        );
+        playerPointerDownEventService();
 
     } else {
 

diff --git a/packages/core/src/Next2D/usecase/CreateRootMovieClipUseCase.ts b/packages/core/src/Next2D/usecase/CreateRootMovieClipUseCase.ts
@@ -4,6 +4,7 @@ import { execute as playerRemoveLoadingElementService } from "../../Player/servi
 import { execute as playerAppendElementService } from "../../Player/service/PlayerAppendElementService";
 import { execute as playerReadyCompleteUseCase } from "../../Player/usecase/PlayerReadyCompleteUseCase";
 import { execute as playerBootUseCase } from "../../Player/usecase/PlayerBootUseCase";
+import { execute as canvasSetPositionService } from "../../Canvas/service/CanvasSetPositionService";
 import {
     Sprite,
     $stage
@@ -50,5 +51,8 @@ export const execute = async (
     // append canvas
     playerAppendElementService();
 
+    // set position
+    canvasSetPositionService();
+
     return root;
 };
diff --git a/packages/core/src/Next2D/usecase/LoadUseCase.ts b/packages/core/src/Next2D/usecase/LoadUseCase.ts
@@ -9,6 +9,7 @@ import { execute as playerRemoveLoadingElementService } from "../../Player/servi
 import { execute as playerAppendCanvasElementService } from "../../Player/service/PlayerAppendElementService";
 import { execute as playerReadyCompleteUseCase } from "../../Player/usecase/PlayerReadyCompleteUseCase";
 import { execute as playerBootUseCase } from "../../Player/usecase/PlayerBootUseCase";
+import { execute as canvasSetPositionService } from "../../Canvas/service/CanvasSetPositionService";
 import {
     Loader,
     $stage
@@ -83,4 +84,7 @@ export const execute = async (url: string, options: IPlayerOptions | null = null
 
     // append canvas
     playerAppendCanvasElementService();
+
+    // set position
+    canvasSetPositionService();
 };
diff --git a/packages/core/src/Player/service/PlayerPointerDownEventService.ts b/packages/core/src/Player/service/PlayerPointerDownEventService.ts
@@ -16,16 +16,12 @@ import {
  * @description ポインターダウンイベントを処理します。
  *              Processes the pointer down event.
  *
- * @param  {number} page_x
- * @param  {number} page_y
  * @return {void}
  * @method
  * @protected
  */
-export const execute = <D extends DisplayObject> (
-    page_x: number = 0,
-    page_y: number = 0
-): void => {
+export const execute = <D extends DisplayObject> (): void =>
+{
 
     const displayObject = $hitObject.hit as unknown as D;
 
@@ -45,15 +41,17 @@ export const execute = <D extends DisplayObject> (
             if (!(displayObject as unknown as TextField).focus) {
                 (displayObject as unknown as TextField).focus = true;
                 $setSelectedTextField(displayObject as unknown as TextField);
+            } else {
+                setTimeout((): void =>
+                {
+                    $textArea.focus();
+                }, 300);
             }
 
             (displayObject as unknown as TextField).setFocusIndex(
                 $hitObject.x - $hitMatrix[4],
                 $hitObject.y - $hitMatrix[5]
             );
-
-            $textArea.style.left = `${page_x}px`;
-            $textArea.style.top  = `${page_y}px`;
         }
 
         // ヒットしたDisplayObjectポインターダウンイベントを発火します。

diff --git a/packages/core/src/Player/usecase/PlayerResizeEventUseCase.ts b/packages/core/src/Player/usecase/PlayerResizeEventUseCase.ts
@@ -1,12 +1,13 @@
 import { $player } from "../../Player";
 import { $stage } from "@next2d/display";
 import { execute as playerResizePostMessageService } from "../service/PlayerResizePostMessageService";
+import { execute as canvasSetPositionService } from "../../Canvas/service/CanvasSetPositionService";
+import { $cacheStore } from "@next2d/cache";
 import {
     $PREFIX,
     $getMainElement,
     $devicePixelRatio
 } from "../../CoreUtil";
-import { $cacheStore } from "@next2d/cache";
 
 /**
  * @description 画面リサイズ時にcanvasのリサイズを行う
@@ -83,4 +84,7 @@ export const execute = (): void =>
             new Event(`${$PREFIX}_blur`)
         );
     }
+
+    // set canvas position
+    canvasSetPositionService();
 };
diff --git a/packages/text/src/TextField/usecase/TextFieldBlinkingUseCase.ts b/packages/text/src/TextField/usecase/TextFieldBlinkingUseCase.ts
@@ -1,12 +1,24 @@
+import { Point } from "@next2d/geom";
+import { $stage } from "@next2d/display";
 import type { TextField } from "../../TextField";
-import { $setBlinkingTimerId } from "../../TextUtil";
 import { execute as textFieldApplyChangesService } from "../service/TextFieldApplyChangesService";
+import {
+    $setBlinkingTimerId,
+    $textArea,
+    $mainCanvasPosition
+} from "../../TextUtil";
+
+/**
+ * @type {number}
+ * @private
+ */
+const $devicePixelRatio: number = window.devicePixelRatio;
 
 /**
  * @description テキストの点滅を実行します。
  *              Execute text blinking.
  *
- * @param {TextField} text_field
+ * @param  {TextField} text_field
  * @return {void}
  * @method
  * @protected
@@ -19,4 +31,33 @@ 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`;
 };
diff --git a/packages/text/src/TextField/usecase/TextFieldDeleteTextUseCase.ts b/packages/text/src/TextField/usecase/TextFieldDeleteTextUseCase.ts
@@ -80,7 +80,7 @@ export const execute = (text_field: TextField): void =>
     if (!newText) {
         // reset
         text_field.text = "";
-        text_field.focusIndex = 0;
+        text_field.focusIndex = 1;
     } else {
 
         const beforeTextWidth  = text_field.textWidth;

diff --git a/packages/text/src/TextField/usecase/TextFieldInsertTextUseCase.ts b/packages/text/src/TextField/usecase/TextFieldInsertTextUseCase.ts
@@ -28,6 +28,7 @@ export const execute = (text_field: TextField, texts: string): void =>
 
     const textData = textFieldGetTextDataUseCase(text_field);
     if (2 > textData.textTable.length) {
+        text_field.focusIndex = 2;
         text_field.appendText(texts);
         return ;
     }

diff --git a/packages/text/src/TextUtil.ts b/packages/text/src/TextUtil.ts
@@ -1,4 +1,5 @@
 import type { IRGBA } from "./interface/IRGBA";
+import type { IElementPosition } from "./interface/IElementPosition";
 import type { TextField } from "./TextField";
 import { execute as textAreaRegisterEventUseCase } from "./TextArea/usecase/TextAreaRegisterEventUseCase";
 
@@ -54,9 +55,9 @@ style += "position: fixed;";
 style += "top: 0;";
 style += "left: 0;";
 style += "font-size: 16px;";
-// style += "border: 0;";
+style += "border: 0;";
 style += "resize: none;";
-// style += "opacity: 0;";
+style += "opacity: 0;";
 style += "z-index: -1;";
 style += "pointer-events: none;";
 $textArea.setAttribute("style", style);
@@ -208,4 +209,16 @@ export const $getBlinkingTimerId = (): NodeJS.Timeout | void =>
 export const $setBlinkingTimerId = (timer_id: NodeJS.Timeout | void): void =>
 {
     $timerId = timer_id;
+};
+
+/**
+ * @description canvasの位置をセット
+ *              Set the position of the canvas
+ * 
+ * @type {IElementPosition}
+ * @public
+ */
+export const $mainCanvasPosition: IElementPosition = {
+    "x": 0,
+    "y": 0
 };
diff --git a/packages/text/src/index.ts b/packages/text/src/index.ts
@@ -3,5 +3,6 @@ export * from "./TextFormat";
 export {
     $textArea,
     $getSelectedTextField,
-    $setSelectedTextField
+    $setSelectedTextField,
+    $mainCanvasPosition
 } from "./TextUtil";
diff --git a/packages/text/src/interface/IElementPosition.ts b/packages/text/src/interface/IElementPosition.ts
@@ -0,0 +1,5 @@
+export interface IElementPosition
+{
+    x: number;
+    y: number;
+}