topology-byfe

Topology

安装

yarn add topology-byfe

开发

yarn
yarn start

测试

yarn test

示例

http://localhost:3000

使用

见demo

组件

Topology

props

name	type	default	description
data	object	{ nodes: []; lines: [] }	数据
readOnly	bool	false	只读模式，为true时不可编辑
autoLayout	bool	false	自动布局，当数据中没有position属性时将自动计算布局。
renderTreeNode	(node,decorators) => ReactNode	-	子节点render方法，接收节点数据，返回JSX。
getInstance	(instance: Topology) => void	-	返回组件实例，用于调用组件内部的方法。
onChange	(data, changeType) => void	-	数据发成改变时触发，changeType为改变的类型
onSelect	(data) => void	-	选中数据时触发，返回当前选中的数据（包含节点、线段）
sortChildren	(parent, children) => sortedChildren	-	子节点排序回调，可选，默认无。

getInstance

返回topology组件的实例，可通过实例调用组件内部的方法：

scrollCanvasToCenter():void

移动到中心，当所有节点都有位置数据（positions）时，移动的中心点为内容的中心，否则为画布的中心。

autoLayout():void

自动计算布局

decorators

renderTreeNode的第二个参数，包含以下装饰器函数：

anchorDecorator

anchorDecorator是一个高阶函数，经过 anchorDecorator 包装的控件将变成一个锚点。

用法

anchorDecorator(options)(ReactNode)

options参数

name	type	default	description
anchorId	string	-	锚点唯一id，如果不传将默认生成一个自增的id

TemplateWrapper

模板装饰器，用于包装模板组件

用法

<TemplateWrapper generator={this.generatorNodeData}>
    <div>模板节点</div>
</TemplateWrapper>

props

name	type	default	description
data	() => nodeData	-	数据生成器，用于产生节点数据