refactor(element): adjust node and edge style; add badge to BaseEdge (#…

…5806)

* refactor(element): adjust node and edge

* test: update snapshots and ci issues

* fix: fix cr issue

packages/g6/__tests__/dataset/element-nodes.json

@@ -6,14 +6,27 @@
       "id": "badges",
       "style": {
         "badges": [
-          { "text": "A", "placement": "right-top" },
+          {
+            "text": "\ue603",
+            "fontFamily": "iconfont",
+            "backgroundWidth": 12,
+            "backgroundHeight": 12,
+            "placement": "right-top",
+            "offsetX": -3
+          },
           { "text": "Important", "placement": "right" },
           { "text": "Notice", "placement": "right-bottom" }
         ],
         "badgeFontSize": 8,
         "badgePadding": [1, 4]
       }
     },
+    {
+      "id": "icon",
+      "style": {
+        "iconSrc": "https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+      }
+    },
     {
       "id": "ports",
       "style": {
@@ -25,6 +38,9 @@
     { "id": "selected", "states": ["selected"] },
     { "id": "highlight", "states": ["highlight"] },
     { "id": "inactive", "states": ["inactive"] },
-    { "id": "disabled", "states": ["disabled"] }
+    {
+      "id": "disabled",
+      "states": ["disabled"]
+    }
   ]
 }

packages/g6/__tests__/demos/behavior-click-select.ts

@@ -6,15 +6,7 @@ export const behaviorClickSelect: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data,
-    layout: {
-      type: 'd3-force',
-    },
-    node: {
-      style: {
-        size: 20,
-      },
-    },
-    zoomRange: [0.5, 5],
+    layout: { type: 'd3-force' },
     behaviors: [{ type: 'click-select', key: 'click-select' }, 'drag-element'],
   });
 

packages/g6/__tests__/demos/element-edge-line.ts

@@ -11,6 +11,11 @@ export const elementEdgeLine: TestCase = async (context) => {
         labelText: (d) => d.id!,
         labelBackground: true,
         endArrow: true,
+        badge: true,
+        badgeText: '\ue603',
+        badgeFontFamily: 'iconfont',
+        badgeBackgroundWidth: 12,
+        badgeBackgroundHeight: 12,
       },
     },
     layout: {

packages/g6/__tests__/demos/element-edge-size.ts

@@ -0,0 +1,31 @@
+import { Graph } from '@/src';
+
+export const elementEdgeSize: TestCase = async (context) => {
+  const data = {
+    nodes: new Array(14).fill(0).map((_, i) => ({ id: `node${i + 1}` })),
+    edges: [1, 2, 4, 6, 8, 10, 12].map((lineWidth, i) => ({
+      id: `edge-${i}`,
+      source: `node${i * 2 + 1}`,
+      target: `node${i * 2 + 2}`,
+      style: { lineWidth },
+    })),
+  };
+
+  const graph = new Graph({
+    ...context,
+    data,
+    edge: {
+      type: 'line', // 👈🏻 Edge shape type.
+      style: { endArrow: true },
+    },
+    layout: {
+      type: 'grid',
+      cols: 2,
+    },
+    behaviors: ['drag-element'],
+  });
+
+  await graph.render();
+
+  return graph;
+};

packages/g6/__tests__/demos/element-node-circle.ts

@@ -8,11 +8,10 @@ export const elementNodeCircle: TestCase = async (context) => {
     node: {
       type: 'circle', // 👈🏻 Node shape type.
       style: {
-        size: 40,
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
         labelText: (d) => d.id!,
-        iconHeight: 20,
-        iconWidth: 20,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        size: 40,
       },
     },
     layout: {

packages/g6/__tests__/demos/element-node-diamond.ts

@@ -10,9 +10,8 @@ export const elementNodeDiamond: TestCase = async (context) => {
       style: {
         size: 40,
         labelText: (d) => d.id!,
-        iconWidth: 20,
-        iconHeight: 20,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
       },
     },
     layout: {

packages/g6/__tests__/demos/element-node-donut.ts

@@ -95,7 +95,8 @@ export const elementNodeDonut: TestCase = async (context) => {
         labelText: (d) => d.id,
         iconHeight: 20,
         iconWidth: 20,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
         halo: (d) => idOf(d).toString().includes('halo'),
         portR: 3,
         ports: (d) =>

packages/g6/__tests__/demos/element-node-ellipse.ts

@@ -12,7 +12,8 @@ export const elementNodeEllipse: TestCase = async (context) => {
         labelText: (d) => d.id!,
         iconHeight: 20,
         iconWidth: 20,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
       },
     },
     layout: {

packages/g6/__tests__/demos/element-node-hexagon.ts

@@ -10,7 +10,8 @@ export const elementNodeHexagon: TestCase = async (context) => {
       style: {
         size: 40,
         labelText: (d) => d.id!,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
       },
     },
     layout: {

packages/g6/__tests__/demos/element-node-rect.ts

@@ -11,9 +11,8 @@ export const elementNodeRect: TestCase = async (context) => {
         radius: 4, // 👈🏻 Set the radius.
         size: 40,
         labelText: (d) => d.id!,
-        iconWidth: 20,
-        iconHeight: 20,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
       },
     },
     layout: {

packages/g6/__tests__/demos/element-node-star.ts

@@ -10,7 +10,8 @@ export const elementNodeStar: TestCase = async (context) => {
       style: {
         size: 40,
         labelText: (d) => d.id!,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
       },
     },
     layout: {

packages/g6/__tests__/demos/element-node-triangle.ts

@@ -11,7 +11,8 @@ export const elementNodeTriangle: TestCase = async (context) => {
         size: 40,
         direction: (d: any) => (d.id === 'ports' ? 'left' : 'up'),
         labelText: (d) => d.id!,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
         ports: (d) => (d.id === 'ports' ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : []),
       },
     },

packages/g6/__tests__/demos/index.ts

@@ -33,6 +33,7 @@ export { elementEdgePolyline } from './element-edge-polyline';
 export { elementEdgePolylineAnimation } from './element-edge-polyline-animation';
 export { elementEdgePort } from './element-edge-port';
 export { elementEdgeQuadratic } from './element-edge-quadratic';
+export { elementEdgeSize } from './element-edge-size';
 export { elementLabelBackground } from './element-label-background';
 export { elementLabelOversized } from './element-label-oversized';
 export { elementNodeBadges } from './element-node-badges';

packages/g6/__tests__/demos/perf-fcp.ts

@@ -16,7 +16,8 @@ export const perfFCP: TestCase = async (context) => {
         labelText: (d) => d.id!,
         iconHeight: 20,
         iconWidth: 20,
-        iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+        iconFontFamily: 'iconfont',
+        iconText: '\ue602',
       },
     },
     layout: {

packages/g6/__tests__/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>G6: Preview</title>
     <style>
+      @import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');
       body {
         margin: 0;
         font-size: 14px;