Dyomedea
/
sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compensating the shift with the delta due to the zoom.

This commit is contained in:
Eric van der Vlist 2022-09-09 23:49:17 +02:00
parent e7ba10d221
commit 6a0193e2f1
4 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
background-move/ionic.config.json
View File

@ -1,5 +1,5 @@
{ {
"name": "empty-ionic-react", "name": "background move",
"integrations": { "integrations": {
"capacitor": {} "capacitor": {}
}, },

7
background-move/src/components/double-touch-handler.tsx
View File

@ -5,7 +5,7 @@ import _ from 'lodash';
import { Point } from './viewport'; import { Point } from './viewport';
interface DoubleTouchHandlerProps { interface DoubleTouchHandlerProps {
updateZoom: (zoomFactor: number) => void; updateZoom: (zoomFactor: number, center: Point) => void;
children: any; children: any;
} }
@ -88,7 +88,10 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
distance: touchState.distance, distance: touchState.distance,
initialZoom: 1, initialZoom: 1,
}); });
props.updateZoom(factor); props.updateZoom(factor, {
x: (event.touches[0].pageX + event.touches[1].pageX) / 2,
y: (event.touches[0].pageY + event.touches[1].pageY) / 2,
});
} }
} }
}; };

15
background-move/src/components/viewport.tsx
View File

@ -17,7 +17,7 @@ export interface Point {
const Viewport: react.FC<{}> = (props: {}) => { const Viewport: react.FC<{}> = (props: {}) => {
console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`); console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
const initialShitf: Point = { x: 1000, y: 1000 }; const initialShitf: Point = { x: 0, y: 0 };
const [shift, setShift] = useState(initialShitf); const [shift, setShift] = useState(initialShitf);
@ -35,8 +35,17 @@ const Viewport: react.FC<{}> = (props: {}) => {
setShift({ x: shift.x + shiftDelta.x, y: shift.y + shiftDelta.y }); setShift({ x: shift.x + shiftDelta.x, y: shift.y + shiftDelta.y });
}; };
const updateZoom = (zoomFactor: number) => { const updateZoom = (zoomFactor: number, center: Point) => {
setZoom(zoom * zoomFactor); const newZoom = zoom * zoomFactor;
setZoom(newZoom);
setShift({
x: shift.x + center.x / zoom - center.x / newZoom,
y: shift.y + center.y / zoom - center.y / newZoom,
});
// setShift({
// x: shift.x + 1440 / 2 / zoom - window.innerWidth / 2 / newZoom,
// y: shift.y + 2904 / 2 / zoom - window.innerHeight / 2 / newZoom,
// });
}; };
return ( return (

1
background-move/src/theme/layer.css
View File

@ -3,5 +3,6 @@
width: 4032px; width: 4032px;
height: 2268px; height: 2268px;
z-index: -1; z-index: -1;
transform-origin: top left;
} }