Refactor editable value background rendering

Author: Azornes

js/drawing/resolution_master_draw_methods.js

@@ -263,7 +263,7 @@ export const drawingMethods = {
                 h: latAreaHeight
             };
 
-            this.drawEditableOutputBackground(ctx, 'latValueArea', latAreaX, y_offset_5 - 10, latAreaWidth, latAreaHeight, [248, 136, 187]);
+            this.drawEditableValueBackground(ctx, 'latValueArea', latAreaX, y_offset_5 - 10, latAreaWidth, latAreaHeight, [248, 136, 187]);
 
             ctx.fillStyle = this.hoverElement === 'latValueArea' ? "#FAB" : "#F8B"; 
             ctx.font = "bold 12px Arial";
@@ -289,7 +289,7 @@ export const drawingMethods = {
             w: w - (OUTPUT_VALUE_HIT_RIGHT_INSET - OUTPUT_VALUE_VISUAL_RIGHT_INSET),
             h
         };
-        this.drawEditableOutputBackground(ctx, controlName, x, y, w, h, hoverColor);
+        this.drawEditableValueBackground(ctx, controlName, x, y, w, h, hoverColor);
         ctx.fillStyle = this.hoverElement === controlName ? activeTextColor : textColor;
         ctx.textAlign = "center";
         this.drawVerticallyCenteredText(ctx, text, x + w / 2, textY);
@@ -311,15 +311,13 @@ export const drawingMethods = {
         ctx.restore();
     },
 
