Merge pull request #651 from geoadmin/develop

New Release v1.6.0 - #minor

src/modules/infobox/components/FeatureDetail.vue

@@ -51,3 +51,23 @@ function sanitizeHtml(htmlText) {
         </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+@import 'src/scss/variables-admin.module';
+
+// Styling for external HTML content
+:global(.htmlpopup-container) {
+    width: 100%;
+    font-size: 11px;
+    text-align: start;
+}
+:global(.htmlpopup-header) {
+    background-color: $gainsboro;
+    padding: 7px;
+    margin-bottom: 7px;
+    font-weight: 700;
+}
+:global(.htmlpopup-content) {
+    padding: 7px;
+}
+</style>

src/modules/infobox/components/FeatureList.vue

@@ -25,6 +25,18 @@ function generateFeatureIdForList(feature, indexInList) {
     }
     return featureId
 }
+function highlightFeature(feature) {
+    store.dispatch('setHighlightedFeatureId', {
+        highlightedFeatureId: feature?.id,
+        dispatcher: 'FeatureList.vue',
+    })
+}
+function clearHighlightedFeature() {
+    store.dispatch('setHighlightedFeatureId', {
+        highlightedFeatureId: null,
+        dispatcher: 'FeatureList.vue',
+    })
+}
 </script>
 
 <template>
@@ -38,26 +50,35 @@ function generateFeatureIdForList(feature, indexInList) {
             :key="generateFeatureIdForList(feature, index)"
             :feature="feature"
             class="feature-list-item"
+            @mouseenter.passive="highlightFeature(feature)"
+            @mouseleave.passive="clearHighlightedFeature"
         />
     </div>
 </template>
 
 <style lang="scss" scoped>
 @import 'src/scss/media-query.mixin';
+@import 'src/scss/variables-admin.module';
 
 .feature-list {
     margin: 0;
-    padding: 0;
     list-style: none;
 
+    &-item {
+        $item-border: $border-width solid $border-color;
+        border-right: $item-border;
+        border-bottom: $item-border;
+        &:hover {
+            background-color: rgba($mocassin-to-red-1, 0.8);
+        }
+    }
     &-row {
         display: grid;
         // on mobile (default size) only one column
         // see media query under for other screen sizes
         grid-template-columns: 1fr;
         max-height: 50vh;
         overflow-y: auto;
-        grid-gap: 8px;
     }
 }
 
@@ -81,20 +102,4 @@ function generateFeatureIdForList(feature, indexInList) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 }
-
-// Styling for external HTML content
-:global(.htmlpopup-container) {
-    width: 100%;
-    font-size: 11px;
-    text-align: start;
-}
-:global(.htmlpopup-header) {
-    background-color: #e9e9e9;
-    padding: 7px;
-    margin-bottom: 7px;
-    font-weight: 700;
-}
-:global(.htmlpopup-content) {
-    padding: 7px;
-}
 </style>

src/modules/map/components/WarningRibbon.vue

