@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js

@@ -15,14 +15,14 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useRef, useEffect } from 'react';
+import React, { useEffect, createRef } from 'react';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../../../format-message';
 import { ImageCropperSettingsPropTypes } from './propTypes';
 import { buildSvg } from './svg';
 import { PREVIEW_WIDTH, PREVIEW_HEIGHT, BACKGROUND_SQUARE_SIZE } from './constants';
 import { useMouseWheel } from './useMouseWheel';
-import { useArrowKeys } from './useArrowKeys';
+import { useKeyMouseEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../../../../shared/CheckerboardStyling';
 /**
  * Remove the node contents and append the svg element.
@@ -58,7 +58,9 @@ export const Preview = _ref2 => {
     settings,
     dispatch
   } = _ref2;
-  const shapeRef = useRef(null);
+  const previewRef = /*#__PURE__*/createRef();
+  const shapeRef = /*#__PURE__*/createRef();
+  const imgRef = /*#__PURE__*/createRef();
   const {
     image,
     shape,
@@ -68,7 +70,11 @@ export const Preview = _ref2 => {
     translateY
   } = settings;
   const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
-  const [tempTranslateX, tempTranslateY] = useArrowKeys(translateX, translateY, dispatch);
+  const [tempTranslateX, tempTranslateY, onMouseDownCallback] = useKeyMouseEvents(translateX, translateY, dispatch, imgRef);
+  useEffect(() => {
+    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   useEffect(() => {
     const svg = buildSvg(shape);
     replaceSvg(svg, shapeRef.current);
@@ -81,7 +87,11 @@ export const Preview = _ref2 => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: "cropper-preview",
+    ref: previewRef,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       position: 'relative',
       width: `${PREVIEW_WIDTH}px`,
       height: `${PREVIEW_HEIGHT}px`,
@@ -93,25 +103,24 @@ export const Preview = _ref2 => {
     onWheel: onWheelCallback
   }, /*#__PURE__*/React.createElement("img", {
     src: image,
+    ref: imgRef,
     alt: "Delwedd i'w thocio",
     style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
       height: '100%',
-      width: '100%',
       objectFit: 'contain',
       textAlign: 'center',
       transform: transformValue
-    }
+    },
+    onMouseDown: e => onMouseDownCallback(e, previewRef.current)
   }), /*#__PURE__*/React.createElement("div", {
     id: "cropShapeContainer",
+    ref: shapeRef,
     style: {
       position: 'absolute',
       top: 0,
-      left: 0
-    },
-    ref: shapeRef
+      left: 0,
+      pointerEvents: 'none'
+    }
   }));
 };
 Preview.propTypes = {

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/__tests__/Modal.test.js

@@ -32,6 +32,26 @@ describe('ImageCropperModal', () => {
       }))
     });
   });
