sizing works but undo redo no longer does

2 files changed, 40 insertions, 23 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index b3e154dac..0aa1b6839 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -72,7 +72,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //     return 3 2 1 4 56
         // }
         if (needsUnsetCategory) {
-            columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, this.maxColWdith));
+            columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, 1));
         }
         return columnHeaders;
     }
@@ -103,16 +103,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get PanelWidth() {
         return this.props.PanelWidth();
     }
-    @computed get maxColWdith() {
+    @computed get maxColWidth() {
         return this.props.PanelWidth() - 2 * this.xMargin;
     }
+    @computed get availableWidth() {
+        const numDividers = this.columnHeaders.length - 1;
+        return this.maxColWidth - numDividers * this.dividerWidth;
+    }
 
     // If the user has not yet created any docs (in another view), this will create a single column. Otherwise,
     // it will adjust according to the
     constructor(props: any) {
         super(props);
         if (this.columnHeaders === undefined) {
-            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]);
+            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, 1)]);
             // add all of the docs that have not been added to a column to this new column
         }
     }
@@ -186,7 +190,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // this._disposers.headers = reaction(
         //     () => this.columnHeaders.slice(),
         //     // TODO: is this correct?
-        //     headers => this.resizeColumns(headers.length, true),
+        //     headers => this.resizeColumns(headers.length, false),
         //     { fireImmediately: true }
         // );
     }
@@ -334,7 +338,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field);
         const existingHeader = this.columnHeaders.find(sh => sh.heading === heading);
         const existingWidth = existingHeader?.width ? existingHeader.width : 0;
-        const maxWidth = existingWidth > 0 ? existingWidth : this.maxColWdith - 2 * this.xMargin;
+        const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth - 2 * this.xMargin : this.maxColWidth - 2 * this.xMargin;
         // const index = existingHeader ? this.columnHeaders.indexOf(existingHeader) : 0;
         // const endColValue = index === this.columnHeaders.length - 1 || index > this.columnStartXCoords.length - 1 ? this.PanelWidth : this.columnStartXCoords[index + 1];
         // const maxWidth = index > this.columnStartXCoords.length - 1 ? this.PanelWidth : endColValue - this.columnStartXCoords[index] - 3 * this.xMargin;
@@ -367,10 +371,14 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // called when a column is either added or deleted. This function creates n evenly spaced columns
     @action
     resizeColumns = (n: number, isAdd: boolean) => {
-        let scaleFactor = isAdd ? Math.floor((n - 1)) / n : Math.floor((n + 1) / n);
-        if (isAdd && n == 1) scaleFactor = 1;
+        if (n == 1) {
+          this.columnHeaders[0].setWidth(1);
+          return;
+        }
+        let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n;
+        // if (isAdd && n == 1) scaleFactor = 1;
         this.columnHeaders.forEach(h => {
-          h.width < 0 ? h.setWidth((this.maxColWdith - this.dividerWidth) / n) : h.setWidth(h.width * scaleFactor);
+            h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor);
         });
         // if we're adding, need to
 
@@ -424,7 +432,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         let colStartXCoord = 0;
         for (let i = 0; i < numColumns; i++) {
             coords.push(colStartXCoord);
-            colStartXCoord += this.columnHeaders[i].width + this.dividerWidth;
+            colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.dividerWidth;
         }
 
         coords.push(this.PanelWidth);
@@ -600,13 +608,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 columnHeaders={this.columnHeaders}
                 Document={this.props.Document}
                 DataDoc={this.props.DataDoc}
-                // resizeColumns={this.resizeColumns}
+                resizeColumns={this.resizeColumns}
                 renderChildren={this.children}
                 numGroupColumns={this.numGroupColumns}
                 gridGap={this.gridGap}
                 pivotField={this.notetakingCategoryField}
                 // columnStartXCoords={this.columnStartXCoords}
-                maxColWidth={this.maxColWdith}
+                dividerWidth={this.dividerWidth}
+                maxColWidth={this.maxColWidth}
+                availableWidth={this.availableWidth}
                 PanelWidth={this.PanelWidth}
                 key={heading?.heading ?? ''}
                 headings={this.headings}
@@ -628,9 +638,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @undoBatch
     addGroup = (value: string) => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
-        const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
+        // const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
         this.resizeColumns(this.numGroupColumns + 1, true);
-        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, colWidth)) ? true : false;
+        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, 1 / (this.numGroupColumns + 1))) ? true : false;
     };
 
     sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
@@ -656,8 +666,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     setColumnStartXCoords = (movementX: number, colIndex: number) => {
         const leftHeader = this.columnHeaders[colIndex];
         const rightHeader = this.columnHeaders[colIndex + 1];
-        leftHeader.setWidth(leftHeader.width + movementX);
-        rightHeader.setWidth(rightHeader.width - movementX);
+        leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth);
+        rightHeader.setWidth(rightHeader.width - movementX / this.availableWidth);
         // const coords = [...this.columnStartXCoords];
         // coords[colIndex] += movementX;
         // this.columnStartXCoords = coords;
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index f58d8e937..8ad684cec 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -51,10 +51,12 @@ interface CSVFieldColumnProps {
     unobserveHeight: (myref: any) => void;
     //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
     editableViewProps: () => any;
-    // resizeColumns: (n: number) => void;
+    resizeColumns: (n: number, isAdd: boolean) => void;
     // columnStartXCoords: number[];
     PanelWidth: number;
     maxColWidth: number;
+    dividerWidth: number;
+    availableWidth: number;
     // docsByColumnHeader: Map<string, Doc[]>
     // setDocsForColHeader: (key: string, docs: Doc[]) => void
 }
@@ -63,16 +65,22 @@ interface CSVFieldColumnProps {
 export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = 'inherit';
 
+    // the "width" property of headers is relative (a percentage of available space)
     @computed get columnWidth() {
         // base cases
-        if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) {
+        if (!this.props.columnHeaders || !this.props.headingObject) {
             return this.props.maxColWidth;
         }
-        const i = this.props.columnHeaders.indexOf(this.props.headingObject);
-        if (i >= 0 && this.props.columnHeaders[i].width > 0) {
-            return this.props.columnHeaders[i].width;
+        if (this.props.columnHeaders.length == 1) {
+            // this.props.columnHeaders[0].setWidth(1);
+            return this.props.maxColWidth;
         }
-        return this.props.maxColWidth;
+        const i = this.props.columnHeaders.indexOf(this.props.headingObject);
+        return this.props.columnHeaders[i].width * this.props.availableWidth;
+        // if (i >= 0 && this.props.columnHeaders[i].width > 0) {
+        //     return this.props.columnHeaders[i].width;
+        // }
+        // return this.props.maxColWidth;
         // if (i < 0 || i > this.props.columnStartXCoords.length - 1) {
         //     return this.props.maxColWidth;
         // }
@@ -150,7 +158,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         return this.props.addDocument?.(newDoc) || false;
     };
 
-    @undoBatch
     @action
     @undoBatch
     deleteColumn = () => {
@@ -158,9 +165,9 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         if (columnHeaders && this.props.headingObject) {
             const index = columnHeaders.indexOf(this.props.headingObject);
             this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
+            this.props.resizeColumns(columnHeaders.length - 1, false)
             columnHeaders.splice(index, 1);
         }
-        // probably need to add something here for sizing purposes
     };
 
     menuCallback = (x: number, y: number) => {