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
icon | Shape name | Lable | icon | Shape name | Lable | icon | Shape name | Lable |
---|---|---|---|---|---|---|---|---|
line | line | arrow | Arrow | doubleArrow | Double Arrow | |||
elbowConnector | Elbow Connector | elbowArrowConnector | Elbow Arrow Connector | elbowDoubleArrowConnector | Elbow Double Arrow Connector | |||
curvedConnector | Curved Connector | curvedArrowConnector | Curved Arrow Connector | curvedDoubleArrowConnector | Curved Double Arrow Connector | |||
textBox | Text Box | rectangle | Rectangle | roundedRectangle | Rounded Rectangle | |||
snip1Rectangle | Snip Single Corner Rectangle | snip2Rectangle | Snip Same Side Corner Rectangle | snip2DiagRectangle | Snip Diagonal Corner Rectangle | |||
snipRoundRectangle | Snip and Round Single Corner Rectangle | round1Rectangle | Rounded Single Corner Rectangle | round2Rectangle | Round Same Side Corner Rectangle | |||
round2DiagRectangle | Round Diagonal Corner Rectangle | oval | Oval | triangle | Isosceles Triangle | |||
rightTriangle | Right Triangle | parallelogram | Parallelogram | trapezoid | Trapezoid | |||
diamond | Diamond | pentagon | Pentagon | hexagon | Hexagon | |||
heptagon | Heptagon | octagon | Octagon | decagon | Decagon | |||
dodecagon | Dodecagon | pie | Pie | chord | Chord | |||
teardrop | Teardrop | frame | Frame | halfFrame | Half Frame | |||
corner | L-Shape | diagStripe | Diagonal Stripe | cross | Cross | |||
plaque | Plaque | can | Can | cube | Cube | |||
bevel | Bevel | donut | Donut | noSymbol | No Symbol | |||
blockArc | Block Arc | foldedCorner | Folded Corner | smileyFace | Smiley Face | |||
heart | Heart | lightning | Lightning | sun | Sun | |||
moon | Moon | cloud | Cloud | arc | Arc | |||
bracketPair | Double Bracket | bracePair | Double Brace | leftBracket | Left Bracket | |||
rightBracket | Right Bracket | leftBrace | Left Brace | rightBrace | Right Brace | |||
plus | Plus | minus | Minus | multiply | Multiply | |||
division | Division | equal | Equal | notEqual | Not Equal | |||
rightArrow | Right Arrow | leftArrow | Left Arrow | upArrow | Up Arrow | |||
downArrow | Down Arrow | leftRightArrow | Left-Right Arrow | upDownArrow | Up-Down Arrow | |||
quadArrow | Quad Arrow | leftRightUpArrow | Left-Right-Up Arrow | bentArrow | Bent Arrow | |||
uTurnArrow | U-Turn Arrow | leftUpArrow | Left-Up Arrow | bentUpArrow | Bent-Up Arrow | |||
curvedRightArrow | Curved Right Arrow | curvedLeftArrow | Curved Left Arrow | curvedUpArrow | Curved Up Arrow | |||
curvedDownArrow | Curved Down Arrow | stripeRightArrow | Stripe Right Arrow | notchedRightArrow | Notched Right Arrow | |||
homePlate | Home Plate | chevron | Chevron | rightArrowCallout | Right Arrow Callout | |||
downArrowCallout | Down Arrow Callout | leftArrowCallout | Left Arrow Callout | upArrowCallout | Up Arrow Callout | |||
leftRightArrowCallout | Left-Right Arrow Callout | quadArrowCallout | Quad Arrow Callout | circularArrow | Circular Arrow | |||
process | Process | alternateProcess | Alternate Process | decision | Decision | |||
data | Data | predefinedProcess | Predefined Process | internalStorage | Internal Storage | |||
document | Document | multiDocument | Multi Document | terminator | Terminator | |||
preparation | Preparation | manualInput | Manual Input | manualOperation | Manual Operation | |||
connector | Connector | offPageConnector | Off-page Connector | card | Card | |||
punchedTape | Punched tape | summingJunction | Summing Junction | or | Or | |||
collate | Collate | sort | Sort | extract | Extract | |||
merge | Merge | storedData | Stored data | delay | Delay | |||
magneticTape | Magnetic tape | magneticDisk | Sequential access storage | magneticDrum | Direct access storage | |||
display | Display | explosion1 | Explosion1 | explosion2 | Explosion2 | |||
star4 | 4-point star | star5 | 5-point star | star6 | 6-point star | |||
star7 | 7-point star | star8 | 8-point star | star10 | 10-point star | |||
star12 | 12-point star | star16 | 16-point star | star24 | 24-point star | |||
star32 | 32-point star | upRibbon | Up Ribbon | downRibbon | Down Ribbon | |||
verticalScroll | Vertical Scroll | horizontalScroll | Horizontal Scroll | wave | Wave | |||
doubleWave | Double Wave | rectangleCallout | Rectangular Callout | roundedRectangleCallout | Rounded Rectangle Callout | |||
ovalCallout | Oval Callout | cloudCallout | Cloud Callout | borderCallout1 | Line Callout 1 | |||
borderCallout2 | Line Callout 2 | borderCallout3 | Line Callout 3 | accentCallout1 | Line Callout 1 (Accent Bar) | |||
accentCallout2 | Line Callout 2 (Accent Bar) | accentCallout3 | Line Callout 3 (Accent Bar) | callout1 | Line Callout 1 (No Border) | |||
callout2 | Line Callout 2 (No Border) | callout3 | Line Callout 3 (No Border) | accentBorderCallout1 | Line Callout 1 (Border and Accent Bar) | |||
accentBorderCallout2 | Line Callout 2 (Border and Accent Bar) | accentBorderCallout3 | Line Callout 3 (Border and Accent Bar) |