/topology

拓扑图组件

Primary LanguageTypeScriptMIT LicenseMIT

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 - 数据生成器,用于产生节点数据