feat(shape): add diamond node (#5431)

* fix: contextmenu event emit (#5380) Co-authored-by: 宋鹏捷 <[email protected]> * feat: diamond node * test: rerun unit test of diamond node * chore: remove lineWidth offset * test(diamond): add diamond test demo * chore: remove backup file * chore: add any type * fix: fix ci error * fix: add site demo * test: add diamond utils unit test * chore: remove old version unit test * fix: remove scripts && fix ci --------- Co-authored-by: Song Pengjie (宋鹏捷) <[email protected]> Co-authored-by: 宋鹏捷 <[email protected]>
antvis · Mar 6, 2024 · 21d5e46 · 21d5e46
1 parent 1373cf4
commit 21d5e46
Show file tree

Hide file tree

Showing 11 changed files with 1,015 additions and 1 deletion.
diff --git a/packages/g6/__tests__/demo/static/common.ts b/packages/g6/__tests__/demo/static/common.ts
@@ -32,6 +32,7 @@ export * from './edge-quadratic';
 export * from './graph-element';
 export * from './layered-canvas';
 export * from './node-circle';
+export * from './node-diamond';
 export * from './node-ellipse';
 export * from './node-image';
 export * from './node-rect';

diff --git a/packages/g6/__tests__/demo/static/node-diamond.ts b/packages/g6/__tests__/demo/static/node-diamond.ts
@@ -0,0 +1,62 @@
+import { Graph } from '@/src';
+import type { StaticTestCase } from '../types';
+
+export const nodeDiamond: StaticTestCase = async (context) => {
+  const { container, animation, theme } = context;
+  const data = {
+    nodes: [
+      { id: 'diamond' },
+      { id: 'diamond-halo' },
+      { id: 'diamond-badges' },
+      { id: 'diamond-ports' },
+      { id: 'diamond-active' },
+      { id: 'diamond-selected' },
+      { id: 'diamond-highlight' },
+      { id: 'diamond-inactive' },
+      { id: 'diamond-disabled' },
+    ],
+  };
+
+  const graph = new Graph({
+    container: container,
+    theme,
+    data,
+    node: {
+      style: {
+        type: 'diamond', // 👈🏻 Node shape type.
+        width: 40,
+        height: 40,
+        labelMaxWidth: 120,
+        labelText: (d: any) => d.id,
+        iconWidth: 20,
+        iconHeight: 20,
+        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        halo: (d: any) => d.id.includes('halo'),
+        ports: (d: any) =>
+          d.id.includes('ports')
+            ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
+            : [],
+        badges: (d: any) =>
+          d.id.includes('badges')
+            ? [
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
+              ]
+            : [],
+        badgeFontSize: 8,
+        badgePadding: [1, 4],
+      },
+    },
+    layout: {
+      type: 'grid',
+    },
+    animation,
+  });
+  await graph.render();
+  graph.setElementState('diamond-active', 'active');
+  graph.setElementState('diamond-selected', 'selected');
+  graph.setElementState('diamond-highlight', 'highlight');
+  graph.setElementState('diamond-inactive', 'inactive');
+  graph.setElementState('diamond-disabled', 'disabled');
+};