JSYG.Editor

Editor of svg shapes with JSYG framework

If you look for a complete SVG editor with very simple API, try JSYG.FullEditor. This one is just a brick.

Demo

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

Installation

npm install jsyg-editor

Usage

with module bundler

import Editor from "jsyg-editor"

let editor = new Editor("#mySVGContainer");
editor.enable({
  list:"#mySVGContainer > [data-editable]"
  ctrls:"all"
});

API

Table of Contents

• Editor
  • Parameters
  • onchangetarget
  • onbeforeshow
  • onshow
  • onbeforehide
  • onhide
  • onupdate
  • onstart
  • ondragstart
  • ondrag
  • ondragend
  • onend
  • onchange
  • setNode
    • Parameters
  • target
    • Parameters
  • targetRemove
    • Parameters
  • isMultiSelection
  • list
  • hide
    • Parameters
  • show
    • Parameters
  • update
    • Parameters
  • enableCtrls
  • disableCtrls
  • align
    • Parameters
• editor
• CtrlPoints
  • Parameters
  • editor
  • list
  • container
  • className
  • shape
  • xlink
  • width
  • height
  • linked
  • draggableOptions
  • onshow
  • onhide
  • onstart
  • ondragstart
  • ondrag
  • ondragend
  • onend
  • enabled
  • display
  • on
  • off
  • trigger
  • enable
    • Parameters
  • disable
  • show
    • Parameters
  • hide
    • Parameters
  • update
• MainPoints
  • Parameters
  • editor
  • list
  • container
  • className
  • shape
  • width
  • height
  • classNameClosing
  • strengthClosingMagnet
  • autoSmooth
  • onshow
  • onhide
  • onstart
  • ondragstart
  • ondrag
  • ondragend
  • onend
  • draggableOptions
  • on
  • off
  • trigger
  • enabled
  • display
  • enable
    • Parameters
  • disable
  • show
    • Parameters
  • hide
    • Parameters
  • update
• Drag
  • Parameters
  • editor
  • type
  • bounds
  • options
  • multiple
  • onstart
  • ondragstart
  • ondrag
  • ondragend
  • onend
  • on
  • off
  • trigger
  • enabled
  • display
  • enable
    • Parameters
  • disable
  • start
    • Parameters
  • show
    • Parameters
  • hide
  • update
• Resize
  • Parameters
  • editor
  • list
  • stepsX
  • stepsY
  • container
  • className
  • shape
  • xlink
  • width
  • height
  • type
  • multiple
  • onshow
  • onhide
  • onstart
  • ondragstart
  • ondrag
  • ondragend
  • onend
  • horizontal
  • vertical
  • keepRatio
  • bounds
  • options
  • on
  • off
  • trigger
  • enabled
  • display
  • enable
    • Parameters
  • disable
  • show
    • Parameters
  • hide
    • Parameters
  • update
• canHideMainPoints
  • Parameters
• Rotate
  • Parameters
  • editor
  • list
  • steps
  • container
  • className
  • shape
  • xlink
  • width
  • height
  • multiple
  • cursor
  • onshow
  • onhide
  • onstart
  • ondragstart
  • ondrag
  • ondragend
  • onend
  • options
  • on
  • off
  • trigger
  • enabled
  • display
  • enable
    • Parameters
  • disable
  • show
    • Parameters
  • hide
    • Parameters
  • update

Editor

nécessite le module Editor Edition d'éléments (positionnement, dimensions, rotation, et édition des formes pour les éléments SVG).

Parameters

• arg argument JSYG canvas des éléments à éditer
• opt optionnel, objet définissant les options.

Returns Editor

onchangetarget

Fonctions à exécuter quand on définit une autre cible

onbeforeshow

Fonctions à exécuter avant l'affichage de la boite d'édition (renvoyer false pour empecher l'événement)

onshow

Fonctions à exécuter à l'affichage de la boite d'édition

onbeforehide

Fonctions à exécuter avant la suppression de la boite d'édition (renvoyer false pour empecher l'événement)

onhide

Fonctions à exécuter à la suppression de la boite d'édition

onupdate

Fonctions à exécuter à la mise à jour de la boite d'édition

