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

4 files changed, 179 insertions, 117 deletions

diff --git a/.vscode/launch.json b/.vscode/launch.json
index a7c30ca1e..9692c79d9 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -4,106 +4,110 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "sourceMaps": true,
-            "breakOnLoad": true,
-            "url": "http://localhost:1050/login",
-            "webRoot": "${workspaceFolder}",
-            "runtimeArgs": [
-                "--experimental-modules"
-            ]
-        },
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chromium against localhost",
-            "sourceMaps": true,
-            "breakOnLoad": true,
-            "url": "http://localhost:1050/login",
-            "webRoot": "${workspaceFolder}",
-            "runtimeExecutable": "/usr/bin/chromium",
-            "runtimeArgs": [
-                "--experimental-modules"
-            ]
-        },
-        {
-            "type": "firefox",
-            "request": "launch",
-            "name": "Launch Firefox against localhost",
-            //"sourceMaps": "client",
-            "reAttach": true,
-            "url": "http://localhost:1050/login",
-            "webRoot": "${workspaceFolder}",
-        },
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against Dash server",
-            "sourceMaps": true,
-            "breakOnLoad": true,
-            "url": "https://browndash.com/login",
-            //"url": "http://dash-web.eastus2.cloudapp.azure.com:1050/login",
-            "webRoot": "${workspaceFolder}",
-        },
-        {
-            "type": "node",
-            "request": "attach",
-            "name": "Typescript Server",
-            "protocol": "inspector",
-            "port": 9229,
-            "localRoot": "${workspaceFolder}",
-            "remoteRoot": "${workspaceFolder}"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Current TS File",
-            "runtimeExecutable": "npx",
-            "runtimeArgs": [
-                "ts-node-dev",
-                "--nolazy",
-                "--inspect",
-                "--",
-                "${relativeFile}"
-            ],
-            "port": 9229
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Mocha Tests",
-            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
-            "args": [
-                "-r",
-                "ts-node/register",
-                "--timeout",
-                "999999",
-                "--colors",
-                "${workspaceFolder}/test/**/*.ts"
-            ],
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "openOnSessionStart",
-            "protocol": "inspector"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Mocha Current File",
-            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
-            "args": [
-                "-r",
-                "ts-node/register",
-                "--timeout",
-                "999999",
-                "--colors",
-                "${file}"
-            ],
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "openOnSessionStart",
-            "protocol": "inspector"
-        },
+      {
+        "type": "chrome",
+        "request": "launch",
+        "name": "Launch Chrome against localhost",
+        "sourceMaps": true,
+        "breakOnLoad": true,
+        "url": "http://localhost:1050/login",
+        "webRoot": "${workspaceFolder}",
+        "runtimeArgs": [
+          "--experimental-modules"
+        ]
+      },
+      {
+        "type": "chrome",
+        "request": "launch",
+        "name": "Launch Chromium against localhost",
+        "sourceMaps": true,
+        "breakOnLoad": true,
+        "url": "http://localhost:1050/login",
+        "webRoot": "${workspaceFolder}",
+        "runtimeExecutable": "/usr/bin/chromium",
+        "runtimeArgs": [
+          "--experimental-modules"
+        ]
+      },
+      {
+        "type": "firefox",
+        "request": "launch",
+        "name": "Launch Firefox against localhost",
+        "reAttach": true,
+        "url": "http://localhost:1050/login",
+        "webRoot": "${workspaceFolder}",
+        "pathMappings": [
+          {
+            "url": "webpack://dash/src",
+            "path": "${workspaceFolder}/src"
+          }
+        ]
+      },
+      {
+        "type": "chrome",
+        "request": "launch",
+        "name": "Launch Chrome against Dash server",
+        "sourceMaps": true,
+        "breakOnLoad": true,
+        "url": "https://browndash.com/login",
+        "webRoot": "${workspaceFolder}"
+      },
+      {
+        "type": "node",
+        "request": "attach",
+        "name": "Typescript Server",
+        "protocol": "inspector",
+        "port": 9229,
+        "localRoot": "${workspaceFolder}",
+        "remoteRoot": "${workspaceFolder}"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Current TS File",
+        "runtimeExecutable": "npx",
+        "runtimeArgs": [
+          "ts-node-dev",
+          "--nolazy",
+          "--inspect",
+          "--",
+          "${relativeFile}"
+        ],
+        "port": 9229
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Mocha Tests",
+        "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-r",
+          "ts-node/register",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/test/**/*.ts"
+        ],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "openOnSessionStart",
+        "protocol": "inspector"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Mocha Current File",
+        "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-r",
+          "ts-node/register",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${file}"
+        ],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "openOnSessionStart",
+        "protocol": "inspector"
+      }
     ]
 }
\ No newline at end of file
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
                 }}