Cap output value area height by first-slot canvas inset

Author: Azornes

js/drawing/resolution_master_draw_methods.js

@@ -8,6 +8,7 @@ const log = createModuleLogger("resolution_master_draw_methods");
 const OUTPUT_VALUE_VISUAL_RIGHT_INSET = 3;
 const OUTPUT_VALUE_HIT_RIGHT_INSET = 12;
 const OUTPUT_VALUE_VERTICAL_GAP = 4;
+const OUTPUT_VALUE_CANVAS_TOP_INSET = 1;
 const SECTION_BACKGROUND_COLOR = "rgba(0,0,0,0.2)";
 
 export const drawingMethods = {
@@ -225,7 +226,12 @@ export const drawingMethods = {
                 : LiteGraph.NODE_SLOT_HEIGHT;
             const [y_offset_1, y_offset_2, y_offset_3, y_offset_4, y_offset_5] = slotCenters;
             const valueAreaWidth = 60; 
-            const valueAreaHeight = Math.max(14, slotSpacing - OUTPUT_VALUE_VERTICAL_GAP);
+            const preferredValueAreaHeight = Math.max(14, slotSpacing - OUTPUT_VALUE_VERTICAL_GAP);
+            const availableFirstSlotHeight = Math.max(
+                8,
+                2 * (y_offset_1 - OUTPUT_VALUE_CANVAS_TOP_INSET)
+            );
+            const valueAreaHeight = Math.min(preferredValueAreaHeight, availableFirstSlotHeight);
             const outputValueRight = node.size[0] - OUTPUT_VALUE_VISUAL_RIGHT_INSET;
             const valueAreaX = outputValueRight - valueAreaWidth;
             const outputValueCenterX = valueAreaX + valueAreaWidth / 2;

tests/js/output_value_drawing.test.mjs

@@ -149,14 +149,16 @@ test("Nodes 2.0 output pills follow the measured DOM slot centers", () => {
     try {
         const controller = createController();
         controller.isVueNodesMode = () => true;
-        controller._vueCompatOutputSlotCenters = [12, 35, 58, 81, 104];
+        controller._vueCompatOutputSlotCenters = [8, 31, 54, 77, 100];
         const ctx = createCanvasContext();
         controller.drawOutputValues(ctx);
 
-        assert.equal(ctx.rectangles[0].y + ctx.rectangles[0].h / 2, 12);
-        assert.equal(ctx.rectangles[1].y + ctx.rectangles[1].h / 2, 35);
-        assert.equal(ctx.rectangles[2].y + ctx.rectangles[2].h / 2, 81);
-        assert.equal(ctx.text.find(entry => entry.value === "LAT")?.y, 104);
+        assert.equal(ctx.rectangles[0].y, 1);
+        assert.equal(ctx.rectangles[0].h, 14);
+        assert.equal(ctx.rectangles[0].y + ctx.rectangles[0].h / 2, 8);
+        assert.equal(ctx.rectangles[1].y + ctx.rectangles[1].h / 2, 31);
+        assert.equal(ctx.rectangles[2].y + ctx.rectangles[2].h / 2, 77);
+        assert.equal(ctx.text.find(entry => entry.value === "LAT")?.y, 100);
     } finally {
         globalThis.LiteGraph = originalLiteGraph;
     }