From 22748f8d35235941fc6622b19a2d4d3f809ccee7 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 30 Apr 2020 17:16:14 -0400
Subject: working version of snapping with resize / templates / centers

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

(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 11d0f298d..763a6c605 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -869,6 +869,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             LibraryPath: this.libraryPath,
             FreezeDimensions: this.props.freezeChildDimensions,
             layoutKey: undefined,
+            setupDragLines: this.setupDragLines,
             rootSelected: childData ? this.rootSelected : returnFalse,
             dropAction: StrCast(this.props.Document.childDropAction) as dropActionType,
             //onClick: undefined, // this.props.onClick,  // bcz: check this out -- I don't think we want to inherit click handlers, or we at least need a way to ignore them
@@ -1146,37 +1147,36 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     }
 
     @action
+    setupDragLines = () => {
+        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] };
+        const docDims = (doc: Doc) => ({ left: NumCast(doc.x), top: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
+        const isDocInView = (doc: Doc, rect: { left: number, top: number, width: number, height: number }) => {
+            if (this.intersectRect(docDims(doc), rect)) {
+                snappableDocs.push(doc);
+            }
+        }
+        const snappableDocs: Doc[] = [];  // the set of documents in the visible viewport that we will try to snap to;
+        const otherBounds = { left: this.panX(), top: this.panY(), width: Math.abs(size[0]), height: Math.abs(size[1]) };
+        this.getActiveDocuments().filter(doc => !doc.isBackground && doc.z === undefined).map(doc => isDocInView(doc, selRect));  // first see if there are any foreground docs to snap to
+        !snappableDocs.length && this.getActiveDocuments().filter(doc => doc.z === undefined).map(doc => isDocInView(doc, selRect)); // if not, see if there are background docs to snap to
+        !snappableDocs.length && this.getActiveDocuments().filter(doc => doc.z !== undefined).map(doc => isDocInView(doc, otherBounds)); // if not, then why not snap to floating docs
+
+        const horizLines: number[] = [];
+        const vertLines: number[] = [];
+        snappableDocs.filter(doc => !DragManager.docsBeingDragged.includes(Cast(doc.rootDocument, Doc, null) || doc)).forEach(doc => {
+            const { left, top, width, height } = docDims(doc);
+            const topLeftInScreen = this.getTransform().inverse().transformPoint(left, top);
+            const docSize = this.getTransform().inverse().transformDirection(width, height);
+
+            horizLines.push(topLeftInScreen[1], topLeftInScreen[1] + docSize[1] / 2, topLeftInScreen[1] + docSize[1]); // horiz center line
+            vertLines.push(topLeftInScreen[0], topLeftInScreen[0] + docSize[0] / 2, topLeftInScreen[0] + docSize[0]);// right line
+        });
+        DragManager.SetSnapLines(horizLines, vertLines);
+    }
     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] };
-            const selection: Doc[] = [];
-            const docDims = (doc: Doc, layoutDoc: Doc) => ({ left: NumCast(doc.x), top: NumCast(doc.y), width: NumCast(layoutDoc._width), height: NumCast(layoutDoc._height) });
-            const compareDoc = (doc: Doc, rect: { left: number, top: number, width: number, height: number }) => {
-                if (this.intersectRect(docDims(doc, Doc.Layout(doc)), rect)) {
-                    selection.push(doc);
-                }
-            }
-            const otherBounds = { left: this.panX(), top: this.panY(), width: Math.abs(size[0]), height: Math.abs(size[1]) };
-            this.getActiveDocuments().filter(doc => !doc.isBackground && doc.z === undefined).map(doc => compareDoc(doc, selRect));  // first try foreground docs
-            !selection.length && this.getActiveDocuments().filter(doc => doc.z === undefined).map(doc => compareDoc(doc, selRect)); // then background docs
-            !selection.length && this.getActiveDocuments().filter(doc => doc.z !== undefined).map(doc => compareDoc(doc, otherBounds)); // then floating docs
-
-            const horizLines: number[] = [];
-            const vertLines: number[] = [];
-            selection.filter(doc => !DragManager.docsBeingDragged.includes(doc)).forEach(doc => {
-                const { left, top, width, height } = docDims(doc, Doc.Layout(doc));
-                const topLeftInScreen = this.getTransform().inverse().transformPoint(left, top);
-                const docSize = this.getTransform().inverse().transformDirection(width, height);
-
-                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
-            });
-            DragManager.SetSnapLines(horizLines, vertLines);
+            this.setupDragLines(e);
         }
         e.stopPropagation();
     }
@@ -1273,12 +1273,12 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 }}>
             </div>
             {// uncomment to show snap lines
-             /*<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 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