Example 学习笔记 - dynamicloading

Dynamicloading - Loading graph model data dynamically to limit the number of cells in the model.

动态加载图形

http://localhost/mxgraph/javascript/examples/dynamicloading.html

function main(container)
{
  ...
  // Line: 51
  // 添加点击事件监听
  graph.addListener(mxEvent.CLICK, function(sender, evt)
  {
    var cell = evt.getProperty('cell');

    if (cell != null)
    {
      // 加载图形
      load(graph, cell);
    }
  });
  ...
  // Line: 77
  // 添加动画效果
  graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt)
  {
    var changes = evt.getProperty('edit').changes;
    mxEffects.animateChanges(graph, changes);
  });
}

function load(graph, cell)
{
  ...
  // 删除其他所有顶点
  for (var key in graph.getModel().cells)
  {
    var tmp = graph.getModel().getCell(key);

    if (tmp != cell && graph.getModel().isVertex(tmp))
    {
      // 删除顶点后 以该顶点为源或目标的连线也会被删除
      graph.removeCells([tmp]);
    }
  }

  // 临时创建model，包含新添加的cells，合并到当前parent
  graph.getModel().mergeChildren(model.getRoot().getChildAt(0), parent);
  ...
  // 计算并更新坐标
  ...
}