Skip to content
Snippets Groups Projects
Commit eb9797f3 authored by Jesse Baker's avatar Jesse Baker
Browse files

Centralised scale logic into uiReducer to catch keboard shortcuts on the...

Centralised scale logic into uiReducer to catch keboard shortcuts on the canvas/in the iframe. Changed zoomControl to call reducer zoom in/out actions.
parent 8101ea93
No related branches found
No related tags found
No related merge requests found
......@@ -4,6 +4,8 @@ import { Card, Flex, IconButton } from '@radix-ui/themes';
import { MinusIcon, PlusIcon, ZoomInIcon } from '@radix-ui/react-icons';
import { Select } from '@radix-ui/themes';
import {
canvasViewPortZoomIn,
canvasViewPortZoomOut,
scaleValues,
selectCanvasViewPort,
setCanvasViewPort,
......@@ -23,48 +25,15 @@ const ZoomControl = () => {
const handleSliderKeyDown = (
event: React.KeyboardEvent<HTMLInputElement>,
) => {
if (event.key === '+' || event.keyCode === 187) {
if (event.code === 'NumpadAdd' || event.code === 'Equal') {
handleIncrement();
} else if (event.key === '-' || event.keyCode === 189) {
} else if (event.code === 'NumpadSubtract' || event.code === 'Minus') {
handleDecrement();
}
};
const updateScale = (direction: 'increment' | 'decrement') => {
let currentScaleIndex = scaleValues.findIndex(
(sv) => sv.scale === canvasViewPort.scale,
);
if (currentScaleIndex === -1) {
currentScaleIndex = scaleValues.findIndex(
(sv) => sv.scale > canvasViewPort.scale,
);
if (direction === 'increment') {
// When incrementing, we want the scale immediately greater than current.
currentScaleIndex = Math.max(0, currentScaleIndex);
} else {
// When decrementing, we want the scale immediately less than current.
currentScaleIndex = Math.max(0, currentScaleIndex - 1);
}
} else {
// Clamp the scale between 0 and the length of the scaleValues array.
if (direction === 'increment') {
currentScaleIndex = Math.min(
scaleValues.length - 1,
currentScaleIndex + 1,
);
} else {
currentScaleIndex = Math.max(0, currentScaleIndex - 1);
}
}
const newScale =
scaleValues[currentScaleIndex]?.scale || scaleValues.at(-1)!.scale;
dispatch(setCanvasViewPort({ scale: newScale }));
};
const handleIncrement = () => updateScale('increment');
const handleDecrement = () => updateScale('decrement');
const handleIncrement = () => dispatch(canvasViewPortZoomIn());
const handleDecrement = () => dispatch(canvasViewPortZoomOut());
return (
<div className={styles.canvasControls}>
......
......@@ -101,10 +101,31 @@ export const scaleValues: ScaleValue[] = [
{ scale: 5, percent: '500%' },
];
// const scaleValues = [
// 0.25, 0.33, 0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4,
// 5,
// ];
/**
* Get the next/previous closest scale to the current scale (which might not be one of the
* available scaleValues) up to the min/max scaleValue available.
*/
const getNewScaleIndex = (
currentScale: number,
direction: 'increment' | 'decrement',
) => {
let currentIndex = scaleValues.findIndex(
(value) => value.scale === currentScale,
);
if (currentIndex === -1) {
currentIndex = scaleValues.findIndex((value) => value.scale > currentScale);
currentIndex =
direction === 'increment'
? Math.max(0, currentIndex)
: Math.max(0, currentIndex - 1);
} else {
currentIndex += direction === 'increment' ? 1 : -1;
}
// Clamp value between 0 and length of scaleValues array.
return Math.max(0, Math.min(scaleValues.length - 1, currentIndex));
};
// If you are not using async thunks you can use the standalone `createSlice`.
export const uiSlice = createAppSlice({
......@@ -183,19 +204,15 @@ export const uiSlice = createAppSlice({
},
),
canvasViewPortZoomIn: create.reducer((state, action) => {
const currentIndex = scaleValues.findIndex(
(value) => value.scale === state.canvasViewport.scale,
);
const nextIndex =
currentIndex + 1 < scaleValues.length ? currentIndex + 1 : currentIndex;
state.canvasViewport.scale = scaleValues[nextIndex].scale;
const currentScale = state.canvasViewport.scale;
const newIndex = getNewScaleIndex(currentScale, 'increment');
state.canvasViewport.scale = scaleValues[newIndex].scale;
}),
canvasViewPortZoomOut: create.reducer((state, action) => {
const currentIndex = scaleValues.findIndex(
(value) => value.scale === state.canvasViewport.scale,
);
const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : currentIndex;
state.canvasViewport.scale = scaleValues[prevIndex].scale;
const currentScale = state.canvasViewport.scale;
const newIndex = getNewScaleIndex(currentScale, 'decrement');
state.canvasViewport.scale = scaleValues[newIndex].scale;
}),
setPrimaryMenuActiveMenu: create.reducer(
(state, action: PayloadAction<string>) => {
......
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