fix: fix guidelines when dragging

Author: daybrush

CHANGELOG.md

@@ -3,6 +3,10 @@ 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.10.1] - 2019-11-12
+### Fixed
+* Fix that guidelines do not appear when dragging.
+
 ## [0.10.0] - 2019-11-09
 ### Added
 * Add `scrollable` props. #39

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "moveable",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.",
   "main": "./dist/moveable.cjs.js",
   "module": "./dist/moveable.esm.js",
@@ -55,7 +55,7 @@
   "homepage": "https://github.com/daybrush/moveable#readme",
   "dependencies": {
     "@egjs/component": "^2.1.2",
-    "preact-moveable": "^0.12.6"
+    "preact-moveable": "^0.12.7"
   },
   "devDependencies": {
     "@daybrush/builder": "^0.1.2",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "preact-moveable",
-    "version": "0.12.6",
+    "version": "0.12.7",
     "description": "A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Pinchable, Groupable, Snappable.",
     "main": "./dist/moveable.cjs.js",
     "module": "./dist/moveable.esm.js",
@@ -62,6 +62,6 @@
     "dependencies": {
         "preact-compat": "^3.0.0",
         "preact-css-styler": "^0.4.1",
-        "react-moveable": "^0.13.6"
+        "react-moveable": "^0.13.7"
     }
 }

packages/preact-moveable/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-moveable",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "description": "A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.",
   "main": "./dist/moveable.cjs.js",
   "module": "./dist/moveable.esm.js",

packages/preact-moveable/package.json

@@ -57,20 +57,29 @@ class App extends React.Component {
                     // keepRatio={false}
                     target={this.state.targets}
                     origin={true}
-                    // snappable={true}
-                    verticalGuidelines={[100.5, 200.5, 400, 500]}
+                    snappable={true}
+                    verticalGuidelines={[100, 200, 400, 500]}
                     horizontalGuidelines={[100, 200, 400, 500]}
                     throttleRotate={30}
                     onDragGroupStart={e => {
                         console.log("start", e);
+
+                        e.events.forEach(ev => {
+                            const groupItem = this.itemMap.get(ev.target)!;
+
+                            ev.set([
+                                parseFloat(groupItem.get("tx")),
+                                parseFloat(groupItem.get("ty")),
+                            ]);
+                        });
                     }}
                     onDragGroup={e => {
                         // console.log(e.beforeDelta);
 
                         e.events.forEach(ev => {
                             const groupItem = this.itemMap.get(ev.target)!;
-                            groupItem.set("tx", `${parseFloat(groupItem.get("tx")) + ev.beforeDelta[0]}px`);
-                            groupItem.set("ty", `${parseFloat(groupItem.get("ty")) + ev.beforeDelta[1]}px`);
+                            groupItem.set("tx", `${ev.beforeTranslate[0]}px`);
+                            groupItem.set("ty", `${ev.beforeTranslate[1]}px`);
 
                             ev.target.style.cssText += groupItem.toCSS();
                         });
@@ -158,7 +167,7 @@ class App extends React.Component {
                     // renderDirections={["n", "ne", "nw"]}
                     elementGuidelines={[document.querySelector(".box1 span")!, document.querySelector(".emo img")!]}
                     snapCenter={false}
-                    snapThreshold={10}
+                    // snapThreshold={10}
                     // scalable={!isResizable}
                     // scalable={true}
                     resizable={isResizable}

packages/react-moveable/package-lock.json

@@ -151,7 +151,7 @@ class MoveableGroup extends MoveableManager<GroupableProps, any> {
         state.width = width;
         state.height = height;
 
-        const info = getTargetInfo(target, this.controlBox.getElement(), state);
+        const info = getTargetInfo(target, this.controlBox.getElement(), this.getContainer(), state);
         const pos = [info.left!, info.top!];
         [
             info.pos1,

packages/react-moveable/package.json

@@ -142,9 +142,9 @@ export default class MoveableManager<T = {}, U = {}>
         const parentMoveable = this.props.parentMoveable;
         const state = this.state;
         const target = (state.target || this.props.target) as HTMLElement | SVGElement;
-
+        const container = this.getContainer();
         this.updateState(
-            getTargetInfo(target, this.getContainer(), isTarget ? state : undefined),
+            getTargetInfo(target, container, container, isTarget ? state : undefined),
             parentMoveable ? false : isSetState,
         );
     }