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