Commit 20be3215 authored by wuyongsheng's avatar wuyongsheng

feat: node节点连接线样式修改

parent d368c9c7
...@@ -110,16 +110,19 @@ const theme = createTheme({ ...@@ -110,16 +110,19 @@ const theme = createTheme({
"& p": { fontSize: "12px" }, "& p": { fontSize: "12px" },
height: "28px", height: "28px",
padding: "0 12px", padding: "0 12px",
minWidth: "60px",
}, },
sizeMedium: { sizeMedium: {
"& p": { fontSize: "14px" }, "& p": { fontSize: "14px" },
height: "32px", height: "32px",
padding: "0 16px", padding: "0 16px",
minWidth: "68px",
}, },
sizeLarge: { sizeLarge: {
"& p": { fontSize: "16px" }, "& p": { fontSize: "16px" },
height: "36px", height: "36px",
padding: "0 16px", padding: "0 16px",
minWidth: "80px",
}, },
}, },
}, },
......
...@@ -11,7 +11,7 @@ import ReactFlow, { ...@@ -11,7 +11,7 @@ import ReactFlow, {
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { uuid } from "@/utils/util"; import { uuid } from "@/utils/util";
import { IParameter, ITask } from "../../ProjectSubmitWork/interface"; import { IParameter, ITask } from "../../ProjectSubmitWork/interface";
import { ILine } from "./interface"; import { ILine } from "./interface";
import BatchNode from "./components/BatchNode"; import BatchNode from "./components/BatchNode";
import FlowNode from "./components/FlowNode"; import FlowNode from "./components/FlowNode";
...@@ -61,7 +61,7 @@ const Flow = (props: IProps) => { ...@@ -61,7 +61,7 @@ const Flow = (props: IProps) => {
showControls = true, showControls = true,
...other ...other
} = props; } = props;
/** 自定义的节点类型 */ /** 自定义的节点类型 */
const nodeTypes = useMemo(() => { const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode }; return { batchNode: BatchNode, flowNode: FlowNode };
...@@ -311,16 +311,18 @@ const Flow = (props: IProps) => { ...@@ -311,16 +311,18 @@ const Flow = (props: IProps) => {
/** tasks 数据 */ /** tasks 数据 */
tasks: tasks, tasks: tasks,
} }
: { selectedStatus: externalSelectedNodeId : {
? externalSelectedNodeId.includes(item.id) selectedStatus: externalSelectedNodeId
: inSideFlowNodeId === item.id,}), ? externalSelectedNodeId.includes(item.id)
: inSideFlowNodeId === item.id,
}),
/** 输入输出圆点状态 */ /** 输入输出圆点状态 */
// dotStatus: nodesInputAndOutputStatus(item.id), // dotStatus: nodesInputAndOutputStatus(item.id),
/** 样式 */ /** 样式 */
style: { style: {
...getBatchStyle(item), ...getBatchStyle(item),
marginTop: '-44px', marginTop: "-44px",
padding: "12px 20px", padding: "12px 20px",
}, },
}, },
...@@ -379,11 +381,11 @@ const Flow = (props: IProps) => { ...@@ -379,11 +381,11 @@ const Flow = (props: IProps) => {
style: { stroke: "#1370FF", strokeWidth: 2 }, style: { stroke: "#1370FF", strokeWidth: 2 },
animated: true, animated: true,
} }
: {}), : { stroke: "#D1D6DE" }),
/** 点击batch节点选中 */ /** 点击batch节点选中 */
...(item?.batchId === newSelectId ...(item?.batchId === newSelectId
? { style: { stroke: "#1370FF" }, animated: true } ? { style: { stroke: "#1370FF" }, animated: true }
: {}), : { stroke: "#D1D6DE" }),
labelStyle: { fill: "#8A9099" }, labelStyle: { fill: "#8A9099" },
labelBgStyle: { fill: "#F7F8FA " }, labelBgStyle: { fill: "#F7F8FA " },
label: item.label ? `(${item.label})` : "", label: item.label ? `(${item.label})` : "",
...@@ -641,7 +643,7 @@ const Flow = (props: IProps) => { ...@@ -641,7 +643,7 @@ const Flow = (props: IProps) => {
// const onNodesChange = (val: any)=>{ // const onNodesChange = (val: any)=>{
// // 自定义change事件 不允许react flow组件本身删除事件 // // 自定义change事件 不允许react flow组件本身删除事件
// // return // // return
// } // }
// const onEdgesChange = (val: any) =>{ // const onEdgesChange = (val: any) =>{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment