在Batik中使用DOM MutationEvent实现SVG绘图的Undo/Redo

  
在Batik中使用DOM MutationEvent实现SVG绘图的Undo/Redo
2007-4-6        创建
2007-4-9        文字修改

基础
命令的撤消（Undo）和恢复（Redo）在绘图程序中十分必要，在Javax.swing.undo库中提供了撤消和恢复的基础类结构，简化了Java程序Undo/Redo功能的实现。这些类库不仅仅能够在Swing程序中使用，也可以在其它应用类型中使用。其基本使用方法包括：
 
1.         定义一个保存程序状态的可恢复编辑的类，一般为AbstractUndoableEdit的子类，并根据实际应用实现其中的Undo/Redo方法。
2.         创建恢复管理器，一般使用类库中的UndoManager定义就可以满足要求，特殊情况下可以定制。该管理器提供了对用户Undo/Redo操作的接口。
3.         在状态改变时，创建可恢复编辑的类的实例，并保存到恢复管理器。
4.         在界面中实现对恢复管理器Undo/Redo的调用，一般通过用户界面上的按钮操作。
 
网上有很多对这些类库的详细描述，包括绘图的应用，文本编辑的应用以及命令模式结合的使用。其中比较有名的是一个实现Undo/Redo功能的简单的绘图示例程序，下载地址在http://www.java2s.com/Code/Java/Swing-JFC/UndoDrawing.htm。本文不再详细描述这个方面的内容。

DOM MutationEvent
在基于状态模式的绘图程序中，为了实现Undo/Redo功能，需要每个状态子类记录其操作的内容。因为实际的绘图操作发生在具体的子类中，在上下文中只知道绘图应用现在所处的状态。如果要结合命令模式，也必然要将每个子类的动作重写为可保存的命令，这样才能保存操作状态。
如果是一般的绘图程序，似乎也没有别的选择，但是对基于XML的SVG应用，情况就不同了。因为所有的绘图操作最终是对DOM树的操作，只要能够记录DOM的变化，就可以得到任意时刻的绘图状态，而这个变化就是DOM MutationEvent。
DOM MutationEvent是DOM2.0中增加，记录了所有对DOM树操作的事件。其中包括：
l         类型（type），包括节点添加、删除，节点属性改变，文本改变等。
l         目标节点（target)
l         相关节点（relatedNode），例如在节点删除时，相关节点记录的是目标节点的父节点。
l         属性名称
l         旧属性值
l         新属性值
 
由此可以看出，只要保存了该事件，就可以记录图形的改变，并可以根据这些记录进行撤消和恢复。
 
