#171 MoiveClipの変換処理の準備

Author: ienaga

src/js/config/ConvertMovieClipConfig.ts

@@ -15,3 +15,12 @@ export const $CONVERT_CANCEL_BUTTON_ID: string = "convert-cancel-button";
  * @constant
  */
 export const $CONVERT_MOVIE_CLIP_INPUT_ID: string = "convert-movie-clip-input";
+
+/**
+ * @description MovieClip変換ボタンのID
+ *              The ID of the MovieClip conversion button
+ *
+ * @type {string}
+ * @constant
+ */
+export const $CONVERT_MOVIE_CLIP_BUTTON_ID: string = "convert-movie-clip-button";

src/js/menu/application/ConvertMovieClipModal/usecase/ConvertMovieClipModalButtonPointerDownEventUseCase.ts

@@ -0,0 +1,42 @@
+import { $CONVERT_MOVIE_CLIP_BUTTON_ID } from "@/config/ConvertMovieClipConfig";
+import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
+import { execute as convertMovieClipModalHideUseCase } from "./ConvertMovieClipModalHideUseCase";
+
+/**
+ * @description 指定の名前のMovieClipを作成して、選択中のDisplayObjectを配置
+ *              Create a MovieClip with the specified name and place the selected DisplayObject
+ *
+ * @return {Promise<void>}
+ * @method
+ * @public
+ */
+export const execute = async (event: PointerEvent): Promise<void> =>
+{
+    const workspace = $getCurrentWorkSpace();
+    const movieClip = workspace.scene;
+
+    // 選択中のDisplayObjectがない場合は処理を終了する
+    if (!movieClip.selectedDepths.size) {
+        return;
+    }
+
+    const inputElement = document
+        .getElementById($CONVERT_MOVIE_CLIP_BUTTON_ID) as HTMLInputElement;
+    if (!inputElement || !inputElement.value) {
+        return;
+    }
+
+    // イベントの伝播を停止する
+    event.stopPropagation();
+
+    // 指定の名前でMovieClipを作成
+    const name = inputElement.value;
+
+    // todo
+
+    // モーダルを非表示にする
+    convertMovieClipModalHideUseCase();
+
+    // inputを初期化
+    inputElement.value = "";
+};

src/js/menu/application/ConvertMovieClipModal/usecase/ConvertMovieClipModalCancelPointerDownEventUseCase.ts

@@ -0,0 +1,19 @@
+import { execute as convertMovieClipModalHideUseCase } from "./ConvertMovieClipModalHideUseCase";
+
+/**
+ * @description ConvertMovieClipModalのキャンセルボタンのPointerDownイベント
+ *              PointerDown event for the cancel button of ConvertMovieClipModal
+ *
+ * @param  {PointerEvent} event
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (event: PointerEvent): void =>
+{
+    // イベントの伝播を停止する
+    event.stopPropagation();
+
+    // モーダルを非表示にする
+    convertMovieClipModalHideUseCase();
+};

src/js/menu/application/ConvertMovieClipModal/usecase/ConvertMovieClipModalHideUseCase.ts

@@ -6,23 +6,19 @@ import { execute as convertMovieClipModalChildInactiveService } from "../service
  * @description MovieClipの変換エリアを非表示にする
  *              Hide the MovieClip's conversion area
  *
- * @param  {PointerEvent} event
  * @return {void}
  * @method
  * @public
  */
-export const execute = (event: PointerEvent): void =>
+export const execute = (): void =>
 {
-    // 親のイベントを抑制する
-    event.stopPropagation();
-
-    // 全ての子要素のactiveクラスを削除する
-    convertMovieClipModalChildInactiveService();
-
     const menu = $getMenu($CONVERT_MOVIE_CLIP_MODAL_NAME);
     if (!menu) {
         return;
     }
 
+    // 全ての子要素のactiveクラスを削除する
+    convertMovieClipModalChildInactiveService();
+
     menu.hide();
 };

src/js/menu/application/ConvertMovieClipModal/usecase/ConvertMovieClipModalInitializeRegisterEventUseCase.ts

@@ -1,13 +1,15 @@
 import { EventType } from "@/tool/domain/event/EventType";
 import { $CONVERT_MOVIE_CLIP_MODAL_NAME } from "@/config/MenuConfig";
-import { execute as convertMovieClipModalHideUseCase } from "./ConvertMovieClipModalHideUseCase";
+import { execute as convertMovieClipModalCancelPointerDownEventUseCase } from "./ConvertMovieClipModalCancelPointerDownEventUseCase";
 import { execute as convertMovieClipModalChildPointerDownEventUseCase } from "./ConvertMovieClipModalChildPointerDownEventUseCase";
 import { execute as convertMovieClipModalInputFocusInEventService } from "../service/ConvertMovieClipModalInputFocusInEventService";
 import { execute as convertMovieClipModalInputFocusOutEventUseCase } from "../service/ConvertMovieClipModalInputFocusOutEventUseCase";
 import { execute as convertMovieClipModalInputKeyPressEventService } from "../service/ConvertMovieClipModalInputKeyPressEventService";
+import { execute as convertMovieClipModalButtonPointerDownEventUseCase } from "./ConvertMovieClipModalButtonPointerDownEventUseCase";
 import {
     $CONVERT_CANCEL_BUTTON_ID,
-    $CONVERT_MOVIE_CLIP_INPUT_ID
+    $CONVERT_MOVIE_CLIP_INPUT_ID,
+    $CONVERT_MOVIE_CLIP_BUTTON_ID
 } from "@/config/ConvertMovieClipConfig";
 
 /**
@@ -42,7 +44,7 @@ export const execute = (): void =>
         .getElementById($CONVERT_CANCEL_BUTTON_ID);
     if (cancelButton) {
         cancelButton.addEventListener(EventType.POINTER_DOWN,
-            convertMovieClipModalHideUseCase
+            convertMovieClipModalCancelPointerDownEventUseCase
         );
     }
 
@@ -60,4 +62,13 @@ export const execute = (): void =>
             convertMovieClipModalInputKeyPressEventService
         );
     }
+
+    // 変換ボタンのイベントを登録する
+    const convertButton: HTMLElement | null = document
+        .getElementById($CONVERT_MOVIE_CLIP_BUTTON_ID);
+    if (convertButton) {
+        convertButton.addEventListener(EventType.POINTER_DOWN,
+            convertMovieClipModalButtonPointerDownEventUseCase
+        );
+    }
 };