@@ -14,7 +14,7 @@ export default {
 
 <style lang="scss" scoped>
 @import 'src/scss/media-query.mixin';
-@import 'src/scss/variables-admin';
+@import 'src/scss/variables-admin.module';
 @import 'src/scss/variables';
 
 /* Corner ribbons, from http://codepen.io/eode9/pen/twkKm
@@ -34,7 +34,7 @@ $dist-from-border: 50px; // Distance of the text's center from the border
     transform: rotate(-45deg);
     z-index: $zindex-warning;
     background: $danger;
-    color: white;
+    color: $white;
     text-align: center;
     line-height: 2 * $ribbon-halfheight;
     letter-spacing: 1px;

src/modules/map/components/footer/MapFooterAppCopyright.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/scss/variables-admin';
+@import 'src/scss/variables-admin.module';
 a {
     color: $black;
     text-decoration: initial;

src/modules/map/components/openlayers/OpenLayersHighlightedFeatures.vue

@@ -7,7 +7,7 @@
 import explode from '@turf/explode'
 import { point } from '@turf/helpers'
 import nearestPoint from '@turf/nearest-point'
-import Feature from 'ol/Feature'
+import { Feature } from 'ol'
 import GeoJSON from 'ol/format/GeoJSON'
 import proj4 from 'proj4'
 import { computed, inject, watch } from 'vue'
@@ -29,6 +29,7 @@ const selectedFeatures = computed(() => store.state.features.selectedFeatures)
 const isCurrentlyDrawing = computed(() => store.state.ui.showDrawingOverlay)
 const isFloatingTooltip = computed(() => store.state.ui.floatingTooltip)
 const projection = computed(() => store.state.position.projection)
+const highlightedFeatureId = computed(() => store.state.features.highlightedFeatureId)
 
 const editableFeatures = computed(() =>
     selectedFeatures.value.filter((feature) => feature.isEditable)
@@ -47,6 +48,8 @@ const featureTransformedAsOlFeatures = computed(() => {
         return new Feature({
             id: `geom-${randomIntBetween(0, 100000)}`,
             geometry: new GeoJSON().readGeometry(feature.geometry),
+            // flag that will be processed by the style function to change the color when the feature is hovered
+            isHovered: highlightedFeatureId.value === feature.id,
         })
     })
 })

src/modules/map/components/openlayers/utils/markerStyle.js

@@ -7,15 +7,57 @@ import circleImage from '@/modules/map/assets/circle.png'
 import crossImage from '@/modules/map/assets/cross.png'
 import markerImage from '@/modules/map/assets/marker.png'
 import pointImage from '@/modules/map/assets/point.png'
+import variables from '@/scss/variables-admin.module.scss'
+
+const { red, mocassin, mocassinToRed1, mocassinToRed2, white } = variables
+
+// OL needs color as RGBA arrays, so we convert them through this function
+function hexToRgba(hexValue, alpha = 1.0) {
+    return [
+        ...hexValue
+            .replaceAll('#', '')
+            .match(/.{1,2}/g)
+            .map((value) => parseInt(value, 16)),
+        alpha,
+    ]
+}
 
 // style for feature highlighting (we export it so that they can be re-used by OpenLayersHighlightedFeature)
 export const highlightedFill = new Fill({
-    color: [255, 255, 0, 0.75],
+    color: hexToRgba(mocassin, 0.6),
 })
 export const highlightedStroke = new Stroke({
-    color: [255, 128, 0, 1],
+    color: hexToRgba(mocassinToRed2, 1.0),
+    width: 3,
+})
+
+export const hoveredFill = new Fill({
+    color: hexToRgba(mocassinToRed1, 0.8),
+})
+export const hoveredStroke = new Stroke({
+    color: hexToRgba(red, 1.0),
     width: 3,
 })
+
+export const hoveredLinePolygonStyle = new Style({
+    fill: hoveredFill,
+    stroke: hoveredStroke,
+    // always on top (in case there's an overlap with another selected feature)
+    zIndex: 9999,
+})
+export const hoveredPointStyle = new Style({
+    image: new CircleStyle({
+        radius: 10,
+        fill: hoveredFill,
+        stroke: hoveredStroke,
+    }),
+    // always on top (in case there's an overlap with another selected feature)
+    zIndex: 9999,
+})
+export const highlightedLinePolygonStyle = new Style({
+    fill: highlightedFill,
+    stroke: highlightedStroke,
+})
 export const highlightPointStyle = new Style({
     image: new CircleStyle({
         radius: 10,
@@ -24,6 +66,19 @@ export const highlightPointStyle = new Style({
     }),
 })
 
+export const geolocationPointStyle = new Style({
+    image: new CircleStyle({
+        radius: 15,
+        fill: new Fill({
+            color: hexToRgba(red, 0.9),
+        }),
+        stroke: new Stroke({
+            color: hexToRgba(white, 1.0),
+            width: 3,
+        }),
+    }),
+})
+
 /** @enum */
 export const OpenLayersMarkerStyles = {
     BALLOON: 'balloon',
@@ -59,19 +114,7 @@ function imageForMarkerStyle(markerStyle) {
 export function getMarkerStyle(markerStyle) {
     switch (markerStyle) {
         case OpenLayersMarkerStyles.POSITION:
-            // style for geolocation point
-            return new Style({
-                image: new CircleStyle({
-                    radius: 5,
-                    fill: new Fill({
-                        color: [255, 0, 0, 0.9],
-                    }),
-                    stroke: new Stroke({
-                        color: [255, 255, 255, 1],
-                        width: 3,
-                    }),
-                }),
-            })
+            return geolocationPointStyle
 
         case OpenLayersMarkerStyles.BALLOON:
             return new Style({
@@ -107,23 +150,18 @@ export function getMarkerStyle(markerStyle) {
 
 export function highlightFeatureStyle(olFeature) {
     const geometryType = olFeature.get('geometry').getType()
+    const isHovered = !!olFeature.get('isHovered')
     switch (geometryType) {
         case 'LineString':
         case 'MultiLineString':
-            return new Style({
-                stroke: highlightedStroke,
-            })
         case 'Polygon':
         case 'MultiPolygon':
         case 'Circle':
         case 'GeometryCollection':
-            return new Style({
-                stroke: highlightedStroke,
-                fill: highlightedFill,
-            })
+            return isHovered ? hoveredLinePolygonStyle : highlightedLinePolygonStyle
         case 'Point':
         case 'MultiPoint':
-            return highlightPointStyle
+            return isHovered ? hoveredPointStyle : highlightPointStyle
         default:
             return null
     }

src/scss/variables-admin.scss → src/scss/variables-admin.module.scss

@@ -48,3 +48,17 @@ $admin-icons: 'Admin Icons';
 //=============================================================================
 $focus-outline-size: 3px;
 $focus-outline: $focus-outline-size solid $malibu;
+
+// 2 passing colors were picked through this tool (using mocassin and red as start and end)
+// https://www.vis4.net/palettes/#/4|s|fffab2,ffff35,f7001d|ffffe0,ff005e,93003a|1|1
+$mocassin-to-red-1: #ffc248;
+$mocassin-to-red-2: #ff7e29;
+
+:export {
+  white: #{$white};
+  red: #{$red};
+  mocassin: #{$mocassin};
+  mocassinToRed1: #{$mocassin-to-red-1};
+  mocassinToRed2: #{$mocassin-to-red-2};
+  venetianRed: #{$venetian-red};
+}

src/scss/webmapviewer-bootstrap-theme.scss

@@ -1,5 +1,5 @@
 @import 'src/scss/variables';
-@import 'src/scss/variables-admin';
+@import 'src/scss/variables-admin.module';
 
 // Override bootstrap variables here
 $card-cap-padding-y: 0.25rem;

src/store/index.js

@@ -66,11 +66,8 @@ const store = createStore({
         share,
         cesium,
         print,
+        debug,
     },
 })
 
-if (store.getters.hasDevSiteWarning) {
-    store.registerModule('debug', debug)
-}
-
 export default store

src/store/modules/features.store.js

@@ -9,6 +9,7 @@ export default {
     state: {
         /** @type Array<SelectableFeature> */
         selectedFeatures: [],
+        highlightedFeatureId: null,
     },
     getters: {
         editFeature(state) {
@@ -26,13 +27,24 @@ export default {
          *   the map
          */
         setSelectedFeatures({ commit }, features) {
+            commit('setHighlightedFeatureId', {
+                highlightedFeatureId: null,
+                dispatcher: 'setSelectedFeatures',
+            })
             if (Array.isArray(features)) {
                 commit('setSelectedFeatures', features)
             }
         },
         /** Removes all selected features from the map */
         clearAllSelectedFeatures({ commit }) {
             commit('setSelectedFeatures', [])
+            commit('setHighlightedFeatureId', {
+                highlightedFeatureId: null,
+                dispatcher: 'clearAllSelectedFeatures',
+            })
+        },
+        setHighlightedFeatureId({ commit }, { highlightedFeatureId = null, dispatcher }) {
+            commit('setHighlightedFeatureId', { highlightedFeatureId, dispatcher })
         },
         /** Removes a specific feature from the selected features list. Is not used in drawing mode. */
         removeSelectedFeature({ commit, state }, feature) {
@@ -223,6 +235,9 @@ export default {
         setSelectedFeatures(state, features) {
             state.selectedFeatures = [...features]
         },
+        setHighlightedFeatureId(state, { highlightedFeatureId }) {
+            state.highlightedFeatureId = highlightedFeatureId
+        },
         changeFeatureCoordinates(state, { feature, coordinates, geodesicCoordinates }) {
             feature.coordinates = coordinates
             feature.geodesicCoordinates = geodesicCoordinates