@kalisio/kdk 2.6.3 → 2.7.0

package/map/client/components/form/KSelectLayersField.vue

@@ -40,7 +40,7 @@
 
 <script>
 import _ from 'lodash'
-import { Store, mixins as kCoreMixins } from '../../../../core/client'
+import { Context, api, mixins as kCoreMixins } from '../../../../core/client'
 import { useCatalog } from '../../composables'
 
 export default {
@@ -123,7 +123,7 @@ export default {
   mounted () {
     this.getLayers()
     this.getCategories()
-    if (Store.get('context')) {
+    if (typeof this.getContextLayers === 'function') {
       this.getContextLayers()
       this.getContextCategories()
     }
@@ -132,28 +132,39 @@ export default {
     // Use global catalog
     const { layers, getLayers, categories, getCategories, layersByCategory, orphanLayers } =
       useCatalog({ context: 'global' })
-    // Use local catalog if any
-    const {
-      layers: contextLayers, getLayers: getContextLayers, categories: contextCategories, getCategories: getContextCategories,
-      layersByCategory: contextLayersByCategory, orphanLayers: orphanContextLayers
-    } =
-      useCatalog({ context: Store.get('context') })
-
     // Expose
-    return {
+    const expose = {
       layersByCategory,
       orphanLayers,
       layers,
       getLayers,
       categories,
-      getCategories,
-      contextLayersByCategory,
-      orphanContextLayers,
-      contextLayers,
-      getContextLayers,
-      contextCategories,
-      getContextCategories
+      getCategories
+    }
+    // Use local catalog if any
+    if (Context.get() && api.hasService('catalog', Context.get())) {
+      const {
+        layers: contextLayers, getLayers: getContextLayers, categories: contextCategories, getCategories: getContextCategories,
+        layersByCategory: contextLayersByCategory, orphanLayers: orphanContextLayers
+      } = useCatalog({ context: Context.get() })
+      Object.assign(expose, {
+        contextLayersByCategory,
+        orphanContextLayers,
+        contextLayers,
+        getContextLayers,
+        contextCategories,
+        getContextCategories
+      })
+    } else {
+      Object.assign(expose, {
+        contextLayersByCategory: {},
+        orphanContextLayers: [],
+        contextLayers: [],
+        contextCategories: []
+      })
     }
+
+    return expose
   }
 }
 </script>

package/map/client/components/form/KSelectViewsField.vue

@@ -49,7 +49,7 @@
 
 <script>
 import _ from 'lodash'
-import { Store, mixins as kCoreMixins } from '../../../../core/client'
+import { Context, api, mixins as kCoreMixins } from '../../../../core/client'
 import { useCatalog } from '../../composables'
 
 export default {
@@ -99,23 +99,32 @@ export default {
   },
   mounted () {
     this.getViews()
-    if (Store.get('context')) {
+    if (typeof this.getContextViews === 'function') {
       this.getContextViews()
     }
   },
   setup (props) {
     // Use global catalog
     const { views, getViews } = useCatalog({ context: 'global' })
-    // Use local catalog
-    const { views: contextViews, getViews: getContextViews } = useCatalog({ context: Store.get('context') })
-
     // Expose
-    return {
+    const expose = {
       views,
-      getViews,
-      contextViews,
-      getContextViews
+      getViews
     }
+    // Use local catalog if any
+    if (Context.get() && api.hasService('catalog', Context.get())) {
+      const { views: contextViews, getViews: getContextViews } = useCatalog({ context: Context.get() })
+      Object.assign(expose, {
+        contextViews,
+        getContextViews
+      })
+    } else {
+      Object.assign(expose, {
+        contextViews: []
+      })
+    }
+
+    return expose
   }
 }
 </script>

package/map/client/components/form/KTimezoneField.vue

@@ -10,6 +10,7 @@
         v-model="model"
         :label="label"
         :options="options"
+        clearable
         use-input
         hide-dropdown-icon
         @update:model-value='onChanged'
@@ -116,8 +117,6 @@ export default {
       this.$refs.timezoneMapModal.close()
       if (fill) {
         this.fill(this.mapTimezone)
-        // Seems to be required to correctly update the label in the q-select
-        await this.$nextTick()
       }
     },
     onAutocomplete (value, update) {

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

@@ -22,6 +22,7 @@ import logger from 'loglevel'
 import { computed } from 'vue'
 import { i18n } from '../../../../core/client'
 import { Units } from '../../../../core/client/units'
+import { useCurrentActivity } from '../../composables'
 import { KColorScale } from '../../../../core/client/components'
 import KLegendRenderer from './KLegendRenderer.vue'
 
@@ -41,6 +42,9 @@ const props = defineProps({
   }
 })
 
+// Data
+const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
+
 // Computed
 const variables = computed(() => {
   const regexp = new RegExp(props.content)
@@ -54,9 +58,14 @@ const variables = computed(() => {
     .map(variable => {
       // Pick useful properties
       let { name, label, chromajs, unit } = _.pick(variable, ['name', 'label', 'chromajs', 'unit'])
+      // We allow variable name to be customized based on level information
+      label = _.template(i18n.tie(label))({
+        level: (CurrentActivity.value ? CurrentActivity.value.selectedLevel : null),
+        levelUnit: (CurrentActivity.value && CurrentActivity.value.selectableLevels ? CurrentActivity.value.selectableLevels.unit : '')
+      })
       // Avoid mutating layer data
       const colorScale = _.cloneDeep(chromajs)
-      label = `${i18n.tie(label)} (${Units.getTargetUnitSymbol(unit)})`
+      label = `${label} (${Units.getTargetUnitSymbol(unit)})`
       // Rename required properties for backward compatibility
       if (colorScale.scale) {
         colorScale.colors = colorScale.scale

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

@@ -9,7 +9,7 @@
     <div v-if="feature" class="full-width column">
       <!-- Description -->
       <KTextArea
-        :text="feature.properties[namePath]"
+        :text="locationName"
         :minHeight="24"
         :maxHeight="204"
         :dense="true"
@@ -40,7 +40,7 @@
 
 <script setup>
 import _ from 'lodash'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { utils as coreUtils } from '../../../../core.client'
 import KLocationMap from './KLocationMap.vue'
 import KLocationTip from './KLocationTip.vue'
@@ -68,6 +68,11 @@ const props = defineProps({
 // Data
 const feature = ref(null)
 
+// Computed
+const locationName = computed(() => {
+  return _.get(feature.value, `properties.${props.namePath}`)
+})
+
 // Watch
 watch(() => [props.item, props.locationPath], () => {
   if (_.get(props.item, 'type') === 'Feature') feature.value = _.cloneDeep(props.item)

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

@@ -17,10 +17,12 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import L from 'leaflet'
 import config from 'config'
+import sift from 'sift'
 import centroid from '@turf/centroid'
 import { KPanel } from '../../../../core/client/components'
 import { api } from '../../../../core/client/api.js'
 import { Store } from '../../../../core/client/store.js'
+import { Context } from '../../../../core/client/context.js'
 import * as mapMixins from '../../mixins/map'
 import { Geolocation } from '../../geolocation.js'
 import { useCatalog, useCurrentActivity } from '../../composables'
@@ -253,16 +255,26 @@ export default {
     async mapRefCreated (container) {
       if (container) {
         if (!this.mapReady) {
-          // setup the map
+          // Setup the map
           logger.debug('[KDK] Create location map with viewer options', this.engineOptions.viewer)
           this.setupMap(container, this.engineOptions.viewer)
           this.mapReady = true
           // setup base layer
-          const baseLayers = await this.getLayers({ type: 'BaseLayer' })
+          // We get layers coming from global catalog first if any
+          let baseLayers = await this.getLayers()
+          // Then we get layers coming from contextual catalog if any
+          if (typeof this.getContextLayers === 'function') baseLayers = baseLayers.concat(await this.getContextLayers())
           // [!] remember Vue won’t wait for async: use mapReady as a guard to
           // prevent executing the process after the component is destroyed
           // https://github.com/kalisio/kdk/issues/1291
-          if (this.mapReady && baseLayers.length > 0) await this.addLayer(baseLayers[0])
+          if (this.mapReady && (baseLayers.length > 0)) {
+            const defaultLayer = _.find(baseLayers, sift({ 'leaflet.isVisible': true }))
+            // If no default layer defined use the first one
+            const baseLayer = (defaultLayer || baseLayers[0])
+            await this.addLayer(baseLayer)
+            // Ensure it is visible if not by default
+            await this.showLayer(baseLayer.name)
+          }
           // setup location
           if (this.mapReady) this.refresh()
         }
@@ -291,16 +303,28 @@ export default {
     const project = getActivityProject()
     // We expect the project object to expose the underlying API
     const planetApi = project && typeof project.getPlanetApi === 'function' ? project.getPlanetApi() : api
-    // Use target catalog according to project and filtering options to get base layer
+    // Use target catalog(s) according to project and filtering options to get base layer
+    // Use global catalog
     const { getLayers } = useCatalog({
       project,
-      layers: { type: 'BaseLayer', 'leaflet.isVisible': true },
-      planetApi
+      layers: { type: 'BaseLayer' },
+      context: 'global'
     })
     // expose
-    return {
+    const expose = {
       getLayers
     }
+    // Use local catalog if any
+    if (Context.get() && planetApi.hasService('catalog', Context.get())) {
+      const { getLayers: getContextLayers } = useCatalog({
+        project,
+        layers: { type: 'BaseLayer' },
+        context: Context.get()
+      })
+      Object.assign(expose, { getContextLayers })
+    }
+
+    return expose
   }
 }
 </script>

package/map/client/components/selection/KSelectedLayerFeatures.vue

@@ -61,7 +61,7 @@ import { Dialog } from 'quasar'
 import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import bbox from '@turf/bbox'
-import { Store, i18n } from '../../../../core/client'
+import { Context, i18n } from '../../../../core/client'
 import { KView } from '../../../../core/client/components'
 import KLayerItem from '../catalog/KLayerItem.vue'
 import KStyleEditor from '../styles/KStyleEditor.vue'
@@ -282,7 +282,7 @@ function editSelectedFeatureProperties (feature) {
       layerId: props.item.layer._id,
       layerName: props.item.layer.name,
       featureId: feature._id,
-      contextId: Store.get('context')
+      contextId: Context.get()
     })
   })
 }

package/map/client/components/stickies/KZoomControl.vue

@@ -42,7 +42,7 @@ defineProps({
   },
   size: {
     type: String,
-    default: '10px',
+    default: '10px'
   },
   color: {
     type: String,

package/map/client/components/styles/KStyleManager.vue

@@ -58,6 +58,7 @@ import { useCurrentActivity } from '../../composables/activity.js'
 import { isLayerStyleEditable, editLayerStyle, updateLayerWithFiltersStyle } from '../../utils/utils.layers.js'
 import { editFeaturesStyle } from '../../utils/utils.features.js'
 import { getTagsFilterOptions } from '../../../../core/client/utils/utils.tags.js'
+import { kmlStyleSpecialProperties } from '../../utils/utils.style.js'
 import KGrid from '../../../../core/client/components/collection/KGrid.vue'
 import KFollower from '../../../../core/client/components/KFollower.vue'
 import KTagSelection from '../../../../core/client/components/tags/KTagSelection.vue'
@@ -216,7 +217,9 @@ function applyToSelection (styleToApply) {
           if (_.has(f, 'properties.entityStyle.wall')) geometryType = 'Polygon'
           else if (_.has(f, 'properties.entityStyle.corridor')) geometryType = 'Polygon'
         }
-        _.set(f, 'style', _.get(styleToApply, ['item', _.get(type, geometryType, 'point')], null))
+        const styleToKeep = _.pick(f.style, kmlStyleSpecialProperties)
+        const styleForGeometry = _.get(styleToApply, ['item', _.get(type, geometryType, 'point')], {})
+        _.set(f, 'style', _.merge({}, styleForGeometry, styleToKeep))
       })
       if (CurrentActivity.value.isInMemoryLayer(layer.layer)) {
         CurrentActivity.value.resetLayer(layer.layer)