From 08ac7a2006027147ce15f18433318ae3cf789c9f Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 11 Aug 2022 10:07:43 -0500
Subject: persistent header widths

---
 .../views/collections/CollectionNoteTakingView.tsx | 84 ++++++++++++++--------
 1 file changed, 53 insertions(+), 31 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 96db23142..b3e154dac 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -45,7 +45,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     _disposers: { [key: string]: IReactionDisposer } = {};
     _masonryGridRef: HTMLDivElement | null = null;
     _draggerRef = React.createRef<HTMLDivElement>(); // change to relative widths for deleting.  change storage from columnStartXCoords to columnHeaders (schemaHeaderFields has a widgth alrady)
-    @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht
+    // @observable columnStartXCoords: number[] = []; // columnHeaders -- SchemaHeaderField -- widht
     @observable docsDraggedRowCol: number[] = [];
     @observable _cursor: CursorProperty = 'grab';
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
@@ -72,7 +72,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //     return 3 2 1 4 56
         // }
         if (needsUnsetCategory) {
-            columnHeaders.push(new SchemaHeaderField('unset'));
+            columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, this.maxColWdith));
         }
         return columnHeaders;
     }
@@ -88,6 +88,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get xMargin() {
         return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth()));
     }
+    @computed get dividerWidth() {
+        return 32;
+    }
     @computed get yMargin() {
         return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5);
     } // 2 * this.gridGap)); }
@@ -109,7 +112,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     constructor(props: any) {
         super(props);
         if (this.columnHeaders === undefined) {
-            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]);
+            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]);
+            // add all of the docs that have not been added to a column to this new column
         }
     }
 
@@ -179,11 +183,12 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             () => this.layoutDoc._autoHeight,
             autoHeight => autoHeight && this.props.setHeight?.(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace('px', ''))))))
         );
-        this._disposers.headers = reaction(
-            () => this.columnHeaders.slice(),
-            headers => this.resizeColumns(headers.length),
-            { fireImmediately: true }
-        );
+        // this._disposers.headers = reaction(
+        //     () => this.columnHeaders.slice(),
+        //     // TODO: is this correct?
+        //     headers => this.resizeColumns(headers.length, true),
+        //     { fireImmediately: true }
+        // );
     }
 
     componentWillUnmount() {
@@ -328,9 +333,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     getDocWidth(d: Doc) {
         const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field);
         const existingHeader = this.columnHeaders.find(sh => sh.heading === heading);
-        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;
+        const existingWidth = existingHeader?.width ? existingHeader.width : 0;
+        const maxWidth = existingWidth > 0 ? existingWidth : this.maxColWdith - 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;
         if (d.type === DocumentType.RTF) {
             return maxWidth;
         }
@@ -359,18 +366,21 @@ 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) => {
-        const totalWidth = this.PanelWidth;
-        const dividerWidth = 32;
-        const totaldividerWidth = (n - 1) * dividerWidth;
-        const colWidth = (totalWidth - totaldividerWidth) / n;
-        const newColXCoords: number[] = [];
-        let colStart = 0;
-        for (let i = 0; i < n; i++) {
-            newColXCoords.push(colStart);
-            colStart += colWidth + dividerWidth;
-        }
-        this.columnStartXCoords = newColXCoords;
+    resizeColumns = (n: number, isAdd: boolean) => {
+        let scaleFactor = isAdd ? Math.floor((n - 1)) / n : Math.floor((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);
+        });
+        // if we're adding, need to
+
+        // const newColXCoords: number[] = [];
+        // let colStart = 0;
+        // for (let i = 0; i < n; i++) {
+        //     newColXCoords.push(colStart);
+        //     colStart += colWidth + dividerWidth;
+        // }
+        // this.columnStartXCoords = newColXCoords;
     };
 
     // This function is used to preview where a document will drop in a column once a drag is complete.
@@ -410,7 +420,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // returns the column index for a given x-coordinate
     getColumnFromXCoord = (xCoord: number): number => {
         const numColumns = this.columnHeaders.length;
-        const coords = this.columnStartXCoords.slice();
+        const coords = [];
+        let colStartXCoord = 0;
+        for (let i = 0; i < numColumns; i++) {
+            coords.push(colStartXCoord);
+            colStartXCoord += this.columnHeaders[i].width + this.dividerWidth;
+        }
+
         coords.push(this.PanelWidth);
         let colIndex = 0;
         for (let i = 0; i < numColumns; i++) {
@@ -584,12 +600,12 @@ 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}
+                // columnStartXCoords={this.columnStartXCoords}
                 maxColWidth={this.maxColWdith}
                 PanelWidth={this.PanelWidth}
                 key={heading?.heading ?? ''}
@@ -612,7 +628,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @undoBatch
     addGroup = (value: string) => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
-        return value && columnHeaders?.push(new SchemaHeaderField(value)) ? true : false;
+        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;
     };
 
     sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
@@ -636,9 +654,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // used to reset column sizes when using the drag handlers
     @action
     setColumnStartXCoords = (movementX: number, colIndex: number) => {
-        const coords = [...this.columnStartXCoords];
-        coords[colIndex] += movementX;
-        this.columnStartXCoords = coords;
+        const leftHeader = this.columnHeaders[colIndex];
+        const rightHeader = this.columnHeaders[colIndex + 1];
+        leftHeader.setWidth(leftHeader.width + movementX);
+        rightHeader.setWidth(rightHeader.width - movementX);
+        // const coords = [...this.columnStartXCoords];
+        // coords[colIndex] += movementX;
+        // this.columnStartXCoords = coords;
     };
 
     @computed get renderedSections() {
@@ -655,7 +677,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             const col = this.sectionNoteTaking(sections[i][0], sections[i][1]);
             eles.push(col);
             if (i < sections.length - 1) {
-                eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i + 1} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />);
+                eles.push(<CollectionNoteTakingViewDivider key={`divider${i}`} index={i} setColumnStartXCoords={this.setColumnStartXCoords} xMargin={this.xMargin} />);
             }
         }
         return eles;
-- 
cgit v1.2.3-70-g09d2