我们最近发布了 React Flow 2023 年终调查的结果，其中包含 交互式演示 的主要发现，使用 React Flow 本身。这个幻灯片应用中内置了很多有用的功能，所以我们想分享我们是如何构建它的！

¥We recently published the findings from our React Flow 2023 end-of-year survey with an interactive presentation of the key findings, using React Flow itself. There were lots of useful bits built into this slideshow app, so we wanted to share how we built it!

在本教程结束时，你将构建一个演示应用

¥By the end of this tutorial, you will have built a presentation app with

• 支持 markdown 幻灯片

  ¥Support for markdown slides

• 视口周围的键盘导航

  ¥Keyboard navigation around the viewport

• 自动布局

  ¥Automatic layouting

• 单击拖动平移导航（Prezi 风格）

  ¥Click-drag panning navigation (à la Prezi)

在此过程中，你将学习一些有关布局算法、创建静态流和自定义节点的基础知识。

¥Along the way, you’ll learn a bit about the basics of layouting algorithms, creating static flows, and custom nodes.

完成后，应用将如下所示！

¥Once you’re done, the app will look like this!

要继续本教程，我们假设你对 React  和 React Flow 有基本的了解，但如果你在途中遇到困难，请随时通过 Discord  与我们联系！

¥To follow along with this tutorial we’ll assume you have a basic understanding of React  and React Flow, but if you get stuck on the way feel free to reach out to us on Discord !

以下是 带有最终代码的存储库 ，如果你想跳过或在我们进行过程中参考它。

¥Here’s the repo with the final code  if you’d like to skip ahead or refer to it as we go.

让我们开始吧！

¥Let’s get started!

设置项目

¥Setting up the project

我们建议在启动新的 React Flow 项目时使用 Vite ，这次我们也将使用 TypeScript。你可以使用以下命令搭建新项目：

¥We like to recommend using Vite  when starting new React Flow projects, and this time we’ll use TypeScript too. You can scaffold a new project with the following command:

npm create vite@latest -- --template react-ts

npm create vite@latest -- --template react-ts
# couldn't auto-convert command

npm create vite@latest -- --template react-ts
# couldn't auto-convert command

bunx create-vite@latest --template react-ts

如果你更喜欢跟随 JavaScript，请随意使用 react 模板。你也可以使用我们的 Codesandbox 模板在浏览器中继续操作：

¥If you’d prefer to follow along with JavaScript feel free to use the react template instead. You can also follow along in your browser by using our Codesandbox templates:

除了 React Flow，我们只需要引入一个依赖 react-remark，以帮助我们在幻灯片中渲染 markdown。

¥Besides React Flow we only need to pull in one dependency, react-remark, to help us render markdown in our slides.

npm install @xyflow/react react-remark

pnpm add @xyflow/react react-remark

yarn add @xyflow/react react-remark

bun add @xyflow/react react-remark

我们将修改生成的 main.tsx 以包含 React Flow 的样式，并将应用封装在 <ReactFlowProvider /> 中，以确保我们可以访问组件内的 React Flow 实例；

¥We’ll modify the generated main.tsx to include React Flow’s styles, as well as wrap the app in a <ReactFlowProvider /> to make sure we can access the React Flow instance inside our components;

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ReactFlowProvider } from '@xyflow/react';
 
import App from './App';
 
import '@xyflow/react/dist/style.css';
import './index.css';
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ReactFlowProvider>
      {/* The parent element of the React Flow component needs a width and a height
          to work properly. If you're styling your app as you follow along, you
          can remove this div and apply styles to the #root element in your CSS.
       */}
      <div style={{ width: '100vw', height: '100vh' }}>
        <App />
      </div>
    </ReactFlowProvider>
  </React.StrictMode>,
);

本教程将略过应用的样式，因此请随意使用你熟悉的任何 CSS 框架或样式解决方案。如果你要以不同于编写 CSS 的方式设计应用，例如使用 样式组件 或 Tailwind CSS，则可以跳过导入到 index.css。

¥This tutorial is going to gloss over the styling of the app, so feel free to use any CSS framework or styling solution you’re familiar with. If you’re going to style your app differently from just writing CSS, for example with Styled Components or Tailwind CSS, you can skip the import to index.css.

我们演示文稿的每张幻灯片都将是画布上的一个节点，因此让我们创建一个新文件 Slide.tsx，它将是我们用于渲染每张幻灯片的自定义节点。

¥Each slide of our presentation will be a node on the canvas, so let’s create a new file Slide.tsx that will be our custom node used to render each slide.

