From 3beca8e7d268dc7b67b20b2c8760ea5e4b6fdb88 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 8 Jul 2020 18:59:37 -0500
Subject: added dashDragging event

---
 .../collectionFreeForm/CollectionFreeFormView.tsx         | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(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 9bf425db2..5a762a85c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1143,10 +1143,19 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         this._layoutComputeReaction = reaction(() => this.doLayoutComputation,
             (elements) => this._layoutElements = elements || [],
             { fireImmediately: true, name: "doLayout" });
+
+        const handler = (e: Event) => this.handleDragging(e, (e as CustomEvent<DragEvent>).detail);
+
+        document.addEventListener("dashDragging", handler);
     }
+
     componentWillUnmount() {
         this._layoutComputeReaction?.();
+
+        const handler = (e: Event) => this.handleDragging(e, (e as CustomEvent<DragEvent>).detail);
+        document.removeEventListener("dashDragging", handler);
     }
+
     @computed get views() { return this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z).map(ele => ele.ele); }
     elementFunc = () => this._layoutElements;
 
@@ -1155,6 +1164,12 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     }
 
+    @action
+    handleDragging = (e: Event, de: DragEvent) => {
+        console.log(de.clientX);
+        console.log(de.clientX);
+    }
+
     promoteCollection = undoBatch(action(() => {
         const childDocs = this.childDocs.slice();
         childDocs.forEach(doc => {
-- 
cgit v1.2.3-70-g09d2


From 15f70932a9e267393c774e9c4dd37a43224320f0 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 9 Jul 2020 01:54:29 -0500
Subject: started dragging pans screen (needs cleaning)

---
 src/client/util/LinkManager.ts                     |   2 +
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 105 ++++++++++++++++++---
 2 files changed, 96 insertions(+), 11 deletions(-)

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

diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 6da581f35..50f3fc1d6 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -3,6 +3,7 @@ import { List } from "../../fields/List";
 import { listSpec } from "../../fields/Schema";
 import { Cast, StrCast } from "../../fields/Types";
 import { Scripting } from "./Scripting";
+import { undoBatch } from "./UndoManager";
 
 /* 
  * link doc: 
@@ -52,6 +53,7 @@ export class LinkManager {
         return false;
     }
 
+    @undoBatch
     public deleteLink(linkDoc: Doc): boolean {
         if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) {
             Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 5a762a85c..a3d3a210d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -101,6 +101,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @observable _clusterSets: (Doc[])[] = [];
     @observable _timelineRef = React.createRef<Timeline>();
 
+    @observable _marqueeRef = React.createRef<HTMLDivElement>();
+    @observable canPanX: boolean = true;
+    @observable canPanY: boolean = true;
+
     @computed get fitToContentScaling() { return this.fitToContent ? NumCast(this.layoutDoc.fitToContentScaling, 1) : 1; }
     @computed get fitToContent() { return (this.props.fitToBox || this.Document._fitToBox) && !this.isAnnotationOverlay; }
     @computed get parentScaling() { return this.props.ContentScaling && this.fitToContent && !this.isAnnotationOverlay ? this.props.ContentScaling() : 1; }
@@ -1164,10 +1168,87 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     }
 
+
+    // <div ref={this._marqueeRef}>
+
     @action
     handleDragging = (e: Event, de: DragEvent) => {
-        console.log(de.clientX);
-        console.log(de.clientX);
+
+        const nw = NumCast(this.Document._nativeWidth, this.props.NativeWidth());
+        const nh = NumCast(this.Document._nativeHeight, this.props.NativeHeight());
+        const hscale = nh ? this.props.PanelHeight() / nh : 1;
+        const wscale = nw ? this.props.PanelWidth() / nw : 1;
+
+        if (this._marqueeRef) {
+            if (this._marqueeRef.current) {
+
+                // console.log("left: " + this._marqueeRef.current.clientLeft);
+                // console.log("width: " + this._marqueeRef.current.clientWidth);
+                // console.log("client x: " + de.clientX);
+
+                // console.log("top: " + this._marqueeRef.current.clientTop);
+                // console.log("height: " + this._marqueeRef.current.clientHeight);
+                // console.log("client y: " + de.clientY);
+
+
+                if (this._marqueeRef.current.clientWidth > 0) {
+                    if (de.clientX - 315 - this._marqueeRef.current.clientLeft < 25) {
+                        console.log("PAN left ");
+                        if (this.canPanX) {
+                            this.Document._panX = de.clientX - 20 - this._marqueeRef.current.clientLeft;
+                            setTimeout(action(() => {
+                                this.canPanX = true;
+                                this.panX();
+                            }), 2500);
+                            this.canPanX = false;
+                        }
+                    } else if (de.clientX - 315 - this._marqueeRef.current.clientLeft -
+                        this._marqueeRef.current.clientWidth < 25) {
+                        console.log("PAN right ");
+                        if (this.canPanX) {
+                            this.Document._panX = de.clientX - 315 - this._marqueeRef.current.clientLeft -
+                                this._marqueeRef.current.clientWidth;
+
+                            setTimeout(action(() => {
+                                this.panX();
+                                this.canPanX = true;
+                            }), 2500);
+                            this.canPanX = false;
+                        }
+
+                    }
+                }
+
+                if (this._marqueeRef.current.clientHeight > 0) {
+                    if (de.clientY - 120 - this._marqueeRef.current.clientTop < 25) {
+                        console.log("PAN top ");
+                        if (this.canPanY) {
+                            this.Document._panY = de.clientY - 20 - this._marqueeRef.current.clientTop;
+                            setTimeout(action(() => {
+                                this.canPanY = true;
+                                this.panY();
+                            }), 2500);
+                            this.canPanY = false;
+                        }
+                    } else if (de.clientY - 120 - this._marqueeRef.current.clientTop -
+                        this._marqueeRef.current.clientHeight < 25) {
+                        console.log("PAN bottom ");
+                        if (this.canPanY) {
+                            this.Document._panY = de.clientY - 120 - this._marqueeRef.current.clientTop -
+                                this._marqueeRef.current.clientHeight;
+
+                            setTimeout(action(() => {
+                                this.panY();
+                                this.canPanY = true;
+                            }), 2500);
+                            this.canPanY = false;
+                        }
+
+                    }
+
+                }
+            }
+        }
     }
 
     promoteCollection = undoBatch(action(() => {
@@ -1351,7 +1432,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return false;
     });
     @computed get marqueeView() {
-        return <MarqueeView {...this.props}
+        return <MarqueeView
+            {...this.props}
             nudge={this.nudge}
             addDocTab={this.addDocTab}
             activeDocuments={this.getActiveDocuments}
@@ -1361,14 +1443,15 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             getContainerTransform={this.getContainerTransform}
             getTransform={this.getTransform}
             isAnnotationOverlay={this.isAnnotationOverlay}>
-            <CollectionFreeFormViewPannableContents
-                centeringShiftX={this.centeringShiftX}
-                centeringShiftY={this.centeringShiftY}
-                transition={Cast(this.layoutDoc._viewTransition, "string", null)}
-                viewDefDivClick={this.props.viewDefDivClick}
-                zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
-                {this.children}
-            </CollectionFreeFormViewPannableContents>
+            <div ref={this._marqueeRef}>
+                <CollectionFreeFormViewPannableContents
+                    centeringShiftX={this.centeringShiftX}
+                    centeringShiftY={this.centeringShiftY}
+                    transition={Cast(this.layoutDoc._viewTransition, "string", null)}
+                    viewDefDivClick={this.props.viewDefDivClick}
+                    zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
+                    {this.children}
+                </CollectionFreeFormViewPannableContents></div>
             {this.showTimeline ? <Timeline ref={this._timelineRef} {...this.props} /> : (null)}
         </MarqueeView>;
     }
-- 
cgit v1.2.3-70-g09d2


From 27b0f32460245539d77bcd435627a68364e0bc0d Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 9 Jul 2020 12:15:42 -0500
Subject: fixed linking undo issues

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 96 ++++++++++++----------
 src/client/views/nodes/DocumentLinksButton.tsx     |  6 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  2 +
 3 files changed, 57 insertions(+), 47 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 a3d3a210d..ffa4be4b9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1174,47 +1174,55 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @action
     handleDragging = (e: Event, de: DragEvent) => {
 
-        const nw = NumCast(this.Document._nativeWidth, this.props.NativeWidth());
-        const nh = NumCast(this.Document._nativeHeight, this.props.NativeHeight());
-        const hscale = nh ? this.props.PanelHeight() / nh : 1;
-        const wscale = nw ? this.props.PanelWidth() / nw : 1;
+        const top = this.panX();
+        const left = this.panY();
+
+        const size = this.getTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
+
+        const scale = this.getLocalTransform().inverse().Scale;
 
         if (this._marqueeRef) {
+
             if (this._marqueeRef.current) {
 
+                // console.log("top: " + this._marqueeRef.current.clientTop);
                 // console.log("left: " + this._marqueeRef.current.clientLeft);
                 // console.log("width: " + this._marqueeRef.current.clientWidth);
-                // console.log("client x: " + de.clientX);
-
-                // console.log("top: " + this._marqueeRef.current.clientTop);
                 // console.log("height: " + this._marqueeRef.current.clientHeight);
-                // console.log("client y: " + de.clientY);
+
+                console.log("width: " + this._marqueeRef.current.getBoundingClientRect().width);
+                console.log("height: " + this._marqueeRef.current.getBoundingClientRect().width);
+                console.log("x: " + this._marqueeRef.current.getBoundingClientRect().x);
+                console.log("y: " + this._marqueeRef.current.getBoundingClientRect().y);
+
+                // console.log("mouse x: " + de.screenX);
+                // console.log("mouse y: " + de.screenY);
 
 
                 if (this._marqueeRef.current.clientWidth > 0) {
                     if (de.clientX - 315 - this._marqueeRef.current.clientLeft < 25) {
                         console.log("PAN left ");
-                        if (this.canPanX) {
-                            this.Document._panX = de.clientX - 20 - this._marqueeRef.current.clientLeft;
-                            setTimeout(action(() => {
-                                this.canPanX = true;
-                                this.panX();
-                            }), 2500);
-                            this.canPanX = false;
-                        }
+
+                        // if (this.canPanX) {
+                        //     this.Document._panX = left - 5;
+                        //     setTimeout(action(() => {
+                        //         this.canPanX = true;
+                        //         this.panX();
+                        //     }), 250);
+                        //     this.canPanX = false;
+                        // }
                     } else if (de.clientX - 315 - this._marqueeRef.current.clientLeft -
                         this._marqueeRef.current.clientWidth < 25) {
                         console.log("PAN right ");
-                        if (this.canPanX) {
-                            this.Document._panX = de.clientX - 315 - this._marqueeRef.current.clientLeft -
-                                this._marqueeRef.current.clientWidth;
-
-                            setTimeout(action(() => {
-                                this.panX();
-                                this.canPanX = true;
-                            }), 2500);
-                            this.canPanX = false;
-                        }
+
+                        // if (this.canPanX) {
+                        //     this.Document._panX = left + 5;
+                        //     setTimeout(action(() => {
+                        //         this.panX();
+                        //         this.canPanX = true;
+                        //     }), 250);
+                        //     this.canPanX = false;
+                        // }
 
                     }
                 }
@@ -1222,27 +1230,27 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 if (this._marqueeRef.current.clientHeight > 0) {
                     if (de.clientY - 120 - this._marqueeRef.current.clientTop < 25) {
                         console.log("PAN top ");
-                        if (this.canPanY) {
-                            this.Document._panY = de.clientY - 20 - this._marqueeRef.current.clientTop;
-                            setTimeout(action(() => {
-                                this.canPanY = true;
-                                this.panY();
-                            }), 2500);
-                            this.canPanY = false;
-                        }
+
+                        // if (this.canPanY) {
+                        //     this.Document._panY = top - 5;
+                        //     setTimeout(action(() => {
+                        //         this.canPanY = true;
+                        //         this.panY();
+                        //     }), 250);
+                        //     this.canPanY = false;
+                        // }
                     } else if (de.clientY - 120 - this._marqueeRef.current.clientTop -
                         this._marqueeRef.current.clientHeight < 25) {
                         console.log("PAN bottom ");
-                        if (this.canPanY) {
-                            this.Document._panY = de.clientY - 120 - this._marqueeRef.current.clientTop -
-                                this._marqueeRef.current.clientHeight;
-
-                            setTimeout(action(() => {
-                                this.panY();
-                                this.canPanY = true;
-                            }), 2500);
-                            this.canPanY = false;
-                        }
+
+                        // if (this.canPanY) {
+                        //     this.Document._panY = top + 5;
+                        //     setTimeout(action(() => {
+                        //         this.panY();
+                        //         this.canPanY = true;
+                        //     }), 250);
+                        //     this.canPanY = false;
+                        // }
 
                     }
 
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 44e72215d..ce96eddfe 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../../fields/Doc";
 import { emptyFunction, setupMoveUpEvents, returnFalse } from "../../../Utils";
 import { DragManager } from "../../util/DragManager";
-import { UndoManager } from "../../util/UndoManager";
+import { UndoManager, undoBatch } from "../../util/UndoManager";
 import './DocumentLinksButton.scss';
 import { DocumentView } from "./DocumentView";
 import React = require("react");
@@ -29,7 +29,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
 
     @observable public static StartLink: DocumentView | undefined;
 
-    @action
+    @action @undoBatch
     onLinkButtonMoved = (e: PointerEvent) => {
         if (this._linkButton.current !== null) {
             const linkDrag = UndoManager.StartBatch("Drag Link");
@@ -56,7 +56,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         return false;
     }
 
-
+    @undoBatch
     onLinkButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
             if (doubleTap && this.props.InMenu) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index fc63dfbf5..30e0738bf 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -944,6 +944,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             frag.forEach(node => nodes.push(marker(node)));
             return Fragment.fromArray(nodes);
         }
+
+
         function addLinkMark(node: Node, title: string, linkId: string) {
             if (!node.isText) {
                 const content = addMarkToFrag(node.content, (node: Node) => addLinkMark(node, title, linkId));
-- 
cgit v1.2.3-70-g09d2


From f774d6953d23dda9b8b20ed24b64e28607d3d88c Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 9 Jul 2020 14:53:52 -0400
Subject: fixed auto panning in collectionview.

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 124 +++++++++------------
 1 file changed, 51 insertions(+), 73 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 ffa4be4b9..7a7505319 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1172,89 +1172,67 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     // <div ref={this._marqueeRef}>
 
     @action
-    handleDragging = (e: Event, de: DragEvent) => {
+    handleDragging = (e: CustomEvent<React.DragEvent>, de: DragEvent) => {
 
         const top = this.panX();
         const left = this.panY();
 
         const size = this.getTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
-
         const scale = this.getLocalTransform().inverse().Scale;
 
-        if (this._marqueeRef) {
-
-            if (this._marqueeRef.current) {
-
-                // console.log("top: " + this._marqueeRef.current.clientTop);
-                // console.log("left: " + this._marqueeRef.current.clientLeft);
-                // console.log("width: " + this._marqueeRef.current.clientWidth);
-                // console.log("height: " + this._marqueeRef.current.clientHeight);
-
-                console.log("width: " + this._marqueeRef.current.getBoundingClientRect().width);
-                console.log("height: " + this._marqueeRef.current.getBoundingClientRect().width);
-                console.log("x: " + this._marqueeRef.current.getBoundingClientRect().x);
-                console.log("y: " + this._marqueeRef.current.getBoundingClientRect().y);
-
-                // console.log("mouse x: " + de.screenX);
-                // console.log("mouse y: " + de.screenY);
-
-
-                if (this._marqueeRef.current.clientWidth > 0) {
-                    if (de.clientX - 315 - this._marqueeRef.current.clientLeft < 25) {
-                        console.log("PAN left ");
-
-                        // if (this.canPanX) {
-                        //     this.Document._panX = left - 5;
-                        //     setTimeout(action(() => {
-                        //         this.canPanX = true;
-                        //         this.panX();
-                        //     }), 250);
-                        //     this.canPanX = false;
-                        // }
-                    } else if (de.clientX - 315 - this._marqueeRef.current.clientLeft -
-                        this._marqueeRef.current.clientWidth < 25) {
-                        console.log("PAN right ");
-
-                        // if (this.canPanX) {
-                        //     this.Document._panX = left + 5;
-                        //     setTimeout(action(() => {
-                        //         this.panX();
-                        //         this.canPanX = true;
-                        //     }), 250);
-                        //     this.canPanX = false;
-                        // }
-
-                    }
-                }
+        if (this._marqueeRef?.current) {
+            const dragX = e.detail.clientX;
+            const dragY = e.detail.clientY;
+            const bounds = this._marqueeRef.current?.getBoundingClientRect()!;
+
+            if (dragX - bounds.left < 25) {
+                console.log("PAN left ");
+
+                // if (this.canPanX) {
+                //     this.Document._panX = left - 5;
+                //     setTimeout(action(() => {
+                //         this.canPanX = true;
+                //         this.panX();
+                //     }), 250);
+                //     this.canPanX = false;
+                // }
+            } else if (bounds.right - dragX < 25) {
+                console.log("PAN right ");
+
+                // if (this.canPanX) {
+                //     this.Document._panX = left + 5;
+                //     setTimeout(action(() => {
+                //         this.panX();
+                //         this.canPanX = true;
+                //     }), 250);
+                //     this.canPanX = false;
+                // }
 
-                if (this._marqueeRef.current.clientHeight > 0) {
-                    if (de.clientY - 120 - this._marqueeRef.current.clientTop < 25) {
-                        console.log("PAN top ");
-
-                        // if (this.canPanY) {
-                        //     this.Document._panY = top - 5;
-                        //     setTimeout(action(() => {
-                        //         this.canPanY = true;
-                        //         this.panY();
-                        //     }), 250);
-                        //     this.canPanY = false;
-                        // }
-                    } else if (de.clientY - 120 - this._marqueeRef.current.clientTop -
-                        this._marqueeRef.current.clientHeight < 25) {
-                        console.log("PAN bottom ");
-
-                        // if (this.canPanY) {
-                        //     this.Document._panY = top + 5;
-                        //     setTimeout(action(() => {
-                        //         this.panY();
-                        //         this.canPanY = true;
-                        //     }), 250);
-                        //     this.canPanY = false;
-                        // }
+            }
 
-                    }
+            if (dragY - bounds.top < 25) {
+                console.log("PAN top ");
+
+                // if (this.canPanY) {
+                //     this.Document._panY = top - 5;
+                //     setTimeout(action(() => {
+                //         this.canPanY = true;
+                //         this.panY();
+                //     }), 250);
+                //     this.canPanY = false;
+                // }
+            } else if (bounds.bottom - dragY < 25) {
+                console.log("PAN bottom ");
+
+                // if (this.canPanY) {
+                //     this.Document._panY = top + 5;
+                //     setTimeout(action(() => {
+                //         this.panY();
+                //         this.canPanY = true;
+                //     }), 250);
+                //     this.canPanY = false;
+                // }
 
-                }
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2


From a2983dd18800642b493c88d061f6d518a1768456 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 9 Jul 2020 17:10:41 -0400
Subject: updated autopan in freeformview.

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 72 +++++++++++-----------
 1 file changed, 36 insertions(+), 36 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 7a7505319..e184cd82f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -579,6 +579,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     @action
     onPointerUp = (e: PointerEvent): void => {
+        this._lastClientY = undefined;
         if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) return;
 
         document.removeEventListener("pointermove", this.onPointerMove);
@@ -1171,11 +1172,14 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     // <div ref={this._marqueeRef}>
 
+    _lastClientY = 0;
     @action
     handleDragging = (e: CustomEvent<React.DragEvent>, de: DragEvent) => {
-
+        if ((e as any).handlePan) return;
+        (e as any).handlePan = true;
         const top = this.panX();
         const left = this.panY();
+        this._lastClientY = e.detail.clientY;
 
         const size = this.getTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
         const scale = this.getLocalTransform().inverse().Scale;
@@ -1188,55 +1192,51 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             if (dragX - bounds.left < 25) {
                 console.log("PAN left ");
 
-                // if (this.canPanX) {
-                //     this.Document._panX = left - 5;
-                //     setTimeout(action(() => {
-                //         this.canPanX = true;
-                //         this.panX();
-                //     }), 250);
-                //     this.canPanX = false;
-                // }
+                if (this.canPanX) {
+                    this.Document._panX = left - 5;
+                    setTimeout(action(() => {
+                        this.canPanX = true;
+                        this.panX();
+                    }), 250);
+                    this.canPanX = false;
+                }
             } else if (bounds.right - dragX < 25) {
                 console.log("PAN right ");
 
-                // if (this.canPanX) {
-                //     this.Document._panX = left + 5;
-                //     setTimeout(action(() => {
-                //         this.panX();
-                //         this.canPanX = true;
-                //     }), 250);
-                //     this.canPanX = false;
-                // }
+                if (this.canPanX) {
+                    this.Document._panX = left + 5;
+                    setTimeout(action(() => {
+                        this.panX();
+                        this.canPanX = true;
+                    }), 250);
+                    this.canPanX = false;
+                }
 
             }
 
             if (dragY - bounds.top < 25) {
                 console.log("PAN top ");
-
-                // if (this.canPanY) {
-                //     this.Document._panY = top - 5;
-                //     setTimeout(action(() => {
-                //         this.canPanY = true;
-                //         this.panY();
-                //     }), 250);
-                //     this.canPanY = false;
-                // }
+                this.continueYPan(-2);
             } else if (bounds.bottom - dragY < 25) {
                 console.log("PAN bottom ");
-
-                // if (this.canPanY) {
-                //     this.Document._panY = top + 5;
-                //     setTimeout(action(() => {
-                //         this.panY();
-                //         this.canPanY = true;
-                //     }), 250);
-                //     this.canPanY = false;
-                // }
-
+                this.continueYPan(2);
             }
         }
+        e.stopPropagation();
     }
 
+    continueYPan = (delta: number) => {
+        setTimeout(() => {
+            const dragY = this._lastClientY;
+            if (this._lastClientY !== undefined && this._marqueeRef.current) {
+                const bounds = this._marqueeRef.current.getBoundingClientRect()!;
+                this.Document._panY = NumCast(this.Document._panY) + delta;
+                (dragY - bounds.top < 25 || bounds.bottom - dragY < 25) && this.continueYPan(delta);
+            } else this._lastClientY !== undefined && this.continueYPan(delta);
+        }, 50);
+    }
+
+
     promoteCollection = undoBatch(action(() => {
         const childDocs = this.childDocs.slice();
         childDocs.forEach(doc => {
-- 
cgit v1.2.3-70-g09d2


From 93dfc57bd89e586aa9747cde37937bad479a0597 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 9 Jul 2020 16:21:17 -0500
Subject: fixed textbox preview

---
 .../collectionFreeForm/CollectionFreeFormView.tsx       |  5 ++++-
 .../nodes/formattedText/FormattedTextBoxComment.scss    | 14 +++++++++-----
 .../nodes/formattedText/FormattedTextBoxComment.tsx     | 17 +++++++----------
 3 files changed, 20 insertions(+), 16 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 fdc8536f8..2f712d609 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1183,7 +1183,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         if (this._marqueeRef?.current) {
             const dragX = e.detail.clientX;
             const dragY = e.detail.clientY;
-            const bounds = this._marqueeRef.current?.getBoundingClientRect()!;
+            const bounds = this._marqueeRef.current?.getBoundingClientRect();
+
+            console.log("bottom: " + bounds.bottom);
+            console.log("right: " + bounds.right);
 
             if (dragX - bounds.left < 25) {
                 console.log("PAN left ");
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
index 286ccf22d..7af209842 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
@@ -4,7 +4,7 @@
     z-index: 20;
     background: white;
     border: 1px solid silver;
-    border-radius: 2px;
+    border-radius: 7px;
     margin-bottom: 7px;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
@@ -40,11 +40,15 @@
         }
 
         .FormattedTextBoxComment-preview-wrapper {
-            max-width: 180px;
-            max-height: 168px;
+            width: 170px;
+            height: 170px;
             overflow: hidden;
-            overflow-y: hidden;
-            padding-top: 5px;
+            //padding-top: 5px;
+            margin-top: 10px;
+            margin-bottom: 8px;
+            align-content: center;
+            justify-content: center;
+            background-color: rgb(160, 160, 160);
         }
     }
 }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 79b09b374..a9185be21 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -84,8 +84,8 @@ export class FormattedTextBoxComment {
             FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText);
             FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip";
             FormattedTextBoxComment.tooltip.style.pointerEvents = "all";
-            FormattedTextBoxComment.tooltip.style.maxWidth = "200px";
-            FormattedTextBoxComment.tooltip.style.maxHeight = "206px";
+            FormattedTextBoxComment.tooltip.style.maxWidth = "190px";
+            FormattedTextBoxComment.tooltip.style.maxHeight = "220px";
             FormattedTextBoxComment.tooltip.style.width = "100%";
             FormattedTextBoxComment.tooltip.style.height = "100%";
             FormattedTextBoxComment.tooltip.style.overflow = "hidden";
@@ -256,10 +256,7 @@ export class FormattedTextBoxComment {
                                                 size="sm" />
                                         </div>
                                     </div>
-                                    <div className="FormattedTextBoxComment-preview-wrapper" style={{
-                                        maxWidth: "180px", maxHeight: "168px", overflow: "hidden",
-                                        overflowY: "hidden", paddingTop: "5px"
-                                    }}>
+                                    <div className="FormattedTextBoxComment-preview-wrapper">
                                         <ContentFittingDocumentView
                                             Document={target}
                                             LibraryPath={emptyPath}
@@ -277,14 +274,14 @@ export class FormattedTextBoxComment {
                                             ContainingCollectionDoc={undefined}
                                             ContainingCollectionView={undefined}
                                             renderDepth={0}
-                                            PanelWidth={() => Math.min(350, NumCast(target._width, 350))}
-                                            PanelHeight={() => Math.min(250, NumCast(target._height, 250))}
+                                            PanelWidth={() => 170} //Math.min(350, NumCast(target._width, 350))}
+                                            PanelHeight={() => 170} //Math.min(250, NumCast(target._height, 250))}
                                             focus={emptyFunction}
                                             whenActiveChanged={returnFalse}
                                             bringToFront={returnFalse}
                                             ContentScaling={returnOne}
-                                            NativeWidth={returnZero}
-                                            NativeHeight={returnZero}
+                                            NativeWidth={() => target._nativeWidth ? NumCast(target._nativeWidth) : 0}
+                                            NativeHeight={() => target._nativeHeight ? NumCast(target._nativeHeight) : 0}
                                         />
                                     </div>
                                 </div>;
-- 
cgit v1.2.3-70-g09d2


From 3d0c64cf9979f739177b0efd9970ad0e0a9fa3d0 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 9 Jul 2020 17:00:12 -0500
Subject: small changes

---
 src/client/documents/Documents.ts                                 | 6 +-----
 .../collections/collectionFreeForm/CollectionFreeFormView.tsx     | 8 +++++---
 src/client/views/linking/LinkMenuItem.tsx                         | 2 +-
 src/client/views/nodes/formattedText/FormattedTextBox.tsx         | 2 ++
 4 files changed, 9 insertions(+), 9 deletions(-)

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 565e7c25d..fa85d58f0 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -909,7 +909,7 @@ export namespace DocUtils {
         DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline"));
     }
 
-    export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string, linkedText?: string) {
+    export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string) {
         const sv = DocumentManager.Instance.getDocumentView(source.doc);
         if (sv && sv.props.ContainingCollectionDoc === target.doc) return;
         if (target.doc === Doc.UserDoc()) return undefined;
@@ -921,10 +921,6 @@ export namespace DocUtils {
         Doc.GetProto(source.doc).links = ComputedField.MakeFunction("links(self)");
         Doc.GetProto(target.doc).links = ComputedField.MakeFunction("links(self)");
 
-        if (linkedText) {
-            Doc.GetProto(linkDoc).linkedText = linkedText;
-        }
-
         return linkDoc;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 965bfdf24..9d79c0c89 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1181,17 +1181,19 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         const left = this.panY();
         this._lastClientY = e.detail.clientY;
 
+        console.log("draggg");
+
         const size = this.getTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
         const scale = this.getLocalTransform().inverse().Scale;
 
         if (this._marqueeRef?.current) {
+
+            console.log("hellp");
+
             const dragX = e.detail.clientX;
             const dragY = e.detail.clientY;
             const bounds = this._marqueeRef.current?.getBoundingClientRect();
 
-            console.log("bottom: " + bounds.bottom);
-            console.log("right: " + bounds.right);
-
             if (dragX - bounds.left < 25) {
                 console.log("PAN left ");
 
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index d2363c7d3..f601432fe 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -189,7 +189,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                             this.props.destinationDoc.type === "screenshot" ? "photo-video" :
                                 this.props.destinationDoc.type === "webcam" ? "video" :
                                     this.props.destinationDoc.type === "audio" ? "microphone" :
-                                        this.props.destinationDoc.type === "button" ? "lightning" :
+                                        this.props.destinationDoc.type === "button" ? "bolt" :
                                             this.props.destinationDoc.type === "presentation" ? "tv" :
                                                 this.props.destinationDoc.type === "query" ? "search" :
                                                     this.props.destinationDoc.type === "script" ? "terminal" :
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index bff6f1c8c..4f6927d3d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -176,9 +176,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     doLinkOnDeselect() {
 
         console.log("link on deselect");
+
         Array.from(this.linkOnDeselect.entries()).map(entry => {
             const key = entry[0];
             const value = entry[1];
+
             const id = Utils.GenerateDeterministicGuid(this.dataDoc[Id] + key);
             DocServer.GetRefField(value).then(doc => {
                 DocServer.GetRefField(id).then(linkDoc => {
-- 
cgit v1.2.3-70-g09d2


From 756a2d4e680bcdcc339e8f2493f699bb01e3fbb0 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 9 Jul 2020 18:37:03 -0400
Subject: fixed type errors.

---
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 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 9d79c0c89..f2a39b240 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1172,7 +1172,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     // <div ref={this._marqueeRef}>
 
-    _lastClientY = 0;
+    _lastClientY: number | undefined = 0;
     @action
     handleDragging = (e: CustomEvent<React.DragEvent>, de: DragEvent) => {
         if ((e as any).handlePan) return;
@@ -1233,7 +1233,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     continueYPan = (delta: number) => {
         setTimeout(() => {
             const dragY = this._lastClientY;
-            if (this._lastClientY !== undefined && this._marqueeRef.current) {
+            if (dragY !== undefined && this._marqueeRef.current) {
                 const bounds = this._marqueeRef.current.getBoundingClientRect()!;
                 this.Document._panY = NumCast(this.Document._panY) + delta;
                 (dragY - bounds.top < 25 || bounds.bottom - dragY < 25) && this.continueYPan(delta);
-- 
cgit v1.2.3-70-g09d2


From b9ba531c64fe7926a6794ab57e4989e1ea6c6992 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 10 Jul 2020 11:23:44 -0400
Subject: fixes for x/y panning on drag

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 66 ++++++----------------
 1 file changed, 16 insertions(+), 50 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 f2a39b240..3fdf6683e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -84,6 +84,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     private _lastY: number = 0;
     private _downX: number = 0;
     private _downY: number = 0;
+    private _lastClientY: number | undefined = 0;
+    private _lastClientX: number | undefined = 0;
     private _inkToTextStartX: number | undefined;
     private _inkToTextStartY: number | undefined;
     private _wordPalette: Map<string, string> = new Map<string, string>();
@@ -579,7 +581,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     @action
     onPointerUp = (e: PointerEvent): void => {
-        this._lastClientY = undefined;
+        this._lastClientY = this._lastClientX = undefined;
         if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) return;
 
         document.removeEventListener("pointermove", this.onPointerMove);
@@ -1172,76 +1174,40 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     // <div ref={this._marqueeRef}>
 
-    _lastClientY: number | undefined = 0;
     @action
     handleDragging = (e: CustomEvent<React.DragEvent>, de: DragEvent) => {
         if ((e as any).handlePan) return;
         (e as any).handlePan = true;
-        const top = this.panX();
-        const left = this.panY();
         this._lastClientY = e.detail.clientY;
-
-        console.log("draggg");
-
-        const size = this.getTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight());
-        const scale = this.getLocalTransform().inverse().Scale;
+        this._lastClientX = e.detail.clientX;
 
         if (this._marqueeRef?.current) {
-
-            console.log("hellp");
-
             const dragX = e.detail.clientX;
             const dragY = e.detail.clientY;
             const bounds = this._marqueeRef.current?.getBoundingClientRect();
 
-            if (dragX - bounds.left < 25) {
-                console.log("PAN left ");
-
-                if (this.canPanX) {
-                    this.Document._panX = left - 5;
-                    setTimeout(action(() => {
-                        this.canPanX = true;
-                        this.panX();
-                    }), 250);
-                    this.canPanX = false;
-                }
-            } else if (bounds.right - dragX < 25) {
-                console.log("PAN right ");
-
-                if (this.canPanX) {
-                    this.Document._panX = left + 5;
-                    setTimeout(action(() => {
-                        this.panX();
-                        this.canPanX = true;
-                    }), 250);
-                    this.canPanX = false;
-                }
-
-            }
-
-            if (dragY - bounds.top < 25) {
-                console.log("PAN top ");
-                this.continueYPan(-2);
-            } else if (bounds.bottom - dragY < 25) {
-                console.log("PAN bottom ");
-                this.continueYPan(2);
-            }
+            let deltaX = dragX - bounds.left < 25 ? -2 : bounds.right - dragX < 25 ? 2 : 0;
+            let deltaY = dragY - bounds.top < 25 ? -2 : bounds.bottom - dragY < 25 ? 2 : 0;
+            (deltaX !== 0 || deltaY !== 0) && this.continuePan(deltaX, deltaY);
         }
         e.stopPropagation();
     }
 
-    continueYPan = (delta: number) => {
+    continuePan = (deltaX: number, deltaY: number) => {
         setTimeout(() => {
             const dragY = this._lastClientY;
-            if (dragY !== undefined && this._marqueeRef.current) {
+            const dragX = this._lastClientX;
+            if (dragY !== undefined && dragX !== undefined && this._marqueeRef.current) {
                 const bounds = this._marqueeRef.current.getBoundingClientRect()!;
-                this.Document._panY = NumCast(this.Document._panY) + delta;
-                (dragY - bounds.top < 25 || bounds.bottom - dragY < 25) && this.continueYPan(delta);
-            } else this._lastClientY !== undefined && this.continueYPan(delta);
+                this.Document._panY = NumCast(this.Document._panY) + deltaY;
+                this.Document._panX = NumCast(this.Document._panX) + deltaX;
+                if (dragY - bounds.top < 25 || bounds.bottom - dragY < 25 || dragX - bounds.left < 25 || bounds.right - dragX < 25) {
+                    this.continuePan(deltaX, deltaY);
+                }
+            } else this._lastClientY !== undefined && this._lastClientX !== undefined && this.continuePan(deltaX, deltaY);
         }, 50);
     }
 
-
     promoteCollection = undoBatch(action(() => {
         const childDocs = this.childDocs.slice();
         childDocs.forEach(doc => {
-- 
cgit v1.2.3-70-g09d2


From d064024d9ab2cd8e836df5ba75e064d77617445b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 10 Jul 2020 11:25:08 -0400
Subject: from last

---
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 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 3fdf6683e..2191021d2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1194,7 +1194,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     }
 
     continuePan = (deltaX: number, deltaY: number) => {
-        setTimeout(() => {
+        setTimeout(action(() => {
             const dragY = this._lastClientY;
             const dragX = this._lastClientX;
             if (dragY !== undefined && dragX !== undefined && this._marqueeRef.current) {
@@ -1205,7 +1205,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                     this.continuePan(deltaX, deltaY);
                 }
             } else this._lastClientY !== undefined && this._lastClientX !== undefined && this.continuePan(deltaX, deltaY);
-        }, 50);
+        }), 50);
     }
 
     promoteCollection = undoBatch(action(() => {
-- 
cgit v1.2.3-70-g09d2

