Feature/drawing refonte

[MatRouillard]

PR important de nombreux changements, principalement sur la partie dessin et édition de style, mais aussi en terme de dépendances (donc à confirmer sur la faisabilité @elias75015 @lowzonenose) :

Exemples :

Via la commande npm run sample:modules, les exemples se trouvent dans le dossier :

DrawingInteraction

Dossier : DrawingInteraction

• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-drawinginteraction-modules-control.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-drawinginteraction-modules-default.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-drawinginteraction-modules-dsfr-control.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-toggle-modules-default.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-toggle-modules-dsfr-default.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-toggle-modules-dsfr-toggle-content.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-toggle-modules-dsfr-toggle-interaction.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-toggle-modules-toggle-content.html
• https://localhost:8080/samples/tests/DrawingInteraction/pages-ol-toggle-modules-toggle-interaction.html

StyleDialog

Dossier : StyleDialog

• https://localhost:8080/samples/tests/StyleDialog/pages-ol-styledialog-modules-default.html
• https://localhost:8080/samples/tests/StyleDialog/pages-ol-styledialog-modules-draw-with-style.html
• https://localhost:8080/samples/tests/StyleDialog/pages-ol-styledialog-modules-draw-with-export.html
• https://localhost:8080/samples/tests/StyleDialog/pages-ol-styledialog-modules-dsfr-default.html
• https://localhost:8080/samples/tests/StyleDialog/pages-ol-styledialog-modules-dsfr-draw-with-style.html
• https://localhost:8080/samples/tests/StyleDialog/pages-ol-styledialog-modules-dsfr-draw-with-export.html

Ajouté

Modification dépendances / CSS

• Ajout de fichiers SCSS avec dépendances correspondantes :
  • "sass": "^1.95.1",
  • "sass-loader": "^16.0.
  • "style-loader": "^4.0.0",
• Màj de la dépendance css-loader: "css-loader": "^7.1.2";
• Ajout de mixins scss dans le fichier src/packages/CSS/mixins.scss, s'appuyant notamment sur le DSFR pour avoir les mixins suivants :
  • hover-media-query : Méthode pour le hover sur les boutons (inactifs en mobile);
  • button-state($text-color, $background) : Permet la modification d'un bouton, avec :hover et :active compris (nécessaire d'instancier au préalable les variables --hover-tint et --active-tint);
  • respond-from : Méthode générique pour appliquer des styles en fonctions des breakpoint (Points de rupture DSFR);

Modification contrôles et interactions "génériques"

