feat(layerSwitcher): Ajout bouton header layerSwitcher + doc

[MatRouillard]

Refonte layer switcher pour cohérence entrée carto / éditeur carto

• 1 - ajout d'un mécanisme pour nouveaux boutons généraux en header du layerswitcher, avec association à un callback et envoi d'événement;

• 2 - Refonte du conteneur non développé de la couche, avec ajout d'un producteur de donnée et setter sur ce producteur;

• 3 - Ajout du slider d'opacité;

• 4 - Ajout de boutons d'options avancé, avec des mots clés pour les fonctionnalités déjà existantes;

• 5 - Mise en place du CSS pour le mode non DSFR.

[elias75015]

Si ajout de plus de deux boutons en header, réflechir à la disposition de ceux-ci. Actuellement, ils se mettent à droite l'un sous l'autre j'ai l'impression :

Sinon pour le mécanisme d'ajout de boutons Header + callback associé c'est ok pour moi ✔️

[MatRouillard]

Si ajout de plus de deux boutons en header, réflechir à la disposition de ceux-ci. Actuellement, ils se mettent à droite l'un sous l'autre j'ai l'impression

Ça suit pour le moment le design du DSFR pour les groupes de bouton. Si le libellé est plus petit alors ils se mettent à la suite de la droite vers la gauche, en passant à la ligne s'il n'y a plus la place :

[MatRouillard]

@elias75015 @lowzonenose
Refonte de la partie "Basic Tools" du layer switcher :

• Ajout d'un pictogramme pour la couche (par défaut, image du DSFR ==> à vérifier si ça marche en réalité (je ne pense pas, fonctionne bien dans les samples mais je pense que c'est tout. Je n'ai pas eu l'impression qu'il existait de dossier "publique" dans lequel l'image pourrait être mise, je l'ai donc ajoutée dans le dossier CSS/img du gestionnaire de couche)
• Ajout d'un producteur de donnée (optionnel), avec setter associé (layerSwitcher.setLayerProducer(layer, producer))
• Déplacement de certains boutons dans les "basic tools" : suppression de l'objet.
  • Ces boutons sont maintenant dans un groupe de bouton, y compris le bouton pour afficher les options avancées.
• Ajout conditionnel de certaines fonctionnalités :
  • options.allowDraggable : permet de déplacer les couches (défaut : vrai);
  • options.allowDelete : permet de supprimer les couches (défaut : vrai);
• Changement du background par défaut (passage à --background-default-grey)
• Correction du fonctionnement par défaut du LayerSwitcher lorsque l'on ajoute des configurations à une couche : cela ne lisait pas les valeurs par défaut de la couche, seulement les valeurs ajoutées dans les options du gestionnaire de couche.

[MatRouillard]

La partie "outil avancée a été modifié" :

• Refonte CSS du slider (sur une ligne)
• Ajout des boutons d'options avancés.

Pour ajouter des boutons d'options avancés, il faut, dans les options de construction du gestionnaire de couche, ajouter le paramètre suivant : advancedTools.
C'est un Array de AdvancedToolButton. Chaque objet contient des paramètres optionnels :

• key : mot clé spécial permettant d'avoir une des fonctionnalités natives du gestionnaire de couche. Celles-ci se trouvent dans un attribut statique du LayerSwitcher : LayerSwitcher.switcherButtons. Pour le moment, il y' :
  • INFO : bouton d'information;
  • EDIT : bouton d'édition du style;
  • GREYSCALE : bouton passage en noir et blanc;
  • EXTENT : bouton recentrer;
    Les autres paramètres permettent aussi de surcharger les paramètres de base des fonctionnalités natives (hors callback), et sont nécessaires pour un autre bouton
