x6 react 最佳实际

提供一个react下应用X6的最佳范本：

  1. 简略易用，易于做逻辑拆分
  2. 体积小(gzip压缩后小于0.5k)
  3. 反对多实例
  4. 反对应用ref绑定x6 graph

装置

npm install react-x6-graphyarn add react-x6-graph

设计

  1. 定义画布组件

    // 应用GraphContext存储理论的x6 graph对象const GraphContext = createContext()// 导出一个Graph组件，反对父组件传递ref拿到graph对象export const Graph = forwardRef((props, ref) => {  const [graph, setGraph] = useState(null)  const realRef = ref || createRef()  const { container, children, ...other } = props  // 如果传递了container，就应用传进来的container初始化画布  // 否则组件本人渲染一个div来初始化画布  const containerRef = createRef(container)  useEffect(() => { if (containerRef.current && !realRef.current) {   const graph = new X6.Graph({     container: containerRef.current,     ...other,   })   setGraph(realRef.current = graph) }  }, [])  return ( <GraphContext.Provider value={graph}>   {containerRef.current ? null : <div ref={containerRef} />}   {!!graph && children} </GraphContext.Provider>  )})// 导出一个帮忙函数以便Graph组件的子组件获取x6 graph对象export const useGraphInstance = () => useContext(GraphContext)

  2. 应用

    import { Graph, useGraphInstance } from 'react-x6-graph'const GraphBehavior = () => {  const graph = useGraphInstance()  // TODO 这里拿到graph对象解决本人的逻辑（例如应用后端数据初始化画布，减少事件监听...）  return null}const GraphAddButton = () => {  const graph = useGraphInstance()  const [count, setCount] = useState(0)  const addNode = useCallback(() => { // TODO 点击的时候增加节点并计数  }, [count, graph])  return <Button type="primary">增加节点: {count}</Button>}function App() {  const gRef = useRef()  useEffect(() => { // TODO 这里应用父组件的ref不便将gRef传递到与Graph以外的组件应用 console.log('ref', gRef)  }, [gRef.current])  return ( <div className="App">   <Graph grid resizing snapline keyboard clipboard width={800} height={600}>     <GraphBehavior />     <GraphAddButton />   </Graph>   {/* 1. Graph组件反对多实例；2. 父组件传递ref */}   <Graph grid width={800} height={600} ref={gRef}>     <GraphAddButton />   </Graph> </div>  );}

TODO

  • [ ] 应用react自定义组件（默认应用Portal）
  • [ ] 用这个封装的Graph实现官网流程图（或者间接实现xflow的流程图）