Dyomedea
/
sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Renames

This commit is contained in:
Eric van der Vlist 2022-09-09 20:22:20 +02:00
parent bfb8b622cc
commit af2fdf75a2
4 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
background-move/src/components/touch-zoom-handler.tsx → background-move/src/components/double-touch-handler.tsx
View File

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

8
background-move/src/components/mouse-shift-handler.tsx → background-move/src/components/mouse-handler.tsx
View File

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

4
background-move/src/components/touch-shift-handler.tsx → background-move/src/components/single-touch-handler.tsx
View File

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

18
background-move/src/components/viewport.tsx
View File

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