fix(react) fitViewOptions.nodes are now working as intended

This commit is contained in:
Peter
2023-09-25 13:46:22 +02:00
parent ada5b94673
commit 439916e619
5 changed files with 7 additions and 10 deletions
@@ -221,7 +221,7 @@ const OverviewFlow = () => {
onEdgeMouseLeave={onEdgeMouseLeave} onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeDoubleClick={onEdgeDoubleClick} onEdgeDoubleClick={onEdgeDoubleClick}
fitView fitView
fitViewOptions={{ padding: 0.1, nodes: [{ id: '1' }] }} fitViewOptions={{ padding: 0.1 /*nodes: [{ id: '1' }]*/ }}
attributionPosition="top-right" attributionPosition="top-right"
maxZoom={Infinity} maxZoom={Infinity}
onNodesDelete={onNodesDelete} onNodesDelete={onNodesDelete}
@@ -131,7 +131,7 @@
{edgeTypes} {edgeTypes}
fitView fitView
fitViewOptions={{ fitViewOptions={{
padding: 10, padding: 0.1,
nodes: [ nodes: [
{ {
id: '1' id: '1'
+3 -3
View File
@@ -82,7 +82,7 @@ const createRFStore = () =>
let nextFitViewDone = fitViewDone; let nextFitViewDone = fitViewDone;
if (!fitViewDone && fitViewOnInit) { if (!fitViewDone && fitViewOnInit) {
nextFitViewDone = fitView({ nextFitViewDone = fitView(nextNodes, {
...fitViewOnInitOptions, ...fitViewOnInitOptions,
nodes: fitViewOnInitOptions?.nodes || nextNodes, nodes: fitViewOnInitOptions?.nodes || nextNodes,
}); });
@@ -241,8 +241,8 @@ const createRFStore = () =>
const { transform, width, height, panZoom, translateExtent } = get(); const { transform, width, height, panZoom, translateExtent } = get();
return panBySystem({ delta, panZoom, transform, translateExtent, width, height }); return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
}, },
fitView: (options?: FitViewOptions): boolean => { fitView: (nodes: Node[], options?: FitViewOptions): boolean => {
const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get(); const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get();
if (!panZoom) { if (!panZoom) {
return false; return false;
+1 -1
View File
@@ -155,7 +155,7 @@ export type ReactFlowActions = {
reset: () => void; reset: () => void;
triggerNodeChanges: (changes: NodeChange[]) => void; triggerNodeChanges: (changes: NodeChange[]) => void;
panBy: PanBy; panBy: PanBy;
fitView: (options?: FitViewOptions) => boolean; fitView: (nodes: Node[], options?: FitViewOptions) => boolean;
}; };
export type ReactFlowState = ReactFlowStore & ReactFlowActions; export type ReactFlowState = ReactFlowStore & ReactFlowActions;
+1 -4
View File
@@ -171,7 +171,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
options?: Options options?: Options
) { ) {
const filteredNodes = nodes.filter((n) => { const filteredNodes = nodes.filter((n) => {
const isVisible = options?.includeHiddenNodes ? n.width && n.height : !n.hidden; const isVisible = n.width && n.height && (options?.includeHiddenNodes || !n.hidden);
if (options?.nodes?.length) { if (options?.nodes?.length) {
return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id); return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
@@ -180,11 +180,8 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
return isVisible; return isVisible;
}); });
console.log(filteredNodes);
if (filteredNodes.length > 0) { if (filteredNodes.length > 0) {
const bounds = getRectOfNodes(filteredNodes, nodeOrigin); const bounds = getRectOfNodes(filteredNodes, nodeOrigin);
console.log(bounds);
const [x, y, zoom] = getTransformForBounds( const [x, y, zoom] = getTransformForBounds(
bounds, bounds,