实现
具体实现的步骤包括：
1.         定义可恢复编辑的类，包含一个MutationEvent事件。
[align=left]publicclass CanvasUndoEdit extends AbstractUndoableEdit {[/align]
[align=left]        private DOMMutationEvent mevt = null;[/align]
      
实现基于MutationEvent事件的Undo/Redo操作
[align=left]privatevoid updateUndoCanvas()[/align]
[align=left]{[/align]
[align=left]    JSVGCanvas svgCanvas = Context.getInstance().getSvgCanvas();[/align]
[align=left]    svgCanvas.getUpdateManager().getUpdateRunnableQueue().invokeLater(new Runnable()[/align]
[align=left]{[/align]
[align=left]    publicvoid run(){[/align]
[align=left]    if (mevt.getType().equals(Context.DOM_NODE_INSERTED)) [/align]
[align=left]    {[/align]
[align=left]       mevt.getRelatedNode().removeChild((Node)mevt.getTarget());[/align]
[align=left]    } [/align]
[align=left]    elseif (mevt.getType().equals(Context.DOM_NODE_REMOVED)) [/align]
[align=left]    {[/align]
[align=left]        mevt.getRelatedNode().appendChild((Node)mevt.getTarget());[/align]
[align=left]    }[/align]
[align=left]    elseif (mevt.getType().equals(Context.DOM_ATTR_MODIFIED)) [/align]
[align=left]    {[/align]
[align=left]((Element)mevt.getTarget()).setAttributeNS(null, mevt.getAttrName(), mevt.getPrevValue());[/align]
[align=left]    }[/align]
[align=left]}[/align]
[align=left] });[/align]
[align=left]}[/align]
[align=left]    [/align]
[align=left]privatevoid updateRedoCanvas()[/align]
[align=left]{[/align]
[align=left]    JSVGCanvas svgCanvas = Context.getInstance().getSvgCanvas();[/align]
[align=left]    svgCanvas.getUpdateManager().getUpdateRunnableQueue().invokeLater(new Runnable(){[/align]
[align=left]publicvoid run()[/align]
[align=left]{[/align]
[align=left]    if (mevt.getType().equals(Context.DOM_NODE_INSERTED)) [/align]
[align=left]    {[/align]
[align=left]        mevt.getRelatedNode().appendChild((Node)mevt.getTarget());[/align]
[align=left]    } [/align]
[align=left]    elseif (mevt.getType().equals(Context.DOM_NODE_REMOVED)) [/align]
[align=left]    {[/align]
[align=left]       mevt.getRelatedNode().removeChild((Node)mevt.getTarget());[/align]
[align=left]    }[/align]
[align=left]    elseif (mevt.getType().equals(Context.DOM_ATTR_MODIFIED)) [/align]
[align=left]    {[/align]
[align=left]((Element)mevt.getTarget()).setAttributeNS(null, mevt.getAttrName(), mevt.getNewValue());[/align]
[align=left]    }[/align]
[align=left]}[/align]
[align=left]    });[/align]
}
 
2.         侦听DOM MutationEvent事件
[align=left]      EventTarget objects = (EventTarget)svgCanvas.getSVGDocument().getElementById("canvas");[/align]
[align=left]    objects.addEventListener("DOMNodeInserted", context, true);[/align]
[align=left]    objects.addEventListener("DOMNodeRemoved", context, true);[/align]
objects.addEventListener("DOMAttrModified", context, true);
 
3.         在侦听器中创建恢复管理器UndoManager，
[align=left]    UndoManager undoManager = new UndoManager();[/align]
 
在接收到事件时，根据DOM MutationEvent创建可以恢复的对象，并将对象记录到恢复管理器
[align=left]undoManager.addEdit(new CanvasUndoEdit(mevt));[/align]
[align=left] [/align]
4.         最后，在界面中添加按钮，调用恢复管理器的Undo/Redo操作
[align=left]undoBtn.addActionListener(new ActionListener() {[/align]
[align=left]       publicvoid actionPerformed(ActionEvent ae) {[/align]
[align=left]           context.getCue().undo();[/align]
[align=left]         }[/align]
[align=left]       });[/align]
[align=left]       [/align]
[align=left]    redoBtn.addActionListener(new ActionListener() {[/align]
[align=left]       publicvoid actionPerformed(ActionEvent ae) {[/align]
[align=left]           context.getCue().redo();[/align]
[align=left]           }[/align]
[align=left]        });[/align]
[align=left] [/align]
结论
[align=left]使用DOM Event方式进行Undo/Redo也存在一些问题，例如[/align]
[align=left]1，对使用鼠标，移动/拖动进行绘图时产生大量的DOM修改事件，以至于用户无法有效的使用UNDO/REDO。[/align]
[align=left]2, 如何将一次进行多个DOM修改操作作为一个事务进行撤消和恢复，以避免出现中间状态。[/align]
[align=left]对这些问题，可以通过一些技巧性的方法加以解决，例如增加事务保存点事件等。[/align]
[align=left]总之，基于XML的SVG绘图的特点，以及在Java强大的基础类库支持下，创建支持Undo/Redo功能的绘图程序变得十分简便。[/align]