Thirdparty
Diagram
Basic
GoJS
Diagram은 Northwoods Software사의 GoJS와 Alopex를 연동하여 사용할 수 있는 Alopex BPMN 기능을 제공합니다.
Alopex BPMN 이외의 GoJS만의 기능을 사용하시려면 직접 구매 후 사용하셔야 합니다.
Alopex BPMN
BPMN(Business Process Model and Notation) 은 업무 프로세스를 정의하고, 이를 이해 할 수 있도록 시각적으로 표현하는 기법입니다. Alopex 에서는 GoJS를 활용하여 각 노드를 링크 시키고, 업무 흐름을 시각화 할 수 있는 BPMN 기능을 제공합니다.
- 커스텀 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