pixiv7

Author: cuire

package.json

@@ -54,10 +54,10 @@
     },
     "homepage": "https://github.com/davidfig/pixi-viewport#readme",
     "peerDependencies": {
-        "@pixi/display": "^6.5.8",
-        "@pixi/interaction": "^6.5.8",
-        "@pixi/math": "^6.5.8",
-        "@pixi/ticker": "^6.5.8"
+        "@pixi/display": "^7.0.4",
+        "@pixi/events": "^7.0.4",
+        "@pixi/math": "^7.0.4",
+        "@pixi/ticker": "^7.0.4"
     },
     "dependencies": {},
     "devDependencies": {
@@ -66,12 +66,11 @@
         "@joseph184/rollup-plugin-node-builtins": "^2.1.4",
         "@microsoft/api-extractor": "^7.18.19",
         "@pixi-build-tools/rollup-configurator": "^1.0.14",
-        "@pixi/display": "^6.5.8",
+        "@pixi/display": "^7.0.4",
         "@pixi/eslint-config": "^4.0.1",
-        "@pixi/events": "^6.5.8",
-        "@pixi/interaction": "^6.5.8",
-        "@pixi/math": "^6.5.8",
-        "@pixi/ticker": "^6.5.8",
+        "@pixi/events": "^7.0.4",
+        "@pixi/math": "^7.0.4",
+        "@pixi/ticker": "^7.0.4",
         "@rollup/plugin-babel": "^5.3.0",
         "@rollup/plugin-commonjs": "^22.0.2",
         "@rollup/plugin-node-resolve": "^13.0.6",
@@ -91,7 +90,7 @@
         "fs-extra": "^10.0.0",
         "jsdoc": "^3.6.3",
         "pixi-ease": "^3.0.7",
-        "pixi.js": "^6.5.8",
+        "pixi.js": "^7.0.4",
         "raf": "^3.4.1",
         "rollup": "^2.60.2",
         "rollup-plugin-node-globals": "^1.4.0",

src/InputManager.ts

@@ -1,7 +1,7 @@
-import { Point, Rectangle } from '@pixi/math';
+import { Point, Rectangle } from '@pixi/core';
 
-import type { IPointData } from '@pixi/math';
-import type { InteractionEvent } from '@pixi/interaction';
+import type { IPointData } from '@pixi/core';
+import type {  FederatedPointerEvent } from '@pixi/events';
 import type { Viewport } from './Viewport';
 
 export interface IViewportTouch
@@ -70,25 +70,25 @@ export class InputManager
     /**
      * handle down events for viewport
      *
-     * @param {PIXI.InteractionEvent} event
+     * @param {PIXI.FederatedPointerEvent} event
      */
-    public down(event: InteractionEvent): void
+    public down(event: FederatedPointerEvent): void
     {
         if (this.viewport.pause || !this.viewport.worldVisible)
         {
             return;
         }
-        if (event.data.pointerType === 'mouse')
+        if (event.pointerType === 'mouse')
         {
             this.isMouseDown = true;
         }
-        else if (!this.get(event.data.pointerId))
+        else if (!this.get(event.pointerId))
         {
-            this.touches.push({ id: event.data.pointerId, last: null });
+            this.touches.push({ id: event.pointerId, last: null });
         }
         if (this.count() === 1)
         {
-            this.last = event.data.global.clone();
+            this.last = event.global.clone();
 
             // clicked event does not fire if viewport is decelerating or bouncing
             const decelerate = this.viewport.plugins.get('decelerate', true);
@@ -139,7 +139,7 @@ export class InputManager
     }
 
     /** Handle move events for viewport */
-    public move(event: InteractionEvent): void
+    public move(event: FederatedPointerEvent): void
     {
         if (this.viewport.pause || !this.viewport.worldVisible)
         {
@@ -150,8 +150,8 @@ export class InputManager
 
         if (this.clickedAvailable && this.last)
         {
-            const distX = event.data.global.x - this.last.x;
-            const distY = event.data.global.y - this.last.y;
+            const distX = event.global.x - this.last.x;
+            const distY = event.global.y - this.last.y;
 
             if (this.checkThreshold(distX) || this.checkThreshold(distY))
             {
@@ -166,21 +166,21 @@ export class InputManager
     }
 
     /** Handle up events for viewport */
-    public up(event: InteractionEvent): void
+    public up(event: FederatedPointerEvent): void
     {
         if (this.viewport.pause || !this.viewport.worldVisible)
         {
             return;
         }
 
-        if (event.data.pointerType === 'mouse')
+        if (event.pointerType === 'mouse')
         {
             this.isMouseDown = false;
         }
 
-        if (event.data.pointerType !== 'mouse')
+        if (event.pointerType !== 'mouse')
         {
-            this.remove(event.data.pointerId);
+            this.remove(event.pointerId);
         }
 
         const stop = this.viewport.plugins.up(event);
@@ -191,7 +191,7 @@ export class InputManager
                 event,
                 screen: this.last,
                 world: this.viewport.toWorld(this.last),
-                viewport: this
+                viewport: this.viewport
             });
             this.clickedAvailable = false;
         }

src/PluginManager.ts

@@ -13,7 +13,7 @@ import type {
     SnapZoom,
     Wheel,
 } from './plugins';
-import type { InteractionEvent } from '@pixi/interaction';
+import type { FederatedEvent } from '@pixi/events';
 import type { Viewport } from './Viewport';
 
 const PLUGIN_ORDER = [
@@ -70,7 +70,6 @@ export class PluginManager
      */
     public add(name: string, plugin: Plugin, index: number = PLUGIN_ORDER.length)
     {
-
         const oldPlugin = this.plugins[name];
 
         if (oldPlugin)
@@ -165,9 +164,10 @@ export class PluginManager
     /** removes all installed plugins */
     public removeAll(): void
     {
-        this.list.forEach((plugin) => {
+        this.list.forEach((plugin) =>
+        {
             plugin.destroy();
-        })
+        });
         this.plugins = {};
         this.sort();
     }
@@ -183,7 +183,7 @@ export class PluginManager
         {
             this.plugins[name]?.destroy();
             delete this.plugins[name];
-            this.viewport.emit(`${name}-remove`);
+            this.viewport.emit('plugin-remove', name);
             this.sort();
         }
     }
@@ -233,7 +233,7 @@ export class PluginManager
      * @internal
      * @ignore
      */
-    public down(event: InteractionEvent): boolean
+    public down(event: FederatedEvent): boolean
     {
         let stop = false;
 
@@ -254,7 +254,7 @@ export class PluginManager
      * @internal
      * @ignore
      */
-    public move(event: InteractionEvent): boolean
+    public move(event: FederatedEvent): boolean
     {
         let stop = false;
 
@@ -275,7 +275,7 @@ export class PluginManager
      * @internal
      * @ignore
      */
-    public up(event: InteractionEvent): boolean
+    public up(event: FederatedEvent): boolean
     {
         let stop = false;
 

src/Viewport.ts

@@ -1,6 +1,5 @@
 import { Container } from '@pixi/display';
-import { IPointData, Point, Rectangle } from '@pixi/math';
-import { Ticker } from '@pixi/ticker';
+import { IPointData, Point, Rectangle, Ticker } from '@pixi/core';
 
 import { InputManager } from './InputManager';
 import { PluginManager } from './PluginManager';
@@ -20,7 +19,7 @@ import {
 } from './plugins';
 
 import type { DisplayObject, IDestroyOptions } from '@pixi/display';
-import type { IHitArea, InteractionManager } from '@pixi/interaction';
+import type { IHitArea, EventSystem } from '@pixi/events';
 
 /** Options for {@link Viewport}. */
 export interface IViewportOptions
@@ -70,11 +69,11 @@ export interface IViewportOptions
     noTicker?: boolean;
 
     /**
-     * InteractionManager, available from instantiated `WebGLRenderer/CanvasRenderer.plugins.interaction`
+     * EventSystem, available from instantiated `WebGLRenderer/CanvasRenderer.plugins.interaction`
      *
      * It's used to calculate pointer postion relative to canvas location on screen
      */
-    interaction?: InteractionManager | null;
+    interaction?: EventSystem | null;
 
     /**
      * Remove oncontextmenu=() => {} from the divWheel element
@@ -158,7 +157,7 @@ const DEFAULT_VIEWPORT_OPTIONS: ICompleteViewportOptions = {
  * @fires bounce-y-start
  * @fires bounce-y-end
  * @fires bounce-remove
- * @fires wheel
+ * @fires wheel-start
  * @fires wheel-remove
  * @fires wheel-scroll
  * @fires wheel-scroll-remove
@@ -219,7 +218,7 @@ export class Viewport extends Container
      * @param {HitArea} [options.forceHitArea] change the default hitArea from world size to a new value
      * @param {boolean} [options.noTicker] set this if you want to manually call update() function on each frame
      * @param {PIXI.Ticker} [options.ticker=PIXI.Ticker.shared] use this PIXI.ticker for updates
-     * @param {PIXI.InteractionManager} [options.interaction=null] InteractionManager, available from instantiated
+     * @param {PIXI.EventSystem} [options.interaction=null] EventSystem, available from instantiated
      * WebGLRenderer/CanvasRenderer.plugins.interaction - used to calculate pointer position relative to canvas
      * location on screen
      * @param {HTMLElement} [options.divWheel=document.body] div to attach the wheel event
@@ -1431,12 +1430,9 @@ export class Viewport extends Container
 
 /**
  * Fires when for a mouse wheel event
- * @event Viewport#wheel
+ * @event Viewport#wheel-start
  * @type {object}
- * @property {object} wheel
- * @property {number} wheel.dx
- * @property {number} wheel.dy
- * @property {number} wheel.dz
+ * @property {WheelEvent} event
  * @property {Viewport} viewport
  */
 

src/global.d.ts

@@ -0,0 +1,39 @@
+// https://github.com/pixijs/pixijs/issues/8957
+
+declare namespace GlobalMixins
+{
+    type Viewport = import('./Viewport').Viewport;
+    type PixiVieportClickedEvent = import('./types').ClickedEvent;
+    type PixiVieportDragEvent = import('./types').DragEvent;
+    type PixiVieportMovedEvent = import('./types').MovedEvent;
+    type PixiVieportZoomedEvent = import('./types').ZoomedEvent;
+    type PixiVieportWheelStartEvent = import('./types').WheelStartEvent;
+
+    interface DisplayObjectEvents
+    {
+        clicked: [PixiVieportClickedEvent]
+        'drag-start': [PixiVieportDragEvent],
+        'drag-end': [PixiVieportDragEvent],
+        moved: [PixiVieportMovedEvent],
+        zoomed: [PixiVieportZoomedEvent],
+        'pinch-start': [Viewport],
+        'pinch-end': [Viewport],
+        'snap-start': [Viewport],
+        'snap-end': [Viewport],
+        'snap-zoom-start': [Viewport],
+        'snap-zoom-end': [Viewport],
+        'bounce-x-start': [Viewport],
+        'bounce-x-end': [Viewport],
+        'bounce-y-start': [Viewport],
+        'bounce-y-end': [Viewport],
+        'wheel-start': [PixiVieportWheelStartEvent],
+        'wheel-scroll': [Viewport],
+        'animate-end': [Viewport],
+        'mouse-edge-start': [Viewport],
+        'mouse-edge-end': [Viewport],
+        'moved-end': [Viewport],
+        'zoomed-end': [Viewport],
+        'frame-end': [Viewport],
+        'plugin-remove': [string],
+    }
+}

src/plugins/Animate.ts

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

src/plugins/Bounce.ts

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

src/plugins/Clamp.ts

@@ -1,3 +1,4 @@
+import { Point } from '@pixi/core';
 import { Plugin } from './Plugin';
 
 import type { Viewport } from '../Viewport';
@@ -160,7 +161,7 @@ export class Clamp extends Plugin
         {
             return;
         }
-        const original = { x: this.parent.x, y: this.parent.y };
+        const original = new Point(this.parent.x, this.parent.y);
         // TODO: Fix
         const decelerate: any = (this.parent.plugins as any).decelerate || {};
 

src/plugins/Decelerate.ts

@@ -1,7 +1,7 @@
 import { Plugin } from './Plugin';
 
-import type { Point } from '@pixi/math';
 import type { Viewport } from '../Viewport';
+import { MovedEvent } from '../types';
 
 export interface IDecelerateOptions
 {
@@ -110,7 +110,7 @@ export class Decelerate extends Plugin
         this.timeSinceRelease = 0;
 
         this.reset();
-        this.parent.on('moved', (data) => this.moved(data));
+        this.parent.on('moved', (data) => this.handleMoved(data));
     }
 
     public down(): boolean
@@ -150,22 +150,22 @@ export class Decelerate extends Plugin
     }
 
     /** Listener to viewport's "moved" event. */
-    protected moved(data: { type: 'clamp-x' | 'clamp-y'; original: Point }): void
+    protected handleMoved(e: MovedEvent): void
     {
         if (this.saved.length)
         {
             const last = this.saved[this.saved.length - 1];
 
-            if (data.type === 'clamp-x')
+            if (e.type === 'clamp-x' && e.original)
             {
-                if (last.x === data.original.x)
+                if (last.x === e.original.x)
                 {
                     last.x = this.parent.x;
                 }
             }
-            else if (data.type === 'clamp-y')
+            else if (e.type === 'clamp-y' && e.original)
             {
-                if (last.y === data.original.y)
+                if (last.y === e.original.y)
                 {
                     last.y = this.parent.y;
                 }