{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-c340b0c05bd0ed4bbe4f52cd897c186a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

什么是 Mode

\n

用户在交互一张图时，可能由于意图不同而存在不同的交互模式，例如在编辑模式下点击节点需要弹出窗口让用户编辑，在查看模式下点击节点需要选中节点。

\n

为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 Behavior 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 Behavior。

\n

例如，存在 default 和 edit 两种 mode（交互模式）:

\n\n

默认情况下，该图对 default 模式中的行为见效，即点击节点时节点被选中而不是弹出编辑框。用户可以通过简单的命令切换该图的行为模式到 edit 模式，则 default 模式中的行为失效，edit 交互模式中的行为起效，即点击节点将弹出编辑框。

\n

配置 Mode

\n

在实例化图时配置 modes 属性：

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  modes: {\n    // 支持的 behavior\n    default: ['drag-canvas', 'zoom-canvas'],\n    edit: ['click-select'],\n  },\n});\n
\n

以上是模式定义的一个例子。在图上定义了两个模式，分别是 default， edit 。其中 default 包含两个 Behavior：'drag-canvas' 和 '``zoom-canvas'，都使用行为的默认参数。

\n

切换 Mode

\n

默认时 Graph 会使用 default 的 Mode ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 graph.``setMode('edit') 来切换到 edit 的 Mode 。

\n
graph.setMode('edit');\n
\n

此时 Graph 就支持了拖拽节点，default 模式下的拖拽画布 'drag-canvas'、放缩画布行为 'zoom-canvas' 失效。

\n

在调用了 setMode 方法后，G6 内部进行了以下操作：

\n\n

编辑已有的 Mode

\n

如果有已经定义好的 Behavior （内置 Behavior 或 自定义 Behavior），需要把它添加到某个模式下，可以通过 graph.addBehaviors 方法；需要从某个模式中移除一些 Behavior，可以使用 graph.removeBehaviors 方法。如下示例：

\n
// 向 default 模式中添加名为 drag-canvas 的行为，并使用行为的默认配置\ngraph.addBehaviors('drag-canvas', 'default');\n\n// 从 default 模式中移除名为 drag-canvas 的行为\ngraph.removeBehaviors('drag-canvas', 'default');\n\n// 向 edit 模式中添加名为 drag-canvas 的行为，并定义个性化配置\ngraph.addBehaviors(\n  {\n    type: 'drag-canvas',\n    direction: 'x',\n  },\n  'edit',\n);\n\n// 从 edit 模式中移除名为 drag-canvas 的行为\ngraph.removeBehaviors('drag-canvas', 'edit');\n\n// 一次向 default 模式中添加多个行为\ngraph.addBehaviors(['drag-canvas', 'zoom-canvas'], 'default');\n\n// 一次从 default 模式中移除多个行为\ngraph.removeBehaviors(['drag-canvas', 'zoom-canvas'], 'default');\n
\n

相关阅读

\n"}