svelte-gestures - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # Changelog
 
+## 1.2.0
+
+`rotate` and `pinch` actions emit center coordinates of the gesture.
+
 ## 1.1.0
 
 Core lib function `setPointerControls` now accept argument, by which one can manually set `touch-action` css property. It is not used in swipe recogniser.
+
 ## 1.0.6
@@ -7,0 +12,0 @@

dist/index.es.js

 const DEFAULT_DELAY = 300;
 const DEFAULT_MIN_SWIPE_DISTANCE = 60; // in pixels
 
+const DEFAULT_TOUCH_ACTION = 'none';
+
 function addEventListener(node, event, handler) {
@@ -9,2 +11,18 @@ node.addEventListener(event, handler);
 
+function getCenterOfTwoPoints(node, activeEvents) {
+  const rect = node.getBoundingClientRect();
+  const xDistance = Math.abs(activeEvents[0].clientX - activeEvents[1].clientX);
+  const yDistance = Math.abs(activeEvents[0].clientY - activeEvents[1].clientY);
+  const minX = Math.min(activeEvents[0].clientX, activeEvents[1].clientX);
+  const minY = Math.min(activeEvents[0].clientY, activeEvents[1].clientY);
+  const centerX = minX + xDistance / 2;
+  const centerY = minY + yDistance / 2;
+  const x = Math.round(centerX - rect.left);
+  const y = Math.round(centerY - rect.top);
+  return {
+    x,
+    y
+  };
+}
+
 function removeEvent(event, activeEvents) {
@@ -25,4 +43,4 @@ return activeEvents.filter(activeEvent => {
 
-function setPointerControls(gestureName, node, onMoveCallback, onDownCallback, onUpCallback) {
-  node.style.touchAction = 'none';
+function setPointerControls(gestureName, node, onMoveCallback, onDownCallback, onUpCallback, touchAction = DEFAULT_TOUCH_ACTION) {
+  node.style.touchAction = touchAction;
   let activeEvents = [];
@@ -112,2 +130,3 @@
   let initDistance = 0;
+  let pinchCenter;
 
@@ -123,2 +142,3 @@ function onUp(activeEvents) {
       initDistance = getPointersDistance(activeEvents);
+      pinchCenter = getCenterOfTwoPoints(node, activeEvents);
     }
@@ -135,3 +155,4 @@ }
           detail: {
-            scale
+            scale,
+            center: pinchCenter
           }
@@ -181,2 +202,3 @@ }));
   let initAngle = 0;
+  let rotationCenter;
 
@@ -194,2 +216,3 @@ function onUp(activeEvents) {
       });
+      rotationCenter = getCenterOfTwoPoints(node, activeEvents);
       initAngle = getPointersAngleDeg(activeEvents);
@@ -213,3 +236,4 @@ }
           detail: {
-            rotation
+            rotation,
+            center: rotationCenter
           }
@@ -228,3 +252,4 @@ }));
   timeframe: DEFAULT_DELAY,
-  minSwipeDistance: DEFAULT_MIN_SWIPE_DISTANCE
+  minSwipeDistance: DEFAULT_MIN_SWIPE_DISTANCE,
+  touchAction: DEFAULT_TOUCH_ACTION
 }) {
@@ -268,3 +293,3 @@ const gestureName = 'swipe';
 
-  return setPointerControls(gestureName, node, null, onDown, onUp);
+  return setPointerControls(gestureName, node, null, onDown, onUp, parameters.touchAction);
 }
@@ -303,2 +328,2 @@
 
-export { DEFAULT_DELAY, DEFAULT_MIN_SWIPE_DISTANCE, pan, pinch, rotate, setPointerControls, swipe, tap };
+export { DEFAULT_DELAY, DEFAULT_MIN_SWIPE_DISTANCE, DEFAULT_TOUCH_ACTION, getCenterOfTwoPoints, pan, pinch, rotate, setPointerControls, swipe, tap };

dist/index.umd.min.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t=t||self).svelteGestures={})}(this,(function(t){"use strict";const n=300;function e(t,n,e){return t.addEventListener(n,e),()=>t.removeEventListener(n,e)}function i(t,n,e,i,o){t.dispatchEvent(new CustomEvent(`${n}${o}`,{detail:{event:e,pointersCount:i.length}}))}function o(t,n,o,l,c){n.style.touchAction="none";let u=[];const r=e(n,"pointerdown",(function(r){u.push(r),i(n,t,r,u,"down"),null==l||l(u,r);const a=r.pointerId;function s(e){a===e.pointerId&&(u=function(t,n){return n.filter((n=>t.pointerId!==n.pointerId))}(e,u),u.length||(f(),p(),d()),i(n,t,e,u,"up"),null==c||c(u,e))}const f=e(n,"pointermove",(e=>{u=u.map((t=>e.pointerId===t.pointerId?e:t)),i(n,t,e,u,"move"),null==o||o(u,e)})),p=e(n,"lostpointercapture",(t=>{s(t)})),d=e(n,"pointerup",(t=>{s(t)}))}));return{destroy:()=>{r()}}}function l(t){return Math.hypot(t[0].clientX-t[1].clientX,t[0].clientY-t[1].clientY)}function c(t){const n={left:{top:360,bottom:180},right:{top:0,bottom:180}},e=t[1].clientX-t[0].clientX,i=t[0].clientY-t[1].clientY,o=Math.atan(e/i)/(Math.PI/180),l=e>0?n.right:n.left;return o+(i>0?l.top:l.bottom)}t.DEFAULT_DELAY=n,t.DEFAULT_MIN_SWIPE_DISTANCE=60,t.pan=function(t,e={delay:n}){let i;return o("pan",t,(function(n,o){if(1===n.length&&Date.now()-i>e.delay){const n=t.getBoundingClientRect(),e=Math.round(o.clientX-n.left),i=Math.round(o.clientY-n.top);e>=0&&i>=0&&e<=n.width&&i<=n.height&&t.dispatchEvent(new CustomEvent("pan",{detail:{x:e,y:i}}))}}),(function(){i=Date.now()}),null)},t.pinch=function(t){const n="pinch";let e=null,i=0;return o(n,t,(function(o){if(2===o.length){const c=l(o);if(null!==e&&c!==e){const e=c/i;t.dispatchEvent(new CustomEvent(n,{detail:{scale:e}}))}e=c}}),(function(t){2===t.length&&(i=l(t))}),(function(t){1===t.length&&(e=null)}))},t.rotate=function(t){const n="rotate";let e=null,i=0;return o(n,t,(function(o){if(2===o.length){const l=c(o);if(null!==e&&l!==e){let e=l-i;e>180&&(e-=360),t.dispatchEvent(new CustomEvent(n,{detail:{rotation:e}}))}e=l}}),(function(t){2===t.length&&(t=t.sort(((t,n)=>t.clientX-n.clientX)),i=c(t))}),(function(t){1===t.length&&(e=null)}))},t.setPointerControls=o,t.swipe=function(t,e={timeframe:n,minSwipeDistance:60}){const i="swipe";let l,c,u;return o(i,t,null,(function(t,n){c=n.clientX,u=n.clientY,l=Date.now()}),(function(n,o){if(0===n.length&&Date.now()-l<e.timeframe){const n=o.clientX-c,l=o.clientY-u,r=Math.abs(n),a=Math.abs(l);let s=null;r>=2*a&&r>e.minSwipeDistance?s=n>0?"right":"left":a>=2*r&&a>e.minSwipeDistance&&(s=l>0?"bottom":"top"),s&&t.dispatchEvent(new CustomEvent(i,{detail:{direction:s}}))}}))},t.tap=function(t,e={timeframe:n}){let i,l,c;return o("tap",t,null,(function(t,n){l=n.clientX,c=n.clientY,i=Date.now()}),(function(n,o){if(Math.abs(o.clientX-l)<4&&Math.abs(o.clientY-c)<4&&Date.now()-i<e.timeframe){const n=t.getBoundingClientRect(),e=Math.round(o.clientX-n.left),i=Math.round(o.clientY-n.top);t.dispatchEvent(new CustomEvent("tap",{detail:{x:e,y:i}}))}}))},Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t=t||self).svelteGestures={})}(this,(function(t){"use strict";const n=300,e="none";function i(t,n,e){return t.addEventListener(n,e),()=>t.removeEventListener(n,e)}function o(t,n){const e=t.getBoundingClientRect(),i=Math.abs(n[0].clientX-n[1].clientX),o=Math.abs(n[0].clientY-n[1].clientY),c=Math.min(n[0].clientX,n[1].clientX)+i/2,l=Math.min(n[0].clientY,n[1].clientY)+o/2;return{x:Math.round(c-e.left),y:Math.round(l-e.top)}}function c(t,n,e,i,o){t.dispatchEvent(new CustomEvent(`${n}${o}`,{detail:{event:e,pointersCount:i.length}}))}function l(t,n,e,o,l,u="none"){n.style.touchAction=u;let r=[];const a=i(n,"pointerdown",(function(u){r.push(u),c(n,t,u,r,"down"),null==o||o(r,u);const a=u.pointerId;function s(e){a===e.pointerId&&(r=function(t,n){return n.filter((n=>t.pointerId!==n.pointerId))}(e,r),r.length||(f(),p(),h()),c(n,t,e,r,"up"),null==l||l(r,e))}const f=i(n,"pointermove",(i=>{r=r.map((t=>i.pointerId===t.pointerId?i:t)),c(n,t,i,r,"move"),null==e||e(r,i)})),p=i(n,"lostpointercapture",(t=>{s(t)})),h=i(n,"pointerup",(t=>{s(t)}))}));return{destroy:()=>{a()}}}function u(t){return Math.hypot(t[0].clientX-t[1].clientX,t[0].clientY-t[1].clientY)}function r(t){const n={left:{top:360,bottom:180},right:{top:0,bottom:180}},e=t[1].clientX-t[0].clientX,i=t[0].clientY-t[1].clientY,o=Math.atan(e/i)/(Math.PI/180),c=e>0?n.right:n.left;return o+(i>0?c.top:c.bottom)}t.DEFAULT_DELAY=n,t.DEFAULT_MIN_SWIPE_DISTANCE=60,t.DEFAULT_TOUCH_ACTION=e,t.getCenterOfTwoPoints=o,t.pan=function(t,e={delay:n}){let i;return l("pan",t,(function(n,o){if(1===n.length&&Date.now()-i>e.delay){const n=t.getBoundingClientRect(),e=Math.round(o.clientX-n.left),i=Math.round(o.clientY-n.top);e>=0&&i>=0&&e<=n.width&&i<=n.height&&t.dispatchEvent(new CustomEvent("pan",{detail:{x:e,y:i}}))}}),(function(){i=Date.now()}),null)},t.pinch=function(t){const n="pinch";let e,i=null,c=0;return l(n,t,(function(o){if(2===o.length){const l=u(o);if(null!==i&&l!==i){const i=l/c;t.dispatchEvent(new CustomEvent(n,{detail:{scale:i,center:e}}))}i=l}}),(function(n){2===n.length&&(c=u(n),e=o(t,n))}),(function(t){1===t.length&&(i=null)}))},t.rotate=function(t){const n="rotate";let e,i=null,c=0;return l(n,t,(function(o){if(2===o.length){const l=r(o);if(null!==i&&l!==i){let i=l-c;i>180&&(i-=360),t.dispatchEvent(new CustomEvent(n,{detail:{rotation:i,center:e}}))}i=l}}),(function(n){2===n.length&&(n=n.sort(((t,n)=>t.clientX-n.clientX)),e=o(t,n),c=r(n))}),(function(t){1===t.length&&(i=null)}))},t.setPointerControls=l,t.swipe=function(t,i={timeframe:n,minSwipeDistance:60,touchAction:e}){const o="swipe";let c,u,r;return l(o,t,null,(function(t,n){u=n.clientX,r=n.clientY,c=Date.now()}),(function(n,e){if(0===n.length&&Date.now()-c<i.timeframe){const n=e.clientX-u,c=e.clientY-r,l=Math.abs(n),a=Math.abs(c);let s=null;l>=2*a&&l>i.minSwipeDistance?s=n>0?"right":"left":a>=2*l&&a>i.minSwipeDistance&&(s=c>0?"bottom":"top"),s&&t.dispatchEvent(new CustomEvent(o,{detail:{direction:s}}))}}),i.touchAction)},t.tap=function(t,e={timeframe:n}){let i,o,c;return l("tap",t,null,(function(t,n){o=n.clientX,c=n.clientY,i=Date.now()}),(function(n,l){if(Math.abs(l.clientX-o)<4&&Math.abs(l.clientY-c)<4&&Date.now()-i<e.timeframe){const n=t.getBoundingClientRect(),e=Math.round(l.clientX-n.left),i=Math.round(l.clientY-n.top);t.dispatchEvent(new CustomEvent("tap",{detail:{x:e,y:i}}))}}))},Object.defineProperty(t,"__esModule",{value:!0})}));

