@kalisio/kdk 2.5.2 → 2.6.0

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

@@ -126,7 +126,9 @@ export function createMarkerFromPointStyle (latlng, style) {
     logger.warn(`[KDK] 'latlng' should be defined`)
     return
   }
-  return L.shapeMarker(latlng, style)
+  const shape = _.get(style, 'shape', 'circle')
+  if (shape === 'none' || _.has(kdkCoreUtils.Shapes, shape)) return L.shapeMarker(latlng, style)
+  return L[shape](latlng, style)
 }
 
 export function convertLineStyleToLeafletPath (style) {
@@ -147,12 +149,12 @@ export function convertPolygonStyleToLeafletPath (style) {
   return leafletStyle
 }
 
-function processStyle (style, feature, options, mappings) {
+function processStyle (style, feature, options, mappings, zoom) {
   if (!options) return
   const leafletOptions = options.leaflet || 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 = Object.assign({ properties: feature.properties, feature, chroma, moment, Units, Time }, TemplateContext.get())
+  const context = Object.assign({ properties: feature.properties, feature, zoom, chroma, moment, Units, Time }, TemplateContext.get())
   if (leafletOptions.template) {
     // Create the map of variables
     if (options.variables) context.variables = _.reduce(options.variables,
@@ -180,29 +182,26 @@ function processStyle (style, feature, options, mappings) {
   return style
 }
 
-export function getDefaultPointStyle (feature, options, engine, engineStylePath = 'style.point') {
-  const engineStyle = _.get(engine, engineStylePath, {})
+export function getDefaultPointStyle (feature, options, engineStyle = {}, zoom) {
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPointStyle') : {}
-  const templateStyle = processStyle({ style: { point: _.merge({}, engineStyle, layerStyle) } }, feature, options, PointStyleTemplateMappings)
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
+  const templateStyle = processStyle({ style: { point: _.merge({}, engineStyle, layerStyle) } }, feature, options, PointStyleTemplateMappings, zoom)
+  const featureStyle = _.get(options, 'ignoreFeatureStyle') ? {} : feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
   const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.point : {}, featureStyle)
   return style
 }
 
-export function getDefaultLineStyle (feature, options, engine, engineStylePath = 'style.line') {
-  const engineStyle = _.get(engine, engineStylePath, {})
+export function getDefaultLineStyle (feature, options, engineStyle = {}, zoom) {
   const layerStyle = options ? _.get(options.leaflet || options, 'layerLineStyle') : {}
-  const templateStyle = processStyle({ style: { line: _.merge({}, engineStyle, layerStyle) } }, feature, options, LineStyleTemplateMappings)
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
+  const templateStyle = processStyle({ style: { line: _.merge({}, engineStyle, layerStyle) } }, feature, options, LineStyleTemplateMappings, zoom)
+  const featureStyle = _.get(options, 'ignoreFeatureStyle') ? {} : feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
   const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.line : {}, featureStyle)
   return convertLineStyleToLeafletPath(style)
 }
 
-export function getDefaultPolygonStyle (feature, options, engine, engineStylePath = 'style.polygon') {
-  const engineStyle = _.get(engine, engineStylePath, {})
+export function getDefaultPolygonStyle (feature, options, engineStyle = {}, zoom) {
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPolygonStyle') : {}
-  const templateStyle = processStyle({ style: { polygon: _.merge({}, engineStyle, layerStyle) } }, feature, options, PolygonStyleTemplateMappings)
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
+  const templateStyle = processStyle({ style: { polygon: _.merge({}, engineStyle, layerStyle) } }, feature, options, PolygonStyleTemplateMappings, zoom)
+  const featureStyle = _.get(options, 'ignoreFeatureStyle') ? {} : feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
   const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.polygon : {}, featureStyle)
   return convertPolygonStyleToLeafletPath(style)
 }

package/map/client/mixins/globe/mixin.base-globe.js

@@ -1,15 +1,18 @@
 import _ from 'lodash'
 import sift from 'sift'
 import logger from 'loglevel'
-import Emitter from 'tiny-emitter'
-import { getCssVar } from 'quasar'
+import { EventBus, getCssVar } from 'quasar'
 import { Ion, Viewer, Color, viewerCesiumInspectorMixin, Rectangle, ScreenSpaceEventType, ScreenSpaceEventHandler, buildModuleUrl,
          Cesium3DTileset, ImageryLayer, Cartesian3, PinBuilder, BoundingSphere, Ellipsoid, Cartographic, Entity, EntityCollection,
-         exportKml, VerticalOrigin, Transforms, Quaternion, HeadingPitchRoll, Matrix3, Matrix4, DebugCameraPrimitive, DebugModelMatrixPrimitive, Math as CesiumMath } from 'cesium'
+         exportKml, VerticalOrigin, Transforms, HeadingPitchRoll, HeadingPitchRange, Matrix3, Matrix4, DebugCameraPrimitive, 
+         DebugModelMatrixPrimitive, Math as CesiumMath } from 'cesium'
+// We need to import cesium as an object to dynamically get constructors
+import * as Cesium from 'cesium'
 import 'cesium/Source/Widgets/widgets.css'
 import { Geolocation } from '../../geolocation.js'
-import { Cesium, convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson, createCesiumObject } from '../../utils.globe.js'
+import { convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson, createCesiumObject } from '../../utils.globe.js'
 import { generateLayerDefinition } from '../../utils/utils.layers.js'
+import * as maths from '../../../../core/client/utils/utils.math.js'
 
 // The URL on our server where CesiumJS's static files are hosted
 window.CESIUM_BASE_URL = '/Cesium/'
@@ -47,7 +50,8 @@ export const baseGlobe = {
         animation: false,
         timeline: false,
         depthTestAgainstTerrain: false,
-        cameraMoveEventPercentage: 0.2
+        cameraMoveEventPercentage: 0.2,
+        entityLoadTextureDelay: 24
       })
       if (token) Ion.defaultAccessToken = token
       // If we don't need ion
@@ -68,20 +72,23 @@ export const baseGlobe = {
         this.viewer.scene.globe.undergroundColor = (undergroundColor ? createCesiumObject('Color', ...undergroundColor) : Color.BLACK)
       }
 
-      // Cesium pre-render callback used to update moving materials (animated walls/corridors)
-      this.viewer.scene.preRender.addEventListener(() => {
-        if (!this.cesiumMaterials) return
-        _.forEach(this.cesiumMaterials, m => {
-          if (!m.material.uniforms.offset) return
-          if (!m.startTime) m.startTime = Date.now()
-
-          const elapsed = (Date.now() - m.startTime) * 0.001
-          if (m.animationSpeed) {
-            const loopDuration = (m.length / m.material.uniforms.repeat.x) / m.animationSpeed
-            m.material.uniforms.offset.x = (elapsed % loopDuration) / loopDuration
+      // Enable picking for primitives. Usefull for primitives selection with post processing
+      if (!_.has(Cesium.Primitive.prototype, 'pickIds')) {
+        Object.defineProperties(Cesium.Primitive.prototype, {
+          pickIds: {
+            get: function () {
+              return this._pickIds
+            },
+            set: function (value) {
+              this._pickIds = value
+            }
           }
         })
-      })
+      }
+
+      // Scene events
+      this.viewer.scene.preUpdate.addEventListener(this.onCesiumPreUpdate)
+      this.viewer.scene.preRender.addEventListener(this.onCesiumPreRender)
 
       // Debug mode ?
       // this.viewerOptions.debug = true
@@ -252,8 +259,10 @@ export const baseGlobe = {
         if (!this.viewer.scene.primitives.contains(cesiumLayer)) this.viewer.scene.primitives.add(cesiumLayer)
       } else { // Entity data source otherwise
         // Handle potential custom primitives
-        for (const [id, custom] of cesiumLayer.primitives)
-          custom.primitive.show = true
+        if (cesiumLayer.primitives) {
+          for (const [id, custom] of cesiumLayer.primitives)
+            custom.primitive.show = true
+        }
         this.viewer.dataSources.add(cesiumLayer)
       }
       layer.isVisible = true
@@ -281,8 +290,10 @@ export const baseGlobe = {
         cesiumLayer.show = false
       } else { // Entity data source otherwise
         // Hide custom primitives before removing the data source
-        for (const [id, custom] of cesiumLayer.primitives)
-          custom.primitive.show = false
+        if (cesiumLayer.primitives) {
+          for (const [id, custom] of cesiumLayer.primitives)
+            custom.primitive.show = false
+        }
         this.viewer.dataSources.remove(cesiumLayer, true)
       }
       this.onLayerHidden(layer, cesiumLayer)
@@ -307,15 +318,17 @@ export const baseGlobe = {
       this.$emit('layer-added', layer)
       this.$engineEvents.emit('layer-added', layer)
     },
-    async addGeoJsonLayer (layerSpec, geoJson) {
+    async addGeoJsonLayer (layerSpec, geoJson, zoom) {
       if (!generateLayerDefinition(layerSpec, geoJson)) return
       // Create an empty layer
       await this.addLayer(layerSpec)
       // Update the layer with the geoJson content
       await this.updateLayer(layerSpec.name, geoJson)
       // Zoom to the layer
-      if (geoJson.bbox) this.zoomToBBox(geoJson.bbox)
-      else this.zoomToLayer(layerSpec.name)
+      if (zoom) {
+        if (geoJson.bbox) this.zoomToBBox(geoJson.bbox)
+        else this.zoomToLayer(layerSpec.name)
+      }
     },
     renameLayer (previousName, newName) {
       const layer = this.getLayerByName(previousName)
@@ -489,29 +502,115 @@ export const baseGlobe = {
         altitude: position.height,
         heading: CesiumMath.toDegrees(this.viewer.camera.heading),
         pitch: CesiumMath.toDegrees(this.viewer.camera.pitch),
-        roll: CesiumMath.toDegrees(this.viewer.camera.roll)
+        roll: CesiumMath.toDegrees(this.viewer.camera.roll),
+        fovy: this.viewer.camera.frustum.fovy,
+        viewMatrix: this.viewer.camera.viewMatrix,
+        inverseViewMatrix: this.viewer.camera.inverseViewMatrix
       }
     },
+    getAnimatedHeading (timestamp) {
+      if (!this.headingAnimation.startTime) this.headingAnimation.startTime = timestamp
+      const { duration, startTime, easing, startHeading, endHeading } = this.headingAnimation
+      const elapsed = timestamp - startTime
+      const percent = Math.abs(elapsed / (1000 * duration))
+      if (percent > 1) {
+        return endHeading
+      }
+
+      const easingFunction = _.get(easing, 'function', 'cubicBezier')
+      const easingParameters = _.get(easing, 'parameters', [])
+      const percentHeading = maths[easingFunction](percent, ...easingParameters)
+
+      return CesiumMath.lerp(
+        startHeading,
+        endHeading,
+        percentHeading
+      )
+    },
     onEntityTracked (time) {
+      const getSmallestAngle = (start, end) => {
+        let diff = (end - start + Math.PI) % (2 * Math.PI)
+        if (diff < 0) diff += 2 * Math.PI
+        return diff - Math.PI
+      }
+
       if (this.viewerOptions.debug) {
         if (this.trackedFrameDebug) {
           this.trackedFrameDebug.modelMatrix = this.viewer.trackedEntity.computeModelMatrix(time)
         } else {
           this.trackedFrameDebug = new DebugModelMatrixPrimitive({
-            modelMatrix : this.viewer.trackedEntity.computeModelMatrix(time),
-            length : 25,
-            width : 5
+            modelMatrix: this.viewer.trackedEntity.computeModelMatrix(time),
+            length: 25,
+            width: 5
           })
           this.viewer.scene.primitives.add(this.trackedFrameDebug)
         }
       }
+
+      if (!this.viewer.trackedEntity || !_.get(this.entityTrackingOptions, 'mode')) return
+      const mode = this.entityTrackingOptions.mode
+      const currentTime = Date.now()
+      // If we are in free look mode, we don't want to force camera position
+      if (mode === 'freeLook' && !_.get(this.entityTrackingOptions, 'resetHeading')) return
+
+      const targetPosition = this.viewer.trackedEntity.position.getValue(time)
+      const orientation = this.viewer.trackedEntity.orientation.getValue(time)
+      if (!orientation) return
+
+      const distance = _.get(this.entityTrackingOptions, 'distance', 10)
+      const headingOffset = CesiumMath.toRadians(_.get(this.entityTrackingOptions, 'offset.heading', 0))
+      const pitchOffset = CesiumMath.toRadians(_.get(this.entityTrackingOptions, 'offset.pitch', 0))
+      const headingPitchRoll = HeadingPitchRoll.fromQuaternion(orientation)
+      if (_.get(this.entityTrackingOptions, 'animate')) {
+        if (!this.headingAnimation) {
+          this.headingAnimation = {
+            ...this.entityTrackingOptions,
+            startTime: currentTime,
+            startHeading: this.viewer.camera.heading - headingOffset,
+            endHeading: mode === 'freeLook' ? 0 - headingOffset : headingPitchRoll.heading
+          }
+
+          // Fix endHeading to get shortest angle
+          this.headingAnimation.endHeading = this.headingAnimation.startHeading + getSmallestAngle(this.headingAnimation.startHeading, this.headingAnimation.endHeading)
+        } else if (mode === 'followOrientation') {
+          // If we are already animating, update the end heading
+          this.headingAnimation.endHeading = this.headingAnimation.startHeading + getSmallestAngle(this.headingAnimation.startHeading, headingPitchRoll.heading)
+        }
+      }
+
+      // Compute heading with animation
+      let heading = 0
+      if (_.get(this.entityTrackingOptions, 'animate')) {
+        heading = this.getAnimatedHeading(currentTime)
+        if (heading === this.headingAnimation.endHeading) {
+          _.set(this.entityTrackingOptions, 'animate', false)
+          _.set(this.entityTrackingOptions, 'resetHeading', false)
+          this.headingAnimation = null
+        }
+      } else if (mode === 'followOrientation') {
+        heading = headingPitchRoll.heading
+      }
+
+      const position = new Cartesian3(
+        targetPosition.x + _.get(this.entityTrackingOptions, 'offset.x', 0),
+        targetPosition.y + _.get(this.entityTrackingOptions, 'offset.y', 0),
+        targetPosition.z + _.get(this.entityTrackingOptions, 'offset.z', 0)
+      )
+      const cameraOffset = new HeadingPitchRange(
+        heading + headingOffset,
+        pitchOffset,
+        distance
+      )
+
+      this.viewer.camera.lookAt(new Cartesian3(position.x, position.y, position.z), cameraOffset)
     },
     trackEntity (entityId, options = {}) {
+      let newEntity = null
       // Check for entities directly added to the viewer
       this.viewer.entities.values.forEach(entity => {
         if (entityId === entity.id) {
           // Make the camera track this entity
-          this.viewer.trackedEntity = entity
+          newEntity = entity
         }
       })
       // Check for external data sources
@@ -520,13 +619,20 @@ export const baseGlobe = {
         source.entities.values.forEach(entity => {
           if (entityId === entity.id) {
             // Make the camera track this entity
-            this.viewer.trackedEntity = entity
+            newEntity = entity
           }
         })
       }
-      if (this.viewer.trackedEntity) {
-        this.viewer.clock.onTick.addEventListener(this.onEntityTracked)
-      }
+
+      if (!newEntity) return
+      this.entityTrackingOptions = options
+      _.set(this.entityTrackingOptions, 'animate', true)
+      if (newEntity === this.viewer.trackedEntity) return
+
+      // Untrack previous entity
+      this.untrackEntity()
+      this.viewer.trackedEntity = newEntity
+      this.viewer.clock.onTick.addEventListener(this.onEntityTracked)
     },
     untrackEntity () {
       if (this.viewer.trackedEntity) {
@@ -673,6 +779,46 @@ export const baseGlobe = {
         altitude: pickedPositionCartographic.height
       }
     },
+    onCesiumPreUpdate () {
+      // Update animated entities
+      const endedAnimationsIndexes = []
+      const interpolatedFeaturesByLayer = {}
+      _.forOwn(this.cesiumAnimations, async (animation, key) => {
+        const now = Date.now()
+        if (animation.fps && animation.lastUpdate && (now - animation.lastUpdate < (1000 / animation.fps))) return
+        const delta = now - animation.lastUpdate
+        animation.remainingTime -= delta
+        if (animation.remainingTime <= 0) {
+          endedAnimationsIndexes.push(key)
+          return
+        }
+
+        interpolatedFeaturesByLayer[key] = this.getInterpolatedFeatures(1 - (animation.remainingTime / animation.duration), animation.features, animation.animate)
+
+        animation.lastUpdate = now
+      })
+      // Remove ended animations
+      _.forEach(endedAnimationsIndexes, key => delete this.cesiumAnimations[key])
+
+      // Update layers with interpolated features
+      _.forOwn(interpolatedFeaturesByLayer, async (features, layerName) => {
+        await this.updateLayer(layerName, { type: 'FeatureCollection', features })
+      })
+    },
+    onCesiumPreRender () {
+      // Update moving materials (animated walls/corridors)
+      if (!this.cesiumMaterials) return
+      _.forEach(this.cesiumMaterials, m => {
+        if (!m.material.uniforms.offset) return
+        if (!m.startTime) m.startTime = Date.now()
+
+        const elapsed = (Date.now() - m.startTime) * 0.001
+        if (m.animationSpeed) {
+          const loopDuration = (m.length / m.material.uniforms.repeat.x) / m.animationSpeed
+          m.material.uniforms.offset.x = (elapsed % loopDuration) / loopDuration
+        }
+      })
+    },
     onCameraMoveStart () {
       let target = this.getCameraEllipsoidTarget()
       if (target) {
@@ -735,10 +881,11 @@ export const baseGlobe = {
     this.cesiumFactory = []
     this.cesiumMaterials = []
     this.cesiumPostProcessStages = {}
+    this.cesiumAnimations = {}
     // TODO: no specific marker, just keep status
     this.userLocation = false
     // Internal event bus
-    this.$engineEvents = new Emitter()
+    this.$engineEvents = new EventBus()
   },
   beforeUnmount () {
     this.clearLayers()

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

@@ -26,9 +26,12 @@ export const fileLayers = {
           label: source.name,
           type: 'OverlayLayer',
           icon: 'insert_drive_file',
+          scope: 'user',
+          isDataEditable: true,
           cesium: {
             type: 'geoJson',
             isVisible: true,
+            realtime: true,
             cluster: _.get(fileLayersOptions, 'cluster', { pixelRange: 50 }),
             entityStyle: _.get(fileLayersOptions, 'entityStyle'),
             source: source.name // Set the data source name instead of URL in this case