Diagram

GoJS

Diagram은 Northwoods Software사의 GoJS와 Alopex를 연동하여 사용할 수 있는 Alopex BPMN 기능을 제공합니다.

Alopex BPMN 이외의 GoJS만의 기능을 사용하시려면 직접 구매 후 사용하셔야 합니다.

BPMN(Business Process Model and Notation) 은 업무 프로세스를 정의하고, 이를 이해 할 수 있도록 시각적으로 표현하는 기법입니다. Alopex 에서는 GoJS를 활용하여 각 노드를 링크 시키고, 업무 흐름을 시각화 할 수 있는 BPMN 기능을 제공합니다.

Bpmn Sample

• 커스텀 Palette 아이콘 드래그/드랍을 통해, 중앙 Workflow 노드 생성을 확인할 수 있습니다. 각 노드는 서로 링크 연결이 가능합니다.
  
• Workflow 노드 클릭 시 노드 데이터 Get 되어 Node Data에 해당 데이터가 표시 됩니다.
  
• Workflow 위에서 마우스 우클릭 시, 커스텀 컨텍스트 메뉴 확인이 가능합니다.
  
• Node Data 직접 수정 후, [Update Property] 버튼을 통해 노드 데이터 Set 기능을 확인 할 수 있다.
  

기능설명

• [Run All] 버튼을 클릭 시, Workflow의 흐름을 시각적으로 표현되는 Link Animation 효과를 확인할 수 있습니다.
  
• [Run Single] 버튼을 통해, Workflow의 특정 노드의 상태 변화를 시각적으로 표현되는 Node Animation 효과를 확인할 수 있습니다.
  
• [Get Data] 버튼을 통해, Workflow의 전체 Model 데이터 Get 할 수 있고, 데이터의 구성을 확인할 수 있습니다.
  
• [Set Data] 버튼을 통해, Workflow의 전체 Model 데이터 Set 할 수 있고, 데이터의 변경에 대한 반영을 확인할 수 있습니다.
  
• [Change Link Style] 선택창에서 Link 스타일 동적 변경이 가능합니다.
  

적용

<script src="{path}/diagram/gojs/gojs.js"></script> <!-- 공통 (필수) -->
<script src="{path}/diagram/gojs/BPMNClasses.js"></script> <!-- BPMN (필수) -->
<script src="{path}/diagram/bpmn/alopex-bpmn.min.js"></script> <!-- BPMN (필수) -->
<script src="{path}/diagram/bpmn/sample/alopex-bpmn-biz.js"></script> <!-- BPMN (필수) -->

<link rel="stylesheet" type="text/css" href="{path}/diagram/gojs/gojs.css" /> <!-- 공통 (필수) -->
<link rel="stylesheet" type="text/css" href="{path}/diagram/bpmn/alopex-bpmn.css" /> <!-- BPMN (필수) -->

사용방법 및 API

BPMN 초기화

// div element를 Alopex BPMN으로 초기화합니다.
$(div).bpmn();

• div element를 Alopex BPMN으로 초기화합니다.

addTemplate

// part(Node, Link 등) 객체의 기본형을 설정합니다.
$(div).bpmn("addTemplate", fnArgObj);

