#75 fixed performance problems. changed to pixi.js-legacy.

package.json

@@ -111,7 +111,7 @@
     "mdi-react": "7.4.0",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pixi.js": "^5.3.7",
+    "pixi.js-legacy": "6.0.0-rc",
     "pnp-webpack-plugin": "1.6.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

src/components/Visualization/UserVisualization/application.js

@@ -8,7 +8,7 @@ import {
 } from 'd3-force';
 import { scaleLinear, scaleLog, scaleOrdinal } from 'd3-scale';
 import gsap from 'gsap';
-import * as PIXI from 'pixi.js';
+import * as PIXI from 'pixi.js-legacy';
 import BackgroundGrid from '../shared/BackgroundGrid';
 import Locator from '../shared/Locator';
 import forceCluster from './forceCluster';
@@ -80,6 +80,7 @@ class Application {
 
     this._simulation = forceSimulation()
       .velocityDecay(0.05)
+      .alphaMin(0.01)
       .force('x', forceX(0).strength(0.05))
       .force('y', forceY(0).strength(0.05))
       .force('charge', forceManyBody())
@@ -96,13 +97,9 @@ class Application {
       'dragStart', 'dragEnd',
     );
 
-    if (process.env.NODE_ENV === 'production') {
-      PIXI.utils.skipHello();
-    }
-
     this._instance = new PIXI.Application({
       antialias: true,
-      transparent: true,
+      backgroundAlpha: 0,
       resizeTo: container,
     });
 
@@ -151,7 +148,7 @@ class Application {
     this._calcAlphaDomain(data);
     this._simulation
       .nodes(data)
-      .alphaTarget(0.3)
+      .alphaTarget(0.5)
       .restart()
     ;
     this._data();
@@ -498,6 +495,7 @@ class Application {
         gsap.to(node.children[0], {
           alpha: key === this._hovered ? 0.8 : 0.9,
           duration: 0.2,
+          overwrite: true,
         });
         return true;
       }
@@ -539,11 +537,12 @@ class Application {
 
       const key = this._keyOfItem(item);
 
-      if (!(key === this._hovered || key === this._selected) && node.filters) {
+      if (!(key === this._hovered || key === this._selected) && node.filters?.length) {
         node.filters = [];
         gsap.to(node.children[0], {
           alpha: this._alphaOfItem(item),
           duration: 0.2,
+          overwrite: true,
         });
       }
 

src/components/Visualization/shared/BackgroundGrid.js

@@ -1,4 +1,4 @@
-import * as PIXI from 'pixi.js';
+import * as PIXI from 'pixi.js-legacy';
 
 const defaultCellSize = 100;
 

src/components/Visualization/shared/Locator.js

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import * as PIXI from 'pixi.js';
+import * as PIXI from 'pixi.js-legacy';
 import { drawDashedPolygon } from '../shared/drawDashedPolygon';
 
 class Locator extends PIXI.Container {
@@ -19,6 +19,7 @@ class Locator extends PIXI.Container {
       const [x, y] = this._linesRates[i];
       item.x = x * 12;
       item.y = y * 12;
+      item.name = `locator_line_${i + 1}`;
       return item;
     });
     this.addChild(...this._lines);
@@ -54,6 +55,8 @@ class Locator extends PIXI.Container {
         item.x = sx;
         item.y = sy;
 
+        item.name = `locator_border_${i + 1}`;
+
         return item;
       });
     this.addChild(...this._borders);
@@ -122,17 +125,11 @@ class Locator extends PIXI.Container {
 
     const pos = this._focused.getGlobalPosition(undefined, true);
 
-    if (this._tweenRoot) {
-      this._tweenRoot.kill();
-    }
-
-    this._tweenRoot = gsap.to(this.position, {
+    gsap.to(this.position, {
       x: pos.x,
       y: pos.y,
       duration: 0.2,
-      onComplete: () => {
-        this._tweenRoot = null;
-      },
+      overwrite: true,
     });
 
     const w2 = width * 0.5;
@@ -144,6 +141,7 @@ class Locator extends PIXI.Container {
         x: x * Math.max(w2 + 4, 12),
         y: y * Math.max(h2 + 4, 12),
         duration: 0.2,
+        overwrite: true,
       });
     });
 
@@ -153,22 +151,19 @@ class Locator extends PIXI.Container {
         x: Math.sign(x) * -1 * Math.max(w2 + 4, 12),
         y: Math.sign(y) * -1 * Math.max(h2 + 4, 12),
         duration: 0.2,
+        overwrite: true,
       });
     });
   }
 
   _stopAnimation() {
-    if (this._tweenRoot) {
-      this._tweenRoot.kill();
-      this._tweenRoot = null;
-    }
-
     this._lines.forEach((item, i) => {
       const [x, y] = this._linesRates[i];
       gsap.to(item.position, {
         x: x * 12,
         y: y * 12,
         duration: 0.2,
+        overwrite: true,
       });
     });
 
@@ -178,6 +173,7 @@ class Locator extends PIXI.Container {
         x,
         y,
         duration: 0.2,
+        overwrite: true,
       });
     });
   }