Home

Awesome

antv-x6-html2

another @antv/x6 html shape, using single-spa life cycle hook.

扩展@antv/x6内置html节点，使用类似single-spa的生命周期钩子

  1. 这里参照single-spa的接口，只使用了其中的mount+unmount，这样抽象带来的好处不仅限于react/vue，也可以使用其他框架实现自定义节点
  2. 不管用户使用什么框架实现自定义节点，都可以在传递进来的mount函数里面拿到node监听change:data事件更新自己的UI，实现一些自定义的交互逻辑
  3. 这里注册的HTML2.View(html2-view)针对一些可点击的html组件屏蔽了onMouseUp+onMouseDown避免这两个事件触发x6内部的选择和拖拽逻辑

第三方集成

antv-x6-react

  1. 将x6的各种shape注册成原生的vue组件使用（核心思想是把x6退化成一个view开发者自己处理数据扭转）
  2. 同时支持使用react自定义节点（内部有使用一个DataWatcher自动监听change:data）
  3. 初始版本是使用@antv/x6-react-shape来自定义节点，但是后来换成使用antv-x6-html2
  4. 内置一个默认的Portal，会在Portal.getProvider()返回的这个组件挂载的时候，自动使用portal渲染所有的自定义组件
  5. 有实现一些常用的组件Background, Clipboard, Grid, Mousewheel, Selection, Snapline, MiniMap, ContextMenu等widgets

online demos

  1. 基础示例使用了antd的InputNumber（一个带按钮的输入框）展示了自定义组件如何做到和x6做数据交互
  2. swimlane 泳道图参照x6官方示例实现
  3. DAG画布参照x6官方的DAG示例实现AlgoNode的节点逻辑与官方示例相比较处理起来更简单
  4. ER图参照x6官方的ER图示例
  5. 展开收起树形图参照x6官方的示例

antv-x6-vue

  1. 这个库实现的功能和antv-x6-react基本一致
  2. 当前还是使用@antv/x6-vue-shape实现的，后续也会切换到antv-x6-html2这边
  3. 已经切换使用antv-x6-html2

online demos

  1. DAG画布参照x6官方的DAG示例实现AlgoNode的节点逻辑与官方示例相比较处理起来更简单