feat(graphin):adjust largeGraph style

antvis · Jan 10, 2021 · b3aa9ad · b3aa9ad
1 parent f26facf
commit b3aa9ad
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/packages/graphin/docs/geamaker/demos/CustomMenu.tsx b/packages/graphin/docs/geamaker/demos/CustomMenu.tsx
@@ -14,6 +14,7 @@ interface CustomMenuProps {
 }
 let collapseArray = [];
 let expandArray = [];
+const NODE_SIZE = 20;
 
 const CustomMenu: React.FunctionComponent<CustomMenuProps> = props => {
   const { updateState, state, nodeMap, aggregatedNodeMap } = props;
@@ -45,9 +46,9 @@ const CustomMenu: React.FunctionComponent<CustomMenuProps> = props => {
         node.type = 'graphin-circle';
         node.style = {
           fill: '#fff',
-          strokeWidth: 2,
+          strokeWidth: 0.5,
           stroke: primaryColor,
-          size: [20, 20],
+          size: [NODE_SIZE, NODE_SIZE],
           label: {
             value: `${node.id}`,
             fill: '#000',
@@ -57,7 +58,7 @@ const CustomMenu: React.FunctionComponent<CustomMenuProps> = props => {
             type: 'font',
             value: icons.user,
             fill: primaryColor,
-            size: 15,
+            size: NODE_SIZE * 0.5,
           },
           badges: [],
         };

diff --git a/packages/graphin/docs/geamaker/demos/color.ts b/packages/graphin/docs/geamaker/demos/color.ts
@@ -20,40 +20,39 @@ const subjectColors = [
 
 const colorSets = [
   {
-    mainFill: '#e91e63',
+    mainFill: '#5b8ff9',
   },
   {
-    mainFill: '#d05ce3',
+    mainFill: '#5ad8a6',
   },
   {
-    mainFill: '#9a67ea',
+    mainFill: '#5d7092',
   },
   {
-    mainFill: '#607d8b',
+    mainFill: '#f6bd16',
   },
   {
-    mainFill: '#3f51b5',
+    mainFill: '#e8684a',
   },
   {
-    mainFill: '#2196f3',
+    mainFill: '#6dc8ec',
   },
   {
-    mainFill: '#62efff',
+    mainFill: '#9270CA',
   },
   {
-    mainFill: '#4caf50',
+    mainFill: '#ff9d4d',
   },
   {
-    mainFill: '#ff9800',
+    mainFill: '#269a99',
   },
   {
-    mainFill: '#795548',
+    mainFill: '#ff99c3',
   },
   {
     mainFill: '#ff5722',
   },
-
-  // #00e676
 ];
+
 const clusterColorMap = new Map();
 export { clusterColorMap, colorSets };
diff --git a/packages/graphin/docs/geamaker/demos/index.tsx b/packages/graphin/docs/geamaker/demos/index.tsx
@@ -3,6 +3,7 @@ import Graphin, { Behaviors } from '@antv/graphin';
 import { ContextMenu, FishEye, MiniMap } from '@antv/graphin-components';
 import G6 from '@antv/g6';
 import { colorSets, clusterColorMap } from './color';
+import hexToRgba from '../../../src/utils/hexToRgba';
 
 import CustomMenu from './CustomMenu';
 import { icons } from './utils';
@@ -30,6 +31,8 @@ const { uniqueId } = G6.Util;
 
 const nodeMap = {};
 const aggregatedNodeMap = {};
+const nodeSize = 40;
+const badgeSize = 12;
 
 /** 转化函数 */
 const transClusterData = (data, sourceData) => {
@@ -41,31 +44,31 @@ const transClusterData = (data, sourceData) => {
       ...node,
       type: 'graphin-circle',
       style: {
-        fill: '#fff',
-        strokeWidth: 2,
+        fill: hexToRgba(primaryColor, 0.1), // '#fff',
+        strokeWidth: 1.2,
         stroke: primaryColor,
-        size: [40, 40],
+        size: [nodeSize, nodeSize],
         label: {
           value: `cluster-${node.id}(${node.nodes.length})`,
-          fill: '#000',
+          fill: hexToRgba('#000', '0.85'),
         },
         icon: {
           fontFamily: 'graphin',
           type: 'font',
           value: icons.team,
           fill: primaryColor,
-          size: 30,
+          size: nodeSize / 1.6,
         },
         badges: [
           {
             position: 'RT',
             type: 'text',
             value: node.nodes.length,
-            size: [14, 14],
+            size: [badgeSize, badgeSize],
             fill: primaryColor,
             stroke: primaryColor,
             color: '#fff',
-            fontSize: 12,
+            fontSize: badgeSize * 0.8,
             padding: 0,
             offset: [0, 0],
           },
@@ -85,12 +88,12 @@ const transClusterData = (data, sourceData) => {
       id,
       label: '',
       size: size > 0.5 ? size : 0.5,
-      color: '#545872',
+      color: '#AAB7C4', // '#545872',
       style: {
-        endArrow: {
-          path: 'M 0,0 L 8,4 L 8,-4 Z',
-          fill: '#545872',
-        },
+        // endArrow: {
+        //   path: 'M 0,0 L 8,4 L 8,-4 Z',
+        //   fill: '#545872',
+        // },
       },
     };
   });

diff --git a/packages/graphin/docs/geamaker/demos/save-render.tsx b/packages/graphin/docs/geamaker/demos/save-render.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Graphin, { Utils } from '@antv/graphin';
 import { icons } from './utils';
 import { ContextMenu, FishEye } from '@antv/graphin-components';
+import hexToRgba from '../../../src/utils/hexToRgba';
 
 const { Menu } = ContextMenu;
 
@@ -13,19 +14,19 @@ const trans = data => {
       ...node,
       type: 'graphin-circle',
       style: {
-        fill: '#fff',
+        fill: '#ffb897',
         strokeWidth: 2,
         stroke: AlibabaColor,
         size: [30, 30],
         label: {
-          value: `${node.id}`,
+          value: '',
           fill: '#666',
         },
         icon: {
-          fontFamily: 'graphin',
-          type: 'font',
-          value: icons.user,
-          fill: AlibabaColor,
+          // fontFamily: 'graphin',
+          type: 'text',
+          value: `${node.id}`,
+          fill: '#000',
           size: 14,
         },
         badges: [],
@@ -37,6 +38,7 @@ const trans = data => {
       ...edge,
       size: 1,
       color: '#666',
+      label: edge.id,
       style: {
         endArrow: {
           path: 'M 0,0 L 8,4 L 8,-4 Z',
@@ -87,7 +89,7 @@ export default () => {
     <div>
       <Graphin
         data={data}
-        layout={{ type: 'graphin-force', preset: { type: 'grid' } }}
+        layout={{ type: 'force', preset: { type: 'grid' }, defSpringLen: () => 100 }}
         style={{
           background: '#fff', // '#17113f'
         }}

diff --git a/packages/graphin/src/apis/types.ts b/packages/graphin/src/apis/types.ts
@@ -5,7 +5,7 @@ export interface ApisType {
   handleZoomIn: () => { text: string; ratio: number };
   handleZoomOut: () => { text: string; ratio: number };
   focusNodeById: (nodeId: string) => void;
-  highlightNodeById: (nodeId: string) => void;
+  highlightNodeById: (nodeId: string[]) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   // [key: string]: (a?:any) => void;
 }