feat: 增加 appendPadding 调节padding

src/chart/chart.ts

@@ -36,6 +36,7 @@ export default class Chart extends View {
       height,
       autoFit = false,
       padding,
+      appendPadding,
       renderer = 'canvas',
       pixelRatio,
       localRefresh = true,
@@ -73,6 +74,7 @@ export default class Chart extends View {
       middleGroup: canvas.addGroup({ zIndex: GROUP_Z_INDEX.MID }),
       foregroundGroup: canvas.addGroup({ zIndex: GROUP_Z_INDEX.FORE }),
       padding,
+      appendPadding,
       visible,
       options,
       limitInPlot,

src/chart/layout/index.ts

@@ -1,5 +1,6 @@
 import { Controller } from '../controller/base';
 import View from '../view';
+import { parsePadding } from '../../util/padding';
 import { calculatePadding } from './auto';
 
 // 布局函数的定义
@@ -27,8 +28,11 @@ export default function defaultLayout(view: View): void {
   // 1. 自动加 auto padding -> absolute padding
   const padding = calculatePadding(view);
 
-  // 2. 计算出 coordinateBBox
-  view.coordinateBBox = view.viewBBox.shrink(padding);
+  // 2. 计算出 coordinateBBox, 增加 appendPadding 调整
+  view.coordinateBBox = view.viewBBox.shrink(padding).shrink(parsePadding(view.appendPadding));
+
+  view.coordinateBBox;
+
   view.adjustCoordinate();
 
   // 3. 根据最新的 coordinate 重新布局组件

src/chart/layout/padding-cal.ts

@@ -27,7 +27,7 @@ export class PaddingCal {
    * 四周增加 padding
    * @param padding
    */
-  public shrink(padding: number[]): PaddingCal {
+  public shrink(padding: Padding): PaddingCal {
     const [top, right, bottom, left] = padding;
 
     this.top += top;

src/chart/view.ts

@@ -44,6 +44,7 @@ import {
   ViewCfg,
   ViewOption,
   ViewPadding,
+  ViewAppendPadding,
 } from '../interface';
 
 import { GROUP_Z_INDEX, LAYER, PLOT_EVENTS, VIEW_LIFE_CIRCLE } from '../constant';
@@ -89,6 +90,8 @@ export class View extends Base {
   public coordinateBBox: BBox;
   /** view 的 padding 大小，传入的配置（不是解析之后的值）。 */
   public padding: ViewPadding;
+  /** padding的基础上增加的调整值 */
+  public appendPadding: ViewAppendPadding;
   /** G.Canvas 实例。 */
   public canvas: ICanvas;
 
@@ -150,6 +153,7 @@ export class View extends Base {
       foregroundGroup,
       region = { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } },
       padding,
+      appendPadding,
       theme,
       options,
       limitInPlot,
@@ -162,6 +166,7 @@ export class View extends Base {
     this.foregroundGroup = foregroundGroup;
     this.region = region;
     this.padding = padding;
+    this.appendPadding = appendPadding;
     this.themeObject = mergeTheme({}, theme);
     // 接受父 view 传入的参数
     this.options = { ...this.options, ...options };

src/interface.ts

@@ -686,6 +686,13 @@ export interface ChartCfg {
    * 2. padding: [ 10, 30, 30 ]
    */
   readonly padding?: ViewPadding;
+  /**
+   * 图表的内边距会在图表的padding的基础上加上appendPadding，使用方式参考 CSS 盒模型。
+   * @example
+   * 1. appendPadding: 20
+   * 2. appendPadding: [ 10, 30, 30 ]
+   */
+  readonly appendPadding?: ViewAppendPadding;
   /**
    * 是否开启局部刷新，默认开启。
    */
@@ -734,6 +741,13 @@ export interface ViewCfg {
    * 2. padding: [ 10, 30, 30 ]
    */
   readonly padding?: ViewPadding;
+  /**
+   * 设置图表的内边距在padding的基础上增加appendPading的调整。
+   * @example
+   * 1. padding: 20
+   * 2. padding: [ 10, 30, 30 ]
+   */
+  readonly appendPadding?: ViewAppendPadding;
   /** 设置 view 实例主题。 */
   readonly theme?: LooseObject | string;
   /**
@@ -1910,8 +1924,9 @@ export type Renderer = 'svg' | 'canvas';
 export type Datum = Record<string, any>;
 export type Data = Datum[];
 export type ActionCallback = (context: IInteractionContext) => void;
-export type Padding = number[];
+export type Padding = [number, number, number, number];
 export type ViewPadding = number | number[] | 'auto';
+export type ViewAppendPadding = number | number[];
 export type Position = [number, number];
 export type AttributeType = 'position' | 'size' | 'color' | 'shape';
 export type ShapeVertices = RangePoint[] | Point[] | Point[][];

src/util/bbox.ts

@@ -175,7 +175,7 @@ export class BBox {
    * @param gap
    */
   public shrink(gap: Padding): BBox {
-    const [top, right, bottom, left] = parsePadding(gap);
+    const [top, right, bottom, left] = gap;
 
     return new BBox(this.x + left, this.y + top, this.width - left - right, this.height - top - bottom);
   }
@@ -185,7 +185,7 @@ export class BBox {
    * @param bbox
    * @returns [top, right, bottom, left]
    */
-  public exceed(bbox: BBox): number[] {
+  public exceed(bbox: BBox): Padding {
     return [
       Math.max(-this.minY + bbox.minY, 0),
       Math.max(this.maxX - bbox.maxX, 0),
@@ -230,4 +230,4 @@ export function toPoints(bbox: Partial<BBox>): any[] {
     [bbox.maxX, bbox.maxY],
     [bbox.minX, bbox.maxY]
   ];
-}
+}

tests/unit/chart/chart-spec.ts

@@ -12,7 +12,8 @@ describe('Chart', () => {
     container: div,
     width: 800,
     height: 600,
-    padding: 10,
+    padding: 5,
+    appendPadding: 5,
     autoFit: false,
     visible: false,
   });