sandbox/background-move/src/components/viewport.tsx

import react, { useCallback, useState } from 'react';

import _ 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;
}

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'>
      <MouseHandler updateShift={updateShift}>
        <SingleTouchHandler updateShift={updateShift}>
          <DoubleTouchHandler updateZoom={updateZoom}>
            <Layer shift={shift} zoom={zoom}>
              <img src='/assets/background.jpg' alt='' />
            </Layer>
          </DoubleTouchHandler>
        </SingleTouchHandler>
      </MouseHandler>
    </div>
  );
};

export default Viewport;