@kalisio/kdk 2.4.1 → 2.5.1

package/map/client/mixins/globe/mixin.geojson-layers.js

@@ -6,26 +6,42 @@ import { uid } from 'quasar'
 import { Time, Units } from '../../../../core.client.js'
 import { fetchGeoJson, getFeatureId, processFeatures, getFeatureStyleType, isInMemoryLayer } from '../../utils.js'
 import { convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle } from '../../utils/utils.style.js'
-import { convertToCesiumFromSimpleStyle, getPointSimpleStyle, getLineSimpleStyle, getPolygonSimpleStyle } from '../../cesium/utils/utils.style.js'
+import { convertToCesiumFromSimpleStyle, getPointSimpleStyle, getLineSimpleStyle, getPolygonSimpleStyle, convertToCesiumFromStyle } from '../../cesium/utils/utils.style.js'
+import { createPrimitiveWithMovingTexture, findPrimitiveForEntity } from '../../cesium/utils/utils.cesium.js'
+import { hasUnitInCesiumLayerTemplate, updateCesiumGeoJsonEntity, GeoJsonCesiumLayerFilters } from '../../cesium/utils/utils.geojson.js'
 
 // Custom entity types that can be created from a base entity like eg a polyline
-const CustomTypes = ['wall', 'corridor']
+const CustomTypes = ['wall', 'corridor', 'stroke']
 // Generate an id for a custom entity type, eg 'wall'
 function getCustomEntityId (id, type) {
   return `${id}-${type}`
 }
+// Generate original id from a custom id
+function getOriginalEntityId (customId, type) {
+  const suffix = `-${type}`
+  return customId.endsWith(suffix) ? customId.slice(0, -suffix.length) : ''
+}
+
+function addCustomPrimitive (activity, dataSource, id, primitive, material) {
+  const oldCustom = dataSource.primitives.get(id)
+  if (oldCustom) {
+    activity.viewer.scene.primitives.remove(oldCustom.primitive)
+    const index = activity.cesiumMaterials.indexOf(oldCustom.material)
+    activity.cesiumMaterials.splice(index, 1)
+  }
+  dataSource.primitives.set(id, { primitive, material })
+  activity.viewer.scene.primitives.add(primitive)
+  activity.cesiumMaterials.push(material)
+}
 
