use a native cursor but hide it while drawing

hiddenist · Nov 25, 2023 · 1560d5e · 1560d5e
1 parent c9b55aa
commit 1560d5e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 49 deletions.
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
@@ -27,7 +27,7 @@ main canvas {
   background-color: rgb(45, 45, 50);
   background-image: url("data:image/svg+xml,%3Csvg opacity='0.2' fill='black' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon fill-rule='evenodd' points='0,0 16,0 16,32 32,32 32,16 0,16' /%3E%3C/svg%3E");
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  cursor: none;
+  cursor: crosshair;
 }
 
 aside {

diff --git a/libs/webgl/src/WebDrawingApp.ts b/libs/webgl/src/WebDrawingApp.ts
@@ -40,20 +40,21 @@ export class WebDrawingApp {
   private addEventListeners() {
     this.addListener("pointerdown", ({ position }) => {
       this.engine.setPressed(true, position)
+      this.canvas.style.setProperty("cursor", "none")
     })
     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([])
+      this.canvas.style.removeProperty("cursor")
     })
   }
 
-  private addListeners<K extends keyof HTMLElementEventMap>(
+  /**
+   * Add multiple events to one listener.
+   */
+  protected addListeners<K extends keyof HTMLElementEventMap>(
     eventNames: Array<K>,
     handler?: (event: DrawingEvent<HTMLElementEventMap[K]>) => void,
     element: HTMLElement = this.root,
@@ -63,7 +64,7 @@ export class WebDrawingApp {
     }
   }
 
-  private addListener<K extends keyof HTMLElementEventMap>(
+  protected addListener<K extends keyof HTMLElementEventMap>(
     eventName: K,
     handler?: (event: DrawingEvent<HTMLElementEventMap[K]>) => void,
     element: HTMLElement = this.root,
@@ -77,7 +78,7 @@ export class WebDrawingApp {
     })
   }
 
-  private getCanvasPosition(event: Event): Vec2 {
+  protected getCanvasPosition(event: Event): Vec2 {
     const [x, y] = getEventPosition(event, this.canvas)
     return [x * this.pixelDensity, y * this.pixelDensity]
   }

diff --git a/libs/webgl/src/engine/DrawingEngine.ts b/libs/webgl/src/engine/DrawingEngine.ts
@@ -20,7 +20,6 @@ export class DrawingEngine extends BaseDrawingEngine<AvailablePrograms> {
     currentPath: new Path(),
     pathHistory: [] as Array<HistoryItem>,
     isDrawing: false,
-    cursorPosition: [] as Readonly<Vec2 | []>,
   }
 
   constructor(canvas: HTMLCanvasElement) {
@@ -36,42 +35,6 @@ export class DrawingEngine extends BaseDrawingEngine<AvailablePrograms> {
     if (this.context.currentPath.points.length > 0) {
       this.drawLine(this.context.currentPath.points, { drawType: DrawType.DYNAMIC_DRAW })
     }
-    if (!this.context.isDrawing) {
-      this.drawCursor()
-    }
-  }
-
-  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]
-    this.drawLine(
-      [
-        x - cursorSize,
-        y - cursorSize,
-
-        x - cursorSize,
-        y + cursorSize,
-
-        x + cursorSize,
-        y + cursorSize,
-
-        x + cursorSize,
-        y - cursorSize,
-
-        x - cursorSize,
-        y - cursorSize,
-      ],
-      {
-        drawType: DrawType.DYNAMIC_DRAW,
-        // todo: this doesn't work yet, everything is the same color. do we need to create a new program for the cursor?
-        color: Color.WHITE,
-      },
-    )
   }
 
   public drawLine(
@@ -119,10 +82,6 @@ export class DrawingEngine extends BaseDrawingEngine<AvailablePrograms> {
     this.context.pathHistory.push({ path, color: this.color.foreground })
   }
 
-  public setCursorPosition(position: typeof this.context.cursorPosition) {
-    this.context.cursorPosition = position
-  }
-
   public addPosition(position: Readonly<Vec2>) {
     if (this.context.isDrawing) {
       this.context.currentPath.add(position)