From 019fc0c42e5b402a53de5d41d329efc418ef6dbc Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Tue, 25 Feb 2025 00:33:50 -0800
Subject: [PATCH] Create signals for paint and erase brush size

---
 .../signals/uiEvents/toolbarMain/eraseMode.ts   | 14 ++++++++++++++
 .../signals/uiEvents/toolbarMain/paintMode.ts   | 17 +++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 frontend/realtime/src/signals/uiEvents/toolbarMain/eraseMode.ts

diff --git a/frontend/realtime/src/signals/uiEvents/toolbarMain/eraseMode.ts b/frontend/realtime/src/signals/uiEvents/toolbarMain/eraseMode.ts
new file mode 100644
index 0000000000..df32951f7c
--- /dev/null
+++ b/frontend/realtime/src/signals/uiEvents/toolbarMain/eraseMode.ts
@@ -0,0 +1,14 @@
+import { effect, signal } from "@preact/signals-react";
+import { clamp, normalize } from "~/utilities";
+import { BRUSH_MAX_SIZE, BRUSH_MIN_SIZE, DEFAULT_PAINT_BRUSH_SIZE, paintBrushSize } from "./paintMode";
+
+export const eraseBrushSize = signal<number>(DEFAULT_PAINT_BRUSH_SIZE);
+export const setEraseBrushSize = (brushSize: number) => {
+  eraseBrushSize.value = clamp(brushSize, BRUSH_MIN_SIZE, BRUSH_MAX_SIZE);
+}
+
+export const onEraseBrushSizeChanged = (callback: (normalizedSize: number) => void) => {
+  effect(() => {
+    callback(normalize(paintBrushSize.value, BRUSH_MIN_SIZE, BRUSH_MAX_SIZE));
+  });
+};
diff --git a/frontend/realtime/src/signals/uiEvents/toolbarMain/paintMode.ts b/frontend/realtime/src/signals/uiEvents/toolbarMain/paintMode.ts
index b54f989a78..d06f4cad76 100644
--- a/frontend/realtime/src/signals/uiEvents/toolbarMain/paintMode.ts
+++ b/frontend/realtime/src/signals/uiEvents/toolbarMain/paintMode.ts
@@ -1,4 +1,5 @@
 import { effect, signal } from "@preact/signals-react";
+import { clamp, normalize } from "~/utilities";
 
 export const DEFAULT_PAINT_COLOR: string = "#ff0000";
 export const paintColor = signal<string>(DEFAULT_PAINT_COLOR);
@@ -6,6 +7,16 @@ export const setPaintColor = (data: string) => {
   paintColor.value = data;
 };
 
+export const BRUSH_MIN_SIZE: number = 0;
+export const BRUSH_MAX_SIZE: number = 100;
+// NOTE: Must be between MIN and MAX sizes - there's no runtime checks
+export const DEFAULT_PAINT_BRUSH_SIZE: number = 50;
+export const paintBrushSize = signal<number>(DEFAULT_PAINT_BRUSH_SIZE);
+export const setPaintBrushSize = (brushSize: number) => {
+  paintBrushSize.value = clamp(brushSize, BRUSH_MIN_SIZE, BRUSH_MAX_SIZE);
+  console.debug(`Paint brush size set to ${paintBrushSize.value}`);
+}
+
 export const onPaintColorChanged = (callback: (data: string) => void) => {
   effect(() => {
     if (paintColor.value) {
@@ -13,3 +24,9 @@ export const onPaintColorChanged = (callback: (data: string) => void) => {
     }
   });
 };
+
+export const onPaintBrushSizeChanged = (callback: (normalizedSize: number) => void) => {
+  effect(() => {
+    callback(normalize(paintBrushSize.value, BRUSH_MIN_SIZE, BRUSH_MAX_SIZE));
+  });
+};