import { type Node, type NodeProps } from '@xyflow/react';
 
export const SLIDE_WIDTH = 1920;
export const SLIDE_HEIGHT = 1080;
 
export type SlideNode = Node<SlideData, 'slide'>;
 
export type SlideData = {};
 
const style = {
  width: `${SLIDE_WIDTH}px`,
  height: `${SLIDE_HEIGHT}px`,
} satisfies React.CSSProperties;
 
export function Slide({ data }: NodeProps<SlideNode>) {
  return (
    <article className="slide nodrag" style={style}>
      <div>Hello, React Flow!</div>
    </article>
  );
}

我们在这里将幻灯片宽度和高度设置为常量（而不是在 CSS 中设置节点样式），因为我们稍后需要访问这些尺寸。我们还删除了 SlideData 类型，以便我们可以正确地键入组件的 props。

¥We’re setting the slide width and height as constants here (rather than styling the node in CSS) because we’ll want access to those dimensions later on. We’ve also stubbed out the SlideData type so we can properly type the component’s props.

最后要做的是注册我们的新自定义节点并在屏幕上显示一些内容。

¥The last thing to do is to register our new custom node and show something on the screen.

import { ReactFlow } from '@xyflow/react';
import { Slide } from './Slide.tsx';
 
const nodeTypes = {
  slide: Slide,
};
 
export default function App() {
  const nodes = [
    { id: '0', type: 'slide', position: { x: 0, y: 0 }, data: {} },
  ];
 
  return <ReactFlow nodes={nodes} nodeTypes={nodeTypes} fitView />;
}

将基础知识整合在一起后，你可以通过运行 npm run dev 来启动开发服务器，并查看以下内容：

¥With the basics put together, you can start the development server by running npm run dev and see the following:

还不是特别令人兴奋，但让我们添加 markdown 渲染并并排创建一些幻灯片！

¥Not super exciting yet, but let’s add markdown rendering and create a few slides side by side!

渲染 markdown

¥Rendering markdown

我们希望能够轻松地将内容添加到幻灯片中，因此我们希望能够在幻灯片中写入 Markdown 。如果你不熟悉，Markdown 是一种用于创建格式化文本文档的简单标记语言。如果你曾在 GitHub 上编写过 README，则你使用过 Markdown！

¥We want to make it easy to add content to our slides, so we’d like the ability to write Markdown  in our slides. If you’re not familiar, Markdown is a simple markup language for creating formatted text documents. If you’ve ever written a README on GitHub, you’ve used Markdown!

感谢我们之前安装的 react-remark 包，这一步很简单。我们可以使用 <Remark /> 组件将一串 markdown 内容渲染到我们的幻灯片中。

¥Thanks to the react-remark package we installed earlier, this step is a simple one. We can use the <Remark /> component to render a string of markdown content into our slides.

import { type Node, type NodeProps } from '@xyflow/react';
import { Remark } from 'react-remark';
 
export const SLIDE_WIDTH = 1920;
export const SLIDE_HEIGHT = 1080;
 
export type SlideNode = Node<SlideData, 'slide'>;
 
export type SlideData = {
  source: string;
};
 
const style = {
  width: `${SLIDE_WIDTH}px`,
  height: `${SLIDE_HEIGHT}px`,
} satisfies React.CSSProperties;
 
export function Slide({ data }: NodeProps<SlideNode>) {
  return (
    <article className="slide nodrag" style={style}>
      <Remark>{data.source}</Remark>
    </article>
  );
}

在 React Flow 中，节点上可以存储可在渲染期间使用的数据。在这种情况下，我们通过向 SlideData 类型添加 source 属性并将其传递给 <Remark /> 组件来存储要显示的 markdown 内容。我们可以使用一些 markdown 内容更新我们的硬编码节点以查看其实际效果：

¥In React Flow, nodes can have data stored on them that can be used during rendering. In this case we’re storing the markdown content to display by adding a source property to the SlideData type and passing that to the <Remark /> component. We can update our hardcoded nodes with some markdown content to see it in action:

import { ReactFlow } from '@xyflow/react';
import { Slide, SLIDE_WIDTH } from './Slide';
 
const nodeTypes = {
  slide: Slide,
};
 
