From 4e31702476963dd75f90e08ba59265610811f149 Mon Sep 17 00:00:00 2001
From: Maurice Conrad <conr.maur@gmail.com>
Date: Sun, 14 Apr 2024 01:07:37 +0200
Subject: [PATCH] fixed bug

---
 playground/package-lock.json             |  25 ++-
 playground/package.json                  |   3 +-
 playground/src/App.vue                   |   6 +-
 playground/src/components/NavBar.vue     |  49 +++++
 playground/src/components/Playground.vue |   2 +-
 playground/vite.config.ts                |   2 +-
 zoompinch-lit/index.html                 |   4 +
 zoompinch-lit/src/components/PanCake.ts  | 246 ++++++++++++++++++++++-
 zoompinch-lit/src/util/helpers.ts        |  48 +++++
 zoompinch-vue/package.json               |   2 +-
 zoompinch-vue/src/controllers/touch.ts   |   5 +-
 zoompinch-vue/src/controllers/zoom.ts    |   2 +-
 12 files changed, 374 insertions(+), 20 deletions(-)
 create mode 100644 playground/src/components/NavBar.vue
 create mode 100644 zoompinch-lit/src/util/helpers.ts

diff --git a/playground/package-lock.json b/playground/package-lock.json
index 42b45e2..bc269b5 100644
--- a/playground/package-lock.json
+++ b/playground/package-lock.json
@@ -8,9 +8,10 @@
       "name": "zoompinch-playground",
       "version": "0.0.0",
       "dependencies": {
+        "@vicons/ionicons5": "^0.12.0",
         "naive-ui": "^2.38.1",
         "vue": "^3.2.37",
-        "zoompinch": "^0.0.6"
+        "zoompinch": "^0.0.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.0",
@@ -128,6 +129,11 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
+    "node_modules/@vicons/ionicons5": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.12.0.tgz",
+      "integrity": "sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -1401,9 +1407,9 @@
       "dev": true
     },
     "node_modules/zoompinch": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.6.tgz",
-      "integrity": "sha512-w9ZY9Ysgr7T01Im5hjLDL2k7o8eMsUPZf5YEIqJc1v8kbnVkKlFmTp+0l+/SyLsR+nG/cPJC6EIlMJ8YbVVHbg==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.5.tgz",
+      "integrity": "sha512-1MHcGtWB3tBqRuY3iPFaF+FwXbXsreCXbT40kFhGev+G9YO8pmmpicZ4ls7vx7s+7S+N9s7cIoG4ssL1IE3dRg==",
       "dependencies": {
         "@vueuse/core": "^10.9.0"
       },
@@ -1490,6 +1496,11 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
+    "@vicons/ionicons5": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.12.0.tgz",
+      "integrity": "sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA=="
+    },
     "@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -2303,9 +2314,9 @@
       "dev": true
     },
     "zoompinch": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.6.tgz",
-      "integrity": "sha512-w9ZY9Ysgr7T01Im5hjLDL2k7o8eMsUPZf5YEIqJc1v8kbnVkKlFmTp+0l+/SyLsR+nG/cPJC6EIlMJ8YbVVHbg==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.5.tgz",
+      "integrity": "sha512-1MHcGtWB3tBqRuY3iPFaF+FwXbXsreCXbT40kFhGev+G9YO8pmmpicZ4ls7vx7s+7S+N9s7cIoG4ssL1IE3dRg==",
       "requires": {
         "@vueuse/core": "^10.9.0"
       }
diff --git a/playground/package.json b/playground/package.json
index 205bafa..8af67ec 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -9,9 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vicons/ionicons5": "^0.12.0",
     "naive-ui": "^2.38.1",
     "vue": "^3.2.37",
-    "zoompinch": "^0.0.6"
+    "zoompinch": "^0.0.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 833e1bc..9a28585 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="root">
+    <nav-bar />
     <playground />
   </div>
 </template>
 
 <script setup lang="ts">
+import NavBar from './components/NavBar.vue';
 import Playground from './components/Playground.vue';
 </script>
 
