#175 キーフレームに配分を実装(WIP)

Author: ienaga

src/js/controller/application/HistoryArea/usecase/HistoryRedoCommandUseCase.ts

@@ -432,7 +432,7 @@ export const execute = async (
 
         // キーフレームへフレームを挿入
         case $TIMELINE_INSERT_KEY_FRAME_COMMAND:
-            timelineLayerFrameInsertKeyFramesHistoryRedoUseCase(
+            await timelineLayerFrameInsertKeyFramesHistoryRedoUseCase(
                 messages[0] as number, // work_space_id
                 messages[1] as number, // library_id
                 messages[2] as number, // layer_index

src/js/controller/application/HistoryArea/usecase/HistoryUndoCommandUseCase.ts

@@ -428,7 +428,7 @@ export const execute = async (
 
         // キーフレームへフレームを挿入
         case $TIMELINE_INSERT_KEY_FRAME_COMMAND:
-            timelineLayerFrameInsertKeyFramesHistoryUndoUseCase(
+            await timelineLayerFrameInsertKeyFramesHistoryUndoUseCase(
                 messages[0] as number, // WorkSpace ID
                 messages[1] as number, // MovieClip ID
                 messages[2] as number, // Layer Index

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

@@ -93,6 +93,36 @@ export class ExternalCharacter
         return this._$character.id;
     }
 
+    /**
+     * @description DisplayObjectの開始フレームを返却
+     *              Returns the start frame of DisplayObject
+     *
+     * @member {number}
+     */
+    get startFrame (): number
+    {
+        return this._$character.startFrame;
+    }
+    set startFrame (frame: number)
+    {
+        this._$character.startFrame = frame;
+    }
+
+    /**
+     * @description DisplayObjectの終了フレームを返却
+     *              Returns the end frame of DisplayObject
+     *
+     * @member {number}
+     */
+    get endFrame (): number
+    {
+        return this._$character.endFrame;
+    }
+    set endFrame (frame: number)
+    {
+        this._$character.endFrame = frame;
+    }
+
     /**
      * @description DisplayObjectのx座標を返却
      *              Returns the x-coordinate of DisplayObject
@@ -693,7 +723,7 @@ export class ExternalCharacter
      * @method
      * @public
      */
-    async delete (): Promise<void>
+    async remove (): Promise<void>
     {
         await externalCharacterDeleteUseCase(
             this._$workSpace,

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

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

src/js/history/application/timeline/application/TimelineLayerFrame/AddKeyframe/usecase/TimelineLayerFrameAddKeyframeHistoryUndoUseCase.ts

@@ -70,7 +70,7 @@ export const execute = async (
     // fixed logic
     if (workSpace.active && movieClip.active) {
         // スクリーンに追加したElementを削除
-        screenAreaRemoveDisplayObjectElementService(layer.id, character.depth);
+        screenAreaRemoveDisplayObjectElementService(character.id);
 
         for (const [index, depths] of movieClip.selectedDepths) {
             const layer = movieClip.getLayer(index);

src/js/history/application/timeline/application/TimelineLayerFrame/InsertKeyFrames/usecase/TimelineLayerFrameInsertKeyFramesHistoryRedoUseCase.ts

@@ -2,6 +2,8 @@ import type { MovieClip } from "@/core/domain/model/MovieClip";
 import { $getWorkSpace } from "@/core/application/CoreUtil";
 import { execute as externalTimelineLayerFrameBehindKeyframeService } from "@/external/timeline/application/ExternalTimelineLayerFrame/service/ExternalTimelineLayerFrameBehindKeyframeService";
 import { execute as timelineLayerAddFrameUpdateLayerStyleUseCase } from "@/timeline/application/TimelineLayer/usecase/TimelineLayerAddFrameUpdateLayerStyleUseCase";
+import { execute as screenAreaRedrawUseCase } from "@/screen/application/ScreenArea/usecase/ScreenAreaRedrawUseCase";
+import { execute as screenDisplayObjectAllSelectedActiveUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectAllSelectedActiveUseCase";
 
 /**
  * @description 空のキーフレームへのフレーム追加処理を元に戻す
@@ -12,17 +14,17 @@ import { execute as timelineLayerAddFrameUpdateLayerStyleUseCase } from "@/timel
  * @param  {number} layer_index
  * @param  {number} start_frame
  * @param  {number} num_frame
- * @return {void}
+ * @return {Promise<void>}
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space_id: number,
     library_id: number,
     layer_index: number,
     start_frame: number,
     num_frame: number
-): void => {
+): Promise<void> => {
 
     const workSpace = $getWorkSpace(work_space_id);
     if (!workSpace) {
@@ -57,8 +59,23 @@ export const execute = (
     }
 
     // アクティブならタイムラインを再描画
-    if (workSpace.active && movieClip.active) {
+    if (!workSpace.active) {
+        return ;
+    }
+
+    if (movieClip.active) {
         // タイムラインのレイヤー表示を更新
         timelineLayerAddFrameUpdateLayerStyleUseCase(movieClip, layer);
+
+        // スクリーンエリアを再描画
+        await screenAreaRedrawUseCase(movieClip);
+    } else {
+        const movieClip = workSpace.scene;
+        // スクリーンエリアを再描画
+        await screenAreaRedrawUseCase(movieClip);
+
+        // 選択中のDisplayObjectをアクティブにする
+        // fixed logic
+        screenDisplayObjectAllSelectedActiveUseCase(movieClip);
     }
 };

src/js/history/application/timeline/application/TimelineLayerFrame/InsertKeyFrames/usecase/TimelineLayerFrameInsertKeyFramesHistoryUndoUseCase.ts

@@ -2,6 +2,8 @@ import type { MovieClip } from "@/core/domain/model/MovieClip";
 import { $getWorkSpace } from "@/core/application/CoreUtil";
 import { execute as externalTimelineLayerFrameForwardKeyframeService } from "@/external/timeline/application/ExternalTimelineLayerFrame/service/ExternalTimelineLayerFrameForwardKeyframeService";
 import { execute as timelineLayerAddFrameUpdateLayerStyleUseCase } from "@/timeline/application/TimelineLayer/usecase/TimelineLayerAddFrameUpdateLayerStyleUseCase";
+import { execute as screenAreaRedrawUseCase } from "@/screen/application/ScreenArea/usecase/ScreenAreaRedrawUseCase";
+import { execute as screenDisplayObjectAllSelectedActiveUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectAllSelectedActiveUseCase";
 
 /**
  * @description キーフレームへのフレーム追加処理を元に戻す
@@ -12,17 +14,17 @@ import { execute as timelineLayerAddFrameUpdateLayerStyleUseCase } from "@/timel
  * @param  {number} layer_index
  * @param  {number} start_frame
  * @param  {number} num_frame
- * @return {void}
+ * @return {Promise<void>}
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space_id: number,
     library_id: number,
     layer_index: number,
     start_frame: number,
     num_frame: number
-): void => {
+): Promise<void> => {
 
     const workSpace = $getWorkSpace(work_space_id);
     if (!workSpace) {
@@ -60,8 +62,23 @@ export const execute = (
     }
 
     // アクティブならタイムラインを再描画
-    if (workSpace.active && movieClip.active) {
+    if (!workSpace.active) {
+        return ;
+    }
+
+    if (movieClip.active) {
         // タイムラインのレイヤー表示を更新
         timelineLayerAddFrameUpdateLayerStyleUseCase(movieClip, layer);
+
+        // スクリーンエリアを再描画
+        await screenAreaRedrawUseCase(movieClip);
+    } else {
+        const movieClip = workSpace.scene;
+        // スクリーンエリアを再描画
+        await screenAreaRedrawUseCase(movieClip);
+
+        // 選択中のDisplayObjectをアクティブにする
+        // fixed logic
+        screenDisplayObjectAllSelectedActiveUseCase(movieClip);
     }
 };

src/js/menu/application/ScreenMenu/service/ScreenMenuUpdateStyleDistributeToKeyframeService.ts

@@ -0,0 +1,41 @@
+import { $SCREEN_DISTRIBUTE_TO_KEYFRAMES_ID } from "@/config/ScreenConfig";
+import type { MovieClip } from "@/core/domain/model/MovieClip";
+
+/**
+ * @description スクリーンのメニューを選択中のElementに合わせてアクティブ・非アクティブに更新する
+ *              Update the screen menu to be active/inactive according to the selected Element
+ *
+ * @param  {MovieClip} movie_clip
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (movie_clip: MovieClip): void =>
+{
+    // 単独選択時の表示
+    const element: HTMLElement | null = document
+        .getElementById($SCREEN_DISTRIBUTE_TO_KEYFRAMES_ID) as HTMLElement;
+    if (!element) {
+        return ;
+    }
+
+    let show = false;
+    for (const depths of movie_clip.selectedDepths.values()) {
+
+        // 単体選択ならスキップ
+        if (depths.length === 1) {
+            continue;
+        }
+
+        // 複数選択なら表示
+        show = true;
+        break;
+    }
+
+    if (show) {
+        element.setAttribute("style", "");
+    } else {
+        element.style.opacity = "0.5";
+        element.style.pointerEvents = "none";
+    }
+};

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

@@ -0,0 +1,131 @@
+import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
+import { $allHideMenu } from "../../MenuUtil";
+import { ExternalTimeline } from "@/external/timeline/domain/model/ExternalTimeline";
+import { ExternalCharacter } from "@/external/core/domain/model/ExternalCharacter";
+import { ExternalLayer } from "@/external/core/domain/model/ExternalLayer";
+import { execute as cacheRemoveService } from "@/cache/service/CacheRemoveService";
+import { execute as screenAreaRedrawUseCase } from "@/screen/application/ScreenArea/usecase/ScreenAreaRedrawUseCase";
+
+/**
+ * @description スクリーンの選択中のDisplayObjectをキーフレームに配分する
+ *              Distribute the selected DisplayObject on the screen to keyframes
+ *
+ * @param  {PointerEvent | KeyboardEvent} event
+ * @return {Promise<void>}
+ * @method
+ * @public
+ */
+export const execute = async (event: PointerEvent | KeyboardEvent): Promise<void> =>
+{
+    // メニューを全て閉じる
+    $allHideMenu();
+
+    const workSpace = $getCurrentWorkSpace();
+    const movieClip = workSpace.scene;
+
+    // 選択中のMovieClipが無い場合は処理を終了
+    if (!movieClip.selectedDepths.size) {
+        return ;
+    }
+
+    // イベントの伝播を止める
+    event.stopPropagation();
+
+    // 現在のフレームを取得
+    const frame = movieClip.currentFrame;
+
+    // ExternalTimelineを取得
+    const externalTimeline = new ExternalTimeline(workSpace, movieClip);
+
+    // レイヤーに配分
+    for (const [layerIndex, depths] of movieClip.selectedDepths) {
+
+        // 選択中のDisoplayObjectが1つだけの場合はスキップ
+        if (depths.length === 1) {
+            continue;
+        }
+
+        const layer = movieClip.getLayer(layerIndex);
+        if (!layer) {
+            continue;
+        }
+
+        // 昇順にソートして先頭以外を新規レイヤーに移動
+        depths.sort((a, b) => a - b);
+
+        const character = layer.getCharacter(frame, depths[0]);
+        if (!character) {
+            continue;
+        }
+
+        // 移動するキャラクターを取得
+        const characters = [];
+        for (let idx = 1; idx < depths.length; idx++) {
+
+            const character = layer.getCharacter(frame, depths[idx]);
+            if (!character) {
+                continue;
+            }
+
+            characters.push(character);
+        }
+
+        // レイヤーAPIを取得
+        const externalLayer = new ExternalLayer(workSpace, movieClip, layer);
+        await externalTimeline
+            .selectedLayers([externalLayer.index]);
+
+        // 必要なフレーム数を追加
+        if (character.startFrame + characters.length > character.endFrame - 1) {
+            await externalTimeline
+                .insertFrames(character.startFrame + characters.length - (character.endFrame - 1));
+        } else {
+            // フレーム数が多い場合は削除
+            await externalTimeline
+                .eraseFrames(
+                    character.startFrame + characters.length,
+                    character.endFrame - 1
+                );
+        }
+
+        // 開始となるキーフレームをセット
+        const keyframe = character.startFrame + 1;
+
+        // 空のキーフレームを追加
+        for (let idx = 0; idx < characters.length; idx++) {
+            await externalTimeline
+                .convertToEmptyKeyframes(keyframe + idx);
+        }
+
+        // キャラクターを移動
+        for (let idx = 0; idx < characters.length; idx++) {
+
+            const character = characters[idx];
+            if (!character) {
+                continue;
+            }
+
+            // 現在のレイヤーからDisplayObjectを削除
+            const externalCharacter = new ExternalCharacter(
+                workSpace,
+                movieClip,
+                layer,
+                character
+            );
+            await externalCharacter.remove();
+
+            // 新しいキーフレームにDisplayObjectを追加
+            const frame = keyframe + idx;
+            externalCharacter.startFrame = frame;
+            externalCharacter.endFrame   = frame + 1;
+
+            await externalLayer.addCharacter(externalCharacter);
+        }
+    }
+
+    // キャッシュを削除
+    cacheRemoveService(workSpace, movieClip.id);
+
+    // 画面を再描画
+    await screenAreaRedrawUseCase(movieClip);
+};

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

@@ -85,7 +85,7 @@ export const execute = async (event: PointerEvent | KeyboardEvent): Promise<void
                 layer,
                 character
             );
-            await externalCharacter.delete();
+            await externalCharacter.remove();
 
             // 新規レイヤーにDisplayObjectを追加
             await externalLayer.addCharacter(externalCharacter);