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 的操作是如何实现的