From 86fb73ccadd12ac07fea7a162295b287d6651c48 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 23 Apr 2019 21:24:57 -0400
Subject: fixes for text box input and dock view problems.

---
 src/client/views/PreviewCursor.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/client/views/PreviewCursor.tsx')

diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index ff8434681..5ece034fb 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -18,6 +18,8 @@ export class PreviewCursor extends React.Component<{}> {
     @observable public static hide = () => { };
     @action
     public static Show(hide: any, x: number, y: number) {
+        if (this.hide)
+            this.hide();
         this.clickPoint = [x, y];
         this.hide = hide;
         setTimeout(action(() => this.Visible = true), (1));
-- 
cgit v1.2.3-70-g09d2


From 27f505949ae47c3c5f83633115b9d238936d4003 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 23 Apr 2019 22:39:41 -0400
Subject: cleaned up events a bit

---
 src/client/views/PreviewCursor.tsx                 | 35 +++++++++-----
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  8 +---
 .../collections/collectionFreeForm/MarqueeView.tsx | 55 +++++++---------------
 src/client/views/nodes/DocumentView.tsx            |  7 +--
 4 files changed, 48 insertions(+), 57 deletions(-)

(limited to 'src/client/views/PreviewCursor.tsx')

diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 5ece034fb..39b6c6544 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -7,32 +7,45 @@ import "./PreviewCursor.scss";
 @observer
 export class PreviewCursor extends React.Component<{}> {
     private _prompt = React.createRef<HTMLDivElement>();
+    static _onKeyPress?: (e: KeyboardEvent) => void;
+    @observable static _clickPoint = [0, 0];
+    @observable public static Visible = false;
     //when focus is lost, this will remove the preview cursor
     @action onBlur = (): void => {
         PreviewCursor.Visible = false;
-        PreviewCursor.hide();
     }
 
-    @observable static clickPoint = [0, 0];
-    @observable public static Visible = false;
-    @observable public static hide = () => { };
+    constructor(props: any) {
+        super(props);
+        document.addEventListener("keypress", this.onKeyPress)
+    }
+
+    @action
+    onKeyPress = (e: KeyboardEvent) => {
+        // Mixing events between React and Native is finicky.  In FormattedTextBox, we set the
+        // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore
+        // the keyPress here.
+        //if not these keys, make a textbox if preview cursor is active!
+        if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
+            PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
+        }
+        PreviewCursor.Visible = false;
+    }
     @action
-    public static Show(hide: any, x: number, y: number) {
-        if (this.hide)
-            this.hide();
-        this.clickPoint = [x, y];
-        this.hide = hide;
+    public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) {
+        this._clickPoint = [x, y];
+        this._onKeyPress = onKeyPress;
         setTimeout(action(() => this.Visible = true), (1));
     }
     render() {
-        if (!PreviewCursor.clickPoint) {
+        if (!PreviewCursor._clickPoint) {
             return (null);
         }
         if (PreviewCursor.Visible && this._prompt.current) {
             this._prompt.current.focus();
         }
         return <div className="previewCursor" id="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={this._prompt}
-            style={{ transform: `translate(${PreviewCursor.clickPoint[0]}px, ${PreviewCursor.clickPoint[1]}px)`, opacity: PreviewCursor.Visible ? 1 : 0 }}>
+            style={{ transform: `translate(${PreviewCursor._clickPoint[0]}px, ${PreviewCursor._clickPoint[1]}px)`, opacity: PreviewCursor.Visible ? 1 : 0 }}>
             I
         </div >;
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 56d54696d..7492d8744 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -118,19 +118,15 @@ export class CollectionFreeFormView extends CollectionSubView {
                 (e.button === 0 && e.altKey)) && (childSelected || this.props.active()))) ||
             (!CollectionFreeFormView.RIGHT_BTN_DRAG &&
                 ((e.button === 0 && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && (childSelected || this.props.active())))) {
-            document.removeEventListener("pointermove", this.onPointerMove);
+            this.cleanupInteractions();
             document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
             this._lastX = e.pageX;
             this._lastY = e.pageY;
         }
     }
 
-    @action
     onPointerUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-
         this.cleanupInteractions();
     }
 
