@zoompinch/elements 0.0.8 → 0.0.10

package/dist/zoompinch-elements.es.js

@@ -38,18 +38,12 @@ class L extends EventTarget {
       const { x: d, y: i, width: g, height: p } = this.element.getBoundingClientRect();
       this.wrapperBounds = { x: d, y: i, width: g, height: p }, this.update();
     }), u = new ResizeObserver(() => {
-      const { x: d, y: i, width: g, height: p } = W(
-        this.canvasElement.getBoundingClientRect(),
-        this.renderingTranslateX,
-        this.renderingTranslateY,
-        this.renderinScale,
-        this.renderingRotate
-      );
+      const { x: d, y: i, width: g, height: p } = W(this.canvasElement.getBoundingClientRect(), this.renderingTranslateX, this.renderingTranslateY, this.renderinScale, this.renderingRotate);
       this.canvasBounds = { x: d, y: i, width: g, height: p }, this.update();
     });
     requestAnimationFrame(() => {
       this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update(), this.dispatchEvent(new Event("init"));
-    }), u.observe(this.canvasElement), l.observe(this.element), console.log("INIT");
+    }), u.observe(this.canvasElement), l.observe(this.element), console.log("INIT!");
   }
   get canvasElement() {
     return this.element.querySelector(".canvas");
@@ -107,11 +101,7 @@ class L extends EventTarget {
     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)
-      );
+      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;
@@ -131,42 +121,14 @@ class L extends EventTarget {
   }
   handleTouchmove(t) {
     t.preventDefault();
-    const e = Array.from(t.touches).map(
-      (s) => this.clientCoordsToWrapperCoords(s.clientX, s.clientY)
-    );
+    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);
+        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, p = 0;
-        const m = Math.atan2(
-          n[1] - s[1],
-          n[0] - s[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 Y = (N, R) => [
-          this.offset.left + this.canvasBounds.width * N * this.naturalScale * o + u,
-          this.offset.top + this.canvasBounds.height * R * this.naturalScale * o + d
-        ], S = Y(0, 0), M = Y(
-          this.touchStarts[0].canvasRel[0],
-          this.touchStarts[0].canvasRel[1]
-        ), X = v(
-          S,
-          M,
-          p
-        );
+        const Y = (N, R) => [this.offset.left + this.canvasBounds.width * N * this.naturalScale * o + u, this.offset.top + this.canvasBounds.height * R * this.naturalScale * o + d], S = Y(0, 0), M = Y(this.touchStarts[0].canvasRel[0], this.touchStarts[0].canvasRel[1]), X = v(S, M, p);
         i = X[0] - S[0], g = X[1] - S[1], this.scale = o, this.rotate = p, 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;
@@ -189,10 +151,7 @@ class L extends EventTarget {
   }
   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);
+    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) {
@@ -315,22 +274,7 @@ class B extends HTMLElement {
       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", () => {
+    ), 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(), p = 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") !== p && this.setAttribute("scale", p), this.getAttribute("rotate") !== m && this.setAttribute("rotate", m), this.dispatchEvent(new Event("update"));
     });
@@ -386,11 +330,7 @@ class B extends HTMLElement {
     return this.engine.canvasBounds.height;
   }
   applyTransform(e, s, n) {
-    this.engine.applyTransform(
-      e,
-      s,
-      n
-    );
+    this.engine.applyTransform(e, s, n);
   }
   normalizeClientCoords(e, s) {
     return this.engine.normalizeClientCoords(e, s);
@@ -399,16 +339,5 @@ class B extends HTMLElement {
     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"
-]);
+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-elements.umd.js

@@ -1,4 +1,4 @@
-(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 R(h){return h*Math.PI/180}function T(h,t,e){return Math.min(Math.max(h,t),e)}function w(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 S(h,t){const e=Math.pow(10,t);return Math.round(h*e)/e}function y(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 E(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:S(l,4),y:S(u,4),width:S(d,4),height:S(i,4)}}class x extends EventTarget{constructor(t,e,s,n,a,r,o=.1,c=10){super(),g(this,"wrapperBounds"),g(this,"canvasBounds"),g(this,"gestureStartRotate",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),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}=E(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(),this.dispatchEvent(new Event("init"))}),u.observe(this.canvasElement),l.observe(this.element),console.log("INIT")}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.gestureStartRotate=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.gestureStartRotate+R(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;y(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]),N=w(Y,A,p);i=N[0]-Y[0],f=N[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=w([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){console.log("....apply transform");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=w(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=w(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=`
+(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 R(h){return h*Math.PI/180}function T(h,t,e){return Math.min(Math.max(h,t),e)}function w(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 S(h,t){const e=Math.pow(10,t);return Math.round(h*e)/e}function y(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 E(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:S(l,4),y:S(u,4),width:S(d,4),height:S(i,4)}}class x extends EventTarget{constructor(t,e,s,n,a,r,o=.1,c=10){super(),g(this,"wrapperBounds"),g(this,"canvasBounds"),g(this,"gestureStartRotate",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),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}=E(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(),this.dispatchEvent(new Event("init"))}),u.observe(this.canvasElement),l.observe(this.element),console.log("INIT!")}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.gestureStartRotate=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.gestureStartRotate+R(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;y(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]),N=w(Y,A,p);i=N[0]-Y[0],f=N[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=w([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){console.log("....apply transform");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=w(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=w(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;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@zoompinch/elements",
   "description": "Custom elements wrapper ZoomPinch - reactive pinch & zoom component",
-  "version": "0.0.8",
+  "version": "0.0.10",
+  "private": false,
   "type": "module",
   "main": "./dist/zoompinch-elements.umd.js",
   "module": "./dist/zoompinch-elements.es.js",
@@ -25,6 +26,14 @@
     "vite": "^6.4.1"
   },
   "dependencies": {
-    "@zoompinch/core": "^0.0.8"
+    "@zoompinch/core": "^0.0.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://zoompinch.pages.dev/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ElyaConrad/zoompinch"
   }
 }