fix(layout): valid specified component size

__tests__/plots/static/index.ts

@@ -268,3 +268,4 @@ export { mockAreaMissingData } from './mock-area-missing-data';
 export { mockIntervalFacetRectPolar } from './mock-interval-facet-rect-polar';
 export { alphabetIntervalAutoRotate } from './alphabet-interval-auto-padding-rotate';
 export { mockLineSmallInterval } from './mock-line-small-interval';
+export { unemploymentAreaStackedLegendSize } from './unemployment-area-stacked-legend-size';

__tests__/plots/static/unemployment-area-stacked-legend-size.ts

@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+
+export function unemploymentAreaStackedLegendSize(): G2Spec {
+  return {
+    type: 'area',
+    padding: 'auto',
+    width: 800,
+    data: {
+      type: 'fetch',
+      value: 'data/unemployment-by-industry.csv',
+    },
+    transform: [{ type: 'stackY' }],
+    encode: {
+      x: 'date',
+      y: 'unemployed',
+      color: 'industry',
+    },
+    legend: { color: { size: 50 } },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}
+
+unemploymentAreaStackedLegendSize.maxError = 180;

src/runtime/component.ts

@@ -90,7 +90,7 @@ export function inferComponent(
       position: defaultPosition,
       orientation: defaultOrientation,
       order: defaultOrder,
-      size: defaultSize,
+      defaultSize,
       ...titleOptions,
     });
   }
@@ -135,7 +135,7 @@ export function inferComponent(
       const defaultCrossPadding = isVertical ? DCP[1] : DCP[0];
 
       const {
-        size = defaultSize,
+        size,
         order = defaultOrder,
         length = defaultLength,
         padding = defaultPadding,
@@ -145,6 +145,7 @@ export function inferComponent(
       components.push({
         title: field,
         ...partialGuide,
+        defaultSize,
         length,
         position,
         orientation,
@@ -523,7 +524,7 @@ function inferScrollableComponents(
     const { defaultPosition, defaultSize, defaultOrder } = props;
     return {
       position: defaultPosition,
-      size: defaultSize,
+      defaultSize,
       order: defaultOrder,
       type: componentType,
       ...options,

src/runtime/layout.ts

@@ -257,32 +257,48 @@ function computePadding(
     paddingTop,
     paddingRight,
   };
+
   for (const position of positions) {
     const key = `padding${capitalizeFirst(camelCase(position))}`;
+    const components = positionComponents.get(position) || [];
     const value = layout[key];
-    if (value === undefined || value === 'auto') {
-      if (!positionComponents.has(position)) {
+    const defaultSizeOf = (d) => {
+      if (d.size === undefined) d.size = d.defaultSize;
+    };
+    const autoSizeOf = (d) => {
+      if (d.size) return;
+      if (value !== 'auto') {
+        d.size = d.defaultSize;
+        return;
+      }
+      // Compute component size dynamically.
+      computeComponentSize(
+        d,
+        crossSize,
+        crossPadding,
+        position,
+        theme,
+        library,
+      );
+      defaultSizeOf(d);
+    };
+
+    // Specified padding.
+    if (typeof value === 'number') {
+      components.forEach(defaultSizeOf);
+    } else {
+      // Compute padding dynamically.
+      if (components.length === 0) {
         layout[key] = 30;
       } else {
-        const components = positionComponents.get(position);
         const grouped = groupComponents(components, crossSize);
-        if (value === 'auto') {
-          grouped.forEach((component) =>
-            computeComponentSize(
-              component,
-              crossSize,
-              crossPadding,
-              position,
-              theme,
-              library,
-            ),
-          );
-        }
+        grouped.forEach(autoSizeOf);
         const totalSize = grouped.reduce((sum, { size }) => sum + size, 0);
         layout[key] = totalSize;
       }
     }
   }
+
   return layout;
 }