Merge branch 'master' into info-ui-observable

5 files changed, 57 insertions, 45 deletions

diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index b7376e901..12b83414c 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -61,7 +61,7 @@ export class LinkMenu extends ObservableReactComponent<Props> {
     render() {
         const sourceDoc = this.props.docView.Document;
         const sourceAnchor = this.props.docView.anchorViewDoc ?? sourceDoc;
-        const style = this.props.style ?? (dv => ({ left: dv?.left || 0, top: this.props.docView.topMost ? undefined : (dv?.bottom || 0) + 15, bottom: this.props.docView.topMost ? 20 : undefined, maxWidth: 200 }))(this.props.docView.getBounds());
+        const style = this.props.style ?? (dv => ({ left: dv?.left || 0, top: this.props.docView.topMost ? undefined : (dv?.bottom || 0) + 15, bottom: this.props.docView.topMost ? 20 : undefined, maxWidth: 200 }))(this.props.docView.getBounds);
 
         return (
             <div className="linkMenu" ref={this._linkMenuRef} style={{ ...style, background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 91142b90b..028d3da53 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -47,18 +47,18 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
             const sourceDoc =
                 this.props.docView.anchorViewDoc ??
                 (this.props.docView.Document.type === DocumentType.LINK //
-                    ? this.props.docView.props.LayoutTemplateString?.includes('link_anchor_1')
+                    ? this.props.docView._props.LayoutTemplateString?.includes('link_anchor_1')
                         ? DocCast(linkDoc.link_anchor_1)
                         : DocCast(linkDoc.link_anchor_2)
                     : this.props.sourceDoc);
             const destDoc = !sourceDoc
                 ? undefined
                 : this.props.docView.Document.type === DocumentType.LINK
-                ? this.props.docView.props.LayoutTemplateString?.includes('link_anchor_1')
-                    ? DocCast(linkDoc.link_anchor_2)
-                    : DocCast(linkDoc.link_anchor_1)
-                : LinkManager.getOppositeAnchor(linkDoc, sourceDoc) ||
-                  LinkManager.getOppositeAnchor(linkDoc, Cast(linkDoc.link_anchor_2, Doc, null).annotationOn === sourceDoc ? Cast(linkDoc.link_anchor_2, Doc, null) : Cast(linkDoc.link_anchor_1, Doc, null));
+                  ? this.props.docView._props.LayoutTemplateString?.includes('link_anchor_1')
+                      ? DocCast(linkDoc.link_anchor_2)
+                      : DocCast(linkDoc.link_anchor_1)
+                  : LinkManager.getOppositeAnchor(linkDoc, sourceDoc) ||
+                    LinkManager.getOppositeAnchor(linkDoc, Cast(linkDoc.link_anchor_2, Doc, null).annotationOn === sourceDoc ? Cast(linkDoc.link_anchor_2, Doc, null) : Cast(linkDoc.link_anchor_1, Doc, null));
             return !destDoc || !sourceDoc ? null : (
                 <LinkMenuItem
                     key={linkDoc[Id]}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 44c74236f..66ddd6eca 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -18,6 +18,21 @@
         align-items: center;
         display: flex;
 
+        .linkMenu-icon-wrapper {
+            //border: 0.5px solid rgb(161, 161, 161);
+            margin-right: 2px;
+            padding-right: 2px;
+
+            .linkMenu-icon {
+                float: left;
+                width: 12px;
+                height: 12px;
+                padding: 1px;
+                margin-right: 3px;
+                // color: rgb(161, 161, 161);
+            }
+        }
+
         .linkMenu-text {
             width: 100%;
 
@@ -34,22 +49,6 @@
                 display: flex;
                 align-items: center;
                 min-height: 20px;
-
-                .destination-icon-wrapper {
-                    //border: 0.5px solid rgb(161, 161, 161);
-                    margin-right: 2px;
-                    padding-right: 2px;
-
-                    .destination-icon {
-                        float: left;
-                        width: 12px;
-                        height: 12px;
-                        padding: 1px;
-                        margin-right: 3px;
-                        // color: rgb(161, 161, 161);
-                    }
-                }
-
                 .linkMenu-destination-title {
                     text-decoration: none;
                     font-size: 13px;
@@ -111,7 +110,6 @@
     //@extend: right;
     position: relative;
     display: flex;
-    opacity: 0;
 
     .linkMenu-deleteButton {
         width: 20px;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 85e97f95f..81dd0eb98 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -9,7 +9,8 @@ import { Doc } from '../../../fields/Doc';
 import { Cast, DocCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
 import { DocumentType } from '../../documents/DocumentTypes';
-import { DragManager } from '../../util/DragManager';
+import { DocumentManager } from '../../util/DocumentManager';
+import { DragManager, dropActionType } from '../../util/DragManager';
 import { LinkFollower } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -44,7 +45,7 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume
 
         const dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs);
         dragData.canEmbed = true;
-        dragData.dropAction = 'embed';
+        dragData.dropAction = dropActionType.embed;
 
         DragManager.StartDocumentDrag([dragEle], dragData, downX, downY, undefined);
     }
@@ -74,12 +75,21 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
         return this._props.sourceDoc;
     }
 
+    onIconDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, returnFalse, () => {
+            const ancestor = DocumentManager.LinkCommonAncestor(this._props.linkDoc);
+            if (!ancestor?.ComponentView?.removeDocument?.(this._props.linkDoc)) {
+                ancestor?.ComponentView?.addDocument?.(this._props.linkDoc);
+            }
+        });
+    };
+
     onEdit = (e: React.PointerEvent) => {
         setupMoveUpEvents(
             this,
             e,
             e => {
-                const dragData = new DragManager.DocumentDragData([this._props.linkDoc], 'embed');
+                const dragData = new DragManager.DocumentDragData([this._props.linkDoc], dropActionType.embed);
                 dragData.dropPropertiesToRemove = ['hidden'];
                 DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
                 return true;
@@ -92,8 +102,8 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                     DocumentViewInternal.addDocTabFunc(trail, OpenWhere.replaceRight);
                 } else {
                     SelectionManager.SelectView(this._props.docView, false);
-                    LinkManager.currentLink = this._props.linkDoc === LinkManager.currentLink ? undefined : this._props.linkDoc;
-                    LinkManager.currentLinkAnchor = LinkManager.currentLink ? this.sourceAnchor : undefined;
+                    LinkManager.Instance.currentLink = this._props.linkDoc === LinkManager.Instance.currentLink ? undefined : this._props.linkDoc;
+                    LinkManager.Instance.currentLinkAnchor = LinkManager.Instance.currentLink ? this.sourceAnchor : undefined;
 
                     if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) {
                         setTimeout(action(() => (SettingsManager.Instance.propertiesWidth = 250)));
@@ -136,6 +146,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
 
     deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this._props.linkDoc))));
     @observable _hover = false;
+    docView = () => this._props.docView;
     render() {
         const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp;
 
@@ -158,7 +169,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                 style={{
                     fontSize: this._hover ? 'larger' : undefined,
                     fontWeight: this._hover ? 'bold' : undefined,
-                    background: LinkManager.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
+                    background: LinkManager.Instance.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
                 }}>
                 <div className="linkMenu-item-content expand-two">
                     <div
@@ -166,9 +177,14 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                         className="linkMenu-name" //title="drag to view target. click to customize."
                         onPointerDown={this.onLinkButtonDown}>
                         <div className="linkMenu-item-buttons">
-                            <Tooltip title={<div className="dash-tooltip">Edit Link</div>}>
-                                <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
+                            <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Edit Link</div>}>
+                                <div className="linkMenu-icon-wrapper" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="linkMenu-icon" icon="edit" size="sm" />
+                                </div>
+                            </Tooltip>
+                            <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Show/Hide Link</div>}>
+                                <div title="click to show link" className="linkMenu-icon-wrapper" onPointerDown={this.onIconDown}>
+                                    <FontAwesomeIcon className="linkMenu-icon" icon={destinationIcon} size="sm" />
                                 </div>
                             </Tooltip>
                         </div>
@@ -179,7 +195,8 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                                 this._props.linkDoc &&
                                 this._props.clearLinkEditor &&
                                 LinkInfo.SetLinkInfo({
-                                    docProps: this._props.docView._props,
+                                    DocumentView: this.docView,
+                                    styleProvider: this._props.docView._props.styleProvider,
                                     linkSrc: this._props.sourceDoc,
                                     linkDoc: this._props.linkDoc,
                                     showHeader: false,
@@ -194,18 +211,17 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                                 </p>
                             ) : null}
                             <div className="linkMenu-title-wrapper">
-                                <div className="destination-icon-wrapper">
-                                    <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" />
-                                </div>
-                                <p className="linkMenu-destination-title">
-                                    {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
-                                </p>
+                                <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Follow Link</div>}>
+                                    <p className="linkMenu-destination-title">
+                                        {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
+                                    </p>
+                                </Tooltip>
                             </div>
                             {!this._props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this._props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>}
                         </div>
 
                         <div className="linkMenu-item-buttons">
-                            <Tooltip title={<div className="dash-tooltip">Delete Link</div>}>
+                            <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Delete Link</div>}>
                                 <div className="linkMenu-deleteButton" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
                                     <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
                                 </div>
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 7e344dd7a..c9e3c203d 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -7,7 +7,7 @@ import { Doc } from '../../../fields/Doc';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
 import { DefaultStyleProvider } from '../StyleProvider';
-import { OpenWhere } from '../nodes/DocumentView';
+import { OpenWhere, returnEmptyDocViewList } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { SearchBox } from '../search/SearchBox';
 import './LinkPopup.scss';
@@ -61,6 +61,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
 
                     <SearchBox
                         Document={Doc.MySearcher}
+                        docViewPath={returnEmptyDocViewList}
                         linkFrom={linkDoc}
                         linkCreateAnchor={this.props.linkCreateAnchor}
                         linkSearch={true}
@@ -69,7 +70,6 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                         isSelected={returnTrue}
                         isContentActive={returnTrue}
                         select={returnTrue}
-                        setHeight={returnFalse}
                         addDocument={undefined}
                         addDocTab={returnTrue}
                         pinToPres={emptyFunction}
@@ -81,9 +81,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                         PanelHeight={this.getPHeight}
                         renderDepth={0}
                         focus={emptyFunction}
-                        docViewPath={returnEmptyDoclist}
                         whenChildContentsActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
                         childFilters={returnEmptyFilter}
                         childFiltersByRanges={returnEmptyFilter}
                         searchFilterDocs={returnEmptyDoclist}