Javascript, VML, SVG로 만들어 본 마인드맵
글쓴이: yeonisdead / 작성시간: 금, 2007/06/08 - 5:06오전
마인드맵은 생각을 트리로 관리해 주는 프로그램입니다.^^
생각은 트리보다 훨씬 더 복잡하겠지만 생각을 좀 더 잘 정리하는데 도움이 되지요.
저는 프리마인드를 사용합니다.
그런데 사용해 보다 이걸 웹에 구현해 보면 괜찮겠다는 생각이 들었구요.
문제는 노드들간에 커브를 연결해야하는 거였습니다...
각 노드들이야 div, input 을 이용하면 되었지만 커브는 표준 HTML이 지원하지 않지요.
그래서 VML을 이용하기로 했습니다. 하는 김에 크로스 브라우저(뭐... IE와 파이어폭스 두개지만요..)
구현을 위해 SVG도 사용했습니다. VML은 IE가 기본으로 지원하구요. SVG는 파이어폭스가 기본 지원합니다.
암튼... 결국 기능은 간단하지만 돌아는 갑니다^^
소스코드도 올려놓았구요. 시간 나는데로 조금씩 업그레이드 할 생각입니다.
그런데 어느정도 수준이 되야 소스포지에 등록할 수 있을까요?^^
Forums:
불여우*에서
불여우*에서 써봤는데
팝업 메뉴 뜰 때 불여우*의 팝업 메뉴도 같이 떠서 불편하네요.
그리고 자식 노드가 오른 쪽에만 생기는 게 아니라
여러 방향으로도 생겼으면 좋겠습니다.
감사합니다.
제 불여우에서는 팝업이 안뜨는데요...^^
불여우 버전은 2.0.0.4 입니다.
웹페이지 로딩시....
document.oncontextmenu = function () {return false;}
이렇게 컨텍스트 메뉴를 막아뒀거든요.
제가 여러 버전의 불여우를 사용하지 않아서일것 같습니다.
다음번 마일스톤에 더 강력하게 브라우저 체크해 보겠습니다.
마인드웹에서 루트의 자식 노드는 2개 이하인데요...
말씀하신데로 왼쪽으로도 자식 노드 생길 수 있도록 역시 다음 마일스톤에
추가하도록 하겠습니다.
와... 그런데 사용해 주셔서 정말 감사합니다.^^
#! BORN TO CODE
#! BORN TO CODE
저도
저도 2.0.0.4입니다.
저는 리눅스*에서 써봤는데,
혹시 윈도우* 환경에서 테스트하셨나요?
네. 윈도우에서 했습니다.
네. 윈도우에서 테스트 했구요.
혹시 해서 Fedora Core 6, FireFox 1.5에서 해봤는데 기본 팝업은 안뜨는데요...
그래도 혹시 몰라서
페이지 로딩시 아래와 같이 오른쪽 버튼을 막았습니다.
document.onmousedown = function (e) {
if(e.button==2) {
return false;
}
}
또 안되시면 저에게 방법 좀 알려주세요 ^^
#! BORN TO CODE
#! BORN TO CODE
아직도 팝업이
아직도 팝업이 뜨네요.
그런데 안타깝게도 저 역시 방법을 모릅니다. OTL
그리고 종종 CPU 점유율을 몇 초 동안 100%로 끌어올리네요.
파이어폭스
파이어폭스 환경설정에서 내용-자바스크립트 사용하기 옆에 고급을 보면 컨텍스트 메뉴를 사용하지 않거나 바꾸기 항목이 체크되어있는지 확인해보세요.
체크되어있지 않으면 컨텍스트 메뉴(팝업 메뉴)를 제거하는게 무용지물이 됩니다.
CPU 점유율
네 그렇습니다. 노드가 추가되거나, 삭제 혹은 자식 노드들을 감출때 각 노드의 높이를 알아야 전체 트리를 그릴 수 있게되는데요. 문제는 노드의 높이는 해당 노드의 모든 자식 노드들을 재귀적으로 계산해 봐야 안다는 것입니다. 원래 노드가 추가되고 삭제될 때 트리를 탐색하며 각 높이를 정적으로 계산하여 갖고 있게 할려고 했는데 생각보다 구현이 까다로와 실시간으로 높이를 구현하게 되었습니다.
아마 CPU 점유율이 일시적으로 100% 오르는 이유는 노드의 높이를 구할 때 대략 2^(N-1) 만큼의 DOM 탐색이 발생하기 때문일거라 짐작합니다.
그런데 팝업 문제는 아랫분의 방법데로 해결할 수 있을것 같네요.
#! BORN TO CODE
#! BORN TO CODE
팝업 문제는
팝업 문제는 해결했습니다.
그런데 문제는 단지 오른쪽 클릭질을 하고 있었음에도 불구하고 몇 초 동안이나 CPU 점유율이 100%가 된다는 것입니다.
댓글 달기