commiting before refactoring

2 files changed, 71 insertions, 88 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 6887c535b..86b0aeed7 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -86,10 +86,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     
     @computed get NodeWidth() { return this.props.PanelWidth() - this.gridGap; }
 
-    // Parker added this as a global placeholder for a single document
-    // placeHolderDoc = Docs.Create.TextDocument("", { _height: 18, _width: 200, _fitWidth: true, backgroundColor:  "#C9DAEF", title: "placeholder", _autoHeight: true });
-    // placeHolderDown = false
+    //-------------------------------------------- Parker's Playground --------------------------------------------//
     draggedDocBackgroundColors: string[] = []
+    columnStartXCoords: number[] = []
+    dividerXCoords: number[] = []
+    //-------------------------------------------------------------------------------------------------------------//
 
     constructor(props: any) {
         super(props);
@@ -98,6 +99,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
           // TODO: what is a layout doc? Is it literally how this document is supposed to be layed out?
           // here we're making an empty list of column headers (again, what Mehek showed us)
             this.layoutDoc._columnHeaders = new List<SchemaHeaderField>();
+            this.columnStartXCoords = [0]
+        } else {
+          //TODO instantiate columnStartXCoords and dividerXCoords
+          const numHeaders = this.columnHeaders.length
+          this.resizeColumns(numHeaders)
         }
     }
 
@@ -120,21 +126,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             </div>;
         });
     }
-    @action
-    setDocHeight = (key: string, sectionHeight: number) => {
-        this._heightMap.set(key, sectionHeight);
-    }
+    // @action
+    // setDocHeight = (key: string, sectionHeight: number) => {
+    //     this._heightMap.set(key, sectionHeight);
+    // }
 
-    // is sections that all collections inherit? I think this is how we show the masonry/columns
-    //TODO: this seems important
     get Sections() {
         // appears that pivot field IS actually for sorting
         if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
 
-        if (this.columnHeaders === undefined) {
-            setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0);
-            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;
@@ -142,7 +147,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             if (!d[this.pivotField]) {
               d[this.pivotField] = `1`
             };
-            const sectionValue = (d[this.pivotField] ? d[this.pivotField] : `0`) as object;
+            const sectionValue = d[this.pivotField] as object;
             // the next five lines ensures that floating point rounding errors don't create more than one section -syip
             const parsed = parseInt(sectionValue.toString());
             const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue;
@@ -311,7 +316,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         />;
     }
 
-    //TODO: this is definitely incorrect at the moment, since you completely changed getDocWidth
+    //TODO update this to 
     getDocTransform(doc: Doc, dref?: DocumentView) {
         const y = this._scroll; // required for document decorations to update when the text box container is scrolled
         const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
@@ -319,7 +324,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         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
+    //TODO do we actually want to update the doc width on this?
     getDocWidth(d?: Doc) {
       //TODO: defnitely a more efficient way to do this, but who cares
       const headings = () => Array.from(this.Sections);
@@ -327,21 +332,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       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;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
@@ -379,27 +371,50 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         </div>;
     }
 
+    resizeColumns = (n: number) => {
+      const totalWidth = this.props.PanelWidth()
+      const colWidth = totalWidth / n
+      const newColXCoords: number[] = []
+      let colStart = 0
+      for (let i = 0; i < n; i++) {
+          newColXCoords.push(colStart)
+          colStart += colWidth
+      }
+      this.columnStartXCoords = newColXCoords
+    }
+
     // TODO: This is where you want to create a copy of the document to take its place
     @action
     onPointerOver = (e: React.PointerEvent) => {
       if (DragManager.docsBeingDragged.length && this.childDocList) {
-        const clientY = e.clientY;
+        const col = this.getClientColumn(e)
+        const colStartXCoords = this.columnStartXCoords
+        // console.log(col)
+        const clientY = e.clientY
+        // const clientX = e.clientX
         let dropInd = -1;
         let dropAfter = 0;
+        const length = this._docXfs.length
+        //TODO get the nodes in the doc
         this._docXfs.forEach((cd, i) => {
-          const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap)[1];
-          const pos1 = cd.stackedDocTransform().inverse().transformPoint(0, cd.height())[1];
+          //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());
           // 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)
-          if (clientY > pos && (clientY < pos1 || i == this._docXfs.length - 1)) {
+          const yCoordInBetween = clientY > pos[1] && (clientY < pos1[1] || i == this._docXfs.length - 1)
+          // const xCoordInBetween = clientX > pos[0] && (clientX < pos1[0] || i == this._docXfs.length - 1)
+          const xCoordInBetween = true
+          if (yCoordInBetween && xCoordInBetween) {
             dropInd = i;
-            if (clientY > (pos + pos1) / 2) {
+            if (clientY > (pos[1] + pos1[1]) / 2) {
               dropAfter = 1;
             }
           }
         })
         const docs = this.childDocList;
         const newDocs = DragManager.docsBeingDragged;
+        const length2 = docs.length
         if (docs) {
           const insertInd = dropInd === -1 ? docs.length : dropInd + dropAfter;
           const offset = newDocs.reduce((off, ndoc) => this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off, 0);
@@ -410,7 +425,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
           //   this.placeHolderDown = false
           // }
           docs.splice(insertInd - offset, 0, ...newDocs);
-      }
+        }
       }
     }
 
@@ -425,6 +440,21 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     }
 
