@zoompinch/react 0.0.4 → 0.0.7

package/README.md

@@ -62,6 +62,10 @@ function App() {
       maxScale={4}
       clampBounds={false}
       rotation={true}
+      zoomSpeed={1}
+      translateSpeed={1}
+      zoomSpeedAppleTrackpad={1}
+      translateSpeedAppleTrackpad={1}
       mouse={true}
       wheel={true}
       touch={true}
@@ -131,6 +135,36 @@ export default App;
 
 **Note:** `minScale`, `maxScale`, `rotation`, and `clampBounds` only apply during user interaction. Programmatic changes via ref methods are unrestricted.
 
+### 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 |
+|------|------|---------|-------------|
+| `translateSpeed` | `number` | `1` | Pan speed multiplier for mouse wheels |
+| `zoomSpeed` | `number` | `1` | Zoom speed multiplier for mouse wheels |
+| `translateSpeedAppleTrackpad` | `number` | `1` | Pan speed multiplier for trackpads |
+| `zoomSpeedAppleTrackpad` | `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
 
 | Event | Payload | Description |

package/dist/zoompinch-react.es.js

@@ -1,6 +1,6 @@
-import te, { forwardRef as ne, useRef as F, useState as ae, useImperativeHandle as oe, useEffect as E } from "react";
-import { Zoompinch as ue } from "@zoompinch/core";
-var I = { exports: {} }, M = {};
+import te, { forwardRef as ne, useRef as G, useState as ae, useImperativeHandle as ue, useEffect as f } from "react";
+import { Zoompinch as oe } from "@zoompinch/core";
+var U = { exports: {} }, W = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -11,28 +11,28 @@ var I = { exports: {} }, M = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Q;
-function se() {
-  if (Q) return M;
+function ce() {
+  if (Q) return W;
   Q = 1;
-  var a = Symbol.for("react.transitional.element"), m = Symbol.for("react.fragment");
-  function l(d, s, c) {
-    var i = null;
-    if (c !== void 0 && (i = "" + c), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      c = {};
-      for (var p in s)
-        p !== "key" && (c[p] = s[p]);
-    } else c = s;
-    return s = c.ref, {
-      $$typeof: a,
-      type: d,
-      key: i,
+  var u = Symbol.for("react.transitional.element"), R = Symbol.for("react.fragment");
+  function h(p, s, i) {
+    var v = null;
+    if (i !== void 0 && (v = "" + i), s.key !== void 0 && (v = "" + s.key), "key" in s) {
+      i = {};
+      for (var w in s)
+        w !== "key" && (i[w] = s[w]);
+    } else i = s;
+    return s = i.ref, {
+      $$typeof: u,
+      type: p,
+      key: v,
       ref: s !== void 0 ? s : null,
-      props: c
+      props: i
     };
   }
-  return M.Fragment = m, M.jsx = l, M.jsxs = l, M;
+  return W.Fragment = R, W.jsx = h, W.jsxs = h, W;
 }
-var W = {};
+var $ = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -43,125 +43,125 @@ var W = {};
  * LICENSE file in the root directory of this source tree.
  */
 var K;
-function ce() {
+function se() {
   return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
-    function a(e) {
+    function u(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === X ? null : e.displayName || e.name || null;
+        return e.$$typeof === l ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case O:
+        case A:
           return "Fragment";
-        case H:
+        case F:
           return "Profiler";
-        case U:
+        case X:
           return "StrictMode";
-        case t:
+        case J:
           return "Suspense";
-        case f:
+        case V:
           return "SuspenseList";
-        case x:
+        case r:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case G:
+          case j:
             return "Portal";
-          case J:
+          case H:
             return e.displayName || "Context";
-          case q:
+          case z:
             return (e._context.displayName || "Context") + ".Consumer";
+          case q:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return n = e.displayName || null, n !== null ? n : u(e.type) || "Memo";
           case _:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case v:
-            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
-          case A:
-            r = e._payload, e = e._init;
+            n = e._payload, e = e._init;
             try {
-              return a(e(r));
+              return u(e(n));
             } catch {
             }
         }
       return null;
     }
-    function m(e) {
+    function R(e) {
       return "" + e;
     }
-    function l(e) {
+    function h(e) {
       try {
-        m(e);
-        var r = !1;
+        R(e);
+        var n = !1;
       } catch {
-        r = !0;
+        n = !0;
       }
-      if (r) {
-        r = console;
-        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return n.call(
-          r,
+      if (n) {
+        n = console;
+        var o = n.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          n,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          o
-        ), m(e);
+          c
+        ), R(e);
       }
     }
-    function d(e) {
-      if (e === O) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === A)
+    function p(e) {
+      if (e === A) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === _)
         return "<...>";
       try {
-        var r = a(e);
-        return r ? "<" + r + ">" : "<...>";
+        var n = u(e);
+        return n ? "<" + n + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function s() {
-      var e = g.A;
+      var e = d.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function i() {
       return Error("react-stack-top-frame");
     }
-    function i(e) {
-      if (S.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+    function v(e) {
+      if (I.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function p(e, r) {
-      function n() {
-        j || (j = !0, console.error(
+    function w(e, n) {
+      function o() {
+        N || (N = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          r
+          n
         ));
       }
-      n.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: n,
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
         configurable: !0
       });
     }
-    function w() {
-      var e = a(this.type);
-      return L[e] || (L[e] = !0, console.error(
+    function y() {
+      var e = u(this.type);
+      return C[e] || (C[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function T(e, r, n, o, R, V) {
-      var u = n.ref;
+    function k(e, n, o, c, P, t) {
+      var a = o.ref;
       return e = {
-        $$typeof: y,
+        $$typeof: D,
         type: e,
-        key: r,
-        props: n,
-        _owner: o
-      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        key: n,
+        props: o,
+        _owner: c
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: w
+        get: y
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -176,228 +176,240 @@ function ce() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: R
+        value: P
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: V
+        value: t
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function $(e, r, n, o, R, V) {
-      var u = r.children;
-      if (u !== void 0)
-        if (o)
-          if (z(u)) {
-            for (o = 0; o < u.length; o++)
-              b(u[o]);
-            Object.freeze && Object.freeze(u);
+    function b(e, n, o, c, P, t) {
+      var a = n.children;
+      if (a !== void 0)
+        if (c)
+          if (L(a)) {
+            for (c = 0; c < a.length; c++)
+              T(a[c]);
+            Object.freeze && Object.freeze(a);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else b(u);
-      if (S.call(r, "key")) {
-        u = a(e);
-        var k = Object.keys(r).filter(function(re) {
+        else T(a);
+      if (I.call(n, "key")) {
+        a = u(e);
+        var E = Object.keys(n).filter(function(re) {
           return re !== "key";
         });
-        o = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", Y[u + o] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
+        c = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", M[a + c] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          o,
-          u,
-          k,
-          u
-        ), Y[u + o] = !0);
+          c,
+          a,
+          E,
+          a
+        ), M[a + c] = !0);
       }
-      if (u = null, n !== void 0 && (l(n), u = "" + n), i(r) && (l(r.key), u = "" + r.key), "key" in r) {
-        n = {};
-        for (var Z in r)
-          Z !== "key" && (n[Z] = r[Z]);
-      } else n = r;
-      return u && p(
-        n,
+      if (a = null, o !== void 0 && (h(o), a = "" + o), v(n) && (h(n.key), a = "" + n.key), "key" in n) {
+        o = {};
+        for (var x in n)
+          x !== "key" && (o[x] = n[x]);
+      } else o = n;
+      return a && w(
+        o,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), T(
+      ), k(
         e,
-        u,
-        n,
+        a,
+        o,
         s(),
-        R,
-        V
+        P,
+        t
       );
     }
-    function b(e) {
-      D(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? D(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function T(e) {
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === _ && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function D(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === y;
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === D;
     }
-    var h = te, y = Symbol.for("react.transitional.element"), G = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), H = Symbol.for("react.profiler"), q = Symbol.for("react.consumer"), J = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), t = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), x = Symbol.for("react.activity"), X = Symbol.for("react.client.reference"), g = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, S = Object.prototype.hasOwnProperty, z = Array.isArray, P = console.createTask ? console.createTask : function() {
+    var m = te, D = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), X = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), H = Symbol.for("react.context"), q = Symbol.for("react.forward_ref"), J = Symbol.for("react.suspense"), V = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), r = Symbol.for("react.activity"), l = Symbol.for("react.client.reference"), d = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, L = Array.isArray, O = console.createTask ? console.createTask : function() {
       return null;
     };
-    h = {
+    m = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var j, L = {}, N = h.react_stack_bottom_frame.bind(
-      h,
-      c
-    )(), C = P(d(c)), Y = {};
-    W.Fragment = O, W.jsx = function(e, r, n) {
-      var o = 1e4 > g.recentlyCreatedOwnerStacks++;
-      return $(
+    var N, C = {}, Y = m.react_stack_bottom_frame.bind(
+      m,
+      i
+    )(), S = O(p(i)), M = {};
+    $.Fragment = A, $.jsx = function(e, n, o) {
+      var c = 1e4 > d.recentlyCreatedOwnerStacks++;
+      return b(
         e,
-        r,
         n,
+        o,
         !1,
-        o ? Error("react-stack-top-frame") : N,
-        o ? P(d(e)) : C
+        c ? Error("react-stack-top-frame") : Y,
+        c ? O(p(e)) : S
       );
-    }, W.jsxs = function(e, r, n) {
-      var o = 1e4 > g.recentlyCreatedOwnerStacks++;
-      return $(
+    }, $.jsxs = function(e, n, o) {
+      var c = 1e4 > d.recentlyCreatedOwnerStacks++;
+      return b(
         e,
-        r,
         n,
+        o,
         !0,
-        o ? Error("react-stack-top-frame") : N,
-        o ? P(d(e)) : C
+        c ? Error("react-stack-top-frame") : Y,
+        c ? O(p(e)) : S
       );
     };
-  })()), W;
+  })()), $;
 }
 var ee;
 function ie() {
-  return ee || (ee = 1, process.env.NODE_ENV === "production" ? I.exports = se() : I.exports = ce()), I.exports;
+  return ee || (ee = 1, process.env.NODE_ENV === "production" ? U.exports = ce() : U.exports = se()), U.exports;
 }
 var B = ie();
 const le = ne(({
-  transform: a = { translateX: 0, translateY: 0, scale: 1, rotate: 0 },
-  offset: m = { left: 0, top: 0, right: 0, bottom: 0 },
-  minScale: l = 0.5,
-  maxScale: d = 10,
+  transform: u = { translateX: 0, translateY: 0, scale: 1, rotate: 0 },
+  offset: R = { left: 0, top: 0, right: 0, bottom: 0 },
+  minScale: h = 0.5,
+  maxScale: p = 10,
   clampBounds: s = !1,
-  rotation: c = !0,
-  mouse: i = !0,
-  wheel: p = !0,
-  touch: w = !0,
-  gesture: T = !0,
-  children: $,
-  matrix: b,
-  style: D,
-  onTransformChange: h,
-  onInit: y,
-  onClick: G,
-  onMouseDown: O,
-  onTouchStart: U,
-  onMouseup: H,
-  onTouchend: q
-}, J) => {
-  const _ = F(null), t = F(null), f = F(!1), [v, A] = ae({
-    composePoint: (r, n) => [0, 0],
+  rotation: i = !0,
+  mouse: v = !0,
+  wheel: w = !0,
+  touch: y = !0,
+  gesture: k = !0,
+  zoomSpeed: b,
+  translateSpeed: T,
+  zoomSpeedAppleTrackpad: g,
+  translateSpeedAppleTrackpad: m,
+  children: D,
+  matrix: j,
+  style: A,
+  onTransformChange: X,
+  onInit: F,
+  onClick: z,
+  onMouseDown: H,
+  onTouchStart: q,
+  onMouseup: J,
+  onTouchend: V
+}, Z) => {
+  const _ = G(null), r = G(null), l = G(!1), [d, I] = ae({
+    composePoint: (t, a) => [0, 0],
     canvasWidth: 0,
     canvasHeight: 0
-  }), x = F((r, n) => t.current ? t.current.normalizeClientCoords(r, n) : [0, 0]);
-  oe(J, () => ({
-    applyTransform: (r, n, o, R) => {
-      t.current && (R !== void 0 && (t.current.rotate = R), t.current.applyTransform(r, n, o));
+  }), L = G((t, a) => r.current ? r.current.normalizeClientCoords(t, a) : [0, 0]);
+  ue(Z, () => ({
+    applyTransform: (t, a, E, x) => {
+      r.current && (x !== void 0 && (r.current.rotate = x), r.current.applyTransform(t, a, E));
     },
-    composePoint: (r, n) => v.composePoint ? v.composePoint(r, n) : [0, 0],
-    normalizeClientCoords: (r, n) => x.current ? x.current(r, n) : [0, 0],
-    rotateCanvas: (r, n, o) => {
-      t.current && t.current.rotateCanvas(r, n, o);
+    composePoint: (t, a) => d.composePoint ? d.composePoint(t, a) : [0, 0],
+    normalizeClientCoords: (t, a) => L.current ? L.current(t, a) : [0, 0],
+    rotateCanvas: (t, a, E) => {
+      r.current && r.current.rotateCanvas(t, a, E);
     },
-    zoompinchEngine: t.current,
-    canvasWidth: v.canvasWidth,
-    canvasHeight: v.canvasHeight
+    zoompinchEngine: r.current,
+    canvasWidth: d.canvasWidth,
+    canvasHeight: d.canvasHeight
   }));
-  function X() {
-    var r, n;
-    t.current && A({
-      composePoint: t.current.composePoint.bind(t.current),
-      canvasWidth: ((r = t.current.canvasBounds) == null ? void 0 : r.width) ?? 0,
-      canvasHeight: ((n = t.current.canvasBounds) == null ? void 0 : n.height) ?? 0
+  function O() {
+    var t, a;
+    r.current && I({
+      composePoint: r.current.composePoint.bind(r.current),
+      canvasWidth: ((t = r.current.canvasBounds) == null ? void 0 : t.width) ?? 0,
+      canvasHeight: ((a = r.current.canvasBounds) == null ? void 0 : a.height) ?? 0
     });
   }
-  E(() => {
-    !_.current || t.current || (t.current = new ue(_.current, m, a.translateX, a.translateY, a.scale, a.rotate, l, d, s, c), console.log("Zoompinch initialisiert mit Props!"), t.current.addEventListener("update", () => {
-      if (!t.current) return;
-      const r = {
-        translateX: t.current.translateX,
-        translateY: t.current.translateY,
-        scale: t.current.scale,
-        rotate: t.current.rotate
+  f(() => {
+    !_.current || r.current || (r.current = new oe(_.current, R, u.translateX, u.translateY, u.scale, u.rotate, h, p, s, i), b !== void 0 && (r.current.zoomSpeed = b), T !== void 0 && (r.current.translateSpeed = T), g !== void 0 && (r.current.zoomSpeedAppleTrackpad = g), m !== void 0 && (r.current.translateSpeedAppleTrackpad = m), r.current.addEventListener("update", () => {
+      if (!r.current) return;
+      const t = {
+        translateX: r.current.translateX,
+        translateY: r.current.translateY,
+        scale: r.current.scale,
+        rotate: r.current.rotate
       };
-      h && (r.translateX !== a.translateX || r.translateY !== a.translateY || r.scale !== a.scale || r.rotate !== a.rotate) && h(r), X();
-    }), t.current.addEventListener("load", () => {
-      t.current && (f.current = !0, y && y(), X());
+      X && (t.translateX !== u.translateX || t.translateY !== u.translateY || t.scale !== u.scale || t.rotate !== u.rotate) && X(t), O();
+    }), r.current.addEventListener("load", () => {
+      r.current && (l.current = !0, F && F(), O());
     }));
-  }, []), E(() => {
-    !t.current || !f.current || (t.current.translateX !== a.translateX || t.current.translateY !== a.translateY || t.current.scale !== a.scale || t.current.rotate !== a.rotate) && (t.current.translateX = a.translateX, t.current.translateY = a.translateY, t.current.scale = a.scale, t.current.rotate = a.rotate, t.current.update());
-  }, [a]), E(() => {
-    !t.current || !f.current || (t.current.offset = m, t.current.update());
-  }, [m]), E(() => {
-    !t.current || !f.current || (t.current.minScale = l, t.current.update());
-  }, [l]), E(() => {
-    !t.current || !f.current || (t.current.maxScale = d, t.current.update());
-  }, [d]), E(() => {
-    !t.current || !f.current || (t.current.clampBounds = s, t.current.setTranslateFromUserGesture(t.current.translateX, t.current.translateY), t.current.update());
-  }, [s]), E(() => {
-    !t.current || !f.current || (t.current.rotation = c, t.current.update());
-  }, [c]);
-  const g = (r) => {
-    !t.current || !p || (r.preventDefault(), t.current.handleWheel(r));
-  }, S = (r) => {
-    !t.current || !T || t.current.handleGesturestart(r);
-  }, z = (r) => {
-    !t.current || !T || t.current.handleGesturechange(r);
-  }, P = (r) => {
-    !t.current || !T || t.current.handleGestureend(r);
-  }, j = (r) => {
-    !t.current || !i || t.current.handleMousedown(r);
-  }, L = (r) => {
-    !t.current || !i || t.current.handleMousemove(r);
-  }, N = (r) => {
-    !t.current || !i || t.current.handleMouseup(r);
-  }, C = (r) => {
-    !t.current || !w || t.current.handleTouchstart(r);
-  }, Y = (r) => {
-    !t.current || !w || t.current.handleTouchmove(r);
-  }, e = (r) => {
-    !t.current || !w || t.current.handleTouchend(r);
+  }, []), f(() => {
+    !r.current || !l.current || (r.current.translateX !== u.translateX || r.current.translateY !== u.translateY || r.current.scale !== u.scale || r.current.rotate !== u.rotate) && (r.current.translateX = u.translateX, r.current.translateY = u.translateY, r.current.scale = u.scale, r.current.rotate = u.rotate, r.current.update());
+  }, [u]), f(() => {
+    !r.current || !l.current || (r.current.offset = R, r.current.update());
+  }, [R]), f(() => {
+    !r.current || !l.current || (r.current.minScale = h, r.current.update());
+  }, [h]), f(() => {
+    !r.current || !l.current || (r.current.maxScale = p, r.current.update());
+  }, [p]), f(() => {
+    !r.current || !l.current || (r.current.clampBounds = s, r.current.setTranslateFromUserGesture(r.current.translateX, r.current.translateY), r.current.update());
+  }, [s]), f(() => {
+    !r.current || !l.current || (r.current.rotation = i, r.current.update());
+  }, [i]), f(() => {
+    !r.current || !l.current || b !== void 0 && (r.current.zoomSpeed = b);
+  }, [b]), f(() => {
+    !r.current || !l.current || T !== void 0 && (r.current.translateSpeed = T);
+  }, [T]), f(() => {
+    !r.current || !l.current || g !== void 0 && (r.current.zoomSpeedAppleTrackpad = g);
+  }, [g]), f(() => {
+    !r.current || !l.current || m !== void 0 && (r.current.translateSpeedAppleTrackpad = m);
+  }, [m]);
+  const N = (t) => {
+    !r.current || !w || (t.preventDefault(), r.current.handleWheel(t));
+  }, C = (t) => {
+    !r.current || !k || r.current.handleGesturestart(t);
+  }, Y = (t) => {
+    !r.current || !k || r.current.handleGesturechange(t);
+  }, S = (t) => {
+    !r.current || !k || r.current.handleGestureend(t);
+  }, M = (t) => {
+    !r.current || !v || r.current.handleMousedown(t);
+  }, e = (t) => {
+    !r.current || !v || r.current.handleMousemove(t);
+  }, n = (t) => {
+    !r.current || !v || r.current.handleMouseup(t);
+  }, o = (t) => {
+    !r.current || !y || r.current.handleTouchstart(t);
+  }, c = (t) => {
+    !r.current || !y || r.current.handleTouchmove(t);
+  }, P = (t) => {
+    !r.current || !y || r.current.handleTouchend(t);
   };
-  return E(() => {
+  return f(() => {
     if (!_.current) return;
-    const r = _.current;
-    return window.addEventListener("gesturechange", z), window.addEventListener("gestureend", P), window.addEventListener("mousemove", L), window.addEventListener("mouseup", N), window.addEventListener("touchmove", Y), window.addEventListener("touchend", e), r.addEventListener("wheel", g, { passive: !1 }), r.addEventListener("gesturestart", S, { passive: !1 }), r.addEventListener("mousedown", j, { passive: !1 }), r.addEventListener("touchstart", C, { passive: !1 }), () => {
-      window.removeEventListener("gesturechange", z), window.removeEventListener("gestureend", P), window.removeEventListener("mousemove", L), window.removeEventListener("mouseup", N), window.removeEventListener("touchmove", Y), window.removeEventListener("touchend", e), r.removeEventListener("wheel", g), r.removeEventListener("gesturestart", S), r.removeEventListener("mousedown", j), r.removeEventListener("touchstart", C);
+    const t = _.current;
+    return window.addEventListener("gesturechange", Y), window.addEventListener("gestureend", S), window.addEventListener("mousemove", e), window.addEventListener("mouseup", n), window.addEventListener("touchmove", c), window.addEventListener("touchend", P), t.addEventListener("wheel", N, { passive: !1 }), t.addEventListener("gesturestart", C, { passive: !1 }), t.addEventListener("mousedown", M, { passive: !1 }), t.addEventListener("touchstart", o, { passive: !1 }), () => {
+      window.removeEventListener("gesturechange", Y), window.removeEventListener("gestureend", S), window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", n), window.removeEventListener("touchmove", c), window.removeEventListener("touchend", P), t.removeEventListener("wheel", N), t.removeEventListener("gesturestart", C), t.removeEventListener("mousedown", M), t.removeEventListener("touchstart", o);
     };
-  }, [i, w, T, p]), /* @__PURE__ */ B.jsxs(
+  }, [v, y, k, w]), /* @__PURE__ */ B.jsxs(
     "div",
     {
       ref: _,
       className: "zoompinch",
-      style: D,
-      onClick: G,
-      onMouseDown: O,
-      onTouchStart: U,
-      onMouseUp: H,
-      onTouchEnd: q,
+      style: A,
+      onClick: z,
+      onMouseDown: H,
+      onTouchStart: q,
+      onMouseUp: J,
+      onTouchEnd: V,
       children: [
-        /* @__PURE__ */ B.jsx("div", { className: "canvas", children: $ }),
-        /* @__PURE__ */ B.jsx("div", { className: "matrix", children: typeof b == "function" ? b({
-          composePoint: v.composePoint,
-          normalizeClientCoords: x.current,
-          canvasWidth: v.canvasWidth,
-          canvasHeight: v.canvasHeight
-        }) : b })
+        /* @__PURE__ */ B.jsx("div", { className: "canvas", children: D }),
+        /* @__PURE__ */ B.jsx("div", { className: "matrix", children: typeof j == "function" ? j({
+          composePoint: d.composePoint,
+          normalizeClientCoords: L.current,
+          canvasWidth: d.canvasWidth,
+          canvasHeight: d.canvasHeight
+        }) : j })
       ]
     }
   );

package/dist/zoompinch-react.umd.js

@@ -1,4 +1,4 @@
-(function(p,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","react","@zoompinch/core"],u):(p=typeof globalThis<"u"?globalThis:p||self,u(p.ZoompinchReact={},p.React,p.ZoompinchCore))})(this,(function(p,u,te){"use strict";var D={exports:{}},O={};/**
+(function(_,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","react","@zoompinch/core"],c):(_=typeof globalThis<"u"?globalThis:_||self,c(_.ZoompinchReact={},_.React,_.ZoompinchCore))})(this,(function(_,c,te){"use strict";var F={exports:{}},A={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var q;function ne(){if(q)return O;q=1;var a=Symbol.for("react.transitional.element"),E=Symbol.for("react.fragment");function f(d,c,i){var l=null;if(i!==void 0&&(l=""+i),c.key!==void 0&&(l=""+c.key),"key"in c){i={};for(var h in c)h!=="key"&&(i[h]=c[h])}else i=c;return c=i.ref,{$$typeof:a,type:d,key:l,ref:c!==void 0?c:null,props:i}}return O.Fragment=E,O.jsx=f,O.jsxs=f,O}var x={};/**
+ */var q;function ne(){if(q)return A;q=1;var o=Symbol.for("react.transitional.element"),w=Symbol.for("react.fragment");function h(p,i,l){var v=null;if(l!==void 0&&(v=""+l),i.key!==void 0&&(v=""+i.key),"key"in i){l={};for(var T in i)T!=="key"&&(l[T]=i[T])}else l=i;return i=l.ref,{$$typeof:o,type:p,key:v,ref:i!==void 0?i:null,props:l}}return A.Fragment=w,A.jsx=h,A.jsxs=h,A}var C={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var $;function ae(){return $||($=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===I?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case J:return"Profiler";case Z:return"StrictMode";case t:return"Suspense";case v:return"SuspenseList";case C:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case B:return e.displayName||"Context";case V:return(e._context.displayName||"Context")+".Consumer";case _:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case m:return r=e.displayName||null,r!==null?r:a(e.type)||"Memo";case j:r=e._payload,e=e._init;try{return a(e(r))}catch{}}return null}function E(e){return""+e}function f(e){try{E(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),E(e)}}function d(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===j)return"<...>";try{var r=a(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=P.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function l(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function h(e,r){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function w(){var e=a(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,r,n,o,T,Q){var s=n.ref;return e={$$typeof:A,type:e,key:r,props:n,_owner:o},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function X(e,r,n,o,T,Q){var s=r.children;if(s!==void 0)if(o)if(G(s)){for(o=0;o<s.length;o++)g(s[o]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(s);if(L.call(r,"key")){s=a(e);var k=Object.keys(r).filter(function(ue){return ue!=="key"});o=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",z[s+o]||(k=0<k.length?"{"+k.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var $;function ae(){return $||($=1,process.env.NODE_ENV!=="production"&&(function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===f?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case G:return"Profiler";case z:return"StrictMode";case B:return"Suspense";case Q:return"SuspenseList";case r:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case L:return"Portal";case V:return e.displayName||"Context";case J:return(e._context.displayName||"Context")+".Consumer";case Z:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case K:return n=e.displayName||null,n!==null?n:o(e.type)||"Memo";case R:n=e._payload,e=e._init;try{return o(e(n))}catch{}}return null}function w(e){return""+e}function h(e){try{w(e);var n=!1}catch{n=!0}if(n){n=console;var u=n.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),w(e)}}function p(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var n=o(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function i(){var e=d.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function v(e){if(U.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function T(e,n){function u(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function O(){var e=o(this.type);return M[e]||(M[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,n,u,s,P,t){var a=u.ref;return e={$$typeof:I,type:e,key:n,props:u,_owner:s},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:t}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function b(e,n,u,s,P,t){var a=n.children;if(a!==void 0)if(s)if(S(a)){for(s=0;s<a.length;s++)g(a[s]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(a);if(U.call(n,"key")){a=o(e);var E=Object.keys(n).filter(function(ue){return ue!=="key"});s=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",X[a+s]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,s,k,s),z[s+o]=!0)}if(s=null,n!==void 0&&(f(n),s=""+n),l(r)&&(f(r.key),s=""+r.key),"key"in r){n={};for(var K in r)K!=="key"&&(n[K]=r[K])}else n=r;return s&&h(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,s,n,c(),T,Q)}function g(e){F(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===j&&(e._payload.status==="fulfilled"?F(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function F(e){return typeof e=="object"&&e!==null&&e.$$typeof===A}var R=u,A=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),Z=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),B=Symbol.for("react.context"),_=Symbol.for("react.forward_ref"),t=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),m=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),I=Symbol.for("react.client.reference"),P=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,G=Array.isArray,y=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var N,Y={},M=R.react_stack_bottom_frame.bind(R,i)(),W=y(d(i)),z={};x.Fragment=S,x.jsx=function(e,r,n){var o=1e4>P.recentlyCreatedOwnerStacks++;return X(e,r,n,!1,o?Error("react-stack-top-frame"):M,o?y(d(e)):W)},x.jsxs=function(e,r,n){var o=1e4>P.recentlyCreatedOwnerStacks++;return X(e,r,n,!0,o?Error("react-stack-top-frame"):M,o?y(d(e)):W)}})()),x}var ee;function oe(){return ee||(ee=1,process.env.NODE_ENV==="production"?D.exports=ne():D.exports=ae()),D.exports}var U=oe();const re=u.forwardRef(({transform:a={translateX:0,translateY:0,scale:1,rotate:0},offset:E={left:0,top:0,right:0,bottom:0},minScale:f=.5,maxScale:d=10,clampBounds:c=!1,rotation:i=!0,mouse:l=!0,wheel:h=!0,touch:w=!0,gesture:b=!0,children:X,matrix:g,style:F,onTransformChange:R,onInit:A,onClick:H,onMouseDown:S,onTouchStart:Z,onMouseup:J,onTouchend:V},B)=>{const _=u.useRef(null),t=u.useRef(null),v=u.useRef(!1),[m,j]=u.useState({composePoint:(r,n)=>[0,0],canvasWidth:0,canvasHeight:0}),C=u.useRef((r,n)=>t.current?t.current.normalizeClientCoords(r,n):[0,0]);u.useImperativeHandle(B,()=>({applyTransform:(r,n,o,T)=>{t.current&&(T!==void 0&&(t.current.rotate=T),t.current.applyTransform(r,n,o))},composePoint:(r,n)=>m.composePoint?m.composePoint(r,n):[0,0],normalizeClientCoords:(r,n)=>C.current?C.current(r,n):[0,0],rotateCanvas:(r,n,o)=>{t.current&&t.current.rotateCanvas(r,n,o)},zoompinchEngine:t.current,canvasWidth:m.canvasWidth,canvasHeight:m.canvasHeight}));function I(){var r,n;t.current&&j({composePoint:t.current.composePoint.bind(t.current),canvasWidth:((r=t.current.canvasBounds)==null?void 0:r.width)??0,canvasHeight:((n=t.current.canvasBounds)==null?void 0:n.height)??0})}u.useEffect(()=>{!_.current||t.current||(t.current=new te.Zoompinch(_.current,E,a.translateX,a.translateY,a.scale,a.rotate,f,d,c,i),console.log("Zoompinch initialisiert mit Props!"),t.current.addEventListener("update",()=>{if(!t.current)return;const r={translateX:t.current.translateX,translateY:t.current.translateY,scale:t.current.scale,rotate:t.current.rotate};R&&(r.translateX!==a.translateX||r.translateY!==a.translateY||r.scale!==a.scale||r.rotate!==a.rotate)&&R(r),I()}),t.current.addEventListener("load",()=>{t.current&&(v.current=!0,A&&A(),I())}))},[]),u.useEffect(()=>{!t.current||!v.current||(t.current.translateX!==a.translateX||t.current.translateY!==a.translateY||t.current.scale!==a.scale||t.current.rotate!==a.rotate)&&(t.current.translateX=a.translateX,t.current.translateY=a.translateY,t.current.scale=a.scale,t.current.rotate=a.rotate,t.current.update())},[a]),u.useEffect(()=>{!t.current||!v.current||(t.current.offset=E,t.current.update())},[E]),u.useEffect(()=>{!t.current||!v.current||(t.current.minScale=f,t.current.update())},[f]),u.useEffect(()=>{!t.current||!v.current||(t.current.maxScale=d,t.current.update())},[d]),u.useEffect(()=>{!t.current||!v.current||(t.current.clampBounds=c,t.current.setTranslateFromUserGesture(t.current.translateX,t.current.translateY),t.current.update())},[c]),u.useEffect(()=>{!t.current||!v.current||(t.current.rotation=i,t.current.update())},[i]);const P=r=>{!t.current||!h||(r.preventDefault(),t.current.handleWheel(r))},L=r=>{!t.current||!b||t.current.handleGesturestart(r)},G=r=>{!t.current||!b||t.current.handleGesturechange(r)},y=r=>{!t.current||!b||t.current.handleGestureend(r)},N=r=>{!t.current||!l||t.current.handleMousedown(r)},Y=r=>{!t.current||!l||t.current.handleMousemove(r)},M=r=>{!t.current||!l||t.current.handleMouseup(r)},W=r=>{!t.current||!w||t.current.handleTouchstart(r)},z=r=>{!t.current||!w||t.current.handleTouchmove(r)},e=r=>{!t.current||!w||t.current.handleTouchend(r)};return u.useEffect(()=>{if(!_.current)return;const r=_.current;return window.addEventListener("gesturechange",G),window.addEventListener("gestureend",y),window.addEventListener("mousemove",Y),window.addEventListener("mouseup",M),window.addEventListener("touchmove",z),window.addEventListener("touchend",e),r.addEventListener("wheel",P,{passive:!1}),r.addEventListener("gesturestart",L,{passive:!1}),r.addEventListener("mousedown",N,{passive:!1}),r.addEventListener("touchstart",W,{passive:!1}),()=>{window.removeEventListener("gesturechange",G),window.removeEventListener("gestureend",y),window.removeEventListener("mousemove",Y),window.removeEventListener("mouseup",M),window.removeEventListener("touchmove",z),window.removeEventListener("touchend",e),r.removeEventListener("wheel",P),r.removeEventListener("gesturestart",L),r.removeEventListener("mousedown",N),r.removeEventListener("touchstart",W)}},[l,w,b,h]),U.jsxs("div",{ref:_,className:"zoompinch",style:F,onClick:H,onMouseDown:S,onTouchStart:Z,onMouseUp:J,onTouchEnd:V,children:[U.jsx("div",{className:"canvas",children:X}),U.jsx("div",{className:"matrix",children:typeof g=="function"?g({composePoint:m.composePoint,normalizeClientCoords:C.current,canvasWidth:m.canvasWidth,canvasHeight:m.canvasHeight}):g})]})});re.displayName="Zoompinch",p.Zoompinch=re,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,s,a,E,a),X[a+s]=!0)}if(a=null,u!==void 0&&(h(u),a=""+u),v(n)&&(h(n.key),a=""+n.key),"key"in n){u={};for(var j in n)j!=="key"&&(u[j]=n[j])}else u=n;return a&&T(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,a,u,i(),P,t)}function g(e){y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===R&&(e._payload.status==="fulfilled"?y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function y(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var m=c,I=Symbol.for("react.transitional.element"),L=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),z=Symbol.for("react.strict_mode"),G=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),V=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),K=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),r=Symbol.for("react.activity"),f=Symbol.for("react.client.reference"),d=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,S=Array.isArray,x=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var Y,M={},W=m.react_stack_bottom_frame.bind(m,l)(),D=x(p(l)),X={};C.Fragment=N,C.jsx=function(e,n,u){var s=1e4>d.recentlyCreatedOwnerStacks++;return b(e,n,u,!1,s?Error("react-stack-top-frame"):W,s?x(p(e)):D)},C.jsxs=function(e,n,u){var s=1e4>d.recentlyCreatedOwnerStacks++;return b(e,n,u,!0,s?Error("react-stack-top-frame"):W,s?x(p(e)):D)}})()),C}var ee;function oe(){return ee||(ee=1,process.env.NODE_ENV==="production"?F.exports=ne():F.exports=ae()),F.exports}var H=oe();const re=c.forwardRef(({transform:o={translateX:0,translateY:0,scale:1,rotate:0},offset:w={left:0,top:0,right:0,bottom:0},minScale:h=.5,maxScale:p=10,clampBounds:i=!1,rotation:l=!0,mouse:v=!0,wheel:T=!0,touch:O=!0,gesture:k=!0,zoomSpeed:b,translateSpeed:g,zoomSpeedAppleTrackpad:y,translateSpeedAppleTrackpad:m,children:I,matrix:L,style:N,onTransformChange:z,onInit:G,onClick:J,onMouseDown:V,onTouchStart:Z,onMouseup:B,onTouchend:Q},K)=>{const R=c.useRef(null),r=c.useRef(null),f=c.useRef(!1),[d,U]=c.useState({composePoint:(t,a)=>[0,0],canvasWidth:0,canvasHeight:0}),S=c.useRef((t,a)=>r.current?r.current.normalizeClientCoords(t,a):[0,0]);c.useImperativeHandle(K,()=>({applyTransform:(t,a,E,j)=>{r.current&&(j!==void 0&&(r.current.rotate=j),r.current.applyTransform(t,a,E))},composePoint:(t,a)=>d.composePoint?d.composePoint(t,a):[0,0],normalizeClientCoords:(t,a)=>S.current?S.current(t,a):[0,0],rotateCanvas:(t,a,E)=>{r.current&&r.current.rotateCanvas(t,a,E)},zoompinchEngine:r.current,canvasWidth:d.canvasWidth,canvasHeight:d.canvasHeight}));function x(){var t,a;r.current&&U({composePoint:r.current.composePoint.bind(r.current),canvasWidth:((t=r.current.canvasBounds)==null?void 0:t.width)??0,canvasHeight:((a=r.current.canvasBounds)==null?void 0:a.height)??0})}c.useEffect(()=>{!R.current||r.current||(r.current=new te.Zoompinch(R.current,w,o.translateX,o.translateY,o.scale,o.rotate,h,p,i,l),b!==void 0&&(r.current.zoomSpeed=b),g!==void 0&&(r.current.translateSpeed=g),y!==void 0&&(r.current.zoomSpeedAppleTrackpad=y),m!==void 0&&(r.current.translateSpeedAppleTrackpad=m),r.current.addEventListener("update",()=>{if(!r.current)return;const t={translateX:r.current.translateX,translateY:r.current.translateY,scale:r.current.scale,rotate:r.current.rotate};z&&(t.translateX!==o.translateX||t.translateY!==o.translateY||t.scale!==o.scale||t.rotate!==o.rotate)&&z(t),x()}),r.current.addEventListener("load",()=>{r.current&&(f.current=!0,G&&G(),x())}))},[]),c.useEffect(()=>{!r.current||!f.current||(r.current.translateX!==o.translateX||r.current.translateY!==o.translateY||r.current.scale!==o.scale||r.current.rotate!==o.rotate)&&(r.current.translateX=o.translateX,r.current.translateY=o.translateY,r.current.scale=o.scale,r.current.rotate=o.rotate,r.current.update())},[o]),c.useEffect(()=>{!r.current||!f.current||(r.current.offset=w,r.current.update())},[w]),c.useEffect(()=>{!r.current||!f.current||(r.current.minScale=h,r.current.update())},[h]),c.useEffect(()=>{!r.current||!f.current||(r.current.maxScale=p,r.current.update())},[p]),c.useEffect(()=>{!r.current||!f.current||(r.current.clampBounds=i,r.current.setTranslateFromUserGesture(r.current.translateX,r.current.translateY),r.current.update())},[i]),c.useEffect(()=>{!r.current||!f.current||(r.current.rotation=l,r.current.update())},[l]),c.useEffect(()=>{!r.current||!f.current||b!==void 0&&(r.current.zoomSpeed=b)},[b]),c.useEffect(()=>{!r.current||!f.current||g!==void 0&&(r.current.translateSpeed=g)},[g]),c.useEffect(()=>{!r.current||!f.current||y!==void 0&&(r.current.zoomSpeedAppleTrackpad=y)},[y]),c.useEffect(()=>{!r.current||!f.current||m!==void 0&&(r.current.translateSpeedAppleTrackpad=m)},[m]);const Y=t=>{!r.current||!T||(t.preventDefault(),r.current.handleWheel(t))},M=t=>{!r.current||!k||r.current.handleGesturestart(t)},W=t=>{!r.current||!k||r.current.handleGesturechange(t)},D=t=>{!r.current||!k||r.current.handleGestureend(t)},X=t=>{!r.current||!v||r.current.handleMousedown(t)},e=t=>{!r.current||!v||r.current.handleMousemove(t)},n=t=>{!r.current||!v||r.current.handleMouseup(t)},u=t=>{!r.current||!O||r.current.handleTouchstart(t)},s=t=>{!r.current||!O||r.current.handleTouchmove(t)},P=t=>{!r.current||!O||r.current.handleTouchend(t)};return c.useEffect(()=>{if(!R.current)return;const t=R.current;return window.addEventListener("gesturechange",W),window.addEventListener("gestureend",D),window.addEventListener("mousemove",e),window.addEventListener("mouseup",n),window.addEventListener("touchmove",s),window.addEventListener("touchend",P),t.addEventListener("wheel",Y,{passive:!1}),t.addEventListener("gesturestart",M,{passive:!1}),t.addEventListener("mousedown",X,{passive:!1}),t.addEventListener("touchstart",u,{passive:!1}),()=>{window.removeEventListener("gesturechange",W),window.removeEventListener("gestureend",D),window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",n),window.removeEventListener("touchmove",s),window.removeEventListener("touchend",P),t.removeEventListener("wheel",Y),t.removeEventListener("gesturestart",M),t.removeEventListener("mousedown",X),t.removeEventListener("touchstart",u)}},[v,O,k,T]),H.jsxs("div",{ref:R,className:"zoompinch",style:N,onClick:J,onMouseDown:V,onTouchStart:Z,onMouseUp:B,onTouchEnd:Q,children:[H.jsx("div",{className:"canvas",children:I}),H.jsx("div",{className:"matrix",children:typeof L=="function"?L({composePoint:d.composePoint,normalizeClientCoords:S.current,canvasWidth:d.canvasWidth,canvasHeight:d.canvasHeight}):L})]})});re.displayName="Zoompinch",_.Zoompinch=re,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoompinch/react",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "React components for Zoompinch",
   "main": "./dist/zoompinch-react.umd.js",
   "module": "./dist/zoompinch-react.es.js",
@@ -57,6 +57,6 @@
     "vite": "^6.4.1"
   },
   "dependencies": {
-    "@zoompinch/core": "^0.0.27"
+    "@zoompinch/core": "^0.0.30"
   }
 }