Vorkout/connect
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nodes): add start node and create new node function

Browse Source
This commit is contained in:
Vladislav Syrochkin
2025-08-06 12:19:55 +05:00
parent 65ed6b9561
commit ee4051f523
7 changed files with 285 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/components/nodes/IfElseNode.tsx
View File

@@ -1,13 +1,31 @@
import { Handle, NodeProps, Position, Node } from "@xyflow/react";
import DEFAULT_HANDLE_STYLE from "./defaultHandleStyle";
import { Handle, NodeProps, Position, Node, Edge } from "@xyflow/react";
import {
HANDLE_STYLE_CONNECTED,
HANDLE_STYLE_CONNECTED_V,
HANDLE_STYLE_DISCONNECTED,
HANDLE_STYLE_DISCONNECTED_V,
} from "./defaultHandleStyle";
import { useTranslation } from "react-i18next";
import { useState } from "react";
interface IfElseNodeProps extends Node {
condition: string;
edges?: Edge[];
}
export default function IfElseNode({ id, data }: NodeProps<IfElseNodeProps>) {
export default function IfElseNode({
id,
data,
edges = [],
}: NodeProps<IfElseNodeProps> & { edges?: Edge[] }) {
const { t } = useTranslation();
const isHandle1Connected = edges.some(
(e: Edge) => e.source === id && e.sourceHandle === "1"
);
const isHandle2Connected = edges.some(
(e: Edge) => e.source === id && e.sourceHandle === "2"
);
return (
<>
<div
@@ -16,7 +34,8 @@ export default function IfElseNode({ id, data }: NodeProps<IfElseNodeProps>) {
borderRadius: 8,
backgroundColor: "white",
width: "248px",
height: "144px",
minHeight: "144px",
position: "relative",
}}
>
<div
@@ -43,12 +62,26 @@ export default function IfElseNode({ id, data }: NodeProps<IfElseNodeProps>) {
style={{
display: "flex",
alignItems: "center",
paddingLeft: "12px",
padding: "12px",
fontSize: "14px",
height: "48px",
minHeight: "48px",
position: "relative",
}}
>
{t("conditionIf", { condition: data.condition })}
<Handle
type="source"
position={Position.Right}
id="1"
style={{
...(isHandle1Connected
? { ...HANDLE_STYLE_CONNECTED_V }
: { ...HANDLE_STYLE_DISCONNECTED_V }),
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
}}
/>
</div>
<div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
@@ -64,18 +97,21 @@ export default function IfElseNode({ id, data }: NodeProps<IfElseNodeProps>) {
{t("conditionElse")}
</div>
<Handle type="target" position={Position.Top} id="input" />
<Handle
type="source"
position={Position.Right}
id="1"
style={{ ...DEFAULT_HANDLE_STYLE }}
type="target"
position={Position.Top}
id="input"
style={{ ...HANDLE_STYLE_CONNECTED }}
/>
<Handle
type="source"
position={Position.Bottom}
id="2"
style={{ ...DEFAULT_HANDLE_STYLE }}
style={
isHandle2Connected
? { ...HANDLE_STYLE_CONNECTED }
: { ...HANDLE_STYLE_DISCONNECTED }
}
/>
</div>
</>