vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

unconstrain editor for OSS (#3245)

Browse Source
This commit is contained in:
Jonathan Dobson
2025-08-21 09:02:49 -04:00
committed by GitHub
parent 0de18f9a88
commit 64a3330b58
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
View File

@@ -78,6 +78,7 @@ import {
layout, layout,
} from "./workflowEditorUtils"; } from "./workflowEditorUtils";
import { useAutoPan } from "./useAutoPan"; import { useAutoPan } from "./useAutoPan";
import { useUser } from "@/hooks/useUser";
const nextTick = () => new Promise((resolve) => setTimeout(resolve, 0)); const nextTick = () => new Promise((resolve) => setTimeout(resolve, 0));
@@ -249,12 +250,14 @@ function FlowRenderer({
}: Props) { }: Props) {
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
const debugStore = useDebugStore(); const debugStore = useDebugStore();
const user = useUser().get();
const { title, initializeTitle } = useWorkflowTitleStore(); const { title, initializeTitle } = useWorkflowTitleStore();
// const [parameters] = useState<ParametersState>(initialParameters); // const [parameters] = useState<ParametersState>(initialParameters);
const parameters = useWorkflowParametersStore((state) => state.parameters); const parameters = useWorkflowParametersStore((state) => state.parameters);
const nodesInitialized = useNodesInitialized(); const nodesInitialized = useNodesInitialized();
const [shouldConstrainPan, setShouldConstrainPan] = useState(false); const [shouldConstrainPan, setShouldConstrainPan] = useState(false);
const onNodesChangeTimeoutRef = useRef<NodeJS.Timeout | null>(null); const onNodesChangeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const flowIsConstrained = debugStore.isDebugMode && Boolean(user);
useEffect(() => { useEffect(() => {
if (nodesInitialized) { if (nodesInitialized) {
@@ -491,7 +494,12 @@ function FlowRenderer({
}; };
useOnChange(debugStore.isDebugMode, (newValue) => { useOnChange(debugStore.isDebugMode, (newValue) => {
if (!user) {
return;
}
const xLock = getXLock(); const xLock = getXLock();
if (newValue) { if (newValue) {
const currentY = reactFlowInstance.getViewport().y; const currentY = reactFlowInstance.getViewport().y;
reactFlowInstance.setViewport({ x: xLock, y: currentY, zoom: zoomLock }); reactFlowInstance.setViewport({ x: xLock, y: currentY, zoom: zoomLock });
@@ -647,18 +655,18 @@ function FlowRenderer({
}} }}
deleteKeyCode={null} deleteKeyCode={null}
onMove={(_, viewport) => { onMove={(_, viewport) => {
if (debugStore.isDebugMode && shouldConstrainPan) { if (flowIsConstrained && shouldConstrainPan) {
constrainPan(viewport); constrainPan(viewport);
} }
}} }}
maxZoom={debugStore.isDebugMode ? 1 : 2} maxZoom={flowIsConstrained ? 1 : 2}
minZoom={debugStore.isDebugMode ? 1 : 0.5} minZoom={flowIsConstrained ? 1 : 0.5}
panOnDrag={true} panOnDrag={true}
panOnScroll={true} panOnScroll={true}
panOnScrollMode={PanOnScrollMode.Vertical} panOnScrollMode={PanOnScrollMode.Vertical}
zoomOnDoubleClick={!debugStore.isDebugMode} zoomOnDoubleClick={!flowIsConstrained}
zoomOnPinch={!debugStore.isDebugMode} zoomOnPinch={!flowIsConstrained}
zoomOnScroll={!debugStore.isDebugMode} zoomOnScroll={!flowIsConstrained}
> >
<Background variant={BackgroundVariant.Dots} bgColor="#020617" /> <Background variant={BackgroundVariant.Dots} bgColor="#020617" />
<Controls position="bottom-left" /> <Controls position="bottom-left" />