+  it('renders the message', () => {
+    const onSubmit = jest.fn();
+    render( /*#__PURE__*/React.createElement(ImageCropperModal, {
+      open: true,
+      onSubmit: onSubmit,
+      image: "data:image/png;base64,asdfasdfjksdf==",
+      message: "Banana"
+    }));
+    expect(screen.getByTestId('alert-message')).toBeInTheDocument();
+    expect(screen.getByText(/banana/i)).toBeInTheDocument();
+  });
+  it("doesn't render the message", () => {
+    const onSubmit = jest.fn();
+    render( /*#__PURE__*/React.createElement(ImageCropperModal, {
+      open: true,
+      onSubmit: onSubmit,
+      image: "data:image/png;base64,asdfasdfjksdf=="
+    }));
+    expect(screen.queryByTestId('alert-message')).not.toBeInTheDocument();
+  });
   it('calls onSubmit function', async () => {
     const onSubmit = jest.fn();
     render( /*#__PURE__*/React.createElement(ImageCropperModal, {

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/__tests__/Preview.test.js

@@ -52,7 +52,7 @@ describe('Preview', () => {
       <img
         alt="Image to crop"
         src="https://www.fillmurray.com/640/480"
-        style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; object-fit: contain; text-align: center;"
+        style="height: 100%; object-fit: contain; text-align: center;"
       />
     `);
     });
@@ -279,4 +279,74 @@ describe('Preview', () => {
       });
     });
   });
+  describe('listens mouse dragging', () => {
+    let container, target, mouseDownEvent, mouseMoveEvent, mouseUpEvent;
+    beforeAll(() => {
+      mouseDownEvent = {
+        target
+      };
+      mouseMoveEvent = {
+        clientX: 15,
+        clientY: 30
+      };
+      mouseUpEvent = {
+        target
+      };
+    });
+    beforeEach(() => {
+      const component = render( /*#__PURE__*/React.createElement(Preview, {
+        settings: settings,
+        dispatch: dispatch
+      }));
+      container = component.container;
+      target = container.querySelector('img');
+      fireEvent.mouseDown(target, mouseDownEvent);
+      fireEvent.mouseMove(target, mouseMoveEvent);
+      fireEvent.mouseUp(target, mouseUpEvent);
+    });
+    describe('calls dispatch', () => {
+      it('when dragging once', async () => {
+        await waitFor(() => {
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateX',
+            payload: 15
+          });
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateY',
+            payload: 30
+          });
+        });
+      });
+      it('when dragging and reuses previous position', async () => {
+        fireEvent.mouseDown(target, mouseDownEvent);
+        fireEvent.mouseMove(target, mouseMoveEvent);
+        fireEvent.mouseUp(target, mouseUpEvent);
+        await waitFor(() => {
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateX',
+            payload: 30
+          });
+          expect(dispatch).toHaveBeenCalledWith({
+            type: 'SetTranslateY',
+            payload: 60
+          });
+        });
+      });
+    });
+    describe('sets translate style', () => {
+      it('when dragging once', async () => {
+        await waitFor(() => {
+          expect(target.style.transform).toEqual('translateX(15px) translateY(30px)');
+        });
+      });
+      it('when dragging and reuses previous position', async () => {
+        fireEvent.mouseDown(target, mouseDownEvent);
+        fireEvent.mouseMove(target, mouseMoveEvent);
+        fireEvent.mouseUp(target, mouseUpEvent);
+        await waitFor(() => {
+          expect(target.style.transform).toEqual('translateX(30px) translateY(60px)');
+        });
+      });
+    });
+  });
 });

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '@instructure/ui-flex';
+import { Button } from '@instructure/ui-buttons';
+import { IconResetLine } from '@instructure/ui-icons';
+import formatMessage from '../../../../../../../format-message';
+export const ResetControls = _ref => {
+  let {
+    onReset
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    renderIcon: IconResetLine,
+    onClick: onReset
+  }, "Reset"));
+};
+ResetControls.propTypes = {
+  onReset: PropTypes.func
+};
+ResetControls.defaultProps = {
+  onReset: () => {}
+};

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconRotateLeftLine, IconRotateRightLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { View } from '@instructure/ui-view';
 import { CustomNumberInput } from './CustomNumberInput';
 import { calculateRotation, getNearestRectAngle } from './utils';
 import { BUTTON_ROTATION_DEGREES } from '../constants';
@@ -54,7 +55,13 @@ export const RotationControls = _ref => {
 
   const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 medium 0 0",
+    title: "Rotation",
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: rotation,
@@ -63,17 +70,14 @@ export const RotationControls = _ref => {
     processValueCallback: calculateRotation,
     placeholder: "Rotation",
     onChange: value => onChange(value)
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: rotateLeftCallback,
     screenReaderLabel: "Rotate image -90 degrees"
-  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null))), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 medium 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null)), /*#__PURE__*/React.createElement(IconButton, {
     onClick: rotateRightCallback,
     screenReaderLabel: "Rotate image 90 degrees"
-  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null))));
+  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null)));
 };
 RotationControls.propTypes = {
   rotation: PropTypes.number,

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js

@@ -16,10 +16,10 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import formatMessage from '../../../../../../../format-message';
 import { SimpleSelect } from '@instructure/ui-simple-select';
-import PropTypes from 'prop-types';
 import { ZoomControls } from './ZoomControls';
 import { Shape } from '../../../../svg/shape';
 const SHAPE_OPTIONS = [{

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js

@@ -19,7 +19,9 @@ import React from 'react';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
-import { calculateScaleRatio, calculateScalePercentage, round } from './utils';
+import { View } from '@instructure/ui-view';
+import { calculateScaleRatio, calculateScalePercentage } from './utils';
+import round from '../../../../utils/round';
 import { MAX_SCALE_RATIO, MIN_SCALE_RATIO, BUTTON_SCALE_STEP } from '../constants';
 import formatMessage from '../../../../../../../format-message';
 import PropTypes from 'prop-types';
@@ -73,7 +75,12 @@ export const ZoomControls = _ref => {
     onZoomChange(newScaleRatio);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    title: "Zoom",
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: round(scaleRatio * 100),
@@ -82,17 +89,17 @@ export const ZoomControls = _ref => {
     processValueCallback: calculateScalePercentage,
     placeholder: "Zoom",
     onChange: value => onZoomChange(round(value / 100))
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: zoomOutCallback,
     interaction: scaleRatio > MIN_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: "Pellhau o\u2019r ddelwedd"
-  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null)), /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "zoom-in-button",
     onClick: zoomInCallback,
     interaction: scaleRatio < MAX_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: "Nes\xE1u at y ddelwedd"
-  }, /*#__PURE__*/React.createElement(IconZoomInLine, null))));
+  }, /*#__PURE__*/React.createElement(IconZoomInLine, null)));
 };
 ZoomControls.propTypes = {
   scaleRatio: PropTypes.number,

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/__tests__/ResetControls.test.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { ResetControls } from '../ResetControls';
+import { fireEvent, render } from '@testing-library/react';
+describe('ResetControls', () => {
+  it('renders button', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(ResetControls, null));
+    const resetButton = container.querySelector('button');
+    expect(resetButton).toBeInTheDocument();
+  });
+  it('calls function when button is clicked', () => {
+    const callback = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(ResetControls, {
+      onReset: callback
+    }));
+    const resetButton = container.querySelector('button');
+    fireEvent.click(resetButton);
+    expect(callback).toHaveBeenCalled();
+  });
+});

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/__tests__/ZoomControls.test.js

@@ -19,7 +19,7 @@ import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { ZoomControls } from '../ZoomControls';
 import { BUTTON_SCALE_STEP } from '../../constants';
-import { round } from '../utils';
+import round from '../../../../../utils/round';
 import { showFlashAlert } from '../../../../../../../../canvasFileBrowser/FlashAlert';
 jest.mock('../../../../../../../../canvasFileBrowser/FlashAlert');
 jest.mock('@instructure/debounce', () => ({

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js

@@ -21,6 +21,7 @@ import { actions } from '../../../../reducers/imageCropper';
 import { ZoomControls } from './ZoomControls';
 import { RotationControls } from './RotationControls';
 import { ShapeControls } from './ShapeControls';
+import { ResetControls } from './ResetControls';
 export const Controls = _ref => {
   let {
     settings,
@@ -30,7 +31,8 @@ export const Controls = _ref => {
     id: "imageCropperControls",
     direction: "row",
     margin: "x-small",
-    alignItems: "start"
+    alignItems: "start",
+    role: "group"
   }, /*#__PURE__*/React.createElement(ShapeControls, {
     shape: settings.shape,
     onChange: shape => dispatch({
@@ -49,5 +51,11 @@ export const Controls = _ref => {
       type: actions.SET_SCALE_RATIO,
       payload: scaleRatio
     })
+  }), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true
+  }), /*#__PURE__*/React.createElement(ResetControls, {
+    onReset: () => dispatch({
+      type: actions.RESET_SETTINGS
+    })
   }));
 };

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js

@@ -16,10 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { BUTTON_ROTATION_DEGREES, MAX_SCALE_RATIO, MIN_SCALE_RATIO } from '../constants';
-export const round = function (number) {
-  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return parseFloat(number.toFixed(digits));
-};
+import round from '../../../../utils/round';
 export const calculateScaleRatio = scaleRatio => {
   let result = round(scaleRatio);
   result = result > MAX_SCALE_RATIO ? MAX_SCALE_RATIO : result;

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import round from 'round';
+import round from '../../../utils/round';
 import { buildShapeMask } from './svg/shape';
 import { createSvgElement } from './svg/utils';
 import { PREVIEW_HEIGHT } from './constants';

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import round from 'round';
+import round from '../../../../utils/round';
 import { SHAPE_CONTAINER_LENGTH } from '../constants';
 import { createSvgElement } from './utils';
 import { Shape } from '../../../../svg/shape';

package/lib/translated/cy/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js

@@ -0,0 +1,211 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { debounce } from '@instructure/debounce';
+import round from '../../../utils/round';
+import { KEY_EVENT_DELAY, KEY_EVENT_STEP } from './constants';
+import { actions } from '../../../reducers/imageCropper';
+const EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];
+
+function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving) {
+  // Refs that manage the keydown acceleration
+  const direction = useRef(0);
+  const elapsedTime = useRef(0);
+
+  const onKeyDownCallback = event => {
+    var _context, _context2, _context3;
+
+    // 37 = Left, 38 = Up, 39 = Right, 40 = Down
+    const {
+      keyCode
+    } = event;
+
+    if (!_includesInstanceProperty(_context = [37, 38, 39, 40]).call(_context, keyCode)) {
+      return;
+    }
+
+    elapsedTime.current += 1;
+    let increment = 1;
+
+    if (keyCode === direction.current) {
+      increment = Math.floor(elapsedTime.current / KEY_EVENT_STEP) + 1;
+    } else {
+      direction.current = keyCode;
+      elapsedTime.current = 0;
+    }
+
+    event.preventDefault();
+
+    if (_includesInstanceProperty(_context2 = [37, 39]).call(_context2, keyCode)) {
+      const signedIncrement = keyCode === 37 ? -increment : increment;
+      const newTranslateX = round(tempTranslateXRef.current + signedIncrement);
+      setTempTranslateX(newTranslateX);
+    }
+
+    if (_includesInstanceProperty(_context3 = [38, 40]).call(_context3, keyCode)) {
+      const signedIncrement = keyCode === 38 ? -increment : increment;
+      const newTranslateY = round(tempTranslateYRef.current + signedIncrement);
+      setTempTranslateY(newTranslateY);
+    }
+  };
+
+  const stopMovementCallback = useCallback(debounce(() => {
+    direction.current = elapsedTime.current = 0;
+    setIsMoving(false);
+  }, KEY_EVENT_DELAY), []);
+  useEffect(() => {
+    const onKeyDownCallbackWrapper = event => {
+      // If the active element is in the modal header, footer or controls.
+      if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => {
+        var _document$getElementB;
+
+        return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(document.activeElement);
+      })) {
+        return;
+      }
+
+      onKeyDownCallback(event);
+    }; // Adds the event listener when component did mount
+
+
+    document.addEventListener('keydown', onKeyDownCallbackWrapper);
+    return () => {
+      // Removes the event listener when component will unmount
+      document.removeEventListener('keydown', onKeyDownCallbackWrapper);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (isMoving && direction.current !== 0) {
+      stopMovementCallback();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [tempTranslateX, tempTranslateY]);
+}
+
+function useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {
+  const initialPageX = useRef(0);
+  const initialPageY = useRef(0);
+  const mouseDown = useRef(false);
+  const imgElement = useRef(null);
+  const containerElement = useRef(null);
+
+  const stoppedMovingCallback = () => {
+    mouseDown.current = false;
+    initialPageX.current = 0;
+    initialPageY.current = 0;
+    imgElement.current.onmousemove = null;
+    imgElement.current.onmouseup = null;
+    imgElement.current = null;
+    containerElement.current.onmouseout = null;
+    containerElement.current = null;
+    setIsMoving(false);
+  };
+
+  const startedMovingCallback = (target, clientX, clientY, container) => {
+    mouseDown.current = true;
+    initialPageX.current = clientX;
+    initialPageY.current = clientY;
+    target.onmousemove = onMouseMoveCallback;
+    target.onmouseup = stoppedMovingCallback;
+    imgElement.current = target; // Should stop the movement when mouse leaves the preview
+
+    container.onmouseout = stoppedMovingCallback;
+    containerElement.current = container;
+    setIsMoving(true);
+  };
+
+  const onMouseMoveCallback = e => {
+    if (!mouseDown.current) {
+      return stoppedMovingCallback();
+    }
+
+    setTempTranslateX(tempTranslateX + e.clientX - initialPageX.current);
+    setTempTranslateY(tempTranslateY + e.clientY - initialPageY.current);
+  };
+
+  return (e, container) => startedMovingCallback(e.target, e.clientX, e.clientY, container);
+}
+
+export function useKeyMouseEvents(translateX, translateY, dispatch, imgRef) {
+  const [tempTranslateX, _setTempTranslateX] = useState(translateX);
+  const [tempTranslateY, _setTempTranslateY] = useState(translateY);
+  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
+
+  const tempTranslateXRef = useRef(tempTranslateX);
+  const tempTranslateYRef = useRef(tempTranslateY);
+
+  const setTempTranslateX = data => {
+    setIsMoving(true);
+    tempTranslateXRef.current = data;
+
+    _setTempTranslateX(data);
+  };
+
+  const setTempTranslateY = data => {
+    setIsMoving(true);
+    tempTranslateYRef.current = data;
+
+    _setTempTranslateY(data);
+  };
+
+  useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving);
+  const onMouseDownCallback = useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.
+
+  useEffect(() => {
+    if (isMoving) {
+      return;
+    }
+
+    if (tempTranslateX !== translateX) {
+      dispatch({
+        type: actions.SET_TRANSLATE_X,
+        payload: tempTranslateX
+      });
+    }
+
+    if (tempTranslateY !== translateY) {
+      dispatch({
+        type: actions.SET_TRANSLATE_Y,
+        payload: tempTranslateY
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isMoving]); // Updates the component state when props changed.
+
+  useEffect(() => {
+    if (isMoving) {
+      return;
+    }
+
+    if (translateX !== tempTranslateX) {
+      tempTranslateXRef.current = translateX;
+
+      _setTempTranslateX(translateX);
+    }
+
+    if (translateY !== tempTranslateY) {
+      tempTranslateYRef.current = translateY;
+
+      _setTempTranslateY(translateY);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [translateX, translateY]);
+  return [tempTranslateX, tempTranslateY, onMouseDownCallback];
+}