✨ feat: New capabilities for node and edge (#16)

* 🐛 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 --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Oct 19, 2023 · cd7553b · cd7553b
1 parent fcc3625
commit cd7553b
Show file tree

Hide file tree

Showing 20 changed files with 316 additions and 126 deletions.
diff --git a/docs/useDocs/baseInrro.md b/docs/useDocs/baseInrro.md
@@ -0,0 +1,11 @@
+---
+nav: 使用文档
+group:
+  title: 基础介绍
+  order: 1
+title: 根本性概念
+order: 1
+description:
+---
+
+dsfsaf
diff --git a/docs/useDocs/drawer.md b/docs/useDocs/drawer.md
@@ -0,0 +1,10 @@
+---
+nav: 使用文档
+group:
+  title: 进阶使用
+  order: 3
+title: 侧边栏
+description:
+---
+
+dsfsaf
diff --git a/docs/useDocs/editorview.md b/docs/useDocs/editorview.md
@@ -0,0 +1,11 @@
+---
+nav: 使用文档
+group:
+  title: 快速上手
+  order: 1
+title: 画布编辑
+order: 3
+description:
+---
+
+### 123123
diff --git a/docs/useDocs/flowview.md b/docs/useDocs/flowview.md
@@ -0,0 +1,12 @@
+---
+nav: 使用文档
+group:
+  title: 快速上手
+  order: 1
+title: 画布预览
+order: 2
+description:
+---
+
+s
+ssdadaf
diff --git a/docs/useDocs/intro.md b/docs/useDocs/intro.md
@@ -0,0 +1,10 @@
+---
+nav: 使用文档
+group:
+  title: 基础介绍
+  order: 1
+title: 为什么选择 ReactFlow ？
+description:
+---
+
+dsfsaf
diff --git a/docs/useDocs/layoud.md b/docs/useDocs/layoud.md
@@ -0,0 +1,10 @@
+---
+nav: 使用文档
+group:
+  title: 进阶使用
+  order: 3
+title: 布局
+description: 自动布局 、 手动布局
+---
+
+dsfsaf
diff --git a/docs/useDocs/quickDoc.md b/docs/useDocs/quickDoc.md
@@ -0,0 +1,11 @@
+---
+nav: 使用文档
+group:
+  title: 快速上手
+  order: 2
+title: 安装使用
+order: 1
+description:
+---
+
+asd aws
diff --git a/docs/useDocs/zoom.md b/docs/useDocs/zoom.md
@@ -0,0 +1,10 @@
+---
+nav: 使用文档
+group:
+  title: 进阶使用
+  order: 3
+title: 缩放
+description:
+---
+
+dsfsaf
diff --git a/package.json b/package.json
@@ -110,6 +110,7 @@
     "react-dom": "^18",
     "semantic-release": "^20",
     "semantic-release-config-gitmoji": "^1",
+    "styled-components": "^6.1.0",
     "stylelint": "^14",
     "typescript": "^5",
     "vitest": "latest"

diff --git a/src/BasicNode/index.md b/src/BasicNode/index.md
@@ -1,5 +1,7 @@
 ---
-group: 节点
+group:
+  title: 节点
+  order: 1
 title: BasicNode 基础节点
 description: 画布中的基础节点容器
 ---

diff --git a/src/BloodGroupNode/index.tsx b/src/BloodGroupNode/index.tsx
@@ -1,9 +1,19 @@
-import { getClsFromSelectType } from '@/BloodNode';
-import { NodeMapItem, NodeSelect, ProFlowNode, ProFlowNodeData } from '@/ProFlow/constants';
+import { ArtboardTitle, getClsFromSelectType } from '@/BloodNode';
+import { NodeMapItem, NodeSelect } from '@/ProFlow/constants';
+import { ProFlowNode, ProFlowNodeData } from '@/constants';
 import { cx } from 'antd-style';
 import React from 'react';
 import { useStyles } from './styles';
 
+export interface BloodNodeGroupProps {
+  id?: string;
+  zoom?: number;
+  label?: string;
+  select?: NodeSelect;
+  data: ProFlowNode[];
+  group: boolean;
+}
+
 const convertMappingNode = (nodeList: ProFlowNode[]): NodeMapItem[] => {
   return nodeList.map((node) => {
     return node;
@@ -25,7 +35,13 @@ const GroupItem = (node: NodeMapItem) => {
   );
 };
 
-const BloodNodeGroup: React.FC<ProFlowNode> = ({ group, data, select = NodeSelect.SELECT }) => {
+const BloodNodeGroup: React.FC<BloodNodeGroupProps> = ({
+  group,
+  data,
+  select = NodeSelect.SELECT,
+  zoom = 1,
+  label,
+}) => {
   const { styles } = useStyles();
 
   if (!group) {
@@ -39,27 +55,34 @@ const BloodNodeGroup: React.FC<ProFlowNode> = ({ group, data, select = NodeSelec
   const nodeList = convertMappingNode(data as ProFlowNode[]);
 
   return (
-    <div className={cx(styles.groupWrap, styles[getClsFromSelectType(select)])}>
-      {nodeList!.map((_node, index) => {
-        const data = _node.data as ProFlowNodeData;
-        _node.position = {
-          x: 0,
-          y: 100 * index,
-        };
-        _node.title = data.title;
-        _node.logo = data.logo;
-        _node.des = data.describe;
-        return GroupItem(_node);
-      })}
-      <div className={styles.btnWrap}></div>
-      <div className={styles.btn}>
-        查看更多
-        <img
-          src="https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*W5bAS6ZOqOwAAAAAAAAAAAAADvuvAQ/original"
-          alt=""
-        />
+    <>
+      {label && (
+        <ArtboardTitle zoom={zoom}>
+          {zoom <= 0.1 ? `${String(label).substring(0, 3)}...` : label}
+        </ArtboardTitle>
+      )}
+      <div className={cx(styles.groupWrap, styles[getClsFromSelectType(select)])}>
+        {nodeList!.map((_node, index) => {
+          const data = _node.data as ProFlowNodeData;
+          _node.position = {
+            x: 0,
+            y: 100 * index,
+          };
+          _node.title = data.title;
+          _node.logo = data.logo;
+          _node.des = data.describe;
+          return GroupItem(_node);
+        })}
+        <div className={styles.btnWrap}></div>
+        <div className={styles.btn}>
+          查看更多
+          <img
+            src="https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*W5bAS6ZOqOwAAAAAAAAAAAAADvuvAQ/original"
+            alt=""
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/BloodNode/index.tsx b/src/BloodNode/index.tsx
@@ -1,5 +1,6 @@
 import { NODE_DANGER, NODE_SELECT, NODE_WARNING, NodeSelect } from '@/ProFlow/constants';
 import React from 'react';
+import styled from 'styled-components';
 import { useStyles } from './styles';
 
 interface BloodNodeProps {
@@ -11,8 +12,27 @@ interface BloodNodeProps {
   icon?: string;
   className?: string;
   selectType?: NodeSelect;
+  zoom?: number;
+  label?: string;
 }
 
+const zoomNum = (num: number, zoom: number, limitMax?: boolean) => {
+  if (limitMax) return zoom > 1 ? num : num / zoom;
+
+  return num / zoom;
+};
+
+export const ArtboardTitle = styled.div<{ zoom: number }>`
+  position: absolute;
+  z-index: 10;
+  top: -${({ zoom }) => zoomNum(24, zoom, true)}px;
+  padding: ${({ zoom }) => `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`};
+  color: rgba(0, 0, 0, 0.45);
+  border-radius: 4px;
+  font-size: ${({ zoom }) => `${14 / zoom}px`};
+  white-space: nowrap;
+`;
+
 export function getClsFromSelectType(select: NodeSelect) {
   switch (select) {
     case NodeSelect.SELECT:
@@ -32,21 +52,32 @@ const BloodNode: React.FC<Partial<BloodNodeProps>> = ({
   description,
   className,
   selectType = NodeSelect.SELECT,
+  zoom = 1,
+  label,
 }) => {
   const { styles, cx } = useStyles();
 
+  console.log(zoom);
+
   return (
-    <div className={cx(styles.nodeWrap, styles[getClsFromSelectType(selectType)], className)}>
-      <img className={'img'} src={logo} alt="" />
-      <div className={'content'}>
-        <div className={'title'}>
-          <span>{title}</span>
-          {/* {mainDanger && <DangerLogo />}
+    <>
+      {label && (
+        <ArtboardTitle zoom={zoom}>
+          {zoom <= 0.1 ? `${String(label).substring(0, 3)}...` : label}
+        </ArtboardTitle>
+      )}
+      <div className={cx(styles.nodeWrap, styles[getClsFromSelectType(selectType)], className)}>
+        <img className={'img'} src={logo} alt="" />
+        <div className={'content'}>
+          <div className={'title'}>
+            <span>{title}</span>
+            {/* {mainDanger && <DangerLogo />}
         {qualityScore && <ApiScore score={parseFloat(qualityScore)} />} */}
+          </div>
+          <div className={'des'}>{description}</div>
         </div>
-        <div className={'des'}>{description}</div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/CanvasLoading/index.md b/src/CanvasLoading/index.md
@@ -1,5 +1,7 @@
 ---
-group: 基础组件
+group:
+  title: 辅助
+  order: 2
 title: CanvasLoading 画布加载状态
 description: 画布加载状态
 ---

diff --git a/src/NodeField/index.md b/src/NodeField/index.md
@@ -1,5 +1,6 @@
 ---
-group: 节点
+group:
+  title: 节点
 title: NodeField 节点字段
 description: 展示节点中的单个字段的组件
 ---

diff --git a/src/ProFlow/constants.tsx b/src/ProFlow/constants.tsx
@@ -1,3 +1,4 @@
+import { ProFlowNode, ProFlowNodeData } from '@/constants';
 import { Node } from 'reactflow';
 
 export enum NodeSelect {
@@ -6,24 +7,6 @@ export enum NodeSelect {
   WARNING = 'WARNING',
   DEFAULT = 'DEFAULT',
 }
-export interface ProFlowNode {
-  id: string;
-  group?: boolean;
-  select?: NodeSelect;
-  data: ProFlowNodeData | ProFlowNode[];
-}
-
-export interface ProFlowNodeData {
-  title: string;
-  describe: string;
-  logo: string;
-}
-
-export interface ProFLowEdge {
-  id: string;
-  source: string;
-  target: string;
-}
 
 export interface InitialNode extends Node {
   width?: number;
@@ -53,6 +36,8 @@ export interface NodeMapItem {
   logo?: string;
   data: ProFlowNodeData | ProFlowNode[];
   nodeType?: string;
+  zoom?: number;
+  label?: string;
   position?: {
     x: number;
     y: number;

diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -1,7 +1,7 @@
+import { NodeSelect, ProFlowNode } from '@/index';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import ProFlow from '..';
-import { NodeSelect, ProFlowNode } from '../constants';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -14,6 +14,7 @@ const nodes: ProFlowNode[] = [
   {
     id: 'a1',
     select: NodeSelect.SELECT,
+    label: '123',
     data: {
       title: 'XXX数据源',
       describe: 'cksadjfnf',
@@ -51,6 +52,7 @@ const nodes: ProFlowNode[] = [
     id: 'a4',
     group: true,
     select: NodeSelect.WARNING,
+    label: '456',
     data: [
       {
         id: 'a5',
@@ -123,21 +125,25 @@ const edges = [
   {
     id: 'a1-a2',
     source: 'a1',
+    select: NodeSelect.WARNING,
     target: 'a2',
   },
   {
     id: 'a1-b1',
     source: 'a1',
+    select: NodeSelect.WARNING,
     target: 'b1',
   },
   {
     id: 'a2-a3',
     source: 'a2',
+    select: NodeSelect.WARNING,
     target: 'a3',
   },
   {
     id: 'a3-a4',
     source: 'a3',
+    select: NodeSelect.WARNING,
     target: 'a4',
   },
 ];