From 4a10e4f71b502f2efc23250782d774d7b4a1b5f0 Mon Sep 17 00:00:00 2001 From: Guillaume Choquette Date: Thu, 27 Jun 2024 11:27:38 -0400 Subject: [PATCH] 2321-draft version aoi --- .vscode/settings.json | 2 +- common/config/rush/pnpm-lock.yaml | 67 +++++++++ packages/geoview-aoi-panel/README.md | 3 + .../default-config-area-of-interest.json | 3 + packages/geoview-aoi-panel/package.json | 40 ++++++ packages/geoview-aoi-panel/schema.json | 25 ++++ packages/geoview-aoi-panel/src/aoi-panel.tsx | 38 +++++ .../src/area-of-interest-style.ts | 91 ++++++++++++ packages/geoview-aoi-panel/src/index.tsx | 134 ++++++++++++++++++ packages/geoview-aoi-panel/tsconfig.json | 30 ++++ .../configs/loading-packages-config.json | 2 +- .../26-package-area-of-interest.json | 21 +++ .../public/templates/demos-navigator.html | 1 + .../public/templates/loading-packages.html | 19 +++ .../types/config-validation-schema.json | 2 +- .../src/api/config/types/map-schema-types.ts | 1 + .../src/core/components/app-bar/app-bar.tsx | 43 +++--- packages/geoview-core/src/ui/icons/index.ts | 1 + packages/geoview-core/webpack.common.js | 5 + rush.json | 4 + 20 files changed, 510 insertions(+), 22 deletions(-) create mode 100644 packages/geoview-aoi-panel/README.md create mode 100644 packages/geoview-aoi-panel/default-config-area-of-interest.json create mode 100644 packages/geoview-aoi-panel/package.json create mode 100644 packages/geoview-aoi-panel/schema.json create mode 100644 packages/geoview-aoi-panel/src/aoi-panel.tsx create mode 100644 packages/geoview-aoi-panel/src/area-of-interest-style.ts create mode 100644 packages/geoview-aoi-panel/src/index.tsx create mode 100644 packages/geoview-aoi-panel/tsconfig.json create mode 100644 packages/geoview-core/public/configs/navigator/26-package-area-of-interest.json diff --git a/.vscode/settings.json b/.vscode/settings.json index b648cc781fe..b3529d0853a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -75,5 +75,5 @@ "bold": false, "italic": false } - ] + ], } diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 7aede62badb..36fcc264c03 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -56,6 +56,73 @@ importers: specifier: ^4.5.5 version: 4.9.5 + ../../packages/geoview-aoi-panel: + dependencies: + geoview-core: + specifier: workspace:~0.1.0 + version: link:../geoview-core + devDependencies: + '@babel/core': + specifier: ^7.17.0 + version: 7.24.7 + '@babel/eslint-parser': + specifier: ^7.17.0 + version: 7.24.7(@babel/core@7.24.7)(eslint@8.57.0) + '@babel/runtime': + specifier: ^7.17.0 + version: 7.24.7 + '@types/react': + specifier: ^18.2.0 + version: 18.3.3 + '@types/react-dom': + specifier: ^18.2.0 + version: 18.3.0 + '@typescript-eslint/eslint-plugin': + specifier: ~7.8.0 + version: 7.8.0(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)(typescript@4.9.5) + '@typescript-eslint/parser': + specifier: ~7.8.0 + version: 7.8.0(eslint@8.57.0)(typescript@4.9.5) + eslint: + specifier: ^8.8.0 + version: 8.57.0 + eslint-config-airbnb: + specifier: ^19.0.4 + version: 19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.2)(eslint-plugin-react@7.34.2)(eslint@8.57.0) + eslint-config-prettier: + specifier: ^8.3.0 + version: 8.10.0(eslint@8.57.0) + eslint-plugin-import: + specifier: ^2.25.4 + version: 2.29.1(eslint@8.57.0) + eslint-plugin-jest: + specifier: ^26.0.0 + version: 26.9.0(@typescript-eslint/eslint-plugin@7.8.0)(eslint@8.57.0)(jest@27.5.1)(typescript@4.9.5) + eslint-plugin-jsx-a11y: + specifier: ^6.5.1 + version: 6.8.0(eslint@8.57.0) + eslint-plugin-prettier: + specifier: ^4.0.0 + version: 4.2.1(eslint-config-prettier@8.10.0)(eslint@8.57.0)(prettier@2.8.8) + eslint-plugin-react: + specifier: ^7.28.0 + version: 7.34.2(eslint@8.57.0) + eslint-plugin-react-hooks: + specifier: ^4.3.0 + version: 4.6.2(eslint@8.57.0) + prettier: + specifier: ^2.6.0 + version: 2.8.8 + react: + specifier: ^18.2.0 + version: 18.3.1 + react-dom: + specifier: ^18.2.0 + version: 18.3.1(react@18.3.1) + typescript: + specifier: ^4.5.5 + version: 4.9.5 + ../../packages/geoview-basemap-panel: dependencies: geoview-core: diff --git a/packages/geoview-aoi-panel/README.md b/packages/geoview-aoi-panel/README.md new file mode 100644 index 00000000000..b2bfd2adebc --- /dev/null +++ b/packages/geoview-aoi-panel/README.md @@ -0,0 +1,3 @@ +# geoview-Area-of-interest + +A package that allows to display a collection of areas to visit on the map. diff --git a/packages/geoview-aoi-panel/default-config-area-of-interest.json b/packages/geoview-aoi-panel/default-config-area-of-interest.json new file mode 100644 index 00000000000..bba685aab00 --- /dev/null +++ b/packages/geoview-aoi-panel/default-config-area-of-interest.json @@ -0,0 +1,3 @@ +{ + "isOpen": false +} \ No newline at end of file diff --git a/packages/geoview-aoi-panel/package.json b/packages/geoview-aoi-panel/package.json new file mode 100644 index 00000000000..9b463c20cf0 --- /dev/null +++ b/packages/geoview-aoi-panel/package.json @@ -0,0 +1,40 @@ +{ + "name": "geoview-aoi-panel", + "version": "1.0.0", + "description": "A area of interest panel for the geoview project", + "main": "src/index.tsx", + "keywords": [ + "react", + "aoi-panel" + ], + "author": "Guillaume Choquette", + "license": "MIT", + "dependencies": { + "geoview-core": "workspace:~0.1.0" + }, + "devDependencies": { + "@babel/core": "^7.17.0", + "@babel/runtime": "^7.17.0", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", + "@babel/eslint-parser": "^7.17.0", + "@typescript-eslint/eslint-plugin": "~7.8.0", + "@typescript-eslint/parser": "~7.8.0", + "eslint": "^8.8.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-import": "^2.25.4", + "eslint-plugin-jest": "^26.0.0", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react-hooks": "^4.3.0", + "prettier": "^2.6.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "typescript": "^4.5.5" + }, + "resolutions": { + "@types/react": "^18.2.0" + } +} \ No newline at end of file diff --git a/packages/geoview-aoi-panel/schema.json b/packages/geoview-aoi-panel/schema.json new file mode 100644 index 00000000000..4f01c1b4a20 --- /dev/null +++ b/packages/geoview-aoi-panel/schema.json @@ -0,0 +1,25 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "GeoView Area of Interest Panel Schema", + "type": "object", + "version": 1.0, + "comments": "Configuration for GeoView Area of interest package.", + "additionalProperties": false, + "properties": { + "isOpen": { + "type": "boolean", + "description": "Specifies whether the area of interest panel is initially open or closed", + "default": false + }, + "version": { + "type": "string", + "enum": [ + "1.0" + ], + "description": "The schema version used to validate the configuration file. The schema should enumerate the list of versions accepted by this version of the viewer." + } + }, + "required": [ + "isOpen" + ] +} \ No newline at end of file diff --git a/packages/geoview-aoi-panel/src/aoi-panel.tsx b/packages/geoview-aoi-panel/src/aoi-panel.tsx new file mode 100644 index 00000000000..afbb441dc0d --- /dev/null +++ b/packages/geoview-aoi-panel/src/aoi-panel.tsx @@ -0,0 +1,38 @@ +// 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'; + +/* +interface AoiPanelProps { + mapId: string; + config: TypeJsonObject; +} +*/ + +export function AoiPanel(/* props: AoiPanelProps */): JSX.Element { + // 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 + + return
; +} diff --git a/packages/geoview-aoi-panel/src/area-of-interest-style.ts b/packages/geoview-aoi-panel/src/area-of-interest-style.ts new file mode 100644 index 00000000000..a59fc66dd2a --- /dev/null +++ b/packages/geoview-aoi-panel/src/area-of-interest-style.ts @@ -0,0 +1,91 @@ +/* @ts-expect-error there is no mui style in this package */ + +// ? I doubt we want to define an explicit type for style properties? +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const getSxClasses = (theme): any => ({ + aoiCard: { + '& .MuiCard-root': { + backgroundColor: theme.palette.grey.A700, + color: theme.palette.primary.light, + display: 'flex', + flexDirection: 'column', + backgroundClip: 'padding-box', + border: '2px solid rgba(255,255,255,0.25)', + borderRadius: '6px', + boxShadow: 'none', + marginBottom: '16px', + width: '300px', + transition: 'all 0.3s ease-in-out', + '&:last-child': { + marginBottom: '0px', + }, + '&:hover': { + border: `2px solid #FFFF00`, + }, + '&.active': { + border: `2px solid #FFFFFF`, + }, + }, + '& .MuiCardHeader-root': { + backgroundColor: `${theme.palette.geoViewColor.grey.dark[900]} !important`, + color: theme.palette.geoViewColor.grey.light[900], + fontSize: 14, + fontWeight: 400, + margin: 0, + padding: '0 12px', + height: 60, + width: '100%', + order: 2, + }, + '& .MuiCardContent-root': { + order: 1, + height: 190, + position: 'relative', + padding: 0, + '&:last-child': { + padding: 0, + }, + '& .aoiCardThumbnail': { + position: 'absolute', + height: '100%', + width: '100%', + objectFit: 'cover', + top: 0, + left: 0, + }, + '& .aoiCardThumbnailOverlay': { + display: 'block', + height: '100%', + width: '100%', + position: 'absolute', + backgroundColor: theme.palette.geoViewColor.grey.lighten(0.5, 0.85), + transition: 'all 0.3s ease-in-out', + }, + }, + '&:hover': { + cursor: 'pointer', + borderColor: theme.palette.geoViewColor.primary.main, + '& .MuiCardContent-root': { + '& .aoiCardThumbnailOverlay': { + backgroundColor: theme.palette.geoViewColor.grey.lighten(0.5, 0.55), + }, + }, + }, + '&.active': { + borderColor: theme.palette.geoViewColor.primary.light[200], + '& .MuiCardContent-root': { + '& .aoiCardThumbnailOverlay': { + backgroundColor: 'transparent', + }, + }, + '&:hover': { + borderColor: 'rgba(255,255,255,0.75)', + '& .MuiCardContent-root': { + '& .aoiCardThumbnailOverlay': { + backgroundColor: 'rgba(0,0,0,0)', + }, + }, + }, + }, + }, +}); diff --git a/packages/geoview-aoi-panel/src/index.tsx b/packages/geoview-aoi-panel/src/index.tsx new file mode 100644 index 00000000000..e384338f310 --- /dev/null +++ b/packages/geoview-aoi-panel/src/index.tsx @@ -0,0 +1,134 @@ +import { TypeJsonObject, toJsonObject, AnySchemaObject, Cast } from 'geoview-core/src/core/types/global-types'; +import { AppBarPlugin } from 'geoview-core/src/api/plugin/appbar-plugin'; +import { AoiIcon } from 'geoview-core/src/ui/icons'; +import { TypeIconButtonProps } from 'geoview-core/src/ui/icon-button/icon-button-types'; +import { TypePanelProps } from 'geoview-core/src/ui/panel/panel-types'; +import { AoiPanel } from './aoi-panel'; +import schema from '../schema.json'; +import defaultConfig from '../default-config-area-of-interest.json'; + +/** + * Create a class for the plugin instance + */ +class AoiPanelPlugin extends AppBarPlugin { + /** + * Return the package schema + * + * @returns {AnySchemaObject} the package schema + */ + override schema(): AnySchemaObject { + return schema; + } + + /** + * Return the default config for this package + * + * @returns {TypeJsonObject} the default config + */ + override defaultConfig(): TypeJsonObject { + return toJsonObject(defaultConfig); + } + + /** + * translations object to inject to the viewer translations + */ + translations = toJsonObject({ + en: { + AoiPanel: { + title: 'Area of Interest', + info: { + transport: { + name: 'Transport', + description: `The Canada Base Map - Transportation (CBMT). This web mapping service provides spatial reference context with an emphasis on transportation networks. + It is designed especially for use as a background map in a web mapping application or geographic information system (GIS).`, + }, + simple: { + name: 'Simple', + }, + shaded: { + name: 'Shaded relief', + description: `The Canada Base Map - Elevation (CBME) web mapping services of the Earth Sciences Sector at Natural Resources Canada, + is intended primarily for online mapping application users and developers`, + }, + osm: { + name: 'Open Street Maps', + }, + nogeom: { + name: 'No geometry', + }, + label: { + name: 'with labels', + }, + }, + }, + }, + fr: { + AoiPanel: { + title: 'Région d\'intérêt', + info: { + transport: { + name: 'Transport', + description: `Carte de base du Canada - Transport (CBCT). Ce service de cartographie Web offre un contexte de référence spatiale axé sur les réseaux de transport. + Il est particulièrement conçu pour être utilisé comme fond de carte dans une application cartographique Web ou un système d'information géographique (SIG).`, + }, + simple: { + name: 'Simple', + }, + shaded: { + name: 'Relief ombré', + description: `Les services de cartographie Web de la carte de base du Canada - élévation (CBCE) du Secteur des sciences de la + Terre de Ressources naturelles Canada sont destinés principalement aux utilisateurs et aux développeurs d'applications de cartographie en ligne.`, + }, + osm: { + name: 'Carte - Open Street Maps', + }, + nogeom: { + name: 'Pas de géométrie', + }, + label: { + name: 'avec étiquettes', + }, + }, + }, + }, + }); + + override onCreateButtonProps(): TypeIconButtonProps { + // Button props + return { + id: `${this.pluginProps.mapId}-AoiPanelButton`, + tooltip: 'AoiPanel.title', + tooltipPlacement: 'right', + children: , + visible: true, + }; + } + + override onCreateContentProps(): TypePanelProps { + // Panel props + return { + title: 'AoiPanel.title', + icon: , + width: 350, + status: this.configObj?.isOpen as boolean, + }; + } + + override onCreateContent = (): JSX.Element => { + return ; + }; + + /** + * Function called when the plugin is removed, used for clean up + */ + override onRemoved(): void { + // reset AOI array + this.mapViewer().basemap.basemaps = []; + } +} + +export default AoiPanelPlugin; + +// Keep a reference to the AOI Panel Plugin as part of the geoviewPlugins property stored in the window object +window.geoviewPlugins = window.geoviewPlugins || {}; +window.geoviewPlugins['aoi-panel'] = Cast(AoiPanelPlugin); diff --git a/packages/geoview-aoi-panel/tsconfig.json b/packages/geoview-aoi-panel/tsconfig.json new file mode 100644 index 00000000000..9cc6e63c556 --- /dev/null +++ b/packages/geoview-aoi-panel/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "strict": true, + "importHelpers": true, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "strictPropertyInitialization": true, + "sourceMap": true, + "skipLibCheck": true, + "jsx": "preserve", + "allowJs": true, + "noEmit": true, + "noUnusedLocals": true, + "noImplicitReturns": true, + "noImplicitOverride": true, + "noImplicitThis": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": ["esnext", "dom", "dom.iterable", "scripthost"], + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/geoview-core/public/configs/loading-packages-config.json b/packages/geoview-core/public/configs/loading-packages-config.json index c43be211119..a95ba7d8cf1 100644 --- a/packages/geoview-core/public/configs/loading-packages-config.json +++ b/packages/geoview-core/public/configs/loading-packages-config.json @@ -15,7 +15,7 @@ "corePackages": [], "appBar": { "tabs": { - "core": ["basemap-panel"] + "core": ["basemap-panel", "aoi-panel"] } } } diff --git a/packages/geoview-core/public/configs/navigator/26-package-area-of-interest.json b/packages/geoview-core/public/configs/navigator/26-package-area-of-interest.json new file mode 100644 index 00000000000..1a882ca28f4 --- /dev/null +++ b/packages/geoview-core/public/configs/navigator/26-package-area-of-interest.json @@ -0,0 +1,21 @@ +{ + "map": { + "interaction": "dynamic", + "viewSettings": { + "projection": 3978 + }, + "basemapOptions": { + "basemapId": "transport", + "shaded": false, + "labeled": true + } + }, + "theme": "geo.ca", + "components": ["north-arrow", "overview-map"], + "corePackages": [], + "appBar": { + "tabs": { + "core": ["aoi-panel"] + } + } +} diff --git a/packages/geoview-core/public/templates/demos-navigator.html b/packages/geoview-core/public/templates/demos-navigator.html index c67b0690b1e..9ceffc0f539 100644 --- a/packages/geoview-core/public/templates/demos-navigator.html +++ b/packages/geoview-core/public/templates/demos-navigator.html @@ -127,6 +127,7 @@

