@zoompinch/vue 0.0.14 → 0.0.16

package/README.md

@@ -0,0 +1,379 @@
+# @zoompinch/vue
+
+Vue 3 bindings for [@zoompinch/core](https://github.com/ElyaConrad/zoompinch) - Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas.
+
+**Play with the demo:** [https://zoompinch.pages.dev](https://zoompinch.pages.dev)
+
+![Mobile demo](https://zoompinch.pages.dev/zoompinch_demo.gif)
+
+### Mathematical correct pinch on touch
+
+Unlike other libraries, _Zoompinch_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes pinching on touch devices feel native-like.
+
+### Touch, Wheelm, Mouse and Trackpad Gestures!
+
+Adside of touch, mouse and wheel events, **gesture events** (Safari Desktop) are supported as well! Try it out on the [demo](https://zoompinch.pages.dev)
+
+## Installation
+
+```bash
+npm install @zoompinch/vue
+```
+
+## Complete Example
+
+```vue
+<template>
+    <zoompinch
+        ref="zoompinchRef"
+        v-model:transform="transform"
+        :offset="{ top: 0, right: 0, bottom: 0, left: 0 }"
+        :min-scale="0.5"
+        :max-scale="4"
+        :clamp-bounds="false"
+        :rotation="true"
+        :mouse="false"
+        :wheel="true"
+        :touch="true"
+        :gesture="true"
+        @init="handleInit"
+        @click="handleClick"
+        class="viewer"
+    >
+        <img width="1536" height="2048"  src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" />
+        <template #matrix="{ composePoint, normalizeClientCoords, canvasWidth, canvasHeight }">
+            <svg width="100%" height="100%">
+                <!-- Center marker -->
+                <circle  :cx="composePoint(canvasWidth / 2, canvasHeight / 2)[0]" :cy="composePoint(canvasWidth / 2, canvasHeight / 2)[1]" r="8" fill="red" />
+            </svg>
+        </template>
+    </zoompinch>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Zoompinch } from '@zoompinch/vue';
+
+const zoompinchRef = ref<InstanceType<typeof Zoompinch>>();
+const transform = ref({
+  translateX: 0,
+  translateY: 0,
+  scale: 1,
+  rotate: 0
+});
+const clickPoint = ref<[number, number] | null>(null);
+
+function handleInit() {
+  // Center canvas on initialization
+  zoompinchRef.value?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], 0);
+}
+
+function handleTransformUpdate(newTransform) {
+  console.log('Transform updated:', newTransform);
+}
+
+function handleClick(event: MouseEvent) {
+  if (!zoompinchRef.value) return;
+  const [x, y] = zoompinchRef.value.normalizeClientCoords(event.clientX, event.clientY);
+  clickPoint.value = [x, y];
+}
+</script>
+
+<style scoped>
+.zoompinch {
+    width: 800px;
+    height: 600px;
+    border: 1px solid #f00;
+}
+</style>
+```
+
+---
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `transform` | `Transform` | `{ translateX: 0, translateY: 0, scale: 1, rotate: 0 }` | Current transform state (v-model) |
+| `offset` | `Offset` | `{ top: 0, right: 0, bottom: 0, left: 0 }` | Inner padding/offset within container |
+| `min-scale` | `number` | `0.5` | Minimum scale (user gestures only) |
+| `max-scale` | `number` | `10` | Maximum scale (user gestures only) |
+| `clamp-bounds` | `boolean` | `false` | Clamp panning within bounds (user gestures only) |
+| `rotation` | `boolean` | `true` | Enable rotation gestures |
+| `mouse` | `boolean` | `true` | Enable mouse drag |
+| `wheel` | `boolean` | `true` | Enable wheel/trackpad |
+| `touch` | `boolean` | `true` | Enable touch gestures |
+| `gesture` | `boolean` | `true` | Enable Safari gesture events |
+
+**Note:** `min-scale`, `max-scale`, `rotation`, and `clamp-bounds` only apply during user interaction. Programmatic changes via ref methods are unrestricted.
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `@init` | `void` | Fired when canvas dimensions are available |
+| `@update:transform` | `Transform` | Fired when transform changes (v-model) |
+
+```vue
+<zoompinch
+  @init="handleInit"
+  @update:transform="handleTransformUpdate"
+>
+  <!-- content -->
+</zoompinch>
+```
+
+### Template Ref Methods
+
+Access methods via template ref:
+
+```typescript
+const zoompinchRef = ref<InstanceType<typeof Zoompinch>>();
+
+// Call methods
+zoompinchRef.value?.applyTransform(scale, wrapperCoords, canvasCoords, rotate?);
+zoompinchRef.value?.normalizeClientCoords(clientX, clientY);
+zoompinchRef.value?.composePoint(x, y);
+zoompinchRef.value?.rotateCanvas(x, y, radians);
+
+// Access properties
+zoompinchRef.value?.canvasWidth;
+zoompinchRef.value?.canvasHeight;
+```
+
+#### `applyTransform(scale, wrapperCoords, canvasCoords, rotate?)`
+
+Apply transform by anchoring a canvas point to a wrapper point.
+
+**Parameters:**
+- `scale: number` - Target scale
+- `wrapperCoords: [number, number]` - Wrapper position (0-1, 0.5 = center)
+- `canvasCoords: [number, number]` - Canvas position (0-1, 0.5 = center)
+- `rotate?: number` - Optional rotation in radians
+
+**Examples:**
+
+```typescript
+// Center canvas at scale 1
+zoompinchRef.value?.applyTransform(1, [0.5, 0.5], [0.5, 0.5]);
+
+// Zoom to 2x, keep centered
+zoompinchRef.value?.applyTransform(2, [0.5, 0.5], [0.5, 0.5]);
+
+// Anchor canvas top-left to wrapper center
+zoompinchRef.value?.applyTransform(1.5, [0.5, 0.5], [0, 0]);
+
+// Set rotation
+zoompinchRef.value?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], Math.PI / 4);
+```
+
+#### `normalizeClientCoords(clientX, clientY)`
+
+Convert global client coordinates to canvas coordinates.
+
+**Parameters:**
+- `clientX: number` - Global X from event
+- `clientY: number` - Global Y from event
+
+**Returns:** `[number, number]` - Canvas coordinates in pixels
+
+**Example:**
+
+```typescript
+function handleClick(event: MouseEvent) {
+  const [x, y] = zoompinchRef.value!.normalizeClientCoords(
+    event.clientX, 
+    event.clientY
+  );
+  console.log('Canvas position:', x, y);
+}
+```
+
+#### `composePoint(x, y)`
+
+Convert canvas coordinates to wrapper coordinates (accounts for transform).
+
+**Parameters:**
+- `x: number` - Canvas X in pixels
+- `y: number` - Canvas Y in pixels
+
+**Returns:** `[number, number]` - Wrapper coordinates in pixels
+
+**Example:**
+
+```typescript
+// Get wrapper position for canvas center
+const [wrapperX, wrapperY] = zoompinchRef.value!.composePoint(
+  canvasWidth / 2,
+  canvasHeight / 2
+);
+```
+
+#### `rotateCanvas(x, y, radians)`
+
+Rotate canvas around a specific canvas point.
+
+**Parameters:**
+- `x: number` - Canvas X (rotation center)
+- `y: number` - Canvas Y (rotation center)
+- `radians: number` - Rotation angle
+
+**Example:**
+
+```typescript
+// Rotate 90° around canvas center
+const centerX = zoompinchRef.value!.canvasWidth / 2;
+const centerY = zoompinchRef.value!.canvasHeight / 2;
+zoompinchRef.value?.rotateCanvas(centerX, centerY, Math.PI / 2);
+```
+
+### Reactive Properties
+
+Access current canvas dimensions:
+
+```typescript
+const width = zoompinchRef.value?.canvasWidth;   // number
+const height = zoompinchRef.value?.canvasHeight; // number
+```
+
+### Matrix Slot
+
+Scoped slot for rendering overlay elements that follow the canvas transform.
+
+**Scoped Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `composePoint` | `(x: number, y: number) => [number, number]` | Canvas → Wrapper coords |
+| `normalizeClientCoords` | `(clientX: number, clientY: number) => [number, number]` | Client → Canvas coords |
+| `canvasWidth` | `number` | Current canvas width |
+| `canvasHeight` | `number` | Current canvas height |
+
+**Note:** `applyTransform` and `rotateCanvas` are NOT available in the slot. Use component ref instead.
+
+**Example:**
+
+```vue
+<zoompinch>
+  <img width="1920" height="1080" src="image.jpg" />
+  
+  <template #matrix="{ composePoint, normalizeClientCoords, canvasWidth, canvasHeight }">
+    <svg width="100%" height="100%">
+      <circle 
+        :cx="composePoint(canvasWidth / 2, canvasHeight / 2)[0]"
+        :cy="composePoint(canvasWidth / 2, canvasHeight / 2)[1]"
+        r="8"
+        fill="red"
+      />
+    </svg>
+  </template>
+</zoompinch>
+```
+
+## Coordinate Systems
+
+### 1. Canvas Coordinates (Absolute)
+
+Absolute pixels within canvas content.
+- Origin: `(0, 0)` at top-left
+- Range: `0` to `canvasWidth`, `0` to `canvasHeight`
+
+```typescript
+const [canvasX, canvasY] = normalizeClientCoords(event.clientX, event.clientY);
+```
+
+### 2. Wrapper Coordinates (Absolute)
+
+Absolute pixels within viewport/wrapper.
+- Origin: `(0, 0)` at top-left (accounting for offset)
+- Range: `0` to `wrapperWidth`, `0` to `wrapperHeight`
+
+```typescript
+const [wrapperX, wrapperY] = composePoint(canvasX, canvasY);
+```
+
+### 3. Relative Coordinates (0-1)
+
+Normalized coordinates for `applyTransform`.
+- Range: `0.0` to `1.0`
+- `0.5` = center, `1.0` = bottom-right
+
+```typescript
+[0, 0]       // top-left
+[0.5, 0.5]   // center
+[1, 1]       // bottom-right
+```
+
+**Conversion Flow:**
+
+```
+Client Coords → normalizeClientCoords() → Canvas Coords → composePoint() → Wrapper Coords
+```
+
+## Best Practices
+
+1. **Always specify image dimensions** to avoid layout shifts:
+   ```vue
+   <img width="1920" height="1080" src="image.jpg" />
+   ```
+
+2. **Center content on init:**
+   ```typescript
+   function handleInit() {
+     zoompinchRef.value?.applyTransform(1, [0.5, 0.5], [0.5, 0.5]);
+   }
+   ```
+
+3. **Prevent image drag:**
+   ```vue
+   <img src="image.jpg" draggable="false" style="user-select: none;" />
+   ```
+
+4. **Use clamp bounds for image viewers:**
+   ```vue
+   <zoompinch :clamp-bounds="true" :min-scale="0.5" :max-scale="4">
+   ```
+## Styling
+
+Minimal base styles are applied. Customize via class or style:
+
+```vue
+<zoompinch
+  class="my-viewer"
+  style="width: 100%; height: 600px; border: 1px solid #ccc;"
+>
+  <!-- content -->
+</zoompinch>
+```
+
+**Internal CSS classes:**
+
+```css
+.zoompinch          /* Container */
+.zoompinch > .canvas    /* Canvas wrapper */
+.zoompinch > .matrix    /* Matrix overlay */
+```
+
+## Browser Support
+
+- ✅ Chrome/Edge (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest, including iOS)
+- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
+
+## License
+
+MIT
+
+---
+
+## Related
+
+- [@zoompinch/core](https://www.npmjs.com/package/@zoompinch/core) - Core engine
+- [@zoompinch/elements](https://www.npmjs.com/package/@zoompinch/elements) - Web Components
+
+---
+
+Built with ❤️ by Elya Maurice Conrad

package/dist/components/Zoompinch.vue.d.ts

@@ -1,4 +1,5 @@
 import { Transform, Zoompinch } from '@zoompinch/core';
+import { VNode } from 'vue';
 type __VLS_Props = {
     transform?: Transform;
     offset?: {
@@ -9,7 +10,7 @@ type __VLS_Props = {
     };
     maxScale?: number;
     minScale?: number;
-    bounds?: boolean;
+    clampBounds?: boolean;
     rotation?: boolean;
     mouse?: boolean;
     wheel?: boolean;
@@ -18,11 +19,22 @@ type __VLS_Props = {
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        matrix?(_: {
+    slots: Readonly<{
+        default: () => VNode | VNode[];
+        matrix: (args: {
             composePoint: (x: number, y: number) => [number, number];
-        }): any;
+            normalizeClientCoords: (clientX: number, clientY: number) => [number, number];
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => VNode | VNode[];
+    }> & {
+        default: () => VNode | VNode[];
+        matrix: (args: {
+            composePoint: (x: number, y: number) => [number, number];
+            normalizeClientCoords: (clientX: number, clientY: number) => [number, number];
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => VNode | VNode[];
     };
     refs: {
         zoompinchRef: HTMLDivElement;
@@ -35,12 +47,17 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     composePoint: import('vue').Ref<(x: number, y: number) => [number, number], (x: number, y: number) => [number, number]>;
     normalizeClientCoords: (clientX: number, clientY: number) => [number, number];
     zoompinchEngine: import('vue').Ref<Zoompinch | undefined, Zoompinch | undefined>;
+    canvasWidth: import('vue').Ref<number, number>;
+    canvasHeight: import('vue').Ref<number, number>;
+    rotateCanvas: (x: number, y: number, radians: number) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:transform": (transform: Transform) => any;
+    init: () => any;
     dragGestureStart: (event: MouseEvent | TouchEvent | WheelEvent) => any;
     dragGestureEnd: (event: MouseEvent | TouchEvent | WheelEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:transform"?: ((transform: Transform) => any) | undefined;
+    onInit?: (() => any) | undefined;
     onDragGestureStart?: ((event: MouseEvent | TouchEvent | WheelEvent) => any) | undefined;
     onDragGestureEnd?: ((event: MouseEvent | TouchEvent | WheelEvent) => any) | undefined;
 }>, {
@@ -53,7 +70,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     };
     maxScale: number;
     minScale: number;
-    bounds: boolean;
+    clampBounds: boolean;
     rotation: boolean;
     mouse: boolean;
     wheel: boolean;

package/dist/style.css

@@ -1 +1 @@
-.zoompinch[data-v-681ec398]{touch-action:none;overflow:hidden;width:100%;height:100%;position:relative}.zoompinch>.canvas[data-v-681ec398]{position:absolute}.zoompinch>.matrix[data-v-681ec398]{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}
+.zoompinch[data-v-13174681]{touch-action:none;overflow:hidden;width:100%;height:100%;position:relative}.zoompinch>.canvas[data-v-13174681]{position:absolute}.zoompinch>.matrix[data-v-13174681]{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}

package/dist/zoompinch-vue.es.js

@@ -1,28 +1,30 @@
-import { defineComponent as G, ref as u, onMounted as x, watch as l, onUnmounted as B, createElementBlock as C, openBlock as M, createElementVNode as L, renderSlot as y, createCommentVNode as k } from "vue";
-import { Zoompinch as Z } from "@zoompinch/core";
-const N = { class: "canvas" }, P = { class: "matrix" }, W = /* @__PURE__ */ G({
+import { defineComponent as M, ref as o, onMounted as k, watch as r, onUnmounted as W, useSlots as Z, createElementBlock as N, openBlock as P, createElementVNode as S, renderSlot as T, createCommentVNode as $ } from "vue";
+import { Zoompinch as H } from "@zoompinch/core";
+const R = { class: "canvas" }, U = { class: "matrix" }, V = /* @__PURE__ */ M({
   __name: "Zoompinch",
   props: {
     transform: { default: () => ({ translateX: 0, translateY: 0, scale: 1, rotate: 0 }) },
     offset: { default: () => ({ left: 0, top: 0, right: 0, bottom: 0 }) },
     maxScale: { default: 10 },
     minScale: { default: 0.5 },
-    bounds: { type: Boolean, default: !1 },
+    clampBounds: { type: Boolean, default: !1 },
     rotation: { type: Boolean, default: !0 },
     mouse: { type: Boolean, default: !0 },
     wheel: { type: Boolean, default: !0 },
     touch: { type: Boolean, default: !0 },
     gesture: { type: Boolean, default: !0 }
   },
-  emits: ["update:transform", "dragGestureStart", "dragGestureEnd"],
-  setup(o, { expose: i, emit: r }) {
-    const a = o, d = r, v = u(), e = u(), f = u(!1);
+  emits: ["update:transform", "init", "dragGestureStart", "dragGestureEnd"],
+  setup(s, { expose: d, emit: l }) {
+    const a = s, i = l, c = o(), e = o(), h = o(!1);
     window.zoompinchEngine = e;
-    const s = u(() => {
+    const v = o(() => {
       throw new Error("Not initialized yet");
-    });
-    x(() => {
-      v.value && (e.value = new Z(v.value, a.offset, a.transform.translateX, a.transform.translateY, a.transform.scale, a.transform.rotate, a.minScale, a.maxScale), e.value.addEventListener("update", () => {
+    }), m = o(0), f = o(0);
+    k(() => {
+      c.value && (e.value = new H(c.value, a.offset, a.transform.translateX, a.transform.translateY, a.transform.scale, a.transform.rotate, a.minScale, a.maxScale, a.clampBounds, a.rotation), e.value.addEventListener("init", () => {
+        i("init");
+      }), e.value.addEventListener("update", () => {
         if (!e.value) return;
         const t = {
           translateX: e.value.translateX,
@@ -30,93 +32,107 @@ const N = { class: "canvas" }, P = { class: "matrix" }, W = /* @__PURE__ */ G({
           scale: e.value.scale,
           rotate: e.value.rotate
         };
-        (t.translateX !== a.transform.translateX || t.translateY !== a.transform.translateY || t.scale !== a.transform.scale || t.rotate !== a.transform.rotate) && d("update:transform", t), s.value = (n, c) => e.value.composePoint(n, c);
+        (t.translateX !== a.transform.translateX || t.translateY !== a.transform.translateY || t.scale !== a.transform.scale || t.rotate !== a.transform.rotate) && i("update:transform", t), v.value = (n, u) => e.value.composePoint(n, u), m.value = e.value.canvasBounds.width, f.value = e.value.canvasBounds.height;
       }), e.value.addEventListener("init", () => {
-        f.value = !0;
+        h.value = !0;
       }));
-    }), l(
+    }), r(
       () => a.transform,
       () => {
         e.value && (e.value.translateX !== a.transform.translateX || e.value.translateY !== a.transform.translateY || e.value.scale !== a.transform.scale || e.value.rotate !== a.transform.rotate) && (e.value.translateX = a.transform.translateX, e.value.translateY = a.transform.translateY, e.value.scale = a.transform.scale, e.value.rotate = a.transform.rotate, e.value.update());
       },
       { deep: !0 }
-    ), l(
+    ), r(
       () => a.offset,
       (t) => {
         e.value && (e.value.offset = t, e.value.update());
       },
       { deep: !0 }
-    ), l(
+    ), r(
       () => a.minScale,
       (t) => {
         e.value && (e.value.minScale = t, e.value.update());
       }
-    ), l(
+    ), r(
       () => a.maxScale,
       (t) => {
         e.value && (e.value.maxScale = t, e.value.update());
       }
-    );
-    const z = (t, n, c, _) => {
-      e.value && (_ !== void 0 && (e.value.rotate = _), e.value.applyTransform(t, n, c));
-    }, S = (t) => {
+    ), r(() => a.clampBounds, (t) => {
+      e.value && (e.value.clampBounds = t, e.value.setTranslateFromUserGesture(e.value.translateX, e.value.translateY), e.value.update());
+    }), r(() => a.rotation, (t) => {
+      e.value && (e.value.rotation = t, e.value.update());
+    });
+    const X = (t, n, u, y) => {
+      e.value && (y !== void 0 && (e.value.rotate = y), e.value.applyTransform(t, n, u));
+    }, Y = (t) => {
       e.value && a.wheel && e.value.handleWheel(t);
-    }, T = (t) => {
+    }, G = (t) => {
       e.value && a.gesture && e.value.handleGesturestart(t);
-    }, m = (t) => {
+    }, p = (t) => {
       e.value && a.gesture && e.value.handleGesturechange(t);
-    }, h = (t) => {
+    }, w = (t) => {
       e.value && a.gesture && e.value.handleGestureend(t);
-    }, X = (t) => {
+    }, z = (t) => {
       e.value && a.mouse && e.value.handleMousedown(t);
-    }, p = (t) => {
+    }, g = (t) => {
       e.value && a.mouse && e.value.handleMousemove(t);
-    }, w = (t) => {
+    }, E = (t) => {
       e.value && a.mouse && e.value.handleMouseup(t);
-    }, Y = (t) => {
+    }, x = (t) => {
       e.value && a.touch && e.value.handleTouchstart(t);
-    }, E = (t) => {
+    }, L = (t) => {
       e.value && a.touch && e.value.handleTouchmove(t);
-    }, g = (t) => {
+    }, _ = (t) => {
       e.value && a.touch && e.value.handleTouchend(t);
     };
-    return window.addEventListener("gesturechange", m), window.addEventListener("gestureend", h), window.addEventListener("mousemove", p), window.addEventListener("mouseup", w), window.addEventListener("touchmove", E), window.addEventListener("touchend", g), B(() => {
-      window.removeEventListener("gesturechange", m), window.removeEventListener("gestureend", h), window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", w), window.removeEventListener("touchmove", E), window.removeEventListener("touchend", g);
-    }), i({
-      applyTransform: z,
-      composePoint: s,
-      normalizeClientCoords: (t, n) => {
-        if (!e.value)
-          throw new Error("Zoompinch engine not initialized");
-        return e.value.normalizeClientCoords(t, n);
-      },
-      zoompinchEngine: e
-    }), (t, n) => (M(), C("div", {
+    window.addEventListener("gesturechange", p), window.addEventListener("gestureend", w), window.addEventListener("mousemove", g), window.addEventListener("mouseup", E), window.addEventListener("touchmove", L), window.addEventListener("touchend", _), W(() => {
+      window.removeEventListener("gesturechange", p), window.removeEventListener("gestureend", w), window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", E), window.removeEventListener("touchmove", L), window.removeEventListener("touchend", _);
+    });
+    const B = (t, n) => {
+      if (!e.value)
+        throw new Error("Zoompinch engine not initialized");
+      return e.value.normalizeClientCoords(t, n);
+    }, C = (t, n, u) => {
+      e.value && e.value.rotateCanvas(t, n, u);
+    };
+    return Z(), d({
+      applyTransform: X,
+      composePoint: v,
+      normalizeClientCoords: B,
+      zoompinchEngine: e,
+      canvasWidth: m,
+      canvasHeight: f,
+      rotateCanvas: C
+    }), (t, n) => (P(), N("div", {
       ref_key: "zoompinchRef",
-      ref: v,
+      ref: c,
       class: "zoompinch",
-      onWheel: S,
-      onGesturestart: T,
-      onMousedown: X,
-      onTouchstart: Y
+      onWheel: Y,
+      onGesturestart: G,
+      onMousedown: z,
+      onTouchstart: x
     }, [
-      L("div", N, [
-        y(t.$slots, "default", {}, void 0, !0)
+      S("div", R, [
+        T(t.$slots, "default", {}, void 0, !0)
       ]),
-      L("div", P, [
-        f.value && s.value ? y(t.$slots, "matrix", {
+      S("div", U, [
+        h.value && v.value ? T(t.$slots, "matrix", {
           key: 0,
-          composePoint: s.value
-        }, void 0, !0) : k("", !0)
+          composePoint: v.value,
+          normalizeClientCoords: B,
+          canvasWidth: m.value,
+          canvasHeight: f.value
+        }, void 0, !0) : $("", !0)
       ])
     ], 544));
   }
-}), $ = (o, i) => {
-  const r = o.__vccOpts || o;
-  for (const [a, d] of i)
-    r[a] = d;
-  return r;
-}, I = /* @__PURE__ */ $(W, [["__scopeId", "data-v-681ec398"]]);
+}), b = (s, d) => {
+  const l = s.__vccOpts || s;
+  for (const [a, i] of d)
+    l[a] = i;
+  return l;
+}, O = /* @__PURE__ */ b(V, [["__scopeId", "data-v-13174681"]]);
 export {
-  I as Zoompinch
+  O as Zoompinch
 };

package/dist/zoompinch-vue.umd.js

@@ -1 +1 @@
-(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","vue","@zoompinch/core"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.ZoompinchVue={},o.Vue,o.ZoompinchCore))})(this,(function(o,a,y){"use strict";const L={class:"canvas"},S={class:"matrix"},T=((s,i)=>{const l=s.__vccOpts||s;for(const[n,d]of i)l[n]=d;return l})(a.defineComponent({__name:"Zoompinch",props:{transform:{default:()=>({translateX:0,translateY:0,scale:1,rotate:0})},offset:{default:()=>({left:0,top:0,right:0,bottom:0})},maxScale:{default:10},minScale:{default:.5},bounds:{type:Boolean,default:!1},rotation:{type:Boolean,default:!0},mouse:{type:Boolean,default:!0},wheel:{type:Boolean,default:!0},touch:{type:Boolean,default:!0},gesture:{type:Boolean,default:!0}},emits:["update:transform","dragGestureStart","dragGestureEnd"],setup(s,{expose:i,emit:l}){const n=s,d=l,c=a.ref(),e=a.ref(),m=a.ref(!1);window.zoompinchEngine=e;const u=a.ref(()=>{throw new Error("Not initialized yet")});a.onMounted(()=>{c.value&&(e.value=new y.Zoompinch(c.value,n.offset,n.transform.translateX,n.transform.translateY,n.transform.scale,n.transform.rotate,n.minScale,n.maxScale),e.value.addEventListener("update",()=>{if(!e.value)return;const t={translateX:e.value.translateX,translateY:e.value.translateY,scale:e.value.scale,rotate:e.value.rotate};(t.translateX!==n.transform.translateX||t.translateY!==n.transform.translateY||t.scale!==n.transform.scale||t.rotate!==n.transform.rotate)&&d("update:transform",t),u.value=(r,f)=>e.value.composePoint(r,f)}),e.value.addEventListener("init",()=>{m.value=!0}))}),a.watch(()=>n.transform,()=>{e.value&&(e.value.translateX!==n.transform.translateX||e.value.translateY!==n.transform.translateY||e.value.scale!==n.transform.scale||e.value.rotate!==n.transform.rotate)&&(e.value.translateX=n.transform.translateX,e.value.translateY=n.transform.translateY,e.value.scale=n.transform.scale,e.value.rotate=n.transform.rotate,e.value.update())},{deep:!0}),a.watch(()=>n.offset,t=>{e.value&&(e.value.offset=t,e.value.update())},{deep:!0}),a.watch(()=>n.minScale,t=>{e.value&&(e.value.minScale=t,e.value.update())}),a.watch(()=>n.maxScale,t=>{e.value&&(e.value.maxScale=t,e.value.update())});const z=(t,r,f,_)=>{e.value&&(_!==void 0&&(e.value.rotate=_),e.value.applyTransform(t,r,f))},x=t=>{e.value&&n.wheel&&e.value.handleWheel(t)},X=t=>{e.value&&n.gesture&&e.value.handleGesturestart(t)},v=t=>{e.value&&n.gesture&&e.value.handleGesturechange(t)},h=t=>{e.value&&n.gesture&&e.value.handleGestureend(t)},Y=t=>{e.value&&n.mouse&&e.value.handleMousedown(t)},p=t=>{e.value&&n.mouse&&e.value.handleMousemove(t)},w=t=>{e.value&&n.mouse&&e.value.handleMouseup(t)},C=t=>{e.value&&n.touch&&e.value.handleTouchstart(t)},E=t=>{e.value&&n.touch&&e.value.handleTouchmove(t)},g=t=>{e.value&&n.touch&&e.value.handleTouchend(t)};return window.addEventListener("gesturechange",v),window.addEventListener("gestureend",h),window.addEventListener("mousemove",p),window.addEventListener("mouseup",w),window.addEventListener("touchmove",E),window.addEventListener("touchend",g),a.onUnmounted(()=>{window.removeEventListener("gesturechange",v),window.removeEventListener("gestureend",h),window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",g)}),i({applyTransform:z,composePoint:u,normalizeClientCoords:(t,r)=>{if(!e.value)throw new Error("Zoompinch engine not initialized");return e.value.normalizeClientCoords(t,r)},zoompinchEngine:e}),(t,r)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"zoompinchRef",ref:c,class:"zoompinch",onWheel:x,onGesturestart:X,onMousedown:Y,onTouchstart:C},[a.createElementVNode("div",L,[a.renderSlot(t.$slots,"default",{},void 0,!0)]),a.createElementVNode("div",S,[m.value&&u.value?a.renderSlot(t.$slots,"matrix",{key:0,composePoint:u.value},void 0,!0):a.createCommentVNode("",!0)])],544))}}),[["__scopeId","data-v-681ec398"]]);o.Zoompinch=T,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
+(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","vue","@zoompinch/core"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.ZoompinchVue={},o.Vue,o.ZoompinchCore))})(this,(function(o,n,S){"use strict";const T={class:"canvas"},z={class:"matrix"},X=((l,c)=>{const u=l.__vccOpts||l;for(const[a,i]of c)u[a]=i;return u})(n.defineComponent({__name:"Zoompinch",props:{transform:{default:()=>({translateX:0,translateY:0,scale:1,rotate:0})},offset:{default:()=>({left:0,top:0,right:0,bottom:0})},maxScale:{default:10},minScale:{default:.5},clampBounds:{type:Boolean,default:!1},rotation:{type:Boolean,default:!0},mouse:{type:Boolean,default:!0},wheel:{type:Boolean,default:!0},touch:{type:Boolean,default:!0},gesture:{type:Boolean,default:!0}},emits:["update:transform","init","dragGestureStart","dragGestureEnd"],setup(l,{expose:c,emit:u}){const a=l,i=u,f=n.ref(),e=n.ref(),h=n.ref(!1);window.zoompinchEngine=e;const d=n.ref(()=>{throw new Error("Not initialized yet")}),v=n.ref(0),m=n.ref(0);n.onMounted(()=>{f.value&&(e.value=new S.Zoompinch(f.value,a.offset,a.transform.translateX,a.transform.translateY,a.transform.scale,a.transform.rotate,a.minScale,a.maxScale,a.clampBounds,a.rotation),e.value.addEventListener("init",()=>{i("init")}),e.value.addEventListener("update",()=>{if(!e.value)return;const t={translateX:e.value.translateX,translateY:e.value.translateY,scale:e.value.scale,rotate:e.value.rotate};(t.translateX!==a.transform.translateX||t.translateY!==a.transform.translateY||t.scale!==a.transform.scale||t.rotate!==a.transform.rotate)&&i("update:transform",t),d.value=(r,s)=>e.value.composePoint(r,s),v.value=e.value.canvasBounds.width,m.value=e.value.canvasBounds.height}),e.value.addEventListener("init",()=>{h.value=!0}))}),n.watch(()=>a.transform,()=>{e.value&&(e.value.translateX!==a.transform.translateX||e.value.translateY!==a.transform.translateY||e.value.scale!==a.transform.scale||e.value.rotate!==a.transform.rotate)&&(e.value.translateX=a.transform.translateX,e.value.translateY=a.transform.translateY,e.value.scale=a.transform.scale,e.value.rotate=a.transform.rotate,e.value.update())},{deep:!0}),n.watch(()=>a.offset,t=>{e.value&&(e.value.offset=t,e.value.update())},{deep:!0}),n.watch(()=>a.minScale,t=>{e.value&&(e.value.minScale=t,e.value.update())}),n.watch(()=>a.maxScale,t=>{e.value&&(e.value.maxScale=t,e.value.update())}),n.watch(()=>a.clampBounds,t=>{e.value&&(e.value.clampBounds=t,e.value.setTranslateFromUserGesture(e.value.translateX,e.value.translateY),e.value.update())}),n.watch(()=>a.rotation,t=>{e.value&&(e.value.rotation=t,e.value.update())});const Y=(t,r,s,B)=>{e.value&&(B!==void 0&&(e.value.rotate=B),e.value.applyTransform(t,r,s))},x=t=>{e.value&&a.wheel&&e.value.handleWheel(t)},G=t=>{e.value&&a.gesture&&e.value.handleGesturestart(t)},p=t=>{e.value&&a.gesture&&e.value.handleGesturechange(t)},w=t=>{e.value&&a.gesture&&e.value.handleGestureend(t)},C=t=>{e.value&&a.mouse&&e.value.handleMousedown(t)},E=t=>{e.value&&a.mouse&&e.value.handleMousemove(t)},g=t=>{e.value&&a.mouse&&e.value.handleMouseup(t)},M=t=>{e.value&&a.touch&&e.value.handleTouchstart(t)},_=t=>{e.value&&a.touch&&e.value.handleTouchmove(t)},y=t=>{e.value&&a.touch&&e.value.handleTouchend(t)};window.addEventListener("gesturechange",p),window.addEventListener("gestureend",w),window.addEventListener("mousemove",E),window.addEventListener("mouseup",g),window.addEventListener("touchmove",_),window.addEventListener("touchend",y),n.onUnmounted(()=>{window.removeEventListener("gesturechange",p),window.removeEventListener("gestureend",w),window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",g),window.removeEventListener("touchmove",_),window.removeEventListener("touchend",y)});const L=(t,r)=>{if(!e.value)throw new Error("Zoompinch engine not initialized");return e.value.normalizeClientCoords(t,r)},Z=(t,r,s)=>{e.value&&e.value.rotateCanvas(t,r,s)};return n.useSlots(),c({applyTransform:Y,composePoint:d,normalizeClientCoords:L,zoompinchEngine:e,canvasWidth:v,canvasHeight:m,rotateCanvas:Z}),(t,r)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"zoompinchRef",ref:f,class:"zoompinch",onWheel:x,onGesturestart:G,onMousedown:C,onTouchstart:M},[n.createElementVNode("div",T,[n.renderSlot(t.$slots,"default",{},void 0,!0)]),n.createElementVNode("div",z,[h.value&&d.value?n.renderSlot(t.$slots,"matrix",{key:0,composePoint:d.value,normalizeClientCoords:L,canvasWidth:v.value,canvasHeight:m.value},void 0,!0):n.createCommentVNode("",!0)])],544))}}),[["__scopeId","data-v-13174681"]]);o.Zoompinch=X,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zoompinch/vue",
   "description": "Vue wrapper for ZoomPinch - reactive pinch & zoom component",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "private": false,
   "type": "module",
   "main": "./dist/zoompinch-vue.umd.js",
@@ -30,7 +30,7 @@
     "vue-tsc": "^3.2.0"
   },
   "dependencies": {
-    "@zoompinch/core": "^0.0.14"
+    "@zoompinch/core": "^0.0.16"
   },
   "peerDependencies": {
     "vue": "^3.5.26"