feat(components):Add Legend component

packages/graphin-components/src/components/legend/__tests__/index.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Graphin from '@antv/graphin/src/Graphin';
+import { render, act, fireEvent, cleanup } from '@testing-library/react';
+
+import '@testing-library/jest-dom/extend-expect';
+
+import Legend, { LegendProps, LegendOption } from '../index';
+
+describe('<Legend />', () => {
+  it('You shall pass', () => {
+    const data = {
+      nodes: [],
+      edges: [],
+    };
+    const layout = {
+      name: 'force',
+    };
+    const options: LegendOption[] = [
+      {
+        label: '人群',
+        value: 'person',
+        color: 'red',
+      },
+      {
+        label: '公司',
+        value: 'company',
+        color: 'blue',
+      },
+    ];
+
+    const { asFragment, queryAllByTestId } = render(
+      <Graphin data={data} layout={layout}>
+        <Legend options={options} onChange={() => {}} />
+      </Graphin>,
+    );
+  });
+});

packages/graphin-components/src/components/legend/index.less

@@ -0,0 +1,24 @@
+ul.graphin-components-legend {
+  display: block;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  li.item {
+    display: inline-block;
+    vertical-align: top;
+    margin: 5px 10px;
+    cursor: pointer;
+    & > .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+    & > .label {
+      padding: 0px 5px;
+      font-size: 12px;
+      display: inline-block;
+      vertical-align: baseline;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import './index.less';
+
+export interface LegendOption {
+  /** 标签 */
+  label: string;
+  /** 颜色 */
+  color: string;
+  /** 值 */
+  value: string;
+  /** 是否选中 */
+  checked?: boolean;
+}
+export interface LegendProps {
+  options: LegendOption[];
+  onChange?: (checked: LegendOption, newOptions: LegendOption[], props: any) => any;
+}
+
+const Legend: React.FunctionComponent<LegendProps> = props => {
+  const { onChange = () => {} } = props;
+  const mergedOptions = props.options.map(c => {
+    const { checked } = c;
+    return {
+      ...c,
+      checked: typeof checked === 'boolean' ? checked : true,
+    };
+  });
+  const [options, setOptions] = React.useState(mergedOptions);
+
+  const handleClick = (option: LegendOption) => {
+    const checkedValue = { ...option, checked: !option.checked };
+    const result = options.map(c => {
+      const matched = c.value === option.value;
+      return matched ? checkedValue : c;
+    });
+    setOptions(result);
+    onChange(checkedValue, result, props);
+  };
+
+  return (
+    <ul className="graphin-components-legend">
+      {options.map((option: LegendOption) => {
+        const { label, checked, color } = option;
+        return (
+          <li
+            key={option.value}
+            onClick={() => {
+              handleClick(option);
+            }}
+            className="item"
+          >
+            <span className="dot" style={{ background: checked ? color : '#ddd' }}></span>
+            <span className="label" style={{ color: checked ? '#000000d9' : '#ddd' }}>
+              {label}
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default Legend;

packages/graphin-components/src/index.ts

@@ -1,3 +1,4 @@
 export { default as Toolbar, ToolbarProps, RenderProps } from './components/toolbar';
 export { default as MiniMap } from './components/mini-map';
 export { default as ContextMenu } from './components/context-menu';
+export { default as Legend, LegendProps } from './components/legend';

packages/graphin/src/events/change-zoom.ts

@@ -20,11 +20,11 @@ const changeZoom = (graphin: Graphin) => {
   const extendedGraph = graph as ExtendedGraph;
 
   /** 缩放的时候隐藏IMAGE/TEXT */
-  let timer: NodeJS.Timeout | null = null;
+  let timer: null | number = null;
   graph!.on('viewportchange', (evt: ExtendedG6Event) => {
     if (evt.action === 'zoom' && isZoomOptimize(graph, evt)) {
       if (timer) window.clearTimeout(timer);
-      timer = setTimeout(() => {
+      timer = window.setTimeout(() => {
         try {
           if (graphin.state.forceSimulation) {
             /** 如果存在力导，那么缩放结束且力导未结束前，只展示keyShape */