개시하다

JointJS를 사용하면 JavaScript 측면에서 흐름도와 같은 그림을 간단하게 그릴 수 있습니다.
JointJS의 기본 사용 방법은 다음과 같다.
또 본 기사에 소개된 내용도 기본적으로 다음과 같은 기사의 샘플을 그대로 사용했다.
참고 자료: 대화식으로 그림을 쓸 수 있는 JointJs를 사용해 봤어요.
이 방법을 사용하면, 예를 들어 흐름도에서 뒷면으로 이동하는 데이터 분석과 설비 협업 처리를 간단하게 설정할 수 있다
이러한 웹 서비스를 개발할 수 있습니다.(예: Node-RID)
이를 위해 상호작용 프로세스를 그려야 할 뿐만 아니라
추출 흐름도에서 각 요소(블록 또는 링크)의 속성
POST나 aax를 통해 서버에 데이터를 보내는 처리가 필요합니다.
따라서 본고는 JointJS의 API에서 원소 속성 추출과 관련된 API를 소개할 것이다.

작업 확인 환경

JointJS: Development version 3.0.2

jQuery: 3.4.1

Lodash: 4.17.11

Backbone: 1.4.0

전체여기.에서 다운로드할 수 있습니다.

흐름도 샘플

다음 3개의 블록(element)과 2개의 링크(link)의 흐름도를 예로 들어 설명한다.

각 블록에는'mycell1','mycell2','mycell3'이 설정되어 있습니다.
나중에 JavaScript에 따라graph = new joint.dia.Graph;API를 사용하여 graph로 정의합니다.

API 소개

많은 API 중에서 dia.Graph.prototype.getBBox부터 시작하는 다이아.Graph.prototype.get~같은 API군이 있지만 수량이 많기 때문에 일부분만 소개합니다.

dia.Graph.prototype.getCells

그룹으로graph 내의 모든 요소와 링크를 얻을 수 있습니다.

var cells = graph.getCells();
cells.forEach(function(cell){
    console.log(JSON.stringify(cell));
});

결실

{"type":"org.Arrow","source":{"selector":".card","id":"0148eff1-ea1b-40b2-afc9-2bc031e586ce"},"target":{"selector":".card","id":"2e8732f3-8b98-4793-a6ea-406dd60ddba2"},"z":-1,"vertices":[{"x":100,"y":120},{"x":150,"y":60}],"id":"276c7e3c-ca4c-4e4c-8e32-0c20b88b3f98","attrs":{}}

{"type":"org.Arrow","source":{"selector":".card","id":"2e8732f3-8b98-4793-a6ea-406dd60ddba2"},"target":{"selector":".card","id":"1d8a053e-98ac-49a9-bab5-758d66759881"},"z":-1,"vertices":[{"x":100,"y":120},{"x":150,"y":60}],"id":"89e965e8-e1c2-4200-ba27-ed3d73fa82aa","attrs":{}}

{"type":"html.Element","position":{"x":80,"y":80},"size":{"width":170,"height":80},"angle":0,"divName":"mycell1","isCompany":true,"id":"0148eff1-ea1b-40b2-afc9-2bc031e586ce","z":1,"attrs":{}}

{"type":"html.Element","position":{"x":490,"y":90},"size":{"width":170,"height":80},"angle":0,"divName":"mycell2","id":"2e8732f3-8b98-4793-a6ea-406dd60ddba2","z":2,"attrs":{}}

{"type":"html.Element","position":{"x":558,"y":344},"size":{"width":170,"height":80},"angle":0,"divName":"mycell3","id":"1d8a053e-98ac-49a9-bab5-758d66759881","z":3,"attrs":{}}

'type'이'org.Arrow'인 것은 블록을 연결하는 선이다."source"에서 "target"에 연결하면 각각의 "id"로 블록을 지정할 수 있습니다.

