当用户和topology交互时，会通过回调函数，给用户发送消息通知。

使用方式1

在new Topology(id || HtmlElement, options)时，给options设置一个on的回调函数即可。

  1. const canvasOptions = {};
  2. const onMessage = (event: string, data: any) => {
  3.   console.log(event, data);
  4. }
  5. canvasOptions.on = onMessage;
  7. const canvas = new Topology('topology-canvas', canvasOptions);

使用方式2

监听消息

  1. const subcribe = (e) => {};
  2. topology.on('addNode', subcribe);
  4. // 取消监听
  5. topology.off('addNode', subcribe)

消息列表

event（字符串） data 描述
opened 打开新文件
node Node 选中了一个节点
nodeRightClick Node 右击了一个节点
line Line 选中了一条连线
lineRightClick Line 右击了一条连线
multi {
nodes: [],
lines: [],
}		 选中多个节点/连线
space 点击空白，清空选中对象
moveInNode Node 鼠标移动到节点
moveOutNode Node 鼠标移出节点
moveInLine Line 鼠标移动到连线
moveOutLine Line 鼠标移出连线
move Pen[] 移动画笔
resizePens Pen[] 画笔大小改变
rotated Pen[] 画笔被旋转
dblclick Pen 双击画笔
animateEnd {
type: ‘node/line’,
data: node/line
}		 节点或连线的动画播放完成
scale number 缩放画布
translate { x, y } 平移画布
moveOutParent mouse position 按住鼠标拖曳超出父dom元素大小
resize {width, height} 画布大小改变
locked number 锁定画布：
None （0） - 未锁定，可任意编辑。
Readonly （1） - 只读模式，允许选中
NoMove (2) - 不能移动
NoEvent （10） - 禁止鼠标交互，无法做任何操作。纯静态画面模式。
delete Pen[] 删除节点/连线
addNode Node 添加节点
addLine Line 添加连线
setText 输入框输入文字
loaded 加载 topology 后
anchor {
anchor：锚点对象，
anchorIndex: 锚点索引，
node：当前锚点所属节点，
line: 新连线
}		 点击锚点
mediaEnd Node 视频/音频（audio/video）播放结束
websocket websocket data websocket 监听消息
mqtt mqtt data mqtt 监听消息
nodeCenter Node 自动瞄点，点击中心瞄点
undo 撤销后
redo 恢复后
copy
复制
paste Pen[] 粘贴
combine Node 组合/包含后
uncombine Node 取消组合/包含后
tip dom 元素 小提示
lineOn Line 已有的连线重新连上锚点
lineOnDirection 连线方向：
2 From
3 To
addLineInLines {
previous: Line，
line：Line
}		 在使用钢笔工具过程中，点击添加新的连线作为钢笔全部连线的一部分。
previous 上一条子线，即已完成的子线，它的 to 即当前鼠标按下的点。
line 新创建的子线，它的 from 即当前鼠标按下的点。