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

---
 .../collectionGrid/CollectionGridView.scss         |  4 +-
 .../collectionGrid/CollectionGridView.tsx          | 52 +++++++++++++++-------
 .../views/collections/collectionGrid/Grid.tsx      | 35 ++++++++++-----
 3 files changed, 61 insertions(+), 30 deletions(-)

(limited to 'src')

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