From 587a97e9f5fc49952d7520829d719614477e2717 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Sun, 19 Apr 2020 01:50:59 -0700
Subject: generate snap lines

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 70 +++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 87cf716e5..36ec4c72e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -7,7 +7,7 @@ import { computedFn } from "mobx-utils";
 import { Doc, HeightSym, Opt, WidthSym, DocListCast } from "../../../../new_fields/Doc";
 import { documentSchema, positionSchema } from "../../../../new_fields/documentSchemas";
 import { Id } from "../../../../new_fields/FieldSymbols";
-import { InkData, InkField, InkTool } from "../../../../new_fields/InkField";
+import { InkData, InkField, InkTool, PointData } from "../../../../new_fields/InkField";
 import { List } from "../../../../new_fields/List";
 import { RichTextField } from "../../../../new_fields/RichTextField";
 import { createSchema, listSpec, makeInterface } from "../../../../new_fields/Schema";
@@ -1089,6 +1089,73 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
         ContextMenu.Instance.addItem({ description: "Freeform Options ...", subitems: layoutItems, icon: "eye" });
     }
 
+    intersectRect(r1: { left: number, top: number, width: number, height: number },
+        r2: { left: number, top: number, width: number, height: number }) {
+        return !(r2.left > r1.left + r1.width || r2.left + r2.width < r1.left || r2.top > r1.top + r1.height || r2.top + r2.height < r1.top);
+    }
+
+    onPointerOver = (e: React.PointerEvent) => {
+        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);
+                const x = NumCast(doc.x);
+                const y = NumCast(doc.y);
+                const w = NumCast(layoutDoc._width);
+                const h = NumCast(layoutDoc._height);
+                if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) {
+                    selection.push(doc);
+                }
+            });
+            if (!selection.length) {
+                this.getActiveDocuments().filter(doc => doc.z === undefined).map(doc => {
+                    const layoutDoc = Doc.Layout(doc);
+                    const x = NumCast(doc.x);
+                    const y = NumCast(doc.y);
+                    const w = NumCast(layoutDoc._width);
+                    const h = NumCast(layoutDoc._height);
+                    if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) {
+                        selection.push(doc);
+                    }
+                });
+            }
+            if (!selection.length) {
+                const left = this._downX < this._lastX ? this._downX : this._lastX;
+                const top = this._downY < this._lastY ? this._downY : this._lastY;
+                const topLeft = this.getContainerTransform().transformPoint(left, top);
+                const size = this.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+                const otherBounds = { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) };
+                this.getActiveDocuments().filter(doc => doc.z !== undefined).map(doc => {
+                    const layoutDoc = Doc.Layout(doc);
+                    const x = NumCast(doc.x);
+                    const y = NumCast(doc.y);
+                    const w = NumCast(layoutDoc._width);
+                    const h = NumCast(layoutDoc._height);
+                    if (this.intersectRect({ left: x, top: y, width: w, height: h }, otherBounds)) {
+                        selection.push(doc);
+                    }
+                });
+            }
+            const lines: [PointData, PointData][] = [];
+            selection.forEach(doc => {
+                const x = NumCast(doc.x);
+                const y = NumCast(doc.y);
+                const w = doc[WidthSym]();
+                const h = doc[HeightSym]();
+                lines.push([{ X: x, Y: y }, { X: x + w, Y: y }]); // top line
+                lines.push([{ X: x, Y: y }, { X: x, Y: y + h }]); // left line
+                lines.push([{ X: x + w, Y: y }, { X: x + w, Y: y + h }]); // right line
+                lines.push([{ X: x, Y: y + h }, { X: x + w, Y: y + h }]); // bottom line
+                lines.push([{ X: x + w / 2, Y: y }, { X: x + w / 2, Y: y + h }]); // horizontal center line
+                lines.push([{ X: x, Y: y + h / 2 }, { X: x + w, Y: y + h / 2 }]); // vertical center line
+            })
+            DragManager.SetSnapLines(lines);
+        }
+    }
+
     private childViews = () => {
         const children = typeof this.props.children === "function" ? (this.props.children as any)() as JSX.Element[] : [];
         return [
@@ -1150,6 +1217,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
         // otherwise, they are stored in fieldKey.  All annotations to this document are stored in the extension document
         return <div className={"collectionfreeformview-container"}
             ref={this.createDashEventsTarget}
+            onPointerOver={this.onPointerOver}
             onWheel={this.onPointerWheel} onClick={this.onClick}  //pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
             onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu}
             style={{
-- 
cgit v1.2.3-70-g09d2


From 4bdffbc63bcfac5db15e5bb58fb3a41be617b2a1 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Mon, 20 Apr 2020 20:06:53 -0700
Subject: better snapping, scaling is off still

---
 src/client/util/DragManager.ts                     | 67 +++++++++++++++++++---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 55 ++++++++++++------
 2 files changed, 96 insertions(+), 26 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 21306c339..b0cabfaad 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -74,7 +74,8 @@ export function SetupDrag(
 
 export namespace DragManager {
     let dragDiv: HTMLDivElement;
-    let snapLines: [PointData, PointData][];
+    let horizSnapLines: number[];
+    let vertSnapLines: number[];
 
     export function Root() {
         const root = document.getElementById("root");
@@ -283,8 +284,9 @@ export namespace DragManager {
         StartDrag([ele], {}, downX, downY);
     }
 
-    export function SetSnapLines() {
-        snapLines = [];
+    export function SetSnapLines(horizLines: number[], vertLines: number[]) {
+        horizSnapLines = horizLines;
+        vertSnapLines = vertLines;
     }
 
     function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
@@ -302,12 +304,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);
@@ -357,6 +369,12 @@ 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;
+        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) {
@@ -373,10 +391,45 @@ export namespace DragManager {
                 }, dragData.droppedDocuments);
             }
             //TODO: Why can't we use e.movementX and e.movementY?
-            const moveX = e.pageX - lastX;
-            const moveY = e.pageY - lastY;
-            lastX = e.pageX;
-            lastY = e.pageY;
+            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;
+            }
+
+            // const closestHoriz = horizSnapLines.reduce((prev, curr) => Math.abs(prev - thisY) > Math.abs(curr - thisY) ? curr : prev);
+            // const closestVert = vertSnapLines.reduce((prev, curr) => Math.abs(prev - thisX) > Math.abs(curr - thisX) ? curr : prev);
+            // if (Math.abs(thisY - closestHoriz) < 10) {
+            //     thisY = closestHoriz;
+            // }
+            // if (Math.abs(thisX - closestVert) < 10) {
+            //     thisX = closestVert;
+            // }
+            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]})`)
             );
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 36ec4c72e..c4c37141b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1094,6 +1094,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
         return !(r2.left > r1.left + r1.width || r2.left + r2.width < r1.left || r2.top > r1.top + r1.height || r2.top + r2.height < r1.top);
     }
 
+    @action
     onPointerOver = (e: React.PointerEvent) => {
         if (SelectionManager.GetIsDragging()) {
             const size = this.props.ScreenToLocalTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
@@ -1123,11 +1124,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
                 });
             }
             if (!selection.length) {
-                const left = this._downX < this._lastX ? this._downX : this._lastX;
-                const top = this._downY < this._lastY ? this._downY : this._lastY;
-                const topLeft = this.getContainerTransform().transformPoint(left, top);
-                const size = this.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
-                const otherBounds = { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) };
+                const otherBounds = { left: this.panX(), top: this.panY(), width: Math.abs(size[0]), height: Math.abs(size[1]) };
                 this.getActiveDocuments().filter(doc => doc.z !== undefined).map(doc => {
                     const layoutDoc = Doc.Layout(doc);
                     const x = NumCast(doc.x);
@@ -1139,23 +1136,38 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u
                     }
                 });
             }
-            const lines: [PointData, PointData][] = [];
+            const horizLines: number[] = [];
+            const vertLines: number[] = [];
             selection.forEach(doc => {
-                const x = NumCast(doc.x);
-                const y = NumCast(doc.y);
-                const w = doc[WidthSym]();
-                const h = doc[HeightSym]();
-                lines.push([{ X: x, Y: y }, { X: x + w, Y: y }]); // top line
-                lines.push([{ X: x, Y: y }, { X: x, Y: y + h }]); // left line
-                lines.push([{ X: x + w, Y: y }, { X: x + w, Y: y + h }]); // right line
-                lines.push([{ X: x, Y: y + h }, { X: x + w, Y: y + h }]); // bottom line
-                lines.push([{ X: x + w / 2, Y: y }, { X: x + w / 2, Y: y + h }]); // horizontal center line
-                lines.push([{ X: x, Y: y + h / 2 }, { X: x + w, Y: y + h / 2 }]); // vertical center line
-            })
-            DragManager.SetSnapLines(lines);
+                const layoutDoc = Doc.Layout(doc);
+                const x = NumCast(doc.x) - selRect.left;
+                const y = NumCast(doc.y) - selRect.top;
+                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);
+                horizLines.push(topLeftInScreen[1]); // top line
+                horizLines.push(topLeftInScreen[1] + docSize[1]); // bottom line
+                horizLines.push(topLeftInScreen[1] + docSize[1] / 2); // horiz center line
+                vertLines.push(topLeftInScreen[0]);//left line
+                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);
         }
     }
 
+    @observable private _hLines: number[] | undefined;
+    @observable private _vLines: number[] | undefined;
+
     private childViews = () => {
         const children = typeof this.props.children === "function" ? (this.props.children as any)() as JSX.Element[] : [];
         return [
@@ -1242,7 +1254,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" }}>
+                <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 >;
     }
 }
-- 
cgit v1.2.3-70-g09d2


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/util/DragManager.ts                     | 10 ++++++----
 src/client/views/MainView.tsx                      | 10 ++++++++++
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 22 +++++++---------------
 3 files changed, 23 insertions(+), 19 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx')

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

