From d8a6895dc4347587244d1d220691431e1d7d638f Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Tue, 26 Apr 2022 20:47:54 -0400
Subject: attempt with columnResizer. Not sure about how to handle resize
 events

---
 .../CollectionNoteTakingViewDivider.tsx            | 28 ++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/client/views/collections/CollectionNoteTakingViewDivider.tsx

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

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
-- 
cgit v1.2.3-70-g09d2


From 28e636ef7d7ed541dd735ec5cb9e29a6505ac787 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 28 Apr 2022 09:57:21 -0400
Subject: making changes to array, but no visual ones

---
 .../views/collections/CollectionNoteTakingView.tsx | 27 +++++----
 .../CollectionNoteTakingViewDivider.tsx            | 67 ++++++++++++++++++----
 2 files changed, 72 insertions(+), 22 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 785732659..818c5b671 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -26,6 +26,7 @@ import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewF
 import "./CollectionNoteTakingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
+import CollectionNoteTakingViewDivider from "./CollectionNoteTakingViewDivider";
 const _global = (window /* browser */ || global /* node */) as any;
 
 
@@ -659,18 +660,22 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             //TODO make this look pretty
             if (i < sections.length - 1) {
               eles.push(
-                <div style={{display: "flex", alignItems: "center", cursor: "col-resize"}}>
-                  <div className="columnDivider" onPointerOver={e => this.onDividerPointerOver(e, i)} key={i}
-                    style={{
-                      height: "95%",
-                      width: 12,
-                      borderRight: "4px solid #282828",
-                      borderLeft: "4px solid #282828",
-                      margin: "0px 10px"
-                    }}
+                // <div style={{display: "flex", alignItems: "center", cursor: "col-resize"}}>
+                //   <div className="columnDivider" onPointerOver={e => this.onDividerPointerOver(e, i)} key={i}
+                //     style={{
+                //       height: "95%",
+                //       width: 12,
+                //       borderRight: "4px solid #282828",
+                //       borderLeft: "4px solid #282828",
+                //       margin: "0px 10px"
+                //     }}
+                // />
+                // </div>
+                <CollectionNoteTakingViewDivider
+                  index={i}
+                  columnStartXCoords={this.columnStartXCoords}
+                  xMargin={this.xMargin}
                 />
-                </div>
-                
               )
             }
         }
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 11e1b5d62..9b4af16ce 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,7 +1,5 @@
-import { auto } from "async";
-import { action } from "mobx";
+import { action, observable } from "mobx";
 import * as React from "react";
