@zoompinch/elements 0.0.1

package/dist/zoompinch-core.es.js

@@ -0,0 +1,418 @@
+var x = Object.defineProperty;
+var y = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => y(r, typeof t != "symbol" ? t + "" : t, e);
+var E = Object.defineProperty, A = (r, t, e) => t in r ? E(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, p = (r, t, e) => A(r, typeof t != "symbol" ? t + "" : t, e);
+function z(r) {
+  return r * Math.PI / 180;
+}
+function T(r, t, e) {
+  return Math.min(Math.max(r, t), e);
+}
+function v(r, t, e) {
+  const [s, n] = r, [a, h] = t, o = Math.cos(e) * (s - a) - Math.sin(e) * (n - h) + a, c = Math.sin(e) * (s - a) + Math.cos(e) * (n - h) + h;
+  return [o, c];
+}
+function S(r, t) {
+  const e = Math.pow(10, t);
+  return Math.round(r * e) / e;
+}
+function I(r) {
+  var t = !1;
+  return r.wheelDeltaY ? r.wheelDeltaY === r.deltaY * -3 && (t = !0) : r.deltaMode === 0 && (t = !0), t;
+}
+function C(r, t) {
+  const e = t.find((s) => r % s === 0);
+  return e ? r / e : 1;
+}
+function W(r, t, e, s, n) {
+  let a = r.left - t, h = r.top - e;
+  const o = Math.cos(-n), c = Math.sin(-n);
+  let l = a * o - h * c, u = a * c + h * o;
+  const d = r.width / s, i = r.height / s;
+  return l /= s, u /= s, { x: S(l, 4), y: S(u, 4), width: S(d, 4), height: S(i, 4) };
+}
+class L extends EventTarget {
+  constructor(t, e, s, n, a, h, o = 0.1, c = 10) {
+    super(), p(this, "wrapperBounds"), p(this, "canvasBounds"), p(this, "gestureStartRadians", 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), p(this, "centeredTransform", {
+      translateX: 0,
+      translateY: 0,
+      scale: 1,
+      radians: 0
+    }), this.element = t, this.offset = e, this.translateX = s, this.translateY = n, this.scale = a, this.rotate = h, this.minScale = o, this.maxScale = c;
+    const l = new ResizeObserver(() => {
+      const { x: d, y: i, width: g, height: f } = this.element.getBoundingClientRect();
+      this.wrapperBounds = { x: d, y: i, width: g, height: f }, this.update();
+    }), u = new ResizeObserver(() => {
+      const { x: d, y: i, width: g, height: f } = W(
+        this.canvasElement.getBoundingClientRect(),
+        this.renderingTranslateX,
+        this.renderingTranslateY,
+        this.renderinScale,
+        this.renderingRotate
+      );
+      this.canvasBounds = { x: d, y: i, width: g, height: f }, this.update();
+    });
+    requestAnimationFrame(() => {
+      this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update();
+    }), u.observe(this.canvasElement), l.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;
+  }
+  handleGesturestart(t) {
+    this.gestureStartRadians = this.rotate;
+  }
+  handleGesturechange(t) {
+    const { clientX: e, clientY: s } = t, n = t.rotation;
+    if (n === 0)
+      return;
+    const a = this.normalizeMatrixCoordinates(e, s);
+    this.rotateCanvas(a[0], a[1], this.gestureStartRadians + 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.translateX = n, this.translateY = a, this.update();
+    }
+  }
+  handleWheel(t) {
+    let { deltaX: e, deltaY: s, ctrlKey: n } = t;
+    const a = [120, 100], h = 2;
+    I(t) || ((Math.abs(e) === 120 || Math.abs(e) === 200) && (e = e / (100 / h * C(e, a)) * Math.sign(e)), (Math.abs(s) === 120 || Math.abs(s) === 200) && (s = s / (100 / h * C(s, a)) * Math.sign(s)));
+    const o = this.scale;
+    if (n) {
+      const c = -s / 100 * o, l = T(o + c, this.minScale, this.maxScale), u = this.relativeWrapperCoordinatesFromClientCoords(t.clientX, t.clientY), [d, i] = this.calcProjectionTranslate(
+        l,
+        u,
+        this.normalizeMatrixCoordinates(t.clientX, t.clientY)
+      );
+      this.translateX = d, this.translateY = i, this.scale = l;
+    } else
+      this.translateX = this.translateX - e, this.translateY = 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)
+        ), h = Math.sqrt(
+          Math.pow(e[0][0] - e[1][0], 2) + Math.pow(e[0][1] - e[1][1], 2)
+        ) / this.naturalScale, o = T(h / 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(o, c, l, 0);
+        let i = 0, g = 0, f = 0;
+        const m = 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]) - m;
+        const Y = (R, N) => [
+          this.offset.left + this.canvasBounds.width * R * this.naturalScale * o + u,
+          this.offset.top + this.canvasBounds.height * N * this.naturalScale * o + d
+        ], w = Y(0, 0), M = Y(
+          this.touchStarts[0].canvasRel[0],
+          this.touchStarts[0].canvasRel[1]
+        ), X = v(
+          w,
+          M,
+          f
+        );
+        i = X[0] - w[0], g = X[1] - w[1], this.scale = o, this.rotate = f, this.translateX = u + i, this.translateY = d + g;
+      } 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, h = this.touchStartTranslateY + n;
+        this.translateX = a, this.translateY = h;
+      }
+      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, h = this.canvasBounds.height * this.naturalScale, o = s[0] * a * t, c = s[1] * h * t, l = v([o, c], [0, 0], n ?? this.rotate), u = e[0] * this.wrapperInnerWidth, d = e[1] * this.wrapperInnerHeight, i = u - l[0], g = d - l[1];
+    return [i, g];
+  }
+  applyTransform(t, e, s) {
+    const n = this.calcProjectionTranslate(t, e, s, 0);
+    this.scale = t, this.translateX = n[0], this.translateY = n[1], this.update();
+  }
+  composeRelPoint(t, e, s, n, a, h) {
+    s = s ?? this.scale, n = n ?? this.translateX, a = a ?? this.translateY, h = h ?? this.rotate;
+    const o = [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 = v(c, o, h);
+    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 h = this.calcProjectionTranslate(t, a, a, 0), o = [
+      this.offset.left + h[0] + this.canvasBounds.width * (t * this.naturalScale) * a[0],
+      this.offset.top + h[1] + this.canvasBounds.height * (t * this.naturalScale) * a[1]
+    ], c = this.composeRelPoint(a[0], a[1], t, e, s, n), l = c[0] - o[0], u = c[1] - o[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 = v(n, s, -this.rotate), h = [a[0] / this.renderinScale, a[1] / this.renderinScale];
+    return [h[0] / this.canvasBounds.width, h[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 = this.composeRelPoint(t, e, this.scale, 0, 0, s), a = this.composeRelPoint(t, e);
+    this.translateX = a[0] - n[0], this.translateY = a[1] - n[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;
+  }
+  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 B extends HTMLElement {
+  constructor() {
+    super();
+    b(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;
+          touch-action: none;
+        }
+        .content {
+          display: inline-block;
+          will-change: transform;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          position: relative;
+        }
+        .canvas {
+          display: inline-block;
+        }
+        .matrix {
+          position: absolute;
+          top: 0;
+          left: 0;
+          pointer-events: none;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      <div class="content" style="touch-action: none;">
+        <div class="canvas">
+          <slot></slot>
+         </div>
+         <div class="matrix">
+           <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"), h = Number(this.getAttribute("min-scale")), o = 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"));
+    this.engine = new L(
+      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(h) ? void 0 : h,
+      isNaN(o) ? void 0 : o
+    ), this.contentEl.addEventListener("wheel", (i) => this.engine.handleWheel(i)), this.contentEl.addEventListener(
+      "gesturestart",
+      (i) => this.engine.handleGesturestart(i)
+    ), window.addEventListener(
+      "gesturechange",
+      (i) => this.engine.handleGesturechange(i)
+    ), window.addEventListener(
+      "gestureend",
+      (i) => this.engine.handleGestureend(i)
+    ), this.contentEl.addEventListener(
+      "mousedown",
+      (i) => this.engine.handleMousedown(i)
+    ), window.addEventListener("mousemove", (i) => this.engine.handleMousemove(i)), window.addEventListener("mouseup", (i) => this.engine.handleMouseup(i)), this.contentEl.addEventListener(
+      "touchstart",
+      (i) => this.engine.handleTouchstart(i)
+    ), window.addEventListener("touchmove", (i) => this.engine.handleTouchmove(i)), window.addEventListener("touchend", (i) => this.engine.handleTouchend(i)), this.engine.addEventListener("update", () => {
+      const i = this.engine.translateX.toString(), g = this.engine.translateY.toString(), f = this.engine.scale.toString(), m = this.engine.rotate.toString();
+      this.getAttribute("translate-x") !== i && this.setAttribute("translate-x", i), this.getAttribute("translate-y") !== g && this.setAttribute("translate-y", g), this.getAttribute("scale") !== f && this.setAttribute("scale", f), this.getAttribute("rotate") !== m && this.setAttribute("rotate", m), this.dispatchEvent(new Event("update"));
+    });
+  }
+  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 h = Number(n);
+          this.engine.translateY !== h && (this.engine.translateY = h, this.engine.update());
+          break;
+        case "scale":
+          const o = Number(n);
+          this.engine.scale !== o && (this.engine.scale = o, 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"), i = Number(this.getAttribute("offset-right") || "0"), g = Number(this.getAttribute("offset-bottom") || "0"), f = Number(this.getAttribute("offset-left") || "0");
+          this.engine.offset = {
+            top: d,
+            right: i,
+            bottom: g,
+            left: f
+          }, this.engine.update();
+          break;
+      }
+  }
+  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);
+  }
+}
+b(B, "observedAttributes", [
+  "translate-x",
+  "translate-y",
+  "scale",
+  "rotate",
+  "min-scale",
+  "max-scale",
+  "offset-top",
+  "offset-right",
+  "offset-bottom",
+  "offset-left"
+]);
+customElements.get("zoom-pinch") || customElements.define("zoom-pinch", B);

package/dist/zoompinch-core.umd.js

@@ -0,0 +1,35 @@
+(function(m){typeof define=="function"&&define.amd?define(m):m()})((function(){"use strict";var W=Object.defineProperty;var L=(m,v,g)=>v in m?W(m,v,{enumerable:!0,configurable:!0,writable:!0,value:g}):m[v]=g;var X=(m,v,g)=>L(m,typeof v!="symbol"?v+"":v,g);var m=Object.defineProperty,v=(h,t,e)=>t in h?m(h,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):h[t]=e,g=(h,t,e)=>v(h,typeof t!="symbol"?t+"":t,e);function N(h){return h*Math.PI/180}function T(h,t,e){return Math.min(Math.max(h,t),e)}function S(h,t,e){const[s,n]=h,[a,r]=t,o=Math.cos(e)*(s-a)-Math.sin(e)*(n-r)+a,c=Math.sin(e)*(s-a)+Math.cos(e)*(n-r)+r;return[o,c]}function w(h,t){const e=Math.pow(10,t);return Math.round(h*e)/e}function x(h){var t=!1;return h.wheelDeltaY?h.wheelDeltaY===h.deltaY*-3&&(t=!0):h.deltaMode===0&&(t=!0),t}function C(h,t){const e=t.find(s=>h%s===0);return e?h/e:1}function y(h,t,e,s,n){let a=h.left-t,r=h.top-e;const o=Math.cos(-n),c=Math.sin(-n);let l=a*o-r*c,u=a*c+r*o;const d=h.width/s,i=h.height/s;return l/=s,u/=s,{x:w(l,4),y:w(u,4),width:w(d,4),height:w(i,4)}}class E extends EventTarget{constructor(t,e,s,n,a,r,o=.1,c=10){super(),g(this,"wrapperBounds"),g(this,"canvasBounds"),g(this,"gestureStartRadians",0),g(this,"dragStart",null),g(this,"dragStartFrozenX",null),g(this,"dragStartFrozenY",null),g(this,"touchStarts",null),g(this,"touchStartTranslateX",0),g(this,"touchStartTranslateY",0),g(this,"centeredTransform",{translateX:0,translateY:0,scale:1,radians:0}),this.element=t,this.offset=e,this.translateX=s,this.translateY=n,this.scale=a,this.rotate=r,this.minScale=o,this.maxScale=c;const l=new ResizeObserver(()=>{const{x:d,y:i,width:f,height:p}=this.element.getBoundingClientRect();this.wrapperBounds={x:d,y:i,width:f,height:p},this.update()}),u=new ResizeObserver(()=>{const{x:d,y:i,width:f,height:p}=y(this.canvasElement.getBoundingClientRect(),this.renderingTranslateX,this.renderingTranslateY,this.renderinScale,this.renderingRotate);this.canvasBounds={x:d,y:i,width:f,height:p},this.update()});requestAnimationFrame(()=>{this.wrapperBounds=this.element.getBoundingClientRect(),this.canvasBounds=this.canvasElement.getBoundingClientRect(),this.update()}),u.observe(this.canvasElement),l.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}handleGesturestart(t){this.gestureStartRadians=this.rotate}handleGesturechange(t){const{clientX:e,clientY:s}=t,n=t.rotation;if(n===0)return;const a=this.normalizeMatrixCoordinates(e,s);this.rotateCanvas(a[0],a[1],this.gestureStartRadians+N(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.translateX=n,this.translateY=a,this.update()}}handleWheel(t){let{deltaX:e,deltaY:s,ctrlKey:n}=t;const a=[120,100],r=2;x(t)||((Math.abs(e)===120||Math.abs(e)===200)&&(e=e/(100/r*C(e,a))*Math.sign(e)),(Math.abs(s)===120||Math.abs(s)===200)&&(s=s/(100/r*C(s,a))*Math.sign(s)));const o=this.scale;if(n){const c=-s/100*o,l=T(o+c,this.minScale,this.maxScale),u=this.relativeWrapperCoordinatesFromClientCoords(t.clientX,t.clientY),[d,i]=this.calcProjectionTranslate(l,u,this.normalizeMatrixCoordinates(t.clientX,t.clientY));this.translateX=d,this.translateY=i,this.scale=l}else this.translateX=this.translateX-e,this.translateY=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)),r=Math.sqrt(Math.pow(e[0][0]-e[1][0],2)+Math.pow(e[0][1]-e[1][1],2))/this.naturalScale,o=T(r/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(o,c,l,0);let i=0,f=0,p=0;const b=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])-b;const M=(z,I)=>[this.offset.left+this.canvasBounds.width*z*this.naturalScale*o+u,this.offset.top+this.canvasBounds.height*I*this.naturalScale*o+d],Y=M(0,0),A=M(this.touchStarts[0].canvasRel[0],this.touchStarts[0].canvasRel[1]),R=S(Y,A,p);i=R[0]-Y[0],f=R[1]-Y[1],this.scale=o,this.rotate=p,this.translateX=u+i,this.translateY=d+f}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,r=this.touchStartTranslateY+n;this.translateX=a,this.translateY=r}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,r=this.canvasBounds.height*this.naturalScale,o=s[0]*a*t,c=s[1]*r*t,l=S([o,c],[0,0],n??this.rotate),u=e[0]*this.wrapperInnerWidth,d=e[1]*this.wrapperInnerHeight,i=u-l[0],f=d-l[1];return[i,f]}applyTransform(t,e,s){const n=this.calcProjectionTranslate(t,e,s,0);this.scale=t,this.translateX=n[0],this.translateY=n[1],this.update()}composeRelPoint(t,e,s,n,a,r){s=s??this.scale,n=n??this.translateX,a=a??this.translateY,r=r??this.rotate;const o=[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=S(c,o,r);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 r=this.calcProjectionTranslate(t,a,a,0),o=[this.offset.left+r[0]+this.canvasBounds.width*(t*this.naturalScale)*a[0],this.offset.top+r[1]+this.canvasBounds.height*(t*this.naturalScale)*a[1]],c=this.composeRelPoint(a[0],a[1],t,e,s,n),l=c[0]-o[0],u=c[1]-o[1];return[l,u]}getCanvasCoordsRel(t,e){const s=[0,0],n=[t-this.translateX,e-this.translateY],a=S(n,s,-this.rotate),r=[a[0]/this.renderinScale,a[1]/this.renderinScale];return[r[0]/this.canvasBounds.width,r[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=this.composeRelPoint(t,e,this.scale,0,0,s),a=this.composeRelPoint(t,e);this.translateX=a[0]-n[0],this.translateY=a[1]-n[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}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 B extends HTMLElement{constructor(){super();X(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;
+          touch-action: none;
+        }
+        .content {
+          display: inline-block;
+          will-change: transform;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          position: relative;
+        }
+        .canvas {
+          display: inline-block;
+        }
+        .matrix {
+          position: absolute;
+          top: 0;
+          left: 0;
+          pointer-events: none;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      <div class="content" style="touch-action: none;">
+        <div class="canvas">
+          <slot></slot>
+         </div>
+         <div class="matrix">
+           <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"),r=Number(this.getAttribute("min-scale")),o=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"));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},e,s,n,a,isNaN(r)?void 0:r,isNaN(o)?void 0:o),this.contentEl.addEventListener("wheel",i=>this.engine.handleWheel(i)),this.contentEl.addEventListener("gesturestart",i=>this.engine.handleGesturestart(i)),window.addEventListener("gesturechange",i=>this.engine.handleGesturechange(i)),window.addEventListener("gestureend",i=>this.engine.handleGestureend(i)),this.contentEl.addEventListener("mousedown",i=>this.engine.handleMousedown(i)),window.addEventListener("mousemove",i=>this.engine.handleMousemove(i)),window.addEventListener("mouseup",i=>this.engine.handleMouseup(i)),this.contentEl.addEventListener("touchstart",i=>this.engine.handleTouchstart(i)),window.addEventListener("touchmove",i=>this.engine.handleTouchmove(i)),window.addEventListener("touchend",i=>this.engine.handleTouchend(i)),this.engine.addEventListener("update",()=>{const i=this.engine.translateX.toString(),f=this.engine.translateY.toString(),p=this.engine.scale.toString(),b=this.engine.rotate.toString();this.getAttribute("translate-x")!==i&&this.setAttribute("translate-x",i),this.getAttribute("translate-y")!==f&&this.setAttribute("translate-y",f),this.getAttribute("scale")!==p&&this.setAttribute("scale",p),this.getAttribute("rotate")!==b&&this.setAttribute("rotate",b),this.dispatchEvent(new Event("update"))})}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 r=Number(n);this.engine.translateY!==r&&(this.engine.translateY=r,this.engine.update());break;case"scale":const o=Number(n);this.engine.scale!==o&&(this.engine.scale=o,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"),i=Number(this.getAttribute("offset-right")||"0"),f=Number(this.getAttribute("offset-bottom")||"0"),p=Number(this.getAttribute("offset-left")||"0");this.engine.offset={top:d,right:i,bottom:f,left:p},this.engine.update();break}}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)}}X(B,"observedAttributes",["translate-x","translate-y","scale","rotate","min-scale","max-scale","offset-top","offset-right","offset-bottom","offset-left"]),customElements.get("zoom-pinch")||customElements.define("zoom-pinch",B)}));

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@zoompinch/elements",
+  "description": "Pinch-and-zoom experience that's feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/zoompinch-elements.umd.js",
+  "module": "./dist/zoompinch-elements.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/zoompinch-elements.es.js",
+      "require": "./dist/zoompinch-elements.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {
+    "@zoompinch/core": "^0.0.3"
+  }
+}