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: