基於 JGraph 實現工作流圖形編輯器：核心繪圖機制、擴展策略與事件處理實戰

前言：尋找「可編程的畫布」

公司需構建工作流定制界面，現成產品無法滿足行業特定需求，從零繪圖成本太高。開源組件 **JGraph** (純 Java、支持拖拽/縮放/合併、可嵌入 Swing) 成為最佳中間件選擇。本文深度剖析 JGraph 核心模型、擴展機制與事件攔截實戰。

一、JGraph 核心繪圖模型：Cell/Vertex/Edge/Port

• 屬性映射：Map<Object, Object> attributes 以鍵值對定義外觀 (顏色、線型、箭頭、標籤位置等)
• 畫布屬性：JGraph 本身也是組件，可設置背景、網格、可編輯性、克隆行為等

二、屬性配置實例

1. Edge 樣式：帶箭頭、填充、標籤沿邊

Map<Object, Object> edgeAttr = new Hashtable<>();
GraphConstants.setLineEnd(edgeAttr, GraphConstants.ARROW_CLASSIC);
GraphConstants.setEndFill(edgeAttr, true);
GraphConstants.setLabelAlongEdge(edgeAttr, true);
edgeCell.getAttributes().applyMap(edgeAttr);

2. 畫布全局屬性

graph.setBackground(Color.decode("#C0C0C0"));
graph.setEditable(false);           // 僅查看模式
graph.setCloneable(false);          // 禁用 Ctrl+拖拽克隆
graph.setInvokesStopCellEditing(true);
graph.setJumpToDefaultPort(true);   // 邊拖拽自動吸附最近 Port
graph.setPortsVisible(false);       // 隱藏 Port 視覺標識
graph.setGridEnabled(false);
graph.setGridVisible(false);
graph.setGridColor(Color.decode("#808080"));
graph.setGridSize(10);

三、擴展策略：將業務數據「注入」圖元

1. 繼承體系映射

2. 擴展要點

• 僅需繼承對應基類，在構造器/字段中持有業務對象引用
• 覆寫 toString() 返回業務標識，便於調試
• 可動態修改 Attributes Map 實現狀態可視化 (如運行中節點變綠、異常變紅)

四、事件處理深度攔截：掌控每一次交互

1. 核心事件處理類

2. 實戰：攔截邊端點重新連接

// 自定義 EdgeHandle
public class WorkflowEdgeHandle extends EdgeView.EdgeHandle {
    public WorkflowEdgeHandle(EdgeView view) { super(view); }

    @Override
    public void handleMouseReleased(MouseEvent e, Point pt) {
        // 1. 獲取目標 Port
        PortView targetPortView = getTargetPortView(pt);
        if (targetPortView == null) { super.handleMouseReleased(e, pt); return; }

        // 2. 業務規則驗證
        WorkflowPort targetPort = (WorkflowPort) targetPortView.getCell();
        WorkflowTransitionEdge edge = (WorkflowTransitionEdge) getEdgeView().getCell();
        if (!edge.isValidTargetPort(targetPort)) {
            // 3. 非法：顯示提示、還原、不調用 super
            JOptionPane.showMessageDialog(null, "不允許連接到該類型端口");
            return; // 取消重新連接
        }

        // 4. 合法：委託父類完成視圖更新
        super.handleMouseReleased(e, pt);
        
        // 5. 同步業務模型
        edge.setTargetPort(targetPort);
        workflowModel.onTransitionReconnected(edge);
    }
}

3. 註冊自定義 Handle

// 在自定義 GraphView 或 GraphUI 中
graph.getGraphLayoutCache().setEdgeViewFactory(new EdgeViewFactory() {
    public EdgeView createEdgeView(Object cell, GraphLayoutCache cache) {
        EdgeView view = new EdgeView(cell, cache);
        view.setHandleFactory(new HandleFactory() {
            public Handle createHandle(EdgeView view, int index) {
                return new WorkflowEdgeHandle(view); // 注入自定義 Handle
            }
        });
        return view;
    }
});

五、版本選擇建議

• Free 版：核心繪圖、編輯、事件機制完整，**足夠 90% 場景**
• Pro 版：自動佈局算法 (有向圖、層次、樹)、高級路由、SVG 導出
• Layout Pro：專業佈局引擎獨立授權

六、結語

JGraph 以 **Cell/Vertex/Edge/Port** 四元模型 + **Map 屬性驅動渲染** + **可擴展事件處理鏈**，提供了極佳的「白盒畫布」。通過繼承注入業務數據、攔截 EdgeHandle 控制拓撲合法性、定制 UndoableEdit 實現業務級撤銷，我們在兩周內交付了滿足行業嚴格規範的工作流設計器。**基礎功夫決定上限**——深入理解 JGraph 核心模型與事件分發，比盲目追逐新框架更具長期價值。

1. 上一篇文章： Eclipse 3.1 泛型支持全解析：編譯器設置、錯誤警告配置與重構工具實戰
2. 下一篇文章： Java 遊戲開發常見異常排查手冊：空指針、數組越界、參數非法與類加載失敗全解析

Java 程式設計入門

Ant 構建工具入門：環境配置、build.xml 編寫與專案構建圖文教程

Ant 是什麼？ 基於 Java 的構建工具，用 XML (

Java 單例模式深度解析：七種寫法優劣與線程安全實戰

單例模式確保類別在 JVM 中僅有一個實例，並提供全域存取點

Servlet 與 JSP 開發原則：分離表現與邏輯

Servlet/JSP 是 Java 伺服器端開發核心技術。

利用 Observer 設計模式實現組件間鬆耦合通信

問題背景 開發介面時常遇到：希望保留各組件獨立性，又需它們互