current view is changing properly image size

src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx

+import { useContext } from 'react';
+import { ExportContext } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context';
+
+export const CurrentView = (): React.ReactNode => {
+  const { setCurrentView, data } = useContext(ExportContext);
+
+  return (
+    <div className="flex flex-col gap-4 border-b">
+      <label className="flex h-9 items-center gap-4">
+        <span>Current view:&nbsp;</span>
+        <input
+          className="rounded-[64px] border border-transparent bg-cultured px-4 py-2.5 text-xs font-medium text-font-400 outline-none  hover:border-greyscale-600 focus:border-greyscale-600"
+          name="width"
+          checked={data.currentView.value}
+          type="checkbox"
+          aria-label="export graphics width input"
+          onChange={(e): void => {
+            setCurrentView({ value: e.target.checked });
+          }}
+        />
+      </label>
+    </div>
+  );
+};

src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts

+import { CurrentView } from './CurrentView.types';
+
+export const DEFAULT_CURRENT_VIEW: CurrentView = {
+  value: false,
+};

src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts

+export interface CurrentView {
+  value: boolean;
+}

src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts

+export { CurrentView } from './CurrentView.component';

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx

@@ -6,6 +6,8 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { modelsDataSelector, modelsIdsSelector } from '@/redux/models/models.selectors';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { activeOverlaysIdSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
+import { CurrentView } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView';
+import { DEFAULT_CURRENT_VIEW } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants';
 import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
 import { Annotations } from './Annotations';
 import { DownloadElements } from './DownloadElements/DownloadElements';
@@ -18,6 +20,7 @@ import { ImageFormat } from './ImageFormat';
 import { ImageSize } from './ImageSize';
 import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
 import { ImageSize as ImageSizeType } from './ImageSize/ImageSize.types';
+import { CurrentView as CurrentViewType } from './CurrentView/CurrentView.types';
 import { IncludedCompartmentPathways } from './IncludedCompartmentPathways ';
 import { Submap } from './Submap';
 import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest';
@@ -45,6 +48,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
   const [models, setModels] = useState<CheckboxItem[]>([]);
   const [imageSize, setImageSize] = useState<ImageSizeType>(DEFAULT_IMAGE_SIZE);
   const [imageFormats, setImageFormats] = useState<CheckboxItem[]>([]);
+  const [currentView, setCurrentView] = useState<CurrentViewType>(DEFAULT_CURRENT_VIEW);
 
   const handleDownloadElements = useCallback(async () => {
     const body = getDownloadElementsBodyRequest({
@@ -94,6 +98,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
       models,
       imageSize,
       imageFormats,
+      currentView,
     }),
     [
       annotations,
@@ -102,6 +107,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
       models,
       imageSize,
       imageFormats,
+      currentView,
     ],
   );
 
@@ -113,6 +119,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
       setModels,
       setImageSize,
       setImageFormats,
+      setCurrentView,
       handleDownloadElements,
       handleDownloadNetwork,
       handleDownloadGraphics,
@@ -133,3 +140,4 @@ Export.ImageSize = ImageSize;
 Export.ImageFormat = ImageFormat;
 Export.DownloadNetwork = DownloadNetwork;
 Export.DownloadGraphics = DownloadGraphics;
+Export.CurrentView = CurrentView;

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts

+import { DEFAULT_CURRENT_VIEW } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants';
 import { ExportContextType } from './ExportCompound.types';
 import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
 
@@ -54,6 +55,7 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
   setModels: () => {},
   setImageSize: () => {},
   setImageFormats: () => {},
+  setCurrentView: () => {},
   handleDownloadElements: () => Promise.resolve(),
   handleDownloadNetwork: () => Promise.resolve(),
   handleDownloadGraphics: () => {},
@@ -64,5 +66,6 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
     models: [],
     imageFormats: [],
     imageSize: DEFAULT_IMAGE_SIZE,
+    currentView: DEFAULT_CURRENT_VIEW,
   },
 };

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts

+import { CurrentView } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types';
 import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
 import { ImageSize } from './ImageSize/ImageSize.types';
 
