fixed dragging of link button. made web views clips. added delete on marquee.

6 files changed, 45 insertions, 26 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b78762018..7b30dff98 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -152,20 +152,10 @@ export namespace Documents {
         return doc;
     }
     export function VideoDocument(url: string, options: DocumentOptions = {}) {
-        let doc = SetInstanceOptions(GetVideoPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
-            new URL(url), VideoField);
-        doc.SetText(KeyStore.Caption, "my caption...");
-        doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption());
-        doc.SetText(KeyStore.OverlayLayout, FixedCaption());
-        return doc;
+        return SetInstanceOptions(GetVideoPrototype(), options, new URL(url), VideoField);
     }
     export function AudioDocument(url: string, options: DocumentOptions = {}) {
-        let doc = SetInstanceOptions(GetAudioPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
-            new URL(url), AudioField);
-        doc.SetText(KeyStore.Caption, "my caption...");
-        doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption());
-        doc.SetText(KeyStore.OverlayLayout, FixedCaption());
-        return doc;
+        return SetInstanceOptions(GetAudioPrototype(), options, new URL(url), AudioField);
     }
     export function TextDocument(options: DocumentOptions = {}) {
         return SetInstanceOptions(GetTextPrototype(), options, "", RichTextField);
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 0dcaa9c77..4a61220a5 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -99,6 +99,7 @@ export namespace DragManager {
     export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) {
         if (!dragDiv) {
             dragDiv = document.createElement("div");
+            dragDiv.className = "dragManager-dragDiv"
             DragManager.Root().appendChild(dragDiv);
         }
         const w = ele.offsetWidth, h = ele.offsetHeight;
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index f88bf9c14..fb9091dfc 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -29,13 +29,23 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
-    #linkButton {
-        height: 20px;
-        width: 20px;
-        margin-top: 10px;
-        border-radius: 50%;
-        opacity: 0.6;
-        pointer-events: auto;
-        background-color: #2B6091;
-    }
+    
+}
+.linkButton-empty {
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: auto;
+    background-color: #2B6091;
+}
+.linkButton-nonempty {
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    border-radius: 50%;
+    opacity: 0.6;
+    pointer-events: auto;
+    background-color: rgb(35, 165, 42);
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8c3913232..dc62f97cf 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -8,6 +8,7 @@ import { NumberField } from "../../fields/NumberField";
 import { props } from "bluebird";
 import { DragManager } from "../util/DragManager";
 import { LinkMenu } from "./nodes/LinkMenu";
+import { ListField } from "../../fields/ListField";
 const higflyout = require("@hig/flyout");
 const { anchorPoints } = higflyout;
 const Flyout = higflyout.default;
@@ -204,13 +205,14 @@ export class DocumentDecorations extends React.Component {
 
         let linkButton = null;
         if (SelectionManager.SelectedDocuments().length > 0) {
+            let selFirst = SelectionManager.SelectedDocuments()[0];
             linkButton = (<Flyout
                 anchorPoint={anchorPoints.RIGHT_TOP}
                 content={
-                    <LinkMenu docView={SelectionManager.SelectedDocuments()[0]} changeFlyout={this.changeFlyoutContent}>
+                    <LinkMenu docView={selFirst} changeFlyout={this.changeFlyoutContent}>
                     </LinkMenu>
                 }>
-                <div id="linkButton" onPointerDown={this.onLinkButtonDown} ref={this._linkButton}></div>
+                <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} ref={this._linkButton} />
             </Flyout>);
         }
         return (
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index cd5f92623..b0cd7e017 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -100,7 +100,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             if (!e.shiftKey) {
                 SelectionManager.DeselectAll();
             }
-            this.marqueeSelect();
+            var selectedDocs = this.marqueeSelect();
+            selectedDocs.map(s => this.props.CollectionView.SelectedDocs.push(s.Id));
             this._marquee = false;
         }
         else if (!this._marquee && Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
@@ -122,7 +123,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
             r2.bottom < r1.top);
     }
 
-    @action
     marqueeSelect() {
         this.props.CollectionView.SelectedDocs.length = 0;
         var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
@@ -132,6 +132,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
         var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
         const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
+        let selection: Document[] = [];
         if (lvalue && lvalue != FieldWaiting) {
             lvalue.Data.map(doc => {
                 var page = doc.GetNumber(KeyStore.Page, 0);
@@ -141,10 +142,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     var w = doc.GetNumber(KeyStore.Width, 0);
                     var h = doc.GetNumber(KeyStore.Height, 0);
                     if (this.intersectRect({ left: x, top: y, right: x + w, bottom: y + h }, selRect))
-                        this.props.CollectionView.SelectedDocs.push(doc.Id)
+                        selection.push(doc)
                 }
             })
         }
+        return selection;
     }
 
     @action
@@ -152,7 +154,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (!e.cancelBubble && this.props.active()) {
             e.stopPropagation();
             e.preventDefault();
+            let wasMarquee = this._marquee;
             this._marquee = e.buttons != 2;
+            if (this._marquee && !wasMarquee) {
+                document.addEventListener("keydown", this.marqueeCommand);
+            }
 
             if (!this._marquee) {
                 let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
@@ -167,6 +173,15 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
+    marqueeCommand = (e: KeyboardEvent) => {
+        if (e.key == "Backspace") {
+            this.marqueeSelect().map(d => this.props.removeDocument(d));
+        }
+        if (e.key == "c") {
+        }
+    }
+
+    @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
         e.preventDefault();
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index e72b3c4da..a535b2638 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -4,6 +4,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: scroll;
 }
 
 .webBox-button {