From f86a5e2ad2d0a57e77bd5f43d109faff5cc50bda Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Tue, 21 Apr 2020 16:26:31 +0530
Subject: re-setup of grid view

---
 .../collections/collectionGrid/CollectionGridView.scss      | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/client/views/collections/collectionGrid/CollectionGridView.scss

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
new file mode 100644
index 000000000..c089585a0
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -0,0 +1,13 @@
+.collectionGridView_contents {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+
+    .document-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+        height: 100px;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 36eefd94f5f5d3bc08f1f1dea31d0b752a2070c3 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Fri, 24 Apr 2020 00:34:25 +0530
Subject: developing grid

---
 .../collectionGrid/CollectionGridView.scss         |   1 +
 .../collectionGrid/CollectionGridView.tsx          | 104 +++++++++++++++++++--
 .../views/collections/collectionGrid/Grid.tsx      |  33 ++++---
 3 files changed, 113 insertions(+), 25 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index c089585a0..0f1b64fa6 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -3,6 +3,7 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
+    flex-direction: column;
 
     .document-wrapper {
         display: flex;
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 2e496fe7f..70e0d41b9 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -18,13 +18,103 @@ import Grid from "./Grid";
 type GridSchema = makeInterface<[typeof documentSchema]>;
 const GridSchema = makeInterface(documentSchema);
 
+interface Layout {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+
+
 export class CollectionGridView extends CollectionSubView(GridSchema) {
+
+    /**
+     * @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
+     * documents before the target. 
+     */
+    private lookupIndividualTransform = (layout: Doc) => {
+        // const columnUnitLength = this.columnUnitLength;
+        // if (columnUnitLength === undefined) {
+        //     return Transform.Identity(); // we're still waiting on promises to resolve
+        // }
+        let offset = 0;
+        for (const { layout: candidate } of this.childLayoutPairs) {
+            if (candidate === layout) {
+                return this.props.ScreenToLocalTransform().translate(-offset, 0);
+            }
+            //offset += this.lookupPixels(candidate) + resizerWidth;
+        }
+        return Transform.Identity(); // type coersion, this case should never be hit
+    }
+
+
+    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
+
+    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);
+    }
+
+    getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
+        return <ContentFittingDocumentView
+            {...this.props}
+            Document={layout}
+            DataDocument={layout.resolvedDataDoc as Doc}
+            NativeHeight={returnZero}
+            NativeWidth={returnZero}
+            addDocTab={this.addDocTab}
+            fitToBox={BoolCast(this.props.Document._freezeChildDimensions)}
+            FreezeDimensions={BoolCast(this.props.Document._freezeChildDimensions)}
+            backgroundColor={this.props.backgroundColor}
+            CollectionDoc={this.props.Document}
+            PanelWidth={width}
+            PanelHeight={height}
+            getTransform={dxf}
+            onClick={this.onChildClickHandler}
+            renderDepth={this.props.renderDepth + 1}
+        />;
+    }
+
+    @computed
+    private get contents(): [JSX.Element[], Layout[]] {
+        const { childLayoutPairs } = this;
+        const { Document } = this.props;
+        const collector: JSX.Element[] = [];
+        const layoutArray = [];
+        for (let i = 0; i < childLayoutPairs.length; i++) {
+            const { layout } = childLayoutPairs[i];
+            const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin));
+            const width = () => this.props.PanelWidth() / 5 - 20;  //this.lookupPixels(layout);
+            const height = () => 200;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
+            collector.push(
+                <div className={"document-wrapper"}
+                    key={"wrapper" + i}
+                //style={{ width: width() }}
+                >
+                    {this.getDisplayDoc(layout, dxf, width, height)}
+                </div>
+            );
+
+            layoutArray.push(
+                { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 }
+            );
+        }
+        return [collector, layoutArray];
+    }
+
+
     render(): JSX.Element {
-        const layout = [
-            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
-            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
-            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
-        ];
+
+        const contents: JSX.Element[] = this.contents?.[0];
+        const layout: Layout[] = this.contents?.[1];
+
         return (
             <div className="collectionGridView_contents"
                 style={{
@@ -32,9 +122,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
                 }} ref={this.createDashEventsTarget}>
 
-                <Grid>
-
-                </Grid>
+                <Grid width={this.props.PanelWidth()} nodeList={contents} layout={layout} />
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 550459299..7b8dcefb5 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -1,33 +1,32 @@
 import * as React from 'react';
 import { observer } from "mobx-react";
-import { observable, action } from "mobx";
 
 
-interface Props {
-
-}
-
 import "../../../../../node_modules/react-grid-layout/css/styles.css";
 import "../../../../../node_modules/react-resizable/css/styles.css";
 
 import * as GridLayout from 'react-grid-layout';
 
+interface GridProps {
+    width: number;
+    nodeList: JSX.Element[] | null;
+    layout: any;
+}
+
 @observer
-export default class Grid extends React.Component {
+export default class Grid extends React.Component<GridProps, GridLayout.ResponsiveProps> {
     render() {
         // layout is an array of objects, see the demo for more complete usage
-        const layout = [
-            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
-            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
-            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
-        ];
+        // const layout = [
+        //     { i: 'wrapper0', x: 0, y: 0, w: 2, h: 2 },//, static: true },
+        //     { i: 'wrapper1', x: 2, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 },
+        //     { i: 'wrapper2', x: 4, y: 0, w: 2, h: 2 },
+        //     { i: 'wrapper3', x: 6, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 },
+        //     { i: 'wrapper4', x: 8, y: 0, w: 2, h: 2 }
+        // ];
         return (
-            // <div className="collectionGridView_contents"
-            // style={}>
-            <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
-                <div key="a">a</div>
-                <div key="b">b</div>
-                <div key="c">c</div>
+            <GridLayout className="layout" layout={this.props.layout} cols={10} rowHeight={100} width={this.props.width}>
+                {this.props.nodeList}
             </GridLayout>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 20beef06518bfa08db60b8c5a06c637dab0f2b92 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 27 Apr 2020 18:18:21 +0530
Subject: update to pull from master

---
 package-lock.json                                  | 82 ++++++++++++++++++----
 package.json                                       |  3 +
 .../collectionGrid/CollectionGridView.scss         |  4 +-
 .../collectionGrid/CollectionGridView.tsx          | 52 +++++++++-----
 .../views/collections/collectionGrid/Grid.tsx      | 35 ++++++---
 5 files changed, 134 insertions(+), 42 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/package-lock.json b/package-lock.json
index 176d1f27e..a59e419c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -973,6 +973,14 @@
                 "@types/react": "*"
             }
         },
+        "@types/react-grid-layout": {
+            "version": "0.17.1",
+            "resolved": "https://registry.npmjs.org/@types/react-grid-layout/-/react-grid-layout-0.17.1.tgz",
+            "integrity": "sha512-1ssQjX3X2A89jx94jECJ0Ze2EHFRYlBHjRh2pnlwjJj1WaEijXUNvwKnUzKwgNFnyZ91Pzqu9Z3V7Atzi9ge7A==",
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@types/react-measure": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/@types/react-measure/-/react-measure-2.0.6.tgz",
@@ -5551,7 +5559,8 @@
                 },
                 "ansi-regex": {
                     "version": "2.1.1",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -5569,7 +5578,8 @@
                 },
                 "balanced-match": {
                     "version": "1.0.0",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "bindings": {
                     "version": "1.5.0",
@@ -5583,6 +5593,7 @@
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -5595,15 +5606,18 @@
                 },
                 "code-point-at": {
                     "version": "1.1.0",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -5706,7 +5720,8 @@
                 },
                 "inherits": {
                     "version": "2.0.4",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -5716,6 +5731,7 @@
                 "is-fullwidth-code-point": {
                     "version": "1.0.0",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -5728,17 +5744,20 @@
                 "minimatch": {
                     "version": "3.0.4",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
                 },
                 "minimist": {
                     "version": "1.2.5",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "minipass": {
                     "version": "2.9.0",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -5755,6 +5774,7 @@
                 "mkdirp": {
                     "version": "0.5.3",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "minimist": "^1.2.5"
                     }
@@ -5810,7 +5830,8 @@
                 },
                 "npm-normalize-package-bin": {
                     "version": "1.0.1",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "npm-packlist": {
                     "version": "1.4.8",
@@ -5835,7 +5856,8 @@
                 },
                 "number-is-nan": {
                     "version": "1.0.1",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -5845,6 +5867,7 @@
                 "once": {
                     "version": "1.4.0",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -5913,7 +5936,8 @@
                 },
                 "safe-buffer": {
                     "version": "5.1.2",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -5943,6 +5967,7 @@
                 "string-width": {
                     "version": "1.0.2",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -5960,6 +5985,7 @@
                 "strip-ansi": {
                     "version": "3.0.1",
                     "bundled": true,
+                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -5998,11 +6024,13 @@
                 },
                 "wrappy": {
                     "version": "1.0.2",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 },
                 "yallist": {
                     "version": "3.1.1",
-                    "bundled": true
+                    "bundled": true,
+                    "optional": true
                 }
             }
         },
@@ -13946,6 +13974,15 @@
                 "scheduler": "^0.19.1"
             }
         },
+        "react-draggable": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
+            "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
+            "requires": {
+                "classnames": "^2.2.5",
+                "prop-types": "^15.6.0"
+            }
+        },
         "react-golden-layout": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/react-golden-layout/-/react-golden-layout-1.0.6.tgz",
@@ -13956,6 +13993,18 @@
                 "react-dom": "^16.3.0"
             }
         },
+        "react-grid-layout": {
+            "version": "0.18.3",
+            "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-0.18.3.tgz",
+            "integrity": "sha512-lHkrk941Tk5nTwZPa9uj6ttHBT0VehSHwEhWbINBJKvM1GRaFNOefvjcuxSyuCI5JWjVUP+Qm3ARt2470AlxMA==",
+            "requires": {
+                "classnames": "2.x",
+                "lodash.isequal": "^4.0.0",
+                "prop-types": "^15.0.0",
+                "react-draggable": "^4.0.0",
+                "react-resizable": "^1.9.0"
+            }
+        },
         "react-image-lightbox-with-rotate": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/react-image-lightbox-with-rotate/-/react-image-lightbox-with-rotate-5.1.1.tgz",
@@ -14066,6 +14115,15 @@
                 }
             }
         },
+        "react-resizable": {
+            "version": "1.10.1",
+            "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.10.1.tgz",
+            "integrity": "sha512-Jd/bKOKx6+19NwC4/aMLRu/J9/krfxlDnElP41Oc+oLiUWs/zwV1S9yBfBZRnqAwQb6vQ/HRSk3bsSWGSgVbpw==",
+            "requires": {
+                "prop-types": "15.x",
+                "react-draggable": "^4.0.3"
+            }
+        },
         "react-simple-dropdown": {
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/react-simple-dropdown/-/react-simple-dropdown-3.2.3.tgz",
diff --git a/package.json b/package.json
index f1b4be520..9c2d4602c 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
         "@types/react": "^16.9.19",
         "@types/react-autosuggest": "^9.3.13",
         "@types/react-color": "^2.17.3",
+        "@types/react-grid-layout": "^0.17.1",
         "@types/react-measure": "^2.0.6",
         "@types/react-table": "^6.8.6",
         "@types/request": "^2.48.4",
@@ -230,10 +231,12 @@
         "react-dimensions": "^1.3.1",
         "react-dom": "^16.12.0",
         "react-golden-layout": "^1.0.6",
+        "react-grid-layout": "^0.18.3",
         "react-image-lightbox-with-rotate": "^5.1.1",
         "react-jsx-parser": "^1.21.0",
         "react-measure": "^2.2.4",
         "react-mosaic": "0.0.20",
+        "react-resizable": "^1.10.1",
         "react-simple-dropdown": "^3.2.3",
         "react-split-pane": "^0.1.89",
         "react-table": "^6.11.5",
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 0f1b64fa6..8f12c1a24 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -8,7 +8,7 @@
     .document-wrapper {
         display: flex;
         flex-direction: column;
-        width: 100px;
-        height: 100px;
+        width: 100%;
+        height: 100%;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 70e0d41b9..b94bd02a1 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from "react";
 import { Doc } from '../../../../new_fields/Doc';
@@ -13,23 +13,16 @@ import { CollectionSubView } from '../CollectionSubView';
 import { List } from '../../../../new_fields/List';
 import { returnZero } from '../../../../Utils';
 import Grid from "./Grid";
+import { Layout } from "./Grid";
 
 
 type GridSchema = makeInterface<[typeof documentSchema]>;
 const GridSchema = makeInterface(documentSchema);
 
-interface Layout {
-    i: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-
-
-
 export class CollectionGridView extends CollectionSubView(GridSchema) {
 
+    @observable private layouts: Layout[] | undefined;
+
     /**
      * @returns the transform that will correctly place
      * the document decorations box, shifted to the right by
@@ -46,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             if (candidate === layout) {
                 return this.props.ScreenToLocalTransform().translate(-offset, 0);
             }
-            //offset += this.lookupPixels(candidate) + resizerWidth;
+            offset += 194 + 10;
         }
         return Transform.Identity(); // type coersion, this case should never be hit
     }
@@ -82,17 +75,37 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         />;
     }
 
+    //@action
+    set layout(layouts: Layout[]) {
+        this.layouts = layouts;
+        console.log(this.layouts[0]);
+    }
+
+    @computed
+    get layout() {
+        if (this.layouts === undefined) {
+            this.layouts = [];
+            console.log("empty");
+            for (let i = 0; i < this.childLayoutPairs.length; i++) {
+                this.layouts.push(
+                    { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 }
+                );
+            }
+        }
+        return this.layouts;
+    }
+
     @computed
     private get contents(): [JSX.Element[], Layout[]] {
         const { childLayoutPairs } = this;
         const { Document } = this.props;
         const collector: JSX.Element[] = [];
-        const layoutArray = [];
+        const layoutArray: Layout[] = [];
         for (let i = 0; i < childLayoutPairs.length; i++) {
             const { layout } = childLayoutPairs[i];
             const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin));
-            const width = () => this.props.PanelWidth() / 5 - 20;  //this.lookupPixels(layout);
-            const height = () => 200;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
+            const width = () => 300;  //this.lookupPixels(layout);
+            const height = () => 300;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
             collector.push(
                 <div className={"document-wrapper"}
                     key={"wrapper" + i}
@@ -104,12 +117,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
             layoutArray.push(
                 { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 }
+                // add values to document
             );
         }
         return [collector, layoutArray];
     }
 
-
     render(): JSX.Element {
 
         const contents: JSX.Element[] = this.contents?.[0];
@@ -122,7 +135,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
                 }} ref={this.createDashEventsTarget}>
 
-                <Grid width={this.props.PanelWidth()} nodeList={contents} layout={layout} />
+                <Grid
+                    width={this.props.PanelWidth()}
+                    nodeList={contents}
+                    layout={layout}
+                    gridView={this}
+                />
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 7b8dcefb5..a9e906488 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -6,28 +6,41 @@ import "../../../../../node_modules/react-grid-layout/css/styles.css";
 import "../../../../../node_modules/react-resizable/css/styles.css";
 
 import * as GridLayout from 'react-grid-layout';
+import { Layout } from 'react-grid-layout';
+import { CollectionGridView } from './CollectionGridView';
+export { Layout } from 'react-grid-layout';
+
 
 interface GridProps {
     width: number;
     nodeList: JSX.Element[] | null;
-    layout: any;
+    layout: Layout[];
+    gridView: CollectionGridView;
 }
 
 @observer
 export default class Grid extends React.Component<GridProps, GridLayout.ResponsiveProps> {
+
+    onLayoutChange(layout: Layout[]) {
+        // for (let i = 0; i < this.props.nodeList!.length; i++) {
+        //     this.props.layout[i] = layout[i];
+        // }
+        console.log("REACHED");
+        this.props.gridView.layout = layout;
+    }
     render() {
-        // layout is an array of objects, see the demo for more complete usage
-        // const layout = [
-        //     { i: 'wrapper0', x: 0, y: 0, w: 2, h: 2 },//, static: true },
-        //     { i: 'wrapper1', x: 2, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 },
-        //     { i: 'wrapper2', x: 4, y: 0, w: 2, h: 2 },
-        //     { i: 'wrapper3', x: 6, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 },
-        //     { i: 'wrapper4', x: 8, y: 0, w: 2, h: 2 }
-        // ];
         return (
-            <GridLayout className="layout" layout={this.props.layout} cols={10} rowHeight={100} width={this.props.width}>
+            <GridLayout className="layout"
+                layout={this.props.layout}
+                cols={10}
+                rowHeight={100}
+                width={this.props.width}
+                compactType={null}
+                isDroppable={true}
+                onLayoutChange={layout => this.onLayoutChange(layout)}
+            >
                 {this.props.nodeList}
-            </GridLayout>
+            </GridLayout >
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2


From fb23850659dd6cc0b75d208168e25033096e07df Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 27 May 2020 20:11:06 +0530
Subject: changes

---
 .../views/collections/CollectionViewChromes.tsx    |  4 +--
 .../collectionGrid/CollectionGridView.scss         | 19 ++++-------
 .../collectionGrid/CollectionGridView.tsx          | 39 +++++++++++++---------
 .../views/collections/collectionGrid/Grid.tsx      |  1 +
 4 files changed, 33 insertions(+), 30 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 7e86995ac..2bffbdf7d 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -557,9 +557,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     </span>
                     <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} />
                 </span>
-                <span>
+                <span className={"search-icon"}>
                     <span className="icon-background">
-                        <FontAwesomeIcon icon="arrows-alt" size="1x" />
+                        <FontAwesomeIcon icon="arrow-up" size="1x" />
                     </span>
                     <input type="checkbox" onChange={this.onCheck} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
                     <label>Flexible Grid</label>
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 8f12c1a24..4ad3d7015 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -1,14 +1,9 @@
-.collectionGridView_contents {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
+// .react-grid-layout.layout {
+    //     // max-height: 100%;// min-height: 100%;
+    //     overflow-y: auto;
+    // }
 
-    .document-wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-    }
+.collectionView {
+    background-color: white;
+    overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 468665ee5..a887cf98b 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -14,6 +14,7 @@ import { returnZero } from '../../../../Utils';
 import Grid, { Layout } from "./Grid";
 import { Id } from '../../../../fields/FieldSymbols';
 import { observer } from 'mobx-react';
+import "./CollectionGridView.scss";
 
 type GridSchema = makeInterface<[typeof documentSchema]>;
 const GridSchema = makeInterface(documentSchema);
@@ -64,16 +65,24 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     private lookupIndividualTransform = (doc: Doc) => {
 
-        const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top;
-        const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250;
+        // const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top;
+        // const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250;
 
         //console.log(xTranslation);
 
+        //console.log(`width: ${doc.w} height: ${doc.h} x: ${doc.x} y:${doc.y}`);
+
+        const xTranslation = doc.x as number * this.props.PanelWidth() / (this.props.Document.numCols as number) + 10;
+        const yTranslation = doc.y as number * (this.props.Document.rowHeight as number + 10) + 10;
+
         if (xTranslation === undefined || yTranslation === undefined) {
+            console.log("undefined babey");
             return Transform.Identity();
         }
 
-        return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
+        console.log(`xtrans: ${xTranslation}  ytrans:${yTranslation}`);
+
+        return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);//.translate(-NumCast(this.props.Document._xMargin), -NumCast(this.props.Document._yMargin));
 
     }
 
@@ -85,25 +94,23 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @param Doc doc
      */
     private width = (doc: Doc) => {
-        // const left = document.getElementById(doc.i as string)?.getBoundingClientRect().left;
-        // const right = document.getElementById(doc.i as string)?.getBoundingClientRect().right;
-        // //console.log(left - right);
-        // return Math.abs(right - left);
-        return doc.w as number * (this.props.PanelWidth() - (this.props.Document.numCols as number - 1) * 10) / (this.props.Document.numCols as number);
+
+        // return document.getElementById(doc.i as string)?.getBoundingClientRect().width;
+        const xTranslation = doc.w as number * (this.props.PanelWidth() - 10 * (this.props.Document.numCols as number + 1)) / (this.props.Document.numCols as number);
+        return (this.props.PanelWidth() - 10 * (this.props.Document.numCols as number + 1)) / (this.props.Document.numCols as number) *
+            (this.props.Document.flexGrid as boolean ? doc.w as number : 2) + 10 * (doc.w as number - 1);// doc.w or 2
     }
     /**
      * Sets the height of the decorating box.
      * @param doc `Doc`
      */
     private height = (doc: Doc) => {
+        //console.log(document.getElementById(doc.i as string)?.getBoundingClientRect());
 
-        // const top = document.getElementById(doc.i as string)?.getBoundingClientRect().top;
-        // const bottom = document.getElementById(doc.i as string)?.getBoundingClientRect().bottom;
-        // //console.log(Math.abs(top - bottom));
-        // return Math.abs(top - bottom);
-
-
-        return (doc.h as number) * (this.props.Document.rowHeight as number);
+        // return document.getElementById(doc.i as string)?.getBoundingClientRect().height;
+        return this.props.Document.rowHeight as number *
+            (this.props.Document.flexGrid as boolean ? doc.h as number : 2) +
+            10 * (doc.h as number - 1);// + 10;
     }
 
     addDocTab = (doc: Doc, where: string) => {
@@ -303,7 +310,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
 
         return (
-            <div className="collectionGridView_contents"
+            <div className="collectionGridView-contents"
                 style={{
                     marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin),
                     marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 49179aaa8..9520532b8 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -54,6 +54,7 @@ export default class Grid extends React.Component<GridProps> {
                 isDroppable={true}
                 margin={[10, 10]}
                 onLayoutChange={this.onLayoutChange}
+                preventCollision={true}
             >
                 {this.props.nodeList}
             </GridLayout >
-- 
cgit v1.2.3-70-g09d2


From efaa44cacf9cf8506209c9bf1437e36828132eea Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 27 May 2020 15:17:01 -0400
Subject: fixed layout and interactions of grid view

---
 .../collectionGrid/CollectionGridView.scss         | 13 ++++----
 .../collectionGrid/CollectionGridView.tsx          | 37 ++++++++++------------
 src/client/views/nodes/DocumentView.tsx            |  6 ++--
 3 files changed, 26 insertions(+), 30 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 8f12c1a24..c0a2cbc22 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -4,11 +4,10 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-
-    .document-wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-    }
+}
+.collectionGridView_contents .document-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index a55d5a8ac..03ba9d004 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -94,25 +94,22 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
-        return <div style={{ display: "flex" }}>
-            <ContentFittingDocumentView
-                {...this.props}
-                Document={layout}
-                DataDoc={layout.resolvedDataDoc as Doc}
-                NativeHeight={returnZero}
-                NativeWidth={returnZero}
-                addDocTab={this.addDocTab}
-                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"}
-            />
-        </div>;
+        return <ContentFittingDocumentView
+            {...this.props}
+            Document={layout}
+            DataDoc={layout.resolvedDataDoc as Doc}
+            NativeHeight={returnZero}
+            NativeWidth={returnZero}
+            addDocTab={this.addDocTab}
+            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}
+        />;
     }
 
 
@@ -243,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined
                 }}
                 ref={this.createDashEventsTarget}
-                onPointerDown={e => e.stopPropagation()}
+                onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }}
             >
                 <Grid
                     width={this.props.PanelWidth()}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 79b560118..6034a3cb7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -517,7 +517,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
             if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
                 e.stopPropagation();
-                e.preventDefault();
+                if (SelectionManager.IsSelected(this, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
                 // TODO: check here for panning/inking
             }
             return;
@@ -531,8 +531,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 !e.ctrlKey &&
                 (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) &&
                 !this.Document.inOverlay) {
-                e.stopPropagation(); // events stop at the lowest document that is active.  if right dragging, we let it go through though to allow for context menu clicks. PointerMove callbacks should remove themselves if the move event gets stopPropagated by a lower-level handler (e.g, marquee drag);
-                e.preventDefault();
+                e.stopPropagation();
+                if (SelectionManager.IsSelected(this, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
             }
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
-- 
cgit v1.2.3-70-g09d2


From 28388e57564accf6ba3758b475144a78c2774458 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Thu, 28 May 2020 15:38:32 +0530
Subject: css

---
 .../collectionGrid/CollectionGridView.scss         | 25 +++++++++++++++++++---
 .../collectionGrid/CollectionGridView.tsx          |  4 +---
 .../views/collections/collectionGrid/Grid.tsx      | 12 +++++------
 3 files changed, 28 insertions(+), 13 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 3e139ac97..b88721b4d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -3,7 +3,26 @@
 //     overflow-y: auto;
 // }
 
-.collectionView {
-    background-color: white;
-    overflow-y: scroll;
+// .collectionView {//     background-color: white;
+//     overflow-y: scroll;
+// }
+
+
+.collectionGridView_contents {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.collectionGridView_contents .document-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.react-grid-layout.layout {
+    height: 100%
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index fdd25558c..111ce4beb 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -281,7 +281,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         //     console.log(layout[0].w);
         // }
 
-
         return (
             <div className="collectionGridView-contents"
                 style={{
@@ -297,12 +296,11 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     width={this.props.PanelWidth()}
                     nodeList={contents}
                     layout={layout}
-                    transformScale={this.props.ScreenToLocalTransform().Scale}
                     numCols={this.props.Document.numCols as number}
                     rowHeight={this.props.Document.rowHeight as number}
                     setLayout={this.setLayout}
                     flex={this.props.Document.flexGrid as boolean}
-                    scale={1 / this.props.ScreenToLocalTransform().Scale}
+                    scale={this.props.ScreenToLocalTransform().Scale}
                 />
             </div>
         );
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 423268d40..673f670a6 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -37,15 +37,11 @@ export default class Grid extends React.Component<GridProps> {
      * @param layout `Layout[]`
      */
     onLayoutChange(layout: Layout[]) {
-        console.log("setting in grid component" + layout[0]?.w);
-        // if (this.props.flex) {
         this.props.setLayout(layout);
-        // }
     }
 
-    Scale = 2
     render() {
-        console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w);
+        console.log(this.props.scale);
         return (
             <GridLayout className="layout"
                 layout={this.props.layout}
@@ -57,8 +53,10 @@ export default class Grid extends React.Component<GridProps> {
                 useCSSTransforms={true}
                 margin={[10, 10]}
                 onLayoutChange={this.onLayoutChange}
-                preventCollision={true}
-                transformScale={this.props.scale}
+                preventCollision={false} // change this to true later
+                transformScale={0.8} // 1.2/scale
+                style={{ height: "100%", overflowY: "scroll" }}
+            // draggableHandle={".documentDecorations-resizer"}
             >
                 {this.props.nodeList}
             </GridLayout >
-- 
cgit v1.2.3-70-g09d2


From 85553878a01877efb9e9d3b748064db66a6d8e30 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 10:06:31 +0530
Subject: added grid ref and fixed css

---
 .../views/collections/CollectionViewChromes.scss   | 23 ++++++++++--
 .../views/collections/CollectionViewChromes.tsx    | 41 +++++++++++----------
 .../collectionGrid/CollectionGridView.scss         | 43 +++++++++++++---------
 .../collectionGrid/CollectionGridView.tsx          | 37 ++++++++++++-------
 .../views/collections/collectionGrid/Grid.tsx      |  9 +++--
 5 files changed, 95 insertions(+), 58 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 9795a3a22..910c14060 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -164,13 +164,31 @@
             }
         }
 
-
         .collectionStackingViewChrome-cont,
         .collectionTreeViewChrome-cont {
             display: flex;
             justify-content: space-between;
         }
 
+        .collectionGridViewChrome-cont {
+            display: flex;
+            margin-left: 10;
+
+            .grid-control {
+                align-self: center;
+                width: 30%;
+
+                .grid-icon {
+                    margin-right: 5px;
+                }
+            }
+
+            .collectionGridViewChrome-entryBox {
+                width: 50%;
+            }
+        }
+
+
         .collectionStackingViewChrome-sort,
         .collectionTreeViewChrome-sort {
             display: flex;
@@ -238,9 +256,6 @@
             cursor: text;
         }
 
-        .collectionGridViewChrome-entryBox {
-            width: 50%;
-        }
     }
 }
 
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 2bffbdf7d..9423e417d 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -15,8 +15,6 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss";
 import { CollectionViewType } from "./CollectionView";
 import { CollectionView } from "./CollectionView";
 import "./CollectionViewChromes.scss";
-import { CollectionGridView } from "./collectionGrid/CollectionGridView";
-import HeightLabel from "./collectionMulticolumn/MultirowHeightLabel";
 const datepicker = require('js-datepicker');
 
 interface CollectionViewChromeProps {
@@ -516,10 +514,10 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     /**
      * Sets the value of `numCols` on the grid's Document to the value entered.
      */
-    @action
+    @undoBatch
     onNumColsEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter" || e.key === "Tab") {
-            if (this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) {
+            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
             }
@@ -530,39 +528,44 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     /**
      * Sets the value of `rowHeight` on the grid's Document to the value entered.
      */
-    @action
+    @undoBatch
     onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter" || e.key === "Tab") {
-            if (this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) {
+            if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) {
                 this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber;
-                //this.props.CollectionView.forceUpdate();
             }
         }
     }
 
-    onCheck = (event: React.ChangeEvent<HTMLInputElement>) => this.props.CollectionView.props.Document.flexGrid = event.target.checked;
+    /**
+     * Sets whether the grid is flexible or not on the grid's Document.
+     */
+    @undoBatch
+    toggleFlex = () => {
+        this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid;
+    }
 
     render() {
         return (
-            <div className="collectionTreeViewChrome-cont">
-                <span className={"search-icon"}>
-                    <span className="icon-background">
+            <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} autoFocus />
+                    <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()} />
                 </span>
-                <span className={"search-icon"}>
-                    <span className="icon-background">
+                <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} />
+                    <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()} />
                 </span>
-                <span className={"search-icon"}>
-                    <span className="icon-background">
+                <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>
-                    <input type="checkbox" onChange={this.onCheck} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
-                    <label>Flexible Grid</label>
+                    <label>Flexible</label>
                 </span>
             </div>
         );
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index b88721b4d..49d463441 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -1,14 +1,4 @@
-// .react-grid-layout.layout {
-//     // max-height: 100%;// min-height: 100%;
-//     overflow-y: auto;
-// }
-
-// .collectionView {//     background-color: white;
-//     overflow-y: scroll;
-// }
-
-
-.collectionGridView_contents {
+.collectionGridView-contents {
     display: flex;
     overflow: hidden;
     width: 100%;
@@ -16,13 +6,32 @@
     flex-direction: column;
 }
 
-.collectionGridView_contents .document-wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+.collectionGridView-contents .collectionGridView-gridContainer {
     height: 100%;
+    overflow-y: auto;
+    background-color: white;
+}
+
+.documentDecorations-container .documentDecorations-resizer {
+    pointer-events: none;
+
+}
+
+#documentDecorations-bottomRightResizer,
+#documentDecorations-bottomLeftResizer,
+#documentDecorations-topRightResizer,
+#documentDecorations-topLeftResizer {
+    visibility: collapse;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
 }
 
-.react-grid-layout.layout {
-    height: 100%
+/* Firefox */
+input[type=number] {
+    -moz-appearance: textfield;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 111ce4beb..5eeaa9b0d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,4 +1,4 @@
-import { computed, observable } from 'mobx';
+import { computed, observable, action } from 'mobx';
 import * as React from "react";
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
@@ -23,6 +23,8 @@ const GridSchema = makeInterface(documentSchema);
 
 @observer
 export class CollectionGridView extends CollectionSubView(GridSchema) {
+    private containerRef: React.RefObject<HTMLDivElement>;
+    @observable private _scroll: number = 0;
 
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
@@ -33,6 +35,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         this.setLayout = this.setLayout.bind(this);
         this.deleteInContext = this.deleteInContext.bind(this);
+
+        this.containerRef = React.createRef();
     }
 
     componentDidMount() {
@@ -66,7 +70,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * documents before the target. 
      */
     private lookupIndividualTransform = (doc: Doc) => {
-        const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10;
+        const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll;
+        console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop)
         const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10;
         return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
     }
@@ -113,7 +118,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
             parentActive={this.props.active}
-            display={"contents"}
+            display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes
             removeDocument={this.deleteInContext}
         />;
     }
@@ -291,17 +296,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 ref={this.createDashEventsTarget}
                 onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond
             >
-                DIV HERE with ref to access scroll of and adjust in getting position
-                <Grid
-                    width={this.props.PanelWidth()}
-                    nodeList={contents}
-                    layout={layout}
-                    numCols={this.props.Document.numCols as number}
-                    rowHeight={this.props.Document.rowHeight as number}
-                    setLayout={this.setLayout}
-                    flex={this.props.Document.flexGrid as boolean}
-                    scale={this.props.ScreenToLocalTransform().Scale}
-                />
+                <div className="collectionGridView-gridContainer"
+                    ref={this.containerRef}
+                    onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
+                >
+                    <Grid
+                        width={this.props.PanelWidth()}
+                        nodeList={contents}
+                        layout={layout}
+                        numCols={this.props.Document.numCols as number}
+                        rowHeight={this.props.Document.rowHeight as number}
+                        setLayout={this.setLayout}
+                        flex={this.props.Document.flexGrid as boolean}
+                        scale={this.props.ScreenToLocalTransform().Scale}
+                    />
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 673f670a6..be6c4343a 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -26,9 +26,11 @@ interface GridProps {
  */
 @observer
 export default class Grid extends React.Component<GridProps> {
+    gridRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Readonly<GridProps>) {
         super(props);
+        this.gridRef = React.createRef();
 
         this.onLayoutChange = this.onLayoutChange.bind(this);
     }
@@ -50,13 +52,12 @@ export default class Grid extends React.Component<GridProps> {
                 width={this.props.width}
                 compactType={null}
                 isDroppable={true}
-                useCSSTransforms={true}
+                // useCSSTransforms={true}
                 margin={[10, 10]}
                 onLayoutChange={this.onLayoutChange}
                 preventCollision={false} // change this to true later
-                transformScale={0.8} // 1.2/scale
-                style={{ height: "100%", overflowY: "scroll" }}
-            // draggableHandle={".documentDecorations-resizer"}
+                // transformScale={2} // 1.2/scale
+                onDrop={({ x, y, e }) => { console.log("Grid -> render -> x, y, e", x, y, e) }}
             >
                 {this.props.nodeList}
             </GridLayout >
-- 
cgit v1.2.3-70-g09d2


From 9f64b56310c0345e97014f418129c9883ab56e89 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 11:34:00 +0530
Subject: cleanup

---
 .../collectionGrid/CollectionGridView.scss         | 22 ++++++++++++----------
 .../collectionGrid/CollectionGridView.tsx          |  1 -
 .../views/collections/collectionGrid/Grid.tsx      |  5 +----
 3 files changed, 13 insertions(+), 15 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 49d463441..fb30fe4c1 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -4,25 +4,27 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
+
 }
 
+// .documentDecorations-container .documentDecorations-resizer {
+//     pointer-events: none;
+// }
+
+// #documentDecorations-bottomRightResizer,
+// #documentDecorations-bottomLeftResizer,
+// #documentDecorations-topRightResizer,
+// #documentDecorations-topLeftResizer {
+//     visibility: collapse;
+// }
+
 .collectionGridView-contents .collectionGridView-gridContainer {
     height: 100%;
     overflow-y: auto;
     background-color: white;
 }
 
-.documentDecorations-container .documentDecorations-resizer {
-    pointer-events: none;
 
-}
-
-#documentDecorations-bottomRightResizer,
-#documentDecorations-bottomLeftResizer,
-#documentDecorations-topRightResizer,
-#documentDecorations-topLeftResizer {
-    visibility: collapse;
-}
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index f503c38d1..dd355ef47 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -71,7 +71,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     private lookupIndividualTransform = (doc: Doc) => {
         const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll;
-        console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop)
         const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10;
         return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
     }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 542edb1cd..0e9e8bbca 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -26,12 +26,9 @@ interface GridProps {
  */
 @observer
 export default class Grid extends React.Component<GridProps> {
-    gridRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Readonly<GridProps>) {
         super(props);
-        this.gridRef = React.createRef();
-
         this.onLayoutChange = this.onLayoutChange.bind(this);
     }
     /**
@@ -52,7 +49,7 @@ export default class Grid extends React.Component<GridProps> {
                 width={this.props.width}
                 compactType={null}
                 isDroppable={true}
-                isDraggable={this.props.childrenDraggable}
+                // isDraggable={this.props.childrenDraggable}
                 // useCSSTransforms={true}
                 margin={[10, 10]}
                 onLayoutChange={this.onLayoutChange}
-- 
cgit v1.2.3-70-g09d2


From 656fdf999b92e8579e303cc08e865427674c51c6 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 16:55:39 +0530
Subject: added text doc creation functionality + css + handled some bugs in
 json layouts

---
 .../collectionGrid/CollectionGridView.scss         | 75 +++++++++++++++++--
 .../collectionGrid/CollectionGridView.tsx          | 84 +++++++++++-----------
 .../views/collections/collectionGrid/Grid.tsx      |  6 +-
 3 files changed, 111 insertions(+), 54 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index fb30fe4c1..94b0d958c 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -5,8 +5,75 @@
     height: 100%;
     flex-direction: column;
 
+    .collectionGridView-gridContainer {
+        height: 100%;
+        overflow-y: auto;
+        background-color: white;
+    }
+
+    .collectionGridView-addDocumentButton {
+        display: flex;
+        overflow: hidden;
+        margin: auto;
+        width: 90%;
+        cursor: text;
+
+        font-size: 75%;
+        letter-spacing: 2px;
+
+        .editableView-input {
+            outline-color: black;
+            letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
+        }
+
+        .editableView-container-editing,
+        .editableView-container-editing-oneLine {
+            min-height: 20px;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            height: auto;
+
+            color: grey;
+            padding: 10px;
+            width: 100%;
+
+            span::before,
+            span::after {
+                content: "";
+                width: 50%;
+                position: relative;
+                display: inline-block;
+            }
+
+            span::before {
+                margin-right: 10px;
+            }
+
+            span::after {
+                margin-left: 10px;
+            }
+
+            span {
+                position: relative;
+                text-align: center;
+                white-space: nowrap;
+                overflow: visible;
+                display: flex;
+                color: gray;
+                align-items: center;
+            }
+        }
+
+
+    }
+
 }
 
+
 // .documentDecorations-container .documentDecorations-resizer {
 //     pointer-events: none;
 // }
@@ -18,13 +85,7 @@
 //     visibility: collapse;
 // }
 
-.collectionGridView-contents .collectionGridView-gridContainer {
-    height: 100%;
-    overflow-y: auto;
-    background-color: white;
-}
-
-
+// .collectionGridView-contents
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 63a679f7e..09cf66d5a 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,9 +1,9 @@
 import { computed, observable, Lambda, action } from 'mobx';
 import * as React from "react";
-import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Doc, Opt } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
 import { makeInterface } from '../../../../fields/Schema';
-import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
 import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
@@ -14,8 +14,10 @@ import { returnZero } from '../../../../Utils';
 import Grid, { Layout } from "./Grid";
 import { Id } from '../../../../fields/FieldSymbols';
 import { observer } from 'mobx-react';
-import "./CollectionGridView.scss";
 import { SnappingManager } from '../../../util/SnappingManager';
+import "./CollectionGridView.scss";
+import { Docs } from '../../../documents/Documents';
+import { EditableView, EditableProps } from '../../EditableView';
 
 
 type GridSchema = makeInterface<[typeof documentSchema]>;
@@ -27,10 +29,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     @observable private _scroll: number = 0;
     private changeListenerDisposer: Opt<Lambda>;
 
-    // private undoChangeListenerDisposer: Opt<Lambda>;
-
-    // @observable private _layouts: Layout[] = [];
-
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
 
@@ -39,24 +37,22 @@ 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.containerRef = React.createRef();
     }
 
     componentDidMount() {
 
-        // this.undoChangeListenerDisposer = computed(() => this.props.Document.gridLayoutString).observe(({ newValue }) => {
-        //     action(() => this._layouts = JSON.parse(newValue as string))();
-        // });
-
         this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
 
+            const layouts: Layout[] = this.parsedLayoutList;
             if (!oldValue || newValue.length > oldValue.length) {
-                const layouts: Layout[] = this.parsedLayoutList;
                 // 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,
@@ -66,26 +62,24 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                         });
                     }
                 });
-                this.props.Document.gridLayoutString = JSON.stringify(layouts);
             } else {
-                const layouts: Layout[] = this.parsedLayoutList;
                 // for each document that was removed, remove its corresponding grid layout document
                 oldValue.forEach(({ layout }) => {
                     const targetId = layout[Id];
                     if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
                         const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === targetId);
-                        index !== -1 && action(() => layouts.splice(index, 1))();
+                        index !== -1 && layouts.splice(index, 1);
                     }
                 });
-                this.props.Document.gridLayoutString = JSON.stringify(layouts);
             }
 
+            this.unStringifiedLayoutList = layouts;
+            // this.props.Document.gridLayoutString = JSON.stringify(layouts);
         }, true);
     }
 
     componentWillUnmount() {
         this.changeListenerDisposer && this.changeListenerDisposer();
-        this.undoChangeListenerDisposer && this.undoChangeListenerDisposer();
     }
 
     /**
@@ -125,8 +119,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
-    @computed get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; }
-    @undoBatch @action set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); }
+    get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; }
+    set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); }
+
 
     /**
      * Sets the width of the decorating box.
@@ -149,7 +144,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
-        console.log(layout[Id]);
         return <ContentFittingDocumentView
             {...this.props}
             Document={layout}
@@ -192,7 +186,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             }
         });
 
-        this.props.Document.gridLayoutString = JSON.stringify(layouts);
+        // this.props.Document.gridLayoutString = JSON.stringify(layouts);
+        this.unStringifiedLayoutList = layouts;
     }
 
     /**
@@ -204,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
         const layouts: Layout[] = this.parsedLayoutList;
-        if (!layouts || !layouts.length || layouts.length !== childLayoutPairs.length) {
+        if (!layouts.length || layouts.length !== childLayoutPairs.length) {
             return [];
         }
 
@@ -232,18 +227,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     get layoutList(): Layout[] {
         const layouts: Layout[] = this.parsedLayoutList;
-        if (this.props.Document.flexGrid) {
-            return layouts.map(({ i, x, y, w, h }) => ({
-                i: i,
-                x: x,
-                y: y,
-                w: w,
-                h: h,
-                static: false
-            }));
-        }
-        else {
-            return layouts.map(({ i }, index) => ({
+
+        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)),
@@ -251,9 +237,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 h: 2,
                 static: true
             }));
-        }
     }
 
+    @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value }));
+
     /**
      * DocListCast only includes *resolved* documents, i.e. filters out promises. So even if we have a nonzero
      * number of documents in either of these Dash lists on the document, the DocListCast version may evaluate to empty
@@ -263,11 +250,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents.
      */
     render() {
+
+        const newEditableViewProps: EditableProps = {
+            GetValue: () => "",
+            SetValue: this.addTextDocument,
+            contents: "+ NEW",
+        };
+
         const childDocumentViews: JSX.Element[] = this.contents;
-        const layouts: Layout[] = this.parsedLayoutList;
-        if (!childDocumentViews.length || !layouts.length) {
-            return null;
-        }
+        const chromeStatus = this.props.Document._chromeStatus;
+        const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled');
+
+
         return (
             <div className="collectionGridView-contents"
                 style={{
@@ -287,15 +281,19 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     }
                 }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond
             >
+                {showChrome ?
+                    <div className="collectionGridView-addDocumentButton">
+                        <EditableView {...newEditableViewProps} />
+                    </div> : null
+                }
                 <div className="collectionGridView-gridContainer"
                     ref={this.containerRef}
                     onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
                 >
-                    {/* {console.log(this.toLayoutList(layoutDocList))} */}
                     <Grid
                         width={this.props.PanelWidth()}
-                        nodeList={childDocumentViews}
-                        layout={this.layoutList}
+                        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}
@@ -305,7 +303,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     // flex={this.props.Document.flexGrid as boolean}
                     />
                 </div>
-            </div>
+            </div >
         );
     }
 }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 8f9bc9f46..cae06c4e7 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -13,13 +13,12 @@ export { Layout } from 'react-grid-layout';
 interface GridProps {
     width: number;
     nodeList: JSX.Element[] | null;
-    layout: Layout[];
+    layout: Layout[] | undefined;
     numCols: number;
     rowHeight: number;
     setLayout: Function;
     transformScale: number;
     childrenDraggable: boolean;
-    // flex: boolean;
 }
 
 /**
@@ -37,6 +36,7 @@ export default class Grid extends React.Component<GridProps> {
      * @param layout `Layout[]`
      */
     onLayoutChange(layout: Layout[]) {
+        console.log("layout changed");
         this.props.setLayout(layout);
     }
 
@@ -50,8 +50,6 @@ export default class Grid extends React.Component<GridProps> {
                 width={this.props.width}
                 compactType={null}
                 isDroppable={true}
-                // isDraggable={this.props.flex}
-                // isResizable={this.props.flex}
                 // isDraggable={this.props.childrenDraggable}
                 useCSSTransforms={true}
                 margin={[10, 10]}
-- 
cgit v1.2.3-70-g09d2


From 4cdd53c1208cd17593e0ecdb34e89265760a6512 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Thu, 4 Jun 2020 12:46:51 +0530
Subject: 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

---
 package-lock.json                                  | 84 +++++++++++++---------
 src/client/views/collections/CollectionView.tsx    |  2 +-
 .../views/collections/CollectionViewChromes.scss   |  7 ++
 .../views/collections/CollectionViewChromes.tsx    | 52 +++++++++++---
 .../collectionGrid/CollectionGridView.scss         | 47 ++++++++++--
 .../collectionGrid/CollectionGridView.tsx          | 72 +++++++++----------
 .../views/collections/collectionGrid/Grid.tsx      |  9 ++-
 7 files changed, 180 insertions(+), 93 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/package-lock.json b/package-lock.json
index adf71ee58..14b279ef6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2836,7 +2836,8 @@
                         },
                         "ansi-regex": {
                             "version": "2.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "aproba": {
                             "version": "1.2.0",
@@ -2854,11 +2855,13 @@
                         },
                         "balanced-match": {
                             "version": "1.0.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "brace-expansion": {
                             "version": "1.1.11",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "balanced-match": "^1.0.0",
                                 "concat-map": "0.0.1"
@@ -2871,15 +2874,18 @@
                         },
                         "code-point-at": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "concat-map": {
                             "version": "0.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -2982,7 +2988,8 @@
                         },
                         "inherits": {
                             "version": "2.0.4",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "ini": {
                             "version": "1.3.5",
@@ -2992,6 +2999,7 @@
                         "is-fullwidth-code-point": {
                             "version": "1.0.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "number-is-nan": "^1.0.0"
                             }
@@ -3004,17 +3012,20 @@
                         "minimatch": {
                             "version": "3.0.4",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "brace-expansion": "^1.1.7"
                             }
                         },
                         "minimist": {
                             "version": "1.2.5",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -3031,6 +3042,7 @@
                         "mkdirp": {
                             "version": "0.5.3",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "minimist": "^1.2.5"
                             }
@@ -3086,7 +3098,8 @@
                         },
                         "npm-normalize-package-bin": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "npm-packlist": {
                             "version": "1.4.8",
@@ -3111,7 +3124,8 @@
                         },
                         "number-is-nan": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "object-assign": {
                             "version": "4.1.1",
@@ -3121,6 +3135,7 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -3189,7 +3204,8 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -3219,6 +3235,7 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -3236,6 +3253,7 @@
                         "strip-ansi": {
                             "version": "3.0.1",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "ansi-regex": "^2.0.0"
                             }
@@ -3274,11 +3292,13 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         }
                     }
                 }
@@ -9500,7 +9520,7 @@
                 },
                 "chownr": {
                     "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
                 },
                 "ci-info": {
@@ -9806,7 +9826,7 @@
                 },
                 "deep-extend": {
                     "version": "0.6.0",
-                    "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
                 },
                 "defaults": {
@@ -10305,7 +10325,7 @@
                 },
                 "glob": {
                     "version": "7.1.6",
-                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+                    "resolved": false,
                     "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
                     "requires": {
                         "fs.realpath": "^1.0.0",
@@ -10393,7 +10413,7 @@
                 },
                 "hosted-git-info": {
                     "version": "2.8.8",
-                    "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
                 },
                 "http-cache-semantics": {
@@ -10529,7 +10549,7 @@
                 },
                 "is-ci": {
                     "version": "1.2.1",
-                    "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
                     "requires": {
                         "ci-info": "^1.5.0"
@@ -10605,7 +10625,7 @@
                 },
                 "is-retry-allowed": {
                     "version": "1.2.0",
-                    "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
                 },
                 "is-stream": {
@@ -11114,7 +11134,7 @@
                 },
                 "mkdirp": {
                     "version": "0.5.4",
-                    "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
                     "requires": {
                         "minimist": "^1.2.5"
@@ -11122,7 +11142,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                            "resolved": false,
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11174,7 +11194,7 @@
                 },
                 "node-gyp": {
                     "version": "5.1.0",
-                    "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==",
                     "requires": {
                         "env-paths": "^2.2.0",
@@ -11288,7 +11308,7 @@
                 },
                 "npm-packlist": {
                     "version": "1.4.8",
-                    "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
                     "requires": {
                         "ignore-walk": "^3.0.1",
@@ -11308,7 +11328,7 @@
                 },
                 "npm-profile": {
                     "version": "4.0.4",
-                    "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==",
                     "requires": {
                         "aproba": "^1.1.2 || 2",
@@ -11318,7 +11338,7 @@
                 },
                 "npm-registry-fetch": {
                     "version": "4.0.3",
-                    "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==",
                     "requires": {
                         "JSONStream": "^1.3.4",
@@ -11753,7 +11773,7 @@
                 },
                 "rc": {
                     "version": "1.2.8",
-                    "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
                     "requires": {
                         "deep-extend": "^0.6.0",
@@ -11764,7 +11784,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                            "resolved": false,
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11823,7 +11843,7 @@
                 },
                 "readable-stream": {
                     "version": "3.6.0",
-                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
                     "requires": {
                         "inherits": "^2.0.3",
@@ -11844,7 +11864,7 @@
                 },
                 "registry-auth-token": {
                     "version": "3.4.0",
-                    "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
                     "requires": {
                         "rc": "^1.1.6",
@@ -11908,7 +11928,7 @@
                 },
                 "rimraf": {
                     "version": "2.7.1",
-                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
                     "requires": {
                         "glob": "^7.1.3"
@@ -12207,7 +12227,7 @@
                 },
                 "string_decoder": {
                     "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
                     "requires": {
                         "safe-buffer": "~5.2.0"
@@ -12215,7 +12235,7 @@
                     "dependencies": {
                         "safe-buffer": {
                             "version": "5.2.0",
-                            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
+                            "resolved": false,
                             "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
                         }
                     }
@@ -12527,7 +12547,7 @@
                 },
                 "widest-line": {
                     "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
                     "requires": {
                         "string-width": "^2.1.1"
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);
     }
 
@@ -82,23 +90,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.changeListenerDisposer && this.changeListenerDisposer();
     }
 
-    /**
-     * 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
@@ -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}
-- 
cgit v1.2.3-70-g09d2


From e30e5e4139be5312c46868f17de4dee5d516fd23 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Sat, 6 Jun 2020 14:30:48 +0530
Subject: added choice to compact, prevent collisions + fixed document
 repositioning on reducing columns + removed row height input

---
 package-lock.json                                  | 101 +++++++++++++++++++++
 package.json                                       |   3 +-
 .../views/collections/CollectionViewChromes.scss   |   1 +
 .../views/collections/CollectionViewChromes.tsx    |  56 ++++++++----
 .../collectionGrid/CollectionGridView.scss         |   8 ++
 .../collectionGrid/CollectionGridView.tsx          |  35 +++++--
 .../views/collections/collectionGrid/Grid.tsx      |   8 +-
 7 files changed, 185 insertions(+), 27 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/package-lock.json b/package-lock.json
index 14b279ef6..d1db185a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3532,6 +3532,11 @@
                 "delayed-stream": "~1.0.0"
             }
         },
+        "command-exists": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.6.tgz",
+            "integrity": "sha512-Qst/zUUNmS/z3WziPxyqjrcz09pm+2Knbs5mAZL4VAE0sSrNY1/w8+/YxeHcoBTsO6iojA6BW7eFf27Eg2MRuw=="
+        },
         "command-line-usage": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-4.1.0.tgz",
@@ -12948,6 +12953,11 @@
                 "os-tmpdir": "^1.0.0"
             }
         },
+        "p-debounce": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-1.0.0.tgz",
+            "integrity": "sha1-y38svu/YegnrqGHhErZ1J+Yh4v0="
+        },
         "p-defer": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -15983,6 +15993,20 @@
                 "readable-stream": "^3.1.1"
             }
         },
+        "temp-dir": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
+            "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0="
+        },
+        "tempy": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.2.1.tgz",
+            "integrity": "sha512-LB83o9bfZGrntdqPuRdanIVCPReam9SOZKW0fOy5I9X3A854GGWi0tjCqoXEk84XIEYBc/x9Hq3EFop/H5wJaw==",
+            "requires": {
+                "temp-dir": "^1.0.0",
+                "unique-string": "^1.0.0"
+            }
+        },
         "term-size": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -16558,6 +16582,40 @@
             "resolved": "https://registry.npmjs.org/typescript-collections/-/typescript-collections-1.3.3.tgz",
             "integrity": "sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ=="
         },
+        "typescript-language-server": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/typescript-language-server/-/typescript-language-server-0.4.0.tgz",
+            "integrity": "sha512-K8jNOmDFn+QfrCh8ujby2pGDs5rpjYZQn+zvQnf42rxG4IHbfw5CHoMvbGkWPK/J5Gw8/l5K3i03kVZC2IBElg==",
+            "requires": {
+                "command-exists": "1.2.6",
+                "commander": "^2.11.0",
+                "fs-extra": "^7.0.0",
+                "p-debounce": "^1.0.0",
+                "tempy": "^0.2.1",
+                "vscode-languageserver": "^5.3.0-next",
+                "vscode-uri": "^1.0.5"
+            },
+            "dependencies": {
+                "fs-extra": {
+                    "version": "7.0.1",
+                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+                    "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+                    "requires": {
+                        "graceful-fs": "^4.1.2",
+                        "jsonfile": "^4.0.0",
+                        "universalify": "^0.1.0"
+                    }
+                },
+                "jsonfile": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+                    "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+                    "requires": {
+                        "graceful-fs": "^4.1.6"
+                    }
+                }
+            }
+        },
         "typical": {
             "version": "2.6.1",
             "resolved": "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz",
@@ -16712,6 +16770,11 @@
                 "crypto-random-string": "^1.0.0"
             }
         },
+        "universalify": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+            "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        },
         "unpack-string": {
             "version": "0.0.2",
             "resolved": "https://registry.npmjs.org/unpack-string/-/unpack-string-0.0.2.tgz",
@@ -16954,6 +17017,44 @@
             "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
             "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
         },
+        "vscode-jsonrpc": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-5.0.1.tgz",
+            "integrity": "sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A=="
+        },
+        "vscode-languageserver": {
+            "version": "5.3.0-next.10",
+            "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-5.3.0-next.10.tgz",
+            "integrity": "sha512-QL7Fe1FT6PdLtVzwJeZ78pTic4eZbzLRy7yAQgPb9xalqqgZESR0+yDZPwJrM3E7PzOmwHBceYcJR54eQZ7Kng==",
+            "requires": {
+                "vscode-languageserver-protocol": "^3.15.0-next.8",
+                "vscode-textbuffer": "^1.0.0"
+            }
+        },
+        "vscode-languageserver-protocol": {
+            "version": "3.15.3",
+            "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.15.3.tgz",
+            "integrity": "sha512-zrMuwHOAQRhjDSnflWdJG+O2ztMWss8GqUUB8dXLR/FPenwkiBNkMIJJYfSN6sgskvsF0rHAoBowNQfbyZnnvw==",
+            "requires": {
+                "vscode-jsonrpc": "^5.0.1",
+                "vscode-languageserver-types": "3.15.1"
+            }
+        },
+        "vscode-languageserver-types": {
+            "version": "3.15.1",
+            "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz",
+            "integrity": "sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ=="
+        },
+        "vscode-textbuffer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/vscode-textbuffer/-/vscode-textbuffer-1.0.0.tgz",
+            "integrity": "sha512-zPaHo4urgpwsm+PrJWfNakolRpryNja18SUip/qIIsfhuEqEIPEXMxHOlFPjvDC4JgTaimkncNW7UMXRJTY6ow=="
+        },
+        "vscode-uri": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz",
+            "integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ=="
+        },
         "vue-template-compiler": {
             "version": "2.6.11",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
diff --git a/package.json b/package.json
index 74b7bf9d1..a8ff42c91 100644
--- a/package.json
+++ b/package.json
@@ -206,10 +206,10 @@
         "react-compound-slider": "^2.5.0",
         "react-dom": "^16.12.0",
         "react-grid-layout": "^0.18.3",
-        "react-resizable": "^1.10.1",
         "react-image-lightbox-with-rotate": "^5.1.1",
         "react-jsx-parser": "^1.21.0",
         "react-measure": "^2.2.4",
+        "react-resizable": "^1.10.1",
         "react-table": "^6.11.5",
         "readline": "^1.3.0",
         "request": "^2.88.0",
@@ -223,6 +223,7 @@
         "solr-node": "^1.2.1",
         "standard-http-error": "^2.0.1",
         "typescript-collections": "^1.3.3",
+        "typescript-language-server": "^0.4.0",
         "url-loader": "^1.1.2",
         "uuid": "^3.4.0",
         "valid-url": "^1.0.9",
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index f6027471b..398b02d3f 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -183,6 +183,7 @@
                 width: 30%;
                 display: flex;
                 flex-direction: row;
+                margin-right: 5px;
 
                 .grid-icon {
                     margin-right: 5px;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 5a76a4605..95774adca 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -571,6 +571,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
 
     private clicked: boolean = false;
     private entered: boolean = false;
+    private decrementLimitReached: boolean = false;
 
     /**
      * Sets the value of `numCols` on the grid's Document to the value entered.
@@ -588,14 +589,14 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     /**
      * Sets the value of `rowHeight` on the grid's Document to the value entered.
      */
-    @undoBatch
-    onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter" || e.key === "Tab") {
-            if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) {
-                this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber;
-            }
-        }
-    }
+    // @undoBatch
+    // onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    //     if (e.key === "Enter" || e.key === "Tab") {
+    //         if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) {
+    //             this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber;
+    //         }
+    //     }
+    // }
 
     /**
      * Sets whether the grid is flexible or not on the grid's Document.
@@ -613,27 +614,44 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
 
     onDecrementButtonClick = () => {
         this.clicked = true;
-        this.entered && (this.props.CollectionView.props.Document.numCols as number)++;
-        undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)();
+        if (!this.decrementLimitReached) {
+            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) {
+        if (!this.clicked && !this.decrementLimitReached) {
             (this.props.CollectionView.props.Document.numCols as number)++;
         }
+        this.decrementLimitReached = false;
         this.clicked = false;
     }
 
     decrementValue = () => {
         this.entered = true;
         if (!this.clicked) {
-            (this.props.CollectionView.props.Document.numCols as number)--;
+            if (this.props.CollectionView.props.Document.numCols as number !== 1) {
+                (this.props.CollectionView.props.Document.numCols as number)--;
+            }
+            else {
+                this.decrementLimitReached = true;
+            }
         }
+
         this.clicked = false;
     }
 
+    toggleCollisions = () => {
+        this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision;
+    }
+
+    changeCompactType = () => {
+        this.props.CollectionView.props.Document.compactType = this.props.CollectionView.props.Document.compactType === "vertical" ? "horizontal" : this.props.CollectionView.props.Document.compactType === "horizontal" ? "null" : "vertical";
+    }
+
     render() {
         return (
             <div className="collectionGridViewChrome-cont" >
@@ -645,17 +663,23 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     <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.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} />
+                    <label className="flexLabel">Collisions </label>
                 </span>
+
+                <span className="grid-control">
+                    <input style={{ marginRight: 5 }} type="button" onClick={this.changeCompactType} value={`Compact: ${this.props.CollectionView.props.Document.compactType}`} />
+                </span>
+
                 <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 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 e06e8dc90..578dae966 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -46,6 +46,14 @@
             background: darkgrey;
             opacity: 1;
         }
+
+        .rowHeightSlider::-moz-range-thumb {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: darkgrey;
+            opacity: 1;
+        }
     }
 
     .collectionGridView-addDocumentButton {
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index dd4e28e33..e97cb9f0e 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -18,6 +18,7 @@ import { SnappingManager } from '../../../util/SnappingManager';
 import { Docs } from '../../../documents/Documents';
 import { EditableView, EditableProps } from '../../EditableView';
 import "./CollectionGridView.scss";
+import { ContextMenu } from '../../ContextMenu';
 
 
 type GridSchema = makeInterface<[typeof documentSchema]>;
@@ -29,6 +30,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     @observable private _scroll: number = 0;
     private changeListenerDisposer: Opt<Lambda>;
     private rowHeight: number = 0;
+    private sliderDragged: boolean = false;
 
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
@@ -37,6 +39,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100);
         this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true);
 
+        this.props.Document.compactType = StrCast(this.props.Document.compactType, "vertical");
+        this.props.Document.preventCollision = BoolCast(this.props.Document.preventCollision, false);
+
         this.setLayout = this.setLayout.bind(this);
         this.onSliderChange = this.onSliderChange.bind(this);
         // this.deletePlaceholder = this.deletePlaceholder.bind(this);
@@ -44,6 +49,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     componentDidMount() {
+
         this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
 
             const layouts: Layout[] = this.parsedLayoutList;
@@ -61,6 +67,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
             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)) {
@@ -89,7 +96,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     componentWillUnmount() {
         this.changeListenerDisposer && this.changeListenerDisposer();
-        console.log("unmounted")
     }
 
     // deletePlaceholder(placeholder: Layout, e: MouseEvent) {
@@ -222,9 +228,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             collector.push(
                 <div className={this.props.Document.flexGrid && (this.props.isSelected() ? true : false) ? "document-wrapper" : "document-wrapper static"}
                     key={gridLayout.i}
+                // onContextMenu={() => ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })}
                 >
                     {this.getDisplayDoc(layout, dxf, width, height)}
-                </div>
+                </div >
             );
         }
 
@@ -237,9 +244,17 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     get layoutList(): Layout[] {
         const layouts: Layout[] = this.parsedLayoutList;
+        this.unStringifiedLayoutList = layouts;
 
         return this.props.Document.flexGrid ?
-            layouts : layouts.map(({ i }, index) => ({
+            layouts.map(({ i, x, y, w, h }) => ({
+                i: i,
+                x: x + w > NumCast(this.props.Document.numCols) ? 0 : x,
+                y: y,
+                w: w,
+                h: h
+            }))
+            : layouts.map(({ i }, index) => ({
                 i: i,
                 x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)),
                 y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)),
@@ -250,7 +265,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        NumCast(this.props.Document.rowHeight) !== event.currentTarget.valueAsNumber && (this.sliderDragged = true);
         this.props.Document.rowHeight = event.currentTarget.valueAsNumber;
+
     }
 
     onSliderDown = () => {
@@ -277,7 +294,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         const newEditableViewProps: EditableProps = {
             GetValue: () => "",
             SetValue: this.addTextDocument,
-            contents: "+ ADD TEXT DOCUMENT AT END",
+            contents: "+ ADD TEXT DOCUMENT",
         };
 
         const childDocumentViews: JSX.Element[] = this.contents;
@@ -287,10 +304,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         return (
             <div className="collectionGridView-contents"
                 style={{
-                    // marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin),
-                    // marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin),
                     pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined
                 }}
+                // onContextMenu={() => ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })}
                 ref={this.createDashEventsTarget}
                 onPointerDown={e => {
                     if (this.props.active(true)) {
@@ -301,7 +317,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     // is the following section needed? it prevents the slider from being easily used and I'm not sure what it's preventing
 
                     // if (this.props.isSelected(true)) {
-                    // !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault();
+                    //     !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault();
                     // }
 
                 }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond
@@ -316,7 +332,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
                     onWheel={e => e.stopPropagation()}
                 >
-                    <input className="rowHeightSlider" type="range" value={NumCast(this.props.Document.rowHeight)} onPointerDown={this.onSliderDown} onPointerUp={this.onSliderUp} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} />
+                    <input className="rowHeightSlider" type="range" value={NumCast(this.props.Document.rowHeight)} onPointerDown={this.onSliderDown} onPointerUp={this.onSliderUp} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onClick={() => !this.sliderDragged && console.log("clicking") && (this.sliderDragged = false)} />
                     <Grid
                         width={this.props.PanelWidth()}
                         nodeList={childDocumentViews.length ? childDocumentViews : null}
@@ -326,6 +342,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                         rowHeight={NumCast(this.props.Document.rowHeight)}
                         setLayout={this.setLayout}
                         transformScale={this.props.ScreenToLocalTransform().Scale}
+                        compactType={StrCast(this.props.Document.compactType)}
+                        preventCollision={BoolCast(this.props.Document.preventCollision)}
+
                     // deletePlaceholder={this.deletePlaceholder}
                     />
 
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index df550e3c2..5779bf463 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -20,6 +20,8 @@ interface GridProps {
     transformScale: number;
     childrenDraggable: boolean;
     // deletePlaceholder: Function;
+    preventCollision: boolean;
+    compactType: string;
 }
 
 /**
@@ -57,19 +59,21 @@ export default class Grid extends React.Component<GridProps> {
     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}
                 cols={this.props.numCols}
                 rowHeight={this.props.rowHeight}
                 width={this.props.width}
-                compactType={null}
+                compactType={compactType}
                 isDroppable={true}
                 isDraggable={this.props.childrenDraggable}
                 isResizable={this.props.childrenDraggable}
                 useCSSTransforms={true}
                 onLayoutChange={this.onLayoutChange}
-                preventCollision={true}
+                preventCollision={this.props.preventCollision}
                 transformScale={this.props.transformScale} // still doesn't work :(
                 style={{ zIndex: 5 }}
             >
-- 
cgit v1.2.3-70-g09d2


From ca2757e137e287f3d6d711c97e2b8a212dd28021 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 10 Jun 2020 13:41:28 +0530
Subject: added reset button + resizable handle css + fixed rendering bug

---
 package-lock.json                                  |  90 +++++++++-------
 .../views/collections/CollectionViewChromes.tsx    |   5 +-
 .../collectionGrid/CollectionGridView.scss         |  14 ++-
 .../collectionGrid/CollectionGridView.tsx          | 115 +++++++++++++++------
 .../views/collections/collectionGrid/Grid.tsx      |   5 +-
 5 files changed, 157 insertions(+), 72 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/package-lock.json b/package-lock.json
index 48847f1fb..131a154c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2836,7 +2836,8 @@
                         },
                         "ansi-regex": {
                             "version": "2.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "aproba": {
                             "version": "1.2.0",
@@ -2854,11 +2855,13 @@
                         },
                         "balanced-match": {
                             "version": "1.0.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "brace-expansion": {
                             "version": "1.1.11",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "balanced-match": "^1.0.0",
                                 "concat-map": "0.0.1"
@@ -2871,15 +2874,18 @@
                         },
                         "code-point-at": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "concat-map": {
                             "version": "0.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -2982,7 +2988,8 @@
                         },
                         "inherits": {
                             "version": "2.0.4",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "ini": {
                             "version": "1.3.5",
@@ -2992,6 +2999,7 @@
                         "is-fullwidth-code-point": {
                             "version": "1.0.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "number-is-nan": "^1.0.0"
                             }
@@ -3004,17 +3012,20 @@
                         "minimatch": {
                             "version": "3.0.4",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "brace-expansion": "^1.1.7"
                             }
                         },
                         "minimist": {
                             "version": "1.2.5",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -3031,6 +3042,7 @@
                         "mkdirp": {
                             "version": "0.5.3",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "minimist": "^1.2.5"
                             }
@@ -3086,7 +3098,8 @@
                         },
                         "npm-normalize-package-bin": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "npm-packlist": {
                             "version": "1.4.8",
@@ -3111,7 +3124,8 @@
                         },
                         "number-is-nan": {
                             "version": "1.0.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "object-assign": {
                             "version": "4.1.1",
@@ -3121,6 +3135,7 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -3189,7 +3204,8 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -3219,6 +3235,7 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -3236,6 +3253,7 @@
                         "strip-ansi": {
                             "version": "3.0.1",
                             "bundled": true,
+                            "optional": true,
                             "requires": {
                                 "ansi-regex": "^2.0.0"
                             }
@@ -3274,11 +3292,13 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true
+                            "bundled": true,
+                            "optional": true
                         }
                     }
                 }
@@ -9505,7 +9525,7 @@
                 },
                 "chownr": {
                     "version": "1.1.4",
-                    "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
                 },
                 "ci-info": {
@@ -9811,7 +9831,7 @@
                 },
                 "deep-extend": {
                     "version": "0.6.0",
-                    "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
                 },
                 "defaults": {
@@ -10310,7 +10330,7 @@
                 },
                 "glob": {
                     "version": "7.1.6",
-                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+                    "resolved": false,
                     "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
                     "requires": {
                         "fs.realpath": "^1.0.0",
@@ -10398,7 +10418,7 @@
                 },
                 "hosted-git-info": {
                     "version": "2.8.8",
-                    "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
                 },
                 "http-cache-semantics": {
@@ -10534,7 +10554,7 @@
                 },
                 "is-ci": {
                     "version": "1.2.1",
-                    "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
                     "requires": {
                         "ci-info": "^1.5.0"
@@ -10610,7 +10630,7 @@
                 },
                 "is-retry-allowed": {
                     "version": "1.2.0",
-                    "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
                 },
                 "is-stream": {
@@ -11119,7 +11139,7 @@
                 },
                 "mkdirp": {
                     "version": "0.5.4",
-                    "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
                     "requires": {
                         "minimist": "^1.2.5"
@@ -11127,7 +11147,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                            "resolved": false,
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11179,7 +11199,7 @@
                 },
                 "node-gyp": {
                     "version": "5.1.0",
-                    "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==",
                     "requires": {
                         "env-paths": "^2.2.0",
@@ -11293,7 +11313,7 @@
                 },
                 "npm-packlist": {
                     "version": "1.4.8",
-                    "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
                     "requires": {
                         "ignore-walk": "^3.0.1",
@@ -11313,7 +11333,7 @@
                 },
                 "npm-profile": {
                     "version": "4.0.4",
-                    "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==",
                     "requires": {
                         "aproba": "^1.1.2 || 2",
@@ -11323,7 +11343,7 @@
                 },
                 "npm-registry-fetch": {
                     "version": "4.0.3",
-                    "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz",
+                    "resolved": false,
                     "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==",
                     "requires": {
                         "JSONStream": "^1.3.4",
@@ -11758,7 +11778,7 @@
                 },
                 "rc": {
                     "version": "1.2.8",
-                    "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+                    "resolved": false,
                     "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
                     "requires": {
                         "deep-extend": "^0.6.0",
@@ -11769,7 +11789,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+                            "resolved": false,
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11828,7 +11848,7 @@
                 },
                 "readable-stream": {
                     "version": "3.6.0",
-                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
                     "requires": {
                         "inherits": "^2.0.3",
@@ -11849,7 +11869,7 @@
                 },
                 "registry-auth-token": {
                     "version": "3.4.0",
-                    "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
                     "requires": {
                         "rc": "^1.1.6",
@@ -11913,7 +11933,7 @@
                 },
                 "rimraf": {
                     "version": "2.7.1",
-                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
                     "requires": {
                         "glob": "^7.1.3"
@@ -12212,7 +12232,7 @@
                 },
                 "string_decoder": {
                     "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
                     "requires": {
                         "safe-buffer": "~5.2.0"
@@ -12220,7 +12240,7 @@
                     "dependencies": {
                         "safe-buffer": {
                             "version": "5.2.0",
-                            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
+                            "resolved": false,
                             "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
                         }
                     }
@@ -12532,7 +12552,7 @@
                 },
                 "widest-line": {
                     "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+                    "resolved": false,
                     "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
                     "requires": {
                         "string-width": "^2.1.1"
@@ -14071,9 +14091,9 @@
             }
         },
         "react-draggable": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
-            "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
+            "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
             "requires": {
                 "classnames": "^2.2.5",
                 "prop-types": "^15.6.0"
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index c824c2f33..7654c9d9e 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -688,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 type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
+                    <input type="checkbox" style={{ marginRight: 5 }} onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
                     <label className="flexLabel">Collisions</label>
                 </span>
 
@@ -711,6 +711,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
                     <label className="flexLabel">Flexible</label>
                 </span>
+
+                <button onClick={() => this.props.CollectionView.props.Document.resetLayout = true}>Reset</button>
+
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 578dae966..8b19542f7 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -14,14 +14,22 @@
         display: flex;
         flex-direction: row;
 
-        .rowHeightSlider {
+        .react-grid-item>.react-resizable-handle {
+            z-index: 4; // doesn't work on prezi otherwise
+        }
+
+        .react-grid-item>.react-resizable-handle::after {
+            // grey so it can be seen on the audiobox
+            border-right: 2px solid slategrey;
+            border-bottom: 2px solid slategrey;
+        }
 
+        .rowHeightSlider {
             -webkit-appearance: none;
             appearance: none;
             width: 100%;
             height: 15px;
             background: #d3d3d3;
-            // border-radius: 5px;
 
             position: absolute;
             height: 3;
@@ -116,7 +124,6 @@
 
 }
 
-
 // .documentDecorations-container .documentDecorations-resizer {
 //     pointer-events: none;
 // }
@@ -128,7 +135,6 @@
 //     visibility: collapse;
 // }
 
-// .collectionGridView-contents
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index eab3fd79e..01ad44a2d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,15 +1,14 @@
-import { computed, observable, Lambda, action } from 'mobx';
+import { computed, observable, Lambda, action, autorun } from 'mobx';
 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, StrCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, StrCast, ScriptCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
 import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
 import { CollectionSubView } from '../CollectionSubView';
 import { SubCollectionViewProps } from '../CollectionSubView';
-import { List } from '../../../../fields/List';
 import { returnZero, returnFalse } from '../../../../Utils';
 import Grid, { Layout } from "./Grid";
 import { Id } from '../../../../fields/FieldSymbols';
@@ -29,8 +28,10 @@ const GridSchema = makeInterface(documentSchema);
 export class CollectionGridView extends CollectionSubView(GridSchema) {
     private containerRef: React.RefObject<HTMLDivElement>;
     @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll
-    private changeListenerDisposer: Opt<Lambda>;
-    private rowHeight: number = 0;
+    private changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs
+    private rowHeight: number = 0; // temporary store of row height to make change undoable
+    private mounted: boolean = false; // hack to fix the issue of not rerendering when mounting
+    private resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked
 
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
@@ -38,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.props.Document.numCols = NumCast(this.props.Document.numCols, 10);
         this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100);
 
-        // determines whether the grid is static/flexible i.e. can nodes be moved around and resized or not
+        // determines whether the grid is static/flexible i.e. whether can nodes be moved around and resized or not
         this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true);
 
         // determines whether nodes should remain in position, be bound to the top, or to the left
@@ -49,12 +50,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         this.setLayout = this.setLayout.bind(this);
         this.onSliderChange = this.onSliderChange.bind(this);
-        // this.deletePlaceholder = this.deletePlaceholder.bind(this);
+
         this.containerRef = React.createRef();
     }
 
     componentDidMount() {
 
+        console.log("mounting");
+        this.mounted = true;
+
         this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
 
             const layouts: Layout[] = this.parsedLayoutList;
@@ -71,7 +75,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             }
 
             if (!oldValue || newValue.length > oldValue.length) {
-                // for each document that was added, add a corresponding grid layout document
+                // for each document that was added, add a corresponding grid layout object
 
                 newValue.forEach(({ layout }, i) => {
                     const targetId = layout[Id];
@@ -87,7 +91,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     }
                 });
             } else {
-                // for each document that was removed, remove its corresponding grid layout document
+                // for each document that was removed, remove its corresponding grid layout object
                 oldValue.forEach(({ layout }) => {
                     const targetId = layout[Id];
                     if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
@@ -98,10 +102,34 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             }
             this.unStringifiedLayoutList = layouts;
         }, true);
+
+        // updates the layouts if the reset button has been clicked
+        this.resetListenerDisposer = autorun(() => {
+            if (this.props.Document.resetLayout) {
+                if (this.props.Document.flexGrid) {
+                    console.log("Resetting layout");
+                    const layouts: Layout[] = this.parsedLayoutList;
+
+                    this.setLayout(
+                        layouts.map(({ i }, index) => ({
+                            i: i,
+                            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,
+                        })));
+                }
+
+                this.props.Document.resetLayout = false;
+            }
+        });
     }
 
     componentWillUnmount() {
+        console.clear();
+        this.mounted = false;
         this.changeListenerDisposer && this.changeListenerDisposer();
+        this.resetListenerDisposer?.();
     }
 
     /**
@@ -109,6 +137,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     private lookupIndividualTransform = (layout: Layout) => {
 
+        console.log("lookup");
+
         const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i);
 
         // translations depend on whether the grid is flexible or static
@@ -117,6 +147,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
     }
+    // is this needed? it seems to never be called
+    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
     @computed get colWidthPlusGap() { return (this.props.PanelWidth() - 10) / NumCast(this.props.Document.numCols); }
     @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + 10; }
@@ -124,12 +156,26 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     /**
      * @returns the layout list converted from JSON
      */
-    get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; }
+    get parsedLayoutList() {
+        console.log("parsedlayoutlist");
+        return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : [];
+    }
 
     /**
      * Stores the layout list on the Document as JSON
      */
-    set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); }
+    set unStringifiedLayoutList(layouts: Layout[]) {
+
+        // sometimes there are issues with rendering when you switch from a different view
+        // where the nodes are all squeezed together on the left hand side of the screen
+        // until you click on the screen or close the chrome or interact with it in some way
+        // this seems to fix that though it isn't very elegant
+
+        console.log("setting unstringified")
+        this.mounted && (this.props.Document.gridLayoutString = "");
+        this.props.Document.gridLayoutString = JSON.stringify(layouts);
+        this.mounted = false;
+    }
 
 
     /**
@@ -183,6 +229,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             PanelWidth={width}
             PanelHeight={height}
             ScreenToLocalTransform={dxf}
+            onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
             parentActive={this.props.active}
             display={"contents"}
@@ -199,20 +246,25 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     setLayout(layoutArray: Layout[]) {
         // 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>;
-            const targetId = doc[Id];
-            const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId);
-            if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) {
-                gridLayout.x = update.x;
-                gridLayout.y = update.y;
-                gridLayout.w = update.w;
-                gridLayout.h = update.h;
-            }
-        });
 
-        this.unStringifiedLayoutList = layouts;
+        console.log("settinglayout");
+
+        if (this.props.Document.flexGrid) {
+            const layouts: Layout[] = this.parsedLayoutList;
+            this.childLayoutPairs.forEach(({ layout: doc }) => {
+                let update: Opt<Layout>;
+                const targetId = doc[Id];
+                const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId);
+                if (gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) {
+                    gridLayout.x = update.x;
+                    gridLayout.y = update.y;
+                    gridLayout.w = update.w;
+                    gridLayout.h = update.h;
+                }
+            });
+
+            this.unStringifiedLayoutList = layouts;
+        }
     }
 
     /**
@@ -221,6 +273,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     @computed
     private get contents(): JSX.Element[] {
+
+        console.log("getting contents");
+
         const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
         const layouts: Layout[] = this.parsedLayoutList;
@@ -251,17 +306,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @returns a list of `Layout` objects with attributes depending on whether the grid is flexible or static
      */
     get layoutList(): Layout[] {
+
+        console.log("getting layoutlist");
         const layouts: Layout[] = this.parsedLayoutList;
-        // this.unStringifiedLayoutList = layouts;
 
         return this.props.Document.flexGrid ?
-            layouts.map(({ i, x, y, w, h, static: stat }) => ({
+            layouts.map(({ i, x, y, w, h, static: staticVal }) => ({
                 i: i,
                 x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, // handles wrapping around of nodes when numCols decreases
                 y: y,
-                w: w,
+                w: w > NumCast(this.props.Document.numCols) ? NumCast(this.props.Document.numCols) : w, // reduces width if greater than numCols
                 h: h,
-                static: stat
+                static: staticVal // only needed if we implement freeze in place
             }))
             : layouts.map(({ i }, index) => ({
                 i: i,
@@ -277,9 +333,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * Handles the change in the value of the rowHeight slider.
      */
     onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        NumCast(this.props.Document.rowHeight) !== event.currentTarget.valueAsNumber;
         this.props.Document.rowHeight = event.currentTarget.valueAsNumber;
-
     }
 
     /**
@@ -305,6 +359,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     render() {
 
+        console.log("and render");
         // for the add text document EditableView
         const newEditableViewProps: EditableProps = {
             GetValue: () => "",
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 058002722..9192a38d7 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -30,6 +30,7 @@ interface GridProps {
 export default class Grid extends React.Component<GridProps> {
 
     render() {
+        console.log(this.props.transformScale);
         const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null;
         return (
             <GridLayout className="layout"
@@ -44,11 +45,11 @@ export default class Grid extends React.Component<GridProps> {
                 useCSSTransforms={true}
                 onLayoutChange={this.props.setLayout}
                 preventCollision={this.props.preventCollision}
-                transformScale={this.props.transformScale} // still doesn't work :(
+                transformScale={1 / this.props.transformScale} // still doesn't work :(
                 style={{ zIndex: 5 }}
             >
                 {this.props.nodeList}
-            </GridLayout >
+            </GridLayout>
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2


From e4585532840eab1f486024a994d640c16a0e1f7d Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Thu, 11 Jun 2020 12:02:58 +0530
Subject: fixed image aspect ratio + cleanup

---
 .../collectionGrid/CollectionGridView.scss         |  7 +++++++
 .../collectionGrid/CollectionGridView.tsx          | 22 ++++++----------------
 .../views/collections/collectionGrid/Grid.tsx      |  1 -
 3 files changed, 13 insertions(+), 17 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index 8b19542f7..de7d62475 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -14,6 +14,13 @@
         display: flex;
         flex-direction: row;
 
+        .imageBox-cont img {
+            height: auto;
+            width: auto;
+            max-height: 100%;
+            max-width: 100%;
+        }
+
         .react-grid-item>.react-resizable-handle {
             z-index: 4; // doesn't work on prezi otherwise
         }
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index d68277d32..a820b7e0e 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -49,11 +49,14 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
         this.props.Document.preventCollision = BoolCast(this.props.Document.preventCollision, false);
 
+        // sets the default width and height of the grid nodes 
         this.props.Document.defaultW = NumCast(this.props.Document.defaultW, 2);
         this.props.Document.defaultH = NumCast(this.props.Document.defaultH, 2);
 
+        // sets the margin between grid nodes
         this.props.Document.margin = NumCast(this.props.Document.margin, 10);
 
+        // sets the css display type of the ContentFittingDocumentView component
         this.props.Document.display = StrCast(this.props.Document.display, "contents");
 
         this.setLayout = this.setLayout.bind(this);
@@ -64,8 +67,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     componentDidMount() {
-
-        console.log("mounting");
         this.mounted = true;
 
         this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
@@ -130,7 +131,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     }
 
     componentWillUnmount() {
-        console.clear();
         this.mounted = false;
         this.changeListenerDisposer && this.changeListenerDisposer();
         this.resetListenerDisposer?.();
@@ -140,9 +140,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @returns the transform that will correctly place the document decorations box. 
      */
     private lookupIndividualTransform = (layout: Layout) => {
-
-        console.log("lookup");
-
         const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i);
 
         // translations depend on whether the grid is flexible or static
@@ -173,7 +170,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @returns the layout list converted from JSON
      */
     get parsedLayoutList() {
-        console.log("parsedlayoutlist");
         return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : [];
     }
 
@@ -188,7 +184,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         // the component doesn't rerender when the component mounts
         // this seems to fix that though it isn't very elegant
 
-        console.log("setting unstringified");
         this.mounted && (this.props.Document.gridLayoutString = "");
         this.props.Document.gridLayoutString = JSON.stringify(layouts);
         this.mounted = false;
@@ -245,8 +240,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         // 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 
 
-        console.log("settinglayout");
-
         if (this.props.Document.flexGrid) {
             const layouts: Layout[] = this.parsedLayoutList;
             this.childLayoutPairs.forEach(({ layout: doc }) => {
@@ -272,8 +265,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     @computed
     private get contents(): JSX.Element[] {
 
-        console.log("getting contents");
-
         const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
         const layouts: Layout[] = this.parsedLayoutList;
@@ -295,7 +286,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 </div >
             );
         }
-
         return collector;
     }
 
@@ -304,10 +294,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     get layoutList(): Layout[] {
 
-        console.log("getting layoutlist");
         const layouts: Layout[] = this.parsedLayoutList;
 
-
         return this.props.Document.flexGrid ?
             layouts.map(({ i, x, y, w, h }) => ({
                 i: i,
@@ -355,6 +343,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value }));
 
+    /**
+     * Adds the display option to change the css display attribute of the `ContentFittingDocumentView`s
+     */
     onContextMenu = () => {
         const displayOptionsMenu: ContextMenuProps[] = [];
         displayOptionsMenu.push({ description: "Contents", event: () => this.props.Document.display = "contents", icon: "copy" });
@@ -365,7 +356,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     render() {
 
-        console.log("and render");
         // for the add text document EditableView
         const newEditableViewProps: EditableProps = {
             GetValue: () => "",
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 529e7762f..6232fca7c 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -31,7 +31,6 @@ interface GridProps {
 export default class Grid extends React.Component<GridProps> {
 
     render() {
-        console.log(this.props.transformScale);
         const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null;
         return (
             <GridLayout className="layout"
-- 
cgit v1.2.3-70-g09d2


From af374bfbf3a218528bca426911f4de83e3466872 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 11 Jun 2020 22:25:13 -0400
Subject: code cleanup for CollectionGridView.  added double click to create
 text.

---
 package-lock.json                                  |  84 ++---
 src/client/views/collections/CollectionView.tsx    |  32 --
 .../views/collections/CollectionViewChromes.tsx    |  39 +-
 .../collectionGrid/CollectionGridView.scss         |   6 +-
 .../collectionGrid/CollectionGridView.tsx          | 407 ++++++++-------------
 .../views/collections/collectionGrid/Grid.tsx      |   2 -
 6 files changed, 207 insertions(+), 363 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.scss')

diff --git a/package-lock.json b/package-lock.json
index e692b266d..457104c8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2841,8 +2841,7 @@
                         },
                         "ansi-regex": {
                             "version": "2.1.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "aproba": {
                             "version": "1.2.0",
@@ -2860,13 +2859,11 @@
                         },
                         "balanced-match": {
                             "version": "1.0.0",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "brace-expansion": {
                             "version": "1.1.11",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "balanced-match": "^1.0.0",
                                 "concat-map": "0.0.1"
@@ -2879,18 +2876,15 @@
                         },
                         "code-point-at": {
                             "version": "1.1.0",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "concat-map": {
                             "version": "0.0.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -2993,8 +2987,7 @@
                         },
                         "inherits": {
                             "version": "2.0.4",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "ini": {
                             "version": "1.3.5",
@@ -3004,7 +2997,6 @@
                         "is-fullwidth-code-point": {
                             "version": "1.0.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "number-is-nan": "^1.0.0"
                             }
@@ -3017,20 +3009,17 @@
                         "minimatch": {
                             "version": "3.0.4",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "brace-expansion": "^1.1.7"
                             }
                         },
                         "minimist": {
                             "version": "1.2.5",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -3047,7 +3036,6 @@
                         "mkdirp": {
                             "version": "0.5.3",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "minimist": "^1.2.5"
                             }
@@ -3103,8 +3091,7 @@
                         },
                         "npm-normalize-package-bin": {
                             "version": "1.0.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "npm-packlist": {
                             "version": "1.4.8",
@@ -3129,8 +3116,7 @@
                         },
                         "number-is-nan": {
                             "version": "1.0.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "object-assign": {
                             "version": "4.1.1",
@@ -3140,7 +3126,6 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -3209,8 +3194,7 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -3240,7 +3224,6 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -3258,7 +3241,6 @@
                         "strip-ansi": {
                             "version": "3.0.1",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "ansi-regex": "^2.0.0"
                             }
@@ -3297,13 +3279,11 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         }
                     }
                 }
@@ -9535,7 +9515,7 @@
                 },
                 "chownr": {
                     "version": "1.1.4",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
                     "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
                 },
                 "ci-info": {
@@ -9841,7 +9821,7 @@
                 },
                 "deep-extend": {
                     "version": "0.6.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
                     "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
                 },
                 "defaults": {
@@ -10340,7 +10320,7 @@
                 },
                 "glob": {
                     "version": "7.1.6",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
                     "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
                     "requires": {
                         "fs.realpath": "^1.0.0",
@@ -10428,7 +10408,7 @@
                 },
                 "hosted-git-info": {
                     "version": "2.8.8",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
                     "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
                 },
                 "http-cache-semantics": {
@@ -10564,7 +10544,7 @@
                 },
                 "is-ci": {
                     "version": "1.2.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
                     "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
                     "requires": {
                         "ci-info": "^1.5.0"
@@ -10640,7 +10620,7 @@
                 },
                 "is-retry-allowed": {
                     "version": "1.2.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
                     "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
                 },
                 "is-stream": {
@@ -11149,7 +11129,7 @@
                 },
                 "mkdirp": {
                     "version": "0.5.4",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
                     "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
                     "requires": {
                         "minimist": "^1.2.5"
@@ -11157,7 +11137,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": false,
+                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11209,7 +11189,7 @@
                 },
                 "node-gyp": {
                     "version": "5.1.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz",
                     "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==",
                     "requires": {
                         "env-paths": "^2.2.0",
@@ -11323,7 +11303,7 @@
                 },
                 "npm-packlist": {
                     "version": "1.4.8",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
                     "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
                     "requires": {
                         "ignore-walk": "^3.0.1",
@@ -11343,7 +11323,7 @@
                 },
                 "npm-profile": {
                     "version": "4.0.4",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz",
                     "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==",
                     "requires": {
                         "aproba": "^1.1.2 || 2",
@@ -11353,7 +11333,7 @@
                 },
                 "npm-registry-fetch": {
                     "version": "4.0.3",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz",
                     "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==",
                     "requires": {
                         "JSONStream": "^1.3.4",
@@ -11788,7 +11768,7 @@
                 },
                 "rc": {
                     "version": "1.2.8",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
                     "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
                     "requires": {
                         "deep-extend": "^0.6.0",
@@ -11799,7 +11779,7 @@
                     "dependencies": {
                         "minimist": {
                             "version": "1.2.5",
-                            "resolved": false,
+                            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
                             "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
                         }
                     }
@@ -11858,7 +11838,7 @@
                 },
                 "readable-stream": {
                     "version": "3.6.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
                     "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
                     "requires": {
                         "inherits": "^2.0.3",
@@ -11879,7 +11859,7 @@
                 },
                 "registry-auth-token": {
                     "version": "3.4.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
                     "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
                     "requires": {
                         "rc": "^1.1.6",
@@ -11943,7 +11923,7 @@
                 },
                 "rimraf": {
                     "version": "2.7.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
                     "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
                     "requires": {
                         "glob": "^7.1.3"
@@ -12242,7 +12222,7 @@
                 },
                 "string_decoder": {
                     "version": "1.3.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
                     "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
                     "requires": {
                         "safe-buffer": "~5.2.0"
@@ -12250,7 +12230,7 @@
                     "dependencies": {
                         "safe-buffer": {
                             "version": "5.2.0",
-                            "resolved": false,
+                            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
                             "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
                         }
                     }
@@ -12562,7 +12542,7 @@
                 },
                 "widest-line": {
                     "version": "2.0.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
                     "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
                     "requires": {
                         "string-width": "^2.1.1"
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 524997d20..215b5bce8 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -244,38 +244,6 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
     onContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            const existingVm = ContextMenu.Instance.findByDescription("View Modes...");
-            const subItems = existingVm && "subitems" in existingVm ? existingVm.subitems : [];
-            subItems.push({ description: "Freeform", event: () => { this.props.Document._viewType = CollectionViewType.Freeform; }, icon: "signature" });
-            if (CollectionView._safeMode) {
-                ContextMenu.Instance.addItem({ description: "Test Freeform", event: () => this.props.Document._viewType = CollectionViewType.Invalid, icon: "project-diagram" });
-            }
-            subItems.push({ description: "Schema", event: () => this.props.Document._viewType = CollectionViewType.Schema, icon: "th-list" });
-            subItems.push({ description: "Treeview", event: () => this.props.Document._viewType = CollectionViewType.Tree, icon: "tree" });
-            subItems.push({ description: "Stacking", event: () => this.props.Document._viewType = CollectionViewType.Stacking, icon: "ellipsis-v" });
-            subItems.push({
-                description: "Stacking (AutoHeight)", event: () => {
-                    this.props.Document._viewType = CollectionViewType.Stacking;
-                    this.props.Document._autoHeight = true;
-                }, icon: "ellipsis-v"
-            });
-            subItems.push({ description: "Staff", event: () => this.props.Document._viewType = CollectionViewType.Staff, icon: "music" });
-            subItems.push({ description: "Multicolumn", event: () => this.props.Document._viewType = CollectionViewType.Multicolumn, icon: "columns" });
-            subItems.push({ description: "Multirow", event: () => this.props.Document._viewType = CollectionViewType.Multirow, icon: "columns" });
-            subItems.push({ description: "Masonry", event: () => this.props.Document._viewType = CollectionViewType.Masonry, icon: "columns" });
-            subItems.push({ description: "Carousel", event: () => this.props.Document._viewType = CollectionViewType.Carousel, icon: "columns" });
-            subItems.push({ description: "Pivot/Time", event: () => this.props.Document._viewType = CollectionViewType.Time, icon: "columns" });
-            subItems.push({ description: "Map", event: () => this.props.Document._viewType = CollectionViewType.Map, icon: "globe-americas" });
-            subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "th-list" });
-            switch (this.props.Document._viewType) {
-                case CollectionViewType.Freeform: {
-                    subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) });
-                    break;
-                }
-            }
-            subItems.push({ description: "lightbox", event: action(() => this._isLightboxOpen = true), icon: "eye" });
-            !existingVm && ContextMenu.Instance.addItem({ description: "View Modes...", subitems: subItems, icon: "eye" });
-
             this.setupViewTypes("Add a Perspective...", vtype => {
                 const newRendition = Doc.MakeAlias(this.props.Document);
                 newRendition._viewType = vtype;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 63080d2e6..53bff0fe5 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -16,6 +16,7 @@ import { CollectionViewType } from "./CollectionView";
 import { CollectionView } from "./CollectionView";
 import "./CollectionViewChromes.scss";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { undo } from "prosemirror-history";
 const datepicker = require('js-datepicker');
 
 interface CollectionViewChromeProps {
@@ -589,14 +590,16 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
         this.resizeListenerDisposer?.();
     }
 
+    get numCols() { return NumCast(this.props.CollectionView.props.Document.gridNumCols, 10); }
+
     /**
      * Sets the value of `numCols` on the grid's Document to the value entered.
      */
     @undoBatch
     onNumColsEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
         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;
+            if (e.currentTarget.valueAsNumber > 0) {
+                this.props.CollectionView.props.Document.gridNumCols = e.currentTarget.valueAsNumber;
             }
 
         }
@@ -617,8 +620,9 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     /**
      * Sets whether the grid is flexible or not on the grid's Document.
      */
+    @undoBatch
     toggleFlex = () => {
-        this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid;
+        this.props.CollectionView.props.Document.gridFlex = !this.props.CollectionView.props.Document.gridFlex;
     }
 
     /**
@@ -626,8 +630,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
      */
     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 && (this.props.CollectionView.props.Document.gridNumCols as number)--;
+        undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1)();
         this.entered = false;
     }
 
@@ -637,8 +641,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     onDecrementButtonClick = () => {
         this.clicked = true;
         if (!this.decrementLimitReached) {
-            this.entered && (this.props.CollectionView.props.Document.numCols as number)++;
-            undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)();
+            this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)++;
+            undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1)();
         }
         this.entered = false;
     }
@@ -649,7 +653,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     incrementValue = () => {
         this.entered = true;
         if (!this.clicked && !this.decrementLimitReached) {
-            (this.props.CollectionView.props.Document.numCols as number)++;
+            this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1;
         }
         this.decrementLimitReached = false;
         this.clicked = false;
@@ -661,8 +665,8 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
     decrementValue = () => {
         this.entered = true;
         if (!this.clicked) {
-            if (this.props.CollectionView.props.Document.numCols as number !== 1) {
-                (this.props.CollectionView.props.Document.numCols as number)--;
+            if (this.numCols !== 1) {
+                this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1;
             }
             else {
                 this.decrementLimitReached = true;
@@ -676,14 +680,15 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
      * Toggles the value of preventCollision
      */
     toggleCollisions = () => {
-        this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision;
+        this.props.CollectionView.props.Document.gridPreventCollision = !this.props.CollectionView.props.Document.gridPreventCollision;
     }
 
     /**
      * Changes the value of the compactType
      */
+    @undoBatch
     changeCompactType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value;
+        this.props.CollectionView.props.Document.gridCompaction = e.target.selectedOptions[0].value;
     }
 
     render() {
@@ -693,7 +698,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     <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.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
+                    <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.numCols.toString()} 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>
@@ -704,7 +709,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: this.resize ? "12%" : "20%" }}>
-                    <input type="checkbox" style={{ marginRight: 5 }} onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} />
+                    <input type="checkbox" style={{ marginRight: 5 }} onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.gridPreventCollision} />
                     <label className="flexLabel">{this.resize ? "Coll" : "Collisions"}</label>
                 </span>
 
@@ -712,7 +717,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                     style={{ marginRight: 5 }}
                     onPointerDown={stopPropagation}
                     onChange={this.changeCompactType}
-                    value={StrCast(this.props.CollectionView.props.Document.compactType)}>
+                    value={StrCast(this.props.CollectionView.props.Document.gridCompaction)}>
                     >
                     {["vertical", "horizontal", "null"].map(type =>
                         <option className="collectionGridViewChrome-viewOption"
@@ -724,11 +729,11 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                 </select>
 
                 <span className="grid-control" style={{ width: this.resize ? "12%" : "20%" }}>
-                    <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
+                    <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={BoolCast(this.props.CollectionView.props.Document.gridFlex)} />
                     <label className="flexLabel">{this.resize ? "Flex" : "Flexible"}</label>
                 </span>
 
-                <button onClick={() => this.props.CollectionView.props.Document.resetLayout = true}>
+                <button onClick={() => this.props.CollectionView.props.Document.gridResetLayout = true}>
                     {!this.resize ? "Reset" :
                         <FontAwesomeIcon icon="redo-alt" size="1x" />}
                 </button>
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index de7d62475..9c2d5cbff 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -21,6 +21,10 @@
             max-width: 100%;
         }
 
+        .react-grid-layout {
+            width : 100%;
+        }
+
         .react-grid-item>.react-resizable-handle {
             z-index: 4; // doesn't work on prezi otherwise
         }
@@ -41,7 +45,7 @@
             position: absolute;
             height: 3;
             left: 5;
-            top: 40;
+            top: 30;
             transform-origin: left;
             transform: rotate(90deg);
             outline: none;
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index a820b7e0e..2e1f7a0db 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,85 +1,61 @@
-import { computed, observable, Lambda, action, reaction } from 'mobx';
+import { action, computed, Lambda, observable, reaction } from 'mobx';
+import { observer } from 'mobx-react';
 import * as React from "react";
 import { Doc, Opt } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
+import { Id } from '../../../../fields/FieldSymbols';
 import { makeInterface } from '../../../../fields/Schema';
-import { BoolCast, NumCast, StrCast, ScriptCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents } from '../../../../Utils';
+import { Docs } from '../../../documents/Documents';
+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 { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { CollectionSubView } from '../CollectionSubView';
-import { SubCollectionViewProps } from '../CollectionSubView';
-import { returnZero } from '../../../../Utils';
-import Grid, { Layout } from "./Grid";
-import { Id } from '../../../../fields/FieldSymbols';
-import { observer } from 'mobx-react';
-import { SnappingManager } from '../../../util/SnappingManager';
-import { Docs } from '../../../documents/Documents';
-import { EditableView, EditableProps } from '../../EditableView';
 import "./CollectionGridView.scss";
-import { ContextMenu } from '../../ContextMenu';
-import { List } from '../../../../fields/List';
-import { ContextMenuProps } from '../../ContextMenuItem';
-
+import Grid, { Layout } from "./Grid";
 
 type GridSchema = makeInterface<[typeof documentSchema]>;
 const GridSchema = makeInterface(documentSchema);
 
 @observer
 export class CollectionGridView extends CollectionSubView(GridSchema) {
-    private containerRef: React.RefObject<HTMLDivElement>;
+    private _containerRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs
+    private _resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked
+    @observable private _rowHeight: Opt<number>; // temporary store of row height to make change undoable
     @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll
-    private changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs
-    private rowHeight: number = 0; // temporary store of row height to make change undoable
-    private mounted: boolean = false; // hack to fix the issue of not rerendering when mounting
-    private resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked
-
-    constructor(props: Readonly<SubCollectionViewProps>) {
-        super(props);
-
-        this.props.Document.numCols = NumCast(this.props.Document.numCols, 10);
-        this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100);
-
-        // determines whether the grid is static/flexible i.e. whether can nodes be moved around and resized or not
-        this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true);
 
-        // determines whether nodes should remain in position, be bound to the top, or to the left
-        this.props.Document.compactType = StrCast(this.props.Document.compactType, "vertical");
-
-        // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
-        this.props.Document.preventCollision = BoolCast(this.props.Document.preventCollision, false);
+    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
-        // sets the default width and height of the grid nodes 
-        this.props.Document.defaultW = NumCast(this.props.Document.defaultW, 2);
-        this.props.Document.defaultH = NumCast(this.props.Document.defaultH, 2);
+    @computed get numCols() { return NumCast(this.props.Document.gridNumCols, 10); }
+    @computed get rowHeight() { return this._rowHeight === undefined ? NumCast(this.props.Document.gridRowHeight, 100) : this._rowHeight; }
+    // sets the default width and height of the grid nodes 
+    @computed get defaultW() { return NumCast(this.props.Document.gridDefaultW, 2); }
+    @computed get defaultH() { return NumCast(this.props.Document.gridDefaultH, 2); }
 
-        // sets the margin between grid nodes
-        this.props.Document.margin = NumCast(this.props.Document.margin, 10);
+    @computed get colWidthPlusGap() { return (this.props.PanelWidth() - this.margin) / this.numCols; }
+    @computed get rowHeightPlusGap() { return this.rowHeight + this.margin; }
 
-        // sets the css display type of the ContentFittingDocumentView component
-        this.props.Document.display = StrCast(this.props.Document.display, "contents");
+    @computed get margin() { return NumCast(this.props.Document.margin, 10); }  // sets the margin between grid nodes
 
-        this.setLayout = this.setLayout.bind(this);
-        this.onSliderChange = this.onSliderChange.bind(this);
-        this.onContextMenu = this.onContextMenu.bind(this);
-
-        this.containerRef = React.createRef();
-    }
+    @computed get flexGrid() { return BoolCast(this.props.Document.gridFlex, true); } // is grid static/flexible i.e. whether nodes be moved around and resized
 
     componentDidMount() {
-        this.mounted = true;
-
-        this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
-
-            const layouts: Layout[] = this.parsedLayoutList;
+        this._changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
+            const layouts = 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 && newValue.length) {
                 layouts.forEach(({ i }, index) => {
-                    const targetId = i;
-                    if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
+                    if (!newValue.find(({ layout: preserved }) => preserved[Id] === i)) {
                         layouts.splice(index, 1);
                     }
                 });
@@ -88,120 +64,84 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             if (!oldValue || newValue.length > oldValue.length) {
                 // for each document that was added, add a corresponding grid layout object
                 newValue.forEach(({ layout }, i) => {
-                    const targetId = layout[Id];
-                    if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) {
-                        layouts.push({
-                            i: targetId,
-                            w: this.defaultW,
-                            h: this.defaultH,
-                            x: this.defaultW * (i % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW)),
-                            y: this.defaultH * Math.floor(i / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH)),
-                            static: !this.props.Document.flexGrid
-                        });
+                    if (!layouts.find(gridLayout => gridLayout.i === layout[Id])) {
+                        this.addLayoutItem(layouts, this.makeLayoutItem(layout, this.unflexedPosition(i), !this.flexGrid))
                     }
-                });
+                })
             } else {
                 // for each document that was removed, remove its corresponding grid layout object
                 oldValue.forEach(({ layout }) => {
-                    const targetId = layout[Id];
-                    if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
-                        const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === targetId);
+                    if (!newValue.find(({ layout: preserved }) => preserved[Id] === layout[Id])) {
+                        const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === layout[Id]);
                         index !== -1 && layouts.splice(index, 1);
                     }
                 });
             }
-            this.unStringifiedLayoutList = layouts;
+            this.setLayoutList(layouts);
         }, true);
 
         // updates the layouts if the reset button has been clicked
-        this.resetListenerDisposer = reaction(() => this.props.Document.resetLayout, () => {
-            if (this.props.Document.flexGrid) {
-                const layouts: Layout[] = this.parsedLayoutList;
-                this.setLayout(
-                    layouts.map(({ i }, index) => ({
-                        i: i,
-                        x: this.defaultW * (index % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW)),
-                        y: this.defaultH * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH)),
-                        w: this.defaultW,
-                        h: this.defaultH,
-                    })));
+        this._resetListenerDisposer = reaction(() => this.props.Document.gridResetLayout, (reset) => {
+            if (reset && this.flexGrid) {
+                this.setLayout(this.childLayoutPairs.map((pair, index) => this.makeLayoutItem(pair.layout, this.unflexedPosition(index))));
             }
-            this.props.Document.resetLayout = false;
+            this.props.Document.gridResetLayout = false;
         });
     }
 
     componentWillUnmount() {
-        this.mounted = false;
-        this.changeListenerDisposer && this.changeListenerDisposer();
-        this.resetListenerDisposer?.();
+        this._changeListenerDisposer?.();
+        this._resetListenerDisposer?.();
     }
 
-    /**
-     * @returns the transform that will correctly place the document decorations box. 
-     */
-    private lookupIndividualTransform = (layout: Layout) => {
-        const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i);
-
-        // translations depend on whether the grid is flexible or static
-        const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : this.defaultW * (index % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW))) * this.colWidthPlusGap + this.margin;
-        const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : this.defaultH * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH))) * this.rowHeightPlusGap + this.margin - this._scroll + 30; // 30 is the height of the add text doc bar
-
-        return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
+    unflexedPosition(index: number) {
+        return {
+            x: (index % Math.floor(this.numCols / this.defaultW)) * this.defaultW,
+            y: Math.floor(index / Math.floor(this.numCols / this.defaultH)) * this.defaultH
+        };
     }
 
-    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
+    screenToCell(sx: number, sy: number) {
+        const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy);
+        const x = Math.floor(pt[0] / this.colWidthPlusGap);
+        const y = Math.floor((pt[1] + this._scroll) / this.rowHeight);
+        return { x, y };
+    }
 
-    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);
+    makeLayoutItem = (doc: Doc, pos: { x: number, y: number }, Static: boolean = false, w: number = this.defaultW, h: number = this.defaultH) => {
+        return ({ i: doc[Id], w, h, x: pos.x, y: pos.y, static: Static });
     }
 
-    @computed get colWidthPlusGap() { return (this.props.PanelWidth() - this.margin) / NumCast(this.props.Document.numCols); }
-    @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + this.margin; }
+    addLayoutItem = (layouts: Layout[], layout: Layout) => {
+        const f = layouts.findIndex(l => l.i === layout.i);
+        f !== -1 && layouts.splice(f, 1);
+        layouts.push(layout);
+        return layouts;
+    }
+    /**
+     * @returns the transform that will correctly place the document decorations box. 
+     */
+    private lookupIndividualTransform = (layout: Layout) => {
+        const xypos = this.flexGrid ? layout : this.unflexedPosition(this.layoutList.findIndex(l => l.i === layout.i));
+        const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll };
 
-    @computed get margin() { return NumCast(this.props.Document.margin); }
-    @computed get defaultW() { return NumCast(this.props.Document.defaultW); }
-    @computed get defaultH() { return NumCast(this.props.Document.defaultH); }
+        return this.props.ScreenToLocalTransform().translate(-pos.x, -pos.y);
+    }
 
     /**
      * @returns the layout list converted from JSON
      */
     get parsedLayoutList() {
-        return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : [];
+        return (this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []) as Layout[];
     }
 
     /**
      * Stores the layout list on the Document as JSON
      */
-    set unStringifiedLayoutList(layouts: Layout[]) {
-
-        // sometimes there are issues with rendering when you switch from a different view
-        // where the nodes are all squeezed together on the left hand side of the screen
-        // until you click on the screen or close the chrome or interact with it in some way
-        // the component doesn't rerender when the component mounts
-        // this seems to fix that though it isn't very elegant
-
-        this.mounted && (this.props.Document.gridLayoutString = "");
+    setLayoutList(layouts: Layout[]) {
         this.props.Document.gridLayoutString = JSON.stringify(layouts);
-        this.mounted = false;
     }
 
-
-    /**
-     * Sets the width of the decorating box.
-     * @param layout 
-     */
-    @observable private width = (layout: Layout) => (this.props.Document.flexGrid ? layout.w : this.defaultW) * this.colWidthPlusGap - this.margin;
-
-    /**
-     * Sets the height of the decorating box.
-     * @param layout
-     */
-    @observable private height = (layout: Layout) => (this.props.Document.flexGrid ? layout.h : this.defaultH) * this.rowHeightPlusGap - this.margin;
-
     /**
      * 
      * @param layout 
@@ -217,7 +157,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             DataDoc={layout.resolvedDataDoc as Doc}
             NativeHeight={returnZero}
             NativeWidth={returnZero}
-            addDocTab={this.addDocTab}
             backgroundColor={this.props.backgroundColor}
             ContainingCollectionDoc={this.props.Document}
             PanelWidth={width}
@@ -226,7 +165,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
             parentActive={this.props.active}
-            display={StrCast(this.props.Document.display)}
+            display={StrCast(this.props.Document.display, "contents")} // sets the css display type of the ContentFittingDocumentView component
         />;
     }
 
@@ -234,27 +173,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * Saves the layouts received from the Grid to the Document.
      * @param layouts `Layout[]`
      */
-    @undoBatch
     @action
-    setLayout(layoutArray: Layout[]) {
+    setLayout = (layoutArray: Layout[]) => {
         // 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 
-
-        if (this.props.Document.flexGrid) {
-            const layouts: Layout[] = this.parsedLayoutList;
+        if (this.flexGrid) {
+            const layouts = this.parsedLayoutList;
             this.childLayoutPairs.forEach(({ layout: doc }) => {
-                let update: Opt<Layout>;
-                const targetId = doc[Id];
-                const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId);
-                if (gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) {
-                    gridLayout.x = update.x;
-                    gridLayout.y = update.y;
-                    gridLayout.w = update.w;
-                    gridLayout.h = update.h;
-                }
+                let gridLayout = layouts.find(gridLayout => gridLayout.i === doc[Id]);
+                gridLayout && Object.assign(gridLayout, layoutArray.find(layout => layout.i === doc[Id]) || gridLayout);
             });
 
-            this.unStringifiedLayoutList = layouts;
+            this.setLayoutList(layouts);
         }
     }
 
@@ -264,27 +194,22 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      */
     @computed
     private get contents(): JSX.Element[] {
-
-        const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
-        const layouts: Layout[] = this.parsedLayoutList;
-        if (!layouts.length || layouts.length !== childLayoutPairs.length) {
-            return [];
-        }
-
-        for (let i = 0; i < childLayoutPairs.length; i++) {
-            const { layout } = childLayoutPairs[i];
-            const gridLayout = layouts[i];
-            const dxf = () => this.lookupIndividualTransform(gridLayout);
-            const width = () => this.width(gridLayout);
-            const height = () => this.height(gridLayout);
-            collector.push(
-                <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)}
-                </div >
-            );
+        const layouts = this.parsedLayoutList;
+        if (layouts.length !== this.childLayoutPairs.length) {
+            setTimeout(action(() => this.props.Document.gridResetLayout = true), 0);
+        } else {
+            this.layoutList.forEach((l, i) => {
+                const child = this.childLayoutPairs.find(c => c.layout[Id] === l.i);
+                const dxf = () => this.lookupIndividualTransform(layouts[i]);
+                const width = () => (this.flexGrid ? layouts[i].w : this.defaultW) * this.colWidthPlusGap - this.margin;
+                const height = () => (this.flexGrid ? layouts[i].h : this.defaultH) * this.rowHeightPlusGap - this.margin;
+                child && collector.push(
+                    <div key={child.layout[Id]} className={"document-wrapper" + (this.flexGrid && this.props.isSelected() ? "" : " static")} >
+                        {this.getDisplayDoc(child.layout, dxf, width, height)}
+                    </div >
+                );
+            });
         }
         return collector;
     }
@@ -293,56 +218,42 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @returns a list of `Layout` objects with attributes depending on whether the grid is flexible or static
      */
     get layoutList(): Layout[] {
-
-        const layouts: Layout[] = this.parsedLayoutList;
-
-        return this.props.Document.flexGrid ?
-            layouts.map(({ i, x, y, w, h }) => ({
-                i: i,
-                x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, // handles wrapping around of nodes when numCols decreases
-                y: y,
-                w: w > NumCast(this.props.Document.numCols) ? NumCast(this.props.Document.numCols) : w, // reduces width if greater than numCols
-                h: h,
+        return this.flexGrid ?
+            this.parsedLayoutList.map(({ i, x, y, w, h }) => ({
+                i, y, h,
+                x: x + w > this.numCols ? 0 : x, // handles wrapping around of nodes when numCols decreases
+                w: Math.max(w, this.numCols), // reduces width if greater than numCols
                 static: BoolCast(this.childLayoutPairs.find(({ layout }) => layout[Id] === i)?.layout.lockedPosition, false) // checks if the lock position item has been selected in the context menu
-            }))
-            : layouts.map(({ i }, index) => ({
-                i: i,
-                x: this.defaultW * (index % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW)),
-                y: this.defaultH * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH)),
-                w: this.defaultW,
-                h: this.defaultH,
-                static: true
-            }));
+            })) :
+            this.parsedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index)));
     }
 
-    /**
-     * Handles the change in the value of the rowHeight slider.
-     */
-    onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        this.props.Document.rowHeight = event.currentTarget.valueAsNumber;
+    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        const layouts = this.parsedLayoutList;
+        const dropped = de.complete.docDragData?.droppedDocuments;
+        if (dropped && super.onInternalDrop(e, de) && layouts.length !== this.childDocs.length) {
+            dropped.forEach(doc => this.addLayoutItem(layouts, this.makeLayoutItem(doc, this.screenToCell(de.x, de.y)))); // shouldn't place all docs in the same cell;
+            this.setLayoutList(layouts);
+            return true;
+        }
+        return false;
     }
 
     /**
-     * Saves the rowHeight in a temporary variable to make it undoable later.
+     * Handles the change in the value of the rowHeight slider.
      */
-    onSliderDown = () => {
-        this.rowHeight = NumCast(this.props.Document.rowHeight);
+    @action
+    onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this._rowHeight = event.currentTarget.valueAsNumber;
     }
-
-    /**
-     * Uses the stored rowHeight to make the rowHeight change undoable.
-     */
-    onSliderUp = () => {
-        const tempVal = this.props.Document.rowHeight;
-        this.props.Document.rowHeight = this.rowHeight;
-        undoBatch(() => this.props.Document.rowHeight = tempVal)();
+    @action
+    onSliderDown = (e: React.PointerEvent) => {
+        this._rowHeight = this.rowHeight; // uses _rowHeight during dragging and sets doc's rowHeight when finished so that operation is undoable
+        setupMoveUpEvents(this, e, returnFalse, action(() => {
+            undoBatch(() => this.props.Document.gridRowHeight = this._rowHeight)();
+            this._rowHeight = undefined;
+        }), emptyFunction, false, false);
     }
-
-    /**
-     * Creates a text document and adds it to the grid.
-     */
-    @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value }));
-
     /**
      * Adds the display option to change the css display attribute of the `ContentFittingDocumentView`s
      */
@@ -350,74 +261,52 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         const displayOptionsMenu: ContextMenuProps[] = [];
         displayOptionsMenu.push({ description: "Contents", event: () => this.props.Document.display = "contents", icon: "copy" });
         displayOptionsMenu.push({ description: "Undefined", event: () => this.props.Document.display = undefined, icon: "exclamation" });
-
         ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" });
     }
 
