#147 非表示レイヤーの処理を実装

src/js/menu/application/service/UserSettingMenuLayerSettingChangeEventService.test.ts

@@ -0,0 +1,33 @@
+import { execute } from "./UserSettingMenuLayerSettingChangeEventService";
+import { execute as userSettingObjectGetService } from "../../../user/service/UserSettingObjectGetService";
+
+describe("UserSettingMenuLayerSettingChangeEventServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        const object1 = userSettingObjectGetService();
+        expect(object1.layer).toBe(false);
+
+        const mock1 = {
+            "stopPropagation": () => { return null },
+            "target": {
+                "value": "1"
+            }
+        };
+        execute(mock1);
+
+        const object2 = userSettingObjectGetService();
+        expect(object2.layer).toBe(true);
+
+        const mock2 = {
+            "stopPropagation": () => { return null },
+            "target": {
+                "value": "0"
+            }
+        };
+        execute(mock2);
+
+        const object3 = userSettingObjectGetService();
+        expect(object3.layer).toBe(false);
+    });
+});

src/js/menu/application/service/UserSettingMenuLayerSettingChangeEventService.ts

@@ -1,12 +1,27 @@
+import type { UserSettingObjectImpl } from "../../../interface/UserSettingObjectImpl";
+import { execute as userSettingObjectGetService } from "../../../user/service/UserSettingObjectGetService";
+import { execute as userSettingObjectUpdateService } from "../../../user/service/UserSettingObjectUpdateService";
+
 /**
- * @description ユーザー設定メニューに配置された各Elementにイベント登録を行う
- *              Register events in each Element placed in the User Settings menu.
+ * @description ユーザー設定メニューの非表示レイヤーの設定情報更新
+ *              Updated setting information for hidden layers in the user settings menu
  *
+ * @param  {Event} event
  * @return {void}
  * @method
  * @public
  */
-export const execute = (): void =>
+export const execute = (event: Event): void =>
 {
-
+    // 親のイベントを中止
+    event.stopPropagation();
+
+    if (event.target) {
+        const userSettingObject: UserSettingObjectImpl = userSettingObjectGetService();
+
+        const element = event.target as HTMLSelectElement;
+        userSettingObject.layer = element.value === "1";
+
+        userSettingObjectUpdateService(userSettingObject);
+    }
 };

src/js/menu/application/service/UserSettingMenuLayerSettingOptionSelectedService.test.ts

@@ -0,0 +1,41 @@
+import { execute } from "./UserSettingMenuLayerSettingOptionSelectedService";
+import { execute as userSettingObjectUpdateService } from "../../../user/service/UserSettingObjectUpdateService";
+
+describe("UserSettingMenuLayerSettingOptionSelectedServiceTest", () =>
+{
+    test("execute test", () =>
+    {
+        const select = document.createElement("select");
+        const option1 = document.createElement("option");
+        select.appendChild(option1);
+
+        const option2 = document.createElement("option");
+        select.appendChild(option2);
+
+        execute(select);
+        expect(option1.selected).toBe(true);
+        expect(option2.selected).toBe(false);
+
+        const mock1 = {
+            "layer": true,
+            "modal": true,
+            "type": "zlib"
+        };
+
+        userSettingObjectUpdateService(mock1);
+        execute(select);
+        expect(option1.selected).toBe(false);
+        expect(option2.selected).toBe(true);
+
+        const mock2 = {
+            "layer": false,
+            "modal": true,
+            "type": "zlib"
+        };
+
+        userSettingObjectUpdateService(mock2);
+        execute(select);
+        expect(option1.selected).toBe(true);
+        expect(option2.selected).toBe(false);
+    });
+});

src/js/menu/application/service/UserSettingMenuLayerSettingOptionSelectedService.ts

