mxgraph undo redo design
mxGraph 中的 undo redo 设计
// mxGraph 中的 更新是如何做的
在 mxGraph 中,想要更新状态,例如修改节点的尺寸,需要使用 model 上的方法 setGeometry,
model.beginUpdate();
try {
model.setGeometry(cell, new mxGeometry(x, y, w, h));
} finally {
model.endUpdate();
}
使用 beginUpdate 和 endUpdate 包裹操作的主要目的是为了确保所有与变更(change)相关的操作及其事件触发被包含在一个事务中,从而优化性能并保持数据一致性
setGeometry
的实现
mxGraphModel.prototype.setGeometry = function(cell, geometry)
{
if (geometry != this.getGeometry(cell))
{
this.execute(new mxGeometryChange(this, cell, geometry));
}
return geometry;
};
mxGeometryChange
的实现,geometry 等于current,previous则是上一次的 geometry;也就是一个change包含了当前和之前的状态;mxGeometryChange 只是为了创建,而 execute 则是真正执行这个 change
function mxGeometryChange(model, cell, geometry)
{
this.model = model;
this.cell = cell;
this.geometry = geometry;
this.previous = geometry;
};
mxGeometryChange.prototype.execute = function()
{
if (this.cell != null)
{
this.geometry = this.previous;
this.previous = this.model.geometryForCellChanged(
this.cell, this.previous);
}
};
execute
的实现
mxGraphModel.prototype.execute = function(change)
{
change.execute();
this.beginUpdate();
this.currentEdit.add(change);
...
this.endUpdate();
};
// mxGraph 中如何保存更新
// mxGraph 中的uodo redo 设计
// undo redo 的操作是如何实现的