-    drawEditableOutputBackground(ctx, controlName, x, y, w, h, color, borderRadius = 5) {
+    drawEditableValueBackground(ctx, controlName, x, y, w, h, color, borderRadius = 5) {
         const isHovered = this.hoverElement === controlName;
         ctx.save();
-        ctx.fillStyle = isHovered
-            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.12)`
-            : SECTION_BACKGROUND_COLOR;
+        ctx.fillStyle = "rgba(0,0,0,0)";
         ctx.strokeStyle = isHovered
             ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.9)`
-            : "rgba(205, 210, 220, 0.28)";
+            : "rgba(205, 210, 220, 0.18)";
         ctx.lineWidth = isHovered ? 1.4 : 1;
         ctx.beginPath();
         ctx.roundRect(x, y, w, h, borderRadius);
@@ -354,13 +352,13 @@ export const drawingMethods = {
         const snapValueX = sliderX + sliderWidth + gap;
         this.controls.snapValueArea = { x: snapValueX, y, w: valueWidth, h: 28 };
 
-        this.drawValueAreaHoverBackground(ctx, 'snapValueArea', snapValueX, y, valueWidth, 28, [100, 150, 255]);
+        this.drawEditableValueBackground(ctx, 'snapValueArea', snapValueX, y, valueWidth, 28, [100, 150, 255]);
 
         ctx.fillStyle = this.hoverElement === 'snapValueArea' ? "#5af" : "#ccc";
         ctx.font = "12px Arial";
-        ctx.textAlign = "left";
+        ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.fillText(props.snapValue.toString(), snapValueX + 10, y + 14);
+        this.drawVerticallyCenteredText(ctx, props.snapValue.toString(), snapValueX + valueWidth / 2, y + 14);
     },
 
     draw2DCanvas(ctx, x, y, w, h, padding = 20) {
@@ -1181,12 +1179,12 @@ export const drawingMethods = {
         const valueAreaControl = config.buttonControl.replace('Btn', 'ValueArea');
         this.controls[valueAreaControl] = { x: currentX, y, w: layout.valueWidth, h: 28 };
 
-        this.drawValueAreaHoverBackground(ctx, valueAreaControl, currentX, y, layout.valueWidth, 28, [100, 150, 255]);
+        this.drawEditableValueBackground(ctx, valueAreaControl, currentX, y, layout.valueWidth, 28, [100, 150, 255]);
         this.setCanvasTextStyle(ctx, {
             fillStyle: this.hoverElement === valueAreaControl ? "#5af" : "#ccc",
             textAlign: "center"
         });
-        ctx.fillText(config.displayValue, currentX + layout.valueWidth / 2, y + 14);
+        this.drawVerticallyCenteredText(ctx, config.displayValue, currentX + layout.valueWidth / 2, y + 14);
         currentX += layout.valueWidth + layout.gap;
         if (this.validateWidgets() && config.previewDimensions) {
             const newW = Math.round(Number(config.previewDimensions.width) || 0);

tests/js/output_value_drawing.test.mjs

@@ -92,8 +92,8 @@ test("editable outputs have persistent pills while rescale factor remains plain
         controller.drawOutputValues(ctx);
 
         assert.equal(ctx.rectangles.length, 4);
-        assert.ok(ctx.rectangles.every(rect => rect.fillStyle === "rgba(0,0,0,0.2)"));
-        assert.ok(ctx.rectangles.every(rect => rect.strokeStyle === "rgba(205, 210, 220, 0.28)"));
+        assert.ok(ctx.rectangles.every(rect => rect.fillStyle === "rgba(0,0,0,0)"));
+        assert.ok(ctx.rectangles.every(rect => rect.strokeStyle === "rgba(205, 210, 220, 0.18)"));
         assert.deepEqual(Object.keys(controller.controls), [
             "widthValueArea",
             "heightValueArea",
@@ -134,7 +134,7 @@ test("hover strengthens the editable output pill", () => {
         const ctx = createCanvasContext();
         controller.drawOutputValues(ctx);
 
-        assert.equal(ctx.rectangles[0].fillStyle, "rgba(136, 153, 255, 0.12)");
+        assert.equal(ctx.rectangles[0].fillStyle, "rgba(0,0,0,0)");
         assert.equal(ctx.rectangles[0].strokeStyle, "rgba(136, 153, 255, 0.9)");
         assert.equal(ctx.rectangles[0].lineWidth, 1.4);
     } finally {
@@ -163,3 +163,60 @@ test("Nodes 2.0 output pills follow the measured DOM slot centers", () => {
         globalThis.LiteGraph = originalLiteGraph;
     }
 });
+
+test("custom snap step uses the persistent editable value background", () => {
+    const controller = createController();
+    controller.node.properties = {
+        snapValue: 176,
+        action_slider_snap_min: 1,
+        action_slider_snap_max: 256,
+        action_slider_snap_step: 1
+    };
+    controller.node.size = [330, 400];
+    controller.icons = { swap: {}, snap: {} };
+    controller.drawButton = () => {};
+    controller.drawSlider = () => {};
+    const ctx = createCanvasContext();
+
+    controller.drawPrimaryControls(ctx, 0);
+
+    assert.equal(ctx.rectangles.length, 1);
+    assert.equal(ctx.rectangles[0].fillStyle, "rgba(0,0,0,0)");
+    assert.equal(ctx.rectangles[0].strokeStyle, "rgba(205, 210, 220, 0.18)");
+    assert.equal(ctx.text.find(entry => entry.value === "176")?.x, 297.5);
+});
+
+test("scaling numeric values use the persistent editable value background", () => {
+    const controller = createController();
+    controller.node.properties = { upscaleValue: 1.25, rescaleMode: "manual" };
+    controller.getScalingRowLayout = () => ({
+        btnWidth: 70,
+        sliderWidth: 90,
+        dropdownWidth: 90,
+        valueWidth: 45,
+        previewWidth: 0,
+        radioWidth: 18,
+        gap: 5
+    });
+    controller.drawButton = () => {};
+    controller.drawSlider = () => {};
+    controller.drawRadioButton = () => {};
+    controller.validateWidgets = () => false;
+    const ctx = createCanvasContext();
+
+    controller.drawScalingRowBase(ctx, 10, 20, {
+        buttonControl: "scaleBtn",
+        mainControl: "scaleSlider",
+        controlType: "slider",
+        valueProperty: "upscaleValue",
+        min: 0.1,
+        max: 4,
+        step: 0.05,
+        displayValue: "1.25",
+        rescaleMode: "manual"
+    });
+
+    assert.equal(controller.controls.scaleValueArea.w, 45);
+    assert.equal(ctx.rectangles[0].fillStyle, "rgba(0,0,0,0)");
+    assert.equal(ctx.rectangles[0].strokeStyle, "rgba(205, 210, 220, 0.18)");
+});