feat: add image node (#5417)

* fix: contextmenu event emit (#5380) Co-authored-by: 宋鹏捷 <[email protected]> * feat: add image node * fix: remove empty method * fix: remove fill color for image node * feat: add image node * test: update image node snapshot * test: update controller viewport snapshot * fix: update unit test and fix bugs for image node * fix: fix code review issue * fix: remove console.log * fix: fix code review issue * ci: add ci for pull request * fix: add getIconStyle for image node * fix: fix ci issue and code review issue --------- Co-authored-by: 宋鹏捷 <[email protected]>
antvis · Feb 22, 2024 · 8af3cf0 · 8af3cf0
1 parent 7590645
commit 8af3cf0
Show file tree

Hide file tree

Showing 9 changed files with 749 additions and 3 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,6 +1,6 @@
 name: build
 
-on: [push]
+on: [push, pull_request]
 
 concurrency:
  group: ${{github.workflow}}-${{github.event_name}}-${{github.ref}}
@@ -39,7 +39,7 @@ jobs:
  path: |
  packages/g6/__tests__/integration/snapshots/**/*-actual.svg
  retention-days: 1
- 
+
  - name: Coveralls GitHub Action
  uses: coverallsapp/[email protected]
  with:

diff --git a/packages/g6/__tests__/demo/static/common.ts b/packages/g6/__tests__/demo/static/common.ts
@@ -31,6 +31,7 @@ export * from './graph-element';
 export * from './layered-canvas';
 export * from './node-circle';
 export * from './node-ellipse';
+export * from './node-image';
 export * from './node-rect';
 export * from './node-star';
 export * from './node-triangle';

diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
@@ -0,0 +1,81 @@
+import { Graph } from '../../../src';
+import type { StaticTestCase } from '../types';
+
+export const nodeImage: StaticTestCase = async (context) => {
+ const { canvas } = context;
+
+ const data = {
+ nodes: [
+ { id: 'image' },
+ { id: 'image-halo' },
+ { id: 'image-badges' },
+ { id: 'image-ports' },
+ { id: 'image-active' },
+ { id: 'image-selected' },
+ { id: 'image-highlight' },
+ { id: 'image-inactive' },
+ ],
+ };
+
+ const graph = new Graph({
+ container: canvas,
+ data,
+ node: {
+ style: {
+ type: 'image', // 👈🏻 Node shape type.
+ width: 40,
+ height: 40,
+ labelText: (d) => d.id,
+ src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+ halo: (d) => d.id.includes('halo'),
+ haloStroke: '#1783FF',
+ ports: (d) =>
+ d.id.includes('ports')
+ ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
+ : [],
+ portStroke: '#31d0c6',
+ portFill: '#fff',
+ portR: 2,
+ portLineWidth: 1,
+ badges: (d) =>
+ d.id.includes('badges')
+ ? [
+ { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
+ { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
+ { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+ ]
+ : [],
+ badgeFill: '#fff',
+ badgeFontSize: 8,
+ badgePadding: [1, 4],
+ },
+ state: {
+ active: {
+ halo: true,
+ },
+ selected: {
+ halo: true,
+ labelFontWeight: 700,
+ labelFontSize: 14,
+ },
+ highlight: {
+ halo: false,
+ labelFontWeight: 700,
+ },
+ inactive: {
+ opacity: 0.2,
+ },
+ },
+ },
+ layout: {
+ type: 'grid',
+ },
+ animation: false,
+ });
+
+ await graph.render();
+ graph.setElementState('image-active', 'active');
+ graph.setElementState('image-selected', 'selected');
+ graph.setElementState('image-highlight', 'highlight');
+ graph.setElementState('image-inactive', 'inactive');
+};