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')

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