Breaking: Pixi v8 update

.eslintrc.json

@@ -14,11 +14,9 @@
         }
     },
     "rules": {
-        "no-restricted-imports": ["error", { "paths": ["pixi.js"] }],
         "@typescript-eslint/no-unused-expressions": [1, {"allowShortCircuit": true, "allowTernary": true}],
         "no-mixed-operators": "off",
         "no-mixed-operators/no-mixed-operators": 1,
-        "@typescript-eslint/no-parameter-properties": 1,
         "@typescript-eslint/type-annotation-spacing": 1,
         "jsdoc/multiline-blocks": [
             1,
@@ -33,7 +31,6 @@
         "jsdoc/check-values": 1,
         "jsdoc/empty-tags": 1,
         "jsdoc/implements-on-classes": 1,
-        "jsdoc/newline-after-description": [1, "never"],
         "jsdoc/no-multi-asterisks": [1, { "allowWhitespace": true }],
         "jsdoc/require-param": 1,
         "jsdoc/require-param-description": 0,

README.md

@@ -12,6 +12,16 @@ Here are some useful resources:
 
 **We are now a part of the [Open Collective](https://opencollective.com/pixijs) and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!**
 
+## Compatibility
+
+Depending on your version of PixiJS, you'll need to figure out which major version of PixiJS UI to use.
+
+| PixiJS      | PixiJS UI      |
+|-------------|----------------|
+| v7.x        | v1.x           |
+| v8.x        | v2.x           |
+
+
 ## Install
 
 ```sh

package.json

@@ -26,7 +26,7 @@
         "dist/"
     ],
     "scripts": {
-        "start": "storybook dev -p 6006",
+        "start": "npm run storybook",
         "build": "xs build",
         "clean": "xs clean",
         "deploy": "xs deploy",
@@ -60,53 +60,38 @@
         "docsDescription": "API Documentation for UI components made with PixiJS",
         "docsKeyword": "PixiJS, UI, components"
     },
+    "peerDependencies": {
+        "pixi.js": "^8.0.2"
+    },
     "dependencies": {
         "tweedle.js": "^2.1.0",
         "typed-signals": "^2.5.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-typescript": "^7.18.6",
-        "@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/mesh-extras": "^7.3.2",
-        "@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",
-        "@storybook/addon-essentials": "7.5.2",
-        "@storybook/addon-interactions": "7.5.2",
-        "@storybook/addon-links": "7.5.2",
-        "@storybook/addon-storysource": "^7.5.2",
+        "@pixi/extension-scripts": "^2.4.1",
+        "@pixi/storybook-renderer": "^0.1.0",
+        "@pixi/storybook-webpack5": "^0.1.0",
+        "@storybook/addon-essentials": "7.6.17",
+        "@storybook/addon-interactions": "7.6.17",
+        "@storybook/addon-links": "7.6.17",
+        "@storybook/addon-storysource": "^7.6.17",
         "@storybook/testing-library": "^0.2.2",
-        "@types/babel__core": "^7.1.20",
-        "@types/jest": "^29.2.4",
-        "@types/node": "^18.11.17",
-        "eslint": "^8.30.0",
-        "eslint-plugin-jsdoc": "^39.6.4",
+        "@storybook/types": "^7.6.17",
+        "@types/babel__core": "^7.20.5",
+        "@types/jest": "^29.5.12",
+        "@types/node": "^18.19.22",
+        "eslint": "^8.57.0",
+        "eslint-plugin-jsdoc": "^48.2.1",
         "eslint-plugin-no-mixed-operators": "^1.1.1",
-        "husky": "^8.0.0",
+        "husky": "^8.0.3",
         "jest": "^26.6.3",
         "jest-raw-loader": "^1.0.1",
-        "lint-staged": "^13.1.0",
-        "storybook": "7.5.2",
-        "typescript": "^5.2.0"
-    },
-    "peerDependencies": {
-        "@pixi/core": "^7.3.1",
-        "@pixi/display": "^7.3.1",
-        "@pixi/events": "^7.3.1",
-        "@pixi/graphics": "^7.3.1",
-        "@pixi/sprite": "^7.3.1",
-        "@pixi/text": "^7.3.1",
-        "@pixi/text-bitmap": "^7.3.1",
-        "@pixi/text-html": "^7.3.1"
+        "lint-staged": "^13.3.0",
+        "storybook": "7.6.17",
+        "pixi.js": "^8.0.2",
+        "typescript": "^5.4.2"
     },
     "publishConfig": {
         "access": "public"

src/Button.ts

@@ -1,7 +1,6 @@
-import { Container } from '@pixi/display';
-import { ButtonEvents } from './ButtonEvents';
+import { Container, FederatedPointerEvent } from 'pixi.js';
 import { Signal } from 'typed-signals';
-import { FederatedPointerEvent } from '@pixi/events';
+import { ButtonEvents } from './ButtonEvents';
 
 /**
  * Adds button events to a given container-based view
@@ -11,14 +10,13 @@ import { FederatedPointerEvent } from '@pixi/events';
  * const container = new Container();
  * const button = new Button(
  *      new Graphics()
- *          .beginFill(0xFFFFFF)
- *          .drawRoundedRect(0, 0, 100, 50, 15)
+ *          .rect(0, 0, 100, 50, 15)
+ *          .fill(0xFFFFFF)
  * );
  *
  * button.onPress.connect(() => console.log('onPress'));
  *
  * container.addChild(button.view);
- * // or container.addChild(container); which is the same
  */
 export class Button extends ButtonEvents
 {
@@ -92,8 +90,8 @@ export class Button extends ButtonEvents
  * @example
  * const button = new ButtonContainer(
  *      new Graphics()
- *          .beginFill(0xFFFFFF)
- *          .drawRoundedRect(0, 0, 100, 50, 15)
+ *          .fill(0xFFFFFF)
+ *          .roundRect(0, 0, 100, 50, 15)
  * );
  *
  * button.onPress.connect(() => console.log('onPress'));

src/ButtonEvents.ts

@@ -1,7 +1,5 @@
-import { FederatedPointerEvent } from '@pixi/events';
-import { isMobile, utils } from '@pixi/core';
+import { Container, FederatedPointerEvent, isMobile } 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);

src/CheckBox.ts

@@ -1,5 +1,4 @@
-import { Container } from '@pixi/display';
-import { Text } from '@pixi/text';
+import { Container, Text } from 'pixi.js';
 import { Signal } from 'typed-signals';
 import { Switcher } from './Switcher';
 import { cleanup } from './utils/helpers/cleanup';
@@ -36,7 +35,7 @@ export type CheckBoxOptions = {
 export class CheckBox extends Switcher
 {
     //* Text label */
-    label!: PixiText;
+    labelText!: PixiText;
 
     /** Signal emitted when checkbox state changes. */
     onCheck: Signal<(state: boolean) => void>;
@@ -68,31 +67,34 @@ export class CheckBox extends Switcher
     {
         if (!text) return;
 
-        this.label = new this._textClass(text ?? '', style ?? this._style?.text);
-        this.addChild(this.label);
+        this.labelText = new this._textClass({
+            text: text ?? '',
+            style: style ?? this._style?.text,
+        });
+        this.addChild(this.labelText);
 
-        this.label.cursor = 'pointer';
-        this.label.eventMode = 'static';
-        this.label.on('pointertap', () => (this.checked = !this.checked));
+        this.labelText.cursor = 'pointer';
+        this.labelText.eventMode = 'static';
+        this.labelText.on('pointertap', () => (this.checked = !this.checked));
     }
 
     /** Setter, which sets a checkbox text. */
     set text(text: string)
     {
         if (!text)
         {
-            cleanup(this.label);
+            cleanup(this.labelText);
 
             return;
         }
 
-        this.label ? (this.label.text = text) : this.addLabel(text);
+        this.labelText ? (this.labelText.text = text) : this.addLabel(text);
     }
 
     /** Getter, which returns a checkbox text. */
     get text(): string | ''
     {
-        return this.label?.text ?? '';
+        return this.labelText?.text ?? '';
     }
 
     /** Setter, which sets a checkbox style settings. */
@@ -120,22 +122,21 @@ export class CheckBox extends Switcher
             uncheckedView.visible = true;
         }
 
-        if (this.label)
+        if (this.labelText)
         {
+            checkedView.visible = true;
+            this.active = 1;
             if (style.text)
             {
-                if ('style' in this.label)
-                {
-                    this.label.style = style.text;
-                }
-                else
-                {
-                    Object.assign(this.label, style.text);
-                }
+                this.labelText.style = style.text;
             }
 
-            this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0);
-            this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0);
+            this.labelText.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0);
+            this.labelText.y = ((uncheckedView.height - this.labelText.height) / 2) + (style.textOffset?.y ?? 0);
+        }
+        else
+        {
+            uncheckedView.visible = true;
         }
     }
 

src/CircularProgressBar.ts

@@ -1,16 +1,14 @@
-import { DEG_TO_RAD } from '@pixi/core';
-import { Container } from '@pixi/display';
-import { Graphics, LINE_CAP } from '@pixi/graphics';
+import { ColorSource, Container, DEG_TO_RAD, Graphics, LineCap } from 'pixi.js';
 
 export type MaskedProgressBarOptions = {
-    backgroundColor?: number;
-    fillColor: number;
+    backgroundColor?: ColorSource;
+    fillColor: ColorSource;
     lineWidth: number;
     radius: number;
     value?: number;
     backgroundAlpha?: number;
     fillAlpha?: number;
-    cap?: 'butt' | 'round' | 'square';
+    cap?: LineCap;
 };
 
 /**
@@ -42,8 +40,8 @@ export class CircularProgressBar extends Container
     /**
      * Creates a Circular ProgressBar.
      * @param { number } options - Options object to use.
-     * @param { number } options.backgroundColor - Background color.
-     * @param { number } options.fillColor - Fill color.
+     * @param { ColorSource } options.backgroundColor - Background color.
+     * @param { ColorSource } options.fillColor - Fill color.
      * @param { number } options.lineWidth - Line width.
      * @param { number } options.radius - Radius.
      * @param { number } options.value - Progress value.
@@ -90,11 +88,13 @@ export class CircularProgressBar extends Container
             alpha = 0.000001;
         }
 
-        this.bgCircle.lineStyle({
-            width: lineWidth,
-            color: backgroundColor,
-            alpha
-        }).drawCircle(0, 0, radius);
+        this.bgCircle
+            .circle(0, 0, radius)
+            .stroke({
+                width: lineWidth,
+                color: backgroundColor,
+                alpha
+            });
     }
 
     /**
@@ -135,13 +135,13 @@ export class CircularProgressBar extends Container
 
         this.fillCircle
             .clear()
-            .lineStyle({
+            .arc(0, 0, radius, (0 - 90 + startAngle) * DEG_TO_RAD, (0 - 90 + startAngle + endAngle) * DEG_TO_RAD)
+            .stroke({
                 width: lineWidth,
                 color: fillColor,
-                cap: cap as LINE_CAP,
+                cap,
                 alpha: fillAlpha
-            })
-            .arc(0, 0, radius, (0 - 90 + startAngle) * DEG_TO_RAD, (0 - 90 + startAngle + endAngle) * DEG_TO_RAD);
+            });
     }
 
     /**

src/DoubleSlider.ts

@@ -1,8 +1,8 @@
-import { FederatedPointerEvent } from '@pixi/events';
-import type { DragObject } from './utils/HelpTypes';
-import { DoubleSliderOptions, SliderBase } from './SliderBase';
+import { Container, FederatedPointerEvent } from 'pixi.js';
 import { Signal } from 'typed-signals';
-import { Container } from '@pixi/display';
+import { DoubleSliderOptions, SliderBase } from './SliderBase';
+
+import type { DragObject } from './utils/HelpTypes';
 
 /**
  * Creates a slider with range selection option.
@@ -270,8 +270,8 @@ export class DoubleSlider extends SliderBase
 
     /**
      * Sets width of a Sliders background and fill.
-     * If nineSlicePlane is set, then width will be set to nineSlicePlane.
-     * If nineSlicePlane is not set, then width will control components width as Container.
+     * If nineSliceSprite is set, then width will be set to nineSliceSprite.
+     * If nineSliceSprite is not set, then width will control components width as Container.
      * @param value - Width value.
      */
     override set width(value: number)
@@ -290,8 +290,8 @@ export class DoubleSlider extends SliderBase
 
     /**
      * Sets height of a Sliders background and fill.
-     * If nineSlicePlane is set, then height will be set to nineSlicePlane.
-     * If nineSlicePlane is not set, then height will control components height as Container.
+     * If nineSliceSprite is set, then height will be set to nineSliceSprite.
+     * If nineSliceSprite is not set, then height will control components height as Container.
      * @param value - Height value.
      */
     override set height(value: number)