@byai/topology

Topology

安装

yarn add @byai/topology

开发

yarn
yarn start

测试

yarn test

示例

http://localhost:3000

使用

见demo

组件

Topology

props

name	type	default	description
data	object	{ nodes: []; lines: [] }	数据
lineColor	object	{}	线条颜色映射对象 eg: {'锚点1': '#82BEFF', '锚点2': '#FFA39E'}
lineOffsetY	number	0	线条起始点向上偏移量
showBar	bool	true	是否显示工具栏
canConnectMultiLines	bool	false	控制一个锚点是否可以连接多条线
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	-	数据生成器，用于产生节点数据