(Translated by https://www.hiragana.jp/)
GitHub - lloydzhou/react-x6: react-reconciler to render x6 object
Skip to content

lloydzhou/react-x6

Repository files navigation

react-x6

NPM Package npm bundle size npm MIT License

提供ていきょうてい义渲しみざいreactちゅう直接ちょくせつ渲染x6画布がふ

  1. 使用しようreact-reconcilerてい义渲しみ
  2. ただ抽象ちゅうしょうcreate/update/removeFromすんで
  3. さいきさき渲染出来できてきinstance就是Graph/Node/Edge对象,这些对象使用しようref直接ちょくせつ绑定
  4. Graphない部将ぶしょうChildren做进いち处理,つう过cloneElement强行きょうこう生成せいせい带keyてき组件(避免list diff导致元素げんそid变化)

あんそう

npm install react-x6
yarn add react-x6

demo

online demo

import { Graph, Node, Edge } from 'react-x6'
import { Snapline } from "@antv/x6-plugin-snapline";

// 使用しようElementOfPluginてい义组けん
const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)


export default function App() {
  // ...
  return (
    <Graph background grid width={800} height={600}>
      <SnaplinePlugin key="snapline" enabled={true}/>
      <Node id="1" x={100} y={100} label="node1" width={80} height={40}></Node>
      <Node id="3" x={200} y={100} label="node3" width={80} height={40} parent="1" />
      <Node id="2" x={200} y={200} label="node2" width={80} height={40} />
      <Node id="4" x={200} y={250} label="node4" width={80} height={40} ref={node4} />
      <Node id="5" x={300} y={250} label="node5" width={80} height={40} onClick={e => {
        console.log('onClick', e)
      }} />
      <Edge source="1" target="2" />
    </Graph>
  )
}

TODO

  • 提供ていきょう渲染
  • Graph组件
  • Node/Edge组件
  • ElementOfPlugin函数かんすう方便ほうべんふうそうかんかたplugin
  • Label(Edge)
  • NodePort
  • NodeTool/EdgeTool
  • SourceMarker/TargetMarker

changelog

2023-03-22

remove Fragment, using flat array

About

react-reconciler to render x6 object

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published