94 FancyButton & ButtonContainer does not recognised as Container

package.json

@@ -61,25 +61,24 @@
         "docsKeyword": "PixiJS, UI, components"
     },
     "dependencies": {
-        "ts-mixer": "^6.0.3",
         "tweedle.js": "^2.1.0",
         "typed-signals": "^2.5.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-typescript": "^7.18.6",
-        "@pixi/eslint-config": "^4.0.1",
-        "@pixi/extension-scripts": "^1.3.0",
         "@pixi/core": "^7.3.1",
         "@pixi/display": "^7.3.1",
+        "@pixi/eslint-config": "^4.0.1",
         "@pixi/events": "^7.3.1",
+        "@pixi/extension-scripts": "^1.3.0",
         "@pixi/graphics": "^7.3.1",
         "@pixi/sprite": "^7.3.1",
+        "@pixi/storybook-renderer": "^0.0.6",
+        "@pixi/storybook-webpack5": "^0.0.6",
         "@pixi/text": "^7.3.1",
         "@pixi/text-bitmap": "^7.3.1",
         "@pixi/text-html": "^7.3.1",
-        "@pixi/storybook-renderer": "^0.0.6",
-        "@pixi/storybook-webpack5": "^0.0.6",
         "@storybook/addon-essentials": "7.5.1",
         "@storybook/addon-interactions": "7.5.1",
         "@storybook/addon-links": "7.5.1",

src/Button.ts

@@ -1,6 +1,7 @@
 import { Container } from '@pixi/display';
 import { ButtonEvents } from './ButtonEvents';
-import { Mixin } from 'ts-mixer';
+import { Signal } from 'typed-signals';
+import { FederatedPointerEvent } from '@pixi/events';
 
 /**
  * Adds button events to a given container-based view
@@ -99,18 +100,35 @@
  *
  * container.addChild(button);
  */
-export class ButtonContainer extends Mixin(Container, Button)
+export class ButtonContainer extends Container
 {
+    button: Button;
+
+    onDown: Signal<(btn?: Button, e?: FederatedPointerEvent) => void>;
+    onUp: Signal<(btn?: Button, e?: FederatedPointerEvent) => void>;
+    onUpOut: Signal<(btn?: Button, e?: FederatedPointerEvent) => void>;
+    onOut: Signal<(btn?: Button, e?: FederatedPointerEvent) => void>;
+    onPress: Signal<(btn?: Button, e?: FederatedPointerEvent) => void>;
+    onHover: Signal<(btn?: Button, e?: FederatedPointerEvent) => void>;
+
     constructor(view?: Container)
     {
         super();
 
-        this.view = this;
-        this.enabled = true;
+        this.button = new Button(this);
+
+        this.button.enabled = true;
 
         if (view)
         {
             this.addChild(view);
         }
+
+        this.onPress = this.button.onPress;
+        this.onDown = this.button.onDown;
+        this.onUp = this.button.onUp;
+        this.onHover = this.button.onHover;
+        this.onOut = this.button.onOut;
+        this.onUpOut = this.button.onUpOut;
     }
 }

src/FancyButton.ts

@@ -1,4 +1,4 @@
 import { ObservablePoint, Ticker, Rectangle, utils } from '@pixi/core';
 import { Container } from '@pixi/display';
 import { Sprite } from '@pixi/sprite';
 import { getView } from './utils/helpers/view';
@@ -236,16 +236,16 @@
      * Setter, that prevents all button events from firing.
      * @param {boolean} enabled
      */
-    override set enabled(enabled: boolean)
+    set enabled(enabled: boolean)
     {
-        super.enabled = enabled;
+        this.button.enabled = enabled;
 
         this.setState(enabled ? 'default' : 'disabled');
     }
 
-    override get enabled(): boolean
+    get enabled(): boolean
     {
-        return super.enabled;
+        return this.button.enabled;
     }
 
     /**
@@ -390,6 +390,11 @@
 
         const activeView = this.getStateView(state);
 
+        if (!activeView)
+        {
+            return;
+        }
+
         fitToView(activeView, this._views.iconView, this.padding);
 
         (this._views.iconView as Sprite).anchor?.set(0);
@@ -590,6 +595,9 @@
     set iconView(view: ButtonView | null)
     {
         if (view === undefined) return;
+        console.log({
+            view
+        });
 
         this.removeView('iconView');
 
@@ -605,7 +613,6 @@
             this.innerView.addChild(this._views.iconView);
         }
 
-        this.updateAnchor();
         this.setState(this.state, true);
     }
 
@@ -691,7 +698,7 @@
 
         this.onOut.connect(() =>
         {
-            if (!this.isDown)
+            if (!this.button.isDown)
             {
                 this.setState('default');
             }
@@ -706,7 +713,7 @@
 
         this.onHover.connect(() =>
         {
-            if (!this.isDown)
+            if (!this.button.isDown)
             {
                 utils.isMobile.any
                     ? this.setState('default')