@zoompinch/vue 0.0.27 → 0.0.30

package/README.md

@@ -32,6 +32,10 @@ npm install @zoompinch/vue
         :max-scale="4"
         :clamp-bounds="false"
         :rotation="true"
+        :zoom-speed="1"
+        :translate-speed="1"
+        :zoom-speed-apple-trackpad="1"
+        :translate-speed-apple-trackpad="1"
         :mouse="false"
         :wheel="true"
         :touch="true"
@@ -104,6 +108,34 @@ function handleClick(event: MouseEvent) {
 | `touch` | `boolean` | `true` | Enable touch gestures |
 | `gesture` | `boolean` | `true` | Enable Safari gesture events |
 
+
+### Speed Multipliers
+
+#### The Problem
+Pan and zoom interactions behave differently across input devices:
+- **Apple Trackpads**: Provide smooth, precise scroll values with natural momentum
+- **Mouse Wheels**: Send large, discrete jumps (typically ±100 or ±120 per scroll tick)
+
+Without normalization, this causes:
+- Uncomfortably large zoom jumps when using mouse wheels
+- Panning that's either too slow (trackpad-optimized) or too fast (mouse-optimized)
+- Inconsistent user experience across Windows, Mac, and Linux
+
+#### The Solution
+The library automatically detects the input device type and applies different speed multipliers:
+- **Trackpad gestures** use base values for smooth, 1:1 response
+- **Mouse wheel actions** use amplified values for comfortable discrete steps
+
+You can fine-tune these multipliers for your specific use case using the speed props.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `translate-speed` | `number` | `1` | Pan speed multiplier for mouse wheels |
+| `zoom-speed` | `number` | `1` | Zoom speed multiplier for mouse wheels |
+| `translate-speed-apple-trackpad` | `number` | `1` | Pan speed multiplier for trackpads |
+| `zoom-speed-apple-trackpad` | `number` | `1` | Zoom speed multiplier for trackpads |
+
+
 **Note:** `min-scale`, `max-scale`, `rotation`, and `clamp-bounds` only apply during user interaction. Programmatic changes via ref methods are unrestricted.
 
 ### Events

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

@@ -16,6 +16,10 @@ type __VLS_Props = {
     wheel?: boolean;
     touch?: boolean;
     gesture?: boolean;
+    zoomSpeed?: number;
+    translateSpeed?: number;
+    zoomSpeedAppleTrackpad?: number;
+    translateSpeedAppleTrackpad?: number;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/style.css

@@ -1 +1 @@
-.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}
+.zoompinch[data-v-fbdbcf7c]{touch-action:none;overflow:hidden;width:100%;height:100%;position:relative}.zoompinch>.canvas[data-v-fbdbcf7c]{position:absolute}.zoompinch>.matrix[data-v-fbdbcf7c]{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}

package/dist/zoompinch-vue.es.js

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

package/dist/zoompinch-vue.umd.js

@@ -1 +1 @@
-(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"})}));
+(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,_){"use strict";const y={class:"canvas"},A={class:"matrix"},L=((s,p)=>{const u=s.__vccOpts||s;for(const[a,d]of p)u[a]=d;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},zoomSpeed:{},translateSpeed:{},zoomSpeedAppleTrackpad:{},translateSpeedAppleTrackpad:{}},emits:["update:transform","init","dragGestureStart","dragGestureEnd"],setup(s,{expose:p,emit:u}){const a=s,d=u,c=n.ref(),e=n.ref(),m=n.ref(!1);window.zoompinchEngine=e;const i=n.ref(()=>{throw new Error("Not initialized yet")}),v=n.ref(0),f=n.ref(0);n.onMounted(()=>{c.value&&(e.value=new _.Zoompinch(c.value,a.offset,a.transform.translateX,a.transform.translateY,a.transform.scale,a.transform.rotate,a.minScale,a.maxScale,a.clampBounds,a.rotation),a.zoomSpeed!==void 0&&(e.value.zoomSpeed=a.zoomSpeed),a.translateSpeed!==void 0&&(e.value.translateSpeed=a.translateSpeed),a.zoomSpeedAppleTrackpad!==void 0&&(e.value.zoomSpeedAppleTrackpad=a.zoomSpeedAppleTrackpad),a.translateSpeedAppleTrackpad!==void 0&&(e.value.translateSpeedAppleTrackpad=a.translateSpeedAppleTrackpad),e.value.addEventListener("init",()=>{d("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)&&d("update:transform",t),i.value=(r,l)=>e.value.composePoint(r,l),v.value=e.value.canvasBounds.width,f.value=e.value.canvasBounds.height}),e.value.addEventListener("init",()=>{m.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())}),n.watch(()=>a.zoomSpeed,()=>{!e.value||a.zoomSpeed===void 0||(e.value.zoomSpeed=a.zoomSpeed)}),n.watch(()=>a.translateSpeed,()=>{!e.value||a.translateSpeed===void 0||(e.value.translateSpeed=a.translateSpeed)}),n.watch(()=>a.zoomSpeedAppleTrackpad,()=>{!e.value||a.zoomSpeedAppleTrackpad===void 0||(e.value.zoomSpeedAppleTrackpad=a.zoomSpeedAppleTrackpad)}),n.watch(()=>a.translateSpeedAppleTrackpad,()=>{!e.value||a.translateSpeedAppleTrackpad===void 0||(e.value.translateSpeedAppleTrackpad=a.translateSpeedAppleTrackpad)});const B=(t,r,l,k)=>{e.value&&(k!==void 0&&(e.value.rotate=k),e.value.applyTransform(t,r,l))},X=t=>{e.value&&a.wheel&&e.value.handleWheel(t)},Y=t=>{e.value&&a.gesture&&e.value.handleGesturestart(t)},h=t=>{e.value&&a.gesture&&e.value.handleGesturechange(t)},w=t=>{e.value&&a.gesture&&e.value.handleGestureend(t)},x=t=>{e.value&&a.mouse&&e.value.handleMousedown(t)},S=t=>{e.value&&a.mouse&&e.value.handleMousemove(t)},T=t=>{e.value&&a.mouse&&e.value.handleMouseup(t)},G=t=>{e.value&&a.touch&&e.value.handleTouchstart(t)},z=t=>{e.value&&a.touch&&e.value.handleTouchmove(t)},E=t=>{e.value&&a.touch&&e.value.handleTouchend(t)};window.addEventListener("gesturechange",h),window.addEventListener("gestureend",w),window.addEventListener("mousemove",S),window.addEventListener("mouseup",T),window.addEventListener("touchmove",z),window.addEventListener("touchend",E),n.onUnmounted(()=>{window.removeEventListener("gesturechange",h),window.removeEventListener("gestureend",w),window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",T),window.removeEventListener("touchmove",z),window.removeEventListener("touchend",E)});const g=(t,r)=>{if(!e.value)throw new Error("Zoompinch engine not initialized");return e.value.normalizeClientCoords(t,r)},C=(t,r,l)=>{e.value&&e.value.rotateCanvas(t,r,l)};return n.useSlots(),p({applyTransform:B,composePoint:i,normalizeClientCoords:g,zoompinchEngine:e,canvasWidth:v,canvasHeight:f,rotateCanvas:C}),(t,r)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"zoompinchRef",ref:c,class:"zoompinch",onWheel:X,onGesturestart:Y,onMousedown:x,onTouchstart:G},[n.createElementVNode("div",y,[n.renderSlot(t.$slots,"default",{},void 0,!0)]),n.createElementVNode("div",A,[m.value&&i.value?n.renderSlot(t.$slots,"matrix",{key:0,composePoint:i.value,normalizeClientCoords:g,canvasWidth:v.value,canvasHeight:f.value},void 0,!0):n.createCommentVNode("",!0)])],544))}}),[["__scopeId","data-v-fbdbcf7c"]]);o.Zoompinch=L,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.27",
+  "version": "0.0.30",
   "private": false,
   "type": "module",
   "main": "./dist/zoompinch-vue.umd.js",
@@ -44,7 +44,7 @@
     "vue-tsc": "^3.2.0"
   },
   "dependencies": {
-    "@zoompinch/core": "^0.0.26"
+    "@zoompinch/core": "^0.0.30"
   },
   "peerDependencies": {
     "vue": "^3.5.26"