@kalisio/kdk 2.2.0 → 2.2.2

package/map/client/components/KLayerStyleForm.vue

@@ -555,18 +555,22 @@ export default {
       this.fillBaseStyle(values)
       // Clustering
       this.fillClusteringStyle(values)
-      // Points
-      await this.fillIconStyles(values)
-      // Lines
-      await this.fillLineStyles(values)
-      // Polygons
-      await this.fillPolygonStyles(values)
-      // Popup
-      await this.fillPopupStyles(values)
-      // Tooltip
-      await this.fillTooltipStyles(values)
-      // Infobox
-      await this.fillInfoBoxStyles(values)
+      if (this.isVectorLayer) {
+        // Points
+        await this.fillIconStyles(values)
+        // Lines
+        await this.fillLineStyles(values)
+        // Polygons
+        await this.fillPolygonStyles(values)
+      }
+      if (this.hasFeatureSchema) {
+        // Popup
+        await this.fillPopupStyles(values)
+        // Tooltip
+        await this.fillTooltipStyles(values)
+        // Infobox
+        await this.fillInfoBoxStyles(values)
+      }
     },
     validate () {
       const values = this.values()
@@ -640,18 +644,22 @@ export default {
       _.merge(values, this.baseValues())
       // Clustering
       _.merge(values, this.clusteringValues())
-      // Point style
-      _.mergeWith(values, this.iconStylesValues(), customizer)
-      // Line style
-      _.mergeWith(values, this.lineStylesValues(), customizer)
-      // Polygon style
-      _.mergeWith(values, this.polygonStylesValues(), customizer)
-      // Popup style
-      _.merge(values, this.popupStylesValues())
-      // Tooltip style
-      _.merge(values, this.tooltipStylesValues())
-      // Infobox style
-      _.merge(values, this.infoBoxStylesValues())
+      if (this.isVectorLayer) {
+        // Point style
+        _.mergeWith(values, this.iconStylesValues(), customizer)
+        // Line style
+        _.mergeWith(values, this.lineStylesValues(), customizer)
+        // Polygon style
+        _.mergeWith(values, this.polygonStylesValues(), customizer)
+      }
+      if (this.hasFeatureSchema) {
+        // Popup style
+        _.merge(values, this.popupStylesValues())
+        // Tooltip style
+        _.merge(values, this.tooltipStylesValues())
+        // Infobox style
+        _.merge(values, this.infoBoxStylesValues())
+      }
       return values
     },
     async onAddIconStyle (property) {

package/map/client/components/KTimezoneMap.vue

@@ -11,7 +11,6 @@ import { api, utils as kCoreUtils } from '../../../core/client'
 import * as mapMixins from '../mixins/map'
 import * as mixins from '../mixins'
 import { useCatalog, useCurrentActivity } from '../composables'
-import { createMarkerFromPointStyle } from '../leaflet/utils/index.js'
 import meta from 'moment-timezone/data/meta/latest.json'
 
 // Convert timezones to GeoJson
@@ -73,9 +72,9 @@ export default {
         this.addLayer(layers[0])
       }
     },
-    getTimezoneMarker (feature, latlng) {
+    getTimezoneMarker (feature, options) {
       const isSelected = (this.timezone === feature.properties.name)
-      return createMarkerFromPointStyle(latlng, {
+      return {
         shape: 'circle',
         color: 'primary',
         opacity: isSelected ? 1 : 0.5,
@@ -84,7 +83,7 @@ export default {
           color: 'dark',
           width: isSelected ? 3 : 1
         }
-      })
+      }
     },
     getTimezoneTooltip (feature, layer) {
       const name = _.get(feature, 'properties.name')

package/map/client/components/catalog/KConnectLayer.vue

@@ -239,11 +239,13 @@ export default {
           newLayer.cesium.parameters.styles = style
           // add legend url if available in the picked style
           const legendUrl = _.get(this.layer.styles, [style, 'legend'])
-          if (legendUrl) newLayer.legend = {
-            type: 'image',
-            label: newLayer.name,
-            content: {
-              src: legendUrl
+          if (legendUrl) {
+            newLayer.legend = {
+              type: 'image',
+              label: newLayer.name,
+              content: {
+                src: legendUrl
+              }
             }
           }
         }
@@ -303,11 +305,13 @@ export default {
 
         // add legend url if available in the style
         const legendUrl = _.get(this.layer.styles, [style, 'legend'])
-        if (legendUrl) newLayer.legend = {
-          type: 'image',
-          label: newLayer.name,
-          content: {
-            src: legendUrl
+        if (legendUrl) {
+          newLayer.legend = {
+            type: 'image',
+            label: newLayer.name,
+            content: {
+              src: legendUrl
+            }
           }
         }
       } else if (this.service.protocol === 'TMS') {

package/map/client/components/legend/KColorScaleLegend.vue

@@ -4,10 +4,10 @@
     :label="label"
   >
     <!-- content -->
-    <div class="q-pa-sm">
+    <div class="q-pa-xs">
       <KColorScale
         v-bind="content"
-        style="height: 44px;"
+        :style="`height: ${height}px;`"
       />
     </div>
   </KLegendRenderer>
@@ -26,6 +26,10 @@ defineProps({
   content: {
     type: Object,
     default: () => null
+  },
+  height: {
+    type: Number,
+    default: () => 40
   }
 })
 </script>

package/map/client/components/legend/KLayerLegend.vue

@@ -45,15 +45,25 @@ const legends = computed(() => {
   layerLegends.forEach(legend => {
     const minZoom = _.get(legend, 'minZoom', _.get(props.layer, `${props.engine}.minZoom`, 0))
     const maxZoom = _.get(legend, 'maxZoom', _.get(props.layer, `${props.engine}.maxZoom`, 99))
-    if (props.zoom >= minZoom && props.zoom <= maxZoom) {
+    // Check for valid number on min/max zoom level as we might set it to false/null to indicate
+    // there is none and we should use defaults
+    const hasMinZoom = _.isNumber(minZoom)
+    const hasMaxZoom = _.isNumber(maxZoom)
+    const inMinZoomRange = (hasMinZoom ? props.zoom >= minZoom : true)
+    const inMaxZoomRange = (hasMaxZoom ? props.zoom <= maxZoom : true)
+    if (inMinZoomRange && inMaxZoomRange) {
       logger.debug(`[KDK] Register '${props.layer.name}'`)
       const renderer = props.renderers[legend.type]
       if (!renderer) {
         logger.warn(`[KDK] Cannot find any renderer for the layer's legend of type of ${legend.type}`)
         return
       }
-      legend.renderer = coreUtils.loadComponent(renderer)
-      result.push(legend)
+      result.push({
+        layer: props.layer,
+        label: legend.label,
+        content: legend.content,
+        renderer: coreUtils.loadComponent(renderer)
+      })
     }
   })
   return result

package/map/client/components/legend/KLegend.vue

@@ -21,7 +21,7 @@
           </q-item-section>
           <!-- Helper -->
           <q-item-section v-if="sublegend.helper" side >
-            <k-action
+            <KAction
               :id="sublegend.name + '-helper'"
               color="primary"
               :propagate="false"
@@ -51,16 +51,12 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
 import { ref, computed, watch } from 'vue'
-import { i18n, api } from '../../../../core/client'
-import { useCurrentActivity } from '../../composables'
+import { i18n, Store } from '../../../../core/client'
+import { useCurrentActivity, useCatalog } from '../../composables'
 import KLayerLegend from './KLayerLegend.vue'
 
 // Props
 const props = defineProps({
-  contextOrId: {
-    type: String,
-    default: undefined
-  },
   headerClass: {
     type: String,
     default: 'bg-grey-3 text-weight-regular'
@@ -90,6 +86,11 @@ const props = defineProps({
   }
 })
 
+// Use global catalog
+const { getSublegends } = useCatalog()
+// Use local catalog if any
+const { getSublegends: getContextSublegends } = useCatalog({ context: Store.get('context') })
+
 // Data
 const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
 const sublegends = ref([])
@@ -150,9 +151,10 @@ function getHelperDialog (helper) {
 watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
   // Retrieve the legends from catalog if required
   if (props.sublegendsFromCatalog) {
-    const catalogService = api.getService('catalog', props.contextOrId)
-    const response = await catalogService.find({ query: { type: 'Sublegend' } })
-    sublegends.value = response.data
+    sublegends.value = await getSublegends()
+    if (Store.get('context')) {
+      sublegends.value = sublegends.value.concat(await getContextSublegends())
+    }
   } else {
     sublegends.value = []
   }

package/map/client/components/location/KLocationCardSection.vue

@@ -32,10 +32,10 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import { ref, watch } from 'vue'
 import KLocationMap from './KLocationMap.vue'
 
-// props
+// Props
 const props = defineProps({
   location: {
     type: Object,
@@ -55,7 +55,11 @@ const props = defineProps({
   }
 })
 
-// data
-const { location: feature } = toRefs(props)
+// Data
+const feature = ref(null)
 
+// Watch
+watch(() => props.location, (value) => {
+  feature.value = value
+}, { immediate: true })
 </script>

package/map/client/components/widget/KTimeSeries.vue

@@ -374,12 +374,6 @@ export default {
       const feature = (isWeatherProbe
         ? this.getProbedLocationForecastAtCurrentTime(this.probedLocation)
         : this.getProbedLocationMeasureAtCurrentTime(this.probedLocation))
-      if (isWeatherProbe) {
-        const tooltip = this.getForecastAsHtml(feature)
-        if (tooltip) _.set(feature, 'properties.tooltip', { html: `<b>${tooltip}</b>` })
-        const options = this.getWindBarbOptions(feature)
-        if (options) _.set(feature, 'properties.icon', { type: 'WindBarb.icon', options })
-      }
       this.highlight(feature, this.layer)
     },
     onZoomRestored () {

package/map/client/composables/catalog.js

@@ -10,6 +10,7 @@ export function useCatalog (options = {}) {
     // Default filter queries
     layers: {},
     categories: {},
+    sublegends: {},
     views: {},
     // Default to global catalog
     context: '',
@@ -20,6 +21,7 @@ export function useCatalog (options = {}) {
   // Data
   const layers = ref([])
   const categories = ref([])
+  const sublegends = ref([])
   const views = ref([])
 
   // Computed
@@ -27,9 +29,12 @@ export function useCatalog (options = {}) {
   const orphanLayers = computed(() => catalog.getOrphanLayers(layers.value, layersByCategory.value))
 
   // Functions
-  async function getLayers () {
+  async function getLayers (filterQuery = {}) {
+    const query = Object.assign({},
+      options.project ? Object.assign(getCatalogProjectQuery(options.project), options.layers) : options.layers,
+      filterQuery)
     layers.value = await catalog.getLayers({
-      query: options.project ? Object.assign(getCatalogProjectQuery(options.project), options.layers) : options.layers,
+      query,
       context: options.context,
       planetApi: options.planetApi
     })
@@ -43,6 +48,14 @@ export function useCatalog (options = {}) {
     })
     return categories.value
   }
+  async function getSublegends () {
+    sublegends.value = await catalog.getSublegends({
+      query: options.sublegends,
+      context: options.context,
+      planetApi: options.planetApi
+    })
+    return sublegends.value
+  }
   async function getViews () {
     views.value = await catalog.getViews({
       query: options.project ? Object.assign(getCatalogProjectQuery(options.project), options.views) : options.views,
@@ -56,11 +69,13 @@ export function useCatalog (options = {}) {
   return {
     layers,
     categories,
+    sublegends,
     layersByCategory,
     orphanLayers,
     views,
     getLayers,
     getCategories,
+    getSublegends,
     getViews
   }
 }

package/map/client/composables/highlight.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import config from 'config'
 import bbox from '@turf/bbox'
 import bboxPolygon from '@turf/bbox-polygon'
-import { uid, getCssVar } from 'quasar'
+import { uid } from 'quasar'
 import { unref, onUnmounted } from 'vue'
 import { getFeatureId, getFeatureStyleType } from '../utils.js'
 import * as composables from '../../../core/client/composables/index.js'
@@ -60,15 +60,6 @@ export function useHighlight (name, options = {}) {
   function getHighlight (feature, layer) {
     return get(getHighlightId(feature, layer))
   }
-  function convertColors (highlight) {
-    // Convert from quasar color palette to actual color
-    _.forOwn(highlight.properties, (value, key) => {
-      if (key.endsWith('-color')) {
-        const color = getCssVar(value)
-        if (color) _.set(highlight, `properties.${key}`, color)
-      }
-    })
-  }
   function highlight (feature, layer, selected = true) {
     const highlightId = getHighlightId(feature, layer)
     // Define default highlight feature
@@ -90,9 +81,11 @@ export function useHighlight (name, options = {}) {
       Object.assign(highlight, bboxPolygon(bbox(highlight)))
     }
     // Assign style
-    if (activity.is2D()) {
-      if (selected) {
-        let highlightStyle = _.get(config, `engines.${activity.engine}.style.selection`)[getFeatureStyleType(highlight)]
+    if (selected) {
+      // Do not alter config object
+      const selectionStylePath = `engines.${activity.engine}.style.selection.${getFeatureStyleType(highlight)}`
+      let highlightStyle = _.cloneDeep(_.get(config, selectionStylePath, {}))
+      if (activity.is2D()) {
         // adapt the size to the marker using feature style
         let size = _.get(feature, 'style.size')
         if (size) {
@@ -112,28 +105,14 @@ export function useHighlight (name, options = {}) {
           }
         }
         if (size) Object.assign(highlightStyle, { size: [size[0] + 8, size[1] + 8] }) 
-        Object.assign(highlight, { style: highlightStyle })
-      } else {
-        // retrieve feature sytle
-        Object.assign(highlight, { style: feature.style })
       }
+      Object.assign(highlight, { style: highlightStyle })
     } else {
-      // 3D TODO: to be updated when swithing globe to new style
-      Object.assign(highlight, { 
-        properties: {
-          geodesic: true, // In 3D we use a circle on ground
-          radius: 1000,
-          'stroke-color': getCssVar('secondary'),
-          'stroke-width': 3,
-          'fill-color': getCssVar('secondary'),
-          'fill-opacity': 0.5
-        }
-      }, options)
+      // retrieve feature sytle
+      Object.assign(highlight, { style: feature.style })
     }
     // Add additional information provided by feature, if any, for custom styling
     _.merge(highlight, _.omit(feature, ['geometry', 'style']))
-    // TODO: to be removed when swithing globe to new style
-    if (activity.is3D()) convertColors(highlight)
     set(highlightId, highlight)
     updateHighlightsLayer()
     return highlight

package/map/client/composables/probe.js

@@ -67,7 +67,10 @@ export function useProbe (name, options = {}) {
 
   let lastClickedPosition
   function onClicked (layer, event) {
-    if (!isProbing()) return
+    if (!isProbing()) {
+      if (get('item')) clearProbe()
+      return
+    }
     // FIXME: For some layers, eg based on path, we get a first click with the layer as target
     // then a second click with the map as target, we need to filter the later for selection
     const containerPosition = _.get(event, 'containerPoint')

package/map/client/composables/weather.js

@@ -185,7 +185,7 @@ export function useWeather (options = {}) {
       forceDir: true
     }
   }
-  function createWindBarbMarker (feature) {
+  function createWindBarbIcon (feature) {
     const options = getWindBarbOptions(feature)
     return (options ? new L.WindBarb.Icon(getWindBarbOptions(feature)) : null)
   }
@@ -195,7 +195,7 @@ export function useWeather (options = {}) {
   }
   function getProbedLocationForecastMarker (feature, latlng, options) {
     // Use wind barbs on probed features
-    const icon = createWindBarbMarker(feature)
+    const icon = createWindBarbIcon(feature)
     return (icon ? L.marker(latlng, { icon }) : null)
   }
 
@@ -205,7 +205,7 @@ export function useWeather (options = {}) {
     isWeatherProbe,
     getForecastAsHtml,
     getWindBarbOptions,
-    createWindBarbMarker,
+    createWindBarbIcon,
     getProbedLocationForecastAtCurrentTime,
     getProbedLocationForecastTooltip,
     getProbedLocationForecastMarker

package/map/client/i18n/map_en.json

@@ -35,6 +35,10 @@
       "REMOVING_LABEL": "Please wait while removing layer data",
       "REMOVE_DIALOG_TITLE": "Remove {layer} ?",
       "REMOVE_DIALOG_MESSAGE": "Are you sure you want to remove <b>{layer}</b> from your workspace ?"
+    },
+    "capture": {
+      "CAPTURE_PDF_FILE": "capture_{time}.pdf",
+      "CAPTURE_IMAGE_FILE": "capture_{time}.png"
     }
   },
   "mixins": {

package/map/client/i18n/map_fr.json

@@ -35,6 +35,10 @@
       "REMOVING_LABEL": "Veuillez patienter pendant la suppression des données",
       "REMOVE_DIALOG_TITLE": "Supprimer {layer} ?",
       "REMOVE_DIALOG_MESSAGE": "Etes vous sûr de vouloir supprimer {layer} de votre espace de travail ?"
+    },
+    "capture": {
+      "CAPTURE_PDF_FILE": "impression_{time}.pdf",
+      "CAPTURE_IMAGE_FILE": "impression_{time}.png"
     }
   },
   "mixins": {

package/map/client/leaflet/ShapeMarker.js

@@ -7,22 +7,33 @@ export const ShapeMarker = L.Marker.extend({
 
   // Constructor
   initialize (latlng, options) {
-    const shape = coreUtils.createShape(options)
-    if (shape) {
+    // Forward extra options for different purposes, i.e. clustering, panes, ...
+    const markerOptions = _.get(options, 'options', {})
+    // We allow to specify panes directly at root level
+    Object.assign(markerOptions, _.pick(options, ['pane', 'shadowPane']))
+    if (options.icon instanceof L.Icon) { // We allow to directly provide the icon
       L.Marker.prototype.initialize.call(this, latlng, {
-        icon: L.divIcon({
-          iconSize: [shape.width, shape.height],
-          iconAnchor: this.getAnchor(shape.anchor, shape.size),
-          popupAnchor: [0, -shape.height / 2],
-          html: shape.html,
-          className: ''
-        }),
-        // forward extra options for different purposes, i.e. clustering
-        ..._.get(options, 'options', {})  
+        icon: options.icon,
+        ...markerOptions
       })
     } else {
-      logger.warn(`[KDK] unable to create the shape with the options: ${options}` )
+      const shape = coreUtils.createShape(options)
+      if (shape) {
+        L.Marker.prototype.initialize.call(this, latlng, {
+          icon: L.divIcon({
+            iconSize: [shape.size.width, shape.size.height],
+            iconAnchor: this.getAnchor(shape.anchor, shape.size),
+            popupAnchor: [0, -shape.size.height / 2],
+            html: shape.html,
+            className: ''
+          }),
+          ...markerOptions
+        })
+      } else {
+        logger.warn(`[KDK] unable to create the shape with the options: ${options}` )
+      }
     }
+    
   },
 
   getAnchor (position, size) {

package/map/client/leaflet/TiledFeatureLayer.js

@@ -18,6 +18,7 @@ const TiledFeatureLayer = L.GridLayer.extend({
     this.userIsDragging = false
     this.userIsZooming = false
     this.pendingStationUpdates = []
+    this.pendingRequests = []
 
     this.getFeatureKey = (feature) => {
       return getFeatureId(feature, this.layer)
@@ -60,18 +61,18 @@ const TiledFeatureLayer = L.GridLayer.extend({
   getEvents () {
     const events = L.GridLayer.prototype.getEvents.call(this)
 
-    // dragstart sets userIsDragging flag
-    const onDragStart = events.dragstart
-    events.dragstart = (event) => {
+    // movestart sets userIsDragging flag
+    const onMoveStart = events.movestart
+    events.movestart = (event) => {
       this.userIsDragging = true
-      if (onDragStart) onDragStart.call(this, event)
+      if (onMoveStart) onMoveStart.call(this, event)
     }
 
-    // dragstart clears userIsDragging flag
-    const onDragEnd = events.dragend
-    events.dragend = (event) => {
+    // moveend clears userIsDragging flag
+    const onMoveEnd = events.moveend
+    events.moveend = (event) => {
       this.userIsDragging = false
-      if (onDragEnd) onDragEnd.call(this, event)
+      if (onMoveEnd) onMoveEnd.call(this, event)
     }
 
     // zoomstart records zoomStartLevel
@@ -269,6 +270,9 @@ const TiledFeatureLayer = L.GridLayer.extend({
   _update (center) {
     L.GridLayer.prototype._update.call(this)
 
+    // cleanup pending requests, ie only keep those still pending
+    this.pendingRequests = this.pendingRequests.filter((r) => r.status.pending)
+
     // No update while dragging
     if (this.userIsDragging) return
 
@@ -370,7 +374,13 @@ const TiledFeatureLayer = L.GridLayer.extend({
         if (this.enableDebug) tile.div.innerHTML += '</br>features request issued'
       })
 
+      // keep track of pending request
+      promise.status = { cancelled: false, pending: true }
+      this.pendingRequests.push(promise)
+
       promise.then((data) => {
+        if (promise.status.cancelled) return
+
         // Gather all associated tiles, taking children tiles into account
         const allTiles = [r.tiles]
         r.tiles.forEach((tile) => { if (tile.featuresChildren.length) allTiles.push(tile.featuresChildren) })
@@ -424,6 +434,8 @@ const TiledFeatureLayer = L.GridLayer.extend({
 
         if (this.enableDebug) logger.debug(`TiledFeatureLayer: allFeatures is ${this.allFeatures.size} long`)
       }).catch((err) => {
+        if (promise.status.cancelled) return
+
         // Gather all associated tiles, taking children tiles into account
         const allTiles = [r.tiles]
         r.tiles.forEach((tile) => { if (tile.featuresChildren.length) allTiles.push(tile.featuresChildren) })
@@ -440,6 +452,8 @@ const TiledFeatureLayer = L.GridLayer.extend({
         })
 
         if (this.enableDebug) logger.debug(`TiledFeatureLayer: allFeatures is ${this.allFeatures.size} long`)
+      }).finally(() => {
+        promise.status.pending = false
       })
     })
 
@@ -455,9 +469,15 @@ const TiledFeatureLayer = L.GridLayer.extend({
         if (this.enableDebug) tile.div.innerHTML += '</br>measures request issued'
       })
 
+      // keep track of pending request
+      promise.status = { cancelled: false, pending: true }
+      this.pendingRequests.push(promise)
+
       // When stations are fetched, we flag them with a 'measureRequestIssued' property that we
       // may use in dynamic styling
       Promise.all(stationPromises).then(() => {
+        if (promise.status.cancelled) return
+
         const flaggedStations = []
         r.tiles.forEach((tile) => {
           tile.features.forEach((id) => {
@@ -473,6 +493,8 @@ const TiledFeatureLayer = L.GridLayer.extend({
       })
 
       promise.then((data) => {
+        if (promise.status.cancelled) return
+
         // Gather all associated tiles, taking children tiles into account
         const allTiles = [r.tiles]
         r.tiles.forEach((tile) => { if (tile.measuresChildren.length) allTiles.push(tile.measuresChildren) })
@@ -498,6 +520,8 @@ const TiledFeatureLayer = L.GridLayer.extend({
           if (okMeasures.length) this.updateStations(featureCollection(okMeasures))
         })
       }).catch((err) => {
+        if (promise.status.cancelled) return
+
         const allTiles = [r.tiles]
         r.tiles.forEach((tile) => { if (tile.measuresChildren.length) allTiles.push(tile.measuresChildren) })
         const tiles = allTiles.flat()
@@ -508,6 +532,8 @@ const TiledFeatureLayer = L.GridLayer.extend({
             tile.div.innerHTML += `</br>measures request failed: ${err}`
           }
         })
+      }).finally(() => {
+        promise.status.pending = false
       })
     })
 
@@ -564,6 +590,10 @@ const TiledFeatureLayer = L.GridLayer.extend({
 
     this.pendingStationUpdates.length = 0
 
+    // 'cancel' all pending requests so we'll ignore their results
+    // when they'll finish (see _update)
+    this.pendingRequests.forEach((r) => { r.status.cancelled = true })
+
     // request grid layer redraw
     L.GridLayer.prototype.redraw.call(this)
   }