react-flow自定义放大、缩小、居中工具栏

前言

最近在使用react-flow过程中发现：dagre 不能使拓扑元素居中。于是另想了方法，通过工具栏的居中按钮操作居中。

具体效果

一进入界面就是居中状态，点击工具栏第一个按钮也是居中，第二个按钮是放大，第三个按钮是缩小

具体实现

新建组件

其中我用到了antd的图标组件，放大、缩小由 reactflow 提供，居中需要通过 focusNode 方法实现

import { Button } from "antd";
import React from "react";
import { useEffect } from "react";
import { useStoreApi, useReactFlow, Panel } from "reactflow";
import { FullscreenExitOutlined, PlusOutlined, MinusOutlined } from "@ant-design/icons";

const panelStyle = {
	color: "#777",
	fontSize: 12,
	margin: 5
};

const buttonStyle = {
	width: "24px",
	height: "24px",
	lineHeight: "24px",
	fontSize: 12,
	margin: 0,
	padding: 0,
	border: "none",
	borderRadius: 0,
	background: "#134276",
	color: "#fff",
	borderRight: "1px solid #184a81"
};

export default () => {
	const store = useStoreApi();
	const { zoomIn, zoomOut, setCenter } = useReactFlow();

	const focusNode = () => {
		const { nodeInternals } = store.getState();
		const nodes = Array.from(nodeInternals).map(([, node]) => node);

		if (nodes.length > 0) {
			const node = nodes[0];

			const x = node.position.x + node.width / 2;
			const y = node.position.y + node.height / 2;
			const zoom = 1;

			setCenter(x, y + 300, { zoom, duration: 50 });
		}
	};

	useEffect(() => {
		focusNode();
	});

	return (
		<Panel position="top-left" style={panelStyle}>
			<div>
				<Button onClick={focusNode} style={buttonStyle}>
					<FullscreenExitOutlined />
				</Button>
				<Button onClick={zoomIn} style={buttonStyle}>
					<PlusOutlined />
				</Button>
				<Button onClick={zoomOut} style={buttonStyle}>
					<MinusOutlined />
				</Button>
			</div>
		</Panel>
	);
};

组件引入

import React, { useCallback } from 'react';
import ReactFlow, { ReactFlowProvider, addEdge, useNodesState, useEdgesState } from 'reactflow';

import ControlTools from './Buttons';

import 'reactflow/dist/style.css';

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
];

const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
  },
  { id: 'e1-3', source: '1', target: '3' },
];

const ProviderFlow = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);

  return (
    <ReactFlowProvider>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      >
        <ControlTools />
      </ReactFlow>
    </ReactFlowProvider>
  );
};

export default ProviderFlow;

 总结

在引入自定义的tool组件时需要用：ReactFlowProvider 包装。