Shape Editor

Release 2.8.0 and above.

A plugin that can insert and edit shapes (SVG).

How to Use

Loading Plugin Files

When using the shapeEditor plugin of Synap Editor, the SEShapeManager module must be included.

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

Adding Shape Insert and Selection Mode Buttons to the Toolbar

Using the plugin name 'shapeEditor', you can add buttons to the toolbar area or the menu area. Also, you can add 'selectionMode' for multi-selection of shapes using the mouse.

Add to Toolbar

// synapeditor.config.js
//...
'editor.toolbar': [
    //...,
    'selectionMode', 'shapeEditor',
    //...
],
// ...

Toolbar added view

Adding Frequently Used Shapes to the Toolbar

You can place frequently used shapes on the toolbar. In the toolbar part of the config file, you can add the necessary shapes in the format "shapeEditor_shapeName" as shown below.

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

[Applied result]

Types and Names of Available Shapes