@@ -164,7 +160,7 @@ export class CollectionFreeFormView extends CollectionSubView {
             this.setPan(x - dx, y - dy);
             this._lastX = e.pageX;
             this._lastY = e.pageY;
-            e.stopPropagation();
+            e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
             e.preventDefault();
         }
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 32633a1ed..623643238 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -32,9 +32,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     @observable _lastY: number = 0;
     @observable _downX: number = 0;
     @observable _downY: number = 0;
-    @observable _used: boolean = false;
     @observable _visible: boolean = false;
-    _showOnUp: boolean = false;
     static DRAG_THRESHOLD = 4;
 
     @action
@@ -42,8 +40,6 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         if (all) {
             document.removeEventListener("pointermove", this.onPointerMove, true);
             document.removeEventListener("pointerup", this.onPointerUp, true);
-        } else {
-            this._used = true;
         }
         document.removeEventListener("keydown", this.marqueeCommand, true);
         this._visible = false;
@@ -51,32 +47,19 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
     @action
     onKeyPress = (e: KeyboardEvent) => {
-        // Mixing events between React and Native is finicky.  In FormattedTextBox, we set the
-        // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore
-        // the keyPress here.
-        //if not these keys, make a textbox if preview cursor is active!
-        if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
-            //make textbox and add it to this collection
-            let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY);
-            let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" });
-            this.props.addLiveTextDocument(newBox);
-            PreviewCursor.Visible = false;
-            e.stopPropagation();
-        }
-    }
-    hideCursor = () => {
-        document.removeEventListener("keypress", this.onKeyPress, false);
+        //make textbox and add it to this collection
+        let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY);
+        let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" });
+        this.props.addLiveTextDocument(newBox);
+        e.stopPropagation();
     }
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = this._lastX = e.pageX;
         this._downY = this._lastY = e.pageY;
