columns (sort of) working

2 files changed, 42 insertions, 16 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 5f9a4f4d0..0cdf63939 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -67,12 +67,14 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @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 numGroupColumns() { return this.columnHeaders.length; }
-    @computed get columnWidth() {return this.props.PanelWidth() - 2 * this.xMargin;}
+    // @computed get columnWidth() {return this.props.PanelWidth() - 2 * this.xMargin;}
 
     //-------------------------------------------- Parker's Playground --------------------------------------------//
-    draggedDocBackgroundColors: string[] = []
+    // draggedDocBackgroundColors: string[] = []
     columnStartXCoords: number[] = []
-    dividerXCoords: number[] = []
+    @computed get PanelWidth() {return this.props.PanelWidth()}
+    @computed get maxColWdith() {return this.props.PanelWidth() - 2 * this.xMargin;}
+    // dividerXCoords: number[] = []
     //-------------------------------------------------------------------------------------------------------------//
 
     constructor(props: any) {
@@ -315,8 +317,9 @@ 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.numGroupColumns;
-            const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
+            // const colWid = this.columnWidth / this.numGroupColumns;
+            // const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
+            const docWid = this.getDocWidth(d)
             return Math.min(
                 maxHeight,
                 docWid * nh / nw);
@@ -347,7 +350,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // }
 
     resizeColumns = (n: number) => {
-      const totalWidth = this.props.PanelWidth()
+      const totalWidth = this.PanelWidth
       const colWidth = totalWidth / n
       const newColXCoords: number[] = []
       let colStart = 0
@@ -356,6 +359,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
           colStart += colWidth
       }
       this.columnStartXCoords = newColXCoords
+      console.log(newColXCoords)
     }
 
     // TODO: This is where you want to create a copy of the document to take its place
@@ -558,10 +562,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             DataDoc={this.props.DataDoc}
             resizeColumns={this.resizeColumns.bind(this)}
             renderChildren={this.children}
-            columnWidth={this.columnWidth}
+            // columnWidth={this.columnWidth}
             numGroupColumns={this.numGroupColumns}
             gridGap={this.gridGap}
             pivotField={this.pivotField}
+            columnStartXCoords={this.columnStartXCoords}
+            maxColWidth={this.maxColWdith}
+            PanelWidth={this.PanelWidth}
             key={heading?.heading ?? ""}
             headings={this.headings}
             heading={heading?.heading ?? ""}
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index 452af2ddf..b9bed7174 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -37,7 +37,7 @@ interface CSVFieldColumnProps {
     columnHeaders: SchemaHeaderField[] | undefined;
     headingObject: SchemaHeaderField | undefined;
     yMargin: number;
-    columnWidth: number;
+    // columnWidth: number;
     numGroupColumns: number;
     gridGap: number;
     type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined;
@@ -50,12 +50,29 @@ interface CSVFieldColumnProps {
     unobserveHeight: (myref: any) => void;
     editableViewProps: any;
     resizeColumns: (n: number) => void
+    columnStartXCoords: number[]
+    PanelWidth: number
+    maxColWidth: number
 }
 
 @observer
 export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = "inherit";
 
+    // It seems like this is being a little funky atm
+    @computed get columnWidth() {
+      // base cases
+      if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) {
+        return this.props.maxColWidth
+      }
+      const i = this.props.columnHeaders.indexOf(this.props.headingObject)
+      if (i < 0) {
+        return this.props.maxColWidth
+      }
+      const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i+1]
+      return endColValue - this.props.columnStartXCoords[i] - 10
+    }
+
     private dropDisposer?: DragManager.DragDropDisposer;
     private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
 
@@ -150,7 +167,8 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         console.log('in startDrag')
         // is MakeAlias a way to make a copy of a doc without rendering it?
         const alias = Doc.MakeAlias(this.props.Document);
-        alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1);
+        // alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1);
+        alias._width = this.columnWidth;
         alias._pivotField = undefined;
         let value = this.getValue(this._heading);
         value = typeof value === "string" ? `"${value}"` : value;
@@ -219,17 +237,16 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
     @computed get innards() {
         TraceMobx();
         const key = this.props.pivotField;
-        const headings = this.props.headings();
         const heading = this._heading;
         const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin;
-        const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         const evContents = heading ? heading : "25";
         const headingView = this.props.headingObject ?
             <div key={heading} className="collectionNoteTakingView-sectionHeader" ref={this._headerRef}
                 style={{
-                    marginTop: this.props.yMargin,
-                    width: (this.props.columnWidth) /
-                        ((uniqueHeadings.length) || 1)
+                    marginTop: 2 * this.props.yMargin,
+                    // width: (this.props.columnWidth) /
+                    //     ((uniqueHeadings.length) || 1)
+                    width: this.columnWidth
                 }}>
                 <div className="collectionNoteTakingView-sectionHeader-subCont" onPointerDown={this.headerDown}
                     title={evContents === `No Value` ?
@@ -243,7 +260,8 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
                     />
                 </div>
             </div> : (null);
-        const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
+        // const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
+        const templatecols = `${this.columnWidth}px `;
         const type = this.props.Document.type;
         return <>
             {headingView}
@@ -264,7 +282,8 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
 
               {!this.props.chromeHidden && type !== DocumentType.PRES ?
                   <div className="collectionNoteTakingView-DocumentButtons"
-                      style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
+                      // style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
+                      style={{ width: this.columnWidth, marginBottom: 10 }}>
                       <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
                           <EditableView
                               GetValue={returnEmptyString}