@@ -0,0 +1,21 @@
+import { execute as userSettingObjectGetService } from "../../../user/service/UserSettingObjectGetService";
+import { UserSettingObjectImpl } from "../../../interface/UserSettingObjectImpl";
+
+/**
+ * @description 非表示レイヤーの選択状態を保存情報に合わせて表示を切り替える
+ *              Switching the display of the selection state of hidden layers to match the saved information
+ *
+ * @param  {HTMLSelectElement} element
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (element: HTMLSelectElement): void =>
+{
+    const userSettingObject: UserSettingObjectImpl = userSettingObjectGetService();
+
+    const optionElement = element
+        .children[userSettingObject.layer ? 1 : 0] as HTMLOptionElement;
+
+    optionElement.selected = true;
+};

src/js/menu/application/usecase/UserSettingMenuInitializeUseCase.ts

@@ -1,5 +1,5 @@
 import { execute as userSettingMenuUpdateOffsetService } from "../service/UserSettingMenuUpdateOffsetService";
-import { execute as userSettingMenuRegisterEventService } from "../service/UserSettingMenuRegisterEventService";
+import { execute as userSettingMenuLayerSettingRegisterEventUseCase } from "./UserSettingMenuLayerSettingRegisterEventUseCase";
 
 /**
  * @description setTimerのIDを管理
@@ -33,6 +33,8 @@ export const execute = (): void =>
         }, 200);
     });
 
-    // 各種イベントを設定
-    userSettingMenuRegisterEventService();
+    // 非表示レイヤーの設定のユースケースを実行
+    userSettingMenuLayerSettingRegisterEventUseCase();
+
+
 };

src/js/menu/application/usecase/UserSettingMenuLayerSettingRegisterEventUseCase.ts

@@ -0,0 +1,30 @@
+import { $USER_PUBLISH_LAYER_SETTING_ID } from "../../../config/UserSettingConfig";
+import { EventType } from "../../../tool/domain/event/EventType";
+import { execute as userSettingMenuLayerSettingChangeEventService } from "../service/UserSettingMenuLayerSettingChangeEventService";
+import { execute as userSettingMenuLayerSettingOptionSelectedService } from "../service/UserSettingMenuLayerSettingOptionSelectedService";
+
+/**
+ * @description ユーザー設定メニューの非表示レイヤーのイベント登録のユースケース
+ *              Use case of event registration for hidden layers in the user settings menu
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (): void =>
+{
+    const element: HTMLSelectElement | null = document
+        .getElementById($USER_PUBLISH_LAYER_SETTING_ID) as HTMLSelectElement;
+
+    if (element) {
+
+        // ユーザー個別のデータから表示を切り替える
+        userSettingMenuLayerSettingOptionSelectedService(element);
+
+        element
+            .addEventListener(EventType.CHANGE, (event: Event): void =>
+            {
+                userSettingMenuLayerSettingChangeEventService(event);
+            });
+    }
+};

src/js/menu/domain/model/BaseMenu.ts

@@ -12,8 +12,8 @@ export class BaseMenu
     private _$element: HTMLElement | null;
     private _$name: string;
     private _$state: "show" | "hide";
-    protected _$offsetLeft: number;
-    protected _$offsetTop: number;
+    private _$offsetLeft: number;
+    private _$offsetTop: number;
 
     /**
      * @param {string} name

src/js/menu/domain/model/UserSettingMenu.ts

@@ -31,20 +31,20 @@ export class UserSettingMenu extends BaseMenu
      */
     move (element: HTMLElement): HTMLElement
     {
-        element.style.left = `${this._$offsetLeft}px`;
-        element.style.top  = `${this._$offsetTop}px`;
+        element.style.left = `${this.offsetLeft}px`;
+        element.style.top  = `${this.offsetTop}px`;
         return element;
     }
 
     /**
      * @description 初期起動関数
      *              initial invoking function
      *
-     * @return {Promise}
+     * @return {void}
      * @method
      * @public
      */
-    async initialize (): Promise<void>
+    initialize (): void
     {
         userSettingMenuInitializeUseCase();
     }