Merge pull request #483 from WillYuum/master

Update pixi-viewport to pixi 8.0.4

docs/src/code.js

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js'
+import {Application, Sprite, Texture, Graphics, Text, BatchableSprite, Container} from 'pixi.js'
 import { ease } from 'pixi-ease'
 import Random from 'yy-random'
 import Counter from 'yy-counter'
@@ -21,7 +21,6 @@ const OBJECT_SPEED = 0.25
 const FADE_TIME = 2000
 
 let _fps, _application, _viewport, _object, _stars = [], domEase
-
 function viewport() {
     _viewport = _application.stage.addChild(new Viewport(
         {
@@ -101,8 +100,8 @@ function events() {
 }
 
 function border() {
-    const line = _viewport.addChild(new PIXI.Graphics())
-    line.lineStyle(10, 0xff0000).drawRect(0, 0, _viewport.worldWidth, _viewport.worldHeight)
+    const line = _viewport.addChild(new Graphics())
+    line.stroke(10, 0xff0000).rect(0, 0, _viewport.worldWidth, _viewport.worldHeight)
 }
 
 function overlap(x, y) {
@@ -120,17 +119,19 @@ function overlap(x, y) {
 
 function stars() {
     const stars = (_viewport.worldWidth * _viewport.worldHeight) / Math.pow(STAR_SIZE, 2) * 0.1
+    console.log('stars', stars);
     for (let i = 0; i < stars; i++) {
-        const star = new PIXI.Sprite(PIXI.Texture.WHITE)
+        const star = new Sprite(Texture.WHITE)
         star.anchor.set(0.5)
         star.tint = Random.color()
         star.width = star.height = STAR_SIZE
         star.alpha = Random.range(0.25, 1, true)
-        let x, y
+        let x, y, attempt = 0
         do {
             x = Random.range(STAR_SIZE / 2 + BORDER, _viewport.worldWidth - STAR_SIZE - BORDER)
             y = Random.range(BORDER, _viewport.worldHeight - BORDER - STAR_SIZE)
-        } while (overlap(x, y))
+            attempt++
+        } while (overlap(x, y) && attempt < 3)
         star.position.set(x, y)
         _viewport.addChild(star)
         _stars.push(star)
@@ -145,9 +146,9 @@ function createTarget() {
 }
 
 function object() {
-    _object = _viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
+    _object = _viewport.addChild(new Sprite(Texture.WHITE))
     _object.anchor.set(0.5)
-    _object.tint = 0
+    _object.tint = Random.color()
     _object.width = _object.height = OBJECT_SIZE
     _object.position.set(100, 100)
     ease.add(_object, { rotation: Math.PI * 2 }, { duration: OBJECT_ROTATION_TIME, repeat: true, ease: 'linear' })
@@ -156,12 +157,13 @@ function object() {
 
 function click(data) {
     for (let star of _stars) {
-        if (star.containsPoint(data.screen)) {
+        if (Math.abs(data.world.x - star.position.x) + Math.abs(data.world.y - star.position.y) < STAR_SIZE * 2) {
+            console.log('star match')
             ease.add(star, { width: STAR_SIZE * 3, height: STAR_SIZE * 3 }, { reverse: true })
-            return
+            //return
         }
     }
-    const sprite = _viewport.addChild(new PIXI.Text('click', { fill: 0xff0000 }))
+    const sprite = _viewport.addChild(new Text('click', { fill: 0xff0000 }))
     sprite.anchor.set(0.5)
     sprite.rotation = Random.range(-0.1, 0.1)
     sprite.position = data.world
@@ -194,30 +196,38 @@ function API() {
 
 window.onload = function () {
     _fps = new FPS({ side: 'bottom-left' })
-    _application = new PIXI.Application({ backgroundAlpha: 0, width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio })
-    document.body.appendChild(_application.view)
-    _application.view.style.position = 'fixed'
-    _application.view.style.width = '100vw'
-    _application.view.style.height = '100vh'
-
-    viewport()
-
-    window.addEventListener('resize', resize)
-
-    drawWorld()
-    events()
-
-    PIXI.Ticker.shared.add(() => {
-        _fps.frame()
-        // test dirty
-        // if (_viewport.dirty)
-        // {
-        //     console.log('dirty')
-        // }
-        // _viewport.dirty = false
+    _application = new Application()
+    _application.init({
+        backgroundAlpha: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        resolution: window.devicePixelRatio
+    }).then(() => {
+        console.log(_application)
+        document.body.appendChild(_application.canvas)
+        _application.canvas.style.position = 'fixed'
+        _application.canvas.style.width = '100vw'
+        _application.canvas.style.height = '100vh'
+
+        viewport()
+
+        window.addEventListener('resize', resize)
+
+        drawWorld()
+        events()
+
+        _application.ticker.add(() => {
+            _fps.frame()
+            // test dirty
+            // if (_viewport.dirty)
+            // {
+            //     console.log('dirty')
+            // }
+            // _viewport.dirty = false
+        })
+
+        gui(_viewport, drawWorld, _object)
+
+        API()
     })
-
-    gui(_viewport, drawWorld, _object)
-
-    API()
 }

package.json

@@ -49,12 +49,7 @@
     },
     "homepage": "https://github.com/davidfig/pixi-viewport#readme",
     "devDependencies": {
-        "@pixi/core": "^7.1.1",
-        "@pixi/display": "^7.1.1",
-        "@pixi/eslint-config": "^4.0.1",
-        "@pixi/events": "^7.1.1",
-        "@pixi/math": "^7.1.1",
-        "@pixi/ticker": "^7.1.1",
+        "pixi.js": "^8.0.4",
         "@typescript-eslint/parser": "^5.5.0",
         "chai": "^4.3.4",
         "clicked": "^4.0.3",
@@ -67,14 +62,13 @@
         "jsdoc": "^3.6.3",
         "lint-staged": "^13.1.0",
         "pixi-ease": "^3.0.7",
-        "pixi.js": "^7.1.1",
         "raf": "^3.4.1",
         "typescript": "^4.5.2",
-        "vite": "^3.2.4",
-        "vite-plugin-dts": "^1.7.1",
+        "vite": "4.4.10",
+        "vite-plugin-dts": "3.6.0",
         "yy-counter": "^2.1.0",
         "yy-fps": "^2.0.0",
         "yy-jsdoc-template": "^1.3.0",
         "yy-random": "^1.10.2"
     }
-}
+}

src/InputManager.ts

@@ -1,13 +1,11 @@
-import { Point, Rectangle } from '@pixi/core';
+import { Point, Rectangle, PointData, FederatedPointerEvent } from 'pixi.js';
 
-import type { IPointData } from '@pixi/core';
-import type {  FederatedPointerEvent } from '@pixi/events';
 import type { Viewport } from './Viewport';
 
 export interface IViewportTouch
 {
     id: number;
-    last: IPointData | null;
+    last: PointData | null;
 }
 
 /**
@@ -87,7 +85,7 @@ export class InputManager
      */
     public down(event: FederatedPointerEvent): void
     {
-        if (this.viewport.pause || !this.viewport.worldVisible)
+        if (this.viewport.pause || !this.viewport.visible)
         {
             return;
         }
@@ -154,7 +152,7 @@ export class InputManager
     /** Handle move events for viewport */
     public move(event: FederatedPointerEvent): void
     {
-        if (this.viewport.pause || !this.viewport.worldVisible)
+        if (this.viewport.pause || !this.viewport.visible)
         {
             return;
         }
@@ -181,7 +179,7 @@ export class InputManager
     /** Handle up events for viewport */
     public up(event: FederatedPointerEvent): void
     {
-        if (this.viewport.pause || !this.viewport.worldVisible)
+        if (this.viewport.pause || !this.viewport.visible)
         {
             return;
         }
@@ -228,7 +226,7 @@ export class InputManager
     /** Handle wheel events */
     public handleWheel(event: WheelEvent): void
     {
-        if (this.viewport.pause || !this.viewport.worldVisible)
+        if (this.viewport.pause || !this.viewport.visible)
         {
             return;
         }

src/PluginManager.ts

@@ -13,7 +13,7 @@ import type {
     SnapZoom,
     Wheel,
 } from './plugins';
-import type { FederatedEvent } from '@pixi/events';
+import type { FederatedEvent } from 'pixi.js';
 import type { Viewport } from './Viewport';
 
 const PLUGIN_ORDER = [

src/Viewport.ts

@@ -1,5 +1,4 @@
-import { Container } from '@pixi/display';
-import { IPointData, Point, Rectangle, Ticker } from '@pixi/core';
+import { Container, IHitArea, EventSystem, DestroyOptions, View, PointData, Point, Rectangle, Ticker } from 'pixi.js';
 
 import { InputManager } from './InputManager';
 import { PluginManager } from './PluginManager';
@@ -18,9 +17,6 @@ import {
     Wheel, IWheelOptions,
 } from './plugins';
 
-import type { DisplayObject, IDestroyOptions } from '@pixi/display';
-import type { IHitArea, EventSystem } from '@pixi/events';
-
 /** Options for {@link Viewport}. */
 export interface IViewportOptions
 {
@@ -245,7 +241,7 @@ export class Viewport extends Container
     }
 
     /** Overrides PIXI.Container's destroy to also remove the 'wheel' and PIXI.Ticker listeners */
-    destroy(options?: IDestroyOptions): void
+    destroy(options?: DestroyOptions): void
     {
         if (!this.options.noTicker && this.tickerFunction)
         {
@@ -387,45 +383,45 @@ export class Viewport extends Container
     }
 
     /** Change coordinates from screen to world */
-    public toWorld<P extends IPointData = Point>(x: number, y: number): P;
+    public toWorld<P extends PointData = Point>(x: number, y: number): P;
     /** Change coordinates from screen to world */
-    public toWorld<P extends IPointData = Point>(screenPoint: IPointData): P;
+    public toWorld<P extends PointData = Point>(screenPoint: PointData): P;
 
     /**
      * Changes coordinate from screen to world
      * @param {number|PIXI.Point} x
      * @param {number} y
      * @returns {PIXI.Point}
      */
-    public toWorld<P extends IPointData = Point>(x: number | IPointData, y?: number): P
+    public toWorld<P extends PointData = Point>(x: number | PointData, y?: number): P
     {
         if (arguments.length === 2)
         {
             return this.toLocal<P>(new Point(x as number, y));
         }
 
-        return this.toLocal<P>(x as IPointData);
+        return this.toLocal<P>(x as PointData);
     }
 
     /** Change coordinates from world to screen */
-    public toScreen<P extends IPointData = Point>(x: number, y: number): P;
+    public toScreen<P extends PointData = Point>(x: number, y: number): P;
     /** Change coordinates from world to screen */
-    public toScreen<P extends IPointData = Point>(worldPoint: IPointData): P;
+    public toScreen<P extends PointData = Point>(worldPoint: PointData): P;
 
     /**
      * Changes coordinate from world to screen
      * @param {number|PIXI.Point} x
      * @param {number} y
      * @returns {PIXI.Point}
      */
-    public toScreen<P extends IPointData = Point>(x: number | IPointData, y?: number): P
+    public toScreen<P extends PointData = Point>(x: number | PointData, y?: number): P
     {
         if (arguments.length === 2)
         {
             return this.toGlobal<P>(new Point(x as number, y));
         }
 
-        return this.toGlobal<P>(x as IPointData);
+        return this.toGlobal<P>(x as PointData);
     }
 
     /** Screen width in world coordinates */
@@ -468,15 +464,15 @@ export class Viewport extends Container
     public moveCenter(x: number, y: number): Viewport;
 
     /** Move center of viewport to {@code center}. */
-    public moveCenter(center: IPointData): Viewport;
+    public moveCenter(center: PointData): Viewport;
 
     /**
      * Move center of viewport to (x, y)
      * @param {number|PIXI.Point} x
      * @param {number} [y]
      * @return {Viewport}
      */
-    public moveCenter(...args: [number, number] | [IPointData]): Viewport
+    public moveCenter(...args: [number, number] | [PointData]): Viewport
     {
         let x: number;
         let y: number;
@@ -1153,7 +1149,7 @@ export class Viewport extends Container
      *   without moving the viewport     * @returns {Viewport} this
      * @returns {Viewport} this
      */
-    public follow(target: DisplayObject, options?: IFollowOptions): Viewport
+    public follow(target: Container, options?: IFollowOptions): Viewport
     {
         this.plugins.add('follow', new Follow(this, target, options));
 

src/plugins/Animate.ts

@@ -1,4 +1,4 @@
-import { IPointData, Point } from '@pixi/core';
+import { PointData, Point } from 'pixi.js';
 import { Plugin } from './Plugin';
 import ease from '../ease';
 
@@ -11,7 +11,7 @@ export interface IAnimateOptions
     time?: number;
 
     /** Position to move the viewport to */
-    position?: IPointData;
+    position?: PointData;
 
     /**
      * Desired viewport width in world pixels

src/plugins/Bounce.ts

@@ -1,4 +1,4 @@
-import { Point, Rectangle } from '@pixi/core';
+import { Point, Rectangle } from 'pixi.js';
 import { Plugin } from './Plugin';
 import ease from '../ease';
 

src/plugins/Clamp.ts

@@ -1,4 +1,4 @@
-import { Point } from '@pixi/core';
+import { Point } from 'pixi.js';
 import { Plugin } from './Plugin';
 
 import type { Viewport } from '../Viewport';

src/plugins/Drag.ts

@@ -1,9 +1,9 @@
-import { Point } from '@pixi/core';
+import { Point } from 'pixi.js';
 import { Plugin } from './Plugin';
 
 import type { Decelerate } from './Decelerate';
-import type { FederatedPointerEvent } from '@pixi/events';
-import type { IPointData } from '@pixi/core';
+import type { FederatedPointerEvent } from 'pixi.js';
+import type { PointData } from 'pixi.js';
 import type { Viewport } from '../Viewport';
 
 /** Options for {@link Drag}. */
@@ -156,7 +156,7 @@ export class Drag extends Plugin
     protected underflowY!: -1 | 0 | 1;
 
     /** Last pointer position while panning. */
-    protected last?: IPointData | null;
+    protected last?: PointData | null;
 
     /** The ID of the pointer currently panning the viewport. */
     protected current?: number;