Intergrate MainEventProxy and WorkerEventProxy for OffscreenCanvas

kaisalmen · Nov 14, 2023 · 4f745d2 · 4f745d2
1 parent cea9c8c
commit 4f745d2
Show file tree

Hide file tree

Showing 15 changed files with 348 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -30,8 +30,8 @@
   "dependencies": {
     "lil-gui": "~0.19.0",
     "three": "~0.158.0",
-    "wtd-core": "~3.0.0-next.0",
-    "wtd-three-ext": "~3.0.0-next.0",
+    "wtd-core": "~3.0.0-next.2",
+    "wtd-three-ext": "~3.0.0-next.2",
     "wwobjloader2": "6.2.0-next.4"
   },
   "devDependencies": {

diff --git a/packages/examples/src/com/WorkerCom.ts b/packages/examples/src/com/WorkerCom.ts
@@ -5,6 +5,7 @@ import {
     WorkerTaskMessageConfig
 } from 'wtd-core';
 import { recalcAspectRatio, updateText } from '../worker/ComWorkerCommon.js';
+import { OffscreenPayload } from 'wtd-core';
 
 /**
  * Hello World example using a classic worker
@@ -53,27 +54,37 @@ class HelloWorldStandardWorkerExample {
 
         try {
             const offscreenCom1 = this.canvasCom1.transferControlToOffscreen();
+            const offscreenPayload1 = new OffscreenPayload({
+                event: {
+                    type: 'init',
+                    drawingSurface: offscreenCom1,
+                    width: this.canvasCom1.clientWidth,
+                    height: this.canvasCom1.clientHeight
+                }
+            });
             const payload1 = new RawPayload({
-                port: channel.port1,
-                drawingSurface: offscreenCom1,
-                width: this.canvasCom1.clientWidth,
-                height: this.canvasCom1.clientHeight
+                port: channel.port1
             });
 
             const offscreenCom2 = this.canvasCom2.transferControlToOffscreen();
+            const offscreenPayload2 = new OffscreenPayload({
+                event: {
+                    type: 'init',
+                    drawingSurface: offscreenCom2,
+                    width: this.canvasCom2.clientWidth,
+                    height: this.canvasCom2.clientHeight
+                }
+            });
             const payload2 = new RawPayload({
-                port: channel.port2,
-                drawingSurface: offscreenCom2,
-                width: this.canvasCom2.clientWidth,
-                height: this.canvasCom2.clientHeight
+                port: channel.port2
             });
             const promisesinit = [];
             promisesinit.push(this.workerTaskCom1.initWorker({
-                message: WorkerTaskMessage.fromPayload(payload1),
+                message: WorkerTaskMessage.fromPayload([offscreenPayload1, payload1]),
                 transferables: [channel.port1, offscreenCom1]
             }));
             promisesinit.push(this.workerTaskCom2.initWorker({
-                message: WorkerTaskMessage.fromPayload(payload2),
+                message: WorkerTaskMessage.fromPayload([offscreenPayload2, payload2]),
                 transferables: [channel.port2, offscreenCom2],
             }));
             await Promise.all(promisesinit);

diff --git a/packages/examples/src/worker/Com1Worker.ts b/packages/examples/src/worker/Com1Worker.ts
@@ -10,17 +10,16 @@ import {
     WorkerTaskWorker
 } from 'wtd-core';
 import { getOffScreenCanvas, updateText } from './ComWorkerCommon.js';
+import { OffscreenPayload } from 'wtd-core';
 
 export class Com1Worker implements WorkerTaskWorker, InterComWorker {
 
     private icph = new InterComPortHandler();
     private offScreenCanvas?: HTMLCanvasElement;
 
     init(message: WorkerTaskMessageConfig): void {
-        // register the default com-routing function for inter-worker communication
-        const payload = message.payloads?.[0];
-        this.icph.registerPort('com2', payload, message => comRouting(this, message));
-        this.offScreenCanvas = getOffScreenCanvas(payload);
+        const payloadOffscreen = message.payloads?.[0] as OffscreenPayload;
+        this.offScreenCanvas = getOffScreenCanvas(payloadOffscreen);
         updateText({
             text: 'Worker 1: init',
             width: this.offScreenCanvas?.width ?? 0,
@@ -29,6 +28,10 @@ export class Com1Worker implements WorkerTaskWorker, InterComWorker {
             log: true
         });
 
+        // register the default com-routing function for inter-worker communication
+        const payloadPort = message.payloads?.[1];
+        this.icph.registerPort('com2', payloadPort, message => comRouting(this, message));
+
         // send initComplete to main
         const initComplete = WorkerTaskMessage.createFromExisting({} as WorkerTaskMessageConfig, WorkerTaskCommandResponse.INIT_COMPLETE);
         const payloadResponse = new RawPayload({ hello: 'Worker 1 initComplete!' });

diff --git a/packages/examples/src/worker/Com2Worker.ts b/packages/examples/src/worker/Com2Worker.ts
@@ -10,17 +10,16 @@ import {
     WorkerTaskWorker
 } from 'wtd-core';
 import { getOffScreenCanvas, updateText } from './ComWorkerCommon.js';
+import { OffscreenPayload } from 'wtd-core';
 
 export class Com2Worker implements WorkerTaskWorker, InterComWorker {
 
     private icph = new InterComPortHandler();
     private offScreenCanvas?: HTMLCanvasElement;
 
     init(message: WorkerTaskMessageConfig): void {
-        // register the default com-routing function for inter-worker communication
-        const payload = message.payloads?.[0];
-        this.icph.registerPort('com1', payload, message => comRouting(this, message));
-        this.offScreenCanvas = getOffScreenCanvas(payload);
+        const payloadOffscreen = message.payloads?.[0] as OffscreenPayload;
+        this.offScreenCanvas = getOffScreenCanvas(payloadOffscreen);
         updateText({
             text: 'Worker 2: init',
             width: this.offScreenCanvas?.width ?? 0,
@@ -29,6 +28,10 @@ export class Com2Worker implements WorkerTaskWorker, InterComWorker {
             log: true
         });
 
+        // register the default com-routing function for inter-worker communication
+        const payloadPort = message.payloads?.[1];
+        this.icph.registerPort('com1', payloadPort, message => comRouting(this, message));
+
         // send initComplete to main
         const initComplete = WorkerTaskMessage.createFromExisting({} as WorkerTaskMessageConfig, WorkerTaskCommandResponse.INIT_COMPLETE);
         const payloadResponse = new RawPayload({ hello: 'Worker 2 initComplete!' });

diff --git a/packages/examples/src/worker/ComWorkerCommon.ts b/packages/examples/src/worker/ComWorkerCommon.ts
@@ -1,7 +1,7 @@
-import { Payload, RawPayload } from 'wtd-core';
+import { OffscreenPayload } from 'wtd-core';
 
-export const getOffScreenCanvas = (payload?: Payload) => {
-    return payload ? (payload as RawPayload).message.raw.drawingSurface as HTMLCanvasElement : undefined;
+export const getOffScreenCanvas = (offScreenPayload?: OffscreenPayload) => {
+    return offScreenPayload ? offScreenPayload.message.drawingSurface as HTMLCanvasElement : undefined;
 };
 
 export const updateText = (params: {

diff --git a/packages/wtd-core/package.json b/packages/wtd-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wtd-core",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

diff --git a/packages/wtd-core/src/WorkerTask.ts b/packages/wtd-core/src/WorkerTask.ts
@@ -199,9 +199,10 @@ export class WorkerTask {
      */
     sentMessage(message: WorkerTaskMessage, transferables?: Transferable[]) {
         if (this.isWorkerExecuting() && this.worker) {
-            message.cmd = WorkerTaskCommandRequest.INTERMEDIATE;
             message.workerId = this.workerId;
             this.worker.postMessage(message, transferables!);
+        } else {
+            throw new Error('You can only sent message if Worker executing.');
         }
     }
 

diff --git a/packages/wtd-core/src/WorkerTaskMessage.ts b/packages/wtd-core/src/WorkerTaskMessage.ts
@@ -90,9 +90,12 @@ export class WorkerTaskMessage {
         return instance;
     }
 
-    static fromPayload(payload: Payload) {
+    static fromPayload(payloads: Payload | Payload[], cmd?: WorkerTaskCommands) {
         const wtm = new WorkerTaskMessage({});
-        wtm.addPayload(payload);
+        if (cmd) {
+            wtm.setCommand(cmd);
+        }
+        wtm.addPayload(payloads);
         return wtm;
     }
 }
diff --git a/packages/wtd-core/src/index.ts b/packages/wtd-core/src/index.ts
@@ -68,7 +68,14 @@ import {
     fillTransferables,
     extractDelegate
 } from './utiilies.js';
-
+import type {
+    OffscreenPayloadAdditions,
+    OffscreenPayloadMessage
+} from './offscreen/OffscreenPayload.js';
+import {
+    OffscreenPayload
+} from './offscreen/OffscreenPayload.js';
+export * from './offscreen/MainEventProxy.js';
 export {
     WorkerExecutionPlan,
     WorkerInitPlan,
@@ -98,5 +105,8 @@ export {
     DataPayloadHandler,
     applyProperties,
     fillTransferables,
-    extractDelegate
+    extractDelegate,
+    OffscreenPayloadAdditions,
+    OffscreenPayloadMessage,
+    OffscreenPayload
 };