• part(Node, Link 등) 객체의 기본형을 설정합니다.
• parameter
  • fnArgObj.partClassName{string} - part의 className을 선택. "Node", "Group", "Link" 가능
  • fnArgObj.category{string} - template의 category명 설정. 빈문자열("") 설정 시, 기본 템플릿으로 적용됨. "getTemplateMap" API 를 통해 template map을 얻고, category명으로 특정 template 객체를 얻을 수 있다.
  • fnArgObj.template{template} - template 객체 (ref. http://gojs.net/latest/intro/templateMaps.html)

autoArrange

// 다이어그램을 자동 정렬 합니다. 
$(div).bpmn(("autoArrange");

• 다이어그램의 노드와 링크의 위치, 간격 등을 자동정렬합니다.
• 정렬 방법이 여러가지이기 때문에 홈페이지를 참고해야 함(참조. http://gojs.net/latest/api/symbols/Diagram.html#layoutDiagram)

changeLinkStyle

// 다이어그램 링크의 스타일을 변경합니다.
$(div).bpmn("changeLinkStyle", fnArgObj);

• 링크의 스타일을 변경합니다.
• parameter
  • fnArgObj.styleName{string} - 링크의 스타일 명. "Normal"(직선), "Orthogonal"(꺾은선), "Bezier"(곡선) 가능
  • fnArgObj.contextHandlerObj{contextMenuObject} - 컨텍스트 메뉴 object. (ref. "getDefaultContextMenu" API)

createDiagram

// 다이어그램 Canvas 생성합니다.
$(div).bpmn("createDiagram", fnArgObj);

• 다이어그램 Canvas 생성합니다.
• parameter
  • fnArgObj.data{string} - set 하고자하는 데이터를 stringify 하여 전달
  • fnArgObj.userOption{object} - 다이어그램 생성 시, user 가 변경하고 싶은 설정을 전달 (현재는 기능 동작 안한다.)
  • fnArgObj.divId{string} - 다이어그램 Canvas가 생성되어 append 될 HTMLDivElement id
  • fnArgObj.properties{} - 다이어그램의 속성 (ref. http://gojs.net/latest/api/symbols/Diagram.html)
• return type : diagram{go.Diagram}

createNodeByDrop

//  커스텀 파레트에서 다이어그램으로 드래그/드랍한 경우, 해당 위치에 노드를 생성해줍니다.
$(div).bpmn("createNodeByDrop", fnArgObj);

• 커스텀 파레트에서 다이어그램으로 드래그/드랍한 경우, 해당 위치에 노드를 생성해줍니다.
• parameter
  • fnArgObj.nodeDataArray{Array} - 드레그/드랍을 통해 동적 생성코자 하는 노드 데이터 전체를 배열로 전달
  • fnArgObj.dropLocationString{String} - 드레그/드랍 위치 정보

createOverview

// 다이어그램 Overview 생성합니다.
$(div).bpmn("createOverview", fnArgObj);

• 다이어그램 Overview 생성합니다.
• parameter
  • fnArgObj.overviewDivId{string} - overview 동적 생성을 위한 HTMLDivElement id
• return type : overview{go.Overview} (참조. http://gojs.net/latest/api/symbols/Overview.html)

clearDiagram

// 다이어그램의 모든 메모리를 클리어합니다. 
$(div).bpmn("clearDiagram");

• 다이어그램의 모든 메모리(노드와 링크 등 객체 포함)를 클리어합니다. undo로 돌릴 수 없습니다.
• return type : element

getAllPathsArrayBetween

// 2개 노드 사이에 링크로 연결된 모든 path 를 구합니다.
$(div).bpmn("getAllPathsArrayBetween", fnArgObj);

• 2개 노드 사이에 링크로 연결된 모든 path 를 구합니다.
• 링크의 방향(화살표)에 따라 path를 구합니다.
• 순서에 상관 없이 2개의 노드를 전달하면, 내부적으로 선/후 관계를 자동 파악합니다.
• parameter
  • fnArgObj.begin{go.Node} - 링크로 연결된 모든 path 를 구하기 위한 시작 노드
  • fnArgObj.end{go.Node} - 링크로 연결된 모든 path 를 구하기 위한 끝 노드
• return type : string

getDefaultContextMenu

// 디폴트 컨텍스트 메뉴 정의 object 리턴합니다.
$(div).bpmn("getDefaultContextMenu");

• 디폴트 컨텍스트 메뉴 정의 object 리턴합니다.
• return type : object

getElement

// 다이어그램이 렌더된 div element를 리턴합니다.
$(div).bpmn("getElement");

• 다이어그램이 렌더된 div element를 리턴합니다.
• return type : element

getModelData

// 현재 다이어그램의 모델 (노드, 링크 데이터를 포함한 전체 데이터) 을 리턴합니다.
$(div).bpmn("getModelData", fnArgObj);

• 현재 다이어그램의 모델 (노드, 링크 데이터를 포함한 전체 데이터) 을 리턴합니다.
• parameter
  • fnArgObj.type{string} - 리턴 타입 결정. 디폴트는 'string' 타입으로 리턴. 'object' 일 경우, JSONObject 리턴
• return type : model{string|object}

getNodeDataForKey

// 노드 데이터 내 Key를 이용하여 다이어그램 내 특정 노드 객체를 찾아 리턴합니다.
$(div).bpmn("getNodeDataForKey", fnArgObj);

• 노드 데이터 내 Key를 이용하여 다이어그램 내 특정 노드 객체를 찾아 리턴합니다.
• parameter
  • fnArgObj.key{string} - 노드 데이터 내 Key

getSelection

// 다이어그램 내 선택(포커스)된 특정 노드 또는 링크 객체를 리턴합니다.
$(div).bpmn("getSelection");

• 다이어그램 내 선택(포커스)된 특정 노드 또는 링크 객체를 리턴합니다.
• return type : object

getTemplateMap

// 해당 part의 template Map 객체를 가져옵니다.
$(div).bpmn("getTemplateMap", fnArgObj);

• partClassName를 이용하여 해당 part의 template Map 객체를 가져옵니다. 이 후, template category 명으로 template 객체를 얻을 수 있습니다.
• parameter
  • fnArgObj.partClassName{string} - part의 className을 선택. "Node", "Group", "Link" 가능
• return type : map{go.Map} (ref. http://gojs.net/latest/api/symbols/Map.html)

groupShapeSizeRecalculation

// 그룹 노드 내부를 정렬합니다. 
$(div).bpmn("groupShapeSizeRecalculation", fnArgObj);

• isGroup true 인 그룹 노드 내부 정렬을 위한 함수입니다.
• diagram.layoutDiagram()을 통해 정렬 수행할 경우, 그룹 내부는 따로 정렬 수행해야 합니다.
• "autoArrange" API 사용 시, 그룹 내부를 우선 정렬 후, 그 밖의 노드(그룹 외부) 들을 정렬합니다.
• parameter
  • fnArgObj.groupArray{Array} - 그룹객체를 담은 배열. 정렬하고자 하는 모든 그룹 객체를 배열로 하여 전달.

setCustomContextMenu

// 다이어그램 Context menu 생성합니다.
$(div).bpmn("setCustomContextMenu", fnArgObj);

• 다이어그램 Context menu 생성합니다.
• parameter
  • fnArgObj.contextMenuId{string} - context menu 동적 생성을 위한 HTMLDivElement id
  • fnArgObj.contextHandlerObj{contextMenuObject} - 컨텍스트 메뉴 object. (ref. "getDefaultContextMenu" API)

setModelData

// 모델데이터를 현재 다이어그램에 저장합니다.
$(div).bpmn("setModelData", fnArgObj);

• 모델데이터를 현재 다이어그램에 저장합니다.
• parameter
  • fnArgObj.data{string} - set 하고자하는 데이터.
  • fnArgObj.type{string} - set 하고자하는 데이터의 타입. 디폴트는 'string' 타입이다. 'object' 일 경우, 내부적으로 stringify 하여 set 한다.

setSelection

// 다이어그램 내 특정 노드 또는 링크 객체를 선택 상태로 만듭니다.
$(div).bpmn("setSelection");

• 다이어그램 내 특정 노드 또는 링크 객체를 선택(포커스) 상태로 만듭니다.

updateNodeDataForNode

// 노드 데이터를 업데이트합니다.
$(div).bpmn("updateNodeDataForNode", fnArgObj);

• 노드 객체를 이용하여 노드를 찾고, 노드 데이터를 업데이트합니다.
• parameter
  • fnArgObj.node{go.Node} - GoJS Node 객체
  • fnArgObj.data{object} - 업데이트 데이터

updateNodeDataForKey

// 노드 데이터를 업데이트합니다.
$(div).bpmn("updateNodeDataForKey", fnArgObj);

• 노드 데이터 내 Key를 이용하여 노드를 찾고, 노드 데이터를 업데이트합니다.
• parameter
  • fnArgObj.key{string} - 노드 데이터 내 Key
  • fnArgObj.data{object} - 업데이트 데이터

zoomToFit

// 다이어그램을 너비에 맞추어 자동 zoom 합니다.
$(div).bpmn("zoomToFit");

• 다이어그램을 감싸는 Div size(너비/높이)에 전체 다이어그램의 사이즈를 맞추어 자동 zoom 합니다.
• return type : element