@zoompinch/core 0.0.6 → 0.0.8

package/dist/zoompinch-core.es.js

@@ -57,7 +57,7 @@ class E extends EventTarget {
       this.canvasBounds = { x: u, y: p, width: g, height: S }, this.update();
     });
     requestAnimationFrame(() => {
-      this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update();
+      this.wrapperBounds = this.element.getBoundingClientRect(), this.canvasBounds = this.canvasElement.getBoundingClientRect(), this.update(), this.dispatchEvent(new Event("init"));
     }), d.observe(this.canvasElement), l.observe(this.element), console.log("INIT");
   }
   get canvasElement() {

package/dist/zoompinch-core.umd.js

@@ -1 +1 @@
-(function(p,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(p=typeof globalThis<"u"?globalThis:p||self,d(p.Zoompinch={}))})(this,(function(p){"use strict";var D=Object.defineProperty;var F=(p,d,m)=>d in p?D(p,d,{enumerable:!0,configurable:!0,writable:!0,value:m}):p[d]=m;var S=(p,d,m)=>F(p,typeof d!="symbol"?d+"":d,m);function d(o){return o*Math.PI/180}function m(o,c,t){return Math.min(Math.max(o,c),t)}function Y(o,c,t){const[e,s]=o,[n,a]=c,r=Math.cos(t)*(e-n)-Math.sin(t)*(s-a)+n,i=Math.sin(t)*(e-n)+Math.cos(t)*(s-a)+a;return[r,i]}function X(o,c){const t=Math.pow(10,c);return Math.round(o*t)/t}function M(o){var c=!1;return o.wheelDeltaY?o.wheelDeltaY===o.deltaY*-3&&(c=!0):o.deltaMode===0&&(c=!0),c}function C(o,c){const t=c.find(e=>o%e===0);return t?o/t:1}function P(o,c,t,e,s){let n=o.left-c,a=o.top-t;const r=Math.cos(-s),i=Math.sin(-s);let l=n*r-a*i,h=n*i+a*r;const u=o.width/e,f=o.height/e;return l/=e,h/=e,{x:X(l,4),y:X(h,4),width:X(u,4),height:X(f,4)}}class x extends EventTarget{constructor(t,e,s,n,a,r,i=.1,l=10){super();S(this,"wrapperBounds");S(this,"canvasBounds");S(this,"gestureStartRotate",0);S(this,"dragStart",null);S(this,"dragStartFrozenX",null);S(this,"dragStartFrozenY",null);S(this,"touchStarts",null);S(this,"touchStartTranslateX",0);S(this,"touchStartTranslateY",0);this.element=t,this.offset=e,this.translateX=s,this.translateY=n,this.scale=a,this.rotate=r,this.minScale=i,this.maxScale=l;const h=new ResizeObserver(()=>{const{x:f,y:g,width:v,height:w}=this.element.getBoundingClientRect();this.wrapperBounds={x:f,y:g,width:v,height:w},this.update()}),u=new ResizeObserver(()=>{const{x:f,y:g,width:v,height:w}=P(this.canvasElement.getBoundingClientRect(),this.renderingTranslateX,this.renderingTranslateY,this.renderinScale,this.renderingRotate);this.canvasBounds={x:f,y:g,width:v,height:w},this.update()});requestAnimationFrame(()=>{this.wrapperBounds=this.element.getBoundingClientRect(),this.canvasBounds=this.canvasElement.getBoundingClientRect(),this.update()}),u.observe(this.canvasElement),h.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+d(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;M(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 i=this.scale;if(n){const l=-s/100*i,h=m(i+l,this.minScale,this.maxScale),u=this.relativeWrapperCoordinatesFromClientCoords(t.clientX,t.clientY),[f,g]=this.calcProjectionTranslate(h,u,this.normalizeMatrixCoordinates(t.clientX,t.clientY));this.translateX=f,this.translateY=g,this.scale=h}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,i=m(r/a,this.minScale,this.maxScale),l=[e[0][0]/this.wrapperInnerWidth,e[0][1]/this.wrapperInnerHeight],h=this.touchStarts[0].canvasRel,[u,f]=this.calcProjectionTranslate(i,l,h,0);let g=0,v=0,w=0;const y=Math.atan2(n[1]-s[1],n[0]-s[0]);w=Math.atan2(e[1][1]-e[0][1],e[1][0]-e[0][0])-y;const T=(I,W)=>[this.offset.left+this.canvasBounds.width*I*this.naturalScale*i+u,this.offset.top+this.canvasBounds.height*W*this.naturalScale*i+f],R=T(0,0),z=T(this.touchStarts[0].canvasRel[0],this.touchStarts[0].canvasRel[1]),B=Y(R,z,w);g=B[0]-R[0],v=B[1]-R[1],this.scale=i,this.rotate=w,this.translateX=u+g,this.translateY=f+v}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,i=s[0]*a*t,l=s[1]*r*t,h=Y([i,l],[0,0],n??this.rotate),u=e[0]*this.wrapperInnerWidth,f=e[1]*this.wrapperInnerHeight,g=u-h[0],v=f-h[1];return[g,v]}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 i=[this.offset.left,this.offset.top],l=[this.offset.left+this.canvasBounds.width*(s*this.naturalScale)*t,this.offset.top+this.canvasBounds.height*(s*this.naturalScale)*e],h=Y(l,i,r);return[h[0]+n,h[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),i=[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]],l=this.composeRelPoint(a[0],a[1],t,e,s,n),h=l[0]-i[0],u=l[1]-i[1];return[h,u]}getCanvasCoordsRel(t,e){const s=[0,0],n=[t-this.translateX,e-this.translateY],a=Y(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(){}}p.Zoompinch=x,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
+(function(p,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(p=typeof globalThis<"u"?globalThis:p||self,d(p.Zoompinch={}))})(this,(function(p){"use strict";var D=Object.defineProperty;var F=(p,d,w)=>d in p?D(p,d,{enumerable:!0,configurable:!0,writable:!0,value:w}):p[d]=w;var S=(p,d,w)=>F(p,typeof d!="symbol"?d+"":d,w);function d(o){return o*Math.PI/180}function w(o,c,t){return Math.min(Math.max(o,c),t)}function Y(o,c,t){const[e,s]=o,[n,a]=c,r=Math.cos(t)*(e-n)-Math.sin(t)*(s-a)+n,i=Math.sin(t)*(e-n)+Math.cos(t)*(s-a)+a;return[r,i]}function X(o,c){const t=Math.pow(10,c);return Math.round(o*t)/t}function M(o){var c=!1;return o.wheelDeltaY?o.wheelDeltaY===o.deltaY*-3&&(c=!0):o.deltaMode===0&&(c=!0),c}function C(o,c){const t=c.find(e=>o%e===0);return t?o/t:1}function P(o,c,t,e,s){let n=o.left-c,a=o.top-t;const r=Math.cos(-s),i=Math.sin(-s);let l=n*r-a*i,h=n*i+a*r;const u=o.width/e,f=o.height/e;return l/=e,h/=e,{x:X(l,4),y:X(h,4),width:X(u,4),height:X(f,4)}}class x extends EventTarget{constructor(t,e,s,n,a,r,i=.1,l=10){super();S(this,"wrapperBounds");S(this,"canvasBounds");S(this,"gestureStartRotate",0);S(this,"dragStart",null);S(this,"dragStartFrozenX",null);S(this,"dragStartFrozenY",null);S(this,"touchStarts",null);S(this,"touchStartTranslateX",0);S(this,"touchStartTranslateY",0);this.element=t,this.offset=e,this.translateX=s,this.translateY=n,this.scale=a,this.rotate=r,this.minScale=i,this.maxScale=l;const h=new ResizeObserver(()=>{const{x:f,y:g,width:v,height:m}=this.element.getBoundingClientRect();this.wrapperBounds={x:f,y:g,width:v,height:m},this.update()}),u=new ResizeObserver(()=>{const{x:f,y:g,width:v,height:m}=P(this.canvasElement.getBoundingClientRect(),this.renderingTranslateX,this.renderingTranslateY,this.renderinScale,this.renderingRotate);this.canvasBounds={x:f,y:g,width:v,height:m},this.update()});requestAnimationFrame(()=>{this.wrapperBounds=this.element.getBoundingClientRect(),this.canvasBounds=this.canvasElement.getBoundingClientRect(),this.update(),this.dispatchEvent(new Event("init"))}),u.observe(this.canvasElement),h.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+d(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;M(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 i=this.scale;if(n){const l=-s/100*i,h=w(i+l,this.minScale,this.maxScale),u=this.relativeWrapperCoordinatesFromClientCoords(t.clientX,t.clientY),[f,g]=this.calcProjectionTranslate(h,u,this.normalizeMatrixCoordinates(t.clientX,t.clientY));this.translateX=f,this.translateY=g,this.scale=h}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,i=w(r/a,this.minScale,this.maxScale),l=[e[0][0]/this.wrapperInnerWidth,e[0][1]/this.wrapperInnerHeight],h=this.touchStarts[0].canvasRel,[u,f]=this.calcProjectionTranslate(i,l,h,0);let g=0,v=0,m=0;const y=Math.atan2(n[1]-s[1],n[0]-s[0]);m=Math.atan2(e[1][1]-e[0][1],e[1][0]-e[0][0])-y;const T=(I,W)=>[this.offset.left+this.canvasBounds.width*I*this.naturalScale*i+u,this.offset.top+this.canvasBounds.height*W*this.naturalScale*i+f],R=T(0,0),z=T(this.touchStarts[0].canvasRel[0],this.touchStarts[0].canvasRel[1]),B=Y(R,z,m);g=B[0]-R[0],v=B[1]-R[1],this.scale=i,this.rotate=m,this.translateX=u+g,this.translateY=f+v}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,i=s[0]*a*t,l=s[1]*r*t,h=Y([i,l],[0,0],n??this.rotate),u=e[0]*this.wrapperInnerWidth,f=e[1]*this.wrapperInnerHeight,g=u-h[0],v=f-h[1];return[g,v]}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 i=[this.offset.left,this.offset.top],l=[this.offset.left+this.canvasBounds.width*(s*this.naturalScale)*t,this.offset.top+this.canvasBounds.height*(s*this.naturalScale)*e],h=Y(l,i,r);return[h[0]+n,h[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),i=[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]],l=this.composeRelPoint(a[0],a[1],t,e,s,n),h=l[0]-i[0],u=l[1]-i[1];return[h,u]}getCanvasCoordsRel(t,e){const s=[0,0],n=[t-this.translateX,e-this.translateY],a=Y(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(){}}p.Zoompinch=x,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zoompinch/core",
   "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.6",
+  "version": "0.0.8",
   "private": false,
   "type": "module",
   "main": "./dist/zoompinch-core.umd.js",