committing to mess around with styles

1 files changed, 39 insertions, 20 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index a441354d2..35f27a862 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -23,7 +23,7 @@ import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocum
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView";
 import { StyleProp } from "../StyleProvider";
 import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
-import "./CollectionStackingView.scss";
+import "./CollectionNoteTakingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
 const _global = (window /* browser */ || global /* node */) as any;
@@ -31,7 +31,6 @@ const _global = (window /* browser */ || global /* node */) as any;
 
 export type collectionNoteTakingViewProps = {
     chromeHidden?: boolean;
-    // view type is stacking
     viewType?: CollectionViewType;
     NativeWidth?: () => number;
     NativeHeight?: () => number;
@@ -135,23 +134,30 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // appears that pivot field IS actually for sorting
         if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
 
+        // Shouldn't need, since we instantiate them in the constructor
+        // if (this.columnHeaders === undefined) {
+        //     setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0);
+        //     return new Map<SchemaHeaderField, Doc[]>();
+        // }
         const columnHeaders = Array.from(this.columnHeaders);
         const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         let changed = false;
         this.filteredChildren.map(d => {
             if (!d[this.pivotField]) {
-              d[this.pivotField] = `First Column`
+              d[this.pivotField] = `New Column`
             };
             const sectionValue = d[this.pivotField] as object;
-            const castedSectionValue = sectionValue.toString()
+            // the next five lines ensures that floating point rounding errors don't create more than one section -syip
+            const parsed = parseInt(sectionValue.toString());
+            const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue;
 
             // look for if header exists already
-            const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue));
+            const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `0`));
             if (existingHeader) {
                 fields.get(existingHeader)!.push(d);
             }
             else {
-                const newSchemaHeader = new SchemaHeaderField(castedSectionValue.toString());
+                const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `0`);
                 fields.set(newSchemaHeader, [d]);
                 columnHeaders.push(newSchemaHeader);
                 changed = true;
@@ -212,9 +218,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return this.props.addDocTab(doc, where);
     }
 
-    // scrollToBottom = () => {
-    //     smoothScroll(500, this._mainCont!, this._mainCont!.scrollHeight);
-    // }
+    scrollToBottom = () => {
+        smoothScroll(500, this._mainCont!, this._mainCont!.scrollHeight);
+    }
 
     // let's dive in and get the actual document we want to drag/move around
     focusDocument = (doc: Doc, options?: DocFocusOptions) => {
@@ -256,7 +262,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const height = () => this.getDocHeight(doc);
 
         let dref: Opt<DocumentView>;
-        const stackedDocTransform = () => this.getDocTransform(doc);
+        const stackedDocTransform = () => this.getDocTransform(doc, dref);
         this._docXfs.push({ stackedDocTransform, width, height });
         //DocumentView is how the node will be rendered
         return <DocumentView ref={r => dref = r || undefined}
@@ -310,10 +316,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     }
 
     //TODO update this to 
-    getDocTransform(doc: Doc) {
-        const {translateX, translateY } = Utils.GetScreenTransform(undefined);
+    getDocTransform(doc: Doc, dref?: DocumentView) {
+        const y = this._scroll; // required for document decorations to update when the text box container is scrolled
+        const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
         // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off 
-        return new Transform(- translateX, - translateY, 1).scale(this.props.ScreenToLocalTransform().Scale);
+        return new Transform(- translateX + (dref?.centeringX || 0), - translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
     }
 
     //TODO do we actually want to update the doc width on this?
@@ -323,9 +330,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       const existingHeader = this.columnHeaders.find(sh => sh.heading === (castedSectionValue));
       if (existingHeader) {
         const index = this.columnHeaders.indexOf(existingHeader)
-        if (index == this.columnHeaders.length) {
-          // The -25 is arbitray and just looked nice
-          return this.props.PanelWidth() - this.columnStartXCoords[index] - 2 * this.gridGap
+        if (this.columnHeaders.length == 1) {
+          return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap
         } 
         return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap
       }
@@ -576,9 +582,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             addDocument={this.addDocument}
             chromeHidden={this.chromeHidden}
             columnHeaders={this.columnHeaders}
-            // resizeColumns={this.resizeColumns}
             Document={this.props.Document}
             DataDoc={this.props.DataDoc}
+            resizeColumns={this.resizeColumns.bind(this)}
             renderChildren={this.children}
             columnWidth={this.columnWidth}
             numGroupColumns={this.numGroupColumns}
@@ -597,7 +603,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             editableViewProps={{
               GetValue: () => "",
               SetValue: this.addGroup,
-              // I don't recall ever seeing this add a group button
               contents: "+ New Column"
           }}
         />;
@@ -643,8 +648,22 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
         // a section will have a header and a list of docs. Ok cool.
         // return sections.map((section, i) => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0));
-        return sections.map((section) => this.sectionStacking(section[0], section[1]));
-
+        //TODO need to add the divs in
+        const eles: JSX.Element[] = []
+        for (let i = 0; i < sections.length; i++) {
+            const col = this.sectionStacking(sections[i][0], sections[i][1])
+            eles.push(col)
+            //TODO make this look pretty
+            // if (i < sections.length - 1) {
+            //   eles.push(
+            //     <div className={"collectionStackingViewFieldColumn"}>
+            //       new div
+            //     </div>
+            //     )
+            // }
+        }
+        return eles
+        // return sections.map((section) => this.sectionStacking(section[0], section[1]));
     }
 
     @computed get buttonMenu() {