Fixed handles not showing when changing the output of the custom code

This commit is contained in:
Lucas Oliveira 2024-01-15 22:12:55 +01:00
commit c3a0dfbd97
2 changed files with 18 additions and 7 deletions

View file

@ -1,6 +1,6 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import React, { ReactNode, useEffect, useRef, useState } from "react"; import React, { ReactNode, useEffect, useRef, useState } from "react";
import { Handle, Position } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent";
import DictComponent from "../../../../components/dictComponent"; import DictComponent from "../../../../components/dictComponent";
@ -124,27 +124,32 @@ export default function ParameterComponent({
renderTooltips(); renderTooltips();
}; };
const updateNodeInternals = useUpdateNodeInternals();
const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => { const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => {
if (!data.node) return; if (!data.node) return;
if (data.node!.template[name].value !== code) { if (data.node!.template[name].value !== code) {
takeSnapshot(); takeSnapshot();
} }
setNode(data.id, (oldNode) => { setNode(data.id, (oldNode) => {
let newNode = cloneDeep(oldNode); let newNode = cloneDeep(oldNode);
newNode.data = { newNode.data = {
...newNode.data, ...newNode.data,
node: newNodeClass, node: newNodeClass,
description: newNodeClass.description ?? data.node!.description, description: newNodeClass.description ?? data.node!.description,
display_name: newNodeClass.display_name ?? data.node!.display_name, display_name: newNodeClass.display_name ?? data.node!.display_name,
}; };
newNode.data.node.template[name].value = code; newNode.data.node.template[name].value = code;
return newNode; return newNode;
}); });
updateNodeInternals(data.id);
renderTooltips(); renderTooltips();
}; };
@ -268,6 +273,9 @@ export default function ParameterComponent({
<Handle <Handle
type={left ? "target" : "source"} type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right} position={left ? Position.Left : Position.Right}
key={proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)}
id={ id={
proxy proxy
? scapedJSONStringfy({ ...id, proxy }) ? scapedJSONStringfy({ ...id, proxy })
@ -340,6 +348,9 @@ export default function ParameterComponent({
<Handle <Handle
type={left ? "target" : "source"} type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right} position={left ? Position.Left : Position.Right}
key={proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)}
id={ id={
proxy proxy
? scapedJSONStringfy({ ...id, proxy }) ? scapedJSONStringfy({ ...id, proxy })

View file

@ -183,7 +183,7 @@ export default function Page({
takeSnapshot(); takeSnapshot();
onConnect(params); onConnect(params);
}, },
[setEdges, takeSnapshot, addEdge] [takeSnapshot, onConnect]
); );
const onNodeDragStart: NodeDragHandler = useCallback(() => { const onNodeDragStart: NodeDragHandler = useCallback(() => {