fix: fix multiple snaps for slight difference #121

daybrush · Dec 23, 2019 · ef58132 · ef58132
1 parent 2ba7276
commit ef58132
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -10,6 +10,7 @@ import {
     getRect,
     filterAbles,
     equals,
+    resetClientRect,
 } from "./utils";
 import styler from "react-css-styler";
 import Dragger from "@daybrush/drag";
@@ -60,8 +61,8 @@ export default class MoveableManager<T = {}, U = {}>
         pos2: [0, 0],
         pos3: [0, 0],
         pos4: [0, 0],
-        clientRect: { left: 0, top: 0, bottom: 0, right: 0, width: 0, height: 0 },
-        containerRect: { left: 0, top: 0, bottom: 0, right: 0, width: 0, height: 0 },
+        clientRect: resetClientRect(),
+        containerRect: resetClientRect(),
         rotation: 0,
     } as any;
     public targetAbles: Array<Able<T>> = [];

diff --git a/packages/react-moveable/src/react-moveable/ables/Snappable.tsx b/packages/react-moveable/src/react-moveable/ables/Snappable.tsx
@@ -8,7 +8,7 @@ import {
 } from "../types";
 import {
     prefix, caculatePoses, getRect,
-    getAbsolutePosesByState, getAbsolutePoses, selectValue, throttle
+    getAbsolutePosesByState, getAbsolutePoses, selectValue, throttle, roundSign
 } from "../utils";
 import { directionCondition } from "../groupUtils";
 import { isUndefined, IObject } from "@daybrush/utils";
@@ -50,8 +50,8 @@ function snapStart(moveable: MoveableManager<SnappableProps, SnappableState>) {
     const poses = getAbsolutePosesByState(state);
     const targetLeft = Math.min(...poses.map(pos => pos[0]));
     const targetTop = Math.min(...poses.map(pos => pos[1]));
-    const distLeft = targetLeft - (clientLeft - containerLeft);
-    const distTop = targetTop - (clientTop - containerTop);
+    const distLeft = roundSign(targetLeft - (clientLeft - containerLeft));
+    const distTop = roundSign(targetTop - (clientTop - containerTop));
     const guidelines: Guideline[] = [];
 
     elementGuidelines!.forEach(el => {
@@ -61,7 +61,6 @@ function snapStart(moveable: MoveableManager<SnappableProps, SnappableState>) {
         const elementBottom = elementTop + height;
         const elementLeft = left - containerLeft;
         const elementRight = elementLeft + width;
-
         guidelines.push({ type: "vertical", element: el, pos: [
             throttle(elementLeft + distLeft, 0.1),
             elementTop,

diff --git a/packages/react-moveable/src/react-moveable/utils.ts b/packages/react-moveable/src/react-moveable/utils.ts
@@ -15,7 +15,7 @@ import {
 } from "@moveable/matrix";
 
 import MoveableManager from "./MoveableManager";
-import { MoveableManagerState, Able } from "./types";
+import { MoveableManagerState, Able, MoveableClientRect } from "./types";
 
 export function round(num: number) {
     return Math.round(num);
@@ -603,8 +603,8 @@ export function getTargetInfo(
     let is3d = false;
     let targetTransform = "";
     let beforeOrigin = [0, 0];
-    let clientRect = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 };
-    let containerRect = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 };
+    let clientRect = resetClientRect();
+    let containerRect = resetClientRect();
     let rotation = 0;
 
     const prevMatrix = state ? state.beforeMatrix : undefined;
@@ -687,6 +687,9 @@ export function getTargetInfo(
         clientRect,
     };
 }
+export function resetClientRect(): MoveableClientRect {
+    return { left: 0, right: 0, top: 0, width: 0, height: 0, bottom: 0 };
+}
 export function getClientRect(el: HTMLElement | SVGElement) {
     const { left, width, top, bottom, right, height } = el.getBoundingClientRect();
 
@@ -742,6 +745,9 @@ export function getAbsolutePosesByState({
 }) {
     return getAbsolutePoses([pos1, pos2, pos3, pos4], [left, top]);
 }
+export function roundSign(num: number) {
+    return Math.round(num % 1 === -0.5 ? num - 1 : num);
+}
 export function throttle(num: number, unit: number) {
     if (!unit) {
         return num;