Merge pull request #8 from cuire/v5-ctrlc-ctlrv

Author: cuire

README.md

@@ -11,6 +11,18 @@ With your support, I can make pixi-viewport even better! Please consider making
   <img src="https://opencollective.com/pixi-viewport/donate/[email protected]?color=blue" width=300 style="margin-top: 0.5rem; display: block"/>
 </a>
 
+## v5+
+Moves pixi-viewport to pixi.js v7 (thanks [@cuire](https://github.com/cuire)!).
+
+NOTE: there is a breaking change since pixi-viewport moved to pixi's new event system. `options.interaction` is removed and you need pass `options.events` to the viewport for it to work properly. The events object can be found at pixi's `renderer.events` or `app.renderer.events`.
+
+```js
+const viewport = new Viewport({ events: renderer.events });
+
+// or
+// const viewport = new Viewport({ events: app.renderer.events });
+```
+
 ## v4.30.0+
 This project was migrated to Typescript (thanks [@ShukantPal](https://github.com/ShukantPal)!). All functionality should be the same. The live Example has been updated.
 
@@ -40,7 +52,7 @@ const viewport = new Viewport({
     worldWidth: 1000,
     worldHeight: 1000,
 
-    interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
+    events: app.renderer.events // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
 })
 
 // add the viewport to the stage
@@ -118,9 +130,6 @@ viewport.plugins.add('name', plugin, index)
 
 PRs are more than welcome!
 
-## v4.30.0+
-This project was migrated to Typescript (thanks [@sukantpal](https://github.com/SukantPal)!). All functionality should be the same. The live Example has been updated.
-
 ## Other Libraries
 If you liked pixi-viewport, please try my other open source libraries:
 * [pixi-scrollbox](https://github.com/davidfig/pixi-scrollbox) - pixi.js scrollbox: a masked box that can scroll vertically or horizontally with scrollbars (uses pixi-viewport)
@@ -129,4 +138,4 @@ If you liked pixi-viewport, please try my other open source libraries:
 
 ## license
 MIT License
-(c) 2021 [YOPEY YOPEY LLC](https://yopeyopey.com/) by David Figatner ([email protected])
+(c) 2023 [YOPEY YOPEY LLC](https://yopeyopey.com/) by David Figatner ([email protected])

src/InputManager.ts

@@ -51,7 +51,7 @@ export class InputManager
         this.viewport.on('pointercancel', this.up, this);
         this.viewport.on('pointerout', this.up, this);
         this.wheelFunction = (e) => this.handleWheel(e);
-        this.viewport.options.divWheel.addEventListener(
+        this.viewport.options.events.domElement.addEventListener(
             'wheel',
             this.wheelFunction as any,
             { passive: this.viewport.options.passiveWheel });
@@ -64,7 +64,7 @@ export class InputManager
      */
     public destroy(): void
     {
-        this.viewport.options.divWheel.removeEventListener('wheel', this.wheelFunction as any);
+        this.viewport.options.events.domElement.removeEventListener('wheel', this.wheelFunction as any);
     }
 
     /**
@@ -207,22 +207,7 @@ export class InputManager
     {
         const point = new Point();
 
-        if (this.viewport.options.interaction)
-        {
-            this.viewport.options.interaction.mapPositionToPoint(point, event.clientX, event.clientY);
-        }
-        else if (this.viewport.options.useDivWheelForInputManager && this.viewport.options.divWheel)
-        {
-            const rect = this.viewport.options.divWheel.getBoundingClientRect();
-
-            point.x = event.clientX - rect.left;
-            point.y = event.clientY - rect.top;
-        }
-        else
-        {
-            point.x = event.clientX;
-            point.y = event.clientY;
-        }
+        this.viewport.options.events.mapPositionToPoint(point, event.clientX, event.clientY);
 
         return point;
     }
@@ -235,13 +220,6 @@ export class InputManager
             return;
         }
 
-        // do not handle events coming from other elements
-        if (this.viewport.options.interaction
-            && (this.viewport.options.interaction as any).interactionDOMElement !== event.target)
-        {
-            return;
-        }
-
         // only handle wheel events where the mouse is over the viewport
         const point = this.viewport.toLocal(this.getPointerPosition(event));
 

src/Viewport.ts

@@ -69,36 +69,21 @@ export interface IViewportOptions
     noTicker?: boolean;
 
     /**
-     * EventSystem, available from instantiated `WebGLRenderer/CanvasRenderer.plugins.interaction`
-     *
-     * It's used to calculate pointer postion relative to canvas location on screen
+     * EventSystem is required now
      */
-    interaction?: EventSystem | null;
+    events: EventSystem;
 
     /**
-     * Remove oncontextmenu=() => {} from the divWheel element
+     * Remove oncontextmenu=() => {} from options.events.domElement
      */
     disableOnContextMenu?: boolean;
 
-    /**
-     * div to attach the wheel event
-     *
-     * @default document.body
-     */
-    divWheel?: HTMLElement;
-
     /**
      * Use this PIXI.ticker for updates
      *
      * @default PIXI.Ticker.shared
      */
     ticker?: Ticker;
-
-    /**
-     * Uses divWheel definition for InputManager to calculate positioning relative to containing div
-     * this is used only if options.interaction is not defined
-     */
-    useDivWheelForInputManager?: boolean;
 }
 
 export interface ICompleteViewportOptions extends IViewportOptions
@@ -120,7 +105,7 @@ export interface IViewportTransformState
     scaleY: number;
 }
 
-const DEFAULT_VIEWPORT_OPTIONS: ICompleteViewportOptions = {
+const DEFAULT_VIEWPORT_OPTIONS: Partial<ICompleteViewportOptions> = {
     screenWidth: window.innerWidth,
     screenHeight: window.innerHeight,
     worldWidth: null,
@@ -130,7 +115,6 @@ const DEFAULT_VIEWPORT_OPTIONS: ICompleteViewportOptions = {
     stopPropagation: false,
     forceHitArea: null,
     noTicker: false,
-    interaction: null,
     disableOnContextMenu: false,
     ticker: Ticker.shared,
 };
@@ -192,7 +176,7 @@ export class Viewport extends Container
     public lastViewport?: IViewportTransformState | null;
 
     /** The options passed when creating this viewport, merged with the default values */
-    public readonly options: ICompleteViewportOptions & { divWheel: HTMLElement };
+    public readonly options: ICompleteViewportOptions;
 
     private _dirty?: boolean;
     private _forceHitArea?: IHitArea | null;
@@ -218,21 +202,17 @@ 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.EventSystem} [options.interaction=null] EventSystem, available from instantiated
-     * WebGLRenderer/CanvasRenderer.plugins.interaction - used to calculate pointer position relative to canvas
+     * @param {PIXI.EventSystem} [options.events] EventSystem available from app.events or added manually and passed here
      * location on screen
-     * @param {HTMLElement} [options.divWheel=document.body] div to attach the wheel event
-     * @param {boolean} [options.disableOnContextMenu] remove oncontextmenu=() => {} from the divWheel element
+     * @param {boolean} [options.disableOnContextMenu] remove oncontextmenu=() => {} from the pixi's events.domElement
      */
-    constructor(options: IViewportOptions = {})
+    constructor(options: IViewportOptions)
     {
         super();
-        this.options = Object.assign(
-            {},
-            { divWheel: document.body },
-            DEFAULT_VIEWPORT_OPTIONS,
-            options
-        );
+        this.options = {
+            ...DEFAULT_VIEWPORT_OPTIONS,
+            ...options,
+        } as ICompleteViewportOptions;
 
         this.screenWidth = this.options.screenWidth;
         this.screenHeight = this.options.screenHeight;
@@ -242,11 +222,9 @@ export class Viewport extends Container
         this.forceHitArea = this.options.forceHitArea;
         this.threshold = this.options.threshold;
 
-        this.options.divWheel = this.options.divWheel || document.body;
-
         if (this.options.disableOnContextMenu)
         {
-            this.options.divWheel.addEventListener('contextmenu', this._disableOnContextMenu);
+            this.options.events.domElement.addEventListener('contextmenu', this._disableOnContextMenu);
         }
         if (!this.options.noTicker)
         {
@@ -267,7 +245,7 @@ export class Viewport extends Container
         }
         if (this.options.disableOnContextMenu)
         {
-            this.options.divWheel.removeEventListener('contextmenu', this._disableOnContextMenu);
+            this.options.events.domElement.removeEventListener('contextmenu', this._disableOnContextMenu);
         }
 
         this.input.destroy();
@@ -1177,8 +1155,7 @@ export class Viewport extends Container
     /**
      * Zoom using mouse wheel
      *
-     * NOTE: the default event listener for 'wheel' event is document.body. Use `Viewport.options.divWheel` to
-     * change this default
+     * NOTE: the default event listener for 'wheel' event is the options.events.domElement.
      *
      * @param {IWheelOptions} [options]
      * @param {number} [options.percent=0.1] - percent to scroll with each spin