+    getClientColumn = (e: React.PointerEvent): number => {
+        const clientX = e.clientX
+        const numColumns = this.columnHeaders.length
+        const coords = this.columnStartXCoords
+        coords.push(this.props.PanelWidth())
+        let colIndex = 0
+        for (let i = 0; i < numColumns; i++) {
+            if (clientX > coords[i] && clientX < coords[i + 1]) {
+              colIndex = i
+              break
+            }
+        }
+        return colIndex
+    }
+
     // TODO: Going to be helpful to look at code to see what exactly this is doing to have the aliases. 
     // I also think that this code is now incorrect
     @undoBatch
@@ -532,14 +562,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
         // 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)}
             observeHeight={ref => {
@@ -587,51 +609,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         />;
     }
 
-    // // what a section looks like if we're in masonry. Shouldn't actually need to use this.
-    // sectionMasonry = (heading: SchemaHeaderField | undefined, docList: Doc[], first: boolean) => {
-    //     const key = this.pivotField;
-    //     let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined;
-    //     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 rows = () => !this.isStackingView ? 1 : Math.max(1, Math.min(docList.length,
-    //         Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap))));
-    //     return <CollectionMasonryViewFieldRow
-    //         showHandle={first}
-    //         Document={this.props.Document}
-    //         chromeHidden={this.chromeHidden}
-    //         pivotField={this.pivotField}
-    //         unobserveHeight={(ref) => this.refList.splice(this.refList.indexOf(ref), 1)}
-    //         observeHeight={(ref) => {
-    //             if (ref) {
-    //                 this.refList.push(ref);
-    //                 this.observer = new _global.ResizeObserver(action((entries: any) => {
-    //                     if (this.layoutDoc._autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) {
-    //                         const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0);
-    //                         this.props.setHeight(this.headerMargin + height);
-    //                     }
-    //                 }));
-    //                 this.observer.observe(ref);
-    //             }
-    //         }}
-    //         key={heading ? heading.heading : ""}
-    //         rows={rows}
-    //         headings={this.headings}
-    //         heading={heading ? heading.heading : ""}
-    //         headingObject={heading}
-    //         docList={docList}
-    //         parent={this}
-    //         type={type}
-    //         createDropTarget={this.createDashEventsTarget}
-    //         screenToLocalTransform={this.props.ScreenToLocalTransform}
-    //         setDocHeight={this.setDocHeight}
-    //     />;
-    // }
-
     @action
     addGroup = (value: string) => {
         if (value && this.columnHeaders) {
+            this.resizeColumns(this.columnHeaders.length + 1)
             const schemaHdrField = new SchemaHeaderField(value);
             this.columnHeaders.push(schemaHdrField);
             DocUtils.addFieldEnumerations(undefined, this.pivotField, [{ title: value, _backgroundColor: "schemaHdrField.color" }]);
@@ -668,7 +649,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
         // 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));
-        return sections.map((section, i) => this.sectionStacking(section[0], section[1]));
+        return sections.map((section) => this.sectionStacking(section[0], section[1]));
 
     }
 
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index 1df5cc504..6bcd397aa 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -327,9 +327,11 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
                                 <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
                                     <EditableView {...this.props.editableViewProps} />
                                 </div>
-                                <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
+                                {this.props.numGroupColumns > 1 && 
+                                    <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
                                     <FontAwesomeIcon icon="trash" size="lg" />
                                 </button>
+                                }
                             </div>
                             : null}