From 4204fb8fb9b820335e603073e4ebfed01db3588e Mon Sep 17 00:00:00 2001
From: Maurice Conrad <conr.maur@gmail.com>
Date: Sat, 13 Apr 2024 19:48:30 +0200
Subject: [PATCH] ok

---
 docs/src/guide/README.md                      |  23 ++-
 zoompinch-vue/README.md                       | 160 ++++++++++++++++++
 zoompinch-vue/package.json                    |   2 +-
 .../{ProjectionLayer.vue => Zoompinch.vue}    |  70 +++++---
 zoompinch-vue/src/controllers/gesture.ts      |  35 ++++
 zoompinch-vue/src/controllers/helpers.ts      |   5 +
 zoompinch-vue/src/controllers/zoom.ts         | 108 +++++++-----
 zoompinch-vue/src/index.ts                    |   2 +-
 8 files changed, 332 insertions(+), 73 deletions(-)
 create mode 100644 zoompinch-vue/README.md
 rename zoompinch-vue/src/components/{ProjectionLayer.vue => Zoompinch.vue} (83%)
 create mode 100644 zoompinch-vue/src/controllers/gesture.ts

diff --git a/docs/src/guide/README.md b/docs/src/guide/README.md
index fc82aec..176d395 100755
--- a/docs/src/guide/README.md
+++ b/docs/src/guide/README.md
@@ -1,5 +1,24 @@
 # Introduction
 
