attempt with columnResizer. Not sure about how to handle resize events

3 files changed, 74 insertions, 16 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 0cdf63939..5435650b4 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -302,9 +302,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       if (existingHeader) {
         const index = this.columnHeaders.indexOf(existingHeader)
         if (this.columnHeaders.length == 1) {
-          return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap
+          return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap - 100
         } 
-        return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap
+        return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap - 100
       }
       return 1000;
     }
@@ -350,13 +350,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // }
 
     resizeColumns = (n: number) => {
+      //TODO: that isn't the proper width of columns
       const totalWidth = this.PanelWidth
-      const colWidth = totalWidth / n
+      const dividerWidth = 70
+      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
+          colStart += colWidth + dividerWidth
       }
       this.columnStartXCoords = newColXCoords
       console.log(newColXCoords)
@@ -617,6 +620,29 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
     }
 
+    //TODO: look at MultiRowResizer.tsx
+    // @action
+    // onDividerPointerDown = (e: React.PointerEvent) => {
+    //   const eles = HTMLElement[e.currentTarget.Elem]
+    //   DragManager.StartDrag(e.target, {}, e.clientX, e.clientY)
+    // }
+
+    @action
+    onDividerPointerOver = (e: React.PointerEvent, index: number) => {
+      if (DragManager.docsBeingDragged.length == 0) {
+        //convert client X to how we're doing stuff
+        const xPos = e.clientX + 2 * this.xMargin
+        // get difference (-25 is because that's the center of the divider)
+        const xDividerPos = this.columnStartXCoords[index + 1] - 25
+        const diff = xDividerPos - xPos
+        // make a copy of the array
+        const colXCoords : number[] = []
+        this.columnStartXCoords.forEach(val => colXCoords.push(val))
+        colXCoords[index + 1] -= diff
+        this.columnStartXCoords = colXCoords
+      }
+    }
+
     // 
     @computed get renderedSections() {
         TraceMobx();
@@ -631,13 +657,19 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             const col = this.sectionNoteTaking(sections[i][0], sections[i][1])
             eles.push(col)
             //TODO make this look pretty
-            // if (i < sections.length - 1) {
-            //   eles.push(
-            //     <div className={"collectionNoteTakingViewFieldColumn"}>
-            //       new div
-            //     </div>
-            //     )
-            // }
+            if (i < sections.length - 1) {
+              eles.push(
+                <div className="columnDivider" onPointerOver={e => this.onDividerPointerOver(e, i)} key={i}
+                    style={{
+                      height: "100%",
+                      width: 50,
+                      padding: `0 10 10 0`,
+                      margin: "auto",
+                      backgroundColor: "black"
+                    }}
+                />
+              )
+            }
         }
         return eles
     }
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
new file mode 100644
index 000000000..11e1b5d62
--- /dev/null
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -0,0 +1,28 @@
+import { auto } from "async";
+import { action } from "mobx";
+import * as React from "react";
+import { DragManager } from "../../util/DragManager";
+
+interface DividerProps {
+  index: number
+  columnStartXCoords: number[]
+  xMargin: number
+}
+
+export default class Divider extends React.Component<DividerProps>{
+
+  
+
+  render() {
+    return (
+      <div style={{
+          height: "100%",
+          width: 50,
+          padding: `0 10 10 0`,
+          margin: "auto",
+          backgroundColor: "black"
+        }}
+      />
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index b9bed7174..55cfa3348 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -59,7 +59,6 @@ interface CSVFieldColumnProps {
 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) {
@@ -70,7 +69,8 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         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
+      // TODO make the math work here. 35 is half of 70, which is the current width of the divider
+      return endColValue - this.props.columnStartXCoords[i] - 35
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -312,14 +312,12 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
 
     render() {
         TraceMobx();
-        const headings = this.props.headings();
         const heading = this._heading;
-        const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
             <div className={"collectionNoteTakingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading}
                 style={{
                   //TODO: change this so that it's based on the column width 
-                    width: `${100 / (uniqueHeadings.length || 1)}%`,
+                    width: this.columnWidth,
                     height: "100%",
                     background: this._background
                 }}