feat: Add Groupable

Author: daybrush

CHANGELOG.md

@@ -3,6 +3,15 @@ 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.7.0] - 2019-08-20
+### Added
+- Add [Groupable](https://github.com/daybrush/moveable/blob/master/groupable.md)
+- Add edge option
+
+### Fixed
+- fix that do not call `resizeEnd` #19
+
+
 ## [0.6.4] - 2019-08-07
 ### Fixed
 - fix ESM config

README.md

@@ -12,7 +12,7 @@
     alt="Vue"
     src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
 </p>
-<p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable</p>
+<p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable</p>
 <p align="middle">
     <a href="https://daybrush.com/moveable" target="_blank"><strong>Demo</strong></a> /
     <a href="https://daybrush.com/moveable/release/latest/doc/" target="_blank"><strong>API</strong></a> /
@@ -47,24 +47,26 @@
 <tr>
 <td align="center"><strong>Warpable</strong></td>
 <td align="center"><strong>Pinchable</strong></td>
-<td align="center"><strong></strong></td>
+<td align="center"><a href="https://github.com/daybrush/moveable/blob/master/groupable.md"><strong>Groupable</strong></a></td>
 <td align="center"><strong></strong></td>
 </tr>
 <tr>
 <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif"></td>
 <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif"></td>
-<td align="center"><strong></strong></td>
+<td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif"></td>
 <td align="center"><strong></strong></td>
 </tr>
 </table>
 
+
 ## 🔥 Features
 * **Draggable** refers to the ability to drag and move targets.
 * **Resizable** indicates whether the target's width and height can be increased or decreased.
 * **Scalable** indicates whether the target's x and y can be scale of transform.
 * **Rotatable** indicates whether the target can be rotated.
 * **Warpable** indicates whether the target can be warped(distorted, bented).
 * **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
+* **[Groupable](https://github.com/daybrush/moveable/blob/master/groupable.md)** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
 * Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)
 * Support 3d Transform
 
@@ -101,6 +103,8 @@ const moveable = new Moveable(document.body, {
     pinchable: true, // ["resizable", "scalable", "rotatable"]
     origin: true,
     keepRatio: true,
+    // Resize, Scale Events at edges.
+    edge: false,
     throttleDrag: 0,
     throttleResize: 0,
     throttleScale: 0,

demo/index.html

@@ -174,6 +174,24 @@ <h2 class="container">Features</h2>
                 <pre class="panel" data-panel="angular" data-group="pinchable"><code class="javascript"></code></pre>
             </div>
         </div>
+        <div class="container">
+            <div class="left">
+                <div class="moveable groupable"><span>G1</span><span>G2</span><span>G3</span></div>
+            </div>
+            <div class="right">
+                <p class="description"><strong>Groupable</strong> indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
+                </p>
+                <button class="tab selected" data-tab="vanilla" data-group="groupable">Vanilla</button>
+                <button class="tab" data-tab="react" data-group="groupable">React</button>
+                <button class="tab" data-tab="preact" data-group="groupable">Preact</button>
+                <button class="tab" data-tab="angular" data-group="groupable">Angular</button>
+                <pre class="panel selected" data-panel="vanilla"
+                    data-group="groupable"><code class="javascript"></code></pre>
+                <pre class="panel" data-panel="react" data-group="groupable"><code class="javascript"></code></pre>
+                <pre class="panel" data-panel="preact" data-group="groupable"><code class="javascript"></code></pre>
+                <pre class="panel" data-panel="angular" data-group="groupable"><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

@@ -457,4 +457,99 @@ export class AppComponent {
 }
 `,
     },
+    groupable: {
+        vanilla: `
+import Moveable from "moveable";
+const poses = [
+    [0, 0],
+    [0, 0],
+    [0, 0],
+];
+const target = [].slice.call(
+    document.querySelectorAll(".target"),
+);
+const groupable = new Moveable(document.body, {
+    target,
+    draggable: true,
+}).on("dragGroup", ({ events }) => {
+    events.forEach(({ target, beforeDelta }, i) => {
+        poses[i][0] += beforeDelta[0];
+        poses[i][1] += beforeDelta[1];
+
+        target.style.transform
+            = "translate("
+            + poses[i][0] + "px, "
+            + poses[i][1] + "px)";
+    });
+});
+        `,
+        react: `
+import Moveable from "react-moveable";
+
+this.poses = [
+    [0, 0],
+    [0, 0],
+    [0, 0],
+];
+
+const target = [].slice.call(
+    document.querySelectorAll(".target"),
+);
+return (
+    <Moveable
+        target={target}
+        draggable={true}
+        onDragGroup={({ events }) => {
+            events.forEach(({ target, beforeDelta }, i) => {
+                this.poses[i][0] += beforeDelta[0];
+                this.poses[i][1] += beforeDelta[1];
+
+                target.style.transform
+                    = "translate("
+                    + this.poses[i][0] + "px, "
+                    + this.poses[i][1] + "px)";
+            });
+        }}
+    />
+);
+        `,
+        angular: `
+import {
+    NgxMoveableModule,
+    NgxMoveableComponent,
+} from "ngx-moveable";
+
+@Component({
+    selector: 'AppComponent',
+    template: ${"`"}
+<div #target1 class="target">target1</div>
+<div #target2 class="target">target2</div>
+<div #target3 class="target">target3</div>
+<ngx-moveable
+    [target]="[target1, target2, target3]"
+    [draggable]="true"
+    (dragGroup)="onDragGroup($event)
+    />
+${"`"},
+})
+export class AppComponent {
+    poses = [
+        [0, 0],
+        [0, 0],
+        [0, 0],
+    ];
+    onDragGroup({ events }) {
+        events.forEach(({ target, beforeDelta }, i) => {
+            this.poses[i][0] += beforeDelta[0];
+            this.poses[i][1] += beforeDelta[1];
+
+            target.style.transform
+                = "translate("
+                + this.poses[i][0] + "px, "
+                + this.poses[i][1] + "px)";
+        });
+    }
+}
+        `,
+    },
 };

demo/src/index.css

@@ -169,10 +169,28 @@ a {
     font-weight: 600;
 }
 
-.draggable, .resizable, .scalable, .rotatable, .origin, .warpable, .pinchable {
+.left>div {
     position: absolute;
     left: 0;
 }
+
+
+.groupable span {
+    width: 80px;
+    height: 60px;
+    transform: scale(1);
+}
+.groupable span:nth-child(1) {
+    left: 30px;
+}
+.groupable span:nth-child(2) {
+    left: 120px;
+    top: 160px;
+}
+.groupable span:nth-child(3) {
+    left: 150px;
+    top: 20px;
+}
 .origin {
     transform-origin: 30% 50%;
 }
@@ -229,6 +247,7 @@ code.hljs {
 }
 
 
+
 @media screen and (max-width: 750px) {
     .page.feature .container {
         display: block;

demo/src/index.ts

@@ -2,7 +2,6 @@ import Moveable from "../../src/Moveable";
 import { codes } from "./consts";
 import { Frame } from "scenejs";
 import "./index.css";
-import { hasClass } from "@daybrush/utils";
 
 declare const hljs: any;
 
@@ -39,7 +38,6 @@ function setLabel(clientX: number, clientY: number, text: string) {
     labelElement.innerHTML = text;
 }
 
-
 const moveable = new Moveable(moveableElement.parentElement, {
     target: moveableElement,
     origin: false,
@@ -179,6 +177,26 @@ const pinchable = new Moveable(pinchableElement.parentElement, {
     pinchableElement.style.transform = `scale(${scale.join(", ")}) rotate(${rotate}deg)`;
 });
 
+const groupableElement: HTMLElement = document.querySelector(".groupable");
+const poses = [
+    [0, 0],
+    [0, 0],
+    [0, 0],
+];
+
+const groupable = new Moveable(groupableElement.parentElement, {
+    target: [].slice.call(groupableElement.querySelectorAll("span")),
+    origin: false,
+    draggable: true,
+}).on("dragGroup", ({ events }) => {
+    events.forEach(({ target, beforeDelta }, i) => {
+        poses[i][0] += beforeDelta[0];
+        poses[i][1] += beforeDelta[1];
+
+        target.style.transform = `translate(${poses[i][0]}px, ${poses[i][1]}px)`;
+    });
+});
+
 window.addEventListener("resize", () => {
     moveable.updateRect();
     draggable.updateRect();
@@ -187,6 +205,7 @@ window.addEventListener("resize", () => {
     rotatable.updateRect();
     warpable.updateRect();
     pinchable.updateRect();
+    groupable.updateRect();
 });
 
 document.addEventListener("DOMContentLoaded", () => {