25 常见问题

HTML/React/Vue节点渲染出错

1 .这些节点内容都是渲染在SVG的foreignObject节点内部.因为浏览器的兼容性问题,经常出现一些异常性渲染行为,主要表现为

1 .节点内容展示不全
2 .节点内容闪烁

2 .规避

1 .节点内部元素的css样式不要使用position:absolute,position:relative
2 .节点内部元素的css样式不要使用transform
3 .节点内部元素的css样式不要使用opacity

3 .React/Vue等库中,导出图片会出现样式缺失的现象,暂时解决方案就是将缺失的样式补充到stylesheet属性中或者使用行内样式

this.graph.toSVG((dataUri: string) => {
  // todo
}, {
  stylesheet: `
    .my-element {
      font-size: 12px;
    }
  ` 
})

区分edge:removed事件的触发原因

1 .调用removeEdge,手动删除edge都会触发edge:removed事件,在调用这个事件的时候可以传第二个参数options,在options里面定义自己的属性.然后获取来判断
2 .所以这些类似的区分事件的操作,都可以通过这种方法来操作
3 .

edge:removed事件中获取目标节点,边删除,获取边对应的节点

graph.on('edge:removed',({edge})=>{
    const cellId=edge.getTargetCellId()
    const target=graph.getCellById(cellId)
})

监听连接桩事件

graph.addNode({
  x:60,
  y:50,
ports:[
  {
  id:'port1',
attrs:{
  circle:{
  event:"port:click"
}
}
}
]
})

graph.on('port:click',()=>{
//做一些操作
})