Edition des graphiques

Amaya

## Éditer des graphiques SVG

Amaya vous permet d'inclure des graphiques vectoriels dans des pages web, suivant la spécification Scalable Vector Graphics (SVG). le but n'est pas de créer tous les éléments et attributs de SVG, mais d'implémenter un sous-ensemble du langage qui soit suffisant pour les dessins que les auteurs scientifiques incluent dans leurs documents.

Amaya gère les éléments SVG comme des composants structurés, de la même façon que les éléments HTML.

Les éléments SVG sont gérés comme des composants structurés, de la même façon que les éléments HTML. Donc vous pouvez manipuler les graphiques SVG comme n'importe quelle autre partie de documents HTML.

Toutes les fonctions d'édition fournies par Amaya pour éditer le texte sont aussi disponibles pour éditer le graphique.

Attention: L'édition SVG est en phase de développement. Vous trouverez certainement des bugs et l'interface utilisateur risque de changer dans le futur.

### Créer des graphiques

Pour dessiner des graphiques, il faut un canevas SVG. Celui-ci peut être le document lui-même, ou un élément `<svg>` dans un document XML. Un document SVG est créé par la commande Fichier->Nouveau->Nouveau Dessin. Un onglet de l'outil Eléments vous permet de créer un canevas SVG et des composants graphiques dans un document XML.

Quand l'utilisateur demande la création d'un canevas SVG dans un document XML, Amaya cherche un endroit autour du point d'insertion où un tel élément `<svg>` peut être inséré. L'élément est créé avec une largeur et hauteur par défaut. Par la suite, quand le canevas SVG est sélectionné, il peut être redimensionné.

Si l'utilisateur essaie de créer un graphique hors d'un canevas SVG, un élément <svg> est automatiquement engendré pour inclure le nouveau composant graphique.

Quand l'utilisateur clique dans un canevas SVG, l'outil SVG est présenté et l'utilisateur peut créer des composants graphiques :

- des connecteurs : ligne, flèche simple ou double, "zigzag".
- texte, fragment de HTML embarqué (`foreignObject`), formule mathématique, image.
- des figures élémentaires : carré, rectangle (optionnellement avec des coins arrondis), losange, parallélogramme, trapèze, triangles, cercle et ellipse.
- polygone et segments de droite, courbes ouvertes et fermées.
- des polygones réguliers : pentagone, hexagone, heptagone, octogone, différentes étoiles
- des objets 3D : cube, parallélépipède, cylindre, octaèdre, pyramide.
- des symboles spéciaux pour l'électronique, la chimie, etc.

Dans la vue formatée, la position et la taille de tous les composants créés sont données par une interaction directe :

- Pour les connecteurs (excepté pour les lignes), les figures élémentaires et les objets 3D, vous devez tout d'abord sélectionner la position du coin gauche en cliquant avec le bouton gauche de la souris. Laissez le bouton appuyé (drag) et déplacez la souris jusqu'à la position du coin opposé, puis lâchez le bouton.
- Pour le texte et les `foreignObject`, cliquez à la position où vous souhaitez insérer l'élément.
- Pour les polygones et segments de droite, vous cliquez pour engendrer un point à la position correspondante avec le bouton gauche de la souris. Pour indiquer le dernier point, faites un double clic. Un clic droit ou la touche `Echappement` arrête l'interaction sans ajouter de point.
- Pour les courbes de Bézier, vous procédez comme pour les polygones, sauf que vous devez indiquer aussi la direction des tangentes.

Quand une ligne, une flèche, un polygone ou un segment de droite est créé, la touche `shift` peut être pressée pour forcer une approximation de 15°.

Quand la sélection est dans la vue structure, les composants sont créés avec une position et une taille par défaut.

### Sélectionner des graphiques

Dans la vue formatée, les règles de sélection des graphiques sont les suivantes :

- Si l'élément est creux, alors il faut cliquer sur ses contours. Dans le cas contraire, vous pouvez cliquer à l'intérieur.
- Si une polyline ou un chemin est sélectionné, alors leurs points de contrôles apparaissent et peuvent être sélectionnés individuellement. Si le point de contrôle sélectionné fait partie d'un fragment de courbe de Bézier, la poignée de Bézier correspondante est affichée.
- Si la touche `shift` est pressée alors chaque nouveau élément sur lequel on clique est ajouté à la sélection.
- Plusieurs composants peuvent être sélectionnés en même temps, à l'aide de l'outil de sélection rectangulaire du panneau SVG.
- Quand des composants sont groupés, ces composants ne peuvent pas être sélectionnés individuellement dans le vue formatée. Seul le groupe peut être sélectionné. Mais vous pouvez les sélectionner dans la vue structure.

### Appliquer des transformations aux graphiques

Pour appliquer des transformations à un composant, il faut d'abord le sélectionner. Les transformations disponibles sont proposées dans l'outil SVG, mais aussi dans le menu contextuel affiché avec le bouton droit.

Les transformations possibles sont :

- grouper/dégrouper des composants
- changer le niveau des objets: envoyer à arrière-plan, descendre d'un niveau, monter d'une niveau, monter au premier-plan.
- tourner, pivoter de 90°.
- symétries verticale et horizontale.
- alignements : gauche, centre, droite, haut, milieu, bas. Si un seul objet est sélectionné, l'alignement se fait par rapport au cadre SVG.

### Appliquer du style aux graphiques

Vous pouvez changer quelques attributs de style des graphiques en utilisant le panneau Style. Quand un composant SVG est sélectionné, le panneau Style change pour présenter les attributs de style spécifiques :

- `Opacity` : contrôle l'opacité globale du composant graphique (couleur du fond et couleur du contour)
- `Fill` : contrôle la couleur de fond est utilisée pour remplir le graphique et son opacité
  - Si l'entrée n'est pas cochée, le graphique est creux
  - Le bouton coloré donne la couleur courante
  - Le bouton palette permet de choisir une autre couleur
- `Stroke` : contrôle la couleur du contour du graphique et son opacité
  - Si l'entrée n'est pas cochée, le graphique n'a pas de contour
  - Le bouton coloré donne la couleur courante
  - Le bouton palette permet de choisir une autre couleur
- `Stroke-width` : contrôle l'épaisseur des contours