Skip to content
Snippets Groups Projects
Commit a4ba3e5e authored by Piotr Gawron's avatar Piotr Gawron
Browse files

current view is changing properly image size

parent 962ef514
No related branches found
No related tags found
1 merge request!341Resolve "Export graphics - add "Current view""
Showing
with 119 additions and 10 deletions
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>
);
};
import { CurrentView } from './CurrentView.types';
export const DEFAULT_CURRENT_VIEW: CurrentView = {
value: false,
};
export interface CurrentView {
value: boolean;
}
export { CurrentView } from './CurrentView.component';
...@@ -6,6 +6,8 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector'; ...@@ -6,6 +6,8 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsDataSelector, modelsIdsSelector } from '@/redux/models/models.selectors'; import { modelsDataSelector, modelsIdsSelector } from '@/redux/models/models.selectors';
import { ReactNode, useCallback, useMemo, useState } from 'react'; import { ReactNode, useCallback, useMemo, useState } from 'react';
import { activeOverlaysIdSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector'; 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 { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
import { Annotations } from './Annotations'; import { Annotations } from './Annotations';
import { DownloadElements } from './DownloadElements/DownloadElements'; import { DownloadElements } from './DownloadElements/DownloadElements';
...@@ -18,6 +20,7 @@ import { ImageFormat } from './ImageFormat'; ...@@ -18,6 +20,7 @@ import { ImageFormat } from './ImageFormat';
import { ImageSize } from './ImageSize'; import { ImageSize } from './ImageSize';
import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants'; import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
import { ImageSize as ImageSizeType } from './ImageSize/ImageSize.types'; import { ImageSize as ImageSizeType } from './ImageSize/ImageSize.types';
import { CurrentView as CurrentViewType } from './CurrentView/CurrentView.types';
import { IncludedCompartmentPathways } from './IncludedCompartmentPathways '; import { IncludedCompartmentPathways } from './IncludedCompartmentPathways ';
import { Submap } from './Submap'; import { Submap } from './Submap';
import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest'; import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest';
...@@ -45,6 +48,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => { ...@@ -45,6 +48,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
const [models, setModels] = useState<CheckboxItem[]>([]); const [models, setModels] = useState<CheckboxItem[]>([]);
const [imageSize, setImageSize] = useState<ImageSizeType>(DEFAULT_IMAGE_SIZE); const [imageSize, setImageSize] = useState<ImageSizeType>(DEFAULT_IMAGE_SIZE);
const [imageFormats, setImageFormats] = useState<CheckboxItem[]>([]); const [imageFormats, setImageFormats] = useState<CheckboxItem[]>([]);
const [currentView, setCurrentView] = useState<CurrentViewType>(DEFAULT_CURRENT_VIEW);
const handleDownloadElements = useCallback(async () => { const handleDownloadElements = useCallback(async () => {
const body = getDownloadElementsBodyRequest({ const body = getDownloadElementsBodyRequest({
...@@ -94,6 +98,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => { ...@@ -94,6 +98,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
models, models,
imageSize, imageSize,
imageFormats, imageFormats,
currentView,
}), }),
[ [
annotations, annotations,
...@@ -102,6 +107,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => { ...@@ -102,6 +107,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
models, models,
imageSize, imageSize,
imageFormats, imageFormats,
currentView,
], ],
); );
...@@ -113,6 +119,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => { ...@@ -113,6 +119,7 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
setModels, setModels,
setImageSize, setImageSize,
setImageFormats, setImageFormats,
setCurrentView,
handleDownloadElements, handleDownloadElements,
handleDownloadNetwork, handleDownloadNetwork,
handleDownloadGraphics, handleDownloadGraphics,
...@@ -133,3 +140,4 @@ Export.ImageSize = ImageSize; ...@@ -133,3 +140,4 @@ Export.ImageSize = ImageSize;
Export.ImageFormat = ImageFormat; Export.ImageFormat = ImageFormat;
Export.DownloadNetwork = DownloadNetwork; Export.DownloadNetwork = DownloadNetwork;
Export.DownloadGraphics = DownloadGraphics; Export.DownloadGraphics = DownloadGraphics;
Export.CurrentView = CurrentView;
import { DEFAULT_CURRENT_VIEW } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.constants';
import { ExportContextType } from './ExportCompound.types'; import { ExportContextType } from './ExportCompound.types';
import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants'; import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
...@@ -54,6 +55,7 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = { ...@@ -54,6 +55,7 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
setModels: () => {}, setModels: () => {},
setImageSize: () => {}, setImageSize: () => {},
setImageFormats: () => {}, setImageFormats: () => {},
setCurrentView: () => {},
handleDownloadElements: () => Promise.resolve(), handleDownloadElements: () => Promise.resolve(),
handleDownloadNetwork: () => Promise.resolve(), handleDownloadNetwork: () => Promise.resolve(),
handleDownloadGraphics: () => {}, handleDownloadGraphics: () => {},
...@@ -64,5 +66,6 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = { ...@@ -64,5 +66,6 @@ export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
models: [], models: [],
imageFormats: [], imageFormats: [],
imageSize: DEFAULT_IMAGE_SIZE, imageSize: DEFAULT_IMAGE_SIZE,
currentView: DEFAULT_CURRENT_VIEW,
}, },
}; };
import { CurrentView } from '@/components/Map/Drawer/ExportDrawer/ExportCompound/CurrentView/CurrentView.types';
import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types'; import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
import { ImageSize } from './ImageSize/ImageSize.types'; import { ImageSize } from './ImageSize/ImageSize.types';
...@@ -6,6 +7,7 @@ export type ExportContextType = { ...@@ -6,6 +7,7 @@ export type ExportContextType = {
setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>; setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>; setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>; setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setCurrentView: React.Dispatch<React.SetStateAction<CurrentView>>;
setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>; setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>;
setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>; setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
handleDownloadElements: () => Promise<void>; handleDownloadElements: () => Promise<void>;
...@@ -16,6 +18,7 @@ export type ExportContextType = { ...@@ -16,6 +18,7 @@ export type ExportContextType = {
includedCompartmentPathways: CheckboxItem[]; includedCompartmentPathways: CheckboxItem[];
excludedCompartmentPathways: CheckboxItem[]; excludedCompartmentPathways: CheckboxItem[];
models: CheckboxItem[]; models: CheckboxItem[];
currentView: CurrentView;
imageSize: ImageSize; imageSize: ImageSize;
imageFormats: CheckboxItem[]; imageFormats: CheckboxItem[];
}; };
......
import { MapModel } from '@/types/models'; import { MapModel } from '@/types/models';
import { numberToSafeInt } from '@/utils/number/numberToInt'; import { numberToSafeInt } from '@/utils/number/numberToInt';
import { useCallback, useContext, useEffect } from 'react'; import { useCallback, useContext, useEffect } from 'react';
import {
getScreenAspectRatios,
getScreenDimension,
} from '@/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useScreenAspectRatios';
import { ExportContext } from '../../ExportCompound.context'; import { ExportContext } from '../../ExportCompound.context';
import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '../ImageSize.constants'; 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 { useExportGraphicsSelectedModel } from './useExportGraphicsSelectedModel';
import { getModelAspectRatios } from './useModelAspectRatios'; import { getModelAspectRatios } from './useModelAspectRatios';
...@@ -16,9 +20,15 @@ interface UseImageSizeResults { ...@@ -16,9 +20,15 @@ interface UseImageSizeResults {
export const useImageSize = (): UseImageSizeResults => { export const useImageSize = (): UseImageSizeResults => {
const selectedModel = useExportGraphicsSelectedModel(); const selectedModel = useExportGraphicsSelectedModel();
const aspectRatios = getModelAspectRatios(selectedModel); const { data, setImageSize, setCurrentView } = useContext(ExportContext);
const { data, setImageSize } = useContext(ExportContext); const { imageSize, currentView } = data;
const { imageSize } = data; let aspectRatios: ModelAspectRatios;
if (currentView.value) {
aspectRatios = getScreenAspectRatios();
} else {
aspectRatios = getModelAspectRatios(selectedModel);
}
const maxWidth = selectedModel?.width || DEFAULT_IMAGE_WIDTH; const maxWidth = selectedModel?.width || DEFAULT_IMAGE_WIDTH;
const maxHeight = selectedModel?.height || DEFAULT_IMAGE_HEIGHT; const maxHeight = selectedModel?.height || DEFAULT_IMAGE_HEIGHT;
...@@ -27,8 +37,8 @@ export const useImageSize = (): UseImageSizeResults => { ...@@ -27,8 +37,8 @@ export const useImageSize = (): UseImageSizeResults => {
const newWidth = newImageSize.width; const newWidth = newImageSize.width;
const newHeight = newImageSize.height; const newHeight = newImageSize.height;
const widthMinMax = Math.min(maxWidth, newWidth); const widthMinMax = currentView.value ? newWidth : Math.min(maxWidth, newWidth);
const heightMinMax = Math.min(maxHeight, newHeight); const heightMinMax = currentView.value ? newHeight : Math.min(maxHeight, newHeight);
const widthInt = numberToSafeInt(widthMinMax); const widthInt = numberToSafeInt(widthMinMax);
const heightInt = numberToSafeInt(heightMinMax); const heightInt = numberToSafeInt(heightMinMax);
...@@ -43,14 +53,17 @@ export const useImageSize = (): UseImageSizeResults => { ...@@ -43,14 +53,17 @@ export const useImageSize = (): UseImageSizeResults => {
const setDefaultModelImageSize = useCallback( const setDefaultModelImageSize = useCallback(
(model: MapModel): void => { (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({ const newImageSize = getNormalizedImageSize({
width: model.width, width,
height: model.height, height,
}); });
setImageSize(newImageSize); setImageSize(newImageSize);
}, },
[getNormalizedImageSize, setImageSize], [getNormalizedImageSize, setImageSize, setCurrentView, currentView],
); );
const handleChangeWidth = (width: number): void => { const handleChangeWidth = (width: number): void => {
...@@ -77,7 +90,7 @@ export const useImageSize = (): UseImageSizeResults => { ...@@ -77,7 +90,7 @@ export const useImageSize = (): UseImageSizeResults => {
} }
setDefaultModelImageSize(selectedModel); setDefaultModelImageSize(selectedModel);
}, [setDefaultModelImageSize, selectedModel]); }, [setDefaultModelImageSize, selectedModel, setCurrentView, currentView]);
return { return {
handleChangeWidth, handleChangeWidth,
......
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,
};
};
...@@ -4,6 +4,7 @@ export const Graphics = (): React.ReactNode => { ...@@ -4,6 +4,7 @@ export const Graphics = (): React.ReactNode => {
return ( return (
<div data-testid="graphics-tab"> <div data-testid="graphics-tab">
<Export> <Export>
<Export.CurrentView />
<Export.Submap /> <Export.Submap />
<Export.ImageSize /> <Export.ImageSize />
<Export.ImageFormat /> <Export.ImageFormat />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment