Merge branch 'master' into data-visualization-sarah

1 files changed, 65 insertions, 34 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2e1ba2a7e..73c13b5dd 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -20,13 +20,14 @@ import { DocServer } from '../../DocServer';
 import { Networking } from '../../Network';
 import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
-import { DocOptions, DocUtils, Docs, FInfo } from '../../documents/Documents';
+import { DocOptions, DocUtils, Docs } from '../../documents/Documents';
 import { DictationManager } from '../../util/DictationManager';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../util/DragManager';
 import { FollowLinkScript } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
+import { SearchUtil } from '../../util/SearchUtil';
 import { SelectionManager } from '../../util/SelectionManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
@@ -103,9 +104,11 @@ export interface DocumentViewProps extends FieldViewSharedProps {
     dontHideOnDrag?: boolean;
     suppressSetHeight?: boolean;
     onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected
+    DataTransition?: () => string | undefined;
     NativeWidth?: () => number;
     NativeHeight?: () => number;
     contextMenuItems?: () => { script: ScriptField; filter?: ScriptField; label: string; icon: string }[];
+    dragConfig?: (data: DragManager.DocumentDragData) => void;
     dragStarting?: () => void;
     dragEnding?: () => void;
 }
@@ -114,7 +117,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     // this makes mobx trace() statements more descriptive
     public get displayName()  { return 'DocumentViewInternal(' + this.Document.title + ')'; } // prettier-ignore
     public static SelectAfterContextMenu = true; //  whether a document should be selected after it's contextmenu is triggered.
-
     /**
      * This function is filled in by MainView to allow non-viewBox views to add Docs as tabs without
      * needing to know about/reference MainView
@@ -288,7 +290,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             dragData.moveDocument = this._props.moveDocument;
             dragData.draggedViews = [docView];
             dragData.canEmbed = this.Document.dragAction ?? this._props.dragAction ? true : false;
-            this._componentView?.dragConfig?.(dragData);
+            (this._props.dragConfig ?? this._componentView?.dragConfig)?.(dragData);
             DragManager.StartDocumentDrag(
                 selected.map(dv => dv.ContentDiv!),
                 dragData,
@@ -359,7 +361,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 this._singleClickFunc =
                     // prettier-ignore
                     clickFunc ?? (() => (sendToBack ? documentView._props.bringToFront?.(this.Document, true) : 
-                                                      this._componentView?.select?.(e.ctrlKey || e.metaKey, e.shiftKey) ?? 
                                         this._props.select(e.ctrlKey||e.shiftKey, e.metaKey)));
                 const waitFordblclick = this._props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick;
                 if ((clickFunc && waitFordblclick !== 'never') || waitFordblclick === 'always') {
@@ -456,11 +457,11 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
     deleteClicked = undoable(() => this._props.removeDocument?.(this.Document), 'delete doc');
     setToggleDetail = undoable(
-        () =>
-            (this.Document.onClick = ScriptField.MakeScript(
+        (defaultLayout: string, scriptFieldKey: 'onClick') =>
+            (this.Document[scriptFieldKey] = ScriptField.MakeScript(
                 `toggleDetail(documentView, "${StrCast(this.Document.layout_fieldKey)
                     .replace('layout_', '')
-                    .replace(/^layout$/, 'detail')}")`,
+                    .replace(/^layout$/, 'detail')}", "${defaultLayout}")`,
                 { documentView: 'any' }
             )),
         'set toggle detail'
@@ -488,7 +489,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     if (linkDoc) {
                         de.complete.linkDocument = linkDoc;
                         linkDoc.layout_isSvg = true;
-                        this._docView?.CollectionFreeFormView?.addDocument(linkDoc);
+                        DocumentManager.LinkCommonAncestor(linkDoc)?.ComponentView?.addDocument?.(linkDoc);
                     }
                 }
                 e.stopPropagation();
@@ -725,7 +726,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     };
 
     removeLinkByHiding = (link: Doc) => () => (link.link_displayLine = false);
-    allLinkEndpoints = () => {
+    @computed get allLinkEndpoints() {
         // the small blue dots that mark the endpoints of links
         if (this._componentView instanceof KeyValueBox || this._props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this._props.dontRegisterView || this.layoutDoc.layout_unrendered) return null;
         return this.filteredLinks.map(link => (
@@ -749,9 +750,9 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 />
             </div>
         ));
-    };
+    }
 
-    viewBoxContents = () => {
+    @computed get viewBoxContents() {
         TraceMobx();
         const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
         const noBackground = this.Document.isGroup && !this._props.LayoutTemplateString?.includes(KeyValueBox.name) && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
@@ -777,10 +778,10 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     setTitleFocus={this.setTitleFocus}
                     hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)}
                 />
-                {this.layoutDoc.layout_hideAllLinks ? null : this.allLinkEndpoints()}
+                {this.layoutDoc.layout_hideAllLinks ? null : this.allLinkEndpoints}
             </div>
         );
-    };
+    }
 
     captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption');
     fieldsDropdown = (reqdFields: string[], dropdownWidth: number, placeholder: string, onChange: (val: string | number) => void, onClose: () => void) => {
@@ -813,7 +814,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
      * setting layout_showTitle using the format:   field1[;field2[...][:hover]]
      * from the UI, this is done by clicking the title field and prefixin the format with '#'.  eg.,  #field1[;field2;...][:hover]
      **/
