From e7ab5f2671f5e38b96e0034e171b07d0c3dc945c Mon Sep 17 00:00:00 2001 From: Christopher Phelefu Date: Wed, 2 Oct 2024 09:04:29 -0400 Subject: [PATCH] fixing width issues --- src/components/ConfigTextEditor.tsx | 1 - src/components/MapBuilder.tsx | 41 ++++++++++--------- src/components/MapRenderer.tsx | 17 +------- src/providers/cgpvContextProvider/cgpvHook.ts | 22 +++++----- 4 files changed, 34 insertions(+), 47 deletions(-) diff --git a/src/components/ConfigTextEditor.tsx b/src/components/ConfigTextEditor.tsx index 928a6f9..3c6f9e2 100644 --- 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 index baf9939..ab8c2fd 100644 --- 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(configJson); const [isModified, setIsModified] = useState(false); @@ -96,19 +96,6 @@ export function MapBuilder() { onChange={(value) => handleConfigFileChange(value)} label="Select Configuration File" placeholder="" /> - updateProperty('theme', value)} - label="Display Theme" placeholder="" /> - - updateProperty('map.interaction', value)} - label="Map Interaction" placeholder="" /> - - Map Size @@ -116,26 +103,40 @@ export function MapBuilder() { updateProperty('mapDimensions.width', event.target.value)} + defaultValue={mapWidth} + onChange={(event) => { setMapWidth(event.target.value); setIsModified(true); }} helperText="e.g. 100% or 500px" variant="outlined" /> updateProperty('mapDimensions.height', event.target.value)} + defaultValue={mapHeight} + onChange={(event) => { setMapHeight(event.target.value); setIsModified(true); }} helperText="e.g. 100% or 500px" variant="outlined" /> + + + updateProperty('theme', value)} + label="Display Theme" placeholder="" /> + + updateProperty('map.interaction', value)} + label="Map Interaction" placeholder="" /> + Zoom Levels diff --git a/src/components/MapRenderer.tsx b/src/components/MapRenderer.tsx index 36e9af3..027a91c 100644 --- 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 ( - + ); diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts index 656b409..de1a99e 100644 --- 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(false); const [eventsList, setEventsList] = useState([]); const [legendLayerStatusList, setLegendLayerStatusList] = useState([]); + const [mapWidth, setMapWidth] = useState(DEFAULT_MAP_WIDTH); + const [mapHeight, setMapHeight] = useState(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,