릴리즈 2.8.0 이상
도형(SVG)을 삽입하고 편집 할 수 있는 플러그인입니다.
사용방법
플러그인 파일 불러오기
사이냅에디터의 shapeEditor플러그인 사용시 SEShapeManager모듈을 필수로 include 하셔야 합니다.
<!-- ShapEditor plugin include --> <script src="plugins/shapeEditor/shapeEditor.min.js"></script> <link rel="stylesheet" href="plugins/shapeEditor/shapeEditor.min.css"> <!-- SEShapeManager module include --> <script src="externals/SEShapeManager/SEShapeManager.min.js"></script>
툴바에 도형삽입 및 선택모드 버튼 추가하기
플러그인 이름인 'shapeEditor'을 사용하여 툴바 영역, 메뉴 영역에 버튼을 추가할 수 있습니다. 또한 마우스를 이용한 도형의 멀티셀렉션을 위해 'selectionMode'를 추가 할 수 있습니다.
툴바에 추가
synapeditor.config.js
//... 'editor.toolbar': [ //..., 'selectionMode', 'shapeEditor', //... ], // ...
툴바에 추가된 모습
툴바에 주요 도형 추가하기
자주 사용하는 도형을 툴바에 배치할 수 있는 추가되었습니다. config파일의 toolbar 부분에 아래와 같이 "shapeEditor_도형이름" 형식으로 필요한 도형을 추가 할 수 있습니다.
synapeditor.config.js
'editor.toolbar': [
'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval'
],
[적용결과 ]
추가가능한 도형의 종류와 이름
| 아이콘 | 도형이름 | 레이블 | 아이콘 | 도형이름 | 레이블 | 아이콘 | 도형이름 | 레이블 |
|---|---|---|---|---|---|---|---|---|
| line | 선 | arrow | 화살표 | doubleArrow | 양방향 화살표 | |||
| elbowConnector | 꺾인 연결선 | elbowArrowConnector | 꺾인 화살표 연결선 | elbowDoubleArrowConnector | 꺾인 양쪽 화살표 연결선 | |||
| curvedConnector | 구부러진 연결선 | curvedArrowConnector | 구부러진 화살표 연결선 | curvedDoubleArrowConnector | 구부러진 양쪽 화살표 연결선 | |||
| textBox | 글상자 | rectangle | 직사각형 | roundedRectangle | 모서리가 둥근 직사각형 | |||
| snip1Rectangle | 한쪽 모서리가 잘린 사각형 | snip2Rectangle | 양쪽 모서리가 잘린 사각형 | snip2DiagRectangle | 대각선 방향의 모서리가 잘린 사각형 | |||
| snipRoundRectangle | 한쪽 모서리는 잘리고 다른쪽 모서리는 둥근 사각형 | round1Rectangle | 한쪽 모서리가 둥근 사각형 | round2Rectangle | 양쪽 모서리가 둥근 사각형 | |||
| round2DiagRectangle | 대각선 방향의 모서리가 둥근 사각형 | oval | 타원 | triangle | 이등변 삼각형 | |||
| rightTriangle | 직각 삼각형 | parallelogram | 평행 사변형 | trapezoid | 사다리꼴 | |||
| diamond | 다이아몬드 | pentagon | 정오각형 | hexagon | 육각형 | |||
| heptagon | 칠각형 | octagon | 팔각형 | decagon | 십각형 | |||
| dodecagon | 십이각형 | pie | 원형 | chord | 현 | |||
| teardrop | 눈물 방울 | frame | 액자 | halfFrame | 1/2 액자 | |||
| corner | L 도형 | diagStripe | 대각선 줄무늬 | cross | 십자형 | |||
| plaque | 배지 | can | 원통 | cube | 정육면체 | |||
| bevel | 빗면 | donut | 빗면 | noSymbol | 없음 기호 | |||
| blockArc | 막힌 원호 | foldedCorner | 모서리가 접힌 도형 | smileyFace | 웃는 얼굴 | |||
| heart | 하트 | lightning | 번개 | sun | 해 | |||
| moon | 달 | cloud | 구름 | arc | 원호 | |||
| bracketPair | 양쪽 대괄호 | bracePair | 양쪽 중괄호 | leftBracket | 왼쪽 대괄호 | |||
| rightBracket | 오른쪽 대괄호 | leftBrace | 왼쪽 중괄호 | rightBrace | 오른쪽 중괄호 | |||
| plus | 더하기 | minus | 빼기 | multiply | 곱하기 | |||
| division | 나누기 | equal | 등호 | notEqual | 부등호 | |||
| rightArrow | 오른쪽 화살표 | leftArrow | 왼쪽 화살표 | upArrow | 위쪽 화살표 | |||
| downArrow | 아래쪽 화살표 | leftRightArrow | 왼쪽/오른쪽 화살표 | upDownArrow | 위쪽/아래쪽 화살표 | |||
| quadArrow | 왼쪽/오른쪽/위쪽/아래쪽 화살표 | leftRightUpArrow | 왼쪽/오른쪽/위쪽 화살표 | bentArrow | 굽은 화살표 | |||
| uTurnArrow | U자형 화살표 | leftUpArrow | 왼쪽/위쪽 화살표 | bentUpArrow | 위로 굽은 화살표 | |||
| curvedRightArrow | 오른쪽으로 구부러진 화살표 | curvedLeftArrow | 왼쪽으로 구부러진 화살표 | curvedUpArrow | 위로 구부러진 화살표 | |||
| curvedDownArrow | 아래로 구부러진 화살표 | stripeRightArrow | 줄무늬가 있는 오른쪽 화살표 | notchedRightArrow | 톱니모양의 오른쪽 화살표 | |||
| homePlate | 오각형 | chevron | 갈매기형 수장 | rightArrowCallout | 오른쪽 화살표 설명선 | |||
| downArrowCallout | 아래쪽 화살표 설명선 | leftArrowCallout | 왼쪽 화살표 설명선 | upArrowCallout | 위쪽 화살표 설명선 | |||
| leftRightArrowCallout | 왼쪽/오른쪽 화살표 설명선 | quadArrowCallout | 왼쪽/오른쪽/위쪽/아래쪽 화살표 설명선 | circularArrow | 원형 화살표 | |||
| process | 처리 | alternateProcess | 대체처리 | decision | 판단 | |||
| data | 데이터 | predefinedProcess | 종속처리 | internalStorage | 내부저장소 | |||
| document | 문서 | multiDocument | 다중문서 | terminator | 수행의 시작/종료 | |||
| preparation | 준비 | manualInput | 수동입력 | manualOperation | 수동연산 | |||
| connector | 연결자 | offPageConnector | 페이지연결자 | card | 카드 | |||
| punchedTape | 천공테이프 | summingJunction | 가산접합 | or | 논리합 | |||
| collate | 대조 | sort | 정렬/분류 | extract | 추출 | |||
| merge | 병합 | storedData | 저장데이터 | delay | 지연 | |||
| magneticTape | 순차적 엑세스 저장소 | magneticDisk | 자기 디스크 | magneticDrum | 직접 엑세스 저장소 | |||
| display | 화면 표시 | explosion1 | 폭발1 | explosion2 | 폭발2 | |||
| star4 | 포인트가 4개인 별 | star5 | 포인트가 5개인 별 | star6 | 포인트가 6개인 별 | |||
| star7 | 포인트가 7개인 별 | star8 | 포인트가 8개인 별 | star10 | 포인트가 10개인 별 | |||
| star12 | 포인트가 12개인 별 | star16 | 포인트가 16개인 별 | star24 | 포인트가 24개인 별 | |||
| star32 | 포인트가 32개인 별 | upRibbon | 위쪽 리본 | downRibbon | 아래쪽 리본 | |||
| verticalScroll | 세로로 말린 두루마리모양 | horizontalScroll | 가로로 말린 두루마리모양 | wave | 물결 | |||
| doubleWave | 이중 물결 | rectangleCallout | 사각 설명선 | roundedRectangleCallout | 모서리가 둥근 사각 설명선 | |||
| ovalCallout | 타원 설명선 | cloudCallout | 구름모양 설명선 | borderCallout1 | 설명선1 | |||
| borderCallout2 | 설명선2 | borderCallout3 | 설명선3 | accentCallout1 | 설명선1 (강조선) | |||
| accentCallout2 | 설명선2 (강조선) | accentCallout3 | 설명선3 (강조선) | callout1 | 설명선1 (테두리없음) | |||
| callout2 | 설명선2 (테두리없음) | callout3 | 설명선3 (테두리없음) | accentBorderCallout1 | 설명선1 (테두리 및 강조선) | |||
| accentBorderCallout2 | 설명선2 (테두리 및 강조선) | accentBorderCallout3 | 설명선3 (테두리 및 강조선) |