ivory-topology
v1.3.1
Published
my graphics
Readme
拓扑图底层
API
一、核心
画布
类名：
Canvas参数：options: Object
container: HTMLElement 放置画布的容器元素scale?: number 画布缩放值maxScale?: number 最大缩放值minScale?: number 最小缩放值mode?: string 交互模式animate?: boolean 开启动画，使用连线动画时，需要设置为truerenderType?: string 渲染类型，默认为DOM用于渲染DOM类型的节点，如果要渲染canvas节点需要设置为CANVAS
属性：
interactionMode: string 当前交互模式renderType: string 节点渲染类型rootNode: Node 根节点stage: Node 画布舞台（rootNode的别名）eventEmitter: EventEmitter 事件模型plugins: Plugin[] 插件列表- ...
实例方法：
setZoom(scale: number): void设置画布缩放setMode(mode: string): void设置交互模式destroy(): void销毁addNode(node: Node): void添加节点removeNode(node: Node, destroy: boolean = true): void删除节点,destroy参数表示是否销毁节点setNodeTop(node: Node): void将节点置顶显示getActiveNodes(): Node[]获取激活的节点列表getActiveEdges(): Edge[]获取激活的连线列表removeAllNode(destroy: boolean = true): void删除所有节点addEdge(edge: Edge): void添加连线removeEdge(edge: Edge): void删除连线zoomIn(focus?: Vector2d): void画布放大,focus表示缩放中心zoomOut(focus?: Vector2d): void画布缩小use(plugin: Plugin): void使用插件start(): void开始绘制stop(): void停止绘制
静态方法：
registerMode(modeName: string, interactions: Interaction[])：注册自定义模式
节点
节点基类（抽象类）
类名：
Node参数：options: Object
x?: number 横坐标y?: number 纵坐标id?: any idtext?: string 显示文本data?: any 用户数据
属性：
position: Vector2d 位置id: any idmounted: boolean 是否已挂载visible: boolean 是否可见miniMapVisible: boolean 在鹰眼地图上是否可见text: string 文本vertexes: Vector2d[] 顶点坐标centerPoint: Vector2d 几何中心boundingJoinPoints: Vector2d[] 边界矩形上的连接点boundingRect: Vector2d[] 同vertexescircumradius: number 外接圆半径renderType: string 渲染类型（只读）isGroup: boolean 是否为组isExpanded: boolean 是否展开canResize: boolean 是否可以调节大小children: Node[] 子节点parent: Node | undefined 父节点edges: Edge[] 相连的连线root: Node 根节点depth: number 节点深度
实例方法：
translate(offset: Vector2d): void移动节点以及其后代元素addEdge(edge: Edge): void添加连线removeEdge(edge: Edge): void删除连线addChild(child: Node): Node|undefined添加子节点removeChild(child: Node, destroy: boolean = true): boolean删除并且销毁子节点removeAllChild(destroy: boolean = true): void删除所有子节点hasChild(child: Node): boolean判断一个节点是否为子节点hasDescendant(descendant: Node): boolean判断一个节点是否为后代节点hasActiveAncestor(): boolean判断是否有激活的祖先节点getActiveChild(): Node[]获取激活状态的子节点列表getActiveDescendant(): Node[]获取激活状态的后代节点列表getDescendantDF(handler?: handler): Node[]遍历后代节点。1.深度优先；2.从右到左；3.从下到上getDescendantBF(handler?: handler): Node[]遍历后代节点。1.广度优先； 2.从左到右；3.从上到下mount(force = false): void挂载unmount(): void卸载destroy(): void销毁
矩形节点（抽象类）
类名：
RectNode继承：
Node参数：options: Object
width?: number 宽度height?: number 高度minWidth?: number 最小宽度minHeight?: number 最小高度- 其他参数参考
Node
属性：
- 参考
Node属性
- 参考
实例方法：
- 参考
Node方法
- 参考
圆形节点（抽象类）
类名：
CircleNode继承：
Node参数：options: Object
radius?: number 半径minRadius?: number 最小半径- 其他参数参考
Node
属性：
- 参考
Node属性
- 参考
实例方法：
- 参考
Node方法
- 参考
矩形-DOM节点
类名：
RectDomNode继承：
RectNode参数：options: Object
- 参考
RectNode参数
- 参考
属性：
- 参考
RectNode属性
- 参考
实例方法：
- 参考
RectNode方法
- 参考
矩形-DOM节点组
类名：
RectDomGroup继承：
RectDomNode参数：options: Object
isExpanded?: boolean 是否展开- 其他参数参考
RectDomNode
属性：
- 参考
RectNode属性
- 参考
实例方法：
- 参考
RectNode方法
- 参考
矩形-CANVAS节点
矩形-CANVAS节点组
...
连线
连线（抽象类）
类名：
Edge参数：options: Object
targetNode: Node 靶节点sourceNode: Node 源节点text?: string 显示文本
直线
类名：
Line继承：
Edge参数：options: Object
dash?: boolean 是否虚线arrow?: boolean 显示单箭头doubleArrow?: boolean 显示双箭头animateElement?: Element 动画元素animateDuration?: number 动画时间（毫秒）- 其他参数参考
Edge
折线
类名：
L继承：
Edge参数：options: Object
dash?: boolean 是否虚线arrow?: boolean 显示单箭头doubleArrow?: boolean 显示双箭头animateElement?: Element 动画元素animateDuration?: number 动画时间（毫秒）- 其他参数参考
Edge
二、交互
交互
交互是指完成特定功能的用户动作
交互基类（抽象类）
- 类名：
Interaction - 参数：无
- 类名：
滚轮缩放
- 类名：
WheelZoomInteraction - 参数：无
- 类名：
鼠标拖拽释放
- 类名：
DropInteraction - 参数： 无
- 类名：
拖动画布
- 类名：
MoveCanvasInteraction - 参数：无
- 类名：
拖动节点或画布
- 类名：
DragInteraction - 参数：无
- 前置依赖：
SelectInteraction
- 类名：
选中节点或连线
- 类名：
SelectInteraction - 参数：无
- 类名：
节点连线
- 类名：
CreateEdgeInteraction - 参数：(onCreate?: (sourceNode: Node, targetNode: Node) => Edge)
- 类名：
框选节点
- 类名：
AreaPickInteraction - 参数：无
- 类名：
右键菜单创建分组
- 类名：
CreateGroupInteraction - 参数：(
onCreate?: () => Node) - 依赖插件：
ContextMenu
- 类名：
折叠或展开节点
- 类名：
CollapseAndExpandInteraction - 参数：无
- 类名：
鼠标调整节点大小
- 类名：
ResizeInteraction - 参数：无
- 类名：
模式
模式是一组交互的集合
默认模式
常量：
MODE_DEFAULT交互组：
SelectInteractionDragInteractionDropInteractionWheelZoomInteractionCollapseAndExpandInteraction
查看模式
常量：
MODE_VIEW交互组:
MoveCanvasInteractionWheelZoomInteraction
连线模式（直线）
常量：
MODE_CREATE_EDGE交互组：
SelectInteractionWheelZoomInteractionCreateEdgeInteractionMoveCanvasInteraction
连线模式（折线）
常量：
MODE_CREATE_L交互组：
SelectInteractionWheelZoomInteractionCreateEdgeInteractionMoveCanvasInteraction
框选模式
常量：
MODE_AREA_PICK交互组：
WheelZoomInteractionAreaPickInteractionCreateGroupInteraction
边框模式
常量：
MODE_BORDER交互组：
ResizeInteractionWheelZoomInteraction
三、插件
插件基类（抽象类）
类名：
Plugin实例方法：
install(canvas: Canvas): void安装destroy(): void销毁update(): void更新，画布重绘时，内部调用
右键菜单
类名：
ContextMenu继承：
Plugin参数：无
属性：
onContextMenu: (instance: this, target: Node | Edge | null, nodes: Node[], edges: Edge[]) => IMenu[] 该属性是一个返回菜单数组的函数，鼠标右键时执行menu: IMenu[] 菜单列表IMenu(菜单项)字段label: stringcommand: string
实例方法
show(menu: IMenu[] = [], left?: number, top?: number): void显示菜单，left,top为显示位置hide(): void隐藏
鹰眼地图
类名：
MiniMap继承：
Plugin参数：(
width= 200,height= 200)实例方法：
mount(container: HTMLElement): void挂载到容器元素内unmount(): void卸载- 其他方法参考
Plugin
四、布局
布局基类（抽象类）
类名：
Layout参数：(
canvas: Canvas)实例方法：
layout(): void布局
行列布局
类名：
MatrixLayout继承：
Layout参数：(
canvas: Canvas)属性：
rows: number 行数rowGap: number 行间距columns: number 列数columnGap: number 列间距nodeRadius: number 节点半径duration: number 布局过渡时间（毫秒）
实例方法：
- 参考
Layout方法
- 参考
环形布局
类名：
CircularLayout继承：
Layout参数：(
canvas: Canvas)属性：
clockwise: boolean 顺时针radius: number 布局半径startAngle: number 开始角度（弧度）endAngle: number 结束角度（弧度）duration: number 布局过渡时间（毫秒）gap: number 节点间距nodeRadius: number 节点半径
实例方法：
- 参考
Layout方法
- 参考
力导布局
类名：
ForceLayout继承：
Layout参数：(
canvas: Canvas)属性：
elasticity: number 弹性系数，值越大，相连的节点越靠近attractive: number 中心吸引系数，值越大，节点越靠近画布中心repulsion: number 斥力系数，值越大，节点相距越远damping: number 阻尼系数，值越大，节点速度衰减越快edgeLength: number 连线自然长度animate: number 是否开启布局动画，节点较多时，关闭动画可能会造成页面假死
实例方法：
- 参考
Layout方法
- 参考
五、其他
事件触发器
类名：
EventEmitter属性：
events: IEvents 事件池
实例方法
on(eventName: string, listener: (event?: any): void): void监听事件off(eventName: string, listener: (event?: any): void): void移除监听emit(eventName: string, params?: any): void触发事件
二维向量
类名：
Vector2d实例属性：
x: number 横坐标y: number 纵坐标magnitude: number 模
静态属性：
xAxis: Vector2d x轴单位向量yAxis: Vector2d y轴单位向量
实例方法：
add(target: Vector2d): this矢量加substract(target: Vector2d): this矢量减dotProduct(target: Vector2d): number点积crossProduct(target: Vector2d): number叉积scale(scalar: number): this与标量相乘edge(target: Vector2d): Vector2d边缘向量perpendicular(): Vector2d正交向量normalize(): Vector2d单位向量normal(): Vector2d法向量cosAngle(target: Vector2d): number求与目标向量的夹角余弦值angle(target: Vector2d): number求与目标向量的夹角（弧度值）xAxisAngle(): number与x轴夹角(顺时针为正) [-Math.PI,Math.PI]rotate(deg: number): this旋转向量project(target: Vector2d): Vector2d在目标向量上的投影equal(target: Vector2d): boolean是否与目标向量相等copy(target: Vector2d): this复制目标向量clone(): Vector2d克隆当前向量
Math2d
类名：
Math2d静态方法：
isPointInRect(P: Vector2d, rectPosition: Vector2d, width: number, height: number): boolean判断点是否在矩形内isPointInCircle(P: Vector2d, C: Vector2d, radius: number): boolean判断点是否在圆内isPointInTriangle(P: Vector2d, A: Vector2d, B: Vector2d, C: Vector2d): boolean判断点是否在三角形内isPointInPolygon(P: Vector2d, points: Vector2d[]): boolean判断点是否在多边形内isPointInLineSegment(P: Vector2d, lineSegment: [Vector2d, Vector2d], deviation: number = 0.01): boolean判断点是否在线段上isPointInPolyline(P: Vector2d, polyline: Vector2d[], deviation: number = 0.01): boolean判断点是否在多线段上isIntersect(line1: [Vector2d, Vector2d], line2: [Vector2d, Vector2d]): boolean判断两条线是否相交getLineIntersect(line1: [Vector2d, Vector2d], line2: [Vector2d, Vector2d]): Vector2d获取两条相交线段的交点getLinePoint(line: Vector2d[], ratio: number): Vector2d | null根据ratio,获取线段上点的坐标,起点为0,终点为1getPolyLineLength(line: Vector2d[]): number获取多线段的长度
canvas基本元素
Element基类（抽象类）
类名：
Element属性：
position: Vector2d 位置offset: Vector2d 偏移
实例方法：
render(ctx: CanvasRenderingContext2D): void渲染isPointIn(point: Vector2d): boolean判断点是否在图形内
矩形
类名：
Rect继承：
Element属性：
width: number 宽height: height 高fillStyle: stringstrokeStyle: string- 其他属性参考
Element
实例方法：
- 参考
Element
- 参考
三角形
类名：
Triangle继承：
Element属性：
width: number 宽height: height 高- 其他属性参考
Element
实例方法：
- 参考
Element
- 参考
图片
类名：
Img继承：
Element属性：
image: CanvasImageSource | undefined- 其他属性参考
Element
实例方法：
- 参考
Element
- 参考
多线段
类名：
Polyline继承：
Element属性：
points: Vector2d[]lineWidth: number- 其他属性参考
Element
实例方法：
- 参考
Element
- 参考
文字
类名：
Text继承：
Element属性：
text: stringfont: stringbackgroundColor: string- 其他属性参考
Element
实例方法：
- 参考
Element
- 参考