#171 MovieClipへの変換処理を実装(WIP)

Author: ienaga

src/css/convert-movie-clip.scss

@@ -11,7 +11,7 @@
     background-color : #363636;
     color            : whitesmoke;
     border           : 1px solid #72777D;
-    z-index          : 9999;
+    z-index          : 65535;
     overflow         : hidden;
     border-radius    : 4px;
     box-shadow       : 0 0 5px rgba(245, 245, 245, 0.25);

src/js/external/core/application/ExternalLayer/usecase/ExternalLayerAddCharacterUseCase.ts

@@ -2,7 +2,7 @@ import { Character } from "@/core/domain/model/Character";
 import type { Layer } from "@/core/domain/model/Layer";
 import type { MovieClip } from "@/core/domain/model/MovieClip";
 import type { WorkSpace } from "@/core/domain/model/WorkSpace";
-import type { ExternalCharacter } from "@/external/core/domain/model/ExternalCharacter";
+import { ExternalCharacter } from "@/external/core/domain/model/ExternalCharacter";
 import { execute as timelineLayerFrameAddKeyframeHistoryUseCase } from "@/history/application/timeline/application/TimelineLayerFrame/AddKeyframe/usecase/TimelineLayerFrameAddKeyframeHistoryUseCase";
 import { execute as cacheRemoveService } from "@/cache/service/CacheRemoveService";
 import { execute as viewTimelineLayerFrameAddKeyFrameUseCase } from "@/view/timeline/TimelineLayerFrame/usecase/ViewTimelineLayerFrameAddKeyFrameUseCase";
@@ -16,7 +16,7 @@ import { execute as externalTimelineLayerFrameSplitToEmptyUseCase } from "@/exte
  * @param  {Layer} layer
  * @param  {ExternalCharacter} external_character
  * @param  {boolean} [receiver=false]
- * @return {Promise<void>}
+ * @return {Promise<ExternalCharacter>}
  * @method
  * @public
  */
@@ -27,7 +27,7 @@ export const execute = async (
     external_character: ExternalCharacter,
     depth: number = 0,
     receiver: boolean = false
-): Promise<void> => {
+): Promise<ExternalCharacter> => {
 
     const character = new Character(external_character.id);
     character.load(external_character.toObject());
@@ -82,4 +82,11 @@ export const execute = async (
         layer,
         character
     );
+
+    return new ExternalCharacter(
+        work_space,
+        movie_clip,
+        layer,
+        character
+    );
 };

src/js/external/core/domain/model/ExternalLayer.ts

