@kalisio/kdk 2.5.2 → 2.6.0

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

@@ -50,9 +50,9 @@
 import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, computed, watch } from 'vue'
-import { api, i18n, Store } from '../../../../core/client'
+import { i18n } from '../../../../core/client'
 import { getLayersBySublegend } from '../../utils'
-import { useCurrentActivity, useCatalog } from '../../composables'
+import { useCurrentActivity } from '../../composables'
 import KLayerLegend from './KLayerLegend.vue'
 
 // Props
@@ -86,24 +86,13 @@ const props = defineProps({
   }
 })
 
-// Get current project for activity if any
-const { getActivityProject } = useCurrentActivity({ selection: false, probe: false })
-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
-const { getSublegends: getProjectSublegends } = useCatalog({ project, planetApi })
-// Use global catalog
-const { getSublegends } = useCatalog({ context: 'global' })
-// Use local catalog if any
-const { getSublegends: getContextSublegends } = useCatalog({ context: Store.get('context') })
-
 // Data
 const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
 const sublegends = ref([])
 const layers = ref([])
 const engine = ref()
 const zoom = ref()
+const requestRefresh = _.debounce(refresh, 300)
 
 // Computed
 const layersBySublegend = computed(() => getLayersBySublegend(layers.value, sublegends.value))