-    render() {
-
-        // for the add text document EditableView
-        const newEditableViewProps: EditableProps = {
-            GetValue: () => "",
-            SetValue: this.addTextDocument,
-            contents: "+ ADD TEXT DOCUMENT",
-        };
-
-        const childDocumentViews: JSX.Element[] = this.contents;
-        const chromeStatus = this.props.Document._chromeStatus;
-        const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled');
+    onPointerDown = (e: React.PointerEvent) => {
+        this.props.isSelected(true) && setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => {
+            if (doubleTap) {
+                const text = Docs.Create.TextDocument("", { _width: 150, _height: 50 });
+                FormattedTextBox.SelectOnLoad = text[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
+                Doc.AddDocToList(this.props.Document, this.props.fieldKey, text);
+                this.setLayoutList(this.addLayoutItem(this.parsedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY))));
+            }
+        }), false);
+        e.stopPropagation();
+    }
 
+    render() {
         return (
-            <div className="collectionGridView-contents"
-                style={{
-                    pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined
-                }}
+            <div className="collectionGridView-contents" ref={this.createDashEventsTarget}
+                style={{ pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined }}
                 onContextMenu={this.onContextMenu}
-                ref={this.createDashEventsTarget}
-                onPointerDown={e => {
-                    if (this.props.active(true)) {
-                        if (this.props.isSelected(true)) {
-                            e.stopPropagation();
-                        }
-                    }
-                    // is the following section needed? it prevents the slider from being easily used and I'm not sure what it's preventing
-
-                    // if (this.props.isSelected(true)) {
-                    //     !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault();
-                    // }
-
-                }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond
-            >
-                {showChrome ?
-                    <div className="collectionGridView-addDocumentButton">
-                        <EditableView {...newEditableViewProps} />
-                    </div> : null
-                }
-                <div className="collectionGridView-gridContainer"
-                    ref={this.containerRef}
+                onPointerDown={e => this.onPointerDown(e)} >
+                <div className="collectionGridView-gridContainer" ref={this._containerRef}
+                    onWheel={e => e.stopPropagation()}
                     onScroll={action(e => {
                         if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll;
                         else this._scroll = e.currentTarget.scrollTop;
-                    })}
-                    onWheel={e => e.stopPropagation()}
-                >
-                    <input className="rowHeightSlider" type="range" value={NumCast(this.props.Document.rowHeight)} onPointerDown={this.onSliderDown} onPointerUp={this.onSliderUp} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} />
+                    })} >
+                    <input className="rowHeightSlider" type="range"
+                        style={{ width: this.props.PanelHeight() - 30 }}
+                        min={1} value={this.rowHeight} max={this.props.PanelHeight() - 30}
+                        onPointerDown={this.onSliderDown} onChange={this.onSliderChange} />
                     <Grid
                         width={this.props.PanelWidth()}
