JointJS를 활용하여 Provider관계 그리기.

BlogSync

http://ift.tt/1FvpkDD

blog post를 다른 blog와 SNS에 posting해주는 서비스임

목표

blog의 post가 어디로 갈 수 있는지 설정해주는 기능.
diagram을 사용한 직관적인 UI를 제공하자.
http://ift.tt/1Fvpif5

몇가지 검토하에 JointJS로 만들게 되었음.

• go.js
  • canvas로 다양한 diagram을 지원하는 js이나 유료임
  • http://ift.tt/134m56i
• HighCharts
  • General drawing 예제로 ux는 비슷하게 지원은 가능하나 interactive를 지원하지 않는 것으로 보여 사용하지 않음
  • http://ift.tt/1w2Qk6f
• JointJS
  • free 라이센스로 지원이 가능할 것으로 보여 작업 중
  • http://jointjs.com/

JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.

코드 설명

graph와 paper를 생성시킴.

centerX,centerY를 중심으로 거리 200에 있는 circle 갯수만큼 간격을 가지고 위치시킴.

동작화면

provider 만큼 object그리기

provider 하나 선택한 화면

Line을 클릭할 수 있으며 누를때 마다 방향이 바뀌는데, post가 어느 방향으로 갈지 설정할 수 있게 된다.

 

하면서 만난 문제

[Polygons 방식의 show/hide 처리 문제]

• joint.js에서 최상위 element로 아래와 같이 div가 필요함

<div id="paper"></div>

• 위의 div에 ng-show와 같은 angular.js의 directive를 사용해서 처리하면 타이밍 문제로 동작하지 않음
• 해결 방법
  • $(‘#paper’).show(); / $(‘#paper’).hide(); 을 사용하면 정상 동작함
  • jquery를 사용하게 되는 문제가 있음(joint.js가 jquery를 사용함)

개선해야 할 부분

jquery 부분을 제거

angular.js를 쓰면서 jquery를 쓰지 않는 방향으로 진행하였으나, joint.js가 jquery기반으로 되어 있어서 추후에 빼는 방법을 모색할 필요가 있다.

from WordPress http://ift.tt/1FvplaL