added numcols buttons to chrome + fixed some chrome css + added rowheight slider + rowheight slider css + fixed bug on document delete in freeform and reenter grid

6 files changed, 128 insertions, 61 deletions

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index bcb190de4..df84cab56 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -232,7 +232,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         subItems.push({ description: "Carousel", event: () => func(CollectionViewType.Carousel), icon: "columns" });
         subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" });
         subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" });
-        subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "border-all" });
+        subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" });
         if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) {
             subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) });
         }
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 42ec35853..f6027471b 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -181,9 +181,16 @@
             .grid-control {
                 align-self: center;
                 width: 30%;
+                display: flex;
+                flex-direction: row;
 
                 .grid-icon {
                     margin-right: 5px;
+                    align-self: center;
+                }
+
+                .flexLabel {
+                    margin-bottom: 0;
                 }
             }
 
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 3d712e4f5..5a76a4605 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -93,7 +93,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                 this.props.collapse?.(true);
                 break;
         }
-    })
+    });
 
     @undoBatch
     viewChanged = (e: React.ChangeEvent) => {
@@ -569,6 +569,9 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewChro
 @observer
 export class CollectionGridViewChrome extends React.Component<CollectionViewChromeProps> {
 
+    private clicked: boolean = false;
+    private entered: boolean = false;
+
     /**
      * Sets the value of `numCols` on the grid's Document to the value entered.
      */
@@ -577,7 +580,6 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         if (e.key === "Enter" || e.key === "Tab") {
             if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) {
                 this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber;
-                //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer
             }
 
         }
@@ -602,27 +604,59 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid;
     }
 
+    onIncrementButtonClick = () => {
+        this.clicked = true;
+        this.entered && (this.props.CollectionView.props.Document.numCols as number)--;
+        undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)++)();
+        this.entered = false;
+    }
+
+    onDecrementButtonClick = () => {
+        this.clicked = true;
+        this.entered && (this.props.CollectionView.props.Document.numCols as number)++;
+        undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)();
+        this.entered = false;
+    }
+
+    incrementValue = () => {
+        this.entered = true;
+        if (!this.clicked) {
+            (this.props.CollectionView.props.Document.numCols as number)++;
+        }
+        this.clicked = false;
+    }
+
+    decrementValue = () => {
+        this.entered = true;
+        if (!this.clicked) {
+            (this.props.CollectionView.props.Document.numCols as number)--;
+        }
+        this.clicked = false;
+    }
+
     render() {
         return (
-            <div className="collectionGridViewChrome-cont">
-                <span className={"grid-control"}>
+            <div className="collectionGridViewChrome-cont" >
+                <span className="grid-control">
                     <span className="grid-icon">
                         <FontAwesomeIcon icon="columns" size="1x" />
                     </span>
-                    <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.numCols as string} onKeyDown={this.onNumColsEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} />
+                    <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.numCols as string} onKeyDown={this.onNumColsEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
+                    <input className="columnButton" onClick={this.onIncrementButtonClick} onMouseEnter={this.incrementValue} onMouseLeave={this.decrementValue} type="button" value="↑" />
+                    <input className="columnButton" style={{ marginRight: 5 }} onClick={this.onDecrementButtonClick} onMouseEnter={this.decrementValue} onMouseLeave={this.incrementValue} type="button" value="↓" />
                 </span>
-                <span className={"grid-control"}>
+                <span className="grid-control">
                     <span className="grid-icon">
                         <FontAwesomeIcon icon="text-height" size="1x" />
                     </span>
-                    <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.currentTarget.focus()} />
+                    <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"}>
+                <span className="grid-control">
                     <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
                     <span className="grid-icon">
                         <FontAwesomeIcon icon="arrow-up" size="1x" />
                     </span>
-                    <label>Flexible</label>
+                    <label className="flexLabel">Flexible</label>
                 </span>
             </div>
         );
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 94b0d958c..e06e8dc90 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -9,6 +9,43 @@
         height: 100%;
         overflow-y: auto;
         background-color: white;
