@kalisio/kdk 2.1.9 → 2.2.1

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

@@ -0,0 +1,30 @@
+export function convertCesiumHandlerEvent (type) {
+  const buttonMapping = {
+    left: 0,
+    middle: 1,
+    right: 2
+  }
+  const buttonMovement = type.split('_')
+  const movement = buttonMovement[1].toLowerCase()
+  let button = buttonMovement[0].toLowerCase()
+  let name
+  if (type.startsWith('PINCH')) name = 'pinch'
+  else if (type.endsWith('CLICK')) name = 'click'
+  else if (type.endsWith('DOUBLE_CLICK')) name = 'dblclick'
+  else if (type.startsWith('WHEEL')) name = 'wheel'
+  else name = 'mouse'
+
+  if (name === 'mouse') {
+    name += movement
+    button = buttonMapping[button]
+  } else if (name.endsWith('click')) {
+    button = buttonMapping[button]
+  } else if (name === 'pinch') {
+    name += movement
+    button = undefined
+  } else {
+    button = 1 // wheel
+  }
+
+  return { name, button }
+}

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

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

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

@@ -0,0 +1,17 @@
+import _ from 'lodash'
+import { utils as kdkCoreUtils } from '../../../../core/client/index.js'
+
+export function getTextTable (properties) {
+  properties = kdkCoreUtils.dotify(properties)
+  properties = _.pickBy(properties, value => !_.isNil(value))
+  const keys = _.keys(properties)
+  let text
+  if (keys.length === 0) return null
+  else if (keys.length === 1) text = _.get(properties, keys[0])
+  else {
+    text = keys
+      .map(key => key + ': ' + _.get(properties, key))
+      .join('\n')
+  }
+  return text
+}

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

@@ -0,0 +1,137 @@
+import _ from 'lodash'
+import chroma from 'chroma-js'
+import moment from 'moment'
+import Cesium from 'cesium/Source/Cesium.js'
+import { Time, Units } from '../../../../core/client/index.js'
+import { convertPointStyleToSimpleStyle, convertLineStyleToSimpleStyle, convertPolygonStyleToSimpleStyle, convertSimpleStyleColors,
+         convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
+         PointStyleTemplateMappings, LineStyleTemplateMappings, PolygonStyleTemplateMappings } from '../../utils/utils.style.js'
+
+export const CesiumStyleMappings = {
+  stroke: 'stroke',
+  'stroke-color': 'stroke',
+  'stroke-opaciy': 'stroke.alpha',
+  'stroke-width': 'strokeWidth',
+  fill: 'fill',
+  'fill-color': 'fill',
+  'fill-opacity': 'fill.alpha',
+  'marker-size': 'markerSize',
+  'marker-symbol': 'markerSymbol',
+  'marker-color': 'markerColor'
+}
+
+export const CesiumStyleOptions = _.values(CesiumStyleMappings)
+export const CesiumEntityTypes = ['billboard', 'box', 'corridor', 'cylinder', 'ellipse', 'ellipsoid',
+  'label', 'model', 'path', 'plane', 'point', 'polygon', 'polyline', 'rectangle', 'wall']
+
+export function convertToCesiumFromSimpleStyle (style, inPlace) {
+  if (!style) return {}
+  const convertedStyle = (inPlace ? style : {})
+  _.forOwn(style, (value, key) => {
+    if (_.has(CesiumStyleMappings, key)) {
+      const mapping = _.get(CesiumStyleMappings, key)
+      _.set(convertedStyle, mapping, value)
+      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))
+      }
+    }
+  })
+  return convertedStyle
+}
+
+function processStyle (style, feature, options, mappings) {
+  if (!options) return
+  const cesiumOptions = options.cesium || options
+  // We allow to template style properties according to feature,
+  // because it can be slow you have to specify a subset of properties
+  const context = { properties: feature.properties, feature, chroma, moment, Units, Time }
+  if (cesiumOptions.template) {
+    // Create the map of variables
+    if (options.variables) context.variables = _.reduce(options.variables,
+      (result, variable) => Object.assign(result, { [variable.name]: variable }), {})
+    cesiumOptions.template.forEach(entry => {
+      _.set(style, _.get(mappings, _.kebabCase(entry.property), entry.property), entry.compiler(context))
+    })
+  }
+  return style
+}
+
+export function getPointSimpleStyle (feature, options, engine, engineStylePath = 'style.point') {
+  const engineStyle = _.get(engine, engineStylePath, {})
+  const layerStyle = options ? _.get(options.cesium || options, 'layerPointStyle') : {}
+  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
+  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
+  processStyle({ style: { point: style } }, feature, options, PointStyleTemplateMappings)
+  return convertSimpleStyleColors(convertPointStyleToSimpleStyle(style))
+}
+
+export function getLineSimpleStyle (feature, options, engine, engineStylePath = 'style.line') {
+  const engineStyle = _.get(engine, engineStylePath, {})
+  const layerStyle = options ? _.get(options.cesium || options, 'layerLineStyle') : {}
+  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
+  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
+  processStyle({ style: { line: style } }, feature, options, LineStyleTemplateMappings)
+  return convertSimpleStyleColors(convertLineStyleToSimpleStyle(style))
+}
+
+export function getPolygonSimpleStyle (feature, options, engine, engineStylePath = 'style.polygon') {
+  const engineStyle = _.get(engine, engineStylePath, {})
+  const layerStyle = options ? _.get(options.cesium || options, 'layerPolygonStyle') : {}
+  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
+  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
+  processStyle({ style: { polygon: style } }, feature, options, PolygonStyleTemplateMappings)
+  return convertSimpleStyleColors(convertPolygonStyleToSimpleStyle(style))
+}
+
+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
+      const options = value.options
+      if (type && options) {
+        const constructor = type.replace('Cesium.', '')
+        // Take care to nested objects as constructor arguments
+        let args
+        if (options.type) {
+          // Create argument object
+          args = convertToCesiumObjects({ object: options })
+          args = args.object
+        } else {
+          args = convertToCesiumObjects(options)
+        }
+        if (Array.isArray(options)) return createCesiumObject(constructor, ...args)
+        else return createCesiumObject(constructor, args)
+      } else return convertToCesiumObjects(value)
+    } else if (typeof value === 'string') {
+      if (value.startsWith('Cesium.')) {
+        const constructor = value.replace('Cesium.', '')
+        return createCesiumObject(constructor)
+      }
+      const n = _.toNumber(value)
+      if (_.isFinite(n)) value = n
+    }
+    return value
+  }
+  if (typeof style === 'object') {
+    if (Array.isArray(style)) return style.map(mapValue)
+    else return _.mapValues(style, mapValue)
+  } else {
+    return _.mapValues({ value: style }, mapValue).value
+  }
+}

