From 2a0547279c78ed74d952943b57fe457a4af1bee0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 16 Feb 2023 14:06:11 -0300 Subject: [PATCH] List logic implemented at the nodes --- .../src/CustomNodes/BooleanNode/index.tsx | 8 +- .../src/CustomNodes/ChatInputNode/index.tsx | 6 +- .../src/CustomNodes/ChatOutputNode/index.tsx | 10 +- .../src/CustomNodes/GenericNode/index.tsx | 17 +- .../src/CustomNodes/InputNode/index.tsx | 4 +- .../contexts/connectionQuantityContext.tsx | 0 .../extraSidebarComponent/index.tsx | 1 - space_flow/src/pages/FlowPage/index.tsx | 2 +- space_flow/src/utils.ts | 582 ++++++++++-------- 9 files changed, 331 insertions(+), 299 deletions(-) delete mode 100644 space_flow/src/contexts/connectionQuantityContext.tsx diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx index 24126e5fe..75a76577a 100644 --- a/space_flow/src/CustomNodes/BooleanNode/index.tsx +++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx @@ -1,7 +1,7 @@ import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline"; import { Input } from "@mui/material"; import { Handle, Position } from "reactflow"; -import { nodeColors } from "../../utils"; +import { isValidConnection, nodeColors } from "../../utils"; import ToggleComponent from "../../components/toggleComponent"; import { useEffect, useState } from "react"; @@ -32,11 +32,7 @@ export default function BooleanNode({ data }) { type="target" position={Position.Right} id={data.name} - isValidConnection={({ sourceHandle, targetHandle }) => - targetHandle === sourceHandle || - data.types[targetHandle] === sourceHandle || - sourceHandle === "str" - } + isValidConnection={(connection) => isValidConnection(data,connection)} className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" style={{ borderLeftColor: nodeColors[data.type] }} > diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx index f607e19af..622efb826 100644 --- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx +++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx @@ -1,6 +1,6 @@ import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline"; import Input from "../../components/inputComponent"; -import { snakeToNormalCase } from "../../utils"; +import { isValidConnection, snakeToNormalCase } from "../../utils"; import { Handle, Position } from "reactflow"; import Tooltip from "../../components/TooltipComponent"; @@ -11,8 +11,8 @@ export default function ChatInputNode({ data }) { (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')} + id='str' + isValidConnection={(connection) => isValidConnection(data,connection)} className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none" > diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx index b284f27ea..cca059990 100644 --- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx +++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx @@ -1,7 +1,7 @@ import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline"; import { Handle, Position } from "reactflow"; import Input from "../../components/inputComponent"; -import { snakeToNormalCase } from "../../utils"; +import { isValidConnection, snakeToNormalCase } from "../../utils"; import Tooltip from "../../components/TooltipComponent"; export default function ChatOutputNode({ data }) { @@ -10,13 +10,9 @@ export default function ChatOutputNode({ data }) { - targetHandle === sourceHandle || - data.types[targetHandle] === sourceHandle || - sourceHandle === "str" - } + isValidConnection={(connection) => isValidConnection(data,connection)} position={Position.Left} - id="str" + id={"str|output|"+data.id} className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none" > diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx index 281e0b4e2..259ef1c82 100644 --- a/space_flow/src/CustomNodes/GenericNode/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/index.tsx @@ -6,8 +6,9 @@ import { import { Handle, Position } from "reactflow"; import Dropdown from "../../components/dropdownComponent"; import Input from "../../components/inputComponent"; -import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils"; +import { isValidConnection, nodeColors, nodeIcons, snakeToNormalCase } from "../../utils"; import Tooltip from "../../components/TooltipComponent"; +import { useEffect } from "react"; export default function GenericNode({ data }) { const Icon = nodeIcons[data.type]; @@ -36,12 +37,8 @@ export default function GenericNode({ data }) { - targetHandle === sourceHandle || - data.types[targetHandle] === sourceHandle || - sourceHandle === "str" - } + id={data.node.template[t].type + "|" + t + "|" + data.id} + isValidConnection={(connection) => isValidConnection(data,connection)} className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" style={{ borderLeftColor: (nodeColors[(data.types[data.node.template[t].type] ?? data.node.template[t].type)]) ?? "gray", @@ -58,11 +55,7 @@ export default function GenericNode({ data }) { type="target" position={Position.Right} id={data.name} - isValidConnection={({ sourceHandle, targetHandle }) => - targetHandle === sourceHandle || - data.types[targetHandle] === sourceHandle || - sourceHandle === "str" - } + isValidConnection={(connection) => isValidConnection(data,connection)} className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" style={{ borderLeftColor: nodeColors[data.type] }} > diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx index 8158cbd4c..f3e043811 100644 --- a/space_flow/src/CustomNodes/InputNode/index.tsx +++ b/space_flow/src/CustomNodes/InputNode/index.tsx @@ -1,6 +1,6 @@ import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline"; import Input from "../../components/inputComponent"; -import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils"; +import { isValidConnection, nodeColors, nodeIcons, snakeToNormalCase } from "../../utils"; import { Handle, Position } from "reactflow"; import { useEffect } from "react"; @@ -34,7 +34,7 @@ export default function InputNode({ data }) { type="target" position={Position.Right} id={data.name} - isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')} + isValidConnection={(connection) => isValidConnection(data,connection)} className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" style={{borderLeftColor: nodeColors[data.type]}} > diff --git a/space_flow/src/contexts/connectionQuantityContext.tsx b/space_flow/src/contexts/connectionQuantityContext.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index ac810b546..bd49574a4 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -71,7 +71,6 @@ export default function ExtraSidebar() { onDragStart(event, { type: 'elements', name: 'str', - types: types }) } > diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 95b44dffd..1300eb22a 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -74,7 +74,7 @@ export default function FlowPage() { id: newId, type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : (data.name === 'bool' ? 'booleanNode' : 'genericNode'))), position, - data: { ...data, input: '', enabled: false, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} }, + data: { ...data, id: newId, input: '', enabled: false, reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} }, }; setNodes((nds) => nds.concat(newNode)); }, diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts index 343913ca1..4977c4c55 100644 --- a/space_flow/src/utils.ts +++ b/space_flow/src/utils.ts @@ -1,57 +1,65 @@ -import { RocketLaunchIcon, LinkIcon, CpuChipIcon, LightBulbIcon, CommandLineIcon, WrenchScrewdriverIcon, ComputerDesktopIcon } from "@heroicons/react/24/outline"; +import { + RocketLaunchIcon, + LinkIcon, + CpuChipIcon, + LightBulbIcon, + CommandLineIcon, + WrenchScrewdriverIcon, + ComputerDesktopIcon, +} from "@heroicons/react/24/outline"; import { Edge, Node } from "reactflow"; export function classNames(...classes) { - return classes.filter(Boolean).join(" "); - } - - export const textColors = { - white: "text-white", - red: "text-red-700", - orange: "text-orange-700", - amber: "text-amber-700", - yellow: "text-yellow-700", - lime: "text-lime-700", - green: "text-green-700", - emerald: "text-emerald-700", - teal: "text-teal-700", - cyan: "text-cyan-700", - sky: "text-sky-700", - blue: "text-blue-700", - indigo: "text-indigo-700", - violet: "text-violet-700", - purple: "text-purple-700", - fuchsia: "text-fuchsia-700", - pink: "text-pink-700", - rose: "text-rose-700", - black: "text-black-700", - gray: "text-gray-700", - }; + return classes.filter(Boolean).join(" "); +} - export const borderLColors = { - white: "border-l-white", - red: "border-l-red-500", - orange: "border-l-orange-500", - amber: "border-l-amber-500", - yellow: "border-l-yellow-500", - lime: "border-l-lime-500", - green: "border-l-green-500", - emerald: "border-l-emerald-500", - teal: "border-l-teal-500", - cyan: "border-l-cyan-500", - sky: "border-l-sky-500", - blue: "border-l-blue-500", - indigo: "border-l-indigo-500", - violet: "border-l-violet-500", - purple: "border-l-purple-500", - fuchsia: "border-l-fuchsia-500", - pink: "border-l-pink-500", - rose: "border-l-rose-500", - black: "border-l-black-500", - gray: "border-l-gray-500", - }; +export const textColors = { + white: "text-white", + red: "text-red-700", + orange: "text-orange-700", + amber: "text-amber-700", + yellow: "text-yellow-700", + lime: "text-lime-700", + green: "text-green-700", + emerald: "text-emerald-700", + teal: "text-teal-700", + cyan: "text-cyan-700", + sky: "text-sky-700", + blue: "text-blue-700", + indigo: "text-indigo-700", + violet: "text-violet-700", + purple: "text-purple-700", + fuchsia: "text-fuchsia-700", + pink: "text-pink-700", + rose: "text-rose-700", + black: "text-black-700", + gray: "text-gray-700", +}; - /* export const nodeColors = { +export const borderLColors = { + white: "border-l-white", + red: "border-l-red-500", + orange: "border-l-orange-500", + amber: "border-l-amber-500", + yellow: "border-l-yellow-500", + lime: "border-l-lime-500", + green: "border-l-green-500", + emerald: "border-l-emerald-500", + teal: "border-l-teal-500", + cyan: "border-l-cyan-500", + sky: "border-l-sky-500", + blue: "border-l-blue-500", + indigo: "border-l-indigo-500", + violet: "border-l-violet-500", + purple: "border-l-purple-500", + fuchsia: "border-l-fuchsia-500", + pink: "border-l-pink-500", + rose: "border-l-rose-500", + black: "border-l-black-500", + gray: "border-l-gray-500", +}; + +/* export const nodeColors = { prompt: "#35ADAE", model: "#4266BE", chain: "#6344BE", @@ -60,7 +68,7 @@ export function classNames(...classes) { memory: "#FF3434", } */ - /* export const nodeColors = { +/* export const nodeColors = { prompt: "#36D635", model: "#4266BE", chain: "#903BBE", @@ -69,7 +77,7 @@ export function classNames(...classes) { memory: "#FFFF33", } */ - /* export const nodeColors = { +/* export const nodeColors = { prompt: "#36D635", model: "#35ADAE", chain: "#903BBE", @@ -78,7 +86,7 @@ export function classNames(...classes) { memory: "#FFDC35", } */ - /* export const nodeColors = { +/* export const nodeColors = { prompt: "#36D635", model: "#35ADAE", chain: "#903BBE", @@ -87,227 +95,267 @@ export function classNames(...classes) { memory: "#FF9135", } */ - export const nodeColors = { - prompts: "#7C7C7C", - llms: "#35ADAE", - chains: "#FFDC35", - agents: "#903BBE", - tools: "#FF3434", - memories: "#FF9135", - elements: "#6344BE" - } +export const nodeColors = { + prompts: "#7C7C7C", + llms: "#35ADAE", + chains: "#FFDC35", + agents: "#903BBE", + tools: "#FF3434", + memories: "#FF9135", + elements: "#6344BE", +}; - export const nodeNames = { - prompts: "Prompts", - llms: "LLMs", - chains: "Chains", - agents: "Agents", - tools: "Tools", - memories: "Memories", - elements: "Elements", - } +export const nodeNames = { + prompts: "Prompts", + llms: "LLMs", + chains: "Chains", + agents: "Agents", + tools: "Tools", + memories: "Memories", + elements: "Elements", +}; +export const nodeIcons = { + agents: RocketLaunchIcon, + chains: LinkIcon, + memories: CpuChipIcon, + llms: LightBulbIcon, + prompts: CommandLineIcon, + tools: WrenchScrewdriverIcon, + elements: ComputerDesktopIcon, +}; - export const nodeIcons = { - agents: RocketLaunchIcon, - chains: LinkIcon, - memories: CpuChipIcon, - llms: LightBulbIcon, - prompts: CommandLineIcon, - tools: WrenchScrewdriverIcon, - elements: ComputerDesktopIcon +export const bgColors = { + white: "bg-white", + red: "bg-red-100", + orange: "bg-orange-100", + amber: "bg-amber-100", + yellow: "bg-yellow-100", + lime: "bg-lime-100", + green: "bg-green-100", + emerald: "bg-emerald-100", + teal: "bg-teal-100", + cyan: "bg-cyan-100", + sky: "bg-sky-100", + blue: "bg-blue-100", + indigo: "bg-indigo-100", + violet: "bg-violet-100", + purple: "bg-purple-100", + fuchsia: "bg-fuchsia-100", + pink: "bg-pink-100", + rose: "bg-rose-100", + black: "bg-black-100", + gray: "bg-gray-100", +}; + +export const bgColorsHover = { + white: "hover:bg-white", + black: "hover:bg-black-50", + gray: "hover:bg-gray-50", + red: "hover:bg-red-50", + orange: "hover:bg-orange-50", + amber: "hover:bg-amber-50", + yellow: "hover:bg-yellow-50", + lime: "hover:bg-lime-50", + green: "hover:bg-green-50", + emerald: "hover:bg-emerald-50", + teal: "hover:bg-teal-50", + cyan: "hover:bg-cyan-50", + sky: "hover:bg-sky-50", + blue: "hover:bg-blue-50", + indigo: "hover:bg-indigo-50", + violet: "hover:bg-violet-50", + purple: "hover:bg-purple-50", + fuchsia: "hover:bg-fuchsia-50", + pink: "hover:bg-pink-50", + rose: "hover:bg-rose-50", +}; + +export const textColorsHex = { + red: "rgb(185 28 28)", + orange: "rgb(194 65 12)", + amber: "rgb(180 83 9)", + yellow: "rgb(161 98 7)", + lime: "rgb(77 124 15)", + green: "rgb(21 128 61)", + emerald: "rgb(4 120 87)", + teal: "rgb(15 118 110)", + cyan: "rgb(14 116 144)", + sky: "rgb(3 105 161)", + blue: "rgb(29 78 216)", + indigo: "rgb(67 56 202)", + violet: "rgb(109 40 217)", + purple: "rgb(126 34 206)", + fuchsia: "rgb(162 28 175)", + pink: "rgb(190 24 93)", + rose: "rgb(190 18 60)", +}; + +export const bgColorsHex = { + red: "rgb(254 226 226)", + orange: "rgb(255 237 213)", + amber: "rgb(254 243 199)", + yellow: "rgb(254 249 195)", + lime: "rgb(236 252 203)", + green: "rgb(220 252 231)", + emerald: "rgb(209 250 229)", + teal: "rgb(204 251 241)", + cyan: "rgb(207 250 254)", + sky: "rgb(224 242 254)", + blue: "rgb(219 234 254)", + indigo: "rgb(224 231 255)", + violet: "rgb(237 233 254)", + purple: "rgb(243 232 255)", + fuchsia: "rgb(250 232 255)", + pink: "rgb(252 231 243)", + rose: "rgb(255 228 230)", +}; + +export const taskTypeMap: { [key: string]: string } = { + MULTICLASS_CLASSIFICATION: "Multiclass Classification", +}; + +const charWidths = { + " ": 0.2, + "!": 0.2, + '"': 0.3, + "#": 0.5, + $: 0.5, + "%": 0.5, + "&": 0.5, + "(": 0.2, + ")": 0.2, + "*": 0.5, + "+": 0.5, + ",": 0.2, + "-": 0.2, + ".": 0.1, + "/": 0.5, + ":": 0.2, + ";": 0.2, + "<": 0.5, + "=": 0.5, + ">": 0.5, + "?": 0.2, + "@": 0.5, + "[": 0.2, + "\\": 0.5, + "]": 0.2, + "^": 0.5, + _: 0.2, + "`": 0.5, + "{": 0.2, + "|": 0.2, + "}": 0.2, + "~": 0.5, +}; + +for (let i = 65; i <= 90; i++) { + charWidths[String.fromCharCode(i)] = 0.6; +} +for (let i = 97; i <= 122; i++) { + charWidths[String.fromCharCode(i)] = 0.5; +} + +export function measureTextWidth(text: string, fontSize) { + let wordWidth = 0; + for (let j = 0; j < text.length; j++) { + let char = text[j]; + let charWidth = charWidths[char] || 0.5; + wordWidth += charWidth * fontSize; } - - export const bgColors = { - white: "bg-white", - red: "bg-red-100", - orange: "bg-orange-100", - amber: "bg-amber-100", - yellow: "bg-yellow-100", - lime: "bg-lime-100", - green: "bg-green-100", - emerald: "bg-emerald-100", - teal: "bg-teal-100", - cyan: "bg-cyan-100", - sky: "bg-sky-100", - blue: "bg-blue-100", - indigo: "bg-indigo-100", - violet: "bg-violet-100", - purple: "bg-purple-100", - fuchsia: "bg-fuchsia-100", - pink: "bg-pink-100", - rose: "bg-rose-100", - black: "bg-black-100", - gray: "bg-gray-100", - }; - - export const bgColorsHover = { - white: "hover:bg-white", - black: "hover:bg-black-50", - gray: "hover:bg-gray-50", - red: "hover:bg-red-50", - orange: "hover:bg-orange-50", - amber: "hover:bg-amber-50", - yellow: "hover:bg-yellow-50", - lime: "hover:bg-lime-50", - green: "hover:bg-green-50", - emerald: "hover:bg-emerald-50", - teal: "hover:bg-teal-50", - cyan: "hover:bg-cyan-50", - sky: "hover:bg-sky-50", - blue: "hover:bg-blue-50", - indigo: "hover:bg-indigo-50", - violet: "hover:bg-violet-50", - purple: "hover:bg-purple-50", - fuchsia: "hover:bg-fuchsia-50", - pink: "hover:bg-pink-50", - rose: "hover:bg-rose-50", - }; - - export const textColorsHex = { - red: "rgb(185 28 28)", - orange: "rgb(194 65 12)", - amber: "rgb(180 83 9)", - yellow: "rgb(161 98 7)", - lime: "rgb(77 124 15)", - green: "rgb(21 128 61)", - emerald: "rgb(4 120 87)", - teal: "rgb(15 118 110)", - cyan: "rgb(14 116 144)", - sky: "rgb(3 105 161)", - blue: "rgb(29 78 216)", - indigo: "rgb(67 56 202)", - violet: "rgb(109 40 217)", - purple: "rgb(126 34 206)", - fuchsia: "rgb(162 28 175)", - pink: "rgb(190 24 93)", - rose: "rgb(190 18 60)", - }; - - export const bgColorsHex = { - red: "rgb(254 226 226)", - orange: "rgb(255 237 213)", - amber: "rgb(254 243 199)", - yellow: "rgb(254 249 195)", - lime: "rgb(236 252 203)", - green: "rgb(220 252 231)", - emerald: "rgb(209 250 229)", - teal: "rgb(204 251 241)", - cyan: "rgb(207 250 254)", - sky: "rgb(224 242 254)", - blue: "rgb(219 234 254)", - indigo: "rgb(224 231 255)", - violet: "rgb(237 233 254)", - purple: "rgb(243 232 255)", - fuchsia: "rgb(250 232 255)", - pink: "rgb(252 231 243)", - rose: "rgb(255 228 230)", - }; - - export const taskTypeMap: { [key: string]: string } = { - MULTICLASS_CLASSIFICATION: "Multiclass Classification", - }; - - const charWidths = { - " ": 0.2, - "!": 0.2, - '"': 0.3, - "#": 0.5, - "$": 0.5, - "%": 0.5, - "&": 0.5, - "(": 0.2, - ")": 0.2, - "*": 0.5, - "+": 0.5, - ",": 0.2, - "-": 0.2, - ".": 0.1, - "/": 0.5, - ":": 0.2, - ";": 0.2, - "<": 0.5, - "=": 0.5, - ">": 0.5, - "?": 0.2, - "@": 0.5, - "[": 0.2, - "\\": 0.5, - "]": 0.2, - "^": 0.5, - "_": 0.2, - "`": 0.5, - "{": 0.2, - "|": 0.2, - "}": 0.2, - "~": 0.5, - }; - - for (let i = 65; i <= 90; i++) { - charWidths[String.fromCharCode(i)] = 0.6; - } - for (let i = 97; i <= 122; i++) { - charWidths[String.fromCharCode(i)] = 0.5; - } - - export function measureTextWidth(text: string, fontSize) { - let wordWidth = 0; - for (let j = 0; j < text.length; j++) { - let char = text[j]; - let charWidth = charWidths[char] || 0.5; - wordWidth += charWidth * fontSize; + return wordWidth; +} + +export function measureTextHeight(text: string, width, fontSize) { + const charHeight = fontSize; + const lineHeight = charHeight * 1.5; + const words = text.split(" "); + let lineWidth = 0; + let totalHeight = 0; + for (let i = 0; i < words.length; i++) { + let word = words[i]; + let wordWidth = measureTextWidth(word, fontSize); + if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) { + lineWidth += wordWidth + charWidths[" "] * fontSize; + } else { + totalHeight += lineHeight; + lineWidth = wordWidth; } - return wordWidth; } - - export function measureTextHeight(text: string, width, fontSize) { - const charHeight = fontSize; - const lineHeight = charHeight * 1.5; - const words = text.split(" "); - let lineWidth = 0; - let totalHeight = 0; - for (let i = 0; i < words.length; i++) { - let word = words[i]; - let wordWidth = measureTextWidth(word, fontSize); - if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) { - lineWidth += wordWidth + charWidths[" "] * fontSize; - } else { - totalHeight += lineHeight; - lineWidth = wordWidth; + totalHeight += lineHeight; + return totalHeight; +} + +export function toCamelCase(str: string) { + return str + .split(" ") + .map((word, index) => + index === 0 + ? word.toLowerCase() + : word[0].toUpperCase() + word.slice(1).toLowerCase() + ) + .join(""); +} +export function toFirstUpperCase(str: string) { + return str + .split(" ") + .map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase()) + .join(""); +} + +export function snakeToNormalCase(str: string) { + return str + .split("_") + .map((word, index) => { + if (index === 0) { + return word[0].toUpperCase() + word.slice(1).toLowerCase(); } + return word.toLowerCase(); + }) + .join(" "); +} + +export function roundNumber(x, decimals) { + return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals); +} + +export function getConnectedNodes(edge: Edge, nodes: Array): Array { + const sourceId = edge.source; + const targetId = edge.target; + const connectedNodes = nodes.filter( + (node) => node.id === sourceId || node.id === targetId + ); + return connectedNodes; +} + +export function isValidConnection( + data, + { source, target, sourceHandle, targetHandle } +) { + if ( + targetHandle === sourceHandle.split("|")[0] || + sourceHandle.split("|")[0] === "str" || + data.types[targetHandle] === sourceHandle.split("|")[0] + ) { + let sourceNode = data.reactFlowInstance.getNode(source).data.node; + if (!sourceNode) { + if ( + !data.reactFlowInstance + .getEdges() + .find((e) => e.sourceHandle === sourceHandle) + ) { + return true; + } + } else if ( + (!sourceNode.template[sourceHandle.split("|")[1]].list && + !data.reactFlowInstance + .getEdges() + .find((e) => e.sourceHandle === sourceHandle)) || + sourceNode.template[sourceHandle.split("|")[1]].list + ) { + return true; } - totalHeight += lineHeight; - return totalHeight; } - - export function toCamelCase(str: string){ - return str - .split(' ') - .map((word, index) => (index === 0 ? word.toLowerCase() : word[0].toUpperCase() + word.slice(1).toLowerCase())) - .join(''); - }; - export function toFirstUpperCase(str: string){ - return str - .split(' ') - .map((word, index) => (word[0].toUpperCase() + word.slice(1).toLowerCase())) - .join(''); - }; - - export function snakeToNormalCase(str: string){ - return str - .split('_') - .map((word, index) => {if(index === 0){return word[0].toUpperCase() + word.slice(1).toLowerCase()} return word.toLowerCase()}) - .join(' '); - }; - - export function roundNumber(x, decimals){ - return Math.round(x * Math.pow(10, decimals))/Math.pow(10, decimals) - } - - - export function getConnectedNodes(edge:Edge,nodes:Array):Array{ - const sourceId = edge.source; - const targetId = edge.target; - const connectedNodes = nodes.filter(node=>node.id===sourceId||node.id===targetId) - return connectedNodes - } \ No newline at end of file + return false; +}