feat: add plugin background

packages/g6-extension-react/__tests__/demos/euro-cup.tsx

@@ -86,8 +86,6 @@ export const EuroCup = () => {
           y: 50,
           width: 480,
           height: 720,
-          background:
-            'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EmPXQLrX2xIAAAAAAAAAAAAADmJ7AQ/original)no-repeat',
           node: {
             type: 'react',
             style: {
@@ -99,6 +97,18 @@ export const EuroCup = () => {
               component: (data: any) => <PlayerNode playerInfo={data} />,
             },
           },
+          plugins: [
+            {
+              type: 'background',
+              width: '480px',
+              height: '720px',
+              backgroundImage:
+                'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EmPXQLrX2xIAAAAAAAAAAAAADmJ7AQ/original)',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'contain',
+              opacity: 1,
+            },
+          ],
         }}
       />
     </div>

packages/g6/__tests__/demos/index.ts

@@ -93,6 +93,7 @@ export { layoutRadialPreventOverlap } from './layout-radial-prevent-overlap';
 export { layoutRadialPreventOverlapUnstrict } from './layout-radial-prevent-overlap-unstrict';
 export { layoutRadialSort } from './layout-radial-sort';
 export { perfFCP } from './perf-fcp';
+export { pluginBackground } from './plugin-background';
 export { pluginBubbleSets } from './plugin-bubble-sets';
 export { pluginCameraSetting } from './plugin-camera-setting';
 export { pluginContextmenu } from './plugin-contextmenu';

packages/g6/__tests__/demos/plugin-background.ts

@@ -0,0 +1,44 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+
+export const pluginBackground: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    autoResize: true,
+    data,
+    layout: { type: 'd3force' },
+    behaviors: ['drag-canvas', 'drag-element'],
+    plugins: [
+      {
+        type: 'background',
+        key: 'background',
+        backgroundImage:
+          'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0Qq0ToQm1rEAAAAAAAAAAAAADmJ7AQ/original)',
+      },
+    ],
+  });
+
+  await graph.render();
+
+  pluginBackground.form = (panel) => {
+    const config = {
+      backgroundSize: 'cover',
+    };
+    return [
+      panel
+        .add(config, 'backgroundSize', {
+          Cover: 'cover',
+          Contain: 'contain',
+        })
+        .name('backgroundSize')
+        .onChange((backgroundSize: string) => {
+          graph.updatePlugin({
+            key: 'background',
+            backgroundSize,
+          });
+        }),
+    ];
+  };
+
+  return graph;
+};

packages/g6/__tests__/unit/plugins/background.spec.ts

@@ -0,0 +1,26 @@
+import { pluginBackground } from '@/__tests__/demos';
+import { createDemoGraph } from '@@/utils';
+
+describe('plugin background', () => {
+  it('background', async () => {
+    const graph = await createDemoGraph(pluginBackground);
+    const container = graph.getCanvas().getContainer()!;
+
+    const el = container.querySelector('.g6-background') as HTMLDivElement;
+
+    expect(graph.getPlugins()).toEqual([
+      {
+        type: 'background',
+        key: 'background',
+        backgroundImage:
+          'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0Qq0ToQm1rEAAAAAAAAAAAAADmJ7AQ/original)',
+      },
+    ]);
+    expect(el.style.backgroundImage).toContain(
+      'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0Qq0ToQm1rEAAAAAAAAAAAAADmJ7AQ/original)',
+    );
+
+    await graph.destroy();
+    expect(container.querySelector('.g6-background')).toBeFalsy();
+  });
+});

packages/g6/__tests__/unit/plugins/history/utils.spec.ts

