From 51eaac362a9c096dd9b6675f9ff8f70456ddf2d1 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 28 Jun 2025 07:59:32 +0200
Subject: [PATCH] Rename brush softness to hardness in mask tool

Replaces all references to 'softness' with 'hardness' for brush controls in both CanvasView.js and MaskTool.js. Updates UI labels, slider IDs, and internal logic to use 'hardness' terminology, clarifying that a higher value means a harder brush edge.
---
 js/CanvasView.js |  8 ++++----
 js/MaskTool.js   | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/js/CanvasView.js b/js/CanvasView.js
index 94bab3e..4c0fde6 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -440,7 +440,7 @@ async function createCanvasWidget(node, widget, app) {
             <tr><td><kbd>Click + Drag</kbd></td><td>Paint on the mask</td></tr>
             <tr><td><kbd>Middle Mouse Button + Drag</kbd></td><td>Pan canvas view</td></tr>
             <tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
-            <tr><td><strong>Brush Controls</strong></td><td>Use sliders to control brush <strong>Size</strong>, <strong>Strength</strong>, and <strong>Softness</strong></td></tr>
+            <tr><td><strong>Brush Controls</strong></td><td>Use sliders to control brush <strong>Size</strong>, <strong>Strength</strong>, and <strong>Hardness</strong></td></tr>
             <tr><td><strong>Clear Mask</strong></td><td>Remove the entire mask</td></tr>
             <tr><td><strong>Exit Mode</strong></td><td>Click the "Draw Mask" button again</td></tr>
         </table>
@@ -798,15 +798,15 @@ async function createCanvasWidget(node, widget, app) {
                     })
                 ]),
                 $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
-                    $el("label", {for: "brush-softness-slider", textContent: "Softness:"}),
+                    $el("label", {for: "brush-hardness-slider", textContent: "Hardness:"}),
                     $el("input", {
-                        id: "brush-softness-slider",
+                        id: "brush-hardness-slider",
                         type: "range",
                         min: "0",
                         max: "1",
                         step: "0.05",
                         value: "0.5",
-                        oninput: (e) => canvas.maskTool.setBrushSoftness(parseFloat(e.target.value))
+                        oninput: (e) => canvas.maskTool.setBrushHardness(parseFloat(e.target.value))
                     })
                 ]),
                 $el("button.painter-button.mask-control", {
diff --git a/js/MaskTool.js b/js/MaskTool.js
index 92ad026..456689f 100644
--- a/js/MaskTool.js
+++ b/js/MaskTool.js
@@ -16,7 +16,7 @@ export class MaskTool {
         this.isActive = false;
         this.brushSize = 20;
         this.brushStrength = 0.5;
-        this.brushSoftness = 0.5;
+        this.brushHardness = 0.5;
         this.isDrawing = false;
         this.lastPosition = null;
 
@@ -42,8 +42,8 @@ export class MaskTool {
         this.canvasInstance.canvas.parentElement.appendChild(this.previewCanvas);
     }
 
-    setBrushSoftness(softness) {
-        this.brushSoftness = Math.max(0, Math.min(1, softness));
+    setBrushHardness(hardness) {
+        this.brushHardness = Math.max(0, Math.min(1, hardness));
     }
 
     initMaskCanvas() {
@@ -159,10 +159,11 @@ export class MaskTool {
             this.maskCtx.lineTo(canvasX, canvasY);
             const gradientRadius = this.brushSize / 2;
 
-            if (this.brushSoftness === 0) {
+            if (this.brushHardness === 1) {
                 this.maskCtx.strokeStyle = `rgba(255, 255, 255, ${this.brushStrength})`;
             } else {
-                const innerRadius = gradientRadius * this.brushSoftness;
+                // hardness: 1 = hard edge, 0 = soft edge
+                const innerRadius = gradientRadius * this.brushHardness;
                 const gradient = this.maskCtx.createRadialGradient(
                     canvasX, canvasY, innerRadius,
                     canvasX, canvasY, gradientRadius