🐛 fix: 节点阴影部分样式 (#25)

* 🐛 fix: readme * 🐛 fix: readme * ✨ feat: 新增group节点width,height * 🐛 fix: 修复renderNode的width * ✨ feat: 新增点式背景,节点阴影 * ✨ fix: 节点阴影部分样式 --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Oct 26, 2023 · e3fe8a8 · e3fe8a8
1 parent d9119f3
commit e3fe8a8
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 17 deletions.
diff --git a/src/BloodGroupNode/styles.ts b/src/BloodGroupNode/styles.ts
@@ -13,7 +13,7 @@ export const useStyles = createStyles(({ css }) => ({
     background-color: #fafafa;
     position: absolute;
     z-index: 10;
-    border-radius: 12px;
+    border-radius: 8px;
     border: 1px solid #d9d9d9;
   `,
   btnWrap: css`
@@ -56,9 +56,10 @@ export const useStyles = createStyles(({ css }) => ({
     box-sizing: border-box;
     padding: 16px 12px;
     background: #fff;
-    border: 1px solid #f4f4f4;
     margin-bottom: 24px;
-    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    box-shadow: 0 4px 6px -2px rgba(25, 15, 15, 0.05), 0 0 1px 0 rgba(0, 0, 0, 0.08);
 
     &:last-child {
       opacity: 0.5;
@@ -102,10 +103,20 @@ export const useStyles = createStyles(({ css }) => ({
     margin-top: 11px;
   `,
   nodeSelected: css`
+    background-color: #ecf3fe;
     box-shadow: 0 0 0 3px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+
+    .buttonWrap {
+      background-color: #ecf3fe;
+    }
   `,
   nodeSubSelected: css`
     box-shadow: 0 0 0 1px #1677ff, 0 1px 4px 1px rgba(0, 0, 0, 8%) !important;
+    background-color: #ecf3fe;
+
+    .buttonWrap {
+      background-color: #ecf3fe;
+    }
   `,
   nodeDanger: css`
     box-shadow: 0 0 0 3px #f7636e, 0 1px 4px 1px rgba(0, 0, 0, 8%);

diff --git a/src/BloodNode/styles.ts b/src/BloodNode/styles.ts
@@ -9,12 +9,14 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => ({
       display: flex;
       z-index: 10 !important;
       position: absolute;
-      border-radius: 12px;
+      border-radius: 8px;
       padding: 16px 12px;
       box-sizing: border-box;
       /* border: 3px solid white; */
       flex: 1;
-      background-color: white;
+      background: #ffffff;
+      border: 1px solid rgba(255, 255, 255, 0.04);
+      box-shadow: 0 4px 6px -2px rgba(25, 15, 15, 0.05), 0 0 1px 0 rgba(0, 0, 0, 0.08);
 
       .img {
         width: 48px;

diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -1,4 +1,4 @@
-import { NodeSelect, ProFlowEdge, ProFlowNode } from '@/index';
+import { EdgeType, NodeSelect, ProFlowEdge, ProFlowNode } from '@/index';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useState } from 'react';
@@ -186,47 +186,56 @@ const edges: ProFlowEdge[] = [
     id: 'a1-b1',
     source: 'a1',
     target: 'b1',
+    type: EdgeType.radius,
   },
   {
     id: 'a1-b2',
     source: 'a1',
     target: 'b2',
+    type: EdgeType.radius,
   },
   {
     id: 'a1-b3',
     source: 'a1',
     target: 'b3',
+    type: EdgeType.radius,
   },
   {
     id: 'a1-b4',
     source: 'a1',
     target: 'b4',
+    type: EdgeType.radius,
   },
 
   {
     id: 'b2-c1',
     source: 'b2',
     target: 'c1',
+    type: EdgeType.radius,
   },
   {
     id: 'b3-c1',
     source: 'b3',
     target: 'c1',
+    type: EdgeType.radius,
   },
   {
     id: 'b1-c1',
     source: 'b1',
     target: 'c1',
+    type: EdgeType.radius,
   },
   {
     id: 'b4-c1',
     source: 'b4',
     target: 'c1',
+    type: EdgeType.radius,
   },
   {
     id: 'c1-d1',
     source: 'c1',
     target: 'd1',
+    type: EdgeType.radius,
   },
 ];
 
@@ -236,6 +245,12 @@ const ProFlowDemo = () => {
   const { styles } = useStyles();
 
   const handleHighlight = (node: ProFlowNode) => {
+    _nodes.forEach((_node) => {
+      if (_node.id === node.id) {
+        _node.select = NodeSelect.SELECT;
+      }
+    });
+    setNodes(_nodes);
     setEdges(
       edges.map((edge) => {
         if (edge.source === node.id || edge.target === node.id) {

diff --git a/src/ProFlow/helper.tsx b/src/ProFlow/helper.tsx
@@ -1,6 +1,6 @@
 import BloodNodeGroup from '@/BloodGroupNode';
 import BloodNode from '@/BloodNode';
-import { ProFlowEdge, ProFlowNode, ProFlowNodeData } from '@/constants';
+import { EdgeType, ProFlowEdge, ProFlowNode, ProFlowNodeData } from '@/constants';
 import Dagre from '@dagrejs/dagre';
 import { cx } from 'antd-style';
 import { Edge, Node, Position } from 'reactflow';
@@ -143,13 +143,13 @@ function getEdgeClsFromNodeSelect(select: NodeSelect) {
 
 export function getRenderEdges(edges: ProFlowEdge[]) {
   return edges.map((edge) => {
-    const { source, target, select = NodeSelect.DEFAULT } = edge;
+    const { source, target, select = NodeSelect.DEFAULT, type } = edge;
 
     return {
       id: `${source}-${target}`,
       source,
       target,
-      type: 'smoothstep',
+      type: type === EdgeType.default ? 'smoothstep' : 'radiusEdge',
       className: getEdgeClsFromNodeSelect(select),
     };
   });

diff --git a/src/ProFlow/index.tsx b/src/ProFlow/index.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import ReactFlow, { Background, BackgroundVariant, Edge, Node, useViewport } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { ProFlowController, ProFlowProps } from '../index';
+import { ProFlowController, ProFlowProps, RadiusEdge } from '../index';
 import { convertMappingFrom, getRenderData } from './helper';
 import { FlowViewContext } from './provider/provider';
 import { useStyles } from './styles';
@@ -87,10 +87,9 @@ const FlowView: React.FC<Partial<ProFlowProps>> = (props) => {
       onNodeClick={handleNodeClick}
       nodes={renderData.nodes}
       edges={renderData.edges}
-      // edgeTypes={{
-      //   // radiusEdge: RadiusEdge,
-      //   // defaultEdge: DefaultEdge,
-      // }}
+      edgeTypes={{
+        radiusEdge: RadiusEdge,
+      }}
       panOnScroll
       fitView
       minZoom={MIN_ZOOM}
@@ -105,7 +104,6 @@ const FlowView: React.FC<Partial<ProFlowProps>> = (props) => {
         color="#bac3d4"
         variant={BackgroundVariant.Dots}
       />
-      {/* <Background color="#aaa" gap={16} /> */}
       {children}
     </ReactFlow>
   );

diff --git a/src/ProFlow/styles.tsx b/src/ProFlow/styles.tsx
@@ -24,8 +24,7 @@ export const useStyles = createStyles(({ css }) => ({
       width: 320px;
       height: 83px;
       border: none;
-      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 8%);
-      border-radius: 12px;
+      border-radius: 8px;
       cursor: pointer;
       z-index: 1;
     }