@@ -112,17 +101,13 @@ const layersBySublegend = computed(() => getLayersBySublegend(layers.value, subl
 watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
   // Retrieve the legends from catalog if required
   if (props.sublegendsFromCatalog) {
-    sublegends.value = await getSublegends()
-    if (project) {
-      sublegends.value = _.uniqBy(_.concat(sublegends.value, await getProjectSublegends()), 'name')
-    }
-    if (Store.get('context')) {
-      sublegends.value = _.uniqBy(_.concat(sublegends.value, await getContextSublegends()), 'name')
-    }
+    sublegends.value = await CurrentActivity.value.getCatalogSublegends()
   } else {
     sublegends.value = []
   }
-  sublegends.value = _.uniqBy(_.concat(sublegends.value, props.sublegends), 'name')
+  sublegends.value = _.orderBy(_.uniqBy(_.concat(sublegends.value, props.sublegends), 'name'), sublegend => {
+    return _.get(sublegend, 'order', 50)
+  })
   // register legend translations
   _.forEach(sublegends.value, legend => {
     if (legend.i18n) i18n.registerTranslation(legend.i18n)
@@ -131,9 +116,10 @@ watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
 watch(CurrentActivity, (newActivity, oldActivity) => {
   if (oldActivity) {
     // remove listeners
-    oldActivity.value.$engineEvents.off('zoomend', onZoomChanged)
-    oldActivity.value.$engineEvents.off('layer-shown', onShowLayer)
-    oldActivity.value.$engineEvents.off('layer-hidden', onHideLayer)
+    oldActivity.value.$engineEvents.off('zoomend', requestRefresh)
+    oldActivity.value.$engineEvents.off('layer-shown', requestRefresh)
+    oldActivity.value.$engineEvents.off('layer-hidden', requestRefresh)
+    oldActivity.value.$engineEvents.off('layer-filter-toggled', requestRefresh)
     // clear legend
     sublegends.value = []
     layers.value = []
@@ -144,38 +130,45 @@ watch(CurrentActivity, (newActivity, oldActivity) => {
     // setup legend
     engine.value = newActivity.engine
     zoom.value = newActivity.getCenter().zoomLevel
-    newActivity.getLayers().forEach((layer) => {
-      if (newActivity.isLayerVisible(layer.name)) {
-        onShowLayer(layer)
-      }
-    })
+    refresh()
     // install listeners
-    newActivity.$engineEvents.on('layer-shown', onShowLayer)
-    newActivity.$engineEvents.on('layer-hidden', onHideLayer)
-    newActivity.$engineEvents.on('zoomend', onZoomChanged)
+    newActivity.$engineEvents.on('layer-filter-toggled', requestRefresh)
+    newActivity.$engineEvents.on('layer-shown', requestRefresh)
+    newActivity.$engineEvents.on('layer-hidden', requestRefresh)
+    newActivity.$engineEvents.on('zoomend', requestRefresh)
   }
 }, { immediate: true })
 
 // Functions
-function onShowLayer (layer, engine) {
-  const layerLegend = layer.legend
-  // Check whether the layer has a legend
-  if (!layerLegend) return
-  // Check wehther the legend is already registered for that layer
-  if (_.find(layers.value, { name: layer.name })) {
-    logger.warn(`[KDK] Legend for ${layer.name} already resgistered`)
-    return
-  }
-  logger.debug(`[KDK] Register '${layer.name}' legend`)
-  layers.value.push(layer)
-}
-function onHideLayer (layer) {
-  if (!layer.legend) return
-  logger.debug(`[KDK] Unregister '${layer.name}' legend`)
-  _.remove(layers.value, { name: layer.name })
-}
-function onZoomChanged () {
+function refresh () {
+  if (!CurrentActivity.value) return
+  logger.debug('[KDK] Refreshing legend')
+  // set the current zoom
   zoom.value = CurrentActivity.value.getCenter().zoomLevel
+  // set the layers for which it is required to display a legend
+  const iterator = {
+    layers: [],
+    groups: []
+  }
+  _.reduce(CurrentActivity.value.getLayers(), (iterator, layer) => {
+    const isVisible = layer.isVisible
+    const hasLegend = layer.legend
+    const hasFilterLegend = _.some(layer.filters, filter => filter.legend)
+    if (isVisible && (hasLegend || hasFilterLegend)) {
+      if (!hasLegend) iterator.layers.push(layer)
+      else if (!layer.legend.group) iterator.layers.push(layer)
+      else {
+        const group = layer.legend.group
+        if (!_.includes(iterator.groups, group)) {
+          iterator.layers.push(layer)
+          iterator.groups.push(group)
+        }
+      }
+    }
+    return iterator
+  }, iterator)
+  // order the layers according the name
+  layers.value = _.orderBy(iterator.layers, layer => layer.label || layer.name)
 }
 function getHelperIcon (helper) {
   return _.get(helper, 'icon', undefined)

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

@@ -28,13 +28,12 @@
         self="top left"
       />
     </div>
-    <div v-else style="height: 142px">
-      <div class="absolute-center">
-        <KStamp
-          icon="las la-map-marker"
-          text="KLocationCardSection.NO_LOCATION"
-        />
-      </div>
+    <div v-else style="height: 142px; position: relative;">
+      <KStamp
+        icon="las la-map-marker"
+        text="KLocationCardSection.NO_LOCATION"
+        class="absolute-center"
+      />
     </div>
   </KCardSection>
 </template>

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

@@ -20,6 +20,7 @@ import config from 'config'
 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 * as mapMixins from '../../mixins/map'
 import { Geolocation } from '../../geolocation.js'
 import { useCatalog, useCurrentActivity } from '../../composables'
@@ -162,16 +163,19 @@ export default {
       }
       // update the location
       this.location = this.modelValue
+      // check wether it holds some features
       if (!this.location) return
+      const featureType = this.location.type
+      if (featureType === 'FeatureCollection' && _.isEmpty(this.location.features)) return
       // backward compatibility with old format with only lat/lon or a geometry, not a feature
-      if (this.location.type !== 'Feature') {
+      if (featureType !== 'Feature' && featureType !== 'FeatureCollection') {
         const feature = { type: 'Feature', geometry: this.location, properties: { name: this.location.name } }
         if (!_.has(feature, 'geometry.type')) feature.geometry = { type: 'Point', coordinates: [this.location.longitude, this.location.latitude] }
         this.location = feature
       }
       // create a new layer
-      const type = _.get(this.location, 'geometry.type')
-      if (type === 'Point') {
+      const geometryType = _.get(this.location, 'geometry.type')
+      if (geometryType === 'Point') {
         const coordinates = _.get(this.location, 'geometry.coordinates')
         const style = _.get(this.location, 'style', _.get(this.engineOptions, 'style.location.point'))
         this.locationLayer = createMarkerFromPointStyle([coordinates[1], coordinates[0]],
@@ -186,11 +190,11 @@ export default {
               logger.warn(`[KDK] cannot get a style type from the feature of geometry type ${feature.geometry.type}`)
               return
             }
-            if (styleType === 'line') return getDefaultLineStyle(feature, null, this.engineOptions, 'style.location.line')
-            return getDefaultPolygonStyle(feature, null, this.engineOptions, 'style.location.polygon')
+            if (styleType === 'line') return getDefaultLineStyle(feature, null, _.get(this.engineOptions, 'style.location.line'))
+            return getDefaultPolygonStyle(feature, null, _.get(this.engineOptions, 'style.location.polygon'))
           },
           pointToLayer: (feature, latlng) => {
-            const style = getDefaultPointStyle(feature, null, this.engineOptions, 'style.location.point')
+            const style = getDefaultPointStyle(feature, null, _.get(this.engineOptions, 'style.location.point'))
             if (!style) {
               logger.warn('[KDK] cannot generate point style from a feature')
               return
@@ -204,7 +208,7 @@ export default {
     },
     onLocationDragged () {
       const latLng = this.locationLayer.getLatLng()
-      const newLocation = coordinatesToGeoJSON(latLng.lat, latLng.lng, this.$store.get('locationFormat', 'FFf'))
+      const newLocation = coordinatesToGeoJSON(latLng.lat, latLng.lng, Store.get('locationFormat', 'FFf'))
       this.$emit('update:modelValue', newLocation)
     },
     startDraw (shape) {
@@ -232,11 +236,11 @@ export default {
       const geometry = feature.geometry.type
       if (geometry === 'Point') {
         const coords = feature.geometry.coordinates
-        feature.properties.name = formatUserCoordinates(coords[1], coords[0], this.$store.get('locationFormat', 'FFf'))
+        feature.properties.name = formatUserCoordinates(coords[1], coords[0], Store.get('locationFormat', 'FFf'))
       } else {
         const prefix = this.$t(geometry === 'Polygon' ? 'KLocationMap.ZONE' : 'KLocationMap.PATH')
         const coords = _.get(centroid(feature), 'geometry.coordinates')
-        feature.properties.name = `${prefix} (${formatUserCoordinates(coords[1], coords[0], this.$store.get('locationFormat', 'FFf'))})`
+        feature.properties.name = `${prefix} (${formatUserCoordinates(coords[1], coords[0], Store.get('locationFormat', 'FFf'))})`
       }
       this.$emit('update:modelValue', feature)
       // clear draw layer
@@ -249,23 +253,29 @@ export default {
     async mapRefCreated (container) {
       if (container) {
         if (!this.mapReady) {
-          // setup 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' })
-          if (baseLayers.length > 0) await this.addLayer(baseLayers[0])
+          // [!] 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])
           // setup location
-          this.refresh()
+          if (this.mapReady) this.refresh()
         }
+      } else {
+        // keep trace when the component is being unmounted
+        this.mapReady = false
       }
     },
     getLocation () {
       return this.modelValue
     }
   },
-  async mounted () {
+  mounted () {
     this.$engineEvents.on('pm:create', this.stopDraw)
   },
   beforeUnmount () {

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

@@ -32,7 +32,7 @@
         class="text-caption text-grey-9"
         style="writing-mode: vertical-lr; min-width: 1rem;"
       >
-        {{ $t(label) }} - {{ getFormattedLevel(CurrentActivity.selectedLevel) }}
+        {{ $t(label) }} - {{ getFormattedLevel(level) }}
       </div>
     </div>
   </div>
@@ -68,6 +68,10 @@ const levels = computed(() => {
   const selectableLevels = _.get(CurrentActivity.value, 'selectableLevels')
   return !_.isEmpty(selectableLevels) ? selectableLevels : null
 })
+const unit = computed(() => {
+  const selectableLevels = _.get(CurrentActivity.value, 'selectableLevels')
+  return !_.isEmpty(selectableLevels) ? selectableLevels.unit : ''
+})
 const label = computed(() => {
   return _.get(levels.value, 'label')
 })
@@ -85,10 +89,9 @@ const sliderStep = computed(() => {
 })
 
 // Watch
-watch(() => CurrentActivity.value.selectableLevels, (levels) => {
-  if (levels.values) level.value = _.head(levels.values)
-  else if (levels.range) level.value = _.get(levels.range, 'min', 0)
-  else level.value = 0
+watch(() => CurrentActivity.value.selectedLevel, (selectedLevel) => {
+  if (levels.value && levels.value.values) level.value = levels.value.values.indexOf(selectedLevel)
+  else level.value = selectedLevel
 })
 
 // Functions
@@ -100,9 +103,8 @@ function onLevelChanged (level) {
   }
 }
 function getFormattedLevel (level) {
-  const unit = _.get(CurrentActivity.value.selectableLevels, 'unit')
-  if (levels.value.values) return `${levels.value.values[level]} ${unit}`
-  return `${level} ${unit}`
+  if (levels.value.values) return `${levels.value.values[level]} ${unit.value}`
+  return `${level} ${unit.value}`
 }
 </script>
 

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

@@ -13,6 +13,11 @@
       size="0.75rem"
       :handler="onCopy"
     />
+    <q-separator
+      vertical
+      color="grey-6"
+      style="margin: 6px;"
+    />
     <KAction
       id="close-position"
       icon="cancel"

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

@@ -15,16 +15,20 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { computed, onMounted, ref } from 'vue'
 import { api } from '../../../../core/client'
 import { useCurrentActivity } from '../../composables'
-import { editLayerStyle } from '../../utils.map'
+import { editLayerStyle, editFilterStyle } from '../../utils.map'
+import { getStyleType } from '../../utils/utils.style.js'
+import KSubMenu from '../../../../core/client/components/menu/KSubMenu.vue'
 
-const { CurrentActivity } = useCurrentActivity()
-
-const styles = ref([])
-
-defineProps({
+// Props
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  },
   label: {
     type: String,
     required: true
@@ -32,27 +36,70 @@ defineProps({
   icon: {
     type: String,
     required: false
+  },
+  ignoreFeatureStyle: {
+    type: Boolean,
+    default: false
+  },
+  maxItems: {
+    type: Number,
+    default: 250
+  },
+  filteringPolicy: {
+    type: String,
+    default: 'none',
+    validator: (value) => {
+      return ['none', 'permissive', 'strict'].includes(value)
+    }
   }
 })
 
+// Data
+const { CurrentActivity } = useCurrentActivity()
+const styles = ref([])
+
+// Computed
 const menuContent = computed(() => {
   if (styles.value.length <= 0) return []
   return styles.value.map((style, i) => ({
     id: 'apply-style-to-layer-' + i,
     label: style.name,
-    handler: (layer) => applyToLayer(layer, style)
+    handler: () => applyToLayer(style)
   }))
 })
 
-async function applyToLayer (layer, styleToApply) {
-  await editLayerStyle(layer, styleToApply)
-  if (CurrentActivity.value.isInMemoryLayer(layer)) {
-    await CurrentActivity.value.resetLayer(layer)
+// Functions
+async function applyToLayer (styleToApply) {
+  const layer = props.context
+  if (_.get(layer, 'filter')) {
+    const engineStyle = _.pick(_.get(CurrentActivity.value, 'activityOptions.engine.style', {}), ['point', 'line', 'polygon'])
+    await editFilterStyle(layer.layer, layer.filter, engineStyle, styleToApply, props.ignoreFeatureStyle)
+  } else {
+    await editLayerStyle(layer, styleToApply, props.ignoreFeatureStyle)
+    if (CurrentActivity.value.isInMemoryLayer(layer)) {
+      await CurrentActivity.value.resetLayer(layer)
+    }
   }
 }
+async function getFilterQuery () {
+  const layer = _.has(props.context, 'layer') ? props.context.layer : props.context
+  let filterQuery = {}
+  if (!['permissive', 'strict'].includes(props.filteringPolicy) || !_.has(layer, 'geometryTypes')) return filterQuery
+
+  const styleTypes = _.uniq(_.map(layer.geometryTypes, type => getStyleType(type)))
+  if (props.filteringPolicy === 'strict') {
+    filterQuery = { $and: ['point', 'line', 'polygon'].map(type => ({ [type]: { $exists: styleTypes.includes(type) } })) }
+  } else {
+    filterQuery = { $or: styleTypes.map(type => ({ [type]: { $exists: true } })) }
+  }
+
+  return filterQuery
+}
 
 onMounted(async () => {
-  const res = await api.getService('styles').find()
+  const baseQuery = { $limit: props.maxItems, $sort: { name: 1 } }
+  const filterQuery = await getFilterQuery()
+  const res = await api.getService('styles').find({ query: Object.assign({}, baseQuery, filterQuery) })
   styles.value = res.data
 })
 </script>

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

@@ -26,6 +26,7 @@
       -->
       <KStyleEditorSection
         v-if="canEditPoint"
+        v-model="enabledSections.point"
         label="KStyleEditor.POINT_SECTION"
         :style="model"
         type="point"
@@ -55,6 +56,7 @@
       -->
       <KStyleEditorSection
         v-if="canEditLine"
+        v-model="enabledSections.line"
         label="KStyleEditor.LINE_SECTION"
         :style="model"
         type="line"
@@ -70,6 +72,7 @@
       -->
       <KStyleEditorSection
         v-if="canEditPolygon"
+        v-model="enabledSections.polygon"
         label="KStyleEditor.POLYGON_SECTION"
         :style="model"
         type="polygon"
@@ -105,7 +108,10 @@ import _ from 'lodash'
 import config from 'config'
 import logger from 'loglevel'
 import { ref, computed, watch } from 'vue'
-import { api, i18n, utils as kdkCoreUtils } from '@kalisio/kdk/core.client'
+import { Notify } from 'quasar'
+import { i18n } from '../../../../core/client/i18n.js'
+import { api } from '../../../../core/client/api.js'
+import { containsText } from '../../../../core/client/utils/index.js'
 import { useCurrentActivity } from '../../composables'
 import KPanel from '../../../../core/client/components/KPanel.vue'
 import KStyleEditorSection from './KStyleEditorSection.vue'
@@ -149,6 +155,11 @@ const { CurrentActivityContext } = useCurrentActivity()
 const formRef = ref(null)
 const model = ref(null)
 const mode = props.style ? 'edition' : 'creation'
+const enabledSections = ref({ point: true, line: true, polygon: true })
+const formValues = {
+  name: _.get(props.style, 'name', ''),
+  tags: _.get(props.style, 'tags', [])
+}
 const formSchema = {
   $schema: 'http://json-schema.org/draft-07/schema#',
   $id: 'http://kalisio.xyz/schemas/style-editor#',
@@ -162,16 +173,35 @@ const formSchema = {
         component: 'form/KTextField',
         label: 'KStyleEditor.NAME_LABEL'
       }
+    },
+    tags: {
+      type: 'array',
+      minLength: 3,
+      maxLength: 256,
+      services: [
+        {
+          service: 'tags',
+          field: 'name',
+          description: 'label',
+          baseQuery: {
+            service: 'styles'
+          }
+        }
+      ],
+      field: {
+        component: 'form/KTagField',
+        label: 'KTagManager.TITLE',
+        service: 'styles',
+        property: 'tags'
+      },
+      multiselect: true,
+      minCharsToSearch: 0
     }
   },
   required: ['name']
 }
 
 // Computed
-const formValues = computed(() => {
-  if (_.isEmpty(props.style)) return null
-  return { name: _.get(props.style, 'name') }
-})
 const engine = computed(() => {
   return _.cloneDeep(_.get(CurrentActivityContext.config, 'engine', _.get(config, 'engines.leaflet')))
 })
@@ -212,7 +242,7 @@ const buttons = computed(() => {
     },
     {
       id: 'apply-style',
-      label: 'APPLY',
+      label: mode === 'creation' ? 'CREATE' : 'UPDATE',
       renderer: 'form-button',
       handler: apply
     }
@@ -224,8 +254,17 @@ const canEditPolygon = computed(() => props.allowedTypes.includes('polygon'))
 
 // Watch
 watch(() => props.style, (value) => {
-  if (!value) model.value = _.clone(engine.value.style)
+  const onFirstLoad = model.value === null
+
+  if (!value) model.value = _.clone(_.pick(engine.value.style, ['point', 'line', 'polygon']))
   else model.value = value
+
+  _.forEach(['point', 'line', 'polygon'], section => {
+    if (!_.get(model.value, section)) {
+      if (onFirstLoad) enabledSections.value[section] = false
+      _.set(model.value, section, getDefaultValue(section))
+    }
+  })
 }, { immediate: true })
 
 // Functions
@@ -233,12 +272,13 @@ function getDefaultValue (path) {
   return _.get(engine.value.style, path, _.cloneDeep(_.get(DefaultStyle, path)))
 }
 const onNameChanged = _.debounce(async (field, value) => {
+  if (field !== 'name' || !value) return
   if (_.size(value) > 2) await checkName(value)
 }, 200)
 async function checkName (name) {
   if (mode === 'edition' && name === props.style.name) return true
   const service = api.getService('styles')
-  const hasName = await kdkCoreUtils.containsText(service, 'name', name)
+  const hasName = await containsText(service, 'name', name)
   if (!hasName || !formRef.value) return true
   formRef.value.getField('name').reference.invalidate(i18n.t('KStyleEditor.STYLE_ALREADY_EXISTS', { style: name }))
   return false
@@ -251,7 +291,30 @@ async function apply () {
   const isUnique = await checkName(values.name)
   if (!isUnique) return false
   // create to patch the style
-  let data = _.merge(model.value, values)
+  let data = Object.assign({}, model.value, values)
+  // omit disabled feature types
+  const omitKeys = []
+  let atLeastOneSectionEnabled = false
+  _.forIn(enabledSections.value, (value, key) => {
+    if (!value) {
+      omitKeys.push(key)
+      if (mode !== 'creation') {
+        _.set(data, `$unset.${key}`, true)
+      }
+    } else {
+      atLeastOneSectionEnabled = true
+    }
+  })
+  if (!atLeastOneSectionEnabled) {
+    Notify.create({
+      type: 'negative',
+      message: i18n.t('KStyleEditor.ALL_SECTIONS_DISABLED')
+    })
+    return false
+  }
+  data = _.omit(data, omitKeys)
+  // keep only usefull data from tags
+  data.tags = _.map(values.tags, tag => _.pick(tag, ['name', 'description', 'color']))
   if (mode === 'creation') {
     data = _.merge(data, { type: 'style', scope: 'user' })
     logger.debug('[KDK] Create style with values:', data)