@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: [] }	数据
snapline	bool	true	是否显示辅助对齐线
lineLinkageHighlight	boolean	false	hover 节点线条是否联动高亮
lineColor	object	{}	线条颜色映射对象 eg: {'锚点1': '#82BEFF', '锚点2': '#FFA39E'}
lineTextColor	object	{}	线条上文字颜色映射对象 eg: {'锚点1': '#82BEFF', '锚点2': '#FFA39E'}
lineOffsetY	number	0	线条起始点向上偏移量
startPointAnchorId	string		保持所有线条起始点与 startPointAnchorId 线条一致
anchorPlacement	string		锚点位置，若值为 bottom，则位于锚点的父节点底部
selectionAutoScroll	boolean	false	是否开启框选至边缘时画布自动滚动
lineTextMap	object	{}	线条上文字与 anchorId 映射对象 eg: {'anchorId1': '锚点1', 'anchorId2': '锚点2'}
lineTextDecorator	(text: textPosition, line: ITopologyLine)	-	线条上文字装饰器
showText	(start: string) => boolean	-	当 anchorId 为 startPointAnchorId 时， 是否显示线条文字
showBar	bool	true	是否显示工具栏
showCenter	bool	true	是否显示工具栏中的定位中心
showLayout	bool	true	是否显示工具栏中的自动布局
showDownload	bool	false	是否显示工具栏中的下载图片
showMinimap	bool	false	是否显示小地图
allowNodeInsertOnEdge	boolean		是否开启拖拽节点到线中间进行节点插入
canConnectMultiLines	bool	false	控制一个锚点是否可以连接多条线
overlap	bool	false	是否允许节点覆盖，默认允许，设置 true 时不允许
overlapCallback	() => void		overlap 为 true 时的回调
overlapOffset	{}	{offsetX: 0, offsetY: 0}	overlap 为 true 时，节点的 x，y 偏移量
customPostionHeight	number	0	未设置 customPostionHeight 画布默认居中展示，当设置 customPostionHeight 时，画布距离顶部 customPostionHeight
readOnly	bool	false	只读模式，为true时不可编辑
prevNodeStyle	object	-	控制预览节点样式，目前支持配置 border、background 属性
isReduceRender	bool	false	控制节点 shouldComponentUpdate 生命周期的返回值
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.13.1 (2024-05-06)

Features

• 代码优化 (2daa08b)
• 记录上一次点击的节点id (e6c650c)
• 快捷插入节点连线处理 (3fb919d)