docs: add radius rect demo, and draw rect node with GRect (#5452)

* docs: add radius rect demo, and draw rect node with GRect * test: upadte node-rect with Graph * chore: fix ci * fix: rect anchor draw error
antvis · Feb 22, 2024 · b364dba · b364dba
1 parent 836efe4
commit b364dba
Show file tree

Hide file tree

Showing 11 changed files with 921 additions and 768 deletions.
diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -1,162 +1,86 @@
-import { Line } from '../../../src/elements/edges';
-import { Rect } from '../../../src/elements/nodes';
+import { Graph } from '../../../src';
 import type { StaticTestCase } from '../types';
 
 export const nodeRect: StaticTestCase = async (context) => {
   const { canvas } = context;
 
-  canvas.appendChild(
-    new Rect({
-      style: {
-        x: 100,
-        y: 50,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        width: 50,
-        height: 50,
-        labelText: 'simple',
-        labelWordWrapWidth: 100,
-        labelPosition: 'bottom',
-      },
-    }),
-  );
-
-  canvas.appendChild(
-    new Rect({
-      style: {
-        x: 200,
-        y: 50,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        width: 50,
-        height: 20,
-        iconText: 'Y',
-        iconFontSize: 14,
-        iconFill: '#5B8FF9',
-        iconFontWeight: 800,
-        labelText: 'this is a looooooooooooooooooooog label',
-      },
-    }),
-  );
+  const data = {
+    nodes: [
+      { id: 'rect' },
+      { id: 'rect-halo' },
+      { id: 'rect-badges' },
+      { id: 'rect-ports' },
+      { id: 'rect-active' },
+      { id: 'rect-selected' },
+      { id: 'rect-highlight' },
+      { id: 'rect-inactive' },
+    ],
+  };
 
-  canvas.appendChild(
-    new Rect({
+  const graph = new Graph({
+    container: canvas,
+    data,
+    node: {
       style: {
-        // key
-        x: 300,
-        y: 50,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        width: 50,
-        height: 70,
-        // label
-        label: false,
-        labelText: 'no-label',
-        // halo
-        halo: true,
-        // ports
-        ports: [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }],
+        type: 'rect', // 👈🏻 Node shape type.
+        radius: 4, // 👈🏻 Set the radius.
+        width: 40,
+        height: 40,
+        fill: '#1783FF',
+        labelText: (d) => d.id,
+        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconWidth: 30,
+        iconHeight: 30,
+        halo: (d) => d.id.includes('halo'),
+        ports: (d) =>
+          d.id.includes('ports')
+            ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
+            : [],
         portStroke: '#31d0c6',
         portFill: '#fff',
-        portR: 4,
-        // icon
-        iconSrc: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-        // badges
-        badges: [
-          { text: 'A', position: 'right-top', backgroundFill: '#8291b2', padding: [1, 4] },
-          { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-          { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
-        ],
+        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: 10,
-      },
-    }),
-  );
-
-  const node1 = canvas.appendChild(
-    new Rect({
-      id: 'node1',
-      style: {
-        x: 100,
-        y: 250,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        // ports
-        ports: [
-          { position: 'left', stroke: '#31d0c6', fill: '#fff' },
-          { position: 'right', stroke: '#31d0c6', fill: '#fff' },
-          { position: 'top', stroke: '#31d0c6', fill: '#fff' },
-          { position: 'bottom', stroke: '#31d0c6', fill: '#fff' },
-        ],
-        portR: 4,
-      },
-    }),
-  );
-
-  const node2 = canvas.appendChild(
-    new Rect({
-      id: 'node2',
-      style: {
-        x: 200,
-        y: 175,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-        // ports
-        ports: [
-          { position: [0, 0.2], stroke: '#31d0c6', fill: '#fff' },
-          { position: [0, 0.5], stroke: '#31d0c6', fill: '#fff' },
-          { position: [0, 0.8], stroke: '#31d0c6', fill: '#fff' },
-        ],
-        portR: 4,
+        badgeFontSize: 8,
+        badgePadding: [1, 4],
       },
-    }),
-  );
-
-  canvas.appendChild(
-    new Line({
-      id: 'line',
-      style: {
-        sourceNode: node1,
-        targetNode: node2,
-        stroke: '#1890FF',
-        endArrow: true,
-      },
-    }),
-  );
-
-  const node3 = canvas.appendChild(
-    new Rect({
-      id: 'node3',
-      style: {
-        x: 250,
-        y: 250,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
+      state: {
+        active: {
+          halo: true,
+        },
+        selected: {
+          halo: true,
+          lineWidth: 2,
+          stroke: '#000',
+        },
+        highlight: {
+          halo: false,
+          lineWidth: 2,
+          stroke: '#000',
+        },
+        inactive: {
+          opacity: 0.2,
+        },
       },
-    }),
-  );
+    },
+    layout: {
+      type: 'grid',
+    },
+    animation: false,
+  });
 
-  const node4 = canvas.appendChild(
-    new Rect({
-      id: 'node4',
-      style: {
-        x: 350,
-        y: 175,
-        fill: '#f8f8f8',
-        stroke: '#8b9baf',
-      },
-    }),
-  );
+  await graph.render();
 
-  canvas.appendChild(
-    new Line({
-      id: 'line',
-      style: {
-        sourceNode: node3,
-        targetNode: node4,
-        stroke: '#1890FF',
-        endArrow: true,
-      },
-    }),
-  );
+  graph.setElementState('rect-active', 'active');
+  graph.setElementState('rect-selected', 'selected');
+  graph.setElementState('rect-highlight', 'highlight');
+  graph.setElementState('rect-inactive', 'inactive');
 };
diff --git a/packages/g6/__tests__/demo/static/node-triangle.ts b/packages/g6/__tests__/demo/static/node-triangle.ts
@@ -1,6 +1,4 @@
-// Change to import { Graph } from '@antv/g6'; if you are using npm
-// todo: when test env, use SVG always.
-import { Graph } from '../../mock';
+import { Graph } from '../../../src';
 import type { StaticTestCase } from '../types';
 
 export const nodeTriangle: StaticTestCase = async (context) => {