Merge branch 'master' into sharing-jenny (break)

1 files changed, 64 insertions, 16 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6850fb23a..cc006c734 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -34,6 +34,7 @@ const _global = (window /* browser */ || global) /* node */ as any;
 
 export type collectionStackingViewProps = {
     chromeHidden?: boolean;
+    // view type is stacking
     viewType?: CollectionViewType;
     NativeWidth?: () => number;
     NativeHeight?: () => number;
@@ -42,50 +43,69 @@ export type collectionStackingViewProps = {
 @observer
 export class CollectionStackingView extends CollectionSubView<Partial<collectionStackingViewProps>>() {
     _masonryGridRef: HTMLDivElement | null = null;
+    // used in a column dragger, likely due for the masonry grid view. We want to use this
     _draggerRef = React.createRef<HTMLDivElement>();
+    // Not sure what a pivot field is. Seems like we cause reaction in MobX get rid of it once we exit this view
     _pivotFieldDisposer?: IReactionDisposer;
+    // Seems like we cause reaction in MobX get rid of our height once we exit this view
     _autoHeightDisposer?: IReactionDisposer;
+    // keeping track of documents. Updated on internal and external drops. What's the difference?
     _docXfs: { height: () => number; width: () => number; stackedDocTransform: () => Transform }[] = [];
+    // Doesn't look like this field is being used anywhere. Obsolete?
     _columnStart: number = 0;
+    // map of node headers to their heights. Used in Masonry
     @observable _heightMap = new Map<string, number>();
+    // Assuming that this is the current css cursor style
     @observable _cursor: CursorProperty = 'grab';
+    // gets reset whenever we scroll. Not sure what it is
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
+    // does this mean whether the browser is hidden? Or is chrome something else entirely?
     @computed get chromeHidden() {
         return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
+    // it looks like this gets the column headers that Mehek was showing just now
     @computed get columnHeaders() {
         return Cast(this.layoutDoc._columnHeaders, listSpec(SchemaHeaderField), null);
     }
+    // Still not sure what a pivot is, but it appears that we can actually filter docs somehow?
     @computed get pivotField() {
         return StrCast(this.layoutDoc._pivotField);
     }
+    // filteredChildren is what you want to work with. It's the list of things that you're currently displaying
     @computed get filteredChildren() {
         return this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout);
     }
+    // how much margin we give the header
     @computed get headerMargin() {
         return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin);
     }
     @computed get xMargin() {
-        return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth()));
+        return NumCast(this.layoutDoc._xMargin, Math.min(3, 0.05 * this.props.PanelWidth()));
     }
     @computed get yMargin() {
-        return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5);
-    } // 2 * this.gridGap)); }
+        return this.props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this.props.PanelWidth()));
+    }
+
     @computed get gridGap() {
-        return NumCast(this.layoutDoc._gridGap, 10);
+        return NumCast(this.layoutDoc._gridGap, 5);
     }
+    // are we stacking or masonry?
     @computed get isStackingView() {
         return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking;
     }
+    // this is the number of StackingViewFieldColumns that we have
     @computed get numGroupColumns() {
         return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1;
     }
+    // reveals a button to add a group in masonry view
     @computed get showAddAGroup() {
         return this.pivotField && !this.chromeHidden;
     }
+    // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
         return Math.min(this.props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
     }
+
     @computed get NodeWidth() {
         return this.props.PanelWidth() - this.gridGap;
     }
@@ -94,18 +114,26 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         super(props);
 
         if (this.columnHeaders === undefined) {
+            // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out?
+            // here we're making an empty list of column headers (again, what Mehek showed us)
             this.layoutDoc._columnHeaders = new List<SchemaHeaderField>();
         }
     }
 
