feat:add VisSettingPanel

antvis · Feb 18, 2021 · 3f9026e · 3f9026e
1 parent 0aaa759
commit 3f9026e
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 106 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,6 +16,8 @@ module.exports = {
   },
   rules: {
     'no-shadow': 0,
+    'react/button-has-type': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
     camelcase: 0,
     '@typescript-eslint/ban-ts-ignore': 0,
     'arrow-body-style': 0,

diff --git a/.umirc.js b/.umirc.js
@@ -20,8 +20,7 @@ export default {
       // 'packages/graphin-graphscope/docs/',
 
       /** local develop */
-      // 'packages/graphin/docs/case/graph-database',
-      // 'packages/graphin/docs/index.md',
+      // 'packages/graphin-components/src/VisSettingPanel',
     ],
   },
   alias: {
@@ -53,10 +52,10 @@ export default {
       title: 'v1.6.4',
       path: 'https://antv.vision/graphin-1.x-site/',
     },
-    {
-      title: 'GitHub',
-      path: 'https://github.com/antvis/Graphin',
-    },
+    // {
+    //   title: 'GitHub',
+    //   path: 'https://github.com/antvis/Graphin',
+    // },
   ],
 
   analytics: isProduction ? { ga: 'UA-148148901-8' } : false,

diff --git a/packages/graphin-components/src/VisSettingPanel/demos/AntdPanel.tsx b/packages/graphin-components/src/VisSettingPanel/demos/AntdPanel.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable no-undef */
 import React from 'react';
-import { Collapse, Card, Tabs } from 'antd';
-import { NodeStyle } from '@antv/graphin';
+import { Collapse, Card, Tabs, Switch } from 'antd';
+import { GraphinContext } from '@antv/graphin';
 import LabelSetting from './components/LabelSetting';
 import IconSetting from './components/IconSetting';
 import KeyShapeSetting from './components/KeyShapeSetting';
@@ -9,26 +10,60 @@ import HaloSetting from './components/HaloSetting';
 const { Panel } = Collapse;
 const { TabPane } = Tabs;
 
