...
Code Block |
---|
|
<!-- 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'을 사용하여 툴바 영역, 메뉴 영역에 버튼을 추가할 수 있습니다.
...
Code Block |
---|
language | js |
---|
theme | Emacs |
---|
title | 에디터 설정synapeditor.config.js |
---|
|
//...
'editor.toolbar': [
//...,
'shapeEditor',
//...
],
// ... |
툴바에 추가된 모습
툴바에 주요 도형 추가하기
자주 사용하는 도형을 툴바에 배치할 수 있는 추가되었습니다. config파일의 toolbar 부분에 아래와 같이 "shapeEditor_도형이름" 형식으로 필요한 도형을 추가 할 수 있습니다.
Code Block |
---|
language | js |
---|
theme | Emacs |
---|
title | synapeditor.config.js |
---|
|
'editor.toolbar': [
'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval'
], |
[적용결과 ]
Image Added
추가가능한 도형의 종류와 이름아이콘 | 도형이름 | 레이블 | 아이콘 | 도형이름 | 레이블 | 아이콘 | 도형이름 | 레이블 |
---|
| 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 (테두리 및 강조선) |
|
|
|