Adapting this stuff to setState which should only becalled once per rendering...

This commit is contained in:
Eric van der Vlist 2022-10-14 22:21:58 +02:00
parent e69a9a65de
commit 50d9fba939
3 changed files with 10 additions and 7 deletions

View File

@ -10,7 +10,7 @@ interface DoubleTouchHandlerProps {
shift: Point;
addShift: (shift: Point) => void;
zoom: number;
addZoom: (zoomFactor: number, center: Point) => void;
addZoom: (zoomFactor: number, center: Point, deltaShift?: Point) => void;
children?: any;
}
@ -102,11 +102,10 @@ 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.addShift({
props.addZoom(factor, currentCenter, {
x: currentCenter.x - previousCenter.x,
y: currentCenter.y - previousCenter.y,
});
props.addZoom(factor, currentCenter);
}
}
};

View File

@ -26,10 +26,14 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y });
};
const addZoom = (zoomFactor: number, center: { x: number; y: number }) => {
const addZoom = (
zoomFactor: number,
center: { x: number; y: number },
deltaShift: { x: number; y: number } = { x: 0, y: 0 }
) => {
addShift({
x: (shift.x - center.x) * (zoomFactor - 1),
y: (shift.y - center.y) * (zoomFactor - 1),
x: (shift.x - center.x) * (zoomFactor - 1) + deltaShift.x,
y: (shift.y - center.y) * (zoomFactor - 1) + deltaShift.y,
});
setZoom(zoom * zoomFactor);
};

View File

@ -11,7 +11,7 @@ interface MouseHandlerProperties {
shift: Point;
addShift: (shift: Point) => void;
zoom: number;
addZoom: (zoomFactor: number, center: Point) => void;
addZoom: (zoomFactor: number, center: Point, deltaShift?: Point) => void;
children?: any;
}