@daybrush/drag - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

declaration/Dragger.d.ts

@@ -1,20 +0,24 @@
-import { DragOptions } from "./types";
+import { DragOptions, Client } from "./types";
 export default class Dragger {
     private el;
+    options: DragOptions;
     private flag;
-    private startX;
-    private startY;
-    private prevX;
-    private prevY;
+    private pinchFlag;
     private datas;
-    private options;
     private isDrag;
+    private isPinch;
     private isMouse;
     private isTouch;
+    private prevClients;
+    private startClients;
     constructor(el: Element, options?: DragOptions);
     isDragging(): boolean;
+    isPinching(): boolean;
     onDragStart: (e: any) => void;
     onDrag: (e: any) => void;
     onDragEnd: (e: any) => void;
+    onPinchStart(e: TouchEvent): void;
+    onPinch(e: TouchEvent, clients: Client[]): void;
+    onPinchEnd(e: TouchEvent): void;
     unset(): void;
 }

declaration/index.d.ts

@@ -1,2 +0,5 @@
-export { default as drag } from "./drag";
+import Dragger from "./Dragger";
+import drag from "./drag";
+export default Dragger;
+export { drag };
 export * from "./types";

declaration/types.d.ts

 import { IObject } from "@daybrush/utils";
-export interface OnDragStart {
-    datas: IObject<any>;
+export interface Client {
     clientX: number;
     clientY: number;
-    inputEvent: any;
 }
-export interface OnDrag {
-    datas: IObject<any>;
+export interface Dist {
     distX: number;
     distY: number;
+}
+export interface Delta {
     deltaX: number;
     deltaY: number;
-    clientX: number;
-    clientY: number;
+}
+export interface Position extends Client, Dist, Delta {
+}
+export interface OnDragStart extends Position {
+    datas: IObject<any>;
     inputEvent: any;
 }
-export interface OnDragEnd {
+export interface OnDrag extends Position {
+    datas: IObject<any>;
+    inputEvent: any;
+}
+export interface OnDragEnd extends Position {
     isDrag: boolean;
     datas: IObject<any>;
     inputEvent: any;
-    clientX: number;
-    clientY: number;
-    distX: number;
-    distY: number;
 }
+export interface OnPinchStart extends Position {
+    datas: IObject<any>;
+    touches: Position[];
+    inputEvent: any;
+}
+export interface OnPinch extends Position {
+    datas: IObject<any>;
+    touches: Position[];
+    scale: number;
+    inputEvent: any;
+}
+export interface OnPinchEnd extends Position {
+    isPinch: boolean;
+    datas: IObject<any>;
+    touches: Position[];
+    inputEvent: any;
+}
 export interface DragOptions {
@@ -34,2 +53,5 @@ container?: Window | Node | Element;
     dragend?: (options: OnDragEnd) => any;
+    pinchstart?: (options: OnPinchStart) => any;
+    pinch?: (options: OnPinch) => any;
+    pinchend?: (options: OnPinchEnd) => any;
 }

dist/drag.esm.js

 /*
-Copyright (c) Daybrush
+Copyright (c) 2019 Daybrush
 name: @daybrush/drag
@@ -7,4 +7,6 @@ license: MIT
 repository: git+https://github.com/daybrush/drag.git
-version: 0.6.0
+version: 0.7.0
 */
+import { removeEvent, addEvent } from '@daybrush/utils';
+
 /*! *****************************************************************************
@@ -38,6 +40,83 @@ Copyright (c) Microsoft Corporation. All rights reserved.
 
-function getPosition(e) {
-  return e.touches && e.touches.length ? e.touches[0] : e;
+function getPinchDragPosition(clients, prevClients, startClients) {
+  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));
+  return getPosition(pinchClient, pinchPrevClient, startClients[0]);
 }
+function isMultiTouch(e) {
+  return e.touches && e.touches.length >= 2;
+}
+function getPositionEvent(e) {
+  if (e.touches) {
+    return getClients(e.touches);
+  } else {
+    return [getClient(e)];
+  }
+}
+function getPosition(client, prevClient, startClient) {
+  var clientX = client.clientX,
+      clientY = client.clientY;
+  var prevX = prevClient.clientX,
+      prevY = prevClient.clientY;
+  var startX = startClient.clientX,
+      startY = startClient.clientY;
+  var deltaX = clientX - prevX;
+  var deltaY = clientY - prevY;
+  var distX = clientX - startX;
+  var distY = clientY - startY;
+  return {
+    clientX: clientX,
+    clientY: clientY,
+    deltaX: deltaX,
+    deltaY: deltaY,
+    distX: distX,
+    distY: distY
+  };
+}
+function getDist(clients) {
+  return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
+}
+function getPositions(clients, prevClients, startClients) {
+  return clients.map(function (client, i) {
+    return getPosition(client, prevClients[i], startClients[i]);
+  });
+}
+function getClients(touches) {
+  var length = Math.min(touches.length, 2);
+  var clients = [];
 
+  for (var i = 0; i < length; ++i) {
+    clients.push(getClient(touches[i]));
+  }
+
+  return clients;
+}
+function getClient(e) {
+  return {
+    clientX: e.clientX,
+    clientY: e.clientY
+  };
+}
+function getAverageClient(clients) {
+  return {
+    clientX: (clients[0].clientX + clients[1].clientX) / 2,
+    clientY: (clients[0].clientY + clients[1].clientY) / 2
+  };
+}
+function getAddClient(client1, client2) {
+  return {
+    clientX: client1.clientX + client2.clientX,
+    clientY: client1.clientY + client2.clientY
+  };
+}
+function getMinusClient(client1, client2) {
+  return {
+    clientX: client1.clientX - client2.clientX,
+    clientY: client1.clientY - client2.clientY
+  };
+}
+
 var Dragger =
@@ -54,36 +133,37 @@ /*#__PURE__*/
     this.el = el;
+    this.options = {};
     this.flag = false;
-    this.startX = 0;
-    this.startY = 0;
-    this.prevX = 0;
-    this.prevY = 0;
+    this.pinchFlag = false;
     this.datas = {};
-    this.options = {};
     this.isDrag = false;
+    this.isPinch = false;
     this.isMouse = false;
     this.isTouch = false;
+    this.prevClients = [];
+    this.startClients = [];
 
     this.onDragStart = function (e) {
+      if (!_this.isDrag && isMultiTouch(e) && !_this.pinchFlag) {
+        _this.onPinchStart(e);
+      }
+
+      if (_this.flag) {
+        return;
+      }
+
+      var clients = _this.startClients[0] ? _this.startClients : getPositionEvent(e);
       _this.flag = true;
       _this.isDrag = false;
-
-      var _a = getPosition(e),
-          clientX = _a.clientX,
-          clientY = _a.clientY;
-
-      _this.startX = clientX;
-      _this.startY = clientY;
-      _this.prevX = clientX;
-      _this.prevY = clientY;
+      _this.startClients = clients;
+      _this.prevClients = clients;
       _this.datas = {};
-      var _b = _this.options,
-          dragstart = _b.dragstart,
-          preventRightClick = _b.preventRightClick;
+      var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
+      var _a = _this.options,
+          dragstart = _a.dragstart,
+          preventRightClick = _a.preventRightClick;
 
-      if (preventRightClick && e.which === 3 || (dragstart && dragstart({
+      if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign({
         datas: _this.datas,
-        inputEvent: e,
-        clientX: clientX,
-        clientY: clientY
-      })) === false) {
+        inputEvent: e
+      }, position))) === false) {
         _this.flag = false;
@@ -100,10 +180,13 @@ }
 
-      var _a = getPosition(e),
-          clientX = _a.clientX,
-          clientY = _a.clientY;
+      var clients = getPositionEvent(e);
 
-      var deltaX = clientX - _this.prevX;
-      var deltaY = clientY - _this.prevY;
+      if (_this.pinchFlag) {
+        _this.onPinch(e, clients);
+      }
 
-      if (!deltaX && !deltaY) {
+      var prevClients = _this.prevClients;
+      var startClients = _this.startClients;
+      var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+
+      if (!position.deltaX && !position.deltaY) {
         return;
@@ -114,14 +197,8 @@ }
       var drag = _this.options.drag;
-      drag && drag({
-        datas: _this.datas,
-        clientX: clientX,
-        clientY: clientY,
-        deltaX: deltaX,
-        deltaY: deltaY,
-        distX: clientX - _this.startX,
-        distY: clientY - _this.startY,
+      drag && drag(__assign({
+        datas: _this.datas
+      }, position, {
         inputEvent: e
-      });
-      _this.prevX = clientX;
-      _this.prevY = clientY;
+      }));
+      _this.prevClients = clients;
     };
@@ -134,13 +211,18 @@
 
+      if (_this.pinchFlag) {
+        _this.onPinchEnd(e);
+      }
+
       _this.flag = false;
       var dragend = _this.options.dragend;
-      dragend && dragend({
+      var prevClients = _this.prevClients;
+      var startClients = _this.startClients;
+      var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
+      _this.startClients = [];
+      _this.prevClients = [];
+      dragend && dragend(__assign({
         datas: _this.datas,
         isDrag: _this.isDrag,
-        inputEvent: e,
-        clientX: _this.prevX,
-        clientY: _this.prevY,
-        distX: _this.prevX - _this.startX,
-        distY: _this.prevY - _this.startY
-      });
+        inputEvent: e
+      }, position));
     };
@@ -160,11 +242,11 @@
     if (this.isMouse) {
-      el.addEventListener("mousedown", this.onDragStart);
-      container.addEventListener("mousemove", this.onDrag);
-      container.addEventListener("mouseup", this.onDragEnd);
+      addEvent(el, "mousedown", this.onDragStart);
+      addEvent(container, "mousemove", this.onDrag);
+      addEvent(container, "mouseup", this.onDragEnd);
     }
 
     if (this.isTouch) {
-      el.addEventListener("touchstart", this.onDragStart);
-      container.addEventListener("touchmove", this.onDrag);
-      container.addEventListener("touchend", this.onDragEnd);
+      addEvent(el, "touchstart", this.onDragStart);
+      addEvent(container, "touchmove", this.onDrag);
+      addEvent(container, "touchend", this.onDragEnd);
     }
@@ -179,2 +261,88 @@ }
 
+  __proto.isPinching = function () {
+    return this.isPinch;
+  };
+
+  __proto.onPinchStart = function (e) {
+    var _a, _b;
+
+    if (!this.flag) {
+      return;
+    }
+
+    this.pinchFlag = true;
+    var pinchstart = this.options.pinchstart;
+    var pinchClients = getClients(e.changedTouches);
+
+    (_a = this.startClients).push.apply(_a, pinchClients);
+
+    (_b = this.prevClients).push.apply(_b, pinchClients);
+
+    if (!pinchstart) {
+      return;
+    }
+
+    var startClients = this.startClients;
+    var startAverageClient = getAverageClient(startClients);
+    var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient);
+    pinchstart(__assign({
+      datas: this.datas,
+      touches: getPositions(startClients, startClients, startClients)
+    }, centerPosition, {
+      inputEvent: e
+    }));
+  };
+
+  __proto.onPinch = function (e, clients) {
+    if (!this.flag || !this.pinchFlag) {
+      return;
+    }
+
+    this.isPinch = true;
+    var pinch = this.options.pinch;
+
+    if (!pinch) {
+      return;
+    }
+
+    var prevClients = this.prevClients;
+    var startClients = this.startClients;
+    var centerPosition = getPosition(getAverageClient(clients), getAverageClient(prevClients), getAverageClient(startClients));
+    pinch(__assign({
+      datas: this.datas,
+      touches: getPositions(clients, prevClients, startClients),
+      scale: getDist(clients) / getDist(startClients)
+    }, centerPosition, {
+      inputEvent: e
+    }));
+  };
+
+  __proto.onPinchEnd = function (e) {
+    if (!this.flag || !this.pinchFlag) {
+      return;
+    }
+
+    var isPinch = this.isPinch;
+    this.isPinch = false;
+    this.pinchFlag = false;
+    var pinchend = this.options.pinchend;
+
+    if (!pinchend) {
+      return;
+    }
+
+    var prevClients = this.prevClients;
+    var startClients = this.startClients;
+    var centerPosition = getPosition(getAverageClient(prevClients), getAverageClient(prevClients), getAverageClient(startClients));
+    pinchend(__assign({
+      datas: this.datas,
+      isPinch: isPinch,
+      touches: getPositions(prevClients, prevClients, startClients)
+    }, centerPosition, {
+      inputEvent: e
+    }));
+    this.isPinch = false;
+    this.pinchFlag = false;
+  };
+
   __proto.unset = function () {
@@ -185,11 +353,11 @@ var el = this.el;
     if (this.isMouse) {
-      el.removeEventListener("mousedown", this.onDragStart);
-      container.removeEventListener("mousemove", this.onDrag);
-      container.removeEventListener("mouseup", this.onDragEnd);
+      removeEvent(el, "mousedown", this.onDragStart);
+      removeEvent(container, "mousemove", this.onDrag);
+      removeEvent(container, "mouseup", this.onDragEnd);
     }
 
     if (this.isTouch) {
-      el.removeEventListener("touchstart", this.onDragStart);
-      container.removeEventListener("touchmove", this.onDrag);
-      container.removeEventListener("touchend", this.onDragEnd);
+      removeEvent(el, "touchstart", this.onDragStart);
+      removeEvent(container, "touchmove", this.onDrag);
+      removeEvent(container, "touchend", this.onDragEnd);
     }
@@ -205,3 +373,4 @@ };
 
+export default Dragger;
 export { setDrag as drag };
 //# sourceMappingURL=drag.esm.js.map

dist/drag.js

 /*
-Copyright (c) Daybrush
+Copyright (c) 2019 Daybrush
 name: @daybrush/drag
@@ -7,3 +7,3 @@ license: MIT
 repository: git+https://github.com/daybrush/drag.git
-version: 0.6.0
+version: 0.7.0
 */
@@ -13,3 +13,3 @@ (function (global, factory) {
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = global || self, factory(global.utils = {}));
+    (global = global || self, factory(global.Dragger = {}));
 }(this, function (exports) { 'use strict';
@@ -45,6 +45,128 @@
 
-    function getPosition(e) {
-      return e.touches && e.touches.length ? e.touches[0] : e;
+    function getPinchDragPosition(clients, prevClients, startClients) {
+      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));
+      return getPosition(pinchClient, pinchPrevClient, startClients[0]);
     }
+    function isMultiTouch(e) {
+      return e.touches && e.touches.length >= 2;
+    }
+    function getPositionEvent(e) {
+      if (e.touches) {
+        return getClients(e.touches);
+      } else {
+        return [getClient(e)];
+      }
+    }
+    function getPosition(client, prevClient, startClient) {
+      var clientX = client.clientX,
+          clientY = client.clientY;
+      var prevX = prevClient.clientX,
+          prevY = prevClient.clientY;
+      var startX = startClient.clientX,
+          startY = startClient.clientY;
+      var deltaX = clientX - prevX;
+      var deltaY = clientY - prevY;
+      var distX = clientX - startX;
+      var distY = clientY - startY;
+      return {
+        clientX: clientX,
+        clientY: clientY,
+        deltaX: deltaX,
+        deltaY: deltaY,
+        distX: distX,
+        distY: distY
+      };
+    }
+    function getDist(clients) {
+      return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
+    }
+    function getPositions(clients, prevClients, startClients) {
+      return clients.map(function (client, i) {
+        return getPosition(client, prevClients[i], startClients[i]);
+      });
+    }
+    function getClients(touches) {
+      var length = Math.min(touches.length, 2);
+      var clients = [];
 
+      for (var i = 0; i < length; ++i) {
+        clients.push(getClient(touches[i]));
+      }
+
+      return clients;
+    }
+    function getClient(e) {
+      return {
+        clientX: e.clientX,
+        clientY: e.clientY
+      };
+    }
+    function getAverageClient(clients) {
+      return {
+        clientX: (clients[0].clientX + clients[1].clientX) / 2,
+        clientY: (clients[0].clientY + clients[1].clientY) / 2
+      };
+    }
+    function getAddClient(client1, client2) {
+      return {
+        clientX: client1.clientX + client2.clientX,
+        clientY: client1.clientY + client2.clientY
+      };
+    }
+    function getMinusClient(client1, client2) {
+      return {
+        clientX: client1.clientX - client2.clientX,
+        clientY: client1.clientY - client2.clientY
+      };
+    }
+
+    /*
+    Copyright (c) 2018 Daybrush
+    @name: @daybrush/utils
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/utils
+    @version 0.10.0
+    */
+    /**
+    * Sets up a function that will be called whenever the specified event is delivered to the target
+    * @memberof DOM
+    * @param - event target
+    * @param - A case-sensitive string representing the event type to listen for.
+    * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
+    * @param - An options object that specifies characteristics about the event listener. The available options are:
+    * @example
+    import {addEvent} from "@daybrush/utils";
+
+    addEvent(el, "click", e => {
+      console.log(e);
+    });
+    */
+
+    function addEvent(el, type, listener, options) {
+      el.addEventListener(type, listener, options);
+    }
+    /**
+    * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
+    * @memberof DOM
+    * @param - event target
+    * @param - A case-sensitive string representing the event type to listen for.
+    * @param - The EventListener function of the event handler to remove from the event target.
+    * @example
+    import {addEvent, removeEvent} from "@daybrush/utils";
+    const listener = e => {
+      console.log(e);
+    };
+    addEvent(el, "click", listener);
+    removeEvent(el, "click", listener);
+    */
+
+    function removeEvent(el, type, listener) {
+      el.removeEventListener(type, listener);
+    }
+
     var Dragger =
@@ -61,36 +183,37 @@ /*#__PURE__*/
         this.el = el;
+        this.options = {};
         this.flag = false;
-        this.startX = 0;
-        this.startY = 0;
-        this.prevX = 0;
-        this.prevY = 0;
+        this.pinchFlag = false;
         this.datas = {};
-        this.options = {};
         this.isDrag = false;
+        this.isPinch = false;
         this.isMouse = false;
         this.isTouch = false;
+        this.prevClients = [];
+        this.startClients = [];
 
         this.onDragStart = function (e) {
+          if (!_this.isDrag && isMultiTouch(e) && !_this.pinchFlag) {
+            _this.onPinchStart(e);
+          }
+
+          if (_this.flag) {
+            return;
+          }
+
+          var clients = _this.startClients[0] ? _this.startClients : getPositionEvent(e);
           _this.flag = true;
           _this.isDrag = false;
-
-          var _a = getPosition(e),
-              clientX = _a.clientX,
-              clientY = _a.clientY;
-
-          _this.startX = clientX;
-          _this.startY = clientY;
-          _this.prevX = clientX;
-          _this.prevY = clientY;
+          _this.startClients = clients;
+          _this.prevClients = clients;
           _this.datas = {};
-          var _b = _this.options,
-              dragstart = _b.dragstart,
-              preventRightClick = _b.preventRightClick;
+          var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
+          var _a = _this.options,
+              dragstart = _a.dragstart,
+              preventRightClick = _a.preventRightClick;
 
-          if (preventRightClick && e.which === 3 || (dragstart && dragstart({
+          if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign({
             datas: _this.datas,
-            inputEvent: e,
-            clientX: clientX,
-            clientY: clientY
-          })) === false) {
+            inputEvent: e
+          }, position))) === false) {
             _this.flag = false;
@@ -107,10 +230,13 @@ }
 
-          var _a = getPosition(e),
-              clientX = _a.clientX,
-              clientY = _a.clientY;
+          var clients = getPositionEvent(e);
 
-          var deltaX = clientX - _this.prevX;
-          var deltaY = clientY - _this.prevY;
+          if (_this.pinchFlag) {
+            _this.onPinch(e, clients);
+          }
 
-          if (!deltaX && !deltaY) {
+          var prevClients = _this.prevClients;
+          var startClients = _this.startClients;
+          var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+
+          if (!position.deltaX && !position.deltaY) {
             return;
@@ -121,14 +247,8 @@ }
           var drag = _this.options.drag;
-          drag && drag({
-            datas: _this.datas,
-            clientX: clientX,
-            clientY: clientY,
-            deltaX: deltaX,
-            deltaY: deltaY,
-            distX: clientX - _this.startX,
-            distY: clientY - _this.startY,
+          drag && drag(__assign({
+            datas: _this.datas
+          }, position, {
             inputEvent: e
-          });
-          _this.prevX = clientX;
-          _this.prevY = clientY;
+          }));
+          _this.prevClients = clients;
         };
@@ -141,13 +261,18 @@
 
+          if (_this.pinchFlag) {
+            _this.onPinchEnd(e);
+          }
+
           _this.flag = false;
           var dragend = _this.options.dragend;
-          dragend && dragend({
+          var prevClients = _this.prevClients;
+          var startClients = _this.startClients;
+          var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
+          _this.startClients = [];
+          _this.prevClients = [];
+          dragend && dragend(__assign({
             datas: _this.datas,
             isDrag: _this.isDrag,
-            inputEvent: e,
-            clientX: _this.prevX,
-            clientY: _this.prevY,
-            distX: _this.prevX - _this.startX,
-            distY: _this.prevY - _this.startY
-          });
+            inputEvent: e
+          }, position));
         };
@@ -167,11 +292,11 @@
         if (this.isMouse) {
-          el.addEventListener("mousedown", this.onDragStart);
-          container.addEventListener("mousemove", this.onDrag);
-          container.addEventListener("mouseup", this.onDragEnd);
+          addEvent(el, "mousedown", this.onDragStart);
+          addEvent(container, "mousemove", this.onDrag);
+          addEvent(container, "mouseup", this.onDragEnd);
         }
 
         if (this.isTouch) {
-          el.addEventListener("touchstart", this.onDragStart);
-          container.addEventListener("touchmove", this.onDrag);
-          container.addEventListener("touchend", this.onDragEnd);
+          addEvent(el, "touchstart", this.onDragStart);
+          addEvent(container, "touchmove", this.onDrag);
+          addEvent(container, "touchend", this.onDragEnd);
         }
@@ -186,2 +311,88 @@ }
 
+      __proto.isPinching = function () {
+        return this.isPinch;
+      };
+
+      __proto.onPinchStart = function (e) {
+        var _a, _b;
+
+        if (!this.flag) {
+          return;
+        }
+
+        this.pinchFlag = true;
+        var pinchstart = this.options.pinchstart;
+        var pinchClients = getClients(e.changedTouches);
+
+        (_a = this.startClients).push.apply(_a, pinchClients);
+
+        (_b = this.prevClients).push.apply(_b, pinchClients);
+
+        if (!pinchstart) {
+          return;
+        }
+
+        var startClients = this.startClients;
+        var startAverageClient = getAverageClient(startClients);
+        var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient);
+        pinchstart(__assign({
+          datas: this.datas,
+          touches: getPositions(startClients, startClients, startClients)
+        }, centerPosition, {
+          inputEvent: e
+        }));
+      };
+
+      __proto.onPinch = function (e, clients) {
+        if (!this.flag || !this.pinchFlag) {
+          return;
+        }
+
+        this.isPinch = true;
+        var pinch = this.options.pinch;
+
+        if (!pinch) {
+          return;
+        }
+
+        var prevClients = this.prevClients;
+        var startClients = this.startClients;
+        var centerPosition = getPosition(getAverageClient(clients), getAverageClient(prevClients), getAverageClient(startClients));
+        pinch(__assign({
+          datas: this.datas,
+          touches: getPositions(clients, prevClients, startClients),
+          scale: getDist(clients) / getDist(startClients)
+        }, centerPosition, {
+          inputEvent: e
+        }));
+      };
+
+      __proto.onPinchEnd = function (e) {
+        if (!this.flag || !this.pinchFlag) {
+          return;
+        }
+
+        var isPinch = this.isPinch;
+        this.isPinch = false;
+        this.pinchFlag = false;
+        var pinchend = this.options.pinchend;
+
+        if (!pinchend) {
+          return;
+        }
+
+        var prevClients = this.prevClients;
+        var startClients = this.startClients;
+        var centerPosition = getPosition(getAverageClient(prevClients), getAverageClient(prevClients), getAverageClient(startClients));
+        pinchend(__assign({
+          datas: this.datas,
+          isPinch: isPinch,
+          touches: getPositions(prevClients, prevClients, startClients)
+        }, centerPosition, {
+          inputEvent: e
+        }));
+        this.isPinch = false;
+        this.pinchFlag = false;
+      };
+
       __proto.unset = function () {
@@ -192,11 +403,11 @@ var el = this.el;
         if (this.isMouse) {
-          el.removeEventListener("mousedown", this.onDragStart);
-          container.removeEventListener("mousemove", this.onDrag);
-          container.removeEventListener("mouseup", this.onDragEnd);
+          removeEvent(el, "mousedown", this.onDragStart);
+          removeEvent(container, "mousemove", this.onDrag);
+          removeEvent(container, "mouseup", this.onDragEnd);
         }
 
         if (this.isTouch) {
-          el.removeEventListener("touchstart", this.onDragStart);
-          container.removeEventListener("touchmove", this.onDrag);
-          container.removeEventListener("touchend", this.onDragEnd);
+          removeEvent(el, "touchstart", this.onDragStart);
+          removeEvent(container, "touchmove", this.onDrag);
+          removeEvent(container, "touchend", this.onDragEnd);
         }
@@ -212,2 +423,3 @@ };
 
+    exports.default = Dragger;
     exports.drag = setDrag;
@@ -214,0 +426,0 @@

