1 files changed, 96 insertions, 8 deletions
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>
         );
     }