a rotating cube (#3)

core/connection/mainThread.ts

@@ -12,7 +12,7 @@ const EventTypes = {
   keydown: 3,
   keyup: 4,
   onWheel: 5,
-} as const
+} as const;
 type EventTypesI = typeof EventTypes;
 
 /**
@@ -22,13 +22,28 @@ type EventTypesI = typeof EventTypes;
 const connectWorker = (worker: Worker) => {
   const eventPassers = {
     [EventTypes.pointermove]: (e: PointerEvent) => {
-      worker.postMessage([MessageType.domEvent, EventTypes.pointermove, e.clientX, e.clientY]);
+      worker.postMessage([
+        MessageType.domEvent,
+        EventTypes.pointermove,
+        e.clientX,
+        e.clientY,
+      ]);
     },
     [EventTypes.pointerup]: (e: PointerEvent) => {
-      worker.postMessage([MessageType.domEvent, EventTypes.pointerup, e.clientX, e.clientY]);
+      worker.postMessage([
+        MessageType.domEvent,
+        EventTypes.pointerup,
+        e.clientX,
+        e.clientY,
+      ]);
     },
     [EventTypes.pointerdown]: (e: PointerEvent) => {
-      worker.postMessage([MessageType.domEvent, EventTypes.pointerdown, e.clientX, e.clientY]);
+      worker.postMessage([
+        MessageType.domEvent,
+        EventTypes.pointerdown,
+        e.clientX,
+        e.clientY,
+      ]);
     },
     [EventTypes.keydown]: (e: KeyboardEvent) => {
       worker.postMessage([MessageType.domEvent, EventTypes.keydown, e.key]);
@@ -41,33 +56,58 @@ const connectWorker = (worker: Worker) => {
     },
   } as const;
 
-  document.addEventListener("pointermove", eventPassers[EventTypes.pointermove]);
-  document.addEventListener("pointerdown", eventPassers[EventTypes.pointerdown]);
+  document.addEventListener(
+    "pointermove",
+    eventPassers[EventTypes.pointermove]
+  );
+  document.addEventListener(
+    "pointerdown",
+    eventPassers[EventTypes.pointerdown]
+  );
   document.addEventListener("pointerup", eventPassers[EventTypes.pointerup]);
-  // 
+  //
   document.addEventListener("keydown", eventPassers[EventTypes.keydown]);
   document.addEventListener("keyup", eventPassers[EventTypes.keyup]);
 
   const disconnectWorker = () => {
-    document.removeEventListener("pointermove", eventPassers[EventTypes.pointermove]);
-    document.removeEventListener("pointerdown", eventPassers[EventTypes.pointerdown]);
-    document.removeEventListener("pointerup", eventPassers[EventTypes.pointerup]);
-    // 
+    document.removeEventListener(
+      "pointermove",
+      eventPassers[EventTypes.pointermove]
+    );
+    document.removeEventListener(
+      "pointerdown",
+      eventPassers[EventTypes.pointerdown]
+    );
+    document.removeEventListener(
+      "pointerup",
+      eventPassers[EventTypes.pointerup]
+    );
+    //
     document.removeEventListener("keydown", eventPassers[EventTypes.keydown]);
     document.removeEventListener("keyup", eventPassers[EventTypes.keyup]);
-  }
+  };
 
   return disconnectWorker;
-}
+};
 
 const attachCanvas = (worker: Worker, canvas: HTMLCanvasElement | string) => {
-  if (typeof canvas === "string") canvas = document.getElementById("rendering-canvas") as HTMLCanvasElement;
+  if (typeof canvas === "string")
+    canvas = document.getElementById("rendering-canvas") as HTMLCanvasElement;
   if (!canvas) {
     throw new Error("Fatal: Canvas Not Found!");
   }
+
+  // set canvas dimensions
+  // if this is not done, the canvas passed to the web worker
+  // will have the default size of 300x150
+  // this will cause the viewport to be set to the default size
+  // and eveything will be messed up
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
   const canvasWorker = canvas.transferControlToOffscreen();
   worker.postMessage([MessageType.attachCanvas, canvasWorker], [canvasWorker]);
-}
+};
 
 export type { EventTypesI, MessageTypeI };
-export { EventTypes, connectWorker, attachCanvas, MessageType }
+export { EventTypes, connectWorker, attachCanvas, MessageType };