export default function App() {
  const nodes = [
    {
      id: '0',
      type: 'slide',
      position: { x: 0, y: 0 },
      data: { source: '# Hello, React Flow!' },
    },
    {
      id: '1',
      type: 'slide',
      position: { x: SLIDE_WIDTH, y: 0 },
      data: { source: '...' },
    },
    {
      id: '2',
      type: 'slide',
      position: { x: SLIDE_WIDTH * 2, y: 0 },
      data: { source: '...' },
    },
  ];
 
  return (
    <ReactFlow nodes={nodes} nodeTypes={nodeTypes} fitView minZoom={0.1} />
  );
}

请注意，我们已将 minZoom 属性添加到 <ReactFlow /> 组件。我们的幻灯片非常大，默认的最小缩放级别不足以缩小并一次查看多张幻灯片。

¥Note that we’ve added the minZoom prop to the <ReactFlow /> component. Our slides are quite large, and the default minimum zoom level is not enough to zoom out and see multiple slides at once.

在上面的节点数组中，我们通过使用 SLIDE_WIDTH 常量进行一些手动数学运算来确保幻灯片之间的空间。在下一节中，我们将提出一种算法来自动将幻灯片布置在网格中。

¥In the nodes array above, we’ve made sure to space the slides out by doing some manual math with the SLIDE_WIDTH constant. In the next section we’ll come up with an algorithm to automatically lay out the slides in a grid.

布置节点

¥Laying out the nodes

我们经常被问到如何在流程中自动布局节点，我们有一些关于如何在 布局指南 中使用常见布局库（如 dagre 和 d3-hierarchy）的文档。在这里你将编写自己的超级简单布局算法，这有点书呆子气，但请继续关注我们！

¥We often get asked how to automatically lay out nodes in a flow, and we have some documentation on how to use common layouting libraries like dagre and d3-hierarchy in our layouting guide. Here you’ll be writing your own super-simple layouting algorithm, which gets a bit nerdy, but stick with us!

对于我们的演示应用，我们将从 0,0 开始构建一个简单的网格布局，并在向左、向右、向上或向下滑动时更新 x 或 y 坐标。

¥For our presentation app we’ll construct a simple grid layout by starting from 0,0 and updating the x or y coordinates any time we have a new slide to the left, right, up, or down.

首先，我们需要更新我们的 SlideData 类型以包含当前幻灯片左侧、右侧、上部和下部幻灯片的可选 ID。

¥First, we need to update our SlideData type to include optional ids for the slides to the left, right, up, and down of the current slide.

export type SlideData = {
  source: string;
  left?: string;
  up?: string;
  down?: string;
  right?: string;
};

将此信息直接存储在节点数据上为我们带来了一些有用的好处：

¥Storing this information on the node data directly gives us some useful benefits:

• 我们可以编写完全声明性的幻灯片，而不必担心节点和边的概念

  ¥We can write fully declarative slides without worrying about the concept of nodes and edges

• 我们可以通过访问连接幻灯片来计算演示文稿的布局

  ¥We can compute the layout of the presentation by visiting connecting slides

• 我们可以向每张幻灯片添加导航按钮，以便在它们之间自动导航。我们将在后面的步骤中处理这个问题。

  ¥We can add navigation buttons to each slide to navigate between them automatically. We’ll handle that in a later step.

神奇的事情发生在我们将要定义的名为 slidesToElements 的函数中。此函数将获取一个对象，其中包含所有通过其 ID 寻址的幻灯片，以及幻灯片的起始 ID。然后它将通过每个连接幻灯片来构建一个节点和边数组，我们可以将其传递给 <ReactFlow /> 组件。

¥The magic happens in a function we’re going to define called slidesToElements. This function will take an object containing all our slides addressed by their id, and an id for the slide to start at. Then it will work through each connecting slide to build an array of nodes and edges that we can pass to the <ReactFlow /> component.

算法将如下所示：

¥The algorithm will go something like this:

• 将初始幻灯片的 ID 和位置 { x: 0, y: 0 } 推送到堆栈上。

  ¥Push the initial slide’s id and the position { x: 0, y: 0 } onto a stack.

• 虽然该堆栈不为空……

  ¥While that stack is not empty…

  • 从堆栈中弹出当前位置和幻灯片 ID。

    ¥Pop the current position and slide id off the stack.

  • 通过 id 查找幻灯片数据。

    ¥Look up the slide data by id.

  • 将新节点推送到具有当前 ID、位置和幻灯片数据的节点数组上。

    ¥Push a new node onto the nodes array with the current id, position, and slide data.

  • 将幻灯片的 ID 添加到一组访问过的幻灯片中。

    ¥Add the slide’s id to a set of visited slides.

  • 对于每个方向（左、右、上、下）…

    ¥For every direction (left, right, up, down)…

    • 确保幻灯片尚未被访问过。

      ¥Make sure the slide has not already been visited.

    • 获取当前位置并根据方向通过添加或减去 SLIDE_WIDTH 或 SLIDE_HEIGHT 来更新 x 或 y 坐标。

      ¥Take the current position and update the x or y coordinate by adding or subtracting SLIDE_WIDTH or SLIDE_HEIGHT depending on the direction.

    • 将新位置和新幻灯片的 ID 推送到堆栈上。

      ¥Push the new position and the new slide’s id onto a stack.

    • 将新边推送到将当前幻灯片连接到新幻灯片的边数组上。

      ¥Push a new edge onto the edges array connecting the current slide to the new slide.

    • 重复其余方向…

      ¥Repeat for the remaining directions…

如果一切按计划进行，我们应该能够将下面显示的一堆幻灯片变成一个整齐布局的网格！

¥If all goes to plan, we should be able to take a stack of slides shown below and turn them into a neatly laid out grid!

让我们看看代码。在名为 slides.ts 的文件中，添加以下内容：

¥Let’s see the code. In a file called slides.ts add the following:

import { SlideData, SLIDE_WIDTH, SLIDE_HEIGHT } from './Slide';
 
export const slidesToElements = (
  initial: string,
  slides: Record<string, SlideData>,
) => {
  // Push the initial slide's id and the position `{ x: 0, y: 0 }` onto a stack.
  const stack = [{ id: initial, position: { x: 0, y: 0 } }];
  const visited = new Set();
  const nodes = [];
  const edges = [];
 
  // While that stack is not empty...
  while (stack.length) {
    // Pop the current position and slide id off the stack.
    const { id, position } = stack.pop();
    // Look up the slide data by id.
    const data = slides[id];
    const node = { id, type: 'slide', position, data };
 
    // Push a new node onto the nodes array with the current id, position, and slide
    // data.
    nodes.push(node);
    // add the slide's id to a set of visited slides.
    visited.add(id);
 
    // For every direction (left, right, up, down)...
    // Make sure the slide has not already been visited.
    if (data.left && !visited.has(data.left)) {
      // Take the current position and update the x or y coordinate by adding or
      // subtracting `SLIDE_WIDTH` or `SLIDE_HEIGHT` depending on the direction.
      const nextPosition = {
        x: position.x - SLIDE_WIDTH,
        y: position.y,
      };
 
      // Push the new position and the new slide's id onto a stack.
      stack.push({ id: data.left, position: nextPosition });
      // Push a new edge onto the edges array connecting the current slide to the
      // new slide.
      edges.push({ id: `${id}->${data.left}`, source: id, target: data.left });
    }
 
    // Repeat for the remaining directions...
  }
 
  return { nodes, edges };
};

为了简洁起见，我们省略了右、上、下方向的代码，但每个方向的逻辑都是相同的。我们还包含了与注释相同的算法细分，以帮助你浏览代码。

¥We’ve left out the code for the right, up, and down directions for brevity, but the logic is the same for each direction. We’ve also included the same breakdown of the algorithm as comments, to help you navigate the code.

以下是布局算法的演示应用，你可以编辑 slides 对象以查看向不同方向添加幻灯片如何影响布局。例如，尝试扩展 4 的数据以包含 down: '5'，并查看布局如何更新。

¥Below is a demo app of the layouting algorithm, you can edit the slides object to see how adding slides to different directions affects the layout. For example, try extending 4’s data to include down: '5' and see how the layout updates.

import Flow from './Flow';
 
// add more slides and create different layouts by
// linking slides in different ways.
const slides = {
  '1': { right: '2' },
  '2': { left: '1', up: '3', right: '4' },
  '3': { down: '2' },
  '4': { left: '2' },
};
 
export default function App() {
  return <Flow slides={slides} />;
}

如果你花一点时间玩这个演示，你可能会遇到此算法的两个限制：

¥If you spend a little time playing with this demo, you’ll likely run across two limitations of this algorithm:

1. 可以构建一个在同一位置重叠两张幻灯片的布局。

   ¥It is possible to construct a layout that overlaps two slides in the same position.

2. 算法将忽略从初始幻灯片无法到达的节点。

   ¥The algorithm will ignore nodes that cannot be reached from the initial slide.

解决这些缺点是完全可能的，但有点超出本教程的范围。如果你尝试一下，请务必在 discord 服务器  上与我们分享你的解决方案！

¥Addressing these shortcomings is totally possible, but a bit beyond the scope of this tutorial. If you give a shot, be sure to share your solution with us on the discord server !