@@ -274,8 +274,8 @@ export class ExternalLayer
     async addCharacter (
         external_character: ExternalCharacter,
         depth: number = 0
-    ): Promise<void> {
-        await externalLayerAddCharacterUseCase(
+    ): Promise<ExternalCharacter> {
+        return await externalLayerAddCharacterUseCase(
             this._$workSpace,
             this._$movieClip,
             this._$layer,

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

@@ -1,12 +1,12 @@
 
 /**
- * @description ConvertMovieClipModalの中心点の入力チェック状態
- *             Input check state of ConvertMovieClipModal center point
+ * @description ConvertMovieClipModalの選択した中心点のElement ID
+ *              Selected center point Element ID of ConvertMovieClipModal
  *
- * @type {boolean}
+ * @type {string}
  * @private
  */
-let $selected: boolean = false;
+let $selectedElementId: string = "";
 
 /**
  * @description ConvertMovieClipModalの入力チェック状態
@@ -17,6 +17,19 @@ let $selected: boolean = false;
  */
 let $validValue: boolean = false;
 
+/**
+ * @description ConvertMovieClipModalの選択した中心点のElement IDを取得
+ *              Get the selected center point Element ID of ConvertMovieClipModal
+ *
+ * @return {string}
+ * @method
+ * @public
+ */
+export const $getSelectedElementId = (): string =>
+{
+    return $selectedElementId;
+};
+
 /**
  * @description ConvertMovieClipModalの入力チェック状態を初期化
  *              Initialize the input check state of ConvertMovieClipModal
@@ -28,20 +41,21 @@ let $validValue: boolean = false;
 export const $resetState = (): void =>
 {
     $validValue = false;
-    $selected   = false;
+    $selectedElementId = "";
 };
 
 /**
  * @description ConvertMovieClipModalの入力チェック状態を取得
  *              Get the input check state of ConvertMovieClipModal
  *
+ * @param  {string} selected_element_id
  * @return {void}
  * @method
  * @public
  */
-export const $selectReference = (): void =>
+export const $selectReference = (selected_element_id: string): void =>
 {
-    $selected = true;
+    $selectedElementId = selected_element_id;
 };
 
 /**
@@ -68,5 +82,5 @@ export const $verifyValue = (valid: boolean): void =>
  */
 export const $canProceed = (): boolean =>
 {
-    return $selected && $validValue;
+    return $selectedElementId !== "" && $validValue;
 };

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

@@ -0,0 +1,44 @@
+import type { Character } from "@/core/domain/model/Character";
+import type { IPosition } from "@/interface/IPosition";
+import type { IBounds } from "@/interface/IBounds";
+import { $getSelectedElementId } from "../ConvertMovieClipModalUtil";
+
+/**
+ * @description アンカー位置の割合
+ *              Anchor position ratio
+ *
+ * @type {Record<string, [number, number]>}
+ * @private
+ */
+const $anchorFrac: Record<string, [number, number]> = {
+    "top-left":      [0,   0],
+    "middle-left":   [0.5, 0],
+    "bottom-left":   [1,   0],
+    "top-center":    [0,   0.5],
+    "middle-center": [0.5, 0.5],
+    "bottom-center": [1,   0.5],
+    "top-right":     [0,   1],
+    "middle-right":  [0.5, 1],
+    "bottom-right":  [1,   1]
+};
+
+/**
+ * @description ConvertMovieClipModalの選択した中心点に合わせてDisplayObjectの位置を計算
+ *              Calculate the position of the DisplayObject according to the selected center point of ConvertMovieClipModal
+ *
+ * @param  {Character} character
+ * @return {IPosition | null}
+ * @method
+ * @public
+ */
+export const execute = (character: Character, bounds: IBounds): IPosition =>
+{
+    const [ax, ay] = $anchorFrac[$getSelectedElementId() as keyof typeof $anchorFrac];
+    const offsetX = bounds.xMin + Math.abs(bounds.xMax - bounds.xMin) * ax;
+    const offsetY = bounds.yMin + Math.abs(bounds.yMax - bounds.yMin) * ay;
+
+    return {
+        "x": character.x - offsetX,
+        "y": character.y - offsetY
+    };
+};

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

@@ -1,7 +1,13 @@
+import type { Layer } from "@/core/domain/model/Layer";
+import { Character } from "@/core/domain/model/Character";
+import { ExternalCharacter } from "@/external/core/domain/model/ExternalCharacter";
+import { ExternalLayer } from "@/external/core/domain/model/ExternalLayer";
 import { $CONVERT_MOVIE_CLIP_INPUT_ID } from "@/config/ConvertMovieClipConfig";
 import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
 import { execute as convertMovieClipModalHideUseCase } from "./ConvertMovieClipModalHideUseCase";
 import { execute as externalLibraryAddNewMovieClipUseCase } from "@/external/controller/application/ExternalLibrary/usecase/ExternalLibraryAddNewMovieClipUseCase";
+import { execute as convertMovieClipModalCalcPositionService } from "../service/ConvertMovieClipModalCalcPositionService";
+import { execute as screenAreaCalcSelectedBoundsService } from "@/screen/application/ScreenArea/service/ScreenAreaCalcSelectedBoundsService";
 
 /**
  * @description 指定の名前のMovieClipを作成して、選択中のDisplayObjectを配置
@@ -17,9 +23,7 @@ export const execute = async (event: PointerEvent): Promise<void> =>
     const movieClip = workspace.scene;
 
     // 選択中のDisplayObjectがない場合は処理を終了する
-    if (!movieClip.selectedDepths.size
-        || movieClip.selectedDepths.size > 1
-    ) {
+    if (movieClip.selectedDepths.size !== 1) {
         return;
     }
 
@@ -29,23 +33,115 @@ export const execute = async (event: PointerEvent): Promise<void> =>
         return;
     }
 
+    const layer = movieClip.getLayer(
+        movieClip.selectedDepths.keys().next().value as number
+    );
+    if (!layer) {
+        return ;
+    }
+
+    const bounds = screenAreaCalcSelectedBoundsService(movieClip);
+    if (!bounds) {
+        return ;
+    }
+
     // イベントの伝播を停止する
     event.stopPropagation();
 
-    // 指定の名前でMovieClipを作成
-    const name = inputElement.value;
-
     // ライブラリにMovieClipを追加
     const newMovieClip = await externalLibraryAddNewMovieClipUseCase(
         workspace,
         movieClip,
-        name
+        inputElement.value
     );
 
     // MovieClipに選択中のDisplayObjectを配置
+    const depths = movieClip.selectedDepths.values().next().value as number[];
+
+    // 昇順にソート
+    depths.sort((a, b) => a - b);
+
+    // 移動先のMovieClipのレイヤーを取得
+    const targetExternalLayer = new ExternalLayer(
+        workspace,
+        newMovieClip,
+        newMovieClip.layers[0] as NonNullable<Layer>
+    );
+
+    // キーフレームの開始位置と終了位置
+    let startFrame = 1;
+    let endFrame = 2;
+
+    // 削除した際に深度が変わるので、先に配列にキャッシュする
+    const characters = [];
+    const frame = movieClip.currentFrame;
+    for (let idx = 0; idx < depths.length; idx += 1) {
+        const character = layer.getCharacter(frame, depths[idx]);
+        if (!character) {
+            continue;
+        }
+
+        if (idx === 0) {
+            startFrame = character.startFrame;
+            endFrame = character.endFrame;
+        }
+
+        characters.push(character);
+    }
 
-    // MovieClipをレイヤーに配置
-    console.log(newMovieClip);
+    // 選択しているDisplayObjectを現在のMovieClipから削除して、新しいMovieClipに移動
+    for (let idx = 0; idx < characters.length; idx += 1) {
+
+        const character = characters[idx];
+        if (!character) {
+            continue;
+        }
+
+        // 選択中のDisplayObjectを削除
+        const externalCharacter = new ExternalCharacter(
+            workspace,
+            movieClip,
+            layer,
+            character
+        );
+        await externalCharacter.remove();
+
+        // 1フレームだけのDisplayObjectに変更
+        externalCharacter.startFrame = 1;
+        externalCharacter.endFrame   = 2;
+
+        // 新しいMovieClipのレイヤーにDisplayObjectを追加
+        const newExternalCharacter = await targetExternalLayer.addCharacter(
+            externalCharacter,
+            idx
+        );
+
+        // 中心点に合わせて座標を移動
+        const position = convertMovieClipModalCalcPositionService(character, bounds);
+        await newExternalCharacter.setX(position.x);
+        await newExternalCharacter.setY(position.y);
+    }
+
+    // 新しいMovieClipのDisplayObjectを作成して配置
+    const newCharacter = new Character();
+    newCharacter.libraryId  = newMovieClip.id;
+    newCharacter.startFrame = startFrame;
+    newCharacter.endFrame   = endFrame;
+
+    // todo: xy position
+
+    const currentExternalLayer = new ExternalLayer(
+        workspace,
+        movieClip,
+        layer
+    );
+
+    await currentExternalLayer.addCharacter(new ExternalCharacter(
+        workspace,
+        movieClip,
+        layer,
+        newCharacter
+    ));
 
     // モーダルを非表示にする
     convertMovieClipModalHideUseCase();

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

@@ -13,22 +13,22 @@ import { execute as convertMovieClipModalUpdateButtonService } from "../service/
  */
 export const execute = (event: PointerEvent): void =>
 {
-    // 親のイベントを抑制する
-    event.stopPropagation();
-
     const element = event.currentTarget as HTMLElement;
     if (!element) {
         return;
     }
 
+    // 親のイベントを抑制する
+    event.stopPropagation();
+
     // 全ての子要素のactiveクラスを削除する
     convertMovieClipModalChildInactiveService();
 
     // 選択された要素にactiveクラスを追加する
     element.classList.add("active");
 
     // 参照選択状態をセットする
-    $selectReference();
+    $selectReference(element.dataset.position as string);
 
     // 変換ボタンの状態を更新
     convertMovieClipModalUpdateButtonService();

src/js/menu/application/ScreenMenu/usecase/ScreenMenuConvertToMovieClipUseCase.ts

@@ -19,7 +19,8 @@ export const execute = (event: PointerEvent | KeyboardEvent): void =>
     const workSpace = $getCurrentWorkSpace();
     const movieClip = workSpace.scene;
 
-    if (!movieClip.selectedDepths.size) {
+    // レイヤー選択は1つのみ許可
+    if (movieClip.selectedDepths.size !== 1) {
         return;
     }