@@ -13,7 +15,9 @@ import Playground from './components/Playground.vue';
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 0px;
+  display: grid;
+  grid-template-rows: auto 1fr;
 }
 </style>
 
diff --git a/playground/src/components/NavBar.vue b/playground/src/components/NavBar.vue
new file mode 100644
index 0000000..19b6eca
--- /dev/null
+++ b/playground/src/components/NavBar.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="nav-bar">
+    <div class="title">
+      <h1>Zoompinch</h1>
+    </div>
+    <div class="actions">
+      <a href="https://github.com/MauriceConrad/zoompinch" target="_blank">
+        <n-icon size="medium">
+          <logo-github />
+        </n-icon>
+        <span> GitHub </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LogoGithub } from '@vicons/ionicons5';
+import { NIcon } from 'naive-ui';
+</script>
+
+<style scoped lang="scss">
+.nav-bar {
+  border-bottom: 1px solid #ddd;
+  padding: 10px 20px;
+  display: grid;
+  color: #444;
+  grid-template-columns: auto auto;
+  .title {
+    justify-self: center start;
+    place-self: center start;
+    h1 {
+      margin: 0;
+      font-size: 1.6em;
+    }
+  }
+  .actions {
+    justify-self: center end;
+    place-self: center end;
+    a {
+      text-decoration: inherit;
+      color: inherit;
+      display: flex;
+      place-items: center;
+      gap: 5px;
+    }
+  }
+}
+</style>
diff --git a/playground/src/components/Playground.vue b/playground/src/components/Playground.vue
index e13fa49..5ccbeb0 100644
--- a/playground/src/components/Playground.vue
+++ b/playground/src/components/Playground.vue
@@ -132,7 +132,7 @@
         :mouse="mouseEvents"
         :touch="touchEvents"
         :wheel="wheelEvents"
-        :gesture="gestureEvents"
+        :gesture="false"
       >
         <template #canvas>
           <img
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 67928a8..e080ad7 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -13,6 +13,6 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    exclude: ['projection-layer'],
+    exclude: ['zoompinch'],
   },
 });
diff --git a/zoompinch-lit/index.html b/zoompinch-lit/index.html
index 021e8fe..3c1fd09 100644
--- a/zoompinch-lit/index.html
+++ b/zoompinch-lit/index.html
@@ -35,5 +35,9 @@
         <div slot="matrix">MATRIX</div>
       </pan-cake>
     </div>
+
+    <script>
+      const panCake = document.querySelector('pan-cake');
+    </script>
   </body>
 </html>
