diff --git a/index.html b/index.html
index ff28a04f..cd3ba679 100644
--- 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
new file mode 100644
index 00000000..d868a4bf
--- /dev/null
+++ 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;
+};
\ No newline at end of file
diff --git a/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts b/packages/core/src/Canvas/usecase/CanvasPointerDownEventUseCase.ts
index 462e559b..8eecf90b 100644
--- 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
index b23379bc..60e05932 100644
--- 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;
};
\ No newline at end of file
diff --git a/packages/core/src/Next2D/usecase/LoadUseCase.ts b/packages/core/src/Next2D/usecase/LoadUseCase.ts
index ef389ff7..a6f48967 100644
--- 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();
};
\ No newline at end of file
diff --git a/packages/core/src/Player/service/PlayerPointerDownEventService.ts b/packages/core/src/Player/service/PlayerPointerDownEventService.ts
index 0a780701..0eb4253e 100644
--- 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 = (
- page_x: number = 0,
- page_y: number = 0
-): void => {
+export const execute = (): void =>
+{
const displayObject = $hitObject.hit as unknown as D;
@@ -45,15 +41,17 @@ export const execute = (
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
index 6a56379f..aef31f9b 100644
--- 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();
};
\ No newline at end of file
diff --git a/packages/text/src/TextField/usecase/TextFieldBlinkingUseCase.ts b/packages/text/src/TextField/usecase/TextFieldBlinkingUseCase.ts
index 8f60c021..ad9b2c4a 100644
--- 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`;
};
\ No newline at end of file
diff --git a/packages/text/src/TextField/usecase/TextFieldDeleteTextUseCase.ts b/packages/text/src/TextField/usecase/TextFieldDeleteTextUseCase.ts
index 49016f41..fcc6549c 100644
--- 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
index cd0dc744..1bf97683 100644
--- 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
index 4e049d17..5314d630 100644
--- 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
};
\ No newline at end of file
diff --git a/packages/text/src/index.ts b/packages/text/src/index.ts
index 51f84d87..154c93ad 100644
--- 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";
\ No newline at end of file
diff --git a/packages/text/src/interface/IElementPosition.ts b/packages/text/src/interface/IElementPosition.ts
new file mode 100644
index 00000000..1657f32b
--- /dev/null
+++ b/packages/text/src/interface/IElementPosition.ts
@@ -0,0 +1,5 @@
+export interface IElementPosition
+{
+ x: number;
+ y: number;
+}
\ No newline at end of file