-interface AntdPanelProps {
-  nodeStyleSchema: NodeStyle;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  handleNodeStyleChange: (value: any) => void;
-}
+const handleChangeTheme = checked => {
+  console.log(checked);
+  // dom 是一个 style 样式文件的链接
+  // eslint-disable-next-line no-undef
+  const dom = window.document.getElementById('theme-style') as HTMLLinkElement;
+  const cssUrl = checked
+    ? 'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css'
+    : 'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.dark.css';
 
-const AntdPanel: React.FunctionComponent<AntdPanelProps> = (props) => {
-  const { nodeStyleSchema, handleNodeStyleChange } = props;
+  if (dom) {
+    dom.href = cssUrl;
+  } else {
+    // 创建一个 stylesheet 文件链接，动态 append 到 body 中
+    // eslint-disable-next-line no-undef
+    const style = document.createElement('link');
+    style.type = 'text/css';
+    style.rel = 'stylesheet';
+    style.id = 'theme-style';
+    style.href = cssUrl;
+    if (document.body.append) {
+      document.body.append(style);
+    } else {
+      document.body.appendChild(style);
+    }
+  }
+};
+// interface AntdPanelProps {
+//   nodeStyleSchema: NodeStyle;
+//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//   handleNodeStyleChange: (value: any) => void;
+// }
+
+const AntdPanel = () => {
+  const graphin = React.useContext(GraphinContext);
+
+  const { nodeStyleSchema, handleNodeStyleChange } = graphin.visSettingPanel;
   const { label, icon, keyshape } = nodeStyleSchema;
-  const handleChange = (shema) => {
+  const handleChange = shema => {
     console.log('shema', shema);
     handleNodeStyleChange(shema);
   };
 
   return (
     <div>
-      <Card title="可视化配置面板" bordered={false} style={{ width: 350 }} bodyStyle={{ padding: '0px 12px' }}>
+      <Card
+        title="可视化配置面板"
+        bordered={false}
+        style={{ width: 350 }}
+        bodyStyle={{ padding: '0px 12px' }}
+        extra={<Switch checkedChildren="light" unCheckedChildren="dark" onChange={handleChangeTheme} defaultChecked />}
+      >
         <Tabs defaultActiveKey="node">
           <TabPane tab="Node" key="node">
-            <Collapse defaultActiveKey={['keyshape']} bordered={false} style={{ background: '#fff' }}>
+            <Collapse defaultActiveKey={['keyshape']} bordered={false}>
               <Panel header="节点" key="keyshape">
                 <KeyShapeSetting handleChange={handleChange} {...keyshape} />
               </Panel>

diff --git a/packages/graphin-components/src/VisSettingPanel/demos/components/ColorPicker.tsx b/packages/graphin-components/src/VisSettingPanel/demos/components/ColorPicker.tsx
@@ -1,6 +1,6 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
-import { Button } from 'antd';
-import { TwitterPicker } from 'react-color';
+import { ChromePicker } from 'react-color';
 
 interface ColorPickerProps {
   onChange: (color: string) => void;
@@ -11,6 +11,21 @@ interface ColorPickerState {
   visible: boolean;
   value: string;
 }
+const styles = {
+  color: {
+    width: '36px',
+    height: '14px',
+    borderRadius: '2px',
+    padding: '5px',
+    border: '5px solid #ddd',
+    display: 'inline-block',
+    textAlign: 'top',
+  },
+  popover: {
+    position: 'absolute',
+    zIndex: '2',
+  },
+};
 const ColorPicker = (props: ColorPickerProps) => {
   const { onChange, color } = props;
 
@@ -24,7 +39,7 @@ const ColorPicker = (props: ColorPickerProps) => {
     onChange(value.hex);
     setState({
       ...state,
-      visible: false,
+      // visible: false,
       value: value.hex,
     });
   };
@@ -34,14 +49,22 @@ const ColorPicker = (props: ColorPickerProps) => {
       visible: !state.visible,
     });
   };
+  const handleClose = () => {
+    setState({
+      ...state,
+      visible: false,
+    });
+  };
 
-  const { visible, colors, value } = state;
+  const { visible, value } = state;
 
   return (
     <div>
-      <Button style={{ background: value }} shape="circle" size="small" onClick={handleClick} />
+      <div style={{ ...styles.color, background: value }} onClick={handleClick} />
       <div style={{ display: 'inline-block', paddingLeft: '15px' }}> {value}</div>
-      {visible && <TwitterPicker width="100%" colors={colors} onChange={handleChange} color={color} />}
+      <div style={styles.popover} onClick={handleClose}>
+        {visible && <ChromePicker onChange={handleChange} color={color} />}
+      </div>
     </div>
   );
 };

diff --git a/packages/graphin-components/src/VisSettingPanel/demos/components/Item.tsx b/packages/graphin-components/src/VisSettingPanel/demos/components/Item.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import { Typography } from 'antd';
 
 const Item = ({ title, children }) => {
   return (
     <div style={{ display: 'flex', margin: '10px 5px' }}>
-      <div style={{ flexBasis: '80px' }}>{title}</div>
+      <div style={{ flexBasis: '80px' }}>
+        <Typography>{title}</Typography>
+      </div>
       <div style={{ flex: 'auto' }}>{children}</div>
     </div>
   );

diff --git a/packages/graphin-components/src/VisSettingPanel/demos/components/SwtichingTheme.tsx b/packages/graphin-components/src/VisSettingPanel/demos/components/SwtichingTheme.tsx
diff --git a/packages/graphin-components/src/VisSettingPanel/demos/index.tsx b/packages/graphin-components/src/VisSettingPanel/demos/index.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import Graphin, { Utils } from '@antv/graphin';
-// import { VisSettingPanel } from '@antv/graphin-components';
-// Do not forget to import CSS
+import { VisSettingPanel } from '@antv/graphin-components';
+import AntdPanel from './AntdPanel';
 
 const Demo = () => {
   return (
     <div className="App">
       <Graphin data={Utils.mock(2).circle().graphin()} theme={{ mode: 'light' }}>
-        {/* <VisSettingPanel /> */}
+        <VisSettingPanel>
+          <AntdPanel />
+        </VisSettingPanel>
       </Graphin>
     </div>
   );

diff --git a/packages/graphin-components/src/VisSettingPanel/index.tsx b/packages/graphin-components/src/VisSettingPanel/index.tsx
@@ -1,79 +1,10 @@
 import React from 'react';
 import { GraphinContext, NodeStyle } from '@antv/graphin';
-// import AntdPanel from './demos/AntdPanel';
 
 interface VisSettingPanelPropsType {
   style?: React.CSSProperties;
 }
 
-const PrimaryColor = '#205fc2';
-const FontColor = '#ddd';
-const FontSize = 16;
-const FontFamily = 'graphin';
-
-const defaultNodeStyleSchema: NodeStyle = {
-  keyshape: {
-    /** 节点的大小 */
-    size: [30],
-    /** 填充色 */
-    fill: '#fff',
-    /** 包围边颜色 */
-    stroke: PrimaryColor,
-    lineWidth: 1,
-  },
-
-  /** 节点的文本 */
-  label: {
-    /** label的名称 */
-    value: '',
-    /** 展示位置 */
-    position: 'bottom',
-    /** 文本填充色 */
-    fill: FontColor,
-    /** 文本大小 */
-    fontSize: FontSize,
-    /** 文本在各自方向上的偏移量，主要为了便于调整文本位置 */
-    offset: 0,
-  },
-  /** 节点的中间位置图标区域 */
-  icon: {
-    /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-    type: 'font',
-    /** 根据类型，填写对应的值 */
-    value: 'home',
-    /** 图标大小 */
-    size: FontSize, // [FontSize, FontSize],
-    /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */
-    fill: PrimaryColor,
-    fontFamily: 'graphin',
-  },
-  /** 节点的徽标 */
-  badges: [
-    {
-      /** 放置的位置，ef：LT（left top）左上角 */
-      position: 'RT',
-      /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-      type: 'font',
-      value: 'ding',
-      // type = image 时生效，表示图片的宽度和高度
-      size: [FontSize, FontSize],
-      /** 徽标填充色 */
-      fill: '#fff',
-      /** 徽标描边色 */
-      stroke: PrimaryColor,
-      /** 徽标内文本的颜色 */
-      color: FontColor,
-      fontSize: FontSize,
-      fontFamily: FontFamily,
-      // badges 中文本距离四周的偏移量
-      padding: 0,
-      // badges 在 x 和 y 方向上的偏移量
-      offset: [0, 0],
-    },
-  ],
-  halo: {},
-};
-
 const boxShadow =
   '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)';
 const defaultStyle: React.CSSProperties = {
@@ -87,10 +18,12 @@ const defaultStyle: React.CSSProperties = {
 };
 
 const VisSettingPanel: React.FunctionComponent<VisSettingPanelPropsType> = props => {
-  const { graph } = React.useContext(GraphinContext);
-  const { style } = props;
+  const graphin = React.useContext(GraphinContext);
+
+  const { graph } = graphin;
+  const { style, children } = props;
   const item = graph.findAllByState('node', 'selected')[0] || graph.getNodes()[0];
-  const nodeSchema = (item.getModel().style || defaultNodeStyleSchema) as NodeStyle;
+  const nodeSchema = item.getModel().style as NodeStyle;
   const handleNodeStyleChange = schema => {
     const selectedNodes = graph.findAllByState('node', 'selected');
     if (selectedNodes.length === 0) {
@@ -122,11 +55,13 @@ const VisSettingPanel: React.FunctionComponent<VisSettingPanelPropsType> = props
     console.log(graph);
   };
   console.log('schema', nodeSchema);
-  return (
-    <div style={{ ...defaultStyle, ...style }}>
-      {/* <AntdPanel nodeStyleSchema={nodeSchema} handleNodeStyleChange={handleNodeStyleChange} /> */}
-    </div>
-  );
+
+  graphin.visSettingPanel = {
+    nodeStyleSchema: nodeSchema,
+    handleNodeStyleChange,
+  };
+
+  return <div style={{ ...defaultStyle, ...style }}>{children}</div>;
 };
 
 export default VisSettingPanel;
diff --git a/packages/graphin-components/src/index.ts b/packages/graphin-components/src/index.ts
@@ -6,7 +6,7 @@
 export { default as Hull, HullCfg } from './Hull';
 export { default as ContextMenu } from './ContextMenu';
 export { default as EdgeBundling } from './EdgeBundling';
-// export { default as VisSettingPanel } from './VisSettingPanel';
+export { default as VisSettingPanel } from './VisSettingPanel';
 export { default as Tooltip } from './Tooltip';
 export { default as FishEye } from './FishEye';
 export { default as Toolbar } from './Toolbar';