From a29835d7da10f13567a9d61b5a6fabad076ba02b Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Mon, 5 Feb 2024 17:42:25 +0530 Subject: [PATCH 1/5] fix: Zoom label not updating on selection/input --- src/store/useGraph.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/store/useGraph.ts b/src/store/useGraph.ts index 075744f91ac..bc5737ee8e1 100644 --- a/src/store/useGraph.ts +++ b/src/store/useGraph.ts @@ -194,14 +194,17 @@ const useGraph = create((set, get) => ({ setZoomFactor: zoomFactor => { const viewPort = get().viewPort; viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, zoomFactor); + set({ viewPort }); }, zoomIn: () => { const viewPort = get().viewPort; viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, viewPort.zoomFactor + 0.1); + set({viewPort}) }, zoomOut: () => { const viewPort = get().viewPort; viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, viewPort.zoomFactor - 0.1); + set({ viewPort }); }, centerView: () => { const viewPort = get().viewPort; @@ -211,6 +214,7 @@ const useGraph = create((set, get) => ({ if (canvas) { viewPort?.camera?.centerFitElementIntoView(canvas); } + set({ viewPort }); }, toggleFullscreen: fullscreen => set({ fullscreen }), setViewPort: viewPort => set({ viewPort }), From 16c43fbdcfd9bb1d44e07f4e3d669fc6370a9497 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Tue, 6 Feb 2024 04:03:49 +0530 Subject: [PATCH 2/5] Enforce zoom label update during mouse scroll in graph --- src/containers/Views/GraphView/index.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/containers/Views/GraphView/index.tsx b/src/containers/Views/GraphView/index.tsx index 0f8fdb2c0cd..6cec0a99fc6 100644 --- a/src/containers/Views/GraphView/index.tsx +++ b/src/containers/Views/GraphView/index.tsx @@ -96,14 +96,16 @@ const GraphCanvas = ({ isWidget }: GraphProps) => { const direction = useGraph(state => state.direction); const nodes = useGraph(state => state.nodes); const edges = useGraph(state => state.edges); + const viewPort = useGraph(state => state.viewPort); + const setViewPort = useGraph(state => state.setViewPort); const [paneWidth, setPaneWidth] = React.useState(2000); const [paneHeight, setPaneHeight] = React.useState(2000); const onLayoutChange = React.useCallback( (layout: ElkRoot) => { - if (layout.width && layout.height) { - const areaSize = layout.width * layout.height; + if (layout.width && layout.height) { + const areaSize = layout.width * layout.height; const changeRatio = Math.abs((areaSize * 100) / (paneWidth * paneHeight) - 100); setPaneWidth(layout.width + 50); @@ -137,12 +139,15 @@ const GraphCanvas = ({ isWidget }: GraphProps) => { layoutOptions={layoutOptions} key={direction} pannable={false} - zoomable={false} + zoomable={true} animated={false} readonly={true} dragEdge={null} dragNode={null} fit={true} + onZoomChange={() => { + setViewPort(viewPort!); + }} /> ); }; @@ -210,7 +215,7 @@ export const Graph = ({ isWidget = false }: GraphProps) => { treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled} pollForElementResizing className="jsoncrack-space" - > + > From b7239aafabe0744d1539e414e0526033a98298d4 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Wed, 7 Feb 2024 15:40:47 +0530 Subject: [PATCH 3/5] Fix zoom label not updating on plain mouse scroll --- src/containers/Views/GraphView/index.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/containers/Views/GraphView/index.tsx b/src/containers/Views/GraphView/index.tsx index 6cec0a99fc6..f5c27cd4475 100644 --- a/src/containers/Views/GraphView/index.tsx +++ b/src/containers/Views/GraphView/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import dynamic from "next/dynamic"; import styled from "styled-components"; +import debounce from "lodash.debounce"; import { toast } from "react-hot-toast"; import { Space } from "react-zoomable-ui"; import { ElkRoot } from "reaflow/dist/layout/useLayout"; @@ -104,8 +105,8 @@ const GraphCanvas = ({ isWidget }: GraphProps) => { const onLayoutChange = React.useCallback( (layout: ElkRoot) => { - if (layout.width && layout.height) { - const areaSize = layout.width * layout.height; + if (layout.width && layout.height) { + const areaSize = layout.width * layout.height; const changeRatio = Math.abs((areaSize * 100) / (paneWidth * paneHeight) - 100); setPaneWidth(layout.width + 50); @@ -139,15 +140,12 @@ const GraphCanvas = ({ isWidget }: GraphProps) => { layoutOptions={layoutOptions} key={direction} pannable={false} - zoomable={true} + zoomable={false} animated={false} readonly={true} dragEdge={null} dragNode={null} fit={true} - onZoomChange={() => { - setViewPort(viewPort!); - }} /> ); }; @@ -161,6 +159,7 @@ function getViewType(nodes: NodeData[]) { export const Graph = ({ isWidget = false }: GraphProps) => { const setViewPort = useGraph(state => state.setViewPort); + const viewPort = useGraph(state => state.viewPort); const loading = useGraph(state => state.loading); const isPremium = useUser(state => state.premium); const viewType = useGraph(state => getViewType(state.nodes)); @@ -197,6 +196,9 @@ export const Graph = ({ isWidget = false }: GraphProps) => { if (viewType === "premium" && !isWidget) { if (!isPremium) return ; } + const debouncedOnZoomChangeHandler = debounce(() => { + setViewPort(viewPort!); + }, 300); return ( <> @@ -210,12 +212,13 @@ export const Graph = ({ isWidget = false }: GraphProps) => { {...bindLongPress()} > debouncedOnZoomChangeHandler()} onCreate={setViewPort} onContextMenu={e => e.preventDefault()} treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled} pollForElementResizing className="jsoncrack-space" - > + > From 489cd2ccccb9cf96ad0897f65d41a06f6485e1ec Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Wed, 7 Feb 2024 15:55:10 +0530 Subject: [PATCH 4/5] removed unused code --- src/containers/Views/GraphView/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/containers/Views/GraphView/index.tsx b/src/containers/Views/GraphView/index.tsx index f5c27cd4475..d8771d39b1b 100644 --- a/src/containers/Views/GraphView/index.tsx +++ b/src/containers/Views/GraphView/index.tsx @@ -97,9 +97,6 @@ const GraphCanvas = ({ isWidget }: GraphProps) => { const direction = useGraph(state => state.direction); const nodes = useGraph(state => state.nodes); const edges = useGraph(state => state.edges); - const viewPort = useGraph(state => state.viewPort); - const setViewPort = useGraph(state => state.setViewPort); - const [paneWidth, setPaneWidth] = React.useState(2000); const [paneHeight, setPaneHeight] = React.useState(2000); From 08db332b752585e99d757075e1b747376260c214 Mon Sep 17 00:00:00 2001 From: Shahidullah Muffakir Date: Wed, 7 Feb 2024 17:15:05 +0530 Subject: [PATCH 5/5] Revert redundant Graph zoom code, only onUpdate handler is enough --- src/store/useGraph.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/store/useGraph.ts b/src/store/useGraph.ts index bc5737ee8e1..075744f91ac 100644 --- a/src/store/useGraph.ts +++ b/src/store/useGraph.ts @@ -194,17 +194,14 @@ const useGraph = create((set, get) => ({ setZoomFactor: zoomFactor => { const viewPort = get().viewPort; viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, zoomFactor); - set({ viewPort }); }, zoomIn: () => { const viewPort = get().viewPort; viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, viewPort.zoomFactor + 0.1); - set({viewPort}) }, zoomOut: () => { const viewPort = get().viewPort; viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, viewPort.zoomFactor - 0.1); - set({ viewPort }); }, centerView: () => { const viewPort = get().viewPort; @@ -214,7 +211,6 @@ const useGraph = create((set, get) => ({ if (canvas) { viewPort?.camera?.centerFitElementIntoView(canvas); } - set({ viewPort }); }, toggleFullscreen: fullscreen => set({ fullscreen }), setViewPort: viewPort => set({ viewPort }),