编写布局算法后，我们可以跳回到 App.tsx 并删除硬编码的节点数组，转而使用新的 slidesToElements 函数。

¥With our layouting algorithm written, we can hop back to App.tsx and remove the hardcoded nodes array in favor of the new slidesToElements function.

import { ReactFlow } from '@xyflow/react';
import { slidesToElements } from './slides';
import { Slide, SlideData, SLIDE_WIDTH } from './Slide';
 
const slides: Record<string, SlideData> = {
  '0': { source: '# Hello, React Flow!', right: '1' },
  '1': { source: '...', left: '0', right: '2' },
  '2': { source: '...', left: '1' },
};
 
const nodeTypes = {
  slide: Slide,
};
 
const initialSlide = '0';
const { nodes, edges } = slidesToElements(initialSlide, slides);
 
export default function App() {
  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
      fitView
      fitViewOptions={{ nodes: [{ id: initialSlide }] }}
      minZoom={0.1}
    />
  );
}

我们流程中的幻灯片是静态的，因此我们可以将 slidesToElements 调用移到组件外部，以确保如果组件重新渲染，我们不会重新计算布局。或者，你可以使用 React 的 useMemo 钩子来定义组件内部的内容，但只计算一次。

¥The slides in our flow are static, so we can move the slidesToElements call outside the component to make sure we’re not recalculating the layout if the component re-renders. Alternatively, you could use React’s useMemo hook to define things inside the component but only calculate them once.

因为我们现在有了 “initial” 幻灯片的想法，我们还使用 fitViewOptions 来确保初始幻灯片是画布首次加载时聚焦的幻灯片。

¥Because we have the idea of an “initial” slide now, we’re also using the fitViewOptions to ensure the initial slide is the one that is focused when the canvas is first loaded.

在幻灯片之间导航

¥Navigating between slides

到目前为止，我们的演示文稿已在网格中布局，但我们必须手动平移画布才能看到每张幻灯片，这对于演示文稿来说不是很实用！我们将添加三种在幻灯片之间导航的不同方式：

¥So far we have our presentation laid out in a grid but we have to manually pan the canvas to see each slide, which isn’t very practical for a presentation! We’re going to add three different ways to navigate between slides:

• 单击以聚焦节点，通过单击它们跳转到不同的幻灯片。

  ¥Click-to-focus on nodes for jumping to different slides by clicking on them.

• 每张幻灯片上的导航按钮用于在任何有效方向上按顺序在幻灯片之间移动。

  ¥Navigation buttons on each slide for moving sequentially between slides in any valid direction.

• 使用箭头键进行键盘导航，无需使用鼠标或直接与幻灯片交互即可在演示文稿中移动。

  ¥Keyboard navigation using the arrow keys for moving around the presentation without using the mouse or interacting with a slide directly.

点击时聚焦

¥Focus on click

<ReactFlow /> 元素可以接收单击任何节点时触发的 onNodeClick 回调。除了鼠标事件本身，我们还会收到对被单击节点的引用，我们可以使用它来平移画布，这要归功于 fitView 方法。

¥The <ReactFlow /> element can receive an onNodeClick callback that fires when any node is clicked. Along with the mouse event itself, we also receive a reference to the node that was clicked on, and we can use that to pan the canvas thanks to the fitView method.

fitView 是 React Flow 实例上的一种方法，我们可以通过使用 useReactFlow 钩子来访问它。

¥fitView is a method on the React Flow instance, and we can get access to it by using the useReactFlow hook.

import { useCallback } from 'react';
import { ReactFlow, useReactFlow, type NodeMouseHandler } from '@xyflow/react';
import { Slide, SlideData, SLIDE_WIDTH } from './Slide';
 
const slides: Record<string, SlideData> = {
  ...
}
 
const nodeTypes = {
  slide: Slide,
};
 
const initialSlide = '0';
const { nodes, edges } = slidesToElements(initialSlide, slides);
 
export default function App() {
  const { fitView } = useReactFlow();
  const handleNodeClick = useCallback<NodeMouseHandler>(
    (_, node) => {
      fitView({ nodes: [node], duration: 150 });
    },
    [fitView],
  );
 
  return (
    <ReactFlow
      ...
      fitViewOptions={{ nodes: [{ id: initialSlide }] }}
      onNodeClick={handleNodeClick}
    />
  );
}

调用没有参数的 fitView 将尝试将图中的每个节点都放入视图中，但我们只想关注被单击的节点！FitViewOptions 对象让我们提供一个仅包含我们想要关注的节点的数组：在这种情况下，这只是被单击的节点。

