Aller au contenu principal

Classe Editeur

Description Générale

La classe Editeur représente l'interface principale de l'éditeur graphique d'AlgoForge. Elle est responsable de la gestion des interactions utilisateur, de la manipulation des éléments graphiques, de l'import/export des données, et de la gestion des événements. Cette classe est conçue pour être instanciée une seule fois et étend la classe native HTMLElement.


Responsabilités Principales

Gestion de l'Interface Utilisateur

  • Initialisation des éléments de l'interface :

    • Référencement des outils, menus déroulants, boutons d'annulation/rétablissement, et autres composants graphiques.
    • Ajout des thèmes disponibles dans un sélecteur (_themeSelect) et gestion de leur application.
    • Gestion des raccourcis clavier et des modales (ex. : raccourcis clavier, "À propos", etc.).
  • Gestion des événements utilisateur :

    • Écoute des événements tels que clics, déplacements de souris, glisser-déposer, copier-coller, et raccourcis clavier.
    • Gestion des interactions avec les outils (ex. : création d'éléments graphiques, sélection, déplacement, suppression).
  • Personnalisation de l'apparence :

    • Application des thèmes via la classe ThemeEditeur.
    • Gestion des curseurs personnalisés en fonction de l'outil sélectionné.

Manipulation des Éléments Graphiques

  • Création et gestion des éléments :

    • Référencement des types d'éléments graphiques disponibles (ex. : Lien, Probleme, Procedure, etc.).
    • Ajout d'éléments graphiques au plan de travail en fonction de l'outil sélectionné.
  • Sélection et déplacement :

    • Gestion de la sélection multiple via un rectangle de sélection.
    • Déplacement des éléments sélectionnés avec la souris ou les flèches du clavier.
  • Suppression et modification :

    • Suppression des éléments sélectionnés.
    • Modification des propriétés des éléments graphiques (ex. : bornes des boucles, conditions des structures).

Gestion des Événements

  • Annulation et rétablissement :

    • Maintien d'une pile d'annulation (_pileAnnuler) et d'une pile de rétablissement (_pileRétablir).
    • Ajout d'événements à la pile d'annulation via ajouterEvenement.
    • Annulation et rétablissement des actions utilisateur via annuler et retablir.
  • Événements composites :

    • Regroupement d'événements multiples en un seul événement composite pour simplifier l'annulation/rétablissement.

Import/Export des Données

  • Importation :

    • Chargement de fichiers JSON contenant des données d'éléments graphiques via importerJSON.
    • Gestion du glisser-déposer et du copier-coller pour importer des données JSON.
  • Exportation :

    • Exportation des données de l'éditeur au format JSON, SVG, PNG, ou JPG.
    • Création de fichiers téléchargeables via des blobs et des liens dynamiques.
    • Conversion des éléments graphiques en images bitmap pour les formats PNG et JPG.

Gestion des Thèmes

  • Ajout de thèmes :

    • Les thèmes sont définis via la classe ThemeEditeur et ajoutés au sélecteur _themeSelect.
  • Application des thèmes :

    • Les thèmes modifient les couleurs, polices, et autres propriétés CSS de l'éditeur.
    • Le thème sélectionné est appliqué automatiquement au chargement de l'éditeur.

Gestion des Cookies

  • Stockage des préférences utilisateur :
    • Méthodes setCookie et getCookie pour enregistrer et récupérer des préférences utilisateur (ex. : thème sélectionné).

Gestion des Raccourcis Clavier

  • Raccourcis globaux :

    • Annulation (Ctrl+Z), rétablissement (Ctrl+Y), copier (Ctrl+C), coller (Ctrl+V), supprimer (Suppr), etc.
    • Navigation et manipulation des éléments avec les flèches du clavier.
  • Raccourcis spécifiques aux outils :

    • Sélection rapide des outils via des combinaisons clavier (Ctrl+1, Ctrl+2, etc.).

Gestion des Modales

  • Modales intégrées :
    • Modale "À propos" : Affiche des informations sur l'application.
    • Modale "Raccourcis clavier" : Liste les raccourcis disponibles.
    • Modale "Non implémenté" : Affiche un message pour les fonctionnalités non encore disponibles.

Gestion des Événements de la Fenêtre

  • Avant fermeture :
    • Avertit l'utilisateur si des modifications non enregistrées sont présentes.
  • Impression :
    • Ajuste le zoom pour optimiser l'impression.

Attributs Internes

Attributs principaux :

  • _pileAnnuler : Pile des événements pour l'annulation.
  • _pileRétablir : Pile des événements pour le rétablissement.
  • _currentTool : Identifiant de l'outil actuellement sélectionné.
  • _selection : Instance de la classe Selection pour gérer les éléments sélectionnés.
  • _themeSelect : Sélecteur de thème.
  • _espacePrincipal : Référence au plan de travail principal.

Autres attributs :

  • _listeTools : Liste des outils disponibles.
  • _typesElements : Liste des types d'éléments graphiques disponibles.
  • _modaleRaccourcisClavier, _modaleAPropos, _modaleNoPaste, _modaleNonImp : Références aux modales.

Méthodes Clés

Méthodes d'édition :

  • undo() : Annule la dernière action.
  • redo() : Rétablit la dernière action annulée.
  • cut() : Coupe les éléments sélectionnés.
  • copy() : Copie les éléments sélectionnés.
  • paste() : Colle les éléments copiés.
  • selectAll() : Sélectionne tous les éléments graphiques.
  • delete() : Supprime les éléments sélectionnés.

Méthodes d'import/export :

  • importerJSON() : Importe des données JSON dans l'éditeur.
  • exporterJSON(jsonString) : Exporte les données au format JSON.
  • exporterSVG(nodeToCopy) : Exporte les données au format SVG.
  • exporterPNG(nodeToCopy) : Exporte les données au format PNG.
  • exporterJPG(nodeToCopy) : Exporte les données au format JPG.

Méthodes de gestion des thèmes :

  • setCookie(cname, cvalue, exdays) : Définit un cookie.
  • getCookie(cname) : Récupère la valeur d'un cookie.

Exemple d'Utilisation

Initialisation de l'Éditeur

const editeur = new Editeur();
document.body.appendChild(editeur);

Importation de Données JSON

editeur.importerJSON();

Exportation en PNG

editeur.exporterPNG(editeur._planActif);