cleaned up

1 files changed, 43 insertions, 103 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 35f27a862..ff9e22ce1 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -45,14 +45,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     _autoHeightDisposer?: IReactionDisposer;
     //------------------------------------------------------------------------------------------------//
     _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>();
     // 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>();
+    _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = [];
     // Assuming that this is the current css cursor style
     @observable _cursor: CursorProperty = "grab";
     // gets reset whenever we scroll. Not sure what it is
@@ -71,19 +66,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @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); }
-    // are we stacking or masonry?
-    @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking || (this.props.viewType ?? this.layoutDoc._viewType) === 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; }
+    @computed get numGroupColumns() { return this.Sections.size; }
+    @computed get columnWidth() {return this.props.PanelWidth() - 2 * this.xMargin;}
 
     //-------------------------------------------- Parker's Playground --------------------------------------------//
     draggedDocBackgroundColors: string[] = []
@@ -115,30 +99,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         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);
-            // added 50 to width. May need to change that elsewhere later
-            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} >
+            const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() };
+            return <div className={`collectionNoteTakingView-columnDoc`} key={d[Id]} style={style} >
                 {this.getDisplayDoc(d, width)}
             </div>;
         });
     }
-    // @action
-    // setDocHeight = (key: string, sectionHeight: number) => {
-    //     this._heightMap.set(key, sectionHeight);
-    // }
 
     get Sections() {
         // appears that pivot field IS actually for sorting
         if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
-
-        // Shouldn't need, since we instantiate them in the constructor
-        // if (this.columnHeaders === undefined) {
-        //     setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0);
-        //     return new Map<SchemaHeaderField, Doc[]>();
-        // }
         const columnHeaders = Array.from(this.columnHeaders);
         const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         let changed = false;
@@ -187,9 +157,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //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 ?
-                    Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))) :
-                    this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0)))));
+                this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))))));
     }
 
     componentWillUnmount() {
@@ -262,8 +230,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const height = () => this.getDocHeight(doc);
 
         let dref: Opt<DocumentView>;
-        const stackedDocTransform = () => this.getDocTransform(doc, dref);
-        this._docXfs.push({ stackedDocTransform, width, height });
+        const noteTakingDocTransform = () => this.getDocTransform(doc, dref);
+        this._docXfs.push({ noteTakingDocTransform, width, height });
         //DocumentView is how the node will be rendered
         return <DocumentView ref={r => dref = r || undefined}
             Document={doc}
@@ -293,7 +261,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
             onClick={this.onChildClickHandler}
             onDoubleClick={this.onChildDoubleClickHandler}
-            ScreenToLocalTransform={stackedDocTransform}
+            ScreenToLocalTransform={noteTakingDocTransform}
             focus={this.focusDocument}
             docFilters={this.childDocFilters}
             hideDecorationTitle={this.props.childHideDecorationTitle?.()}
@@ -346,7 +314,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0);
         const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0);
         if (nw && nh) {
-            const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
+            const colWid = this.columnWidth / this.numGroupColumns;
             const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
             return Math.min(
                 maxHeight,
@@ -368,12 +336,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return false;
     }
 
-    @computed get columnDragger() {
-        return <div className="collectionStackingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef}
-            style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }} >
-            <FontAwesomeIcon icon={"arrows-alt-h"} />
-        </div>;
-    }
+    //TODO: currently unused. How can we make use of it?
+    // @computed get columnDragger() {
+    //     return <div className="collectionNoteTakingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef}
+    //         style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }} >
+    //         <FontAwesomeIcon icon={"arrows-alt-h"} />
+    //     </div>;
+    // }
 
     resizeColumns = (n: number) => {
       const totalWidth = this.props.PanelWidth()
@@ -402,8 +371,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //TODO get the nodes in the doc
         this._docXfs.forEach((cd, i) => {
           //TODO need to write your own function for this, or make sure you're properly updating the fields
-          const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap);
-          const pos1 = cd.stackedDocTransform().inverse().transformPoint(0, cd.height());
+          const pos = cd.noteTakingDocTransform().inverse().transformPoint(0, -2 * this.gridGap);
+          const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(0, cd.height());
           // checking whethere the copied element is in between the top of the doc and the grid gap
           // (meaning that this is the index it will be taking)
           const yCoordInBetween = clientY > pos[1] && (clientY < pos1[1] || i == this._docXfs.length - 1)
@@ -470,19 +439,18 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         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());
+                const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+                const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
                 // const top = cd.height();
-                // const pos = cd.stackedDocTransform().transformPoint(0, cd.height());
+                // const pos = cd.noteTakingDocTransform().transformPoint(0, cd.height());
                 // TODO: plan
                 // Get the top of the box
                 // Check if there could possibly be a box below
                 
-                // const pos1 = cd.stackedDocTransform().transformPoint(0, cd.height());
+                // const pos1 = cd.noteTakingDocTransform().transformPoint(0, cd.height());
                 // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
                 if (where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
                     dropInd = i;
-                    // const axis = this.isStackingView ? 1 : 0;
                     const axis = 1;
                     dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0;
                 }
@@ -538,8 +506,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const where = [e.clientX, e.clientY];
         let targInd = -1;
         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());