dist/drag.min.js

 /*
-Copyright (c) Daybrush
+Copyright (c) 2019 Daybrush
 name: @daybrush/drag
@@ -7,5 +7,5 @@ license: MIT
 repository: git+https://github.com/daybrush/drag.git
-version: 0.6.0
+version: 0.7.0
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).utils={})}(this,function(t){"use strict";var r=function(){return(r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var s in e=arguments[n])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)};function h(t){return t.touches&&t.touches.length?t.touches[0]:t}var n=function(){function t(t,e){var a=this;void 0===e&&(e={}),this.el=t,this.flag=!1,this.startX=0,this.startY=0,this.prevX=0,this.prevY=0,this.datas={},this.options={},this.isDrag=!1,this.isMouse=!1,this.isTouch=!1,this.onDragStart=function(t){a.flag=!0,a.isDrag=!1;var e=h(t),n=e.clientX,i=e.clientY;a.startX=n,a.startY=i,a.prevX=n,a.prevY=i,a.datas={};var s=a.options,r=s.dragstart;(s.preventRightClick&&3===t.which||!1===(r&&r({datas:a.datas,inputEvent:t,clientX:n,clientY:i})))&&(a.flag=!1),a.flag&&t.preventDefault()},this.onDrag=function(t){if(a.flag){var e=h(t),n=e.clientX,i=e.clientY,s=n-a.prevX,r=i-a.prevY;if(s||r){a.isDrag=!0;var o=a.options.drag;o&&o({datas:a.datas,clientX:n,clientY:i,deltaX:s,deltaY:r,distX:n-a.startX,distY:i-a.startY,inputEvent:t}),a.prevX=n,a.prevY=i}}},this.onDragEnd=function(t){if(a.flag){a.flag=!1;var e=a.options.dragend;e&&e({datas:a.datas,isDrag:a.isDrag,inputEvent:t,clientX:a.prevX,clientY:a.prevY,distX:a.prevX-a.startX,distY:a.prevY-a.startY})}},this.options=r({container:t,preventRightClick:!0,events:["touch","mouse"]},e);var n=this.options,i=n.container,s=n.events;this.isTouch=-1<s.indexOf("touch"),this.isMouse=-1<s.indexOf("mouse"),this.isMouse&&(t.addEventListener("mousedown",this.onDragStart),i.addEventListener("mousemove",this.onDrag),i.addEventListener("mouseup",this.onDragEnd)),this.isTouch&&(t.addEventListener("touchstart",this.onDragStart),i.addEventListener("touchmove",this.onDrag),i.addEventListener("touchend",this.onDragEnd))}var e=t.prototype;return e.isDragging=function(){return this.isDrag},e.unset=function(){var t=this.el,e=this.options.container;this.isMouse&&(t.removeEventListener("mousedown",this.onDragStart),e.removeEventListener("mousemove",this.onDrag),e.removeEventListener("mouseup",this.onDragEnd)),this.isTouch&&(t.removeEventListener("touchstart",this.onDragStart),e.removeEventListener("touchmove",this.onDrag),e.removeEventListener("touchend",this.onDragEnd))},t}();t.drag=function(t,e){return new n(t,e)}});
+!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 h=function(){return(h=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){var s=f(t),e=f(i),a=f(n);return l(g(n[0],v(s,a)),g(n[0],v(e,a)),n[0])}function c(t){return t.touches?p(t.touches):[e(t)]}function l(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 r(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function u(t,n,s){return t.map(function(t,i){return l(t,n[i],s[i])})}function p(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 f(t){return{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function g(t,i){return{clientX:t.clientX+i.clientX,clientY:t.clientY+i.clientY}}function v(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 r=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.onDragStart=function(t){if(r.isDrag||!function(t){return t.touches&&2<=t.touches.length}(t)||r.pinchFlag||r.onPinchStart(t),!r.flag){var i=r.startClients[0]?r.startClients:c(t);r.flag=!0,r.isDrag=!1,r.startClients=i,r.prevClients=i,r.datas={};var n=l(i[0],r.prevClients[0],r.startClients[0]),s=r.options,e=s.dragstart;(s.preventRightClick&&3===t.which||!1===(e&&e(h({datas:r.datas,inputEvent:t},n))))&&(r.flag=!1),r.flag&&t.preventDefault()}},this.onDrag=function(t){if(r.flag){var i=c(t);r.pinchFlag&&r.onPinch(t,i);var n=r.prevClients,s=r.startClients,e=r.pinchFlag?o(i,n,s):l(i[0],n[0],s[0]);if(e.deltaX||e.deltaY){r.isDrag=!0;var a=r.options.drag;a&&a(h({datas:r.datas},e,{inputEvent:t})),r.prevClients=i}}},this.onDragEnd=function(t){if(r.flag){r.pinchFlag&&r.onPinchEnd(t),r.flag=!1;var i=r.options.dragend,n=r.prevClients,s=r.startClients,e=r.pinchFlag?o(n,n,s):l(n[0],n[0],s[0]);r.startClients=[],r.prevClients=[],i&&i(h({datas:r.datas,isDrag:r.isDrag,inputEvent:t},e))}},this.options=h({container:t,preventRightClick:!0,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;if(this.flag){this.pinchFlag=!0;var s=this.options.pinchstart,e=p(t.changedTouches);if((i=this.startClients).push.apply(i,e),(n=this.prevClients).push.apply(n,e),s){var a=this.startClients,r=f(a),o=l(r,r,r);s(h({datas:this.datas,touches:u(a,a,a)},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=l(f(i),f(s),f(e));n(h({datas:this.datas,touches:u(i,s,e),scale:r(i)/r(e)},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=l(f(s),f(s),f(e));n(h({datas:this.datas,isPinch:i,touches:u(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.6.0",
+  "version": "0.7.0",
   "description": "You can set up drag events in any browser.",
-  "main": "./dist/drag.js",
+  "main": "./dist/drag.cjs.js",
   "module": "./dist/drag.esm.js",
@@ -10,3 +10,4 @@ "sideEffects": false,
   "scripts": {
-    "build": "rollup -c && npm run declaration",
+    "start": "rollup -c -w",
+    "build": "rollup -c && npm run declaration && print-sizes ./dist",
     "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
@@ -36,2 +37,3 @@ "release": "npm run build && release",
     "@daybrush/release": "^0.2.4",
+    "print-sizes": "^0.1.0",
     "tslint": "^5.15.0",
@@ -38,0 +40,0 @@ "typescript": "^3.4.2"

README.md

@@ -29,26 +29,11 @@ <p align="middle" ><img src="https://github.com/daybrush/drag/raw/master/demo/images/logo.png" /></p>
     events?: Array<"mouse" | "touch">;
-    dragstart?: (options: {
-        datas: IObject<any>,
-        inputEvent: any,
-        clientX: number,
-        clientY: number,
-    }) => any;
-    drag?: (options: {
-        datas: IObject<any>,
-        distX: number,
-        distY: number,
-        deltaX: number,
-        deltaY: number,
-        clientX: number,
-        clientY: number, inputEvent}) => any;
-    dragend?: (options: {
-        isDrag: boolean,
-        datas: IObject<any>,
-        inputEvent: any,
-        clientX: number,
-        clientY: number,
-        distX: number,
-        distY: number,
-    }) => any;
+    preventRightClick?: boolean;
+    dragstart?: (options: OnDragStart) => any;
+    drag?: (options: OnDrag) => any;
+    dragend?: (options: OnDragEnd) => any;
+    pinchstart?: (options: OnPinchStart) => any;
+    pinch?: (options: OnPinch) => any;
+    pinchend?: (options: OnPinchEnd) => any;
 }
+
 const dragger = drag(document.querySelector(".target"), {
@@ -63,4 +48,13 @@ container: window,
     dragend: ({ isDrag }) => {
-        console.log (isDrag);
+        console.log(isDrag);
     },
+    pinchstart: ({ touches }) => {
+
+    },
+    pinch: ({ touches, scale, clientX, clientY }) => {
+
+    },
+    pinchend: ({ touches, clientX, clientY }) => {
+
+    }
 });
@@ -67,0 +61,0 @@

rollup.config.js

@@ -5,11 +5,13 @@ import builder from "@daybrush/builder";
   {
-    name: "utils",
+    name: "Dragger",
     input: "src/index.ts",
     output: "./dist/drag.js",
     exports: "named",
+    resolve: true,
   },
   {
-    name: "utils",
+    name: "Dragger",
     input: "src/index.ts",
     output: "./dist/drag.min.js",
+    resolve: true,
     uglify: true,
@@ -19,3 +21,3 @@ exports: "named",
   {
-    name: "utils",
+    name: "Dragger",
     input: "src/index.ts",
@@ -26,3 +28,9 @@ output: "./dist/drag.esm.js",
   },
-
+  {
+    name: "Dragger",
+    input: "src/index.umd.ts",
+    output: "./dist/drag.cjs.js",
+    format: "cjs",
+    exports: "named",
+  },
 ]);

src/Dragger.ts

@@ -1,18 +0,20 @@
-import { DragOptions } from "./types";
+import { DragOptions, Client, Position } from "./types";
+import {
+    getPositionEvent, getPosition, getClients, getPositions,
+    isMultiTouch, getPinchDragPosition, getAverageClient, getDist,
+} from "./utils";
+import { addEvent, removeEvent } from "@daybrush/utils";
+import { start } from "repl";
 
-function getPosition(e) {
-    return e.touches && e.touches.length ? e.touches[0] : e;
-}
-
 export default class Dragger {
+    public options: DragOptions = {};
     private flag = false;
-    private startX = 0;
-    private startY = 0;
-    private prevX = 0;
-    private prevY = 0;
+    private pinchFlag = false;
     private datas = {};
-    private options: DragOptions = {};
     private isDrag = false;
+    private isPinch = false;
     private isMouse = false;
     private isTouch = false;
+    private prevClients: Client[] = [];
+    private startClients: Client[] = [];
 
@@ -29,14 +31,14 @@ constructor(private el: Element, options: DragOptions = {}) {
 
-        this.isTouch = events.indexOf("touch") > -1;
-        this.isMouse = events.indexOf("mouse") > -1;
+        this.isTouch = events!.indexOf("touch") > -1;
+        this.isMouse = events!.indexOf("mouse") > -1;
 
         if (this.isMouse) {
-            el.addEventListener("mousedown", this.onDragStart);
-            container.addEventListener("mousemove", this.onDrag);
-            container.addEventListener("mouseup", this.onDragEnd);
+            addEvent(el, "mousedown", this.onDragStart);
+            addEvent(container!, "mousemove", this.onDrag);
+            addEvent(container!, "mouseup", this.onDragEnd);
         }
         if (this.isTouch) {
-            el.addEventListener("touchstart", this.onDragStart);
-            container.addEventListener("touchmove", this.onDrag);
-            container.addEventListener("touchend", this.onDragEnd);
+            addEvent(el, "touchstart", this.onDragStart);
+            addEvent(container!, "touchmove", this.onDrag);
+            addEvent(container!, "touchend", this.onDragEnd);
         }
@@ -47,13 +49,22 @@ }
     }
+    public isPinching() {
+        return this.isPinch;
+    }
     public onDragStart = (e: any) => {
+        if (!this.isDrag && isMultiTouch(e) && !this.pinchFlag) {
+            this.onPinchStart(e);
+        }
+        if (this.flag) {
+            return;
+        }
+        const clients = this.startClients[0] ? this.startClients : getPositionEvent(e);
+
         this.flag = true;
         this.isDrag = false;
-        const { clientX, clientY } = getPosition(e);
-
-        this.startX = clientX;
-        this.startY = clientY;
-        this.prevX = clientX;
-        this.prevY = clientY;
+        this.startClients = clients;
+        this.prevClients = clients;
         this.datas = {};
 
+        const position = getPosition(clients[0], this.prevClients[0], this.startClients[0]);
+
         const {
@@ -69,4 +80,3 @@ dragstart,
                 inputEvent: e,
-                clientX,
-                clientY,
+                ...position,
             })) === false) {
@@ -81,8 +91,14 @@ this.flag = false;
         }
+        const clients = getPositionEvent(e);
 
-        const { clientX, clientY } = getPosition(e);
-        const deltaX = clientX - this.prevX;
-        const deltaY = clientY - this.prevY;
+        if (this.pinchFlag) {
+            this.onPinch(e, clients);
+        }
+        const prevClients = this.prevClients;
+        const startClients = this.startClients;
+        const position: Position = this.pinchFlag
+            ? getPinchDragPosition(clients, prevClients, startClients)
+            : getPosition(clients[0], prevClients[0], startClients[0]);
 
-        if (!deltaX && !deltaY) {
+        if (!position.deltaX && !position.deltaY) {
             return;
@@ -95,13 +111,6 @@ }
             datas: this.datas,
-            clientX,
-            clientY,
-            deltaX,
-            deltaY,
-            distX: clientX - this.startX,
-            distY: clientY - this.startY,
+            ...position,
             inputEvent: e,
         });
-
-        this.prevX = clientX;
-        this.prevY = clientY;
+        this.prevClients = clients;
     }
@@ -112,5 +121,17 @@ public onDragEnd = (e: any) => {
         }
+        if (this.pinchFlag) {
+            this.onPinchEnd(e);
+        }
         this.flag = false;
 
         const dragend = this.options.dragend;
+        const prevClients = this.prevClients;
+        const startClients = this.startClients;
+
+        const position: Position = this.pinchFlag
+            ? getPinchDragPosition(prevClients, prevClients, startClients)
+            : getPosition(prevClients[0], prevClients[0], startClients[0]);
+
+        this.startClients = [];
+        this.prevClients = [];
         dragend && dragend({
@@ -120,8 +141,90 @@ datas: this.datas,
             inputEvent: e,
-            clientX: this.prevX,
-            clientY: this.prevY,
-            distX: this.prevX - this.startX,
-            distY: this.prevY - this.startY,
+            ...position,
         });
     }
+    public onPinchStart(e: TouchEvent) {
+        if (!this.flag) {
+            return;
+        }
+        this.pinchFlag = true;
+
+        const pinchstart = this.options.pinchstart;
+
+        const pinchClients = getClients(e.changedTouches);
+
+        this.startClients.push(...pinchClients);
+        this.prevClients.push(...pinchClients);
+
+        if (!pinchstart) {
+            return;
+        }
+        const startClients = this.startClients;
+        const startAverageClient = getAverageClient(startClients);
+        const centerPosition = getPosition(
+            startAverageClient,
+            startAverageClient,
+            startAverageClient,
+        );
+        pinchstart({
+            datas: this.datas,
+            touches: getPositions(startClients, startClients, startClients),
+            ...centerPosition,
+            inputEvent: e,
+        });
+    }
+    public onPinch(e: TouchEvent, clients: Client[]) {
+        if (!this.flag || !this.pinchFlag) {
+            return;
+        }
+        this.isPinch = true;
+
+        const pinch = this.options.pinch;
+        if (!pinch) {
+            return;
+        }
+        const prevClients = this.prevClients;
+        const startClients = this.startClients;
+        const centerPosition = getPosition(
+            getAverageClient(clients),
+            getAverageClient(prevClients),
+            getAverageClient(startClients),
+        );
+        pinch({
+            datas: this.datas,
+            touches: getPositions(clients, prevClients, startClients),
+            scale: getDist(clients) / getDist(startClients),
+            ...centerPosition,
+            inputEvent: e,
+        });
+    }
+    public onPinchEnd(e: TouchEvent) {
+        if (!this.flag || !this.pinchFlag) {
+            return;
+        }
+        const isPinch = this.isPinch;
+
+        this.isPinch = false;
+        this.pinchFlag = false;
+        const pinchend = this.options.pinchend;
+
+        if (!pinchend) {
+            return;
+        }
+        const prevClients = this.prevClients;
+        const startClients = this.startClients;
+        const centerPosition = getPosition(
+            getAverageClient(prevClients),
+            getAverageClient(prevClients),
+            getAverageClient(startClients),
+        );
+        pinchend({
+            datas: this.datas,
+            isPinch,
+            touches: getPositions(prevClients, prevClients, startClients),
+            ...centerPosition,
+            inputEvent: e,
+        });
+        this.isPinch = false;
+        this.pinchFlag = false;
+    }
     public unset() {
@@ -132,12 +235,12 @@ const el = this.el;
         if (this.isMouse) {
-            el.removeEventListener("mousedown", this.onDragStart);
-            container.removeEventListener("mousemove", this.onDrag);
-            container.removeEventListener("mouseup", this.onDragEnd);
+            removeEvent(el, "mousedown", this.onDragStart);
+            removeEvent(container as any, "mousemove", this.onDrag);
+            removeEvent(container as any, "mouseup", this.onDragEnd);
         }
         if (this.isTouch) {
-            el.removeEventListener("touchstart", this.onDragStart);
-            container.removeEventListener("touchmove", this.onDrag);
-            container.removeEventListener("touchend", this.onDragEnd);
+            removeEvent(el, "touchstart", this.onDragStart);
+            removeEvent(container as any, "touchmove", this.onDrag);
+            removeEvent(container as any, "touchend", this.onDragEnd);
         }
     }
 }

src/index.ts

 
-export {default as drag} from "./drag";
+import Dragger from "./Dragger";
+import drag from "./drag";
+
+export default Dragger;
+export { drag };
 export * from "./types";

src/types.ts

 import { IObject } from "@daybrush/utils";
 
-export interface OnDragStart {
-    datas: IObject<any>;
+export interface Client {
     clientX: number;
     clientY: number;
-    inputEvent: any;
 }
-export interface OnDrag {
-    datas: IObject<any>;
+export interface Dist {
     distX: number;
     distY: number;
+}
+export interface Delta {
     deltaX: number;
     deltaY: number;
-    clientX: number;
-    clientY: number;
+}
+export interface Position extends Client, Dist, Delta {}
+export interface OnDragStart extends Position {
+    datas: IObject<any>;
     inputEvent: any;
 }
-export interface OnDragEnd {
+export interface OnDrag extends Position {
+    datas: IObject<any>;
+    inputEvent: any;
+}
+export interface OnDragEnd extends Position {
     isDrag: boolean;
     datas: IObject<any>;
     inputEvent: any;
-    clientX: number;
-    clientY: number;
-    distX: number;
-    distY: number;
 }
+export interface OnPinchStart extends Position {
+    datas: IObject<any>;
+    touches: Position[];
+    inputEvent: any;
+}
+export interface OnPinch extends Position {
+    datas: IObject<any>;
+    touches: Position[];
+    scale: number;
+    inputEvent: any;
+}
+export interface OnPinchEnd extends Position {
+    isPinch: boolean;
+    datas: IObject<any>;
+    touches: Position[];
+    inputEvent: any;
+}
+
 export interface DragOptions {
@@ -35,2 +54,5 @@ container?: Window | Node | Element;
     dragend?: (options: OnDragEnd) => any;
+    pinchstart?: (options: OnPinchStart) => any;
+    pinch?: (options: OnPinch) => any;
+    pinchend?: (options: OnPinchEnd) => any;
 }

tsconfig.json

@@ -11,2 +11,4 @@ {
     "moduleResolution": "node",
+    "strict": true,
+    "strictFunctionTypes": false,
     "lib": [
@@ -13,0 +15,0 @@ "es2015",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137798

increased by173.73%

Number of package files

29

increased by31.82%

Lines of code

1610

increased by136.07%

Worsened metrics

Dev dependency count

5

increased by25%

Number of lines in readme file

100

decreased by-5.66%

No dependency changes