Feat: Implement ctrl s shortcut for save and override nodes

This commit is contained in:
igorrCarvalho 2024-03-01 00:32:33 -03:00
commit a3e7c6f8f6

View file

@ -24,6 +24,7 @@ import {
createFlowComponent, createFlowComponent,
downloadNode, downloadNode,
expandGroupNode, expandGroupNode,
unselectAllNodes,
updateFlowPosition, updateFlowPosition,
} from "../../../../utils/reactflowUtils"; } from "../../../../utils/reactflowUtils";
import { classNames, cn } from "../../../../utils/utils"; import { classNames, cn } from "../../../../utils/utils";
@ -68,7 +69,7 @@ export default function NodeToolbarComponent({
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
const setNodes = useFlowStore((state) => state.setNodes); const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges); const setEdges = useFlowStore((state) => state.setEdges);
const unselectAll = useFlowStore(state => state.unselectAll);
const saveComponent = useFlowsManagerStore((state) => state.saveComponent); const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
const flows = useFlowsManagerStore((state) => state.flows); const flows = useFlowsManagerStore((state) => state.flows);
const version = useDarkStore((state) => state.version); const version = useDarkStore((state) => state.version);
@ -216,6 +217,25 @@ export default function NodeToolbarComponent({
event.preventDefault(); event.preventDefault();
setShowModalAdvanced(state => !state); setShowModalAdvanced(state => !state);
} }
if (
selected &&
(event.ctrlKey || event.metaKey) &&
event.key === "s" &&
isSaved
) {
event.preventDefault();
return setShowOverrideModal(state => !state);
}
if (
selected &&
(event.ctrlKey || event.metaKey) &&
event.key === "s" &&
hasCode
) {
event.preventDefault();
saveComponent(cloneDeep(data), false);
unselectAll()
}
} }
document.addEventListener("keydown", onKeyDown); document.addEventListener("keydown", onKeyDown);
@ -371,24 +391,34 @@ export default function NodeToolbarComponent({
{isSaved ? ( {isSaved ? (
<SelectItem value={"override"}> <SelectItem value={"override"}>
<div className="flex" data-testid="save-button-modal"> <div className="flex">
<IconComponent <IconComponent
name="SaveAll" name="Settings2"
className="relative top-0.5 mr-2 h-4 w-4 " className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "} />{" "}
Save{" "} <span className="">Save</span>{" "}
</div>{" "} <IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
<span className="absolute right-2 top-[0.46em]">S</span>
</div>
</SelectItem> </SelectItem>
) : ( ) : (
hasCode && ( hasCode && (
<SelectItem value={"SaveAll"}> <SelectItem value={"SaveAll"}>
<div className="flex" data-testid="save-button-modal"> <div className="flex">
<IconComponent <IconComponent
name="SaveAll" name="Settings2"
className="relative top-0.5 mr-2 h-4 w-4 " className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "} />{" "}
Save{" "} <span className="">Save</span>{" "}
</div>{" "} <IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
<span className="absolute right-2 top-[0.46em]">S</span>
</div>
</SelectItem> </SelectItem>
) )
)} )}