Page tree
Skip to end of metadata
Go to start of metadata

NEW!! RELEASE 2.8.0 OR ABOVE

It is a plug-in that allows you to insert and edit shapes (SVG).

How to use

Loading plugin files

<!-- 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>

UI

You can add buttons to the toolbar area and menu area by using the plugin 'shapeEditor'. Also,'selectionMode' can be added for multi-selection of shapes using a mouse.

Add to Toolbar

에디터 설정
//...
'editor.toolbar': [
	//...,
	'shapeEditor',
	//...
],
// ...

Appearance added to the toolbar

Adding key shapes to the toolbar

Added the ability to place frequently used shapes on the toolbar. In the toolbar part of the config file, you can add necessary figures in the form of "shapeEditor_Figure Name" as shown below.

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

Application result

Types and names of shapes that can be added

iconShape nameLableiconShape nameLableiconShape nameLable

lineline
arrowArrow
doubleArrowDouble Arrow

elbowConnectorElbow Connector
elbowArrowConnectorElbow Arrow Connector
elbowDoubleArrowConnectorElbow Double Arrow Connector

curvedConnectorCurved Connector
curvedArrowConnectorCurved Arrow Connector
curvedDoubleArrowConnectorCurved Double Arrow Connector

textBoxText Box
rectangleRectangle
roundedRectangleRounded Rectangle

snip1RectangleSnip Single Corner Rectangle
snip2RectangleSnip Same Side Corner Rectangle
snip2DiagRectangleSnip Diagonal Corner Rectangle

snipRoundRectangleSnip and Round Single Corner Rectangle
round1RectangleRounded Single Corner Rectangle
round2RectangleRound Same Side Corner Rectangle

round2DiagRectangleRound Diagonal Corner Rectangle
ovalOval
triangleIsosceles Triangle

rightTriangleRight Triangle
parallelogramParallelogram
trapezoidTrapezoid

diamondDiamond
pentagonPentagon
hexagonHexagon

heptagonHeptagon
octagonOctagon
decagonDecagon

dodecagonDodecagon
piePie
chordChord

teardropTeardrop
frameFrame
halfFrameHalf Frame

cornerL-Shape
diagStripeDiagonal Stripe
crossCross

plaquePlaque
canCan
cubeCube

bevelBevel
donutDonut
noSymbolNo Symbol

blockArcBlock Arc
foldedCornerFolded Corner
smileyFaceSmiley Face

heartHeart
lightningLightning
sunSun

moonMoon
cloudCloud
arcArc

bracketPairDouble Bracket
bracePairDouble Brace
leftBracketLeft Bracket

rightBracketRight Bracket
leftBraceLeft Brace
rightBraceRight Brace

plusPlus
minusMinus
multiplyMultiply

divisionDivision
equalEqual
notEqualNot Equal

rightArrowRight Arrow
leftArrowLeft Arrow
upArrowUp Arrow

downArrowDown Arrow
leftRightArrowLeft-Right Arrow
upDownArrowUp-Down Arrow

quadArrowQuad Arrow
leftRightUpArrowLeft-Right-Up Arrow
bentArrowBent Arrow

uTurnArrowU-Turn Arrow
leftUpArrowLeft-Up Arrow
bentUpArrowBent-Up Arrow

curvedRightArrowCurved Right Arrow
curvedLeftArrowCurved Left Arrow
curvedUpArrowCurved Up Arrow

curvedDownArrowCurved Down Arrow
stripeRightArrowStripe Right Arrow
notchedRightArrowNotched Right Arrow

homePlateHome Plate
chevronChevron
rightArrowCalloutRight Arrow Callout

downArrowCalloutDown Arrow Callout
leftArrowCalloutLeft Arrow Callout
upArrowCalloutUp Arrow Callout

leftRightArrowCalloutLeft-Right Arrow Callout
quadArrowCalloutQuad Arrow Callout
circularArrowCircular Arrow

processProcess
alternateProcessAlternate Process
decisionDecision

dataData
predefinedProcessPredefined Process
internalStorageInternal Storage

documentDocument
multiDocumentMulti Document
terminatorTerminator

preparationPreparation
manualInputManual Input
manualOperationManual Operation

connectorConnector
offPageConnectorOff-page Connector
cardCard

punchedTapePunched tape
summingJunctionSumming Junction
orOr

collateCollate
sortSort
extractExtract

mergeMerge
storedDataStored data
delayDelay

magneticTapeMagnetic tape
magneticDiskSequential access storage
magneticDrumDirect access storage

displayDisplay
explosion1Explosion1
explosion2Explosion2

star44-point star
star55-point star
star66-point star

star77-point star
star88-point star
star1010-point star

star1212-point star
star1616-point star
star2424-point star

star3232-point star
upRibbonUp Ribbon
downRibbonDown Ribbon

verticalScrollVertical Scroll
horizontalScrollHorizontal Scroll
waveWave

doubleWaveDouble Wave
rectangleCalloutRectangular Callout
roundedRectangleCalloutRounded Rectangle Callout

ovalCalloutOval Callout
cloudCalloutCloud Callout
borderCallout1Line Callout 1

borderCallout2Line Callout 2
borderCallout3Line Callout 3
accentCallout1Line Callout 1 (Accent Bar)

accentCallout2Line Callout 2 (Accent Bar)
accentCallout3Line Callout 3 (Accent Bar)
callout1Line Callout 1 (No Border)

callout2Line Callout 2 (No Border)
callout3Line Callout 3 (No Border)
accentBorderCallout1Line Callout 1 (Border and Accent Bar)

accentBorderCallout2Line Callout 2 (Border and Accent Bar)
accentBorderCallout3Line Callout 3 (Border and Accent Bar)



  • No labels