color picker + misc bug fix (#45)

libs/drawing-engine/src/engine/DrawingEngine.ts

@@ -1,7 +1,7 @@
 import { TextureDrawingProgram } from "../programs/TextureDrawingProgram"
 import type { Vec2 } from "@libs/shared"
 import { Color } from "@libs/shared"
-import { Layer } from "./Layer"
+import { Layer, LayerSettings } from "./Layer"
 import { SourceImage } from "../utils/image/SourceImage"
 import { ToolName, ToolNames } from "../exports"
 import { LineHistoryEntry, LineTool } from "../tools/LineTool"
@@ -89,8 +89,8 @@ export class DrawingEngine {
       prevTool: defaultTool,
     }
 
-    this.savedDrawingLayer = new Layer(gl)
-    this.activeDrawingLayer = new Layer(gl, { clearBeforeDrawing: true })
+    this.savedDrawingLayer = this.makeLayer()
+    this.activeDrawingLayer = this.makeLayer({ clearBeforeDrawing: true })
 
     this.program = new TextureDrawingProgram(gl, this.state.pixelDensity)
 
@@ -103,6 +103,10 @@ export class DrawingEngine {
     this.callListeners("changeTool", { tool: this.state.tool })
   }
 
+  private makeLayer(options?: Partial<LayerSettings>) {
+    return new Layer(this.gl, options)
+  }
+
   public get pixelDensity() {
     return this.state.pixelDensity
   }
@@ -138,7 +142,6 @@ export class DrawingEngine {
   }
 
   public setColor(color: Color) {
-    this.commitToSavedLayer()
     this.state.color = color
   }
 
@@ -187,9 +190,14 @@ export class DrawingEngine {
     return position[0] >= 0 && position[0] <= this.state.width && position[1] >= 0 && position[1] <= this.state.height
   }
 
-  public draw(drawCallback: () => void): this {
+  public draw(drawCallback: () => HistoryItem | undefined): this {
     const layer = this.activeDrawingLayer
-    this.program.createTextureImage(layer, drawCallback)
+    this.program.createTextureImage(layer, () => {
+      const drawData = drawCallback()
+      if (drawData) {
+        this.callListeners("draw", drawData)
+      }
+    })
     this.render()
     return this
   }

libs/drawing-engine/src/tools/LineTool.ts

@@ -108,7 +108,7 @@ export class LineTool {
     }
     const path = this.currentPath
     this.engine.draw(() => {
-      const pressure = this.options.pressureEnabled ? path.map(([, , pressure]) => pressure ?? 1.0) : undefined
+      const pressure = this.options.pressureEnabled ? path.map(([, , pressure]) => pressure ?? 0.0) : undefined
       this.program.draw(
         {
           points: path.map(([x, y]) => [x, y]).flat(),
@@ -120,8 +120,8 @@ export class LineTool {
     })
   }
 
-  private hasPressure([_, ...points]: number[]) {
-    return !points.some((point) => point === 0)
+  private hasPressure(points: number[]) {
+    return points.some((point) => point !== 0)
   }
 
   protected getLineOptions(): Required<Omit<DrawLineOptions, "drawType">> {