fix masked frame

pixijs · Mar 12, 2024 · da6b0b9 · da6b0b9
1 parent 8530323
commit da6b0b9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 20 deletions.
diff --git a/src/MaskedFrame.ts b/src/MaskedFrame.ts
@@ -22,11 +22,9 @@ export class MaskedFrame extends Container
 {
     /** Target container. */
     target: Container;
-
-    protected _targetMaskView = new Container();
+    border = new Graphics();
     protected _targetMask: Container;
     protected maskData: string | Graphics;
-    protected border: Graphics = new Graphics();
     protected borderWidth: number;
     protected borderColor: FillStyleInputs;
 
@@ -71,18 +69,8 @@ export class MaskedFrame extends Container
         this.maskData = mask;
 
         this._targetMask = getView(mask);
-        this._targetMaskView.addChild(this._targetMask);
-        this.addChild(this._targetMaskView);
-        this.target.mask = this._targetMaskView;
-    }
-
-    /** Updates mask position based on the border width. */
-    protected updateMask()
-    {
-        if (this._targetMask)
-        {
-            this._targetMaskView.position.set(this.borderWidth);
-        }
+        this.addChild(this._targetMask);
+        this.target.mask = this._targetMask;
     }
 
     /**
@@ -106,7 +94,7 @@ export class MaskedFrame extends Container
 
             this.mask = borderMask;
             this.addChild(borderMask);
-            this.updateMask();
+            this._targetMask.position.set(borderWidth);
         }
     }
 

diff --git a/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts b/src/stories/maskedFrame/MaskedFrameGraphics.stories.ts
@@ -6,7 +6,7 @@ import { argTypes, getDefaultArgs } from '../utils/argTypes';
 import { preload } from '../utils/loader';
 
 const args = {
-    borderColor: '#FF0FFF',
+    borderColor: '#FFFFFF',
     borderWidth: 10,
     radius: 250
 };

diff --git a/src/stories/select/SelectGraphics.stories.ts b/src/stories/select/SelectGraphics.stories.ts
@@ -1,4 +1,4 @@
-import { ColorSource, Container, Graphics, Sprite } from 'pixi.js';
+import { ColorSource, Container, Graphics, Sprite, TextStyle } from 'pixi.js';
 import { PixiStory, StoryFn } from '@pixi/storybook-renderer';
 import { Select } from '../../Select';
 import { centerElement } from '../../utils/helpers/resize';
@@ -36,7 +36,7 @@ export const UseGraphics: StoryFn<typeof args> = ({
         context,
         init: (view) =>
         {
-            const textStyle = { ...defaultTextStyle, fill: fontColor, fontSize };
+            const textStyle = { ...defaultTextStyle, fill: fontColor, fontSize } as TextStyle;
 
             const items = getItems(itemsAmount, 'Item');
 

diff --git a/src/stories/select/SelectSprite.stories.ts b/src/stories/select/SelectSprite.stories.ts
@@ -1,3 +1,4 @@
+import { TextStyle } from 'pixi.js';
 import { PixiStory, StoryFn } from '@pixi/storybook-renderer';
 import { Select } from '../../Select';
 import { centerElement } from '../../utils/helpers/resize';
@@ -27,7 +28,7 @@ export const UseSprite: StoryFn<typeof args> = (
 
             preload(assets).then(() =>
             {
-                const textStyle = { ...defaultTextStyle, fill: fontColor, fontSize };
+                const textStyle = { ...defaultTextStyle, fill: fontColor, fontSize } as TextStyle;
 
                 const items = getItems(itemsAmount, 'Item');