• label : Label du bouton (peut être une balise HTML, pratique pour mettre d'autres icônes autre que DSFR par exemple)
• icon : icône du bouton, soit une classe (type DSFR), soit une balise svg, soit un lien (local ou non)
• className : Classe à ajouter au bouton;
• cb : Callback au clic sur le bouton. La fonction prend les paramètres suivants :
  • e : Événement générique au clic sur l'outil;
  • layerSwitcher : instance du gestionnaire de couche;
  • layer : Couche associée à l'outil;
  • options : Options de la couche associée;
• attributes : Objet de forme key:value, où key est un attribut et value sa valeur (mis dans l'objet via la méthode setAttribute);
• styles (seulement pour les boutons personnalisés) : Styles à associer au bouton;
• accepted (seulement pour les boutons personnalisés) : Array de constructeur étendant la classe BaseLayer d'OpenLayers. Si le paramètre est donné, le bouton ne sera activé que si la classe de la couche étend au moins un des types donné en paramètre.

Par exemple :

import VectorLayer from 'ol/layer/Vector.js';
import TileLayer from 'ol/layer/Tile.js';
import { LayerSwitcher } from 'geopf-extensions-openlayers/src/index.js';

let callBackBtn = function (e, layerSwitcher, layer, options) {
  console.log(e, layerSwitcher, layer, options)
  alert(options.title);
}

let switcher = new LayerSwitcher({
  options: {
    position: "top-right",
    collapsed: false,
    panel: true,
    counter: true,
    allowDelete: true,
    advancedTools: [
      // Bouton d'information
      {
        key: ol.control.LayerSwitcher.switcherButtons.INFO,

      },
      // Surcharge bouton Noir et blanc
      {
        key: ol.control.LayerSwitcher.switcherButtons.GREYSCALE,
        label: 'Tiles (N&B)',
        icon: 'fr-icon-france-fill',
        cb: callBackBtn, // Sans aucun effet
      },
      // Bouton n'acceptant que les vecteur ou couches GeoportalWMTS
      {
        label: 'Vecteur et Géoportal WMTS',
        // icon : 'fr-icon-fire-fill',
        accepted: [ol.layer.Vector, ol.layer.GeoportalWMTS],
        cb: callBackBtn,
      },
      // Fichier svg local
      {
        label: 'Get layer',
        icon: '{{ resources }}/data/recherche-avancee.svg',
        cb: callBackBtn,
        attributes: {
          'data-action': 'get-layer'
        }
      },
      // Icône svg
      {
        label: 'Édition',
        icon: '<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.66667 15.3333L6 12.6667H11.3333L8.66667 15.3333ZM8.66667 2L11.3333 4.66667H6L8.66667 2ZM8.66667 10C7.93027 10 7.33333 9.40307 7.33333 8.66667C7.33333 7.93027 7.93027 7.33333 8.66667 7.33333C9.40307 7.33333 10 7.93027 10 8.66667C10 9.40307 9.40307 10 8.66667 10ZM2 8.66667L4.66667 6V11.3333L2 8.66667ZM15.3333 8.66667L12.6667 11.3333V6L15.3333 8.66667Z" fill="#000091"/></svg>',
        className: 'edit-action',
        cb: callBackBtn,
        attributes: {
          'data-action': 'edit'
        }
      },
      // URL en ligne
      {
        label: 'Renommer',
        icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/1200px-How_to_use_icon.svg.png',
        className: 'style-action',
        cb: callBackBtn,
        attributes: {
          'data-action': 'rename'
        }
      },
    ]
  }
})

[elias75015]

J'ai l'impression que lockLayer n'est plus exploité (couche grisée dans le layerSwitcher)

Est-ce que ce mécanisme est toujours necessaire pour l'editeur carto étant donné que maintenant on peut désactiver le drag & drop ? D'un point de vue utilisateur développeur côté API, je le trouve utile

[MatRouillard]

J'ai ajouté un exemple avec un bouton pour verrouiller la couche et cela semble fonctionner. Par contre il faudrait peut-être revoir la définition d'une couche verrouillée, car avec un bouton pour verrouiller la couche, cela donne ça :

Il n'est donc plus possible d'interagir avec la couche, pas seulement de ne plus la déplacer ou la modifier. On ne peut pas la déverrouiller ni même rétrécir le panneau d'outils avancés, ou bien déplacer des couches au dessus d'elle (embêtant d'un point de vue UX). Il faudrait peut être redéfinir le statut d'une couche verrouillée afin de voir ce que l'on peut faire ou non (par exemple, impossible de la modifier, supprimer ou modifier son opacité mais possible de la déplacer / cacher ?).

[elias75015]

ok peut être faudra t'il améliorer le lock pour choisir quoi verrouiller. Pours l'instant c'est tout ou rien effectivement.

n'hésite pas à pousser l'exemple (je ne le vois pas)

[IGNFhc]

Hello @MatRouillard
On a essayé d'importer l'extension dans l'entrée carto et les vignettes par défaut ne sont pas trouvées.
Dans les autres controls on écrit plutot les chemins en css par exemple :

button[id^="GPshowControlListPicto-"]::after {
  -webkit-mask: url("img/more-line.svg") center no-repeat;
  mask: url("img/more-line.svg") center no-repeat;
  mask-size: 70%;
}