对于DirectedGraph以及DirectedGraphLayout的一点思索

凡是研究过GEF的例子Flow的，都应该知道这个例子是可以自动布局的，当向“画图工作区”添加一些图形元素的时候，程序将会自动布局，并以动画的形式表示出来。这个功能看起来很简单，但是实际上却包含了很多需要我们考虑的内容。起初，我对其中的动画部分很感兴趣，非常希望了解更多的实现动画的方式，因为我就是一个俗人，我只想知道怎么才能让程序如此之炫，但是直至深入研究下去才发现，原来还有比这更有意思的东西存在，当然这是以往我所不知道的，这里我把它们写出来，算是一个自我总结吧。
问题出现在查看例子中各个EditPart源码的过程中，我发现在几个EditPart的源码中总是会出现几个方法：
contributeEdgesToGraph(CompoundDirectedGraph graph, Map map)；
contributeNodesToGraph(CompoundDirectedGraph graph, Subgraph s, Map map)；
applyGraphResults(CompoundDirectedGraph graph, Map map)；
applyChildrenResults(CompoundDirectedGraph graph, Map map)；
说实话，起初我真的不明白这几个方法究竟是干嘛的，这些方法都是孤立的方法，EditPart中其他方法并没有对它们进行使用，不仅如此，这些方法中还有一个奇怪的参数CompoundDirectedGraph更是让我一头雾水，这个类到底是干什么的呢？最后经过多方查找，并谷歌了半天，才知道它们被用到的底层图形的LayoutManager中。
做GEF的，用脚后跟都知道，“图形工作区”本身是需要一个EditPart的，而这个作为Controller的EditPart是需要一个我称之为底层图形的Figure的，这个Figure是在EditPart的createFigure方法中生成的，在Flow例子中也不例外，通过源码我们可以看出，这个Figure不像我们普通的GEF应用那样使用了XYLayout，而是使用了自定义的GraphLayoutManager。

 1 protected IFigure createFigure() {
 2     Figure f = new Figure() {
 3         public void setBounds(Rectangle rect) {
 4             int x = bounds.x, y = bounds.y;
 5             boolean resize = (rect.width != bounds.width) || (rect.height != bounds.height), translate = (rect.x != x) || (rect.y != y);
 6 
 7             if (isVisible() && (resize || translate))
 8                 erase();
 9             if (translate) {
10                 int dx = rect.x - x;
11                 int dy = rect.y - y;
12                 primTranslate(dx, dy);
13             }
14             bounds.width = rect.width;
15             bounds.height = rect.height;
16             if (resize || translate) {
17                 fireFigureMoved();
18                 repaint();
19             }
20         }
21     };
22     f.setLayoutManager(new GraphLayoutManager(this));
23         
24     return f;
25 }
26 

请注意第22行，由此可见底层图形的布局管理就着落在这个自定义的LayoutManager上了。 那么既然是一个自定义的LayoutManager，那么就让我们见识见识它的庐山真面目吧：

 

class GraphLayoutManager extends AbstractLayout {

    private ActivityDiagramPart diagram;

    GraphLayoutManager(ActivityDiagramPart diagram) {
        this.diagram = diagram;
    }

    /**
     * 这里的这个container就是安装了这个布局管理器的那个EditPart所对应的Figure
     * 在这里，它就是diagram这个EditPart对应的底层图形元素
     */
    protected Dimension calculatePreferredSize(IFigure container, int wHint, int hHint) { 
        container.validate();
        List children = container.getChildren();
        Rectangle result = new Rectangle().setLocation(container.getClientArea().getLocation());
        for (int i = 0; i < children.size(); i++)
            result.union(((IFigure) children.get(i)).getBounds());
        result.resize(container.getInsets().getWidth(), container.getInsets()
                .getHeight());
        return result.getSize();
    }

    public void layout(IFigure container) {
        GraphAnimation.recordInitialState(container);
        if (GraphAnimation.playbackState(container))
            return;

        CompoundDirectedGraph graph = new CompoundDirectedGraph();
        Map partsToNodes = new HashMap();
        diagram.contributeNodesToGraph(graph, null, partsToNodes);
        diagram.contributeEdgesToGraph(graph, partsToNodes);
        new CompoundDirectedGraphLayout().visit(graph);
        diagram.applyGraphResults(graph, partsToNodes);
    }

}

 

呀，怎么这么简单。呵呵，不然。首先，我们看到了上面我们说过的两个不知所谓的方法，由此证明这些方法是和布局有关的，但是我们还发现，这里面还有一个方法new CompoundDirectedGraphLayout().visit(graph)；这又是何方神圣？为啥弄个visit的方法名，莫非...

当然，答案是肯定的，Flow例子在布局管理器上使用了访问者模式，我跪倒在地了，我还能说什么，世界上就是有一些人生下来就比我强，不知道各位如何，也许你们会对此嗤之以鼻，会说访问者模式谁不会用，还用说么？但是我不会这样，我只有佩服，Eclipse真的是一座宝库，里面需要我们理解和学习的东西太多了。那么我们就看看CompoundDirectedGraphLayout的庐山真面目吧：

 1 public final class CompoundDirectedGraphLayout extends DirectedGraphLayout {
 2 
 3     void init() {
 4         steps.add(new TransposeMetrics());
 5         steps.add(new CompoundBreakCycles());
 6         steps.add(new RouteEdges());
 7         steps.add(new ConvertCompoundGraph());
 8         steps.add(new InitialRankSolver());
 9         steps.add(new TightSpanningTreeSolver());
10         steps.add(new RankAssignmentSolver());
11         steps.add(new CompoundPopulateRanks());
12         steps.add(new CompoundVerticalPlacement());
13         steps.add(new MinCross(new CompoundRankSorter()));
14         steps.add(new SortSubgraphs());
15         steps.add(new CompoundHorizontalPlacement());
16     }
17 
18 }
19 

 

这里面steps增加的每一个元素都是一个visitor，每一个visitor都是GraphVisitor的一个子类，它们工作总的来说就是对给定的DirectedGraph进行修改，从上面给出的那么多visitor中，从字面上可以看出有“对边进行路由”，“减少边的交叉”，“垂直摆放”，“水平摆放”等等。当然还有好多不能从字面上翻译，但是至少我们能够看出，布局管理器首先将底层图形及其包含的所有子图形转化为一个DirectedGraph，然后通过访问者模式将相应的DirectedGraph进行了修改，然后再把修改后的结果“布局出来”，布局的过程是通过动画的形式来实现的。套用平原枪声的一句老话：高，实在是高！

到此扯了这么多，那到底啥是DirectedGraph呢？字面上，当然是“有向图”，但是如果这么理解可能会更好，那就是：DirectedGraph是一个抽象概念的图形，它和Figure不同之处在于，它仅仅维护了概念图形中包含了那些节点、这些节点之间有哪些边（Edge），就像我们学习数据结构时讨论的Graph一样，它并不关心这些图形应该如何绘制，你愿意把它画到墙上还是画在纸上，以及你怎么画这个图，它完全不管。为了让它能够正常工作必须将它和相应的EditPart -- Viewer结合起来，由DirectedGraph负责概念领域的图形，对应的Figure负责显示，而EditPart负责Viewer的创建；分离，指责分离，解耦这恐怕是程序的最高境界了吧，看看高手是怎么做的。唉，我还差的远哪！