attempting to add note-taking

I think this has something to do with the view not being rendered in novice mode. Assuming this is an issue in CollectionMenu.tsx.

Essentially what I did was add a note-taking view wherever I found a stacking view (via global search)

1 files changed, 91 insertions, 11 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 419b9a943..9d83e13de 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CursorProperty } from "csstype";
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { DataSym, Doc, HeightSym, Opt, WidthSym, DocListCast } from "../../../fields/Doc";
+import { DataSym, Doc, HeightSym, Opt, WidthSym, DocListCast, AclSym, FieldsSym, Initializing, LayoutSym, DirectLinksSym } from "../../../fields/Doc";
 import { collectionSchema, documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
@@ -31,6 +31,7 @@ import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
 import { FontIconBox } from "../nodes/button/FontIconBox";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import internal = require("events");
 const _global = (window /* browser */ || global /* node */) as any;
 
 type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>;
@@ -38,6 +39,7 @@ const StackingDocument = makeInterface(collectionSchema, documentSchema);
 
 export type collectionStackingViewProps = {
     chromeHidden?: boolean;
+    // view type is stacking
     viewType?: CollectionViewType;
     NativeWidth?: () => number;
     NativeHeight?: () => number;
@@ -45,53 +47,78 @@ export type collectionStackingViewProps = {
 
 @observer
 export class CollectionStackingView extends CollectionSubView<StackingDocument, Partial<collectionStackingViewProps>>(StackingDocument) {
+    // do we need a masonry grid here? We think that they are sharing data
     _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, .05 * this.props.PanelWidth())); }
     @computed get yMargin() { return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); }
     @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); }
-    @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking; }
+    // are we stacking or masonry?
+    @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === (CollectionViewType.Stacking || CollectionViewType.NoteTaking); }
+    // 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; }
 
     constructor(props: any) {
         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;
         // Go through each of the documents that are contained
         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} >
-                <div className="hoverButtons">
+                {/* <div className="hoverButtons"> */}
                   {/* We'll want to add an onPointerDown that uses DragManager.DocumentDragData
                    -- we also want to remember to preventDefault (so other drag events are not recognized over this one)
                    -- Design discussion as to whether we want dragging to be on the document itself or with a drag button
@@ -100,11 +127,12 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                    the same functionality?
                    -- Problem: This only shows when the outer container is selected...
                   */}
-                  <div className="buttonWrapper">
-                    <FontAwesomeIcon icon={"grip-vertical"} onPointerDown={e => e.stopPropagation()} />
+                  {/* <div className="buttonWrapper">
+                    <FontAwesomeIcon icon={"grip-vertical"} onPointerDown={ e => e.stopPropagation()} />
                   </div>
-                </div>
-                {this.getDisplayDoc(d, width)}
+                </div> */}
+                {/* some sort of filtering is being done here to actually get layout and make the doc look pretty*/}
+                {this.getDisplayDoc(d, width)} 
             </div>
         });
     }
@@ -113,7 +141,10 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         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) {
@@ -142,6 +173,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             }
         });
         // 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).map(header => {
                 fields.delete(header);
@@ -161,6 +193,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             () => this.pivotField,
             () => this.layoutDoc._columnHeaders = new List()
         );
+        //TODO: where the heck are we getting filters from?
         this._autoHeightDisposer = reaction(() => this.layoutDoc._autoHeight,
             autoHeight => autoHeight && this.props.setHeight(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER),
                 this.headerMargin + (this.isStackingView ?
@@ -198,6 +231,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         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);
 
@@ -229,6 +263,9 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         return this.props.styleProvider?.(doc, props, property);
     }
     isContentActive = () => this.props.isSelected() || this.props.isContentActive();
+
+    // 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);
@@ -236,6 +273,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         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}
             Document={doc}
             DataDoc={dataDoc || (!Doc.AreProtosEqual(doc[DataSym], doc) && doc[DataSym])}
@@ -322,6 +360,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         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(this, e, this.onDividerMove, action(() => this._cursor = "grab"), emptyFunction);
@@ -342,20 +381,43 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     // TODO: plj
     @action
     onPointerOver = (e: React.PointerEvent) => {
-      if (DragManager.docsBeingDragged.length){
-        console.log(DragManager.docsBeingDragged[0].title)
+      // console.log("hovering over something")
+      if (DragManager.docsBeingDragged.length) {
+        // essentially copying code from onInternalDrop for this:
+        const doc = DragManager.docsBeingDragged[0]
+        // console.log(doc[LayoutSym]())
+
+        console.log(doc[DataSym])
+        console.log(Doc.IndexOf(doc, this.childDocs))
+
       }
+      
+
+    }
+
+    //used in onPointerOver to swap two nodes in the rendered filtered children list
+    swapNodes = (i: number, j: number) => {
+      
+    }
+
+    //plj added this 
+    @action
+    onPointerDown = (e: React.PointerEvent) => {
+
     }
 
-    // TODO: plj - look at this
+    // TODO: plj - look at this. Start with making changes to db, and then transition to client side 
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+      // Fairly confident that this is where the swapping of nodes in the various arrays happens
         console.log('drop')
         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().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
                 const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height());
@@ -367,11 +429,14 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             });
             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;
+                // reset drag manager docs, because we just dropped
                 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);
@@ -379,7 +444,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                     docs.splice(insertInd - offset, 0, ...newDocs);
                 }
             }
-        }
+        } // it seems like we're creating a link here. Weird. I didn't know that you could establish links by dragging
         else if (de.complete.linkDragData?.dragDocument.context === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) {
             const source = Docs.Create.TextDocument("", { _width: 200, _height: 75, _fitWidth: true, title: "dropped annotation" });
             this.props.addDocument?.(source);
@@ -402,6 +467,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
 
     @undoBatch
     @action
+    //What is the difference between internal and external drop?? Does internal mean we're dropping inside of a collection?
+    // I take it back: external drop means we took it out of column/collection that we were just in
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
         console.log('external drop')
         const where = [e.clientX, e.clientY];
@@ -424,8 +491,10 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             }
         });
     }
+    // sections are important 
     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;
@@ -435,6 +504,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                 type = types[0];
             }
         }
+        //TODO: I think that we only have one of these atm
         return <CollectionStackingViewFieldColumn
             unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)}
             observeHeight={ref => {
@@ -475,6 +545,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         />;
     }
 
+    // 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;
@@ -517,6 +588,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     }
 
     @action
+    // What are we adding a group to?
     addGroup = (value: string) => {
         if (value && this.columnHeaders) {
             const schemaHdrField = new SchemaHeaderField(value);
@@ -545,6 +617,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         }
     }
 
+    // 
     @computed get renderedSections() {
         TraceMobx();
         let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]];
@@ -552,6 +625,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             const entries = Array.from(this.Sections.entries());
             sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
         }
+        // a section will have a header and a list of docs. Ok cool.
         return sections.map((section, i) => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0));
     }
 
@@ -609,6 +683,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         const editableViewProps = {
             GetValue: () => "",
             SetValue: this.addGroup,
+            // I don't recall ever seeing this add a group button
             contents: "+ ADD A GROUP"
         };
         const buttonMenu = this.rootDoc.buttonMenu;
@@ -634,10 +709,15 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                         }}
                         onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
                         onPointerOver={this.onPointerOver}
+                        onPointerDown={this.onPointerDown}
                         onDrop={this.onExternalDrop.bind(this)}
                         onContextMenu={this.onContextMenu}
+                        // Todo: what is wheel? Are we talking about a mouse wheel?
                         onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
+                        {/* so it appears that we are actually rendering the sections. Maybe this is what we're looking for? */}
                         {this.renderedSections}
+                        {/* I think that showAddGroup must be passed in as false, which is why we can't find what Mehek showed 
+                        Or it's because we aren't passing a pivot field */}
                         {!this.showAddAGroup ? (null) :
                             <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
                                 style={{ width: !this.isStackingView ? "100%" : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>