package/map/client/components/KCapture.vue

@@ -0,0 +1,50 @@
+<template>
+  <!--
+    Form section
+  -->
+  <KForm
+    ref="formRef"
+    :schema="schema"
+    class="q-pa-sm"
+  />
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import { Capture } from '../capture.js'
+import moment from 'moment'
+import captureSchema from '../../common/schemas/capture.create.json'
+import KForm from '../../../core/client/components/form/KForm.vue'
+
+// Data
+const formRef = ref(null)
+
+// computed
+const schema = computed(() => {
+  const dateTimePropertie = captureSchema.properties.dateTime
+  dateTimePropertie.default = {
+    start: moment.utc().toISOString(),
+    end: moment.utc().toISOString()
+  }
+  // TODO: could be dynamically computed from layers
+  // For archived data we have typically 10 years in layers
+  // For forecast data we have at most couple of weeks
+  dateTimePropertie.field = {
+    ...dateTimePropertie.field,
+    min: moment.utc().subtract(10, 'years').toISOString(),
+    max: moment.utc().add(1, 'months').toISOString()
+  }
+  return captureSchema
+})
+
+// Functions
+async function apply () {
+  const { isValid, values } = formRef.value.validate()
+  if (isValid) Capture.process(values)
+  return true
+}
+
+// Expose
+defineExpose({
+  apply
+})
+</script>

package/map/client/components/KCaptureTextArea.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="k-textarea-capture"
+    v-html="sanitizedText"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import _ from 'lodash'
+import config from 'config'
+import sanitizeHtml from 'sanitize-html'
+
+// props
+const props = defineProps({
+  text: {
+    type: String,
+    default: ''
+  },
+  position: {
+    type: String,
+    default: 'header'
+  }
+})
+
+// data
+const sanitizeHtmlOptions = {
+  ...sanitizeHtml.defaults,
+  allowedTags: sanitizeHtml.defaults.allowedTags.concat(['strike']),
+  allowedAttributes: _.merge(sanitizeHtml.defaults.allowedAttributes, { '*': ['style'] }),
+  allowedStyles: { '*': { 'text-align': [/^left$/, /^right$/, /^center$/] } }
+}
+
+// computed
+const sanitizedText = computed(() => {
+  return sanitizeHtml(props.text, sanitizeHtmlOptions)
+})
+const cssBackgroundColor = computed(() => {
+  return _.get(config, `capture.${props.position}.backgroundColor`)
+})
+const cssColor = computed(() => {
+  return _.get(config, `capture.${props.position}.color`)
+})
+</script>
+
+<style lang="scss" scoped>
+.k-textarea-capture {
+  background-color: v-bind(cssBackgroundColor);
+  color: v-bind(cssColor);
+  width: 100%;
+  padding: 5px 20px;
+}
+</style>

package/map/client/components/KCompass.vue

@@ -16,7 +16,7 @@
         points="50,25 40,70 50,60 60,70"
         :fill="getCssVar('primary')"
         :stroke="getCssVar('primary')"
-        :transform="`rotate(${direction}, 50, 50)`"
+        :transform="`rotate(${direction+180}, 50, 50)`"
       />
       <text x="50" y="7" text-anchor="middle" alignment-baseline="middle" font-size="8px" fill="white">
         {{ $t('KCompass.NORTH') }}
@@ -116,7 +116,7 @@ function computeDirection (x, y) {
   if (!center) return
   const dx = x - center.x
   const dy = y - center.y
-  direction.value = (Math.round(Math.atan2(dy, dx) * 180 / Math.PI) + 450) % 360
+  direction.value = (Math.round(Math.atan2(dy, dx) * 180 / Math.PI) + 270) % 360
 }
 function onHandleDrag (event) {
   const { x, y } = event.type.startsWith('touch') ? event.changedTouches[0] : event

package/map/client/components/KFeaturesChart.vue

@@ -108,7 +108,7 @@ export default {
     properties () {
       const properties = []
       _.forOwn(_.get(this.layer, 'schema.content.properties', {}), (value, key) => {
-        const label = _.get(value, 'field.label', _.get(value, 'field.helper', key))
+        const label = _.get(value, 'field.label', '')
         // Check if we have a translation key or directly the label content
         properties.push({ value: key, label: this.$tie(label) })
       })

package/map/client/components/KFeaturesFilter.vue

@@ -94,9 +94,9 @@ export default {
     properties () {
       const properties = []
       _.forOwn(this.fields, (value, key) => {
-        // Use helper or ID
+        // Use label or ID
         properties.push({
-          label: _.get(value, 'field.helper', key),
+          label: _.get(value, 'field.label', key),
           value: key
         })
       })