Attempt to fix sketch mode rendering, something's still weird

Author: franknoirot

src/clientSideScene/CameraControls.ts

@@ -395,9 +395,13 @@ export class CameraControls {
 
   onWindowResize = () => {
     if (this.camera instanceof PerspectiveCamera) {
-      this.camera.aspect = window.innerWidth / window.innerHeight
+      this.camera.aspect =
+        this.engineCommandManager.streamDimensions.width /
+        this.engineCommandManager.streamDimensions.height
     } else if (this.camera instanceof OrthographicCamera) {
-      const aspect = window.innerWidth / window.innerHeight
+      const aspect =
+        this.engineCommandManager.streamDimensions.width /
+        this.engineCommandManager.streamDimensions.height
       this.camera.left = -ORTHOGRAPHIC_CAMERA_SIZE * aspect
       this.camera.right = ORTHOGRAPHIC_CAMERA_SIZE * aspect
       this.camera.top = ORTHOGRAPHIC_CAMERA_SIZE
@@ -586,7 +590,9 @@ export class CameraControls {
     const { x: px, y: py, z: pz } = this.camera.position
     const { x: qx, y: qy, z: qz, w: qw } = this.camera.quaternion
     const oldCamUp = this.camera.up.clone()
-    const aspect = window.innerWidth / window.innerHeight
+    const aspect =
+      this.engineCommandManager.streamDimensions.width /
+      this.engineCommandManager.streamDimensions.height
     this.lastPerspectiveFov = this.camera.fov
     const { z_near, z_far } = calculateNearFarFromFOV(this.lastPerspectiveFov)
     this.camera = new OrthographicCamera(
@@ -624,7 +630,8 @@ export class CameraControls {
     const previousCamUp = this.camera.up.clone()
     this.camera = new PerspectiveCamera(
       this.lastPerspectiveFov,
-      window.innerWidth / window.innerHeight,
+      this.engineCommandManager.streamDimensions.width /
+        this.engineCommandManager.streamDimensions.height,
       z_near,
       z_far
     )

src/clientSideScene/sceneInfra.ts

@@ -236,8 +236,8 @@ export class SceneInfra {
         _angle = typeof angle === 'number' ? angle : getAngle(from, to)
       }
 
-      const x = (vector.x * 0.5 + 0.5) * window.innerWidth
-      const y = (-vector.y * 0.5 + 0.5) * window.innerHeight
+      const x = (vector.x * 0.5 + 0.5) * this.renderer.domElement.clientWidth
+      const y = (-vector.y * 0.5 + 0.5) * this.renderer.domElement.clientHeight
       const pathToNodeString = JSON.stringify(group.userData.pathToNode)
       return {
         type: 'set-one',
@@ -450,9 +450,14 @@ export class SceneInfra {
     }
   }
   onMouseMove = async (mouseEvent: MouseEvent) => {
-    this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
+    if (!(mouseEvent.currentTarget instanceof HTMLElement)) {
+      console.error('unexpected targetless event')
+      return
+    }
+    this.currentMouseVector.x =
+      (mouseEvent.clientX / mouseEvent.currentTarget.clientWidth) * 2 - 1
     this.currentMouseVector.y =
-      -(mouseEvent.clientY / window.innerHeight) * 2 + 1
+      -(mouseEvent.clientY / mouseEvent.currentTarget.clientHeight) * 2 + 1
 
     const planeIntersectPoint = this.getPlaneIntersectPoint()
     const intersects = this.raycastRing()
@@ -582,8 +587,14 @@ export class SceneInfra {
     // Check the ring points
     for (let i = 0; i < rayRingCount; i++) {
       const angle = (i / rayRingCount) * Math.PI * 2
-      const offsetX = ((pixelRadius * Math.cos(angle)) / window.innerWidth) * 2
-      const offsetY = ((pixelRadius * Math.sin(angle)) / window.innerHeight) * 2
+      const offsetX =
+        ((pixelRadius * Math.cos(angle)) /
+          this.renderer.domElement.clientWidth) *
+        2
+      const offsetY =
+        ((pixelRadius * Math.sin(angle)) /
+          this.renderer.domElement.clientHeight) *
+        2
       const ringVector = new Vector2(
         mouseDownVector.x + offsetX,
         mouseDownVector.y - offsetY
@@ -607,8 +618,14 @@ export class SceneInfra {
   }
 
   onMouseDown = (event: MouseEvent) => {
-    this.currentMouseVector.x = (event.clientX / window.innerWidth) * 2 - 1
-    this.currentMouseVector.y = -(event.clientY / window.innerHeight) * 2 + 1
+    if (!(event.currentTarget instanceof HTMLElement)) {
+      console.error('unexpected targetless event')
+      return
+    }
+    this.currentMouseVector.x =
+      (event.clientX / event.currentTarget.clientWidth) * 2 - 1
+    this.currentMouseVector.y =
+      -(event.clientY / event.currentTarget.clientHeight) * 2 + 1
 
     const mouseDownVector = this.currentMouseVector.clone()
     const intersect = this.raycastRing()[0]
@@ -626,9 +643,14 @@ export class SceneInfra {
   }
 
   onMouseUp = async (mouseEvent: MouseEvent) => {
-    this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
+    if (!(mouseEvent.currentTarget instanceof HTMLElement)) {
+      console.error('unexpected targetless event')
+      return
+    }
+    this.currentMouseVector.x =
+      (mouseEvent.clientX / mouseEvent.currentTarget.clientWidth) * 2 - 1
     this.currentMouseVector.y =
-      -(mouseEvent.clientY / window.innerHeight) * 2 + 1
+      -(mouseEvent.clientY / mouseEvent.currentTarget.clientHeight) * 2 + 1
     const planeIntersectPoint = this.getPlaneIntersectPoint()
     const intersects = this.raycastRing()