Zoom In, Zoom Out, fitview, and toggle interactivity

[Muhammad1Siddique]

Please describe the feature that you want to propose

import { useCallback, useEffect, useState } from 'react'; import ReactFlow, { useReactFlow, applyEdgeChanges, applyNodeChanges, ReactFlowProvider, MiniMap, Controls, ControlButton, OnNodesChange, OnEdgesChange, NodeMouseHandler, Node, Edge, } from 'reactflow';

import { useControls } from 'leva'; import useInitialData from './initialElements'; import CustomNode from './customNode'; import useAnimatedNodes from './hooks/useAnimatedNodes'; import useExpandCollapse from './hooks/useExpandCollapse'; import { MdZoomIn, MdZoomOut, MdCenterFocusStrong, MdPanTool } from 'react-icons/md'; import 'reactflow/dist/style.css'; import FlowStyle from "../../../styles/custom/flow.module.css" const proOptions = { account: 'paid-pro', hideAttribution: true };

const nodeTypes = { custom: CustomNode, };

type ExpandCollapseExampleProps = { treeWidth?: number; treeHeight?: number; animationDuration?: number; };

function ReactFlowPro({ treeWidth = 260, treeHeight = 100, animationDuration = 300, }: ExpandCollapseExampleProps = {}) {

const ErrorHandle = useCallback((apiId:string, error:any) => { console.error(Error from API ${apiId}:, error); }, []);

const reactFlowInstance = useReactFlow();

const [interactive, setInteractive] = useState(true);

const toggleInteractive = () => { setInteractive(!interactive); };

const { initialNodes, initialEdges } = useInitialData({ ErrorHandle });

const [nodes, setNodes] = useState<Node[]>(initialNodes); const [edges, setEdges] = useState<Edge[]>(initialEdges);

const { nodes: visibleNodes, edges: visibleEdges } = useExpandCollapse( nodes, edges, { treeWidth, treeHeight } ); const { nodes: animatedNodes } = useAnimatedNodes(visibleNodes, { animationDuration, });

const onNodesChange: OnNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)), [] ); const onEdgesChange: OnEdgesChange = useCallback( (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), [] );

const onNodeClick: NodeMouseHandler = useCallback( (_, node) => { setNodes((nds) => nds.map((n) => { if (n.id === node.id) { return { ...n, data: { ...n.data, expanded: !n.data.expanded }, }; }

      return n;
    })
  );
},
[setNodes]

);

useEffect(() => { if(initialEdges && initialEdges.length !== 0 && initialNodes && initialNodes.length !== 0){

  setNodes(initialNodes);
  setEdges(initialEdges);
}

}, [initialNodes, initialEdges])

return ( <ReactFlow fitView nodes={animatedNodes} edges={visibleEdges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onNodeClick={onNodeClick} proOptions={proOptions} nodeTypes={nodeTypes} nodesDraggable={true} nodesConnectable={true} className={FlowStyle.viewport} zoomOnDoubleClick={false} elementsSelectable={true}

{/* <ControlButton onClick={() => reactFlowInstance.zoomIn()} title="Zoom In"> <ControlButton onClick={() => reactFlowInstance.zoomOut()} title="Zoom Out"> <ControlButton onClick={() => reactFlowInstance.fitView()} title="Fit View">

*/}

); }

function ReactFlowWrapper() {

const levaProps = useControls({ treeWidth: { value: 330, min: 0, max: 440, }, treeHeight: { value: 100, min: 0, max: 200, }, animationDuration: { value: 300, min: 0, max: 600, }, });

return (

); }

export default ReactFlowWrapper;

[bcakmakoglu]

There's a lot of copy paste in here but not a single sentence about what this request is about. Alas, I don't think any of us can read minds (yet).

A feature request should be written out properly, outline what is missing and what this request is supposed to cover and why it's a benefit to the library to have this feature added.

[Muhammad1Siddique]

I want to add these buttons to the flow

[bcakmakoglu]

Those buttons come from the <Controls> component.

[Muhammad1Siddique]

bug is resolved thanks