2321-draft version aoi

.vscode/settings.json

@@ -75,5 +75,5 @@
       "bold": false,
       "italic": false
     }
-  ]
+  ],
 }

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.

packages/geoview-aoi-panel/default-config-area-of-interest.json

@@ -0,0 +1,3 @@
+{
+  "isOpen": false
+}

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"
+  }
+}

packages/geoview-aoi-panel/schema.json

@@ -0,0 +1,23 @@
+{
+  "$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,
+  "definitions": {
+  },
+  "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 the current version of the viewer."
+    }
+  },
+  "required": ["isOpen"]
+}

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 <div />;
+}

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)',
+          },
+        },
+      },
+    },
+  },
+});