refactor(chart): rename context&node api to getContext and getNode (f…

…ixed: #4685) (#4690)
antvis · Feb 23, 2023 · aefe323 · aefe323
1 parent 9521266
commit aefe323
Show file tree

Hide file tree

Showing 19 changed files with 64 additions and 62 deletions.
diff --git a/__tests__/plots/api/mark-change-data-tooltip.ts b/__tests__/plots/api/mark-change-data-tooltip.ts
@@ -43,5 +43,5 @@ export function markChangeDataTooltip(context) {
     ]);
   };
 
-  return { chart, finished, button, canvas: chart.context().canvas };
+  return { chart, finished, button, canvas: chart.getContext().canvas };
 }
diff --git a/__tests__/plots/api/mark-change-data.ts b/__tests__/plots/api/mark-change-data.ts
@@ -40,5 +40,5 @@ export function markChangeData(context) {
     ]);
   };
 
-  return { chart, finished, button, canvas: chart.context().canvas };
+  return { chart, finished, button, canvas: chart.getContext().canvas };
 }
diff --git a/__tests__/unit/api/chart.spec.ts b/__tests__/unit/api/chart.spec.ts
@@ -81,12 +81,12 @@ describe('Chart', () => {
     });
   });
 
-  it('chart.node() should return container', () => {
+  it('chart.getContainer() should return container', () => {
     const container = document.createElement('div');
     const chart = new Chart({
       container,
     });
-    expect(chart.node()).toBe(container);
+    expect(chart.getContainer()).toBe(container);
   });
 
   it('chart.[attr](...) should specify options by API', () => {
@@ -315,7 +315,7 @@ describe('Chart', () => {
     });
   });
 
-  it('chart.context() should return rendering context', () => {
+  it('chart.getContext() should return rendering context', () => {
     const chart = new Chart({});
 
     chart.data([
@@ -332,7 +332,7 @@ describe('Chart', () => {
       .encode('y', 'sold')
       .encode('color', 'genre');
 
-    const context = chart.context();
+    const context = chart.getContext();
     expect(context.canvas).toBeUndefined();
     expect(context.library).toEqual(createLibrary());
     chart.render();
@@ -481,7 +481,7 @@ describe('Chart', () => {
       .encode('y', 'sold')
       .encode('color', 'genre');
     await chart.render();
-    const context = chart.context();
+    const context = chart.getContext();
     const view = context.views?.find((v) => v.key === chart.attr('key'));
     expect(chart.getView()).toEqual(view);
     expect(chart.getCoordinate()).toEqual(view?.coordinate);

diff --git a/__tests__/unit/api/interaction.spec.ts b/__tests__/unit/api/interaction.spec.ts
@@ -23,7 +23,7 @@ describe('Interaction', () => {
     chart.interaction('tooltip');
     await chart.render();
 
-    const { canvas } = chart.context();
+    const { canvas } = chart.getContext();
     const fn = jest.fn();
 
     // Update interaction hook.

diff --git a/site/docs/api/chart.zh.md b/site/docs/api/chart.zh.md
@@ -60,7 +60,7 @@ chart.render();
 
 获取图表的配置项。
 
-### `chart.node()`
+### `chart.getContainer()`
 
 获取图表的 HTML 容器。
 

diff --git a/site/docs/api/component/scrollbar.zh.md b/site/docs/api/component/scrollbar.zh.md
@@ -31,7 +31,7 @@ chart
   .encode('x', 'date')
   .encode('y', 'close')
   // 开启 X 轴方向上的滚动条
-  .scrollbar('x', {})
+  .scrollbar('x', {});
 
 chart.render();
 ```
@@ -83,10 +83,10 @@ chart
   .scrollbar('x', {});
 
 chart.on('afterrender', () => {
-  const { canvas } = chart.context();
+  const { canvas } = chart.getContext();
   const { document } = canvas;
   document.querySelector('.slider').addEventListener('valuechange', (evt) => {
-    console.info(evt.detail)
+    console.info(evt.detail);
   });
 });
 

diff --git a/site/docs/api/component/slider.zh.md b/site/docs/api/component/slider.zh.md
@@ -111,10 +111,10 @@ chart
   .slider('x', {});
 
 chart.on('afterrender', () => {
-  const { canvas } = chart.context();
+  const { canvas } = chart.getContext();
   const { document } = canvas;
   document.querySelector('.slider').addEventListener('valuechange', (evt) => {
-    console.info(evt.detail)
+    console.info(evt.detail);
   });
 });
 

diff --git a/site/docs/api/mark/shape.zh.md b/site/docs/api/mark/shape.zh.md
@@ -19,7 +19,7 @@ function point(style) {
 
   const {
     canvas: { document },
-  } = chart.context();
+  } = chart.getContext();
 
   return document.createElement('circle', {
     style: {

diff --git a/site/docs/api/plugin/lottie.zh.md b/site/docs/api/plugin/lottie.zh.md
@@ -22,7 +22,7 @@ import { loadAnimation } from '@antv/g-lottie-player';
 
 (async () => {
   // 从上下文中获取画布
-  const { canvas } = chart.context();
+  const { canvas } = chart.getContext();
   await canvas.ready;
 
   // 加载 Lottie 文件

diff --git a/site/docs/manual/interaction.zh.md b/site/docs/manual/interaction.zh.md
@@ -27,7 +27,7 @@ const chart = new Chart();
 // ...
 
 // 获得 G Canvas 实例
-const { canvas } = chart.context();
+const { canvas } = chart.getContext();
 
 // 找到图形元素
 const elements = canvas.document.getElementsByClassName(ELEMENT_CLASS_NAME);

diff --git a/site/docs/manual/single-view/chart.zh.md b/site/docs/manual/single-view/chart.zh.md
@@ -62,7 +62,7 @@ const chart = new Chart();
 // 声明可视化
 // ...
 
-const container = chart.node(); // 获得挂载的容器
+const container = chart.getContainer(); // 获得挂载的容器
 document.getElementById('chart').appendChild(container);
 ```
 

diff --git a/site/docs/manual/theme/pattern.zh.md b/site/docs/manual/theme/pattern.zh.md
@@ -4,17 +4,18 @@ order: 10
 ---
 
 相比单调的填充色，使用纹理填充能丰富表现力，在无障碍和黑白打印场景下也有不错的应用。为此我们提供了以下三种方式，按使用成本从简到难依次为：
-* 使用内置纹理
-* 使用 G API 自定义纹理
-* 使用其它纹理来源
+
+- 使用内置纹理
+- 使用 G API 自定义纹理
+- 使用其它纹理来源
 
 ## 使用内置纹理
 
 我们在 [g-pattern](https://g.antv.antgroup.com/api/css/pattern#g-pattern) 中内置了常见的三种纹理，通过参数可以便捷地调整外观，这也是最简单的一种纹理使用方式：
 
-* [dots](https://g.antv.antgroup.com/api/css/pattern#dots) 由圆点构成
-* [lines](https://g.antv.antgroup.com/api/css/pattern#lines) 由直线构成
-* [squares](https://g.antv.antgroup.com/api/css/pattern#squares) 由正方形构成
+- [dots](https://g.antv.antgroup.com/api/css/pattern#dots) 由圆点构成
+- [lines](https://g.antv.antgroup.com/api/css/pattern#lines) 由直线构成
+- [squares](https://g.antv.antgroup.com/api/css/pattern#squares) 由正方形构成
 
 使用方式如下，首先安装依赖：
 
@@ -23,28 +24,29 @@ $ npm install @antv/g-pattern  --save;
 ```
 
 然后就可以使用其中的内置纹理了。在该[示例](/zh/examples/theme/pattern#lines-pattern)中：
-* 我们使用了 [lines](https://g.antv.antgroup.com/api/css/pattern#lines)，设置了背景颜色、透明度、直线颜色以及间距等属性
-* 通过 [repetition](https://g.antv.antgroup.com/api/css/pattern#repetition) 指定了平铺方式为水平和垂直方向
-* 通过 [transform](https://g.antv.antgroup.com/api/css/pattern#transform) 让纹理顺时针旋转 30 度
+
+- 我们使用了 [lines](https://g.antv.antgroup.com/api/css/pattern#lines)，设置了背景颜色、透明度、直线颜色以及间距等属性
+- 通过 [repetition](https://g.antv.antgroup.com/api/css/pattern#repetition) 指定了平铺方式为水平和垂直方向
+- 通过 [transform](https://g.antv.antgroup.com/api/css/pattern#transform) 让纹理顺时针旋转 30 度
 
 ```js
 import { lines } from '@antv/g-pattern';
 
 chart
-//... 省略其它命令式调用
-.style('fill', (_, idx) => {
+  //... 省略其它命令式调用
+  .style('fill', (_, idx) => {
     return {
-        image: lines({
-            backgroundColor: colors[idx],
-            backgroundOpacity: 0.65,
-            stroke: colors[idx],
-            lineWidth: 4,
-            spacing: 5,
-        }),
-        repetition: 'repeat',
-        transform: 'rotate(30deg)',
+      image: lines({
+        backgroundColor: colors[idx],
+        backgroundOpacity: 0.65,
+        stroke: colors[idx],
+        lineWidth: 4,
+        spacing: 5,
+      }),
+      repetition: 'repeat',
+      transform: 'rotate(30deg)',
     };
-})
+  });
 ```
 
 效果如下：
@@ -61,7 +63,7 @@ chart
 
 ```js
 .style('fill', ({ value }) => {
-    const { document } = chart.context().canvas;
+    const { document } = chart.getContext().canvas;
     const background = document.createElement('rect', {
         style: {
             width,
@@ -100,10 +102,10 @@ chart
 
 可以参考 [G API](https://g.antv.antgroup.com/api/css/pattern#image)，其它可用的纹理来源包括：
 
-* 图片 URL，例如 `'http://example.png'`
-* HTMLImageElement
-* HTMLCanvasElement
-* HTMLVideoElement
+- 图片 URL，例如 `'http://example.png'`
+- HTMLImageElement
+- HTMLCanvasElement
+- HTMLVideoElement
 
 其中图片 URL、HTMLImageElement、HTMLVideoElement 都是静态资源，而 HTMLCanvasElement 可用于程序化生成纹理，效果如下：
 
@@ -120,8 +122,8 @@ drawLinePattern(ctx, stroke, width, height, cross);
 
 // 使用
 chart.style('fill', ({ value }) => {
-    return { image: canvas, repetition: 'repeat' };
+  return { image: canvas, repetition: 'repeat' };
 });
 ```
 
-不难看出，此种程序化生成方式需要使用者对于 [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 有很深的理解，当然它也拥有最高的自由度。
+不难看出，此种程序化生成方式需要使用者对于 [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 有很深的理解，当然它也拥有最高的自由度。
diff --git a/site/examples/annotation/annotation/demo/watermark.ts b/site/examples/annotation/annotation/demo/watermark.ts
@@ -37,7 +37,7 @@ chart.render();
 function watermark({ x, y }) {
   const {
     canvas: { document },
-  } = chart.context();
+  } = chart.getContext();
 
   const g = document.createElement('g', {});
   const c1 = document.createElement('circle', {

diff --git a/site/examples/plugin/lottie/demo/lottie.ts b/site/examples/plugin/lottie/demo/lottie.ts
@@ -26,7 +26,7 @@ chart
 chart.render();
 
 (async () => {
-  const { canvas } = chart.context();
+  const { canvas } = chart.getContext();
   await canvas.ready;
 
   const lottieJSON = await fetch(

diff --git a/site/examples/theme/pattern/demo/custom-pattern-with-g-api.ts b/site/examples/theme/pattern/demo/custom-pattern-with-g-api.ts
@@ -65,7 +65,7 @@ let pattern1;
 let pattern2;
 let pattern3;
 chart.on('beforerender', () => {
-  const { document } = chart.context().canvas;
+  const { document } = chart.getContext().canvas;
   pattern1 = createPattern(document, '#edaa53', '#44120c', true, true);
   pattern2 = createPattern(document, '#edaa53', '#44120c', true);
   pattern3 = createPattern(document, '#edaa53', '#fff');

diff --git a/src/api/chart.ts b/src/api/chart.ts
@@ -213,11 +213,11 @@ export class Chart extends View<ChartOptions> {
     return optionsOf(this);
   }
 
-  node(): HTMLElement {
+  getContainer(): HTMLElement {
     return this._container;
   }
 
-  context(): G2Context {
+  getContext(): G2Context {
     return this._context;
   }
 

diff --git a/src/api/composition/base.ts b/src/api/composition/base.ts
@@ -14,8 +14,8 @@ export class Base<
    * Get view instance by key.
    */
   getView(): G2ViewDescriptor {
-    const chart = this.root();
-    const { views } = chart.context();
+    const chart = this.getRoot();
+    const { views } = chart.getContext();
     if (!views?.length) return undefined;
     return views.find((view) => view.key === this.attr('key'));
   }
@@ -31,8 +31,8 @@ export class Base<
   getGroup(): DisplayObject {
     const key = this.attr('key');
     if (!key) return undefined;
-    const chart = this.root();
-    const chartGroup = chart.context().canvas.getRoot();
+    const chart = this.getRoot();
+    const chartGroup = chart.getContext().canvas.getRoot();
     return chartGroup.getElementById(key);
   }
 

diff --git a/src/api/mark/base.ts b/src/api/mark/base.ts
@@ -8,7 +8,7 @@ export class MarkBase<
   ChildValue extends Record<string, any> = Record<string, any>,
 > extends Node<Value, ParentValue, ChildValue> {
   changeData(data: any) {
-    const chart = this.root();
+    const chart = this.getRoot();
     if (!chart) return;
     this.attr('data', data);
     return chart?.render();
@@ -18,7 +18,7 @@ export class MarkBase<
    * Get mark from chart views.
    */
   getMark(): G2MarkState {
-    const chartView = this.root()?.getView();
+    const chartView = this.getRoot()?.getView();
     if (!chartView) return undefined;
     const { markState } = chartView;
     const markKey = Array.from(markState.keys()).find(
@@ -31,7 +31,7 @@ export class MarkBase<
    * Get all scales instance.
    */
   getScale(): Record<string, Scale> {
-    const chartView = this.root()?.getView();
+    const chartView = this.getRoot()?.getView();
     if (!chartView) return undefined;
     return chartView?.scale;
   }
@@ -40,7 +40,7 @@ export class MarkBase<
    * Get the scale instance by channel.
    */
   getScaleByChannel(channel: string): Scale {
-    const chartView = this.root()?.getView();
+    const chartView = this.getRoot()?.getView();
     if (!chartView) return undefined;
     return chartView?.scale?.[channel];
   }
@@ -51,8 +51,8 @@ export class MarkBase<
   getGroup(): DisplayObject {
     const key = this.attr('key');
     if (!key) return undefined;
-    const chart = this.root();
-    const chartGroup = chart.context().canvas.getRoot();
+    const chart = this.getRoot();
+    const chartGroup = chart.getContext().canvas.getRoot();
     return chartGroup.getElementById(key);
   }
 }
diff --git a/src/api/node.ts b/src/api/node.ts
@@ -126,7 +126,7 @@ export class Node<
     return this;
   }
 
-  root(): Chart {
+  getRoot(): Chart {
     // Find the root chart and render.
     let root: Node = this;
     while (root && root.parentNode) {