onstart

Fonctions à exécuter à chaque fois qu'une action d'édition se prépare, qu'elle est lieu ou non (mousedown sur un contrôle)

ondragstart

Fonctions à exécuter à chaque fois qu'une action d'édition débute

ondrag

Fonctions à exécuter pendant une action d'édition

ondragend

Fonctions à exécuter à la fin d'une action d'édition

onend

Fonctions à exécuter au relachement du bouton de souris, qu'il y ait eu modification ou non

onchange

Fonctions à exécuter à tout changement

setNode

définit le canvas d'édition

Parameters

• arg argument JSYG

Returns Editor

target

définit ou renvoie l'élément à éditer

Parameters

• arg argument JSYG optionnel, si renseigné définit la cible à éditer
• _preventEvent

targetRemove

Réinitialise la cible

Parameters

• _preventEvent

isMultiSelection

Indique si plusieurs éléments sont édités à la fois

Returns Boolean

list

définit ou renvoie la liste des éléments éditables dans le canvas.

hide

Masque le conteneur d'édition

Parameters

• e
• _preventEvent

show

Affiche le conteneur d'édition

Parameters

• e optionnel, objet Event afin de commencer tout de suite le déplacement de l'élément (ainsi sur un meme événement mousedown on peut afficher le conteneur et commencer le déplacement)
• _preventEvent

Returns Editor

update

Mise à jour du conteneur d'édition. (Si l'élément est modifié par un autre moyen que les contrôles du conteneur, il peut s'avérer utile de mettre à jour le conteneur)

Parameters

• e
• _preventEvent

Returns Editor

enableCtrls

Activation des contrôles. appelée sans argument, tous les contrôles sont activés. Sinon, en arguments (nombre variable) les noms des contrôles à activer ('drag','resize','rotate','ctrlPoints','mainPoints').

disableCtrls

Désactivation des contrôles. appelée sans argument, tous les contrôles sont desactivés. Sinon, en arguments (nombre variable) les noms des contrôles à desactiver ('Drag','Resize','Rotate','CtrlPoints','MainPoints').

align

Aligne les éléments sélectionnés

Parameters

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

Returns Editor

editor

référence vers l'objet Editor parent

CtrlPoints

Edition des points de contrôle des chemins SVG

Parameters

• editorObject

editor

référence vers l'objet Editor parent

list

liste des contrôles

container

Conteneur des contrôles

className

Classe appliquée au conteneur des contrôles

shape

Forme utilisée pour les contrôles

xlink

lien utilisé si shape est défini à "use"

width

largeur du contrôle

height

hauteur du contrôle

linked

Points de contrôle liés ou non (si on en déplace un, l'autre se déplace en miroir)

draggableOptions

• See: {Draggable}

Options supplémentaires pour le drag&drop

onshow

Fonction(s) à exécuter à l'affichage des contrôles

onhide

Fonction(s) à exécuter à la suppression des contrôles

onstart

Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)

ondragstart

Fonction(s) à exécuter quand on commence un déplacement

ondrag

Fonction(s) à exécuter pendant le déplacement

ondragend

Fonction(s) à exécuter en fin de déplacement

onend

Fonction(s) à exécuter au relâchement de la souris, qu'il y ait eu modification ou non

enabled

Indique si les contrôles sont activés ou non

display

Indique si les contrôles sont affichés ou non

on

• See: JSYG.StdConstruct.prototype.on

Ajout d'écouteurs d'événements customisés

Returns CtrlPoints

off

• See: JSYG.StdConstruct.prototype.on

Retrait d'écouteurs d'événements customisés

Returns CtrlPoints

trigger

• See: JSYG.StdConstruct.prototype.trigger

Déclenche un événement customisé

enable

Activation des contrôles

Parameters

• opt optionnel, objet définissant les options

Returns CtrlPoints

disable

Désactivation des contrôles

Returns CtrlPoints

show

Affichage des contrôles

Parameters

• opt optionnel, objet définissant les options
• _preventEvent

Returns CtrlPoints

hide

Masque les contrôles

Parameters

• _preventEvent

Returns CtrlPoints

update

Met à jour les contrôles

Returns CtrlPoints

