From 7eed3ef0ebba036350ba1c36c21bab40727cc765 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Wed, 19 Jun 2024 15:12:20 +0200
Subject: [PATCH] fix(nl): fix async texture loading in build

---
 .../nodelinkvis/components/NLPixi.tsx         | 59 +++++++++++--------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 2f41de1a8..f08ccc50c 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -1,7 +1,19 @@
 import { GraphType, LinkType, NodeType } from '../types';
 import { dataColors, visualizationColors } from 'config';
 import { ReactEventHandler, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Application, AssetsBundle, Color, Container, FederatedPointerEvent, Graphics, IPointData, Sprite, Assets, Texture, Resource } from 'pixi.js';
+import {
+  Application,
+  AssetsBundle,
+  Color,
+  Container,
+  FederatedPointerEvent,
+  Graphics,
+  IPointData,
+  Sprite,
+  Assets,
+  Texture,
+  Resource,
+} from 'pixi.js';
 import { useAppDispatch, useML, useSearchResultData } from '../../../../data-access';
 import { NLPopup } from './NLPopup';
 import { hslStringToHex, nodeColor } from './utils';
@@ -30,19 +42,10 @@ type LayoutState = 'reset' | 'running' | 'paused';
 // MAIN COMPONENT
 //////////////////
 
-if (!Assets.cache.has('texture')) {
-  Assets.addBundle('glyphs', {
-    texture: 'assets/sprite.png',
-    texture_square: 'assets/sprite_square.png',
-    texture_selected: 'assets/sprite_selected.png',
-    texture_selected_square: 'assets/sprite_selected_square.png',
-  });
-  await Assets.loadBundle('glyphs');
-}
-
 export const NLPixi = (props: Props) => {
   const [quickPopup, setQuickPopup] = useState<{ node: NodeType; pos: IPointData } | undefined>();
   const [popups, setPopups] = useState<{ node: NodeType; pos: IPointData }[]>([]);
+  const [assetsLoaded, setAssetsLoaded] = useState(false);
 
   const app = useMemo(
     () =>
@@ -77,7 +80,7 @@ export const NLPixi = (props: Props) => {
 
   const textureId = (selected: boolean = false) => {
     const selectionSuffix = selected ? '_selected' : '';
-    const shapeSuffix = (props.configuration.shapes.shape == 'rectangle') ? '_square' : '';
+    const shapeSuffix = props.configuration.shapes.shape == 'rectangle' ? '_square' : '';
     return `texture${selectionSuffix}${shapeSuffix}`;
   };
 
@@ -113,7 +116,7 @@ export const NLPixi = (props: Props) => {
 
     const texture = Assets.get(textureId());
     for (const sprite of nodeMap.current.values()) {
-      sprite.texture = texture;  
+      sprite.texture = texture;
     }
   }, [props.configuration.shapes?.shape]);
 
@@ -205,7 +208,6 @@ export const NLPixi = (props: Props) => {
     }
     app.render();
   }
-
   useEffect(() => {
     if (!ref.current) return;
     const resizeObserver = new ResizeObserver(() => {
@@ -305,7 +307,7 @@ export const NLPixi = (props: Props) => {
     let gfx: Sprite;
     const texture = Assets.get(textureId());
     gfx = new Sprite(texture);
-    
+
     gfx.tint = nodeColor(node.type);
     const scale = (Math.max(node.radius || 5, 5) / 70) * 2;
     gfx.scale.set(scale, scale);
@@ -409,7 +411,21 @@ export const NLPixi = (props: Props) => {
     }
   };
 
+  async function loadAssets() {
+    if (!Assets.cache.has('texture')) {
+      Assets.addBundle('glyphs', {
+        texture: 'assets/sprite.png',
+        texture_square: 'assets/sprite_square.png',
+        texture_selected: 'assets/sprite_selected.png',
+        texture_selected_square: 'assets/sprite_selected_square.png',
+      });
+      await Assets.loadBundle('glyphs');
+    }
+    setAssetsLoaded(true);
+  }
+
   useEffect(() => {
+    loadAssets();
     return () => {
       nodeMap.current.clear();
       linkGfx.clear();
@@ -418,11 +434,11 @@ export const NLPixi = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    if (props.graph && ref.current && ref.current.children.length > 0 && imperative.current) {
+    if (assetsLoaded && props.graph && ref.current && ref.current.children.length > 0 && imperative.current) {
       if (isSetup.current === false) setup();
       else update(false);
     }
-  }, [props.graph, config]);
+  }, [props.graph, config, assetsLoaded]);
 
   useEffect(() => {
     if (props.graph) {
@@ -430,7 +446,7 @@ export const NLPixi = (props: Props) => {
         const gfx = nodeMap.current.get(node._id);
         if (!gfx) return;
         const isNodeInSearchResults = searchResults.nodes.some((resultNode) => resultNode.id === node._id);
-        
+
         gfx.alpha = isNodeInSearchResults || searchResults.nodes.length === 0 ? 1 : 0.05;
       });
     }
@@ -454,10 +470,7 @@ export const NLPixi = (props: Props) => {
 
         const position = layoutAlgorithm.current.getNodePosition(node._id);
 
-        if (
-          !position ||
-          Math.abs(node.x - position.x - widthHalf) + Math.abs(node.y - position.y - heightHalf) < 1
-        ) {
+        if (!position || Math.abs(node.x - position.x - widthHalf) + Math.abs(node.y - position.y - heightHalf) < 1) {
           stopped += 1;
           return;
         }
@@ -525,7 +538,7 @@ export const NLPixi = (props: Props) => {
       props.graph.nodes.forEach((node: NodeType) => {
         if (!forceClear && nodeMap.current.has(node._id)) {
           const old = nodeMap.current.get(node._id);
-          
+
           try {
             node.x = old?.x || node.x;
             node.y = old?.y || node.y;
-- 
GitLab