• Modification du composant générique Control.js :

  • Ajout d'un écouteur d'événement sur la taille de la carte, avec deux composantes CSS :

    • --map-height : hauteur de la carte, en pixel;
    • --map-width : largeur de la carte, en pixel;

    L'écouteur d'événement est ajouté lorsque le premier contrôle est ajouté à une carte.

  • Ajout des méthodes abstraites et génériques _initialize, _initContainer et _initEvents, utilisé par la suite dans les autres contrôles (pas d'appel dans le constructeur pour ne pas poser de conflit avec les contrôles existant)

• Ajout de méthodes dans le fichier Helper.js :

  • setIcon : ajoute une icône via une classe, un svg ou autre chose.

• Ajout de composants "génériques" pour la créations d'autres composants, pour l'instant dans un dossier Toggle, à savoir :

  • Toggle.js : Contrôle correspondant à un bouton simple sur la carte, avec état activé ou non. Sert surtout de base pour les autres type de toggle.
  • ToggleInteraction.js : Contrôle liant un bouton avec une interaction sur la carte. L'interaction est activé / désactivé en fonction de l'état du bouton.
  • ToggleContent.js : Contrôle liant un bouton à un panneau / modale sur la carte. Cette modale est une instance de la classe Dialog.js, mais elle permet d'avoir des "helper" pour modifier facilement le dialog.
  • Dialog.js : Contrôle créant un panneau sur la carte, positionné à gauche ou à droite et ayant 3 variantes de tailles. Le panneau comprend un titre avec une icône (optionnelle) et un contenu. Pour les panneaux nécessitant une navigation tertiaire, il est possible de l'ajouter via l'options items, correspondant au contrôle TabNav, contenant lui même desTabNavItem`.
  • TabNavItem.js : Contrôle correspondant à un élément de la navigation tertiaire. Possède un titre, une icône (optionnelle) et un contenu. Une fonction peut être lancée à l'ouverture ou à la fermeture de l'élément. N'a pas besoin d'être (voire ne doit pas être) ajouté à la carte via la méthode setMap.
  • TabNav.js : Contrôle correspondant à une navigation tertiaire. Gère notamment le fait qu'un seul élément ne peut être ouvert à la fois.

• Ajout d'interaction (dossier Interactions) étendant les interactions natives openlayer :

  • Drawing.js : étend l'interaction Draw. Permet notamment de gérer le style (défini dans selectStyle.js et selectFlatStyle.js, le dernier utilisant un flatStyle pour gérer le style), mais aussi de gérer des raccourcis claviers et de lier cela à une sélection.
  • LongTouch.js : nouvelle interaction permettant de gérer un événement de type "longtouch".
  • Modifying.js : étend l'interaction Modify. Gère notamment les liens avec une sélection donnée, les interactions de type "longTouch" ou même de double click par exemple. Permet aussi de gérer des raccourcis claviers et d'afficher un menu simple au clic droit.
  • Selecting.js : étend l'interaction Select. Gère notamment le double click sur un événement sélectionné, ajoute une méthode clear pour effacer la sélection avec un envoi d'événement et gère le style par défaut de la sélection.

Ajout contrôle pour le dessin

• Ajout d'un composant de dessin Draw.js :

  • Hérite du contrôle ToggleContent, et contient une liste d'intéractions, qui sont ajoutées comme étant des ToggleInteraction pour pouvoir les activer et désactiver facilement.
  • Lié à une sélection; par défaut en créé une si aucune n'est donné en paramètre.
  • ⚠️ Pour le moment le footer n'a pas encore été initialisé et n'est pas initialisable facilement par injection de code ==> comportement à modifier pour avoir la sauvegarde d'un dessin par exemple ?

• Ajout de composant affichant des informations, dans le dossier ContextMenu :

  • InfoControl.js pour afficher des informations sur la carte (notamment indications pour le dessin);
  • SimpleMenu.js, plus light et moins dense que le contrôle ContextMenu;

Ajouté ensuite

Modification du composant Dialog

Modification du contrôle Dialog.js pour ajouter des boutons de footer via l'attribut footer et la méthode setFooterContent.
Il est possible d'ajouter des boutons via footer.buttons et du contenu au dessus, via footer.content.

Modification du composant de dessin

Refonte du contrôle de dessin Draw.js, avec intégration d’un panneau de contenu, d’un groupe de boutons d’interactions et d'un comportement par défaut :

• Gestion d’interactions de dessin personnalisées via options, ou ajout automatique des interactions par défaut Point, Ligne, Surface;
• Liaison native à une interaction de sélection, avec création d’une sélection par défaut si aucune n’est fournie;
• Gestion de source de dessin, avec création d’une source par défaut si absente;
• Possibilité d’ajouter une couche automatiquement sur la carte;
• Intégration du dialogue de style optionnel StyleDialog.js, via l'option style:true dans le constructeur :
  • Ouverture du dialogue selon la sélection;
  • Initialisation des formulaires à partir du style de la feature sélectionnée;
  • Gestion du style selon l'usage, via le paramètre onStyle :
    • Par défaut : application du flat style aux features sélectionnées;
    • onStyle:false : remontée des événements "style" uniquement;
    • onStyle: (property, value, features) => ... : application de la fonction sur les entités sélectionnées;
• Style non-DSFR pris en charge.

Inputs de style

Ajout d'input de style, héritant de la classe générique Control.js.
Le but est de lier une propriété (à priori propriété flat-style, par exemple "fill-color"), avec un input conforme aux attentes (pas simplement une sélection).
Les fichiers sont trouvables dans le dossier Input.
La gestion des styles a été faites pour le mode DSFR / non-DSFR directement dans le dossier CSS Input, avec une gestion commune et une gestion par thème.

Les contrôles créées sont :

DefaultInput

Composant de base pour les champs de formulaire de style DefaultInput.js :

• Support du label, de l’info de label, de la propriété flat style, du type et de l’état disabled;
• Émission des changements de valeur pour permettre la propagation dans les formulaires de style;
• Support d’attributs HTML additionnels, via l'attribut attributes, ajouté directement à l'input ou à la sélection;

InputNumber

Extension de DefaultInput dédiée aux valeurs numériques (<input type="number">) InputNumber.js :

• Synchronisation des changements avec émission d’événement;
• Ajout de boutons incrément / décrément avec gestion d’appui long (DSFR uniquement);

CustomSelect

Select personnalisé accessible, basé sur un modèle combobox CustomSelect.js :

• Navigation clavier avancée (voir exemple de W3C pour l'inspiration);
• Gestion du focus, de l’ouverture, de la fermeture, de la sélection et de la recherche clavier;
• Comportement mobile avec panneau d’options redimensionnable par glisser;

CustomSelectGrid

Extension de CustomSelect en mode grille CustomSelectGrid.js :

• Navigation clavier adaptée au déplacement bidimensionnel;

InputColor

Extension de CustomSelectGrid dédiée aux couleurs InputColor.js, créée pour faciliter l'utilisation des couleurs (devra être amélioré à terme) :

• Palette par défaut fournie, avec option Sans couleur;
• Mise à jour visuelle de la couleur sélectionnée dans le composant;
• Compatibilité avec l’initialisation de valeur pour préremplissage formulaire;

Gestion de formulaire de style

Ajout d'une classe pour le formulaire de style, pouvant contenir des inputs / select basiques HTML (toujours liés à des propriétés flatStyle) ou des input customisés, soit de type DefaultInput, soit d'un autre type, à condition d'avoir les méthodes getInput() et getElement().
Les fichiers sont trouvables dans le dossier StyleDialog, les fichiers CSS dans CSS/Controls/StyleDialog.
Les classes et instances créées sont :

FlatStyleForm

Classe générique de style flat OpenLayers FlatStyleForm.js :

• Ajout dynamique de champs selon type : number, color, pattern, default, textarea, select...;
• Possibilité d'ajouter un input différent via form.addInput(config), avec en paramètre config.input correspondant à un objet ayant une méthode getInput et getElement
• Gestion unifiée des changements avec émission d’événements style;
• Support de préremplissage via setFlatStyle;
• Support de séparateurs visuels dans le formulaire;
• Affichage dynamique des champs en fonction des propriétés et du type d'objet sélectionné (voir GPFflatStyleForm.scss pour plus d'informations sur la gestion de cela).

styleForm

Instance de FlatStyleForm.js, pour la gestion du style des entités styleForm.js :

• Gestion du style de point;
• Gestion du remplissage;
• Gestion du contour;
• Gestion des options de ligne;
• Couverture des paramètres couleur, opacité, largeur de trait, dash, rayon, etc.;
• Présence de certaines options encore désactivées, en attente de prise en charge complète, liés notamment à l'éditeur carto (gestion des flèches, motifs etc.);

labelForm

Instance de FlatStyleForm.js, pour une gestion simple des étiquettes labelForm.js :

• Gestion de la valeur du texte;
• Gestion de la couleur du texte;
• Gestion de la taille du texte;
• Mise à jour du texte avec délai pour limiter les rafales de changements;

StyleDialog

Classe héritant de Dialog.js, permettant de lier le dialogue de style avec une sélection StyleDialog.js :

• Chargement automatique des formulaires par défaut si aucun formulaire n’est fourni (pour l'instant seulement styleForm.js et labelForm.js, chacun mis dans des onglets de la navigation tertiaire);
• Ouverture et fermeture selon l’état de la sélection;
• Propagation des événements style des formulaires vers le dialogue;
• Exposition de helpers pour récupérer un input et injecter des valeurs de formulaire;

À améliorer / modifier

• Compléter les options actuellement présentes mais désactivées dans le formulaire de style (forme du point par exemple);
• Gestion du style faite entièrement dans le contrôle Draw, alors qu'elle devrait être faite dans un fichier à part pour bien différencier gestion du style et gestion du dessin;
• Ajouter exemple pour l'ajout de bouton dans le contrôle de dessin.