Upgrade to pixi version 7

evgeniy-polyakov · Aug 10, 2023 · 7d8c20f · 7d8c20f
1 parent 7a649cf
commit 7d8c20f
Show file tree

Hide file tree

Showing 9 changed files with 3,218 additions and 877 deletions.
diff --git a/build/fix-typings.js b/build/fix-typings.js
@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
 const dir = './dist';
 fs.readdirSync(dir).forEach(file => {

diff --git a/dist/pixi-inspector.d.ts b/dist/pixi-inspector.d.ts
@@ -8,7 +8,7 @@ export declare class PixiInspector {
     private readonly _style;
     private _enabled;
     private _contextMenu?;
-    constructor(root: PIXI.Container, renderer: PIXI.AbstractRenderer, style?: "dark" | "light");
+    constructor(root: PIXI.Container, renderer: PIXI.Renderer, style?: "dark" | "light");
     get enabled(): boolean;
     set enabled(value: boolean);
     private disablePixiRightClick;

diff --git a/dist/pixi-inspector.js b/dist/pixi-inspector.js
diff --git a/example/index.html b/example/index.html
@@ -6,7 +6,7 @@
     <title>Pixi Inspector Example</title>
 </head>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.1/browser/pixi.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.js"></script>
 <script src="../dist/pixi-inspector.js"></script>
 <script>
     const app = new PIXI.Application({

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
     "name": "pixi-inspector",
     "description": "Browsing PixiJS display objects in context menu.",
-    "version": "2.0.1",
+    "version": "3.0.0",
     "license": "MIT",
+    "type": "module",
     "repository": {
         "type": "git",
         "url": "https://github.com/evgeniy-polyakov/pixi-inspector.git"
@@ -23,18 +24,18 @@
     "main": "./dist/pixi-inspector.js",
     "types": "./dist/pixi-inspector.d.ts",
     "peerDependencies": {
-        "pixi.js": "^5.0.0"
+        "pixi.js": "^7.2.4"
     },
     "devDependencies": {
-        "pixi.js": "^5.0.0",
+        "pixi.js": "^7.2.4",
         "rimraf": "latest",
-        "typescript": "^4.5.4",
-        "tslib": "^2.3.1",
-        "rollup": "^2.62.0",
-        "@rollup/plugin-typescript": "^8.3.0",
-        "@typescript-eslint/eslint-plugin": "^5.8.1",
-        "@typescript-eslint/parser": "^5.8.1",
-        "eslint": "^8.5.0"
+        "typescript": "^4.9.5",
+        "tslib": "^2.6.1",
+        "rollup": "^3.28.0",
+        "@rollup/plugin-typescript": "^11.1.2",
+        "@typescript-eslint/eslint-plugin": "^6.3.0",
+        "@typescript-eslint/parser": "^6.3.0",
+        "eslint": "^8.46.0"
     },
     "scripts": {
         "lint": "eslint src --ext .ts",

diff --git a/src/ContextMenu.ts b/src/ContextMenu.ts
@@ -10,12 +10,12 @@ export class ContextMenu {
 
     private readonly _data: IContextMenuData;
     private readonly _root: HTMLElement;
-    private readonly _renderer: PIXI.AbstractRenderer;
+    private readonly _renderer: PIXI.Renderer;
     private readonly _style: string;
     private readonly _inspect = new Function("console.dir(this); debugger;");
     private _textureImage?: HTMLElement;
 
-    constructor(event: MouseEvent, renderer: PIXI.AbstractRenderer, data: IContextMenuData, style: string) {
+    constructor(event: MouseEvent, renderer: PIXI.Renderer, data: IContextMenuData, style: string) {
 
         const div = document.createElement("div");
         div.style.position = "fixed";
@@ -129,7 +129,7 @@ export class ContextMenu {
         }
         const data = this.getData(this._data, ids);
         if (data?.texture) {
-            const renderer = this._renderer as PIXI.Renderer;
+            const renderer = this._renderer;
             if (renderer && renderer.extract && typeof renderer.extract.image === "function") {
 
                 const vw = 12;
@@ -140,7 +140,7 @@ export class ContextMenu {
                 const container = new PIXI.Container();
                 container.addChild(sprite);
 
-                const canvas = renderer.extract.canvas(container);
+                const canvas = renderer.extract.canvas(container) as HTMLCanvasElement;
                 const rootRect = this._root.getBoundingClientRect();
                 const itemRect = span.parentElement!.getBoundingClientRect();
                 this._root.append(canvas);

diff --git a/src/PixiInspector.ts b/src/PixiInspector.ts
@@ -5,20 +5,20 @@ import {StyleSheet} from "./StyleSheet";
 export class PixiInspector {
 
     private readonly _root: PIXI.Container;
-    private readonly _renderer: PIXI.AbstractRenderer;
-    private readonly _interaction: PIXI.InteractionManager;
+    private readonly _renderer: PIXI.Renderer;
+    private readonly _interaction: PIXI.EventSystem;
     private readonly _tempRect = new PIXI.Rectangle();
     private readonly _styleSheet: HTMLStyleElement;
     private readonly _style: string;
     private _enabled = false;
     private _contextMenu?: ContextMenu;
 
     constructor(root: PIXI.Container,
-                renderer: PIXI.AbstractRenderer,
+                renderer: PIXI.Renderer,
                 style?: "dark" | "light") {
         this._root = root;
         this._renderer = renderer;
-        this._interaction = this._renderer.plugins.interaction;
+        this._interaction = this._renderer.events;
         this._styleSheet = this.createStyleSheet();
         this._style = style || this.detectStyle();
         this.enabled = true;

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,15 +3,16 @@
         "strict": true,
         "module": "ESNext",
         "outDir": "dist",
-        "target": "es5",
+        "target": "ES2015",
         "rootDir": "src",
         "moduleResolution": "Node",
         "declaration": true,
         "emitDeclarationOnly": true,
         "lib": [
-            "es5",
+            "ES2015",
             "dom"
-        ]
+        ],
+        "allowSyntheticDefaultImports": true
     },
     "include": [
         "src/**/*.ts"