-                        nodeList={childDocumentViews.length ? childDocumentViews : null}
-                        layout={childDocumentViews.length ? this.layoutList : undefined}
+                        nodeList={this.contents.length ? this.contents : null}
+                        layout={this.contents.length ? this.layoutList : undefined}
                         childrenDraggable={this.props.isSelected() ? true : false}
-                        numCols={NumCast(this.props.Document.numCols)}
-                        rowHeight={NumCast(this.props.Document.rowHeight)}
+                        numCols={this.numCols}
+                        rowHeight={this.rowHeight}
                         setLayout={this.setLayout}
                         transformScale={this.props.ScreenToLocalTransform().Scale}
-                        compactType={StrCast(this.props.Document.compactType)}
-                        preventCollision={BoolCast(this.props.Document.preventCollision)}
+                        compactType={StrCast(this.props.Document.gridCompaction, "vertical")} // determines whether nodes should remain in position, be bound to the top, or to the left
+                        preventCollision={BoolCast(this.props.Document.gridPreventCollision)}// determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
                         margin={this.margin}
                     />
-
                 </div>
             </div >
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 6232fca7c..66edb99d9 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { observer } from "mobx-react";
 
-
 import "../../../../../node_modules/react-grid-layout/css/styles.css";
 import "../../../../../node_modules/react-resizable/css/styles.css";
 
@@ -29,7 +28,6 @@ interface GridProps {
  */
 @observer
 export default class Grid extends React.Component<GridProps> {
-
     render() {
         const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null;
         return (
-- 
cgit v1.2.3-70-g09d2