#147 feat: レイヤー移動をマスクに対応

Next2D · Jul 17, 2024 · d52742c · d52742c
1 parent 54ca604
commit d52742c
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -1564,11 +1564,13 @@
                     <option value="zlib">JSON(compression)</option>
                     <option value="json">JSON(uncompressed)</option>
                     <option value="webm">Video(webm)</option>
+                    <option value="mp4">Video(mp4)</option>
                     <option value="gif-loop">GIF Loop Animation</option>
                     <option value="gif">GIF Animation</option>
                     <option value="png">PNG Snapshot</option>
-                    <option value="apng-loop">APNG(Loop)</option>
-                    <option value="apng">APNG</option>
+                    <option value="apng-loop">Animation PNG(Loop)</option>
+                    <option value="apng">Animation PNG</option>
+                    <option value="ebitengine">Ebitengine</option>
                     <option value="custom">Custom</option>
                 </select>
             </div>

diff --git a/src/js/controller/application/HistoryArea/usecase/HistoryRedoCommandUseCase.ts b/src/js/controller/application/HistoryArea/usecase/HistoryRedoCommandUseCase.ts
@@ -302,7 +302,7 @@ export const execute = async (
 
         // レイヤーの移動
         case $TIMELINE_MOVE_LAYER_COMMAND:
-            timelineLayerControllerMoveLayerHistoryRedoUseCase(
+            await timelineLayerControllerMoveLayerHistoryRedoUseCase(
                 messages[0] as number, // workSpaceId
                 messages[1] as number, // MovieClip ID
                 messages[2] as number, // Before Index

diff --git a/src/js/controller/application/HistoryArea/usecase/HistoryUndoCommandUseCase.ts b/src/js/controller/application/HistoryArea/usecase/HistoryUndoCommandUseCase.ts
@@ -299,7 +299,7 @@ export const execute = async (
 
         // レイヤーの移動
         case $TIMELINE_MOVE_LAYER_COMMAND:
-            timelineLayerControllerMoveLayerHistoryUndoUseCase(
+            await timelineLayerControllerMoveLayerHistoryUndoUseCase(
                 messages[0] as number, // workSpaceId
                 messages[1] as number, // MovieClip ID
                 messages[2] as number, // Before Index

diff --git a/src/js/external/core/application/ExternalLayer/usecase/ExternalLayerUpdateLockUseCase.ts b/src/js/external/core/application/ExternalLayer/usecase/ExternalLayerUpdateLockUseCase.ts
@@ -69,10 +69,10 @@ export const execute = async (
         propertyAreaChangeDisplayUseCase();
 
         // マスクレイヤーなら、子レイヤーの表示を更新
-        screenDisplayObjectMaskLockUpdateElementService(layer);
+        await screenDisplayObjectMaskLockUpdateElementService(layer);
 
         // マスクインのレイヤーのDisplayObjectのElemnet表示を更新
-        screenDisplayObjectUpdateLayerMaskElementUseCase(layer);
+        await screenDisplayObjectUpdateLayerMaskElementUseCase(layer);
     }
 
     // 受け取り処理ではなく、画面共有していれば共有者に送信

diff --git a/...neLayerController/MoveLayer/usecase/TimelineLayerControllerMoveLayerHistoryRedoUseCase.ts b/...neLayerController/MoveLayer/usecase/TimelineLayerControllerMoveLayerHistoryRedoUseCase.ts
@@ -9,6 +9,7 @@ import {
     $MASK_MODE
 } from "@/config/LayerModeConfig";
 import { execute as screenAreaUpdateMovedLayerService } from "@/screen/application/ScreenArea/service/ScreenAreaUpdateMovedLayerService";
+import { execute as screenDisplayObjectUpdateLayerMaskInElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectUpdateLayerMaskInElementUseCase";
 
 /**
  * @description レイヤーの移動を変更後に戻す
@@ -20,18 +21,18 @@ import { execute as screenAreaUpdateMovedLayerService } from "@/screen/applicati
  * @param  {number} after_index
  * @param  {number} after_mode
  * @param  {number} after_parent_id
- * @return {void}
+ * @return {Promise}
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space_id: number,
     library_id: number,
     before_index: number,
     after_index: number,
     after_mode: LayerModeImpl,
     after_parent_id: number
-): void => {
+): Promise<void> => {
 
     const workSpace = $getWorkSpace(work_space_id);
     if (!workSpace) {
@@ -96,5 +97,9 @@ export const execute = (
 
         // スクリーンの表示を更新
         screenAreaUpdateMovedLayerService(layer);
+
+        if (after_parent_id) {
+            await screenDisplayObjectUpdateLayerMaskInElementUseCase(movieClip, layer);
+        }
     }
 };
diff --git a/...neLayerController/MoveLayer/usecase/TimelineLayerControllerMoveLayerHistoryUndoUseCase.ts b/...neLayerController/MoveLayer/usecase/TimelineLayerControllerMoveLayerHistoryUndoUseCase.ts
@@ -9,6 +9,7 @@ import {
     $MASK_MODE
 } from "@/config/LayerModeConfig";
 import { execute as screenAreaUpdateMovedLayerService } from "@/screen/application/ScreenArea/service/ScreenAreaUpdateMovedLayerService";
+import { execute as screenDisplayObjectUpdateLayerMaskInElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectUpdateLayerMaskInElementUseCase";
 
 /**
  * @description レイヤーの移動を元に戻す
@@ -20,18 +21,18 @@ import { execute as screenAreaUpdateMovedLayerService } from "@/screen/applicati
  * @param  {number} after_index
  * @param  {number} before_mode
  * @param  {number} before_parent_id
- * @return {void}
+ * @return {Promise}
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space_id: number,
     library_id: number,
     before_index: number,
     after_index: number,
     before_mode: LayerModeImpl,
     before_parent_id: number
-): void => {
+): Promise<void> => {
 
     const workSpace = $getWorkSpace(work_space_id);
     if (!workSpace) {
@@ -50,6 +51,7 @@ export const execute = (
     }
 
     const layer = layers[0];
+    const parentId = layer.parentId;
     layer.mode     = before_mode;
     layer.parentId = before_parent_id;
 
@@ -97,5 +99,10 @@ export const execute = (
 
         // スクリーンの表示を更新
         screenAreaUpdateMovedLayerService(layer);
+
+        // マスク表示を更新
+        if (parentId > -1) {
+            await screenDisplayObjectUpdateLayerMaskInElementUseCase(movieClip, layer);
+        }
     }
 };
diff --git a/...reen/application/DisplayObject/service/ScreenDisplayObjectMaskLockUpdateElementService.ts b/...reen/application/DisplayObject/service/ScreenDisplayObjectMaskLockUpdateElementService.ts
@@ -1,17 +1,18 @@
+import type { Layer } from "@/core/domain/model/Layer";
 import { $MASK_MODE } from "@/config/LayerModeConfig";
 import { $SCREEN_STAGE_AREA_ID } from "@/config/ScreenConfig";
-import type { Layer } from "@/core/domain/model/Layer";
-
+import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
+import { execute as screenAreaAppendCharacterService } from "@/screen/application/ScreenArea/service/ScreenAreaAppendCharacterService";
 /**
  * @description マスクの表示と子のレイヤーの表示を更新
  *              Update mask display and child layer display
  *
  * @param  {Layer} layer
- * @return {void}
+ * @return {Promise}
  * @method
  * @public
  */
-export const execute = (layer: Layer): void =>
+export const execute = async (layer: Layer): Promise<void> =>
 {
     if (layer.mode !== $MASK_MODE) {
         return ;
@@ -35,15 +36,31 @@ export const execute = (layer: Layer): void =>
     // 配置がなければ終了
     const length = elements.length;
     if (!length) {
-        return ;
-    }
+        const workSpace = $getCurrentWorkSpace();
+        const movieClip = workSpace.scene;
 
-    for (let idx = 0; idx < length; ++idx) {
-        const node = elements[idx] as HTMLElement;
-        if (!node) {
-            continue ;
+        const activeCharacters = layer.getActiveCharacters(movieClip.currentFrame);
+        if (!activeCharacters.length) {
+            return ;
         }
 
-        node.style.display = layer.lock ? "none" : "";
+        // elmentが生成されてない場合は、レイヤー指定で再生成
+        for (let idx = 0; activeCharacters.length > idx; ++idx) {
+            const character = activeCharacters[idx];
+            if (!character) {
+                continue;
+            }
+
+            await screenAreaAppendCharacterService(character, layer);
+        }
+    } else {
+        for (let idx = 0; idx < length; ++idx) {
+            const node = elements[idx] as HTMLElement;
+            if (!node) {
+                continue ;
+            }
+
+            node.style.display = layer.lock ? "none" : "";
+        }
     }
 };
diff --git a/...n/application/DisplayObject/usecase/ScreenDisplayObjectUpdateLayerMaskInElementUseCase.ts b/...n/application/DisplayObject/usecase/ScreenDisplayObjectUpdateLayerMaskInElementUseCase.ts
@@ -28,7 +28,7 @@ export const execute = async (movie_clip: MovieClip, layer: Layer): Promise<void
     }
 
     // 親レイヤーが存在しない場合は、マスクのスタイルをリセット
-    if (!layer.parentId) {
+    if (layer.parentId === -1) {
         screenDisplayObjectAllResetMaskStyleUseCase(movie_clip, layer);
         return ;
     }

diff --git a/src/js/tool/application/RoundRectTool/usecase/RoundRectToolDrawRectPointerUpEventUseCase.ts b/src/js/tool/application/RoundRectTool/usecase/RoundRectToolDrawRectPointerUpEventUseCase.ts
@@ -67,7 +67,6 @@ export const execute = async (event: PointerEvent): Promise<void> =>
     // 非表示になる前の位置を取得
     const left = rectElement.offsetLeft;
     const top = rectElement.offsetTop;
-    console.log(left, top);
 
     // 範囲選択を非表示に
     drawRectHideService();