From e69b7700b94cc3df0ff8614fac349c7f79f902e5 Mon Sep 17 00:00:00 2001 From: guichoquette <159962452+guichoquette@users.noreply.github.com> Date: Tue, 16 Jul 2024 14:44:45 -0400 Subject: [PATCH] 2366 aoi UI implementation phase1 (#2367) * Aoi ui phase 1 * Complete Version of AOI package * Complete Version of AOI package with zoom fixed * ready for testing * correction asked --- packages/geoview-aoi-panel/schema.json | 2 + packages/geoview-aoi-panel/src/aoi-panel.tsx | 88 ++++++++++++------- .../src/area-of-interest-style.ts | 4 + packages/geoview-aoi-panel/src/index.tsx | 2 +- ...26-package-area-of-interest-aoi-panel.json | 12 ++- 5 files changed, 71 insertions(+), 37 deletions(-) diff --git a/packages/geoview-aoi-panel/schema.json b/packages/geoview-aoi-panel/schema.json index 4412bd3b0e0..87faed7eb06 100644 --- a/packages/geoview-aoi-panel/schema.json +++ b/packages/geoview-aoi-panel/schema.json @@ -26,6 +26,8 @@ }, "extent": { "type": "array", + "minItems": 4, + "maxItems": 4, "items": [ { "type": "number", diff --git a/packages/geoview-aoi-panel/src/aoi-panel.tsx b/packages/geoview-aoi-panel/src/aoi-panel.tsx index 5d0f50de8cd..f54c62a5066 100644 --- a/packages/geoview-aoi-panel/src/aoi-panel.tsx +++ b/packages/geoview-aoi-panel/src/aoi-panel.tsx @@ -1,39 +1,61 @@ -// import { TypeBasemapProps } from 'geoview-core/src/geo/layer/basemap/basemap-types'; -// import { TypeJsonObject } from 'geoview-core/src/core/types/global-types'; -// import { useMapProjection } from 'geoview-core/src/core/stores/store-interface-and-intial-values/map-state'; -// import { useAppDisplayLanguage } from 'geoview-core/src/core/stores/store-interface-and-intial-values/app-state'; -// import { TypeValidMapProjectionCodes, TypeDisplayLanguage } from 'geoview-core/src/api/config/types/map-schema-types'; -// import { logger } from 'geoview-core/src/core/utils/logger'; -// import { getLocalizedMessage } from 'geoview-core/src/core/utils/utilities'; -// import { getSxClasses } from './area-of-interest-style'; - -/* +import { Extent } from 'geoview-core/src/api/config/types/map-schema-types'; +import { getSxClasses } from './area-of-interest-style'; + interface AoiPanelProps { mapId: string; - config: TypeJsonObject; + config: TypeAoiProps; } -*/ - -export function AoiPanel(/* props: AoiPanelProps */): JSX.Element { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - // const { mapId, config } = props; - - // const { cgpv } = window; - // const myMap = cgpv.api.maps[mapId]; - - // const { api, ui, react } = cgpv; - // const { Select, Card, Box } = ui.elements; - // const { useState } = react; - - // const theme = ui.useTheme(); - // const sxClasses = getSxClasses(theme); - - // internal state and store values - // const language = useAppDisplayLanguage(); - - // #region PRIVATE UTILITY FUNCTIONS - // #endregion +interface AoiItem { + aoiTitle: string; + imageUrl: string; + extent: Extent; +} - return
; +type AoiListItems = AoiItem[]; + +type TypeAoiProps = { + isOpen: boolean; + aoiList: AoiListItems; + version: string; +}; + +export function AoiPanel(props: AoiPanelProps): JSX.Element { + const { mapId, config } = props; + const aoiList = config.aoiList as AoiListItems; + + const { cgpv } = window; + const { api, ui } = cgpv; + + const myMap = api.maps[mapId]; + const { Card, Box } = ui.elements; + + const theme = ui.useTheme(); + const sxClasses = getSxClasses(theme); + + return ( +