basic menu and setting docs working

5 files changed, 260 insertions, 42 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b7c8f4c12..e903d1e06 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -54,6 +54,7 @@ var path = require('path');
 export interface DocumentOptions {
     x?: number;
     y?: number;
+    z?: number;
     type?: string;
     width?: number;
     height?: number;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 79c44ae72..82e3c706a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -443,7 +443,7 @@ export class MainView extends React.Component {
         let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
 
         let addColNode = action(() => Docs.Create.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" }));
-        let addLinkFollowBox = action(() => Docs.Create.LinkFollowBoxDocument({ width: 200, height: 500, title: "Link Follow Document" }));
+        let addLinkFollowBox = action(() => Docs.Create.LinkFollowBoxDocument({ width: 500, height: 350, title: "Link Follower" }));
         let addPresNode = action(() => Doc.UserDoc().curPresentation = Docs.Create.PresDocument(new List<Doc>(), { width: 200, height: 500, title: "a presentation trail" }));
         let addWebNode = action(() => Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", { width: 300, height: 300, title: "New Webpage" }));
         let addDragboxNode = action(() => Docs.Create.DragboxDocument({ width: 40, height: 40, title: "drag collection" }));
@@ -459,7 +459,7 @@ export class MainView extends React.Component {
             [React.createRef<HTMLDivElement>(), "globe-asia", "Add Website", addWebNode],
             [React.createRef<HTMLDivElement>(), "bolt", "Add Button", addButtonDocument],
             [React.createRef<HTMLDivElement>(), "file", "Add Document Dragger", addDragboxNode],
-            [React.createRef<HTMLDivElement>(), "caret-up", "Open Link Follow Box", addLinkFollowBox],
+            [React.createRef<HTMLDivElement>(), "link", "Open Link Follow Box", addLinkFollowBox],
             [React.createRef<HTMLDivElement>(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode
             //[React.createRef<HTMLDivElement>(), "play", "Add Youtube Searcher", addYoutubeSearcher],
         ];
diff --git a/src/client/views/linking/LinkFollowBox.scss b/src/client/views/linking/LinkFollowBox.scss
index 522191792..aedbfdea4 100644
--- a/src/client/views/linking/LinkFollowBox.scss
+++ b/src/client/views/linking/LinkFollowBox.scss
@@ -2,5 +2,80 @@
 
 .linkFollowBox-main {
     position: absolute;
-    background: red;
+    background: whitesmoke;
+    color: grey;
+    border-radius: 15px;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    border: solid #BBBBBBBB 5px;
+    pointer-events: all;
+    // overflow: hidden;
+
+    .linkFollowBox-header {
+        height: 30px;
+        text-align: center;
+        text-transform: uppercase;
+        line-height: 30px;
+        letter-spacing: 2px;
+        font-size: 16px;
+    }
+
+    .linkFollowBox-footer {
+        height: 50px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        button {
+            background-color: $darker-alt-accent;
+            // height: 30px;
+            width: 30%;
+            // font-size: 18px;
+        }
+    }
+
+    .linkFollowBox-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-column-gap: 5px;
+        margin-left: 5px;
+        margin-right: 5px;
+
+        .linkFollowBox-item {
+            background-color: $light-color;
+            width: 100%;
+            height: 100%;
+
+            .linkFollowBox-itemContent {
+                padding: 5px;
+                font-size: 12px;
+                // line-height: 40px;
+                overflow: scroll;
+
+
+                input[type=radio] {
+                    border: 0px;
+                    // width: 100%;
+                    // height: 20px;
+                    // width: 20px;
+                    margin-right: 5px;
+                }
+            }
+
+            .title {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                text-transform: uppercase;
+                color: $light-color;
+                background-color: $lighter-alt-accent;
+                width: 100%;
+                height: 30px;
+                border-bottom: solid $darker-alt-accent 5px;
+                font-size: 12px;
+                text-align: center;
+            }
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx
index 247b67776..8cd26bdec 100644
--- a/src/client/views/linking/LinkFollowBox.tsx
+++ b/src/client/views/linking/LinkFollowBox.tsx
@@ -1,10 +1,10 @@
-import { observable, computed, action, trace } from "mobx";
+import { observable, computed, action, trace, ObservableMap } from "mobx";
 import React = require("react");
 import { observer } from "mobx-react";
 import { FieldViewProps, FieldView } from "../nodes/FieldView";
 import { Doc } from "../../../new_fields/Doc";
 import { undoBatch } from "../../util/UndoManager";
-import { NumCast, FieldValue, Cast } from "../../../new_fields/Types";
+import { NumCast, FieldValue, Cast, StrCast } from "../../../new_fields/Types";
 import { CollectionViewType } from "../collections/CollectionBaseView";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { SelectionManager } from "../../util/SelectionManager";
@@ -12,19 +12,41 @@ import { DocumentManager } from "../../util/DocumentManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./LinkFollowBox.scss";
 
-export type LinkParamOptions = {
-    container: Doc;
-    context: Doc;
-    sourceDoc: Doc;
-    shoudldZoom: boolean;
-    linkDoc: Doc;
-};
+enum FollowModes {
+    OPENTAB = "Open in Tab",
+    OPENRIGHT = "Open in Right Split",
+    OPENFULL = "Open Full Screen",
+    PAN = "Pan to Document",
+    INPLACE = "Open In Place"
+}
+
+enum FollowOptions {
+    ZOOM = "zoom",
+    NOZOOM = "no zoom",
+}
 
 @observer
 export class LinkFollowBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString(LinkFollowBox); }
     public static Instance: LinkFollowBox;
+    @observable static linkDoc: Doc | undefined = undefined;
+    @observable static destinationDoc: Doc | undefined = undefined;
+    @observable static sourceDoc: Doc | undefined = undefined;
+    @observable selectedMode: string = "";
+    @observable selectedOption: string = "";
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        LinkFollowBox.Instance = this;
+    }
+
+    @action
+    setLinkDocs = (linkDoc: Doc, source: Doc, dest: Doc) => {
+        LinkFollowBox.linkDoc = linkDoc;
+        LinkFollowBox.sourceDoc = source;
+        LinkFollowBox.destinationDoc = dest;
+    }
 
     unhighlight = () => {
         Doc.UnhighlightAll();
@@ -40,11 +62,11 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
         }, 10000);
     }
 
-    // DONE
     @undoBatch
     openFullScreen = (destinationDoc: Doc) => {
-        let view: DocumentView | null = DocumentManager.Instance.getDocumentView(destinationDoc)
+        let view: DocumentView | null = DocumentManager.Instance.getDocumentView(destinationDoc);
         view && CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(view);
+        SelectionManager.DeselectAll();
     }
 
     // should container be a doc or documentview or what? This one needs work and is more long term
@@ -54,8 +76,6 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
     }
 
     // NOT TESTED
-    // col = collection the doc is in
-    // target = the document to center on
     @undoBatch
     openLinkColRight = (destinationDoc: Doc, options: { context: Doc }) => {
         options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context;
@@ -66,26 +86,22 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
             options.context.panY = newPanY;
         }
         CollectionDockingView.Instance.AddRightSplit(options.context, undefined);
+
+        this.highlightDoc(destinationDoc);
+        SelectionManager.DeselectAll();
     }
 
-    // DONE
-    // this opens the linked doc in a right split, NOT in its collection
     @undoBatch
     openLinkRight = (destinationDoc: Doc) => {
-        this.highlightDoc(destinationDoc);
         let alias = Doc.MakeAlias(destinationDoc);
         CollectionDockingView.Instance.AddRightSplit(alias, undefined);
+        this.highlightDoc(destinationDoc);
         SelectionManager.DeselectAll();
+
     }
 
-    // DONE
-    // this is the standard "follow link" (jump to document)
-    // taken from follow link
     @undoBatch
     jumpToLink = async (destinationDoc: Doc, options: { shouldZoom: boolean, linkDoc: Doc }) => {
-        //there is an issue right now so this will be false automatically
-        options.shouldZoom = false;
-        this.highlightDoc(destinationDoc);
         let jumpToDoc = destinationDoc;
         let pdfDoc = FieldValue(Cast(destinationDoc, Doc));
         if (pdfDoc) {
@@ -110,26 +126,23 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
         else {
             DocumentManager.Instance.jumpToDocument(jumpToDoc, options.shouldZoom, false, dockingFunc);
         }
+
+        this.highlightDoc(destinationDoc);
+        SelectionManager.DeselectAll();
     }
 
-    // DONE
-    // opens link in new tab (not in a collection)
-    // this opens it full screen in new tab
     @undoBatch
     openLinkTab = (destinationDoc: Doc) => {
-        this.highlightDoc(destinationDoc);
         let fullScreenAlias = Doc.MakeAlias(destinationDoc);
         this.props.addDocTab(fullScreenAlias, undefined, "inTab");
+
+        this.highlightDoc(destinationDoc);
         SelectionManager.DeselectAll();
     }
 
     // NOT TESTED
-    // opens link in new tab in collection
-    // col = collection the doc is in
-    // target = the document to center on
     @undoBatch
     openLinkColTab = (destinationDoc: Doc, options: { context: Doc }) => {
-        this.highlightDoc(destinationDoc);
         options.context = Doc.IsPrototype(options.context) ? Doc.MakeDelegate(options.context) : options.context;
         if (NumCast(options.context.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
             const newPanX = NumCast(destinationDoc.x) + NumCast(destinationDoc.width) / NumCast(destinationDoc.zoomBasis, 1) / 2;
@@ -137,16 +150,14 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
             options.context.panX = newPanX;
             options.context.panY = newPanY;
         }
-        // CollectionDockingView.Instance.AddRightSplit(col, undefined);
         this.props.addDocTab(options.context, undefined, "inTab");
+
+        this.highlightDoc(destinationDoc);
         SelectionManager.DeselectAll();
     }
 
-    // DONE
-    // this will open a link next to the source doc
     @undoBatch
-    openLinkInPlace = (destinationDoc: Doc, options: { sourceDoc: Doc }) => {
-        this.highlightDoc(destinationDoc);
+    openLinkInPlace = (destinationDoc: Doc, options: { sourceDoc: Doc, linkDoc: Doc }) => {
 
         let alias = Doc.MakeAlias(destinationDoc);
         let y = NumCast(options.sourceDoc.y);
@@ -165,16 +176,146 @@ export class LinkFollowBox extends React.Component<FieldViewProps> {
                 dv.props.addDocument && dv.props.addDocument(alias, false);
             }
         });
+
+        this.jumpToLink(destinationDoc, { shouldZoom: false, linkDoc: options.linkDoc });
+
+        this.highlightDoc(destinationDoc);
+        SelectionManager.DeselectAll();
     }
 
     //set this to be the default link behavior, can be any of the above
     private defaultLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.openLinkInPlace;
-    private currentLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.defaultLinkBehavior;
+    // private currentLinkBehavior: (destinationDoc: Doc, options?: any) => void = this.defaultLinkBehavior;
+
+    @computed
+    get LinkFollowTitle(): string {
+        if (LinkFollowBox.linkDoc) {
+            return StrCast(LinkFollowBox.linkDoc.title);
+        }
+        return "No Link Selected";
+    }
+
+    @action
+    currentLinkBehavior = () => {
+        if (this.selectedMode === FollowModes.INPLACE) {
+
+        }
+        else if (this.selectedMode === FollowModes.OPENFULL) {
+
+        }
+        else if (this.selectedMode === FollowModes.OPENRIGHT) {
+
+        }
+        else if (this.selectedMode === FollowModes.OPENTAB) {
+
+        }
+        else if (this.selectedMode === FollowModes.INPLACE) {
+
+        }
+        else if (this.selectedMode === FollowModes.PAN) {
+
+        }
+        else return;
+    }
+
+    @action
+    handleModeChange = (e: React.ChangeEvent) => {
+        let target = e.target as HTMLInputElement;
+        this.selectedMode = target.value;
+    }
+
+    @action
+    handleOptionChange = (e: React.ChangeEvent) => {
+        let target = e.target as HTMLInputElement;
+        this.selectedOption = target.value;
+    }
+
+    @computed
+    get availableModes() {
+        return (
+            <div>
+                <label><input
+                    type="radio"
+                    name="mode"
+                    value={FollowModes.OPENRIGHT}
+                    checked={this.selectedMode === FollowModes.OPENRIGHT}
+                    onChange={this.handleModeChange} />
+                    {FollowModes.OPENRIGHT}
+                </label><br />
+                <label><input
+                    type="radio"
+                    name="mode"
+                    value={FollowModes.OPENTAB}
+                    checked={this.selectedMode === FollowModes.OPENTAB}
+                    onChange={this.handleModeChange} />
+                    {FollowModes.OPENTAB}
+                </label><br />
+                <label><input
+                    type="radio"
+                    name="mode"
+                    value={FollowModes.OPENFULL}
+                    checked={this.selectedMode === FollowModes.OPENFULL}
+                    onChange={this.handleModeChange} />
+                    {FollowModes.OPENFULL}
+                </label><br />
+                <label><input
+                    type="radio"
+                    name="mode"
+                    value={FollowModes.PAN}
+                    checked={this.selectedMode === FollowModes.PAN}
+                    onChange={this.handleModeChange} />
+                    {FollowModes.PAN}
+                </label><br />
+                <label><input
+                    type="radio"
+                    name="mode"
+                    value={FollowModes.INPLACE}
+                    checked={this.selectedMode === FollowModes.INPLACE}
+                    onChange={this.handleModeChange} />
+                    {FollowModes.INPLACE}
+                </label><br />
+            </div>
+        );
+    }
+
+    @computed
+    get contexts() {
+        return (
+            <div>
+
+            </div>
+        );
+    }
 
     render() {
         return (
             <div className="linkFollowBox-main" style={{ height: NumCast(this.props.Document.height), width: NumCast(this.props.Document.width) }}>
+                <div className="linkFollowBox-header">{this.LinkFollowTitle}</div>
+                <div className="linkFollowBox-content" style={{ height: NumCast(this.props.Document.height) - 90 }}>
+                    <div className="linkFollowBox-item">
+                        <div className="linkFollowBox-item title">Mode</div>
+                        <div className="linkFollowBox-itemContent">{this.availableModes}</div>
+                    </div>
+                    <div className="linkFollowBox-item">
+                        <div className="linkFollowBox-item title">Context</div>
+                        <div className="linkFollowBox-itemContent">
+
+                        </div>
+                    </div>
+                    <div className="linkFollowBox-item">
+                        <div className="linkFollowBox-item title">Options</div>
+                        <div className="linkFollowBox-itemContent">
 
+                        </div>
+                    </div>
+                </div>
+                <div className="linkFollowBox-footer">
+                    <button
+                        onClick={this.currentLinkBehavior}
+                        disabled={(LinkFollowBox.linkDoc) ? false : true}>
+                        Follow Link
+                    </button>
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 60f27c664..406429ebf 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -16,6 +16,7 @@ import { SelectionManager } from '../../util/SelectionManager';
 import { CollectionViewType } from '../collections/CollectionBaseView';
 import { DocumentView } from '../nodes/DocumentView';
 import { SearchUtil } from '../../util/SearchUtil';
+import { LinkFollowBox } from './LinkFollowBox';
 library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp);
 
 
@@ -174,7 +175,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     }
 
     //set this to be the default link behavior, can be any of the above
-    private defaultLinkBehavior: any = this.openLinkTab;
+    // private defaultLinkBehavior: any = LinkFollowBox.computeLinkDocs(this.props.linkDoc);
 
     onEdit = (e: React.PointerEvent): void => {
         e.stopPropagation();
@@ -242,7 +243,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                             {/* Original */}
                             {/* <div title="Follow link" className="button" onPointerDown={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div> */}
                             {/* New */}
-                            <div title="Follow link" className="button" onPointerDown={this.defaultLinkBehavior}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
+                            <div title="Follow link" className="button" onClick={() => LinkFollowBox.Instance.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc)}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
                         </div>
                     </div>
                     {this._showMore ? this.renderMetadata() : <></>}