feat(drawing) : Refonte du contrôle Drawing - #490
Conversation
|
Premiers retours : 1 - Le widget ne reprend pas la logique de positionnement globale par "coin" (top-left, top-right...) des autres widgets, du coup il ne s'intègre pas correctement à la pile de boutons dans le container adéquate (div d'id "position-container-top-right" en l'occurence)
2 - Le widget hérite du composant toggle. Du coup, l'id des éléments qui compose le widget draw de suit pas non plus la logique des autres widgets en terme UID et de nommage :
3 - Avec le paramétrage par défaut, les interactions permettant de modifier les features dessinées devraient être actives |
|
Hello @MatRouillard. |
|
@iamvdo Bien vu, on les utilisait avant mais ça empêchait d'avoir une symbolisation par défaut. JE ne les avais pas enlevé des exemples. |
|
Alors oui effectivement, il y a beaucoup de pages de démo, et j'avoue ne pas comprendre ce qu'on doit regarder dans chaque page, ni ce qui est vraiment testé, entre Voilà quelques points en vrac:
Ça serait pas mal qu'on essaie de l'intégrer coté entrée carto, on aura sûrement pleins d'autres retours ;) J'essaie de regarder dès que j'ai encore un peu de temps... |
De base on avait fait le composant de dessin avec notamment des classes étendant les interactions de dessin d'openlayers (DrawingInteraction notamment) et dans le même temps j'avais essayé de créer une classe utilitaire pour les contrôles / boutons sur la carte ( Les exemples dans
Ok, je ne pense pas que ça pose trop de problème de toute manière
Je les ai utilisé dans la définition du max-width du dialog (voir GPFpanel.scss). Après je n'en fais pas une utilisation folle en soit. J'avais vu le commentaire mais je ne me suis pas vraiment penché dessus. J'avais essayé de voir comment tu l'avais utilisé mais la PR était trop grosse pour que je regarde rapidement et en comprenant donc je l'ai laissé de côté. Mais du coup je pense que ça serait intéressant d'utiliser les container en effet.
En fait j'aurais en soit dû faire une autre branche + une PR, car j'ai changé le comportement par défaut du layerswitcher pour résoudre plus facilement / plus proprement un ticket de l'éditeur concernant le tooltip à afficher (voir [BUG] Gestionnaire de couche #141). Comme sur l'éditeur le layerswitcher n'est pas positionné dans une barre, le tooltip ne s'affichait pas. J'ai donc ajouté un calcul en js pour savoir si le tooltip devait s'afficher à gauche ou à droite, et j'ai fait en sorte qu'il s'affiche aussi lorsque l'élément n'était pas positionné. S'il faut l'enlever je peux le faire, juste ça me paraîssait plus propre que de faire des surcharges CSS côté éditeur.
Oui c'est lié à la gestion du style. Comme la gestion du style était un peu complexe pour être gérée facilement sur les extensions (i.e. sans une grosse fonction de gestion du style), j'ai passé |
|
@elias75015 @iamvdo j'ai modifié le point sur lequel vous étiez d'accord, à savoir le
|
|
Autre problème, le widget ne semble pas s'intégrer à la logique de "un seul panel ouvert par côté". C'est géré par le fichier src/packages/Utils/PanelManager.js Capture.video.du.12-05-2026.11.59.25.webm |
|
@elias75015 j'ai fait les modifs pour le panneau (logique de "un seul panel ouvert par côté"). Je fais les modifications concernant le bandeau bleu dans un autre commit. |
|
Nous n'utilison pas "aria-extented", ni côté extensions, ni côté entee carto, donc a priori pas de problème |
|
@elias75015 comme tu me l'avais proposé, j'ai fait des modifs pour passer tous les widgets avec la couleur $background-open-blue-france, plutôt que la barre bleue. J'ai ajouté un fichier SCSS plutôt que faire tout en CSS car j'utilise des mixins notamment pour gérer l'état hover / actif en mobile. Si c'est ok pour toi je laisse, sinon je modifierais le toggle pour lui mettre la barre bleue aussi et on surchargera côté éditeur carto. |
…autres contrôles Le format KML prend désormais en compte les array de style. Les contrôles Toggle ont été adaptés pour avoir une compatibilité avec les autres (ex: Export)
Ajout d'une méthode setGeom sur la classe FlatStyleForm pour gérer l'affichage du formulaire. Gère mieux la sélection pour pouvoir sélectionner plusieurs entitès en même temps
03c1cb3 to
0196393
Compare
|
Salut @MatRouillard. Aussi, j'en ai profité pour rebaser cette branche sur la main, et j'ai force push, donc attention à bien récupérer la bonne version de branche |
Il me semble que la demande était justement d'avoir la config la plus simple possible, et donc d'avoir la possibilité, comme les autre contrôles, d'ajouter un contrôle à la carte avec |
|
Je n'ai pas très bien compris le |




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 :
DrawingInteractionStyleDialog
Dossier :
StyleDialogAjouté
Modification dépendances / CSS
"sass": "^1.95.1","sass-loader": "^16.0."style-loader": "^4.0.0","css-loader": "^7.1.2";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-tintet--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,_initContaineret_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 classeDialog.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'optionsitems, correspondant au contrôleTabNav, 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éthodesetMap.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 dansselectStyle.jsetselectFlatStyle.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éthodeclearpour 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:ToggleContent, et contient une liste d'intéractions, qui sont ajoutées comme étant desToggleInteractionpour pouvoir les activer et désactiver facilement.Ajout de composant affichant des informations, dans le dossier
ContextMenu:InfoControl.jspour afficher des informations sur la carte (notamment indications pour le dessin);SimpleMenu.js, plus light et moins dense que le contrôleContextMenu;Ajouté ensuite
Modification du composant Dialog
Modification du contrôle
Dialog.jspour ajouter des boutons de footer via l'attributfooteret 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 :StyleDialog.js, via l'optionstyle:truedans le constructeur :onStyle:onStyle:false: remontée des événements"style"uniquement;onStyle: (property, value, features) => ...: application de la fonction sur les entités sélectionnées;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: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:CustomSelect
Select personnalisé accessible, basé sur un modèle combobox
CustomSelect.js:CustomSelectGrid
Extension de CustomSelect en mode grille
CustomSelectGrid.js:InputColor
Extension de CustomSelectGrid dédiée aux couleurs
InputColor.js, créée pour faciliter l'utilisation des couleurs (devra être amélioré à terme) :Sans couleur;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éthodesgetInput()etgetElement().Les fichiers sont trouvables dans le dossier
StyleDialog, les fichiers CSS dansCSS/Controls/StyleDialog.Les classes et instances créées sont :
FlatStyleForm
Classe générique de style flat OpenLayers
FlatStyleForm.js:form.addInput(config), avec en paramètreconfig.inputcorrespondant à un objet ayant une méthodegetInputetgetElementGPFflatStyleForm.scsspour plus d'informations sur la gestion de cela).styleForm
Instance de
FlatStyleForm.js, pour la gestion du style des entitésstyleForm.js:labelForm
Instance de
FlatStyleForm.js, pour une gestion simple des étiquetteslabelForm.js:StyleDialog
Classe héritant de
Dialog.js, permettant de lier le dialogue de style avec une sélectionStyleDialog.js:styleForm.jsetlabelForm.js, chacun mis dans des onglets de la navigation tertiaire);À améliorer / modifier