feat(slider): auto layout

__tests__/plots/static/alphabet-interval-auto-padding-slider.ts

@@ -0,0 +1,29 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPaddingSlider(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: { labelFormatter: (d) => d + '0000' },
+      x: { labelFormatter: (d) => d + '0000' },
+    },
+    slider: { x: true, y: true },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/index.ts

@@ -269,3 +269,4 @@ 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';
+export { alphabetIntervalAutoPaddingSlider } from './alphabet-interval-auto-padding-slider';

src/component/slider.ts

@@ -9,17 +9,32 @@ export type SliderOptions = {
   [key: string]: any;
 };
 
+function inferPosition(bbox, position, trackSize) {
+  const { x, y, width, height } = bbox;
+  if (position === 'left') return [x + width - trackSize, y];
+  if (position === 'right') return [x, y];
+  if (position === 'bottom') return [x, y];
+  if (position === 'top') return [x, y + height - trackSize];
+}
+
 /**
  * Slider component.
  */
 export const Slider: GCC<SliderOptions> = (options) => {
   // do not pass size.
-  const { orientation, labelFormatter, size, style, position, ...rest } =
-    options;
+  const {
+    orientation,
+    labelFormatter,
+    size,
+    style = {},
+    position,
+    ...rest
+  } = options;
 
   return ({ scales: [scale], value, theme, coordinate }) => {
     const { bbox } = value;
-    const { x, y, width, height } = bbox;
+
+    const { width, height } = bbox;
     const { slider: sliderTheme = {} } = theme;
     const defaultFormatter = scale.getFormatter?.() || ((v) => v.toString());
     const formatter =
@@ -29,12 +44,13 @@ export const Slider: GCC<SliderOptions> = (options) => {
 
     const isHorizontal = orientation === 'horizontal';
     const reverse = isTranspose(coordinate) && isHorizontal;
-
+    const { trackSize = sliderTheme.trackSize } = style;
+    const [x0, y0] = inferPosition(bbox, position, trackSize);
     return new SliderComponent({
       className: 'slider',
       style: Object.assign({}, sliderTheme, {
-        x,
-        y,
+        x: x0,
+        y: y0,
         trackLength: isHorizontal ? width : height,
         orientation,
         formatter: (v) => {

src/interaction/sliderFilter.ts

@@ -73,7 +73,8 @@ export function SliderFilter({
     if (!sliders.length) return () => {};
 
     let filtering = false;
-    const { scale, coordinate } = view;
+    const { scale, coordinate, layout } = view;
+    const { paddingLeft, paddingTop, paddingBottom, paddingRight } = layout;
     const { x: scaleX, y: scaleY } = scale;
     const transposed = isTranspose(coordinate);
 
@@ -159,7 +160,13 @@ export function SliderFilter({
             });
           }
 
-          await update(newOptions);
+          await update({
+            ...newOptions,
+            paddingLeft,
+            paddingTop,
+            paddingBottom,
+            paddingRight,
+          });
           filtering = false;
         },
         wait,

src/runtime/component.ts

@@ -563,6 +563,7 @@ export function computeComponentSize(
     if (t.startsWith('group')) return computeGroupSize;
     if (t.startsWith('legendContinuous')) return computeContinuousLegendSize;
     if (t === 'legendCategory') return computeCategoryLegendSize;
+    if (t.startsWith('slider')) return computeSliderSize;
     return () => {};
   };
   return createCompute()(
@@ -604,6 +605,23 @@ function computeGroupSize(
   children.forEach((d) => (d.size = maxSize));
 }
 
+function computeSliderSize(
+  component: G2GuideComponentOptions,
+  crossSize: number,
+  crossPadding: [number, number],
+  position: GCP,
+  theme: G2Theme,
+  library: G2Library,
+) {
+  const styleOf = () => {
+    const { slider } = theme;
+    return deepMix({}, slider, component.style);
+  };
+  const { trackSize, handleIconSize } = styleOf();
+  const size = Math.max(trackSize, handleIconSize * 2.4);
+  component.size = size;
+}
+
 function computeAxisSize(
   component: G2GuideComponentOptions,
   crossSize: number,