fix webworker initialization

YeonV · Jan 13, 2025 · ed81a73 · ed81a73
1 parent 8cc0c40
commit ed81a73
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 73 deletions.
diff --git a/src/components/PixelGraph/PixelGraphCanvasOffscreen.tsx b/src/components/PixelGraph/PixelGraphCanvasOffscreen.tsx
@@ -45,35 +45,39 @@ const PixelGraphCanvasOffscreen = ({
   )
 
   useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas || transferredRef.current) return
+    setTimeout(() => {
+      const canvas = canvasRef.current
+      if (!canvas || transferredRef.current) return
 
-    const offscreen = canvas.transferControlToOffscreen()
-    const worker = new Worker(new URL('./pixelGraphWorker.js', import.meta.url))
-    workerRef.current = worker
-    transferredRef.current = true
+      const offscreen = canvas.transferControlToOffscreen()
+      const worker = new Worker(
+        new URL('./pixelGraphWorker.js', import.meta.url)
+      )
+      workerRef.current = worker
+      transferredRef.current = true
 
-    worker.postMessage({ canvas: offscreen }, [offscreen])
+      worker.postMessage({ canvas: offscreen }, [offscreen])
 
-    const handleWebsockets = (e: any) => {
-      if (e.detail.id === virtId) {
-        const pixels =
-          config.transmission_mode === 'compressed'
-            ? hexColor(e.detail.pixels, config.transmission_mode)
-            : e.detail.pixels
-        // const shape = e.detail.shape
-        const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
-        const cols = Math.ceil(pixels.length / rows)
+      const handleWebsockets = (e: any) => {
+        if (e.detail.id === virtId) {
+          const pixels =
+            config.transmission_mode === 'compressed'
+              ? hexColor(e.detail.pixels, config.transmission_mode)
+              : e.detail.pixels
+          // const shape = e.detail.shape
+          const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
+          const cols = Math.ceil(pixels.length / rows)
 
-        worker.postMessage({ pixels, rows, cols })
+          worker.postMessage({ pixels, rows, cols })
+        }
       }
-    }
 
-    document.addEventListener('visualisation_update', handleWebsockets)
-    return () => {
-      document.removeEventListener('visualisation_update', handleWebsockets)
-      worker.terminate()
-    }
+      document.addEventListener('visualisation_update', handleWebsockets)
+      return () => {
+        document.removeEventListener('visualisation_update', handleWebsockets)
+        worker.terminate()
+      }
+    }, 200)
   }, [virtId, virtuals, pixelGraphs, devices, graphs, config, showMatrix])
 
   const render =

diff --git a/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGL.tsx b/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGL.tsx
@@ -45,37 +45,39 @@ const PixelGraphCanvasOffscreenWebGL = ({
   )
 
   useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas || transferredRef.current) return
+    setTimeout(() => {
+      const canvas = canvasRef.current
+      if (!canvas || transferredRef.current) return
 
-    const offscreen = canvas.transferControlToOffscreen()
-    const worker = new Worker(
-      new URL('./pixelGraphWorkerWebGL.js', import.meta.url)
-    )
-    workerRef.current = worker
-    transferredRef.current = true
+      const offscreen = canvas.transferControlToOffscreen()
+      const worker = new Worker(
+        new URL('./pixelGraphWorkerWebGL.js', import.meta.url)
+      )
+      workerRef.current = worker
+      transferredRef.current = true
 
-    worker.postMessage({ canvas: offscreen }, [offscreen])
+      worker.postMessage({ canvas: offscreen }, [offscreen])
 
-    const handleWebsockets = (e: any) => {
-      if (e.detail.id === virtId) {
-        const pixels =
-          config.transmission_mode === 'compressed'
-            ? hexColor(e.detail.pixels, config.transmission_mode)
-            : e.detail.pixels
-        // const shape = e.detail.shape
-        const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
-        const cols = Math.ceil(pixels.length / rows)
+      const handleWebsockets = (e: any) => {
+        if (e.detail.id === virtId) {
+          const pixels =
+            config.transmission_mode === 'compressed'
+              ? hexColor(e.detail.pixels, config.transmission_mode)
+              : e.detail.pixels
+          // const shape = e.detail.shape
+          const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
+          const cols = Math.ceil(pixels.length / rows)
 
-        worker.postMessage({ pixels, rows, cols })
+          worker.postMessage({ pixels, rows, cols })
+        }
       }
-    }
 
-    document.addEventListener('visualisation_update', handleWebsockets)
-    return () => {
-      document.removeEventListener('visualisation_update', handleWebsockets)
-      worker.terminate()
-    }
+      document.addEventListener('visualisation_update', handleWebsockets)
+      return () => {
+        document.removeEventListener('visualisation_update', handleWebsockets)
+        worker.terminate()
+      }
+    }, 200)
   }, [virtId, virtuals, pixelGraphs, devices, graphs, config, showMatrix])
 
   const render =

