From 7324767c31b8495267d09f2fe278691dcaca895a Mon Sep 17 00:00:00 2001 From: Eugene Samonenko Date: Sat, 6 Feb 2021 12:20:20 +0200 Subject: [PATCH 1/4] feat(fitView): added option to exclude hidden nodes --- src/hooks/useZoomPanHelper.ts | 6 +++--- src/types/index.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index 079494f0..2db74294 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -11,7 +11,7 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = { zoomOut: () => {}, zoomTo: (_: number) => {}, transform: (_: FlowTransform) => {}, - fitView: (_: FitViewParams = { padding: 0.1 }) => {}, + fitView: (_: FitViewParams = { padding: 0.1, excludeHidden: false }) => {}, setCenter: (_: number, __: number) => {}, fitBounds: (_: Rect) => {}, initialized: false, @@ -53,14 +53,14 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => { d3Zoom.transform(d3Selection, nextTransform); }, - fitView: (options: FitViewParams = { padding: 0.1 }) => { + fitView: (options: FitViewParams = { padding: 0.1, excludeHidden: false }) => { const { nodes, width, height, minZoom, maxZoom } = store.getState(); if (!nodes.length) { return; } - const bounds = getRectOfNodes(nodes); + const bounds = getRectOfNodes(options.excludeHidden ? nodes.filter(node => !node.isHidden) : nodes); const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options.padding); const transform = zoomIdentity.translate(x, y).scale(zoom); diff --git a/src/types/index.ts b/src/types/index.ts index b41e82a9..32150248 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -236,6 +236,7 @@ export interface WrapNodeProps { export type FitViewParams = { padding: number; + excludeHidden?: boolean; }; export type FlowExportObject = { From 97cc7e3d99d36c6e6029035c129188303d519fbc Mon Sep 17 00:00:00 2001 From: Eugene Samonenko Date: Sat, 6 Feb 2021 12:54:39 +0200 Subject: [PATCH 2/4] fix(fitView): fixed useZoomPanHelper typo --- src/hooks/useZoomPanHelper.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index 2db74294..b254f434 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -37,7 +37,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); @@ -93,4 +93,4 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => { return zoomPanHelperFunctions; }; -export default usePanZoomHelper; +export default useZoomPanHelper; From 7dc2c69f2ebc6161968f8861495eedbabba20500 Mon Sep 17 00:00:00 2001 From: Eugene Samonenko Date: Sun, 7 Feb 2021 10:13:16 +0200 Subject: [PATCH 3/4] feat(fitView): added fitViewParams prop to Control component --- src/additional-components/Controls/index.tsx | 7 +++++-- src/hooks/useZoomPanHelper.ts | 13 ++++++++----- src/types/index.ts | 2 +- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx index 84b9efb8..a3c27624 100644 --- a/src/additional-components/Controls/index.tsx +++ b/src/additional-components/Controls/index.tsx @@ -10,11 +10,13 @@ import LockIcon from '../../../assets/icons/lock.svg'; import UnlockIcon from '../../../assets/icons/unlock.svg'; import useZoomPanHelper from '../../hooks/useZoomPanHelper'; +import { FitViewParams } from '../../types'; export interface ControlProps extends React.HTMLAttributes { showZoom?: boolean; showFitView?: boolean; showInteractive?: boolean; + fitViewParams?: FitViewParams; onZoomIn?: () => void; onZoomOut?: () => void; onFitView?: () => void; @@ -26,6 +28,7 @@ const Controls = ({ showZoom = true, showFitView = true, showInteractive = true, + fitViewParams, onZoomIn, onZoomOut, onFitView, @@ -49,9 +52,9 @@ const Controls = ({ }, [zoomOut, onZoomOut]); const onFitViewHandler = useCallback(() => { - fitView?.(); + fitView?.(fitViewParams); onFitView?.(); - }, [fitView, onFitView]); + }, [fitView, fitViewParams, onFitView]); const onInteractiveChangeHandler = useCallback(() => { setInteractive?.(!isInteractive); diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index b254f434..7fd54891 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -6,12 +6,14 @@ import { clamp } from '../utils'; import { getRectOfNodes } 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, excludeHidden: false }) => {}, + fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, excludeHidden: 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)); @@ -53,7 +55,7 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => { d3Zoom.transform(d3Selection, nextTransform); }, - fitView: (options: FitViewParams = { padding: 0.1, excludeHidden: false }) => { + fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, excludeHidden: false }) => { const { nodes, width, height, minZoom, maxZoom } = store.getState(); if (!nodes.length) { @@ -61,7 +63,8 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => { } const bounds = getRectOfNodes(options.excludeHidden ? nodes.filter(node => !node.isHidden) : nodes); - const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options.padding); + 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); @@ -76,7 +79,7 @@ const useZoomPanHelper = (): 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); diff --git a/src/types/index.ts b/src/types/index.ts index 32150248..e3a602a5 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -235,7 +235,7 @@ export interface WrapNodeProps { } export type FitViewParams = { - padding: number; + padding?: number; excludeHidden?: boolean; }; From 004b0ef4901dd75759a9234302555ce85217b77f Mon Sep 17 00:00:00 2001 From: Eugene Samonenko Date: Sun, 7 Feb 2021 12:41:30 +0200 Subject: [PATCH 4/4] feat(fitView): use option includeHiddenNodes false by default --- src/hooks/useZoomPanHelper.ts | 6 +++--- src/types/index.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index 7fd54891..ba04196b 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -13,7 +13,7 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = { zoomOut: () => {}, zoomTo: (_: number) => {}, transform: (_: FlowTransform) => {}, - fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, excludeHidden: false }) => {}, + fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {}, setCenter: (_: number, __: number) => {}, fitBounds: (_: Rect) => {}, initialized: false, @@ -55,14 +55,14 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => { d3Zoom.transform(d3Selection, nextTransform); }, - fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, excludeHidden: false }) => { + fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => { const { nodes, width, height, minZoom, maxZoom } = store.getState(); if (!nodes.length) { return; } - const bounds = getRectOfNodes(options.excludeHidden ? nodes.filter(node => !node.isHidden) : nodes); + 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); diff --git a/src/types/index.ts b/src/types/index.ts index e3a602a5..46dcfa37 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -236,7 +236,7 @@ export interface WrapNodeProps { export type FitViewParams = { padding?: number; - excludeHidden?: boolean; + includeHiddenNodes?: boolean; }; export type FlowExportObject = {