84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import { Edge, Handle, Node, NodeProps, Position } from "@xyflow/react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
HANDLE_STYLE_CONNECTED,
|
|
HANDLE_STYLE_DISCONNECTED,
|
|
} from "./defaultHandleStyle";
|
|
import { useState } from "react";
|
|
|
|
interface StartNodeProps extends Node {
|
|
edges?: Edge[];
|
|
}
|
|
|
|
export default function StartNode({
|
|
id,
|
|
edges = [],
|
|
}: NodeProps<StartNodeProps> & { edges?: Edge[] }) {
|
|
const { t } = useTranslation();
|
|
const isHandleConnected = edges.some(
|
|
(e: Edge) => e.source === id && e.sourceHandle === "1"
|
|
);
|
|
return (
|
|
<div
|
|
style={{
|
|
border: "0px solid",
|
|
borderRadius: 8,
|
|
backgroundColor: "white",
|
|
width: "248px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
paddingLeft: "12px",
|
|
height: "40px",
|
|
fontWeight: "600px",
|
|
fontSize: "16px",
|
|
gap: "12px",
|
|
backgroundColor: "#D4E0BD",
|
|
borderRadius: "8px 8px 0 0",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: "24px",
|
|
width: "24px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<img
|
|
style={{ height: "16px", width: "18px" }}
|
|
src="/icons/node/home.svg"
|
|
alt="start logo"
|
|
/>
|
|
</div>
|
|
{t("startNode")}
|
|
</div>
|
|
<div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "12px",
|
|
fontSize: "14px",
|
|
}}
|
|
>
|
|
{t("startNodeDescription")}
|
|
</div>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
id="1"
|
|
style={
|
|
isHandleConnected
|
|
? { ...HANDLE_STYLE_CONNECTED }
|
|
: { ...HANDLE_STYLE_DISCONNECTED }
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|