在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 事件。

public class CanvasUndoEdit extends AbstractUndoableEdit {

        private DOMMutationEvent mevt = null ;

      

实现基于MutationEvent事件的Undo/Redo操作

private void updateUndoCanvas()

{

    JSVGCanvas svgCanvas = Context.getInstance().getSvgCanvas();

    svgCanvas.getUpdateManager().getUpdateRunnableQueue().invokeLater( new Runnable()

{

    public void run(){

    if ( mevt .getType().equals(Context. DOM_NODE_INSERTED ))

    {

       mevt .getRelatedNode().removeChild((Node) mevt .getTarget());

    }

    else if ( mevt .getType().equals(Context. DOM_NODE_REMOVED ))

    {

        mevt .getRelatedNode().appendChild((Node) mevt .getTarget());

    }

    else if ( mevt .getType().equals(Context. DOM_ATTR_MODIFIED ))

    {

((Element) mevt .getTarget()).setAttributeNS( null , mevt .getAttrName(), mevt .getPrevValue());

    }

}

 });

}

   

private void updateRedoCanvas()

{

    JSVGCanvas svgCanvas = Context.getInstance().getSvgCanvas();

    svgCanvas.getUpdateManager().getUpdateRunnableQueue().invokeLater( new Runnable(){

public void run()

{

    if ( mevt .getType().equals(Context. DOM_NODE_INSERTED ))

    {

        mevt .getRelatedNode().appendChild((Node) mevt .getTarget());

    }

    else if ( mevt .getType().equals(Context. DOM_NODE_REMOVED ))

    {

       mevt .getRelatedNode().removeChild((Node) mevt .getTarget());

    }

    else if ( mevt .getType().equals(Context. DOM_ATTR_MODIFIED ))

    {

((Element) mevt .getTarget()).setAttributeNS( null , mevt .getAttrName(), mevt .getNewValue());

    }

}

    });

}

 

2.         侦听DOM MutationEvent 事件

      EventTarget objects = (EventTarget) svgCanvas .getSVGDocument().getElementById( "canvas" );

    objects.addEventListener( "DOMNodeInserted" , context , true );

    objects.addEventListener( "DOMNodeRemoved" , context , true );

objects .addEventListener( "DOMAttrModified" , context , true );

 

3.         在侦听器中创建恢复管理器UndoManager ，

    UndoManager undoManager = new UndoManager();

 

在接收到事件时，根据DOM MutationEvent创建可以恢复的对象，并将对象记录到恢复管理器

undoManager.addEdit(new CanvasUndoEdit(mevt));

 

4.         最后， 在界面中添加按钮 ，调用恢复管理器的Undo/Redo 操作

undoBtn .addActionListener( new ActionListener() {

       public void actionPerformed(ActionEvent ae) {

           context .getCue().undo();

         }

       });

      

    redoBtn .addActionListener( new ActionListener() {

       public void actionPerformed(ActionEvent ae) {

           context .getCue().redo();

           }

        });

 

结论

使用 DOM Event 方式进行Undo/Redo也 存在一些问题，例如

1 ，对使用鼠标，移动 / 拖动进行绘图时产生大量的DOM修改事件，以至于用户无法有效的使用 UNDO/REDO 。

2, 如何将 一次进行多个 DOM修改 操作作为一个事务进行撤消和恢复，以避免出现中间状态。

对这些问题，可以通过一些技巧性的方法加以解决，例如增加事务保存点事件等。

总之，基于 XML 的 SVG 绘图的特点，以及在 Java 强大的基础类库支持下，创建支持Undo/Redo功能的绘图程序变得十分简便。