-
-        document.removeEventListener("keypress", this.onKeyPress, false);
+        PreviewCursor.Visible = false;
         if ((CollectionFreeFormView.RIGHT_BTN_DRAG && e.button === 0 && !e.altKey && !e.metaKey && this.props.container.props.active()) ||
             (!CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && this.props.container.props.active())) {
-            this._used = false;
-            this._showOnUp = true;
             document.addEventListener("pointermove", this.onPointerMove, true);
             document.addEventListener("pointerup", this.onPointerUp, true);
             document.addEventListener("keydown", this.marqueeCommand, true);
@@ -91,14 +74,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         this._lastX = e.pageX;
         this._lastY = e.pageY;
         if (!e.cancelBubble) {
-            if (Math.abs(this._downX - e.clientX) > 4 || Math.abs(this._downY - e.clientY) > 4) {
-                this._showOnUp = false;
-                PreviewCursor.Visible = false;
-            }
-            if (!this._used &&
-                (!CollectionFreeFormView.RIGHT_BTN_DRAG && (e.buttons === 2 || (e.buttons == 1 && e.altKey))) ||
-                (CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 1 && !e.altKey && !e.metaKey) &&
-                (Math.abs(this._lastX - this._downX) > MarqueeView.DRAG_THRESHOLD || Math.abs(this._lastY - this._downY) > MarqueeView.DRAG_THRESHOLD)) {
+            if (Math.abs(this._lastX - this._downX) > MarqueeView.DRAG_THRESHOLD ||
+                Math.abs(this._lastY - this._downY) > MarqueeView.DRAG_THRESHOLD) {
                 this._visible = true;
                 e.stopPropagation();
                 e.preventDefault();
@@ -110,24 +87,28 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
     @action
     onPointerUp = (e: PointerEvent): void => {
-        this.cleanupInteractions(true);
-        this._visible = false;
-        if (!this._showOnUp && (CollectionFreeFormView.RIGHT_BTN_DRAG && e.button === 0 && !e.altKey && !e.metaKey) ||
-            (!CollectionFreeFormView.RIGHT_BTN_DRAG && ((e.button === 0 && e.altKey) || e.button === 2))) {
+        if (this._visible) {
             let mselect = this.marqueeSelect();
             if (!e.shiftKey) {
                 SelectionManager.DeselectAll(mselect.length ? undefined : this.props.container.props.Document);
             }
             this.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]);
         }
+        this.cleanupInteractions(true);
         if (e.altKey)
             e.preventDefault();
     }
 
     @action
     onClick = (e: React.MouseEvent): void => {
-        PreviewCursor.Show(this.hideCursor, e.clientX, e.clientY);
-        document.addEventListener("keypress", this.onKeyPress, false);
+        if (Math.abs(e.clientX - this._downX) < MarqueeView.DRAG_THRESHOLD &&
+            Math.abs(e.clientY - this._downY) < MarqueeView.DRAG_THRESHOLD) {
+            PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress);
+            // let the DocumentView stopPropagation of this event when it selects this document
+        } else {  // why do we get a click event when the cursor have moved a big distance?
+            // let's cut it off here so no one else has to deal with it.
+            e.stopPropagation();
+        }
     }
 
     intersectRect(r1: { left: number, top: number, width: number, height: number },
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6784ac310..b3b9f6e51 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -23,6 +23,7 @@ import "./DocumentView.scss";
 import React = require("react");
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
+import { MarqueeView } from "../collections/collectionFreeForm/MarqueeView";
 
 export interface DocumentViewProps {
     ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>;
@@ -146,8 +147,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     onClick = (e: React.MouseEvent): void => {
-        console.log("click = " + this.props.Document.Title);
-        if (CurrentUserUtils.MainDocId != this.props.Document.Id) {
+        if (CurrentUserUtils.MainDocId != this.props.Document.Id &&
+            (Math.abs(e.clientX - this._downX) < MarqueeView.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < MarqueeView.DRAG_THRESHOLD)) {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
         e.stopPropagation();
@@ -182,7 +183,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                     this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey);
                 }
             }
-            e.stopPropagation();
+            e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
             e.preventDefault();
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 20becbb5ca40350ed85e01f73f29621ba7783bb9 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 24 Apr 2019 12:20:38 -0400
Subject: playing with linking

---
 src/client/util/DragManager.ts                     |  6 ++--
 src/client/views/DocumentDecorations.tsx           |  3 +-
 src/client/views/PreviewCursor.tsx                 |  8 +++--
 .../collections/collectionFreeForm/MarqueeView.tsx | 33 ++++++++++++++++---
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 16 ++++-----
 src/client/views/nodes/DocumentView.tsx            | 38 ++--------------------
 src/client/views/nodes/FormattedTextBox.tsx        |  2 ++
 src/fields/Document.ts                             | 31 ++++++++++++++++++
 8 files changed, 80 insertions(+), 57 deletions(-)

(limited to 'src/client/views/PreviewCursor.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 91b3ce616..5aa7ad8e2 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -41,11 +41,11 @@ export function SetupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc:
 }
 
 export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: number, sourceDoc: Document) {
-    let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document);
-    let draggedDocs = (srcTarg && srcTarg !== FieldWaiting) ?
+    let srcTarg = sourceDoc.GetPrototype();
+    let draggedDocs = srcTarg ?
         srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]).map(linkDoc =>
             (linkDoc.GetT(KeyStore.LinkedToDocs, Document)) as Document) : [];
-    let draggedFromDocs = (srcTarg && srcTarg !== FieldWaiting) ?
+    let draggedFromDocs = srcTarg ?
         srcTarg.GetList(KeyStore.LinkedFromDocs, [] as Document[]).map(linkDoc =>
             (linkDoc.GetT(KeyStore.LinkedFromDocs, Document)) as Document) : [];
     draggedDocs.push(...draggedFromDocs);
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 5c57a829a..9995c1c3f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -6,7 +6,7 @@ import { ListField } from "../../fields/ListField";
 import { NumberField } from "../../fields/NumberField";
 import { TextField } from "../../fields/TextField";
 import { Document } from "../../fields/Document";
-import { emptyFunction } from "../../Utils";
+import { emptyFunction, Utils } from "../../Utils";
 import { DragLinksAsDocuments, DragManager } from "../util/DragManager";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch } from "../util/UndoManager";
