@kalisio/kdk 2.2.2 → 2.3.0

package/map/api/hooks/hooks.query.js

@@ -142,6 +142,7 @@ export function asGeoJson (options = {}) {
     const latitudeProperty = (options.latitudeProperty || 'latitude')
     const altitudeProperty = (options.altitudeProperty || 'altitude')
     const geometryProperty = (options.geometryProperty || 'geometry')
+    const allowNullGeometries = _.get(options, 'allowNullGeometries', false)
     let results = _.get(hook, options.dataPath || 'result')
     // Already as GeoJson ?
     if (results.type === 'FeatureCollection') return
@@ -159,7 +160,9 @@ export function asGeoJson (options = {}) {
                Array.isArray(_.get(item, geometryProperty)) ||
                // Check for a geometry property (previously provided or already transformed item)
                (_.has(item, geometryProperty + '.type') && _.has(item, geometryProperty + '.coordinates')) ||
-               (_.has(item, geometryProperty + '.geometry.type') && _.has(item, geometryProperty + '.geometry.coordinates'))
+               (_.has(item, geometryProperty + '.geometry.type') && _.has(item, geometryProperty + '.geometry.coordinates')) ||
+               // Check for null geometries when allowed
+               allowNullGeometries
       })
       .map(item => {
         let coordinates
@@ -194,7 +197,7 @@ export function asGeoJson (options = {}) {
           // Item locations are not already in GeoJson feature format so we need to convert
           return Object.assign({
             type: 'Feature',
-            geometry: { type: 'Point', coordinates },
+            geometry: (coordinates ? { type: 'Point', coordinates } : null),
             properties: {}
           }, _.omit(item, [longitudeProperty, latitudeProperty]))
         }

package/map/api/services/catalog/catalog.hooks.js

@@ -4,11 +4,11 @@ import fuzzySearch from 'feathers-mongodb-fuzzy-search'
 import { hooks as coreHooks } from '../../../../core/api/index.js'
 import { filterLayers, updateLayerReferences, updateProjects, getDefaultCategories, getDefaultSublegends } from '../../hooks/index.js'
 
-const { setNow, discard } = common
+const { setNow, discard, when } = common
 
 export default {
   before: {
-    all: [],
+    all: [coreHooks.marshallHttpQuery],
     find: [
       fuzzySearch({ fields: ['name'] }), coreHooks.diacriticSearch(), filterLayers, coreHooks.distinct
     ],
@@ -47,9 +47,8 @@ export default {
       coreHooks.convertToJson(['schema.content', 'filters'])
     ],
     find: [
-      // Merge built-in categories with user-defined ones
-      getDefaultCategories,
-      getDefaultSublegends
+      // Merge built-in categoriessublegends with user-defined ones for global catalog only
+      when(hook => !hook.service.getContextId(), getDefaultCategories, getDefaultSublegends)
     ],
     get: [],
     create: [],

package/map/client/cesium/utils/index.js

@@ -1,4 +1,5 @@
+export * from './utils.cesium.js'
 export * from './utils.events.js'
 export * from './utils.popup.js'
 export * from './utils.style.js'
-export * from './utils.features.js'
+export * from './utils.features.js'

package/map/client/cesium/utils/utils.cesium.js

@@ -0,0 +1,8 @@
+// We need to dynamically import cesium to dynamically get constructors
+export let Cesium
+
+async function loadCesium() {
+  Cesium = await import(`cesium`)
+}
+
+loadCesium()

package/map/client/cesium/utils/utils.features.js

@@ -1,8 +1,8 @@
 import { kml } from '@tmcw/togeojson'
-import Cesium from 'cesium/Source/Cesium.js'
+import { exportKml } from 'cesium'
 
 export async function convertEntitiesToGeoJson(entities) {
-  const kmlEntities = await Cesium.exportKml({ entities, modelCallback: () => '' })
+  const kmlEntities = await exportKml({ entities, modelCallback: () => '' })
   const parser = new DOMParser()
   return kml(parser.parseFromString(kmlEntities.kml, 'application/xml'))
 }

package/map/client/cesium/utils/utils.style.js

@@ -1,11 +1,12 @@
 import _ from 'lodash'
 import chroma from 'chroma-js'
 import moment from 'moment'
-import Cesium from 'cesium/Source/Cesium.js'
+import { Color } from 'cesium'
 import { Time, Units } from '../../../../core/client/index.js'
 import { convertPointStyleToSimpleStyle, convertLineStyleToSimpleStyle, convertPolygonStyleToSimpleStyle, convertSimpleStyleColors,
          convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
          PointStyleTemplateMappings, LineStyleTemplateMappings, PolygonStyleTemplateMappings } from '../../utils/utils.style.js'
+import { Cesium } from './utils.cesium.js'
 
 export const CesiumStyleMappings = {
   stroke: 'stroke',
@@ -34,7 +35,7 @@ export function convertToCesiumFromSimpleStyle (style, inPlace) {
       if (inPlace) _.unset(style, key)
       // Convert from string to color object as required by cesium
       if ((typeof value === 'string') && ['markerColor', 'fill', 'stroke'].includes(mapping)) {
-        _.set(convertedStyle, mapping, Cesium.Color.fromCssColorString(value))
+        _.set(convertedStyle, mapping, Color.fromCssColorString(value))
       }
     }
   })
@@ -85,21 +86,22 @@ export function getPolygonSimpleStyle (feature, options, engine, engineStylePath
   return convertSimpleStyleColors(convertPolygonStyleToSimpleStyle(style))
 }
 
+// Helper to convert from string to objects
+export function createCesiumObject () {
+  const args = Array.from(arguments)
+  const constructor = args[0]
+  args.shift()
+  const Class = _.get(Cesium, constructor)
+  // Can be callable, constructable or constant
+  let object
+  if (typeof Class === 'function') {
+    try { object = Class(...args) } catch (error) { /* Simply avoid raising any error */ }
+    try { object = new Class(...args) } catch (error) { /* Simply avoid raising any error */ }
+  } else object = Class
+  return object
+}
+
 export function convertToCesiumObjects (style) {
-  // Helper to convert from string to objects
-  function createCesiumObject () {
-    const args = Array.from(arguments)
-    const constructor = args[0]
-    args.shift()
-    const Class = _.get(Cesium, constructor)
-    // Can be callable, constructable or constant
-    let object
-    if (typeof Class === 'function') {
-      try { object = Class(...args) } catch (error) { /* Simply avoid raising any error */ }
-      try { object = new Class(...args) } catch (error) { /* Simply avoid raising any error */ }
-    } else object = Class
-    return object
-  }
   const mapValue = (value) => {
     if (typeof value === 'object') {
       const type = value.type
@@ -134,4 +136,4 @@ export function convertToCesiumObjects (style) {
   } else {
     return _.mapValues({ value: style }, mapValue).value
   }
-}
+}

package/map/client/components/KCompass.vue

@@ -5,7 +5,7 @@
     @touchstart="onStartDrag"
     style="position: relative"
   >
-    <svg width="100%" heigh="100%" viewBox="0 0 100 100" onclick="computeDirection">
+    <svg width="100%" heigh="100%" viewBox="0 0 100 100">
       <circle
         cx="50" cy="50" r="44"
         :stroke="getCssVar('accent')"
@@ -42,7 +42,7 @@
         color="primary"
         text-color="white"
         outline
-        :label="`${modelValue}°`"
+        :label="getLabel()"
       />
       <q-popup-edit
         v-model="direction"
@@ -51,6 +51,7 @@
       >
         <q-input
           v-model.number="scope.value"
+          :prefix="getPrefix()"
           suffix="°"
           autofocus
           dense
@@ -64,6 +65,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { getCssVar } from 'quasar'
+import { i18n } from '../../../core/client'
 
 // Props
 const props = defineProps({
@@ -78,6 +80,13 @@ const props = defineProps({
   ticks: {
     type: Number,
     default: 16
+  },
+  labelMode: {
+    type: String,
+    default: 'from',
+    validator (value) {
+      return ['from', 'from-to'].includes(value)
+    }
   }
 })
 
@@ -122,12 +131,25 @@ function onHandleDrag (event) {
   const { x, y } = event.type.startsWith('touch') ? event.changedTouches[0] : event
   computeDirection(x, y)
 }
+function getLabel () {
+  if (props.labelMode === 'from') return `${direction.value}°`
+  return i18n.t('KCompass.FROM_TO', {
+    direction: direction.value,
+    source: (direction.value + 180) % 360
+  })
+}
+function getPrefix () {
+  if (props.labelMode === 'from') return ''
+  return i18n.t('KCompass.FROM')
+}
 function onStartDrag (event) {
+  const { x, y } = event
+  computeDirection(x, y)
   window.addEventListener('mousemove', onHandleDrag)
   window.addEventListener('touchmove', onHandleDrag)
   window.addEventListener('mouseup', onStropDrag)
   window.addEventListener('touchend', onStropDrag)
-};
+}
 function onStropDrag () {
   window.removeEventListener('mousemove', onHandleDrag)
   window.removeEventListener('touchmove', onHandleDrag)

package/map/client/components/KEditLayerData.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import KAction from '../../../core/client/components/KAction.vue'
+import KAction from '../../../core/client/components/action/KAction.vue'
 
 export default {
   name: 'k-edit-layer-data',

package/map/client/components/KPositionIndicator.vue

@@ -19,7 +19,7 @@ import _ from 'lodash'
 import { copyToClipboard } from 'quasar'
 import { Layout, utils as kdkCoreUtils } from '../../../core.client'
 import { formatUserCoordinates } from '../utils'
-import KAction from '../../../core/client/components/KAction.vue'
+import KAction from '../../../core/client/components/action/KAction.vue'
 
 export default {
   components: {

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

@@ -284,7 +284,7 @@ export default {
 
         const url = wmts.buildLeafletUrl(this.service.baseUrl, this.layer, {
           version: this.service.version,
-          style: style,
+          style,
           crs: '3857',
           format: pickedFormat,
           searchParams: this.service.searchParams,
@@ -295,7 +295,7 @@ export default {
           url: url.replace('{z}', '{TileMatrix}').replace('{x}', '{TileCol}').replace('{y}', '{TileRow}'),
           format: pickedFormat,
           layer: this.layer.id,
-          style: style,
+          style,
           tileMatrixSetID: this.layer.crs['3857']
         }
         newLayer.leaflet = {

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

@@ -102,8 +102,8 @@ export default {
         try {
           this.creating = true
           const createdView = await this.kActivity.saveContext(view)
-          // Add view to current project ?
-          if (this.project) {
+          // Add view to current project ? Check if not coming from another planet first
+          if (this.project && (this.project.getPlanetApi() === this.$api)) {
             this.project.views.push({ _id: createdView._id })
             await this.$api.getService('projects').patch(this.project._id, {
               views: this.project.views

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

@@ -73,6 +73,7 @@
         <KCompass
           v-model="model"
           @update:model-value="onChanged"
+          :labelMode="labelMode"
           class="k-compass"
         />
       </template>
@@ -108,6 +109,9 @@ export default {
     mode () {
       return _.get(this.properties.field, 'mode', 'input')
     },
+    labelMode () {
+      return _.get(this.properties.field, 'labelMode', 'from')
+    },
     clearable () {
       return _.get(this.properties.field, 'clearable', false)
     }

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

@@ -71,10 +71,10 @@ export default {
       // sort alphabetically layers per display
       return this.service
         ? _.map(this.service.availableLayers, (value, key) => value).sort((a, b) => {
-            const uppera = a.display.toUpperCase()
-            const upperb = b.display.toUpperCase()
-            return uppera < upperb ? -1 : uppera > upperb ? 1 : 0
-          })
+          const uppera = a.display.toUpperCase()
+          const upperb = b.display.toUpperCase()
+          return uppera < upperb ? -1 : uppera > upperb ? 1 : 0
+        })
         : []
     }
   },

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

@@ -161,10 +161,9 @@ export default {
           // fetch content and try to convert to json
           const query = url.href
 
-          caps = await fetch(query, { redirect: 'follow' })
-            .then(resp => resp.text())
-            .then(txt => xml2js.parseStringPromise(txt, { tagNameProcessors: [xml2js.processors.stripPrefix] }))
-
+          const resp = await fetch(query, { redirect: 'follow' })
+          const txt = await resp.text()
+          caps = await xml2js.parseStringPromise(txt, { tagNameProcessors: [xml2js.processors.stripPrefix] })
           // look for SERVICE=xxx
           const protocol = this.findQueryParameter(url.searchParams, 'SERVICE')
           if (protocol === 'WMS') result.protocol = 'WMS'

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

@@ -49,9 +49,9 @@
 <script setup>
 import _ from 'lodash'
 import logger from 'loglevel'
-import sift from 'sift'
 import { ref, computed, watch } from 'vue'
-import { i18n, Store } from '../../../../core/client'
+import { api, i18n, Store } from '../../../../core/client'
+import { getLayersBySublegend } from '../../utils'
 import { useCurrentActivity, useCatalog } from '../../composables'
 import KLayerLegend from './KLayerLegend.vue'
 
@@ -86,6 +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()
 // Use local catalog if any
@@ -99,19 +106,7 @@ const engine = ref()
 const zoom = ref()
 
 // Computed
-const layersBySublegend = computed(() => {
-  const result = {}
-  _.forEach(sublegends.value, sublegend => {
-    // Built-in legends use filtering while
-    let filter = null
-    if (_.has(sublegend, 'options.filter')) {
-      filter = _.get(sublegend, 'options.filter')
-    }
-    // If the list of layers in category is empty we can have a null filter
-    result[sublegend.name] = filter ? _.filter(layers.value, sift(filter)) : []
-  })
-  return result
-})
+const layersBySublegend = computed(() => getLayersBySublegend(layers.value, sublegends.value))
 
 // Functions
 function onShowLayer (layer, engine) {
@@ -152,6 +147,9 @@ watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
   // Retrieve the legends from catalog if required
   if (props.sublegendsFromCatalog) {
     sublegends.value = await getSublegends()
+    if (project) {
+      sublegends.value = sublegends.value.concat(await getProjectSublegends())
+    }
     if (Store.get('context')) {
       sublegends.value = sublegends.value.concat(await getContextSublegends())
     }

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

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import KAction from '../../../../core/client/components/KAction.vue'
+import KAction from '../../../../core/client/components/action/KAction.vue'
 import { useCurrentActivity } from '../../composables'
 import { Geolocation } from '../../geolocation.js'
 

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

@@ -29,6 +29,7 @@
           class="col q-pl-sm q-pr-sm"
           :schema="schema"
           :tables="getTables(timeSerie)"
+          :formatters="tableFormatters"
         />
       </div>
     </template>
@@ -61,6 +62,7 @@
           class="col q-pl-sm q-pr-sm"
           :schema="schema"
           :tables="getTables(timeSerie)"
+          :formatters="tableFormatters"
         />
       </div>
     </template>
@@ -96,6 +98,7 @@ const props = defineProps({
   schema: { type: [String, Object], default: null },
   actions: { type: Array, default: () => [] },
   chartOptions: { type: Object, default: () => ({}) },
+  tableFormatters: { type: Object, defaul: () => null },
   exportOptions: { type: Object, default: () => ({}) }
 })
 

package/map/client/composables/highlight.js

@@ -8,6 +8,8 @@ import { getFeatureId, getFeatureStyleType } from '../utils.js'
 import * as composables from '../../../core/client/composables/index.js'
 
 export const HighlightsLayerName = uid()
+// This ensure it is on tp of everything else
+export const HighlightsZIndex = 999
 
 export function useHighlight (name, options = {}) {
   // Set default options
@@ -153,7 +155,8 @@ export function useHighlight (name, options = {}) {
           interactive: false,
           cluster: false,
           removeMissing: true,
-          popup: { pick: [] }
+          popup: { pick: [] },
+          zIndex: HighlightsZIndex
         },
         cesium: {
           type: 'geoJson',

package/map/client/elevation-utils.js

@@ -56,7 +56,7 @@ function fetchProfileDataset (feature, distanceUnit, altitudeUnit) {
     }
   }
 
-  return { dataset: allCoordsHaveAltitude ? dataset : [], segments: segments }
+  return { dataset: allCoordsHaveAltitude ? dataset : [], segments }
 }
 
 function asArray (val) { return (Array.isArray(val) || val === undefined) ? val : [val] }
@@ -236,7 +236,7 @@ function extractElevation (queries, { noDataset, noGeojson, queryParametersInDat
         dataset.push(datasetPoint)
       }
       if (!noGeojson) {
-        const props = { z: e, t: t }
+        const props = { z: e, t }
         if (queryParametersInDataset) {
           props.resolution = r
           if (w !== undefined) props.corridorWidth = w

package/map/client/i18n/map_en.json

@@ -204,7 +204,7 @@
     "TITLE": "My position",
     "METERS": "meters",
     "FEET": "feet",
-    "POPUP": "You are within {distance} {unit} from this point",
+    "POPUP": "You are within {'{distance}'} {'{unit}'} from this point",
     "OUTSIDE_MAP_BOUNDS": "You seem located outside the boundaries of the map"
   },
   "schemas": {
@@ -685,6 +685,8 @@
     "LABEL": "Legend"
   },
   "KCompass": {
+    "FROM_TO": "From {direction}° to {source}°",
+    "FROM": "From",
     "NORTH": "N",
     "EAST": "E",
     "SOUTH": "S",

package/map/client/i18n/map_fr.json

@@ -204,7 +204,7 @@
     "TITLE": "Ma position",
     "METERS": "mètres",
     "FEET": "pieds",
-    "POPUP": "Vous êtes à moins de {distance} {unit} de ce point",
+    "POPUP": "Vous êtes à moins de {'{distance}'} {'{unit}'} de ce point",
     "OUTSIDE_MAP_BOUNDS": "Vous semblez localisé en dehors de la carte"
   },
   "schemas": {
@@ -691,6 +691,8 @@
     "LABEL": "Légende"
   },
   "KCompass": {
+    "FROM_TO": "De {direction}° vers {source}°",
+    "FROM": "De",
     "NORTH": "N",
     "EAST": "E",
     "SOUTH": "S",