@openrunner/editor v1.34.0

Openrunner

Editeur de parcours

• Création et visualisation de parcours
• v 2.0

pré-requis :

• node js 10.13 minimum

installation :

• npm i pour installer les dépendances

pour tester en dev :

• lance le serveur webpack : npm start
• cela recompile à chaque modification du code

pour build en prod :

• build : npm run build
• récupérer les fichiers dans le dossier dist

Tests

Lancement :

• npm run test sans coverage
• npm run test-coverage avec coverage

Utilisation

initialisation de l'editeur :

dans le fichier html :

    <link rel="stylesheet" href="main.css">
    <script src="openRunner.js"></script>

le javascript pour initialiser l'application :

  const builder = new OpenRunner.EditorBuilder();
          editor = builder
              .setMode(OpenRunner.MODE.EDITION)
              .setEditorOptions({
                  container: "openrunner-app",
              })
              .setLayers()
              .setUser()
              //.setIcons()
              //.setColors()
              //.setPoiColors()
              //.setMapOptions()
              //.setPassServiceOptions()
              //.setRoutingServiceOptions()
              //.setElevationServiceOptions()
              .build();
/* possibilité de configurer certain aspect avec les methodes du builder */

une fois l'editeur initialiser, on peut interagir avec lui grace a ces methodes (la réecriture de l'editeur interviendra lors de la refonte globale. les possibilité sont pour le moment limité)

  
    /**
     * charge un parcours dans l'éditeur, si jsonFeature est null, crée un nouveau parcours
     * @param jsonFeature
     * @return {boolean} false ou le tracé chargé
     */
    loadTrace(jsonFeature = null)

    /**
     * sélectionne le parcours actif de l'éditeur
     * @param {number} index
     * @return {boolean} true si le parcours est sélectionné false sinon
     */
    selectTrace(index)

    /**
     * supprime un parcours de l'éditeur
     * @param {number} index
     * @return {boolean}
     */
    deleteTrace(index)

    /**
     * Duplique un parcours présent dans l'éditeur.
     * @param {number} index
     * @return {boolean}
     */
    duplicateTrace(index)

    /**
     * retourne le json du parcours
     * @param {number} index
     * @return {{}|boolean} le json du parcours ou false si le parcours n'existe pas
     */
    saveTrace(index)

    /**
     * met a jour les options du parcours (couleur, épaisseur, etc...)
     * @param {number} index
     * @param {{}} options objet représentant les options
     */
    updateTraceOptions(index, options)

    /**
     * toggle l'affichage d'un parcours
     * @param {number} index
     * @param {boolean} setActive si on met le parcours en actif
     * @return {boolean} retourne si le parcours est visible ou non (false aussi si le parcours est inconnu)
     */
    toggleTrace(index, setActive = false)

    /**
     * toggle l'affichage des features d'un parcours (pois, zones, bornes kilométriques, etc...)
     * @param {number} index
     * @param {string} featureType le type de feature a toggle (poisPublic, poisPrivate, decorator, etc...)
     * @return {boolean} le status de visibilité de la feature
     */
    toggleTraceFeature(index, featureType)

    /**
     * centre la map sur le parcours
     * @param {number} index
     * @return {boolean} si la map a été recentrer sur le parcours
     */
    centerOnTrace(index)

    /**
     * met a jour un parcours depuis un json, cela rechargera le parcours
     * @param {number} index
     * @param {{}} json
     * @return {boolean} si le parcours a été mis à jour.
     */
    updateTrace(index, json)

    updateUser(userOptions = null)

    updateOptions(options = null)

vous trouverez des example d'utilisation dans le fichier index.html du dossier src/html (ce fichier est utiliser pour le serveur de dev).

l'editeur emet certain evenements afin que le front puisse réagir aux changement :

OpenRunner.EVENT.FULLSCREEN_START
OpenRunner.EVENT.FULLSCREEN_STOP
OpenRunner.EVENT.PRINT_START
OpenRunner.EVENT.PRINT_STOP
OpenRunner.EVENT.TRACE_ADDED
OpenRunner.EVENT.TRACE_DELETED
OpenRunner.EVENT.TRACE_TOGGLED
OpenRunner.EVENT.TRACE_SELECTED
OpenRunner.EVENT.SHOW_OFFERS

options

l'editeur a deux mode de fonctionnement, le mode visualisation et le mode edition. La toolbar d'edition n'est activable qu'en mode edition. par default l'editeur est en mode visualisation.

d'autre options peuvent etre configuré selon les besoin de l'instance :

les controls sont activable au cas par cas selon les besoin, voici les options par defaut :

builder.setEditorOptions({
// active/desactive le control spécifié
      controls: {
        zoom: true,
        fullscreen: true,
        print: false,
        google: false,
        layers: true,
        scale: true,
        pois: false,
      }
});

les toolbars sont activable au cas par cas selon les besoin, voici les options par defaut :

builder.setEditorOptions({
// active/desactive la toolbar spécifié
      toolbars: {
        edition: false,
        elevation: false,
        info: false,
      }
});

on peut activer certaine fonctionnalité spécifique avec les options :

builder.setEditorOptions({
      highlighting: false, // rend les parcours non selectionné transparent
      restrictMap: false, // limite le deplacement de la map a la zone des tracé chargé
});

on peut activer l'affichage de certains elements avec les options :

builder.setEditorOptions({
// affiche ou non les elements spécifié
      display: {
        pois: true,
        bornes: true,
        zones: true,
      }
});

l'elevation toolbar a des options spécifique reglable grace a :

builder.setEditorOptions({
    elevationToolbar: {
      toggle: false, // active ou non la possibilité de masquer l'elevation
      minAccess: LEVEL.MEMBER, // le niveau minimum de l'user pour que l'elevation s'affiche, 
      // si l'user n'as pas le niveau requis, 
      // un message lui proposant de s'abonné s'affiche a la place.
    },
})