-    titleView = () => {
+    @computed get titleView() {
         const showTitle = this.layout_showTitle?.split(':')[0];
         const showTitleHover = this.layout_showTitle?.includes(':hover');
 
@@ -887,9 +888,9 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 </div>
             </div>
         );
-    };
+    }
 
-    captionView = () => {
+    @computed get captionView() {
         return !this.layout_showCaption ? null : (
             <div
                 className="documentView-captionWrapper"
@@ -912,7 +913,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 />
             </div>
         );
-    };
+    }
 
     renderDoc = (style: object) => {
         TraceMobx();
@@ -932,15 +933,15 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                           fontFamily: StrCast(this.Document._text_fontFamily, 'inherit'),
                           fontSize: Cast(this.Document._text_fontSize, 'string', null),
                           transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined,
-                          transition: !this._animateScalingTo ? StrCast(this.Document.dataTransition) : `transform ${this.animateScaleTime() / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`,
+                          transition: !this._animateScalingTo ? this._props.DataTransition?.() : `transform ${this.animateScaleTime() / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`,
                       }}>
                       {this._props.hideTitle || (!showTitle && !this.layout_showCaption) ? (
-                          this.viewBoxContents()
+                          this.viewBoxContents
                       ) : (
                           <div className="documentView-styleWrapper">
-                              {this.titleView()}
-                              {this.viewBoxContents()}
-                              {this.captionView()}
+                              {this.titleView}
+                              {this.viewBoxContents}
+                              {this.captionView}
                           </div>
                       )}
                       {this.widgetDecorations ?? null}
@@ -1074,6 +1075,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _viewTimer: NodeJS.Timeout | undefined;
     private _animEffectTimer: NodeJS.Timeout | undefined;
+    public Guid = Utils.GenerateGuid(); // a unique id associated with the main <div>. used by LinkBox's Xanchor to find the arrowhead locations.
 
     @computed public static get exploreMode() {
         return () => (SnappingManager.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined);
@@ -1150,6 +1152,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     }
 
     componentWillUnmount() {
+        this._viewTimer && clearTimeout(this._viewTimer);
         runInAction(() => this.Document[DocViews].delete(this));
         Object.values(this._disposers).forEach(disposer => disposer?.());
         !BoolCast(this.Document.dontRegisterView, this._props.dontRegisterView) && DocumentManager.Instance.RemoveView(this);
@@ -1173,21 +1176,23 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document['link_anchor_2']) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document['link_anchor_1']) : undefined;
     }
 
-    @computed get getBounds() {
-        if (!this._docViewInternal?._contentDiv || Doc.AreProtosEqual(this.Document, Doc.UserDoc())) {
+    @computed get getBounds(): Opt<{ left: number; top: number; right: number; bottom: number; transition?: string }> {
+        if (!this.ContentDiv || Doc.AreProtosEqual(this.Document, Doc.UserDoc())) {
             return undefined;
         }
-        if (this._docViewInternal._componentView?.screenBounds?.()) {
-            return this._docViewInternal._componentView.screenBounds();
+        if (this.ComponentView?.screenBounds?.()) {
+            return this.ComponentView.screenBounds();
         }
         const xf = this.screenToContentsTransform().scale(this.nativeScaling).inverse();
         const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)];
 
         if (this._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
-            const docuBox = this._docViewInternal._contentDiv.getElementsByClassName('linkAnchorBox-cont');
-            if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), center: undefined };
+            const docuBox = this.ContentDiv.getElementsByClassName('linkAnchorBox-cont');
+            if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), transition: undefined };
         }
-        return { left, top, right, bottom };
+        // transition is returned so that the bounds will 'update' at the end of an animated transition.  This is needed by xAnchor in LinkBox
+        const transition = this.docViewPath().find((parent: DocumentView) => parent.DataTransition?.() || parent.ComponentView?.viewTransition?.());
+        return { left, top, right, bottom, transition: transition?.DataTransition?.() || transition?.ComponentView?.viewTransition?.() };
     }
 
     @computed get nativeWidth() {
@@ -1212,7 +1217,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     };
     public noOnClick = () => this._docViewInternal?.noOnClick();
     public toggleFollowLink = (zoom?: boolean, setTargetToggle?: boolean): void => this._docViewInternal?.toggleFollowLink(zoom, setTargetToggle);
-    public setToggleDetail = () => this._docViewInternal?.setToggleDetail();
+    public setToggleDetail = (defaultLayout = '', scriptFieldKey = 'onClick') => this._docViewInternal?.setToggleDetail(defaultLayout, scriptFieldKey);
     public onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => this._docViewInternal?.onContextMenu?.(e, pageX, pageY);
     public cleanupPointerEvents = () => this._docViewInternal?.cleanupPointerEvents();
     public startDragging = (x: number, y: number, dropAction: dropActionType, hideSource = false) => this._docViewInternal?.startDragging(x, y, dropAction, hideSource);
@@ -1332,6 +1337,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
             }
         }
     };
+    DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition);
     ShouldNotScale = () => this.shouldNotScale;
     NativeWidth = () => this.effectiveNativeWidth;
     NativeHeight = () => this.effectiveNativeHeight;
@@ -1384,7 +1390,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined;
 
         return (
-            <div className="contentFittingDocumentView" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))}>
+            <div id={this.Guid} className="contentFittingDocumentView" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))}>
                 {!this.Document || !this._props.PanelWidth() ? null : (
                     <div
                         className="contentFittingDocumentView-previewDoc"
@@ -1397,6 +1403,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                         <DocumentViewInternal
                             {...this._props}
                             fieldKey={this.LayoutFieldKey}
+                            DataTransition={this.DataTransition}
                             DocumentView={this.selfView}
                             docViewPath={this.docViewPath}
                             PanelWidth={this.PanelWidth}
@@ -1460,13 +1467,13 @@ ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView
     LightboxView.Instance.AddDocTab(documentView.Document, OpenWhere.lightbox, 'layout'); //, 0);
 });
 
-ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string) {
-    if (dv.Document.layout_fieldKey === 'layout_' + detailLayoutKeySuffix) dv.switchViews(false, 'layout');
+ScriptingGlobals.add(function toggleDetail(dv: DocumentView, detailLayoutKeySuffix: string, defaultLayout = '') {
+    if (dv.Document.layout_fieldKey === 'layout_' + detailLayoutKeySuffix) dv.switchViews(defaultLayout ? true : false, defaultLayout, undefined, true);
     else dv.switchViews(true, detailLayoutKeySuffix, undefined, true);
 });
 
 ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSource: Doc) {
-    const collectedLinks = DocListCast(Doc.GetProto(linkCollection).data);
+    const collectedLinks = DocListCast(linkCollection[DocData].data);
     let wid = NumCast(linkSource._width);
     let embedding: Doc | undefined;
     const links = LinkManager.Links(linkSource);
@@ -1485,3 +1492,27 @@ ScriptingGlobals.add(function updateLinkCollection(linkCollection: Doc, linkSour
     embedding && DocServer.UPDATE_SERVER_CACHE(); // if a new embedding was made, update the client's server cache so that it will not come back as a promise
     return links;
 });
+ScriptingGlobals.add(function updateTagsCollection(collection: Doc) {
+    const tag = StrCast(collection.title).split('-->')[1];
+    const matchedTags = Array.from(SearchUtil.SearchCollection(Doc.MyFilesystem, tag, false, ['tags']).keys());
+    const collectionDocs = DocListCast(collection[DocData].data).concat(collection);
+    let wid = 100;
+    let created = false;
+    const matchedDocs = matchedTags
+        .filter(tagDoc => !Doc.AreProtosEqual(collection, tagDoc))
+        .map(tagDoc => {
+            let embedding = collectionDocs.find(doc => Doc.AreProtosEqual(tagDoc, doc));
+            if (!embedding) {
+                embedding = Doc.MakeEmbedding(tagDoc);
+                embedding.x = wid;
+                embedding.y = 0;
+                embedding._lockedPosition = false;
+                wid += NumCast(tagDoc._width);
+                created = true;
+            }
+            return embedding;
+        });
+
+    created && (collection[DocData].data = new List<Doc>(matchedDocs));
+    return true;
+});