updating from master

3 files changed, 117 insertions, 41 deletions

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index b94bd02a1..f7d6f481a 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,7 +1,7 @@
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from "react";
-import { Doc } from '../../../../new_fields/Doc';
+import { Doc, DataSym, DocListCast } from '../../../../new_fields/Doc';
 import { documentSchema } from '../../../../new_fields/documentSchemas';
 import { makeInterface } from '../../../../new_fields/Schema';
 import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types';
@@ -21,7 +21,20 @@ const GridSchema = makeInterface(documentSchema);
 
 export class CollectionGridView extends CollectionSubView(GridSchema) {
 
-    @observable private layouts: Layout[] | undefined;
+    private layouts: Layout[] = [];
+    private layoutDocs: Doc[] = [];
+    @observable private numCols: number = 10;
+    @observable private rowHeight: number = 100;
+    @observable private isMounted: boolean = false;
+
+    componentDidMount() {
+        this.isMounted = true;
+    }
+
+    componentWillUnmount() {
+        this.isMounted = false;
+        console.log("hola");
+    }
 
     /**
      * @returns the transform that will correctly place
@@ -29,24 +42,19 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * 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 += 194 + 10;
-        }
-        return Transform.Identity(); // type coersion, this case should never be hit
+    private lookupIndividualTransform = (layout: Layout) => {
+
+        const yTranslation = this.rowHeight * layout.y;// + 15 * (layout.y - 1);
+        console.log(yTranslation);
+        return this.props.ScreenToLocalTransform().translate(-this.props.PanelWidth() / this.numCols * layout.x, -yTranslation);
     }
 
 
     @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
+    @observable private width = (layout: Layout) => layout.w * this.props.PanelWidth() / this.numCols;
+    @observable private height = (layout: Layout) => layout.h * this.rowHeight;
+
     addDocTab = (doc: Doc, where: string) => {
         if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) {
             this.dataDoc[this.props.fieldKey] = new List<Doc>([doc]);
@@ -72,26 +80,76 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             getTransform={dxf}
             onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
+            Display={"contents"}
         />;
     }
 
+
     //@action
     set layout(layouts: Layout[]) {
         this.layouts = layouts;
-        console.log(this.layouts[0]);
+        this.props.Document.gridLayouts = new List<Doc>();
+        for (const layout of layouts) {
+            const layoutDoc = new Doc();
+            layoutDoc.i = layout.i;
+            layoutDoc.x = layout.x;
+            layoutDoc.y = layout.y;
+            layoutDoc.w = layout.w;
+            layoutDoc.h = layout.h;
+
+            (this.props.Document.gridLayouts as List<Doc>).push(layoutDoc);
+            console.log("gazoinks");
+
+        }
+        this.forceUpdate(); // better way to do this?
     }
 
-    @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 }
-                );
+        //console.log(this.layouts.length === 0);
+        if (this.layouts.length === 0) {
+            if (this.props.Document.gridLayouts) {
+                //console.log(this.props.Document.gridLayouts);
+                //     for (const layout of (this.props.Document.gridLayouts as List<Doc>)) {
+                //         if (layout instanceof Doc) {
+                //             this.layouts.push(
+                //                 { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number }
+                //             );
+                //         }
+                //         else {
+                //             layout.then((layout: Doc) => {
+                //                 this.layouts.push(
+                //                     { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number }
+                //                 );
+                //                 console.log(layout.i);
+                //             });
+                //         }
+                //     }
+                // }
+                for (const layout of DocListCast(this.props.Document.gridLayouts)) {
+                    this.layouts.push(
+                        { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number }
+                    );
+                }
+            }
+            else {
+                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 }
+                    );
+
+                    const layoutDoc: Doc = new Doc();
+                    layoutDoc.i = "wrapper" + i;
+                    layoutDoc.x = 2 * (i % 5);
+                    layoutDoc.y = 2 * Math.floor(i / 5);
+                    layoutDoc.w = 2;
+                    layoutDoc.h = 2;
+
+                    this.layoutDocs.push(layoutDoc);
+                }
+                this.props.Document.gridLayouts = new List<Doc>(this.layoutDocs);
             }
         }
+
         return this.layouts;
     }
 
@@ -101,25 +159,39 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         const { Document } = this.props;
         const collector: JSX.Element[] = [];
         const layoutArray: Layout[] = [];
+
+
+        const previousLength = this.layout.length;
+        layoutArray.push(...this.layout);
+
+        if (!layoutArray.length) {
+            return [[], []];
+        }
+
+        if (this.childLayoutPairs.length > previousLength) {
+            layoutArray.push(
+                { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 }
+                // add values to document
+            );
+            // this.layout.push(
+            //     { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 }
+            // );
+        }
+
         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 = () => 300;  //this.lookupPixels(layout);
-            const height = () => 300;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
+            const dxf = () => this.lookupIndividualTransform(layoutArray[i]);//.translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin));
+            const width = () => this.width(layoutArray[i]);  //this.lookupPixels(layout);
+            const height = () => this.height(layoutArray[i]);//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 }
-                // add values to document
-            );
         }
+
         return [collector, layoutArray];
     }
 
@@ -127,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         const contents: JSX.Element[] = this.contents?.[0];
         const layout: Layout[] = this.contents?.[1];
-
+        // if (this.isMounted) {
         return (
             <div className="collectionGridView_contents"
                 style={{
@@ -140,8 +212,11 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                     nodeList={contents}
                     layout={layout}
                     gridView={this}
+                    numCols={this.numCols}
+                    rowHeight={this.rowHeight}
                 />
             </div>
         );
+        // }
     }
 }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index a9e906488..ce0173e94 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -16,24 +16,23 @@ interface GridProps {
     nodeList: JSX.Element[] | null;
     layout: Layout[];
     gridView: CollectionGridView;
+    numCols: number;
+    rowHeight: number;
 }
 
 @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() {
         return (
             <GridLayout className="layout"
                 layout={this.props.layout}
-                cols={10}
-                rowHeight={100}
+                cols={this.props.numCols}
+                rowHeight={this.props.rowHeight}
                 width={this.props.width}
                 compactType={null}
                 isDroppable={true}
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 641797cac..814f8fd9c 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -43,6 +43,7 @@ interface ContentFittingDocumentViewProps {
     pinToPres: (document: Doc) => void;
     dontRegisterView?: boolean;
     rootSelected: (outsideReaction?: boolean) => boolean;
+    Display?: string;
 }
 
 @observer
@@ -77,7 +78,8 @@ export class ContentFittingDocumentView extends React.Component<ContentFittingDo
         TraceMobx();
         return (<div className="contentFittingDocumentView" style={{
             width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
-            height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight()
+            height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(),
+            display: this.props.Display /* just added for grid */
         }}>
             {!this.props.Document || !this.props.PanelWidth ? (null) : (
                 <div className="contentFittingDocumentView-previewDoc"