From 58ba643f2642432ca6041f5d348aadf005323b73 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Wed, 22 Apr 2020 20:36:06 -0700
Subject: snapping!

---
 src/client/views/MainView.tsx                      | 10 ++++++++++
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 22 +++++++---------------
 2 files changed, 17 insertions(+), 15 deletions(-)

(limited to 'src/client/views')

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 >;
     }
 }
-- 
cgit v1.2.3-70-g09d2