Merge pull request #356 from browngraphicslab/snapper

Snapper

1 files changed, 57 insertions, 4 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 35694a6bd..a905dff0a 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -18,6 +18,8 @@ import { AudioBox } from "../views/nodes/AudioBox";
 import { DateField } from "../../new_fields/DateField";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { UndoManager } from "./UndoManager";
+import { PointData } from "../../new_fields/InkField";
+import { MainView } from "../views/MainView";
 
 export type dropActionType = "alias" | "copy" | "move" | undefined; // undefined = move
 export function SetupDrag(
@@ -73,6 +75,8 @@ export function SetupDrag(
 
 export namespace DragManager {
     let dragDiv: HTMLDivElement;
+    export let horizSnapLines: number[];
+    export let vertSnapLines: number[];
 
     export function Root() {
         const root = document.getElementById("root");
@@ -292,6 +296,14 @@ export namespace DragManager {
         StartDrag([ele], {}, downX, downY);
     }
 
+    @action
+    export function SetSnapLines(horizLines: number[], vertLines: number[]) {
+        horizSnapLines = horizLines;
+        vertSnapLines = vertLines;
+        MainView.Instance._hLines = horizLines;
+        MainView.Instance._vLines = vertLines;
+    }
+
     function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
         eles = eles.filter(e => e);
         if (!dragDiv) {
@@ -307,12 +319,22 @@ export namespace DragManager {
         const ys: number[] = [];
 
         const docs = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof PdfAnnoDragData ? [dragData.dragDocument] : [];
+        const elesCont = {
+            left: Number.MAX_SAFE_INTEGER,
+            top: Number.MAX_SAFE_INTEGER,
+            right: Number.MIN_SAFE_INTEGER,
+            bottom: Number.MIN_SAFE_INTEGER
+        };
         const dragElements = eles.map(ele => {
             if (!ele.parentNode) dragDiv.appendChild(ele);
             const dragElement = ele.parentNode === dragDiv ? ele : ele.cloneNode(true) as HTMLElement;
             const rect = ele.getBoundingClientRect();
             const scaleX = rect.width / ele.offsetWidth,
                 scaleY = rect.height / ele.offsetHeight;
+            elesCont.left = Math.min(rect.left, elesCont.left);
+            elesCont.top = Math.min(rect.top, elesCont.top);
+            elesCont.right = Math.max(rect.right, elesCont.right);
+            elesCont.bottom = Math.max(rect.bottom, elesCont.bottom);
             xs.push(rect.left);
             ys.push(rect.top);
             scaleXs.push(scaleX);
@@ -362,6 +384,10 @@ export namespace DragManager {
 
         let lastX = downX;
         let lastY = downY;
+        const xFromLeft = downX - elesCont.left;
+        const yFromTop = downY - elesCont.top;
+        const xFromRight = elesCont.right - downX;
+        const yFromBottom = elesCont.bottom - downY;
         let alias = "alias";
         const moveHandler = (e: PointerEvent) => {
             e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop
@@ -382,11 +408,38 @@ export namespace DragManager {
                     button: 0
                 }, dragData.droppedDocuments);
             }
+            let thisX = e.pageX;
+            let thisY = e.pageY;
+            const currLeft = e.pageX - xFromLeft;
+            const currTop = e.pageY - yFromTop;
+            const currRight = e.pageX + xFromRight;
+            const currBottom = e.pageY + yFromBottom;
+            const closestLeft = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currLeft) > Math.abs(curr - currLeft) ? curr : prev);
+            const closestTop = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currTop) > Math.abs(curr - currTop) ? curr : prev);
+            const closestRight = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currRight) > Math.abs(curr - currRight) ? curr : prev);
+            const closestBottom = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currBottom) > Math.abs(curr - currBottom) ? curr : prev);
+            const distFromClosestLeft = Math.abs(e.pageX - xFromLeft - closestLeft);
+            const distFromClosestTop = Math.abs(e.pageY - yFromTop - closestTop);
+            const distFromClosestRight = Math.abs(e.pageX + xFromRight - closestRight);
+            const distFromClosestBottom = Math.abs(e.pageY + yFromBottom - closestBottom);
+            if (distFromClosestLeft < 10 && distFromClosestLeft < distFromClosestRight) {
+                thisX = closestLeft + xFromLeft;
+            }
+            else if (distFromClosestRight < 10) {
+                thisX = closestRight - xFromRight;
+            }
+            if (distFromClosestTop < 10 && distFromClosestTop < distFromClosestRight) {
+                thisY = closestTop + yFromTop;
+            }
+            else if (distFromClosestBottom < 10) {
+                thisY = closestBottom - yFromBottom;
+            }
+
             alias = "move";
-            const moveX = e.pageX - lastX;
-            const moveY = e.pageY - lastY;
-            lastX = e.pageX;
-            lastY = e.pageY;
+            const moveX = thisX - lastX;
+            const moveY = thisY - lastY;
+            lastX = thisX;
+            lastY = thisY;
             dragElements.map((dragElement, i) => (dragElement.style.transform =
                 `translate(${(xs[i] += moveX) + (options?.offsetX || 0)}px, ${(ys[i] += moveY) + (options?.offsetY || 0)}px)  scale(${scaleXs[i]}, ${scaleYs[i]})`)
             );