fixed up snapping with resize

3 files changed, 26 insertions, 3 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 225d25d2c..c03d9ea1b 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -20,6 +20,7 @@ import { DocumentView } from "../views/nodes/DocumentView";
 import { UndoManager } from "./UndoManager";
 import { PointData } from "../../new_fields/InkField";
 import { MainView } from "../views/MainView";
+import { action } from "mobx";
 
 export type dropActionType = "alias" | "copy" | "move" | undefined; // undefined = move
 export function SetupDrag(
@@ -303,7 +304,7 @@ export namespace DragManager {
         MainView.Instance._vLines = vertLines;
     }
 
-    function snapDrag(e: PointerEvent, xFromLeft: number, yFromTop: number, xFromRight: number, yFromBottom: number) {
+    export function snapDrag(e: PointerEvent, xFromLeft: number, yFromTop: number, xFromRight: number, yFromBottom: number) {
         let thisX = e.pageX;
         let thisY = e.pageY;
         const currLeft = e.pageX - xFromLeft;
@@ -454,10 +455,14 @@ export namespace DragManager {
             dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
             eles.map(ele => ele.parentElement && ele.parentElement?.className === dragData.dragDivName ? (ele.parentElement.hidden = false) : (ele.hidden = false));
         };
-        const endDrag = () => {
+        const endDrag = action(() => {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
-        };
+            MainView.Instance._hLines = [];
+            MainView.Instance._vLines = [];
+            vertSnapLines.length = 0;
+            horizSnapLines.length = 0;
+        });
 
         AbortDrag = () => {
             hideDragShowOriginalElements();
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 99e071d6a..e2759291a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -20,6 +20,7 @@ import React = require("react");
 import { Id } from '../../new_fields/FieldSymbols';
 import e = require('express');
 import { CollectionDockingView } from './collections/CollectionDockingView';
+import { MainView } from './MainView';
 
 library.add(faCaretUp);
 library.add(faObjectGroup);
@@ -46,6 +47,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     private _linkBoxHeight = 20 + 3; // link button height + margin
     private _titleHeight = 20;
     private _resizeUndo?: UndoManager.Batch;
+    private _offX = 0; _offY = 0;  // offset from click pt to inner edge of resize border
+    private _snapX = 0; _snapY = 0; // last snapped location of resize border
     @observable private _accumulatedTitle = "";
     @observable private _titleControlString: string = "#title";
     @observable private _edtingTitle = false;
@@ -238,12 +241,24 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { });
         if (e.button === 0) {
             this._resizeHdlId = e.currentTarget.id;
+            const bounds = e.currentTarget.getBoundingClientRect();
+            this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX;
+            this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
             this.Interacting = true;
             this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
+            SelectionManager.SelectedDocuments()[0].props.setupDragLines?.();
         }
+        this._snapX = e.pageX;
+        this._snapY = e.pageY;
     }
 
     onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
+        const { thisX, thisY } = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY);
+        move[0] = thisX - this._snapX;
+        move[1] = thisY - this._snapY;
+        this._snapX = thisX;
+        this._snapY = thisY;
+
         let dX = 0, dY = 0, dW = 0, dH = 0;
 
         switch (this._resizeHdlId) {
@@ -349,6 +364,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         this.Interacting = false;
         (e.button === 0) && this._resizeUndo?.end();
         this._resizeUndo = undefined;
+        MainView.Instance._hLines = [];
+        MainView.Instance._vLines = [];
     }
 
     @computed
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7b28a45f8..085637440 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -74,6 +74,7 @@ export interface DocumentViewProps {
     removeDocument?: (doc: Doc) => boolean;
     moveDocument?: (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean) => boolean;
     ScreenToLocalTransform: () => Transform;
+    setupDragLines?: () => void;
     renderDepth: number;
     ContentScaling: () => number;
     PanelWidth: () => number;