feat(plugins): add minimap plugin (#6103)

* feat(event): before draw, after draw will info whether to be render

* feat(plugins): add minimap plugin

* refactor(plugins): add container style

* refactor(plugins): remove DOMRect, add renderer option

* test: adjust minimap demo

* chore(test): config playwright test env

* test(plugins): add test case for minimap

* chore: update test config

* refactor: remove useless comment

---------

Co-authored-by: antv <[email protected]>

.github/workflows/build.yml

@@ -31,13 +31,19 @@ jobs:
         run: |
           npm run ci
 
+      - name: Run Playwright tests
+        run: |
+          pnpm exec playwright install chromium
+          pnpm exec playwright test
+
       - name: Upload blob report to GitHub Actions Artifacts
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: snapshots
+          name: report
           path: |
             packages/g6/__tests__/snapshots/**/*-actual.svg
+            playwright-report/
           retention-days: 1
 
       - name: Coveralls GitHub Action

.gitignore

@@ -31,3 +31,7 @@ stats.html
 # Tools
 .turbo
 **/tmp/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -6,6 +6,7 @@
     "build": "turbo build --filter=!@antv/g6-site",
     "ci": "turbo run ci --filter=!@antv/g6-site",
     "contribute": "node ./scripts/contribute.mjs",
+    "dev:g6": "cd ./packages/g6 && npm run dev",
     "postinstall": "husky install",
     "prepare": "husky install",
     "publish": "pnpm publish -r --publish-branch v5",
@@ -30,6 +31,7 @@
     "@changesets/cli": "^2.27.7",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
+    "@playwright/test": "^1.45.3",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",

packages/g6/__tests__/demos/index.ts

@@ -112,6 +112,7 @@ export { pluginGridLine } from './plugin-grid-line';
 export { pluginHistory } from './plugin-history';
 export { pluginHull } from './plugin-hull';
 export { pluginLegend } from './plugin-legend';
+export { pluginMinimap } from './plugin-minimap';
 export { pluginTimebar } from './plugin-timebar';
 export { pluginToolbarBuildIn } from './plugin-toolbar-build-in';
 export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';

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

@@ -0,0 +1,27 @@
+import { Graph } from '@/src';
+import { Renderer } from '@antv/g-svg';
+
+export const pluginMinimap: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
+    plugins: [
+      {
+        key: 'minimap',
+        type: 'minimap',
+        size: [240, 160],
+        renderer: new Renderer(),
+      },
+    ],
+    node: {
+      palette: 'spectral',
+    },
+    layout: { type: 'circular' },
+    autoFit: 'view',
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/unit/runtime/graph/event.spec.ts

@@ -183,4 +183,42 @@ describe('event', () => {
     expect(beforeRendererChange).toHaveBeenCalledTimes(1);
     expect(afterRendererChange).toHaveBeenCalledTimes(1);
   });
+
+  it('draw event', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [{ id: 'node-1' }, { id: 'node-2' }],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+      },
+    });
+
+    const beforeDraw = jest.fn();
+    const afterDraw = jest.fn();
+
+    graph.on(GraphEvent.BEFORE_DRAW, (event: any) => {
+      beforeDraw(event.data.render);
+    });
+    graph.on(GraphEvent.AFTER_DRAW, (event: any) => {
+      afterDraw(event.data.render);
+    });
+
+    await graph.render();
+
+    expect(beforeDraw).toHaveBeenCalledTimes(1);
+    expect(beforeDraw.mock.calls[0][0]).toBe(true);
+    expect(afterDraw).toHaveBeenCalledTimes(1);
+    expect(afterDraw.mock.calls[0][0]).toBe(true);
+
+    beforeDraw.mockClear();
+    afterDraw.mockClear();
+
+    graph.addNodeData([{ id: 'node-3' }]);
+
+    await graph.draw();
+
+    expect(beforeDraw).toHaveBeenCalledTimes(1);
+    expect(beforeDraw.mock.calls[0][0]).toBe(false);
+    expect(afterDraw).toHaveBeenCalledTimes(1);
+    expect(afterDraw.mock.calls[0][0]).toBe(false);
+  });
 });

packages/g6/jest.config.js

@@ -21,7 +21,7 @@ module.exports = {
     '^.+\\.svg$': ['<rootDir>/__tests__/utils/svg-transformer.js'],
   },
   collectCoverageFrom: ['src/**/*.ts'],
-  coveragePathIgnorePatterns: ['<rootDir>/src/elements/nodes/html.ts'],
+  coveragePathIgnorePatterns: ['<rootDir>/src/elements/nodes/html.ts', '<rootDir>/src/plugins/minimap'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   collectCoverage: true,
   testRegex: '(/__tests__/.*\\.(test|spec))\\.(ts|tsx|js)$',

packages/g6/src/exports.ts

@@ -72,6 +72,7 @@ export {
   History,
   Hull,
   Legend,
+  Minimap,
   Timebar,
   Toolbar,
   Tooltip,
@@ -168,6 +169,7 @@ export type {
   HistoryOptions,
   HullOptions,
   LegendOptions,
+  MinimapOptions,
   TimebarOptions,
   ToolbarOptions,
   TooltipOptions,

packages/g6/src/plugins/index.ts

@@ -8,6 +8,7 @@ export { GridLine } from './grid-line';
 export { History } from './history';
 export { Hull } from './hull';
 export { Legend } from './legend';
+export { Minimap } from './minimap';
 export { Timebar } from './timebar';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
@@ -23,6 +24,7 @@ export type { GridLineOptions } from './grid-line';
 export type { HistoryOptions } from './history';
 export type { HullOptions } from './hull';
 export type { LegendOptions } from './legend';
+export type { MinimapOptions } from './minimap';
 export type { TimebarOptions } from './timebar';
 export type { ToolbarOptions } from './toolbar';
 export type { TooltipOptions } from './tooltip';