@kalisio/kdk 2.4.1 → 2.5.1

package/map/client/components/tools/KSearchTool.vue

@@ -2,20 +2,23 @@
   <KLocationSearch
     v-model="location"
     :geocoders="geocoders"
+    :autofocus="autofocus"
+    :viewbox="viewbox"
+    :limit="limit"
     :style="computedStyle"
   />
 </template>
 
 <script setup>
-import { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import { uid, getCssVar, useQuasar } from 'quasar'
 import bbox from '@turf/bbox'
-import KLocationSearch from '../location/KLocationSearch.vue'
 import { useCurrentActivity } from '../../composables'
+import KLocationSearch from '../location/KLocationSearch.vue'
 
 // Data
 const $q = useQuasar()
-const { CurrentActivity } = useCurrentActivity()
+const { CurrentActivityContext, CurrentActivity } = useCurrentActivity()
 const location = ref(null)
 const LocationLayerName = uid()
 
@@ -24,9 +27,23 @@ defineProps({
   geocoders: {
     type: Array,
     default: () => []
+  },
+  limit: {
+    type: Number,
+    default: 25,
+    validator: (value) => {
+      return value > 0 && value < 500
+    }
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
   }
 })
 
+// Data
+const viewbox = ref(null)
+
 // Computed
 const computedStyle = computed(() => {
   if ($q.screen.lt.md) return 'width: 80vw'
@@ -37,7 +54,7 @@ const computedStyle = computed(() => {
 // Functions
 async function createLocationLayer () {
   // create the layer
-  const style = CurrentActivity.value.activityOptions.engine.style.location
+  const style = CurrentActivityContext.config.engine.style.location
   await CurrentActivity.value.addLayer({
     name: LocationLayerName,
     type: 'OverlayLayer',
@@ -80,19 +97,30 @@ async function createLocationLayer () {
     CurrentActivity.value.zoomToBBox(bbox(location.value))
   }
 }
-
 async function removeLocationLayer () {
   if (CurrentActivity.value) await CurrentActivity.value.removeLayer(LocationLayerName)
 }
+function onMoveEnd () {
+  const bounds = CurrentActivity.value.getBounds()
+  viewbox.value = [bounds[0][1], bounds[0][0], bounds[1][1], bounds[1][0]]
+}
 
-// Watchers
+// Watch
 watch(location, async (newLocation, previousLocation) => {
   if (previousLocation) await removeLocationLayer()
   if (newLocation) await createLocationLayer()
 })
 
 // Hooks
+onMounted(() => {
+  // start listening moveend event to update the current viewbox
+  CurrentActivity.value.$engineEvents.on('moveend', onMoveEnd)
+  onMoveEnd()
+})
 onBeforeUnmount(async () => {
+  // stop listening moveend event
+  CurrentActivity.value.$engineEvents.off('moveend', onMoveEnd)
+  // remove the marker if any
   if (location.value) await removeLocationLayer()
 })
 </script>

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

@@ -58,7 +58,7 @@ export default {
         style: {
           shape: 'none',
           icon: {
-            url: '/icons/kdk/mapillary-marker.png',
+            url: '/kdk/mapillary-marker.png',
             size: 40,
             rotation: bearing
           }

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

@@ -22,6 +22,7 @@
           :end-time="endTime"
           @zoom-start="onZoomStart"
           @zoom-end="onZoomEnd"
+          @legend-clicked="onLegendClicked"
         />
         <KDataTable v-else
           :ref="components[index].onTableRef"
@@ -55,6 +56,7 @@
           :end-time="endTime"
           @zoom-start="onZoomStart"
           @zoom-end="onZoomEnd"
+          @legend-clicked="onLegendClicked"
         />
         <KDataTable v-else
           :ref="components[index].onTableRef"
@@ -84,11 +86,6 @@ import KPanel from '../../../../core/client/components/KPanel.vue'
 import KTimeSeriesChart from '../../../../core/client/components/chart/KTimeSeriesChart.vue'
 import KDataTable from '../../../../core/client/components/chart/KDataTable.vue'
 
-const emit = defineEmits(['zoom-start', 'zoom-end'])
-// const timeseries = [
-//   { label: 'group1', series: [] }
-//   { label: 'group2', series: [] }
-// ]
 const props = defineProps({
   timeSeries: { type: Array, default: () => [] },
   xAxisKey: { type: String, default: 'x' },
@@ -102,6 +99,9 @@ const props = defineProps({
   exportOptions: { type: Object, default: () => ({}) }
 })
 
+// Emits
+const emit = defineEmits(['zoom-start', 'zoom-end', 'legend-clicked'])
+
 // data
 const components = ref([])
 const startTime = ref(null)
@@ -195,6 +195,9 @@ function onZoomEnd ({ chart, start, end }) {
   endTime.value = moment.utc(end)
   emit('zoom-end', { chart, start, end, zoomHistory })
 }
+function onLegendClicked (legendItem, legend) {
+  emit('legend-clicked', legendItem, legend)
+}
 function update () {
   _.forEach(components.value, component => {
     if (component.chart) component.chart.update()

package/map/client/composables/activity.js

@@ -1,55 +1,57 @@
 import _ from 'lodash'
-import { onBeforeUnmount, unref, shallowRef } from 'vue'
+import { unref, shallowRef } from 'vue'
 import * as composables from '../../../core/client/composables/index.js'
-import { api } from '../../../core/client/api.js'
 import { useSelection } from './selection.js'
 import { useProbe } from './probe.js'
 import { useHighlight } from './highlight.js'
 
+const ActivityComposables = {}
+
 // When creating an activity we are interested by all aspects
 export function useActivity (name, options = {}) {
   _.defaults(options, { selection: true, probe: true, highlight: true })
 
+  // data
   const coreActivity = composables.useActivity(name, options)
+  const { CurrentActivityContext } = coreActivity
   let selection, probe, highlight
 
+  // functions
+  function setCurrentActivity (activity) {
+    coreActivity.setCurrentActivity(activity)
+    if (selection) selection.setCurrentActivity(activity)
+    if (probe) probe.setCurrentActivity(activity)
+    if (highlight) highlight.setCurrentActivity(activity)
+  }
+
   // expose
   const expose = {
     ...coreActivity
   }
   if (options.selection) {
-    selection = useSelection(name, _.get(coreActivity, 'options.selection'))
+    selection = useSelection(name, _.get(CurrentActivityContext, 'config.selection'))
     Object.assign(expose, {
       ...selection
     })
   }
   if (options.probe) {
-    probe = useProbe(name, _.get(coreActivity, 'options.probe'))
+    probe = useProbe(name, _.get(CurrentActivityContext, 'config.probe'))
     Object.assign(expose, {
       ...probe
     })
   }
   if (options.highlight) {
-    highlight = useHighlight(name, _.get(coreActivity, 'options.highlight'))
+    highlight = useHighlight(name, _.get(CurrentActivityContext, 'config.highlight'))
     Object.assign(expose, {
       ...highlight
     })
   }
-
-  // functions
-  function setCurrentActivity (activity) {
-    coreActivity.setCurrentActivity(activity)
-    if (selection) selection.setCurrentActivity(activity)
-    if (probe) probe.setCurrentActivity(activity)
-    if (highlight) highlight.setCurrentActivity(activity)
-  }
-
-  // Cleanup on destroy
-  onBeforeUnmount(() => setCurrentActivity(null))
-
-  return Object.assign(expose, {
+  Object.assign(expose, {
     setCurrentActivity
   })
+  // Store exposed data and functions so that useCurrentActivity() will return the same context
+  _.set(ActivityComposables, name, expose)
+  return expose
 }
 
 const activityProject = shallowRef(null)
@@ -58,7 +60,10 @@ const activityProject = shallowRef(null)
 export function useCurrentActivity (options = {}) {
   _.defaults(options, { selection: true, probe: true })
 
-  const { kActivity, kActivityName, state: activityState, options: activityOptions } = composables.useCurrentActivity()
+  // data
+  const coreActivity = composables.useCurrentActivity()
+  const { CurrentActivityContext } = coreActivity
+
   // functions
   function setActivityProject (project) {
     activityProject.value = unref(project)
@@ -69,33 +74,14 @@ export function useCurrentActivity (options = {}) {
 
   // expose
   const expose = {
-    kActivity,
-    CurrentActivity: kActivity,
-    kActivityName,
-    CurrentActivityName: kActivityName,
+    ...coreActivity,
     setActivityProject,
     getActivityProject
   }
-  if (kActivityName.value) {
-    Object.assign(expose, {
-      state: activityState,
-      options: activityOptions
-    })
-    if (options.selection) {
-      Object.assign(expose, {
-        ...useSelection(kActivityName.value, _.get(options, 'selection'))
-      })
-    }
-    if (options.probe) {
-      Object.assign(expose, {
-        ...useProbe(kActivityName.value, _.get(options, 'probe'))
-      })
-    }
-    if (options.highlight) {
-      Object.assign(expose, {
-        ...useHighlight(kActivityName.value, _.get(options, 'highlight'))
-      })
-    }
+  if (CurrentActivityContext.name) {
+    // Retrieved the same exposed data and function from useActivity()
+    Object.assign(expose, _.get(ActivityComposables, CurrentActivityContext.name))
   }
+  
   return expose
 }

package/map/client/composables/catalog.js

@@ -12,7 +12,7 @@ export function useCatalog (options = {}) {
     categories: {},
     sublegends: {},
     views: {},
-    // Default to global catalog
+    // Default to contextual or global catalog depending on store
     context: '',
     // Default to app API
     planetApi: api

package/map/client/composables/highlight.js

@@ -3,46 +3,53 @@ import config from 'config'
 import bbox from '@turf/bbox'
 import bboxPolygon from '@turf/bbox-polygon'
 import { uid } from 'quasar'
-import { unref, onUnmounted } from 'vue'
-import { getFeatureId, getFeatureStyleType, isLayerHighlightable } from '../utils.js'
+import { unref, onBeforeMount, onBeforeUnmount } from 'vue'
+import * as utils from '../utils.js'
 import * as composables from '../../../core/client/composables/index.js'
 
 export const HighlightsLayerName = uid()
 // This ensure it is on top of everything else
 export const HighlightsZIndex = 999
+// This ensure highlight encompasses the target feature
+export const HighlightMargin = 8
 
 export function useHighlight (name, options = {}) {
+  // Data
+  let highlightMode = 'highlightable-layers'
+  let layerServiceEventListeners = {}
   // Set default options
   options = Object.assign({ updateDelay: 250 }, options)
   // Retrieve activity
   const { kActivity } = composables.useCurrentActivity()
   // Avoid using .value everywhere
   let activity = unref(kActivity)
-
-  // Data
   // highlight store for context
   const { store, clear, set, get, unset, has } = composables.useStore(`highlights.${name}`)
   // global highlight store
   const { forOwn } = composables.useStore('highlights')
 
-  // functions
+  // Functions
   function setCurrentActivity (newActivity) {
     // Avoid multiple updates
     if (activity === newActivity) return
     // Remove highlights on previous activity and set it on new one
     if (activity) {
       removeHighlightsLayer()
+      activity.$engineEvents.off('layer-added', listenToFeaturesServiceEventsForLayer)
+      activity.$engineEvents.off('layer-removed', unlistenToFeaturesServiceEventsForLayer)
       activity.$engineEvents.off('layer-added', createHighlightsLayer)
       activity.$engineEvents.off('layer-disabled', onHighlightedLayerDisabled)
       activity.$engineEvents.off('layer-enabled', onHighlightedLayerEnabled)
     }
     activity = newActivity
-    if (newActivity) {
+    if (activity) {
+      activity.$engineEvents.on('layer-added', listenToFeaturesServiceEventsForLayer)
+      activity.$engineEvents.on('layer-removed', unlistenToFeaturesServiceEventsForLayer)
       // When at least one layer is added we know the catalog has been loaded
       // so that we can add our highlight layer, before that it would be cleared by catalog loading
-      newActivity.$engineEvents.on('layer-added', createHighlightsLayer)
-      newActivity.$engineEvents.on('layer-disabled', onHighlightedLayerDisabled)
-      newActivity.$engineEvents.on('layer-enabled', onHighlightedLayerEnabled)      
+      activity.$engineEvents.on('layer-added', createHighlightsLayer)
+      activity.$engineEvents.on('layer-disabled', onHighlightedLayerDisabled)
+      activity.$engineEvents.on('layer-enabled', onHighlightedLayerEnabled)      
     }
   }
   function getHighlightId (feature, layer) {
@@ -51,73 +58,80 @@ export function useHighlight (name, options = {}) {
     let id = `${name}`
     if (layer) id += `-${_.kebabCase(layer.name)}`
     if (feature) {
-      const featureId = getFeatureId(feature, layer)
+      const featureId = utils.getFeatureId(feature, layer)
       if (featureId) id += `-${featureId}`
     }
     return id
   }
+  function isHighlightFor (highlightId, layer, feature) {
+    return feature ? highlightId.includes(`-${utils.getFeatureId(feature, layer)}`) : highlightId.includes(`-${_.kebabCase(layer.name)}`)
+  }
   function hasHighlight (feature, layer) {
     return has(getHighlightId(feature, layer))
   }
   function getHighlight (feature, layer) {
     return get(getHighlightId(feature, layer))
   }
+  function setHighlightGeometry (feature, highlight) {
+    // Assign geometry
+    Object.assign(highlight, feature.geometry
+      ? { geometry: feature.geometry }
+      : { geometry: { type: 'Point', coordinates: [_.get(feature, 'lng', 0), _.get(feature, 'lat', 0)] } }
+    )
+    // Use bbox for line/polygons
+    if (options.asBbox && (highlight.geometry.type !== 'Point')) {
+      Object.assign(highlight, bboxPolygon(bbox(highlight)))
+    }
+    requestHighlightsLayerUpdate()
+  }
+  function setHighlightMode (mode = 'highlightable-layers') {
+    highlightMode = mode
+  }
   function highlight (feature, layer, selected = true) {
-    if (layer && !isLayerHighlightable(layer)) return
+    if (layer && (highlightMode === 'highlightable-layers') && !utils.isLayerHighlightable(layer)) return
     const highlightId = getHighlightId(feature, layer)
     // Define default highlight feature
     const highlight = {
       highlightId,
       type: 'Feature',
-      isDisabled: (layer ? layer.isDisabled : false),
       properties: Object.assign({
         zOrder: 0,
       }, options)
     }
-    // Assign geometry
-    Object.assign(highlight, feature.geometry
-      ? { geometry: feature.geometry }
-      : { geometry: { type: 'Point', coordinates: [_.get(feature, 'lng', 0), _.get(feature, 'lat', 0)] } }
-    )
-    // Use bbox for line/polygons
-    if (options.asBbox && (highlight.geometry.type !== 'Point')) {
-      Object.assign(highlight, bboxPolygon(bbox(highlight)))
-    }
+    setHighlightGeometry(feature, highlight)
     // Assign style
     if (selected) {
       // Do not alter config object
-      const selectionStylePath = `engines.${activity.engine}.style.selection.${getFeatureStyleType(highlight)}`
+      const selectionStylePath = `engines.${activity.engine}.style.selection.${utils.getFeatureStyleType(highlight)}`
       let highlightStyle = _.cloneDeep(_.get(config, selectionStylePath, {}))
       if (activity.is2D()) {
         // adapt the size to the marker using feature style
+        let radius = _.get(feature, 'style.radius')
         let size = _.get(feature, 'style.size')
-        if (size) {
-          if (!Array.isArray(size)) size = [size, size]
-        } else {
-          let radius = _.get(feature, 'style.radius')
-          if (radius) size = [radius * 2, radius * 2]
+        if (size && !Array.isArray(size)) {
+          size = [size, size]
         }
         // adapt the size to the marker using layer style
-        if (!size) {
+        if (!size && !radius) {
           size = _.get(layer, `${activity.engine}.style.point.size`)
-          if (size) {
-            if (!Array.isArray(size)) size = [size, size]
-          } else {
-            let radius = _.get(layer, `${activity.engine}.style.point.radius`)
-            if (radius) size = [radius * 2, radius * 2]
+          radius = _.get(layer, `${activity.engine}.style.point.radius`)
+          if (size && !Array.isArray(size)) {
+            size = [size, size]
           }
         }
-        if (size) Object.assign(highlightStyle, { size: [size[0] + 8, size[1] + 8] }) 
+        // If highlight size is based on a shape with a radius use it, otherwise go for size
+        if (radius) Object.assign(highlightStyle, { radius: radius + 0.5 * HighlightMargin }) 
+        else if (size) Object.assign(highlightStyle, { size: [size[0] + HighlightMargin, size[1] + HighlightMargin] })
       }
       Object.assign(highlight, { style: highlightStyle })
     } else {
-      // retrieve feature sytle
+      // 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']))
     set(highlightId, highlight)
-    requestHighlightsLayerUpdate()
+    setHighlightEnabled(feature, layer, layer ? !layer.isDisabled : true)
     return highlight
   }
   function unhighlight (feature, layer) {
@@ -125,17 +139,29 @@ export function useHighlight (name, options = {}) {
     unset(highlightId)
     requestHighlightsLayerUpdate()
   }
+  function setHighlightEnabled (feature, layer, enabled = true) {
+    const highlight = getHighlight(feature, layer)
+    _.set(highlight, 'style.visibility', enabled)
+    requestHighlightsLayerUpdate()
+  }
+  function setHighlightsEnabled (layer, enabled = true) {
+    getHighlights(layer).forEach(highlight => setHighlightEnabled(highlight, layer, enabled))
+  }
   function clearHighlights () {
     clear()
     requestHighlightsLayerUpdate()
   }
-  function getHighlightedFeatures () {
+  function getHighlights (layer, feature) {
     // Iterate over all highlights
     let features = []
     // For each highlight store
-    forOwn((store, key) => {
+    forOwn(store => {
       // Retrieve features in highlight store
-      features = features.concat(_.flatten(_.values(store)))
+      _.forOwn(store, (value, key) => {
+        if (!layer || (layer && isHighlightFor(key, layer, feature))) {
+          features.push(value)
+        }
+      })
     })
     return features
   }
@@ -174,7 +200,7 @@ export function useHighlight (name, options = {}) {
   }
   function updateHighlightsLayer () {
     // Get all highlights
-    let features = getHighlightedFeatures()
+    let features = getHighlights()
     // Filter invisible ones
     features = features.filter(feature => !feature.isDisabled)
     // Order from back to front
@@ -183,7 +209,7 @@ export function useHighlight (name, options = {}) {
       activity.updateLayer(HighlightsLayerName, {
         type: 'FeatureCollection',
         features
-      }, { replace: true }) // Always start from fresh data as we debounce the update and might multiple operations might generate a wrong order otherwise
+      }, { replace: true }) // Always start from fresh data as we debounce the update and multiple operations might generate a wrong order otherwise
     }
   }
   // In order to avoid updating the layer too much often we queue a request update every N ms
@@ -194,39 +220,73 @@ export function useHighlight (name, options = {}) {
     if (activity) activity.removeLayer(HighlightsLayerName)
   }
   function onHighlightedLayerDisabled (layer) {
-    // Get all highlights
-    const features = getHighlightedFeatures()
-    // Tag layer' features as invisible
-    features.forEach(feature => {
-      const suffix = `-${_.kebabCase(layer.name)}-${getFeatureId(feature, layer)}`
-      if (feature.highlightId.endsWith(suffix)) feature.isDisabled = true
+    // Tag all highlights as invisible
+    getHighlights(layer).forEach(highlight => {
+      setHighlightEnabled(highlight, layer, false)
     })
-    requestHighlightsLayerUpdate()
   }
   function onHighlightedLayerEnabled (layer) {
-    // Get all highlights
-    const features = getHighlightedFeatures()
-    // Tag layer' features as visible
-    features.forEach(feature => {
-      const suffix = `-${_.kebabCase(layer.name)}-${getFeatureId(feature, layer)}`
-      if (feature.highlightId.endsWith(suffix)) feature.isDisabled = false
+    // Tag all highlights as visible
+    getHighlights(layer).forEach(highlight => {
+      setHighlightEnabled(highlight, layer, true)
     })
-    requestHighlightsLayerUpdate()
+  }
+  function listenToFeaturesServiceEventsForLayer (layer) {
+    const listeners = utils.listenToFeaturesServiceEventsForLayer(layer, {
+      all: onFeatureUpdated, removed: onFeatureRemoved
+    }, layerServiceEventListeners[layer._id])
+    if (listeners) layerServiceEventListeners[layer._id] = listeners
+  }
+  function unlistenToFeaturesServiceEventsForLayer (layer) {
+    utils.unlistenToFeaturesServiceEventsForLayer(layer, layerServiceEventListeners[layer._id])
+    delete layerServiceEventListeners[layer._id]
+  }
+  function listenToFeaturesServiceEventsForLayers () {
+    layerServiceEventListeners = {}
+    _.forEach(activity.getLayers(), listenToFeaturesServiceEventsForLayer)
+  }
+  function unlistenToFeaturesServiceEventsForLayers () {
+    _.forOwn(layerServiceEventListeners, unlistenToFeaturesServiceEventsForLayer)
+    layerServiceEventListeners = {}
+  }
+  function onFeatureUpdated (feature, layer) {
+    // Find related layer, either directly given in feature if coming from user-defined features service
+    // otherwise bound to the listener for features services attached to a built-in layer
+    if (!layer && feature.layer) layer = activity.getLayerById(feature.layer)
+    if (!layer) return
+    if (hasHighlight(feature, layer)) setHighlightGeometry(feature, getHighlight(feature, layer))
+  }
+  function onFeatureRemoved (feature, layer) {
+    // Find related layer, either directly given in feature if coming from user-defined features service
+    // otherwise bound to the listener for features services attached to a built-in layer
+    if (!layer && feature.layer) layer = activity.getLayerById(feature.layer)
+    if (!layer) return
+    if (hasHighlight(feature, layer)) unhighlight(feature, layer)
   }
 
+  // Hooks
+  // Initialize on create
+  onBeforeMount(() => {
+    listenToFeaturesServiceEventsForLayers()
+  })
   // Cleanup on destroy
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
+    unlistenToFeaturesServiceEventsForLayers()
     clearHighlights()
   })
 
-  // expose
+  // Expose
   return {
     setCurrentActivity,
     highlights: store,
+    setHighlightMode,
     hasHighlight,
     getHighlight,
+    getHighlights,
     highlight,
     unhighlight,
+    setHighlightEnabled,
+    setHighlightsEnabled,
     clearHighlights
   }
 }