+    // TODO: plj - these are the children
     children = (docs: Doc[]) => {
+        //TODO: can somebody explain me to what exactly TraceMobX is?
         TraceMobx();
+        // appears that we are going to reset the _docXfs. TODO: what is Xfs?
         this._docXfs.length = 0;
         return docs.map((d, i) => {
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
+            // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
+            // just getting the style
             const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            // So we're choosing whether we're going to render a column or a masonry doc
             return (
                 <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
                     {this.getDisplayDoc(d, width)}
@@ -118,7 +146,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         this._heightMap.set(key, sectionHeight);
     };
 
+    // is sections that all collections inherit? I think this is how we show the masonry/columns
+    //TODO: this seems important
     get Sections() {
+        // appears that pivot field IS actually for sorting
         if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
 
         if (this.columnHeaders === undefined) {
@@ -146,6 +177,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             }
         });
         // remove all empty columns if hideHeadings is set
+        // we will want to have something like this, so that we can hide columns and add them back in
         if (this.layoutDoc._columnsHideIfEmpty) {
             Array.from(fields.keys())
                 .filter(key => !fields.get(key)!.length)
@@ -218,6 +250,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         smoothScroll(500, this._mainCont!, this._mainCont!.scrollHeight);
     };
 
+    // let's dive in and get the actual document we want to drag/move around
     focusDocument = (doc: Doc, options?: DocFocusOptions) => {
         Doc.BrushDoc(doc);
 
@@ -227,7 +260,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             const top = found.getBoundingClientRect().top;
             const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
             if (Math.floor(localTop[1]) !== 0) {
-                smoothScroll((focusSpeed = doc.presTransition || doc.presTransition === 0 ? NumCast(doc.presTransition) : 500), this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
+                smoothScroll((focusSpeed = NumCast(doc.focusSpeed, 500)), this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
             }
         }
         const endFocus = async (moved: boolean) => options?.afterFocus?.(moved) ?? ViewAdjustment.doNothing;
@@ -268,8 +301,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             return this.addDocument?.(newDoc);
         }
     };
-    isContentActive = () => this.props.isSelected() || this.props.isContentActive();
-    isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : undefined);
+    isContentActive = () => (this.props.isSelected() || this.props.isContentActive() ? true : this.props.isSelected() === false || this.props.isContentActive() === false ? false : undefined);
+
+    isChildContentActive = () =>
+        this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined;
+    // this is what renders the document that you see on the screen
+    // called in Children: this actually adds a document to our children list
     getDisplayDoc(doc: Doc, width: () => number) {
         const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc;
         const height = () => this.getDocHeight(doc);
@@ -277,6 +314,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         let dref: Opt<DocumentView>;
         const stackedDocTransform = () => this.getDocTransform(doc, dref);
         this._docXfs.push({ stackedDocTransform, width, height });
+        //DocumentView is how the node will be rendered
         return (
             <DocumentView
                 ref={r => (dref = r || undefined)}
@@ -296,7 +334,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 NativeWidth={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.(doc) || (doc._fitWidth && !Doc.NativeWidth(doc)) ? width : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
                 NativeHeight={this.props.childIgnoreNativeSize ? returnZero : this.props.childFitWidth?.(doc) || (doc._fitWidth && !Doc.NativeHeight(doc)) ? height : undefined}
                 dontCenter={this.props.childIgnoreNativeSize ? 'xy' : undefined}
-                dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)}
+                dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this.props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't autoHeight resize if dontRegisterView is set, but they need to.
                 rootSelected={this.rootSelected}
                 showTitle={this.props.childShowTitle}
                 dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
@@ -357,6 +395,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return Math.min(childHeight, maxHeight, panelHeight);
     }
 
+    // This following three functions must be from the view Mehek showed
     columnDividerDown = (e: React.PointerEvent) => {
         runInAction(() => (this._cursor = 'grabbing'));
         setupMoveUpEvents(
@@ -384,10 +423,13 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        // Fairly confident that this is where the swapping of nodes in the various arrays happens
         const where = [de.x, de.y];
+        // start at -1 until we're sure we want to add it to the column
         let dropInd = -1;
         let dropAfter = 0;
         if (de.complete.docDragData) {
+            // going to re-add the docs to the _docXFs based on position of where we just dropped
             this._docXfs.map((cd, i) => {
                 const pos = cd
                     .stackedDocTransform()
@@ -402,11 +444,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             });
             const oldDocs = this.childDocs.length;
             if (super.onInternalDrop(e, de)) {
+                // check to see if we actually need anything to the new column of nodes (if droppedDocs != empty)
                 const droppedDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs); // if the drop operation adds something to the end of the list, then use that as the new document (may be different than what was dropped e.g., in the case of a button which is dropped but which creates say, a note).
                 const newDocs = droppedDocs.length ? droppedDocs : de.complete.docDragData.droppedDocuments; // if nothing was added to the end of the list, then presumably the dropped documents were already in the list, but possibly got reordered so we use them.
 
                 const docs = this.childDocList;
-                DragManager.docsBeingDragged = [];
+                // still figuring out where to add the document
                 if (docs && newDocs.length) {
                     const insertInd = dropInd === -1 ? docs.length : dropInd + dropAfter;
                     const offset = newDocs.reduce((off, ndoc) => (this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off), 0);
@@ -433,6 +476,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return true;
     }
 
+    /// an item from outside of Dash is being dropped onto this stacking view (e.g, a document from the file system)
     @undoBatch
     @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
@@ -448,19 +492,20 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 targInd = i;
             }
         });
-        super.onExternalDrop(e, {}, () => {
-            if (targInd !== -1) {
-                const newDoc = this.childDocs[this.childDocs.length - 1];
-                const docs = this.childDocList;
-                if (docs) {
-                    docs.splice(docs.length - 1, 1);
-                    docs.splice(targInd, 0, newDoc);
+        super.onExternalDrop(e, {}, (docs: Doc[]) => {
+            if (targInd === -1) {
+                this.addDocument(docs);
+            } else {
+                const childDocs = this.childDocList;
+                if (childDocs) {
+                    childDocs.splice(targInd, 0, ...docs);
                 }
             }
         });
     };
     headings = () => Array.from(this.Sections);
     refList: any[] = [];
+    // what a section looks like if we're in stacking view
     sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
         const key = this.pivotField;
         let type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined = undefined;
@@ -512,6 +557,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         );
     };
 
+    // what a section looks like if we're in masonry. Shouldn't actually need to use this.
     sectionMasonry = (heading: SchemaHeaderField | undefined, docList: Doc[], first: boolean) => {
         const key = this.pivotField;
         let type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined = undefined;
@@ -556,6 +602,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         );
     };
 
+    /// add a new group category (column) to the active set of note categories.  (e.g., if the pivot field is 'transportation', groups might be 'car', 'plane', 'bike', etc)
     @action
     addGroup = (value: string) => {
         if (value && this.columnHeaders) {
@@ -584,6 +631,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
     };
 
+    //
     @computed get renderedSections() {
         TraceMobx();
         let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]];