@daybrush/drag - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

declaration/Dragger.d.ts

@@ -14,2 +14,5 @@ import { DragOptions, Client } from "./types";
     private startClients;
+    private movement;
+    private startPinchClients;
+    private startDistance;
     constructor(el: Element, options?: DragOptions);
@@ -16,0 +19,0 @@ isDragging(): boolean;

declaration/types.d.ts

@@ -51,2 +51,3 @@ import { IObject } from "@daybrush/utils";
     preventRightClick?: boolean;
+    pinchThreshold?: number;
     dragstart?: (options: OnDragStart) => any;
@@ -53,0 +54,0 @@ drag?: (options: OnDrag) => any;

declaration/utils.d.ts

 import { Client, Position } from "./types";
 import { IArrayFormat } from "@daybrush/utils";
-export declare function getPinchDragPosition(clients: Client[], prevClients: Client[], startClients: Client[]): Position;
-export declare function isMultiTouch(e: any): boolean;
+export declare function getPinchDragPosition(clients: Client[], prevClients: Client[], startClients: Client[], startPinchClients: Client[]): Position;
+export declare function isMultiTouch(e: any): e is TouchEvent;
 export declare function getPositionEvent(e: any): Client[];
@@ -6,0 +6,0 @@ export declare function getPosition(client: Client, prevClient: Client, startClient: Client): Position;

dist/drag.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.8.3
+version: 0.9.0
 */
@@ -42,8 +42,8 @@ 'use strict';
 
-function getPinchDragPosition(clients, prevClients, startClients) {
+function getPinchDragPosition(clients, prevClients, startClients, startPinchClients) {
   var nowCenter = getAverageClient(clients);
   var prevCenter = getAverageClient(prevClients);
-  var startCenter = getAverageClient(startClients);
-  var pinchClient = getAddClient(startClients[0], getMinusClient(nowCenter, startCenter));
-  var pinchPrevClient = getAddClient(startClients[0], getMinusClient(prevCenter, startCenter));
+  var startCenter = getAverageClient(startPinchClients);
+  var pinchClient = getAddClient(startPinchClients[0], getMinusClient(nowCenter, startCenter));
+  var pinchPrevClient = getAddClient(startPinchClients[0], getMinusClient(prevCenter, startCenter));
   return getPosition(pinchClient, pinchPrevClient, startClients[0]);
@@ -145,2 +145,5 @@ }
     this.startClients = [];
+    this.movement = 0;
+    this.startPinchClients = [];
+    this.startDistance = 0;
 
@@ -152,4 +155,10 @@ this.onDragStart = function (e) {
 
-      if (!_this.isDrag && isMultiTouch(e) && !_this.pinchFlag) {
-        _this.onPinchStart(e);
+      if (isMultiTouch(e)) {
+        if (!_this.flag && e.touches.length !== e.changedTouches.length) {
+          return;
+        }
+
+        if (!_this.pinchFlag) {
+          _this.onPinchStart(e);
+        }
       }
@@ -167,2 +176,3 @@
       _this.datas = {};
+      _this.movement = 0;
       var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
@@ -198,8 +208,11 @@ var _a = _this.options,
       var startClients = _this.startClients;
-      var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+      var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients, _this.startPinchClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+      var deltaX = position.deltaX,
+          deltaY = position.deltaY;
 
-      if (!position.deltaX && !position.deltaY) {
+      if (!deltaX && !deltaY) {
         return;
       }
 
+      _this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       _this.isDrag = true;
@@ -228,3 +241,3 @@ var drag = _this.options.drag;
       var startClients = _this.startClients;
-      var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
+      var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients, _this.startPinchClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
       _this.startClients = [];
@@ -242,2 +255,3 @@ _this.prevClients = [];
       preventRightClick: true,
+      pinchThreshold: 1,
       events: ["touch", "mouse"]
@@ -277,5 +291,12 @@ }, options);
 
+    var _c = this.options,
+        pinchstart = _c.pinchstart,
+        pinchThreshold = _c.pinchThreshold;
+
+    if (this.isDrag && this.movement > pinchThreshold) {
+      return;
+    }
+
+    var pinchClients = getClients(e.changedTouches);
     this.pinchFlag = true;
-    var pinchstart = this.options.pinchstart;
-    var pinchClients = getClients(e.changedTouches);
 
@@ -286,2 +307,5 @@ (_a = this.startClients).push.apply(_a, pinchClients);
 
+    this.startDistance = getDist(this.prevClients);
+    this.startPinchClients = this.prevClients.slice();
+
     if (!pinchstart) {
@@ -291,3 +315,3 @@ return;
 
-    var startClients = this.startClients;
+    var startClients = this.prevClients;
     var startAverageClient = getAverageClient(startClients);
@@ -319,7 +343,6 @@ var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient);
     var distance = getDist(clients);
-    var startDistance = getDist(startClients);
     pinch(__assign({
       datas: this.datas,
       touches: getPositions(clients, prevClients, startClients),
-      scale: distance / startDistance,
+      scale: distance / this.startDistance,
       distance: distance
@@ -326,0 +349,0 @@ }, centerPosition, {

dist/drag.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.8.3
+version: 0.9.0
 */
@@ -40,8 +40,8 @@ import { removeEvent, addEvent } from '@daybrush/utils';
 
-function getPinchDragPosition(clients, prevClients, startClients) {
+function getPinchDragPosition(clients, prevClients, startClients, startPinchClients) {
   var nowCenter = getAverageClient(clients);
   var prevCenter = getAverageClient(prevClients);
-  var startCenter = getAverageClient(startClients);
-  var pinchClient = getAddClient(startClients[0], getMinusClient(nowCenter, startCenter));
-  var pinchPrevClient = getAddClient(startClients[0], getMinusClient(prevCenter, startCenter));
+  var startCenter = getAverageClient(startPinchClients);
+  var pinchClient = getAddClient(startPinchClients[0], getMinusClient(nowCenter, startCenter));
+  var pinchPrevClient = getAddClient(startPinchClients[0], getMinusClient(prevCenter, startCenter));
   return getPosition(pinchClient, pinchPrevClient, startClients[0]);
@@ -143,2 +143,5 @@ }
     this.startClients = [];
+    this.movement = 0;
+    this.startPinchClients = [];
+    this.startDistance = 0;
 
@@ -150,4 +153,10 @@ this.onDragStart = function (e) {
 
-      if (!_this.isDrag && isMultiTouch(e) && !_this.pinchFlag) {
-        _this.onPinchStart(e);
+      if (isMultiTouch(e)) {
+        if (!_this.flag && e.touches.length !== e.changedTouches.length) {
+          return;
+        }
+
+        if (!_this.pinchFlag) {
+          _this.onPinchStart(e);
+        }
       }
@@ -165,2 +174,3 @@
       _this.datas = {};
+      _this.movement = 0;
       var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
@@ -196,8 +206,11 @@ var _a = _this.options,
       var startClients = _this.startClients;
-      var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+      var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients, _this.startPinchClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+      var deltaX = position.deltaX,
+          deltaY = position.deltaY;
 
-      if (!position.deltaX && !position.deltaY) {
+      if (!deltaX && !deltaY) {
         return;
       }
 
+      _this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       _this.isDrag = true;
@@ -226,3 +239,3 @@ var drag = _this.options.drag;
       var startClients = _this.startClients;
-      var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
+      var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients, _this.startPinchClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
       _this.startClients = [];
@@ -240,2 +253,3 @@ _this.prevClients = [];
       preventRightClick: true,
+      pinchThreshold: 1,
       events: ["touch", "mouse"]
@@ -275,5 +289,12 @@ }, options);
 
+    var _c = this.options,
+        pinchstart = _c.pinchstart,
+        pinchThreshold = _c.pinchThreshold;
+
+    if (this.isDrag && this.movement > pinchThreshold) {
+      return;
+    }
+
+    var pinchClients = getClients(e.changedTouches);
     this.pinchFlag = true;
-    var pinchstart = this.options.pinchstart;
-    var pinchClients = getClients(e.changedTouches);
 
@@ -284,2 +305,5 @@ (_a = this.startClients).push.apply(_a, pinchClients);
 
+    this.startDistance = getDist(this.prevClients);
+    this.startPinchClients = this.prevClients.slice();
+
     if (!pinchstart) {
@@ -289,3 +313,3 @@ return;
 
-    var startClients = this.startClients;
+    var startClients = this.prevClients;
     var startAverageClient = getAverageClient(startClients);
@@ -317,7 +341,6 @@ var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient);
     var distance = getDist(clients);
-    var startDistance = getDist(startClients);
     pinch(__assign({
       datas: this.datas,
       touches: getPositions(clients, prevClients, startClients),
-      scale: distance / startDistance,
+      scale: distance / this.startDistance,
       distance: distance
@@ -324,0 +347,0 @@ }, centerPosition, {

dist/drag.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.8.3
+version: 0.9.0
 */
@@ -44,8 +44,8 @@ (function (global, factory) {
 
-    function getPinchDragPosition(clients, prevClients, startClients) {
+    function getPinchDragPosition(clients, prevClients, startClients, startPinchClients) {
       var nowCenter = getAverageClient(clients);
       var prevCenter = getAverageClient(prevClients);
-      var startCenter = getAverageClient(startClients);
-      var pinchClient = getAddClient(startClients[0], getMinusClient(nowCenter, startCenter));
-      var pinchPrevClient = getAddClient(startClients[0], getMinusClient(prevCenter, startCenter));
+      var startCenter = getAverageClient(startPinchClients);
+      var pinchClient = getAddClient(startPinchClients[0], getMinusClient(nowCenter, startCenter));
+      var pinchPrevClient = getAddClient(startPinchClients[0], getMinusClient(prevCenter, startCenter));
       return getPosition(pinchClient, pinchPrevClient, startClients[0]);
@@ -192,2 +192,5 @@ }
         this.startClients = [];
+        this.movement = 0;
+        this.startPinchClients = [];
+        this.startDistance = 0;
 
@@ -199,4 +202,10 @@ this.onDragStart = function (e) {
 
-          if (!_this.isDrag && isMultiTouch(e) && !_this.pinchFlag) {
-            _this.onPinchStart(e);
+          if (isMultiTouch(e)) {
+            if (!_this.flag && e.touches.length !== e.changedTouches.length) {
+              return;
+            }
+
+            if (!_this.pinchFlag) {
+              _this.onPinchStart(e);
+            }
           }
@@ -214,2 +223,3 @@
           _this.datas = {};
+          _this.movement = 0;
           var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
@@ -245,8 +255,11 @@ var _a = _this.options,
           var startClients = _this.startClients;
-          var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+          var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients, _this.startPinchClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+          var deltaX = position.deltaX,
+              deltaY = position.deltaY;
 
-          if (!position.deltaX && !position.deltaY) {
+          if (!deltaX && !deltaY) {
             return;
           }
 
+          _this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
           _this.isDrag = true;
@@ -275,3 +288,3 @@ var drag = _this.options.drag;
           var startClients = _this.startClients;
-          var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
+          var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients, _this.startPinchClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
           _this.startClients = [];
@@ -289,2 +302,3 @@ _this.prevClients = [];
           preventRightClick: true,
+          pinchThreshold: 1,
           events: ["touch", "mouse"]
@@ -324,5 +338,12 @@ }, options);
 
+        var _c = this.options,
+            pinchstart = _c.pinchstart,
+            pinchThreshold = _c.pinchThreshold;
+
+        if (this.isDrag && this.movement > pinchThreshold) {
+          return;
+        }
+
+        var pinchClients = getClients(e.changedTouches);
         this.pinchFlag = true;
-        var pinchstart = this.options.pinchstart;
-        var pinchClients = getClients(e.changedTouches);
 
@@ -333,2 +354,5 @@ (_a = this.startClients).push.apply(_a, pinchClients);
 
+        this.startDistance = getDist(this.prevClients);
+        this.startPinchClients = this.prevClients.slice();
+
         if (!pinchstart) {
@@ -338,3 +362,3 @@ return;
 
-        var startClients = this.startClients;
+        var startClients = this.prevClients;
         var startAverageClient = getAverageClient(startClients);
@@ -366,7 +390,6 @@ var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient);
         var distance = getDist(clients);
-        var startDistance = getDist(startClients);
         pinch(__assign({
           datas: this.datas,
           touches: getPositions(clients, prevClients, startClients),
-          scale: distance / startDistance,
+          scale: distance / this.startDistance,
           distance: distance
@@ -373,0 +396,0 @@ }, centerPosition, {

dist/drag.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.8.3
+version: 0.9.0
 */
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t=t||self).Dragger={})}(this,function(t){"use strict";var c=function(){return(c=Object.assign||function(t){for(var n,i=1,s=arguments.length;i<s;i++)for(var e in n=arguments[i])Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t}).apply(this,arguments)};function o(t,n,i){var s=g(t),e=g(n),a=g(i);return l(r(i[0],v(s,a)),r(i[0],v(e,a)),i[0])}function h(t){return t.touches?f(t.touches):[e(t)]}function l(t,n,i){var s=t.clientX,e=t.clientY;return{clientX:s,clientY:e,deltaX:s-n.clientX,deltaY:e-n.clientY,distX:s-i.clientX,distY:e-i.clientY}}function u(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function p(t,i,s){return t.map(function(t,n){return l(t,i[n],s[n])})}function f(t){for(var n=Math.min(t.length,2),i=[],s=0;s<n;++s)i.push(e(t[s]));return i}function e(t){return{clientX:t.clientX,clientY:t.clientY}}function g(t){return{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function r(t,n){return{clientX:t.clientX+n.clientX,clientY:t.clientY+n.clientY}}function v(t,n){return{clientX:t.clientX-n.clientX,clientY:t.clientY-n.clientY}}function a(t,n,i,s){t.addEventListener(n,i,s)}function i(t,n,i){t.removeEventListener(n,i)}var s=function(){function t(t,n){var r=this;void 0===n&&(n={}),this.el=t,this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.onDragStart=function(t){if((r.flag||!1!==t.cancelable)&&(r.isDrag||!function(t){return t.touches&&2<=t.touches.length}(t)||r.pinchFlag||r.onPinchStart(t),!r.flag)){var n=r.startClients[0]?r.startClients:h(t);r.flag=!0,r.isDrag=!1,r.startClients=n,r.prevClients=n,r.datas={};var i=l(n[0],r.prevClients[0],r.startClients[0]),s=r.options,e=s.dragstart;(s.preventRightClick&&3===t.which||!1===(e&&e(c({datas:r.datas,inputEvent:t},i))))&&(r.startClients=[],r.prevClients=[],r.flag=!1),r.flag&&t.preventDefault()}},this.onDrag=function(t){if(r.flag){var n=h(t);r.pinchFlag&&r.onPinch(t,n);var i=r.prevClients,s=r.startClients,e=r.pinchFlag?o(n,i,s):l(n[0],i[0],s[0]);if(e.deltaX||e.deltaY){r.isDrag=!0;var a=r.options.drag;a&&a(c({datas:r.datas},e,{inputEvent:t})),r.prevClients=n}}},this.onDragEnd=function(t){if(r.flag){r.pinchFlag&&r.onPinchEnd(t),r.flag=!1;var n=r.options.dragend,i=r.prevClients,s=r.startClients,e=r.pinchFlag?o(i,i,s):l(i[0],i[0],s[0]);r.startClients=[],r.prevClients=[],n&&n(c({datas:r.datas,isDrag:r.isDrag,inputEvent:t},e))}},this.options=c({container:t,preventRightClick:!0,events:["touch","mouse"]},n);var i=this.options,s=i.container,e=i.events;this.isTouch=-1<e.indexOf("touch"),this.isMouse=-1<e.indexOf("mouse"),this.isMouse&&(a(t,"mousedown",this.onDragStart),a(s,"mousemove",this.onDrag),a(s,"mouseup",this.onDragEnd)),this.isTouch&&(a(t,"touchstart",this.onDragStart),a(s,"touchmove",this.onDrag),a(s,"touchend",this.onDragEnd))}var n=t.prototype;return n.isDragging=function(){return this.isDrag},n.isPinching=function(){return this.isPinch},n.onPinchStart=function(t){var n,i;this.pinchFlag=!0;var s=this.options.pinchstart,e=f(t.changedTouches);if((n=this.startClients).push.apply(n,e),(i=this.prevClients).push.apply(i,e),s){var a=this.startClients,r=g(a),o=l(r,r,r);s(c({datas:this.datas,touches:p(a,a,a)},o,{inputEvent:t}))}},n.onPinch=function(t,n){if(this.flag&&this.pinchFlag){this.isPinch=!0;var i=this.options.pinch;if(i){var s=this.prevClients,e=this.startClients,a=l(g(n),g(s),g(e)),r=u(n),o=u(e);i(c({datas:this.datas,touches:p(n,s,e),scale:r/o,distance:r},a,{inputEvent:t}))}}},n.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var n=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var i=this.options.pinchend;if(i){var s=this.prevClients,e=this.startClients,a=l(g(s),g(s),g(e));i(c({datas:this.datas,isPinch:n,touches:p(s,s,e)},a,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},n.unset=function(){var t=this.el,n=this.options.container;this.isMouse&&(i(t,"mousedown",this.onDragStart),i(n,"mousemove",this.onDrag),i(n,"mouseup",this.onDragEnd)),this.isTouch&&(i(t,"touchstart",this.onDragStart),i(n,"touchmove",this.onDrag),i(n,"touchend",this.onDragEnd))},t}();t.default=s,t.drag=function(t,n){return new s(t,n)}});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).Dragger={})}(this,function(t){"use strict";var l=function(){return(l=Object.assign||function(t){for(var i,n=1,s=arguments.length;n<s;n++)for(var e in i=arguments[n])Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e]);return t}).apply(this,arguments)};function o(t,i,n,s){var e=d(t),a=d(i),r=d(s);return p(h(s[0],c(e,r)),h(s[0],c(a,r)),n[0])}function u(t){return t.touches?v(t.touches):[e(t)]}function p(t,i,n){var s=t.clientX,e=t.clientY;return{clientX:s,clientY:e,deltaX:s-i.clientX,deltaY:e-i.clientY,distX:s-n.clientX,distY:e-n.clientY}}function f(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function g(t,n,s){return t.map(function(t,i){return p(t,n[i],s[i])})}function v(t){for(var i=Math.min(t.length,2),n=[],s=0;s<i;++s)n.push(e(t[s]));return n}function e(t){return{clientX:t.clientX,clientY:t.clientY}}function d(t){return{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function h(t,i){return{clientX:t.clientX+i.clientX,clientY:t.clientY+i.clientY}}function c(t,i){return{clientX:t.clientX-i.clientX,clientY:t.clientY-i.clientY}}function a(t,i,n,s){t.addEventListener(i,n,s)}function n(t,i,n){t.removeEventListener(i,n)}var s=function(){function t(t,i){var c=this;void 0===i&&(i={}),this.el=t,this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.onDragStart=function(t){if(c.flag||!1!==t.cancelable){if(function(t){return t.touches&&2<=t.touches.length}(t)){if(!c.flag&&t.touches.length!==t.changedTouches.length)return;c.pinchFlag||c.onPinchStart(t)}if(!c.flag){var i=c.startClients[0]?c.startClients:u(t);c.flag=!0,c.isDrag=!1,c.startClients=i,c.prevClients=i,c.datas={};var n=p(i[c.movement=0],c.prevClients[0],c.startClients[0]),s=c.options,e=s.dragstart;(s.preventRightClick&&3===t.which||!1===(e&&e(l({datas:c.datas,inputEvent:t},n))))&&(c.startClients=[],c.prevClients=[],c.flag=!1),c.flag&&t.preventDefault()}}},this.onDrag=function(t){if(c.flag){var i=u(t);c.pinchFlag&&c.onPinch(t,i);var n=c.prevClients,s=c.startClients,e=c.pinchFlag?o(i,n,s,c.startPinchClients):p(i[0],n[0],s[0]),a=e.deltaX,r=e.deltaY;if(a||r){c.movement+=Math.sqrt(a*a+r*r),c.isDrag=!0;var h=c.options.drag;h&&h(l({datas:c.datas},e,{inputEvent:t})),c.prevClients=i}}},this.onDragEnd=function(t){if(c.flag){c.pinchFlag&&c.onPinchEnd(t),c.flag=!1;var i=c.options.dragend,n=c.prevClients,s=c.startClients,e=c.pinchFlag?o(n,n,s,c.startPinchClients):p(n[0],n[0],s[0]);c.startClients=[],c.prevClients=[],i&&i(l({datas:c.datas,isDrag:c.isDrag,inputEvent:t},e))}},this.options=l({container:t,preventRightClick:!0,pinchThreshold:1,events:["touch","mouse"]},i);var n=this.options,s=n.container,e=n.events;this.isTouch=-1<e.indexOf("touch"),this.isMouse=-1<e.indexOf("mouse"),this.isMouse&&(a(t,"mousedown",this.onDragStart),a(s,"mousemove",this.onDrag),a(s,"mouseup",this.onDragEnd)),this.isTouch&&(a(t,"touchstart",this.onDragStart),a(s,"touchmove",this.onDrag),a(s,"touchend",this.onDragEnd))}var i=t.prototype;return i.isDragging=function(){return this.isDrag},i.isPinching=function(){return this.isPinch},i.onPinchStart=function(t){var i,n,s=this.options,e=s.pinchstart,a=s.pinchThreshold;if(!(this.isDrag&&this.movement>a)){var r=v(t.changedTouches);if(this.pinchFlag=!0,(i=this.startClients).push.apply(i,r),(n=this.prevClients).push.apply(n,r),this.startDistance=f(this.prevClients),this.startPinchClients=this.prevClients.slice(),e){var h=this.prevClients,c=d(h),o=p(c,c,c);e(l({datas:this.datas,touches:g(h,h,h)},o,{inputEvent:t}))}}},i.onPinch=function(t,i){if(this.flag&&this.pinchFlag){this.isPinch=!0;var n=this.options.pinch;if(n){var s=this.prevClients,e=this.startClients,a=p(d(i),d(s),d(e)),r=f(i);n(l({datas:this.datas,touches:g(i,s,e),scale:r/this.startDistance,distance:r},a,{inputEvent:t}))}}},i.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var i=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var s=this.prevClients,e=this.startClients,a=p(d(s),d(s),d(e));n(l({datas:this.datas,isPinch:i,touches:g(s,s,e)},a,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},i.unset=function(){var t=this.el,i=this.options.container;this.isMouse&&(n(t,"mousedown",this.onDragStart),n(i,"mousemove",this.onDrag),n(i,"mouseup",this.onDragEnd)),this.isTouch&&(n(t,"touchstart",this.onDragStart),n(i,"touchmove",this.onDrag),n(i,"touchend",this.onDragEnd))},t}();t.default=s,t.drag=function(t,i){return new s(t,i)}});
 //# sourceMappingURL=drag.min.js.map

package.json

 {
   "name": "@daybrush/drag",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "You can set up drag events in any browser.",
@@ -5,0 +5,0 @@ "main": "./dist/drag.cjs.js",

src/Dragger.ts

@@ -19,2 +19,5 @@ import { DragOptions, Client, Position } from "./types";
     private startClients: Client[] = [];
+    private movement: number = 0;
+    private startPinchClients: Client[] = [];
+    private startDistance: number = 0;
 
@@ -25,2 +28,3 @@ constructor(private el: Element, options: DragOptions = {}) {
             preventRightClick: true,
+            pinchThreshold: 1,
             events: ["touch", "mouse"],
@@ -56,4 +60,9 @@ ...options,
         }
-        if (!this.isDrag && isMultiTouch(e) && !this.pinchFlag) {
-            this.onPinchStart(e);
+        if (isMultiTouch(e)) {
+            if (!this.flag && (e.touches.length !== e.changedTouches.length)) {
+                return;
+            }
+            if (!this.pinchFlag) {
+                this.onPinchStart(e);
+            }
         }
@@ -70,2 +79,3 @@ if (this.flag) {
         this.datas = {};
+        this.movement = 0;
 
@@ -104,8 +114,10 @@ const position = getPosition(clients[0], this.prevClients[0], this.startClients[0]);
         const position: Position = this.pinchFlag
-            ? getPinchDragPosition(clients, prevClients, startClients)
+            ? getPinchDragPosition(clients, prevClients, startClients, this.startPinchClients)
             : getPosition(clients[0], prevClients[0], startClients[0]);
 
-        if (!position.deltaX && !position.deltaY) {
+        const { deltaX, deltaY } = position;
+        if (!deltaX && !deltaY) {
             return;
         }
+        this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
         this.isDrag = true;
@@ -135,3 +147,3 @@
         const position: Position = this.pinchFlag
-            ? getPinchDragPosition(prevClients, prevClients, startClients)
+            ? getPinchDragPosition(prevClients, prevClients, startClients, this.startPinchClients)
             : getPosition(prevClients[0], prevClients[0], startClients[0]);
@@ -149,10 +161,14 @@
     public onPinchStart(e: TouchEvent) {
-        this.pinchFlag = true;
+        const { pinchstart, pinchThreshold } = this.options;
 
-        const pinchstart = this.options.pinchstart;
-
+        if (this.isDrag && this.movement > pinchThreshold!) {
+            return;
+        }
         const pinchClients = getClients(e.changedTouches);
 
+        this.pinchFlag = true;
         this.startClients.push(...pinchClients);
         this.prevClients.push(...pinchClients);
+        this.startDistance = getDist(this.prevClients);
+        this.startPinchClients = [...this.prevClients];
 
@@ -162,3 +178,3 @@ if (!pinchstart) {
         }
-        const startClients = this.startClients;
+        const startClients = this.prevClients;
         const startAverageClient = getAverageClient(startClients);
@@ -195,7 +211,6 @@ const centerPosition = getPosition(
         const distance = getDist(clients);
-        const startDistance = getDist(startClients);
         pinch({
             datas: this.datas,
             touches: getPositions(clients, prevClients, startClients),
-            scale: distance / startDistance,
+            scale: distance / this.startDistance,
             distance,
@@ -202,0 +217,0 @@ ...centerPosition,

src/types.ts

@@ -52,2 +52,3 @@ import { IObject } from "@daybrush/utils";
     preventRightClick?: boolean;
+    pinchThreshold?: number;
     dragstart?: (options: OnDragStart) => any;
@@ -54,0 +55,0 @@ drag?: (options: OnDrag) => any;

src/utils.ts

 import { Client, Position } from "./types";
 import { IArrayFormat } from "@daybrush/utils";
 
-export function getPinchDragPosition(clients: Client[], prevClients: Client[], startClients: Client[]) {
+export function getPinchDragPosition(
+    clients: Client[],
+    prevClients: Client[],
+    startClients: Client[],
+    startPinchClients: Client[],
+) {
     const nowCenter = getAverageClient(clients);
     const prevCenter = getAverageClient(prevClients);
-    const startCenter = getAverageClient(startClients);
-    const pinchClient = getAddClient(startClients[0], getMinusClient(nowCenter, startCenter));
-    const pinchPrevClient = getAddClient(startClients[0], getMinusClient(prevCenter, startCenter));
+    const startCenter = getAverageClient(startPinchClients);
+    const pinchClient = getAddClient(startPinchClients[0], getMinusClient(nowCenter, startCenter));
+    const pinchPrevClient = getAddClient(startPinchClients[0], getMinusClient(prevCenter, startCenter));
 
     return getPosition(pinchClient, pinchPrevClient, startClients[0]);
 }
-export function isMultiTouch(e: any): boolean {
+export function isMultiTouch(e: any): e is TouchEvent {
     return e.touches && e.touches.length >= 2;
@@ -51,3 +56,3 @@ }
         Math.pow(clients[0].clientX - clients[1].clientX, 2)
-        + Math.pow(clients[0].clientY - clients[1].clientY, 2)
+        + Math.pow(clients[0].clientY - clients[1].clientY, 2),
     );
@@ -54,0 +59,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

148249

increased by5.76%

Lines of code

1716

increased by5.21%

No dependency changes