#147 feat: マスクレイヤー操作とスクリーンの表示を連携

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

Hide file tree

Showing 25 changed files with 351 additions and 184 deletions.
diff --git a/...ntroller/application/TransformSetting/usecase/TransformSettingXPointerMoveEventUseCase.ts b/...ntroller/application/TransformSetting/usecase/TransformSettingXPointerMoveEventUseCase.ts
@@ -28,7 +28,7 @@ export const execute = (event: PointerEvent): void =>
         return ;
     }
 
-    requestAnimationFrame((): void =>
+    requestAnimationFrame(async (): Promise<void> =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {
@@ -47,7 +47,7 @@ export const execute = (event: PointerEvent): void =>
         transformSetting.x += movementX;
 
         // スクリーンで選択中のElementを移動
-        screenDisplayObjectSelectedMoveElementUseCase(
+        await screenDisplayObjectSelectedMoveElementUseCase(
             movementX, 0
         );
 

diff --git a/...ntroller/application/TransformSetting/usecase/TransformSettingYPointerMoveEventUseCase.ts b/...ntroller/application/TransformSetting/usecase/TransformSettingYPointerMoveEventUseCase.ts
@@ -28,7 +28,7 @@ export const execute = (event: PointerEvent): void =>
         return ;
     }
 
-    requestAnimationFrame((): void =>
+    requestAnimationFrame(async (): Promise<void> =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {
@@ -47,7 +47,7 @@ export const execute = (event: PointerEvent): void =>
         transformSetting.y += movementX;
 
         // スクリーンで選択中のElementを移動
-        screenDisplayObjectSelectedMoveElementUseCase(
+        await screenDisplayObjectSelectedMoveElementUseCase(
             0, movementX
         );
 

diff --git a/src/js/core/application/Bitmap/usecase/BitmapCreateDisplayObjectElementUseCase.ts b/src/js/core/application/Bitmap/usecase/BitmapCreateDisplayObjectElementUseCase.ts
@@ -12,7 +12,7 @@ import { execute as instanceUpdateBlendModeService } from "@/core/application/In
 import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/application/ScreenArea/service/ScreenAreaHierarchyAdjustmentService";
 import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil";
 import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService";
-import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";
+import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
 
 /**
  * @description Bitmapをcanvasに描画して返却する
@@ -58,7 +58,7 @@ export const execute = async (
     div.appendChild(canvas);
 
     // マスクのスタイルを更新
-    await screenDisplayObjectUpdateMaskStyleService(div, layer, character.x, character.y);
+    await screenDisplayObjectUpdateMaskInCanvasStyleService(div, layer, character.x, character.y);
 
     // 追加するDisplayObjectのレイヤーの階層を調整
     if (!$getReDrawState()) {

diff --git a/src/js/core/application/MovieClip/usecase/MovieClipCreateDisplayObjectElementUseCase.ts b/src/js/core/application/MovieClip/usecase/MovieClipCreateDisplayObjectElementUseCase.ts
@@ -9,7 +9,7 @@ import { execute as instanceUpdateBlendModeService } from "@/core/application/In
 import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/application/ScreenArea/service/ScreenAreaHierarchyAdjustmentService";
 import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil";
 import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService";
-import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";
+import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
 
 /**
  * @description MovieClipをcanvasに描画して返却する
@@ -55,7 +55,7 @@ export const execute = async (
     div.appendChild(canvas);
 
     // マスクのスタイルを更新
-    await screenDisplayObjectUpdateMaskStyleService(div, layer, character.x, character.y);
+    await screenDisplayObjectUpdateMaskInCanvasStyleService(div, layer, character.x, character.y);
 
     // 追加するDisplayObjectのレイヤーの階層を調整
     if (!$getReDrawState()) {

diff --git a/src/js/core/application/Shape/usecase/ShapeCreateDisplayObjectElementUseCase.ts b/src/js/core/application/Shape/usecase/ShapeCreateDisplayObjectElementUseCase.ts
@@ -9,7 +9,7 @@ import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/applic
 import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService";
 import { execute as instanceUpdateBlendModeService } from "@/core/application/Instance/service/InstanceUpdateBlendModeService";
 import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil";
-import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";
+import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
 
 /**
  * @description Shapeをcanvasに描画して返却する
@@ -55,7 +55,7 @@ export const execute = async (
     div.appendChild(canvas);
 
     // マスクのスタイルを更新
-    await screenDisplayObjectUpdateMaskStyleService(div, layer, character.x, character.y);
+    await screenDisplayObjectUpdateMaskInCanvasStyleService(div, layer, character.x, character.y);
 
     // 追加するDisplayObjectのレイヤーの階層を調整
     if (!$getReDrawState()) {

diff --git a/src/js/external/core/application/ExternalLayer/usecase/ExternalLayerUpdateDisableUseCase.ts b/src/js/external/core/application/ExternalLayer/usecase/ExternalLayerUpdateDisableUseCase.ts
@@ -54,9 +54,6 @@ export const execute = async (
         // レイヤーの表示Elementを更新
         timelineLayerControllerUpdateDisableIconElementService(layer);
 
-        // 非表示にしたアイテムを表示・非表示に合わせて更新
-        screenDisplayObjectUpdateDisabledElementUseCase(movie_clip, layer);
-
         // 選択範囲のElementの表示を更新
         targetRectUpdateElementUseCase();
 
@@ -65,6 +62,9 @@ export const execute = async (
 
         // プロパティエリアの表示を更新
         propertyAreaChangeDisplayUseCase();
+
+        // 非表示にしたアイテムを表示・非表示に合わせて更新
+        await screenDisplayObjectUpdateDisabledElementUseCase(movie_clip, layer);
     }
 
     // 受け取り処理ではなく、画面共有していれば共有者に送信

diff --git a/src/js/external/core/application/ExternalLayer/usecase/ExternalLayerUpdateLockUseCase.ts b/src/js/external/core/application/ExternalLayer/usecase/ExternalLayerUpdateLockUseCase.ts
@@ -10,7 +10,8 @@ import { execute as screenDisplayObjectChangeElementClassService } from "@/scree
 import { execute as targetRectUpdateElementUseCase } from "@/screen/application/TargetRect/usecase/TargetRectUpdateElementUseCase";
 import { execute as screenStandardPointDeployElementUseCase } from "@/screen/application/StandardPoint/usecase/ScreenStandardPointDeployElementUseCase";
 import { execute as propertyAreaChangeDisplayUseCase } from "@/controller/application/PropertyArea/usecase/PropertyAreaChangeDisplayUseCase";
-import { execute as screenDisplayObjectUpdateMaskAndMaskInElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectUpdateMaskAndMaskInElementUseCase";
+import { execute as screenDisplayObjectMaskLockUpdateElementService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectMaskLockUpdateElementService";
+import { execute as screenDisplayObjectUpdateLayerMaskElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectUpdateLayerMaskElementUseCase";
 
 /**
  * @description レイヤーのロック情報を更新
@@ -20,7 +21,7 @@ import { execute as screenDisplayObjectUpdateMaskAndMaskInElementUseCase } from
  * @param  {MovieClip} movie_clip
  * @param  {Layer} layer
  * @param  {boolean} value
- * @return {void}
+ * @return {Promise}
  * @method
  * @public
  */
@@ -68,7 +69,10 @@ export const execute = async (
         propertyAreaChangeDisplayUseCase();
 
         // マスクレイヤーなら、子レイヤーの表示を更新
-        await screenDisplayObjectUpdateMaskAndMaskInElementUseCase(movie_clip, layer);
+        screenDisplayObjectMaskLockUpdateElementService(layer);
+
+        // マスクインのレイヤーのDisplayObjectのElemnet表示を更新
+        screenDisplayObjectUpdateLayerMaskElementUseCase(layer);
     }
 
     // 受け取り処理ではなく、画面共有していれば共有者に送信

diff --git a/src/js/external/core/domain/model/ExternalLayer.ts b/src/js/external/core/domain/model/ExternalLayer.ts
@@ -125,7 +125,7 @@ export class ExternalLayer
      *
      * @param  {boolean} lock
      * @param  {boolean} [receiver = false]
-     * @return {void}
+     * @return {Promise}
      * @method
      * @public
      */

diff --git a/...alTimelineLayerController/usecase/ExternalTimelineLayerControllerBehindRelationUseCase.ts b/...alTimelineLayerController/usecase/ExternalTimelineLayerControllerBehindRelationUseCase.ts
@@ -11,6 +11,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 マスク、ガイドレイヤーの親子関係を考慮してレイヤーを移動
@@ -23,11 +24,11 @@ import { execute as screenAreaUpdateMovedLayerService } from "@/screen/applicati
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space: WorkSpace,
     movie_clip: MovieClip,
     index: number
-): void => {
+): Promise<void> => {
 
     // 移動先のレイヤーを取得
     const distLayer = movie_clip.getLayer(index);
@@ -78,6 +79,11 @@ export const execute = (
     // MovieClipのレイヤー配列を取得
     const layers = movie_clip.layers;
 
+    const parentLayer = movie_clip.getLayerById(parentId);
+    if (!parentLayer) {
+        return ;
+    }
+
     // レイヤーの移動を実行
     for (let idx = 0; idx < selectedLayers.length; idx++) {
 
@@ -111,6 +117,9 @@ export const execute = (
             layers.splice(afterIndex, 0, layer);
         }
 
+        // マスクレイヤーへの移動で、新規の子レイヤーの場合はstyleを更新
+        const maskReload = mode === 2 && layer.parentId !== parentId;
+
         // 変更前のレイヤー情報を取得
         const beforeMode     = layer.mode;
         const beforeParentId = layer.parentId;
@@ -131,25 +140,22 @@ export const execute = (
             beforeParentId
         );
 
-        // アクティブならアイコン表示を更新
         if (work_space.active && movie_clip.active) {
+            // アクティブならアイコン表示を更新
             timelineLayerControllerUpdateIconElementService(layer);
+
+            // スクリーンのElementの階層を更新
+            screenAreaUpdateMovedLayerService(layer);
+
+            if (maskReload) {
+                await screenDisplayObjectUpdateLayerMaskInElementUseCase(movie_clip, layer);
+            }
         }
     }
 
     // タイムラインを再描画
     if (work_space.active && movie_clip.active) {
         // タイムラインのelementを再構築
         timelineLayerBuildElementUseCase();
-
-        // スクリーンの表示を更新
-        for (let idx = 0; idx < selectedLayers.length; idx++) {
-            const layer = selectedLayers[idx];
-            if (!layer) {
-                continue;
-            }
-
-            screenAreaUpdateMovedLayerService(layer);
-        }
     }
 };
diff --git a/...n/ExternalTimelineLayerController/usecase/ExternalTimelineLayerControllerBehindUseCase.ts b/...n/ExternalTimelineLayerController/usecase/ExternalTimelineLayerControllerBehindUseCase.ts
@@ -21,11 +21,11 @@ import {
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space: WorkSpace,
     movie_clip: MovieClip,
     index: number
-): void => {
+): Promise<void> => {
 
     // 選択中のレイヤーがなければ終了
     if (!movie_clip.selectedLayers.length) {
@@ -42,7 +42,7 @@ export const execute = (
 
         case $MASK_MODE: // マスクレイヤー
         case $GUIDE_MODE: // ガイドレイヤー
-            externalTimelineLayerControllerBehindRelationUseCase(
+            await externalTimelineLayerControllerBehindRelationUseCase(
                 work_space,
                 movie_clip,
                 index
@@ -51,7 +51,7 @@ export const execute = (
 
         case $MASK_IN_MODE: // マスクの子レイヤー
         case $GUIDE_IN_MODE: // ガイドの子レイヤー
-            externalTimelineLayerControllerCheckTerminateRelationshipUseCase(
+            await externalTimelineLayerControllerCheckTerminateRelationshipUseCase(
                 work_space,
                 movie_clip,
                 index

diff --git a/...yerController/usecase/ExternalTimelineLayerControllerCheckTerminateRelationshipUseCase.ts b/...yerController/usecase/ExternalTimelineLayerControllerCheckTerminateRelationshipUseCase.ts
@@ -5,6 +5,7 @@ import { execute as timelineLayerBuildElementUseCase } from "@/timeline/applicat
 import { execute as timelineLayerControllerMoveLayerHistoryUseCase } from "@/history/application/timeline/application/TimelineLayerController/MoveLayer/usecase/TimelineLayerControllerMoveLayerHistoryUseCase";
 import { timelineLayer } from "@/timeline/domain/model/TimelineLayer";
 import { execute as screenAreaUpdateMovedLayerService } from "@/screen/application/ScreenArea/service/ScreenAreaUpdateMovedLayerService";
+import { execute as screenDisplayObjectAllResetMaskStyleUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectAllResetMaskStyleUseCase";
 
 /**
  * @description レイヤーの親子関係性をチェックする
@@ -13,15 +14,15 @@ import { execute as screenAreaUpdateMovedLayerService } from "@/screen/applicati
  * @param  {WorkSpace} work_space
  * @param  {MovieClip} movie_clip
  * @param  {number} index
- * @return {void}
+ * @return {Promise}
  * @method
  * @public
  */
-export const execute = (
+export const execute = async (
     work_space: WorkSpace,
     movie_clip: MovieClip,
     index: number
-): void => {
+): Promise<void> => {
 
     if (timelineLayer.exitMode) {
 
@@ -90,26 +91,25 @@ export const execute = (
 
             // 移動したレイヤーを挿入先のレイヤーに更新
             targetLayer = layer;
+
+            // スクリーンの表示を更新
+            if (work_space.active && movie_clip.active) {
+                // レイヤーの表示を更新
+                screenAreaUpdateMovedLayerService(layer);
+
+                // レイヤーに配置された全てのDisplayObjectのマスクスタイルをリセット
+                screenDisplayObjectAllResetMaskStyleUseCase(movie_clip, layer);
+            }
         }
 
         if (work_space.active && movie_clip.active) {
             // タイムラインのelementを再構築
             timelineLayerBuildElementUseCase();
-
-            // スクリーンの表示を更新
-            for (let idx = 0; idx < selectedLayers.length; idx++) {
-                const layer = selectedLayers[idx];
-                if (!layer) {
-                    continue;
-                }
-
-                screenAreaUpdateMovedLayerService(layer);
-            }
         }
 
     }  else {
         // 親子関係の解除がなければ通常の移動処理を行う
-        externalTimelineLayerControllerBehindRelationUseCase(
+        await externalTimelineLayerControllerBehindRelationUseCase(
             work_space,
             movie_clip,
             index

diff --git a/src/js/external/timeline/domain/model/ExternalTimeline.ts b/src/js/external/timeline/domain/model/ExternalTimeline.ts
@@ -367,13 +367,13 @@ export class ExternalTimeline
      *              Move the selected layer behind the specified index value
      *
      * @param  {number} index
-     * @return {void}
+     * @return {Promise}
      * @method
      * @public
      */
-    behindLayer (index: number): void
+    async behindLayer (index: number): Promise<void>
     {
-        externalTimelineLayerControllerBehindUseCase(
+        await externalTimelineLayerControllerBehindUseCase(
             this._$workSpace,
             this._$movieClip,
             index

diff --git a/...ayObjectChangeElementEventService.test.ts → ...ayObjectChangeElementClassService.test.ts b/...ayObjectChangeElementEventService.test.ts → ...ayObjectChangeElementClassService.test.ts
diff --git a/...reen/application/DisplayObject/service/ScreenDisplayObjectMaskLockUpdateElementService.ts b/...reen/application/DisplayObject/service/ScreenDisplayObjectMaskLockUpdateElementService.ts
@@ -0,0 +1,49 @@
+import { $MASK_MODE } from "@/config/LayerModeConfig";
+import { $SCREEN_STAGE_AREA_ID } from "@/config/ScreenConfig";
+import type { Layer } from "@/core/domain/model/Layer";
+
+/**
+ * @description マスクの表示と子のレイヤーの表示を更新
+ *              Update mask display and child layer display
+ *
+ * @param  {Layer} layer
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (layer: Layer): void =>
+{
+    if (layer.mode !== $MASK_MODE) {
+        return ;
+    }
+
+    // 非表示設定なら終了
+    if (layer.disable) {
+        return ;
+    }
+
+    const element: HTMLElement | null = document
+        .getElementById($SCREEN_STAGE_AREA_ID);
+
+    if (!element) {
+        return ;
+    }
+
+    const elements = element
+        .querySelectorAll(`.layer-id-${layer.id}`);
+
+    // 配置がなければ終了
+    const length = elements.length;
+    if (!length) {
+        return ;
+    }
+
+    for (let idx = 0; idx < length; ++idx) {
+        const node = elements[idx] as HTMLElement;
+        if (!node) {
+            continue ;
+        }
+
+        node.style.display = layer.lock ? "none" : "";
+    }
+};