Configurations Navigator

+ diff --git a/packages/geoview-core/public/templates/loading-packages.html b/packages/geoview-core/public/templates/loading-packages.html index 0fd610a5f2f..ae70e2ddadb 100644 --- a/packages/geoview-core/public/templates/loading-packages.html +++ b/packages/geoview-core/public/templates/loading-packages.html @@ -87,6 +87,8 @@

Loading Packages

+ +
@@ -118,6 +120,23 @@

Loading Packages

unloadBasemapPanelBtn.addEventListener('click', function (e) { cgpv.api.plugin.removePlugin('basemap-panel', 'mapWM'); }); + // get load aoi panel button element + var loadAoiPanelBtn = document.getElementById('load-aoi-panel-btn'); + + // add event handler to the load aoi panel button + loadAoiPanelBtn.addEventListener('click', function (e) { + cgpv.api.plugin.addPlugin('aoi-panel', 'mapWM', window.geoviewPlugins['aoi-panel'], { + mapId: 'mapWM', + }); + }); + + // get unload aoi panel button element + var unloadAoiPanelBtn = document.getElementById('unload-aoi-panel-btn'); + + // add event handler to the unload aoi panel button + unloadAoiPanelBtn.addEventListener('click', function (e) { + cgpv.api.plugin.removePlugin('aoi-panel', 'mapWM'); + }); } }); diff --git a/packages/geoview-core/src/api/config/types/config-validation-schema.json b/packages/geoview-core/src/api/config/types/config-validation-schema.json index 0f3cfb6d2ec..3901e01d65b 100644 --- a/packages/geoview-core/src/api/config/types/config-validation-schema.json +++ b/packages/geoview-core/src/api/config/types/config-validation-schema.json @@ -166,7 +166,7 @@ "TypeValidAppBarCoreProps": { "description": "Valid values for the app bar tabs core array.", "additionalProperties": false, - "enum": ["geolocator", "export", "basemap-panel", "geochart", "details", "legend", "guide", "data-table", "layers"] + "enum": ["geolocator", "export", "basemap-panel", "geochart", "details", "legend", "guide", "data-table", "layers", "aoi-panel"] }, "TypeAppBarProps": { "type": "object", diff --git a/packages/geoview-core/src/api/config/types/map-schema-types.ts b/packages/geoview-core/src/api/config/types/map-schema-types.ts index d664616a8a0..95443fa69f5 100644 --- a/packages/geoview-core/src/api/config/types/map-schema-types.ts +++ b/packages/geoview-core/src/api/config/types/map-schema-types.ts @@ -60,6 +60,7 @@ export type TypeValidAppBarCoreProps = | 'geolocator' | 'export' | 'basemap-panel' + | 'aoi-panel' | 'geochart' | 'guide' | 'legend' diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx index 6a9d490c5b7..f5b5fbe4265 100644 --- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx +++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx @@ -50,6 +50,7 @@ import { TypeJsonObject, TypeJsonValue, toJsonObject } from '@/core/types/global import { AbstractPlugin } from '@/api/plugin/abstract-plugin'; import { CV_DEFAULT_APPBAR_CORE, CV_DEFAULT_APPBAR_TABS_ORDER } from '@/api/config/types/config-constants'; import { CONTAINER_TYPE } from '@/core/utils/constant'; +import { TypeValidAppBarCoreProps } from '@/api/config/types/map-schema-types'; interface GroupPanelType { icon: ReactNode; @@ -267,28 +268,32 @@ export function AppBar(props: AppBarProps): JSX.Element { // Log logger.logTraceUseEffect('APP-BAR - appBarConfig'); - // Packages tab - if (appBarConfig && appBarConfig.tabs.core.includes('basemap-panel')) { - // create a new tab by loading the plugin - Plugin.loadScript('basemap-panel') - .then((constructor: AbstractPlugin | ((pluginId: string, props: TypeJsonObject) => TypeJsonValue)) => { - Plugin.addPlugin( - 'basemap-panel', - mapId, - constructor, - toJsonObject({ + const processPlugin = (pluginName: string): void => { + // Packages tab + if (appBarConfig && appBarConfig.tabs.core.includes(pluginName as TypeValidAppBarCoreProps)) { + // create a new tab by loading the plugin + Plugin.loadScript(pluginName) + .then((constructor: AbstractPlugin | ((pluginId: string, props: TypeJsonObject) => TypeJsonValue)) => { + Plugin.addPlugin( + pluginName, mapId, - }) - ).catch((error) => { + constructor, + toJsonObject({ + mapId, + }) + ).catch((error) => { + // Log + logger.logPromiseFailed(`api.plugin.addPlugin in useEffect for ${pluginName}`, error); + }); + }) + .catch((error) => { // Log - logger.logPromiseFailed('api.plugin.addPlugin in useEffect in app-bar', error); + logger.logPromiseFailed('api.plugin.loadScript in useEffect in app-bar', error); }); - }) - .catch((error) => { - // Log - logger.logPromiseFailed('api.plugin.loadScript in useEffect in app-bar', error); - }); - } + } + }; + processPlugin('basemap-panel'); + processPlugin('aoi-panel'); }, [appBarConfig, mapId]); useEffect(() => { diff --git a/packages/geoview-core/src/ui/icons/index.ts b/packages/geoview-core/src/ui/icons/index.ts index 9e33a183b41..cff7b85ecc0 100644 --- a/packages/geoview-core/src/ui/icons/index.ts +++ b/packages/geoview-core/src/ui/icons/index.ts @@ -22,6 +22,7 @@ export { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, Close as CloseIcon, + CropOriginal as AoiIcon, Delete as DeleteIcon, DeleteOutline as DeleteOutlineIcon, Details as DetailsIcon, diff --git a/packages/geoview-core/webpack.common.js b/packages/geoview-core/webpack.common.js index ea9f13cc1b3..476472f358d 100644 --- a/packages/geoview-core/webpack.common.js +++ b/packages/geoview-core/webpack.common.js @@ -69,6 +69,11 @@ const multipleHtmlPluginsOutliers = glob.sync('./public/templates/outliers/*.htm const config = { entry: { 'cgpv-main': './src/app.tsx', + 'geoview-aoi-panel': { + import: '../geoview-aoi-panel/src/index.tsx', + dependOn: 'cgpv-main', + filename: 'corePackages/[name].js', + }, 'geoview-basemap-panel': { import: '../geoview-basemap-panel/src/index.tsx', dependOn: 'cgpv-main', diff --git a/rush.json b/rush.json index 8ee11e76b3b..22b5518321c 100644 --- a/rush.json +++ b/rush.json @@ -19,6 +19,10 @@ "url": "https://github.com/Canadian-Geospatial-Platform/geoview" }, "projects": [ + { + "packageName": "geoview-aoi-panel", + "projectFolder": "packages/geoview-aoi-panel" + }, { "packageName": "geoview-basemap-panel", "projectFolder": "packages/geoview-basemap-panel"