✨ feat: 新增titleSlot能力、edge的优先级与强弱区分。 (#17)

* 🐛 fix: build * 🐛 fix: react-flow-attribution remove * ✨ feat: edge border raduis type * 🐛 feat: eslint config * ✨ feat: border radius edge * 📝 fix: 删除不必要的demo配置 * 📝 feat: radius edge memo update * 📝 feat: 简化圆角线段组件的demo示例 * ✨ feat: 更新proflow配置的类型 * ✨ feat: 更新proflow点击拖拽事件触发结构 * ✨ feat: add reactflow css * ✨ feat: add component docs * ✨ feat: add transfer font with zoom * ✨ feat: add transfer font with zoom for blood group node * ✨ feat: add edge select * ✨ feat: add edge select type * 🐛 fix: ci bug * ✨ feat: 新增title行的slot能力,可以插入自定义模块 * ✨ feat: 新增node节点的sub选中类型 * ✨ feat: 新增edge的sub select类型 * ✨ feat: edge 展示level区分优先级 * ✨ feat: 新增smoothstp类型的edge作为默认 * 🔥 feat: 删除console * ✨ feat: 新增proflowcontroller的classname --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Oct 23, 2023 · b1858a6 · b1858a6
1 parent cfd2b63
commit b1858a6
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 51 deletions.
diff --git a/src/BloodGroupNode/styles.ts b/src/BloodGroupNode/styles.ts
@@ -106,11 +106,20 @@ export const useStyles = createStyles(({ css }) => ({
   nodeSelected: css`
     box-shadow: 0 0 0 3px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
   `,
+  nodeSubSelected: css`
+    box-shadow: 0 0 0 1px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
   nodeDanger: css`
     box-shadow: 0 0 0 3px #f7636e, 0 1px 4px 1px rgba(0, 0, 0, 8%);
   `,
+  nodeSubDanger: css`
+    box-shadow: 0 0 0 1px #f7636e, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
   nodeWarning: css`
     box-shadow: 0 0 0 3px #ef9d3b, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
   `,
+  nodeSubWarning: css`
+    box-shadow: 0 0 0 1px #ef9d3b, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
   nodeDefault: css``,
 }));
diff --git a/src/BloodNode/index.tsx b/src/BloodNode/index.tsx
@@ -1,4 +1,12 @@
-import { NODE_DANGER, NODE_SELECT, NODE_WARNING, NodeSelect } from '@/ProFlow/constants';
+import {
+  NODE_DANGER,
+  NODE_SELECT,
+  NODE_SUB_DANGER,
+  NODE_SUB_SELECT,
+  NODE_SUB_WARNING,
+  NODE_WARNING,
+  NodeSelect,
+} from '@/ProFlow/constants';
 import React from 'react';
 import styled from 'styled-components';
 import { useStyles } from './styles';
@@ -14,6 +22,10 @@ interface BloodNodeProps {
   selectType?: NodeSelect;
   zoom?: number;
   label?: string;
+  titleSlot?: {
+    type: 'left' | 'right';
+    value: React.ReactNode;
+  };
 }
 
 const zoomNum = (num: number, zoom: number, limitMax?: boolean) => {
@@ -33,14 +45,34 @@ export const ArtboardTitle = styled.div<{ zoom: number }>`
   white-space: nowrap;
 `;
 
+const TitleSlotLeft = styled.div`
+  width: 28px;
+  height: 28px;
+  margin-left: 8px;
+`;
+
+const TitleSlotRight = styled.div`
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  right: 13px;
+  top: 9px;
+`;
+
 export function getClsFromSelectType(select: NodeSelect) {
   switch (select) {
     case NodeSelect.SELECT:
       return NODE_SELECT;
+    case NodeSelect.SUB_SELECT:
+      return NODE_SUB_SELECT;
     case NodeSelect.DANGER:
       return NODE_DANGER;
+    case NodeSelect.SUB_DANGER:
+      return NODE_SUB_DANGER;
     case NodeSelect.WARNING:
       return NODE_WARNING;
+    case NodeSelect.SUB_WARNING:
+      return NODE_SUB_WARNING;
     default:
       return 'nodeDefault';
   }
@@ -54,6 +86,7 @@ const BloodNode: React.FC<Partial<BloodNodeProps>> = ({
   selectType = NodeSelect.SELECT,
   zoom = 1,
   label,
+  titleSlot,
 }) => {
   const { styles, cx } = useStyles();
 
@@ -71,9 +104,17 @@ const BloodNode: React.FC<Partial<BloodNodeProps>> = ({
         <div className={'content'}>
           <div className={'title'}>
             <span>{title}</span>
-            {/* {mainDanger && <DangerLogo />}
-        {qualityScore && <ApiScore score={parseFloat(qualityScore)} />} */}
+            {!!titleSlot && !!titleSlot.value && titleSlot.type === 'left' && (
+              <TitleSlotLeft>{titleSlot.value}</TitleSlotLeft>
+            )}
+            {!!titleSlot && !!titleSlot.value && titleSlot.type === 'right' && (
+              <TitleSlotLeft>
+                <div style={{ width: '28px' }}></div>
+                <TitleSlotRight>{titleSlot.value}</TitleSlotRight>
+              </TitleSlotLeft>
+            )}
           </div>
+
           <div className={'des'}>{description}</div>
         </div>
       </div>

diff --git a/src/BloodNode/styles.ts b/src/BloodNode/styles.ts
@@ -74,11 +74,20 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => ({
   nodeSelected: css`
     box-shadow: 0 0 0 3px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
   `,
+  nodeSubSelected: css`
+    box-shadow: 0 0 0 1px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
   nodeDanger: css`
     box-shadow: 0 0 0 3px #f7636e, 0 1px 4px 1px rgba(0, 0, 0, 8%);
   `,
+  nodeSubDanger: css`
+    box-shadow: 0 0 0 1px #f7636e, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
   nodeWarning: css`
     box-shadow: 0 0 0 3px #ef9d3b, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
   `,
+  nodeSubWarning: css`
+    box-shadow: 0 0 0 1px #ef9d3b, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+  `,
   nodeDefault: css``,
 }));
diff --git a/src/FlowStoreProvider/demos/FlowStoreProvider.tsx b/src/FlowStoreProvider/demos/FlowStoreProvider.tsx
@@ -37,7 +37,6 @@ export default () => {
     <FlowStoreProvider
       flattenNodes={nodes}
       onFlattenNodesChange={(flattenNodes) => {
-        console.log(flattenNodes);
         setNodes(flattenNodes);
       }}
     >

diff --git a/src/ProFlow/constants.tsx b/src/ProFlow/constants.tsx
@@ -1,13 +1,15 @@
-import { ProFlowNode, ProFlowNodeData } from '@/constants';
 import { Node } from 'reactflow';
+import { ProFlowNode, ProFlowNodeData } from '../constants';
 
 export enum NodeSelect {
   SELECT = 'SELECT',
+  SUB_SELECT = 'SUB_SELECT',
   DANGER = 'DANGER',
+  SUB_DANGER = 'SUB_DANGER',
   WARNING = 'WARNING',
+  SUB_WARNING = 'SUB_WARNING',
   DEFAULT = 'DEFAULT',
 }
-
 export interface InitialNode extends Node {
   width?: number;
   height?: number;
@@ -47,10 +49,18 @@ export interface NodeMapItem {
 export type NodeMapping = Record<string, NodeMapItem>;
 
 export const NODE_SELECT = 'nodeSelected';
+export const NODE_SUB_SELECT = 'nodeSubSelected';
 export const NODE_DANGER = 'nodeDanger';
+export const NODE_SUB_DANGER = 'nodeSubDanger';
 export const NODE_WARNING = 'nodeWarning';
-export const INIT_NODE = 'initialNode';
-export const NODE_WRAP = 'nodeWrap';
+export const NODE_SUB_WARNING = 'nodeSubWarning';
+
 export const EDGE_SELECT = 'edgeSelected';
+export const EDGE_SUB_SELECT = 'edgeSubSelected';
 export const EDGE_DANGER = 'edgeDanger';
+export const EDGE_SUB_DANGER = 'edgeSubDanger';
 export const EDGE_WARNING = 'edgeWarning';
+export const EDGE_SUB_WARNING = 'edgeSubWarning';
+
+export const INIT_NODE = 'initialNode';
+export const NODE_WRAP = 'nodeWrap';
diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -1,15 +1,53 @@
-import { NodeSelect, ProFlowNode } from '@/index';
+import { EdgeType, NodeSelect, ProFlowNode } from '@/index';
+import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
+import styled from 'styled-components';
 import ProFlow from '..';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
     width: 100%;
     height: 600px;
+    .ant-progress-text {
+      text-align: center !important;
+    }
   `,
 }));
 
+const ApiScore: React.FC<{ score: number }> = ({ score }) => {
+  return (
+    <Progress
+      style={{
+        fontSize: '6px',
+        textAlign: 'center',
+      }}
+      type="circle"
+      trailColor={'white'}
+      percent={score === 0 ? 1 : score * 20}
+      strokeColor={score * 20 > 60 ? '#30a46c' : '#e5484d'}
+      format={() => `${score}`}
+      size={[28, 6]}
+    />
+  );
+};
+
+const DangerLogo = styled.div`
+  width: 28px;
+  height: 16px;
+  background: #ffeef1;
+  border-radius: 7px;
+
+  margin-top: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 8px;
+    height: 9px;
+  }
+`;
+
 const nodes: ProFlowNode[] = [
   {
     id: 'a1',
@@ -22,25 +60,60 @@ const nodes: ProFlowNode[] = [
     },
   },
   {
-    id: 'a2',
-    select: NodeSelect.DANGER,
+    id: 'b1',
+    select: NodeSelect.SUB_SELECT,
     data: {
-      title: 'XXX_API',
+      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
       describe: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'left',
+        value: (
+          <DangerLogo>
+            <img
+              src={
+                'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*wkEJRbSowekAAAAAAAAAAAAADvuvAQ/original'
+              }
+              alt=""
+            />
+          </DangerLogo>
+        ),
+      },
     },
   },
   {
-    id: 'b1',
-    select: NodeSelect.DANGER,
+    id: 'b2',
+    select: NodeSelect.SUB_DANGER,
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'right',
+        value: <ApiScore score={4} />,
+      },
+    },
+  },
+  {
+    id: 'b3',
+    select: NodeSelect.SUB_WARNING,
+    data: {
+      title: 'XXX_API_b3',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b4',
+    select: NodeSelect.DEFAULT,
     data: {
-      title: 'XXX_API',
+      title: 'XXX_API_b4',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
       describe: 'XXX_XXX_XXX_API',
     },
   },
   {
-    id: 'a3',
+    id: 'c1',
     select: NodeSelect.WARNING,
     data: {
       title: 'XXXX产品',
@@ -49,9 +122,9 @@ const nodes: ProFlowNode[] = [
     },
   },
   {
-    id: 'a4',
+    id: 'd1',
     group: true,
-    select: NodeSelect.WARNING,
+    select: NodeSelect.SUB_SELECT,
     label: '456',
     data: [
       {
@@ -123,28 +196,68 @@ const nodes: ProFlowNode[] = [
 
 const edges = [
   {
-    id: 'a1-a2',
+    id: 'a1-b1',
     source: 'a1',
-    select: NodeSelect.WARNING,
-    target: 'a2',
+    select: NodeSelect.SUB_WARNING,
+    target: 'b1',
+    type: EdgeType.default,
   },
   {
-    id: 'a1-b1',
+    id: 'a1-b2',
+    source: 'a1',
+    select: NodeSelect.SUB_WARNING,
+    target: 'b2',
+    type: EdgeType.default,
+  },
+  {
+    id: 'a1-b3',
+    source: 'a1',
+    select: NodeSelect.SUB_DANGER,
+    target: 'b3',
+    type: EdgeType.default,
+  },
+  {
+    id: 'a1-b4',
     source: 'a1',
+    select: NodeSelect.SUB_SELECT,
+    target: 'b4',
+    type: EdgeType.default,
+  },
+
+  {
+    id: 'b2-c1',
+    source: 'b2',
     select: NodeSelect.WARNING,
-    target: 'b1',
+    target: 'c1',
+    type: EdgeType.default,
+  },
+  {
+    id: 'b3-c1',
+    source: 'b3',
+    select: NodeSelect.WARNING,
+    target: 'c1',
+    type: EdgeType.default,
+  },
+  {
+    id: 'b1-c1',
+    source: 'b1',
+    select: NodeSelect.WARNING,
+    target: 'c1',
+    type: EdgeType.default,
   },
   {
-    id: 'a2-a3',
-    source: 'a2',
+    id: 'b4-c1',
+    source: 'b4',
     select: NodeSelect.WARNING,
-    target: 'a3',
+    target: 'c1',
+    type: EdgeType.default,
   },
   {
-    id: 'a3-a4',
-    source: 'a3',
+    id: 'c1-d1',
+    source: 'c1',
     select: NodeSelect.WARNING,
-    target: 'a4',
+    target: 'd1',
+    type: EdgeType.default,
   },
 ];