add code toolbar, edit advanced on double click

This commit is contained in:
cristhianzl 2024-02-08 17:54:18 -03:00
commit 83e1dc1b4f
3 changed files with 28 additions and 0 deletions

View file

@ -44,6 +44,7 @@ export default function GenericNode({
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
useState<validationStatusType | null>(null); useState<validationStatusType | null>(null);
const [handles, setHandles] = useState<number>(0); const [handles, setHandles] = useState<number>(0);
const [openAdvancedModal, setOpenAdvancedModal] = useState<boolean>(false);
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@ -130,6 +131,12 @@ export default function GenericNode({
}} }}
numberOfHandles={handles} numberOfHandles={handles}
showNode={showNode} showNode={showNode}
openAdvancedModal={openAdvancedModal}
onCloseAdvancedModal={(open) => {
console.log(open);
setOpenAdvancedModal(false);
}}
></NodeToolbarComponent> ></NodeToolbarComponent>
</NodeToolbar> </NodeToolbar>
@ -139,6 +146,11 @@ export default function GenericNode({
showNode ? " w-96 rounded-lg" : " w-26 h-26 rounded-full", showNode ? " w-96 rounded-lg" : " w-26 h-26 rounded-full",
"generic-node-div" "generic-node-div"
)} )}
onDoubleClick={() => {
console.log(openAdvancedModal);
setOpenAdvancedModal(true);
}}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
<div className="beta-badge-wrapper"> <div className="beta-badge-wrapper">

View file

@ -35,6 +35,8 @@ export default function NodeToolbarComponent({
numberOfHandles, numberOfHandles,
showNode, showNode,
name = "code", name = "code",
openAdvancedModal,
onCloseAdvancedModal,
}: nodeToolbarPropsType): JSX.Element { }: nodeToolbarPropsType): JSX.Element {
const nodeLength = Object.keys(data.node!.template).filter( const nodeLength = Object.keys(data.node!.template).filter(
(templateField) => (templateField) =>
@ -79,6 +81,18 @@ export default function NodeToolbarComponent({
window.open(url, "_blank", "noreferrer"); window.open(url, "_blank", "noreferrer");
}; };
useEffect(() => {
if (openAdvancedModal) {
setShowModalAdvanced(true);
}
}, [openAdvancedModal]);
useEffect(() => {
if (!showModalAdvanced) {
onCloseAdvancedModal!(false);
}
}, [showModalAdvanced]);
useEffect(() => { useEffect(() => {
setFlowComponent(createFlowComponent(cloneDeep(data), version)); setFlowComponent(createFlowComponent(cloneDeep(data), version));
}, [ }, [

View file

@ -482,6 +482,8 @@ export type nodeToolbarPropsType = {
numberOfHandles: number; numberOfHandles: number;
showNode: boolean; showNode: boolean;
name?: string; name?: string;
openAdvancedModal?: boolean;
onCloseAdvancedModal?: (close: boolean) => void;
}; };
export type parsedDataType = { export type parsedDataType = {