From a4ba3e5e819d5189e1e90b9836a87c776471d638 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 12 Dec 2024 12:01:10 +0100
Subject: [PATCH] current view is changing properly image size
---
.../CurrentView/CurrentView.component.tsx | 24 ++++++++++
.../CurrentView/CurrentView.constants.ts | 5 ++
.../CurrentView/CurrentView.types.ts | 3 ++
.../ExportCompound/CurrentView/index.ts | 1 +
.../ExportCompound.component.tsx | 8 ++++
.../ExportCompound/ExportCompound.constant.ts | 3 ++
.../ExportCompound/ExportCompound.types.ts | 3 ++
.../ImageSize/utils/useImageSize.ts | 33 +++++++++----
.../ImageSize/utils/useScreenAspectRatios.ts | 48 +++++++++++++++++++
.../Graphics/Graphics.component.tsx | 1 +
10 files changed, 119 insertions(+), 10 deletions(-)
create mode 100644 src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx
create mode 100644 src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts
create mode 100644 src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts
create mode 100644 src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts
create mode 100644 src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios.ts
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx
new file mode 100644
index 00000000..cad075a0
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.component.tsx
@@ -0,0 +1,24 @@
+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: </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>
+ );
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts
new file mode 100644
index 00000000..f512b6d7
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants.ts
@@ -0,0 +1,5 @@
+import { CurrentView } from './CurrentView.types';
+
+export const DEFAULT_CURRENT_VIEW: CurrentView = {
+ value: false,
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts
new file mode 100644
index 00000000..dc5bc917
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types.ts
@@ -0,0 +1,3 @@
+export interface CurrentView {
+ value: boolean;
+}
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts
new file mode 100644
index 00000000..883104d6
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/index.ts
@@ -0,0 +1 @@
+export { CurrentView } from './CurrentView.component';
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
index e33a99ed..1b7d192b 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
+++ b/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;
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
index 5a7e4f08..5381e784 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
@@ -1,3 +1,4 @@
+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,
},
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
index 02c87101..b57cc6e0 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
@@ -1,3 +1,4 @@
+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[];
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
index f36afdd3..d4869197 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
@@ -1,9 +1,13 @@
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,
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios.ts
new file mode 100644
index 00000000..e586afcb
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios.ts
@@ -0,0 +1,48 @@
+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,
+ };
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx b/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx
index 547c2c14..aafe37a2 100644
--- a/src/components/Map/Drawer/ExportDrawer/Graphics/Graphics.component.tsx
+++ b/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 />
--
GitLab