Commit 1d7b6335 authored by 吴永生#A02208's avatar 吴永生#A02208

feat: 点击样式修改

parent 4722964b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:29:46 * @Date: 2022-07-12 11:29:46
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 16:29:39 * @LastEditTime: 2022-07-12 21:06:48
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx * @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -37,7 +37,6 @@ const FlowNode = (props: any) => { ...@@ -37,7 +37,6 @@ const FlowNode = (props: any) => {
selectedStatus, selectedStatus,
info: { title, isCheck, executionStatus }, info: { title, isCheck, executionStatus },
} = data; } = data;
console.log(selectedStatus, "selectedStatus");
return ( return (
<div <div
className={classNames({ className={classNames({
......
...@@ -6,6 +6,7 @@ import ReactFlow, { ...@@ -6,6 +6,7 @@ import ReactFlow, {
ReactFlowProps, ReactFlowProps,
Node, Node,
Connection, Connection,
Edge,
} from "react-flow-renderer"; } from "react-flow-renderer";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash"; import _ from "lodash";
...@@ -62,7 +63,7 @@ const Flow = (props: IProps) => { ...@@ -62,7 +63,7 @@ const Flow = (props: IProps) => {
const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>(""); const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>("");
const Message = useMessage(); const Message = useMessage();
/** 删除批节点 */ /** 删除批或者线节点 */
const deleteSelectBatchNode = useCallback( const deleteSelectBatchNode = useCallback(
(e: any) => { (e: any) => {
if (e.keyCode === 8) { if (e.keyCode === 8) {
...@@ -255,6 +256,7 @@ const Flow = (props: IProps) => { ...@@ -255,6 +256,7 @@ const Flow = (props: IProps) => {
? setSelectedBatchNodeId(id) ? setSelectedBatchNodeId(id)
: setInSideBatchNodeId(id); : setInSideBatchNodeId(id);
onBatchClick && onBatchClick(id); onBatchClick && onBatchClick(id);
setInSideFlowNodeId("");
document.getElementById(`point${id}`)?.scrollIntoView(true); document.getElementById(`point${id}`)?.scrollIntoView(true);
}, },
[onBatchClick, setSelectedBatchNodeId] [onBatchClick, setSelectedBatchNodeId]
...@@ -264,11 +266,12 @@ const Flow = (props: IProps) => { ...@@ -264,11 +266,12 @@ const Flow = (props: IProps) => {
const onNodeClick = (e: any, node: Node) => { const onNodeClick = (e: any, node: Node) => {
tasks?.forEach((item) => { tasks?.forEach((item) => {
if (item.id === node.id) { if (item.id === node.id) {
if (item.parentNode) { if (item.type === "BATCH") {
setInSideFlowNodeId(node.id);
setNodeIdFun(item.parentNode);
} else {
setNodeIdFun(node.id); setNodeIdFun(node.id);
} else {
setInSideFlowNodeId(node.id);
setInSideBatchNodeId("");
setSelectedBatchNodeId && setSelectedBatchNodeId("");
} }
} }
}); });
...@@ -371,7 +374,7 @@ const Flow = (props: IProps) => { ...@@ -371,7 +374,7 @@ const Flow = (props: IProps) => {
if (every.name === connection.targetHandle) { if (every.name === connection.targetHandle) {
inputClassType = every.classType; inputClassType = every.classType;
} }
if (every.name === connection.source) { if (every.name === connection.sourceHandle) {
outClassType = every.classType; outClassType = every.classType;
} }
}); });
...@@ -433,6 +436,11 @@ const Flow = (props: IProps) => { ...@@ -433,6 +436,11 @@ const Flow = (props: IProps) => {
[Message, connectCheck, getClassType, setTasks, tasksDeleteLine] [Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
); );
/** 点击连线 */
const onEdgeClick = useCallback((e: any, val: Edge) => {
console.log(val, "1111");
}, []);
return ( return (
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
...@@ -442,6 +450,7 @@ const Flow = (props: IProps) => { ...@@ -442,6 +450,7 @@ const Flow = (props: IProps) => {
onEdgesChange={onEdgesChange} onEdgesChange={onEdgesChange}
onNodeDragStop={onNodeDragStop} onNodeDragStop={onNodeDragStop}
onConnect={onConnect} onConnect={onConnect}
onEdgeClick={onEdgeClick}
// proOptions={{ hideAttribution: true, account: "" }} // proOptions={{ hideAttribution: true, account: "" }}
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
onPaneClick={handlePaneClick} onPaneClick={handlePaneClick}
......
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