Moving slippy components in their own directory.

src/components/layer.tsx

@@ -1,30 +0,0 @@
-import react from 'react';
-import { useSelector } from 'react-redux';
-
-import { ViewportState } from './viewport';
-
-import '../theme/layer.css';
-
-const Layer: react.FC<{
-  children?: JSX.Element;
-}> = (props: { children?: JSX.Element }) => {
-  const viewportState = useSelector(
-    (state: { slippy: ViewportState }) => state.slippy
-  );
-  console.log(
-    `--- Rendering layer, viewportState: ${JSON.stringify(viewportState)} ---`
-  );
-
-  return (
-    <div
-      className='background'
-      style={{
-        transform: `translate(${viewportState.translation.x}px, ${viewportState.translation.y}px) scale(${viewportState.scale})`,
-      }}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default Layer;

src/components/map.tsx

@@ -1,9 +1,9 @@
 import react from 'react';
-import Viewport from './viewport';
+import Slippy from './slippy/index';
 
 const Map: react.FC<{}> = (props: {}) => {
   return (
-    <Viewport>
+    <Slippy>
       <div>
         <div style={{ height: '256px' }}>
           <img
@@ -83,9 +83,8 @@ const Map: react.FC<{}> = (props: {}) => {
             style={{ width: '256px', height: '256px', opacity: 1 }}
           />
         </div>
-
       </div>
-    </Viewport>
+    </Slippy>
   );
 };
 

src/components/slippy/double-touch-handler.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
 
-import { slippyActions } from '../store/slippy';
+import { slippyActions } from '../../store/slippy';
 
 interface DoubleTouchHandlerProps {
   children: any;

src/components/slippy/index.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import MouseHandler from './mouse-handler';
 import Layer from './layer';
 
-import '../theme/viewport.css';
+import '../../theme/slippy.css';
 import SingleTouchHandler from './single-touch-handler';
 import DoubleTouchHandler from './double-touch-handler';
 
@@ -28,16 +28,11 @@ interface ViewportProps {
   children: any;
 }
 
-export interface ViewportState {
+const Slippy: react.FC<ViewportProps> = (props: ViewportProps) => {
-  scale: number;
-  translation: Point;
-}
-
-const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
 
   return (
-    <div className='viewport'>
+    <div className='slippy'>
       <MouseHandler>
         <SingleTouchHandler>
           <DoubleTouchHandler>
@@ -49,4 +44,4 @@ const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
   );
 };
 
-export default Viewport;
+export default Slippy;

src/components/slippy/layer.tsx

@@ -0,0 +1,30 @@
+import react from 'react';
+import { useSelector } from 'react-redux';
+
+import { SlippyState } from '../../store/slippy';
+
+import '../../theme/layer.css';
+
+const Layer: react.FC<{
+  children?: JSX.Element;
+}> = (props: { children?: JSX.Element }) => {
+  const slippyState = useSelector(
+    (state: { slippy: SlippyState }) => state.slippy
+  );
+  console.log(
+    `--- Rendering layer, slippyState: ${JSON.stringify(slippyState)} ---`
+  );
+
+  return (
+    <div
+      className='background'
+      style={{
+        transform: `translate(${slippyState.translation.x}px, ${slippyState.translation.y}px) scale(${slippyState.scale})`,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Layer;

src/components/slippy/mouse-handler.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import _ from 'lodash';
 
-import { slippyActions } from '../store/slippy';
+import { slippyActions } from '../../store/slippy';
 
 interface MouseHandlerProps {
   children: any;

src/components/slippy/single-touch-handler.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import _ from 'lodash';
 
-import { slippyActions } from '../store/slippy';
+import { slippyActions } from '../../store/slippy';
 
 interface SingleTouchHandlerProps {
   children: any;

src/store/slippy.ts

@@ -1,8 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit';
 
-import { ViewportState } from '../components/viewport';
+import { Point } from '../components/slippy/index';
 
-const initialSlippyState: ViewportState = {
+export interface SlippyState {
+    scale: number;
+    translation: Point;
+  }
+  
+const initialSlippyState: SlippyState = {
   scale: 1,
   translation: { x: 0, y: 0 },
 };

src/theme/slippy.css

@@ -1,4 +1,4 @@
-.viewport {
+.slippy {
     position: fixed;
     width: 100%;
     height: 100%;