JSYG.FullEditor

Provides a complete and very simple API to create your own svg online editor. UI is your concern.

Demo

http://yannickbochatay.github.io/JSYG.FullEditor

Installation

npm install jsyg-fulleditor

Example

HTML

<svg width="500" height="500" id="editor"></svg>

Shape :
<select name="shape">
    <option>circle</option>
    <option>rect</option>
    <option>line</option>
    <option>polyline</option>
</select>

<button id="importImage">Import image</button>

<button id="download">Download</button>

Javascript

var svgEditor = new JSYG.FullEditor("#editor");

svgEditor.enable();

svgEditor.newDocument(600,600);

$("[name=shape]").on("change",function() {
    svgEditor.shapeDrawerModel = '<'+this.value+'>';
}).trigger("change");

svgEditor.enableShapeDrawer();

$("#importImage").on("click",function() {
    svgEditor.chooseFile().then(svgEditor.insertImageFile);
});

$("#download").on("click",function() {
    svgEditor.download("svg");
});

Full example script

https://github.com/YannickBochatay/JSYG.FullEditor/blob/master/script.js

API

Table of Contents

• registerKeyShortCut
  • Parameters
• unregisterKeyShortCut
  • Parameters
• selectAll
• deselectAll
• enableKeyShortCuts
• disableKeyShortCuts
• getLayers
• addLayer
• removeLayer
• getDocument
• hideEditors
• enableSelection
• disableSelection
• disableInsertion
• disableEdition
• duplicate
• dim
  • Parameters
• rotate
  • Parameters
• css
  • Parameters
• triggerChange
• cursorDrawing
  • Properties
• drawShape
  • Parameters
• align
  • Parameters
• load
  • Parameters
• loadString
  • Parameters
• readFile
  • Parameters
• loadFile
  • Parameters
• loadURL
  • Parameters
• loadXML
  • Parameters
• newDocument
  • Parameters
• toCanvas
• toSVGString
  • Parameters
  • Examples
• toSVGDataURL
• toPNGDataURL
  • Parameters
• toDataURL
  • Parameters
• print
• downloadPNG
• downloadSVG
• download
  • Parameters
• remove
• group
• ungroup
• center
  • Parameters
• centerVertically
• centerHorizontally
• registerPlugin
  • Parameters
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties
• defineProperty
  • Properties

registerKeyShortCut

You can also pass an object with several key shortcuts as keys/values

Parameters

• key string jquery hotkeys syntax (example : "ctrl+i")
• fct function callback called when key or combination keys are pressed

Returns JSYG.FullEditor

unregisterKeyShortCut

Unregister a key shortcut

Parameters

• key string jquery hotkeys syntax (example : "ctrl+i")

Returns JSYG.FullEditor

selectAll

Select all editable elements in document

Returns JSYG.FullEditor

deselectAll

Deselect all editable elements

Returns JSYG.FullEditor

enableKeyShortCuts

• See: JSYG.prototype.registerKeyShortCut

Enable all key shorcuts registered by registerKeyShortCut method

Returns JSYG.FullEditor

disableKeyShortCuts

• See: JSYG.prototype.registerKeyShortCut

Disable all key shorcuts registered by registerKeyShortCut method

Returns JSYG.FullEditor

getLayers

Get all layers defined

Returns JSYG

addLayer

Add and use a new layer

Returns JSYG.FullEditor

removeLayer

Remove a layer

Returns JSYG.FullEditor

getDocument

Get document as a DOM node

Returns Element

hideEditors

Hide shape and text editors

Returns JSYG.FullEditor

enableSelection

Enable mouse pointer selection

Returns JSYG.FullEditor

disableSelection

Disable mouse pointer selection

Returns JSYG.FullEditor

disableInsertion

Disable mouse pointer insertion

Returns JSYG.FullEditor

disableEdition

Enable edition functionalities

Returns JSYG.FullEditor

duplicate

Duplicate selected element

Returns JSYG.FullEditor

dim

You can also pass an object

Parameters

• prop string x, y , width or height
• value number

rotate

Rotate selected element

Parameters

• value number angle in degrees

Returns JSYG.FullEditor

css

Get or set css property

Parameters

• prop string name of css property
• value

triggerChange

Trigger change event

Returns JSYG.FullEditor

cursorDrawing

Properties

• cursorDrawing string name of css cursor when drawing is active

drawShape

Draw one shape

Parameters

• modele type

Returns Promise

align

Aligne les éléments sélectionnés

Parameters

• type String (top,middle,bottom,left,center,right)

Returns undefined

load

Load a document from a file, an url, a xml string or a xml node

Parameters

• arg

Returns Promise

loadString

Load a document from a svg string

Parameters

• str string

Returns JSYG.FullEditor

readFile

Read a File instance

Parameters

• file File
• readAs string optional, "DataURL" or "Text" ("Text" by default)

Returns Promise

loadFile

Load a document from a File instance

Parameters

• file File

Returns Promise

loadURL

Load a document from an url

Parameters

• url string

Returns Promise

loadXML

Load a document from a xml node

Parameters

• svg DOMElement

Returns JSYG.FullEditor

newDocument

Create a new document

Parameters

• width number
• height number

Returns JSYG.FullEditor

toCanvas

Convert document to a canvas element

Returns Promise

toSVGString

Convert document to a SVG string (keep links)

Parameters

• opt object options (for the moment only "standalone" as boolean, to converts links to dataURLs)

Examples

fullEditor.toSVGString({standalone:true})

Returns Promise

toSVGDataURL

Convert document to a SVG data url

Returns Promise

toPNGDataURL

Convert document to a PNG data url

Parameters

• format

Returns Promise

toDataURL

Convert document to data URL

Parameters

• format string "svg" or "png"

Returns Promise

print

Print document

Returns Promise

downloadPNG

Download document as PNG

Returns Promise

downloadSVG

Download document as SVG

Returns Promise

download

Download document

Parameters

• format string "png" or "svg"

Returns JSYG.FullEditor

remove

Remove selection

Returns JSYG.FullEditor

group

Group selected elements

Returns JSYG.FullEditor

ungroup

Ungroup selection

Returns JSYG.FullEditor

center

Center selected elements

Parameters

• orientation string "vertical" or "horizontal"

Returns JSYG.FullEditor

centerVertically

Center selected elements vertically

Returns JSYG.FullEditor

centerHorizontally

Center selected elements horizontally

Returns JSYG.FullEditor

registerPlugin

Register a plugin

Parameters

• plugin object

Returns JSYG.FullEditor

defineProperty

Properties

• editText boolean set if text elements can be edited or not

defineProperty

Properties

• editPosition boolean set if elements position can be edited or not

defineProperty

Properties

• editSize boolean set if elements size can be edited or not

defineProperty

Properties

• editRotation boolean set if elements rotation can be edited or not

defineProperty

Properties

• editPathMainPoints boolean set if main points of paths can be edited or not

defineProperty

Properties

• editPathCtrlPoints boolean set if control points of paths can be edited or not

defineProperty

Properties

• canvasResizable boolean set if the editor can be resized or not

defineProperty

Properties

• keepShapesRatio boolean set if ratio must be kept when resizing

defineProperty

Properties

• drawingPathMethod string "freehand" or "point2point". Set method of drawing paths

defineProperty

Properties

• autoSmoothPaths boolean set if paths must be smoothed automatically when drawing

defineProperty

Properties

• useTransformAttr boolean set if transform attribute must be affected when editing size and position, instead of position and size attributes

defineProperty

Properties

• currentLayer number set current layer of edition

defineProperty

Properties

• shapeDrawerModel object dom node to clone when starting drawing