react-digraph

React-有向图

概述

一个React组件，可让您轻松创建有向图编辑器，而无需实现任何SVG绘制或事件处理逻辑。

v8.0.0 重要信息

版本 8.0.0 引入了通过 Ctrl-Shift-鼠标事件（Mac 上为 Cmd-Shift-鼠标）进行多选节点和边的功能。这需要一项破坏性变更。您不再需要提供 onSelectNode/Edge，而是只需提供一个 onSelect 函数回调，以及一个 selected 对象，其参数格式为 { nodes: Map, edges: Map }。typings 文件夹 中包含了这些属性的精确类型定义。当边或节点被选中时，onSelect 函数将触发并传入该对象。您需要处理所有被选中的节点和边；如果只有一个，则需要在 onSelect 函数内判断它是节点还是边。

要禁用多选，你可以将 allowMultiselect 设置为 false，这会禁用 Ctrl-Shift-鼠标事件，但我们仍会使用 onSelect 函数。onSelectNode 和 onSelectEdge 均已弃用。

破坏性变更：

• onPasteSelected 现在接受一个 SelectionT 对象作为第一个参数
• onPasteSelected 现在接受一个 IPoint 而不是 XYCoords 数组作为第二个参数
• 新增了 onDeleteSelected，它接受一个 SelectionT 参数
• 新增了 onSelect，它接受 SelectionT 和 Event 参数
• onUpdateNode 在第二个参数中接受一个更新节点的 Map（例如，当多个节点被移动时）
• selected 是一个新属性，用于跟踪选中的节点和边。它的类型是 SelectionT
• canDeleteSelected 取代了 canDeleteNode 和 canDeleteEdge。它接受一个 SelectionT 类型作为参数
• 移除了 onDeleteNode
• 移除了 onDeleteEdge
• 移除了 selectedNode
• 移除了 selectedEdge
• 移除了 canDeleteNode
• 移除了 canDeleteEdge
• 移除了 selectedNodes
• 移除了 selectedEdges

安装

npm install --save react-digraph

如果你没有以下 peerDependencies，请确保安装它们：

npm install --save react react-dom

使用方法

默认导出是一个 c