From 2fad621ace9828874c1345bb24dbfc6373886833 Mon Sep 17 00:00:00 2001 From: ienaga Date: Fri, 20 Oct 2023 07:58:48 +0900 Subject: [PATCH] =?UTF-8?q?#147=20=E3=83=84=E3=83=BC=E3=83=AB=E3=82=A8?= =?UTF-8?q?=E3=83=AA=E3=82=A2=E3=81=AE=E7=A7=BB=E5=8B=95=E5=87=A6=E7=90=86?= =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/config/Config.ts | 11 +++++- .../interface/UserToolAreaStateObjectImpl.ts | 6 +++ .../ToolAreaActiveMouseUpService.test.ts | 18 +++++++++ .../service/ToolAreaActiveMouseUpService.ts | 9 +++++ .../usecase/ToolAreaActiveMoveUseCase.ts | 11 ++++++ .../ToolAreaInitializeRegisterEventUseCase.ts | 17 +++++---- ...ToolAreaInitializeSetActiveStateUseCase.ts | 31 +++++++++++++++ .../usecase/ToolAreaInitializeUseCase.ts | 12 +++++- .../usecase/ToolAreaMouseDownEventUseCase.ts | 38 +++++++++++++------ src/js/tool/application/ToolUtil.test.ts | 13 ++++++- src/js/tool/application/ToolUtil.ts | 34 +++++++++++++++++ .../UserToolAreaStateGetService.test.ts | 13 +++++++ .../service/UserToolAreaStateGetService.ts | 25 ++++++++++++ .../UserToolAreaStateUpdateService.test.ts | 30 +++++++++++++++ .../service/UserToolAreaStateUpdateService.ts | 16 ++++++++ 15 files changed, 262 insertions(+), 22 deletions(-) create mode 100644 src/js/interface/UserToolAreaStateObjectImpl.ts create mode 100644 src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.test.ts create mode 100644 src/js/tool/application/ToolArea/usecase/ToolAreaInitializeSetActiveStateUseCase.ts create mode 100644 src/js/user/application/service/UserToolAreaStateGetService.test.ts create mode 100644 src/js/user/application/service/UserToolAreaStateGetService.ts create mode 100644 src/js/user/application/service/UserToolAreaStateUpdateService.test.ts create mode 100644 src/js/user/application/service/UserToolAreaStateUpdateService.ts diff --git a/src/js/config/Config.ts b/src/js/config/Config.ts index 3a63c81e..43f2a4dd 100644 --- a/src/js/config/Config.ts +++ b/src/js/config/Config.ts @@ -32,4 +32,13 @@ export const $USER_LANGUAGE_SETTING_KEY: string = `${$PREFIX}@language-setting`; * @type {string} * @constant */ -export const $USER_SHORTCUT_SETTING_KEY: string = `${$PREFIX}@shortcut`; \ No newline at end of file +export const $USER_SHORTCUT_SETTING_KEY: string = `${$PREFIX}@shortcut`; + +/** + * @description ツールエリアの移動状態の保存キー + * Key to save tool area movement status + * + * @type {string} + * @constant + */ +export const $USER_TOOL_AREA_STATE_KEY: string = `${$PREFIX}@tool-area`; \ No newline at end of file diff --git a/src/js/interface/UserToolAreaStateObjectImpl.ts b/src/js/interface/UserToolAreaStateObjectImpl.ts new file mode 100644 index 00000000..d24cdf68 --- /dev/null +++ b/src/js/interface/UserToolAreaStateObjectImpl.ts @@ -0,0 +1,6 @@ +export interface UserToolAreaStateObjectImpl +{ + state: "fixed" | "move"; + offsetLeft: number; + offsetTop: number; +} \ No newline at end of file diff --git a/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.test.ts b/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.test.ts new file mode 100644 index 00000000..953198f4 --- /dev/null +++ b/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.test.ts @@ -0,0 +1,18 @@ +import { $setCursor } from "../../../../util/Global"; +import { execute } from "./ToolAreaActiveMouseUpService"; + +describe("ToolAreaActiveMouseUpServiceTest", () => +{ + test("execute test", async () => + { + $setCursor("move"); + expect(document.documentElement.style.getPropertyValue("--tool-cursor")).toBe("move"); + + const mockEvent = { + "stopPropagation": () => { return null } + }; + + execute(mockEvent); + expect(document.documentElement.style.getPropertyValue("--tool-cursor")).toBe("auto"); + }); +}); \ No newline at end of file diff --git a/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.ts b/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.ts index 1452dcbb..b0489621 100644 --- a/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.ts +++ b/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.ts @@ -1,6 +1,8 @@ +import { $TOOL_PREFIX } from "../../../../config/ToolConfig"; import { $setCursor } from "../../../../util/Global"; import { EventType } from "../../../domain/event/EventType"; import { execute as toolAreaActiveMoveService } from "./ToolAreaActiveMoveService"; +import { execute as userToolAreaStateUpdateService } from "../../../../user/application/service/UserToolAreaStateUpdateService"; /** * @description 選択中のツールの移動イベント関数 @@ -21,4 +23,11 @@ export const execute = (event: PointerEvent): void => window.removeEventListener(EventType.MOUSE_UP, execute); $setCursor("auto"); + + // 移動状態をLocalStorageに保存 + userToolAreaStateUpdateService({ + "state": "move", + "offsetLeft": event.pageX - event.offsetX, + "offsetTop": event.pageY - event.offsetY + }); }; \ No newline at end of file diff --git a/src/js/tool/application/ToolArea/usecase/ToolAreaActiveMoveUseCase.ts b/src/js/tool/application/ToolArea/usecase/ToolAreaActiveMoveUseCase.ts index a6c2191d..1404eb23 100644 --- a/src/js/tool/application/ToolArea/usecase/ToolAreaActiveMoveUseCase.ts +++ b/src/js/tool/application/ToolArea/usecase/ToolAreaActiveMoveUseCase.ts @@ -4,7 +4,9 @@ import { execute as toolAreaRegisterWindowMoveEventService } from "../service/To import { execute as toolAreaChageStyleToActiveService } from "../service/ToolAreaChageStyleToActiveService"; import { $getMouseState, + $getStandbyMoveState, $getToolAreaState, + $setStandbyMoveState, $setToolAreaState } from "../../ToolUtil"; @@ -18,6 +20,15 @@ import { */ export const execute = (): void => { + if (!$getStandbyMoveState()) { + + // カーソルを初期値に変更 + $setCursor("auto"); + + return ; + } + + $setStandbyMoveState(false); if ($getMouseState() === "down") { const element: HTMLElement | null = document diff --git a/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeRegisterEventUseCase.ts b/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeRegisterEventUseCase.ts index d88ae5df..bb925065 100644 --- a/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeRegisterEventUseCase.ts +++ b/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeRegisterEventUseCase.ts @@ -1,5 +1,5 @@ -import { $TOOL_PREFIX } from "../../../../config/ToolConfig"; import { EventType } from "../../../domain/event/EventType"; +import { $setStandbyMoveState } from "../../ToolUtil"; import { execute as toolAreaMouseMoveEventService } from "../service/ToolAreaMouseMoveEventService"; import { execute as toolAreaMouseDownEventUseCase } from "./ToolAreaMouseDownEventUseCase"; import { execute as toolAreaMouseUpEventUseCase } from "./ToolAreaMouseUpEventUseCase"; @@ -8,17 +8,13 @@ import { execute as toolAreaMouseUpEventUseCase } from "./ToolAreaMouseUpEventUs * @description ツールエリアの初期起動時のイベント登録 * Registration of events at initial startup of the tool area * + * @param {HTMLElement} element * @return {void} * @method * @public */ -export const execute = (): void => +export const execute = (element: HTMLElement): void => { - const element: HTMLElement | null = document.getElementById($TOOL_PREFIX); - if (!element) { - return ; - } - // ツールエリア内でのマウス移動の処理 element.addEventListener(EventType.MOUSE_DOWN, (): void => { @@ -36,4 +32,11 @@ export const execute = (): void => { toolAreaMouseUpEventUseCase(event); }); + + // ツールエリア内でのマウスアップ処理 + element.addEventListener(EventType.MOUSE_OUT, (event: PointerEvent): void => + { + event.stopPropagation(); + $setStandbyMoveState(false); + }); }; \ No newline at end of file diff --git a/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeSetActiveStateUseCase.ts b/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeSetActiveStateUseCase.ts new file mode 100644 index 00000000..e4641ec0 --- /dev/null +++ b/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeSetActiveStateUseCase.ts @@ -0,0 +1,31 @@ +import { execute as userToolAreaStateGetService } from "../../../../user/application/service/UserToolAreaStateGetService"; +import { execute as toolAreaChageStyleToActiveService } from "../service/ToolAreaChageStyleToActiveService"; +import { UserToolAreaStateObjectImpl } from "../../../../interface/UserToolAreaStateObjectImpl"; +import { $setToolAreaState } from "../../ToolUtil"; + +/** + * @description ツールエリアの初期起動時に前回の移動状態をセット + * Set previous move state at initial startup of tool area + * + * @param {HTMLElement} element + * @return {void} + * @method + * @public + */ +export const execute = (element: HTMLElement): void => +{ + // 移動していれば移動位置にElementを移動 + const UserAreaToolState: UserToolAreaStateObjectImpl = userToolAreaStateGetService(); + if (UserAreaToolState.state === "move") { + + // ツールエリアの状態を移動状態に更新 + $setToolAreaState("move"); + + // ツールエリアのstyleを移動用に更新 + toolAreaChageStyleToActiveService(element); + + // Elementを移動位置にセット + element.style.left = `${UserAreaToolState.offsetLeft}px`; + element.style.top = `${UserAreaToolState.offsetTop}px`; + } +}; \ No newline at end of file diff --git a/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeUseCase.ts b/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeUseCase.ts index 07e46c4f..b50ce32f 100644 --- a/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeUseCase.ts +++ b/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeUseCase.ts @@ -1,5 +1,7 @@ import { execute as toolAreaInitializeRegisterEventUseCase } from "./ToolAreaInitializeRegisterEventUseCase"; +import { execute as toolAreaInitializeSetActiveStateUseCase } from "./ToolAreaInitializeSetActiveStateUseCase"; import { execute as toolAreaInitializeBootService } from "../service/ToolAreaInitializeBootService"; +import { $TOOL_PREFIX } from "../../../../config/ToolConfig"; /** * @description ツールエリアの初期起動時のユースケース @@ -11,8 +13,14 @@ import { execute as toolAreaInitializeBootService } from "../service/ToolAreaIni */ export const execute = (): Promise => { - // 初期起動時のイベント登録処理 - toolAreaInitializeRegisterEventUseCase(); + const element: HTMLElement | null = document.getElementById($TOOL_PREFIX); + if (element) { + // 初期起動時のイベント登録処理 + toolAreaInitializeRegisterEventUseCase(element); + + // 初期起動時に保存データから移動状態を再構成 + toolAreaInitializeSetActiveStateUseCase(element); + } // 各種ツールクラスを起動 return toolAreaInitializeBootService(); diff --git a/src/js/tool/application/ToolArea/usecase/ToolAreaMouseDownEventUseCase.ts b/src/js/tool/application/ToolArea/usecase/ToolAreaMouseDownEventUseCase.ts index 2479b20c..c8ec9c2e 100644 --- a/src/js/tool/application/ToolArea/usecase/ToolAreaMouseDownEventUseCase.ts +++ b/src/js/tool/application/ToolArea/usecase/ToolAreaMouseDownEventUseCase.ts @@ -1,8 +1,9 @@ import { $allHide } from "../../../../menu/application/MenuUtil"; -import { $getToolAreaState, $setMouseState, $setToolAreaState } from "../../ToolUtil"; +import { $getToolAreaState, $setMouseState, $setStandbyMoveState, $setToolAreaState } from "../../ToolUtil"; import { execute as toolAreaActiveMoveUseCase } from "../usecase/ToolAreaActiveMoveUseCase"; import { execute as toolAreaChageStyleToInactiveService } from "../service/ToolAreaChageStyleToInactiveService"; import { execute as userAllFunctionStateService } from "../../../../user/application/service/UserAllFunctionStateService"; +import { execute as userToolAreaStateUpdateService } from "../../../../user/application/service/UserToolAreaStateUpdateService"; import { $TOOL_PREFIX } from "../../../../config/ToolConfig"; /** @@ -45,6 +46,8 @@ export const execute = (): void => } if (!wait) { + + // 初回のタップであればダブルタップを待機モードに変更 wait = true; // ダブルタップ有効期限をセット @@ -53,7 +56,10 @@ export const execute = (): void => wait = false; }, 300); - // ツールエリアを長押しで移動モードを起動 + // 長押し待機モードをonにする + $setStandbyMoveState(true); + + // ツールエリアの移動判定関数をタイマーにセット activeTimerId = setTimeout(() => { toolAreaActiveMoveUseCase(); @@ -64,29 +70,39 @@ export const execute = (): void => // 長押し判定を中止 clearTimeout(activeTimerId); + // 長押し待機モードをoffにする + $setStandbyMoveState(false); + // ツールエリアが固定位置にあれば終了 if ($getToolAreaState() === "fixed") { return ; } - const element: HTMLElement | null = document - .getElementById($TOOL_PREFIX); - - if (!element) { - return ; - } + // 移動状態を保存 + userToolAreaStateUpdateService({ + "state": "fixed", + "offsetLeft": 0, + "offsetTop": 0 + }); // ダブルタップを終了 wait = false; - // ツールエリアのstyleを固定位置に移動 - toolAreaChageStyleToInactiveService(element); - // ツールエリアの状態を固定位置に更新 $setToolAreaState("fixed"); // 強制的に固定位置に移動させるとマウスアップイベントが取得できない為、ここでアップモードに更新 $setMouseState("up"); + + const element: HTMLElement | null = document + .getElementById($TOOL_PREFIX); + + if (!element) { + return ; + } + + // ツールエリアのstyleを固定位置に移動 + toolAreaChageStyleToInactiveService(element); } }; \ No newline at end of file diff --git a/src/js/tool/application/ToolUtil.test.ts b/src/js/tool/application/ToolUtil.test.ts index 119c102f..2cd5b092 100644 --- a/src/js/tool/application/ToolUtil.test.ts +++ b/src/js/tool/application/ToolUtil.test.ts @@ -5,7 +5,9 @@ import { $registerDefaultTool, $getDefaultTool, $getMouseState, - $setMouseState + $setMouseState, + $getStandbyMoveState, + $setStandbyMoveState } from "./ToolUtil"; describe("ToolTest", () => @@ -81,4 +83,13 @@ describe("ToolTest", () => $setMouseState("up"); expect($getMouseState()).toBe("up"); }); + + test("$getStandbyMoveState and $setStandbyMoveState test", () => + { + expect($getStandbyMoveState()).toBe(false); + $setStandbyMoveState(true); + expect($getStandbyMoveState()).toBe(true); + $setStandbyMoveState(false); + expect($getStandbyMoveState()).toBe(false); + }); }); \ No newline at end of file diff --git a/src/js/tool/application/ToolUtil.ts b/src/js/tool/application/ToolUtil.ts index 80631cca..3a456933 100644 --- a/src/js/tool/application/ToolUtil.ts +++ b/src/js/tool/application/ToolUtil.ts @@ -147,4 +147,38 @@ export const $getToolAreaState = (): "move" | "fixed" => export const $setToolAreaState = (state: "move" | "fixed"): void => { $toolAreaState = state; +}; + +/** + * @description ツールエリアの移動待機状態 + * Tool area in standby for movement + * + * @private + */ +let $standbyMove: boolean = false; + +/** + * @description ツールエリアの移動待機状態を取得 + * Obtains the move standby status of the tool area + * + * @return {boolean} + * @method + * @public + */ +export const $getStandbyMoveState = (): boolean => +{ + return $standbyMove; +}; + +/** + * @description ツールエリアの移動待機状態を更新 + * Update tool area move standby status + * + * @return {boolean} + * @method + * @public + */ +export const $setStandbyMoveState = (state: boolean): void => +{ + $standbyMove = state; }; \ No newline at end of file diff --git a/src/js/user/application/service/UserToolAreaStateGetService.test.ts b/src/js/user/application/service/UserToolAreaStateGetService.test.ts new file mode 100644 index 00000000..c3808c16 --- /dev/null +++ b/src/js/user/application/service/UserToolAreaStateGetService.test.ts @@ -0,0 +1,13 @@ +import { UserToolAreaStateObjectImpl } from "../../../interface/UserToolAreaStateObjectImpl"; +import { execute } from "./UserToolAreaStateGetService"; + +describe("UserToolAreaStateGetServiceTest", () => +{ + test("execute test", () => + { + const object: UserToolAreaStateObjectImpl = execute(); + expect(object.state).toBe("fixed"); + expect(object.offsetLeft).toBe(0); + expect(object.offsetTop).toBe(0); + }); +}); \ No newline at end of file diff --git a/src/js/user/application/service/UserToolAreaStateGetService.ts b/src/js/user/application/service/UserToolAreaStateGetService.ts new file mode 100644 index 00000000..f58acc11 --- /dev/null +++ b/src/js/user/application/service/UserToolAreaStateGetService.ts @@ -0,0 +1,25 @@ +import { $USER_TOOL_AREA_STATE_KEY } from "../../../config/Config"; +import { UserToolAreaStateObjectImpl } from "../../../interface/UserToolAreaStateObjectImpl"; + +/** + * @description ツールエリアの移動状態をLocalStorageから取得 + * Get tool area movement status from LocalStorage + * + * @return {object} + * @method + * @public + */ +export const execute = (): UserToolAreaStateObjectImpl => +{ + const json: string | null = localStorage.getItem($USER_TOOL_AREA_STATE_KEY); + + if (json) { + return JSON.parse(json) as UserToolAreaStateObjectImpl; + } + + return { + "state": "fixed", + "offsetLeft": 0, + "offsetTop": 0 + }; +}; \ No newline at end of file diff --git a/src/js/user/application/service/UserToolAreaStateUpdateService.test.ts b/src/js/user/application/service/UserToolAreaStateUpdateService.test.ts new file mode 100644 index 00000000..a135bdd7 --- /dev/null +++ b/src/js/user/application/service/UserToolAreaStateUpdateService.test.ts @@ -0,0 +1,30 @@ +import { execute } from "./UserToolAreaStateUpdateService"; +import { execute as userToolAreaStateGetService } from "./UserToolAreaStateGetService"; +import { UserToolAreaStateObjectImpl } from "../../../interface/UserToolAreaStateObjectImpl"; + +describe("UserToolAreaStateUpdateServiceTest", () => +{ + test("execute test", () => + { + const mock: UserToolAreaStateObjectImpl = { + "state": "fixed", + "offsetLeft": 0, + "offsetTop": 0 + }; + + expect(mock.state).toBe("fixed"); + expect(mock.offsetLeft).toBe(0); + expect(mock.offsetTop).toBe(0); + + mock.state = "move"; + mock.offsetLeft = 10; + mock.offsetTop = 20; + + execute(mock); + + const object: UserToolAreaStateObjectImpl = userToolAreaStateGetService(); + expect(object.state).toBe("move"); + expect(object.offsetLeft).toBe(10); + expect(object.offsetTop).toBe(20); + }); +}); \ No newline at end of file diff --git a/src/js/user/application/service/UserToolAreaStateUpdateService.ts b/src/js/user/application/service/UserToolAreaStateUpdateService.ts new file mode 100644 index 00000000..767e3270 --- /dev/null +++ b/src/js/user/application/service/UserToolAreaStateUpdateService.ts @@ -0,0 +1,16 @@ +import { $USER_TOOL_AREA_STATE_KEY } from "../../../config/Config"; +import { UserToolAreaStateObjectImpl } from "../../../interface/UserToolAreaStateObjectImpl"; + +/** + * @description ツールエリアの移動状態をLocalStorageに保存する + * Save the movement state of the tool area to LocalStorage + * + * @param {object} object + * @return {void} + * @method + * @public + */ +export const execute = (object: UserToolAreaStateObjectImpl): void => +{ + localStorage.setItem($USER_TOOL_AREA_STATE_KEY, JSON.stringify(object)); +}; \ No newline at end of file