Renames

background-move/src/components/double-touch-handler.tsx

@@ -4,13 +4,13 @@ import _ from 'lodash';
 
 import { Point } from './viewport';
 
-interface TouchZoomHandlerProps {
+interface SingleTouchHandlerProps {
   updateZoom: (zoomFactor: number) => void;
   children: any;
 }
 
-const TouchZoomHandler: react.FC<TouchZoomHandlerProps> = (
-  props: TouchZoomHandlerProps
+const DoubleTouchHandler: react.FC<SingleTouchHandlerProps> = (
+  props: SingleTouchHandlerProps
 ) => {
   const initialTouchState = {
     state: 'up',
@@ -100,7 +100,7 @@ const TouchZoomHandler: react.FC<TouchZoomHandlerProps> = (
 
   return (
     <div
-      className='viewport'
+      className='viewport single-touch-handler'
       onTouchStart={touchStartHandler}
       onTouchMove={throtteledTouchMoveHandler}
       onTouchEnd={touchEndHandler}
@@ -111,4 +111,4 @@ const TouchZoomHandler: react.FC<TouchZoomHandlerProps> = (
   );
 };
 
-export default TouchZoomHandler;
+export default DoubleTouchHandler;

background-move/src/components/mouse-handler.tsx

@@ -4,13 +4,13 @@ import _ from 'lodash';
 
 import { Point } from './viewport';
 
-interface MouseShiftHandlerProps {
+interface MouseHandlerProps {
   updateShift: (shiftDelta: Point) => void;
   children: any;
 }
 
-const MouseShiftHandler: react.FC<MouseShiftHandlerProps> = (
-  props: MouseShiftHandlerProps
+const MouseHandler: react.FC<MouseHandlerProps> = (
+  props: MouseHandlerProps
 ) => {
 
   const initialMouseState = {
@@ -88,4 +88,4 @@ const MouseShiftHandler: react.FC<MouseShiftHandlerProps> = (
   );
 };
 
-export default MouseShiftHandler;
+export default MouseHandler;

background-move/src/components/single-touch-handler.tsx

@@ -9,7 +9,7 @@ interface TouchShiftHandlerProps {
   children: any;
 }
 
-const TouchShiftHandler: react.FC<TouchShiftHandlerProps> = (
+const SingleTouchHandler: react.FC<TouchShiftHandlerProps> = (
   props: TouchShiftHandlerProps
 ) => {
   const initialTouchState = {
@@ -96,4 +96,4 @@ const TouchShiftHandler: react.FC<TouchShiftHandlerProps> = (
   );
 };
 
-export default TouchShiftHandler;
+export default SingleTouchHandler;

background-move/src/components/viewport.tsx

@@ -2,12 +2,12 @@ import react, { useCallback, useState } from 'react';
 
 import _ from 'lodash';
 
-import MouseShiftHandler from './mouse-shift-handler';
+import MouseHandler from './mouse-handler';
 import Layer from './layer';
 
 import '../theme/viewport.css';
-import TouchShiftHandler from './touch-shift-handler';
-import TouchZoomHandler from './touch-zoom-handler';
+import SingleTouchHandler from './single-touch-handler';
+import DoubleTouchHandler from './double-touch-handler';
 
 export interface Point {
   x: number;
@@ -41,15 +41,15 @@ const Viewport: react.FC<{}> = (props: {}) => {
 
   return (
     <div className='viewport'>
-      <MouseShiftHandler updateShift={updateShift}>
-        <TouchShiftHandler updateShift={updateShift}>
-          <TouchZoomHandler updateZoom={updateZoom}>
+      <MouseHandler updateShift={updateShift}>
+        <SingleTouchHandler updateShift={updateShift}>
+          <DoubleTouchHandler updateZoom={updateZoom}>
             <Layer shift={shift} zoom={zoom}>
               <img src='/assets/background.jpg' alt='' />
             </Layer>
-          </TouchZoomHandler>
-        </TouchShiftHandler>
-      </MouseShiftHandler>
+          </DoubleTouchHandler>
+        </SingleTouchHandler>
+      </MouseHandler>
     </div>
   );
 };