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

Merge pull request #5067 from xyflow/enhance/fitView

Browse Source 
Enhance fitView
This commit is contained in:
Moritz Klack
2025-03-27 12:04:48 +01:00
committed by GitHub
parent 812573fc63 3ac2846d5e
commit ed8c6a931d
30 changed files with 457 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/package.json
+1 -1
View File
@@ -85,7 +85,7 @@
"postcss-nested": "^6.0.0",
"postcss-rename": "^0.6.1",
"react": "^18.2.0",
"typescript": "5.1.3"
"typescript": "5.4.5"
},
"rollup": {
"globals": {
packages/react/src/components/StoreUpdater/index.tsx
+2 -2
View File
@@ -154,8 +154,8 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
else if (fieldName === 'nodeExtent') setNodeExtent(fieldValue as CoordinateExtent);
else if (fieldName === 'paneClickDistance') setPaneClickDistance(fieldValue as number);
// Renamed fields
else if (fieldName === 'fitView') store.setState({ fitViewOnInit: fieldValue as boolean });
else if (fieldName === 'fitViewOptions') store.setState({ fitViewOnInitOptions: fieldValue as FitViewOptions });
else if (fieldName === 'fitView') store.setState({ fitViewQueued: fieldValue as boolean });
else if (fieldName === 'fitViewOptions') store.setState({ fitViewOptions: fieldValue as FitViewOptions });
// General case
else store.setState({ [fieldName]: fieldValue });
}
packages/react/src/hooks/useReactFlow.ts
+20 -1
View File
@@ -15,7 +15,15 @@ import useViewportHelper from './useViewportHelper';
import { useStore, useStoreApi } from './useStore';
import { useBatchContext } from '../components/BatchProvider';
import { elementToRemoveChange, isEdge, isNode } from '../utils';
import type { ReactFlowInstance, Node, Edge, InternalNode, ReactFlowState, GeneralHelpers } from '../types';
import type {
ReactFlowInstance,
Node,
Edge,
InternalNode,
ReactFlowState,
GeneralHelpers,
FitViewOptions,
} from '../types';
const selector = (s: ReactFlowState) => !!s.panZoom;
@@ -271,6 +279,17 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
.connectionLookup.get(`${nodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`)
?.values() ?? []
),
fitView: async (options: FitViewOptions<NodeType> | undefined) => {
// We either create a new Promise or reuse the existing one
// Even if fitView is called multiple times in a row, we only end up with a single Promise
const fitViewResolver = store.getState().fitViewResolver ?? Promise.withResolvers<boolean>();
// We schedule a fitView by setting fitViewQueued and triggering a setNodes
store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });
batchContext.nodeQueue.push((nodes) => [...nodes]);
return fitViewResolver.promise;
},
};
}, []);
packages/react/src/hooks/useViewportHelper.ts
-25
View File
@@ -2,11 +2,8 @@ import { useMemo } from 'react';
import {
pointToRendererPoint,
getViewportForBounds,
getFitViewNodes,
fitView,
type XYPosition,
rendererPointToPoint,
getDimensions,
SnapGrid,
} from '@xyflow/system';
@@ -65,28 +62,6 @@ const useViewportHelper = (): ViewportHelperFunctions => {
const [x, y, zoom] = store.getState().transform;
return { x, y, zoom };
},
fitView: (options) => {
const { nodeLookup, minZoom, maxZoom, panZoom, domNode } = store.getState();
if (!panZoom || !domNode) {
return Promise.resolve(false);
}
const fitViewNodes = getFitViewNodes(nodeLookup, options);
const { width, height } = getDimensions(domNode);
return fitView(
{
nodes: fitViewNodes,
width,
height,
minZoom,
maxZoom,
panZoom,
},
options
);
},
setCenter: async (x, y, options) => {
const { width, height, maxZoom, panZoom } = store.getState();
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
packages/react/src/store/index.ts
+48 -92
View File
@@ -1,7 +1,5 @@
import { createWithEqualityFn } from 'zustand/traditional';
import {
getFitViewNodes,
fitView as fitViewSystem,
adoptUserNodes,
updateAbsolutePositions,
panBy as panBySystem,
@@ -15,11 +13,12 @@ import {
initialConnection,
NodeOrigin,
CoordinateExtent,
fitViewport,
} from '@xyflow/system';
import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
import getInitialState from './initialState';
import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types';
import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams } from '../types';
const createStore = ({
nodes,
@@ -42,11 +41,38 @@ const createStore = ({
nodeOrigin?: NodeOrigin;
nodeExtent?: CoordinateExtent;
}) =>
createWithEqualityFn<ReactFlowState>(
(set, get) => ({
createWithEqualityFn<ReactFlowState>((set, get) => {
async function resolveFitView() {
const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
if (!panZoom || !fitViewResolver) {
return;
}
await fitViewport(
{
nodes: nodeLookup,
width,
height,
panZoom,
minZoom,
maxZoom,
},
fitViewOptions
);
fitViewResolver.resolve(true);
/**
* wait for the fitViewport to resolve before deleting the resolver,
* we want to reuse the old resolver if the user calls fitView again in the mean time
*/
set({ fitViewResolver: null });
}
return {
...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
setNodes: (nodes: Node[]) => {
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
/*
* setNodes() is called exclusively in response to user actions:
* - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
@@ -55,14 +81,20 @@ const createStore = ({
* When this happens, we take the note objects passed by the user and extend them with fields
* relevant for internal React Flow operations.
*/
adoptUserNodes(nodes, nodeLookup, parentLookup, {
const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
nodeOrigin,
nodeExtent,
elevateNodesOnSelect,
checkEquality: true,
});
set({ nodes });
if (fitViewQueued && nodesInitialized) {
resolveFitView();
set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
} else {
set({ nodes });
}
},
setEdges: (edges: Edge[]) => {
const { connectionLookup, edgeLookup } = get();
@@ -88,20 +120,9 @@ const createStore = ({
* changes its dimensions, this function is called to measure the
* new dimensions and update the nodes.
*/
updateNodeInternals: (updates, params = { triggerFitView: true }) => {
const {
triggerNodeChanges,
nodeLookup,
parentLookup,
fitViewOnInit,
fitViewDone,
fitViewOnInitOptions,
domNode,
nodeOrigin,
nodeExtent,
debug,
fitViewSync,
} = get();
updateNodeInternals: (updates) => {
const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued } =
get();
const { changes, updatedInternals } = updateNodeInternalsSystem(
updates,
@@ -118,25 +139,9 @@ const createStore = ({
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
if (params.triggerFitView) {
// we call fitView once initially after all dimensions are set
let nextFitViewDone = fitViewDone;
if (!fitViewDone && fitViewOnInit) {
nextFitViewDone = fitViewSync({
...fitViewOnInitOptions,
nodes: fitViewOnInitOptions?.nodes,
});
}
/*
* here we are cirmumventing the onNodesChange handler
* in order to be able to display nodes even if the user
* has not provided an onNodesChange handler.
* Nodes are only rendered if they have a width and height
* attribute which they get from this handler.
*/
set({ fitViewDone: nextFitViewDone });
if (fitViewQueued) {
resolveFitView();
set({ fitViewQueued: false, fitViewOptions: undefined });
} else {
// we always want to trigger useStore calls whenever updateNodeInternals is called
set({});
@@ -332,54 +337,6 @@ const createStore = ({
return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
},
fitView: (options?: FitViewOptions): Promise<boolean> => {
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
if (!panZoom) {
return Promise.resolve(false);
}
const fitViewNodes = getFitViewNodes(nodeLookup, options);
return fitViewSystem(
{
nodes: fitViewNodes,
width,
height,
panZoom,
minZoom,
maxZoom,
},
options
);
},
/*
* we can't call an asnychronous function in updateNodeInternals
* for that we created this sync version of fitView
*/
fitViewSync: (options?: FitViewOptions): boolean => {
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
if (!panZoom) {
return false;
}
const fitViewNodes = getFitViewNodes(nodeLookup, options);
fitViewSystem(
{
nodes: fitViewNodes,
width,
height,
panZoom,
minZoom,
maxZoom,
},
options
);
return fitViewNodes.size > 0;
},
cancelConnection: () => {
set({
connection: { ...initialConnection },
@@ -390,8 +347,7 @@ const createStore = ({
},
reset: () => set({ ...getInitialState() }),
}),
Object.is
);
};
}, Object.is);
export { createStore };
packages/react/src/store/initialState.ts
+4 -3
View File
@@ -104,13 +104,14 @@ const getInitialState = ({
elementsSelectable: true,
elevateNodesOnSelect: true,
elevateEdgesOnSelect: false,
fitViewOnInit: false,
fitViewDone: false,
fitViewOnInitOptions: undefined,
selectNodesOnDrag: true,
multiSelectionActive: false,
fitViewQueued: fitView ?? false,
fitViewOptions: undefined,
fitViewResolver: null,
connection: { ...initialConnection },
connectionClickStartHandle: null,
connectOnClick: true,
packages/react/src/types/general.ts
+1 -12
View File
@@ -109,7 +109,7 @@ export type FitViewParams<NodeType extends Node = Node> = FitViewParamsBase<Node
* @public
*/
export type FitViewOptions<NodeType extends Node = Node> = FitViewOptionsBase<NodeType>;
export type FitView = (fitViewOptions?: FitViewOptions) => Promise<boolean>;
export type FitView<NodeType extends Node = Node> = (fitViewOptions?: FitViewOptions<NodeType>) => Promise<boolean>;
export type OnInit<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (
reactFlowInstance: ReactFlowInstance<NodeType, EdgeType>
) => void;
@@ -156,17 +156,6 @@ export type ViewportHelperFunctions = {
* @returns Viewport
*/
getViewport: GetViewport;
/**
* Fits the view.
*
* @param options.padding - optional padding
* @param options.includeHiddenNodes - optional includeHiddenNodes
* @param options.minZoom - optional minZoom
* @param options.maxZoom - optional maxZoom
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.nodes - optional nodes to fit the view to
*/
fitView: FitView;
/**
* Sets the center of the view to the given position.
*
packages/react/src/types/instance.ts
+12 -1
View File
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-namespace */
import type { HandleConnection, HandleType, NodeConnection, Rect, Viewport } from '@xyflow/system';
import type { Node, Edge, ViewportHelperFunctions, InternalNode } from '.';
import type { Node, Edge, ViewportHelperFunctions, InternalNode, FitView } from '.';
export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
nodes: NodeType[];
@@ -217,6 +217,17 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
nodeId: string;
handleId?: string | null;
}) => NodeConnection[];
// /**
// * Fits the view.
// *
// * @param options.padding - optional padding
// * @param options.includeHiddenNodes - optional includeHiddenNodes
// * @param options.minZoom - optional minZoom
// * @param options.maxZoom - optional maxZoom
// * @param options.duration - optional duration. If set, a transition will be applied
// * @param options.nodes - optional nodes to fit the view to
// */
fitView: FitView<NodeType>;
};
/**
* The `ReactFlowInstance` provides a collection of methods to query and manipulate
packages/react/src/types/store.ts
+3 -5
View File
@@ -119,9 +119,9 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
connectOnClick: boolean;
defaultEdgeOptions?: DefaultEdgeOptions;
fitViewOnInit: boolean;
fitViewDone: boolean;
fitViewOnInitOptions: FitViewOptions | undefined;
fitViewQueued: boolean;
fitViewOptions: FitViewOptions | undefined;
fitViewResolver: PromiseWithResolvers<boolean> | null;
onNodesDelete?: OnNodesDelete<NodeType>;
onEdgesDelete?: OnEdgesDelete<EdgeType>;
@@ -168,8 +168,6 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
panBy: PanBy;
fitView: (options?: FitViewOptions) => Promise<boolean>;
fitViewSync: (options?: FitViewOptions) => boolean;
setPaneClickDistance: (distance: number) => void;
};
packages/svelte/package.json
+1 -1
View File
@@ -80,7 +80,7 @@
"svelte-eslint-parser": "^0.33.1",
"svelte-preprocess": "^5.1.3",
"tslib": "^2.6.2",
"typescript": "5.4.2"
"typescript": "5.4.5"
},
"peerDependencies": {
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+1 -1
View File
@@ -117,7 +117,7 @@
store.syncViewport(viewport);
if (fitView !== undefined) {
store.fitViewOnInit.set(fitView);
store.fitViewQueued.set(fitView);
}
if (fitViewOptions) {
packages/svelte/src/lib/store/index.ts
+10 -58
View File
@@ -2,7 +2,6 @@ import { getContext, setContext } from 'svelte';
import { derived, get, writable } from 'svelte/store';
import {
createMarkerIds,
fitView as fitViewSystem,
getElementsToRemove,
panBy as panBySystem,
updateNodeInternals as updateNodeInternalsSystem,
@@ -19,9 +18,7 @@ import {
type UpdateConnection,
type ConnectionState,
type NodeOrigin,
getFitViewNodes,
updateAbsolutePositions,
getDimensions
updateAbsolutePositions
} from '@xyflow/system';
import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -113,15 +110,6 @@ export function createStore({
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
const fitViewOptions = get(store.fitViewOptions);
const fitViewOnInitDone = fitViewSync({
...fitViewOptions,
nodes: fitViewOptions?.nodes
});
store.fitViewOnInitDone.set(fitViewOnInitDone);
}
for (const change of changes) {
const node = nodeLookup.get(change.id)?.internals.userNode;
@@ -156,52 +144,17 @@ export function createStore({
}
function fitView(options?: FitViewOptions) {
const panZoom = get(store.panZoom);
const domNode = get(store.domNode);
// We either create a new Promise or reuse the existing one
// Even if fitView is called multiple times in a row, we only end up with a single Promise
const fitViewResolver = get(store.fitViewResolver) ?? Promise.withResolvers<boolean>();
if (!panZoom || !domNode) {
return Promise.resolve(false);
}
// We schedule a fitView by setting fitViewQueued and triggering a setNodes
store.fitViewQueued.set(true);
store.fitViewOptions.set(options);
store.fitViewResolver.set(fitViewResolver);
store.nodes.set(get(store.nodes));
const { width, height } = getDimensions(domNode);
const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
return fitViewSystem(
{
nodes: fitViewNodes,
width,
height,
minZoom: get(store.minZoom),
maxZoom: get(store.maxZoom),
panZoom
},
options
);
}
function fitViewSync(options?: FitViewOptions) {
const panZoom = get(store.panZoom);
if (!panZoom) {
return false;
}
const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
fitViewSystem(
{
nodes: fitViewNodes,
width: get(store.width),
height: get(store.height),
minZoom: get(store.minZoom),
maxZoom: get(store.maxZoom),
panZoom
},
options
);
return fitViewNodes.size > 0;
return fitViewResolver.promise;
}
function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) {
@@ -395,7 +348,6 @@ export function createStore({
}
function reset() {
store.fitViewOnInitDone.set(false);
store.selectionRect.set(null);
store.selectionRectMode.set(null);
store.snapGrid.set(null);
packages/svelte/src/lib/store/initial-store.ts
+32 -9
View File
@@ -112,9 +112,32 @@ export const getInitialStore = ({
viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
}
const fitViewQueued = writable<boolean>(false);
const fitViewOptions = writable<FitViewOptions | undefined>(undefined);
const fitViewResolver = writable<PromiseWithResolvers<boolean> | null>(null);
const panZoom = writable<PanZoomInstance | null>(null);
const widthStore = writable<number>(500);
const heightStore = writable<number>(500);
const minZoom = writable<number>(0.5);
const maxZoom = writable<number>(2);
return {
flowId: writable<string | null>(null),
nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin, storeNodeExtent),
nodes: createNodesStore(
nodes,
nodeLookup,
parentLookup,
storeNodeOrigin,
storeNodeExtent,
fitViewQueued,
fitViewOptions,
fitViewResolver,
panZoom,
widthStore,
heightStore,
minZoom,
maxZoom
),
nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
parentLookup: readable<ParentLookup<InternalNode>>(parentLookup),
edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
@@ -122,20 +145,20 @@ export const getInitialStore = ({
edges: createEdgesStore(edges, connectionLookup, edgeLookup),
visibleEdges: readable<EdgeLayouted[]>([]),
connectionLookup: readable<ConnectionLookup>(connectionLookup),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
maxZoom: writable<number>(2),
width: widthStore,
height: heightStore,
minZoom,
maxZoom,
nodeOrigin: writable<NodeOrigin>(storeNodeOrigin),
nodeDragThreshold: writable<number>(1),
nodeExtent: writable<CoordinateExtent>(storeNodeExtent),
translateExtent: writable<CoordinateExtent>(infiniteExtent),
autoPanOnNodeDrag: writable<boolean>(true),
autoPanOnConnect: writable<boolean>(true),
fitViewOnInit: writable<boolean>(false),
fitViewOnInitDone: writable<boolean>(false),
fitViewOptions: writable<FitViewOptions>(undefined),
panZoom: writable<PanZoomInstance | null>(null),
fitViewQueued,
fitViewOptions,
fitViewResolver,
panZoom,
snapGrid: writable<SnapGrid | null>(null),
dragging: writable<boolean>(false),
selectionRect: writable<SelectionRect | null>(null),
packages/svelte/src/lib/store/utils.ts
+41 -4
View File
@@ -17,10 +17,18 @@ import {
type ParentLookup,
type NodeOrigin,
infiniteExtent,
type CoordinateExtent
type CoordinateExtent,
fitViewport
} from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
import type {
DefaultEdgeOptions,
DefaultNodeOptions,
Edge,
FitViewOptions,
InternalNode,
Node
} from '$lib/types';
// we need to sync the user nodes and the internal nodes so that the user can receive the updates
// made by Svelte Flow (like dragging or selecting a node).
@@ -134,7 +142,15 @@ export const createNodesStore = (
nodeLookup: NodeLookup<InternalNode>,
parentLookup: ParentLookup<InternalNode>,
nodeOrigin: NodeOrigin = [0, 0],
nodeExtent: CoordinateExtent = infiniteExtent
nodeExtent: CoordinateExtent = infiniteExtent,
fitViewQueued: Writable<boolean>,
fitViewOptions: Writable<FitViewOptions | undefined>,
fitViewResolver: Writable<PromiseWithResolvers<boolean> | null>,
panZoom: Writable<PanZoomInstance | null>,
width: Writable<number>,
height: Writable<number>,
minZoom: Writable<number>,
maxZoom: Writable<number>
): {
subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
update: (this: void, updater: Updater<Node[]>) => void;
@@ -148,7 +164,7 @@ export const createNodesStore = (
let elevateNodesOnSelect = true;
const _set = (nds: Node[]): Node[] => {
adoptUserNodes(nds, nodeLookup, parentLookup, {
const nodesInitialized = adoptUserNodes(nds, nodeLookup, parentLookup, {
elevateNodesOnSelect,
nodeOrigin,
nodeExtent,
@@ -156,6 +172,27 @@ export const createNodesStore = (
checkEquality: false
});
if (get(fitViewQueued) && nodesInitialized && get(panZoom)) {
const fitViewPromise = fitViewport(
{
nodes: nodeLookup,
width: get(width),
height: get(height),
panZoom: get(panZoom)!,
minZoom: get(minZoom),
maxZoom: get(maxZoom)
},
get(fitViewOptions)
);
fitViewPromise.then((value) => {
get(fitViewResolver)?.resolve(value);
fitViewResolver.set(null);
});
fitViewQueued.set(false);
fitViewOptions.set(undefined);
}
value = nds;
set(value);
packages/system/package.json
+1 -1
View File
@@ -63,7 +63,7 @@
"@xyflow/eslint-config": "workspace:*",
"@xyflow/rollup-config": "workspace:*",
"@xyflow/tsconfig": "workspace:*",
"typescript": "5.1.3"
"typescript": "5.4.5"
},
"rollup": {
"globals": {
packages/system/src/types/general.ts
+15 -1
View File
@@ -90,11 +90,25 @@ export type FitViewParamsBase<NodeType extends NodeBase> = {
maxZoom: number;
};
export type PaddingUnit = 'px' | '%';
export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
export type Padding =
| PaddingWithUnit
| {
top?: PaddingWithUnit;
right?: PaddingWithUnit;
bottom?: PaddingWithUnit;
left?: PaddingWithUnit;
x?: PaddingWithUnit;
y?: PaddingWithUnit;
};
/**
* @inline
*/
export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
padding?: number;
padding?: Padding;
includeHiddenNodes?: boolean;
minZoom?: number;
maxZoom?: number;
packages/system/src/utils/general.ts
+128 -6
View File
@@ -10,6 +10,8 @@ import type {
Transform,
InternalNodeBase,
NodeLookup,
Padding,
PaddingWithUnit,
} from '../types';
import { type Viewport } from '../types';
import { getNodePositionWithOrigin, isInternalNodeBase } from './graph';
@@ -173,6 +175,105 @@ export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Tra
};
};
/**
* Parses a single padding value to a number
* @internal
* @param padding - Padding to parse
* @param viewport - Width or height of the viewport
* @returns The padding in pixels
*/
function parsePadding(padding: PaddingWithUnit, viewport: number): number {
if (typeof padding === 'number') {
return Math.floor(viewport - viewport / (1 + padding));
}
if (typeof padding === 'string' && padding.endsWith('px')) {
const paddingValue = parseFloat(padding);
if (!Number.isNaN(paddingValue)) {
return Math.floor(paddingValue);
}
}
if (typeof padding === 'string' && padding.endsWith('%')) {
const paddingValue = parseFloat(padding);
if (!Number.isNaN(paddingValue)) {
return Math.floor(viewport * paddingValue * 0.01);
}
}
console.error(
`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`
);
return 0;
}
/**
* Parses the paddings to an object with top, right, bottom, left, x and y paddings
* @internal
* @param padding - Padding to parse
* @param width - Width of the viewport
* @param height - Height of the viewport
* @returns An object with the paddings in pixels
*/
function parsePaddings(
padding: Padding,
width: number,
height: number
): { top: number; bottom: number; left: number; right: number; x: number; y: number } {
if (typeof padding === 'string' || typeof padding === 'number') {
const paddingY = parsePadding(padding, height);
const paddingX = parsePadding(padding, width);
return {
top: paddingY,
right: paddingX,
bottom: paddingY,
left: paddingX,
x: paddingX * 2,
y: paddingY * 2,
};
}
if (typeof padding === 'object') {
const top = parsePadding(padding.top ?? padding.y ?? 0, height);
const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
const left = parsePadding(padding.left ?? padding.x ?? 0, width);
const right = parsePadding(padding.right ?? padding.x ?? 0, width);
return { top, right, bottom, left, x: left + right, y: top + bottom };
}
return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0 };
}
/**
* Calculates the resulting paddings if the new viewport is applied
* @internal
* @param bounds - Bounds to fit inside viewport
* @param x - X position of the viewport
* @param y - Y position of the viewport
* @param zoom - Zoom level of the viewport
* @param width - Width of the viewport
* @param height - Height of the viewport
* @returns An object with the minimum padding required to fit the bounds inside the viewport
*/
function calculateAppliedPaddings(bounds: Rect, x: number, y: number, zoom: number, width: number, height: number) {
const { x: left, y: top } = rendererPointToPoint(bounds, [x, y, zoom]);
const { x: boundRight, y: boundBottom } = rendererPointToPoint(
{ x: bounds.x + bounds.width, y: bounds.y + bounds.height },
[x, y, zoom]
);
const right = width - boundRight;
const bottom = height - boundBottom;
return {
left: Math.floor(left),
top: Math.floor(top),
right: Math.floor(right),
bottom: Math.floor(bottom),
};
}
/**
* Returns a viewport that encloses the given bounds with optional padding.
* @public
@@ -186,8 +287,8 @@ export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Tra
* @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
* @example
* const { x, y, zoom } = getViewportForBounds(
*{ x: 0, y: 0, width: 100, height: 100},
*1200, 800, 0.5, 2);
* { x: 0, y: 0, width: 100, height: 100},
* 1200, 800, 0.5, 2);
*/
export const getViewportForBounds = (
bounds: Rect,
@@ -195,18 +296,39 @@ export const getViewportForBounds = (
height: number,
minZoom: number,
maxZoom: number,
padding: number
padding: Padding
): Viewport => {
const xZoom = width / (bounds.width * (1 + padding));
const yZoom = height / (bounds.height * (1 + padding));
// First we resolve all the paddings to actual pixel values
const p = parsePaddings(padding, width, height);
const xZoom = (width - p.x) / bounds.width;
const yZoom = (height - p.y) / bounds.height;
// We calculate the new x, y, zoom for a centered view
const zoom = Math.min(xZoom, yZoom);
const clampedZoom = clamp(zoom, minZoom, maxZoom);
const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2;
const x = width / 2 - boundsCenterX * clampedZoom;
const y = height / 2 - boundsCenterY * clampedZoom;
return { x, y, zoom: clampedZoom };
// Then we calculate the minimum padding, to respect asymmetric paddings
const newPadding = calculateAppliedPaddings(bounds, x, y, clampedZoom, width, height);
// We only want to have an offset if the newPadding is smaller than the required padding
const offset = {
left: Math.min(newPadding.left - p.left, 0),
top: Math.min(newPadding.top - p.top, 0),
right: Math.min(newPadding.right - p.right, 0),
bottom: Math.min(newPadding.bottom - p.bottom, 0),
};
return {
x: x - offset.left + offset.right,
y: y - offset.top + offset.bottom,
zoom: clampedZoom,
};
};
export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
packages/system/src/utils/graph.ts
+10 -5
View File
@@ -333,10 +333,10 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
};
export function getFitViewNodes<
function getFitViewNodes<
Params extends NodeLookup<InternalNodeBase<NodeBase>>,
Options extends FitViewOptionsBase<NodeBase>
>(nodeLookup: Params, options?: Pick<Options, 'nodes' | 'includeHiddenNodes'>) {
>(nodeLookup: Params, options?: Options) {
const fitViewNodes: NodeLookup = new Map();
const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
@@ -351,15 +351,20 @@ export function getFitViewNodes<
return fitViewNodes;
}
export async function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
export async function fitViewport<
Params extends FitViewParamsBase<NodeBase>,
Options extends FitViewOptionsBase<NodeBase>
>(
{ nodes, width, height, panZoom, minZoom, maxZoom }: Params,
options?: Omit<Options, 'nodes' | 'includeHiddenNodes'>
): Promise<boolean> {
if (nodes.size === 0) {
return Promise.resolve(false);
return Promise.resolve(true);
}
const bounds = getInternalNodesBounds(nodes);
const nodesToFit = getFitViewNodes(nodes, options);
const bounds = getInternalNodesBounds(nodesToFit);
const viewport = getViewportForBounds(
bounds,
packages/system/src/utils/store.ts
+11 -1
View File
@@ -85,9 +85,10 @@ export function adoptUserNodes<NodeType extends NodeBase>(
nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
options?: UpdateNodesOptions<NodeType>
) {
): boolean {
const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
let nodesInitialized = true;
const tmpLookup = new Map(nodeLookup);
const selectedNodeZ: number = _options?.elevateNodesOnSelect ? 1000 : 0;
@@ -123,10 +124,19 @@ export function adoptUserNodes<NodeType extends NodeBase>(
nodeLookup.set(userNode.id, internalNode);
}
if (
(!internalNode.measured || !internalNode.measured.width || !internalNode.measured.height) &&
!internalNode.hidden
) {
nodesInitialized = false;
}
if (userNode.parentId) {
updateChildNode(internalNode, nodeLookup, parentLookup, options);
}
}
return nodesInitialized;
}
function updateParentLookup<NodeType extends NodeBase>(