add code toolbar, edit advanced on double click
This commit is contained in:
commit
83e1dc1b4f
3 changed files with 28 additions and 0 deletions
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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));
|
||||||
}, [
|
}, [
|
||||||
|
|
|
||||||
|
|
@ -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 = {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue