Fix - VueUiFlow - Remove excessive bottom padding

Author: graphieros

TestingArena/ArenaVueUiFlow.vue

@@ -144,6 +144,11 @@ const model = ref([
     { key: 'userOptions.showOnChartHover', def: true, type: 'checkbox' },
     { key: 'userOptions.keepStateOnChartLeave', def: true, type: 'checkbox' },
 
+    { key: 'style.chart.padding.top', def: 12, type: 'number', min: 0, max: 100,},
+    { key: 'style.chart.padding.right', def: 12, type: 'number', min: 0, max: 100,},
+    { key: 'style.chart.padding.bottom', def: 12, type: 'number', min: 0, max: 100,},
+    { key: 'style.chart.padding.left', def: 12, type: 'number', min: 0, max: 100,},
+
     { key: 'userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5 },
     { key: 'userOptions.print.allowTaint', def: true, type: 'checkbox' },
     { key: 'userOptions.print.useCORS', def: true, type: 'checkbox' },

package.json

@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}

src/components/vue-ui-flow.vue

@@ -412,34 +412,14 @@ function computeTotalHeight(nodeCoordinates) {
 }
 
 const drawingArea = computed(() => {
-    const pad = FINAL_CONFIG.value.style.chart.padding;
-    const padTop    = pad.top;
-    const padBottom = pad.bottom;
-    const padLeft   = pad.left;
-    const padRight  = pad.right;
-
-    const maxX = mutableDataset.value.nodes.reduce(
-        (mx, n) => Math.max(mx, n.x),
-        0
+    const { top: pTop, right: pRight, bottom: pBottom, left: pLeft } = FINAL_CONFIG.value.style.chart.padding;
+    const maxNodeX = Math.max(...mutableDataset.value.nodes.map(n => n.x));
+    const width = pLeft + maxNodeX + nodeWidth.value + pRight;
+    const maxNodeBottom = Math.max(
+        ...mutableDataset.value.nodes.map(n => n.absoluteY + n.height)
     );
-    const width = padLeft + maxX + nodeWidth.value + padRight;
-
-    const maxNodeBottom = mutableDataset.value.nodes.reduce((mb, n) => {
-        const nodeTop = n.y + padTop;
-        const nodeBot = nodeTop + n.height;
-        return Math.max(mb, nodeBot);
-    }, 0);
-
-    const height = maxNodeBottom + padBottom;
-
-    return {
-        width,
-        height,
-        left: padLeft,
-        top: padTop,
-        right: padRight,
-        bottom: padBottom
-    };
+    const height = pTop + maxNodeBottom + pBottom;
+    return { width, height };
 });
 
 function findConnectedNodes(startNode) {

src/useConfig.js

@@ -3875,7 +3875,7 @@ export function useConfig() {
             chart: {
                 backgroundColor: COLOR_WHITE,
                 color: COLOR_BLACK,
-                padding: PADDING([12, 12, 0, 12]),
+                padding: PADDING([12, 12, 12, 12]),
                 title: TITLE,
                 tooltip: {
                     ...TOOLTIP,