cleanup + comments + changed compact type selector from button to dropdown menu

3 files changed, 28 insertions, 71 deletions

diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 6fb517940..c824c2f33 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -605,6 +605,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid;
     }
 
+    /**
+     * Increments the value of numCols on button click
+     */
     onIncrementButtonClick = () => {
         this.clicked = true;
         this.entered && (this.props.CollectionView.props.Document.numCols as number)--;
@@ -612,6 +615,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.entered = false;
     }
 
+    /**
+     * Decrements the value of numCols on button click
+     */
     onDecrementButtonClick = () => {
         this.clicked = true;
         if (!this.decrementLimitReached) {
@@ -621,6 +627,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.entered = false;
     }
 
+    /**
+     * Increments the value of numCols on button hover
+     */
     incrementValue = () => {
         this.entered = true;
         if (!this.clicked && !this.decrementLimitReached) {
@@ -630,6 +639,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.clicked = false;
     }
 
+    /**
+     * Decrements the value of numCols on button hover
+     */
     decrementValue = () => {
         this.entered = true;
         if (!this.clicked) {
@@ -644,10 +656,16 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.clicked = false;
     }
 
+    /**
+     * Toggles the value of preventCollision
+     */
     toggleCollisions = () => {
         this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision;
     }
 
+    /**
+     * Changes the value of the compactType
+     */
     changeCompactType = (e: React.ChangeEvent<HTMLSelectElement>) => {
         this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value;
     }
@@ -670,7 +688,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
                 </span> */}
                 <span className="grid-control" style={{ width: "20%" }}>
-                    <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
+                    <input type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
                     <label className="flexLabel">Collisions</label>
                 </span>
 
@@ -678,7 +696,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     style={{ marginRight: 5 }}
                     onPointerDown={stopPropagation}
                     onChange={this.changeCompactType}
-                >
+                    value={StrCast(this.props.CollectionView.props.Document.compactType)}>
+                    >
                     {["vertical", "horizontal", "null"].map(type =>
                         <option className="collectionGridViewChrome-viewOption"
                             onPointerDown={stopPropagation}
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index b87bfd0e2..eab3fd79e 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -10,7 +10,7 @@ import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentVi
 import { CollectionSubView } from '../CollectionSubView';
 import { SubCollectionViewProps } from '../CollectionSubView';
 import { List } from '../../../../fields/List';
-import { returnZero } from '../../../../Utils';
+import { returnZero, returnFalse } from '../../../../Utils';
 import Grid, { Layout } from "./Grid";
 import { Id } from '../../../../fields/FieldSymbols';
 import { observer } from 'mobx-react';
@@ -104,25 +104,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.changeListenerDisposer && this.changeListenerDisposer();
     }
 
-    // deletePlaceholder(placeholder: Layout, e: MouseEvent) {
-
-    //     const { left, right, top, bottom } = this.containerRef.current!.getBoundingClientRect();
-    //     if (e.clientX > right || e.clientX < left || e.clientY < top || e.clientY > bottom) {
-    //         const layouts: Layout[] = this.parsedLayoutList;
-    //         const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === placeholder.i);
-    //         index !== -1 && layouts.splice(index, 1);
-
-    //         const i = this.childLayoutPairs.findIndex(({ layout }) => placeholder.i === layout.i);
-    //         i !== -1 && this.childLayoutPairs.splice(i, 1);
-
-    //         console.log("deleting");
-
-    //         this.unStringifiedLayoutList = layouts;
-    //     }
-
-    // }
-
-
     /**
      * @returns the transform that will correctly place the document decorations box. 
      */
@@ -140,8 +121,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     @computed get colWidthPlusGap() { return (this.props.PanelWidth() - 10) / NumCast(this.props.Document.numCols); }
     @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + 10; }
 
-    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
-
     /**
      * @returns the layout list converted from JSON
      */
@@ -165,14 +144,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     @observable private height = (layout: Layout) => (this.props.Document.flexGrid ? layout.h : 2) * this.rowHeightPlusGap - 10;
 
-    addDocTab = (doc: Doc, where: string) => {
-        if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) {
-            this.dataDoc[this.props.fieldKey] = new List<Doc>([doc]);
-            return true;
-        }
-        return this.props.addDocTab(doc, where);
-    }
-
     contextMenuItems = (layoutDoc: Doc) => {
         const layouts: Layout[] = this.parsedLayoutList;
         const freezeScript = ScriptField.MakeFunction(
@@ -184,7 +155,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         // const layouts: Layout[] = this.parsedLayoutList;
 
         // const layoutToChange = layouts.find(({ i }) => i === layoutDoc[Id]);
-        // layoutToChange!.static = true;
+        // layoutToChange!.static = !layoutToChange!.static;
 
         // this.unStringifiedLayoutList = layouts;
 
@@ -206,13 +177,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             DataDoc={layout.resolvedDataDoc as Doc}
             NativeHeight={returnZero}
             NativeWidth={returnZero}
-            addDocTab={this.addDocTab}
+            addDocTab={returnFalse}
             backgroundColor={this.props.backgroundColor}
             ContainingCollectionDoc={this.props.Document}
             PanelWidth={width}
             PanelHeight={height}
             ScreenToLocalTransform={dxf}
-            onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
             parentActive={this.props.active}
             display={"contents"}
@@ -227,8 +197,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     @undoBatch
     @action
     setLayout(layoutArray: Layout[]) {
-        // for every child in the collection, check to see if there's a corresponding grid layout document and
-        // updated layout object. If both exist, which they should, update the grid layout document from the updated object 
+        // for every child in the collection, check to see if there's a corresponding grid layout object and
+        // updated layout object. If both exist, which they should, update the grid layout object from the updated object 
         const layouts: Layout[] = this.parsedLayoutList;
         this.childLayoutPairs.forEach(({ layout: doc }) => {
             let update: Opt<Layout>;
@@ -392,8 +362,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                         transformScale={this.props.ScreenToLocalTransform().Scale}
                         compactType={StrCast(this.props.Document.compactType)}
                         preventCollision={BoolCast(this.props.Document.preventCollision)}
-
-                    // deletePlaceholder={this.deletePlaceholder}
                     />
 
                 </div>
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 5779bf463..058002722 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -16,10 +16,9 @@ interface GridProps {
     layout: Layout[] | undefined;
     numCols: number;
     rowHeight: number;
-    setLayout: Function;
+    setLayout: (layout: Layout[]) => void;
     transformScale: number;
     childrenDraggable: boolean;
-    // deletePlaceholder: Function;
     preventCollision: boolean;
     compactType: string;
 }
@@ -30,37 +29,8 @@ interface GridProps {
 @observer
 export default class Grid extends React.Component<GridProps> {
 
-    // private dragging: boolean = false;
-
-    constructor(props: Readonly<GridProps>) {
-        super(props);
-        this.onLayoutChange = this.onLayoutChange.bind(this);
-        // this.onDrag = this.onDrag.bind(this);
-    }
-    /**
-     * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document.
-     * @param layout `Layout[]`
-     */
-    onLayoutChange(layout: Layout[]) {
-        this.props.setLayout(layout);
-    }
-
-    // onDrag(layout: Layout[],
-    //     oldItem: Layout,
-    //     newItem: Layout,
-    //     placeholder: Layout,
-    //     event: MouseEvent,
-    //     element: HTMLElement) {
-    //     this.props.deletePlaceholder(placeholder, event);
-    //     console.log("Grid -> event", event.clientX)
-
-    // }
-
     render() {
-        console.log(this.props.transformScale);
-
         const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null;
-
         return (
             <GridLayout className="layout"
                 layout={this.props.layout}
@@ -72,7 +42,7 @@ export default class Grid extends React.Component<GridProps> {
                 isDraggable={this.props.childrenDraggable}
                 isResizable={this.props.childrenDraggable}
                 useCSSTransforms={true}
-                onLayoutChange={this.onLayoutChange}
+                onLayoutChange={this.props.setLayout}
                 preventCollision={this.props.preventCollision}
                 transformScale={this.props.transformScale} // still doesn't work :(
                 style={{ zIndex: 5 }}