58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import react, { useCallback, useState } from 'react';
|
|
|
|
import _ from 'lodash';
|
|
|
|
import MouseShiftHandler from './mouse-shift-handler';
|
|
import Layer from './layer';
|
|
|
|
import '../theme/viewport.css';
|
|
import TouchShiftHandler from './touch-shift-handler';
|
|
import TouchZoomHandler from './touch-zoom-handler';
|
|
|
|
export interface Point {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
const Viewport: react.FC<{}> = (props: {}) => {
|
|
console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
|
|
|
|
const initialShitf: Point = { x: 1000, y: 1000 };
|
|
|
|
const [shift, setShift] = useState(initialShitf);
|
|
|
|
const [zoom, setZoom] = useState(1);
|
|
|
|
const genericHandler = (event: any) => {
|
|
console.log('Log - Event: ' + event.type);
|
|
return;
|
|
};
|
|
|
|
// TODO: implement resize event
|
|
// TODO: check boundaries
|
|
|
|
const updateShift = (shiftDelta: Point) => {
|
|
setShift({ x: shift.x + shiftDelta.x, y: shift.y + shiftDelta.y });
|
|
};
|
|
|
|
const updateZoom = (zoomFactor: number) => {
|
|
setZoom(zoom * zoomFactor);
|
|
};
|
|
|
|
return (
|
|
<div className='viewport'>
|
|
<MouseShiftHandler updateShift={updateShift}>
|
|
<TouchShiftHandler updateShift={updateShift}>
|
|
<TouchZoomHandler updateZoom={updateZoom}>
|
|
<Layer shift={shift} zoom={zoom}>
|
|
<img src='/assets/background.jpg' alt='' />
|
|
</Layer>
|
|
</TouchZoomHandler>
|
|
</TouchShiftHandler>
|
|
</MouseShiftHandler>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Viewport;
|