diff --git a/zoompinch-lit/src/components/PanCake.ts b/zoompinch-lit/src/components/PanCake.ts
index 469b96e..6d158fb 100644
--- a/zoompinch-lit/src/components/PanCake.ts
+++ b/zoompinch-lit/src/components/PanCake.ts
@@ -2,6 +2,7 @@ import { LitElement, PropertyValueMap, css, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import styles from './PanCake.scss';
 import { rotatePoint } from '../util/vector';
+import { clamp, degreeToRadians, getAngleBetweenTwoPoints } from '../util/helpers';
 
 @customElement('pan-cake')
 export class PanCake extends LitElement {
@@ -35,6 +36,10 @@ export class PanCake extends LitElement {
   @property({ type: Boolean })
   allowRotation = true;
 
+  public test() {
+    console.log('test');
+  }
+
   render() {
     return html`
       <div
@@ -174,25 +179,256 @@ export class PanCake extends LitElement {
       this.naturalScale
     );
   }
-  static calcProjectionTranslate(newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number], canvasWidth: number, canvasHeight: number, wrapperInnerWidth: number, wrapperInnerHeight: number, naturalScale: number) {
+  static calcProjectionTranslate(
+    newScale: number,
+    wrapperPosition: [number, number],
+    canvasPosition: [number, number],
+    canvasWidth: number,
+    canvasHeight: number,
+    wrapperInnerWidth: number,
+    wrapperInnerHeight: number,
+    naturalScale: number,
+    rotate: number
+  ) {
     // Calculate the intrinsic dimensions of the canvas
     const canvasIntrinsicWidth = canvasWidth * naturalScale;
     const canvasIntrinsicHeight = canvasHeight * naturalScale;
     // Calculate the real dimensions of the canvas
     const canvasRealX = canvasPosition[0] * canvasIntrinsicWidth * newScale;
     const canvasRealY = canvasPosition[1] * canvasIntrinsicHeight * newScale;
+    const canvsRealRotated = rotatePoint([canvasRealX, canvasRealY], [0, 0], rotate);
     // Calculate the real dimensions of the wrapper
     const wrapperRealX = wrapperPosition[0] * wrapperInnerWidth;
     const wrapperRealY = wrapperPosition[1] * wrapperInnerHeight;
     // Calculate the delta between the canvas and the wrapper
-    const deltaX = wrapperRealX - canvasRealX;
-    const deltaY = wrapperRealY - canvasRealY;
+    const deltaX = wrapperRealX - canvsRealRotated[0];
+    const deltaY = wrapperRealY - canvsRealRotated[1];
 
     return [deltaX, deltaY] as [number, number];
   }
   // Helper function that calculates the translation needed to map a point on the canvas to a point on the wrapper
-  calcProjectionTranslate(newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number]) {
-    return PanCake.calcProjectionTranslate(newScale, wrapperPosition, canvasPosition, this.width, this.height, this.wrapperInnerWidth, this.wrapperInnerHeight, this.naturalScale);
+  calcProjectionTranslate(newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number], virtualRotate?: number) {
+    return PanCake.calcProjectionTranslate(newScale, wrapperPosition, canvasPosition, this.width, this.height, this.wrapperInnerWidth, this.wrapperInnerHeight, this.naturalScale, virtualRotate ?? this.rotate);
+  }
+
+  getCenterOffset(scale: number, translate: [number, number], rotate: number) {
+    const centeredTranslationOffset = this.calcProjectionTranslate(scale, [0.5, 0.5], [0.5, 0.5], 0);
+    const centeredPointNormal = [this.offsetLeft + centeredTranslationOffset[0] + this.width * (scale * this.naturalScale) * 0.5, this.offsetTop + centeredTranslationOffset[1] + this.height * (scale * this.naturalScale) * 0.5];
+    const composedPoint = this.composePoint(0.5, 0.5, scale, translate, rotate);
+
+    const diffX = composedPoint[0] - centeredPointNormal[0];
+    const diffY = composedPoint[1] - centeredPointNormal[1];
+
+    return [diffX, diffY];
+  }
+
+  rotateCanvas(x: number, y: number, radians: number) {
+    const newRotate = radians;
+    const offset = this.getCenterOffset(this.scale, [0, 0], newRotate);
+    const centeredTranslate = [0 - offset[0], 0 - offset[1]] as [number, number];
+    const centeredScale = this.scale;
+    const centeredRotate = newRotate;
+    const virtualPoint = this.composePoint(x, y, centeredScale, centeredTranslate, centeredRotate);
+    const currPoint = this.composePoint(x, y);
+    const deltaX = currPoint[0] - virtualPoint[0];
+    const deltaY = currPoint[1] - virtualPoint[1];
+    this.translateX = centeredTranslate[0] + deltaX;
+    this.translateY = centeredTranslate[1] + deltaY;
+    this.rotate = newRotate;
+  }
+
+  constructor() {
+    super();
+    setTimeout(() => {
+      this.scale = 0.5;
+    }, 5000);
+  }
+  handleWheel(deltaX: number, deltaY: number, ctrlKey: boolean, clientX: number, clientY: number) {
+    const currScale = this.scale;
+    if (ctrlKey) {
+      const scaleDelta = (-deltaY / 100) * currScale;
+      const newScale = clamp(currScale + scaleDelta, this.minScale, this.maxScale);
+
+      const [translateX, translateY] = this.calcProjectionTranslate(newScale, this.relativeWrapperCoordinatesFromClientCoords(clientX, clientY), this.normalizeMatrixCoordinates(clientX, clientY));
+
+      this.translateX = translateX;
+      this.translateY = translateY;
+      this.scale = newScale;
+    } else {
+      this.translateX = this.translateX - deltaX;
+      this.translateY = this.translateY - deltaY;
+    }
+  }
+  private gestureStartRotation = 0;
+  handleGesturestart() {
+    this.gestureStartRotation = this.rotate;
+  }
+  handleGesturechange(rotation: number, clientX: number, clientY: number) {
+    if (this.allowRotation === false) {
+      return;
+    }
+    const currRotation = rotation;
+    if (currRotation === 0) {
+      return;
+    }
+
+    const relPos = this.normalizeMatrixCoordinates(clientX, clientY);
+    this.rotateCanvas(relPos[0], relPos[1], this.gestureStartRotation + degreeToRadians(currRotation));
+  }
+  handleGestureend() {
+    // void
+  }
+  private touchStarts:
+    | {
+        client: [number, number];
+        canvasRel: [number, number];
+      }[]
+    | null = null;
+  private touchStartScale = 1;
+  private touchStartTranslate = [0, 0] as [number, number];
+  private touchStartRotate = 0;
+  private freezeTouches(touches: TouchList) {
+    return Array.from(touches).map((touch) => {
+      const wrapperCoords = this.clientCoordsToWrapperCoords(touch.clientX, touch.clientY);
+      return {
+        client: [touch.clientX, touch.clientY] as [number, number],
+        canvasRel: this.getCanvasCoords(wrapperCoords[0], wrapperCoords[1]),
+      };
+    });
+  }
+  handleTouchstart(event: TouchEvent) {
+    event.preventDefault();
+    this.touchStarts = this.freezeTouches(event.touches);
+    this.touchStartScale = this.scale;
+    this.touchStartTranslate = [this.translateX, this.translateY];
+    this.touchStartRotate = this.rotate;
+  }
+  handleTouchmove(event: TouchEvent) {
+    event.preventDefault();
+    if (this.touchStarts) {
+      // Make the touch positions become relative to the inner wrapper
+      const touchPositions = Array.from(event.touches).map((touch) => this.clientCoordsToWrapperCoords(touch.clientX, touch.clientY));
+
+      if (touchPositions.length >= 2) {
+        // Multi finger touch implementation
+        // We're calculating:
+        // 1. The scale projection and scale relied delta
+        // 2. The rotation projection and rotation delta
+
+        // SCALE
+
+        // Calculate the distance between the two fingers at the start
+        const fingerOneStartCanvasCoords = [this.touchStarts[0].canvasRel[0] * this.width, this.touchStarts[0].canvasRel[1] * this.height] as [number, number];
+        const fingerTwoStartCanvasCoords = [this.touchStarts[1].canvasRel[0] * this.width, this.touchStarts[1].canvasRel[1] * this.height] as [number, number];
+
+        // This is the absolute distance between the two fingers at the start
+        const fingerStartCanvasCoordsDelta = Math.sqrt(Math.pow(fingerOneStartCanvasCoords[0] - fingerTwoStartCanvasCoords[0], 2) + Math.pow(fingerOneStartCanvasCoords[1] - fingerTwoStartCanvasCoords[1], 2));
+
+        // This is the absolute distance between the two fingers now
+        const fingersNowDelta = Math.sqrt(Math.pow(touchPositions[0][0] - touchPositions[1][0], 2) + Math.pow(touchPositions[0][1] - touchPositions[1][1], 2)) / this.naturalScale;
+
+        // This is the future scale
+        const futureScale = clamp(fingersNowDelta / fingerStartCanvasCoordsDelta, this.minScale, this.maxScale);
+        // Justcalculate the relative coordinates of the inner wrapper and the canvas
+        const innerWrapperRelPos = [touchPositions[0][0] / this.wrapperInnerWidth, touchPositions[0][1] / this.wrapperInnerHeight] as [number, number];
+        const innerCanvasRel = this.touchStarts[0].canvasRel;
+
+        // Project the scale
+        const [scaleDeltaX, scaleDeltaY] = this.calcProjectionTranslate(futureScale, innerWrapperRelPos, innerCanvasRel);
+
+        let rotationDeltaX = 0;
+        let rotationDeltaY = 0;
+        let deltaAngle = 0;
+
+        // ROTATION
+
+        if (this.allowRotation) {
+          // Angle between the two fingers at the start
+          const startAngle = getAngleBetweenTwoPoints(fingerOneStartCanvasCoords, fingerTwoStartCanvasCoords);
+          // Angle between the first finger at the start and the second finger at the current position
+          // we're doing this because we're projecting always from the first finger, so it's the anchor point
+          const newAngle = getAngleBetweenTwoPoints(touchPositions[0] as [number, number], touchPositions[1] as [number, number]);
+          // Delta angle between the original angle the one that we're projecting
+          deltaAngle = newAngle - startAngle;
+
+          // This method will project a point on the canvas using the already known scale and its delta
+          const projectPosScaled = (x: number, y: number) => {
+            return [this.offsetLeft + this.width * x * this.naturalScale * futureScale + scaleDeltaX, this.offsetTop + this.height * y * this.naturalScale * futureScale + scaleDeltaY] as [number, number];
+          };
+
+          // Normal 0,0 position
+          const originPointProjectionWithoutRotation = projectPosScaled(0, 0);
+          // Anchor point
+          const anchorPointProjectionWithoutRotation = projectPosScaled(this.touchStarts[0].canvasRel[0], this.touchStarts[0].canvasRel[1]);
+          // Origin point with rotation
+          const originPointProjectionWithRotation = rotatePoint(originPointProjectionWithoutRotation, anchorPointProjectionWithoutRotation, deltaAngle);
+
+          // Calculate the difference between the original and the rotated point
+          rotationDeltaX = originPointProjectionWithRotation[0] - originPointProjectionWithoutRotation[0];
+          rotationDeltaY = originPointProjectionWithRotation[1] - originPointProjectionWithoutRotation[1];
+        }
+
+        // Set the new values
+        this.scale = futureScale;
+        this.rotate = deltaAngle;
+        this.translateX = scaleDeltaX + rotationDeltaX;
+        this.translateY = scaleDeltaY + rotationDeltaY;
+      } else {
+        // Single finger touch implementation
+        const deltaX = event.touches[0].clientX - this.touchStarts[0].client[0];
+        const deltaY = event.touches[0].clientY - this.touchStarts[0].client[1];
+
+        const futureTranslate = [this.touchStartTranslate[0] + deltaX, this.touchStartTranslate[1] + deltaY];
+        // Set the new values
+        this.translateX = futureTranslate[0];
+        this.translateY = futureTranslate[1];
+      }
+    }
+  }
+  handleTouchend(event: TouchEvent) {
+    event.preventDefault();
+
+    if (event.touches.length === 0) {
+      this.touchStarts = null;
+    } else {
+      this.touchStarts = this.freezeTouches(event.touches);
+      this.touchStartScale = this.scale;
+      this.touchStartTranslate = [this.translateX, this.translateX];
+      this.touchStartRotate = this.rotate;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('wheel', (event) => {
+      this.handleWheel(event.deltaX, event.deltaY, event.ctrlKey, event.clientX, event.clientY);
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    // this.addEventListener('gesturestart', (event) => {
+    //   this.handleGesturestart();
+    // });
+    // window.addEventListener('gesturechange', (event) => {
+    //   this.handleGesturechange((event as any).rotation, (event as any).clientX, (event as any).clientY);
+    // });
+    // window.addEventListener('gestureend', (event) => {
+    //   this.handleGestureend();
+    // });
+
+    this.addEventListener('touchstart', (event) => {
+      this.handleTouchstart(event);
+    });
+    window.addEventListener('touchmove', (event) => {
+      this.handleTouchmove(event);
+    });
+    window.addEventListener('touchend', (event) => {
+      this.handleTouchend(event);
+    });
+  }
+  requestUpdate() {
+    super.requestUpdate();
+    //console.log('update');
   }
 }
 
diff --git a/zoompinch-lit/src/util/helpers.ts b/zoompinch-lit/src/util/helpers.ts
new file mode 100644
index 0000000..66e2bb9
--- /dev/null
+++ b/zoompinch-lit/src/util/helpers.ts
@@ -0,0 +1,48 @@
+export function radiansToDegrees(radians: number) {
+  return (radians * 180) / Math.PI;
+}
+export function degreeToRadians(degrees: number) {
+  return (degrees * Math.PI) / 180;
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function getAngleBetweenTwoPoints(p1: [number, number], p2: [number, number]) {
+  return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
+}
+
+export function rotatePoint(point: [number, number], center: [number, number], angleInRadians: number): [number, number] {
+  const [x, y] = point;
+  const [cx, cy] = center;
+
+  const rotatedX = Math.cos(angleInRadians) * (x - cx) - Math.sin(angleInRadians) * (y - cy) + cx;
+  const rotatedY = Math.sin(angleInRadians) * (x - cx) + Math.cos(angleInRadians) * (y - cy) + cy;
+
+  return [rotatedX, rotatedY];
+}
+
+export function angleToVector(angle: number): [number, number] {
+  return [Math.cos(angle), Math.sin(angle)];
+}
+export function getVectorBetweenTwoPoints(p1: [number, number], p2: [number, number]): [number, number] {
+  return [p2[0] - p1[0], p2[1] - p1[1]];
+}
+export function rotateVector(vector: [number, number], angle: number): [number, number] {
+  const [x, y] = vector;
+  return [x * Math.cos(angle) - y * Math.sin(angle), x * Math.sin(angle) + y * Math.cos(angle)];
+}
+
+// Funktion, die von einem Startpunkt aus einen Vektor und eine Länge nimmt
+// und sich nach der Länge auf dem Vektor bewegt und dann den Punkt ausgibt
+export function moveAlongVector(startPoint: [number, number], vector: [number, number], length: number): [number, number] {
+  const deltaX = vector[0] * length;
+  const deltaY = vector[1] * length;
+  return [startPoint[0] + deltaX, startPoint[1] + deltaY];
+}
+
+export function round(value: number, decimals: number) {
+  const factor = Math.pow(10, decimals);
+  return Math.round(value * factor) / factor;
+}
diff --git a/zoompinch-vue/package.json b/zoompinch-vue/package.json
index d4f4aa1..f359fc1 100644
--- a/zoompinch-vue/package.json
+++ b/zoompinch-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "package.json",
diff --git a/zoompinch-vue/src/controllers/touch.ts b/zoompinch-vue/src/controllers/touch.ts
index 879207e..2bce27e 100644
--- a/zoompinch-vue/src/controllers/touch.ts
+++ b/zoompinch-vue/src/controllers/touch.ts
@@ -36,7 +36,8 @@ export function useTouch({
   calcProjectionTranslate: (
     scale: number,
     wrapperInnerCoords: [number, number],
-    canvasAnchorCoords: [number, number]
+    canvasAnchorCoords: [number, number],
+    virtualRotate?: number
   ) => [number, number];
 }) {
   let touchStarts:
@@ -116,7 +117,7 @@ export function useTouch({
         const innerCanvasRel = touchStarts[0].canvasRel;
 
         // Project the scale
-        const [scaleDeltaX, scaleDeltaY] = calcProjectionTranslate(futureScale, innerWrapperRelPos, innerCanvasRel);
+        const [scaleDeltaX, scaleDeltaY] = calcProjectionTranslate(futureScale, innerWrapperRelPos, innerCanvasRel, 0);
 
         let rotationDeltaX = 0;
         let rotationDeltaY = 0;
diff --git a/zoompinch-vue/src/controllers/zoom.ts b/zoompinch-vue/src/controllers/zoom.ts
index 61b829c..ffcb9d5 100644
--- a/zoompinch-vue/src/controllers/zoom.ts
+++ b/zoompinch-vue/src/controllers/zoom.ts
@@ -141,7 +141,7 @@ export function useZoom({
     canvasAnchorCoords: [number, number],
     animate = false
   ) {
-    const scaleTranslation = calcProjectionTranslate(newScale, wrapperInnerCoords, canvasAnchorCoords);
+    const scaleTranslation = calcProjectionTranslate(newScale, wrapperInnerCoords, canvasAnchorCoords, 0);
     scale.value = newScale;
     translate.value = scaleTranslation;
     transitionEnabled.value = animate;