GOJS 가이드

GoJS 연동 개요에 대한 예시 화면이다.

GoJS는 https://gojs.net 사이트에서 제공하는 HTML5 기반 다이어그램 솔루션 버전을 의미한다.

xFrame5와 GoJS 솔루션 연동에 필요한 요소는 GoJS 라이브러리와 DIV오브젝트가 있다.

DIV오브젝트는 GoJS 다이어그램을 표시하기 위한 xFrame5 컴포넌트이다.

관련 API는 loadjs, getjdom가 있다.

※관련 사이트 아래 참조

템플릿 위치: /HTML5/3RD/GOJS/gojs_basic

템플릿 파일

this.myDiagram;	// GoJS 다이어그램 오브젝트용 전역 변수

function screen_on_load()
{
	// GoJS 라이브러리 URL 경로
	// 주의: GO_JS_URL 변수에 대한 값은 프로젝트 상황에 맞추어 변경해야 한다.
	var GO_JS_URL = "./ext/lib/flowchart/go.js";

	// GoJS 라이브러리 로드
	this.screen.loadjs(GO_JS_URL);

	// for conciseness in defining templates
    var $ = go.GraphObject.make;

	// GoJS 다이어그램을 그리기 위해 DIV 컴포넌트의 DOM 오브젝트를 취득
	let divId = this.div_gojs.getjdom()[0].id;

	// DIV의 DOM오브젝트에 GoJS 다이어그램 연결
    this.myDiagram = $(go.Diagram, divId);

	// GoJS 다이어그램에 표현할 노드 기본템플릿 등록
	this.myDiagram.nodeTemplate =
		$(go.Node, "Auto",  // the Shape will go around the TextBlock
			$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
			$(go.TextBlock, { margin: 8 }, new go.Binding("text", "key"))
		);

	// GoJS 다이어그램에 노드와 링크를 생성
	this.myDiagram.model = new go.GraphLinksModel(
		[ // a JavaScript Array of JavaScript objects, one per node;
			// the "color" property is added specifically for this app
			{ key: "Alpha", color: "lightblue" },
			{ key: "Beta", color: "orange" },
			{ key: "Gamma", color: "lightgreen" },
			{ key: "Delta", color: "pink" }
		],
		[ // a JavaScript Array of JavaScript objects, one per link
			{ from: "Alpha", to: "Beta" },
			{ from: "Alpha", to: "Gamma" },
			{ from: "Beta", to: "Beta" },
			{ from: "Gamma", to: "Delta" },
			{ from: "Delta", to: "Alpha" }
		]
	);
}

GoJS 가이드

예시

화면 스크립트