+        overflow-x: hidden;
+
+        display: flex;
+        flex-direction: row;
+
+        .rowHeightSlider {
+
+            -webkit-appearance: none;
+            appearance: none;
+            width: 100%;
+            height: 15px;
+            background: #d3d3d3;
+            // border-radius: 5px;
+
+            position: absolute;
+            height: 3;
+            left: 5;
+            top: 40;
+            transform-origin: left;
+            transform: rotate(90deg);
+            outline: none;
+            opacity: 0.7;
+        }
+
+        .rowHeightSlider:hover {
+            opacity: 1;
+        }
+
+        .rowHeightSlider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: darkgrey;
+            opacity: 1;
+        }
     }
 
     .collectionGridView-addDocumentButton {
@@ -17,7 +54,8 @@
         margin: auto;
         width: 90%;
         cursor: text;
-
+        min-height: 30px;
+        max-height: 30px;
         font-size: 75%;
         letter-spacing: 2px;
 
@@ -31,15 +69,14 @@
 
         .editableView-container-editing,
         .editableView-container-editing-oneLine {
-            min-height: 20px;
             display: flex;
             align-items: center;
             flex-direction: row;
-            height: auto;
+            height: 20px;
 
+            width: 100%;
             color: grey;
             padding: 10px;
-            width: 100%;
 
             span::before,
             span::after {
@@ -67,8 +104,6 @@
                 align-items: center;
             }
         }
-
-
     }
 
 }
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index c56d6ee53..68612c9dc 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { Doc, Opt } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
 import { makeInterface } from '../../../../fields/Schema';
-import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
 import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
@@ -15,9 +15,9 @@ import Grid, { Layout } from "./Grid";
 import { Id } from '../../../../fields/FieldSymbols';
 import { observer } from 'mobx-react';
 import { SnappingManager } from '../../../util/SnappingManager';
-import "./CollectionGridView.scss";
 import { Docs } from '../../../documents/Documents';
 import { EditableView, EditableProps } from '../../EditableView';
+import "./CollectionGridView.scss";
 
 
 type GridSchema = makeInterface<[typeof documentSchema]>;
@@ -37,28 +37,38 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true);
 
         this.setLayout = this.setLayout.bind(this);
-        // this.addTextDoc = this.addTextDoc.bind(this);
+        this.onSliderChange = this.onSliderChange.bind(this);
 
         this.containerRef = React.createRef();
     }
 
     componentDidMount() {
-
         this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
 
             const layouts: Layout[] = this.parsedLayoutList;
+
+            // if grid view has been opened and then exited and a document has been deleted
+            // this deletes the layout of that document from the layouts list
+            if (!oldValue) {
+                layouts.forEach(({ i }, index) => {
+                    const targetId = i;
+                    if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
+                        layouts.splice(index, 1);
+                    }
+                });
+            }
+
             if (!oldValue || newValue.length > oldValue.length) {
                 // for each document that was added, add a corresponding grid layout document
                 newValue.forEach(({ layout }, i) => {
                     const targetId = layout[Id];
                     if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) {
-                        console.log("pushing")
                         layouts.push({
                             i: targetId,
                             w: 2,
                             h: 2,
-                            x: 2 * (i % Math.floor(this.props.Document.numCols as number / 2)),
-                            y: 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2))
+                            x: 2 * (i % Math.floor(NumCast(this.props.Document.numCols) / 2)),
+                            y: 2 * Math.floor(i / Math.floor(NumCast(this.props.Document.numCols) / 2))
                         });
                     }
                 });
@@ -72,9 +82,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     }
                 });
             }
-
             this.unStringifiedLayoutList = layouts;
-            // this.props.Document.gridLayoutString = JSON.stringify(layouts);
         }, true);
     }
 
