From 69b0b38fcc6205e5be892ba7f84f128976d7bfc3 Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Thu, 28 Sep 2023 17:27:52 -0500
Subject: [PATCH] Revert to using an in process pixi application. Preserve
 worker for layouts later

---
 package-lock.json              | 213 ++++++++++++++++++++-------------
 package.json                   |   4 +-
 src/components/RunGraph.vue    |  17 +--
 src/objects/application.ts     |  10 ++
 src/workers/runGraph.ts        |   6 +-
 src/workers/runGraph.worker.ts |  17 +--
 6 files changed, 153 insertions(+), 114 deletions(-)
 create mode 100644 src/objects/application.ts

diff --git a/package-lock.json b/package-lock.json
index a673bbe4..7c104e75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "2.0.5",
       "license": "ISC",
       "dependencies": {
-        "@pixi/webworker": "7.3.1",
-        "date-fns": "2.30.0"
+        "date-fns": "2.30.0",
+        "pixi.js": "^7.3.1"
       },
       "devDependencies": {
         "@prefecthq/eslint-config": "1.0.31",
@@ -601,6 +601,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pixi/accessibility": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-7.3.1.tgz",
+      "integrity": "sha512-7+XqUbVIRKvZQOuzQkt5vGpaDIBMorK5Sa+y9exu7nYDPCYlPdVoQeiQL7v2PtUxqkrgn28faNn8OqY8MhcqrQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.1",
+        "@pixi/display": "7.3.1",
+        "@pixi/events": "7.3.1"
+      }
+    },
     "node_modules/@pixi/app": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.3.1.tgz",
@@ -677,6 +687,15 @@
         "@pixi/core": "7.3.1"
       }
     },
+    "node_modules/@pixi/events": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@pixi/events/-/events-7.3.1.tgz",
+      "integrity": "sha512-L6MSeFnLo3z/pQMCLGbwp5szp1+26YoZ50De2pT6hMuPGtMtio89IkFU07G1jNuiGhJsPMw4Zn9H71KiZp+X1A==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.1",
+        "@pixi/display": "7.3.1"
+      }
+    },
     "node_modules/@pixi/extensions": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.3.1.tgz",
@@ -892,6 +911,17 @@
         "@pixi/text": "7.3.1"
       }
     },
+    "node_modules/@pixi/text-html": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@pixi/text-html/-/text-html-7.3.1.tgz",
+      "integrity": "sha512-Yo96c/fM7eSUdovZInTl/LkI44y2s2vfdkpnPjHU6ohIFJ4cAf4ok2CjBpAMExvJG8f4lvTkDRqECuRUD0DUnA==",
+      "peerDependencies": {
+        "@pixi/core": "7.3.1",
+        "@pixi/display": "7.3.1",
+        "@pixi/sprite": "7.3.1",
+        "@pixi/text": "7.3.1"
+      }
+    },
     "node_modules/@pixi/ticker": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.3.1.tgz",
@@ -916,41 +946,6 @@
         "url": "^0.11.0"
       }
     },
