Skip to content

Commit

Permalink
Refactor size changing
Browse files Browse the repository at this point in the history
  • Loading branch information
@roman-drozd-it
roman-drozd-it committed Aug 28, 2024
1 parent 7b5372e commit c80cd66
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 111 deletions.
167 changes: 73 additions & 94 deletions src/components/drawing/DrawingBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const DrawingBoard: React.FC = () => {
// size
const sizeRef = useRef<NodeJS.Timeout | null>(null);
const pencilBrushSize = useAppSelector((state) => state.room.drawing.pencilBrushSize);
const pencilBrushRange = [ 0, 999 ]; // eslint-disable-line
const eraserSize = useAppSelector((state) => state.room.drawing.eraserSize);
const textSize = useAppSelector((state) => state.room.drawing.textSize);
const [ sizeLabel, setSizeLabel ] = useState<number>();
Expand Down Expand Up @@ -292,101 +293,79 @@ const DrawingBoard: React.FC = () => {
handleSetTool('eraser');
};

const handleIncSize = (e: React.MouseEvent<HTMLButtonElement>) => {

switch (e.type) {
case 'click':

switch (tool) {
case 'pencilBrush':
dispatch(roomActions.setDrawingPencilBrushSizeInc());
break;
case 'text':
dispatch(roomActions.setDrawingTexSizetInc());
break;
case 'eraser':
dispatch(roomActions.setDrawingEraserSizeInc());
const handleChangeSize = (e: React.MouseEvent<HTMLButtonElement>, operation: 'inc'|'dec') => {

switch (tool) {

case 'pencilBrush':

switch (e.type) {
case 'click': dispatch(roomActions.setDrawingPencilBrushSize(operation)); break;
case 'mousedown':

if (!sizeRef.current) {
sizeRef.current = setTimeout(() => {
sizeRef.current = setInterval(() => {

dispatch(roomActions.setDrawingPencilBrushSize(operation));

}, 20);
}, 600);
}

break;
}
break;
case 'mousedown':
if (!sizeRef.current) {
sizeRef.current = setTimeout(() => {
sizeRef.current = setInterval(() => {

switch (tool) {
case 'pencilBrush':
dispatch(roomActions.setDrawingPencilBrushSizeInc());
break;
case 'text':
dispatch(roomActions.setDrawingTexSizetInc());
break;
case 'eraser':
dispatch(roomActions.setDrawingEraserSizeInc());
break;
}

}, 20);
}, 600);
}
break;
case 'mouseup':
case 'mouseleave':
if (sizeRef.current) {
clearInterval(sizeRef.current);
sizeRef.current = null;
}
break;
}
};

const handleDecSize = (e: React.MouseEvent<HTMLButtonElement>) => {

switch (e.type) {
case 'click':

switch (tool) {
case 'pencilBrush':
dispatch(roomActions.setDrawingPencilBrushSizeDec());
break;
case 'text':
dispatch(roomActions.setDrawingTextSizeDec());
break;
case 'eraser':
dispatch(roomActions.setDrawingEraserSizeDec());
break;
}

break;
case 'mousedown':
if (!sizeRef.current) {
sizeRef.current = setTimeout(() => {
sizeRef.current = setInterval(() => {

switch (tool) {
case 'pencilBrush':
dispatch(roomActions.setDrawingPencilBrushSizeDec());
break;
case 'text':
dispatch(roomActions.setDrawingTextSizeDec());
break;
case 'eraser':
dispatch(roomActions.setDrawingEraserSizeDec());
break;
}

}, 20);
}, 600);

case 'text':

switch (e.type) {
case 'click': dispatch(roomActions.setDrawingTexSize(operation)); break;
case 'mousedown':
if (!sizeRef.current) {
sizeRef.current = setTimeout(() => {
sizeRef.current = setInterval(() => {

dispatch(roomActions.setDrawingTexSize(operation));

}, 20);
}, 600);
}

break;
}

break;
case 'mouseup':
case 'mouseleave':
if (sizeRef.current) {
clearInterval(sizeRef.current);
sizeRef.current = null;

case 'eraser':

switch (e.type) {
case 'click': dispatch(roomActions.setDrawingEraserSize(operation)); break;
case 'mousedown':
if (!sizeRef.current) {
sizeRef.current = setTimeout(() => {
sizeRef.current = setInterval(() => {

dispatch(roomActions.setDrawingEraserSize(operation));

}, 20);
}, 600);
}
break;
case 'mouseup':
}

break;
}

if (e.type === 'mouseleave' || e.type === 'mouseup') {
if (sizeRef.current) {
clearInterval(sizeRef.current);
sizeRef.current = null;
}

}
};

const handleUseColor = (selectedColor: RoomState['drawing']['color']) => {
Expand Down Expand Up @@ -527,10 +506,10 @@ const DrawingBoard: React.FC = () => {
>
<IconButton
aria-label="Increase Size"
onClick={handleIncSize}
onMouseDown={handleIncSize}
onMouseUp={handleIncSize}
onMouseLeave={handleIncSize}
onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'inc')}
onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'inc')}
onMouseUp={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'inc')}
onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'inc')}
title="Increase Size"
size='small'
>
Expand All @@ -549,10 +528,10 @@ const DrawingBoard: React.FC = () => {

<IconButton
aria-label="Decrease Size"
onClick={handleDecSize}
onMouseDown={handleDecSize}
onMouseUp={handleIncSize}
onMouseLeave={handleIncSize}
onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'dec')}
onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'dec')}
onMouseUp={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'dec')}
onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => handleChangeSize(e, 'dec')}
title="Decrease Size"
size='small'
>
Expand Down
32 changes: 15 additions & 17 deletions src/store/slices/roomSlice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,25 +129,23 @@ const roomSlice = createSlice({
setDrawingZoom: ((state, action: PayloadAction<number>) => {
state.drawing.zoom = action.payload;
}),
setDrawingPencilBrushSizeInc: ((state) => {
state.drawing.pencilBrushSize += 1;
setDrawingPencilBrushSize: ((state, action: PayloadAction<'inc'|'dec'>) => {
action.payload === 'inc' ?
state.drawing.pencilBrushSize += 1:
state.drawing.pencilBrushSize -= 1;
}),
setDrawingPencilBrushSizeDec: ((state) => {
state.drawing.pencilBrushSize -= 1;

setDrawingTexSize: ((state, action: PayloadAction<'inc'|'dec'>) => {
action.payload === 'inc' ?
state.drawing.textSize += 1:
state.drawing.textSize -= 1;
}),
setDrawingTexSizetInc: ((state) => {
state.drawing.textSize += 1;
}),
setDrawingTextSizeDec: ((state) => {
state.drawing.textSize -= 1;
}),
setDrawingEraserSizeInc: ((state) => {
state.drawing.eraserSize += 1;
}),
setDrawingEraserSizeDec: ((state) => {
state.drawing.eraserSize -= 1;
}),


setDrawingEraserSize: ((state, action: PayloadAction<'inc'|'dec'>) => {
action.payload === 'inc' ?
state.drawing.eraserSize += 1:
state.drawing.eraserSize -= 1;
}),
}
});

Expand Down

0 comments on commit c80cd66

Please sign in to comment.