switch back to brush tool when selecting colors

hiddenist · Dec 23, 2023 · 052484d · 052484d
1 parent 29172b1
commit 052484d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
@@ -1,6 +1,6 @@
 import "./style.css"
 
-import { WebDrawingEngine, EventType, ToolNames } from "@libs/drawing-engine"
+import { WebDrawingEngine, EventType, ToolNames, ToolName } from "@libs/drawing-engine"
 import { ColorPicker } from "@libs/color-picker"
 import { Color } from "@libs/shared"
 
@@ -90,22 +90,22 @@ function main() {
     e.returnValue = ""
   })
 }
-function makeToolbar<T extends string>(
+function makeToolbar(
   root: HTMLElement,
   options: {
     state: { hasDrawn: boolean }
     initialColor?: Color
     initialOpacity?: number
-    initialTool?: T
+    initialTool?: ToolName
     getLineWeight: () => number | null
 
-    tools: ReadonlyArray<{ label: string; value: T }>
+    tools: ReadonlyArray<{ label: string; value: ToolName }>
 
     onClear: () => void
     onSetOpacity: (opacity: number) => void
     onSetLineWeight: (weight: number) => void
     onSetColor: (color: Color) => void
-    onSetTool: (tool: T) => void
+    onSetTool: (tool: ToolName) => void
     onExport: (name: string) => void
     onLoadImage: (image: HTMLImageElement) => void
 
@@ -137,6 +137,7 @@ function makeToolbar<T extends string>(
   const recentColors = recentColorTray({
     onColorSelect(color) {
       picker.setColor(color)
+      options.onSetTool(ToolNames.brush)
     },
   })
 
@@ -182,7 +183,7 @@ function makeToolbar<T extends string>(
 
   let setWeightRef: { setValue?: (weight: number | string) => void } = {}
   toolSelect.addEventListener("change", () => {
-    options.onSetTool(toolSelect.value as T)
+    options.onSetTool(toolSelect.value as ToolName)
     const weight = options.getLineWeight()
     if (weight) {
       setWeightRef.setValue?.(weight)

diff --git a/libs/drawing-engine/src/engine/DrawingEngine.ts b/libs/drawing-engine/src/engine/DrawingEngine.ts
@@ -167,6 +167,10 @@ export class DrawingEngine {
     this.callListeners(EventType.changeTool, { tool })
   }
 
+  public getState(): Readonly<DrawingEngineState> {
+    return this.state
+  }
+
   public usePrevTool() {
     this.setTool(this.state.prevTool)
   }

diff --git a/libs/drawing-engine/src/tools/EyeDropperTool.ts b/libs/drawing-engine/src/tools/EyeDropperTool.ts
@@ -39,7 +39,11 @@ export class EyeDropperTool {
   }
 
   onCancel() {
-    this.engine.usePrevTool()
+    if (this.engine.getState().prevTool === ToolNames.eraser) {
+      this.engine.setTool(ToolNames.brush)
+    } else {
+      this.engine.usePrevTool()
+    }
     this.engine.callListeners(EventType.previewColor, { color: null })
   }