snapping!

3 files changed, 23 insertions, 19 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index b0cabfaad..02d9f7200 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -19,6 +19,7 @@ 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 = "place" | "alias" | "copy" | undefined;
 export function SetupDrag(
@@ -74,8 +75,8 @@ export function SetupDrag(
 
 export namespace DragManager {
     let dragDiv: HTMLDivElement;
-    let horizSnapLines: number[];
-    let vertSnapLines: number[];
+    export let horizSnapLines: number[];
+    export let vertSnapLines: number[];
 
     export function Root() {
         const root = document.getElementById("root");
@@ -284,9 +285,12 @@ 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) {
@@ -373,8 +377,6 @@ export namespace DragManager {
         const yFromTop = downY - elesCont.top;
         const xFromRight = elesCont.right - downX;
         const yFromBottom = elesCont.bottom - downY;
-        console.log(elesCont);
-        console.log(xFromLeft, yFromTop);
         const moveHandler = (e: PointerEvent) => {
             e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop
             if (dragData instanceof DocumentDragData) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 40cabcf83..1f88410b8 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -42,6 +42,7 @@ import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { ScriptField } from '../../new_fields/ScriptField';
+import { DragManager } from '../util/DragManager';
 
 @observer
 export class MainView extends React.Component {
@@ -563,6 +564,9 @@ export class MainView extends React.Component {
         return this._mainViewRef;
     }
 
+    @observable public _hLines: any;
+    @observable public _vLines: any;
+
     render() {
         return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} ref={this._mainViewRef}>
             <DictationOverlay />
@@ -580,6 +584,12 @@ export class MainView extends React.Component {
             <MarqueeOptionsMenu />
             <RichTextMenu />
             <OverlayView />
+            <div className="snapLines" style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
+                <svg style={{ width: "100%", height: "100%" }}>
+                    {this._hLines?.map(l => <line x1="0" y1={l} x2="1000" y2={l} stroke="black" />)}
+                    {this._vLines?.map(l => <line y1="0" x1={l} y2="1000" x2={l} stroke="black" />)}
+                </svg>
+            </div>
         </div >);
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c4c37141b..ef49970e2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1099,7 +1099,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
         if (SelectionManager.GetIsDragging()) {
             const size = this.props.ScreenToLocalTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
             const selRect = { left: this.panX() - size[0] / 2, top: this.panY() - size[1] / 2, width: size[0], height: size[1] };
-            console.log(selRect);
             const selection: Doc[] = [];
             this.getActiveDocuments().filter(doc => !doc.isBackground && doc.z === undefined).map(doc => {
                 const layoutDoc = Doc.Layout(doc);
@@ -1140,17 +1139,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
             const vertLines: number[] = [];
             selection.forEach(doc => {
                 const layoutDoc = Doc.Layout(doc);
-                const x = NumCast(doc.x) - selRect.left;
-                const y = NumCast(doc.y) - selRect.top;
+                const x = NumCast(doc.x);
+                const y = NumCast(doc.y);
                 const w = NumCast(layoutDoc._width);
                 const h = NumCast(layoutDoc._height);
-                // const s = this._mainCont!.getBoundingClientRect().width / selRect.width;
-                // const tLFromCorner = [s * x, s * y];
-                const topLeft = this.getLocalTransform().inverse().transformDirection(x, y);
-                console.log(topLeft);
-                const topLeftInScreen = [this._mainCont!.getBoundingClientRect().left + topLeft[0], this._mainCont!.getBoundingClientRect().top + topLeft[1]];
-                const docSize = this.getLocalTransform().inverse().transformDirection(w, h);
-                console.log(topLeftInScreen);
+                const topLeftInScreen = this.getTransform().inverse().transformPoint(x, y);
+                const docSize = this.getTransform().inverse().transformDirection(w, h);
                 horizLines.push(topLeftInScreen[1]); // top line
                 horizLines.push(topLeftInScreen[1] + docSize[1]); // bottom line
                 horizLines.push(topLeftInScreen[1] + docSize[1] / 2); // horiz center line
@@ -1158,11 +1152,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
                 vertLines.push(topLeftInScreen[0] + docSize[0]);// right line
                 vertLines.push(topLeftInScreen[0] + docSize[0] / 2);// vert center line
             });
-            // console.log(horizLines, vertLines);
-            // this._hLines = horizLines;
-            // this._vLines = vertLines;
             DragManager.SetSnapLines(horizLines, vertLines);
         }
+        e.stopPropagation();
     }
 
     @observable private _hLines: number[] | undefined;
@@ -1254,12 +1246,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
 
                 }}>
             </div>
-            <div className="snapLines" style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
+            {/* <div className="snapLines" style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
                 <svg style={{ width: "100%", height: "100%" }}>
                     {this._hLines?.map(l => <line x1="0" y1={l} x2="1000" y2={l} stroke="black" />)}
                     {this._vLines?.map(l => <line y1="0" x1={l} y2="1000" x2={l} stroke="black" />)}
                 </svg>
-            </div>
+            </div> */}
         </div >;
     }
 }