alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into refactor/redux

Browse Source
This commit is contained in:
moklick
2021-02-11 17:52:54 +01:00
parent 1f7d20da1b 41d1d62a41
commit 201a35dec2
39 changed files with 2983 additions and 1549 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useZoomPanHelper.ts
+11 -8
View File
@@ -6,12 +6,14 @@ import { clamp } from '../utils';
import { getRectOfNodes, isNode } from '../utils/graph';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, Transform } from '../types';
const DEFAULT_PADDING = 0.1;
const initialZoomPanHelper: ZoomPanHelperFunctions = {
zoomIn: () => {},
zoomOut: () => {},
zoomTo: (_: number) => {},
transform: (_: FlowTransform) => {},
fitView: (_: FitViewParams = { padding: 0.1 }) => {},
fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {},
setCenter: (_: number, __: number) => {},
fitBounds: (_: Rect) => {},
initialized: false,
@@ -23,7 +25,7 @@ const getTransformForBounds = (
height: number,
minZoom: number,
maxZoom: number,
padding = 0.1
padding = DEFAULT_PADDING
): Transform => {
const xZoom = width / (bounds.width * (1 + padding));
const yZoom = height / (bounds.height * (1 + padding));
@@ -37,7 +39,7 @@ const getTransformForBounds = (
return [x, y, clampedZoom];
};
const usePanZoomHelper = (): ZoomPanHelperFunctions => {
const useZoomPanHelper = (): ZoomPanHelperFunctions => {
const store = useStore();
const d3Zoom = useStoreState((s) => s.d3Zoom);
const d3Selection = useStoreState((s) => s.d3Selection);
@@ -53,7 +55,7 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
d3Zoom.transform(d3Selection, nextTransform);
},
fitView: (options: FitViewParams = { padding: 0.1 }) => {
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
const { elements, width, height, minZoom, maxZoom } = store.getState();
const nodes = elements.filter(isNode);
@@ -61,8 +63,9 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
return;
}
const bounds = getRectOfNodes(nodes);
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options.padding);
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
const padding = options.padding ?? DEFAULT_PADDING;
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
const transform = zoomIdentity.translate(x, y).scale(zoom);
d3Zoom.transform(d3Selection, transform);
@@ -77,7 +80,7 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
d3Zoom.transform(d3Selection, transform);
},
fitBounds: (bounds: Rect, padding = 0.1) => {
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
const { width, height, minZoom, maxZoom } = store.getState();
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
const transform = zoomIdentity.translate(x, y).scale(zoom);
@@ -94,4 +97,4 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
return zoomPanHelperFunctions;
};
export default usePanZoomHelper;
export default useZoomPanHelper;