feat(searchEngine): refonte du widget

.eslintrc

@@ -45,10 +45,7 @@
         "no-console": "off",
         "no-proto": "off",
         "no-prototype-builtins": "off",
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
+        "linebreak-style": "off",
         "padded-blocks": [
             "error",
             {

build/webpack/controls.webpack.config.js

@@ -74,6 +74,14 @@ module.exports = (env, argv) => {
                 // formats
                 break;
             case "SearchEngine":
+            case "SearchEngineBase":
+            case "SearchEngineGeocodeIGN":
+            case "SearchEngineAdvanced":
+            case "LocationAdvancedSearch":
+            case "ParcelAdvancedSearch":
+            case "AbstractAdvancedSearch":
+            case "InseeAdvancedSearch":
+            case "CoordinateAdancedSearch":
                 // crs
                 break;
             case "MeasureArea":

build/webpack/extend.themes.webpack.js

@@ -28,6 +28,7 @@ module.exports = (env, argv) => {
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ReverseGeocoding", "GPFreverseGeocodingStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/Route", "GPFrouteStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/SearchEngine", "GPFsearchEngineStyle.css"),
+                path.join(rootdir, "src", "packages", "CSS", "Controls/SearchEngine", "GPFadvancedSearchEngineStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ToolBoxMeasure", "GPFtoolBoxMeasureStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/Zoom", "GPFzoomStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/FullScreen", "GPFfullScreenStyle.css"),
@@ -64,6 +65,7 @@ module.exports = (env, argv) => {
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ReverseGeocoding", "DSFRreverseGeocodingStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/Route", "DSFRrouteStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/SearchEngine", "DSFRsearchEngineStyle.css"),
+                path.join(rootdir, "src", "packages", "CSS", "Controls/SearchEngine", "DSFRadvancedSearchEngineStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/ToolBoxMeasure", "DSFRtoolBoxMeasureStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/Zoom", "DSFRzoomStyle.css"),
                 path.join(rootdir, "src", "packages", "CSS", "Controls/FullScreen", "DSFRfullScreenStyle.css"),

build/webpack/modules.webpack.config.js

@@ -45,6 +45,14 @@ module.exports = (env, argv) => {
             "GpfExtOlReverseGeocode" : path.join(rootdir, "src", "packages", "Controls/ReverseGeocode", "ReverseGeocode.js"),
             "GpfExtOlRoute" : path.join(rootdir, "src", "packages", "Controls/Route", "Route.js"),
             "GpfExtOlSearchEngine" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "SearchEngine.js"),
+            "GpfExtOlSearchEngineBase" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "SearchEngineBase.js"),
+            "GpfExtOlSearchEngineGeocodeIGN" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "SearchEngineGeocodeIGN.js"),
+            "GpfExtOlSearchEngineAdvanced" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "SearchEngineAdvanced.js"),
+            "GpfExtOlLocationAdvancedSearch" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "LocationAdvancedSearch.js"),
+            "GpfExtOlParcelAdvancedSearch" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "ParcelAdvancedSearch.js"),
+            "GpfExtOlInseeAdvancedSearch" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "InseeAdvancedSearch.js"),
+            "GpfExtOlAbstractAdvancedSearch" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "AbstractAdvancedSearch.js"),
+            "GpfExtOlCoordinateAdvancedSearch" : path.join(rootdir, "src", "packages", "Controls/SearchEngine", "CoordinateAdvancedSearch.js"),
             "GpfExtOlExport" : path.join(rootdir, "src", "packages", "Controls/Export", "Export.js"),
             "GpfExtOlMeasureArea" : path.join(rootdir, "src", "packages", "Controls", "Measures", "MeasureArea.js"),
             "GpfExtOlMeasureAzimuth" : path.join(rootdir, "src", "packages", "Controls", "Measures", "MeasureAzimuth.js"),
