Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

fix: remove saving on flow pan and add fit view to reactflow #3696

Merged
merged 5 commits into from
Sep 5, 2024
Merged

fix: remove saving on flow pan and add fit view to reactflow #3696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35106db
Remove save on pan flow and added fit view
lucaseduoli Sep 5, 2024
0778364
Removed viewport setting on resetFlow and setReactflowInstance
lucaseduoli Sep 5, 2024
20fd24e
Made last saved appear on header
lucaseduoli Sep 5, 2024
7704e7b
Merge branch 'main' into fix/save_on_pan
Cristhianzl Sep 5, 2024
c7ac9f3
Made it only fit on set react flow instance
lucaseduoli Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
const stopBuilding = useFlowStore((state) => state.stopBuilding);

const changesNotSaved =
customStringify(currentFlow) !== customStringify(currentSavedFlow) &&
!autoSaving;
customStringify(currentFlow) !== customStringify(currentSavedFlow);

const savedText =
updatedAt && changesNotSaved
Expand Down
9 changes: 0 additions & 9 deletions src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import ReactFlow, {
Controls,
Edge,
NodeDragHandler,
OnMove,
OnSelectionChangeParams,
SelectionDragHandler,
updateEdge,
Expand Down Expand Up @@ -306,12 +305,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
// 👉 you can place your event handlers here
}, [takeSnapshot]);

const onMoveEnd: OnMove = useCallback(() => {
// 👇 make moving the canvas undoable
autoSaveFlow();
updateCurrentFlow({ viewport: reactFlowInstance?.getViewport() });
}, [takeSnapshot, autoSaveFlow, nodes, edges, reactFlowInstance]);

const onNodeDragStop: NodeDragHandler = useCallback(() => {
// 👇 make moving the canvas undoable
autoSaveFlow();
Expand Down Expand Up @@ -465,7 +458,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
onSelectionStart={onSelectionStart}
connectionLineComponent={ConnectionLineComponent}
onDragOver={onDragOver}
onMoveEnd={onMoveEnd}
onNodeDragStop={onNodeDragStop}
onDrop={onDrop}
onSelectionChange={onSelectionChange}
Expand All @@ -488,7 +480,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
data-testid="add_note"
onClick={() => {
const wrapper = reactFlowWrapper.current!;
const viewport = reactFlowInstance?.getViewport();
const x = wrapper.getBoundingClientRect().width / 2;
const y = wrapper.getBoundingClientRect().height / 2;
const nodePosition =
Expand Down
26 changes: 7 additions & 19 deletions src/frontend/src/stores/flowStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
resetFlow: (flow) => {
const nodes = flow?.data?.nodes ?? [];
const edges = flow?.data?.edges ?? [];
const viewport = flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 };
let brokenEdges = detectBrokenEdgesEdges(nodes, edges);
if (brokenEdges.length > 0) {
useAlertStore.getState().setErrorData({
Expand All @@ -181,7 +180,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
flowPool: {},
currentFlow: flow,
});
get().reactFlowInstance?.setViewport(viewport);
},
setIsBuilding: (isBuilding) => {
set({ isBuilding });
Expand All @@ -198,16 +196,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
},
setReactFlowInstance: (newState) => {
set({ reactFlowInstance: newState });
const viewport = get().currentFlow?.data?.viewport ?? {
zoom: 1,
x: 0,
y: 0,
};
if (viewport.x == 0 && viewport.y == 0) {
newState.fitView();
} else {
newState.setViewport(viewport);
}
get().reactFlowInstance?.fitView();
},
onNodesChange: (changes: NodeChange[]) => {
set({
Expand Down Expand Up @@ -753,19 +742,18 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
setCurrentFlow: (flow) => {
set({ currentFlow: flow });
},
updateCurrentFlow: ({ nodes, edges, viewport }) => {
updateCurrentFlow: ({ nodes, edges }) => {
set({
currentFlow: {
...get().currentFlow!,
data: {
nodes: nodes ?? get().currentFlow?.data?.nodes ?? [],
edges: edges ?? get().currentFlow?.data?.edges ?? [],
viewport: viewport ??
get().currentFlow?.data?.viewport ?? {
x: 0,
y: 0,
zoom: 1,
},
viewport: get().currentFlow?.data?.viewport ?? {
x: 0,
y: 0,
zoom: 1,
},
},
},
});
Expand Down