diff --git a/svgmap/src/components/map/DoubleTouchHandler.tsx b/svgmap/src/components/map/DoubleTouchHandler.tsx index 31b077f..5467707 100644 --- a/svgmap/src/components/map/DoubleTouchHandler.tsx +++ b/svgmap/src/components/map/DoubleTouchHandler.tsx @@ -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 = ( 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); } } }; diff --git a/svgmap/src/components/map/Map.tsx b/svgmap/src/components/map/Map.tsx index d1c861c..6ceac39 100644 --- a/svgmap/src/components/map/Map.tsx +++ b/svgmap/src/components/map/Map.tsx @@ -26,10 +26,14 @@ const Map: react.FC = (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); }; diff --git a/svgmap/src/components/map/MouseHandler.tsx b/svgmap/src/components/map/MouseHandler.tsx index 655f0e8..94d1d6f 100644 --- a/svgmap/src/components/map/MouseHandler.tsx +++ b/svgmap/src/components/map/MouseHandler.tsx @@ -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; }