@@ -58,6 +66,9 @@ module.exports = (env, argv) => {
             "GpfExtOlControlList" : path.join(rootdir, "src", "packages", "Controls/ControlList", "ControlList.js"),
             "GpfExtOlContextMenu" : path.join(rootdir, "src", "packages", "Controls/ContextMenu", "ContextMenu.js"),
             "GpfExtOlReporting" : path.join(rootdir, "src", "packages", "Controls/Reporting", "Reporting.js"),
+            // Interactions
+            "GpfExtOlDrawingInteraction" : path.join(rootdir, "src", "packages", "Interactions/Drawing.js"),
+            "GpfExtOlSelectingInteraction" : path.join(rootdir, "src", "packages", "Interactions/Selecting.js"),
             // Formats étendus
             "GpfExtOlFormats" : [
                 path.join(rootdir, "src", "packages", "Formats", "GeoJSON.js"),

demos/angular-project/angular.json

@@ -38,6 +38,7 @@
               "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/MousePosition/GPFmousePosition.css",
               "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/Export/GPFexport.css",
               "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/SearchEngine/GPFsearchEngine.css",
+              "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/SearchEngine/GPFadvancedSearchEngine.css",
               "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/Editor/GPFeditor.css",
               "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/ReverseGeocoding/GPFreverseGeocoding.css",
               "node_modules/geopf-extensions-openlayers/src/packages/CSS/Controls/Drawing/GPFdrawing.css",

samples-src/pages/tests/DrawingInteraction/pages-ol-drawinginteraction-modules-default.html

@@ -0,0 +1,100 @@
+{{#extend "ol-sample-modules-dsfr-layout"}}
+
+{{#content "vendor"}}
+    <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlDrawingInteraction.css" />
+    <script src="{{ baseurl }}/dist/modules/GpfExtOlDrawingInteraction.js"></script>
+    <script src="{{ baseurl }}/dist/modules/GpfExtOlSelectingInteraction.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample openlayers Drawing interaction</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100%;
+                height: 500px;
+            }
+            [id^="GPsearchEngine-"] {
+                top: 8px;
+            }
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Outil de dessin avec style</h2>
+            <!-- map -->
+            <div id="map">
+            </div>
+            <p>Dernière sélection : <span id="selection"></span></p>
+            <button class="fr-btn fr-btn--secondary" onclick="setType('Point')">Point</button>
+            <button class="fr-btn fr-btn--secondary" onclick="setType('LineString')">Ligne</button>
+            <button class="fr-btn fr-btn--secondary" onclick="setType('Polygon')">Surface</button>
+{{/content}}
+
+{{#content "js"}}
+            <script type="text/javascript">
+                var map;
+                window.onload = function() {
+                    // on cache l'image de chargement du Géoportail.
+                    document.getElementById('map').style.backgroundImage = 'none';
+
+                    let source = new ol.source.Vector({})
+                    let layer = new ol.layer.Vector({
+                        source: source
+                    })
+					// 1. Création de la map
+                    map = new ol.Map({
+                        target : "map",
+                        view : new ol.View({
+                            center : [288074.8449901076, 6247982.515792289],
+                            zoom : 6
+                        }),
+                        layers : [
+                            new ol.layer.Tile({
+                                source: new ol.source.OSM(),
+                                // zIndex : 4,
+                                opacity: 0.5
+                            }),
+                            layer
+                        ]
+                    });
+
+                    // Drawing
+                    const drawing = {};
+                    ["Point", "LineString", "Polygon"].forEach(k => {
+                        drawing[k] = new ol.interaction.Drawing({
+                            type : k,
+                            source : source
+                        });
+                    })
+                    layer.setStyle(drawing.Point.getStyle());
+                    Object.keys(drawing).forEach((k, i) => {
+                        drawing[k].setActive(false);
+                        map.addInteraction(drawing[k]);
+                    });
+
+                    // Activate drawing
+                    window.setType = function (type) {
+                        Object.keys(drawing).forEach(k => {
+                            drawing[k].setActive(type===k);
+                        });
+                    }
+                    // Deactivate drawing on drawend
+                    Object.keys(drawing).forEach((k, i) => {
+                        drawing[k].on("drawend", () => {
+                            setTimeout(() => drawing[k].setActive(false));
+                        });
+                    });
+
+                    const select = new ol.interaction.Selecting({
+
+                    });
+                    map.addInteraction(select);
+                    select.on('dblclick', e => console.log(e.feature));
+                };
+           </script>
+{{/content}}
+
+{{/extend}}

samples-src/pages/tests/SearchEngine/pages-ol-searchenginebase-modules-default.html

@@ -0,0 +1,88 @@
+{{#extend "ol-sample-modules-layout"}}
+
+{{#content "vendor"}}
+
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlSearchEngine.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlSearchEngineBase.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample openlayers SearchEngine</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100%;
+                height: 500px;
+            }
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Ajout du moteur de recherche avec les options par défaut</h2>
+            <!-- map -->
+            <div id="map">
+            </div>
+            <p>Dernière sélection : <span id="selection"></span></p>
+{{/content}}
+
+{{#content "js"}}
+            <script type="text/javascript">
+                var map;
+                window.onload = function() {
+                    // on cache l'image de chargement du Géoportail.
+                    document.getElementById('map').style.backgroundImage = 'none';
+
+					// 1. Création de la map
+                    map = new ol.Map({
+                        target : "map",
+                        view : new ol.View({
+                            center : [288074.8449901076, 6247982.515792289],
+                            zoom : 6
+                        }),
+                        layers : [
+                            new ol.layer.Tile({
+                                source: new ol.source.OSM(),
+                                // zIndex : 4,
+                                opacity: 0.5
+                            })
+                        ]
+                    });
+
+					// 2. Appel du SearchEngine
+                    var search = new ol.control.SearchEngineBase({
+                        searchService: new ol.service.DefaultSearchService({
+                            searchTab : [
+                                "Paris", "Joinville-le-Pont",
+                                "Créteil", "Maisons-Alfort", "Alfortville", "Ivry-sur-Seine", "Charenton-le-Pont",
+                                "Saint-Maurice", "Nogent-sur-Marne", "Le Perreux-sur-Marne", "Neuilly-Plaisance",
+                                "Bry-sur-Marne", "Villiers-sur-Marne", "Champigny-sur-Marne", "Chennevières-sur-Marne",
+                                "Ormesson-sur-Marne", "Santeny", "Limeil-Brévannes", "Valenton", "Villecresnes",
+                                "Marolles-en-Brie", "La Queue-en-Brie", "Boissy-Saint-Léger", "Sucy-en-Brie",
+                                "Bonneuil-sur-Marne", "Crécy-la-Chapelle", "Chelles", "Gournay-sur-Marne",
+                                "Le Raincy", "Clichy-sous-Bois", "Montfermeil", "Vaujours", "Tremblay-en-France",
+                                "Coubron", "Aulnay-sous-Bois", "Sevran", "Livry-Gargan", "Clichy-sous-Bois",
+                                "Montfermeil", "Gagny", "Neuilly-sur-Marne", "Noisy-le-Grand", "Noisy-le-Sec",
+                                "Romainville", "Les Lilas", "Bagnolet", "Montreuil", "Vincennes", "Fontenay-sous-Bois"
+                        ]}),
+                        collapsible: true
+                    });
+
+					// 3. Ajout du SearchEngine à la carte
+                    map.addControl(search);
+
+                    // Get search info
+                    search.on('search', e => {
+                        console.log("search", e);
+                        document.getElementById("selection").innerHTML = e.result;
+                    })
+                    // Get search info
+                    search.on('autocomplete', e => {
+                        console.log("autocomplete", e);
+                    })
+                };
+           </script>
+{{/content}}
+
+{{/extend}}

samples-src/pages/tests/SearchEngine/pages-ol-searchenginebase-modules-dsfr-geocodeAdvanced.html

@@ -0,0 +1,121 @@
+{{#extend "ol-sample-modules-dsfr-layout"}}
+
+{{#content "vendor"}}
+
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlSearchEngine.css" />
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlAbstractAdvancedSearch.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlSearchEngineAdvanced.js"></script>
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlInseeAdvancedSearch.js"></script>
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlLocationAdvancedSearch.js"></script>
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlParcelAdvancedSearch.js"></script>
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlCoordinateAdvancedSearch.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample openlayers SearchEngine</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100%;
+                height: 500px;
+            }
+            [id^="GPsearchEngine-"] {
+                top: 8px;
+            }
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Ajout du moteur de recherche avec les options par défaut</h2>
+            <!-- map -->
+            <div id="map">
+            </div>
+            <p>Dernière sélection : <span id="selection"></span></p>
+            <button class="fr-btn fr-btn--secondary">Bouton pour le focus</button>
+{{/content}}
+
+{{#content "js"}}
+            <script type="text/javascript">
+                var map;
+                window.onload = function() {
+                    // on cache l'image de chargement du Géoportail.
+                    document.getElementById('map').style.backgroundImage = 'none';
+
+                    let source = new ol.source.Vector({})
+                    let layer = new ol.layer.Vector({
+                        source: source
+                    })
+					// 1. Création de la map
+                    map = new ol.Map({
+                        target : "map",
+                        view : new ol.View({
+                            center : [288074.8449901076, 6247982.515792289],
+                            zoom : 6
+                        }),
+                        layers : [
+                            new ol.layer.Tile({
+                                source: new ol.source.OSM(),
+                                // zIndex : 4,
+                                opacity: 0.5
+                            }),
+                            layer
+                        ]
+                    });
+
+                    var insee = new ol.control.InseeAdvancedSearch({
+                    })
+
+                    var location = new ol.control.LocationAdvancedSearch({
+                    })
+
+                    var parcel = new ol.control.ParcelAdvancedSearch({
+                    })
+
+                    var coordinates = new ol.control.CoordinateAdvancedSearch({
+                    })
+
+                    let addFeatureToLayer = function (feature) {
+                        source.addFeature(feature);
+                        // Feature traitée => supprimer de la recherche
+                        return true;
+                        /*
+                        // Feature non traitée => conserver la recherche
+                        return false;
+                        */
+                    }
+
+					// 2. Appel du SearchEngine
+                    var search = new ol.control.SearchEngineAdvanced({
+                        advancedSearch : [insee, location, coordinates, parcel],
+                        returnTrueGeometry : true,
+                        popupButtons : [{
+                            label : "Ajouter l'objet à la couche",
+                            className : "custom-button",
+                            icon : "fr-icon-map-pin-add-line",
+                            attributes : {
+                                "data-action" : "add-feature",
+                            },
+                            onClick : addFeatureToLayer
+                        }]
+                    });
+
+					// 3. Ajout du SearchEngine à la carte
+                    map.addControl(search);
+
+                    // Get search info
+                    search.on('select', e => {
+                        console.log("Select", e)
+                        document.getElementById("selection").innerHTML = e.title;
+                    })
+
+                    // Get search info
+                    search.on('search', e => {
+                        console.log("search", e)
+                    })
+                };
+           </script>
+{{/content}}
+
+{{/extend}}