@@ -6,6 +7,7 @@ export type ExportContextType = {
   setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
   setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
   setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
+  setCurrentView: React.Dispatch<React.SetStateAction<CurrentView>>;
   setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>;
   setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
   handleDownloadElements: () => Promise<void>;
@@ -16,6 +18,7 @@ export type ExportContextType = {
     includedCompartmentPathways: CheckboxItem[];
     excludedCompartmentPathways: CheckboxItem[];
     models: CheckboxItem[];
+    currentView: CurrentView;
     imageSize: ImageSize;
     imageFormats: CheckboxItem[];
   };

src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts

 import { MapModel } from '@/types/models';
 import { numberToSafeInt } from '@/utils/number/numberToInt';
 import { useCallback, useContext, useEffect } from 'react';
+import {
+  getScreenAspectRatios,
+  getScreenDimension,
+} from '@/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios';
 import { ExportContext } from '../../ExportCompound.context';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '../ImageSize.constants';
-import { ImageSize } from '../ImageSize.types';
+import { ImageSize, ModelAspectRatios } from '../ImageSize.types';
 import { useExportGraphicsSelectedModel } from './useExportGraphicsSelectedModel';
 import { getModelAspectRatios } from './useModelAspectRatios';
 
@@ -16,9 +20,15 @@ interface UseImageSizeResults {
 
 export const useImageSize = (): UseImageSizeResults => {
   const selectedModel = useExportGraphicsSelectedModel();
-  const aspectRatios = getModelAspectRatios(selectedModel);
-  const { data, setImageSize } = useContext(ExportContext);
-  const { imageSize } = data;
+  const { data, setImageSize, setCurrentView } = useContext(ExportContext);
+  const { imageSize, currentView } = data;
+  let aspectRatios: ModelAspectRatios;
+  if (currentView.value) {
+    aspectRatios = getScreenAspectRatios();
+  } else {
+    aspectRatios = getModelAspectRatios(selectedModel);
+  }
+
   const maxWidth = selectedModel?.width || DEFAULT_IMAGE_WIDTH;
   const maxHeight = selectedModel?.height || DEFAULT_IMAGE_HEIGHT;
 
@@ -27,8 +37,8 @@ export const useImageSize = (): UseImageSizeResults => {
       const newWidth = newImageSize.width;
       const newHeight = newImageSize.height;
 
-      const widthMinMax = Math.min(maxWidth, newWidth);
-      const heightMinMax = Math.min(maxHeight, newHeight);
+      const widthMinMax = currentView.value ? newWidth : Math.min(maxWidth, newWidth);
+      const heightMinMax = currentView.value ? newHeight : Math.min(maxHeight, newHeight);
 
       const widthInt = numberToSafeInt(widthMinMax);
       const heightInt = numberToSafeInt(heightMinMax);
@@ -43,14 +53,17 @@ export const useImageSize = (): UseImageSizeResults => {
 
   const setDefaultModelImageSize = useCallback(
     (model: MapModel): void => {
+      const screenDimension = getScreenDimension();
+      const width = currentView.value ? screenDimension.width : model.width;
+      const height = currentView.value ? screenDimension.height : model.height;
       const newImageSize = getNormalizedImageSize({
-        width: model.width,
-        height: model.height,
+        width,
+        height,
       });
 
       setImageSize(newImageSize);
     },
-    [getNormalizedImageSize, setImageSize],
+    [getNormalizedImageSize, setImageSize, setCurrentView, currentView],
   );
 
   const handleChangeWidth = (width: number): void => {
@@ -77,7 +90,7 @@ export const useImageSize = (): UseImageSizeResults => {
     }
 
     setDefaultModelImageSize(selectedModel);
-  }, [setDefaultModelImageSize, selectedModel]);
+  }, [setDefaultModelImageSize, selectedModel, setCurrentView, currentView]);
 
   return {
     handleChangeWidth,

src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios.ts

+import { getBounds } from '@/services/pluginsManager/map/data/getBounds';
+import { ZERO } from '@/constants/common';
+import { DEFAULT_IMAGE_SIZE, DEFAULT_MODEL_ASPECT_RATIOS } from '../ImageSize.constants';
+import { ImageSize, ModelAspectRatios } from '../ImageSize.types';
+
+export const getScreenAspectRatios = (): ModelAspectRatios => {
+  const bounds = getBounds();
+  if (!bounds) {
+    return DEFAULT_MODEL_ASPECT_RATIOS;
+  }
+  let { x1, y1 } = bounds;
+  const { x2, y2 } = bounds;
+  if (x1 > x2) {
+    x1 = ZERO;
+  }
+  if (y1 > y2) {
+    y1 = ZERO;
+  }
+  const width = x2 - x1;
+  const height = y2 - y1;
+
+  return {
+    vertical: height / width,
+    horizontal: width / height,
+  };
+};
+
+export const getScreenDimension = (): ImageSize => {
+  const bounds = getBounds();
+  if (!bounds) {
+    return DEFAULT_IMAGE_SIZE;
+  }
+  let { x1, y1 } = bounds;
+  const { x2, y2 } = bounds;
+  if (x1 > x2) {
+    x1 = ZERO;
+  }
+  if (y1 > y2) {
+    y1 = ZERO;
+  }
+  const width = x2 - x1;
+  const height = y2 - y1;
+
+  return {
+    width,
+    height,
+  };
+};

src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx

@@ -4,6 +4,7 @@ export const Graphics = (): React.ReactNode => {
   return (
     <div data-testid="graphics-tab">
       <Export>
+        <Export.CurrentView />
         <Export.Submap />
         <Export.ImageSize />
         <Export.ImageFormat />