Moving slippy components in their own directory.

This commit is contained in:
Eric van der Vlist 2022-09-12 09:17:06 +02:00
parent d4f3e96743
commit 2207ae1652
9 changed files with 49 additions and 50 deletions

View File

@ -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;

View File

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

View File

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

View File

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

View File

@ -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;

View File

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

View File

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

View File

@ -1,8 +1,13 @@
import { createSlice } from '@reduxjs/toolkit'; 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, scale: 1,
translation: { x: 0, y: 0 }, translation: { x: 0, y: 0 },
}; };

View File

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