+            const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+            const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
             if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
                 targInd = i;
             }
@@ -558,7 +526,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // sections are important 
     headings = () => Array.from(this.Sections);
     refList: any[] = [];
-    sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
+    sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
         // const key = this.pivotField;
         const type = "number";
         return <CollectionNoteTakingViewFieldColumn
@@ -646,24 +614,22 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             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));
         //TODO need to add the divs in
         const eles: JSX.Element[] = []
         for (let i = 0; i < sections.length; i++) {
-            const col = this.sectionStacking(sections[i][0], sections[i][1])
+            const col = this.sectionNoteTaking(sections[i][0], sections[i][1])
             eles.push(col)
             //TODO make this look pretty
             // if (i < sections.length - 1) {
             //   eles.push(
-            //     <div className={"collectionStackingViewFieldColumn"}>
+            //     <div className={"collectionNoteTakingViewFieldColumn"}>
             //       new div
             //     </div>
             //     )
             // }
         }
         return eles
-        // return sections.map((section) => this.sectionStacking(section[0], section[1]));
+        // return sections.map((section) => this.sectionNoteTaking(section[0], section[1]));
     }
 
     @computed get buttonMenu() {
@@ -716,13 +682,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     observer: any;
     render() {
         TraceMobx();
-        //TODO: need to make this inside the field view column
-        // const editableViewProps = {
-        //     GetValue: () => "",
-        //     SetValue: this.addGroup,
-        //     // I don't recall ever seeing this add a group button
-        //     contents: "+ ADD A COLUMN"
-        // };
         const buttonMenu = this.rootDoc.buttonMenu;
         const noviceExplainer = this.rootDoc.explainer;
         return (
@@ -736,39 +695,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                         : null
                     }
                 </div> : null}
-                <div className="collectionStackingMasonry-cont" >
-                    <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"}
-                        ref={this.createRef}
-                        style={{
-                            overflowY: this.props.isContentActive() ? "auto" : "hidden",
-                            background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor),
-                            pointerEvents: this.backgroundEvents ? "all" : undefined
-                        }}
-                        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 }}>
-                                <EditableView {...editableViewProps} />
-                            </div>} */}
-                        {/* {this.chromeHidden || !this.props.isSelected() ? (null) :
-                            <Switch
-                                onChange={this.onToggle}
-                                onClick={this.onToggle}
-                                defaultChecked={true}
-                                checkedChildren="edit"
-                                unCheckedChildren="view"
-                            />} */}
-                    </div>
+                <div className="collectionNoteTakingView"
+                    ref={this.createRef}
+                    style={{
+                        overflowY: this.props.isContentActive() ? "auto" : "hidden",
+                        background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor),
+                        pointerEvents: this.backgroundEvents ? "all" : undefined
+                    }}
+                    onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
+                    onPointerOver={this.onPointerOver}
+                    onPointerDown={this.onPointerDown}
+                    onDrop={this.onExternalDrop.bind(this)}
+                    onContextMenu={this.onContextMenu}
+                    onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
+                    {this.renderedSections}
                 </div>
             </>