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.
http://yannickbochatay.github.io/JSYG.Editor/
npm install jsyg-editor
import Editor from "jsyg-editor"
let editor = new Editor("#mySVGContainer");
editor.enable({
list:"#mySVGContainer > [data-editable]"
ctrls:"all"
});
- Editor
- editor
- CtrlPoints
- MainPoints
- Drag
- Resize
- canHideMainPoints
- Rotate
nécessite le module Editor Edition d'éléments (positionnement, dimensions, rotation, et édition des formes pour les éléments SVG).
-
arg
argument JSYG canvas des éléments à éditer -
opt
optionnel, objet définissant les options.
Returns Editor
Fonctions à exécuter quand on définit une autre cible
Fonctions à exécuter avant l'affichage de la boite d'édition (renvoyer false pour empecher l'événement)
Fonctions à exécuter à l'affichage de la boite d'édition
Fonctions à exécuter avant la suppression de la boite d'édition (renvoyer false pour empecher l'événement)
Fonctions à exécuter à la suppression de la boite d'édition
Fonctions à exécuter à la mise à jour de la boite d'édition
Fonctions à exécuter à chaque fois qu'une action d'édition se prépare, qu'elle est lieu ou non (mousedown sur un contrôle)
Fonctions à exécuter à chaque fois qu'une action d'édition débute
Fonctions à exécuter pendant une action d'édition
Fonctions à exécuter à la fin d'une action d'édition
Fonctions à exécuter au relachement du bouton de souris, qu'il y ait eu modification ou non
Fonctions à exécuter à tout changement
définit le canvas d'édition
-
arg
argument JSYG
Returns Editor
définit ou renvoie l'élément à éditer
-
arg
argument JSYG optionnel, si renseigné définit la cible à éditer -
_preventEvent
Réinitialise la cible
-
_preventEvent
Indique si plusieurs éléments sont édités à la fois
Returns Boolean
définit ou renvoie la liste des éléments éditables dans le canvas.
Masque le conteneur d'édition
-
e
-
_preventEvent
Affiche le conteneur d'édition
-
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
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)
-
e
-
_preventEvent
Returns Editor
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').
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').
Aligne les éléments sélectionnés
-
type
String (top,middle,bottom,left,center,right)
Returns Editor
référence vers l'objet Editor parent
Edition des points de contrôle des chemins SVG
-
editorObject
référence vers l'objet Editor parent
liste des contrôles
Conteneur des contrôles
Classe appliquée au conteneur des contrôles
Forme utilisée pour les contrôles
lien utilisé si shape est défini à "use"
largeur du contrôle
hauteur du contrôle
Points de contrôle liés ou non (si on en déplace un, l'autre se déplace en miroir)
- See: {Draggable}
Options supplémentaires pour le drag&drop
Fonction(s) à exécuter à l'affichage des contrôles
Fonction(s) à exécuter à la suppression des contrôles
Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)
Fonction(s) à exécuter quand on commence un déplacement
Fonction(s) à exécuter pendant le déplacement
Fonction(s) à exécuter en fin de déplacement
Fonction(s) à exécuter au relâchement de la souris, qu'il y ait eu modification ou non
Indique si les contrôles sont activés ou non
Indique si les contrôles sont affichés ou non
- See: JSYG.StdConstruct.prototype.on
Ajout d'écouteurs d'événements customisés
Returns CtrlPoints
- See: JSYG.StdConstruct.prototype.on
Retrait d'écouteurs d'événements customisés
Returns CtrlPoints
- See: JSYG.StdConstruct.prototype.trigger
Déclenche un événement customisé
Activation des contrôles
-
opt
optionnel, objet définissant les options
Returns CtrlPoints
Désactivation des contrôles
Returns CtrlPoints
Affichage des contrôles
-
opt
optionnel, objet définissant les options -
_preventEvent
Returns CtrlPoints
Masque les contrôles
-
_preventEvent
Returns CtrlPoints
Met à jour les contrôles
Returns CtrlPoints
Edition des points principaux des chemins SVG
-
editorObject
référence vers l'objet Editor parent
liste des contrôles
Conteneur des contrôles
Classe appliquée au conteneur des contrôles
Forme utilisée pour les contrôles
largeur des contrôles
hauteur des contrôles
classe appliquée au dernier point d'un chemin si le chemin est fermé
Force de la magnétisation entre les points extremes pour fermer le chemin
Lisse automatiquement les chemins
Fonction(s) à exécuter à l'affichage des contrôles
Fonction(s) à exécuter à la suppression des contrôles
Fonction(s) à exécuter quand on prepare un déplacement (mousedown sur le contrôle)
Fonction(s) à exécuter quand on commence un déplacement
Fonction(s) à exécuter pendant le déplacement
Fonction(s) à exécuter en fin de déplacement
Fonction(s) à exécuter au relachement de la souris, qu'il y ait eu modification ou non
- See: {Draggable}
Options supplémentaires pour le drag&drop
- See: JSYG.StdConstruct.prototype.on
Ajout d'écouteurs d'événements customisés
Returns MainPoints
- See: JSYG.StdConstruct.prototype.on
Retrait d'écouteurs d'événements customisés
Returns MainPoints
- See: JSYG.StdConstruct.prototype.trigger
Déclenche un événement customisé
Indique si les contrôles sont activés ou non
Indique si les contrôles sont affichés ou non
Activation des contrôles
-
opt
optionnel, objet définissant les options
Returns MainPoints
Désactivation des contrôles
Returns MainPoints
Affichage des contrôles
-
opt
optionnel, objet définissant les options -
_preventEvent
Returns MainPoints
Masque les contrôles
-
_preventEvent
Returns MainPoints
Met à jour les contrôles
Returns MainPoints
déplacement de l'élément
-
editorObject
référence vers l'objet Editor parent
Type de déplacement ("attributes" ou "transform" pour agir sur les attributs de mise en page ou sur la matrice de transformation)
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)
- See: {Draggable}
Options supplémentaires pour le drag&drop
Indique si ce contrôle est actif dans le cas d'une sélection multiple
Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)
Fonction(s) à exécuter quand on commence un déplacement
Fonction(s) à exécuter pendant le déplacement
Fonction(s) à exécuter en fin de déplacement
Fonction(s) à exécuter au relachement de la souris, qu'il y ait eu déplacement ou non
- See: JSYG.StdConstruct.prototype.on
Ajout d'écouteurs d'événements customisés
Returns Drag
- See: JSYG.StdConstruct.prototype.on
Retrait d'écouteurs d'événements customisés
Returns Drag
- See: JSYG.StdConstruct.prototype.trigger
Déclenche un événement customisé
Indique si le controle est activé ou non
Indique si le contrôle est affiché ou non
Activation du contrôle
-
opt
optionnel, objet définissant les options
Désactivation du contrôle
Returns Drag
commence le drag&drop
-
e
objet Event
Returns Drag
Affiche le contrôle
-
opt
optionnel, objet définissant les options
Masque le contrôle
Returns Drag
Met à jour le contrôle
Returns Drag
Edition des dimensions
-
editorObject
référence vers l'objet Editor parent
liste des contrôles
liste des paliers horizontaux (largeurs en px)
liste des paliers verticaux (hauteurs en px)
Conteneur des contrôles
Classe appliquée au conteneur des contrôles
Forme utilisée pour les contrôles
lien utilisé si shape est défini à "use"
largeur des contrôles
hauteur des contrôles
Type de déplacement ("attributes" ou "transform" pour agir sur les attributs de mise en page ou sur la matrice de transformation)
Indique si ce contrôle est actif dans le cas d'une sélection multiple
Fonction(s) à exécuter à l'affichage des contrôles
Fonction(s) à exécuter à la suppression des contrôles
Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)
Fonction(s) à exécuter quand on commence un déplacement
Fonction(s) à exécuter pendant le déplacement
Fonction(s) à exécuter en fin de déplacement
Fonction(s) à exécuter au relaéchement de la souris, qu'il y ait eu modification ou non
définit si l'élément est redimensionnable horizontalement
définit si l'élément est redimensionnable verticalement
définit si le ratio doit etre conservé
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)
- See: {Resizable}
Options supplémentaires pour le redimensionnement
- See: JSYG.StdConstruct.prototype.on
Ajout d'écouteurs d'événements customisés
Returns Resize
- See: JSYG.StdConstruct.prototype.on
Retrait d'écouteurs d'événements customisés
Returns Resize
- See: JSYG.StdConstruct.prototype.trigger
Déclenche un événement customisé
Indique si les contrôles sont activés ou non
Indique si les contrôles sont affichés ou non
Activation des contrôles
-
opt
optionnel, objet définissant les options
Returns Resize
Désactivation des contrôles
Returns Resize
Affichage des contrôles
-
opt
optionnel, objet définissant les options -
_preventEvent
Returns Resize
Masque les contrôles
-
_preventEvent
Returns Resize
Met à jour les contrôles
Returns Resize
Pour les lignes simples, les poignées de controle masquent les extrémités à déplacer
-
node
type
Returns Boolean
Edition de la rotation
-
editorObject
référence vers l'objet Editor parent
liste des contrôles
liste des paliers
Conteneur des contrôles
Classe appliquée au conteneur des contrôles
Forme utilisée pour les contrôles
lien utilisé si shape est défini à "use"
largeur des contrôles
hauteur des contrôles
Indique si ce contrôle est actif dans le cas d'une sélection multiple
Curseur à appliquer à l'élément de contrôle
Fonction(s) à exécuter à l'affichage des contrôles
Fonction(s) à exécuter à la suppression des contrôles
Fonction(s) à exécuter quand on prépare un déplacement (mousedown sur le contrôle)
Fonction(s) à exécuter quand on commence un déplacement
Fonction(s) à exécuter pendant le déplacement
Fonction(s) à exécuter en fin de déplacement
Fonction(s) à exécuter au relachement de la souris, qu'il y ait eu modification ou non
- See: {Rotatable}
Options supplémentaires pour la rotation
- See: JSYG.StdConstruct.prototype.on
Ajout d'écouteurs d'événements customisés
Returns Rotate
- See: JSYG.StdConstruct.prototype.on
Retrait d'écouteurs d'événements customisés
Returns Rotate
- See: JSYG.StdConstruct.prototype.trigger
Déclenche un événement customisé
Indique si les contrôles sont activés ou non
Indique si les contrôles sont affichés ou non
Activation des contrôles
-
opt
optionnel, objet définissant les options
Returns Rotate
Désactivation des contrôles
Returns Rotate
Affichage des contrôles
-
opt
optionnel, objet définissant les options -
_preventEvent
Returns Rotate
Masque les contrôles
-
_preventEvent
Returns Rotate
Met à jour les contrôles
Returns Rotate