fix: simplify masking (#10531)

* simplify masking * tidy
pixijs · May 14, 2024 · cb418be · cb418be
1 parent c31ba5a
commit cb418be
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/src/events/EventBoundary.ts b/src/events/EventBoundary.ts
@@ -574,7 +574,7 @@ export class EventBoundary
      * Checks whether the container or any of its children cannot pass the hit test at all.
      *
      * {@link EventBoundary}'s implementation uses the {@link Container.hitArea hitArea}
-     * and {@link Container._mask} for pruning.
+     * and {@link Container._maskEffect} for pruning.
      * @param container - The container to prune.
      * @param location - The location to test for overlap.
      */

diff --git a/src/rendering/mask/MaskEffectManager.ts b/src/rendering/mask/MaskEffectManager.ts
@@ -10,6 +10,8 @@ interface MaskConversionTest
     maskClass: new (item: any) => Effect & PoolItem;
 }
 
+export type MaskEffect = {mask: unknown} & Effect;
+
 /**
  * A class that manages the conversion of masks to mask effects.
  * @memberof rendering
@@ -44,7 +46,7 @@ export class MaskEffectManagerClass
         this._tests.push(test);
     }
 
-    public getMaskEffect(item: any): Effect
+    public getMaskEffect(item: any): MaskEffect
     {
         if (!this._initialized) this.init();
 
@@ -54,7 +56,7 @@ export class MaskEffectManagerClass
 
             if (test.test(item))
             {
-                return BigPool.get(test.maskClass as PoolItemConstructor<Effect & PoolItem>, item);
+                return BigPool.get(test.maskClass as PoolItemConstructor<MaskEffect & PoolItem>, item);
             }
         }
 

diff --git a/src/scene/container/Container.ts b/src/scene/container/Container.ts
@@ -1345,7 +1345,7 @@ export class Container<C extends ContainerChild = ContainerChild> extends EventE
 
         this.removeFromParent();
         this.parent = null;
-        this._mask = null;
+        this._maskEffect = null;
         this._filterEffect = null;
         this.effects = null;
         this._position = null;

diff --git a/src/scene/container/container-mixins/effectsMixin.ts b/src/scene/container/container-mixins/effectsMixin.ts
@@ -3,6 +3,7 @@ import { MaskEffectManager } from '../../../rendering/mask/MaskEffectManager';
 
 import type { Filter } from '../../../filters/Filter';
 import type { Rectangle } from '../../../maths/shapes/Rectangle';
+import type { MaskEffect } from '../../../rendering/mask/MaskEffectManager';
 import type { Container } from '../Container';
 import type { Effect } from '../Effect';
 
@@ -13,16 +14,18 @@ export interface EffectsMixinConstructor
 }
 export interface EffectsMixin extends Required<EffectsMixinConstructor>
 {
-    _mask?: {mask: unknown, effect: Effect};
+    _maskEffect?: MaskEffect;
     _filterEffect?: FilterEffect,
+
     filterArea?: Rectangle,
     effects?: Effect[];
+
     addEffect(effect: Effect): void;
     removeEffect(effect: Effect): void;
 }
 
 export const effectsMixin: Partial<Container> = {
-    _mask: null,
+    _maskEffect: null,
     _filterEffect: null,
 
     /**
@@ -79,28 +82,22 @@ export const effectsMixin: Partial<Container> = {
 
     set mask(value: number | Container | null)
     {
-        this._mask ||= { mask: null, effect: null };
+        const effect = this._maskEffect;
 
-        if (this._mask.mask === value) return;
+        if (effect?.mask === value) return;
 
-        if (this._mask.effect)
+        if (effect)
         {
-            this.removeEffect(this._mask.effect);
-
-            MaskEffectManager.returnMaskEffect(this._mask.effect);
+            this.removeEffect(effect);
 
-            this._mask.effect = null;
+            MaskEffectManager.returnMaskEffect(effect);
         }
 
-        this._mask.mask = value;
-
         if (value === null || value === undefined) return;
 
-        const effect = MaskEffectManager.getMaskEffect(value);
-
-        this._mask.effect = effect;
+        this._maskEffect = MaskEffectManager.getMaskEffect(value);
 
-        this.addEffect(effect);
+        this.addEffect(this._maskEffect);
     },
 
     /**
@@ -126,7 +123,7 @@ export const effectsMixin: Partial<Container> = {
      */
     get mask(): unknown
     {
-        return this._mask?.mask;
+        return this._maskEffect?.mask;
     },
 
     set filters(value: Filter | Filter[] | null | undefined)