¥Calling fitView with no arguments would attempt to fit every node in the graph into view, but we only want to focus on the node that was clicked! The FitViewOptions object lets us provide an array of just the nodes we want to focus on: in this case, that’s just the node that was clicked.

滑动控件

¥Slide controls

单击以聚焦节点对于缩小以查看大图很方便，然后再聚焦到特定幻灯片上，但这不是一种在演示文稿中导航的实用方法。在此步骤中，我们将向每张幻灯片添加一些控件，使我们可以向任何方向移动到连接的幻灯片。

¥Clicking to focus a node is handy for zooming out to see the big picture before focusing back in on a specific slide, but it’s not a very practical way for navigating around a presentation. In this step we’ll add some controls to each slide that allow us to move to a connected slide in any direction.

让我们向每张幻灯片添加一个 <footer>，有条件地使用连接的幻灯片向任意方向渲染一个按钮。我们还将预先创建一个 moveToNextSlide 回调，稍后将使用它。

¥Let’s add a <footer> to each slide that conditionally renders a button in any direction with a connected slide. We’ll also preemptively create a moveToNextSlide callback that we’ll use in a moment.

import { type NodeProps, fitView } from '@xyflow/react';
import { Remark } from 'react-remark';
import { useCallback } from 'react';
 
...
 
export function Slide({ data }: NodeProps<SlideNide>) {
  const moveToNextSlide = useCallback((id: string) => {}, []);
 
  return (
    <article className="slide nodrag" style={style}>
      <Remark>{data.source}</Remark>
      <footer className="slide__controls nopan">
        {data.left && (<button onClick={() => moveToNextSlide(data.left)}>←</button>)}
        {data.up && (<button onClick={() => moveToNextSlide(data.up)}>↑</button>)}
        {data.down && (<button onClick={() => moveToNextSlide(data.down)}>↓</button>)}
        {data.right && (<button onClick={() => moveToNextSlide(data.right)}>→</button>)}
      </footer>
    </article>
  );
}

你可以随意设置页脚样式，但添加 "nopan" 类以防止在你与任何按钮交互时画布平移非常重要。

¥You can style the footer however you like, but it’s important to add the "nopan" class to prevent prevent the canvas from panning as you interact with any of the buttons.

要实现 moveToSlide，我们将再次使用 fitView。以前，我们有一个对单击的实际节点的引用，以传递给 fitView，但这次我们只有一个节点的 ID。你可能想通过其 id 查找目标节点，但实际上这不是必需的！如果我们查看 FitViewOptions 的类型，我们可以看到我们传入的节点数组只需要具有 id 属性：

¥To implement moveToSlide, we’ll make use of fitView again. Previously we had a reference to the actual node that was clicked on to pass to fitView, but this time we only have a node’s id. You might be tempted to look up the target node by its id, but actually that’s not necessary! If we look at the type of FitViewOptions we can see that the array of nodes we pass in only needs to have an id property:

export type FitViewOptions = {
  padding?: number;
  includeHiddenNodes?: boolean;
  minZoom?: number;
  maxZoom?: number;
  duration?: number;
  nodes?: (Partial<Node> & { id: Node['id'] })[];
};

Partial<Node> 表示 Node 对象类型的所有字段都被标记为可选，然后我们将其与 { id: Node['id'] } 相交以确保 id 字段始终是必需的。这意味着我们可以只传入一个具有 id 属性的对象，而没有其他任何东西，fitView 就会知道如何处理它！

¥Partial<Node> means that all of the fields of the Node object type get marked as optional, and then we intersect that with { id: Node['id'] } to ensure that the id field is always required. This means we can just pass in an object with an id property and nothing else, and fitView will know what to do with it!

import { type NodeProps, useReactFlow } from '@xyflow/react';
 
export function Slide({ data }: NodeProps<SlideNide>) {
  const { fitView } = useReactFlow();
 
  const moveToNextSlide = useCallback(
    (id: string) => fitView({ nodes: [{ id }] }),
    [fitView],
  );
 
  return (
    <article className="slide" style={style}>
      ...
    </article>
  );
}

import React, { useCallback, useMemo } from 'react';
import {
  ReactFlow,
  useReactFlow,
  ReactFlowProvider,
  Background,
  BackgroundVariant,
  type Node,
  type NodeMouseHandler,
} from '@xyflow/react';
 
// we need to import the React Flow styles to make it work
import '@xyflow/react/dist/style.css';
 
