Topology
安装
yarn add @byai/topology开发
yarn
yarn start测试
yarn test示例
使用
见demo
组件
Topology
props
| name | type | default | description |
|---|---|---|---|
| data | object | { nodes: []; lines: [] } | 数据 |
| lineLinkageHighlight | boolean | false | hover 节点线条是否联动高亮 |
| lineColor | object | {} | 线条颜色映射对象 eg: {'锚点1': '#82BEFF', '锚点2': '#FFA39E'} |
| lineTextColor | object | {} | 线条上文字颜色映射对象 eg: {'锚点1': '#82BEFF', '锚点2': '#FFA39E'} |
| lineOffsetY | number | 0 | 线条起始点向上偏移量 |
| startPointAnchorId | string | 保持所有线条起始点与 startPointAnchorId 线条一致 | |
| 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 | 是否显示工具栏中的下载图片 |
| 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 | - | 数据生成器，用于产生节点数据 |