@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	控制一个锚点是否可以连接多条线
overlap	bool	false	是否允许节点覆盖，默认允许，设置 true 时不允许
customPostionHeight	number	0	未设置 customPostionHeight 画布默认居中展示，当设置 customPostionHeight 时，画布距离顶部 customPostionHeight
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	-	子节点排序回调，可选，默认无。

node options 中 一些可配置参数

name	type	default	description
id	string	-	节点id
canDrag	boolean	true	控制节点是否可拖拽
dragChild	boolean	false	设置当前节点下的子节点是否需要联动拖动
filterOverlap	boolean	false	控制节点在设置 overlap 为 true 时是否仍允许被覆盖

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

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

用法

disabled 字段控制 TemplateNode 是否启用

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

props

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

Changelog

1.1.5-beta22 (2022-01-13)

Features

• add overlapCallback conf (3dafbc6)