@@ -19,7 +19,6 @@ import { CompileScript } from "../util/Scripting";
 import { IconBox } from "./nodes/IconBox";
 import { FieldValue, Field } from "../../fields/Field";
 import { Documents } from "../documents/Documents";
-import { Utils } from "../northstar/utils/Utils";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 39b6c6544..744ec0535 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -17,7 +17,7 @@ export class PreviewCursor extends React.Component<{}> {
 
     constructor(props: any) {
         super(props);
-        document.addEventListener("keypress", this.onKeyPress)
+        document.addEventListener("keydown", this.onKeyPress)
     }
 
     @action
@@ -28,8 +28,12 @@ export class PreviewCursor extends React.Component<{}> {
         //if not these keys, make a textbox if preview cursor is active!
         if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
             PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
+            PreviewCursor.Visible = false;
+        } else if (e.ctrlKey) {
+            if (e.key == "v") {
+                PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
+            }
         }
-        PreviewCursor.Visible = false;
     }
     @action
     public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 39b42dac9..898fff019 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -14,6 +14,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import "./MarqueeView.scss";
 import React = require("react");
 import { Utils } from "../../../../Utils";
+import { ListField } from "../../../../fields/ListField";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -128,16 +129,16 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     @undoBatch
     @action
     marqueeCommand = (e: KeyboardEvent) => {
-        if (e.key === "Backspace" || e.key === "Delete") {
+        if (e.key === "Backspace" || e.key === "Delete" || e.key == "d") {
             this.marqueeSelect().map(d => this.props.removeDocument(d));
             let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField);
             if (ink && ink !== FieldWaiting) {
                 this.marqueeInkDelete(ink.Data);
             }
-            this.cleanupInteractions();
+            this.cleanupInteractions(true);
             e.stopPropagation();
         }
-        if (e.key === "c") {
+        if (e.key === "c" || e.key === "r") {
             e.stopPropagation();
             let bounds = this.Bounds;
             let selected = this.marqueeSelect().map(d => {
@@ -155,16 +156,38 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 y: bounds.top,
                 panx: 0,
                 pany: 0,
+                backgroundColor: selected.length ? "white" : "",
                 scale: zoomBasis,
                 width: bounds.width * zoomBasis,
                 height: bounds.height * zoomBasis,
                 ink: inkData ? this.marqueeInkSelect(inkData) : undefined,
                 title: "a nested collection"
             });
-            this.props.addDocument(newCollection, false);
+
             this.marqueeInkDelete(inkData);
-            this.cleanupInteractions();
             SelectionManager.DeselectAll();
+            if (e.key === "r") {
+                let summary = Documents.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+                summary.GetPrototype()!.CreateLink(newCollection.GetPrototype()!);
+                this.props.addLiveTextDocument(summary);
+                e.preventDefault();
+            }
+            else {
+                this.props.addDocument(newCollection, false);
+            }
+            this.cleanupInteractions(true);
+        }
+        if (e.key === "s") {
+            e.stopPropagation();
+            e.preventDefault();
+            let bounds = this.Bounds;
+            let selected = this.marqueeSelect();
+            SelectionManager.DeselectAll();
+            let summary = Documents.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+            this.props.addLiveTextDocument(summary);
+            selected.map(select => summary.GetPrototype()!.CreateLink(select.GetPrototype()!));
+
+            this.cleanupInteractions(true);
         }
     }
     @action
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 671bfbc04..420324d40 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -7,7 +7,7 @@ import { Transform } from "../../util/Transform";
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import React = require("react");
-import { OmitKeys } from "../../../Utils";
+import { OmitKeys, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { ListField } from "../../../fields/ListField";
 import { BooleanField } from "../../../fields/BooleanField";
@@ -102,9 +102,7 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr
     public toggleIcon = async (): Promise<void> => {
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
-        let minDoc = await this.props.Document.GetTAsync(KeyStore.MinimizedDoc, Document);
-        if (!minDoc) return;
-        let minimizedDocSet = await minDoc.GetTAsync(KeyStore.LinkTags, ListField);
+        let minimizedDocSet = await this.props.Document.GetTAsync(KeyStore.LinkTags, ListField);
         if (!minimizedDocSet) return;
         minimizedDocSet.Data.map(async minimizedDoc => {
             if (minimizedDoc instanceof Document) {
@@ -136,16 +134,13 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
     }
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointerup", this.onPointerUp);
+    onClick = (e: React.MouseEvent): void => {
         e.stopPropagation();
-        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+        if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
+            Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
             this.props.Document.GetTAsync(KeyStore.MaximizedDoc, Document).then(maxdoc => {
                 if (maxdoc instanceof Document) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    SelectionManager.DeselectAll();
                     this.props.addDocument && this.props.addDocument(maxdoc, false);
                     this.toggleIcon();
                 }
@@ -170,6 +165,7 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
                 onPointerDown={this.onPointerDown}
+                onClick={this.onClick}
                 style={{
                     opacity: zoomFade,
                     transformOrigin: "left top",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 252f4d039..c19b0c342 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -152,7 +152,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
-        e.stopPropagation();
     }
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
@@ -217,43 +216,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         if (de.data instanceof DragManager.LinkDragData) {
-            let sourceDoc: Document = de.data.linkSourceDocument;
-            let destDoc: Document = this.props.Document;
-            let linkDoc: Document = new Document();
+            let sourceDoc = de.data.linkSourceDocument;
+            let destDoc = this.props.Document;
 
             destDoc.GetTAsync(KeyStore.Prototype, Document).then(protoDest =>
                 sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc =>
-                    runInAction(() => {
-                        let batch = UndoManager.StartBatch("document view drop");
-                        linkDoc.SetText(KeyStore.Title, "New Link");
-                        linkDoc.SetText(KeyStore.LinkDescription, "");
-                        linkDoc.SetText(KeyStore.LinkTags, "Default");
-
-                        let dstTarg = protoDest ? protoDest : destDoc;
-                        let srcTarg = protoSrc ? protoSrc : sourceDoc;
-                        if ((de.data as DragManager.LinkDragData).blacklist.indexOf(dstTarg) === -1) {
-                            linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
-                            linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
-                            const prom1 = new Promise(resolve => dstTarg.GetOrCreateAsync(
-                                KeyStore.LinkedFromDocs,
-                                ListField,
-                                field => {
-                                    (field as ListField<Document>).Data.push(linkDoc);
-                                    resolve();
-                                }
-                            ));
-                            const prom2 = new Promise(resolve => srcTarg.GetOrCreateAsync(
-                                KeyStore.LinkedToDocs,
-                                ListField,
-                                field => {
-                                    (field as ListField<Document>).Data.push(linkDoc);
-                                    resolve();
-                                }
-                            ));
-                            Promise.all([prom1, prom2]).finally(() => batch.end());
-                        }
-                    })
-                )
+                    (protoSrc ? protoSrc : sourceDoc).CreateLink(protoDest ? protoDest : destDoc))
             );
             e.stopPropagation();
         }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 91b44962d..9cd58c73a 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -270,8 +270,10 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte
     }
     render() {
         let style = this.props.isOverlay ? "scroll" : "hidden";
+        let color = this.props.Document.GetText(KeyStore.BackgroundColor, "");
         return (
             <div className={`formattedTextBox-cont-${style}`}
+                style={{ background: color }}
                 onKeyDown={this.onKeyPress}
                 onKeyPress={this.onKeyPress}
                 onFocus={this.onFocused}
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 7cf784f0e..7a7dbc3fe 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -371,6 +371,37 @@ export class Document extends Field {
         return alias;
     }
 
+    @action
+    CreateLink(dstTarg: Document) {
+        let batch = UndoManager.StartBatch("document view drop");
+        let linkDoc: Document = new Document();
+        linkDoc.SetText(KeyStore.Title, "New Link");
+        linkDoc.SetText(KeyStore.LinkDescription, "");
+        linkDoc.SetText(KeyStore.LinkTags, "Default");
+
+        let srcTarg = this;
+        linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
+        linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
+        const prom1 = new Promise(resolve => dstTarg.GetOrCreateAsync(
+            KeyStore.LinkedFromDocs,
+            ListField,
+            field => {
+                (field as ListField<Document>).Data.push(linkDoc);
+                resolve();
+            }
+        ));
+        const prom2 = new Promise(resolve => srcTarg.GetOrCreateAsync(
+            KeyStore.LinkedToDocs,
+            ListField,
+            field => {
+                (field as ListField<Document>).Data.push(linkDoc);
+                resolve();
+            }
+        ));
+        Promise.all([prom1, prom2]).finally(() => batch.end());
+        return linkDoc;
+    }
+
     MakeDelegate(id?: string): Document {
         let delegate = new Document(id);
 
-- 
cgit v1.2.3-70-g09d2


From 96b1e27da348e47a4d5c83b182a5f55e96e3218e Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 26 Apr 2019 08:41:53 -0400
Subject: fixed keyboard modifier to not create document.  cleaned up videobox
 render.

---
 src/client/views/PreviewCursor.tsx          |  9 ++++-----
 src/client/views/nodes/FormattedTextBox.tsx |  2 +-
 src/client/views/nodes/VideoBox.tsx         | 19 ++++++++++---------
 3 files changed, 15 insertions(+), 15 deletions(-)

(limited to 'src/client/views/PreviewCursor.tsx')

diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 744ec0535..2e63f751b 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -26,12 +26,11 @@ export class PreviewCursor extends React.Component<{}> {
         // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore
         // the keyPress here.
         //if not these keys, make a textbox if preview cursor is active!
-        if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
-            PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
-            PreviewCursor.Visible = false;
-        } else if (e.ctrlKey) {
-            if (e.key == "v") {
+        if (e.key.startsWith("F") && !e.key.endsWith("F")) {
+        } else if (e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
+            if ((!e.ctrlKey && !e.metaKey) || e.key === "v") {
                 PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
+                PreviewCursor.Visible = false;
             }
         }
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 4e841af98..8fb86f320 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -259,7 +259,7 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte
             SelectionManager.DeselectAll();
         }
         e.stopPropagation();
-        if (e.keyCode === 9) e.preventDefault();
+        if (e.key === "Tab") e.preventDefault();
         // stop propagation doesn't seem to stop propagation of native keyboard events.
         // so we set a flag on the native event that marks that the event's been handled.
         (e.nativeEvent as any).DASHFormattedTextBoxHandled = true;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 1e6bc58c9..019e5e489 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -53,25 +53,26 @@ export class VideoBox extends React.Component<FieldViewProps> {
             (vref as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage;
         }
     }
+    videoContent(path: string) {
+        return <video className="videobox-cont" ref={this.setVideoRef}>
+            <source src={path} type="video/mp4" />
+            Not supported.
+    </video>;
+    }
 
     render() {
         let field = this.props.Document.GetT(this.props.fieldKey, VideoField);
         if (!field || field === FieldWaiting) {
             return <div>Loading</div>;
         }
-        let path = field.Data.href;
-        trace();
-        return (
+        return (this.props.Document.GetNumber(KeyStore.NativeHeight, 0)) ?
+            this.videoContent(field.data.href) :
             <Measure onResize={this.setScaling}>
                 {({ measureRef }) =>
                     <div style={{ width: "100%", height: "auto" }} ref={measureRef}>
-                        <video className="videobox-cont" ref={this.setVideoRef}>
-                            <source src={path} type="video/mp4" />
-                            Not supported.
-                        </video>
+                        {this.videoContent(field.data.href)}
                     </div>
                 }
-            </Measure>
-        );
+            </Measure>;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From b2d9133f2fdb6dd2af3b74c4dd9de49145611b1b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 26 Apr 2019 22:08:20 -0400
Subject: fixed previewcursor appearing on select. adjusted rounded border
 text.

---
 src/client/views/PreviewCursor.tsx                            |  2 +-
 .../collections/collectionFreeForm/CollectionFreeFormView.tsx |  2 +-
 .../views/collections/collectionFreeForm/MarqueeView.tsx      |  6 +++++-
 src/client/views/nodes/DocumentView.tsx                       |  1 +
 src/client/views/nodes/FormattedTextBox.scss                  | 11 ++++++++++-
 src/client/views/nodes/FormattedTextBox.tsx                   | 11 +++++++----
 6 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'src/client/views/PreviewCursor.tsx')

diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 2e63f751b..4359ba093 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -27,7 +27,7 @@ export class PreviewCursor extends React.Component<{}> {
         // the keyPress here.
         //if not these keys, make a textbox if preview cursor is active!
         if (e.key.startsWith("F") && !e.key.endsWith("F")) {
-        } else if (e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
+        } else if (e.key != "Escape" && e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
             if ((!e.ctrlKey && !e.metaKey) || e.key === "v") {
                 PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
                 PreviewCursor.Visible = false;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 405594eb1..1a953006a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -295,7 +295,7 @@ export class CollectionFreeFormView extends CollectionSubView {
                         {this.props.Document.Title}
                     </text>
                 </svg> */}
-                <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
+                <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments} isSelected={this.props.isSelected}
                     addDocument={this.addDocument} removeDocument={this.props.removeDocument} addLiveTextDocument={this.addLiveTextBox}
                     getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
                     <CollectionFreeFormViewPannableContents centeringShiftX={this.centeringShiftX} centeringShiftY={this.centeringShiftY}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c6681e014..0e2ac0a80 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -24,6 +24,7 @@ interface MarqueeViewProps {
     selectDocuments: (docs: Document[]) => void;
     removeDocument: (doc: Document) => boolean;
     addLiveTextDocument: (doc: Document) => void;
+    isSelected: () => boolean;
 }
 
 @observer
@@ -102,7 +103,9 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     onClick = (e: React.MouseEvent): void => {
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress);
+            if (this.props.isSelected()) {
+                PreviewCursor.Show(e.clientX, e.clientY, this.onKeyPress);
+            }
             // let the DocumentView stopPropagation of this event when it selects this document
         } else {  // why do we get a click event when the cursor have moved a big distance?
             // let's cut it off here so no one else has to deal with it.
@@ -137,6 +140,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             e.stopPropagation();
         }
         if (e.key === "c" || e.key === "r" || e.key === "e") {
+            console.log("DO MARQUEE");
             e.stopPropagation();
             let bounds = this.Bounds;
             let selected = this.marqueeSelect().map(d => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index aaedd5b1c..3d6e0c4d8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -172,6 +172,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
             e.preventDefault();
+            e.stopPropagation();
         }
     }
     onPointerMove = (e: PointerEvent): void => {
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index f4f37250f..727d3c0b2 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -10,7 +10,7 @@
   outline: none !important;
 }
 
-.formattedTextBox-cont-scroll, .formattedTextBox-cont-hidden {
+.formattedTextBox-cont-scroll, .formattedTextBox-cont-hidden  {
   background: $light-color-secondary;
   padding: 0;
   border-width: 0px;
@@ -24,10 +24,19 @@
   height: 100%;
   pointer-events: all;
 }
+
 .formattedTextBox-cont-hidden {
     overflow: hidden;
     pointer-events: none;
 }
+.formattedTextBox-inner-rounded {
+    height: calc(100% - 40px);
+    width: calc(100% - 40px);
+    position: absolute;
+    overflow: scroll;
+    top: 20;
+    left: 20;
+}
 
 .menuicon {
   display: inline-block;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8fb86f320..02d98de6b 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -270,11 +270,12 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte
         };
     }
     render() {
-        let style = this.props.isOverlay ? "scroll" : "hidden";
+        let style = this.props.isOverlay ? "-scroll" : "-hidden";
+        let rounded = this.props.Document.GetNumber(KeyStore.BorderRounding, 0) < 0 ? "-rounded" : "";
         let color = this.props.Document.GetText(KeyStore.BackgroundColor, "");
-        let interactive = InkingControl.Instance.selectedTool ? "" : "interactive";
+        let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
         return (
-            <div className={`formattedTextBox-cont-${style}`}
+            <div className={`formattedTextBox-cont${style}`}
                 style={{
                     pointerEvents: interactive ? "all" : "none",
                     background: color,
@@ -288,7 +289,9 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte
                 onContextMenu={this.specificContextMenu}
                 // tfs: do we need this event handler
                 onWheel={this.onPointerWheel}
-                ref={this._ref} />
+            >
+                <div className={`formattedTextBox-inner${rounded}`} ref={this._ref} />
+            </div>
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2