@@ -83,23 +91,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     /**
-     * Establishes the x and y properties of the @param layoutDoc, currently
-     * using the @param previousLength for the computations.
-     * 
-     * However, this could also be more of a first fit algorithm, iterating through
-     * this.toLayoutList(DocListCast(this.props.Document.gridLayouts)) and finding the
-     * first gap in the layout structure that suits the width and height. It would be
-     * easiest to see that a column is free (for a given row, if two documents' x are separated
-     * by a value greater than the ratio width of the document you're trying to insert),
-     * but you would then have to ensure that the next row at that column has a y at least
-     * as big as the ratio height of the document you're trying to insert.  
-     */
-    private findNextLayout(layoutDoc: Doc, previousLength: number) {
-        layoutDoc.x = 2 * (previousLength % Math.floor(this.props.Document.numCols as number / 2));
-        layoutDoc.y = 2 * Math.floor(previousLength / Math.floor(this.props.Document.numCols as number / 2));
-    }
-
-    /**
      * @returns the transform that will correctly place
      * the document decorations box, shifted to the right by
      * the sum of all the resolved column widths of the
@@ -108,8 +99,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     private lookupIndividualTransform = (layout: Layout) => {
 
         const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i);
-        const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2))) * this.rowHeightPlusGap + 10 - this._scroll;
-        const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(this.props.Document.numCols as number / 2))) * this.colWidthPlusGap + 10;
+        const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.rowHeightPlusGap + 10 - this._scroll + 30; // 30 is the height of the add text doc bar
+        const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.colWidthPlusGap + 10;
 
         return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
     }
@@ -119,7 +110,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
-    get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; }
+    get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; }
     set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); }
 
 
@@ -177,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             let update: Opt<Layout>;
             const targetId = doc[Id];
             const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId);
-            // const gridLayout = DocListCast(this.props.Document.gridLayouts).find(gridLayout => StrCast(gridLayout.i) === targetId);
             if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) {
                 gridLayout.x = update.x;
                 gridLayout.y = update.y;
@@ -186,7 +176,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             }
         });
 
-        // this.props.Document.gridLayoutString = JSON.stringify(layouts);
         this.unStringifiedLayoutList = layouts;
     }
 
@@ -210,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             const width = () => this.width(gridLayout);
             const height = () => this.height(gridLayout);
             collector.push(
-                <div className={this.props.Document.flexGrid ? "document-wrapper" : "document-wrapper static"}
+                <div className={this.props.Document.flexGrid && (this.props.isSelected() ? true : false) ? "document-wrapper" : "document-wrapper static"}
                     key={gridLayout.i}
                 >
                     {this.getDisplayDoc(layout, dxf, width, height)}
@@ -231,14 +220,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         return this.props.Document.flexGrid ?
             layouts : layouts.map(({ i }, index) => ({
                 i: i,
-                x: 2 * (index % Math.floor(this.props.Document.numCols as number / 2)),
-                y: 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2)),
+                x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)),
+                y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)),
                 w: 2,
                 h: 2,
                 static: true
             }));
     }
 
+    onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.props.Document.rowHeight = event.currentTarget.valueAsNumber;
+    }
+
     @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value }));
 
     /**
@@ -254,14 +247,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         const newEditableViewProps: EditableProps = {
             GetValue: () => "",
             SetValue: this.addTextDocument,
-            contents: "+ NEW",
+            contents: "+ ADD TEXT DOCUMENT AT END",
         };
 
         const childDocumentViews: JSX.Element[] = this.contents;
         const chromeStatus = this.props.Document._chromeStatus;
         const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled');
 
-
         return (
             <div className="collectionGridView-contents"
                 style={{
@@ -290,18 +282,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     ref={this.containerRef}
                     onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
                 >
+                    <input className="rowHeightSlider" type="range" defaultValue={NumCast(this.props.Document.rowHeight)} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} />
                     <Grid
                         width={this.props.PanelWidth()}
                         nodeList={childDocumentViews.length ? childDocumentViews : null}
                         layout={childDocumentViews.length ? this.layoutList : undefined}
                         childrenDraggable={this.props.isSelected() ? true : false}
-                        numCols={this.props.Document.numCols as number}
-                        rowHeight={this.props.Document.rowHeight as number}
+                        numCols={NumCast(this.props.Document.numCols)}
+                        rowHeight={NumCast(this.props.Document.rowHeight)}
                         setLayout={this.setLayout}
-                        //setLayout={(layout: Layout[]) => this.setLayout(layout)}
                         transformScale={this.props.ScreenToLocalTransform().Scale}
-                    // flex={this.props.Document.flexGrid as boolean}
                     />
+
                 </div>
             </div >
         );
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index cae06c4e7..29bafda9b 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -36,7 +36,6 @@ export default class Grid extends React.Component<GridProps> {
      * @param layout `Layout[]`
      */
     onLayoutChange(layout: Layout[]) {
-        console.log("layout changed");
         this.props.setLayout(layout);
     }
 
@@ -50,12 +49,12 @@ export default class Grid extends React.Component<GridProps> {
                 width={this.props.width}
                 compactType={null}
                 isDroppable={true}
-                // isDraggable={this.props.childrenDraggable}
+                isDraggable={this.props.childrenDraggable}
+                isResizable={this.props.childrenDraggable}
                 useCSSTransforms={true}
-                margin={[10, 10]}
                 onLayoutChange={this.onLayoutChange}
-                preventCollision={false} // change this to true later
-                // transformScale={2} // 1.2/scale
+                preventCollision={true}
+                transformScale={this.props.transformScale}
                 style={{ zIndex: 5 }}
             >
                 {this.props.nodeList}