type 자."Element"으로 표시된 블록입니다. 그리는 좌표 ("position") 와 크기 ("size") 를 얻을 수 있습니다. 설정된 "diveName"도 반영됩니다. 여기 "id"와 "org."를 보실 수 있습니다.Arrow의'source'와'target'의'id'를 비교하여 조작할 수 있습니다.

dia.Graph.prototype.getElements

getcels에서 요소와 링크의 전부를 얻었지만 getelements에서 모든 요소만 얻었습니다.

dia.Graph.prototype.getLinks

마찬가지로 getLinks에서 모든 링크만 가져옵니다.

dia.Graph.prototype.getConnectedLinks

어떤 요소에 연결된 모든 링크를 얻습니다.

var elements = graph.getElements();
console.log(JSON.stringify(elements[0]));
var links = graph.getConnectedLinks(elements[0]);
links.forEach(function(link){
    console.log(JSON.stringify(link));
});

결실

{"type":"html.Element","position":{"x":80,"y":80},"size":{"width":170,"height":80},"angle":0,"divName":"mycell1","isCompany":true,"id":"1d0d270e-642a-403e-808e-0d63d60dd589","z":1,"attrs":{}}

{"type":"org.Arrow","source":{"selector":".card","id":"1d0d270e-642a-403e-808e-0d63d60dd589"},"target":{"selector":".card","id":"f904240e-92fb-4af0-aef1-97f0422a047a"},"z":-1,"vertices":[{"x":100,"y":120},{"x":150,"y":60}],"id":"f3bd7d00-4697-4f29-acc5-331e857e69ba","attrs":{}}

get Elements에서 얻은 요소에서 최초의 요소를 얻어 get Connected Links에 넣는다.

'아이디'에서 볼 수 있듯이 요소[0]에 연결된 링크만 얻을 수 있다.

옵션에서도'나가는 링크'또는'안으로 들어가는 링크'를 지정할 수 있다.

dia.Graph.prototype.toJSON

getcels와 기본적으로 같은 정보를 얻을 수 있을 것 같습니다.
toJSON이 반환한 문자열은 JSON 문자열이 아닙니다.

console.log(JSON.stringify(graph.toJSON())); 

결실

{"cells":[{"type":"org.Arrow","source":{"selector":".card","id":"26578cbf-aa01-40ab-8752-05c874a64fa9"},"target":{"selector":".card","id":"de7626c7-6cab-48e8-a5c2-8298e6a11483"},"z":-1,"vertices":[{"x":100,"y":120},{"x":150,"y":60}],"id":"cf9a1a1a-234f-43ec-83d6-019e8dc80010","attrs":{}},{"type":"org.Arrow","source":{"selector":".card","id":"de7626c7-6cab-48e8-a5c2-8298e6a11483"},"target":{"selector":".card","id":"b0a28724-1a33-4deb-8877-02c1378f7465"},"z":-1,"vertices":[{"x":100,"y":120},{"x":150,"y":60}],"id":"f5d76d9d-a256-483d-abc0-f1ba228e90a9","attrs":{}},{"type":"html.Element","position":{"x":80,"y":80},"size":{"width":170,"height":80},"angle":0,"divName":"mycell1","isCompany":true,"id":"26578cbf-aa01-40ab-8752-05c874a64fa9","z":1,"attrs":{}},{"type":"html.Element","position":{"x":190,"y":277},"size":{"width":170,"height":80},"angle":0,"divName":"mycell2","id":"de7626c7-6cab-48e8-a5c2-8298e6a11483","z":2,"attrs":{}},{"type":"html.Element","position":{"x":297,"y":483},"size":{"width":170,"height":80},"angle":0,"divName":"mycell3","id":"b0a28724-1a33-4deb-8877-02c1378f7465","z":3,"attrs":{}}]}

끝말

JohntJS에는 일본어 정보가 거의 없기 때문에 기본적으로 본가의 API 일람표를 보아야 한다.
한편, API의 숫자도 찾아보기 힘든 부분이 많은데 이 기사를 참고하면 좋겠다.