I think its past my bed time again

libs/webgl/src/WebDrawingApp.ts

@@ -38,39 +38,58 @@ export class WebDrawingApp {
   }
 
   private addEventListeners() {
-    this.addListener("pointerdown", this.handlePress)
-    this.addListener("pointermove", this.handleMove)
-    this.addListener("pointerup", this.handleRelease)
+    this.addListener("pointerdown", ({ position }) => {
+      this.engine.setPressed(true, position)
+    })
+    this.addListener("pointermove", ({ position }) => {
+      this.engine.addPosition(position)
+      this.engine.setCursorPosition(position)
+    })
+    this.addListener("pointerup", ({ position }) => {
+      this.engine.setPressed(false, position)
+    })
+    this.addListeners(["pointerout", "pointerleave"], () => {
+      this.engine.setCursorPosition([])
+    })
+  }
+
+  private addListeners<K extends keyof HTMLElementEventMap>(
+    eventNames: Array<K>,
+    handler?: (event: DrawingEvent<HTMLElementEventMap[K]>) => void,
+    element: HTMLElement = this.root,
+  ) {
+    for (const eventName of eventNames) {
+      this.addListener(eventName, handler, element)
+    }
   }
 
   private addListener<K extends keyof HTMLElementEventMap>(
     eventName: K,
-    handler?: (event: HTMLElementEventMap[K]) => void,
+    handler?: (event: DrawingEvent<HTMLElementEventMap[K]>) => void,
     element: HTMLElement = this.root,
   ) {
     element.addEventListener(eventName, (event) => {
       event.preventDefault()
-      handler?.bind(this)(event)
+      handler?.bind(this)({
+        event,
+        position: this.getCanvasPosition(event),
+      })
     })
   }
 
-  private handlePress(event: PointerEvent) {
-    this.engine.setPressed(true, this.getMousePosition(event))
-  }
-
-  private handleMove(event: PointerEvent) {
-    const position = this.getMousePosition(event)
-    this.engine.addPosition(position)
-  }
+  private getCanvasPosition(event: Event): VectorArray<2> {
+    if (!(event instanceof MouseEvent)) {
+      return [NaN, NaN]
+    }
 
-  private handleRelease(event: PointerEvent) {
-    this.engine.setPressed(false, this.getMousePosition(event))
-  }
-
-  private getMousePosition(event: PointerEvent): VectorArray<2> {
     const rect = this.canvas.getBoundingClientRect()
     const x = event.clientX - rect.left
     const y = event.clientY - rect.top
     return [x * this.pixelDensity, y * this.pixelDensity]
   }
 }
+
+interface DrawingEvent<E extends Event> {
+  event: E
+  position: VectorArray<2>
+}

libs/webgl/src/engine/DrawingEngine.ts

@@ -14,7 +14,7 @@ export class DrawingEngine extends BaseDrawingEngine<AvailablePrograms> {
     currentPath: new Path(),
     pathHistory: [] as Array<ReadonlyArray<number>>,
     isDrawing: false,
-    cursorPosition: [0, 0] as Readonly<VectorArray<2>>,
+    cursorPosition: [] as Readonly<VectorArray<2> | []>,
   }
 
   constructor(canvas: HTMLCanvasElement) {
@@ -37,6 +37,9 @@ export class DrawingEngine extends BaseDrawingEngine<AvailablePrograms> {
 
   private drawCursor() {
     const position = this.context.cursorPosition
+    if (position[0] === undefined || position[1] === undefined) {
+      return
+    }
     const cursorSize = 2
     const x = position[0]
     const y = position[1]
@@ -97,11 +100,14 @@ export class DrawingEngine extends BaseDrawingEngine<AvailablePrograms> {
     this.context.pathHistory.push(path)
   }
 
+  public setCursorPosition(position: typeof this.context.cursorPosition) {
+    this.context.cursorPosition = position
+  }
+
   public addPosition(position: Readonly<VectorArray<2>>) {
     if (this.context.isDrawing) {
       this.context.currentPath.add(position)
     }
-    this.context.cursorPosition = position
     this.updateDrawing()
   }
 }