MainPoints

Edition des points principaux des chemins SVG

Parameters

• editorObject

editor

référence vers l'objet Editor parent

list

liste des contrôles

container

Conteneur des contrôles

className

Classe appliquée au conteneur des contrôles

shape

Forme utilisée pour les contrôles

width

largeur des contrôles

height

hauteur des contrôles

classNameClosing

classe appliquée au dernier point d'un chemin si le chemin est fermé

strengthClosingMagnet

Force de la magnétisation entre les points extremes pour fermer le chemin

autoSmooth

Lisse automatiquement les chemins

onshow

Fonction(s) à exécuter à l'affichage des contrôles

onhide

Fonction(s) à exécuter à la suppression des contrôles

onstart

Fonction(s) à exécuter quand on prepare un déplacement (mousedown sur le contrôle)

ondragstart

Fonction(s) à exécuter quand on commence un déplacement

ondrag

Fonction(s) à exécuter pendant le déplacement

ondragend

Fonction(s) à exécuter en fin de déplacement

onend

Fonction(s) à exécuter au relachement de la souris, qu'il y ait eu modification ou non

draggableOptions

• See: {Draggable}

Options supplémentaires pour le drag&drop

on

• See: JSYG.StdConstruct.prototype.on

Ajout d'écouteurs d'événements customisés

Returns MainPoints

off

• See: JSYG.StdConstruct.prototype.on

Retrait d'écouteurs d'événements customisés

Returns MainPoints

trigger

• See: JSYG.StdConstruct.prototype.trigger

Déclenche un événement customisé

enabled

Indique si les contrôles sont activés ou non

display

Indique si les contrôles sont affichés ou non

enable

Activation des contrôles

Parameters

• opt optionnel, objet définissant les options

Returns MainPoints

disable

Désactivation des contrôles

Returns MainPoints

show

Affichage des contrôles

Parameters

• opt optionnel, objet définissant les options
• _preventEvent

Returns MainPoints

hide

Masque les contrôles

Parameters

• _preventEvent

Returns MainPoints

update

Met à jour les contrôles

Returns MainPoints

Drag

déplacement de l'élément

Parameters

• editorObject

editor

référence vers l'objet Editor parent

type

Type de déplacement ("attributes" ou "transform" pour agir sur les attributs de mise en page ou sur la matrice de transformation)

bounds

Permet de limiter le déplacement à l'intérieur de l'offsetParent (null pour annuler, valeur numérique négative pour aller au delà de l'offsetParent)

options

• See: {Draggable}

Options supplémentaires pour le drag&drop

multiple

Indique si ce contrôle est actif dans le cas d'une sélection multiple

onstart

Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)

ondragstart

Fonction(s) à exécuter quand on commence un déplacement

ondrag

Fonction(s) à exécuter pendant le déplacement

ondragend

Fonction(s) à exécuter en fin de déplacement

onend

Fonction(s) à exécuter au relachement de la souris, qu'il y ait eu déplacement ou non

on

• See: JSYG.StdConstruct.prototype.on

Ajout d'écouteurs d'événements customisés

Returns Drag

off

• See: JSYG.StdConstruct.prototype.on

Retrait d'écouteurs d'événements customisés

Returns Drag

trigger

• See: JSYG.StdConstruct.prototype.trigger

Déclenche un événement customisé

enabled

Indique si le controle est activé ou non

display

Indique si le contrôle est affiché ou non

enable

Activation du contrôle

Parameters

• opt optionnel, objet définissant les options

disable

Désactivation du contrôle

Returns Drag

start

commence le drag&drop

Parameters

• e objet Event

Returns Drag

show

Affiche le contrôle

Parameters

• opt optionnel, objet définissant les options

hide

Masque le contrôle

Returns Drag

update

Met à jour le contrôle

Returns Drag

Resize

Edition des dimensions

Parameters

• editorObject

editor

référence vers l'objet Editor parent

list

liste des contrôles

stepsX

liste des paliers horizontaux (largeurs en px)

stepsY

liste des paliers verticaux (hauteurs en px)

container

Conteneur des contrôles

className

Classe appliquée au conteneur des contrôles

shape

