From 53b77cacab364b08dedd6f6522bfd4e85ae6cb9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=9D=E5=93=B2?= Date: Thu, 23 Feb 2023 16:35:07 +0800 Subject: [PATCH] refactor(chart): rename context&node api to getContext and getNode (fixed: #4685) --- .../plots/api/mark-change-data-tooltip.ts | 2 +- __tests__/plots/api/mark-change-data.ts | 2 +- __tests__/unit/api/chart.spec.ts | 10 ++-- __tests__/unit/api/interaction.spec.ts | 2 +- site/docs/api/chart.zh.md | 2 +- site/docs/api/component/scrollbar.zh.md | 6 +- site/docs/api/component/slider.zh.md | 4 +- site/docs/api/mark/shape.zh.md | 2 +- site/docs/api/plugin/lottie.zh.md | 2 +- site/docs/manual/interaction.zh.md | 2 +- site/docs/manual/single-view/chart.zh.md | 2 +- site/docs/manual/theme/pattern.zh.md | 58 ++++++++++--------- .../annotation/annotation/demo/watermark.ts | 2 +- site/examples/plugin/lottie/demo/lottie.ts | 2 +- .../pattern/demo/custom-pattern-with-g-api.ts | 2 +- src/api/chart.ts | 4 +- src/api/composition/base.ts | 8 +-- src/api/mark/base.ts | 12 ++-- src/api/node.ts | 2 +- 19 files changed, 64 insertions(+), 62 deletions(-) diff --git a/__tests__/plots/api/mark-change-data-tooltip.ts b/__tests__/plots/api/mark-change-data-tooltip.ts index 469d802931..afade0e8ca 100644 --- 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 index 86081b966c..72924fd18d 100644 --- 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 index ed79ffc2bb..a9c0c192f2 100644 --- 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.getNode() should return container', () => { const container = document.createElement('div'); const chart = new Chart({ container, }); - expect(chart.node()).toBe(container); + expect(chart.getNode()).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 index 182313007c..a49c1170c2 100644 --- 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 index 36a1e941d0..09750c8b6c 100644 --- a/site/docs/api/chart.zh.md +++ b/site/docs/api/chart.zh.md @@ -60,7 +60,7 @@ chart.render(); 获取图表的配置项。 -### `chart.node()` +### `chart.getNode()` 获取图表的 HTML 容器。 diff --git a/site/docs/api/component/scrollbar.zh.md b/site/docs/api/component/scrollbar.zh.md index c0731fdf25..905825a65d 100644 --- 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 index 6843ab2717..36e7abdeb6 100644 --- 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 index 12ec1eddd9..13eae51f22 100644 --- 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 index 493515c07a..bbc2da2928 100644 --- 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 index b07e7ec1a3..c507bbe14e 100644 --- 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 index a995a5f5a5..4643c6759a 100644 --- 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.getNode(); // 获得挂载的容器 document.getElementById('chart').appendChild(container); ``` diff --git a/site/docs/manual/theme/pattern.zh.md b/site/docs/manual/theme/pattern.zh.md index 12cb46b064..f9a890c2e8 100644 --- 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) 有很深的理解，当然它也拥有最高的自由度。 \ No newline at end of file +不难看出，此种程序化生成方式需要使用者对于 [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 index 2acd0bf499..1e3b8b490d 100644 --- 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 index 55d41e0aad..ad57484fdd 100644 --- 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 index 94ccbf29d2..f5b2bdb67f 100644 --- 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 index f4170cd123..ddc8e2f3da 100644 --- a/src/api/chart.ts +++ b/src/api/chart.ts @@ -213,11 +213,11 @@ export class Chart extends View { return optionsOf(this); } - node(): HTMLElement { + getNode(): 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 index 6d8c421161..f3833bf40c 100644 --- 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 index a30e7100d4..e1e7fc8894 100644 --- a/src/api/mark/base.ts +++ b/src/api/mark/base.ts @@ -8,7 +8,7 @@ export class MarkBase< ChildValue extends Record = Record, > extends Node { 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 { - 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 index afdce51ada..9b128e6df7 100644 --- 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) {