1 files changed, 48 insertions, 33 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 6128c1c66..14d274cb2 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -23,11 +23,10 @@ import { LightboxView } from "../LightboxView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView";
 import { StyleProp } from "../StyleProvider";
-import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
+import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
-import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
 const _global = (window /* browser */ || global /* node */) as any;
 
 
@@ -109,7 +108,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             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
+            // 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} >
@@ -310,20 +309,29 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off 
         return new Transform(- translateX + (dref?.centeringX || 0), - translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
     }
+
+    //TODO: update this so that you get larger docs
     getDocWidth(d?: Doc) {
-        if (!d) return 0;
-        const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
-        // TODO: pj - replace with a better way to calculate the margin
-        let margin = 25;
-        d.margin = 25;
-        if (this.columnWidth < 150){
-          margin = 0;
-        }
-        const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2);
-        if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
-            return Math.min(d[WidthSym](), maxWidth);
-        }
-        return maxWidth;
+      //TODO: defnitely a more efficient way to do this, but who cares
+      const headings = () => Array.from(this.Sections);
+      const h = headings();
+      const uniqueHeadings = h.map((i, idx) => h.indexOf(i) === idx);
+      const width = this.columnWidth / ((uniqueHeadings.length) || 1);
+      return width - 25;
+
+        // if (!d) return 0;
+        // const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
+        // // TODO: pj - replace with a better way to calculate the margin
+        // let margin = 25;
+        // d.margin = 25;
+        // if (this.columnWidth < 150){
+        //   margin = 0;
+        // }
+        // const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2);
+        // if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
+        //     return Math.min(d[WidthSym](), maxWidth);
+        // }
+        // return maxWidth + 75;
     }
     getDocHeight(d?: Doc) {
         if (!d || d.hidden) return 0;
@@ -478,16 +486,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // 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;
-        if (this.pivotField) {
-            const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]);
-            if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) {
-                type = types[0];
-            }
-        }
+        // const key = this.pivotField;
+        const type = "number";
+        // let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined;
+        // if (this.pivotField) {
+        //     const types = docList.length ? docList.map(d => typeof d[key]) : this.filteredChildren.map(d => typeof d[key]);
+        //     if (types.map((i, idx) => types.indexOf(i) === idx).length === 1) {
+        //         type = types[0];
+        //     }
+        // }
         //TODO: I think that we only have one of these atm
         return <CollectionNoteTakingViewFieldColumn
             unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)}
@@ -526,6 +534,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             type={type}
             createDropTarget={this.createDashEventsTarget}
             screenToLocalTransform={this.props.ScreenToLocalTransform}
+            // added this in to add column
+            editableViewProps={{
+              GetValue: () => "",
+              SetValue: this.addGroup,
+              // I don't recall ever seeing this add a group button
+              contents: "+ New Column"
+          }}
         />;
     }
 
@@ -666,12 +681,12 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     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 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 (
@@ -704,11 +719,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                         {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) :
+                        {/* {!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>}
+                            </div>} */}
                         {/* {this.chromeHidden || !this.props.isSelected() ? (null) :
                             <Switch
                                 onChange={this.onToggle}