Merge pull request #428 from cuire/v5

✨✨✨ V5 ✨✨✨

Author: davidfig

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/build.yml

@@ -0,0 +1,22 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - name: ⏬ Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: ✨ Lint
+        run: yarn lint
+      - name: 🦾 Build Lib
+        run: yarn build

.github/workflows/gh-pages.yml

@@ -0,0 +1,56 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: [$default-branch, "v5-gh-pages"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  build:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - name: ⏬ Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: 🦾 Build Lib and Docs
+        run: yarn prepublishOnly
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: './docs/dist'
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn pre-commit

.lintstagedrc

@@ -0,0 +1,5 @@
+{
+    "src/**/*.+(ts)": [
+        "eslint . --fix"
+    ]
+}

.npmignore

@@ -0,0 +1,8 @@
+node_modules
+*.log
+.nyc_output
+*.iml
+.idea
+.DS_Store
+compile
+js

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])

api-extractor.json

@@ -46,12 +46,12 @@
                     {
                         name: 'viewport.min.js',
                         type: 'script',
-                        content: await load('viewport.min.js'),
+                        content: await load('pixi_viewport.umd.cjs'),
                     }
                 ],
                 links: [{
                     name: 'PIXI',
-                    url: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.js',
+                    url: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.2/pixi.min.js',
                 }],
                 console: false,
             })

docs/public/index.html

@@ -27,7 +27,7 @@ export function create(renderer) {
         // forceHitArea: null,                          // change the default hitArea from world size to a new value
         // noTicker: false,                             // set this if you want to manually call update() function on each frame
         // ticker: PIXI.Ticker.shared,                  // use this PIXI.ticker for updates
-        interaction: renderer.plugins.interaction,   // InteractionManager, available from instantiated WebGLRenderer/CanvasRenderer.plugins.interaction - used to calculate pointer position relative to canvas location on screen
+        events: renderer.events,                        // Events - used to calculate pointer position relative to canvas location on screen
         // divWheel: null,                              // div to attach the wheel event (uses document.body as default)
         // disableOnContextMenu: false,                 // remove oncontextmenu=() => {} from the divWheel element
     })