This commit is contained in:
Eric van der Vlist 2022-09-10 21:41:01 +02:00
vanhempi 38183bb5fe
commit a3b2f3feb4
5 muutettua tiedostoa jossa 109 lisäystä ja 58 poistoa

Näytä tiedosto

@ -2,11 +2,10 @@ import react, { useCallback, useState } from 'react';
import _ from 'lodash';
import { Point } from './viewport';
import { Transformation } from './viewport';
interface DoubleTouchHandlerProps {
updateZoom: (zoomFactor: number, center: Point) => void;
updateShift: (shiftDelta: Point) => void;
applyTransformations: (transformations: Transformation[]) => void;
children: any;
}
@ -97,11 +96,20 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
};
props.updateZoom(factor, currentCenter);
// props.updateShift({
// x: currentCenter.x - previousCenter.x,
// y: currentCenter.y - previousCenter.y,
// });
props.applyTransformations([
{
scale: {
factor: factor,
center: currentCenter,
},
},
{
translate: {
x: currentCenter.x - previousCenter.x,
y: currentCenter.y - previousCenter.y,
},
},
]);
}
}
};

Näytä tiedosto

@ -1,26 +1,21 @@
import react from 'react';
import { ViewportState } from './viewport';
import '../theme/layer.css';
const Layer: react.FC<{
shift: { x: number; y: number };
zoom: number;
viewportState: ViewportState;
children?: JSX.Element;
}> = (props: {
shift: { x: number; y: number };
zoom: number;
children?: JSX.Element;
}) => {
const {children: children, ...argProps} = props;
}> = (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.shift.x}px, ${props.shift.y}px) scale(${
props.zoom
})`,
transform: `translate(${props.viewportState.translation.x}px, ${props.viewportState.translation.y}px) scale(${props.viewportState.scale})`,
}}
>
{props.children}

Näytä tiedosto

@ -2,11 +2,10 @@ import react, { useCallback, useState } from 'react';
import _ from 'lodash';
import { Point } from './viewport';
import { Transformation } from './viewport';
interface MouseHandlerProps {
updateShift: (shiftDelta: Point) => void;
updateZoom: (zoomFactor: number, center: Point) => void;
applyTransformations: (transformations: Transformation[]) => void;
children: any;
}
@ -56,10 +55,14 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
event.preventDefault();
if (mouseState.down) {
genericHandler(event);
props.updateShift({
x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y,
});
props.applyTransformations([
{
translate: {
x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y,
},
},
]);
setMouseState({
down: true,
starting: {
@ -77,7 +80,14 @@ const MouseHandler: react.FC<MouseHandlerProps> = (
const doubleClickHandler = (event: any) => {
genericHandler(event);
props.updateZoom(2, { x: event.pageX, y: event.pageY });
props.applyTransformations([
{
scale: {
factor: 2,
center: { x: event.pageX, y: event.pageY },
},
},
]);
};
return (

Näytä tiedosto

@ -2,10 +2,10 @@ import react, { useCallback, useState } from 'react';
import _ from 'lodash';
import { Point } from './viewport';
import { Transformation } from './viewport';
interface SingleTouchHandlerProps {
updateShift: (shiftDelta: Point) => void;
applyTransformations: (transformations: Transformation[]) => void;
children: any;
}
@ -63,10 +63,14 @@ const SingleTouchHandler: react.FC<SingleTouchHandlerProps> = (
if (touchState.state === 'pointer') {
if (event.touches.length === 1) {
genericHandler(event);
props.updateShift({
x: event.touches[0].pageX - touchState.touch.x,
y: event.touches[0].pageY - touchState.touch.y,
});
props.applyTransformations([
{
translate: {
x: event.touches[0].pageX - touchState.touch.x,
y: event.touches[0].pageY - touchState.touch.y,
},
},
]);
setTouchState({
state: 'pointer',
touch: {

Näytä tiedosto

@ -1,6 +1,6 @@
import react, { useCallback, useState } from 'react';
import _ from 'lodash';
import _, { constant } from 'lodash';
import MouseHandler from './mouse-handler';
import Layer from './layer';
@ -14,48 +14,82 @@ export interface Point {
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 initialShitf: Point = { x: 0, y: 0 };
const initialState: ViewportState = { scale: 1, translation: { x: 0, y: 0 } };
const [shift, setShift] = useState(initialShitf);
const [zoom, setZoom] = useState(1);
const [state, setState] = useState(initialState);
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, center: Point) => {
const newZoom = zoom * zoomFactor;
updateShift({
x: (shift.x - center.x) * (zoomFactor - 1),
y: (shift.y - center.y) * (zoomFactor - 1),
});
setZoom(newZoom);
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 updateShift={updateShift} updateZoom={updateZoom}>
<SingleTouchHandler updateShift={updateShift}>
<DoubleTouchHandler updateZoom={updateZoom} updateShift={updateShift}>
<Layer shift={shift} zoom={zoom}>
{props.children}
</Layer>
<MouseHandler applyTransformations={applyTransformations}>
<SingleTouchHandler applyTransformations={applyTransformations}>
<DoubleTouchHandler applyTransformations={applyTransformations}>
<Layer viewportState={state}>{props.children}</Layer>
</DoubleTouchHandler>
</SingleTouchHandler>
</MouseHandler>