Refactoring.

This commit is contained in:
Eric van der Vlist 2022-09-10 21:41:01 +02:00
parent 38183bb5fe
commit a3b2f3feb4
5 changed files with 109 additions and 58 deletions

View File

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

View File

@ -1,26 +1,21 @@
import react from 'react'; import react from 'react';
import { ViewportState } from './viewport';
import '../theme/layer.css'; import '../theme/layer.css';
const Layer: react.FC<{ const Layer: react.FC<{
shift: { x: number; y: number }; viewportState: ViewportState;
zoom: number;
children?: JSX.Element; children?: JSX.Element;
}> = (props: { }> = (props: { viewportState: ViewportState; children?: JSX.Element }) => {
shift: { x: number; y: number }; const { children: children, ...argProps } = props;
zoom: number;
children?: JSX.Element;
}) => {
const {children: children, ...argProps} = props;
console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`); console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);
return ( return (
<div <div
className='background' className='background'
style={{ style={{
transform: `translate(${props.shift.x}px, ${props.shift.y}px) scale(${ transform: `translate(${props.viewportState.translation.x}px, ${props.viewportState.translation.y}px) scale(${props.viewportState.scale})`,
props.zoom
})`,
}} }}
> >
{props.children} {props.children}

View File

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

View File

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

View File

@ -1,6 +1,6 @@
import react, { useCallback, useState } from 'react'; import react, { useCallback, useState } from 'react';
import _ from 'lodash'; import _, { constant } from 'lodash';
import MouseHandler from './mouse-handler'; import MouseHandler from './mouse-handler';
import Layer from './layer'; import Layer from './layer';
@ -14,48 +14,82 @@ export interface Point {
y: 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 { interface ViewportProps {
children: any; children: any;
} }
export interface ViewportState {
scale: number;
translation: Point;
}
const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => { const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
//console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`); //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 [state, setState] = useState(initialState);
const [zoom, setZoom] = useState(1);
const genericHandler = (event: any) => { const genericHandler = (event: any) => {
console.log('Log - Event: ' + event.type); console.log('Log - Event: ' + event.type);
return; return;
}; };
// TODO: implement resize event const applyTransformations = (transformations: Transformation[]) => {
// TODO: check boundaries const newState = transformations.reduce(
(previousState: ViewportState, transformation): ViewportState => {
const updateShift = (shiftDelta: Point) => { if ('scale' in transformation) {
setShift({ x: shift.x + shiftDelta.x, y: shift.y + shiftDelta.y }); return {
}; scale: previousState.scale * transformation.scale.factor,
translation: {
const updateZoom = (zoomFactor: number, center: Point) => { x:
const newZoom = zoom * zoomFactor; previousState.translation.x +
updateShift({ (previousState.translation.x - transformation.scale.center.x) *
x: (shift.x - center.x) * (zoomFactor - 1), (transformation.scale.factor - 1),
y: (shift.y - center.y) * (zoomFactor - 1), y:
}); previousState.translation.y +
setZoom(newZoom); (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 ( return (
<div className='viewport'> <div className='viewport'>
<MouseHandler updateShift={updateShift} updateZoom={updateZoom}> <MouseHandler applyTransformations={applyTransformations}>
<SingleTouchHandler updateShift={updateShift}> <SingleTouchHandler applyTransformations={applyTransformations}>
<DoubleTouchHandler updateZoom={updateZoom} updateShift={updateShift}> <DoubleTouchHandler applyTransformations={applyTransformations}>
<Layer shift={shift} zoom={zoom}> <Layer viewportState={state}>{props.children}</Layer>
{props.children}
</Layer>
</DoubleTouchHandler> </DoubleTouchHandler>
</SingleTouchHandler> </SingleTouchHandler>
</MouseHandler> </MouseHandler>