feat: Add pinch events

Author: daybrush

README.md

@@ -44,7 +44,7 @@
 </tr>
 <tr>
 <td align="center"><strong>Warpable</strong></td>
-<td align="center"><strong>Pinchable(Soon)</strong></td>
+<td align="center"><strong>Pinchable</strong></td>
 <td align="center"><strong></strong></td>
 <td align="center"><strong></strong></td>
 </tr>
@@ -85,7 +85,8 @@ import Moveable from "moveable";
 
 const moveable = new Moveable(document.body, {
     target: document.querySelector(".target"),
-    container: null,
+    // If the container is null, the position is fixed. (default: parentElement(document.body))
+    container: document.body,
     draggable: true,
     resizable: true,
     scalable: true,
@@ -177,6 +178,20 @@ moveable.on("warpStart", ({ target, clientX, clientY }) => {
 }).on("warpEnd", ({ target, isDrag, clientX, clientY }) => {
     console.log("onWarpEnd", target, isDrag);
 });
+
+/* pinchable */
+// Enabling pincable lets you use events that
+// can be used in draggable, resizable, scalable, and rotateable.
+moveable.on("pinchStart", ({ target, clientX, clientY }) => {
+    // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
+    console.log("onPinchStart");
+}).on("pinch", ({ target, clientX, clientY, datas }) => {
+    // pinch event occur before drag, rotate, scale, resize
+    console.log("onPinch");
+}).on("pinchEnd", ({ isDrag, target, clientX, clientY, datas }) => {
+    // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
+    console.log("onPinchEnd");
+});
 ```
 
 

demo/index.html

@@ -139,6 +139,21 @@ <h2 class="container">Features</h2>
                 <pre class="panel" data-panel="preact" data-group="warpable"><code class="javascript"></code></pre>
             </div>
         </div>
+        <div class="container">
+            <div class="left">
+                <div class="moveable pinchable"><span>Pinchable</span></div>
+            </div>
+            <div class="right">
+                <p class="description"><strong>Pinchable</strong> indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.<br/>(Check on the mobile)                </p>
+                <button class="tab selected" data-tab="vanilla" data-group="pinchable">Vanilla</button>
+                <button class="tab" data-tab="react" data-group="pinchable">React</button>
+                <button class="tab" data-tab="preact" data-group="pinchable">Preact</button>
+                <pre class="panel selected" data-panel="vanilla"
+                    data-group="pinchable"><code class="javascript"></code></pre>
+                <pre class="panel" data-panel="react" data-group="pinchable"><code class="javascript"></code></pre>
+                <pre class="panel" data-panel="preact" data-group="pinchable"><code class="javascript"></code></pre>
+            </div>
+        </div>
         <div class="container">
             <div class="left">
                 <div class="moveable origin"><span>30%, 50%</span></div>

demo/src/consts.ts

@@ -191,6 +191,48 @@ return (
 );
         `,
     },
+    pinchable: {
+        vanilla: `
+import Moveable from "moveable";
+const scale = [1, 1];
+let rotate = 0;
+
+const pinchable = new Moveable(document.body, {
+    target: document.querySelector(".pinchable"),
+    pinchable: ["rotatable", "scalable"],
+}).on("rotate", ({ target, beforeDelta }) => {
+    rotate += beforeDelta;
+    target.style.transform = "scale(" + scale.join(", ") + ") rotate(" + rotate + "deg)";
+}).on("scale", ({ target, delta }) => {
+    scale[0] += delta[0];
+    scale[1] += delta[1];
+    target.style.transform = "scale(" + scale.join(", ") + ") rotate(" + rotate + "deg)";
+});`,
+    react: `
+import Moveable from "react-moveable";
+this.scale = [1, 1];
+this.rotate = 0;
+
+return (
+    <Moveable
+        target={document.querySelector(".pinchable")}
+        pinchable={["rotatable", "scalable"]},
+        onRotate={({ target, beforeDelta }) => {
+            this.rotate += beforeDelta;
+            target.style.transform
+                = "scale(" + this.scale.join(", ") + ") "
+                + "rotate(" + this.rotate + "deg)";
+        }}
+        onScale={({ target, beforeDelta }) => {
+            this.scale[0] += delta[0];
+            this.scale[1] += delta[1];
+            target.style.transform
+                = "scale(" + this.scale.join(", ") + ") "
+                + "rotate(" + this.rotate + "deg)";
+        }}
+    />
+);`,
+    },
     origin: {
         vanilla: `
 import Moveable from "moveable";

demo/src/index.css

@@ -169,7 +169,7 @@ a {
     font-weight: 600;
 }
 
-.draggable, .resizable, .scalable, .rotatable, .origin {
+.draggable, .resizable, .scalable, .rotatable, .origin, .warpable, .pinchable {
     position: absolute;
     left: 0;
 }

demo/src/index.ts

@@ -30,46 +30,63 @@ const frame = new Frame({
 function setTransform(target: HTMLElement | SVGElement) {
     target.style.cssText = frame.toCSS();
 }
-function setLabel(clientX: number, clientY: number, text) {
+function setLabel(clientX: number, clientY: number, text: string) {
     // tslint:disable-next-line: max-line-length
-    labelElement.style.cssText = `display: block; transform: translate(${clientX}px, ${clientY - 10}px) translate(-100%, -100%);`;
+
+    labelElement.style.cssText = `
+    display: block; transform: translate(${clientX}px, ${clientY - 10}px) translate(-100%, -100%);`;
+
     labelElement.innerHTML = text;
 }
+
+
 const moveable = new Moveable(moveableElement.parentElement, {
     target: moveableElement,
-    container: moveableElement.parentElement,
     origin: false,
     draggable: true,
     rotatable: true,
     scalable: true,
+    pinchable: true,
     keepRatio: false,
     throttleDrag: 1,
     throttleScale: 0.01,
     throttleRotate: 0.2,
     throttleResize: 1,
-}).on("drag", ({ target, left, top, clientX, clientY }) => {
+}).on("pinch", ({ clientX, clientY }) => {
+    setTimeout(() => {
+        setLabel(clientX, clientY, `X: ${frame.get("left")}
+        <br/>Y: ${frame.get("top")}
+        <br/>W: ${frame.get("width")}
+        <br/>H: ${frame.get("height")}
+        <br/>S: ${frame.get("transform", "scaleX").toFixed(2)}, ${frame.get("transform", "scaleY").toFixed(2)}
+        <br/>R: ${parseFloat(frame.get("transform", "rotate")).toFixed(1)}deg
+        `);
+    });
+}).on("drag", ({ target, left, top, clientX, clientY, isPinch }) => {
     frame.set("left", `${left}px`);
     frame.set("top", `${top}px`);
     setTransform(target);
-    setLabel(clientX, clientY, `X: ${left}px<br/>Y: ${top}px`);
-}).on("scale", ({ target, dist, clientX, clientY }) => {
+    !isPinch && setLabel(clientX, clientY, `X: ${left}px<br/>Y: ${top}px`);
+
+}).on("scale", ({ target, dist, clientX, clientY, isPinch }) => {
     const scaleX = frame.get("transform", "scaleX") * dist[0];
     const scaleY = frame.get("transform", "scaleY") * dist[1];
     frame.set("transform", "scaleX", scaleX);
     frame.set("transform", "scaleY", scaleY);
     setTransform(target);
-    setLabel(clientX, clientY, `S: ${scaleX.toFixed(2)}, ${scaleY.toFixed(2)}`);
-}).on("rotate", ({ target, beforeDelta, clientX, clientY }) => {
+    !isPinch && setLabel(clientX, clientY, `S: ${scaleX.toFixed(2)}, ${scaleY.toFixed(2)}`);
+
+}).on("rotate", ({ target, beforeDelta, clientX, clientY, isPinch }) => {
     const deg = parseFloat(frame.get("transform", "rotate")) + beforeDelta;
 
     frame.set("transform", "rotate", `${deg}deg`);
     setTransform(target);
-    setLabel(clientX, clientY, `R: ${deg.toFixed(1)}`);
-}).on("resize", ({ target, width, height, clientX, clientY }) => {
+    !isPinch && setLabel(clientX, clientY, `R: ${deg.toFixed(1)}`);
+}).on("resize", ({ target, width, height, clientX, clientY, isPinch }) => {
     frame.set("width", `${width}px`);
     frame.set("height", `${height}px`);
     setTransform(target);
-    setLabel(clientX, clientY, `W: ${width}px<br/>H: ${height}px`);
+    !isPinch &&  setLabel(clientX, clientY, `W: ${width}px<br/>H: ${height}px`);
 }).on("warp", ({ target, multiply, delta, clientX, clientY }) => {
     frame.set("transform", "matrix3d", multiply(frame.get("transform", "matrix3d"), delta));
     setTransform(target);
@@ -89,7 +106,6 @@ const moveable = new Moveable(moveableElement.parentElement, {
 const draggableElement: HTMLElement = document.querySelector(".draggable");
 const draggable = new Moveable(draggableElement.parentElement, {
     target: draggableElement,
-    container: draggableElement.parentElement,
     origin: false,
     draggable: true,
 }).on("drag", ({ target, transform }) => {
@@ -99,7 +115,6 @@ const draggable = new Moveable(draggableElement.parentElement, {
 const resizableElement: HTMLElement = document.querySelector(".resizable");
 const resizable = new Moveable(resizableElement.parentElement, {
     target: resizableElement,
-    container: resizableElement.parentElement,
     origin: false,
     resizable: true,
 }).on("resize", ({ target, width, height }) => {
@@ -110,7 +125,6 @@ const resizable = new Moveable(resizableElement.parentElement, {
 const scalableElement: HTMLElement = document.querySelector(".scalable");
 const scalable = new Moveable(scalableElement.parentElement, {
     target: scalableElement,
-    container: scalableElement.parentElement,
     origin: false,
     scalable: true,
 }).on("scale", ({ target, transform }) => {
@@ -120,7 +134,6 @@ const scalable = new Moveable(scalableElement.parentElement, {
 const rotatableElement: HTMLElement = document.querySelector(".rotatable");
 const rotatable = new Moveable(rotatableElement.parentElement, {
     target: rotatableElement,
-    container: rotatableElement.parentElement,
     origin: false,
     rotatable: true,
 }).on("rotate", ({ target, transform }) => {
@@ -129,7 +142,6 @@ const rotatable = new Moveable(rotatableElement.parentElement, {
 const warpableElement: HTMLElement = document.querySelector(".warpable");
 const warpable = new Moveable(warpableElement.parentElement, {
     target: warpableElement,
-    container: warpableElement.parentElement,
     warpable: true,
     origin: false,
 }).on("warp", ({ target, transform }) => {
@@ -139,7 +151,6 @@ const warpable = new Moveable(warpableElement.parentElement, {
 const originElement: HTMLElement = document.querySelector(".origin");
 const origin = new Moveable(originElement.parentElement, {
     target: originElement,
-    container: originElement.parentElement,
     origin: true,
     draggable: true,
     rotatable: true,
@@ -150,13 +161,32 @@ const origin = new Moveable(originElement.parentElement, {
     target.style.transform = transform;
 });
 
+const pinchableElement: HTMLElement = document.querySelector(".pinchable");
+const scale = [1, 1];
+let rotate = 0;
+const pinchable = new Moveable(pinchableElement.parentElement, {
+    target: pinchableElement,
+    pinchable: ["rotatable", "scalable"],
+    origin: false,
+}).on("rotate", ({ beforeDelta }) => {
+    rotate += beforeDelta;
+
+    pinchableElement.style.transform = `scale(${scale.join(", ")}) rotate(${rotate}deg)`;
+}).on("scale", ({ delta }) => {
+    scale[0] += delta[0];
+    scale[1] += delta[1];
+
+    pinchableElement.style.transform = `scale(${scale.join(", ")}) rotate(${rotate}deg)`;
+});
+
 window.addEventListener("resize", () => {
     moveable.updateRect();
     draggable.updateRect();
     resizable.updateRect();
     scalable.updateRect();
     rotatable.updateRect();
     warpable.updateRect();
+    pinchable.updateRect();
 });
 
 document.addEventListener("DOMContentLoaded", () => {

package-lock.json

@@ -48,11 +48,12 @@
   },
   "homepage": "https://github.com/daybrush/moveable#readme",
   "dependencies": {
-    "@daybrush/drag": "^0.6.0",
+    "@daybrush/drag": "^0.8.0",
     "@daybrush/utils": "^0.10.0",
+    "@egjs/agent": "^2.1.5",
     "@egjs/component": "^2.1.2",
     "framework-utils": "^0.1.0",
-    "preact-moveable": "^0.6.3"
+    "preact-moveable": "^0.8.1"
   },
   "devDependencies": {
     "@daybrush/builder": "^0.1.1",