#171 MoiveClipの変換処理の実装(WIP)

Author: ienaga

src/css/convert-movie-clip.scss

@@ -106,4 +106,10 @@
             cursor           : pointer;
         }
     }
+}
+
+#convert-movie-clip-button
+{
+    pointer-events : none;
+    opacity        : 0.5;
 }

src/js/global/GlobalUtil.ts

@@ -255,9 +255,10 @@ let $editingElement: HTMLElement | null = null;
  */
 export const $setEditingElement = (element: HTMLElement | null): void =>
 {
-    if ($editingElement) {
+    if ($editingElement && $editingElement !== element) {
         $editingElement.blur();
     }
+
     $editingElement = element;
 };
 

src/js/menu/application/ConvertMovieClipModal/ConvertMovieClipModalUtil.ts

@@ -0,0 +1,72 @@
+
+/**
+ * @description ConvertMovieClipModalの中心点の入力チェック状態
+ *             Input check state of ConvertMovieClipModal center point
+ *
+ * @type {boolean}
+ * @private
+ */
+let $selected: boolean = false;
+
+/**
+ * @description ConvertMovieClipModalの入力チェック状態
+ *              Input check state of ConvertMovieClipModal
+ *
+ * @type {boolean}
+ * @private
+ */
+let $validValue: boolean = false;
+
+/**
+ * @description ConvertMovieClipModalの入力チェック状態を初期化
+ *              Initialize the input check state of ConvertMovieClipModal
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $resetState = (): void =>
+{
+    $validValue = false;
+    $selected   = false;
+};
+
+/**
+ * @description ConvertMovieClipModalの入力チェック状態を取得
+ *              Get the input check state of ConvertMovieClipModal
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $selectReference = (): void =>
+{
+    $selected = true;
+};
+
+/**
+ * @description ConvertMovieClipModalの入力チェック状態をセット
+ *              Set the input check state of ConvertMovieClipModal
+ *
+ * @param  {boolean} valid
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $verifyValue = (valid: boolean): void =>
+{
+    $validValue = valid;
+};
+
+/**
+ * @description ConvertMovieClipModalの入力チェック状態を取得
+ *              Get the input check state of ConvertMovieClipModal
+ *
+ * @return {boolean}
+ * @method
+ * @public
+ */
+export const $canProceed = (): boolean =>
+{
+    return $selected && $validValue;
+};

src/js/menu/application/ConvertMovieClipModal/service/ConvertMovieClipModalInputFocusOutEventUseCase.ts

@@ -0,0 +1,27 @@
+import { $CONVERT_MOVIE_CLIP_BUTTON_ID } from "@/config/ConvertMovieClipConfig";
+import { $canProceed } from "../ConvertMovieClipModalUtil";
+
+/**
+ * @description ConvertMovieClipModalの変換ボタンの状態を更新
+ *              Update the state of the convert button in ConvertMovieClipModal
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (): void =>
+{
+    const element: HTMLElement | null = document
+        .getElementById($CONVERT_MOVIE_CLIP_BUTTON_ID);
+
+    if (!element) {
+        return;
+    }
+
+    if ($canProceed()) {
+        element.style.pointerEvents = "auto";
+        element.style.opacity       = "1";
+    } else {
+        element.setAttribute("style", "");
+    }
+};

src/js/menu/application/ConvertMovieClipModal/service/ConvertMovieClipModalUpdateButtonService.ts

@@ -1,4 +1,4 @@
-import { $CONVERT_MOVIE_CLIP_BUTTON_ID } from "@/config/ConvertMovieClipConfig";
+import { $CONVERT_MOVIE_CLIP_INPUT_ID } from "@/config/ConvertMovieClipConfig";
 import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
 import { execute as convertMovieClipModalHideUseCase } from "./ConvertMovieClipModalHideUseCase";
 
@@ -21,7 +21,7 @@ export const execute = async (event: PointerEvent): Promise<void> =>
     }
 
     const inputElement = document
-        .getElementById($CONVERT_MOVIE_CLIP_BUTTON_ID) as HTMLInputElement;
+        .getElementById($CONVERT_MOVIE_CLIP_INPUT_ID) as HTMLInputElement;
     if (!inputElement || !inputElement.value) {
         return;
     }
@@ -31,12 +31,10 @@ export const execute = async (event: PointerEvent): Promise<void> =>
 
     // 指定の名前でMovieClipを作成
     const name = inputElement.value;
+    console.log(name);
 
     // todo
 
     // モーダルを非表示にする
     convertMovieClipModalHideUseCase();
-
-    // inputを初期化
-    inputElement.value = "";
 };

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

@@ -1,4 +1,6 @@
+import { $selectReference } from "../ConvertMovieClipModalUtil";
 import { execute as convertMovieClipModalChildInactiveService } from "../service/ConvertMovieClipModalChildInactiveService";
+import { execute as convertMovieClipModalUpdateButtonService } from "../service/ConvertMovieClipModalUpdateButtonService";
 
 /**
  * @description ConvertMovieClipModalの子要素がPointerDownイベントを受け取った際の処理
@@ -24,4 +26,10 @@ export const execute = (event: PointerEvent): void =>
 
     // 選択された要素にactiveクラスを追加する
     element.classList.add("active");
+
+    // 参照選択状態をセットする
+    $selectReference();
+
+    // 変換ボタンの状態を更新
+    convertMovieClipModalUpdateButtonService();
 };

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

@@ -1,6 +1,9 @@
 import { $CONVERT_MOVIE_CLIP_MODAL_NAME } from "@/config/MenuConfig";
 import { $getMenu } from "../../MenuUtil";
+import { $CONVERT_MOVIE_CLIP_INPUT_ID } from "@/config/ConvertMovieClipConfig";
+import { $resetState } from "../ConvertMovieClipModalUtil";
 import { execute as convertMovieClipModalChildInactiveService } from "../service/ConvertMovieClipModalChildInactiveService";
+import { execute as convertMovieClipModalUpdateButtonService } from "../service/ConvertMovieClipModalUpdateButtonService";
 
 /**
  * @description MovieClipの変換エリアを非表示にする
@@ -17,8 +20,23 @@ export const execute = (): void =>
         return;
     }
 
+    const inputElement = document.getElementById($CONVERT_MOVIE_CLIP_INPUT_ID) as HTMLInputElement;
+    if (!inputElement) {
+        return;
+    }
+
     // 全ての子要素のactiveクラスを削除する
     convertMovieClipModalChildInactiveService();
 
+    // 入力フィールドの値を初期化する
+    inputElement.value = "";
+
+    // 状態を初期化する
+    $resetState();
+
+    // 変換ボタンの状態を更新
+    convertMovieClipModalUpdateButtonService();
+
+    // モーダルを非表示にする
     menu.hide();
 };

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

@@ -3,7 +3,7 @@ import { $CONVERT_MOVIE_CLIP_MODAL_NAME } from "@/config/MenuConfig";
 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 convertMovieClipModalInputFocusOutEventUseCase } from "./ConvertMovieClipModalInputFocusOutEventUseCase";
 import { execute as convertMovieClipModalInputKeyPressEventService } from "../service/ConvertMovieClipModalInputKeyPressEventService";
 import { execute as convertMovieClipModalButtonPointerDownEventUseCase } from "./ConvertMovieClipModalButtonPointerDownEventUseCase";
 import {

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

@@ -0,0 +1,61 @@
+import { $updateKeyLock } from "@/shortcut/ShortcutUtil";
+import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
+import { execute as externalLibraryGetItemUseCase } from "@/external/controller/application/ExternalLibrary/usecase/ExternalLibraryGetItemUseCase";
+import { execute as detailModalCustomFadeInUseCase } from "@/menu/application/DetailModal/usecase/DetailModalCustomFadeInUseCase";
+import { $ERROR_DUPLICATE_NAME_TEXT } from "@/config/ErrorTextConfig";
+import { $verifyValue } from "../ConvertMovieClipModalUtil";
+import { execute as convertMovieClipModalUpdateButtonService } from "../service/ConvertMovieClipModalUpdateButtonService";
+
+/**
+ * @description ConvertMovieClipModalの入力フィールドからフォーカスが外れたときの処理
+ *              Process when focus is lost from the input field of ConvertMovieClipModal
+ *
+ * @param  {FocusEvent} event
+ * @return {Promise<void>}
+ * @method
+ * @public
+ */
+export const execute = async (event: FocusEvent): Promise<void> =>
+{
+    const inputElement = event.target as HTMLInputElement;
+    if (!inputElement) {
+        return;
+    }
+
+    // イベントの伝播を止める
+    event.stopPropagation();
+
+    // 重複チェック
+    const item = externalLibraryGetItemUseCase(
+        $getCurrentWorkSpace(),
+        inputElement.value
+    );
+
+    if (item) {
+
+        const parent = inputElement.offsetParent as HTMLElement;
+        if (!parent) {
+            return;
+        }
+
+        // 進行状況画面を表示
+        detailModalCustomFadeInUseCase(
+            $ERROR_DUPLICATE_NAME_TEXT,
+            parent.offsetLeft - 35, parent.offsetTop - 55
+        );
+
+        // 入力のやり直しを促す
+        $verifyValue(false);
+
+        inputElement.focus();
+    } else {
+        // 入力が有効であることをセット
+        $verifyValue(true);
+
+        // 入力モードを終了する
+        $updateKeyLock(false);
+    }
+
+    // 変換ボタンの状態を更新
+    convertMovieClipModalUpdateButtonService();
+};