Forme utilisée pour les contrôles

xlink

lien utilisé si shape est défini à "use"

width

largeur des contrôles

height

hauteur des contrôles

type

Type de déplacement ("attributes" ou "transform" pour agir sur les attributs de mise en page ou sur la matrice de transformation)

multiple

Indique si ce contrôle est actif dans le cas d'une sélection multiple

onshow

Fonction(s) à exécuter à l'affichage des contrôles

onhide

Fonction(s) à exécuter à la suppression des contrôles

onstart

Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)

ondragstart

Fonction(s) à exécuter quand on commence un déplacement

ondrag

Fonction(s) à exécuter pendant le déplacement

ondragend

Fonction(s) à exécuter en fin de déplacement

onend

Fonction(s) à exécuter au relaéchement de la souris, qu'il y ait eu modification ou non

horizontal

définit si l'élément est redimensionnable horizontalement

vertical

définit si l'élément est redimensionnable verticalement

keepRatio

définit si le ratio doit etre conservé

bounds

Permet de limiter le redimensionnement à l'intérieur de l'offsetParent (null pour annuler, valeur numérique négative pour aller au delà de l'offsetParent)

options

• See: {Resizable}

Options supplémentaires pour le redimensionnement

on

• See: JSYG.StdConstruct.prototype.on

Ajout d'écouteurs d'événements customisés

Returns Resize

off

• See: JSYG.StdConstruct.prototype.on

Retrait d'écouteurs d'événements customisés

Returns Resize

trigger

• See: JSYG.StdConstruct.prototype.trigger

Déclenche un événement customisé

enabled

Indique si les contrôles sont activés ou non

display

Indique si les contrôles sont affichés ou non

enable

Activation des contrôles

Parameters

• opt optionnel, objet définissant les options

Returns Resize

disable

Désactivation des contrôles

Returns Resize

show

Affichage des contrôles

Parameters

• opt optionnel, objet définissant les options
• _preventEvent

Returns Resize

hide

Masque les contrôles

Parameters

• _preventEvent

Returns Resize

update

Met à jour les contrôles

Returns Resize

canHideMainPoints

Pour les lignes simples, les poignées de controle masquent les extrémités à déplacer

Parameters

• node type

Returns Boolean

Rotate

Edition de la rotation

Parameters

• editorObject

editor

référence vers l'objet Editor parent

list

liste des contrôles

steps

liste des paliers

container

Conteneur des contrôles

className

Classe appliquée au conteneur des contrôles

shape

Forme utilisée pour les contrôles

xlink

lien utilisé si shape est défini à "use"

width

largeur des contrôles

height

hauteur des contrôles

multiple

Indique si ce contrôle est actif dans le cas d'une sélection multiple

cursor

Curseur à appliquer à l'élément de contrôle

onshow

Fonction(s) à exécuter à l'affichage des contrôles

onhide

Fonction(s) à exécuter à la suppression des contrôles

onstart

Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)

ondragstart

Fonction(s) à exécuter quand on commence un déplacement

ondrag

Fonction(s) à exécuter pendant le déplacement

ondragend

Fonction(s) à exécuter en fin de déplacement

onend

Fonction(s) à exécuter au relachement de la souris, qu'il y ait eu modification ou non

options

• See: {Rotatable}

Options supplémentaires pour la rotation

on

• See: JSYG.StdConstruct.prototype.on

Ajout d'écouteurs d'événements customisés

Returns Rotate

off

• See: JSYG.StdConstruct.prototype.on

Retrait d'écouteurs d'événements customisés

Returns Rotate

trigger

• See: JSYG.StdConstruct.prototype.trigger

Déclenche un événement customisé

enabled

Indique si les contrôles sont activés ou non

display

Indique si les contrôles sont affichés ou non

enable

Activation des contrôles

Parameters

• opt optionnel, objet définissant les options

Returns Rotate

disable

Désactivation des contrôles

Returns Rotate

show

Affichage des contrôles

Parameters

• opt optionnel, objet définissant les options
• _preventEvent

Returns Rotate

hide

Masque les contrôles

Parameters

• _preventEvent

Returns Rotate

update

Met à jour les contrôles

Returns Rotate