-import { DragManager } from "../../util/DragManager";
 
 interface DividerProps {
   index: number
@@ -10,19 +8,66 @@ interface DividerProps {
 }
 
 export default class Divider extends React.Component<DividerProps>{
-
+  @observable private isHoverActive = false;
+  @observable private isResizingActive = false;
   
+  @action
+  private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
+      window.removeEventListener("pointermove", this.onPointerMove);
+      window.removeEventListener("pointerup", this.onPointerUp);
+      window.addEventListener("pointermove", this.onPointerMove);
+      window.addEventListener("pointerup", this.onPointerUp);
+      this.isResizingActive = true;
+  }
+
+  @action
+  private onPointerUp = () => {
+      this.isResizingActive = false;
+      this.isHoverActive = false;
+      window.removeEventListener("pointermove", this.onPointerMove);
+      window.removeEventListener("pointerup", this.onPointerUp);
+  }
 
+  @action
+  onPointerMove = ({ movementX }: PointerEvent) => {
+    // if (DragManager.docsBeingDragged.length == 0) {
+      // //convert client X to how we're doing stuff
+      // const xPos = e.clientX + 2 * this.props.xMargin
+      // // get difference (-25 is because that's the center of the divider)
+      // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25
+      // const diff = xDividerPos - xPos
+      // // make a copy of the array
+      // const colXCoords : number[] = []
+      // this.props.columnStartXCoords.forEach(val => colXCoords.push(val))
+      this.props.columnStartXCoords[this.props.index + 1] += movementX
+      console.log(this.props.columnStartXCoords)
+      // this.props.columnStartXCoords = colXCoords
+    // }
+  }
+  
   render() {
     return (
-      <div style={{
-          height: "100%",
-          width: 50,
-          padding: `0 10 10 0`,
-          margin: "auto",
-          backgroundColor: "black"
+      <div className="columnResizer"
+        style={{
+          display: "flex", 
+          alignItems: "center", 
+          cursor: "col-resize"
         }}
-      />
+        onPointerEnter={action(() => this.isHoverActive = true)}
+        onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
+      >
+        <div className="columnResizer-handler" onPointerDown={e => this.registerResizing(e)}
+          style={{
+            height: "95%",
+            width: 12,
+            borderRight: "4px solid #282828",
+            borderLeft: "4px solid #282828",
+            margin: "0px 10px"
+          }}
+        />
+      </div>
     )
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 6f17d019715ee20a29588edac94c790e57628be9 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 28 Apr 2022 10:18:53 -0400
Subject: still struggling

---
 .../views/collections/CollectionNoteTakingView.tsx | 40 ++++++++++++++--------
 .../CollectionNoteTakingViewDivider.tsx            | 10 +++---
 2 files changed, 31 insertions(+), 19 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 818c5b671..4bb16b01e 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -85,6 +85,9 @@ 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.state = {
+            //   columnStartXCoords: [0]
+            // }
             this.columnStartXCoords = [0]
         } else {
           //TODO instantiate columnStartXCoords and dividerXCoords
@@ -628,20 +631,25 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     //   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
-      }
+    // @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
+    //   }
+    // }
+
+    setColumnStartXCoords = (newCoords: number[]) => {
+      this.columnStartXCoords = newCoords
+      console.log(this.columnStartXCoords)
     }
 
     // 
@@ -674,6 +682,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 <CollectionNoteTakingViewDivider
                   index={i}
                   columnStartXCoords={this.columnStartXCoords}
+                  setColumnStartXCoords={this.setColumnStartXCoords}
                   xMargin={this.xMargin}
                 />
               )
@@ -757,7 +766,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                     onPointerDown={this.onPointerDown}
                     onDrop={this.onExternalDrop.bind(this)}
                     onContextMenu={this.onContextMenu}
-                    onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
+                    onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} 
+                  >
                     {this.renderedSections}
                 </div>
             </>
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 9b4af16ce..3655c3f38 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -5,6 +5,7 @@ interface DividerProps {
   index: number
   columnStartXCoords: number[]
   xMargin: number
+  setColumnStartXCoords: (newCoords: number[]) => void
 }
 
 export default class Divider extends React.Component<DividerProps>{
@@ -39,10 +40,11 @@ export default class Divider extends React.Component<DividerProps>{
       // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25
       // const diff = xDividerPos - xPos
       // // make a copy of the array
-      // const colXCoords : number[] = []
-      // this.props.columnStartXCoords.forEach(val => colXCoords.push(val))
-      this.props.columnStartXCoords[this.props.index + 1] += movementX
-      console.log(this.props.columnStartXCoords)
+      const colXCoords : number[] = []
+      this.props.columnStartXCoords.forEach(val => colXCoords.push(val))
+      colXCoords[this.props.index + 1] += movementX
+      this.props.setColumnStartXCoords(colXCoords)
+      // console.log(this.props.columnStartXCoords)
       // this.props.columnStartXCoords = colXCoords
     // }
   }
-- 
cgit v1.2.3-70-g09d2


From d9ac13fd73568c4ed4ec939a5d63dda455bc4e5f Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 28 Apr 2022 12:35:34 -0400
Subject: pushing prior to sprint

---
 .../views/collections/CollectionNoteTakingView.tsx     | 18 ++++--------------
 .../collections/CollectionNoteTakingViewDivider.tsx    | 10 +++++-----
 2 files changed, 9 insertions(+), 19 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 4bb16b01e..79e3c5f4b 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -303,12 +303,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       const heading = d[this.pivotField] as object
       const castedSectionValue = heading.toString()
       const existingHeader = this.columnHeaders.find(sh => sh.heading === (castedSectionValue));
+      const colStartXCoords = this.columnStartXCoords
       if (existingHeader) {
         const index = this.columnHeaders.indexOf(existingHeader)
         if (this.columnHeaders.length == 1) {
-          return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap - 100
+          return this.props.PanelWidth() - colStartXCoords[index] - 4 * this.gridGap - 100
         } 
-        return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap - 100
+        return colStartXCoords[index + 1] - colStartXCoords[index] - 2 * this.gridGap - 100
       }
       return 1000;
     }
@@ -668,21 +669,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             //TODO make this look pretty
             if (i < sections.length - 1) {
               eles.push(
-                // <div style={{display: "flex", alignItems: "center", cursor: "col-resize"}}>
-                //   <div className="columnDivider" onPointerOver={e => this.onDividerPointerOver(e, i)} key={i}
-                //     style={{
-                //       height: "95%",
-                //       width: 12,
-                //       borderRight: "4px solid #282828",
-                //       borderLeft: "4px solid #282828",
-                //       margin: "0px 10px"
-                //     }}
-                // />
-                // </div>
                 <CollectionNoteTakingViewDivider
                   index={i}
                   columnStartXCoords={this.columnStartXCoords}
-                  setColumnStartXCoords={this.setColumnStartXCoords}
+                  setColumnStartXCoords={this.setColumnStartXCoords.bind(this)}
                   xMargin={this.xMargin}
                 />
               )
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 3655c3f38..731ac556e 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -40,11 +40,11 @@ export default class Divider extends React.Component<DividerProps>{
       // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25
       // const diff = xDividerPos - xPos
       // // make a copy of the array
-      const colXCoords : number[] = []
-      this.props.columnStartXCoords.forEach(val => colXCoords.push(val))
-      colXCoords[this.props.index + 1] += movementX
-      this.props.setColumnStartXCoords(colXCoords)
-      // console.log(this.props.columnStartXCoords)
+      // const colXCoords = [...this.props.columnStartXCoords]
+      // colXCoords[this.props.index + 1] += movementX
+      this.props.columnStartXCoords[this.props.index + 1] += movementX
+      // this.props.setColumnStartXCoords(colXCoords)
+      console.log(this.props.columnStartXCoords)
       // this.props.columnStartXCoords = colXCoords
     // }
   }
-- 
cgit v1.2.3-70-g09d2


From a71c320db74ff4b3eb66a4981c035ae423c437ef Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 28 Apr 2022 16:18:36 -0400
Subject: best yet?

---
 .../views/collections/CollectionNoteTakingView.tsx     | 10 ++++++----
 .../collections/CollectionNoteTakingViewDivider.tsx    | 18 ++----------------
 2 files changed, 8 insertions(+), 20 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 79e3c5f4b..e7d7c15d2 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -648,8 +648,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     //   }
     // }
 
-    setColumnStartXCoords = (newCoords: number[]) => {
-      this.columnStartXCoords = newCoords
+    @action
+    setColumnStartXCoords = (movementX: number, colIndex: number) => {
+      const coords = [...this.columnStartXCoords]
+      coords[colIndex] += movementX
+      this.columnStartXCoords = coords
       console.log(this.columnStartXCoords)
     }
 
@@ -670,8 +673,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             if (i < sections.length - 1) {
               eles.push(
                 <CollectionNoteTakingViewDivider
-                  index={i}
-                  columnStartXCoords={this.columnStartXCoords}
+                  index={i + 1}
                   setColumnStartXCoords={this.setColumnStartXCoords.bind(this)}
                   xMargin={this.xMargin}
                 />
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 731ac556e..ed5dc3715 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -3,9 +3,8 @@ import * as React from "react";
 
 interface DividerProps {
   index: number
-  columnStartXCoords: number[]
   xMargin: number
-  setColumnStartXCoords: (newCoords: number[]) => void
+  setColumnStartXCoords: (movementX: number, colIndex: number) => void
 }
 
 export default class Divider extends React.Component<DividerProps>{
@@ -33,20 +32,7 @@ export default class Divider extends React.Component<DividerProps>{
 
   @action
   onPointerMove = ({ movementX }: PointerEvent) => {
-    // if (DragManager.docsBeingDragged.length == 0) {
-      // //convert client X to how we're doing stuff
-      // const xPos = e.clientX + 2 * this.props.xMargin
-      // // get difference (-25 is because that's the center of the divider)
-      // const xDividerPos = this.props.columnStartXCoords[this.props.index + 1] - 25
-      // const diff = xDividerPos - xPos
-      // // make a copy of the array
-      // const colXCoords = [...this.props.columnStartXCoords]
-      // colXCoords[this.props.index + 1] += movementX
-      this.props.columnStartXCoords[this.props.index + 1] += movementX
-      // this.props.setColumnStartXCoords(colXCoords)
-      console.log(this.props.columnStartXCoords)
-      // this.props.columnStartXCoords = colXCoords
-    // }
+    this.props.setColumnStartXCoords(movementX, this.props.index)
   }
   
   render() {
-- 
cgit v1.2.3-70-g09d2


From 55bac585fa0b8d6c3f513ccecb22456d1d361040 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 3 Aug 2022 13:33:38 -0400
Subject: fixes for dragging notes so that they highlight properly and go to
 the right place when embedded in freeform views.

---
 src/client/documents/Documents.ts                  |   9 +-
 src/client/util/CurrentUserUtils.ts                |   3 +-
 src/client/util/DragManager.ts                     |  12 +-
 src/client/views/DocumentDecorations.tsx           |   2 +-
 src/client/views/StyleProvider.tsx                 |   8 +-
 .../views/collections/CollectionNoteTakingView.tsx |  91 +++---
 .../collections/CollectionNoteTakingViewColumn.tsx | 358 +++++++++++----------
 .../CollectionNoteTakingViewDivider.tsx            | 112 +++----
 .../views/collections/CollectionStackingView.tsx   |   4 +-
 src/client/views/nodes/DocumentView.tsx            |  30 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   6 +-
 11 files changed, 332 insertions(+), 303 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 32d7152fd..9d00664ad 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1036,7 +1036,14 @@ export namespace Docs {
         }
 
         export function NoteTakingDocument(documents: Array<Doc>, options: DocumentOptions, id?: string, protoId?: string) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.NoteTaking }, id, undefined, protoId);
+            return InstanceFromProto(
+                Prototypes.get(DocumentType.COL),
+                new List(documents),
+                { columnHeaders: new List<SchemaHeaderField>([new SchemaHeaderField('Untitled')]), ...options, _viewType: CollectionViewType.NoteTaking },
+                id,
+                undefined,
+                protoId
+            );
         }
 
         export function MulticolumnDocument(documents: Array<Doc>, options: DocumentOptions) {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 28dc44c25..7856c913b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -135,7 +135,6 @@ export class CurrentUserUtils {
         return DocUtils.AssignOpts(tempClicks, reqdOpts, reqdClickList) ?? (doc[field] = Docs.Create.TreeDocument(reqdClickList, reqdOpts));
     }
 
-
     /// Initializes templates that can be applied to notes
     static setupNoteTemplates(doc: Doc, field="template-notes") {
         const tempNotes = DocCast(doc[field]);
@@ -255,6 +254,7 @@ export class CurrentUserUtils {
                           creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _autoHeight: true }},
+            {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200 }},
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100 }},
             {key: "Equation",   creator: opts => Docs.Create.EquationDocument(opts),        opts: { _width: 300, _height: 35, _fitWidth:false, _backgroundGridShow: true, }},
             {key: "Webpage",    creator: opts => Docs.Create.WebDocument("",opts),          opts: { _width: 400, _height: 512, _nativeWidth: 850, useCors: true, }},
@@ -280,6 +280,7 @@ export class CurrentUserUtils {
         
         return [
             { toolTip: "Tap or drag to create a note",            title: "Note", icon: "sticky-note",   dragFactory: doc.emptyNote as Doc, },
+            { toolTip: "Tap or drag to create a note board",      title: "Notes", icon: "folder",       dragFactory: doc.emptyNoteboard as Doc, },
             { toolTip: "Tap or drag to create a collection",      title: "Col", icon: "folder",         dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab),  scripts: { onClick: 'openOnRight(copyDragFactory(this.clickFactory))', onDragStart: '{ return copyDragFactory(this.dragFactory);}'}, },
             { toolTip: "Tap or drag to create an equation",       title: "Math", icon: "calculator",    dragFactory: doc.emptyEquation as Doc, },
             { toolTip: "Tap or drag to create a webpage",         title: "Web", icon: "globe-asia",     dragFactory: doc.emptyWebpage as Doc, },
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 3a1bb1673..f4987cf34 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,4 +1,4 @@
-import { action } from 'mobx';
+import { action, observable, runInAction } from 'mobx';
 import { DateField } from '../../fields/DateField';
 import { Doc, Field, Opt } from '../../fields/Doc';
 import { List } from '../../fields/List';
@@ -320,7 +320,7 @@ export namespace DragManager {
             y: snapVal([yFromTop, yFromBottom], e.pageY, SnappingManager.horizSnapLines()),
         };
     }
-    export let docsBeingDragged: Doc[] = [];
+    export let docsBeingDragged: Doc[] = observable([] as Doc[]);
     export let CanEmbed = false;
     export let DocDragData: DocumentDragData | undefined;
     export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
@@ -349,13 +349,13 @@ export namespace DragManager {
             xs: number[] = [],
             ys: number[] = [];
 
-        docsBeingDragged = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : [];
         const elesCont = {
             left: Number.MAX_SAFE_INTEGER,
             right: Number.MIN_SAFE_INTEGER,
             top: Number.MAX_SAFE_INTEGER,
             bottom: Number.MIN_SAFE_INTEGER,
         };
+        const docsToDrag = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : [];
         const dragElements = eles.map(ele => {
             if (!ele.parentNode) dragDiv.appendChild(ele);
             const dragElement = ele.parentNode === dragDiv ? ele : (ele.cloneNode(true) as HTMLElement);
@@ -405,7 +405,7 @@ export namespace DragManager {
             });
             dragLabel.style.transform = `translate(${rect.left + (options?.offsetX || 0)}px, ${rect.top + (options?.offsetY || 0) - 20}px)`;
 
-            if (docsBeingDragged.length) {
+            if (docsToDrag.length) {
                 const pdfBox = dragElement.getElementsByTagName('canvas');
                 const pdfBoxSrc = ele.getElementsByTagName('canvas');
                 Array.from(pdfBox)
@@ -429,6 +429,8 @@ export namespace DragManager {
             return dragElement;
         });
 
+        runInAction(() => docsBeingDragged.push(...docsToDrag));
+
         const hideDragShowOriginalElements = (hide: boolean) => {
             dragLabel.style.display = hide ? '' : 'none';
             !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
@@ -456,7 +458,7 @@ export namespace DragManager {
             SnappingManager.SetIsDragging(false);
             SnappingManager.clearSnapLines();
             batch.end();
-            docsBeingDragged = [];
+            docsBeingDragged.length = 0;
         });
         var startWindowDragTimer: any;
         const moveHandler = (e: PointerEvent) => {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index c53e61699..0db9eab69 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -351,7 +351,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
+        DragManager.docsBeingDragged.push(...SelectionManager.Views().map(dv => dv.rootDoc));
         this._inkDragDocs = DragManager.docsBeingDragged
             .filter(doc => doc.type === DocumentType.INK)
             .map(doc => {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 692f7b98e..a83163eb0 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -110,8 +110,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             return undefined;
         case StyleProp.WidgetColor:
             return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? 'lightgrey' : 'dimgrey';
-            // return doc = dragManager.dragDocument ? props.dragEffects.opacity??CastofOpacityonline94 : Cast())
-            // same idea for background Color
+        // return doc = dragManager.dragDocument ? props.dragEffects.opacity??CastofOpacityonline94 : Cast())
+        // same idea for background Color
         case StyleProp.Opacity:
             return Cast(doc?._opacity, 'number', Cast(doc?.opacity, 'number', null));
         case StyleProp.HideLinkButton:
@@ -156,7 +156,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.JitterRotation:
             return comicStyle() ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
         case StyleProp.HeaderMargin:
-            return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) || (doc?.type === DocumentType.RTF && !showTitle()?.includes('noMargin')) || doc?.type === DocumentType.LABEL) &&
+            return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) ||
+                (doc?.type === DocumentType.RTF && !showTitle()?.includes('noMargin')) ||
+                doc?.type === DocumentType.LABEL) &&
                 showTitle() &&
                 !StrCast(doc?.showTitle).includes(':hover')
                 ? 15
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index f442559fb..1854a4213 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import { CursorProperty } from 'csstype';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { DataSym, Doc, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
@@ -21,10 +21,12 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { LightboxView } from '../LightboxView';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from '../nodes/DocumentView';
+import { FieldViewProps } from '../nodes/FieldView';
+import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { StyleProp } from '../StyleProvider';
 import './CollectionNoteTakingView.scss';
 import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn';
-import CollectionNoteTakingViewDivider from './CollectionNoteTakingViewDivider';
+import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider';
 import { CollectionSubView } from './CollectionSubView';
 const _global = (window /* browser */ || global) /* node */ as any;
 
@@ -40,7 +42,6 @@ export type collectionNoteTakingViewProps = {
 
 @observer
 export class CollectionNoteTakingView extends CollectionSubView<Partial<collectionNoteTakingViewProps>>() {
-    _pivotFieldDisposer?: IReactionDisposer;
     _autoHeightDisposer?: IReactionDisposer;
     _masonryGridRef: HTMLDivElement | null = null;
     _draggerRef = React.createRef<HTMLDivElement>();
@@ -54,10 +55,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
     @computed get columnHeaders() {
-        return Cast(this.layoutDoc._columnHeaders, listSpec(SchemaHeaderField), null);
+        return Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
     }
-    @computed get pivotField() {
-        return 'Col';
+    @computed get notetakingCategoryField() {
+        return 'noteTakingCategory';
     }
     @computed get filteredChildren() {
         return this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout);
@@ -90,7 +91,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     constructor(props: any) {
         super(props);
         if (this.columnHeaders === undefined) {
-            this.layoutDoc._columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]);
+            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]);
             this.columnStartXCoords = [0];
             // add all of the docs that have not been added to a column to this new column
         } else {
@@ -126,18 +127,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // filter out the currently dragged docs from the child docs, since we will insert them later
         if (rowCol.length && DragManager.docsBeingDragged.length) {
             const docIdsToRemove = new Set();
-            DragManager.docsBeingDragged.forEach(d => {
-                docIdsToRemove.add(d[Id]);
-            });
+            DragManager.docsBeingDragged.forEach(d => docIdsToRemove.add(d[Id]));
             docs = docs.filter(d => !docIdsToRemove.has(d[Id]));
         }
 
         // this will sort the docs into the correct columns (minus the ones you're currently dragging)
         docs.map(d => {
-            if (!d[this.pivotField]) {
-                d[this.pivotField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`;
+            if (!d[this.notetakingCategoryField]) {
+                d[this.notetakingCategoryField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`;
             }
-            const sectionValue = d[this.pivotField] as object;
+            const sectionValue = d[this.notetakingCategoryField] as object;
 
             // look for if header exists already
             const existingHeader = columnHeaders.find(sh => sh.heading === sectionValue.toString());
@@ -156,14 +155,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return sections;
     }
 
+    removeDocDragHighlight = () => {
+        setTimeout(
+            action(() => (this.docsDraggedRowCol.length = 0)),
+            100
+        );
+    };
     componentDidMount() {
         super.componentDidMount?.();
-        // reset section headers when a new filter is inputted
-        this._pivotFieldDisposer = reaction(
-            () => this.pivotField,
-            () => (this.layoutDoc._columnHeaders = new List())
-        );
-
+        document.addEventListener('pointerup', this.removeDocDragHighlight, true);
         this._autoHeightDisposer = reaction(
             () => 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', ''))))))
@@ -171,8 +171,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     }
 
     componentWillUnmount() {
+        document.removeEventListener('pointerup', this.removeDocDragHighlight, true);
         super.componentWillUnmount();
-        this._pivotFieldDisposer?.();
         this._autoHeightDisposer?.();
     }
 
@@ -227,6 +227,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     };
 
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => {
+        if (property === StyleProp.BoxShadow && doc && DragManager.docsBeingDragged.includes(doc)) {
+            return `#9c9396  ${StrCast(doc?.boxShadow, '10px 10px 0.9vw')}`;
+        }
         if (property === StyleProp.Opacity && doc) {
             if (this.props.childOpacity) {
                 return this.props.childOpacity();
@@ -258,9 +261,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 docViewPath={this.props.docViewPath}
                 fitWidth={this.props.childFitWidth}
                 isContentActive={emptyFunction}
-                originalBackgroundColor={StrCast(doc.backgroundColor)}
+                onKey={this.onKeyDown}
                 //TODO: change this from a prop to a parameter passed into a function
-                isNoteTakingView={true}
+                dontHideOnDrag={true}
                 isDocumentActive={this.isContentActive}
                 LayoutTemplate={this.props.childLayoutTemplate}
                 LayoutTemplateString={this.props.childLayoutString}
@@ -307,7 +310,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // how to get the width of a document. Currently returns the width of the column (minus margins)
     // if a note doc. Otherwise, returns the normal width (for graphs, images, etc...)
     getDocWidth(d: Doc) {
-        const heading = d[this.pivotField] as object;
+        const heading = d[this.notetakingCategoryField] as object;
         const castedSectionValue = heading.toString();
         const existingHeader = this.columnHeaders.find(sh => sh.heading === castedSectionValue);
         const colStartXCoords = this.columnStartXCoords;
@@ -364,20 +367,14 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         if (DragManager.docsBeingDragged.length && this.childDocList) {
             // get the current docs for the column based on the mouse's x coordinate
             // will use again later, which is why we're saving as local
-            const xCoord = e.clientX - 2 * this.gridGap;
+            const xCoord = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0] - 2 * this.gridGap;
             const colDocs = this.getDocsFromXCoord(xCoord);
             // get the index for where you need to insert the doc you are currently dragging
-            const clientY = e.clientY;
+            const clientY = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[1];
             let dropInd = -1;
-            // unsure whether we still want this dropAfter field
-            // let dropAfter = 0;
-            // manually set to 140, because not sure how to get exact value
-            let pos0 = 140;
+            let pos0 = (this.refList.lastElement() as HTMLDivElement).children[0].getBoundingClientRect().height + this.yMargin * 2;
             colDocs.forEach((doc, i) => {
-                const noteTakingDocTransform = () => this.getDocTransform(doc);
-                let pos1 = noteTakingDocTransform()
-                    .inverse()
-                    .transformPoint(0, this.getDocHeight(doc) + 2 * this.gridGap)[1];
+                let pos1 = this.getDocHeight(doc) + 2 * this.gridGap;
                 pos1 += pos0;
                 // updating drop position based on y coordinates
                 const yCoordInBetween = clientY > pos0 && (clientY < pos1 || i == colDocs.length - 1);
@@ -393,10 +390,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             // we alter the pivot fields of the docs in case they are moved to a new column.
             const colIndex = this.getColumnFromXCoord(xCoord);
             const colHeader = StrCast(this.columnHeaders[colIndex].heading);
-            DragManager.docsBeingDragged.forEach(d => (d[this.pivotField] = colHeader));
+            DragManager.docsBeingDragged.forEach(d => (d[this.notetakingCategoryField] = colHeader));
             // used to notify sections to re-render
-            // console.log([dropInd, this.getColumnFromXCoord(xCoord)])
-            this.docsDraggedRowCol = [dropInd, this.getColumnFromXCoord(xCoord)];
+            this.docsDraggedRowCol.length = 0;
+            this.docsDraggedRowCol.push(dropInd, this.getColumnFromXCoord(xCoord));
         }
     };
 
@@ -425,7 +422,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         if (docs) {
             docs.map(d => {
                 if (d instanceof Promise) return;
-                const sectionValue = d[this.pivotField] as object;
+                const sectionValue = d[this.notetakingCategoryField] as object;
                 if (sectionValue.toString() == colHeader) {
                     docsMatchingHeader.push(d);
                 }
@@ -434,13 +431,24 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return docsMatchingHeader;
     };
 
+    @undoBatch
+    @action
+    onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => {
+        const docView = fieldProps.DocumentView?.();
+        if (docView && (e.ctrlKey || docView.rootDoc._singleLine) && ['Enter'].includes(e.key)) {
+            e.stopPropagation?.();
+            const newDoc = Doc.MakeCopy(docView.rootDoc, true);
+            Doc.GetProto(newDoc).text = undefined;
+            FormattedTextBox.SelectOnLoad = newDoc[Id];
+            return this.addDocument?.(newDoc);
+        }
+    };
+
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.docDragData) {
             if (super.onInternalDrop(e, de)) {
-                DragManager.docsBeingDragged = [];
-                // this.docsDraggedRowCol = []
                 // filter out the currently dragged docs from the child docs, since we will insert them later
                 const rowCol = this.docsDraggedRowCol;
                 const droppedDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= this.childDocs.length); // if the drop operation adds something to the end of the list, then use that as the new document (may be different than what was dropped e.g., in the case of a button which is dropped but which creates say, a note).
@@ -456,10 +464,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                     if (rowCol[0] <= 0) {
                         docs.splice(0, 0, ...newDocs);
                     } else {
-                        const colDocs = this.getDocsFromXCoord(de.x);
+                        const colDocs = this.getDocsFromXCoord(this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]);
                         const previousDoc = colDocs[rowCol[0] - 1];
                         const previousDocIndex = docs.indexOf(previousDoc);
-                        console.log(`docs: ${previousDocIndex}`);
                         docs.splice(previousDocIndex + 1, 0, ...newDocs);
                     }
                 }
@@ -561,7 +568,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 renderChildren={this.children}
                 numGroupColumns={this.numGroupColumns}
                 gridGap={this.gridGap}
-                pivotField={this.pivotField}
+                pivotField={this.notetakingCategoryField}
                 columnStartXCoords={this.columnStartXCoords}
                 maxColWidth={this.maxColWdith}
                 PanelWidth={this.PanelWidth}
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index bdcb9c399..55d032498 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -1,27 +1,27 @@
-import React = require("react");
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt } from "../../../fields/Doc";
-import { Id } from "../../../fields/FieldSymbols";
-import { RichTextField } from "../../../fields/RichTextField";
-import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
-import { ScriptField } from "../../../fields/ScriptField";
-import { ImageField } from "../../../fields/URLField";
-import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnEmptyString, setupMoveUpEvents } from "../../../Utils";
-import { Docs, DocUtils } from "../../documents/Documents";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { DragManager } from "../../util/DragManager";
-import { SnappingManager } from "../../util/SnappingManager";
-import { Transform } from "../../util/Transform";
-import { undoBatch } from "../../util/UndoManager";
-import { ContextMenu } from "../ContextMenu";
-import { ContextMenuProps } from "../ContextMenuItem";
-import { EditableView } from "../EditableView";
-import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
-import "./CollectionNoteTakingView.scss";
-const higflyout = require("@hig/flyout");
+import React = require('react');
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { Id } from '../../../fields/FieldSymbols';
+import { RichTextField } from '../../../fields/RichTextField';
+import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
+import { ScriptField } from '../../../fields/ScriptField';
+import { ImageField } from '../../../fields/URLField';
+import { TraceMobx } from '../../../fields/util';
+import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils';
+import { Docs, DocUtils } from '../../documents/Documents';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { DragManager } from '../../util/DragManager';
+import { SnappingManager } from '../../util/SnappingManager';
+import { Transform } from '../../util/Transform';
+import { undoBatch } from '../../util/UndoManager';
+import { ContextMenu } from '../ContextMenu';
+import { ContextMenuProps } from '../ContextMenuItem';
+import { EditableView } from '../EditableView';
+import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
+import './CollectionNoteTakingView.scss';
+const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
@@ -39,7 +39,7 @@ interface CSVFieldColumnProps {
     // columnWidth: number;
     numGroupColumns: number;
     gridGap: number;
-    type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined;
+    type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined;
     headings: () => object[];
     renderChildren: (docs: Doc[]) => JSX.Element[];
     addDocument: (doc: Doc | Doc[]) => boolean;
@@ -48,37 +48,37 @@ interface CSVFieldColumnProps {
     observeHeight: (myref: any) => void;
     unobserveHeight: (myref: any) => void;
     editableViewProps: any;
-    resizeColumns: (n: number) => void
-    columnStartXCoords: number[]
-    PanelWidth: number
-    maxColWidth: number
+    resizeColumns: (n: number) => void;
+    columnStartXCoords: number[];
+    PanelWidth: number;
+    maxColWidth: number;
     // docsByColumnHeader: Map<string, Doc[]>
     // setDocsForColHeader: (key: string, docs: Doc[]) => void
 }
 
 @observer
 export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
-    @observable private _background = "inherit";
+    @observable private _background = 'inherit';
 
     @computed get columnWidth() {
-      // base cases
-      if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) {
-        return this.props.maxColWidth
-      }
-      const i = this.props.columnHeaders.indexOf(this.props.headingObject)
-      if (i < 0) {
-        return this.props.maxColWidth
-      }
-      const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i+1]
-      // 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] - 30
+        // base cases
+        if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) {
+            return this.props.maxColWidth;
+        }
+        const i = this.props.columnHeaders.indexOf(this.props.headingObject);
+        if (i < 0) {
+            return this.props.maxColWidth;
+        }
+        const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1];
+        // 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] - 30;
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
     private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
-    @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+    @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb';
     _ele: HTMLElement | null = null;
 
     // This is likely similar to what we will be doing. Why do we need to make these refs?
@@ -90,7 +90,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             this.props.observeHeight(ele);
             this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this));
         }
-    }
+    };
 
     componentWillUnmount() {
         this.props.unobserveHeight(this._ele);
@@ -105,10 +105,10 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     getValue = (value: string): any => {
         const parsed = parseInt(value);
         if (!isNaN(parsed)) return parsed;
-        if (value.toLowerCase().indexOf("true") > -1) return true;
-        if (value.toLowerCase().indexOf("false") > -1) return false;
+        if (value.toLowerCase().indexOf('true') > -1) return true;
+        if (value.toLowerCase().indexOf('false') > -1) return false;
         return value;
-    }
+    };
 
     @action
     headingChanged = (value: string, shiftDown?: boolean) => {
@@ -117,7 +117,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             if (this.props.columnHeaders?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) {
                 return false;
             }
-            this.props.docList.forEach(d => d[this.props.pivotField] = castedValue);
+            this.props.docList.forEach(d => (d[this.props.pivotField] = castedValue));
             if (this.props.headingObject) {
                 this.props.headingObject.setHeading(castedValue.toString());
                 this._heading = this.props.headingObject.heading;
@@ -125,11 +125,11 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             return true;
         }
         return false;
-    }
+    };
 
-    @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = "#b4b4b4");
-    @action pointerLeave = () => this._background = "inherit";
-    textCallback = (char: string) => this.addNewTextDoc("-typed text-", false, true);
+    @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = '#b4b4b4');
+    @action pointerLeave = () => (this._background = 'inherit');
+    textCallback = (char: string) => this.addNewTextDoc('-typed text-', false, true);
 
     @action
     addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
@@ -139,46 +139,46 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         const colValue = this.getValue(this.props.heading);
         newDoc[key] = colValue;
         FormattedTextBox.SelectOnLoad = newDoc[Id];
-        FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? "" : " ";
+        FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' ';
         return this.props.addDocument?.(newDoc) || false;
-    }
+    };
 
     @action
     deleteColumn = () => {
         if (!this.props.columnHeaders) {
-          return
+            return;
         }
         if (this.props.headingObject) {
-          const index = this.props.columnHeaders.indexOf(this.props.headingObject);
-          const newIndex = index == 0 ? 1 : index - 1
-          const newHeader = this.props.columnHeaders[newIndex];
-          this.props.docList.forEach(d => d[this.props.pivotField] = newHeader.heading.toString())
-          this.props.columnHeaders.splice(index, 1);
-          this.props.resizeColumns(this.props.columnHeaders.length)
+            const index = this.props.columnHeaders.indexOf(this.props.headingObject);
+            const newIndex = index == 0 ? 1 : index - 1;
+            const newHeader = this.props.columnHeaders[newIndex];
+            this.props.docList.forEach(d => (d[this.props.pivotField] = newHeader.heading.toString()));
+            this.props.columnHeaders.splice(index, 1);
+            this.props.resizeColumns(this.props.columnHeaders.length);
         }
-    }
+    };
 
     headerDown = (e: React.PointerEvent<HTMLDivElement>) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
 
-    //TODO: I think this is where I'm supposed to edit stuff 
+    //TODO: I think this is where I'm supposed to edit stuff
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
-        console.log('in startDrag')
+        console.log('in startDrag');
         // is MakeAlias a way to make a copy of a doc without rendering it?
         const alias = Doc.MakeAlias(this.props.Document);
         // alias._width = this.props.columnWidth / (this.props.columnHeaders?.length || 1);
         alias._width = this.columnWidth;
         alias._pivotField = undefined;
         let value = this.getValue(this._heading);
-        value = typeof value === "string" ? `"${value}"` : value;
+        value = typeof value === 'string' ? `"${value}"` : value;
         alias.viewSpecScript = ScriptField.MakeFunction(`doc.${this.props.pivotField} === ${value}`, { doc: Doc.name });
         if (alias.viewSpecScript) {
-            const options = {hideSource: false}
+            const options = { hideSource: false };
             DragManager.StartDocumentDrag([this._headerRef.current!], new DragManager.DocumentDragData([alias]), e.clientX, e.clientY, options);
-            console.log('in startDrag')
+            console.log('in startDrag');
             return true;
         }
         return false;
-    }
+    };
 
     menuCallback = (x: number, y: number) => {
         ContextMenu.Instance.clearItems();
@@ -187,44 +187,62 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         const dataDoc = this.props.DataDoc || this.props.Document;
         const pivotValue = this.getValue(this.props.heading);
 
-        DocUtils.addDocumentCreatorMenuItems((doc) => {
-            const key = this.props.pivotField;
-            doc[key] = this.getValue(this.props.heading);
-            FormattedTextBox.SelectOnLoad = doc[Id];
-            return this.props.addDocument?.(doc);
-        }, this.props.addDocument, x, y, true, this.props.pivotField, pivotValue);
+        DocUtils.addDocumentCreatorMenuItems(
+            doc => {
+                const key = this.props.pivotField;
+                doc[key] = this.getValue(this.props.heading);
+                FormattedTextBox.SelectOnLoad = doc[Id];
+                return this.props.addDocument?.(doc);
+            },
+            this.props.addDocument,
+            x,
+            y,
+            true,
+            this.props.pivotField,
+            pivotValue
+        );
 
-        Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof (dataDoc[fieldKey]) === "string").map(fieldKey =>
-            docItems.push({
-                description: ":" + fieldKey, event: () => {
-                    const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document));
-                    if (created) {
-                        if (this.props.Document.isTemplateDoc) {
-                            Doc.MakeMetadataFieldTemplate(created, this.props.Document);
+        Array.from(Object.keys(Doc.GetProto(dataDoc)))
+            .filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof dataDoc[fieldKey] === 'string')
+            .map(fieldKey =>
+                docItems.push({
+                    description: ':' + fieldKey,
+                    event: () => {
+                        const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this.props.Document));
+                        if (created) {
+                            if (this.props.Document.isTemplateDoc) {
+                                Doc.MakeMetadataFieldTemplate(created, this.props.Document);
+                            }
+                            return this.props.addDocument?.(created);
                         }
-                        return this.props.addDocument?.(created);
-                    }
-                }, icon: "compress-arrows-alt"
-            }));
-        Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => DocListCast(dataDoc[fieldKey]).length).map(fieldKey =>
-            docItems.push({
-                description: ":" + fieldKey, event: () => {
-                    const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey });
-                    if (created) {
-                        const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document;
-                        if (container.isTemplateDoc) {
-                            Doc.MakeMetadataFieldTemplate(created, container);
-                            return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created);
+                    },
+                    icon: 'compress-arrows-alt',
+                })
+            );
+        Array.from(Object.keys(Doc.GetProto(dataDoc)))
+            .filter(fieldKey => DocListCast(dataDoc[fieldKey]).length)
+            .map(fieldKey =>
+                docItems.push({
+                    description: ':' + fieldKey,
+                    event: () => {
+                        const created = Docs.Create.CarouselDocument([], { _width: 400, _height: 200, title: fieldKey });
+                        if (created) {
+                            const container = this.props.Document.resolvedDataDoc ? Doc.GetProto(this.props.Document) : this.props.Document;
+                            if (container.isTemplateDoc) {
+                                Doc.MakeMetadataFieldTemplate(created, container);
+                                return Doc.AddDocToList(container, Doc.LayoutFieldKey(container), created);
+                            }
+                            return this.props.addDocument?.(created) || false;
                         }
-                        return this.props.addDocument?.(created) || false;
-                    }
-                }, icon: "compress-arrows-alt"
-            }));
-        !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: "Doc Fields ...", subitems: docItems, icon: "eye" });
-        !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: "Containers ...", subitems: layoutItems, icon: "eye" });
-        ContextMenu.Instance.setDefaultItem("::", (name: string): void => {
-            Doc.GetProto(this.props.Document)[name] = "";
-            const created = Docs.Create.TextDocument("", { title: name, _width: 250, _autoHeight: true });
+                    },
+                    icon: 'compress-arrows-alt',
+                })
+            );
+        !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: 'Doc Fields ...', subitems: docItems, icon: 'eye' });
+        !Doc.UserDoc().noviceMode && ContextMenu.Instance.addItem({ description: 'Containers ...', subitems: layoutItems, icon: 'eye' });
+        ContextMenu.Instance.setDefaultItem('::', (name: string): void => {
+            Doc.GetProto(this.props.Document)[name] = '';
+            const created = Docs.Create.TextDocument('', { title: name, _width: 250, _autoHeight: true });
             if (created) {
                 if (this.props.Document.isTemplateDoc) {
                     Doc.MakeMetadataFieldTemplate(created, this.props.Document);
@@ -233,98 +251,100 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             }
         });
         ContextMenu.Instance.displayMenu(x, y, undefined, true);
-    }
+    };
 
     @computed get innards() {
         TraceMobx();
         const key = this.props.pivotField;
         const heading = this._heading;
         const columnYMargin = this.props.headingObject ? 0 : this.props.yMargin;
-        const evContents = heading ? heading : "25";
-        const headingView = this.props.headingObject ?
-            <div key={heading} className="collectionNoteTakingView-sectionHeader" ref={this._headerRef}
+        const evContents = heading ? heading : '25';
+        const headingView = this.props.headingObject ? (
+            <div
+                key={heading}
+                className="collectionNoteTakingView-sectionHeader"
+                ref={this._headerRef}
                 style={{
                     marginTop: 2 * this.props.yMargin,
                     // width: (this.props.columnWidth) /
                     //     ((uniqueHeadings.length) || 1)
-                    width: this.columnWidth - 20
+                    width: this.columnWidth - 20,
                 }}>
-                <div className="collectionNoteTakingView-sectionHeader-subCont" onPointerDown={this.headerDown}
-                    title={evContents === `No Value` ?
-                        `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
-                    style={{ background: evContents !== `No Value` ? this._color : "inherit" }}>
-                    <EditableView
-                        GetValue={() => evContents}
-                        SetValue={this.headingChanged}
-                        contents={evContents}
-                        oneLine={true}
-                    />
+                <div
+                    className="collectionNoteTakingView-sectionHeader-subCont"
+                    onPointerDown={this.headerDown}
+                    title={evContents === `No Value` ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ''}
+                    style={{ background: evContents !== `No Value` ? this._color : 'inherit' }}>
+                    <EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
                 </div>
-            </div> : (null);
+            </div>
+        ) : null;
         // const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
         const templatecols = `${this.columnWidth}px `;
         const type = this.props.Document.type;
-        return <>
-            {headingView}
-            {<div>
-              <div key={`${heading}-stack`} className={`collectionNoteTakingView-Nodes`}
-                  style={{
-                      padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`,
-                      margin: "auto",
-                      width: "max-content", //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
-                      height: 'max-content',
-                      position: "relative",
-                      gridGap: this.props.gridGap,
-                      gridTemplateColumns: templatecols,
-                      gridAutoRows: "0px"
-                  }}>
-                  {this.props.renderChildren(this.props.docList)}
-              </div>
+        return (
+            <>
+                {headingView}
+                {
+                    <div>
+                        <div
+                            key={`${heading}-stack`}
+                            className={`collectionNoteTakingView-Nodes`}
+                            style={{
+                                padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`,
+                                margin: 'auto',
+                                width: 'max-content', //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
+                                height: 'max-content',
+                                position: 'relative',
+                                gridGap: this.props.gridGap,
+                                gridTemplateColumns: templatecols,
+                                gridAutoRows: '0px',
+                            }}>
+                            {this.props.renderChildren(this.props.docList)}
+                        </div>
 
-              {!this.props.chromeHidden && type !== DocumentType.PRES ?
-                  <div className="collectionNoteTakingView-DocumentButtons"
-                      // style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
-                      style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
-                      <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
-                          <EditableView
-                              GetValue={returnEmptyString}
-                              SetValue={this.addNewTextDoc}
-                              textCallback={this.textCallback}
-                              placeholder={"Type ':' for commands"}
-                              contents={"+ New Node"}
-                              menuCallback={this.menuCallback}
-                          />
-                      </div>
-                      <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
-                          <EditableView {...this.props.editableViewProps} />
-                      </div>
-                      {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && 
-                          <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}>
-                          <FontAwesomeIcon icon="trash" size="lg" />
-                      </button>
-                      }
-                  </div>
-                  : null}
-              </div>
-            }
-        </>;
+                        {!this.props.chromeHidden && type !== DocumentType.PRES ? (
+                            <div
+                                className="collectionNoteTakingView-DocumentButtons"
+                                // style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
+                                style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
+                                <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
+                                    <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
+                                </div>
+                                <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
+                                    <EditableView {...this.props.editableViewProps} />
+                                </div>
+                                {this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && (
+                                    <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}>
+                                        <FontAwesomeIcon icon="trash" size="lg" />
+                                    </button>
+                                )}
+                            </div>
+                        ) : null}
+                    </div>
+                }
+            </>
+        );
     }
 
-
     render() {
         TraceMobx();
         const heading = this._heading;
         return (
-            <div className={"collectionNoteTakingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading}
+            <div
+                className={'collectionNoteTakingViewFieldColumn' + (SnappingManager.GetIsDragging() ? 'Dragging' : '')}
+                key={heading}
                 style={{
-                  //TODO: change this so that it's based on the column width 
+                    //TODO: change this so that it's based on the column width
                     width: this.columnWidth,
-                    height: "100%",
-                    background: this._background
+                    height: '100%',
+                    background: this._background,
                 }}
-                ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} onPointerLeave={this.pointerLeave}>
+                ref={this.createColumnDropRef}
+                onPointerEnter={this.pointerEntered}
+                onPointerLeave={this.pointerLeave}>
                 {this.innards}
-            </div >
+            </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index ed5dc3715..7d31b3193 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,61 +1,63 @@
-import { action, observable } from "mobx";
-import * as React from "react";
+import { action, observable } from 'mobx';
+import * as React from 'react';
 
 interface DividerProps {
-  index: number
-  xMargin: number
-  setColumnStartXCoords: (movementX: number, colIndex: number) => void
+    index: number;
+    xMargin: number;
+    setColumnStartXCoords: (movementX: number, colIndex: number) => void;
 }
 
-export default class Divider extends React.Component<DividerProps>{
-  @observable private isHoverActive = false;
-  @observable private isResizingActive = false;
-  
-  @action
-  private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      e.preventDefault();
-      window.removeEventListener("pointermove", this.onPointerMove);
-      window.removeEventListener("pointerup", this.onPointerUp);
-      window.addEventListener("pointermove", this.onPointerMove);
-      window.addEventListener("pointerup", this.onPointerUp);
-      this.isResizingActive = true;
-  }
+export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> {
+    @observable private isHoverActive = false;
+    @observable private isResizingActive = false;
 
-  @action
-  private onPointerUp = () => {
-      this.isResizingActive = false;
-      this.isHoverActive = false;
-      window.removeEventListener("pointermove", this.onPointerMove);
-      window.removeEventListener("pointerup", this.onPointerUp);
-  }
+    @action
+    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+        window.addEventListener('pointermove', this.onPointerMove);
+        window.addEventListener('pointerup', this.onPointerUp);
+        this.isResizingActive = true;
+    };
 
-  @action
-  onPointerMove = ({ movementX }: PointerEvent) => {
-    this.props.setColumnStartXCoords(movementX, this.props.index)
-  }
-  
-  render() {
-    return (
-      <div className="columnResizer"
-        style={{
-          display: "flex", 
-          alignItems: "center", 
-          cursor: "col-resize"
-        }}
-        onPointerEnter={action(() => this.isHoverActive = true)}
-        onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
-      >
-        <div className="columnResizer-handler" onPointerDown={e => this.registerResizing(e)}
-          style={{
-            height: "95%",
-            width: 12,
-            borderRight: "4px solid #282828",
-            borderLeft: "4px solid #282828",
-            margin: "0px 10px"
-          }}
-        />
-      </div>
-    )
-  }
-}
\ No newline at end of file
+    @action
+    private onPointerUp = () => {
+        this.isResizingActive = false;
+        this.isHoverActive = false;
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+    };
+
+    @action
+    onPointerMove = ({ movementX }: PointerEvent) => {
+        this.props.setColumnStartXCoords(movementX, this.props.index);
+    };
+
+    render() {
+        return (
+            <div
+                className="columnResizer"
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    cursor: 'col-resize',
+                }}
+                onPointerEnter={action(() => (this.isHoverActive = true))}
+                onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>
+                <div
+                    className="columnResizer-handler"
+                    onPointerDown={e => this.registerResizing(e)}
+                    style={{
+                        height: '95%',
+                        width: 12,
+                        borderRight: '4px solid #282828',
+                        borderLeft: '4px solid #282828',
+                        margin: '0px 10px',
+                    }}
+                />
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 1927db51e..ef68cadd7 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -447,8 +447,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 const newDocs = droppedDocs.length ? droppedDocs : de.complete.docDragData.droppedDocuments; // if nothing was added to the end of the list, then presumably the dropped documents were already in the list, but possibly got reordered so we use them.
 
                 const docs = this.childDocList;
-                // reset drag manager docs, because we just dropped
-                DragManager.docsBeingDragged = [];
                 // still figuring out where to add the document
                 if (docs && newDocs.length) {
                     const insertInd = dropInd === -1 ? docs.length : dropInd + dropAfter;
@@ -456,6 +454,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                     newDocs.filter(ndoc => docs.indexOf(ndoc) !== -1).forEach(ndoc => docs.splice(docs.indexOf(ndoc), 1));
                     docs.splice(insertInd - offset, 0, ...newDocs);
                 }
+                // reset drag manager docs, because we just dropped
+                DragManager.docsBeingDragged.length = 0;
             }
         } else if (de.complete.linkDragData?.dragDocument.context === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) {
             const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, _fitWidth: true, title: 'dropped annotation' });
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index afb618b34..1ee1aec5a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -156,9 +156,7 @@ export interface DocumentViewSharedProps {
     scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
     createNewFilterDoc?: () => void;
     updateFilterDoc?: (doc: Doc) => void;
-    // Parker added both of these
-    originalBackgroundColor?: string;
-    isNoteTakingView?: boolean;
+    dontHideOnDrag?: boolean;
 }
 
 // these props are specific to DocuentViews
@@ -494,12 +492,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     startDragging(x: number, y: number, dropAction: dropActionType, hideSource = false) {
         if (this._mainCont.current) {
             const dragData = new DragManager.DocumentDragData([this.props.Document]);
-            if (this.props.isNoteTakingView) {
-                dragData.draggedDocuments.forEach((doc) => {
-                doc.backgroundColor = "#C9DAEF";
-                doc.opacity = 0.5;
-              });
-            }
             const [left, top] = this.props.ScreenToLocalTransform().scale(this.NativeDimScaling).inverse().transformPoint(0, 0);
             dragData.offset = this.props
                 .ScreenToLocalTransform()
@@ -511,22 +503,16 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             dragData.treeViewDoc = this.props.treeViewDoc;
             dragData.removeDocument = this.props.removeDocument;
             dragData.moveDocument = this.props.moveDocument;
-            //dragData.dimSource : 
-            // dragEffects field, set dim 
+            //dragData.dimSource :
+            // dragEffects field, set dim
             // add kv pairs to a doc, swap properties with the node while dragging, and then swap when dropping
             // add a dragEffects prop to DocumentView as a function that sets up. Each view has its own prop, when you start dragging:
-            // in Draganager, figure out which doc(s) you're dragging and change what opacity function returns  
+            // in Draganager, figure out which doc(s) you're dragging and change what opacity function returns
             const ffview = this.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
-            ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView()));            
-            DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStar && !this.props.isNoteTakingView)},
-                () => setTimeout(action(() => {
-                  ffview && (ffview.ChildDrag = undefined)
-                  //TODO: is there a better way than adding another field to the props? Not quite sure how "this" works tbh
-                  if (this.props.isNoteTakingView) {
-                    this.props.Document.backgroundColor = "";
-                    this.props.Document.opacity = 1;
-                  }
-                }))); // this needs to happen after the drop event is processed.
+            ffview && runInAction(() => (ffview.ChildDrag = this.props.DocumentView()));
+            DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: hideSource || (!dropAction && !this.layoutDoc.onDragStart && !this.props.dontHideOnDrag) }, () =>
+                setTimeout(action(() => ffview && (ffview.ChildDrag = undefined)))
+            ); // this needs to happen after the drop event is processed.
             ffview?.setupDragLines(false);
         }
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index b8ee89ef2..add83f4e0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1001,7 +1001,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             () => ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, autoHeight: this.autoHeight, marginsHeight: this.autoHeightMargins }),
             ({ sidebarHeight, textHeight, autoHeight, marginsHeight }) => {
                 const newHeight = this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight));
-                autoHeight && newHeight && this.props.setHeight?.(newHeight);
+                if (autoHeight && newHeight && newHeight !== this.rootDoc.height) {
+                    this.props.setHeight?.(newHeight);
+                }
             },
             { fireImmediately: true }
         );
@@ -1695,7 +1697,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             if (this.props.setHeight && scrollHeight && this.props.renderDepth && !this.props.dontRegisterView) {
                 // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation
                 const setScrollHeight = () => (this.rootDoc[this.fieldKey + '-scrollHeight'] = scrollHeight);
-                if (this.rootDoc === this.layoutDoc.doc || this.layoutDoc.resolvedDataDoc) {
+                if (this.rootDoc === this.layoutDoc || this.layoutDoc.resolvedDataDoc) {
                     setScrollHeight();
                 } else {
                     setTimeout(setScrollHeight, 10); // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template.  So set a timeout and hope its arrived...
-- 
cgit v1.2.3-70-g09d2


From 53dc1ae6077774a7235f2fe7f56ffa03f8a9aa5a Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 19 Aug 2022 09:21:28 -0400
Subject: fixed undo bug in dragManager where batches weren't being closed. 
 fixed schemaheader copy method to copy all parameters.  fixed notetaking
 columnresizer to create an UndoBatch.  fixed notetakingview's columnHeaders
 to return the actual headers list, not a copy.  fixed document decorations to
 not modify docsBeingDragged

---
 src/client/util/DragManager.ts                     |  2 +-
 src/client/views/DocumentDecorations.tsx           |  4 +-
 .../views/collections/CollectionNoteTakingView.tsx | 20 ++---
 .../CollectionNoteTakingViewDivider.tsx            | 37 +++++----
 .../views/collections/CollectionStackingView.tsx   |  2 -
 src/client/views/nodes/trails/PresElementBox.tsx   |  5 +-
 src/fields/SchemaHeaderField.ts                    | 92 +++++++++++-----------
 7 files changed, 75 insertions(+), 87 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 947882958..eef5b9ce1 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -457,7 +457,7 @@ export namespace DragManager {
             document.removeEventListener('pointerup', upHandler, true);
             SnappingManager.SetIsDragging(false);
             SnappingManager.clearSnapLines();
-            if (undo && batch.end()) UndoManager.Undo();
+            if (batch.end() && undo) UndoManager.Undo();
             docsBeingDragged.length = 0;
         });
         var startWindowDragTimer: any;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 0db9eab69..a8dacff51 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -351,8 +351,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        DragManager.docsBeingDragged.push(...SelectionManager.Views().map(dv => dv.rootDoc));
-        this._inkDragDocs = DragManager.docsBeingDragged
+        const views = SelectionManager.Views().map(dv => dv.rootDoc);
+        this._inkDragDocs = views
             .filter(doc => doc.type === DocumentType.INK)
             .map(doc => {
                 if (InkStrokeProperties.Instance._lock) {
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 447e1f0c8..0c5f69db0 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -53,7 +53,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
     @computed get columnHeaders() {
-        const columnHeaders = Array.from(Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null));
+        const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
         const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset'));
 
         //  @#Oberable draggedColIndex = ...
@@ -142,17 +142,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get Sections() {
         TraceMobx();
         const columnHeaders = this.columnHeaders;
-        let docs = this.childDocs;
+        // filter out the currently dragged docs from the child docs, since we will insert them later
+        const docs = this.childDocs.filter(d => !DragManager.docsBeingDragged.includes(d));
         const sections = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         const rowCol = this.docsDraggedRowCol;
 
-        // filter out the currently dragged docs from the child docs, since we will insert them later
-        if (rowCol.length && DragManager.docsBeingDragged.length) {
-            const docIdsToRemove = new Set();
-            DragManager.docsBeingDragged.forEach(d => docIdsToRemove.add(d[Id]));
-            docs = docs.filter(d => !docIdsToRemove.has(d[Id]));
-        }
-
         // this will sort the docs into the correct columns (minus the ones you're currently dragging)
         docs.map(d => {
             const sectionValue = (d[this.notetakingCategoryField] as object) ?? `unset`;
@@ -165,11 +159,10 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         });
 
         // now we add back in the docs that we're dragging
-        if (rowCol.length && DragManager.docsBeingDragged.length) {
-            const colHeader = columnHeaders[rowCol[1]];
+        if (rowCol.length) {
             // TODO: get the actual offset that occurs if the docs were in that column
             const offset = 0;
-            sections.get(colHeader)?.splice(rowCol[0] - offset, 0, ...DragManager.docsBeingDragged);
+            sections.get(columnHeaders[rowCol[1]])?.splice(rowCol[0] - offset, 0, ...DragManager.docsBeingDragged);
         }
         return sections;
     }
@@ -671,7 +664,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     // used to reset column sizes when using the drag handlers
     @action
-    setColumnStartXCoords = (movementX: number, colIndex: number) => {
+    setColumnStartXCoords = (movementXScreen: number, colIndex: number) => {
+        const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0];
         const leftHeader = this.columnHeaders[colIndex];
         const rightHeader = this.columnHeaders[colIndex + 1];
         leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth);
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 7d31b3193..2633bffeb 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,5 +1,8 @@
 import { action, observable } from 'mobx';
 import * as React from 'react';
+import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
+import { Transform } from '../../util/Transform';
+import { UndoManager } from '../../util/UndoManager';
 
 interface DividerProps {
     index: number;
@@ -13,28 +16,24 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp
 
     @action
     private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
-        e.stopPropagation();
-        e.preventDefault();
-        window.removeEventListener('pointermove', this.onPointerMove);
-        window.removeEventListener('pointerup', this.onPointerUp);
-        window.addEventListener('pointermove', this.onPointerMove);
-        window.addEventListener('pointerup', this.onPointerUp);
+        const batch = UndoManager.StartBatch('resizing');
+        setupMoveUpEvents(
+            this,
+            e,
+            (e, down, delta) => {
+                this.props.setColumnStartXCoords(delta[0], this.props.index);
+                return false;
+            },
+            action(() => {
+                this.isResizingActive = false;
+                this.isHoverActive = false;
+                batch.end();
+            }),
+            emptyFunction
+        );
         this.isResizingActive = true;
     };
 
-    @action
-    private onPointerUp = () => {
-        this.isResizingActive = false;
-        this.isHoverActive = false;
-        window.removeEventListener('pointermove', this.onPointerMove);
-        window.removeEventListener('pointerup', this.onPointerUp);
-    };
-
-    @action
-    onPointerMove = ({ movementX }: PointerEvent) => {
-        this.props.setColumnStartXCoords(movementX, this.props.index);
-    };
-
     render() {
         return (
             <div
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index ef68cadd7..6683eddf3 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -454,8 +454,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                     newDocs.filter(ndoc => docs.indexOf(ndoc) !== -1).forEach(ndoc => docs.splice(docs.indexOf(ndoc), 1));
                     docs.splice(insertInd - offset, 0, ...newDocs);
                 }
-                // reset drag manager docs, because we just dropped
-                DragManager.docsBeingDragged.length = 0;
             }
         } else if (de.complete.linkDragData?.dragDocument.context === this.props.Document && de.complete.linkDragData?.linkDragView?.props.CollectionFreeFormDocumentView?.()) {
             const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, _fitWidth: true, title: 'dropped annotation' });
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 0cf15d297..c578f8bcf 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -250,10 +250,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     onPointerMove = (e: PointerEvent) => {
         const slide = this._itemRef.current!;
-        let dragIsPresItem: boolean = DragManager.docsBeingDragged.length > 0 ? true : false;
-        for (const doc of DragManager.docsBeingDragged) {
-            if (!doc.presentationTargetDoc) dragIsPresItem = false;
-        }
+        const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentationTargetDoc);
         if (slide && dragIsPresItem) {
             const rect = slide.getBoundingClientRect();
             const y = e.clientY - rect.top; //y position within the element.
diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts
index 3b02d0cfe..1321bc327 100644
--- a/src/fields/SchemaHeaderField.ts
+++ b/src/fields/SchemaHeaderField.ts
@@ -1,60 +1,60 @@
-import { Deserializable } from "../client/util/SerializationHelper";
-import { serializable, primitive } from "serializr";
-import { ObjectField } from "./ObjectField";
-import { Copy, ToScriptString, ToString, OnUpdate } from "./FieldSymbols";
-import { scriptingGlobal } from "../client/util/ScriptingGlobals";
-import { ColumnType } from "../client/views/collections/collectionSchema/CollectionSchemaView";
+import { Deserializable } from '../client/util/SerializationHelper';
+import { serializable, primitive } from 'serializr';
+import { ObjectField } from './ObjectField';
+import { Copy, ToScriptString, ToString, OnUpdate } from './FieldSymbols';
+import { scriptingGlobal } from '../client/util/ScriptingGlobals';
+import { ColumnType } from '../client/views/collections/collectionSchema/CollectionSchemaView';
 
 export const PastelSchemaPalette = new Map<string, string>([
     // ["pink1", "#FFB4E8"],
-    ["pink2", "#ff9cee"],
-    ["pink3", "#ffccf9"],
-    ["pink4", "#fcc2ff"],
-    ["pink5", "#f6a6ff"],
-    ["purple1", "#b28dff"],
-    ["purple2", "#c5a3ff"],
-    ["purple3", "#d5aaff"],
-    ["purple4", "#ecd4ff"],
+    ['pink2', '#ff9cee'],
+    ['pink3', '#ffccf9'],
+    ['pink4', '#fcc2ff'],
+    ['pink5', '#f6a6ff'],
+    ['purple1', '#b28dff'],
+    ['purple2', '#c5a3ff'],
+    ['purple3', '#d5aaff'],
+    ['purple4', '#ecd4ff'],
     // ["purple5", "#fb34ff"],
-    ["purple6", "#dcd3ff"],
-    ["purple7", "#a79aff"],
-    ["purple8", "#b5b9ff"],
-    ["purple9", "#97a2ff"],
-    ["bluegreen1", "#afcbff"],
-    ["bluegreen2", "#aff8db"],
-    ["bluegreen3", "#c4faf8"],
-    ["bluegreen4", "#85e3ff"],
-    ["bluegreen5", "#ace7ff"],
+    ['purple6', '#dcd3ff'],
+    ['purple7', '#a79aff'],
+    ['purple8', '#b5b9ff'],
+    ['purple9', '#97a2ff'],
+    ['bluegreen1', '#afcbff'],
+    ['bluegreen2', '#aff8db'],
+    ['bluegreen3', '#c4faf8'],
+    ['bluegreen4', '#85e3ff'],
+    ['bluegreen5', '#ace7ff'],
     // ["bluegreen6", "#6eb5ff"],
-    ["bluegreen7", "#bffcc6"],
-    ["bluegreen8", "#dbffd6"],
-    ["yellow1", "#f3ffe3"],
-    ["yellow2", "#e7ffac"],
-    ["yellow3", "#ffffd1"],
-    ["yellow4", "#fff5ba"],
+    ['bluegreen7', '#bffcc6'],
+    ['bluegreen8', '#dbffd6'],
+    ['yellow1', '#f3ffe3'],
+    ['yellow2', '#e7ffac'],
+    ['yellow3', '#ffffd1'],
+    ['yellow4', '#fff5ba'],
     // ["red1", "#ffc9de"],
-    ["red2", "#ffabab"],
-    ["red3", "#ffbebc"],
-    ["red4", "#ffcbc1"],
-    ["orange1", "#ffd5b3"],
-    ["gray", "#f1efeb"]
+    ['red2', '#ffabab'],
+    ['red3', '#ffbebc'],
+    ['red4', '#ffcbc1'],
+    ['orange1', '#ffd5b3'],
+    ['gray', '#f1efeb'],
 ]);
 
 export const RandomPastel = () => Array.from(PastelSchemaPalette.values())[Math.floor(Math.random() * PastelSchemaPalette.size)];
 
 export const DarkPastelSchemaPalette = new Map<string, string>([
-    ["pink2", "#c932b0"],
-    ["purple4", "#913ad6"],
-    ["bluegreen1", "#3978ed"],
-    ["bluegreen7", "#2adb3e"],
-    ["bluegreen5", "#21b0eb"],
-    ["yellow4", "#edcc0c"],
-    ["red2", "#eb3636"],
-    ["orange1", "#f2740f"],
+    ['pink2', '#c932b0'],
+    ['purple4', '#913ad6'],
+    ['bluegreen1', '#3978ed'],
+    ['bluegreen7', '#2adb3e'],
+    ['bluegreen5', '#21b0eb'],
+    ['yellow4', '#edcc0c'],
+    ['red2', '#eb3636'],
+    ['orange1', '#f2740f'],
 ]);
 
 @scriptingGlobal
-@Deserializable("schemaheader")
+@Deserializable('schemaheader')
 export class SchemaHeaderField extends ObjectField {
     @serializable(primitive())
     heading: string;
@@ -69,7 +69,7 @@ export class SchemaHeaderField extends ObjectField {
     @serializable(primitive())
     desc: boolean | undefined; // boolean determines sort order, undefined when no sort
 
-    constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean, collapsed?: boolean) {
+    constructor(heading: string = '', color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean, collapsed?: boolean) {
         super();
 
         this.heading = heading;
@@ -111,7 +111,7 @@ export class SchemaHeaderField extends ObjectField {
     }
 
     [Copy]() {
-        return new SchemaHeaderField(this.heading, this.color, this.type);
+        return new SchemaHeaderField(this.heading, this.color, this.type, this.width, this.desc, this.collapsed);
     }
 
     [ToScriptString]() {
@@ -120,4 +120,4 @@ export class SchemaHeaderField extends ObjectField {
     [ToString]() {
         return `SchemaHeaderField`;
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From b7c2e1081e4efe7167a86fb1d9f641bea8b93bba Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Mon, 22 Aug 2022 05:51:13 -0500
Subject: commented all NoteTakingView files

---
 .../views/collections/CollectionNoteTakingView.tsx | 17 ++++++----
 .../collections/CollectionNoteTakingViewColumn.tsx | 38 ++++++----------------
 .../CollectionNoteTakingViewDivider.tsx            |  6 +++-
 3 files changed, 25 insertions(+), 36 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index a2f05c031..9e40356d6 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import { CursorProperty } from 'csstype';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { DataSym, Doc, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
@@ -55,7 +55,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get chromeHidden() {
         return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
-    // columnHeaders() returns the list of SchemaHeaderFields currently being used by the layout doc to render the columns
+    // columnHeaders returns the list of SchemaHeaderFields currently being used by the layout doc to render the columns
     @computed get columnHeaders() {
         const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
         const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset'));
@@ -64,19 +64,17 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
         return columnHeaders;
     }
-    // 
+    // notetakingCategoryField returns the key to accessing a document's column value
     @computed get notetakingCategoryField() {
         return 'NotetakingCategory';
     }
-    @computed get filteredChildren() {
-        return this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout);
-    }
     @computed get headerMargin() {
         return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin);
     }
     @computed get xMargin() {
         return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth()));
     }
+    // dividerWidth returns the width of a CollectionNoteTakingViewDivider
     @computed get dividerWidth() {
         return 32;
     }
@@ -86,15 +84,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get gridGap() {
         return NumCast(this.layoutDoc._gridGap, 10);
     }
+    // numGroupColumns returns the number of columns
     @computed get numGroupColumns() {
         return this.columnHeaders.length;
     }
+    // PanelWidth returns the size of the total available space the view occupies
     @computed get PanelWidth() {
         return this.props.PanelWidth();
     }
+    // maxColWidth returns the maximum column width, which is slightly less than the total available space.
     @computed get maxColWidth() {
         return this.props.PanelWidth() - 2 * this.xMargin;
     }
+    // availableWidth is the total amount of non-divider width. Since widths are stored relatively, 
+    // we use availableWidth to convert from a percentage to a pixel count.
     @computed get availableWidth() {
         const numDividers = this.columnHeaders.length - 1;
         return this.maxColWidth - numDividers * this.dividerWidth;
@@ -109,7 +112,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
     }
 
-    // passed as a prop to the NoteTakingField, which uses this function
+    // children is passed as a prop to the NoteTakingField, which uses this function
     // to render the docs you see within an individual column.
     children = (docs: Doc[]) => {
         TraceMobx();
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 11a0e69ac..a866373a9 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -5,11 +5,12 @@ import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { RichTextField } from '../../../fields/RichTextField';
+import { listSpec } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
-import { ScriptField } from '../../../fields/ScriptField';
+import { Cast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils';
+import { returnEmptyString } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
@@ -21,13 +22,10 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from '../EditableView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionNoteTakingView.scss';
-import { listSpec } from '../../../fields/Schema';
-import { Cast } from '../../../fields/Types';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-// So this is how we are storing a column
 interface CSVFieldColumnProps {
     Document: Doc;
     DataDoc: Opt<Doc>;
@@ -38,7 +36,6 @@ interface CSVFieldColumnProps {
     columnHeaders: SchemaHeaderField[] | undefined;
     headingObject: SchemaHeaderField | undefined;
     yMargin: number;
-    // columnWidth: number;
     numGroupColumns: number;
     gridGap: number;
     type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined;
@@ -49,44 +46,32 @@ interface CSVFieldColumnProps {
     screenToLocalTransform: () => Transform;
     observeHeight: (myref: any) => void;
     unobserveHeight: (myref: any) => void;
-    //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
     editableViewProps: () => any;
     resizeColumns: (isAdd: boolean, colWidth: number, colIndex: number) => boolean;
-    // columnStartXCoords: number[];
     PanelWidth: number;
     maxColWidth: number;
     dividerWidth: number;
     availableWidth: number;
-    // docsByColumnHeader: Map<string, Doc[]>
-    // setDocsForColHeader: (key: string, docs: Doc[]) => void
 }
 
+/**
+ * CollectionNoteTakingViewColumn represents an individual column rendered in CollectionNoteTakingView. The
+ * majority of functions here are for rendering styles.
+ */
 @observer
 export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = 'inherit';
 
-    // the "width" property of headers is relative (a percentage of available space)
+    // columnWidth returns the width of a column in absolute pixels
     @computed get columnWidth() {
-        // base cases
         if (!this.props.columnHeaders || !this.props.headingObject) {
             return this.props.maxColWidth;
         }
         if (this.props.columnHeaders.length == 1) {
-            // this.props.columnHeaders[0].setWidth(1);
             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;
-        // }
-        // const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1];
-        // // 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] - 30;
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -96,8 +81,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb';
     _ele: HTMLElement | null = null;
 
-    // This is likely similar to what we will be doing. Why do we need to make these refs?
-    // is that the only way to have drop targets?
     createColumnDropRef = (ele: HTMLDivElement | null) => {
         this.dropDisposer?.();
         if (ele) {
@@ -146,6 +129,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     @action pointerLeave = () => (this._background = 'inherit');
     textCallback = (char: string) => this.addNewTextDoc('-typed text-', false, true);
 
+    // addNewTextDoc is called when a user starts typing in a column to create a new node
     @action
     addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
         if (!value && !forceEmptyNote) return false;
@@ -158,6 +142,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         return this.props.addDocument?.(newDoc) || false;
     };
 
+    // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area. 
     @action
     @undoBatch
     deleteColumn = () => {
@@ -270,7 +255,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                 </div>
             </div>
         ) : null;
-        // const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
         const templatecols = `${this.columnWidth}px `;
         const type = this.props.Document.type;
         return (
@@ -297,7 +281,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                         {!this.props.chromeHidden && type !== DocumentType.PRES ? (
                             <div
                                 className="collectionNoteTakingView-DocumentButtons"
-                                // style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
                                 style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
                                 <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
                                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
@@ -326,7 +309,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                 className={'collectionNoteTakingViewFieldColumn' + (SnappingManager.GetIsDragging() ? 'Dragging' : '')}
                 key={heading}
                 style={{
-                    //TODO: change this so that it's based on the column width
                     width: this.columnWidth,
                     background: this._background,
                 }}
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 2633bffeb..7defeb031 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,7 +1,6 @@
 import { action, observable } from 'mobx';
 import * as React from 'react';
 import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
-import { Transform } from '../../util/Transform';
 import { UndoManager } from '../../util/UndoManager';
 
 interface DividerProps {
@@ -10,6 +9,11 @@ interface DividerProps {
     setColumnStartXCoords: (movementX: number, colIndex: number) => void;
 }
 
+/**
+ * CollectionNoteTakingViewDivider is a divider between CollectionNoteTakingViewColumns,
+ * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers
+ * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns.
+ */
 export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> {
     @observable private isHoverActive = false;
     @observable private isResizingActive = false;
-- 
cgit v1.2.3-70-g09d2


From 3cf60a6118a5994e43c8ac9d00092992d6c83700 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Mon, 22 Aug 2022 11:03:31 -0400
Subject: can't add column if name in use

---
 src/client/views/collections/CollectionNoteTakingView.tsx  |  9 +++++++--
 .../views/collections/CollectionNoteTakingViewColumn.tsx   | 14 ++++++++------
 .../views/collections/CollectionNoteTakingViewDivider.tsx  |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 9e40356d6..16fefc55a 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -587,10 +587,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     // addGroup is called when adding a new columnHeader, adding a SchemaHeaderField to our list of 
     // columnHeaders and resizing the existing columns to make room for our new one.
-    @undoBatch
     @action
     @undoBatch
     addGroup = (value: string) => {
+        for (const header of this.columnHeaders) {
+          if (header.heading == value) {
+            alert('You cannot use an existing column name. Please try a new column name');
+            return value;
+          }
+        }
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         const newColWidth = 1 / (this.numGroupColumns + 1);
         return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false;
@@ -607,7 +612,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
     };
 
-    // setColumnStartXCoords is used to update column sizes when using the drag handlers between columns
+    // setColumnStartXCoords is used to update column widths when using the drag handlers between columns
     @action
     setColumnStartXCoords = (movementXScreen: number, colIndex: number) => {
         const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0];
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index a866373a9..e619b084b 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -142,15 +142,19 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         return this.props.addDocument?.(newDoc) || false;
     };
 
-    // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area. 
+    // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area.
+    // If the user deletes the first column, the documents get moved to the second column. Otherwise,
+    // all docs are added to the column directly to the left.
     @action
     @undoBatch
     deleteColumn = () => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         if (columnHeaders && this.props.headingObject) {
             const index = columnHeaders.indexOf(this.props.headingObject);
-            this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
-            // should never be 0, currently placeholder
+            const newColIndex = index > 0 ? index - 1 : 1;
+            const newColHeader = this.props.columnHeaders ? this.props.columnHeaders[newColIndex] : undefined;
+            const newHeading = newColHeader ? newColHeader.heading : 'unset';
+            this.props.docList.forEach(d => (d[this.props.pivotField] = newHeading));
             const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0;
             columnHeaders.splice(index, 1);
             this.props.resizeColumns(false, colWidth, index);
@@ -279,9 +283,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                         </div>
 
                         {!this.props.chromeHidden && type !== DocumentType.PRES ? (
-                            <div
-                                className="collectionNoteTakingView-DocumentButtons"
-                                style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
+                            <div className="collectionNoteTakingView-DocumentButtons" style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
                                 <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
                                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
                                 </div>
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 7defeb031..8d659f790 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -10,7 +10,7 @@ interface DividerProps {
 }
 
 /**
- * CollectionNoteTakingViewDivider is a divider between CollectionNoteTakingViewColumns,
+ * CollectionNoteTakingViewDivider are dividers between CollectionNoteTakingViewColumns,
  * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers
  * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns.
  */
-- 
cgit v1.2.3-70-g09d2


From ef2cd862c062556008a1897b408399dedaee8210 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 25 Aug 2022 17:04:53 -0400
Subject: fixed issues with reloading notetaking view and having columns be
 exactly the same.  fixed adding columns so that changes are actually
 propagated to the DB.  SchemaHeaderFields are bad news...

---
 .../collections/CollectionNoteTakingView.scss      | 32 +++++---
 .../views/collections/CollectionNoteTakingView.tsx | 42 +++++-----
 .../collections/CollectionNoteTakingViewColumn.tsx | 89 +++++++++-------------
 .../CollectionNoteTakingViewDivider.tsx            |  1 -
 4 files changed, 80 insertions(+), 84 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
index fe98f307e..5582fd391 100644
--- a/src/client/views/collections/CollectionNoteTakingView.scss
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -1,7 +1,7 @@
 @import '../global/globalCssVariables';
 
 .collectionNoteTakingView-DocumentButtons {
-    display: flex;
+    display: none;
     justify-content: space-between;
     margin: auto;
 }
@@ -51,6 +51,17 @@
     display: flex;
 }
 
+.collectionNoteTakingViewFieldColumn {
+    height: 100%;
+    display: flex;
+    flex-direction: colum;
+}
+.collectionNoteTakingViewFieldColumn:hover {
+    .collectionNoteTakingView-DocumentButtons {
+        display: flex;
+    }
+}
+
 // TODO:glr Turn this into a seperate class
 .documentButtonMenu {
     position: relative;
@@ -82,7 +93,6 @@
     top: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    flex-wrap: wrap;
     transition: top 0.5s;
 
     > div {
@@ -133,6 +143,16 @@
         margin-left: -5;
     }
 
+    .collectionNoteTakingView-sectionDelete {
+        display: none;
+        position: absolute;
+        right: 0;
+        width: max-content;
+        height: max-content;
+        top: 10;
+        padding: 2;
+    }
+
     // Documents in NoteTaking view
     .collectionNoteTakingView-columnDoc {
         display: flex;
@@ -347,14 +367,6 @@
                 }
             }
         }
-
-        .collectionNoteTakingView-sectionDelete {
-            position: absolute;
-            right: 25px;
-            top: 0;
-            height: 100%;
-            display: none;
-        }
     }
 
     .collectionNoteTakingView-sectionHeader:hover {
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 5a6d899ef..615141485 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -3,7 +3,7 @@ import { CursorProperty } from 'csstype';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { DataSym, Doc, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
-import { Id } from '../../../fields/FieldSymbols';
+import { Copy, Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
@@ -42,7 +42,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     _masonryGridRef: HTMLDivElement | null = null;
     _draggerRef = React.createRef<HTMLDivElement>();
     notetakingCategoryField = 'NotetakingCategory';
-    dividerWidth = 16;
+    public DividerWidth = 16;
     @observable docsDraggedRowCol: number[] = [];
     @observable _cursor: CursorProperty = 'grab';
     @observable _scroll = 0;
@@ -53,10 +53,11 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     @computed get columnHeaders() {
         const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
         const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders?.find(sh => sh.heading === 'unset'));
-        if (needsUnsetCategory) {
+        if (needsUnsetCategory || columnHeaders === undefined || columnHeaders.length === 0) {
             setTimeout(() => {
+                const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
                 const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders?.find(sh => sh.heading === 'unset'));
-                if (needsUnsetCategory) {
+                if (needsUnsetCategory || columnHeaders === undefined || columnHeaders.length === 0) {
                     if (columnHeaders) columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, 1));
                     else this.dataDoc.columnHeaders = new List<SchemaHeaderField>();
                 }
@@ -68,10 +69,10 @@ export class CollectionNoteTakingView extends CollectionSubView() {
         return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin);
     }
     @computed get xMargin() {
-        return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth()));
+        return NumCast(this.layoutDoc._xMargin, 5);
     }
     @computed get yMargin() {
-        return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5);
+        return NumCast(this.layoutDoc._yMargin, 5);
     }
     @computed get gridGap() {
         return NumCast(this.layoutDoc._gridGap, 10);
@@ -86,13 +87,13 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     }
     // maxColWidth returns the maximum column width, which is slightly less than the total available space.
     @computed get maxColWidth() {
-        return this.props.PanelWidth() - 2 * this.xMargin;
+        return this.props.PanelWidth();
     }
     // availableWidth is the total amount of non-divider width. Since widths are stored relatively,
     // we use availableWidth to convert from a percentage to a pixel count.
     @computed get availableWidth() {
         const numDividers = this.numGroupColumns - 1;
-        return this.maxColWidth - numDividers * this.dividerWidth;
+        return this.maxColWidth - numDividers * this.DividerWidth;
     }
 
     // children is passed as a prop to the NoteTakingField, which uses this function
@@ -295,12 +296,9 @@ export class CollectionNoteTakingView extends CollectionSubView() {
         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.availableWidth - 2 * this.xMargin : this.maxColWidth - 2 * this.xMargin;
-        if (d.type === DocumentType.RTF) {
-            return maxWidth;
-        }
-        const width = d[WidthSym]();
-        return width < maxWidth ? width : maxWidth;
+        const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth : this.maxColWidth;
+        const width = d.fitWidth ? maxWidth : d[WidthSym]();
+        return Math.min(maxWidth - CollectionNoteTakingViewColumn.ColumnMargin, width < maxWidth ? width : maxWidth);
     }
 
     // how to get the height of a document. Nothing special here.
@@ -312,8 +310,6 @@ export class CollectionNoteTakingView extends CollectionSubView() {
         const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0);
         const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0);
         if (nw && nh) {
-            // const colWid = this.columnWidth / this.numGroupColumns;
-            // const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
             const docWid = this.getDocWidth(d);
             return Math.min(maxHeight, (docWid * nh) / nw);
         }
@@ -390,7 +386,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
         let colStartXCoord = 0;
         for (let i = 0; i < numColumns; i++) {
             coords.push(colStartXCoord);
-            colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.dividerWidth;
+            colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.DividerWidth;
         }
         coords.push(this.PanelWidth);
         for (let i = 0; i < numColumns; i++) {
@@ -543,7 +539,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
                 numGroupColumns={this.numGroupColumns}
                 gridGap={this.gridGap}
                 pivotField={this.notetakingCategoryField}
-                dividerWidth={this.dividerWidth}
+                dividerWidth={this.DividerWidth}
                 maxColWidth={this.maxColWidth}
                 availableWidth={this.availableWidth}
                 PanelWidth={this.PanelWidth}
@@ -576,7 +572,9 @@ export class CollectionNoteTakingView extends CollectionSubView() {
         }
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         const newColWidth = 1 / (this.numGroupColumns + 1);
-        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false;
+        value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1);
+        this.dataDoc.columnHeaders = new List<SchemaHeaderField>(columnHeaders.map(header => header[Copy]()));
+        return true;
     };
 
     onContextMenu = (e: React.MouseEvent): void => {
@@ -621,10 +619,10 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     @computed get buttonMenu() {
         const menuDoc: Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null);
         if (menuDoc) {
-            const width: number = NumCast(menuDoc._width, 30);
-            const height: number = NumCast(menuDoc._height, 30);
+            const width = NumCast(menuDoc._width, 30);
+            const height = NumCast(menuDoc._height, 30);
             return (
-                <div className="buttonMenu-docBtn" style={{ width: width, height: height }}>
+                <div className="buttonMenu-docBtn" style={{ width, height }}>
                     <DocumentView
                         Document={menuDoc}
                         DataDoc={menuDoc}
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index c57677683..d951454ff 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -22,11 +22,6 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from '../EditableView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionNoteTakingView.scss';
-import { List } from '../../../fields/List';
-import { Field } from '../../util/ProsemirrorCopy/prompt';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
 
 interface CSVFieldColumnProps {
     Document: Doc;
@@ -66,19 +61,15 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
 
     // columnWidth returns the width of a column in absolute pixels
     @computed get columnWidth() {
-        if (!this.props.columnHeaders || !this.props.headingObject) {
-            return this.props.maxColWidth;
-        }
-        if (this.props.columnHeaders.length == 1) {
-            return this.props.maxColWidth;
-        }
+        if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length === 1) return '100%';
         const i = this.props.columnHeaders.indexOf(this.props.headingObject);
-        return this.props.columnHeaders[i].width * this.props.availableWidth;
+        return this.props.columnHeaders[i].width * 100 + '%';
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
     private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
 
+    public static ColumnMargin = 10;
     @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
     @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb';
     _ele: HTMLElement | null = null;
@@ -153,14 +144,14 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         const acolumnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         if (acolumnHeaders && this.props.headingObject) {
             const index = acolumnHeaders.indexOf(this.props.headingObject);
-            const columnHeaders = new List<SchemaHeaderField>(acolumnHeaders.map(header => header[Copy]())); // needed for undo to work properly.  otherwise we end up changing field values in the undo stack since they are shared by reference
+            const columnHeaders = acolumnHeaders; // new List<SchemaHeaderField>(acolumnHeaders.map(header => header[Copy]())); // needed for undo to work properly.  otherwise we end up changing field values in the undo stack since they are shared by reference
             const newColIndex = index > 0 ? index - 1 : 1;
             const newColHeader = this.props.columnHeaders ? this.props.columnHeaders[newColIndex] : undefined;
             const newHeading = newColHeader ? newColHeader.heading : 'unset';
             this.props.docList.forEach(d => (d[this.props.pivotField] = newHeading));
             const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0;
             columnHeaders.splice(index, 1);
-            Doc.GetProto(this.props.Document).columnHeaders = columnHeaders;
+            //Doc.GetProto(this.props.Document).columnHeaders = columnHeaders;
             this.props.resizeColumns(false, colWidth, index);
         }
     };
@@ -251,9 +242,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                 ref={this._headerRef}
                 style={{
                     marginTop: 2 * this.props.yMargin,
-                    // width: (this.props.columnWidth) /
-                    //     ((uniqueHeadings.length) || 1)
-                    width: this.columnWidth - 20,
+                    width: 'calc(100% - 5px)',
                 }}>
                 <div
                     className="collectionNoteTakingView-sectionHeader-subCont"
@@ -261,48 +250,46 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                     style={{ background: evContents !== `No Value` ? this._color : 'inherit' }}>
                     <EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
                 </div>
+                {(this.props.columnHeaders?.length ?? 0) > 1 && (
+                    <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}>
+                        <FontAwesomeIcon icon="trash" size="lg" />
+                    </button>
+                )}
             </div>
         ) : null;
-        const templatecols = `${this.columnWidth}px `;
+        const templatecols = this.columnWidth;
         const type = this.props.Document.type;
         return (
             <>
                 {headingView}
-                {
-                    <div style={{ height: '100%' }}>
-                        <div
-                            key={`${heading}-stack`}
-                            className={`collectionNoteTakingView-Nodes`}
-                            style={{
-                                padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`,
-                                margin: 'auto',
-                                width: 'max-content', //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
-                                height: 'max-content',
-                                position: 'relative',
-                                gridGap: this.props.gridGap,
-                                gridTemplateColumns: templatecols,
-                                gridAutoRows: '0px',
-                            }}>
-                            {this.props.renderChildren(this.props.docList)}
-                        </div>
+                <div style={{ height: '100%' }}>
+                    <div
+                        key={`${heading}-stack`}
+                        className={`collectionNoteTakingView-Nodes`}
+                        style={{
+                            padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`,
+                            margin: 'auto',
+                            width: 'max-content',
+                            height: 'max-content',
+                            position: 'relative',
+                            gridGap: this.props.gridGap,
+                            gridTemplateColumns: templatecols,
+                            gridAutoRows: '0px',
+                        }}>
+                        {this.props.renderChildren(this.props.docList)}
+                    </div>
 
-                        {!this.props.chromeHidden && type !== DocumentType.PRES ? (
-                            <div className="collectionNoteTakingView-DocumentButtons" style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
-                                <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
-                                    <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
-                                </div>
-                                <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
-                                    <EditableView {...this.props.editableViewProps()} />
-                                </div>
-                                {this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && (
-                                    <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}>
-                                        <FontAwesomeIcon icon="trash" size="lg" />
-                                    </button>
-                                )}
+                    {!this.props.chromeHidden && type !== DocumentType.PRES ? (
+                        <div className="collectionNoteTakingView-DocumentButtons" style={{ marginBottom: 10 }}>
+                            <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
+                                <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
                             </div>
-                        ) : null}
-                    </div>
-                }
+                            <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
+                                <EditableView {...this.props.editableViewProps()} />
+                            </div>
+                        </div>
+                    ) : null}
+                </div>
             </>
         );
     }
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 8d659f790..a1309b11f 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -57,7 +57,6 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp
                         width: 12,
                         borderRight: '4px solid #282828',
                         borderLeft: '4px solid #282828',
-                        margin: '0px 10px',
                     }}
                 />
             </div>
-- 
cgit v1.2.3-70-g09d2

