feat: 增加 appendPadding 调节padding

docs/manual/concepts/visual-channel.en.md

@@ -68,10 +68,7 @@ chart.interval().position('班级*人数');
 所以班级的映射存在两个视觉通道 1：n。
 
 ```javascript
-chart
-  .interval()
-  .position('班级*人数')
-  .color('班级');
+chart.interval().position('班级*人数').color('班级');
 ```
 
 - 人数和班级共同决定颜色
@@ -131,10 +128,7 @@ G2 中的视觉通道作为标记的属性存在，需要支持以下功能：
 示例：
 
 ```javascript
-chart
-  .point()
-  .position('a*b')
-  .color('c');
+chart.point().position('a*b').color('c');
 
 chart
   .interval()

docs/manual/developer/registerlabel.en.md

@@ -23,12 +23,9 @@ registerGeometryLabel('custom', CustomLabel);
 
 // Step 3
 // 使用
-chart
-  .line()
-  .position('x*y')
-  .label('y', {
-    type: 'custom',
-  });
+chart.line().position('x*y').label('y', {
+  type: 'custom',
+});
 ```
 
 自定义 Label 需要继承  GeometryLabel 基类，通过覆写相应的方法来定义 label 的渲染配置，关于  GeometryLabel 类的详细介绍请阅读 [API 文档](../../api/g2/#registergeometrylabel)。

docs/manual/developer/registerlabel.zh.md

@@ -23,12 +23,9 @@ registerGeometryLabel('custom', CustomLabel);
 
 // Step 3
 // 使用
-chart
-  .line()
-  .position('x*y')
-  .label('y', {
-    type: 'custom',
-  });
+chart.line().position('x*y').label('y', {
+  type: 'custom',
+});
 ```
 
 自定义 Label 需要继承  GeometryLabel 基类，通过覆写相应的方法来定义 label 的渲染配置，关于  GeometryLabel 类的详细介绍请阅读 [API 文档](../../api/g2/#registergeometrylabel)。

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';
 
 // 布局函数的定义
@@ -26,10 +27,10 @@ export default function defaultLayout(view: View): void {
 
   // 1. 自动加 auto padding -> absolute padding
   const padding = calculatePadding(view);
+
   // 2. 计算出新的 coordinateBBox
-  const newCoordinateBBox = view.viewBBox.shrink(padding);
+  view.coordinateBBox = view.viewBBox.shrink(padding).shrink(parsePadding(view.appendPadding));
 
-  view.coordinateBBox = newCoordinateBBox;
   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

@@ -39,6 +39,7 @@ import {
   TooltipOption,
   ViewCfg,
   ViewPadding,
+  ViewAppendPadding,
 } from '../interface';
 
 import { GROUP_Z_INDEX, LAYER, PLOT_EVENTS, VIEW_LIFE_CIRCLE } from '../constant';
@@ -85,6 +86,8 @@ export class View extends Base {
   public coordinateBBox: BBox;
   /** view 的 padding 大小，传入的配置（不是解析之后的值）。 */
   public padding: ViewPadding;
+  /** padding的基础上增加的调整值 */
+  public appendPadding: ViewAppendPadding;
   /** G.Canvas 实例。 */
   public canvas: ICanvas;
   /** 存储自动计算的 padding 值 */
@@ -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;
     // 接受父 view 传入的参数
     this.options = { ...this.options, ...options };
     this.limitInPlot = limitInPlot;

src/interface.ts

@@ -752,6 +752,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;
   /**
    * 是否开启局部刷新，默认开启。
    */
@@ -800,6 +807,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;
   /**
@@ -2162,8 +2176,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),

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,
   });

tests/unit/chart/layout/padding-cal-spec.ts

@@ -18,7 +18,7 @@ describe('padding-cal', () => {
 
   it('shrink', () => {
     const pc = new PaddingCal();
-    const p = [1, 2, 3, 4];
+    const p: [number, number, number, number] = [1, 2, 3, 4];
     pc.shrink(p);
     expect(pc.getPadding()).toEqual(p);
   });