Merge branch 'chore/SD-1526-ui-maps-fixes' into chore/ts-ci-test

Author: jeffdowdle

packages/ripple-ui-maps/src/components/map/RplMap.vue

@@ -4,7 +4,11 @@ let mapAccentColor: string = ''
 
 <script setup lang="ts">
 import { RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
-import type { IRplMapFeature, IRplMapLayer } from './../../types'
+import type {
+  IRplMapFeature,
+  IRplMapInstance,
+  IRplMapLayer
+} from './../../types'
 import {
   onMounted,
   onUnmounted,
@@ -26,7 +30,7 @@ import RplMapCluster from './../cluster/RplMapCluster.vue'
 import RplMapLayerList from './../layer-list/RplMapLayerList.vue'
 import markerIconDefaultSrc from './../feature-pin/icon-pin.svg?url'
 import markerIconSelectedSrc from './../feature-pin/icon-pin-selected.svg?url'
-import useMapControls from './../../composables/useMapControls.ts'
+import useMapControls from './../../composables/useMapControls'
 import {
   getfeaturesAtMapPixel,
   zoomToClusterExtent,
@@ -49,7 +53,7 @@ interface Props {
   pinStyle?: Function
   centerActivePin?: boolean
   mapHeight?: number
-  popupType?: 'sidebar' | 'popover'
+  popupType?: 'sidebar' | 'popover' | 'sidepanel'
   hasSidePanel?: boolean
   noresults?: boolean
   getFeatureTitle?: (feature: any) => string
@@ -73,7 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
   hasSidePanel: false,
   initialCenter: () => [144.9631, -36.8136], // melbourne CBD
   homeViewExtent: () => [144.9631, -36.8136], // melbourne CBD
-  pinStyle: (feature) => {
+  pinStyle: (feature: IRplMapFeature) => {
     let color = feature.color || mapAccentColor || 'red'
     const ic = new Icon({
       src: markerIconDefaultSrc,
@@ -94,7 +98,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'updateSelectedLayers', payload: [value: string[]]): void
+  (e: 'updateSelectedLayers', value: string[]): void
   (e: 'togglePopup', payload: rplEventPayload & { action: 'open' }): void
 }>()
 
@@ -103,10 +107,16 @@ const { emitRplEvent } = useRippleEvent('rpl-map', emit)
 const zoom = ref(props.initialZoom)
 const rotation = ref(0)
 const view = ref(null)
-const mapPosition = ref({})
+const mapPosition = ref<{
+  center: number[] | undefined
+  zoom: number | undefined
+}>({
+  center: undefined,
+  zoom: undefined
+})
 
 const { setRplMapRef, popup, deadSpace, defaultExtent } =
-  inject('rplMapInstance')
+  inject<IRplMapInstance>('rplMapInstance')
 
 // Reference to ol/map instance
 const mapRef = ref<{ map: Map } | null>(null)
@@ -314,7 +324,7 @@ watch(
   () => popup.value,
   (newPopup) => {
     if (newPopup.isOpen) {
-      let title = popup.value?.title
+      let title: string | string[] = popup.value?.title
       const features = Array.isArray(popup.value?.feature)
         ? popup.value.feature
         : [popup.value.feature]

packages/ripple-ui-maps/src/components/map/__fixture__/VectorLayer.example.vue

@@ -12,6 +12,7 @@
 <script setup lang="ts">
 import { GeoJSON } from 'ol/format'
 import { Style, Fill, Stroke } from 'ol/style'
+import { IRplMapInstance } from '../../../types'
 import { computed, inject, onMounted, nextTick } from 'vue'
 interface Props {
   results: any[]
@@ -47,7 +48,7 @@ const areaUrl = computed(() => {
 
   return arcGISURL
 })
-const { rplMapRef, popup } = inject('rplMapInstance')
+const { rplMapRef, popup } = inject<IRplMapInstance>('rplMapInstance')
 
 const defaultStyleFn = new Style({
   fill: new Fill({

packages/ripple-ui-maps/src/components/map/utils.ts

@@ -3,6 +3,7 @@ import { transform, transformExtent } from 'ol/proj.js'
 import { getDistance } from 'ol/sphere.js'
 import { inAndOut } from 'ol/easing.js'
 import Map from 'ol/Map.js'
+import { MapDeadSpace } from '../../types'
 
 export const haversineDistance = (coord1, coord2) => getDistance(coord1, coord2)
 
@@ -186,13 +187,6 @@ export const centerMap = (
   })
 }
 
-type MapDeadSpace = {
-  top?: number
-  bottom?: number
-  left?: number
-  right?: number
-}
-
 type MapDefaultExtent = [number, number, number, number]
 
 export const fitExtent = (

packages/ripple-ui-maps/src/composables/useMapControls.ts

@@ -2,9 +2,10 @@ import { inject, ref, onMounted } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { easeOut } from 'ol/easing'
 import { fitDefaultExtent } from './../components/map/utils'
+import { IRplMapInstance } from '../types'
 
 export default (mapRef) => {
-  const { deadSpace, defaultExtent } = inject('rplMapInstance')
+  const { deadSpace, defaultExtent } = inject<IRplMapInstance>('rplMapInstance')
 
   const isFullScreen = ref(false)
   const supportsFullScreen = ref(false)

packages/ripple-ui-maps/src/types.ts

@@ -1,14 +1,42 @@
+import type { Ref } from 'vue'
+
 export interface IRplMapFeature {
   id: string
   lat: number
   lng: number
   title?: string
   description?: string
   data?: Record<string, any>
+  color?: string
 }
 
 export interface IRplMapLayer {
   id: string
   label: string
   image: string
 }
+
+export type MapDeadSpace = {
+  top?: number
+  bottom?: number
+  left?: number
+  right?: number
+}
+
+export interface IRplMapPopup {
+  title?: string
+  isOpen: boolean
+  position: number[]
+  feature?: any
+  trigger?: any
+  color?: string
+  isArea?: boolean
+}
+
+export interface IRplMapInstance {
+  rplMapRef: Ref<any>
+  setRplMapRef: (mapInstance: any) => void
+  popup: Ref<IRplMapPopup>
+  defaultExtent: [number, number, number, number]
+  deadSpace: Ref<MapDeadSpace>
+}