dist/shared.d.ts

 export declare const DEFAULT_DELAY = 300;
 export declare const DEFAULT_MIN_SWIPE_DISTANCE = 60;
-export declare function setPointerControls(gestureName: string, node: HTMLElement, onMoveCallback: (activeEvents: PointerEvent[], event: PointerEvent) => void, onDownCallback: (activeEvents: PointerEvent[], event: PointerEvent) => void, onUpCallback: (activeEvents: PointerEvent[], event: PointerEvent) => void): {
+export declare const DEFAULT_TOUCH_ACTION = "none";
+export declare function getCenterOfTwoPoints(node: HTMLElement, activeEvents: PointerEvent[]): {
+    x: number;
+    y: number;
+};
+export declare function setPointerControls(gestureName: string, node: HTMLElement, onMoveCallback: (activeEvents: PointerEvent[], event: PointerEvent) => void, onDownCallback: (activeEvents: PointerEvent[], event: PointerEvent) => void, onUpCallback: (activeEvents: PointerEvent[], event: PointerEvent) => void, touchAction?: string): {
     destroy: () => void;
 };
 //# sourceMappingURL=shared.d.ts.map

dist/swipe.d.ts

 export declare function swipe(node: HTMLElement, parameters?: {
     timeframe: number;
     minSwipeDistance: number;
+    touchAction: string;
 }): {
@@ -5,0 +6,0 @@ destroy: () => void;

package.json

@@ -5,3 +5,4 @@ {
   "repository": "https://github.com/Rezi/svelte-gestures",
-  "version": "1.1.0",
+  "license" : "MIT",
+  "version": "1.2.0",
   "main": "dist/index.umd.min.js",
@@ -8,0 +9,0 @@ "module": "dist/index.es.js",

README.md

@@ -48,4 +48,6 @@ # svelte-gestures
 
-Pinch action fires `pinch` event: `event.detail.scale`. Initial scale after first two registered points is 1, then it either decrease toward zero as the points get nearer, or grow up as their distance grows.
+Pinch action fires `pinch` event: `event.detail` with properties `{scale:number; center: {x:number; y:number;}}`. Initial scale after first two registered points is 1, then it either decrease toward zero as the points get nearer, or grow up as their distance grows.
 
+`x` and `y` represents coordinates in `px` of an imaginary center of the pinch gesture. They originate in top left corner of the element on which pinch is used.
+
 [> repl Pinch demo](https://svelte.dev/repl/6f6d34e2b4ab420ab4e192a5046c86b4?version=3.38.2)
@@ -57,5 +59,9 @@
   let scale;
+  let x;
+  let y;
 
   function handler(event) {
     scale = event.detail.scale;
+    x = event.detail.center.x;
+    y = event.detail.center.y;
   }
@@ -69,3 +75,4 @@ </script>
 >
-  pinch scale: {scale}
+  pinch scale: {scale} <br />
+  center: x {x}, y {y}
 </div>
@@ -76,4 +83,6 @@ ```
 
-Rotate action fires `rotate` event: `event.detail.rotation`. Initial rotation after first two registered points is 0, then it either decrease to -180 as the points rotate anticlockwise, or grow up 180 as they rotate clockwise.
+Rotate action fires `rotate` event: `event.detail`. with properties`{rotation:number; center: {x:number;y:number;}}`. Initial rotation after first two registered points is 0, then it either decrease to -180 as the points rotate anticlockwise, or grow up 180 as they rotate clockwise.
 
+`x` and `y` represents coordinates in `px` of an imaginary center of the rotation gesture. They originate in top left corner of the element on which rotate is used.
+
 `event.detail.rotation` represents angle between -180 and 180 degrees.
@@ -87,5 +96,9 @@
   let rotation;
+  let x;
+  let y;
 
   function handler(event) {
     rotation = event.detail.rotation;
+    x = event.detail.center.x;
+    y = event.detail.center.y;
   }
@@ -99,3 +112,4 @@ </script>
 >
-  rotation: {rotation}
+  rotation: {rotation} <br />
+  center: x {x}, y {y}
 </div>
@@ -193,2 +207,3 @@ ```
     const gestureName = 'doubletap';
+    const spread = 20;
 
@@ -199,3 +214,2 @@ let startTime: number;
     let tapCount = 0;
-    let spread = 20;
     let timeout;
@@ -202,0 +216,0 @@

No alert changes

Improved metrics

Total package byte prevSize

27646

increased by10.31%

Lines of code

325

increased by10.17%

Number of lines in readme file

262

increased by5.65%

No dependency changes