-    "node_modules/@pixi/webworker": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@pixi/webworker/-/webworker-7.3.1.tgz",
-      "integrity": "sha512-q8nzPybMaEbGJAlT3v3y6du6dt4E+3mqDq6L9xB5aD0VBNU8o3DLEQykVQMYLwaIfUXjyFLmlAJXaxa6wMxyOA==",
-      "dependencies": {
-        "@pixi/app": "7.3.1",
-        "@pixi/assets": "7.3.1",
-        "@pixi/compressed-textures": "7.3.1",
-        "@pixi/core": "7.3.1",
-        "@pixi/display": "7.3.1",
-        "@pixi/extensions": "7.3.1",
-        "@pixi/extract": "7.3.1",
-        "@pixi/filter-alpha": "7.3.1",
-        "@pixi/filter-blur": "7.3.1",
-        "@pixi/filter-color-matrix": "7.3.1",
-        "@pixi/filter-displacement": "7.3.1",
-        "@pixi/filter-fxaa": "7.3.1",
-        "@pixi/filter-noise": "7.3.1",
-        "@pixi/graphics": "7.3.1",
-        "@pixi/mesh": "7.3.1",
-        "@pixi/mesh-extras": "7.3.1",
-        "@pixi/mixin-cache-as-bitmap": "7.3.1",
-        "@pixi/mixin-get-child-by-name": "7.3.1",
-        "@pixi/mixin-get-global-position": "7.3.1",
-        "@pixi/particle-container": "7.3.1",
-        "@pixi/prepare": "7.3.1",
-        "@pixi/sprite": "7.3.1",
-        "@pixi/sprite-animated": "7.3.1",
-        "@pixi/sprite-tiling": "7.3.1",
-        "@pixi/spritesheet": "7.3.1",
-        "@pixi/text": "7.3.1",
-        "@pixi/text-bitmap": "7.3.1",
-        "@xmldom/xmldom": "^0.8.6"
-      }
-    },
     "node_modules/@pkgr/utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.0.tgz",
@@ -1754,14 +1749,6 @@
         "@vue/language-core": "1.8.11"
       }
     },
-    "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -4925,6 +4912,47 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pixi.js": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-7.3.1.tgz",
+      "integrity": "sha512-BFuEOsNimxjLq/Bo16JiXBr/EKXp13z/NXdyMasRcZumCHDUdrKvTEFaUfrkFat6ZghgrWyHnREzK3b+F6OX0Q==",
+      "dependencies": {
+        "@pixi/accessibility": "7.3.1",
+        "@pixi/app": "7.3.1",
+        "@pixi/assets": "7.3.1",
+        "@pixi/compressed-textures": "7.3.1",
+        "@pixi/core": "7.3.1",
+        "@pixi/display": "7.3.1",
+        "@pixi/events": "7.3.1",
+        "@pixi/extensions": "7.3.1",
+        "@pixi/extract": "7.3.1",
+        "@pixi/filter-alpha": "7.3.1",
+        "@pixi/filter-blur": "7.3.1",
+        "@pixi/filter-color-matrix": "7.3.1",
+        "@pixi/filter-displacement": "7.3.1",
+        "@pixi/filter-fxaa": "7.3.1",
+        "@pixi/filter-noise": "7.3.1",
+        "@pixi/graphics": "7.3.1",
+        "@pixi/mesh": "7.3.1",
+        "@pixi/mesh-extras": "7.3.1",
+        "@pixi/mixin-cache-as-bitmap": "7.3.1",
+        "@pixi/mixin-get-child-by-name": "7.3.1",
+        "@pixi/mixin-get-global-position": "7.3.1",
+        "@pixi/particle-container": "7.3.1",
+        "@pixi/prepare": "7.3.1",
+        "@pixi/sprite": "7.3.1",
+        "@pixi/sprite-animated": "7.3.1",
+        "@pixi/sprite-tiling": "7.3.1",
+        "@pixi/spritesheet": "7.3.1",
+        "@pixi/text": "7.3.1",
+        "@pixi/text-bitmap": "7.3.1",
+        "@pixi/text-html": "7.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/pixijs"
+      }
+    },
     "node_modules/plimit-lit": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/plimit-lit/-/plimit-lit-1.5.0.tgz",
@@ -6776,6 +6804,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pixi/accessibility": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-7.3.1.tgz",
+      "integrity": "sha512-7+XqUbVIRKvZQOuzQkt5vGpaDIBMorK5Sa+y9exu7nYDPCYlPdVoQeiQL7v2PtUxqkrgn28faNn8OqY8MhcqrQ==",
+      "requires": {}
+    },
     "@pixi/app": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.3.1.tgz",
@@ -6836,6 +6870,12 @@
       "integrity": "sha512-FzVsEuR9mmi8G+3HytrnKpcO9By04gJhNrYnMY6pLWwXE6MzuEtC7QYobtN1UIUp4Zs73O6lmdZtWOYqrdjgGw==",
       "requires": {}
     },
