Merge pull request #213 from PrefectHQ/pixi-app-refactor

Revert to using an in process pixi application

package.json

@@ -58,7 +58,7 @@
     "vue-router": "^4.0.12"
   },
   "dependencies": {
-    "@pixi/webworker": "7.3.1",
-    "date-fns": "2.30.0"
+    "date-fns": "2.30.0",
+    "pixi.js": "^7.3.1"
   }
 }

src/components/RunGraph.vue

@@ -5,6 +5,7 @@
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
   import { RunGraphConfig } from '@/models/RunGraph'
+  import { createApplication } from '@/objects/application'
   import { WorkerMessage, worker } from '@/workers/runGraph'
 
   defineProps<{
@@ -13,10 +14,12 @@
 
   const canvas = ref<HTMLCanvasElement>()
 
+  worker.onmessage = onMessage
+
   function onMessage({ data }: MessageEvent<WorkerMessage>): void {
     switch (data.type) {
-      case 'hello-world':
-        console.log(data.type)
+      case 'pong':
+        console.log('pong')
         return
       default:
         const exhaustive: never = data.type
@@ -31,15 +34,7 @@
 
     const view = canvas.value.transferControlToOffscreen()
 
-    worker.postMessage({
-      type: 'application',
-      options: {
-        view,
-        background: '#1099bb',
-      },
-    }, [view])
-
-    worker.onmessage = onMessage
+    createApplication(view)
 
     if (process.env.NODE_ENV === 'development') {
       (globalThis as any).__PIXI_STAGE__ = canvas.value

src/objects/application.ts

@@ -0,0 +1,10 @@
+import { Application } from 'pixi.js'
+
+export let application: Application
+
+export function createApplication(view: OffscreenCanvas): void {
+  application = new Application({
+    view,
+    background: '#1099bb',
+  })
+}

src/workers/runGraph.ts

@@ -1,17 +1,15 @@
-import { IApplicationOptions } from '@pixi/webworker'
 // eslint-disable-next-line import/default
 import RunGraphWorker from '@/workers/runGraph.worker?worker'
 
 export type ClientMessage = ClientApplicationInitializationMessage
 export type WorkerMessage = WorkerHelloWorldMessage
 
 export type ClientApplicationInitializationMessage = {
-  type: 'application',
-  options: Partial<IApplicationOptions>,
+  type: 'ping',
 }
 
 export type WorkerHelloWorldMessage = {
-  type: 'hello-world',
+  type: 'pong',
 }
 
 export interface IRunGraphWorker extends Omit<Worker, 'postMessage'> {