From f1f21dca4c161c6de4bb0dfffd7f8ed09a7d7cf8 Mon Sep 17 00:00:00 2001
From: Haoming <hmstudy02@gmail.com>
Date: Fri, 19 Sep 2025 10:33:30 +0800
Subject: [PATCH] scribble width

---
 modules_forge/forge_canvas/canvas.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/modules_forge/forge_canvas/canvas.js b/modules_forge/forge_canvas/canvas.js
index 62b9e4cf..128bd021 100644
--- a/modules_forge/forge_canvas/canvas.js
+++ b/modules_forge/forge_canvas/canvas.js
@@ -58,7 +58,7 @@ class ForgeCanvas {
         this.imgY = 0;
         this.orgWidth = 0;
         this.orgHeight = 0;
-        this.imgScale = 1;
+        this.imgScale = 1.0;
         this.initial_height = initial_height;
 
         this.dragging = false;
@@ -182,6 +182,14 @@ class ForgeCanvas {
             drawingCanvas.style.opacity = "0.5";
         }
 
+        function resetScribble(e, rect) {
+            const indicatorSize = self.scribbleWidth * self.imgScale * 4;
+            scribbleIndicator.style.width = `${indicatorSize}px`;
+            scribbleIndicator.style.height = `${indicatorSize}px`;
+            scribbleIndicator.style.left = `${e.clientX - rect.left - indicatorSize / 2}px`;
+            scribbleIndicator.style.top = `${e.clientY - rect.top - indicatorSize / 2}px`;
+        }
+
         const resizeObserver = new ResizeObserver(() => {
             self.adjustInitialPositionAndScale();
             self.drawImage();
@@ -227,7 +235,7 @@ class ForgeCanvas {
         scribbleWidth.addEventListener("input", (e) => {
             self.scribbleWidth = e.target.value;
             scribbleWidthLabel.textContent = `Brush Width (${self.scribbleWidth})`;
-            const indicatorSize = self.scribbleWidth * 4;
+            const indicatorSize = self.scribbleWidth * self.imgScale * 4;
             scribbleIndicator.style.width = `${indicatorSize}px`;
             scribbleIndicator.style.height = `${indicatorSize}px`;
         });
@@ -257,9 +265,7 @@ class ForgeCanvas {
             if (self.drawing) self.handleDraw(e);
             if (self.img && !self.drawing && !self.dragging && !self.no_scribbles) {
                 const rect = container.getBoundingClientRect();
-                const indicatorSize = self.scribbleWidth * 2;
-                scribbleIndicator.style.left = `${e.clientX - rect.left - indicatorSize}px`;
-                scribbleIndicator.style.top = `${e.clientY - rect.top - indicatorSize}px`;
+                resetScribble(e, rect);
                 scribbleIndicator.style.display = "inline-block";
             }
         });
@@ -327,9 +333,7 @@ class ForgeCanvas {
                 scribbleWidth.value = parseInt(scribbleWidth.value) - Math.sign(e.deltaY) * 3;
                 updateInput(scribbleWidth);
                 const rect = container.getBoundingClientRect();
-                const indicatorSize = self.scribbleWidth * 2;
-                scribbleIndicator.style.left = `${e.clientX - rect.left - indicatorSize}px`;
-                scribbleIndicator.style.top = `${e.clientY - rect.top - indicatorSize}px`;
+                resetScribble(e, rect);
                 scale = false;
             }
             if (this._held_A) {
@@ -357,6 +361,7 @@ class ForgeCanvas {
             self.imgX = x - (x - self.imgX) * newScale;
             self.imgY = y - (y - self.imgY) * newScale;
             self.drawImage();
+            resetScribble(e, rect);
         });
 
         container.addEventListener("contextmenu", (e) => {
@@ -517,7 +522,7 @@ class ForgeCanvas {
 
         ctx.lineCap = "round";
         ctx.lineJoin = "round";
-        ctx.lineWidth = (this.scribbleWidth / this.imgScale) * 4;
+        ctx.lineWidth = this.scribbleWidth * 4;
 
         if (this.contrast_scribbles) {
             ctx.strokeStyle = this.contrast_pattern;