Compensating the shift with the delta due to the zoom.

background-move/ionic.config.json

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

background-move/src/components/double-touch-handler.tsx

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import { Point } from './viewport';
 
 interface DoubleTouchHandlerProps {
-  updateZoom: (zoomFactor: number) => void;
+  updateZoom: (zoomFactor: number, center: Point) => void;
   children: any;
 }
 
@@ -88,7 +88,10 @@ const DoubleTouchHandler: react.FC<DoubleTouchHandlerProps> = (
           distance: touchState.distance,
           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,
+        });
       }
     }
   };

background-move/src/components/viewport.tsx

@@ -17,7 +17,7 @@ export interface Point {
 const Viewport: react.FC<{}> = (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);
 
@@ -35,9 +35,18 @@ const Viewport: react.FC<{}> = (props: {}) => {
     setShift({ x: shift.x + shiftDelta.x, y: shift.y + shiftDelta.y });
   };
 
-  const updateZoom = (zoomFactor: number) => {
-    setZoom(zoom * zoomFactor);
-  };
+  const updateZoom = (zoomFactor: number, center: Point) => {
+    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 (
     <div className='viewport'>

background-move/src/theme/layer.css

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