fixing width issues

Canadian-Geospatial-Platform · Oct 2, 2024 · e7ab5f2 · e7ab5f2
1 parent db84f61
commit e7ab5f2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 47 deletions.
diff --git a/src/components/ConfigTextEditor.tsx b/src/components/ConfigTextEditor.tsx
@@ -30,7 +30,6 @@ export function ConfigTextEditor() {
 
   const resetEditorText = () => {
     let jsonObj = configJson || {};
-    jsonObj = _.omit((jsonObj), ['mapDimensions']);
     const jsonTxt = JSON.stringify(jsonObj, null, 4);
     setEditorText(jsonTxt);
     setIsEditorTouched(false);

diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
@@ -26,7 +26,7 @@ export function MapBuilder() {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
 
-  const { configJson, handleConfigFileChange, handleConfigJsonChange, configFilePath } = cgpvContext;
+  const { configJson, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
 
   const [modifiedConfigJson, setModifiedConfigJson] = useState<object>(configJson);
   const [isModified, setIsModified] = useState<boolean>(false);
@@ -96,46 +96,47 @@ export function MapBuilder() {
           onChange={(value) => handleConfigFileChange(value)}
           label="Select Configuration File" placeholder="" />
 
-        <SingleSelectComplete
-          options={themeOptions}
-          defaultValue={getProperty('theme')}
-          onChange={(value) => updateProperty('theme', value)}
-          label="Display Theme" placeholder="" />
-
-        <SingleSelectComplete
-          options={mapInteractionOptions}
-          defaultValue={getProperty('map.interaction')}
-          onChange={(value) => updateProperty('map.interaction', value)}
-          label="Map Interaction" placeholder="" />
-
-
         <FormGroup aria-label="position">
           <FormLabel component="legend">Map Size</FormLabel>
 
           <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
             <FormControl>
               <TextField
                 size="small"
-                id="map-width" 
+                id="map-width"
                 label="Width"
-                defaultValue={getProperty('mapDimensions.width')}
-                onChange={(event) => updateProperty('mapDimensions.width', event.target.value)}
+                defaultValue={mapWidth}
+                onChange={(event) => { setMapWidth(event.target.value); setIsModified(true); }}
                 helperText="e.g. 100% or 500px"
                 variant="outlined" />
             </FormControl>
             <FormControl>
               <TextField
                 size="small"
-                id="map-height" 
+                id="map-height"
                 label="Height"
-                defaultValue={getProperty('mapDimensions.height')}
-                onChange={(event) => updateProperty('mapDimensions.height', event.target.value)}
+                defaultValue={mapHeight}
+                onChange={(event) => { setMapHeight(event.target.value); setIsModified(true); }}
                 helperText="e.g. 100% or 500px"
                 variant="outlined" />
             </FormControl>
           </Box>
         </FormGroup>
 
+        <Divider sx={{ my: 2 }} />
+
+        <SingleSelectComplete
+          options={themeOptions}
+          defaultValue={getProperty('theme')}
+          onChange={(value) => updateProperty('theme', value)}
+          label="Display Theme" placeholder="" />
+
+        <SingleSelectComplete
+          options={mapInteractionOptions}
+          defaultValue={getProperty('map.interaction')}
+          onChange={(value) => updateProperty('map.interaction', value)}
+          label="Map Interaction" placeholder="" />
+
 
         <FormGroup aria-label="position">
           <FormLabel component="legend">Zoom Levels</FormLabel>

diff --git a/src/components/MapRenderer.tsx b/src/components/MapRenderer.tsx
@@ -1,24 +1,11 @@
 import { Box } from '@mui/material';
-import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider';
-import { useContext } from 'react';
-import { DEFAULT_MAP_HEIGHT, DEFAULT_MAP_WIDTH } from '@/constants';
 import _ from 'lodash';
 
 //TODO Maybe update this to control its own rendering on some feature changes. Eg. height, width, etc.
 export function MapRenderer() {
-  const cgpvContext = useContext(CGPVContext);
-
-  if (!cgpvContext) {
-    throw new Error('CGPVContent must be used within a CGPVProvider');
-  }
-
-  const { configJson } = cgpvContext;
-
-  const mapWidth = _.get(configJson, 'mapDimensions.width', DEFAULT_MAP_WIDTH);
-  const mapHeight = _.get(configJson, 'mapDimensions.height', DEFAULT_MAP_HEIGHT);
-
+
   return (
-    <Box id="sandboxMapContainer" sx={{ width: mapWidth, height: mapHeight }}>
+    <Box id="sandboxMapContainer">
       <Box id="sandboxMap3" className="geoview-map"></Box>
     </Box>
   );

diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts
@@ -17,6 +17,10 @@ export interface ICgpvHook {
   configJson: object;
   eventsList: EventListItemType[];
   legendLayerStatusList: LegendLayerStatus[];
+  mapWidth: string;
+  mapHeight: string;
+  setMapWidth: (width: string) => void;
+  setMapHeight: (height: string) => void;
 
   initializeMap: (config: string | object, configIsFilePath?: boolean) => void;
   handleConfigFileChange: (filePath: string | null) => void;
@@ -36,6 +40,8 @@ export function useCgpvHook(): ICgpvHook {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [eventsList, setEventsList] = useState<EventListItemType[]>([]);
   const [legendLayerStatusList, setLegendLayerStatusList] = useState<LegendLayerStatus[]>([]);
+  const [mapWidth, setMapWidth] = useState<string>(DEFAULT_MAP_WIDTH);
+  const [mapHeight, setMapHeight] = useState<string>(DEFAULT_MAP_HEIGHT);
 
 
   const addEventToList = (eventName: string, description: string) => {
@@ -213,16 +219,7 @@ export function useCgpvHook(): ICgpvHook {
       configTxt = JSON.stringify(res)
     }
 
-    if (_.get(configData, 'mapDimensions.width') === undefined) {
-      _.set(configData, 'mapDimensions.width', DEFAULT_MAP_WIDTH);
-    }
-    if (_.get(configData, 'mapDimensions.height') === undefined) {
-      _.set(configData, 'mapDimensions.height', DEFAULT_MAP_HEIGHT);
-    }
-
     // setting dimensions of the map
-    const mapWidth = _.get(configData, 'mapDimensions.width');
-    const mapHeight = _.get(configData, 'mapDimensions.height');
     mapElement?.setAttribute('style', `width: ${mapWidth}; min-height: ${mapHeight}; height: ${mapHeight}`);
     mapElement.setAttribute('dataset', `height: ${mapHeight}`);
 
@@ -237,8 +234,7 @@ export function useCgpvHook(): ICgpvHook {
     if (configIsFilePath) {
       cgpv.api.createMapFromConfig(mapId, `${URL_TO_CONFIGS}${config}`, 800); // just use file directly if its a file path
     } else {
-      const toUse = _.omit(configData, ['mapDimensions']);
-      const toUseTxt = JSON.stringify(toUse, null, 4);
+      const toUseTxt = JSON.stringify(configData, null, 4);
       cgpv.api.createMapFromConfig(mapId, toUseTxt);
     }
 
@@ -310,6 +306,10 @@ export function useCgpvHook(): ICgpvHook {
     isLoading,
     eventsList,
     legendLayerStatusList,
+    mapWidth,
+    mapHeight,
+    setMapWidth,
+    setMapHeight,
 
     initializeMap,
     handleConfigFileChange,