feat: Add Warpable Feature

Author: daybrush

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## [0.4.0] - 2019-07-29
+### Added
+- Add Warpable and option, events
+- Support SVG Offset (Only SVG Tag)
+- Support 3d transform(matrix) (`perspective` is not yet supported.)
+
+### Fixed
+- Fix right mouse click issue #7
+- Synchronize target's shape. (Previously, it worked independently of target's shape.)

README.md

@@ -8,7 +8,7 @@
 <a href="https://github.com/daybrush/moveable/tree/master/packages/react-moveable" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
 <a href="https://github.com/daybrush/moveable/tree/master/packages/preact-moveable" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
 </p>
-<p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable</p>
+<p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable</p>
 <p align="middle">
     <a href="https://daybrush.com/moveable"><strong>Demo</strong></a> /
     <a href="https://github.com/daybrush/moveable/tree/master/packages/react-moveable"><strong>React Moveable</strong></a> /
@@ -40,7 +40,7 @@
 </td>
 </tr>
 <tr>
-<td align="center"><strong>Warpable(soon)</strong></td>
+<td align="center"><strong>Warpable</strong></td>
 <td align="center"><strong></strong></td>
 <td align="center"><strong></strong></td>
 <td align="center"><strong></strong></td>
@@ -86,6 +86,7 @@ const moveable = new Moveable(document.body, {
     resizable: true,
     scalable: true,
     rotatable: true,
+    warpable: true,
     origin: true,
     keepRatio: true,
     throttleDrag: 0,
@@ -143,6 +144,32 @@ moveable.on("rotateStart", ({ target, clientX, clientY }) => {
 }).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
     console.log("onRotateEnd", target, isDrag);
 });
