feat(wordcloud): accept custom canvas (#6354)

* feat(wordcloud): accept custom canvas

* docs: update wordcloud docs

* feat(data-transform): pass createCanvas

* refactor(runtime): simplfy library param

__tests__/integration/api-chart-word-cloud-canvas.spec.ts

@@ -0,0 +1,28 @@
+import { chartWordCloudCanvas as render } from '../plots/api/chart-word-cloud-canvas';
+import './utils/useSnapshotMatchers';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import './utils/useCustomFetch';
+
+describe('word cloud canvas', () => {
+  const canvas = createNodeGCanvas(640, 480);
+
+  it('word cloud should use custom canvas.', async () => {
+    // This no canvas in JSDOM environment, so it will throw error.
+    // But it's ok, we just need to test if the ref is called.
+    let ref;
+    try {
+      const rendered = render({
+        canvas,
+        container: document.createElement('div'),
+      });
+      ref = rendered.ref;
+      await rendered.finished;
+    } catch (e) {
+      expect(ref.called).toBe(true);
+    }
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-word-cloud-canvas.ts

@@ -0,0 +1,28 @@
+import { Chart } from '../../../src';
+
+export function chartWordCloudCanvas(context) {
+  const { container, canvas } = context;
+
+  const ref = { called: false };
+
+  const chart = new Chart({
+    container,
+    canvas,
+    createCanvas: () => {
+      ref.called = true;
+      return document.createElement('canvas');
+    },
+  });
+
+  chart.options({
+    type: 'wordCloud',
+    data: {
+      type: 'fetch',
+      value: 'data/philosophyWord.json',
+    },
+  });
+
+  const finished = chart.render();
+
+  return { chart, ref, finished };
+}

__tests__/plots/api/index.ts

@@ -52,3 +52,4 @@ export { chartAutoFitHeight } from './chart-auto-fit-height';
 export { chartAutoFitWidth } from './chart-auto-fit-width';
 export { chartOnLabelClick } from './chart-on-label-click';
 export { chartChangeSizeLabelRotate } from './chart-change-size-label-rotate';
+export { chartWordCloudCanvas } from './chart-word-cloud-canvas';

src/api/runtime.ts

@@ -32,6 +32,7 @@ export type RuntimeOptions = ViewComposition & {
   plugins?: RendererPlugin[];
   theme?: string;
   lib?: G2Library;
+  createCanvas?: () => HTMLCanvasElement;
 };
 
 export class Runtime<Spec extends G2Spec = G2Spec> extends CompositionNode {
@@ -53,7 +54,8 @@ export class Runtime<Spec extends G2Spec = G2Spec> extends CompositionNode {
   private _compositions: Record<string, new () => Node>;
 
   constructor(options: RuntimeOptions) {
-    const { container, canvas, renderer, plugins, lib, ...rest } = options;
+    const { container, canvas, renderer, plugins, lib, createCanvas, ...rest } =
+      options;
     super(rest, 'view');
     this._renderer = renderer || new CanvasRenderer();
     this._plugins = plugins || [];
@@ -63,6 +65,7 @@ export class Runtime<Spec extends G2Spec = G2Spec> extends CompositionNode {
       library: { ...lib, ...library },
       emitter: this._emitter,
       canvas,
+      createCanvas,
     };
     this._create();
   }

src/data/utils/d3-cloud/index.ts

@@ -256,10 +256,10 @@ export function tagCloud() {
     event = cloudDispatch,
     words = [],
     timer = null,
-    timeInterval = Infinity;
+    timeInterval = Infinity,
+    canvas = cloudCanvas;
 
   const fontStyle = cloudFontNormal;
-  const canvas = cloudCanvas;
   const cloud: any = {};
 
   cloud.start = function () {
@@ -476,6 +476,10 @@ export function tagCloud() {
     rotate = functor(_);
   };
 
+  cloud.canvas = function (_) {
+    canvas = functor(_);
+  };
+
   cloud.spiral = function (_) {
     spiral = spirals[_] || _;
   };

src/data/wordCloud.ts

@@ -90,7 +90,16 @@ export type WordCloudOptions = {
    * If not specified, returns the current random number generator, which defaults to Math.random.
    */
   random: () => number;
+
+  /**
+   * If specified, sets the spiral used for positioning words.
+   */
   spiral: any;
+
+  /**
+   * If specified, sets the image mask used for positioning words.
+   */
+  canvas: HTMLCanvasElement;
 };
 
 const DEFAULT_OPTIONS = {
@@ -151,9 +160,11 @@ export function normalizeFontSize(fontSize: any, range?: [number, number]) {
   return () => fontSize;
 }
 
-export const WordCloud: DC<Partial<WordCloudOptions>> = (options) => {
+export const WordCloud: DC<Partial<WordCloudOptions>> = (options, context) => {
   return async (data) => {
-    const cloudOptions = Object.assign({}, DEFAULT_OPTIONS, options);
+    const cloudOptions = Object.assign({}, DEFAULT_OPTIONS, options, {
+      canvas: context.createCanvas,
+    });
     const layout = tagCloud();
 
     await flow(layout, cloudOptions)
@@ -172,6 +183,7 @@ export const WordCloud: DC<Partial<WordCloudOptions>> = (options) => {
       .set('random')
       .set('text')
       .set('on')
+      .set('canvas')
       .setAsync('imageMask', processImageMask, layout.createMask);
 
     layout.words([...data]);

src/runtime/mark.ts

@@ -7,15 +7,11 @@ import {
   G2Mark,
   G2TransformOptions,
   G2EncodeOptions,
+  G2Context,
 } from './types/options';
 import { MarkProps } from './types/mark';
 import { NormalizedEncodeSpec, EncodeComponent, Encode } from './types/encode';
-import {
-  ColumnOf,
-  TransformContext,
-  Transform,
-  TransformComponent,
-} from './types/transform';
+import { ColumnOf, Transform, TransformComponent } from './types/transform';
 import {
   applyDefaults,
   applyDataTransform,
@@ -33,10 +29,9 @@ import {
 export async function initializeMark(
   partialMark: G2Mark,
   partialProps: MarkProps,
-  library: G2Library,
+  context: G2Library,
 ): Promise<[G2Mark, G2MarkState]> {
   // Apply transform to mark to derive indices, data, encode, etc,.
-  const context = { library };
   const [I, transformedMark] = await applyMarkTransform(
     partialMark,
     partialProps,
@@ -143,7 +138,7 @@ export function createColumnOf(library: G2Library): ColumnOf {
 async function applyMarkTransform(
   mark: G2Mark,
   props: MarkProps,
-  context: TransformContext,
+  context: G2Context,
 ): Promise<[number[], G2Mark]> {
   const { library } = context;
   const [useTransform] = useLibrary<