fix button

pixijs · Oct 6, 2023 · 7a5f1a1 · 7a5f1a1
1 parent 05d0dfc
commit 7a5f1a1
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/src/Button.ts b/src/Button.ts
@@ -1,4 +1,4 @@
-import { Sprite, Graphic } from "pixi.js";
+import { Container } from 'pixi.js';
 import { ButtonEvents } from './ButtonEvents';
 import { Mixin } from 'ts-mixer';
 
@@ -105,7 +105,7 @@ export class ButtonContainer extends Mixin(Container, Button)
     {
         super();
 
-        this.view = this;
+        this._view = this;
         this.enabled = true;
 
         if (view)

diff --git a/src/ButtonEvents.ts b/src/ButtonEvents.ts
@@ -1,7 +1,5 @@
-import { FederatedPointerEvent } from '@pixi/events';
-import { isMobile, utils } from '@pixi/core';
+import { FederatedPointerEvent, isMobile, Container } from 'pixi.js';
 import { Signal } from 'typed-signals';
-import { Container } from '@pixi/display';
 
 /** Events controller used for {@link Button}. */
 export class ButtonEvents
@@ -40,7 +38,7 @@ export class ButtonEvents
 
     protected connectEvents(view: Container)
     {
-        if (utils.isMobile.any)
+        if (isMobile.any)
         {
             view.on('pointerdown', this.processDown, this);
             view.on('pointerup', this.processUp, this);
@@ -62,7 +60,7 @@ export class ButtonEvents
 
     protected disconnectEvents(view: Container)
     {
-        if (utils.isMobile.any)
+        if (isMobile.any)
         {
             view.off('pointerdown', this.processDown, this);
             view.off('pointerup', this.processUp, this);

diff --git a/src/tests/main.ts b/src/tests/main.ts
@@ -1,5 +1,6 @@
-import { Container, Text } from 'pixi.js';
+import { Container, Graphics, Text } from 'pixi.js';
 import { initPixi } from './utils/pixi';
+import { Button } from '../Button';
 
 // eslint-disable-next-line no-new
 new class App
@@ -27,11 +28,18 @@ new class App
     private addSubscriptions()
     {
         window.addEventListener('resize', () => this.resize());
-        window.addEventListener('deviceorientation', () => this.resize());
+        window.addEventListener('deviceorientation', () => this.resize(), true);
         this.resize();
     }
 
     private createElements()
+    {
+        const button = this.createButton();
+
+        button.onPress.connect(() => console.log('onPress'));
+    }
+
+    private createButton(): Button
     {
         const text = new Text({ text: 'Pixi 8' });
 
@@ -41,7 +49,20 @@ new class App
             fill: 0xffffff
         };
 
-        this.view.addChild(text);
+        const graphics = new Graphics()
+            .roundRect(0, 0, text.width + 100, text.height + 20, 25)
+            .fill(0xde3249);
+
+        graphics.x = -graphics.width / 2;
+        graphics.y = -graphics.height / 2;
+
+        const buttonContainer = new Container();
+
+        buttonContainer.addChild(graphics, text);
+
+        this.view.addChild(buttonContainer);
+
+        return new Button(this.view);
     }
 
     private resize(width = window.innerWidth, height = window.innerHeight)

diff --git a/src/tests/utils/pixi.ts b/src/tests/utils/pixi.ts
@@ -7,6 +7,7 @@ export async function initPixi(options?: Partial<ApplicationOptions>): Promise<A
     await app.init({
         resizeTo: window,
         background: 0x000000,
+        antialias: true,
         ...options
     });