Merge pull request #139 from sigrennesmetropole/591-Tooltips

fix: various tooltips fixed

package.json

@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@pinia/testing": "^0.0.14",
-    "@sigrennesmetropole/cooperation_jn_common_ui": "0.0.31",
+    "@sigrennesmetropole/cooperation_jn_common_ui": "0.0.32",
     "@tailwindcss/forms": "^0.5.3",
-    "@vcmap-cesium/engine": "~2.3.1",
-    "@vcmap/core": "5.0.0-rc.32",
+    "@vcmap-cesium/engine": "~4.0.3",
+    "@vcmap/core": "5.0.2",
     "node-fetch": "^3.3.0",
-    "ol": "^7.1.0",
+    "ol": "^7.5.2",
     "pinia": "^2.0.21",
     "resize-observer-polyfill": "1.5.1",
     "rollup-plugin-strip-pragma": "^1.0.0",

src/components/home/TravelTimes.vue

@@ -27,7 +27,7 @@ onMounted(async () => {
       <UiButtonWithTooltip
         widthButton="4"
         heightButton="4"
-        positionRight="130px"
+        positionRight="125px"
         positionTop="5px"
         text="Les temps de parcours présentés sont estimés de façon théorique. Ils sont calculés à l'heure de pointe du matin en direction de Rennes et sont comparés aux temps de parcours théoriques actuels."
         widthBoxText="w-[280px]"

src/components/map/CompassComponent.vue

@@ -31,26 +31,26 @@ function syncCompass(map: VcsMap) {
 }
 
 const headingMap = async (event: { angle: number; animate: boolean }) => {
-  const vp = await rennesApp.maps?.activeMap.getViewpoint()
+  const vp = await rennesApp.maps?.activeMap!.getViewpoint()
   if (vp) {
     const vpJson: ViewpointOptions = vp?.toJSON() as ViewpointOptions
     vpJson.heading = event.angle
     vpJson.animate = event.animate
     vpJson.cameraPosition = undefined
     const newVp = new Viewpoint(vpJson)
-    rennesApp.maps?.activeMap.gotoViewpoint(newVp)
+    await rennesApp.maps?.activeMap!.gotoViewpoint(newVp)
   }
 }
 
 const tiltingMap = async (event: { tilt: number }) => {
-  const vp = await rennesApp.maps?.activeMap.getViewpoint()
+  const vp = await rennesApp.maps?.activeMap!.getViewpoint()
   if (vp && event.tilt) {
     const vpJson: ViewpointOptions = vp?.toJSON() as ViewpointOptions
     // Set the camera position to null to force its position recalculation
     vpJson.cameraPosition = undefined
     vpJson.pitch = event.tilt
     const newVp = new Viewpoint(vpJson)
-    rennesApp.maps?.activeMap.gotoViewpoint(newVp)
+    await rennesApp.maps?.activeMap!.gotoViewpoint(newVp)
   }
 }
 </script>

src/components/map/MapComponent.vue

@@ -82,7 +82,7 @@ onUnmounted(() => {
 })
 
 async function setLayerVisible(layerName: string, visible: boolean) {
-  const layer: Layer = rennesApp.maps.layerCollection.getByKey(layerName)
+  const layer: Layer = rennesApp.maps.layerCollection.getByKey(layerName)!
   if (visible) {
     await layer?.activate()
   } else {
@@ -114,30 +114,30 @@ async function updateViewPoint(viewPoint: string) {
     }
     stationsStore.setViewPointStation(viewpoint as Viewpoint)
 
-    await activeMap.gotoViewpoint(viewpoint!)
+    await activeMap!.gotoViewpoint(viewpoint!)
   } else {
     let selectedViewPoint = rennesApp.viewpoints.getByKey(viewPoint)
 
     if (selectedViewPoint) {
       if (map3dStore.is3D()) {
         selectedViewPoint = tiltViewpoint(selectedViewPoint!)
       }
-      await activeMap.gotoViewpoint(selectedViewPoint)
+      await activeMap!.gotoViewpoint(selectedViewPoint)
     } else {
       // go to home
       let homeViewPoint = rennesApp.viewpoints.getByKey('rennes')
       if (map3dStore.is3D()) {
         homeViewPoint = tiltViewpoint(homeViewPoint!)
       }
-      await activeMap.gotoViewpoint(homeViewPoint!)
+      await activeMap!.gotoViewpoint(homeViewPoint!)
     }
   }
 }
 
 async function updateActiveMap() {
   // Notes(IS): Currently there is no way to set custom tilt when switch active map
   // Get current tilt
-  const oldViewpoint = await rennesApp.maps.activeMap.getViewpoint()
+  const oldViewpoint = await rennesApp.maps.activeMap!.getViewpoint()
 
   await rennesApp.maps.setActiveMap(map3dStore.activeMap)
 
@@ -147,7 +147,7 @@ async function updateActiveMap() {
   } else {
     newViewpoint = untiltViewpoint(oldViewpoint!)
   }
-  await rennesApp.maps.activeMap.gotoViewpoint(newViewpoint)
+  await rennesApp.maps.activeMap!.gotoViewpoint(newViewpoint)
 }
 
 async function updateMapStyle() {

src/components/map/buttons/NavigationButtons.vue

@@ -40,13 +40,13 @@ async function toggle3DMap() {
 async function zoom(out = false, zoomFactor = 2): Promise<void> {
   const activeMap = rennesApp.maps.activeMap
   const viewpoint = await activeMap?.getViewpoint()
-  const maxZoom = rennesApp.get3DMap().getScene()
-    .screenSpaceCameraController.maximumZoomDistance
+  const maxZoom = rennesApp.get3DMap().getScene()!.screenSpaceCameraController
+    .maximumZoomDistance
 
   if (activeMap && viewpoint) {
-    let distance = viewpoint.distance / zoomFactor
+    let distance = viewpoint.distance! / zoomFactor
     if (out) {
-      distance = Math.min(viewpoint.distance * zoomFactor, maxZoom)
+      distance = Math.min(viewpoint.distance! * zoomFactor, maxZoom)
     }
     const newVp = cloneViewPointAndResetCameraPosition(viewpoint, distance)
     await rennesApp.maps?.activeMap.gotoViewpoint(newVp)
@@ -71,9 +71,9 @@ async function resetZoom() {
     let viewpoint = rennesApp.viewpoints.getByKey(mapStore.viewPoint)
     viewpoint = tiltViewpoint(viewpoint!)
     const activeMap = rennesApp.maps.activeMap
-    await activeMap.gotoViewpoint(viewpoint!)
+    await activeMap!.gotoViewpoint(viewpoint!)
   } else {
-    await rennesApp.maps?.activeMap.gotoViewpoint(
+    await rennesApp.maps?.activeMap!.gotoViewpoint(
       stationsStore.viewPointStation as Viewpoint
     )
   }
@@ -91,7 +91,7 @@ function setAlternativeMapChecked() {
 <template>
   <div
     :class="heightClass"
-    class="transition-[height] absolute right-2 bottom-10 flex flex-col [&>*]:m-2 text-gray-dark items-center w-32 select-none"
+    class="transition-[height] absolute right-2 bottom-10 flex flex-col [&>*]:m-2 text-gray-dark items-center w-32 select-none [&>*:last-child]:mb-0"
   >
     <UiIconButton
       class="rounded-lg"
@@ -176,7 +176,7 @@ function setAlternativeMapChecked() {
     <CompassComponent v-if="map3dStore.is3D()" />
   </div>
 
-  <div class="absolute right-[120px] bottom-10" v-if="!map3dStore.is3D()">
+  <div class="absolute right-[120px] bottom-10 h-12" v-if="!map3dStore.is3D()">
     <UiDescribeButton3D></UiDescribeButton3D>
   </div>
   <div class="absolute right-[130px] bottom-12" v-else>

src/components/ui/UiOverflowContainer.vue

@@ -56,14 +56,14 @@ const marginContents = computed(() => {
       <slot></slot>
     </div>
     <button
-      class="absolute z-10 bg-white w-9 h-9 shadow-lg top-1/2 left-2 transform -translate-y-1/2 rounded-lg flex items-start p-2.5"
+      class="absolute z-10 bg-white w-9 h-9 shadow-lg top-1/2 left-2 transform -translate-y-1/2 rounded-lg flex items-start p-2.5 hover:bg-neutral-100 hover:drop-shadow"
       @click="scroll(-250)"
       :class="{ hidden: isMostLeftPosition }"
     >
       <img :src="leftArrow" />
     </button>
     <button
-      class="absolute z-10 bg-white w-9 h-9 shadow-lg top-1/2 right-2 transform -translate-y-1/2 rounded-lg flex items-start p-2.5"
+      class="absolute z-10 bg-white w-9 h-9 shadow-lg top-1/2 right-2 transform -translate-y-1/2 rounded-lg flex items-start p-2.5 hover:bg-neutral-100 hover:drop-shadow"
       @click="scroll(250)"
       :class="{ hidden: isMostRightPosition }"
     >

src/helpers/featureHelper.ts

@@ -3,10 +3,14 @@ import type { Geometry } from 'ol/geom'
 import type { Cartesian2 } from '@vcmap-cesium/engine'
 import { getBalloonPosition } from '@/helpers/balloonHelper'
 import type { RennesApp } from '@/services/RennesApp'
+import type { Point } from 'ol/geom'
 
 export function getCartesianPositionFromFeature(
   rennesApp: RennesApp,
   feature: Feature<Geometry>
 ): Cartesian2 | undefined {
-  return getBalloonPosition(rennesApp, feature.getGeometry()!.getCoordinates())
+  return getBalloonPosition(
+    rennesApp,
+    (feature.getGeometry()! as Point).getCoordinates()
+  )
 }

src/helpers/stationHelper.ts

@@ -1,4 +1,4 @@
-import { LineString } from 'ol/geom'
+import { LineString, Point } from 'ol/geom'
 import type Feature from 'ol/Feature'
 
 export async function lineStringsFromStationPois(
@@ -7,8 +7,8 @@ export async function lineStringsFromStationPois(
 ) {
   const promises = pois.map(async (poi) => {
     const lineString = new LineString([
-      station?.getGeometry()?.getCoordinates(),
-      poi?.getGeometry()?.getCoordinates(),
+      (station?.getGeometry() as Point).getCoordinates(),
+      (poi?.getGeometry() as Point).getCoordinates(),
     ])
     return lineString
   })

src/helpers/traveltimesHelper.ts

@@ -1,9 +1,10 @@
 import type { TravelTimeModel } from '@/model/travel-time.model'
 import { RENNES_LAYER } from '@/stores/layers'
-import { LineString } from 'ol/geom'
+import { LineString, Point } from 'ol/geom'
 import type { RennesApp } from '@/services/RennesApp'
 import { getHeightFromTerrainProvider, mercatorProjection } from '@vcmap/core'
 import { Feature } from 'ol'
+import type { CesiumTerrainProvider } from '@vcmap-cesium/engine'
 
 export async function lineStringsFromTraveltimes(
   traveltimes: TravelTimeModel[],
@@ -28,10 +29,10 @@ export async function lineStringsFromTraveltimes(
 
       const [startCoordinate, endCoordinate] =
         await getHeightFromTerrainProvider(
-          cesiumMap.terrainProvider,
+          cesiumMap.terrainProvider as CesiumTerrainProvider,
           [
-            startTrambusStop?.getGeometry()?.getCoordinates(),
-            endTrambusStop?.getGeometry()?.getCoordinates(),
+            (startTrambusStop?.getGeometry() as Point).getCoordinates(),
+            (endTrambusStop?.getGeometry() as Point).getCoordinates(),
           ],
           mercatorProjection
         )
@@ -42,8 +43,8 @@ export async function lineStringsFromTraveltimes(
       return feature
     } else {
       const geom = new LineString([
-        startTrambusStop?.getGeometry()?.getCoordinates(),
-        endTrambusStop?.getGeometry()?.getCoordinates(),
+        (startTrambusStop?.getGeometry() as Point).getCoordinates(),
+        (endTrambusStop?.getGeometry() as Point).getCoordinates(),
       ])
       const feature = new Feature(geom)
       feature.setProperties({ ...traveltime })

src/helpers/viewpointHelper.ts

@@ -64,7 +64,7 @@ export function tiltViewpoint(viewpoint: Viewpoint, tiltDegree: number = 45) {
   vpJson.animate = true
   vpJson.duration = 0.5
 
-  vpJson.distance = viewpoint.distance * Math.sin(degreeToRadian(tiltDegree))
+  vpJson.distance = viewpoint.distance! * Math.sin(degreeToRadian(tiltDegree))
   vpJson.pitch = -tiltDegree
 
   const newVp = new Viewpoint(vpJson)
@@ -81,7 +81,7 @@ export function untiltViewpoint(
   vpJson.animate = true
   vpJson.duration = 0.5
 
-  vpJson.distance = viewpoint.distance / Math.sin(degreeToRadian(untiltDegree))
+  vpJson.distance = viewpoint.distance! / Math.sin(degreeToRadian(untiltDegree))
   vpJson.pitch = -90
 
   const newVp = new Viewpoint(vpJson)

src/interactions/clickAndMoveInteraction.ts

@@ -25,6 +25,7 @@ import { Style } from 'ol/style'
 import { displayCurrentPoi, undisplayCurrentPoi } from '@/services/poi'
 import { isTrambusStopBelongsToLine } from '@/services/station'
 import { usePanelsStore } from '@/stores/panels'
+import type { FeatureLike } from 'ol/Feature'
 
 class mapClickAndMoveInteraction extends AbstractInteraction {
   private _rennesApp: RennesApp
@@ -79,10 +80,10 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
     const lines: string[] = []
     if (event.map.className === 'OpenlayersMap') {
       const map = event.map as OpenlayersMap
-      map.olMap.forEachFeatureAtPixel(
+      map.olMap!.forEachFeatureAtPixel(
         [event.windowPosition.x, event.windowPosition.y],
-        (feat: Feature) => {
-          if (this.isFeatureLine(feat, lines)) {
+        (feat: FeatureLike) => {
+          if (this.isFeatureLine(feat as Feature, lines)) {
             lines.push(feat.get('li_nom'))
           }
         },
@@ -91,7 +92,7 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
     } else if (event.map.className === 'CesiumMap') {
       const cesiumMap = event.map as CesiumMap
       const scene = cesiumMap.getScene()
-      const pickedObjects = scene.drillPick(event.windowPosition)
+      const pickedObjects = scene!.drillPick(event.windowPosition)
       pickedObjects.forEach((object) => {
         if (object.primitive && object.primitive.olFeature) {
           const feature = object.primitive.olFeature
@@ -160,9 +161,9 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
     const lines: string[] = []
     if (event.map.className === 'OpenlayersMap') {
       const map = event.map as OpenlayersMap
-      map.olMap.forEachFeatureAtPixel(
+      map.olMap!.forEachFeatureAtPixel(
         [event.windowPosition.x, event.windowPosition.y],
-        (feat: Feature) => {
+        (feat: FeatureLike) => {
           if (feat.get('ligne')) {
             lines.push(feat.get('ligne'))
           }
@@ -172,7 +173,7 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
     } else if (event.map.className === 'CesiumMap') {
       const cesiumMap = event.map as CesiumMap
       const scene = cesiumMap.getScene()
-      const pickedObjects = scene.drillPick(event.windowPosition)
+      const pickedObjects = scene!.drillPick(event.windowPosition)
       pickedObjects.forEach((object) => {
         if (object.primitive && object.primitive.olFeature) {
           const feature = object.primitive.olFeature
@@ -189,9 +190,9 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
     const lines: string[] = []
     if (event.map.className === 'OpenlayersMap') {
       const map = event.map as OpenlayersMap
-      map.olMap.forEachFeatureAtPixel(
+      map.olMap!.forEachFeatureAtPixel(
         [event.windowPosition.x, event.windowPosition.y],
-        (feat: Feature) => {
+        (feat: FeatureLike) => {
           if (feat.get('li_num')) {
             lines.push(feat.get('li_num'))
           }
@@ -201,7 +202,7 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
     } else if (event.map.className === 'CesiumMap') {
       const cesiumMap = event.map as CesiumMap
       const scene = cesiumMap.getScene()
-      const pickedObjects = scene.drillPick(event.windowPosition)
+      const pickedObjects = scene!.drillPick(event.windowPosition)
       pickedObjects.forEach((object) => {
         if (object.primitive && object.primitive.olFeature) {
           const feature = object.primitive.olFeature
@@ -215,17 +216,25 @@ class mapClickAndMoveInteraction extends AbstractInteraction {
   }
 
   isBike(event: InteractionEvent) {
+    // @ts-ignore
     return event.feature?.[vcsLayerName] === RENNES_LAYER.bike
   }
 
   async pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    // @ts-ignore
     const isFeatureTrambusStpos =
+      // @ts-ignore
       event.feature?.[vcsLayerName] === RENNES_LAYER.trambusStops
     const isFeatureLine =
+      // @ts-ignore
       event.feature?.[vcsLayerName] === RENNES_LAYER.trambusLines
+    // @ts-ignore
     const isFeaturePOI = event.feature?.[vcsLayerName] === RENNES_LAYER.poi
+    // @ts-ignore
     const isFeatureMetro = event.feature?.[vcsLayerName] === RENNES_LAYER.metro
+    // @ts-ignore
     const isFeatureBus = event.feature?.[vcsLayerName] === RENNES_LAYER.bus
+    // @ts-ignore
     const isFeatureBike = event.feature?.[vcsLayerName] === RENNES_LAYER.bike
 
     if (isFeatureTrambusStpos) {