@@ -1,4 +1,4 @@
-import { alignFields, parseCommand } from '@/src/plugins/history/utils';
+import { alignFields, parseCommand } from '@/src/plugins/history/util';
 import type { DataChange } from '@/src/types';
 
 describe('history utils', () => {

packages/g6/__tests__/unit/utils/contextmenu.spec.ts

@@ -1,4 +1,4 @@
-import { getContentFromItems } from '../../../src/utils/contextmenu';
+import { getContentFromItems } from '../../../src/plugins/contextmenu/util';
 
 describe('contextmenu', () => {
   it('getContentFromItems', () => {

packages/g6/__tests__/unit/utils/dom.spec.ts

@@ -19,8 +19,7 @@ describe('sizeOf', () => {
     expect(el.getAttribute('class')).toBe('g6-test');
     expect(el.style.position).toBe('absolute');
     expect(el.style.display).toBe('block');
-    expect(el.style.top).toBe('0px');
-    expect(el.style.left).toBe('0px');
+    expect(el.style.inset).toBe('0px');
     expect(el.style.height).toBe('100%');
     expect(el.style.width).toBe('100%');
     expect(el.style.overflow).toBe('hidden');

packages/g6/src/plugins/background/index.ts

@@ -0,0 +1,65 @@
+import { omit } from '@antv/util';
+import type { RuntimeContext } from '../../runtime/types';
+import { createPluginContainer } from '../../utils/dom';
+import type { BasePluginOptions } from '../base-plugin';
+import { BasePlugin } from '../base-plugin';
+
+/**
+ * <zh/> 背景配置项
+ *
+ * <en/> Background options
+ */
+export interface BackgroundOptions extends BasePluginOptions, CSSStyleDeclaration {}
+
+/**
+ * <zh/> 背景图
+ *
+ * <en/> Background image
+ * @remarks
+ * <zh/> 支持为图画布设置一个背景图片，让画布更有层次感、叙事性。
+ *
+ * <en/> Support setting a background image for the canvas to make the canvas more hierarchical and narrative.
+ */
+export class Background extends BasePlugin<BackgroundOptions> {
+  static defaultOptions: Partial<BackgroundOptions> = {
+    transition: 'background 0.5s',
+    backgroundSize: 'cover',
+    opacity: '0.35',
+  };
+
+  private $element: HTMLElement = createPluginContainer('background');
+
+  constructor(context: RuntimeContext, options: BackgroundOptions) {
+    super(context, Object.assign({}, Background.defaultOptions, options));
+
+    const $container = this.context.canvas.getContainer();
+    $container!.appendChild(this.$element);
+
+    this.update(options);
+  }
+
+  /**
+   * <zh/> 更新背景图配置
+   *
+   * <en/> Update the background image configuration
+   * @param options - <zh/> 配置项 | <en/> Options
+   * @internal
+   */
+  public async update(options: Partial<BackgroundOptions>) {
+    super.update(options);
+
+    // Set the background style.
+    Object.assign(this.$element.style, omit(this.options, ['key', 'type']));
+  }
+
+  /**
+   * <zh/> 销毁背景图
+   *
+   * <en/> Destroy the background image
+   */
+  public destroy(): void {
+    super.destroy();
+    // Remove the background dom.
+    this.$element.remove();
+  }
+}

packages/g6/src/plugins/contextmenu.ts → packages/g6/src/plugins/contextmenu/index.ts

@@ -1,10 +1,10 @@
-import type { RuntimeContext } from '../runtime/types';
-import type { IElementEvent } from '../types/event';
-import type { Item } from '../utils/contextmenu';
-import { CONTEXTMENU_CSS, getContentFromItems } from '../utils/contextmenu';
-import { createPluginContainer, insertDOM } from '../utils/dom';
-import type { BasePluginOptions } from './base-plugin';
-import { BasePlugin } from './base-plugin';
+import type { RuntimeContext } from '../../runtime/types';
+import type { IElementEvent } from '../../types/event';
+import { createPluginContainer, insertDOM } from '../../utils/dom';
+import type { BasePluginOptions } from '../base-plugin';
+import { BasePlugin } from '../base-plugin';
+import type { Item } from './util';
+import { CONTEXTMENU_CSS, getContentFromItems } from './util';
 
 /**
  * <zh/> 上下文菜单配置项

packages/g6/src/plugins/history/index.ts

@@ -8,7 +8,7 @@ import type { GraphLifeCycleEvent } from '../../utils/event';
 import { idsOf } from '../../utils/id';
 import type { BasePluginOptions } from '../base-plugin';
 import { BasePlugin } from '../base-plugin';
-import { parseCommand } from './utils';
+import { parseCommand } from './util';
 
 /**
  * <zh/> 历史记录配置项

packages/g6/src/plugins/index.ts

@@ -1,3 +1,4 @@
+export { Background } from './background';
 export { BasePlugin } from './base-plugin';
 export { BubbleSets } from './bubble-sets';
 export { CameraSetting } from './camera-setting';
@@ -11,6 +12,7 @@ export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Watermark } from './watermark';
 
+export type { BackgroundOptions } from './background';
 export type { BasePluginOptions } from './base-plugin';
 export type { BubbleSetsOptions } from './bubble-sets';
 export type { CameraSettingOptions } from './camera-setting';

packages/g6/src/plugins/watermark.ts → packages/g6/src/plugins/watermark/index.ts

@@ -1,8 +1,8 @@
-import type { RuntimeContext } from '../runtime/types';
-import { createPluginContainer } from '../utils/dom';
-import { getImageWatermark, getTextWatermark } from '../utils/watermark';
-import type { BasePluginOptions } from './base-plugin';
-import { BasePlugin } from './base-plugin';
+import type { RuntimeContext } from '../../runtime/types';
+import { createPluginContainer } from '../../utils/dom';
+import type { BasePluginOptions } from '../base-plugin';
+import { BasePlugin } from '../base-plugin';
+import { getImageWatermark, getTextWatermark } from './util';
 
 /**
  * <zh/> 水印配置项

packages/g6/src/registry/build-in.ts

@@ -55,6 +55,7 @@ import {
 } from '../layouts';
 import { blues, greens, oranges, spectral, tableau } from '../palettes';
 import {
+  Background,
   BubbleSets,
   Contextmenu,
   GridLine,
@@ -166,6 +167,7 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
     toolbar: Toolbar,
     tooltip: Tooltip,
     watermark: Watermark,
+    background: Background,
   },
   transform: {
     'update-related-edges': UpdateRelatedEdge,

packages/g6/src/runtime/canvas.ts

@@ -151,35 +151,8 @@ export class Canvas {
     return this.config;
   }
 
-  private backgroundElement!: HTMLDivElement;
-
-  private initBackgroundElement(options: Record<string, unknown>) {
-    if (this.backgroundElement) {
-      Object.assign(this.backgroundElement.style, options);
-      return this.backgroundElement;
-    }
-
-    const { width, height } = this.config;
-
-    const element = document.createElement('div');
-    Object.assign(element.style, options, {
-      width: `${width}px`,
-      height: `${height}px`,
-      pointerEvents: 'none',
-      transition: 'background 0.5s',
-      backgroundSize: 'contain',
-    });
-    this.backgroundElement = element;
-    return element;
-  }
-
   public setBackground(background = this.config.background) {
-    const container = this.getContainer();
     this.config.background = background;
-    if (container && background) {
-      const dom = this.initBackgroundElement({ background });
-      container.appendChild(dom);
-    }
   }
 
   public setCursor(cursor: Cursor) {

packages/g6/src/utils/dom.ts

@@ -58,8 +58,7 @@ export function createPluginContainer(type: string, cover = true) {
   el.style.display = 'block';
 
   if (cover) {
-    el.style.top = '0px';
-    el.style.left = '0px';
+    el.style.inset = '0px';
     el.style.height = '100%';
     el.style.width = '100%';
     el.style.overflow = 'hidden';

packages/site/common/api/plugins/background.md

@@ -0,0 +1,54 @@
+```js | ob { pin: false }
+createGraph(
+  {
+   data: {
+      nodes: [
+        { id: 'node-0' },
+        { id: 'node-1' },
+        { id: 'node-2' },
+        { id: 'node-3' },
+        { id: 'node-4' },
+        { id: 'node-5' },
+      ],
+      edges: [
+        { source: 'node-0', target: 'node-1' },
+        { source: 'node-0', target: 'node-2' },
+        { source: 'node-0', target: 'node-3' },
+        { source: 'node-0', target: 'node-4' },
+        { source: 'node-1', target: 'node-0' },
+        { source: 'node-2', target: 'node-0' },
+        { source: 'node-3', target: 'node-0' },
+        { source: 'node-4', target: 'node-0' },
+        { source: 'node-5', target: 'node-0' },
+      ],
+    },
+    layout: { type: 'grid' },
+    behaviors: ['drag-canvas'],
+    plugins: ['grid-line', {
+      type: 'background',
+      key: 'background',
+      backgroundImage: 'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0Qq0ToQm1rEAAAAAAAAAAAAADmJ7AQ/original)',
+      backgrounfRepeat: 'no-repeat',
+      backgroundSize: 'contain',
+    }],
+  },
+  { width: 600, height: 300 },
+  (gui, graph) => {
+    const options = {
+      type: 'background',
+      backgroundSize: 'contain',
+    };
+    const optionFolder = gui.addFolder('Background Options');
+    optionFolder.add(options, 'type').disable(true);
+    optionFolder.add(options, 'backgroundSize', ['cover', 'contain', 'auto', '50%']);
+
+    optionFolder.onChange(({ property, value }) => {
+      graph.updatePlugin({
+        key: 'background',
+        [property]: value,
+      });
+      graph.render();
+    });
+  },
+);
+```

packages/site/examples/plugin/watermark/demo/background.js → packages/site/examples/plugin/background/demo/background.js

@@ -24,13 +24,13 @@ const graph = new Graph({
   behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
   plugins: [
     {
-      type: 'watermark',
-      width: 1280,
-      height: 830,
-      rotate: 0,
-      opacity: 0.7,
-      imageURL: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0Qq0ToQm1rEAAAAAAAAAAAAADmJ7AQ/original',
+      type: 'background',
+      width: '800px',
+      height: '600px',
+      backgroundImage: 'url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0Qq0ToQm1rEAAAAAAAAAAAAADmJ7AQ/original)',
+      backgrounfRepeat: 'no-repeat',
       backgroundSize: 'cover',
+      opacity: 0.2,
     },
   ],
 });