chore(graphin):fix styles

packages/graphin-components/src/Legend/Node.tsx

@@ -1,5 +1,5 @@
 import { GraphinContext } from '@antv/graphin/dist';
-import React from 'react';
+import React, { useEffect } from 'react';
 import './index.less';
 
 export interface LegendOption {
@@ -13,7 +13,6 @@ export interface LegendOption {
   checked?: boolean;
 }
 export interface LegendProps {
-  options: LegendOption[];
   style?: React.CSSProperties;
   onChange?: (checked: LegendOption, newOptions: LegendOption[], props: any) => any; // eslint-disable-line
 }
@@ -28,13 +27,21 @@ const LegendNode: React.FunctionComponent<LegendProps> = (props) => {
   const { onChange = () => {}, style } = props;
 
   const { options: defaultOptions, dataMap } = legend.node;
-
   const [state, setState] = React.useState({
     options: defaultOptions,
   });
 
+  /** 更新state依赖 */
+  useEffect(() => {
+    setState({
+      options: defaultOptions,
+    });
+  }, [defaultOptions]);
+
   const { options } = state;
 
+  console.log('options', options);
+
   const handleClick = (option: LegendOption) => {
     const checkedValue = { ...option, checked: !option.checked };
     const result = options.map((c) => {
@@ -58,6 +65,7 @@ const LegendNode: React.FunctionComponent<LegendProps> = (props) => {
     /** 给用户的回调函数 */
     onChange(checkedValue, result, props);
   };
+  console.log('%c legend Content', 'color:red');
 
   return (
     <ul className="graphin-components-legend-content" style={style}>

packages/graphin-components/src/Legend/demos/index.tsx

@@ -11,8 +11,10 @@ data.nodes.forEach((node, index) => {
   node.data.type = isCompany ? 'company' : 'person';
   node.type = 'graphin-circle';
   node.style = {
-    fill: isCompany ? 'green' : 'yellow',
-    size: [30],
+    keyshape: {
+      fill: isCompany ? 'green' : 'yellow',
+      size: [30],
+    },
     icon: {
       type: 'font',
       fontFamily: 'graphin',
@@ -26,7 +28,7 @@ data.nodes.forEach((node, index) => {
 const Demo = () => {
   return (
     <Graphin data={data}>
-      <Legend bindType="node" sortKey="data.type" colorKey="style.fill">
+      <Legend bindType="node" sortKey="data.type" colorKey="style.keyshape.fill">
         <Legend.Node />
       </Legend>
     </Graphin>

packages/graphin-components/src/Legend/demos/test.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/destructuring-assignment */
+import * as React from 'react';
+import Graphin, { Utils } from '@antv/graphin';
+import iconsLoader from '@antv/graphin-icons';
+import { Legend } from '@antv/graphin-components';
+import { useState, useEffect } from 'react';
+
+const Demo = (props) => {
+  const propsOptions = props.options;
+  const [state, setState] = React.useState({
+    options: propsOptions,
+  });
+  useEffect(() => {
+    setState({
+      options: props.options,
+    });
+  }, [props.options]);
+
+  console.log('props', propsOptions, 'state', state.options);
+  return <div></div>;
+};
+
+export default () => {
+  const [render, setRedener] = useState(0);
+  useEffect(() => {
+    setRedener(1);
+  }, []);
+  console.log('root', render);
+  return (
+    <div>
+      <Demo options={render} />
+    </div>
+  );
+};

packages/graphin-components/src/Legend/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   GraphinContext,
   Graph,
@@ -19,9 +19,13 @@ export interface LegendProps {
   sortKey: string;
   /**
    * @description  颜色映射的Key值
-   * @default "style.fill"
+   * @default "style.stroke"
    */
   colorKey?: string;
+  /**
+   * @description 样式
+   */
+  style?: React.CSSProperties;
 }
 export interface OptionType {
   /** 颜色 */
@@ -54,6 +58,7 @@ const calculate = ({
   colorKey: string;
 }) => {
   const data = graph.save();
+
   const treeData = data as TreeGraphData;
   const graphData = data as GraphData;
   const nodeMapByMapKey: Map<string | number, NodeConfig[]> = new Map();
@@ -151,10 +156,15 @@ export interface LegendContextType extends GraphinContextType {
     };
   };
 }
+const defaultStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: '0px',
+  right: '0px',
+};
 const Legend: React.FunctionComponent<LegendProps> & { Node: typeof Node } = (props) => {
   const graphin = React.useContext<GraphinContextType>(GraphinContext);
   const { graph } = graphin;
-  const { bindType, sortKey, children, colorKey = 'style.fill' } = props;
+  const { bindType, sortKey, children, colorKey = 'style.stroke', style } = props;
   const { dataMap, options } = calculate({ bindType, sortKey, graph, colorKey });
 
   graphin.legend = {
@@ -168,7 +178,12 @@ const Legend: React.FunctionComponent<LegendProps> & { Node: typeof Node } = (pr
       options,
     },
   };
-  return <div className="graphin-components-legend">{children}</div>;
+  console.log('%c legend Container', 'color:red');
+  return (
+    <div className="graphin-components-legend" style={{ ...defaultStyle, ...style }}>
+      {children}
+    </div>
+  );
 };
 
 Legend.Node = Node;

packages/graphin/docs/geamaker/demos/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Graphin, { Behaviors } from '@antv/graphin';
-import { ContextMenu, FishEye, MiniMap } from '@antv/graphin-components';
+import { ContextMenu, FishEye, MiniMap, Legend } from '@antv/graphin-components';
 import G6 from '@antv/g6';
 import { colorSets, clusterColorMap } from './color';
 import hexToRgba from '../../../src/utils/hexToRgba';
@@ -44,14 +44,21 @@ const transClusterData = (data, sourceData) => {
       ...node,
       type: 'graphin-circle',
       style: {
-        fill: hexToRgba(primaryColor, 0.1), // '#fff',
-        strokeWidth: 1.2,
-        stroke: primaryColor,
-        size: [nodeSize, nodeSize],
+        keyshape: {
+          fill: hexToRgba(primaryColor, 0.1), // '#fff',
+          strokeWidth: 1.2,
+          stroke: primaryColor,
+          size: [nodeSize, nodeSize],
+        },
         label: {
           value: `cluster-${node.id}(${node.nodes.length})`,
           fill: hexToRgba('#000', '0.85'),
         },
+        halo: {
+          fill: hexToRgba(primaryColor, 0.1), // '#fff',
+          strokeWidth: 1.2,
+          stroke: primaryColor,
+        },
         icon: {
           fontFamily: 'graphin',
           type: 'font',
@@ -162,6 +169,7 @@ const App = () => {
   // if (!data) {
   //   return null;
   // }
+  console.log('GEAMAKER RENDER', state.data);
   return (
     <div>
       <Graphin data={data} layout={layout} height={900}>
@@ -178,6 +186,9 @@ const App = () => {
           </Menu>
         </ContextMenu>
         <FishEye options={{ showLabel: false }} visible={visible} handleEscListener={handleClose} />
+        <Legend bindType="node" sortKey="id" colorKey="style.keyshape.stroke">
+          <Legend.Node />
+        </Legend>
       </Graphin>
     </div>
   );

packages/graphin/src/consts.ts

@@ -2,15 +2,13 @@ export const TREE_LAYOUTS = ['dendrogram', 'compactBox', 'mindmap', 'indented'];
 
 export const G6_DEFAULT_NODE = {
   type: 'graphin-circle',
-  size: [30, 30],
-  fill: '#9EC9FF',
-  stroke: '#5B8FF9',
-  lineWidth: 3,
-  labelCfg: {
-    position: 'bottom',
-  },
-  icon: {
-    show: true,
+  style: {
+    keyshape: {
+      size: [30, 30],
+      fill: 'red',
+      stroke: 'red',
+      lineWidth: 3,
+    },
   },
 };