jBPM-Side 流程設計器架構深度解析：基於 GEF 的 Model-View 分離設計

jBPM-Side 是基於 Eclipse GEF (Graphical Editing Framework) 的流程設計器，採用經典 Model-View-Controller 架構，實現 XML 流程定義的可視化編輯。本文剖析其代碼結構、核心組件交互、GEF 整合細節及擴展點。

整體代碼分層

核心組件詳解

Model 層：領域模型與 jPDL 4 對齊

• ProcessModel：流程定義根節點
• NodeModel / ConnectionModel：節點/連線基類
• 具體節點：StartNode, EndNode, ForkNode, JoinNode, TaskNode...
  最新模型遷移至 org.jbpmside.model.common，jPDL 4 支援在 org.jbpmside.model.jpdl4。

View 層：Degrafa 渲染的視圖組件

• SurfaceComponent：畫布容器，繼承 GraphicViewer
• NodeComponent / ConnectionComponent：節點/連線視圖，繼承 GraphicEditPart
• 使用 Degrafa 向量繪圖庫渲染，支援豐富視覺效果。
• 缺少屬性彈出框組件（待補）。

GEF 整合：Model-View 粘合劑

IGraphicalEditor & IEditPart

• IGraphicalEditor：全域編輯器介面，getGraphicViewer() 返回當前活躍 Tab 的畫布。
• IEditPart：單個圖形編輯元素，核心 getModel()/setModel() 綁定 Model 物件。
  GraphicViewer→SurfaceComponent，GraphicEditPart→NodeComponent/ConnectionComponent。

Tool：事件處理委派

原生滑鼠/鍵盤事件不直接在 Component 處理，而是委派給 Tool：

// SurfaceComponent 滑鼠點擊
public function mouseClickHandler(event:MouseEvent):void {
    this.tool.mouseClick(event, compX, compY);
}

ToolManager（SurfaceToolsManager/NodeToolsManager/ConnectionToolsManager）管理 Tool 切換策略（如選中工具欄「建立節點」後，點擊畫布改為新增節點而非選取）。Tool 無狀態、全域單例。

Command：撤銷/重做與 Model-View 同步

• 所有視圖/模型變更必須透過 Command 執行。
• CommandService 與 SurfaceComponent 1:1 綁定，持有 CommandStack 實現 Undo/Redo。
• 目前僅實作 Undo，Redo 待補。

TheModel：全域單例總線

• 自定義事件發布/訂閱中心
• 持有工具欄/菜單狀態
• 剪貼板管理，支援跨 Tab 節點複製/剪切

XML 框架：分散式 Binding 解析

public function parse(xml:String):ProcessDefinition {
    var parser:Parser = new Parser();
    return parser.createParse().setString(xml).execute().getProcessDefinition();
}

• 採用 E4X + Binding，每節點類型一個 Binding 類，避免巨型單檔解析器。
• 測試代碼在 test/ 目錄，為專案唯一單元測試覆蓋區。

待完成工作清單

1. XML 框架完善 jPDL 4 全節點類型解析
2. 本地檔案操作支援（首版為本地應用）
3. 模型遷移至 org.jbpmside.model.common 統一介面
4. 工具欄用 FlexLib 重寫、16px 圖標、節點屬性彈出框
5. Command 實作 Redo 功能

GEF 的 Model-View 分離與 Command 體系，讓 jBPM-Side 擁有清晰擴展點，支援複雜流程編輯場景的長期演進。