Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-11-10 14:54:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

persist specific individualZoom value. refactor to use index instead of explicit zoomFactor

Browse source
This commit is contained in:
Jibran Absarulislam 2023-06-16 14:45:09 -04:00
parent 02c31c911d
commit 2de2975ed8
3 changed files with 48 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
desktop-app/src/renderer/components/Previewer/Device/index.tsx
View file

@ -32,8 +32,6 @@ import {
selectAddress,
selectIsInspecting,
selectLayout,
setZoom100,
restoreZoom,
selectRotate,
selectZoomFactor,
setAddress,
@ -201,10 +199,8 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
if (!isIndividualLayout) {
dispatch(setLayout(PREVIEW_LAYOUTS.INDIVIDUAL));
setIndividualDevice(selectedDevice);
dispatch(setZoom100());
} else {
dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
dispatch(restoreZoom());
}
};

68
desktop-app/src/renderer/store/features/renderer/index.ts
View file

@ -1,11 +1,11 @@
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import { PreviewLayout } from 'common/constants';
import { PREVIEW_LAYOUTS, PreviewLayout } from 'common/constants';
import type { RootState } from '../..';
export interface RendererState {
address: string;
columnsZoomFactor: number;
individualZoomFactor: number;
zoomFactor: number;
rotate: boolean;
isInspecting: boolean | undefined;
@ -28,7 +28,8 @@ const urlFromQueryParam = () => {
const initialState: RendererState = {
address: urlFromQueryParam() ?? window.electron.store.get('homepage'),
columnsZoomFactor: window.electron.store.get('renderer.columnsZoomFactor'),
individualZoomFactor:
zoomSteps[window.electron.store.get('renderer.individualZoomStepIndex')],
zoomFactor: zoomSteps[window.electron.store.get('renderer.zoomStepIndex')],
rotate: false,
isInspecting: undefined,
@ -46,31 +47,46 @@ export const rendererSlice = createSlice({
}
},
zoomIn: (state) => {
const index = zoomSteps.indexOf(state.zoomFactor);
const index =
state.layout === PREVIEW_LAYOUTS.INDIVIDUAL
? zoomSteps.indexOf(state.individualZoomFactor)
: zoomSteps.indexOf(state.zoomFactor);
if (index < zoomSteps.length - 1) {
const newIndex = index + 1;
state.zoomFactor = zoomSteps[newIndex];
window.electron.store.set('renderer.zoomStepIndex', newIndex);
if (state.layout === PREVIEW_LAYOUTS.INDIVIDUAL) {
const newIndex = index + 1;
state.individualZoomFactor = zoomSteps[newIndex];
window.electron.store.set(
'renderer.individualZoomStepIndex',
newIndex
);
} else {
const newIndex = index + 1;
state.zoomFactor = zoomSteps[newIndex];
window.electron.store.set('renderer.zoomStepIndex', newIndex);
}
}
},
zoomOut: (state) => {
const index = zoomSteps.indexOf(state.zoomFactor);
const index =
state.layout === PREVIEW_LAYOUTS.INDIVIDUAL
? zoomSteps.indexOf(state.individualZoomFactor)
: zoomSteps.indexOf(state.zoomFactor);
if (index > 0) {
const newIndex = index - 1;
state.zoomFactor = zoomSteps[newIndex];
window.electron.store.set('renderer.zoomStepIndex', newIndex);
if (state.layout === PREVIEW_LAYOUTS.INDIVIDUAL) {
const newIndex = index - 1;
state.individualZoomFactor = zoomSteps[newIndex];
window.electron.store.set(
'renderer.individualZoomStepIndex',
newIndex
);
} else {
const newIndex = index - 1;
state.zoomFactor = zoomSteps[newIndex];
window.electron.store.set('renderer.zoomStepIndex', newIndex);
}
}
},
setZoom100: (state) => {
window.electron.store.set('renderer.columnsZoomFactor', state.zoomFactor);
state.zoomFactor = 1;
},
restoreZoom: (state) => {
const zoomFactor = window.electron.store.get(
'renderer.columnsZoomFactor'
);
state.zoomFactor = zoomFactor ?? 1;
},
setRotate: (state, action: PayloadAction<boolean>) => {
state.rotate = action.payload;
},
@ -92,15 +108,19 @@ export const {
setAddress,
zoomIn,
zoomOut,
setZoom100,
restoreZoom,
setRotate,
setIsInspecting,
setLayout,
setIsCapturingScreenshot,
} = rendererSlice.actions;
export const selectZoomFactor = (state: RootState) => state.renderer.zoomFactor;
export const selectZoomFactor = (state: RootState) => {
// depending on the layout, we want to use a different zoom factor
if (state.renderer.layout === PREVIEW_LAYOUTS.INDIVIDUAL) {
return state.renderer.individualZoomFactor;
}
return state.renderer.zoomFactor;
};
export const selectAddress = (state: RootState) => state.renderer.address;
export const selectRotate = (state: RootState) => state.renderer.rotate;
export const selectIsInspecting = (state: RootState) =>

4
desktop-app/src/store/index.ts
View file

@ -20,6 +20,10 @@ const schema = {
renderer: {
type: 'object',
properties: {
individualZoomStepIndex: {
type: 'number',
default: 3,
},
zoomStepIndex: {
type: 'number',
default: 3,