+    "@pixi/events": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@pixi/events/-/events-7.3.1.tgz",
+      "integrity": "sha512-L6MSeFnLo3z/pQMCLGbwp5szp1+26YoZ50De2pT6hMuPGtMtio89IkFU07G1jNuiGhJsPMw4Zn9H71KiZp+X1A==",
+      "requires": {}
+    },
     "@pixi/extensions": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.3.1.tgz",
@@ -6987,6 +7027,12 @@
       "integrity": "sha512-sc/eoV/OOJh81/GKqIXfuUexQ0EbP2ggPvGQghaC/VyUbOAwlSMUmNmXlY68KzPX9JasIDCFyv07Utnkmona7g==",
       "requires": {}
     },
+    "@pixi/text-html": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@pixi/text-html/-/text-html-7.3.1.tgz",
+      "integrity": "sha512-Yo96c/fM7eSUdovZInTl/LkI44y2s2vfdkpnPjHU6ohIFJ4cAf4ok2CjBpAMExvJG8f4lvTkDRqECuRUD0DUnA==",
+      "requires": {}
+    },
     "@pixi/ticker": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.3.1.tgz",
@@ -7011,41 +7057,6 @@
         "url": "^0.11.0"
       }
     },
-    "@pixi/webworker": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@pixi/webworker/-/webworker-7.3.1.tgz",
-      "integrity": "sha512-q8nzPybMaEbGJAlT3v3y6du6dt4E+3mqDq6L9xB5aD0VBNU8o3DLEQykVQMYLwaIfUXjyFLmlAJXaxa6wMxyOA==",
-      "requires": {
-        "@pixi/app": "7.3.1",
-        "@pixi/assets": "7.3.1",
-        "@pixi/compressed-textures": "7.3.1",
-        "@pixi/core": "7.3.1",
-        "@pixi/display": "7.3.1",
-        "@pixi/extensions": "7.3.1",
-        "@pixi/extract": "7.3.1",
-        "@pixi/filter-alpha": "7.3.1",
-        "@pixi/filter-blur": "7.3.1",
-        "@pixi/filter-color-matrix": "7.3.1",
-        "@pixi/filter-displacement": "7.3.1",
-        "@pixi/filter-fxaa": "7.3.1",
-        "@pixi/filter-noise": "7.3.1",
-        "@pixi/graphics": "7.3.1",
-        "@pixi/mesh": "7.3.1",
-        "@pixi/mesh-extras": "7.3.1",
-        "@pixi/mixin-cache-as-bitmap": "7.3.1",
-        "@pixi/mixin-get-child-by-name": "7.3.1",
-        "@pixi/mixin-get-global-position": "7.3.1",
-        "@pixi/particle-container": "7.3.1",
-        "@pixi/prepare": "7.3.1",
-        "@pixi/sprite": "7.3.1",
-        "@pixi/sprite-animated": "7.3.1",
-        "@pixi/sprite-tiling": "7.3.1",
-        "@pixi/spritesheet": "7.3.1",
-        "@pixi/text": "7.3.1",
-        "@pixi/text-bitmap": "7.3.1",
-        "@xmldom/xmldom": "^0.8.6"
-      }
-    },
     "@pkgr/utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.0.tgz",
@@ -7599,11 +7610,6 @@
         "@vue/language-core": "1.8.11"
       }
     },
-    "@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
-    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -9852,6 +9858,43 @@
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg=="
     },
+    "pixi.js": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-7.3.1.tgz",
+      "integrity": "sha512-BFuEOsNimxjLq/Bo16JiXBr/EKXp13z/NXdyMasRcZumCHDUdrKvTEFaUfrkFat6ZghgrWyHnREzK3b+F6OX0Q==",
+      "requires": {
+        "@pixi/accessibility": "7.3.1",
+        "@pixi/app": "7.3.1",
+        "@pixi/assets": "7.3.1",
+        "@pixi/compressed-textures": "7.3.1",
+        "@pixi/core": "7.3.1",
+        "@pixi/display": "7.3.1",
+        "@pixi/events": "7.3.1",
+        "@pixi/extensions": "7.3.1",
+        "@pixi/extract": "7.3.1",
+        "@pixi/filter-alpha": "7.3.1",
+        "@pixi/filter-blur": "7.3.1",
+        "@pixi/filter-color-matrix": "7.3.1",
+        "@pixi/filter-displacement": "7.3.1",
+        "@pixi/filter-fxaa": "7.3.1",
+        "@pixi/filter-noise": "7.3.1",
+        "@pixi/graphics": "7.3.1",
+        "@pixi/mesh": "7.3.1",
+        "@pixi/mesh-extras": "7.3.1",
+        "@pixi/mixin-cache-as-bitmap": "7.3.1",
+        "@pixi/mixin-get-child-by-name": "7.3.1",
+        "@pixi/mixin-get-global-position": "7.3.1",
+        "@pixi/particle-container": "7.3.1",
+        "@pixi/prepare": "7.3.1",
+        "@pixi/sprite": "7.3.1",
+        "@pixi/sprite-animated": "7.3.1",
+        "@pixi/sprite-tiling": "7.3.1",
+        "@pixi/spritesheet": "7.3.1",
+        "@pixi/text": "7.3.1",
+        "@pixi/text-bitmap": "7.3.1",
+        "@pixi/text-html": "7.3.1"
+      }
+    },
     "plimit-lit": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/plimit-lit/-/plimit-lit-1.5.0.tgz",
diff --git a/package.json b/package.json
index a469c265..41ea8087 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/components/RunGraph.vue b/src/components/RunGraph.vue
index 71de9d12..11e42fde 100644
--- a/src/components/RunGraph.vue
+++ b/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
diff --git a/src/objects/application.ts b/src/objects/application.ts
new file mode 100644
index 00000000..cf2e4645
--- /dev/null
+++ b/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',
+  })
+}
\ No newline at end of file
diff --git a/src/workers/runGraph.ts b/src/workers/runGraph.ts
index 16d49465..c5c4d490 100644
--- a/src/workers/runGraph.ts
+++ b/src/workers/runGraph.ts
@@ -1,4 +1,3 @@
-import { IApplicationOptions } from '@pixi/webworker'
 // eslint-disable-next-line import/default
 import RunGraphWorker from '@/workers/runGraph.worker?worker'
 
@@ -6,12 +5,11 @@ 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'> {
diff --git a/src/workers/runGraph.worker.ts b/src/workers/runGraph.worker.ts
index 807008fa..fe323b43 100644
--- a/src/workers/runGraph.worker.ts
+++ b/src/workers/runGraph.worker.ts
@@ -1,14 +1,13 @@
-import { Application } from '@pixi/webworker'
-import { WorkerMessage, ClientApplicationInitializationMessage, ClientMessage } from '@/workers/runGraph'
+import { WorkerMessage, ClientMessage } from '@/workers/runGraph'
 
 onmessage = onMessageHandler
 
-let application: Application
-
 function onMessageHandler({ data }: MessageEvent<ClientMessage>): void {
   switch (data.type) {
-    case 'application':
-      return applicationInitializationMessageHandler(data)
+    case 'ping':
+      console.log('ping')
+      post({ type: 'pong' })
+      return
     default:
       const exhaustive: never = data.type
       throw new Error(`data.type does not have a handler associated with it: ${exhaustive}`)
@@ -18,9 +17,3 @@ function onMessageHandler({ data }: MessageEvent<ClientMessage>): void {
 function post(message: WorkerMessage): void {
   postMessage(message)
 }
-
-function applicationInitializationMessageHandler({ options }: ClientApplicationInitializationMessage): void {
-  application = new Application(options)
-
-  post({ type: 'hello-world' })
-}