사용방법

플러그인 파일 불러오기

사이냅에디터의 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'를 추가 할 수 있습니다.

툴바에 추가

//...
'editor.toolbar': [
	//...,
	'selectionMode', 'shapeEditor',
	//...
],
// ...

툴바에 추가된 모습

사이냅 에디터 문서 > 도형편집기 > image2020-9-23_12-49-37.png

툴바에 주요 도형 추가하기

자주 사용하는 도형을 툴바에 배치할 수 있는 추가되었습니다. config파일의 toolbar 부분에 아래와 같이 "shapeEditor_도형이름" 형식으로 필요한 도형을 추가 할 수 있습니다.

 'editor.toolbar': [
    'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval'
],

[적용결과 ]

사이냅 에디터 문서 > 도형편집기 > 도형_툴바.png

추가가능한 도형의 종류와 이름

도형이름	레이블	도형이름	레이블	도형이름	레이블
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 (테두리 및 강조선)