fix(GenericNode/index.tsx): fix initial state of inputName to be false instead of true for better user experience

refactor(GenericNode/index.tsx): refactor tooltip div structure to improve readability and add pencil icon if node has flow
refactor(GenericNode/index.tsx): refactor color logic to use typesContext instead of accessing types directly
refactor(GenericNode/index.tsx): refactor output type title logic to use ternary operator for better readability
refactor(GenericNode/index.tsx): refactor validation status params rendering to use ternary operator for better readability
refactor(GenericNode/index.tsx): refactor generic node description rendering to use ternary operator for better readability
refactor(GenericNode/index.tsx): refactor template field rendering to use ternary operator for better readability
refactor(PageComponent/index.tsx): remove unnecessary empty line
This commit is contained in:
anovazzi1 2023-11-24 12:43:29 -03:00
commit 2438a8c658
2 changed files with 23 additions and 21 deletions

View file

@ -38,7 +38,7 @@ export default function GenericNode({
const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } =
useContext(typesContext);
const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
const [inputName, setInputName] = useState(true);
const [inputName, setInputName] = useState(false);
const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState(
@ -198,11 +198,14 @@ export default function GenericNode({
</div>
) : (
<ShadTooltip content={data.node?.display_name}>
<div
className="generic-node-tooltip-div text-primary"
onDoubleClick={() => setInputName(true)}
>
{data.node?.display_name}
<div className="flex" onDoubleClick={() => setInputName(true)}>
<div
className="generic-node-tooltip-div text-primary pr-3"
>
{data.node?.display_name}
</div>
{data.node?.flow&& <IconComponent name="Pencil" className="w-5 h-5 text-primary-content" />}
</div>
</ShadTooltip>
)}
@ -232,10 +235,10 @@ export default function GenericNode({
setData={setData}
color={
nodeColors[
types[data.node?.template[templateField].type!]
types[data.node?.template[templateField].type!]
] ??
nodeColors[
data.node?.template[templateField].type!
data.node?.template[templateField].type!
] ??
nodeColors.unknown
}
@ -282,7 +285,7 @@ export default function GenericNode({
color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={
data.node?.output_types &&
data.node.output_types.length > 0
data.node.output_types.length > 0
? data.node.output_types.join("|")
: data.type
}
@ -320,10 +323,10 @@ export default function GenericNode({
<div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string"
? validationStatus.params
.split("\n")
.map((line: string, index: number) => (
<div key={index}>{line}</div>
))
.split("\n")
.map((line: string, index: number) => (
<div key={index}>{line}</div>
))
: ""}
</div>
)
@ -367,14 +370,14 @@ export default function GenericNode({
className={
showNode
? "generic-node-desc " +
(data.node?.description !== "" ? "py-5" : "pb-5")
(data.node?.description !== "" ? "py-5" : "pb-5")
: ""
}
>
{data.node?.description !== "" &&
showNode &&
data.node?.flow &&
inputDescription ? (
showNode &&
data.node?.flow &&
inputDescription ? (
<Textarea
autoFocus
onBlur={() => {
@ -429,7 +432,7 @@ export default function GenericNode({
.map((templateField: string, idx) => (
<div key={idx}>
{data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? (
!data.node!.template[templateField].advanced ? (
<ParameterComponent
index={idx.toString()}
key={scapedJSONStringfy({
@ -444,10 +447,10 @@ export default function GenericNode({
setData={setData}
color={
nodeColors[
types[data.node?.template[templateField].type!]
types[data.node?.template[templateField].type!]
] ??
nodeColors[
data.node?.template[templateField].type!
data.node?.template[templateField].type!
] ??
nodeColors.unknown
}

View file

@ -145,7 +145,6 @@ export default function Page({
document.removeEventListener("mousemove", handleMouseMove);
};
}, [position, lastCopiedSelection, lastSelection]);
const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);