✨ feat(common): replace degre with badge and explore it to user

degre is a inner property for node layout
antvis · Apr 21, 2020 · df4c426 · df4c426
1 parent f5f2f6f
commit df4c426
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/packages/graphin-site/examples/shape/node/demo/CanonicalShape.jsx b/packages/graphin-site/examples/shape/node/demo/CanonicalShape.jsx
@@ -21,6 +21,8 @@ data.nodes = data.nodes.map((node) => {
   node.style = node.style || {};
   // 修改节点大小
   node.style.nodeSize = 36;
+  // 设置节点徽标
+  node.badge = 4;
   return node;
 });
 data.edges = data.edges.map((edge, index) => {

diff --git a/packages/graphin/src/shape/graph-studio/CircleNode.ts b/packages/graphin/src/shape/graph-studio/CircleNode.ts
@@ -89,7 +89,7 @@ export default (g6: any) => {
         });
       }
 
-      if (!cfg.degree) return keyShape;
+      if (!cfg.badge) return keyShape;
 
       const children = group.addGroup(
         {
@@ -114,7 +114,7 @@ export default (g6: any) => {
           id: 'circle-children-icon',
           x: outerSize / 2 - 9,
           y: -outerSize / 2 + 9,
-          text: cfg.degree > 100 ? '99+' : cfg.degree,
+          text: cfg.badge,
           fontSize: 10,
           textAlign: 'center',
           textBaseline: 'middle',

diff --git a/packages/graphin/src/shape/graph-studio/HexagonNode.ts b/packages/graphin/src/shape/graph-studio/HexagonNode.ts
@@ -99,7 +99,7 @@ export default (g6: any) => {
         });
       }
 
-      if (!cfg.degree) return keyShape;
+      if (!cfg.badge) return keyShape;
 
       const children = group.addGroup(
         {
@@ -122,7 +122,7 @@ export default (g6: any) => {
           id: 'hexagon-children-icon',
           x: 16 / 2,
           y: 16 / 2,
-          text: cfg.degree > 100 ? '99+' : cfg.degree,
+          text: cfg.badge,
           fontSize: 10,
           textAlign: 'center',
           textBaseline: 'middle',

diff --git a/packages/graphin/src/shape/graph-studio/RectNode.ts b/packages/graphin/src/shape/graph-studio/RectNode.ts
@@ -96,7 +96,7 @@ export default (g6: any) => {
         });
       }
 
-      if (!cfg.degree) return keyShape;
+      if (!cfg.badge) return keyShape;
 
       const children = group.addGroup(
         {
@@ -122,7 +122,7 @@ export default (g6: any) => {
           id: 'rect-children-icon',
           x: 12 / 2,
           y: 12 / 2,
-          text: cfg.degree > 100 ? '99+' : cfg.degree,
+          text: cfg.badge,
           fontSize: 10,
           textAlign: 'center',
           textBaseline: 'middle',

diff --git a/packages/graphin/src/types.ts b/packages/graphin/src/types.ts
@@ -163,6 +163,8 @@ export interface Node {
   layout?: NodeLayoutType;
   /** 节点度数 */
   degree?: number;
+  /** 徽标文案 */
+  badge?: number | string;
   searchTypes?: string[];
 }