@zoompinch/elements 0.0.24 → 0.0.26

package/README.md

@@ -359,6 +359,7 @@ MIT
 ## Related
 
 - [@zoompinch/core](https://www.npmjs.com/package/@zoompinch/core) - Core engine
-- [@zoompinch/vue](https://www.npmjs.com/package/@zoompinch/vue) - Vue 3 bindings
+- [@zoompinch/vue](https://www.npmjs.com/package/@zoompinch/vue) - Vue 3
+- [@zoompinch/react](https://www.npmjs.com/package/@zoompinch/react) - React
 
 Built with ❤️ by Elya Maurice Conrad

package/dist/zoompinch-elements.es.js

@@ -1,238 +1,11 @@
-var N = Object.defineProperty;
-var x = (r, t, e) => t in r ? N(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var T = (r, t, e) => x(r, typeof t != "symbol" ? t + "" : t, e);
-var y = Object.defineProperty, A = (r, t, e) => t in r ? y(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, v = (r, t, e) => A(r, typeof t != "symbol" ? t + "" : t, e);
-function z(r) {
-  return r * Math.PI / 180;
-}
-function Y(r, t, e) {
-  return Math.min(Math.max(r, t), e);
-}
-function w(r, t, e) {
-  const [s, n] = r, [a, i] = t, h = Math.cos(e) * (s - a) - Math.sin(e) * (n - i) + a, c = Math.sin(e) * (s - a) + Math.cos(e) * (n - i) + i;
-  return [h, c];
-}
-function S(r, t) {
-  const e = Math.pow(10, t);
-  return Math.round(r * e) / e;
-}
-function F(r) {
-  var t = !1;
-  return r.wheelDeltaY ? r.wheelDeltaY === r.deltaY * -3 && (t = !0) : r.deltaMode === 0 && (t = !0), t;
-}
-function X(r, t) {
-  const e = t.find((s) => r % s === 0);
-  return e ? r / e : 1;
-}
-function I(r, t, e, s, n) {
-  let a = r.left - t, i = r.top - e;
-  const h = Math.cos(-n), c = Math.sin(-n);
-  let l = a * h - i * c, u = a * c + i * h;
-  const d = r.width / s, g = r.height / s;
-  return l /= s, u /= s, { x: S(l, 4), y: S(u, 4), width: S(d, 4), height: S(g, 4) };
-}
-class W extends EventTarget {
-  constructor(t, e, s, n, a, i, h = 0.1, c = 10, l = !1, u = !0) {
-    super(), v(this, "wrapperBounds"), v(this, "canvasBounds"), v(this, "gestureStartRotate", 0), v(this, "dragStart", null), v(this, "dragStartFrozenX", null), v(this, "dragStartFrozenY", null), v(this, "touchStarts", null), v(this, "touchStartTranslateX", 0), v(this, "touchStartTranslateY", 0), this.element = t, this.offset = e, this.translateX = s, this.translateY = n, this.scale = a, this.rotate = i, this.minScale = h, this.maxScale = c, this.clampBounds = l, this.rotation = u;
-    const d = new ResizeObserver(() => {
-      const { x: o, y: p, width: m, height: f } = this.element.getBoundingClientRect();
-      this.wrapperBounds = { x: o, y: p, width: m, height: f }, this.update();
-    }), g = new ResizeObserver(() => {
-      const { x: o, y: p, width: m, height: f } = I(this.canvasElement.getBoundingClientRect(), this.renderingTranslateX, this.renderingTranslateY, this.renderinScale, this.renderingRotate);
-      this.canvasBounds = { x: o, y: p, width: m, height: f }, this.update();
-    });
-    requestAnimationFrame(() => {
-      this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update(), this.dispatchEvent(new Event("init"));
-    }), g.observe(this.canvasElement), d.observe(this.element);
-  }
-  get canvasElement() {
-    return this.element.querySelector(".canvas");
-  }
-  get wrapperInnerX() {
-    return this.wrapperBounds.x + this.offset.left;
-  }
-  get wrapperInnerY() {
-    return this.wrapperBounds.y + this.offset.top;
-  }
-  get wrapperInnerWidth() {
-    return this.wrapperBounds.width - this.offset.left - this.offset.right;
-  }
-  get wrapperInnerHeight() {
-    return this.wrapperBounds.height - this.offset.top - this.offset.bottom;
-  }
-  // Calculate the inner ratio
-  get wrapperInnerRatio() {
-    return this.wrapperInnerWidth / this.wrapperInnerHeight;
-  }
-  get canvasNaturalRatio() {
-    return this.canvasBounds.width / this.canvasBounds.height;
-  }
-  // Get natural scale
-  get naturalScale() {
-    return this.canvasNaturalRatio >= this.wrapperInnerRatio ? this.wrapperInnerWidth / this.canvasBounds.width : this.wrapperInnerHeight / this.canvasBounds.height;
-  }
-  // The clamping is an explicit user intention
-  // The reason is that we do not want side effects when toggling the clamp
-  setTranslateFromUserGesture(t, e) {
-    if (this.clampBounds) {
-      const s = this.clampTranslate({ translateX: t, translateY: e, scale: this.scale, rotate: this.rotate });
-      this.translateX = s.translateX, this.translateY = s.translateY, this.rotate = 0;
-    } else
-      this.translateX = t, this.translateY = e;
-  }
-  handleGesturestart(t) {
-    this.gestureStartRotate = this.rotate;
-  }
-  handleGesturechange(t) {
-    const { clientX: e, clientY: s } = t, n = t.rotation;
-    if (n === 0 || !this.rotation)
-      return;
-    const a = this.normalizeClientCoords(e, s);
-    this.rotateCanvas(a[0], a[1], this.gestureStartRotate + z(n));
-  }
-  handleGestureend(t) {
-  }
-  handleMousedown(t) {
-    t.preventDefault(), this.dragStart = [t.clientX, t.clientY], this.dragStartFrozenX = this.translateX, this.dragStartFrozenY = this.translateY;
-  }
-  handleMouseup(t) {
-    t.preventDefault(), this.dragStart = null, this.dragStartFrozenX = null, this.dragStartFrozenY = null;
-  }
-  handleMousemove(t) {
-    if (t.preventDefault(), this.dragStart && this.dragStartFrozenX !== null && this.dragStartFrozenY !== null) {
-      const e = t.clientX - this.dragStart[0], s = t.clientY - this.dragStart[1], n = this.dragStartFrozenX - -e, a = this.dragStartFrozenY - -s;
-      this.setTranslateFromUserGesture(n, a), this.update();
-    }
-  }
-  handleWheel(t) {
-    let { deltaX: e, deltaY: s, ctrlKey: n } = t;
-    const a = [120, 100], i = 2;
-    F(t) || ((Math.abs(e) === 120 || Math.abs(e) === 200) && (e = e / (100 / i * X(e, a)) * Math.sign(e)), (Math.abs(s) === 120 || Math.abs(s) === 200) && (s = s / (100 / i * X(s, a)) * Math.sign(s)));
-    const h = this.scale;
-    if (n) {
-      const c = -s / 100 * h, l = Y(h + c, this.minScale, this.maxScale), u = this.relativeWrapperCoordinatesFromClientCoords(t.clientX, t.clientY), [d, g] = this.calcProjectionTranslate(l, u, this.normalizeMatrixCoordinates(t.clientX, t.clientY));
-      this.setTranslateFromUserGesture(d, g), this.scale = l;
-    } else
-      this.setTranslateFromUserGesture(this.translateX - e, this.translateY - s);
-    this.update(), t.preventDefault();
-  }
-  freezeTouches(t) {
-    return Array.from(t).map((e) => {
-      const s = this.clientCoordsToWrapperCoords(e.clientX, e.clientY);
-      return {
-        client: [e.clientX, e.clientY],
-        canvasRel: this.getCanvasCoordsRel(s[0], s[1])
-      };
-    });
-  }
-  handleTouchstart(t) {
-    this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY, t.preventDefault();
-  }
-  handleTouchmove(t) {
-    t.preventDefault();
-    const e = Array.from(t.touches).map((s) => this.clientCoordsToWrapperCoords(s.clientX, s.clientY));
-    if (this.touchStarts) {
-      if (e.length >= 2 && this.touchStarts.length >= 2) {
-        const s = [this.touchStarts[0].canvasRel[0] * this.canvasBounds.width, this.touchStarts[0].canvasRel[1] * this.canvasBounds.height], n = [this.touchStarts[1].canvasRel[0] * this.canvasBounds.width, this.touchStarts[1].canvasRel[1] * this.canvasBounds.height], a = Math.sqrt(Math.pow(s[0] - n[0], 2) + Math.pow(s[1] - n[1], 2)), i = Math.sqrt(Math.pow(e[0][0] - e[1][0], 2) + Math.pow(e[0][1] - e[1][1], 2)) / this.naturalScale, h = Y(i / a, this.minScale, this.maxScale), c = [e[0][0] / this.wrapperInnerWidth, e[0][1] / this.wrapperInnerHeight], l = this.touchStarts[0].canvasRel, [u, d] = this.calcProjectionTranslate(h, c, l, 0);
-        if (this.rotation) {
-          let g = 0, o = 0, p = 0;
-          const m = Math.atan2(n[1] - s[1], n[0] - s[0]);
-          p = Math.atan2(e[1][1] - e[0][1], e[1][0] - e[0][0]) - m;
-          const f = (R, E) => [this.offset.left + this.canvasBounds.width * R * this.naturalScale * h + u, this.offset.top + this.canvasBounds.height * E * this.naturalScale * h + d], b = f(0, 0), C = f(this.touchStarts[0].canvasRel[0], this.touchStarts[0].canvasRel[1]), B = w(b, C, p);
-          g = B[0] - b[0], o = B[1] - b[1], this.scale = h, this.rotate = p, this.setTranslateFromUserGesture(u + g, d + o);
-        } else
-          this.scale = h, this.setTranslateFromUserGesture(u, d);
-      } else {
-        const s = t.touches[0].clientX - this.touchStarts[0].client[0], n = t.touches[0].clientY - this.touchStarts[0].client[1], a = this.touchStartTranslateX + s, i = this.touchStartTranslateY + n;
-        this.setTranslateFromUserGesture(a, i);
-      }
-      this.update();
-    }
-  }
-  handleTouchend(t) {
-    t.touches.length === 0 ? this.touchStarts = null : (this.touchStarts = this.freezeTouches(t.touches), this.touchStartTranslateX = this.translateX, this.touchStartTranslateY = this.translateY);
-  }
-  calcProjectionTranslate(t, e, s, n) {
-    const a = this.canvasBounds.width * this.naturalScale, i = this.canvasBounds.height * this.naturalScale, h = s[0] * a * t, c = s[1] * i * t, l = w([h, c], [0, 0], n ?? this.rotate), u = e[0] * this.wrapperInnerWidth, d = e[1] * this.wrapperInnerHeight, g = u - l[0], o = d - l[1];
-    return [g, o];
-  }
-  applyTransform(t, e, s) {
-    const n = this.calcProjectionTranslate(t, e, s, 0);
-    this.scale = t, this.setTranslateFromUserGesture(n[0], n[1]), this.update();
-  }
-  composeRelPoint(t, e, s, n, a, i) {
-    s = s ?? this.scale, n = n ?? this.translateX, a = a ?? this.translateY, i = i ?? this.rotate;
-    const h = [this.offset.left, this.offset.top], c = [this.offset.left + this.canvasBounds.width * (s * this.naturalScale) * t, this.offset.top + this.canvasBounds.height * (s * this.naturalScale) * e], l = w(c, h, i);
-    return [l[0] + n, l[1] + a];
-  }
-  composePoint(t, e) {
-    const s = t / this.canvasBounds.width, n = e / this.canvasBounds.height;
-    return this.composeRelPoint(s, n);
-  }
-  getAnchorOffset(t, e, s, n, a = [0.5, 0.5]) {
-    const i = this.calcProjectionTranslate(t, a, a, 0), h = [
-      this.offset.left + i[0] + this.canvasBounds.width * (t * this.naturalScale) * a[0],
-      this.offset.top + i[1] + this.canvasBounds.height * (t * this.naturalScale) * a[1]
-    ], c = this.composeRelPoint(a[0], a[1], t, e, s, n), l = c[0] - h[0], u = c[1] - h[1];
-    return [l, u];
-  }
-  // Converts absolute inner wrapper coordinates to relative canvas coordinates (0-1, 0-1)
-  getCanvasCoordsRel(t, e) {
-    const s = [0, 0], n = [t - this.translateX, e - this.translateY], a = w(n, s, -this.rotate), i = [a[0] / this.renderinScale, a[1] / this.renderinScale];
-    return [i[0] / this.canvasBounds.width, i[1] / this.canvasBounds.height];
-  }
-  // Converts absolute client to coordinates to absolute inner-wrapper coorinates
-  clientCoordsToWrapperCoords(t, e) {
-    return [t - this.wrapperInnerX, e - this.wrapperInnerY];
-  }
-  // Converts absolute client coordinates to relative wrapper coordinates (0-1, 0-1)
-  relativeWrapperCoordinatesFromClientCoords(t, e) {
-    const [s, n] = this.clientCoordsToWrapperCoords(t, e);
-    return [s / this.wrapperInnerWidth, n / this.wrapperInnerHeight];
-  }
-  // Converts client coordinates to relative canvas coordinates (0-1, 0-1)
-  normalizeMatrixCoordinates(t, e) {
-    const s = this.clientCoordsToWrapperCoords(t, e);
-    return this.getCanvasCoordsRel(s[0], s[1]);
-  }
-  // Converts client coordinates to absolute canvas coordinates
-  normalizeClientCoords(t, e) {
-    const [s, n] = this.normalizeMatrixCoordinates(t, e);
-    return [s * this.canvasBounds.width, n * this.canvasBounds.height];
-  }
-  rotateCanvas(t, e, s) {
-    const n = t / this.canvasBounds.width, a = e / this.canvasBounds.height, i = this.composeRelPoint(n, a, this.scale, 0, 0, s), h = this.composeRelPoint(n, a);
-    this.setTranslateFromUserGesture(h[0] - i[0], h[1] - i[1]), this.rotate = s, this.update();
-  }
-  get renderinScale() {
-    return this.naturalScale * this.scale;
-  }
-  get renderingTranslateX() {
-    return this.offset.left + this.translateX;
-  }
-  get renderingTranslateY() {
-    return this.offset.top + this.translateY;
-  }
-  get renderingRotate() {
-    return this.rotate;
-  }
-  clampTranslate(t, e = [0.5, 0.5]) {
-    const s = this.canvasBounds.width * this.naturalScale * t.scale, n = this.canvasBounds.height * this.naturalScale * t.scale, a = s - this.wrapperInnerWidth, i = n - this.wrapperInnerHeight, h = a > 0 ? -a : 0, c = Math.min(0, Math.max(t.translateX, h)), l = i > 0 ? -i : 0, u = Math.min(0, Math.max(t.translateY, l)), d = -Math.min(0, a) * e[0], g = -Math.min(0, i) * e[1];
-    return {
-      translateX: c + d,
-      translateY: u + g
-    };
-  }
-  update() {
-    this.canvasElement.style.transformOrigin = "top left", this.canvasElement.style.transform = `translateX(${this.renderingTranslateX}px) translateY(${this.renderingTranslateY}px) scale(${this.renderinScale}) rotate(${this.renderingRotate}rad)`, this.dispatchEvent(new Event("update"));
-  }
-  destroy() {
-  }
-}
-class M extends HTMLElement {
+var v = Object.defineProperty;
+var w = (a, i, e) => i in a ? v(a, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[i] = e;
+var p = (a, i, e) => w(a, typeof i != "symbol" ? i + "" : i, e);
+import { Zoompinch as E } from "@zoompinch/core";
+class N extends HTMLElement {
   constructor() {
     super();
-    T(this, "engine");
+    p(this, "engine");
     this.attachShadow({ mode: "open" });
   }
   get contentEl() {
@@ -277,25 +50,25 @@ class M extends HTMLElement {
          </div>
       </div>
     `;
-    const e = Number(this.getAttribute("translate-x") || "0"), s = Number(this.getAttribute("translate-y") || "0"), n = Number(this.getAttribute("scale") || "1"), a = Number(this.getAttribute("rotate") || "0"), i = Number(this.getAttribute("min-scale")), h = Number(this.getAttribute("max-scale")), c = Number(this.getAttribute("offset-top")), l = Number(this.getAttribute("offset-right")), u = Number(this.getAttribute("offset-bottom")), d = Number(this.getAttribute("offset-left")), g = this.getAttribute("clamp-bounds") === "true";
-    this.getAttribute("rotation"), this.engine = new W(
+    const e = Number(this.getAttribute("translate-x") || "0"), s = Number(this.getAttribute("translate-y") || "0"), n = Number(this.getAttribute("scale") || "1"), u = Number(this.getAttribute("rotate") || "0"), h = Number(this.getAttribute("min-scale")), c = Number(this.getAttribute("max-scale")), l = Number(this.getAttribute("offset-top")), o = Number(this.getAttribute("offset-right")), r = Number(this.getAttribute("offset-bottom")), f = Number(this.getAttribute("offset-left")), b = this.getAttribute("clamp-bounds") === "true";
+    this.getAttribute("rotation"), this.engine = new E(
       this.contentEl,
       {
-        top: isNaN(c) ? 100 : c,
-        left: isNaN(d) ? 0 : d,
-        right: isNaN(l) ? 0 : l,
-        bottom: isNaN(u) ? 0 : u
+        top: isNaN(l) ? 100 : l,
+        left: isNaN(f) ? 0 : f,
+        right: isNaN(o) ? 0 : o,
+        bottom: isNaN(r) ? 0 : r
       },
       e,
       s,
       n,
-      a,
-      isNaN(i) ? void 0 : i,
+      u,
       isNaN(h) ? void 0 : h,
-      g
-    ), this.contentEl.addEventListener("wheel", (o) => this.engine.handleWheel(o)), this.contentEl.addEventListener("gesturestart", (o) => this.engine.handleGesturestart(o)), window.addEventListener("gesturechange", (o) => this.engine.handleGesturechange(o)), window.addEventListener("gestureend", (o) => this.engine.handleGestureend(o)), this.contentEl.addEventListener("mousedown", (o) => this.engine.handleMousedown(o)), window.addEventListener("mousemove", (o) => this.engine.handleMousemove(o)), window.addEventListener("mouseup", (o) => this.engine.handleMouseup(o)), this.contentEl.addEventListener("touchstart", (o) => this.engine.handleTouchstart(o)), window.addEventListener("touchmove", (o) => this.engine.handleTouchmove(o)), window.addEventListener("touchend", (o) => this.engine.handleTouchend(o)), this.engine.addEventListener("update", () => {
-      const o = this.engine.translateX.toString(), p = this.engine.translateY.toString(), m = this.engine.scale.toString(), f = this.engine.rotate.toString();
-      this.getAttribute("translate-x") !== o && this.setAttribute("translate-x", o), this.getAttribute("translate-y") !== p && this.setAttribute("translate-y", p), this.getAttribute("scale") !== m && this.setAttribute("scale", m), this.getAttribute("rotate") !== f && this.setAttribute("rotate", f), this.dispatchEvent(new Event("update"));
+      isNaN(c) ? void 0 : c,
+      b
+    ), this.contentEl.addEventListener("wheel", (t) => this.engine.handleWheel(t)), this.contentEl.addEventListener("gesturestart", (t) => this.engine.handleGesturestart(t)), window.addEventListener("gesturechange", (t) => this.engine.handleGesturechange(t)), window.addEventListener("gestureend", (t) => this.engine.handleGestureend(t)), this.contentEl.addEventListener("mousedown", (t) => this.engine.handleMousedown(t)), window.addEventListener("mousemove", (t) => this.engine.handleMousemove(t)), window.addEventListener("mouseup", (t) => this.engine.handleMouseup(t)), this.contentEl.addEventListener("touchstart", (t) => this.engine.handleTouchstart(t)), window.addEventListener("touchmove", (t) => this.engine.handleTouchmove(t)), window.addEventListener("touchend", (t) => this.engine.handleTouchend(t)), this.engine.addEventListener("update", () => {
+      const t = this.engine.translateX.toString(), m = this.engine.translateY.toString(), g = this.engine.scale.toString(), d = this.engine.rotate.toString();
+      this.getAttribute("translate-x") !== t && this.setAttribute("translate-x", t), this.getAttribute("translate-y") !== m && this.setAttribute("translate-y", m), this.getAttribute("scale") !== g && this.setAttribute("scale", g), this.getAttribute("rotate") !== d && this.setAttribute("rotate", d), this.dispatchEvent(new Event("update"));
     }), this.engine.addEventListener("init", () => {
       this.dispatchEvent(new Event("init"));
     });
@@ -307,48 +80,48 @@ class M extends HTMLElement {
     if (this.engine)
       switch (e) {
         case "translate-x":
-          const a = Number(n);
-          this.engine.translateX !== a && (this.engine.translateX = a, this.engine.update());
+          const u = Number(n);
+          this.engine.translateX !== u && (this.engine.translateX = u, this.engine.update());
           break;
         case "translate-y":
-          const i = Number(n);
-          this.engine.translateY !== i && (this.engine.translateY = i, this.engine.update());
+          const h = Number(n);
+          this.engine.translateY !== h && (this.engine.translateY = h, this.engine.update());
           break;
         case "scale":
-          const h = Number(n);
-          this.engine.scale !== h && (this.engine.scale = h, this.engine.update());
+          const c = Number(n);
+          this.engine.scale !== c && (this.engine.scale = c, this.engine.update());
           break;
         case "rotate":
-          const c = Number(n);
-          this.engine.rotate !== c && (this.engine.rotate = c, this.engine.update());
+          const l = Number(n);
+          this.engine.rotate !== l && (this.engine.rotate = l, this.engine.update());
           break;
         case "min-scale":
-          const l = Number(n);
-          !isNaN(l) && this.engine.minScale !== l && (this.engine.minScale = l, this.engine.update());
+          const o = Number(n);
+          !isNaN(o) && this.engine.minScale !== o && (this.engine.minScale = o, this.engine.update());
           break;
         case "max-scale":
-          const u = Number(n);
-          !isNaN(u) && this.engine.maxScale !== u && (this.engine.maxScale = u, this.engine.update());
+          const r = Number(n);
+          !isNaN(r) && this.engine.maxScale !== r && (this.engine.maxScale = r, this.engine.update());
           break;
         case "offset-top":
         case "offset-right":
         case "offset-bottom":
         case "offset-left":
-          const d = Number(this.getAttribute("offset-top") || "0"), g = Number(this.getAttribute("offset-right") || "0"), o = Number(this.getAttribute("offset-bottom") || "0"), p = Number(this.getAttribute("offset-left") || "0");
+          const f = Number(this.getAttribute("offset-top") || "0"), b = Number(this.getAttribute("offset-right") || "0"), t = Number(this.getAttribute("offset-bottom") || "0"), m = Number(this.getAttribute("offset-left") || "0");
           this.engine.offset = {
-            top: d,
-            right: g,
-            bottom: o,
-            left: p
+            top: f,
+            right: b,
+            bottom: t,
+            left: m
           }, this.engine.update();
           break;
         case "clamp-bounds":
-          const m = n === "true";
-          this.engine.clampBounds !== m && (this.engine.clampBounds = m, this.engine.setTranslateFromUserGesture(this.engine.translateX, this.engine.translateY), this.engine.update());
+          const g = n === "true";
+          this.engine.clampBounds !== g && (this.engine.clampBounds = g, this.engine.setTranslateFromUserGesture(this.engine.translateX, this.engine.translateY), this.engine.update());
           break;
         case "rotation":
-          const f = n === "true";
-          this.engine.rotation !== f && (this.engine.rotation = f, this.engine.update());
+          const d = n === "true";
+          this.engine.rotation !== d && (this.engine.rotation = d, this.engine.update());
       }
   }
   get canvasWidth() {
@@ -367,5 +140,5 @@ class M extends HTMLElement {
     return this.engine.composePoint(e, s);
   }
 }
-T(M, "observedAttributes", ["translate-x", "translate-y", "scale", "rotate", "min-scale", "max-scale", "offset-top", "offset-right", "offset-bottom", "offset-left", "clamp-bounds", "rotation"]);
-customElements.get("zoom-pinch") || customElements.define("zoom-pinch", M);
+p(N, "observedAttributes", ["translate-x", "translate-y", "scale", "rotate", "min-scale", "max-scale", "offset-top", "offset-right", "offset-bottom", "offset-left", "clamp-bounds", "rotation"]);
+customElements.get("zoom-pinch") || customElements.define("zoom-pinch", N);

package/dist/zoompinch-elements.umd.js

@@ -1,4 +1,4 @@
-(function(w){typeof define=="function"&&define.amd?define(w):w()})((function(){"use strict";var I=Object.defineProperty;var W=(w,S,p)=>S in w?I(w,S,{enumerable:!0,configurable:!0,writable:!0,value:p}):w[S]=p;var Y=(w,S,p)=>W(w,typeof S!="symbol"?S+"":S,p);var w=Object.defineProperty,S=(o,t,e)=>t in o?w(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,p=(o,t,e)=>S(o,typeof t!="symbol"?t+"":t,e);function E(o){return o*Math.PI/180}function X(o,t,e){return Math.min(Math.max(o,t),e)}function b(o,t,e){const[s,n]=o,[a,i]=t,r=Math.cos(e)*(s-a)-Math.sin(e)*(n-i)+a,c=Math.sin(e)*(s-a)+Math.cos(e)*(n-i)+i;return[r,c]}function T(o,t){const e=Math.pow(10,t);return Math.round(o*e)/e}function N(o){var t=!1;return o.wheelDeltaY?o.wheelDeltaY===o.deltaY*-3&&(t=!0):o.deltaMode===0&&(t=!0),t}function M(o,t){const e=t.find(s=>o%s===0);return e?o/e:1}function x(o,t,e,s,n){let a=o.left-t,i=o.top-e;const r=Math.cos(-n),c=Math.sin(-n);let l=a*r-i*c,u=a*c+i*r;const d=o.width/s,g=o.height/s;return l/=s,u/=s,{x:T(l,4),y:T(u,4),width:T(d,4),height:T(g,4)}}class y extends EventTarget{constructor(t,e,s,n,a,i,r=.1,c=10,l=!1,u=!0){super(),p(this,"wrapperBounds"),p(this,"canvasBounds"),p(this,"gestureStartRotate",0),p(this,"dragStart",null),p(this,"dragStartFrozenX",null),p(this,"dragStartFrozenY",null),p(this,"touchStarts",null),p(this,"touchStartTranslateX",0),p(this,"touchStartTranslateY",0),this.element=t,this.offset=e,this.translateX=s,this.translateY=n,this.scale=a,this.rotate=i,this.minScale=r,this.maxScale=c,this.clampBounds=l,this.rotation=u;const d=new ResizeObserver(()=>{const{x:h,y:f,width:v,height:m}=this.element.getBoundingClientRect();this.wrapperBounds={x:h,y:f,width:v,height:m},this.update()}),g=new ResizeObserver(()=>{const{x:h,y:f,width:v,height:m}=x(this.canvasElement.getBoundingClientRect(),this.renderingTranslateX,this.renderingTranslateY,this.renderinScale,this.renderingRotate);this.canvasBounds={x:h,y:f,width:v,height:m},this.update()});requestAnimationFrame(()=>{this.wrapperBounds=this.element.getBoundingClientRect(),this.canvasBounds=this.canvasElement.getBoundingClientRect(),this.update(),this.dispatchEvent(new Event("init"))}),g.observe(this.canvasElement),d.observe(this.element)}get canvasElement(){return this.element.querySelector(".canvas")}get wrapperInnerX(){return this.wrapperBounds.x+this.offset.left}get wrapperInnerY(){return this.wrapperBounds.y+this.offset.top}get wrapperInnerWidth(){return this.wrapperBounds.width-this.offset.left-this.offset.right}get wrapperInnerHeight(){return this.wrapperBounds.height-this.offset.top-this.offset.bottom}get wrapperInnerRatio(){return this.wrapperInnerWidth/this.wrapperInnerHeight}get canvasNaturalRatio(){return this.canvasBounds.width/this.canvasBounds.height}get naturalScale(){return this.canvasNaturalRatio>=this.wrapperInnerRatio?this.wrapperInnerWidth/this.canvasBounds.width:this.wrapperInnerHeight/this.canvasBounds.height}setTranslateFromUserGesture(t,e){if(this.clampBounds){const s=this.clampTranslate({translateX:t,translateY:e,scale:this.scale,rotate:this.rotate});this.translateX=s.translateX,this.translateY=s.translateY,this.rotate=0}else this.translateX=t,this.translateY=e}handleGesturestart(t){this.gestureStartRotate=this.rotate}handleGesturechange(t){const{clientX:e,clientY:s}=t,n=t.rotation;if(n===0||!this.rotation)return;const a=this.normalizeClientCoords(e,s);this.rotateCanvas(a[0],a[1],this.gestureStartRotate+E(n))}handleGestureend(t){}handleMousedown(t){t.preventDefault(),this.dragStart=[t.clientX,t.clientY],this.dragStartFrozenX=this.translateX,this.dragStartFrozenY=this.translateY}handleMouseup(t){t.preventDefault(),this.dragStart=null,this.dragStartFrozenX=null,this.dragStartFrozenY=null}handleMousemove(t){if(t.preventDefault(),this.dragStart&&this.dragStartFrozenX!==null&&this.dragStartFrozenY!==null){const e=t.clientX-this.dragStart[0],s=t.clientY-this.dragStart[1],n=this.dragStartFrozenX- -e,a=this.dragStartFrozenY- -s;this.setTranslateFromUserGesture(n,a),this.update()}}handleWheel(t){let{deltaX:e,deltaY:s,ctrlKey:n}=t;const a=[120,100],i=2;N(t)||((Math.abs(e)===120||Math.abs(e)===200)&&(e=e/(100/i*M(e,a))*Math.sign(e)),(Math.abs(s)===120||Math.abs(s)===200)&&(s=s/(100/i*M(s,a))*Math.sign(s)));const r=this.scale;if(n){const c=-s/100*r,l=X(r+c,this.minScale,this.maxScale),u=this.relativeWrapperCoordinatesFromClientCoords(t.clientX,t.clientY),[d,g]=this.calcProjectionTranslate(l,u,this.normalizeMatrixCoordinates(t.clientX,t.clientY));this.setTranslateFromUserGesture(d,g),this.scale=l}else this.setTranslateFromUserGesture(this.translateX-e,this.translateY-s);this.update(),t.preventDefault()}freezeTouches(t){return Array.from(t).map(e=>{const s=this.clientCoordsToWrapperCoords(e.clientX,e.clientY);return{client:[e.clientX,e.clientY],canvasRel:this.getCanvasCoordsRel(s[0],s[1])}})}handleTouchstart(t){this.touchStarts=this.freezeTouches(t.touches),this.touchStartTranslateX=this.translateX,this.touchStartTranslateY=this.translateY,t.preventDefault()}handleTouchmove(t){t.preventDefault();const e=Array.from(t.touches).map(s=>this.clientCoordsToWrapperCoords(s.clientX,s.clientY));if(this.touchStarts){if(e.length>=2&&this.touchStarts.length>=2){const s=[this.touchStarts[0].canvasRel[0]*this.canvasBounds.width,this.touchStarts[0].canvasRel[1]*this.canvasBounds.height],n=[this.touchStarts[1].canvasRel[0]*this.canvasBounds.width,this.touchStarts[1].canvasRel[1]*this.canvasBounds.height],a=Math.sqrt(Math.pow(s[0]-n[0],2)+Math.pow(s[1]-n[1],2)),i=Math.sqrt(Math.pow(e[0][0]-e[1][0],2)+Math.pow(e[0][1]-e[1][1],2))/this.naturalScale,r=X(i/a,this.minScale,this.maxScale),c=[e[0][0]/this.wrapperInnerWidth,e[0][1]/this.wrapperInnerHeight],l=this.touchStarts[0].canvasRel,[u,d]=this.calcProjectionTranslate(r,c,l,0);if(this.rotation){let g=0,h=0,f=0;const v=Math.atan2(n[1]-s[1],n[0]-s[0]);f=Math.atan2(e[1][1]-e[0][1],e[1][0]-e[0][0])-v;const m=(z,F)=>[this.offset.left+this.canvasBounds.width*z*this.naturalScale*r+u,this.offset.top+this.canvasBounds.height*F*this.naturalScale*r+d],B=m(0,0),A=m(this.touchStarts[0].canvasRel[0],this.touchStarts[0].canvasRel[1]),R=b(B,A,f);g=R[0]-B[0],h=R[1]-B[1],this.scale=r,this.rotate=f,this.setTranslateFromUserGesture(u+g,d+h)}else this.scale=r,this.setTranslateFromUserGesture(u,d)}else{const s=t.touches[0].clientX-this.touchStarts[0].client[0],n=t.touches[0].clientY-this.touchStarts[0].client[1],a=this.touchStartTranslateX+s,i=this.touchStartTranslateY+n;this.setTranslateFromUserGesture(a,i)}this.update()}}handleTouchend(t){t.touches.length===0?this.touchStarts=null:(this.touchStarts=this.freezeTouches(t.touches),this.touchStartTranslateX=this.translateX,this.touchStartTranslateY=this.translateY)}calcProjectionTranslate(t,e,s,n){const a=this.canvasBounds.width*this.naturalScale,i=this.canvasBounds.height*this.naturalScale,r=s[0]*a*t,c=s[1]*i*t,l=b([r,c],[0,0],n??this.rotate),u=e[0]*this.wrapperInnerWidth,d=e[1]*this.wrapperInnerHeight,g=u-l[0],h=d-l[1];return[g,h]}applyTransform(t,e,s){const n=this.calcProjectionTranslate(t,e,s,0);this.scale=t,this.setTranslateFromUserGesture(n[0],n[1]),this.update()}composeRelPoint(t,e,s,n,a,i){s=s??this.scale,n=n??this.translateX,a=a??this.translateY,i=i??this.rotate;const r=[this.offset.left,this.offset.top],c=[this.offset.left+this.canvasBounds.width*(s*this.naturalScale)*t,this.offset.top+this.canvasBounds.height*(s*this.naturalScale)*e],l=b(c,r,i);return[l[0]+n,l[1]+a]}composePoint(t,e){const s=t/this.canvasBounds.width,n=e/this.canvasBounds.height;return this.composeRelPoint(s,n)}getAnchorOffset(t,e,s,n,a=[.5,.5]){const i=this.calcProjectionTranslate(t,a,a,0),r=[this.offset.left+i[0]+this.canvasBounds.width*(t*this.naturalScale)*a[0],this.offset.top+i[1]+this.canvasBounds.height*(t*this.naturalScale)*a[1]],c=this.composeRelPoint(a[0],a[1],t,e,s,n),l=c[0]-r[0],u=c[1]-r[1];return[l,u]}getCanvasCoordsRel(t,e){const s=[0,0],n=[t-this.translateX,e-this.translateY],a=b(n,s,-this.rotate),i=[a[0]/this.renderinScale,a[1]/this.renderinScale];return[i[0]/this.canvasBounds.width,i[1]/this.canvasBounds.height]}clientCoordsToWrapperCoords(t,e){return[t-this.wrapperInnerX,e-this.wrapperInnerY]}relativeWrapperCoordinatesFromClientCoords(t,e){const[s,n]=this.clientCoordsToWrapperCoords(t,e);return[s/this.wrapperInnerWidth,n/this.wrapperInnerHeight]}normalizeMatrixCoordinates(t,e){const s=this.clientCoordsToWrapperCoords(t,e);return this.getCanvasCoordsRel(s[0],s[1])}normalizeClientCoords(t,e){const[s,n]=this.normalizeMatrixCoordinates(t,e);return[s*this.canvasBounds.width,n*this.canvasBounds.height]}rotateCanvas(t,e,s){const n=t/this.canvasBounds.width,a=e/this.canvasBounds.height,i=this.composeRelPoint(n,a,this.scale,0,0,s),r=this.composeRelPoint(n,a);this.setTranslateFromUserGesture(r[0]-i[0],r[1]-i[1]),this.rotate=s,this.update()}get renderinScale(){return this.naturalScale*this.scale}get renderingTranslateX(){return this.offset.left+this.translateX}get renderingTranslateY(){return this.offset.top+this.translateY}get renderingRotate(){return this.rotate}clampTranslate(t,e=[.5,.5]){const s=this.canvasBounds.width*this.naturalScale*t.scale,n=this.canvasBounds.height*this.naturalScale*t.scale,a=s-this.wrapperInnerWidth,i=n-this.wrapperInnerHeight,r=a>0?-a:0,c=Math.min(0,Math.max(t.translateX,r)),l=i>0?-i:0,u=Math.min(0,Math.max(t.translateY,l)),d=-Math.min(0,a)*e[0],g=-Math.min(0,i)*e[1];return{translateX:c+d,translateY:u+g}}update(){this.canvasElement.style.transformOrigin="top left",this.canvasElement.style.transform=`translateX(${this.renderingTranslateX}px) translateY(${this.renderingTranslateY}px) scale(${this.renderinScale}) rotate(${this.renderingRotate}rad)`,this.dispatchEvent(new Event("update"))}destroy(){}}class C extends HTMLElement{constructor(){super();Y(this,"engine");this.attachShadow({mode:"open"})}get contentEl(){return this.shadowRoot.querySelector(".content")}get canvasElement(){return this.shadowRoot.querySelector(".canvas")}connectedCallback(){this.shadowRoot.innerHTML=`
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["@zoompinch/core"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.ZoompinchCore))})(this,(function(i){"use strict";var v=Object.defineProperty;var w=(i,e,h)=>e in i?v(i,e,{enumerable:!0,configurable:!0,writable:!0,value:h}):i[e]=h;var N=(i,e,h)=>w(i,typeof e!="symbol"?e+"":e,h);class e extends HTMLElement{constructor(){super();N(this,"engine");this.attachShadow({mode:"open"})}get contentEl(){return this.shadowRoot.querySelector(".content")}get canvasElement(){return this.shadowRoot.querySelector(".canvas")}connectedCallback(){this.shadowRoot.innerHTML=`
       <style>
         :host {
           display: block;
@@ -32,4 +32,4 @@
            <slot name="matrix"></slot>  
          </div>
       </div>
-    `;const e=Number(this.getAttribute("translate-x")||"0"),s=Number(this.getAttribute("translate-y")||"0"),n=Number(this.getAttribute("scale")||"1"),a=Number(this.getAttribute("rotate")||"0"),i=Number(this.getAttribute("min-scale")),r=Number(this.getAttribute("max-scale")),c=Number(this.getAttribute("offset-top")),l=Number(this.getAttribute("offset-right")),u=Number(this.getAttribute("offset-bottom")),d=Number(this.getAttribute("offset-left")),g=this.getAttribute("clamp-bounds")==="true";this.getAttribute("rotation"),this.engine=new y(this.contentEl,{top:isNaN(c)?100:c,left:isNaN(d)?0:d,right:isNaN(l)?0:l,bottom:isNaN(u)?0:u},e,s,n,a,isNaN(i)?void 0:i,isNaN(r)?void 0:r,g),this.contentEl.addEventListener("wheel",h=>this.engine.handleWheel(h)),this.contentEl.addEventListener("gesturestart",h=>this.engine.handleGesturestart(h)),window.addEventListener("gesturechange",h=>this.engine.handleGesturechange(h)),window.addEventListener("gestureend",h=>this.engine.handleGestureend(h)),this.contentEl.addEventListener("mousedown",h=>this.engine.handleMousedown(h)),window.addEventListener("mousemove",h=>this.engine.handleMousemove(h)),window.addEventListener("mouseup",h=>this.engine.handleMouseup(h)),this.contentEl.addEventListener("touchstart",h=>this.engine.handleTouchstart(h)),window.addEventListener("touchmove",h=>this.engine.handleTouchmove(h)),window.addEventListener("touchend",h=>this.engine.handleTouchend(h)),this.engine.addEventListener("update",()=>{const h=this.engine.translateX.toString(),f=this.engine.translateY.toString(),v=this.engine.scale.toString(),m=this.engine.rotate.toString();this.getAttribute("translate-x")!==h&&this.setAttribute("translate-x",h),this.getAttribute("translate-y")!==f&&this.setAttribute("translate-y",f),this.getAttribute("scale")!==v&&this.setAttribute("scale",v),this.getAttribute("rotate")!==m&&this.setAttribute("rotate",m),this.dispatchEvent(new Event("update"))}),this.engine.addEventListener("init",()=>{this.dispatchEvent(new Event("init"))})}disconnectedCallback(){this.engine.destroy()}attributeChangedCallback(e,s,n){if(this.engine)switch(e){case"translate-x":const a=Number(n);this.engine.translateX!==a&&(this.engine.translateX=a,this.engine.update());break;case"translate-y":const i=Number(n);this.engine.translateY!==i&&(this.engine.translateY=i,this.engine.update());break;case"scale":const r=Number(n);this.engine.scale!==r&&(this.engine.scale=r,this.engine.update());break;case"rotate":const c=Number(n);this.engine.rotate!==c&&(this.engine.rotate=c,this.engine.update());break;case"min-scale":const l=Number(n);!isNaN(l)&&this.engine.minScale!==l&&(this.engine.minScale=l,this.engine.update());break;case"max-scale":const u=Number(n);!isNaN(u)&&this.engine.maxScale!==u&&(this.engine.maxScale=u,this.engine.update());break;case"offset-top":case"offset-right":case"offset-bottom":case"offset-left":const d=Number(this.getAttribute("offset-top")||"0"),g=Number(this.getAttribute("offset-right")||"0"),h=Number(this.getAttribute("offset-bottom")||"0"),f=Number(this.getAttribute("offset-left")||"0");this.engine.offset={top:d,right:g,bottom:h,left:f},this.engine.update();break;case"clamp-bounds":const v=n==="true";this.engine.clampBounds!==v&&(this.engine.clampBounds=v,this.engine.setTranslateFromUserGesture(this.engine.translateX,this.engine.translateY),this.engine.update());break;case"rotation":const m=n==="true";this.engine.rotation!==m&&(this.engine.rotation=m,this.engine.update())}}get canvasWidth(){return this.engine.canvasBounds.width}get canvasHeight(){return this.engine.canvasBounds.height}applyTransform(e,s,n){this.engine.applyTransform(e,s,n)}normalizeClientCoords(e,s){return this.engine.normalizeClientCoords(e,s)}composePoint(e,s){return this.engine.composePoint(e,s)}}Y(C,"observedAttributes",["translate-x","translate-y","scale","rotate","min-scale","max-scale","offset-top","offset-right","offset-bottom","offset-left","clamp-bounds","rotation"]),customElements.get("zoom-pinch")||customElements.define("zoom-pinch",C)}));
+    `;const s=Number(this.getAttribute("translate-x")||"0"),a=Number(this.getAttribute("translate-y")||"0"),n=Number(this.getAttribute("scale")||"1"),f=Number(this.getAttribute("rotate")||"0"),c=Number(this.getAttribute("min-scale")),l=Number(this.getAttribute("max-scale")),d=Number(this.getAttribute("offset-top")),o=Number(this.getAttribute("offset-right")),r=Number(this.getAttribute("offset-bottom")),m=Number(this.getAttribute("offset-left")),p=this.getAttribute("clamp-bounds")==="true";this.getAttribute("rotation"),this.engine=new i.Zoompinch(this.contentEl,{top:isNaN(d)?100:d,left:isNaN(m)?0:m,right:isNaN(o)?0:o,bottom:isNaN(r)?0:r},s,a,n,f,isNaN(c)?void 0:c,isNaN(l)?void 0:l,p),this.contentEl.addEventListener("wheel",t=>this.engine.handleWheel(t)),this.contentEl.addEventListener("gesturestart",t=>this.engine.handleGesturestart(t)),window.addEventListener("gesturechange",t=>this.engine.handleGesturechange(t)),window.addEventListener("gestureend",t=>this.engine.handleGestureend(t)),this.contentEl.addEventListener("mousedown",t=>this.engine.handleMousedown(t)),window.addEventListener("mousemove",t=>this.engine.handleMousemove(t)),window.addEventListener("mouseup",t=>this.engine.handleMouseup(t)),this.contentEl.addEventListener("touchstart",t=>this.engine.handleTouchstart(t)),window.addEventListener("touchmove",t=>this.engine.handleTouchmove(t)),window.addEventListener("touchend",t=>this.engine.handleTouchend(t)),this.engine.addEventListener("update",()=>{const t=this.engine.translateX.toString(),b=this.engine.translateY.toString(),u=this.engine.scale.toString(),g=this.engine.rotate.toString();this.getAttribute("translate-x")!==t&&this.setAttribute("translate-x",t),this.getAttribute("translate-y")!==b&&this.setAttribute("translate-y",b),this.getAttribute("scale")!==u&&this.setAttribute("scale",u),this.getAttribute("rotate")!==g&&this.setAttribute("rotate",g),this.dispatchEvent(new Event("update"))}),this.engine.addEventListener("init",()=>{this.dispatchEvent(new Event("init"))})}disconnectedCallback(){this.engine.destroy()}attributeChangedCallback(s,a,n){if(this.engine)switch(s){case"translate-x":const f=Number(n);this.engine.translateX!==f&&(this.engine.translateX=f,this.engine.update());break;case"translate-y":const c=Number(n);this.engine.translateY!==c&&(this.engine.translateY=c,this.engine.update());break;case"scale":const l=Number(n);this.engine.scale!==l&&(this.engine.scale=l,this.engine.update());break;case"rotate":const d=Number(n);this.engine.rotate!==d&&(this.engine.rotate=d,this.engine.update());break;case"min-scale":const o=Number(n);!isNaN(o)&&this.engine.minScale!==o&&(this.engine.minScale=o,this.engine.update());break;case"max-scale":const r=Number(n);!isNaN(r)&&this.engine.maxScale!==r&&(this.engine.maxScale=r,this.engine.update());break;case"offset-top":case"offset-right":case"offset-bottom":case"offset-left":const m=Number(this.getAttribute("offset-top")||"0"),p=Number(this.getAttribute("offset-right")||"0"),t=Number(this.getAttribute("offset-bottom")||"0"),b=Number(this.getAttribute("offset-left")||"0");this.engine.offset={top:m,right:p,bottom:t,left:b},this.engine.update();break;case"clamp-bounds":const u=n==="true";this.engine.clampBounds!==u&&(this.engine.clampBounds=u,this.engine.setTranslateFromUserGesture(this.engine.translateX,this.engine.translateY),this.engine.update());break;case"rotation":const g=n==="true";this.engine.rotation!==g&&(this.engine.rotation=g,this.engine.update())}}get canvasWidth(){return this.engine.canvasBounds.width}get canvasHeight(){return this.engine.canvasBounds.height}applyTransform(s,a,n){this.engine.applyTransform(s,a,n)}normalizeClientCoords(s,a){return this.engine.normalizeClientCoords(s,a)}composePoint(s,a){return this.engine.composePoint(s,a)}}N(e,"observedAttributes",["translate-x","translate-y","scale","rotate","min-scale","max-scale","offset-top","offset-right","offset-bottom","offset-left","clamp-bounds","rotation"]),customElements.get("zoom-pinch")||customElements.define("zoom-pinch",e)}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zoompinch/elements",
   "description": "Custom elements wrapper ZoomPinch - reactive pinch & zoom component",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": false,
   "type": "module",
   "main": "./dist/zoompinch-elements.umd.js",
@@ -14,6 +14,18 @@
       "types": "./dist/index.d.ts"
     }
   },
+  "keywords": [
+    "custom elements",
+    "zoompinch",
+    "zoom images",
+    "pinch to zoom",
+    "image zoom",
+    "pan gesture",
+    "pan and zoom",
+    "panzoom",
+    "gesture library",
+    "touch gestures"
+  ],
   "files": [
     "dist"
   ],
@@ -26,7 +38,7 @@
     "vite": "^6.4.1"
   },
   "dependencies": {
-    "@zoompinch/core": "^0.0.24"
+    "@zoompinch/core": "^0.0.25"
   },
   "publishConfig": {
     "access": "public"