import slides from './slides';
import {
  Slide,
  SLIDE_WIDTH,
  SLIDE_HEIGHT,
  SLIDE_PADDING,
  type SlideData,
} from './Slide';
 
const slidesToElements = () => {
  const start = Object.keys(slides)[0];
  const stack = [{ id: start, position: { x: 0, y: 0 } }];
  const visited = new Set();
  const nodes = [];
  const edges = [];
 
  while (stack.length) {
    const { id, position } = stack.pop();
    const slide = slides[id];
    const node = {
      id,
      type: 'slide',
      position,
      data: slide,
      draggable: false,
    } satisfies Node<SlideData>;
 
    if (slide.left && !visited.has(slide.left)) {
      const nextPosition = {
        x: position.x - (SLIDE_WIDTH + SLIDE_PADDING),
        y: position.y,
      };
 
      stack.push({ id: slide.left, position: nextPosition });
      edges.push({
        id: `${id}->${slide.left}`,
        source: id,
        target: slide.left,
      });
    }
 
    if (slide.up && !visited.has(slide.up)) {
      const nextPosition = {
        x: position.x,
        y: position.y - (SLIDE_HEIGHT + SLIDE_PADDING),
      };
 
      stack.push({ id: slide.up, position: nextPosition });
      edges.push({ id: `${id}->${slide.up}`, source: id, target: slide.up });
    }
 
    if (slide.down && !visited.has(slide.down)) {
      const nextPosition = {
        x: position.x,
        y: position.y + (SLIDE_HEIGHT + SLIDE_PADDING),
      };
 
      stack.push({ id: slide.down, position: nextPosition });
      edges.push({
        id: `${id}->${slide.down}`,
        source: id,
        target: slide.down,
      });
    }
 
    if (slide.right && !visited.has(slide.right)) {
      const nextPosition = {
        x: position.x + (SLIDE_WIDTH + SLIDE_PADDING),
        y: position.y,
      };
 
      stack.push({ id: slide.right, position: nextPosition });
      edges.push({
        id: `${id}->${slide.down}`,
        source: id,
        target: slide.down,
      });
    }
 
    nodes.push(node);
    visited.add(id);
  }
 
  return { start, nodes, edges };
};
 
const nodeTypes = {
  slide: Slide,
};
 
function Flow() {
  const { fitView } = useReactFlow();
  const { start, nodes, edges } = useMemo(() => slidesToElements(), []);
 
  const handleNodeClick = useCallback<NodeMouseHandler>(
    (_, node) => {
      fitView({ nodes: [{ id: node.id }], duration: 150 });
    },
    [fitView],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
      edges={edges}
      fitView
      fitViewOptions={{ nodes: [{ id: start }] }}
      minZoom={0.1}
      onNodeClick={handleNodeClick}
    >
      <Background color="#f2f2f2" variant={BackgroundVariant.Lines} />
    </ReactFlow>
  );
}
 
export default () => (
  <ReactFlowProvider>
    <Flow />
  </ReactFlowProvider>
);

键盘导航

¥Keyboard navigation

拼图的最后一块是将键盘导航添加到我们的演示文稿中。必须始终单击幻灯片才能移动到下一个幻灯片不是很方便，因此我们将添加一些键盘快捷键以使其更容易。React Flow 让我们通过 onKeyDown 等处理程序监听 <ReactFlow /> 组件上的键盘事件。

¥The final piece of the puzzle is to add keyboard navigation to our presentation. It’s not very convenient to have to always click on a slide to move to the next one, so we’ll add some keyboard shortcuts to make it easier. React Flow lets us listen to keyboard events on the <ReactFlow /> component through handlers like onKeyDown.

到目前为止，当前聚焦的幻灯片由画布的位置暗示，但如果我们想要处理整个画布上的按键，我们需要明确跟踪当前幻灯片。我们需要这样做是因为我们需要知道按下箭头键时要导航到哪个幻灯片！

¥Up until now the slide currently focused is implied by the position of the canvas, but if we want to handle key presses on the entire canvas we need to explicitly track the current slide. We need to this because we need to know which slide to navigate to when an arrow key is pressed!

import { useState, useCallback } from 'react';
import { ReactFlow, useReactFlow } from '@xyflow/react';
import { Slide, SlideData, SLIDE_WIDTH } from './Slide';
 
const slides: Record<string, SlideData> = {
  ...
}
 
const nodeTypes = {
  slide: Slide,
};
 
const initialSlide = '0';
const { nodes, edges } = slidesToElements(initialSlide, slides)
 
