feat(components):add visualSetting Panel

antvis · Jan 14, 2021 · 50b3100 · 50b3100
1 parent ba20733
commit 50b3100
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 114 deletions.
diff --git a/packages/graphin-components/src/VisSettingPanel/AntdPanel.tsx b/packages/graphin-components/src/VisSettingPanel/AntdPanel.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Collapse, Card, Tabs } from 'antd';
-import { NodeStyle } from './index';
+import { NodeStyle } from '@antv/graphin';
 import LabelSetting from './components/LabelSetting';
 import IconSetting from './components/IconSetting';
 import KeyShapeSetting from './components/KeyShapeSetting';
+import HaloSetting from './components/HaloSetting';
 
 const { Panel } = Collapse;
 const { TabPane } = Tabs;
@@ -15,7 +16,7 @@ interface AntdPanelProps {
 
 const AntdPanel: React.FunctionComponent<AntdPanelProps> = (props) => {
   const { nodeStyleSchema, handleNodeStyleChange } = props;
-  const { label, badges, icon, ...keyShape } = nodeStyleSchema;
+  const { label, badges, icon, keyshape, halo } = nodeStyleSchema;
   const handleChange = (shema) => {
     console.log('shema', shema);
     handleNodeStyleChange(shema);
@@ -28,7 +29,10 @@ const AntdPanel: React.FunctionComponent<AntdPanelProps> = (props) => {
           <TabPane tab="Node" key="node">
             <Collapse defaultActiveKey={['keyshape']} bordered={false} style={{ background: '#fff' }}>
               <Panel header="节点" key="keyshape">
-                <KeyShapeSetting handleChange={handleChange} {...keyShape} />
+                <KeyShapeSetting handleChange={handleChange} {...keyshape} />
+              </Panel>
+              <Panel header="光晕" key="halo">
+                <HaloSetting handleChange={handleChange} {...keyshape} />
               </Panel>
               <Panel header="标签" key="label">
                 <LabelSetting handleChange={handleChange} {...label} />

diff --git a/packages/graphin-components/src/VisSettingPanel/components/HaloSetting.tsx b/packages/graphin-components/src/VisSettingPanel/components/HaloSetting.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Item from './Item';
+import GraphinColorPick from './ColorPicker';
+import { Slider } from 'antd';
+import { NodeStyle } from '@antv/graphin';
+
+type haloStyle = NodeStyle['halo'];
+
+interface HaloSettingProps extends haloStyle {
+  handleChange: (schema: { halo: Partial<haloStyle> }) => void;
+}
+
+const HaloSetting: React.FunctionComponent<HaloSettingProps> = (props) => {
+  const { size, fill, stroke, handleChange } = props;
+  return (
+    <React.Fragment>
+      <Item title="大小">
+        <Slider
+          defaultValue={size[0]}
+          onChange={(value) => {
+            handleChange({ halo: { size: [Number(value)] } });
+          }}
+        />
+      </Item>
+      <Item title="描边颜色">
+        <GraphinColorPick
+          color={stroke}
+          onChange={(value) => {
+            handleChange({ halo: { stroke: value } });
+          }}
+        />
+      </Item>
+      <Item title="填充色">
+        <GraphinColorPick
+          color={fill}
+          onChange={(value) => {
+            handleChange({ halo: { fill: value } });
+          }}
+        />
+      </Item>
+    </React.Fragment>
+  );
+};
+
+export default HaloSetting;
diff --git a/packages/graphin-components/src/VisSettingPanel/components/IconSetting.tsx b/packages/graphin-components/src/VisSettingPanel/components/IconSetting.tsx
@@ -3,22 +3,13 @@ import { Radio, Input, InputNumber } from 'antd';
 import Item from './Item';
 import { FontSizeOutlined, LinkOutlined, AppstoreAddOutlined } from '@ant-design/icons';
 import GraphinColorPick from './ColorPicker';
+import { NodeStyle } from '@antv/graphin';
 
 interface IconSettingProps extends NodeStyleIcon {
   handleChange: (schena: { icon: NodeStyleIcon }) => void;
 }
 
-export type NodeStyleIcon = Partial<{
-  /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-  type: 'font' | 'image' | 'text';
-  /** 根据类型，填写对应的值 */
-  value: string;
-  /** 图标大小 */
-  size: number; // | number[];
-  /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */
-  fill: string;
-  fontFamily: string;
-}>;
+export type NodeStyleIcon = Partial<NodeStyle['icon']>;
 
 const IconSetting = (props: IconSettingProps) => {
   const { handleChange, fill, size, value, type: IconType } = props;
@@ -101,7 +92,7 @@ const IconSetting = (props: IconSettingProps) => {
           size="small"
           min={1}
           max={100000}
-          defaultValue={size}
+          defaultValue={size as number}
           onChange={(e) => {
             handleChange({
               icon: {

diff --git a/packages/graphin-components/src/VisSettingPanel/components/KeyShapeSetting.tsx b/packages/graphin-components/src/VisSettingPanel/components/KeyShapeSetting.tsx
@@ -2,18 +2,22 @@ import * as React from 'react';
 import Item from './Item';
 import GraphinColorPick from './ColorPicker';
 import { Slider } from 'antd';
+import { NodeStyle } from '@antv/graphin';
+
+// interface KeyShapeStyle {
+//   /** 节点的主要容器 */
+//   /** 节点的大小 */
+//   size: [number] | [number, number];
+//   /** 填充色 */
+//   fill: string;
+//   /** 包围边颜色 */
+//   stroke: string;
+// }
+
+type KeyShapeStyle = NodeStyle['keyshape'];
 
-interface KeyShapeStyle {
-  /** 节点的主要容器 */
-  /** 节点的大小 */
-  size: [number] | [number, number];
-  /** 填充色 */
-  fill: string;
-  /** 包围边颜色 */
-  stroke: string;
-}
 interface KeyShapeSettingProps extends KeyShapeStyle {
-  handleChange: (schema: Partial<KeyShapeStyle>) => void;
+  handleChange: (schema: { keyshape: Partial<KeyShapeStyle> }) => void;
 }
 
 const KeyShapeSetting: React.FunctionComponent<KeyShapeSettingProps> = (props) => {
@@ -24,23 +28,23 @@ const KeyShapeSetting: React.FunctionComponent<KeyShapeSettingProps> = (props) =
         <Slider
           defaultValue={size[0]}
           onChange={(value) => {
-            handleChange({ size: [Number(value)] });
+            handleChange({ keyshape: { size: [Number(value)] } });
           }}
         />
       </Item>
-      <Item title="填充色">
+      <Item title="描边颜色">
         <GraphinColorPick
-          color={fill}
+          color={stroke}
           onChange={(value) => {
-            handleChange({ fill: value });
+            handleChange({ keyshape: { stroke: value } });
           }}
         />
       </Item>
-      <Item title="边颜色">
+      <Item title="填充色">
         <GraphinColorPick
-          color={stroke}
+          color={fill}
           onChange={(value) => {
-            handleChange({ stroke: value });
+            handleChange({ keyshape: { fill: value } });
           }}
         />
       </Item>

diff --git a/packages/graphin-components/src/VisSettingPanel/demos/index.tsx b/packages/graphin-components/src/VisSettingPanel/demos/index.tsx
@@ -7,7 +7,7 @@ import '@antv/graphin/dist/index.css';
 const Demo = () => {
   return (
     <div className="App">
-      <Graphin data={Utils.mock(2).circle().graphin()}>
+      <Graphin data={Utils.mock(2).circle().graphin()} theme={{ mode: 'light' }}>
         <VisSettingPanel />
       </Graphin>
     </div>

diff --git a/packages/graphin-components/src/VisSettingPanel/index.tsx b/packages/graphin-components/src/VisSettingPanel/index.tsx
@@ -1,91 +1,28 @@
 import React from 'react';
-import { GraphinContext } from '@antv/graphin';
+import { GraphinContext, NodeConfig, NodeStyle } from '@antv/graphin';
 import AntdPanel from './AntdPanel';
-import { string } from '@antv/graphin/node_modules/@types/prop-types';
 
-interface IVisSettingPanelProps {
+interface VisSettingPanelPropsType {
   style?: React.CSSProperties;
 }
 
-/** 以下内容，应该是Graphin组件自动感知的 */
-
-export type NodeStyleLabel = Partial<{
-  /** label的名称 */
-  value: string;
-  /** 展示位置 */
-  position: 'top' | 'bottom' | 'left' | 'right' | 'center';
-  /** 文本填充色 */
-  fill: string;
-  /** 文本大小 */
-  fontSize: number;
-  /** 文本在各自方向上的偏移量，主要为了便于调整文本位置 */
-  offset: number;
-}>;
-
-export type NodeStyleIcon = Partial<{
-  /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-  type: 'font' | 'image' | 'text';
-  /** 根据类型，填写对应的值 */
-  value: string;
-  /** 图标大小 */
-  size: number; // | number[];
-  /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */
-  fill: string;
-  fontFamily: string;
-}>;
-
-export type NodeStyleBadge = Partial<{
-  /** 放置的位置，ef：LT（left top）左上角 */
-  position: 'LT' | 'RT' | 'RB' | 'LB';
-  /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-  type: 'font' | 'image' | 'text';
-  value: number | string;
-  // type = image 时生效，表示图片的宽度和高度
-  size: [number, number] | [number];
-  /** 徽标填充色 */
-  fill: string;
-  /** 徽标描边色 */
-  stroke: string;
-  /** 徽标内文本的颜色 */
-  color: string;
-  fontSize: number;
-  fontFamily: string;
-  // badges 中文本距离四周的偏移量
-  padding: number;
-  // badges 在 x 和 y 方向上的偏移量
-  offset: [number, number];
-}>;
-
-export interface NodeStyle {
-  /** 节点的主要容器 */
-  /** 节点的大小 */
-  size: [number] | [number, number];
-  /** 填充色 */
-  fill: string;
-  /** 包围边颜色 */
-  stroke: string;
-
-  /** 节点的文本 */
-  label: NodeStyleLabel;
-  /** 节点的中间位置图标区域 */
-  icon: NodeStyleIcon;
-  /** 节点的徽标 */
-  badges: NodeStyleBadge[];
-}
-
 const PrimaryColor = '#205fc2';
 const FontColor = '#ddd';
 const FontSize = 16;
 const FontFamily = 'graphin';
 const PrimaryFillColor = '#fff';
 
-const nodeStyleSchema: NodeStyle = {
-  /** 节点的大小 */
-  size: [30],
-  /** 填充色 */
-  fill: '#fff',
-  /** 包围边颜色 */
-  stroke: PrimaryColor,
+const defaultNodeStyleSchema: NodeStyle = {
+  keyshape: {
+    /** 节点的大小 */
+    size: [30],
+    /** 填充色 */
+    fill: '#fff',
+    /** 包围边颜色 */
+    stroke: PrimaryColor,
+    lineWidth: 1,
+  },
+
   /** 节点的文本 */
   label: {
     /** label的名称 */
@@ -135,6 +72,7 @@ const nodeStyleSchema: NodeStyle = {
       offset: [0, 0],
     },
   ],
+  halo: {},
 };
 
 const boxShadow =
@@ -149,15 +87,16 @@ const defaultStyle: React.CSSProperties = {
   overflowY: 'scroll',
 };
 
-const VisSettingPanel: React.FunctionComponent<IVisSettingPanelProps> = (props) => {
+const VisSettingPanel: React.FunctionComponent<VisSettingPanelPropsType> = (props) => {
   const { graph } = React.useContext(GraphinContext);
   const { style } = props;
-
+  const node = graph.findAllByState('node', 'selected')[0] || graph.getNodes()[0];
+  const nodeSchema = (node.getModel().style || defaultNodeStyleSchema) as NodeStyle;
   const handleNodeStyleChange = (schema) => {
     const selectedNodes = graph.findAllByState('node', 'selected');
     if (selectedNodes.length === 0) {
       // 则认为是全局样式改变
-      graph.getNodes().forEach((node) => {
+      graph.getNodes().forEach((node: any) => {
         /** 状态有优先级 */
         graph.clearItemStates(node);
         graph.updateItem(node, {
@@ -182,10 +121,10 @@ const VisSettingPanel: React.FunctionComponent<IVisSettingPanelProps> = (props)
 
     console.log(graph);
   };
-
+  console.log('schema', nodeSchema);
   return (
     <div style={{ ...defaultStyle, ...style }}>
-      <AntdPanel nodeStyleSchema={nodeStyleSchema} handleNodeStyleChange={handleNodeStyleChange} />
+      <AntdPanel nodeStyleSchema={nodeSchema} handleNodeStyleChange={handleNodeStyleChange} />
     </div>
   );
 };