-VuePress is composed of two parts: a [minimalistic static site generator](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/core) with a Vue-powered [theming system](https://v1.vuepress.vuejs.org/theme/) and [Plugin API](https://v1.vuepress.vuejs.org/plugin/), and a [default theme](https://v1.vuepress.vuejs.org/theme/default-theme-config.html) optimized for writing technical documentation. It was created to support the documentation needs of Vue's own sub projects.
+Zoompinch let's you scale, translate and rotate any element with native-like multi-touch, mouse, wheel and gesture support.
 
-Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.
+## Reactive
+
+The `transform` property is fully reactive. {{1 +1}}
+
+<script>
+export default {
+  data() {
+    return {
+      dynamicComponent: null
+    }
+  },
+
+  mounted () {
+    
+    // import('./lib-that-access-window-on-import').then(module => {
+    //   this.dynamicComponent = module.default
+    // })
+  }
+}
+</script>
diff --git a/zoompinch-vue/README.md b/zoompinch-vue/README.md
new file mode 100644
index 0000000..fad1ac5
--- /dev/null
+++ b/zoompinch-vue/README.md
@@ -0,0 +1,160 @@
+## Zoompinch
+
+## Try it out!
+
+You will get the idea of this project by trying it out and play with the reactive properties.
+
+### Install
+
+```bash
+$ npm install zoompinch
+```
+
+### Example usage
+
+```typescript
+import { ProjectionLayer } from 'zoompinch';
+import 'zoompich/style.css';
+
+// Just the ref instance in which the component instance will live
+const projectionLayerRef = ref<InstanceType<typeof ProjectionLayer>>();
+
+// A reactive transform object
+const transform = ref({
+  x: 0,
+  y: 0,
+  scale: 1,
+  rotate: 1,
+});
+
+function handleClickOnLayer(event: MouseEvent) {
+  const [x, y] = projectionLayerRef.value?.normalizeMatrixCoordinates(event.clientX, event.clientY);
+
+  console.log('clicked at', x, y);
+}
+```
+
+```vue
+<projection-layer
+  ref="projectionLayerRef"
+  v-model:transform="transform"
+  :width="1536"
+  :height="2048"
+  :offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
+  :min-scale="0.1"
+  :max-scale="10"
+  :rotation="true"
+  :bounds="false"
+  mouse
+  touch
+  wheel
+  gesture
+>
+  <template #canvas>
+    <img
+      src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
+  </template>
+  <template #matrix="{ composePoint }">
+    <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
+      <!-- This circle will stick to the center of the canvas -->
+      <circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
+    </svg>
+  </template>
+</projection-layer>
+```
+
+#### Properties
+
+- `width` and `height`: Just inner dimensions of the element in the canvas.In fact they have to fit the aspect ratio of the actual element (otherwise you will have offsets)
+- `offset`: A padding that affects the "real view box" that will be used for calculations. This is important because of course the initial scale of `1` such as the initial translate of `0, 0` will be affected by this offset. Fitting your canvas into `{ scale: 1, x: 0, y: 0, rotate: 0 }` will be always the center of the view box without the offset.
+- `transform`: A reactive property (that can be used via `v-model`) that holds and accepts the relative transform from the center
+- `minScale` and `maxScale`: Minimum and maximum scale
+- `bounds`: Boolean value wether the canvas whould fit into the bounds of the view layer. If there is an offset, it will stick to the center. Default is `false`
+- `rotation`: Boolean value wether rotation is enabled. Default is `true`
+- `mouse`: Boolean value, wether mouse events will be connected
+- `touch`: Boolean value, wether touch events will be connected
+- `wheel`: Boolean value wether wheel events will be connected
+- `gesture`: Boolean value, wether gesture events will be connected
+
+## Scale, Move and Rotate
+
+Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively in both directions.
+
+## Mathematical correct pinch on touch
+
+Unlike other libraries, _Pinchzoom_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes rotation
+
+## Matrix Layer on top
+
+You can use a matrix layer on top that projects any virtual point within the canvas to the real absolute coordinates.
+
+## Helper functions
+
+Because different use cases need different ways of modifying a transform, there exist a lot of helper functions
+
+The most easiest way to interact with the transformations is to use the reactive transform object.
+
+```typescript
+console.log(transform.value);
+/*
+{
+  x: 0,
+  y: 0,
+  scale: 1,
+  rotate: 0 
+}
+*/
+
+transform.value = { x: 42, y: -42, scale: 1.5, rotate: 45 };
+```
+
+### applyTransform
+
+The `applyTransform` function accepts a given scale, a given relative position within the canvas, a relative position within the layer view and scales + positions the canvas.
+
+Make the canvas be centered at scale 1
+
+```typescript
+applyTransform(1, [0.5, 0.5], [0.5, 0.5]);
+```
+
+Make the center of the canvas be at top-bottom of the layer
+
+```typescript
+applyTransform(1, [0.5, 0.5], [1, 1]);
+```
+
+### rotateCanvas
+
+The `rotateCanvas` function accepts a relative x and y anchor within the canvas and a given rotation in radians. The canvas will be rotated around the relative anchor.
+
+Rotate canvas around its center
+
+```typescript
+rotateCanvas(0.5, 0.5, Math.PI / 4);
+```
+
+### normalizeMatrixCoordinates
+
+The `normalizeMatrixCoordinates` method convert given clientX and clientY coordinates to relative inner-canvas coordinates
+
+```typescript
+normalizeMatrixCoordinates(event.clientX, event.clientY);
+```
+
+### composePoint
+
+The `composePoint` returns absolute coordinates within the layer (from 0,0) for given relative inner-canvas coordinates.
+
+Example usage:
+
+```vue
+<!-- ... -->
+<template #matrix="{ composePoint }">
+  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+    <!-- This circle would stick to the center of the canvas -->
+    <circle :cx="composePoint(0.5, 0.5)[0]" :cy="composePoint(0.5, 0.5)[1]" />
+  </svg>
+</template>
+<!-- ... -->
+```
diff --git a/zoompinch-vue/package.json b/zoompinch-vue/package.json
index 0efb21e..31482e1 100644
--- a/zoompinch-vue/package.json
+++ b/zoompinch-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "files": [
     "package.json",
diff --git a/zoompinch-vue/src/components/ProjectionLayer.vue b/zoompinch-vue/src/components/Zoompinch.vue
similarity index 83%
rename from zoompinch-vue/src/components/ProjectionLayer.vue
rename to zoompinch-vue/src/components/Zoompinch.vue
index 7e3898e..7429900 100644
--- a/zoompinch-vue/src/components/ProjectionLayer.vue
+++ b/zoompinch-vue/src/components/Zoompinch.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    ref="projectionLayerRef"
-    class="projection-layer"
+    ref="zoompinchRef"
+    class="zoompinch"
     :style="{
       '--canvas-width': `${width}px`,
       '--canvas-height': `${height}px`,
@@ -22,7 +22,7 @@
     @wheel="wheelProxy"
     @touchstart="touchstartProxy"
     @mousedown="mousedownProxy"
-    @gesturestart="handleGesturestart"
+    @gesturestart="gesturestartProxy"
   >
     <div ref="canvasRef" class="canvas">
       <slot name="canvas" />
@@ -35,7 +35,13 @@
         <circle :cx="composePoint(1, 1)[0]" :cy="composePoint(1, 1)[1]" r="5" />
         <circle :cx="composePoint(0, 1)[0]" :cy="composePoint(0, 1)[1]" r="5" />
       </svg> -->
-      <slot name="matrix" />
+      <slot
+        name="matrix"
+        :compose-point="composePoint"
+        :compose="compose"
+        :clientCoordinatesToCanvasCoordinates="clientCoordinatesToCanvasCoordinates"
+        :normalizeMatrixCoordinates="normalizeMatrixCoordinates"
+      />
     </div>
   </div>
 </template>
@@ -70,6 +76,7 @@ const props = withDefaults(
     mouse?: boolean;
     wheel?: boolean;
     touch?: boolean;
+    gesture?: boolean;
   }>(),
   {
     transform: () => ({ x: 0, y: 0, scale: 1, rotate: 0 }),
@@ -81,13 +88,14 @@ const props = withDefaults(
     mouse: true,
     wheel: true,
     touch: true,
+    gesture: true,
   }
 );
 const emit = defineEmits<{
   'update:transform': [transform: Transform];
 }>();
 
-const projectionLayerRef = ref<HTMLElement>();
+const zoompinchRef = ref<HTMLElement>();
 const canvasRef = ref<HTMLElement>();
 const matrixRef = ref<HTMLElement>();
 
@@ -116,16 +124,19 @@ const {
   handleGestureend,
   applyTransform,
   rotateCanvas,
+  compose,
   exposedTransform,
   calcProjectionTranslate,
   clientCoordinatesToCanvasCoordinates,
+  normalizeMatrixCoordinates,
   transitionEnabled,
   transitionDuration,
 } = useZoom({
-  wrapperElementRef: projectionLayerRef,
+  wrapperElementRef: zoompinchRef,
   canvasNaturalWidth,
   canvasNaturalHeight,
   offset,
+  bounds: toRef(props, 'bounds'),
   rotationEnabled,
   minScale: toRef(props, 'minScale'),
   maxScale: toRef(props, 'maxScale'),
@@ -145,19 +156,12 @@ watch(exposedTransform, () => {
 watch(
   () => props.transform,
   () => {
-    if (
-      props.transform.x !== exposedTransform.value.x ||
-      props.transform.y !== exposedTransform.value.y ||
-      props.transform.scale !== exposedTransform.value.scale ||
-      props.transform.rotate !== exposedTransform.value.rotate
-    ) {
-      exposedTransform.value = {
-        x: props.transform.x,
-        y: props.transform.y,
-        scale: props.transform.scale,
-        rotate: props.transform.rotate,
-      };
-    }
+    exposedTransform.value = {
+      x: props.transform.x,
+      y: props.transform.y,
+      scale: props.transform.scale,
+      rotate: props.transform.rotate,
+    };
   },
   { deep: true }
 );
@@ -206,24 +210,42 @@ const mouseupProxy = (event: MouseEvent) => {
   }
 };
 
+const gesturestartProxy = (event: any) => {
+  if (props.gesture) {
+    handleGesturestart(event);
+  }
+};
+const gesturechangeProxy = (event: any) => {
+  if (props.gesture) {
+    handleGesturechange(event);
+  }
+};
+const gestureendProxy = (event: any) => {
+  if (props.gesture) {
+    handleGestureend(event);
+  }
+};
+
 window.addEventListener('touchmove', touchmoveProxy);
 window.addEventListener('touchend', touchendProxy);
 window.addEventListener('mouseup', mouseupProxy);
 window.addEventListener('mousemove', mousemoveProxy);
-window.addEventListener('gesturechange', handleGesturechange);
-window.addEventListener('gestureend', handleGestureend);
+window.addEventListener('gesturechange', gesturechangeProxy);
+window.addEventListener('gestureend', gestureendProxy);
 onUnmounted(() => {
   window.removeEventListener('touchmove', touchmoveProxy);
   window.removeEventListener('touchend', touchendProxy);
   window.removeEventListener('mouseup', mouseupProxy);
   window.removeEventListener('mousemove', mousemoveProxy);
-  window.removeEventListener('gesturechange', handleGesturechange);
-  window.removeEventListener('gestureend', handleGestureend);
+  window.removeEventListener('gesturechange', gesturechangeProxy);
+  window.removeEventListener('gestureend', gestureendProxy);
 });
 
 defineExpose({
+  compose,
   composePoint,
   clientCoordinatesToCanvasCoordinates,
+  normalizeMatrixCoordinates,
   applyTransform,
   calcProjectionTranslate,
   rotateCanvas,
@@ -231,7 +253,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.projection-layer {
+.zoompinch {
   width: 100%;
   height: 100%;
   position: relative;
diff --git a/zoompinch-vue/src/controllers/gesture.ts b/zoompinch-vue/src/controllers/gesture.ts
new file mode 100644
index 0000000..2fd756b
--- /dev/null
+++ b/zoompinch-vue/src/controllers/gesture.ts
@@ -0,0 +1,35 @@
+import { Ref } from 'vue';
+import { degreeToRadians } from './helpers';
+
+export function useGesture(
+  rotate: Ref<number>,
+  rotationEnabled: Ref<boolean>,
+  rotateCanvas: (x: number, y: number, angle: number) => void,
+  normalizeMatrixCoordinates: (clientX: number, clientY: number) => [number, number]
+) {
+  let gestureStartRotation = 0;
+  const handleGesturestart = (event: UIEvent) => {
+    gestureStartRotation = rotate.value;
+  };
+  const handleGesturechange = (event: any) => {
+    if (rotationEnabled.value === false) {
+      return;
+    }
+    const currRotation = (event as any).rotation as number;
+    if (currRotation === 0) {
+      return;
+    }
+
+    const relPos = normalizeMatrixCoordinates(event.clientX, event.clientY);
+    rotateCanvas(relPos[0], relPos[1], gestureStartRotation + degreeToRadians(currRotation));
+  };
+  const handleGestureend = (event: any) => {
+    //console.log('gestureend', event);
+  };
+
+  return {
+    handleGesturestart,
+    handleGesturechange,
+    handleGestureend,
+  };
+}
diff --git a/zoompinch-vue/src/controllers/helpers.ts b/zoompinch-vue/src/controllers/helpers.ts
index ab957f4..66e2bb9 100644
--- a/zoompinch-vue/src/controllers/helpers.ts
+++ b/zoompinch-vue/src/controllers/helpers.ts
@@ -41,3 +41,8 @@ export function moveAlongVector(startPoint: [number, number], vector: [number, n
   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/src/controllers/zoom.ts b/zoompinch-vue/src/controllers/zoom.ts
index 1253bd2..61b829c 100644
--- a/zoompinch-vue/src/controllers/zoom.ts
+++ b/zoompinch-vue/src/controllers/zoom.ts
@@ -3,13 +3,15 @@ import { useElementBounding } from '@vueuse/core';
 import { useTouch } from './touch';
 import { useWheel } from './wheel';
 import { useMouse } from './mouse';
-import { clamp, degreeToRadians, radiansToDegrees, rotatePoint } from '../controllers/helpers';
+import { useGesture } from './gesture';
+import { clamp, degreeToRadians, radiansToDegrees, rotatePoint, round } from '../controllers/helpers';
 
 export function useZoom({
   wrapperElementRef,
   canvasNaturalWidth,
   canvasNaturalHeight,
   offset,
+  bounds,
   rotationEnabled,
   minScale,
   maxScale,
@@ -18,6 +20,7 @@ export function useZoom({
   canvasNaturalWidth: Ref<number>;
   canvasNaturalHeight: Ref<number>;
   offset: Ref<{ top: number; left: number; right: number; bottom: number }>;
+  bounds: Ref<boolean>;
   rotationEnabled: Ref<boolean>;
   minScale: Ref<number>;
   maxScale: Ref<number>;
@@ -77,7 +80,7 @@ export function useZoom({
         const overflowX = canvasNaturalWidth.value * renderingScale.value - wrapperInnerWidth.value;
         const overflowY = canvasNaturalHeight.value * renderingScale.value - wrapperInnerHeight.value;
 
-        if (rotationEnabled.value) {
+        if (rotationEnabled.value || !bounds.value) {
           _translateX.value = newTranslateX;
           _translateY.value = newTranslateY;
         } else {
@@ -159,7 +162,7 @@ export function useZoom({
   });
 
   function getCenterOffset(scale: number, translate: [number, number], rotate: number) {
-    const centeredTranslationOffset = calcProjectionTranslate(scale, [0.5, 0.5], [0.5, 0.5]);
+    const centeredTranslationOffset = calcProjectionTranslate(scale, [0.5, 0.5], [0.5, 0.5], 0);
     const centeredPointNormal = [
       offset.value.left + centeredTranslationOffset[0] + canvasNaturalWidth.value * (scale * naturalScale.value) * 0.5,
       offset.value.top + centeredTranslationOffset[1] + canvasNaturalHeight.value * (scale * naturalScale.value) * 0.5,
@@ -172,18 +175,30 @@ export function useZoom({
     return [diffX, diffY];
   }
 
+  function getTransform() {
+    const offset = getCenterOffset(scale.value, [0, 0], rotate.value);
+    return {
+      x: round(translate.value[0] + offset[0], 6),
+      y: round(translate.value[1] + offset[1], 6),
+      scale: round(scale.value, 6),
+      rotate: round(radiansToDegrees(rotate.value), 6),
+    };
+  }
+
   const exposedTransform = computed({
     get() {
-      //const centeredTranslationOffset = calcProjectionTranslate(scale.value, [0.5, 0.5], [0.5, 0.5]);
-      const offset = getCenterOffset(scale.value, [0, 0], rotate.value);
-      return {
-        x: translate.value[0] + offset[0],
-        y: translate.value[1] + offset[1],
-        scale: scale.value,
-        rotate: radiansToDegrees(rotate.value),
-      };
+      return getTransform();
     },
     set(newTransform) {
+      const __curTransform = getTransform();
+      if (
+        newTransform.x === __curTransform.x &&
+        newTransform.y === __curTransform.y &&
+        newTransform.scale === __curTransform.scale &&
+        newTransform.rotate === __curTransform.rotate
+      ) {
+        return;
+      }
       const radians = degreeToRadians(newTransform.rotate);
       const offset = getCenterOffset(newTransform.scale, [0, 0], radians);
       translate.value = [newTransform.x - offset[0], newTransform.y - offset[1]];
@@ -249,24 +264,50 @@ export function useZoom({
     return translatedPoint;
   }
 
+  function compose(x: number, y: number) {
+    const relX = x / canvasNaturalWidth.value;
+    const relY = y / canvasNaturalHeight.value;
+    return composePoint(relX, relY);
+  }
+
   // Helper function that calculates the translation needed to map a point on the canvas to a point on the wrapper
-  function calcProjectionTranslate(newScale: number, wrapperPosition: [number, number], canvasPosition: [number, number]) {
+  function calcProjectionTranslate(
+    newScale: number,
+    wrapperPosition: [number, number],
+    canvasPosition: [number, number],
+    virtualRotate?: number
+  ) {
     // Calculate the intrinsic dimensions of the canvas
     const canvasIntrinsicWidth = canvasNaturalWidth.value * naturalScale.value;
     const canvasIntrinsicHeight = canvasNaturalHeight.value * naturalScale.value;
-    // Calculate the real dimensions of the canvas
+    // Calculate the real x,y coordinates of the canvas
     const canvasRealX = canvasPosition[0] * canvasIntrinsicWidth * newScale;
     const canvasRealY = canvasPosition[1] * canvasIntrinsicHeight * newScale;
+    const canvsRealRotated = rotatePoint([canvasRealX, canvasRealY], [0, 0], virtualRotate ?? rotate.value);
     // Calculate the real dimensions of the wrapper
     const wrapperRealX = wrapperPosition[0] * wrapperInnerWidth.value;
     const wrapperRealY = wrapperPosition[1] * wrapperInnerHeight.value;
     // 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];
   }
 
+  function rotateCanvas(x: number, y: number, radians: number) {
+    const newRotate = radians; // rotate.value + radians;
+    const offset = getCenterOffset(scale.value, [0, 0], newRotate);
+    const centeredTranslate = [0 - offset[0], 0 - offset[1]] as [number, number];
+    const centeredScale = scale.value;
+    const centeredRotate = newRotate;
+    const virtualPoint = composePoint(x, y, centeredScale, centeredTranslate, centeredRotate);
+    const currPoint = composePoint(x, y);
+    const deltaX = currPoint[0] - virtualPoint[0];
+    const deltaY = currPoint[1] - virtualPoint[1];
+    translate.value = [centeredTranslate[0] + deltaX, centeredTranslate[1] + deltaY] as [number, number];
+    rotate.value = newRotate;
+  }
+
   const { handleTouchend, handleTouchmove, handleTouchstart } = useTouch({
     wrapperInnerWidth,
     wrapperInnerHeight,
@@ -297,36 +338,12 @@ export function useZoom({
 
   const { handleMousedown, handleMouseup, handleMousemove } = useMouse(translate);
 
-  function rotateCanvas(x: number, y: number, radians: number) {
-    const newRotate = radians; // rotate.value + radians;
-    const offset = getCenterOffset(scale.value, [0, 0], newRotate);
-    const centeredTranslate = [0 - offset[0], 0 - offset[1]] as [number, number];
-    const centeredScale = scale.value;
-    const centeredRotate = newRotate;
-    const virtualPoint = composePoint(x, y, centeredScale, centeredTranslate, centeredRotate);
-    const currPoint = composePoint(x, y);
-    const deltaX = currPoint[0] - virtualPoint[0];
-    const deltaY = currPoint[1] - virtualPoint[1];
-    translate.value = [centeredTranslate[0] + deltaX, centeredTranslate[1] + deltaY] as [number, number];
-    rotate.value = newRotate;
-  }
-
-  let gestureStartRotation = 0;
-  const handleGesturestart = (event: UIEvent) => {
-    gestureStartRotation = rotate.value;
-  };
-  const handleGesturechange = (event: any) => {
-    const currRotation = (event as any).rotation as number;
-    if (currRotation === 0) {
-      return;
-    }
-
-    // const relPos = normalizeMatrixCoordinates(event.clientX, event.clientY);
-    // rotateCanvas(relPos[0], relPos[1], gestureStartRotation + degreeToRadians(currRotation));
-  };
-  const handleGestureend = (event: any) => {
-    //console.log('gestureend', event);
-  };
+  const { handleGesturestart, handleGesturechange, handleGestureend } = useGesture(
+    rotate,
+    rotationEnabled,
+    rotateCanvas,
+    normalizeMatrixCoordinates
+  );
 
   return {
     handleTouchend,
@@ -349,6 +366,7 @@ export function useZoom({
     normalizeMatrixCoordinates,
     clientCoordinatesToCanvasCoordinates,
     composePoint,
+    compose,
     handleWheel,
     applyTransform,
     handleMousedown,
diff --git a/zoompinch-vue/src/index.ts b/zoompinch-vue/src/index.ts
index 50a4940..d6301ec 100644
--- a/zoompinch-vue/src/index.ts
+++ b/zoompinch-vue/src/index.ts
@@ -1 +1 @@
-export { default as ProjectionLayer } from './components/ProjectionLayer.vue';
+export { default as Zoompinch } from './components/Zoompinch.vue';