#147 ツールエリアの移動処理を実装

Next2D · Oct 19, 2023 · 2fad621 · 2fad621
1 parent 370b9ae
commit 2fad621
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 22 deletions.
diff --git 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`;
+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`;
diff --git a/src/js/interface/UserToolAreaStateObjectImpl.ts b/src/js/interface/UserToolAreaStateObjectImpl.ts
@@ -0,0 +1,6 @@
+export interface UserToolAreaStateObjectImpl
+{
+    state: "fixed" | "move";
+    offsetLeft: number;
+    offsetTop: number;
+}
diff --git a/src/js/tool/application/ToolArea/service/ToolAreaActiveMouseUpService.test.ts 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");
+    });
+});
diff --git 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
+    });
 };
diff --git 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
@@ -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);
+    });
 };
diff --git a/src/js/tool/application/ToolArea/usecase/ToolAreaInitializeSetActiveStateUseCase.ts 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`;
+    }
+};
diff --git 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<void[]> =>
 {
-    // 初期起動時のイベント登録処理
-    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
@@ -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);
     }
 
 };
diff --git 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);
+    });
 });
diff --git 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;
 };
diff --git a/src/js/user/application/service/UserToolAreaStateGetService.test.ts 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);
+    });
+});
diff --git a/src/js/user/application/service/UserToolAreaStateGetService.ts 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
+    };
+};