SVG Editor 분석-1 [DOM 구조파악]

DOM 구조

<div> 태그를 이용해서 큰 틀을 잡았다.

큰 틀 전부 div 요소로 이루어져있고 1번을 제외한 나머지는 display : none 상태

때에 따라 보이는 방법은 inline 과 block 속성값으로 처리됨.

1. svg_editor : svg 에디터부분
2. svg_source_editor : 소스로 볼 팝업 창
3. svg_docprops : 왼쪽 상단 메뉴창의 document property 팝업창
4. svg_prefs : 왼쪽 상단 메뉴창의 editor option 팝업창 [Editor Preferences]
5. dialog_box : 왼쪽 상단 메뉴창의 export 팝업창
6. cmenu_canvas : 캔버스에 우클릭시 나타나는 메뉴창
7. cmenu_layers : 오른쪽 사이드바 레이어 우클릭시 나타나는 메뉴창

1. SVG 에디터 부분

1. rulers : 에디터의 가늠자 구분선
2. workarea : 작업공간 , 실질적 편집공간
3. sidepanels : 우측 사이드바 , 초기에 접혀있는 상태의 레이어 버튼을 누르면 width 속성값이 150으로 늘어나면서 확장되는 형식.
4. main_button : 왼쪽 상단 SVG-Edit 라는 메인 메뉴 버튼
5. tools_top : 상단 속성메뉴
6. cur_context_panel : 뭔지모르겠음...
7. tools_left : 좌측 툴 선택메뉴
8. tools_bottom : 하단 속성메뉴
9. option_lists : 상단 속성메뉴에서 드롭다운 리스트가 가능한 요소들의 드롭다운 메뉴 집합소
10. color_picker : 색상 선택 팝업 창
11. tools_rect : 좌측 사각형 선택 툴을 길게 눌러서 다른 사각형 선택 툴을 선택할 수 있는 요소
12. tools_ellipse : 원형 선택 확장메뉴 위 사각형과 같음
13. tools_line : 선 선택 확장메뉴
14. tools_shapelib : shape 선택 확장 라이브러리 (너무 많은것같아 lib로 만든것 같군요)

1-1 : workarea 

1. style 태그 styleoverrides : 동적으로 스타일 추가
   #svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}
   마우스 커서의 포인터를 지정. 삭제할 경우 객체에 마우스 오버시 이동 커서 나타나지 않음
2. svgcanvas : svg 그리는 캔버스
   ㄴsvgroot : svg의 root DOM 요소

1-1-1 : svgroot

1. <defs> 
   ㄴ 필터와 그리드패턴이 정의되어있음.
2. <svg> canvasBackground : 흰색 바탕 캔버스를 rect로 그려냈고, canvasGrid 를 이용 grid DOM 요소가 있음. 상단 메뉴의 그리드를 on/off 선택시 diplay 속성값이 변경되면서 나타남.
3. <animate> opacity
4. <svg> svgcontent : 객체가 위치하는 곳
5. <g> selectorParentGroup : 객체를 선택할때 그룹핑하는 요소