creation with layout works

1 files changed, 37 insertions, 1 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 283288013..e03da8e7b 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -33,10 +33,11 @@ import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
-import { DataVizTemplateInfo, DocCreatorMenu } from './DocCreatorMenu';
+import { DataVizTemplateInfo, DocCreatorMenu, LayoutType } from './DocCreatorMenu';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
+import { template } from 'lodash';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -494,6 +495,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return target;
     }
 
+    applyLayout = (templateInfo: DataVizTemplateInfo, docs: Doc[]) => {
+        if (templateInfo.layout.type === LayoutType.Stacked) return;
+        const columns: number = templateInfo.columns;
+        const xGap: number = templateInfo.layout.xMargin;
+        const yGap: number = templateInfo.layout.yMargin;
+        const repeat: number = templateInfo.layout.repeat;
+        const startX: number = templateInfo.referencePos.x;
+        const startY: number = templateInfo.referencePos.y;
+        const templWidth = Number(templateInfo.doc._width);
+        const templHeight = Number(templateInfo.doc._height);
+
+        let i: number = 0;
+        let docsChanged: number = 0;
+        let curX: number = startX;
+        let curY: number = startY;
+
+        while (docsChanged < docs.length){
+            while (i < columns && docsChanged < docs.length){ 
+                docs[docsChanged].x = curX;
+                docs[docsChanged].y = curY;
+                console.log('x: ' + docs[i].x + ' y: ' + docs[i].y);
+                curX += templWidth + xGap;
+                ++docsChanged;
+                ++i;
+            }
+
+            i = 0;
+            curX = startX;
+            curY += templHeight + yGap;
+        }
+    }
+
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
         if (!templateInfo.doc) return;
@@ -514,7 +547,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             target.layout_fieldKey = targetKey;
             return applied;
         });
+
         docs.forEach(doc => mainCollection.addDocument(doc));
+
+        this.applyLayout(templateInfo, docs);
     }
 
     /**