diff --git a/examples/vite-app/src/examples/Layouting/index.tsx b/examples/vite-app/src/examples/Layouting/index.tsx
index 6e607551..9a9ed122 100644
--- a/examples/vite-app/src/examples/Layouting/index.tsx
+++ b/examples/vite-app/src/examples/Layouting/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
import ReactFlow, {
Controls,
ReactFlowProvider,
@@ -10,6 +10,8 @@ import ReactFlow, {
useEdgesState,
MarkerType,
EdgeMarker,
+ Panel,
+ useReactFlow,
} from 'reactflow';
import dagre from 'dagre';
@@ -29,6 +31,7 @@ const nodeExtent: CoordinateExtent = [
const LayoutFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges);
+ const { fitView } = useReactFlow();
const onConnect = useCallback(
(connection: Connection) => {
@@ -85,31 +88,31 @@ const LayoutFlow = () => {
return (
-
- onLayout('TB')}
- onNodesChange={onNodesChange}
- onEdgesChange={onEdgesChange}
- >
-
-
-
-
-
-
-
-
-
+
onLayout('TB')}
+ onNodesChange={onNodesChange}
+ onEdgesChange={onEdgesChange}
+ >
+
+
+
+
+
+
+
+
+
+
);
};
-export default LayoutFlow;
+export default () => (
+
+
+
+);
diff --git a/examples/vite-app/src/examples/Layouting/layouting.module.css b/examples/vite-app/src/examples/Layouting/layouting.module.css
index b22c5ad9..28a4b5e6 100644
--- a/examples/vite-app/src/examples/Layouting/layouting.module.css
+++ b/examples/vite-app/src/examples/Layouting/layouting.module.css
@@ -2,10 +2,3 @@
flex-grow: 1;
position: relative;
}
-
-.controls {
- position: absolute;
- right: 10px;
- top: 10px;
- z-index: 10;
-}
diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts
index 9b5a4228..994fbf20 100644
--- a/packages/core/src/store/utils.ts
+++ b/packages/core/src/store/utils.ts
@@ -143,14 +143,13 @@ export function fitView(get: StoreApi['getState'], options: Inte
if (d3initialized && (isInitialFitView || !options.initial)) {
const nodes = getNodes().filter((n) => {
- const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden);
- let shouldInclude = true;
+ const isVisible = options.includeHiddenNodes ? n.width && n.height : !n.hidden;
if (options.nodes?.length) {
- shouldInclude = options.nodes.includes(n.id);
+ return isVisible && options.nodes.some((optionNode) => optionNode.id === n.id);
}
- return isVisible && shouldInclude;
+ return isVisible;
});
const nodesInitialized = nodes.every((n) => n.width && n.height);
diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
index bf9a779f..f628727e 100644
--- a/packages/core/src/types/general.ts
+++ b/packages/core/src/types/general.ts
@@ -76,7 +76,7 @@ export type FitViewOptions = {
minZoom?: number;
maxZoom?: number;
duration?: number;
- nodes?: string[];
+ nodes?: (Partial & { id: Node['id'] })[];
};
export type OnConnectStartParams = {