G6时机事件

用于监听图的某方法调用前后的时机

graph?.on('tooltipchange', () => {
  console.log('tooltipchange');
});
graph?.on('wheelzoom', () => {
  console.log('wheelzoom');
});
graph?.on('viewportchange', () => {
  console.log('viewportchange');
});
graph?.on('dragnodeend', () => {
  console.log('dragnodeend');
});
graph?.on('stackchange', () => {
  console.log('stackchange');
});
graph?.on('valuechange', () => {
  console.log('valuechange');
});
graph?.on('timelinestart', () => {
  console.log('timelinestart');
});
graph?.on('timelineend', () => {
  console.log('timelineend');
});
graph?.on('tooltipchange', () => {
  console.log('tooltipchange');
});
graph?.on('beforerender', () => {
  console.log('beforerender');
});
graph?.on('afterrender', () => {
  console.log('afterrender');
});
graph?.on('beforeadditem', () => {
  console.log('beforeadditem');
});
graph?.on('afteradditem', () => {
  console.log('afteradditem');
});
graph?.on('beforeremoveitem', () => {
  console.log('beforeremoveitem');
});
graph?.on('afterremoveitem', () => {
  console.log('afterremoveitem');
});
graph?.on('beforeupdateitem', () => {
  console.log('beforeupdateitem');
});
graph?.on('afterupdateitem', () => {
  console.log('afterupdateitem');
});
graph?.on('beforeitemvisibilitychange', () => {
  console.log('beforeitemvisibilitychange');
});
graph?.on('afteritemvisibilitychange', () => {
  console.log('afteritemvisibilitychange');
});
graph?.on('beforeitemstatechange', () => {
  console.log('beforeitemstatechange');
});
graph?.on('afteritemstatechange', () => {
  console.log('afteritemstatechange');
});
graph?.on('beforeitemstatesclear', () => {
  console.log('beforeitemstatesclear');
});
graph?.on('afteritemstatesclear', () => {
  console.log('afteritemstatesclear');
});
graph?.on('beforemodechange', () => {
  console.log('beforemodechange');
});
graph?.on('aftermodechange', () => {
  console.log('aftermodechange');
});
graph?.on('beforeitemrefresh', () => {
  console.log('beforeitemrefresh');
});
graph?.on('afteritemrefresh', () => {
  console.log('afteritemrefresh');
});
graph?.on('beforelayout', () => {
  console.log('before layout');
});
graph?.on('graphstatechange', () => {
  console.log('graphstatechange');
});
graph?.on('afteractivaterelations', () => {
  console.log('afteractivaterelations');
});
graph?.on('nodeselectchange', () => {
  console.log('nodeselectchange');
});
graph?.on('beforecreateedge', () => {
  console.log('beforecreateedge');
});
graph?.on('aftercreateedge', () => {
  console.log('aftercreateedge');
});
graph?.on('beforecollapseexpandcombo', () => {
  console.log('beforecollapseexpandcombo');
});
graph?.on('aftercollapseexpandcombo', () => {
  console.log('aftercollapseexpandcombo');
});
graph?.on('afterlayout', () => {
  console.log('after layout');
  graph?.fitView();
});
graph?.on('itemcollapsed', ({ item, collapsed }) => {
  // if (!collapsed) {
  //   // 当前被操作的节点 item
  //   console.log(item);
  //   // 当前操作是收起（`true`）还是展开（`false`）
  //   console.log(collapsed);
  // }
  renderGraph();
});
graph?.on('node:click', ({ item }) => {
  const model = item?.getModel();
  console.log(model);
});