+
+/* warpable */
+this.matrix = [
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1,
+];
+moveable.on("warpStart", ({ target, clientX, clientY }) => {
+    console.log("onWarpStart", target);
+}).on("warp", ({
+    target,
+    clientX,
+    clientY,
+    delta,
+    dist,
+    multiply,
+    transform,
+}) => {
+    console.log("onWarp", target);
+    // target.style.transform = transform;
+    this.matrix = multiply(this.matrix, delta);
+    target.style.transform = `matrix3d(${this.matrix.join(",")})`;
+}).on("warpEnd", ({ target, isDrag, clientX, clientY }) => {
+    console.log("onWarpEnd", target, isDrag);
+});
 ```
 
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "moveable",
-  "version": "0.3.0",
-  "description": "Moveable is Draggable, Resizable, Scalable, Rotatable.",
+  "version": "0.4.0",
+  "description": "Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable.",
   "main": "./dist/moveable.cjs.js",
   "module": "./dist/moveable.esm.js",
   "sideEffects": false,
@@ -25,11 +25,13 @@
     "draggable",
     "rotatable",
     "movable",
+    "warpable",
     "dom",
     "resize",
     "scale",
     "drag",
     "move",
+    "warp",
     "rotate",
     "react",
     "preact",
@@ -46,11 +48,11 @@
   },
   "homepage": "https://github.com/daybrush/moveable#readme",
   "dependencies": {
-    "@daybrush/drag": "^0.5.0",
+    "@daybrush/drag": "^0.6.0",
     "@daybrush/utils": "^0.10.0",
     "@egjs/component": "^2.1.2",
     "framework-utils": "^0.1.0",
-    "preact-moveable": "^0.5.2"
+    "preact-moveable": "^0.6.1"
   },
   "devDependencies": {
     "@daybrush/builder": "^0.1.1",
@@ -64,6 +66,7 @@
     "print-sizes": "0.0.4",
     "rollup-plugin-css-bundle": "^1.0.4",
     "rollup-plugin-preact": "^0.4.1",
+    "scenejs": "^1.1.4",
     "tslint": "^5.18.0",
     "typescript": "^3.5.2"
   }

package.json

@@ -6,7 +6,7 @@ import { MoveableOptions } from "./types";
 import {
     OnDragStart, OnDrag, OnResize, OnResizeStart,
     OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,
-    OnRotateEnd, OnDragEnd, OnRotate, OnScale,
+    OnRotateEnd, OnDragEnd, OnRotate, OnScale, OnWarpStart, OnWarpEnd, OnWarp,
 } from "react-moveable/declaration/types";
 
 /**
@@ -40,6 +40,9 @@ class Moveable extends EgComponent {
                 onRotateStart={this.onRotateStart}
                 onRotate={this.onRotate}
                 onRotateEnd={this.onRotateEnd}
+                onWarpStart={this.onWarpStart}
+                onWarp={this.onWarp}
+                onWarpEnd={this.onWarpEnd}
             />,
             element,
         );
@@ -150,6 +153,23 @@ class Moveable extends EgComponent {
             rotatable,
         });
     }
+    /**
+     * Whether or not target can be warped.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.warpable = true;
+     */
+    get warpable(): boolean {
+        return this.getMoveableProps().warpable;
+    }
+    set warpable(warpable: boolean) {
+        this.innerMoveable.setState({
+            warpable,
+        });
+    }
     /**
      * When resize or scale, keeps a ratio of the width, height.
      * @example
@@ -266,7 +286,7 @@ class Moveable extends EgComponent {
         return this.getMoveable().isMoveableElement(target);
     }
     /**
-     * If the width, height, left, and top of the target change, update the shape of the moveable.
+     * If the width, height, left, and top of all elements change, update the shape of the moveable.
      * @example
      * import Moveable from "moveable";
      *
@@ -279,6 +299,19 @@ class Moveable extends EgComponent {
     public updateRect() {
         this.getMoveable().updateRect();
     }
+    /**
+     * If the width, height, left, and top of the only target change, update the shape of the moveable.
+     * @param - the values of x and y to move moveable.
+     * @example
+     * import Moveable from "moveable";
+     *
+     * const moveable = new Moveable(document.body);
+     *
+     * moveable.updateTarget();
+     */
+    public updateTarget(): void {
+        this.getMoveable().updateTarget();
+    }
     private getMoveable() {
         return this.innerMoveable.preactMoveable;
     }
@@ -321,6 +354,15 @@ class Moveable extends EgComponent {
     private onRotateEnd = (e: OnRotateEnd) => {
         this.trigger("rotateEnd", e);
     }
+    private onWarpStart = (e: OnWarpStart) => {
+        this.trigger("warpStart", e);
+    }
+    private onWarp = (e: OnWarp) => {
+        this.trigger("warp", e);
+    }
+    private onWarpEnd = (e: OnWarpEnd) => {
+        this.trigger("warpEnd", e);
+    }
 }
 
 /**
@@ -495,6 +537,9 @@ declare interface Moveable {
     on(eventName: "rotate", handlerToAttach: (event: OnRotate) => any): this;
     on(eventName: "rotateStart", handlerToAttach: (event: OnRotateStart) => any): this;
     on(eventName: "rotateEnd", handlerToAttach: (event: OnRotateEnd) => any): this;
+    on(eventName: "warp", handlerToAttach: (event: OnWarp) => any): this;
+    on(eventName: "warpStart", handlerToAttach: (event: OnWarpStart) => any): this;
+    on(eventName: "warpEnd", handlerToAttach: (event: OnWarpEnd) => any): this;
     on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;
     on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;
 }

src/Moveable.tsx

@@ -5,6 +5,7 @@
  * @property - Whether or not target can be resized.
  * @property - Whether or not target can be scaled.
  * @property - Whether or not target can be rotated.
+ * @property - Whether or not target can be warped.
  * @property - Whether or not the origin controlbox will be visible or not
  * @property - The target to indicate Moveable Control Box.
  * @property - Moveable Container.
@@ -13,13 +14,13 @@
  * @property - throttle of scaleX, scaleY when scale.
  * @property - throttle of angle(degree) when rotate.
  * @property - When resize or scale, keeps a ratio of the width, height.
-
  */
 export interface MoveableOptions {
     draggable?: boolean;
     resizable?: boolean;
     scalable?: boolean;
     rotatable?: boolean;
+    warpable?: boolean;
     origin?: boolean;
     target?: SVGElement | HTMLElement;
     container?: SVGElement | HTMLElement | null;