-function updateGeoJsonEntity(source, destination) {
-  destination.position = source.position
-  destination.orientation = source.orientation
-  destination.properties = source.properties
-  destination.description = source.description
-  // Points
-  if (source.billboard) destination.billboard = source.billboard
-  // Lines
-  if (source.polyline) destination.polyline = source.polyline
-  // Polygons
-  if (source.polygon) destination.polygon = source.polygon
+function removeCustomPrimitiveById (activity, dataSource, id) {
+  const custom = dataSource.primitives.get(id)
+  if (custom) {
+    activity.viewer.scene.primitives.remove(custom.primitive)
+    const index = activity.cesiumMaterials.indexOf(custom.material)
+    activity.cesiumMaterials.splice(index, 1)
+    dataSource.primitives.delete(id)
+  }
 }
 
 export const geojsonLayers = {
@@ -42,9 +58,9 @@ export const geojsonLayers = {
     },
     async loadGeoJson (dataSource, geoJson, options, updateOptions = {}) {
       const cesiumOptions = options.cesium
+      const features = (Array.isArray(geoJson) ? geoJson : (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson]))
       // Remove mode
       if (_.get(updateOptions, 'remove', false)) {
-        let features = (geoJson.type === 'FeatureCollection' ? geoJson.features : [geoJson])
         features.forEach(feature => {
           const id = getFeatureId(feature, options)
           CustomTypes.forEach(type => {
@@ -52,10 +68,14 @@ export const geojsonLayers = {
             if (dataSource.entities.getById(id)) dataSource.entities.removeById(id)
             // Take care that in case of a custom entity we add it in addition to or instead the original line
             if (dataSource.entities.getById(customId)) dataSource.entities.removeById(customId)
+            // These are special primitives created to support animated walls & corridors
+            removeCustomPrimitiveById(this, dataSource, customId)
           })
         })
+
         return
       }
+
       // We use a separated source in order to load data otherwise Cesium will replace previous ones, causing flickering
       const loadingDataSource = new GeoJsonDataSource()
       loadingDataSource.notFromDrop = true
@@ -63,22 +83,35 @@ export const geojsonLayers = {
       // Now we process loaded entities to merge with existing ones if any or add new ones
       let entities = loadingDataSource.entities.values
       entities.forEach(entity => {
+        // Find matching feature if any and keep track of it as Cesium only keeps properties
+        entity.feature = features.find(feature => getFeatureId(feature, options) === entity.id)
         const previousEntity = dataSource.entities.getById(entity.id)
-        if (previousEntity) updateGeoJsonEntity(entity, previousEntity)
+        if (previousEntity) updateCesiumGeoJsonEntity(entity, previousEntity)
         else dataSource.entities.add(entity)
       })
       // Remove any entity not existing anymore
       if (_.get(updateOptions, 'removeMissing', cesiumOptions.removeMissing)) {
+        const entitiesToRemove = []
         dataSource.entities.values.forEach(entity => {
           const id = entity.id
+          if (!loadingDataSource.entities.getById(id)) entitiesToRemove.push(id)
           CustomTypes.forEach(type => {
             const customId = getCustomEntityId(id, type)
-            if (!loadingDataSource.entities.getById(id)) dataSource.entities.removeById(id)
             // Take care that in case of a custom entity we add it in addition to or instead the original line
-            if (dataSource.entities.getById(customId)) dataSource.entities.removeById(customId)
+            if (dataSource.entities.getById(customId)) entitiesToRemove.push(customId)
           })
         })
+        entitiesToRemove.forEach(id => dataSource.entities.removeById(id))
+        // Cleanup custom primitives if needed too
+        for (const id of dataSource.primitives.keys()) {
+          CustomTypes.forEach(type => {
+            const entityId = getOriginalEntityId(id, type)
+            if (entityId && !loadingDataSource.entities.contains(entityId))
+              removeCustomPrimitiveById(this, dataSource, id)
+          })
+        }
       }
+
       // Process specific entities
       entities = dataSource.entities.values
       const entitiesToAdd = []
@@ -110,56 +143,81 @@ export const geojsonLayers = {
           entitiesToRemove.push(entity)
         }
         // Walls
-        const wall = _.get(properties, 'wall')
+        const wall = _.get(properties, 'wall') || _.get(properties, 'entityStyle.wall')
         if (wall && entity.polyline) {
           const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
           // Simply push the entity, other options like font will be set using styling options
           // This one will come in addition to the original line
           const wallId = getCustomEntityId(entity.id, 'wall')
-          entitiesToAdd.push({
-            id: wallId,
-            parent: entity,
-            name: entity.name ? entity.name : wallId,
-            description: entity.description.getValue(0),
-            properties: entity.properties.getValue(0),
-            wall: {
-              positions: entity.polyline.positions.getValue(0),
-              material: new ColorMaterialProperty(fill),
-              outlineColor: new ConstantProperty(stroke),
-              outlineWidth: strokeWidth,
-              outline: new ConstantProperty(true)
+
+          const texture = _.get(properties, 'entityStyle.wall.material.image')
+          if (texture && _.get(properties, 'entityStyle.wall.animateMaterialAlongPath', false)) {
+            const options = _.get(properties, 'entityStyle.wall')
+            options.positions = entity.polyline.positions.getValue(0)
+            const { primitive, material } = createPrimitiveWithMovingTexture('wall', options)
+            if (primitive) {
+              addCustomPrimitive(this, dataSource, wallId, primitive, material)
             }
-          })
+            entitiesToRemove.push(entity)
+          } else {
+            entitiesToAdd.push({
+              id: wallId,
+              parent: entity,
+              name: entity.name ? entity.name : wallId,
+              description: entity.description.getValue(0),
+              properties: entity.properties.getValue(0),
+              wall: {
+                positions: entity.polyline.positions.getValue(0),
+                material: new ColorMaterialProperty(fill),
+                outlineColor: new ConstantProperty(stroke),
+                outlineWidth: strokeWidth,
+                outline: new ConstantProperty(true)
+              }
+            })
+          }
         }
         // Corridors
-        const corridor = _.get(properties, 'corridor')
+        const corridor = _.get(properties, 'corridor') || _.get(properties, 'entityStyle.corridor')
         if (corridor && entity.polyline) {
           const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
           // Simply push the entity, other options like width be set using styling options
           // This one will come in replacement to the original line
           const corridorId = getCustomEntityId(entity.id, 'corridor')
-          entitiesToAdd.push({
-            id: corridorId,
-            parent: entity,
-            name: entity.name ? entity.name : corridorId,
-            description: entity.description.getValue(0),
-            properties: entity.properties.getValue(0),
-            corridor: {
-              positions: entity.polyline.positions.getValue(0),
-              material: new ColorMaterialProperty(fill),
-              outlineColor: new ConstantProperty(stroke),
-              outlineWidth: strokeWidth,
-              outline: new ConstantProperty(true)
+
+          const texture = _.get(properties, 'entityStyle.corridor.material.image')
+          if (texture && _.get(properties, 'entityStyle.corridor.animateMaterialAlongPath', false)) {
+            const options = _.get(properties, 'entityStyle.corridor')
+            options.positions = entity.polyline.positions.getValue(0)
+            const { primitive, material } = createPrimitiveWithMovingTexture('corridor', options)
+            if (primitive) {
+              addCustomPrimitive(this, dataSource, corridorId, primitive, material)
             }
-          })
-          entitiesToRemove.push(entity)
+            entitiesToRemove.push(entity)
+          } else {
+            entitiesToAdd.push({
+              id: corridorId,
+              parent: entity,
+              name: entity.name ? entity.name : corridorId,
+              description: entity.description.getValue(0),
+              properties: entity.properties.getValue(0),
+              corridor: {
+                positions: entity.polyline.positions.getValue(0),
+                material: new ColorMaterialProperty(fill),
+                outlineColor: new ConstantProperty(stroke),
+                outlineWidth: strokeWidth,
+                outline: new ConstantProperty(true)
+              }
+            })
+            entitiesToRemove.push(entity)
+          }
         }
         // Billboard with 'none' shape should be removed as Cesium creates it even if the maki icon id is unknown
         if (entity.billboard && (_.get(properties, 'marker-symbol') === 'none')) {
           entitiesToRemove.push(entity)
         }
         // Labels
-        const text = _.get(properties, 'icon-text')
+        const text = _.get(properties, 'icon-text') || _.get(properties, 'entityStyle.label.text')
+        const billboardImage = _.get(properties, 'entityStyle.billboard.image')
         if (text) {
           const { stroke, strokeWidth, fill } = this.convertFromSimpleStyleOrDefaults(properties)
           // Simply push the entity, other options like font will be set using styling options
@@ -175,10 +233,38 @@ export const geojsonLayers = {
               fillColor: new ConstantProperty(fill),
               outlineColor: new ConstantProperty(stroke),
               outlineWidth: strokeWidth
-            }
+            },
+            billboard: billboardImage ? { image: billboardImage } : undefined
           })
           entitiesToRemove.push(entity)
         }
+        // Clamped to ground polygons with stroke
+        // Need to add a new entity for stroke since Cesium does not support it
+        if (_.get(entity, 'polygon') && _.get(properties, 'entityStyle.polygon.perPositionHeight') === false) {
+          const strokeId = getCustomEntityId(entity.id, 'stroke')
+          const { stroke, strokeWidth } = this.convertFromSimpleStyleOrDefaults(properties)
+          const nullAltitude = _.every(_.get(entity, 'feature.geometry.coordinates[0]', []), coord => {
+            return coord.length > 2 && coord[2] === 0
+          })
+          if (nullAltitude) {
+            const strokeEntity = {
+              id: strokeId,
+              name: entity.name ? entity.name : strokeId,
+              description: entity.description.getValue(0),
+              properties: entity.properties.getValue(0),
+              polyline: {
+                positions: entity.polygon.hierarchy.getValue().positions,
+                width: strokeWidth,
+                material: stroke,
+                clampToGround: true
+              }
+            }
+            entitiesToAdd.push(strokeEntity)
+            if (dataSource.entities.getById(strokeEntity.id)) {
+              entitiesToRemove.push(strokeEntity)
+            }
+          }
+        }
       }
       entitiesToRemove.forEach(entity => dataSource.entities.remove(entity))
       entitiesToAdd.forEach(entity => dataSource.entities.add(entity))
@@ -200,7 +286,8 @@ export const geojsonLayers = {
           await this.loadGeoJson(dataSource, this.getFeatures(options), options, updateOptions)
         } else if (options.service) { // Check for feature service layers only, in this case update in place
           // If no probe reference, nothing to be initialized
-          await this.loadGeoJson(dataSource, this.getFeatures(options), options, updateOptions)
+          // Get original layer options to ensure we have the latest ones while getting features (e.g. filters toggle)
+          await this.loadGeoJson(dataSource, this.getFeatures(Object.assign({}, options, this.getLayerByName(options.name))), options, updateOptions)
         } else if (sourceTemplate) {
           const sourceToFetch = dataSource.sourceCompiler({ time: Time.getCurrentTime() })
           if (!dataSource.lastFetchedSource || (dataSource.lastFetchedSource !== sourceToFetch)) {
@@ -239,16 +326,49 @@ export const geojsonLayers = {
         if (!options.featureId && !feature._id) feature._id = uid().toString()
         // Cesium expect id to be in a 'id' property
         feature.id = getFeatureId(feature, options)
+
+        let type = getFeatureStyleType(feature)
+        if (_.has(feature, 'properties.entityStyle')) {
+          // Walls and corridors must be treated as polygons in style editor
+          if (_.has(feature, 'properties.entityStyle.wall')) type = 'polygon'
+          else if (_.has(feature, 'properties.entityStyle.corridor')) type = 'polygon'
+        }
+        if (_.get(feature, 'style.extrude')) type = 'polygon'
+
+        if (!_.has(feature, 'style')) {
+          // No style means first load
+          // Get feature style from properties (simple style)
+          const style = type === 'point'
+            ? convertSimpleStyleToPointStyle(feature.properties)
+            : type === 'line'
+              ? convertSimpleStyleToLineStyle(feature.properties)
+              : convertSimpleStyleToPolygonStyle(feature.properties)
+          _.set(feature, 'style', style)
+        }
+
         // We cannot access data outside the properties object of a feature in Cesium
         // As a consequence we copy back any style information inside
         // We need to convert to simple-style spec as cesium manages this only
         // We also need to merge all styling properties as some entities requires eg both line/polygon style (wall polylines or corridor polygons)
-        const simpleStyle = Object.assign(getPointSimpleStyle(feature, options, engine), getLineSimpleStyle(feature, options, engine), getPolygonSimpleStyle(feature, options, engine))
+        const stylePerType = {
+          point: getPointSimpleStyle(feature, options, engine),
+          line: getLineSimpleStyle(feature, options, engine),
+          polygon: getPolygonSimpleStyle(feature, options, engine)
+        }
+
+        // Apply the style according to the feature type to the end to prevent overriding
+        const simpleStyle = Object.assign(...Object.values(stylePerType), stylePerType[type])
+
         // Manage our extended simple-style spec
         const text = _.get(feature, 'style.text.label')
         if (text) simpleStyle['icon-text'] = text
         if (!feature.properties) feature.properties = simpleStyle
         else Object.assign(feature.properties, simpleStyle)
+
+        const cesiumStyle = convertToCesiumFromStyle(feature, options)
+        _.mergeWith(feature, cesiumStyle, (objValue, srcValue) => {
+          if (_.isArray(objValue)) return srcValue
+        })
       }
       // For activities
       if (_.has(this, 'activityOptions.engine.cluster')) {
@@ -314,6 +434,10 @@ export const geojsonLayers = {
       if (!dataSource || !dataSource.name) {
         dataSource = new GeoJsonDataSource()
         dataSource.notFromDrop = true
+
+        // This is where we'll store custom primitives used for animated walls/corridors.
+        // Key is feature id, value is associated primitive object
+        dataSource.primitives = new Map()
         // Check for realtime layers
         if (cesiumOptions.realtime) {
           await this.createCesiumRealtimeGeoJsonLayer(dataSource, options)
@@ -346,16 +470,18 @@ export const geojsonLayers = {
       // Retrieve the layer
       const layer = this.getCesiumLayerByName(name)
       if (!layer) return // Cannot update invisible layer
-      if (typeof layer.updateGeoJson === 'function') layer.updateGeoJson(geoJson, updateOptions)
+      // Update the geoJson layer
+      // Need to await to make zoomToLayer work properly on load
+      if (typeof layer.updateGeoJson === 'function') await layer.updateGeoJson(geoJson, updateOptions)
 
       // We keep geojson data for in memory layer in a cache since
       // these layers will be destroyed when hidden. We need to be able to restore
       // them when they get shown again
       const baseLayer = this.getLayerByName(name)
       if (isInMemoryLayer(baseLayer)) {
-        this.geojsonCache[name] = geoJson
+        this.geojsonCache[name] = await this.toGeoJson(name)
       }
-      this.onLayerUpdated(baseLayer, layer, { features: geoJson.features || [geoJson] })
+      this.onLayerUpdated(baseLayer, layer, { features: geoJson ? geoJson.features || [geoJson] : [] })
     },
     onLayerUpdated (layer, cesiumLayer, data) {
       this.$emit('layer-updated', layer, cesiumLayer, data)
@@ -363,19 +489,7 @@ export const geojsonLayers = {
     },
     onCurrentTimeChangedGeoJsonLayers (time) {
       // Need to update layers that require an update at a given frequency
-      const geoJsonlayers = _.values(this.layers).filter(sift({
-        // Possible for realtime layers only
-        'cesium.type': 'geoJson',
-        'cesium.realtime': true,
-        $or: [ // Supported by template URL or time-based features service
-          { 'cesium.sourceTemplate': { $exists: true } },
-          { service: { $exists: true } }
-        ],
-        // Skip layers powered by realtime service events
-        serviceEvents: { $ne: true },
-        // Skip invisible layers
-        isVisible: true
-      }))
+      const geoJsonlayers = _.values(this.layers).filter(sift(GeoJsonCesiumLayerFilters.TimeUpdate))
       geoJsonlayers.forEach(async geoJsonlayer => {
         // Retrieve the layer
         const dataSource = this.getCesiumLayerByName(geoJsonlayer.name)
@@ -391,32 +505,15 @@ export const geojsonLayers = {
         const units = _.map(Units.getUnits(quantity), 'name')
         // Need to update layers with variables affected by the unit change,
         // ie which style depends on it
-        let geoJsonlayers = _.values(this.layers).filter(sift({
-          'cesium.type': 'geoJson',
-          'cesium.realtime': true,
-          // Not sure why but this does not seem to work with sift
-          //'variables': { $elemMatch: { unit: { $in: units } } },
-          'variables': { $exists: true },
-          isVisible: true,
-          'cesium.style': { $exists: true },
-          'cesium.template': { $exists: true }
-        }))
+        let geoJsonlayers = _.values(this.layers).filter(sift(GeoJsonCesiumLayerFilters.UnitUpdate))
         // Check for each layer if it uses the target unit and templated style uses the unit system or not
         geoJsonlayers = geoJsonlayers.filter(layer => {
-          const unit = _.intersection(units, _.map(layer.variables, 'unit'))
-          if (_.isEmpty(unit)) return false
-          for (const template of layer.cesium.template) {
-            if (template.startsWith('style.')) {
-              const style = _.get(layer.cesium, template)
-              if ((typeof style === 'string') && style.includes('Units')) return true
-            }
-          }
-          return false
+          return hasUnitInCesiumLayerTemplate(units, layer)
         })
         // Then retrieve the engine layers and update
         geoJsonlayers.forEach(layer => {
           // Retrieve the layer
-          const dataSource = this.getCesiumLayerByName(geoJsonlayer.name)
+          const dataSource = this.getCesiumLayerByName(layer.name)
           dataSource.updateGeoJson()
         })
       })
@@ -439,6 +536,31 @@ export const geojsonLayers = {
       if (_.has(this.geojsonCache, layer.name)) {
         delete this.geojsonCache[layer.name]
       }
+    },
+    selectFeaturesForPostProcess (effect, layerName, featureIds) {
+      // Make sure post process is enabled
+      const stage = this.getPostProcessStage(effect)
+      if (!stage) return
+      // Make sure layer exists
+      const layer = this.getCesiumLayerByName(layerName)
+      if (!layer) return
+      // Expect layer to be a datasource
+      if (!layer.entities) return
+
+      const ids = Array.isArray(featureIds) ? featureIds : [ featureIds ]
+      const primitives = []
+      ids.forEach((id) => {
+        // Lookup entity based on featureId
+        const entity = layer.entities.getById(id)
+        if (!entity) return
+        // Lookup associated primitive
+        const primitive = findPrimitiveForEntity(entity, this.viewer)
+        if (!primitive) return
+
+        primitives.push(primitive)
+      })
+
+      stage.selected = primitives
     }
   },
   created () {

package/map/client/mixins/globe/mixin.popup.js

@@ -23,8 +23,9 @@ export const popup = {
         if (!text) {
           if (popupStyle.template) {
             const compiler = popupStyle.compiler
-            // FIXME: the whole feature is lost by Cesium so that top-level properties have disappeared
-            text = compiler({ feature: { properties }, properties, $t: this.$t, Units, Time, moment })
+            // The whole feature is lost by Cesium so that top-level properties have disappeared
+            // but we try to keep track of it eg in GeoJson layers
+            text = compiler({ feature: entity.feature || { properties }, properties, $t: this.$t, Units, Time, moment })
           } else if (popupStyle.pick) {
             properties = _.pick(properties, popupStyle.pick)
           } else if (popupStyle.omit) {

package/map/client/mixins/globe/mixin.style.js

@@ -57,7 +57,9 @@ export const style = {
         const entityStyle = _.cloneDeep(cesiumOptions.entityStyle)
         entityStyleTemplate.forEach(entry => {
           // Perform templating, set using simple spec mapping first then raw if property not found
-          let value = entry.compiler({ properties, chroma, moment, Units, Time })
+          // The whole feature is lost by Cesium so that top-level properties have disappeared
+          // but we try to keep track of it eg in GeoJson layers
+          let value = entry.compiler({ feature: entity.feature || { properties }, properties, chroma, moment, Units, Time })
           const property = entry.property
           // Handle specific case of orientation
           if ((property === 'orientation') && entity.position) {

package/map/client/mixins/globe/mixin.tooltip.js

@@ -38,8 +38,9 @@ export const tooltip = {
             if (text && (typeof text.toString === 'function')) text = text.toString()
           } else if (tooltipStyle.template) {
             const compiler = tooltipStyle.compiler
-            // FIXME: the whole feature is lost by Cesium so that top-level properties have disappeared
-            text = compiler({ feature: { properties }, properties, $t: this.$t, Units, Time, moment })
+            // The whole feature is lost by Cesium so that top-level properties have disappeared
+            // but we try to keep track of it eg in GeoJson layers
+            text = compiler({ feature: entity.feature || { properties }, properties, $t: this.$t, Units, Time, moment })
           }
         }
         if (text) {

package/map/client/mixins/map/index.js

@@ -1,8 +1,6 @@
 export * from './mixin.base-map.js'
 export * from './mixin.geojson-layers.js'
 export * from './mixin.file-layers.js'
-export * from './mixin.forecast-layers.js'
-export * from './mixin.georaster-layers.js'
 export * from './mixin.edit-layers.js'
 export * from './mixin.style.js'
 export * from './mixin.tooltip.js'
@@ -14,4 +12,4 @@ export * from './mixin.heatmap-layers.js'
 export * from './mixin.mapillary-layers.js'
 export * from './mixin.gsmap-layers.js'
 export * from './mixin.canvas-layers.js'
-export * from './mixin.pmtiles-layers.js'
+export * from './mixin.pmtiles-layers.js'