Edition de Tableaux

Exercice 1: création et modification des tableaux

Création des tableaux avec gestion interactive/dynamique des paramètres du tableau créé. Pour cet exercice et pour le suivant, on se limitera aux paramètres suivants:

position du tableau: position du premier clic.
largeur et hauteur du tableau: associés aux mouvements du pointeur souris après le premier clic et tant que le bouton pressé n'est pas relevé.
nombre de lignes/colonnes: création des tableaux avec 1 lignes et 1 colonnes par défaut modifiable grâce aux touches de votre choix pour augmenter/diminuer le nombre de lignes et/ou le nombre de colonnes dynamiquement durant la création.

Dessin du fantôme: le dessin de la table en cours de création (aussi appelé fantôme) se fait dans une couleur différente de la couleur des tables déjà créées.
Remise à zéro: dans la partie HTML, ajouter un bouton «Effacer tout». Un clic sur ce bouton efface tout le contenu du canvas et met à jour les variables associées pour pouvoir gérer une potentielle nouvelle interaction.

La modification de la hauteur des lignes se fait par le déplacement d’une ligne horizontale verticalement lorsque l’utilisateur sélectionne une ligne horizontale puis déplace la souris sans relâcher la pression sur le bouton.
Le déplacement s’arrête lorsque le bouton est relâché ou si l’utilisateur déplace la souris en dehors de la table, pendant le déplacement.
La suppression d’une ligne se fait lorsque l’utilisateur appuie sur la touche 'suppr' après avoir cliqué sur une ligne.
Restaurer les lignes supprimées: ajouter un bouton à la manière du div de la question 1 et écrire le code qui permet de restaurer les dernières lignes effacées en cliquant sur le bouton.

Quatres lignes magnétiques (haut, bas, gauche, droite) sont associées à chaque table. Modifier le programme pour que:

Lors de la création: lorsque démarre la création d'une table, ses lignes magnétiques ainsi que les lignes magnétiques des tables déjà créées s'affichent en gris. Lorsque les lignes magnétiques de la table en cours de création sont suffisamment proches des lignes magnétiques d'une autre table, elles s'affichent d'une autre couleur/épaisseur pour indiquer l'alignement automatique. Si l'utilisateur relâche le bouton de la souris à ce moment, l'alignement se fait sinon, le déplacement continue.
Pendant la modification: toutes les lignes magnétiques s'affichent. L'appui sur le bouton de la souris, immédiatement suivi d'un déplacement d'une ligne magnétique permet de redimensionner la table, avec le même principe d'attraction/alignement automatique que dans la question précédente.
Lors du déplacement: le déplacement d'une table se fait par appui sur le bouton (gauche) de la souris dans la zone de titre de la table à déplacer, immédiatement suivi du déplacement de la souris. Le déplacement se poursuit avec les mêmes principes d'attraction/alignement que dans les questions précédentes jusqu'à ce que le bouton de la souris soit relâché ou que la souris sorte de la zone du canvas.

Coloration automatique: ajouter un bouton "couleur" qui permet d'activer/désactiver la coloration automatique des tables. Lorsque la coloration est activée, une couleur différente est associée à chaque table.
Comparaison par transparence: chaque fois qu'une table est sélectionnée, elle est automatiquement ajustée sur la précédente sélection, sauf s'il n'y a aucune sélection en cours, auquel cas rien ne change.
Lors de la superposition des tables pour la comparaison, les titres des tables s'arrangent automatiquement à la manière d'onglets avec un signe - qui permet désélectionner une table. Les lignes et les colonnes s'ajustent en hauteur/largeur pour faciliter la comparaison par superposition.
Envisager l'animation des ajustements utiles lors de ces interactions: animer l'ajustement des positions des tables et animer l'ajustement des hauteurs des lignes et des largeurs des colonnes.