export default function App() {
  const [currentSlide, setCurrentSlide] = useState(initialSlide);
  const { fitView } = useReactFlow();
 
  const handleNodeClick = useCallback<NodeMouseHandler>(
    (_, node) => {
      fitView({ nodes: [node] });
      setCurrentSlide(node.id);
    },
    [fitView],
  );
 
  return (
    <ReactFlow
      ...
      onNodeClick={handleNodeClick}
    />
  );
}

这里我们为我们的流组件添加了一些状态 currentSlide，并确保在单击节点时更新它。接下来，我们将编写一个回调来处理画布上的键盘事件：

¥Here we’ve added a bit of state, currentSlide, to our flow component and we’re making sure to update it whenever a node is clicked. Next, we’ll write a callback to handle keyboard events on the canvas:

export default function App() {
  const [currentSlide, setCurrentSlide] = useState(initialSlide);
  const { fitView } = useReactFlow();
 
  ...
 
  const handleKeyPress = useCallback<KeyboardEventHandler>(
    (event) => {
      const slide = slides[currentSlide];
 
      switch (event.key) {
        case 'ArrowLeft':
        case 'ArrowUp':
        case 'ArrowDown':
        case 'ArrowRight':
          const direction = event.key.slice(5).toLowerCase();
          const target = slide[direction];
 
          if (target) {
            event.preventDefault();
            setCurrentSlide(target);
            fitView({ nodes: [{ id: target }] });
          }
      }
    },
    [currentSlide, fitView],
  );
 
  return (
    <ReactFlow
      ...
      onKeyPress={handleKeyPress}
    />
  );
}

为了节省一些输入，我们从按下的键中提取方向 - 如果用户按下 'ArrowLeft'，我们将获得 'left'，依此类推。然后，如果实际上有一个幻灯片连接到该方向，我们将更新当前幻灯片并调用 fitView 导航到它！

¥To save some typing we’re extracting the direction from the key pressed - if the user pressed 'ArrowLeft' we’ll get 'left' and so on. Then, if there is actually a slide connected in that direction we’ll update the current slide and call fitView to navigate to it!

我们还阻止了箭头键的默认行为，以防止窗口上下滚动。这对于本教程来说是必要的，因为画布只是页面的一部分，但对于画布是整个视口的应用，你可能不需要这样做。

¥We’re also preventing the default behavior of the arrow keys to prevent the window from scrolling up and down. This is necessary for this tutorial because the canvas is only one part of the page, but for an app where the canvas is the entire viewport you might not need to do this.

这就是全部！总结一下，让我们看看最终结果并讨论我们学到了什么。

¥And that’s everything! To recap let’s look at the final result and talk about what we’ve learned.

最后的想法

¥Final thoughts

即使你不打算制作下一个 Prezi ，我们仍然在本教程中介绍了 React Flow 的一些有用功能：

¥Even if you’re not planning on making the next Prezi , we’ve still looked at a few useful features of React Flow in this tutorial:

• useReactFlow 钩子用于访问 fitView 方法。

  ¥The useReactFlow hook to access the fitView method.

• onNodeClick 事件处理程序用于监听流程中每个节点的点击。

  ¥The onNodeClick event handler to listen to clicks on every node in a flow.

• onKeyPress 事件处理程序用于监听整个画布上的键盘事件。

  ¥The onKeyPress event handler to listen to keyboard events on the entire canvas.

我们还研究了如何自己实现一个简单的布局算法。布局是我们经常被问到的一个问题，但如果你的需求不是那么复杂，你可以走得很远，找到自己的解决方案！

¥We’ve also looked at how to implement a simple layouting algorithm ourselves. Layouting is a really common question we get asked about, but if your needs aren’t that complex you can get quite far rolling your own solution!

如果你正在寻找有关如何扩展此项目的想法，你可以尝试解决我们指出的布局算法问题，提出具有不同布局的更复杂的 Slide 组件，或者完全不同的东西。

¥If you’re looking for ideas on how to extend this project, you could try addressing the issues we pointed out with the layouting algorithm, coming up with a more sophisticated Slide component with different layouts, or something else entirely.

你可以使用已完成的 源代码  作为起点，也可以继续在我们今天所做的基础上进行构建。我们很乐意看到你构建的内容，因此请在我们的 Discord 服务器  或 Twitter  上与我们分享。

¥You can use the completed source code  as a starting point, or you can just keep building on top of what we’ve made today. We’d love to see what you build so please share it with us over on our Discord server  or Twitter .