Starting again with what has been developed as sandbox/map.
This commit is contained in:
vdv committed
1 parent
f81c436f7d
commit
716d05fb3e
17 files changed
+807
-268
No files matched your search
@@ -0,0 +1,135 @@
|
||||
import react, { useCallback, useState } from 'react';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Transformation } from './viewport';
|
||||
|
||||
interface DoubleTouchHandlerProps {
|
||||
applyTransformations: (transformations: Transformation[]) => void;
|
||||
children: any;
|
||||
}
|
||||
|
||||
const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
|
||||
props: DoubleTouchHandlerProps
|
||||
) => {
|
||||
const initialTouchState = {
|
||||
state: 'up',
|
||||
touches: [
|
||||
{ x: -1, y: -1 },
|
||||
{ x: -1, y: -1 },
|
||||
],
|
||||
distance: -1,
|
||||
initialZoom: 1,
|
||||
};
|
||||
|
||||
const [touchState, setTouchState] = useState(initialTouchState);
|
||||
|
||||
console.log('DoubleTouchHandler, touchState: ' + JSON.stringify(touchState));
|
||||
|
||||
const genericHandler = (event: any) => {
|
||||
console.log('Log - Event: ' + event.type);
|
||||
if (event.type.startsWith('touch')) {
|
||||
if (event.touches.length > 1) {
|
||||
console.log(
|
||||
`${event.touches.length} touches, (${event.touches[0].pageX}, ${event.touches[0].pageY}), (${event.touches[1].pageX}, ${event.touches[1].pageY})`
|
||||
);
|
||||
}
|
||||
|
||||
console.log('touchState: ' + JSON.stringify(touchState));
|
||||
return;
|
||||
}
|
||||
};
|
||||
const touchCancelHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
throtteledTouchMoveHandler.cancel();
|
||||
setTouchState(initialTouchState);
|
||||
};
|
||||
|
||||
const touchStartHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
if (event.touches.length === 2) {
|
||||
setTouchState({
|
||||
state: 'double',
|
||||
touches: [
|
||||
{ x: event.touches[0].pageX, y: event.touches[0].pageY },
|
||||
{ x: event.touches[1].pageX, y: event.touches[1].pageY },
|
||||
],
|
||||
distance: Math.sqrt(
|
||||
(event.touches[0].pageX - event.touches[1].pageX) ** 2 +
|
||||
(event.touches[0].pageY - event.touches[1].pageY) ** 2
|
||||
),
|
||||
initialZoom: 1,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const touchEndHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
setTouchState(initialTouchState);
|
||||
throtteledTouchMoveHandler.cancel();
|
||||
};
|
||||
|
||||
const touchMoveHandler = (event: any) => {
|
||||
if (touchState.state === 'double') {
|
||||
if (event.touches.length === 2) {
|
||||
genericHandler(event);
|
||||
const newDistance = Math.sqrt(
|
||||
(event.touches[0].pageX - event.touches[1].pageX) ** 2 +
|
||||
(event.touches[0].pageY - event.touches[1].pageY) ** 2
|
||||
);
|
||||
const factor = newDistance / touchState.distance;
|
||||
console.log(`+++++++++ ZOOM Factor is ${factor} ++++++++++`);
|
||||
setTouchState({
|
||||
state: 'double',
|
||||
touches: [
|
||||
{ x: event.touches[0].pageX, y: event.touches[0].pageY },
|
||||
{ x: event.touches[1].pageX, y: event.touches[1].pageY },
|
||||
],
|
||||
distance: touchState.distance,
|
||||
initialZoom: 1,
|
||||
});
|
||||
const previousCenter = {
|
||||
x: (touchState.touches[0].x + touchState.touches[1].x) / 2,
|
||||
y: (touchState.touches[0].y + touchState.touches[1].y) / 2,
|
||||
};
|
||||
const currentCenter = {
|
||||
x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
|
||||
y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
|
||||
};
|
||||
props.applyTransformations([
|
||||
{
|
||||
scale: {
|
||||
factor: factor,
|
||||
center: currentCenter,
|
||||
},
|
||||
},
|
||||
{
|
||||
translate: {
|
||||
x: currentCenter.x - previousCenter.x,
|
||||
y: currentCenter.y - previousCenter.y,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const throtteledTouchMoveHandler = useCallback(
|
||||
_.throttle(touchMoveHandler, 100),
|
||||
[touchState.state]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className='viewport double-touch-handler'
|
||||
onTouchStart={touchStartHandler}
|
||||
onTouchMove={throtteledTouchMoveHandler}
|
||||
onTouchEnd={touchEndHandler}
|
||||
onTouchCancel={touchCancelHandler}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DoubleTouchHandler;
|
||||
@@ -0,0 +1,26 @@
|
||||
import react from 'react';
|
||||
|
||||
import { ViewportState } from './viewport';
|
||||
|
||||
import '../theme/layer.css';
|
||||
|
||||
const Layer: react.FC<{
|
||||
viewportState: ViewportState;
|
||||
children?: JSX.Element;
|
||||
}> = (props: { viewportState: ViewportState; children?: JSX.Element }) => {
|
||||
const { children: children, ...argProps } = props;
|
||||
console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);
|
||||
|
||||
return (
|
||||
<div
|
||||
className='background'
|
||||
style={{
|
||||
transform: `translate(${props.viewportState.translation.x}px, ${props.viewportState.translation.y}px) scale(${props.viewportState.scale})`,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layer;
|
||||
+85
-173
@@ -1,179 +1,91 @@
|
||||
import _, { round } from 'lodash';
|
||||
import react, { useState, useEffect, useMemo, useRef } from 'react';
|
||||
|
||||
import Tile from './tile';
|
||||
|
||||
import '../theme/map.css';
|
||||
|
||||
export const tileSize = 256;
|
||||
|
||||
// cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
|
||||
|
||||
const lon2tile = (lon: number, zoom: number) => {
|
||||
const real = ((lon + 180) / 360) * Math.pow(2, zoom);
|
||||
const floor = Math.floor(real);
|
||||
return [floor, real - floor];
|
||||
};
|
||||
const lat2tile = (lat: number, zoom: number) => {
|
||||
const real =
|
||||
((1 -
|
||||
Math.log(
|
||||
Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
|
||||
) /
|
||||
Math.PI) /
|
||||
2) *
|
||||
Math.pow(2, zoom);
|
||||
const floor = Math.floor(real);
|
||||
return [floor, real - floor];
|
||||
};
|
||||
|
||||
function tile2long(x: number, z: number) {
|
||||
return (x / Math.pow(2, z)) * 360 - 180;
|
||||
}
|
||||
|
||||
function tile2lat(y: number, z: number) {
|
||||
var n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
|
||||
return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
|
||||
}
|
||||
|
||||
const Map: react.FC = () => {
|
||||
console.log('Log - Rendering <Map />');
|
||||
|
||||
const initialCenter: [number, number] = [43.57029965, 3.94242897];
|
||||
const initialZoom: number = 17;
|
||||
const [center, setCenter] = useState(initialCenter);
|
||||
const [zoom, setZoom] = useState(initialZoom);
|
||||
|
||||
const [dimensions, setDimensions] = useState({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth,
|
||||
});
|
||||
|
||||
const resizeHandler = () => {
|
||||
setDimensions({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth,
|
||||
});
|
||||
};
|
||||
const debouncedResizeHandler = useMemo(
|
||||
() => _.debounce(resizeHandler, 300),
|
||||
[dimensions, zoom, center]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('resize', debouncedResizeHandler);
|
||||
}, []);
|
||||
|
||||
const nbTilesY = _.ceil(dimensions.height / tileSize) + 4;
|
||||
const nbTilesX = _.ceil(dimensions.width / tileSize) + 4;
|
||||
const [tileCenterY, reminderY] = lat2tile(center[0], zoom);
|
||||
const [tileCenterX, reminderX] = lon2tile(center[1], zoom);
|
||||
const firstTileY = tileCenterY - _.round(nbTilesY / 2);
|
||||
const firstTileX = tileCenterX - _.round(nbTilesX / 2);
|
||||
const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
|
||||
const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
|
||||
const targetLocationY = dimensions.height / 2;
|
||||
const targetLocationX = dimensions.width / 2;
|
||||
const deltaY = -targetLocationY + locationY;
|
||||
const deltaX = -targetLocationX + locationX;
|
||||
|
||||
const [delta, setDelta] = useState({ X: deltaX, Y: deltaY });
|
||||
|
||||
const genericHandler = (event: any) => {
|
||||
console.log('Log - Event: ' + event.type);
|
||||
};
|
||||
|
||||
const initialMouseState = {
|
||||
down: false,
|
||||
starting: { x: -1, y: -1 },
|
||||
};
|
||||
|
||||
const mouseState = useRef(initialMouseState);
|
||||
|
||||
const mouseDownHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
mouseState.current = {
|
||||
down: true,
|
||||
starting: { x: event.pageX, y: event.pageY },
|
||||
};
|
||||
genericHandler(event);
|
||||
};
|
||||
|
||||
const mouseUpHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
console.log('Log - Up, now do something ! ');
|
||||
const newCenterY =
|
||||
tileCenterY +
|
||||
reminderY +
|
||||
(deltaX + mouseState.current.starting.x - event.pageX);
|
||||
const newCenterX =
|
||||
tileCenterX +
|
||||
reminderX +
|
||||
(deltaY + mouseState.current.starting.y - event.pageY);
|
||||
setCenter([tile2lat(newCenterY, zoom), tile2long(newCenterX, zoom)]);
|
||||
mouseState.current = initialMouseState;
|
||||
genericHandler(event);
|
||||
};
|
||||
|
||||
const mouseMoveHandler = (event: any) => {
|
||||
if (mouseState.current.down) {
|
||||
event.preventDefault();
|
||||
console.log('Log - Moving...' + event.pageX);
|
||||
setDelta({
|
||||
X: deltaX + mouseState.current.starting.x - event.pageX,
|
||||
Y: deltaY + mouseState.current.starting.y - event.pageY,
|
||||
});
|
||||
genericHandler(event);
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedMouseMoveHandler = useMemo(
|
||||
() => _.throttle(mouseMoveHandler, 100),
|
||||
[]
|
||||
);
|
||||
|
||||
const pointerDownHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
console.log('PointerDown');
|
||||
};
|
||||
|
||||
const pointerUpHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
console.log('PointerUp');
|
||||
};
|
||||
|
||||
const pointerMoveHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
console.log('PointerMove');
|
||||
};
|
||||
import react from 'react';
|
||||
import Viewport from './viewport';
|
||||
|
||||
const Map: react.FC<{}> = (props: {}) => {
|
||||
return (
|
||||
<div
|
||||
className='tiles'
|
||||
onMouseDown={mouseDownHandler}
|
||||
onMouseMove={debouncedMouseMoveHandler}
|
||||
onMouseUp={mouseUpHandler}
|
||||
onTouchStart={genericHandler}
|
||||
onTouchMove={genericHandler}
|
||||
onTouchCancel={genericHandler}
|
||||
onTouchEnd={genericHandler}
|
||||
>
|
||||
{_.range(nbTilesY).map((iy) => (
|
||||
<div key={'y' + iy} className='tilesRow'>
|
||||
{_.range(nbTilesX).map((ix) => (
|
||||
<Tile
|
||||
key={'x' + ix + 'y' + iy}
|
||||
iy={iy}
|
||||
ix={ix}
|
||||
x={firstTileX + ix}
|
||||
y={firstTileY + iy}
|
||||
delta={delta}
|
||||
zoom={zoom}
|
||||
/>
|
||||
))}
|
||||
<Viewport>
|
||||
<div>
|
||||
<div style={{ height: '256px' }}>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11720/10052.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11721/10052.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11722/10052.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11723/10052.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ height: '256px' }}>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11720/10053.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11721/10053.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11722/10053.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11723/10053.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ height: '256px' }}>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11720/10054.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11721/10054.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11722/10054.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
<img
|
||||
alt=''
|
||||
role='presentation'
|
||||
src='https://tile.openstreetmap.org/14/11723/10054.png'
|
||||
style={{ width: '256px', height: '256px', opacity: 1 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Viewport>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import react, { useCallback, useState } from 'react';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Transformation } from './viewport';
|
||||
|
||||
interface MouseHandlerProps {
|
||||
applyTransformations: (transformations: Transformation[]) => void;
|
||||
children: any;
|
||||
}
|
||||
|
||||
const MouseHandler: react.FC<MouseHandlerProps> = (
|
||||
props: MouseHandlerProps
|
||||
) => {
|
||||
const initialMouseState = {
|
||||
down: false,
|
||||
starting: { x: -1, y: -1 },
|
||||
};
|
||||
|
||||
const [mouseState, setMouseState] = useState(initialMouseState);
|
||||
|
||||
console.log('MouseHandler, mouseState: ' + JSON.stringify(mouseState));
|
||||
|
||||
const genericHandler = (event: any) => {
|
||||
console.log('Log - Event: ' + event.type);
|
||||
if (event.pageX !== undefined) {
|
||||
console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
|
||||
console.log('mouseState: ' + JSON.stringify(mouseState));
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const mouseLeaveHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
throtteledMouseMoveHandler.cancel();
|
||||
setMouseState(initialMouseState);
|
||||
};
|
||||
|
||||
const mouseDownHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
genericHandler(event);
|
||||
setMouseState({
|
||||
down: true,
|
||||
starting: { x: event.pageX, y: event.pageY },
|
||||
});
|
||||
};
|
||||
|
||||
const mouseUpHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
event.preventDefault();
|
||||
setMouseState(initialMouseState);
|
||||
};
|
||||
|
||||
const mouseMoveHandler = (event: any) => {
|
||||
event.preventDefault();
|
||||
if (mouseState.down) {
|
||||
genericHandler(event);
|
||||
props.applyTransformations([
|
||||
{
|
||||
translate: {
|
||||
x: event.pageX - mouseState.starting.x,
|
||||
y: event.pageY - mouseState.starting.y,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setMouseState({
|
||||
down: true,
|
||||
starting: {
|
||||
x: event.pageX,
|
||||
y: event.pageY,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const throtteledMouseMoveHandler = useCallback(
|
||||
_.throttle(mouseMoveHandler, 50),
|
||||
[mouseState.down]
|
||||
);
|
||||
|
||||
const doubleClickHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
props.applyTransformations([
|
||||
{
|
||||
scale: {
|
||||
factor: 2,
|
||||
center: { x: event.pageX, y: event.pageY },
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className='viewport mouse-handler'
|
||||
onMouseDown={mouseDownHandler}
|
||||
onMouseMove={throtteledMouseMoveHandler}
|
||||
onMouseUp={mouseUpHandler}
|
||||
onMouseLeave={mouseLeaveHandler}
|
||||
onDoubleClick={doubleClickHandler}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MouseHandler;
|
||||
@@ -0,0 +1,103 @@
|
||||
import react, { useCallback, useState } from 'react';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Transformation } from './viewport';
|
||||
|
||||
interface SingleTouchHandlerProps {
|
||||
applyTransformations: (transformations: Transformation[]) => void;
|
||||
children: any;
|
||||
}
|
||||
|
||||
const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
|
||||
props: SingleTouchHandlerProps
|
||||
) => {
|
||||
const initialTouchState = {
|
||||
state: 'up',
|
||||
touch: { x: -1, y: -1 },
|
||||
};
|
||||
|
||||
const [touchState, setTouchState] = useState(initialTouchState);
|
||||
|
||||
console.log('SingleTouchHandler, touchState: ' + JSON.stringify(touchState));
|
||||
|
||||
const genericHandler = (event: any) => {
|
||||
console.log('Log - Event: ' + event.type);
|
||||
if (event.type.startsWith('touch')) {
|
||||
if (event.touches.length > 0) {
|
||||
console.log(
|
||||
`Touch1 : (${event.touches[0].pageX}, ${event.touches[0].pageY})`
|
||||
);
|
||||
}
|
||||
console.log('touchState: ' + JSON.stringify(touchState));
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const touchCancelHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
throtteledTouchMoveHandler.cancel();
|
||||
setTouchState(initialTouchState);
|
||||
};
|
||||
|
||||
const touchStartHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
// event.preventDefault();
|
||||
if (event.touches.length === 1) {
|
||||
setTouchState({
|
||||
state: 'pointer',
|
||||
touch: { x: event.touches[0].pageX, y: event.touches[0].pageY },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const touchEndHandler = (event: any) => {
|
||||
genericHandler(event);
|
||||
// event.preventDefault();
|
||||
setTouchState(initialTouchState);
|
||||
throtteledTouchMoveHandler.cancel();
|
||||
};
|
||||
|
||||
const touchMoveHandler = (event: any) => {
|
||||
// event.preventDefault();
|
||||
if (touchState.state === 'pointer') {
|
||||
if (event.touches.length === 1) {
|
||||
genericHandler(event);
|
||||
props.applyTransformations([
|
||||
{
|
||||
translate: {
|
||||
x: event.touches[0].pageX - touchState.touch.x,
|
||||
y: event.touches[0].pageY - touchState.touch.y,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setTouchState({
|
||||
state: 'pointer',
|
||||
touch: {
|
||||
x: event.touches[0].pageX,
|
||||
y: event.touches[0].pageY,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const throtteledTouchMoveHandler = useCallback(
|
||||
_.throttle(touchMoveHandler, 100),
|
||||
[touchState.state]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className='viewport single-touch-handler'
|
||||
onTouchStart={touchStartHandler}
|
||||
onTouchMove={throtteledTouchMoveHandler}
|
||||
onTouchEnd={touchEndHandler}
|
||||
onTouchCancel={touchCancelHandler}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleTouchHandler;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from 'react';
|
||||
import { tileSize } from './map';
|
||||
|
||||
const tileProvider = (zoom: number, x: number, y: number) =>
|
||||
'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';
|
||||
|
||||
const Tile: React.FC<{
|
||||
ix: number;
|
||||
iy: number;
|
||||
x: number;
|
||||
y: number;
|
||||
delta: any;
|
||||
zoom: number;
|
||||
}> = (props: {
|
||||
ix: number;
|
||||
iy: number;
|
||||
x: number;
|
||||
y: number;
|
||||
delta: any;
|
||||
zoom: number;
|
||||
}) => {
|
||||
const style = {
|
||||
width: tileSize + 'px',
|
||||
height: tileSize + 'px',
|
||||
transform:
|
||||
'translate3d(' +
|
||||
(props.ix * tileSize - props.delta.X) +
|
||||
'px, ' +
|
||||
(props.iy * tileSize - props.delta.Y) +
|
||||
'px, 0px)',
|
||||
};
|
||||
return (
|
||||
<img
|
||||
src={tileProvider(props.zoom, props.x, props.y)}
|
||||
style={style}
|
||||
alt=''
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tile;
|
||||
@@ -0,0 +1,100 @@
|
||||
import react, { useCallback, useState } from 'react';
|
||||
|
||||
import _, { constant } from 'lodash';
|
||||
|
||||
import MouseHandler from './mouse-handler';
|
||||
import Layer from './layer';
|
||||
|
||||
import '../theme/viewport.css';
|
||||
import SingleTouchHandler from './single-touch-handler';
|
||||
import DoubleTouchHandler from './double-touch-handler';
|
||||
|
||||
export interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface Translation {
|
||||
translate: Point;
|
||||
}
|
||||
|
||||
export interface Scale {
|
||||
scale: {
|
||||
center: Point;
|
||||
factor: number;
|
||||
};
|
||||
}
|
||||
|
||||
export type Transformation = Translation | Scale;
|
||||
|
||||
// const transform1: Transformation = { translate: { x: 0, y: 1 } };
|
||||
// const transform2: Transformation = {
|
||||
// scale: { center: { x: 10, y: 20 }, factor: 2 },
|
||||
// };
|
||||
|
||||
interface ViewportProps {
|
||||
children: any;
|
||||
}
|
||||
|
||||
export interface ViewportState {
|
||||
scale: number;
|
||||
translation: Point;
|
||||
}
|
||||
|
||||
const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
|
||||
//console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
|
||||
|
||||
const initialState: ViewportState = { scale: 1, translation: { x: 0, y: 0 } };
|
||||
|
||||
const [state, setState] = useState(initialState);
|
||||
|
||||
const genericHandler = (event: any) => {
|
||||
console.log('Log - Event: ' + event.type);
|
||||
return;
|
||||
};
|
||||
|
||||
const applyTransformations = (transformations: Transformation[]) => {
|
||||
const newState = transformations.reduce(
|
||||
(previousState: ViewportState, transformation): ViewportState => {
|
||||
if ('scale' in transformation) {
|
||||
return {
|
||||
scale: previousState.scale * transformation.scale.factor,
|
||||
translation: {
|
||||
x:
|
||||
previousState.translation.x +
|
||||
(previousState.translation.x - transformation.scale.center.x) *
|
||||
(transformation.scale.factor - 1),
|
||||
y:
|
||||
previousState.translation.y +
|
||||
(previousState.translation.y - transformation.scale.center.y) *
|
||||
(transformation.scale.factor - 1),
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
scale: previousState.scale,
|
||||
translation: {
|
||||
x: previousState.translation.x + transformation.translate.x,
|
||||
y: previousState.translation.y + transformation.translate.y,
|
||||
},
|
||||
};
|
||||
},
|
||||
state
|
||||
);
|
||||
setState(newState);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='viewport'>
|
||||
<MouseHandler applyTransformations={applyTransformations}>
|
||||
<SingleTouchHandler applyTransformations={applyTransformations}>
|
||||
<DoubleTouchHandler applyTransformations={applyTransformations}>
|
||||
<Layer viewportState={state}>{props.children}</Layer>
|
||||
</DoubleTouchHandler>
|
||||
</SingleTouchHandler>
|
||||
</MouseHandler>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Viewport;
|
||||
Reference in new issue
Block a user