diff --git a/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGLSync.tsx b/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGLSync.tsx
@@ -45,9 +45,9 @@ const PixelGraphCanvasOffscreenWebGLSync = ({
     (state) => state.uiPersist.pixelGraphSettings?.stretch
   )
 
-  useEffect(() => {
+  const initializeWorker = async () => {
     const canvas = canvasRef.current
-    if (!canvas || transferredRef.current) return
+    if (!canvas) return
 
     const offscreen = canvas.transferControlToOffscreen()
     const worker = new Worker(
@@ -57,35 +57,43 @@ const PixelGraphCanvasOffscreenWebGLSync = ({
     transferredRef.current = true
 
     worker.postMessage({ canvas: offscreen }, [offscreen])
+  }
 
-    const handleWebsockets = (e: any) => {
-      if (e.detail.id === virtId) {
-        const pixels =
-          config.transmission_mode === 'compressed'
-            ? hexColor(e.detail.pixels, config.transmission_mode)
-            : e.detail.pixels
-        // const shape = e.detail.shape
-        const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
-        const cols = Math.ceil(pixels.length / rows)
+  useEffect(() => {
+    setTimeout(() => {
+      if (!transferredRef.current) {
+        initializeWorker()
+      }
 
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current)
-        }
+      const handleWebsockets = (e: any) => {
+        if (e.detail.id === virtId) {
+          const pixels =
+            config.transmission_mode === 'compressed'
+              ? hexColor(e.detail.pixels, config.transmission_mode)
+              : e.detail.pixels
+          // const shape = e.detail.shape
+          const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
+          const cols = Math.ceil(pixels.length / rows)
+
+          if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current)
+          }
 
-        animationFrameRef.current = requestAnimationFrame(() => {
-          worker.postMessage({ pixels, rows, cols })
-        })
+          animationFrameRef.current = requestAnimationFrame(() => {
+            workerRef.current?.postMessage({ pixels, rows, cols })
+          })
+        }
       }
-    }
 
-    document.addEventListener('visualisation_update', handleWebsockets)
-    return () => {
-      document.removeEventListener('visualisation_update', handleWebsockets)
-      worker.terminate()
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current)
+      document.addEventListener('visualisation_update', handleWebsockets)
+      return () => {
+        document.removeEventListener('visualisation_update', handleWebsockets)
+        workerRef.current?.terminate()
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current)
+        }
       }
-    }
+    }, 200)
   }, [virtId, virtuals, pixelGraphs, devices, graphs, config, showMatrix])
 
   const render =

diff --git a/src/components/PixelGraph/pixelGraphWorkerWebGL.js b/src/components/PixelGraph/pixelGraphWorkerWebGL.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-globals */
 self.onmessage = (event) => {
+  self.postMessage('worker-ready');
   if (event.data.canvas) {
     self.canvas = event.data.canvas
     self.gl = self.canvas.getContext('webgl') || self.canvas.getContext('experimental-webgl')