Implemented only one node with both types

This commit is contained in:
Lucas Oliveira 2023-03-31 09:15:40 -03:00
commit 369ce5feb5
2 changed files with 108 additions and 118 deletions

View file

@ -46,17 +46,15 @@ export default function ParameterComponent({
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
let disabledSource =
reactFlowInstance?.getEdges().some((e) => e.sourceHandle !== id && e.source === data.id) ?? false;
const { save } = useContext(TabsContext); const { save } = useContext(TabsContext);
return ( return (
<div <div
ref={ref} ref={ref}
className={"w-full flex flex-wrap justify-between items-center dark:text-white mt-1 px-5 py-2 " + (!left ? (disabledSource ? "bg-gray-100 dark:bg-gray-700 text-gray-500": "bg-gray-50 dark:bg-gray-800") : "bg-gray-50 dark:bg-gray-800")} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
> >
<> <>
<div className="text-sm truncate"> <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
{title} {title}
<span className="text-red-600">{required ? " *" : ""}</span> <span className="text-red-600">{required ? " *" : ""}</span>
</div> </div>
@ -78,8 +76,8 @@ export default function ParameterComponent({
isValidConnection(connection, reactFlowInstance) isValidConnection(connection, reactFlowInstance)
} }
className={classNames( className={classNames(
left ? "-ml-0.5 " : ("-mr-0.5 " + (disabledSource ? "pointer-events-none border-gray-400 " : "")), left ? "-ml-0.5 " : "-mr-0.5 ",
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800", "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
)} )}
style={{ style={{
borderColor: color, borderColor: color,

View file

@ -71,7 +71,7 @@ export default function GenericNode({
<div key={idx}> <div key={idx}>
{idx === 0 ? ( {idx === 0 ? (
<div className="px-5 py-2 mt-2 dark:text-white text-center"> <div className="px-5 py-2 mt-2 dark:text-white text-center">
Inputs: Inputs
</div> </div>
) : ( ) : (
<></> <></>
@ -100,26 +100,18 @@ export default function GenericNode({
)} )}
</div> </div>
))} ))}
{data.node.base_classes.map((c, idx) => (
<div key={idx}>
{idx === 0 ? (
<div className="px-5 py-2 mt-2 dark:text-white text-center"> <div className="px-5 py-2 mt-2 dark:text-white text-center">
Outputs: Output
</div> </div>
) : (
<></>
)}
<ParameterComponent <ParameterComponent
data={data} data={data}
color={nodeColors[types[c]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={c} title={data.node.base_classes.join(" | ")}
tooltipTitle={`Type: ${c}`} tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
id={[data.type, data.id, c].join("|")} id={[data.type, data.id, ...data.node.base_classes].join("|")}
type={c} type={data.node.base_classes.join("|")}
left={false} left={false}
/> />
</div>
))}
</> </>
</div> </div>
</div> </div>