creation with layout works

3 files changed, 88 insertions, 8 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);
     }
 
     /**
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index d2f8f13d1..8b17f1ed4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -59,6 +59,16 @@
     color: rgb(180, 180, 180);
 }
 
+
+.docCreatorMenu-placement-indicator {
+    position: absolute;
+    z-index: 100000;
+    border-left: solid 3px #9fd7fb;
+    border-top: solid 3px #9fd7fb;
+    width: 25px;
+    height: 25px;
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 //DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3eda2c891..b1488679f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -33,18 +33,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     static Instance: DocCreatorMenu;
 
     private _ref: HTMLDivElement | null = null;
-    private _templateInfo: DataVizTemplateInfo = {};
 
     @observable _templateDocs: Doc[] = [];
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1};
+    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1, repeat: 0};
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
+    @observable _indicatorX: number | undefined = undefined;
+    @observable _indicatorY: number | undefined = undefined;
     @observable _display: boolean = false;
 
     @observable _mouseX: number = -1;
@@ -54,6 +55,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _menuContent: 'templates' | 'options' = 'templates';
     @observable _dragging: boolean = false;
+    @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
 
     constructor(props: any) {
@@ -158,6 +160,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action
     onPointerMove = (e: any) => {
+        // if (this._draggingIndicator) {
+        //     this._indicatorX = e.pageX - (this._startPos?.x ?? 0) + this._pageX;
+        //     this._indicatorY = e.pageY - (this._startPos?.y ?? 0) + this._pageY;
+        // } else 
         if (this._dragging){
             this._pageX = e.pageX - (this._startPos?.x ?? 0);
             this._pageY = e.pageY - (this._startPos?.y ?? 0);
@@ -356,7 +362,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 </div>
                 {this._layout.type ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
-                {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
+                {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
             </div>
         );
     }
@@ -365,6 +371,31 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return (
             <div className='docCreatorMenu'>
                 {!this._shouldDisplay ? undefined : 
+                <>
+                {/* <div className='docCreatorMenu-placement-indicator' 
+                style={{
+                    display: '',
+                    left: this._indicatorX ?? this._pageX + 300,
+                    top: this._indicatorY ?? this._pageY,
+                }}
+                onPointerMove={e => this.onPointerMove(e)}
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        (e) => {
+                            this._draggingIndicator = true;
+                            this._startPos = {x: 0, y: 0};
+                            this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                            this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                            return true;
+                        },
+                        emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                        }, 'drag menu')
+                    )
+                }/> */}
                 <div
                     className="docCreatorMenu-cont"
                     ref={r => this._ref = r}
@@ -410,7 +441,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         if (!this._selectedTemplate) return;
-                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate};
+                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+                                        
                                         this._dataViz?.createDocsFromTemplate(templateInfo);
                                     }, 'make docs')
                                 )
@@ -425,6 +457,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </div>
                         {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
                 </div>
+                </>
                 }
             </div>
             )
@@ -432,7 +465,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 }
 
 export interface DataVizTemplateInfo {
-    doc?: Doc;
-    layout?: {};
-    repeat?: number;
+    doc: Doc;
+    layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
+    columns: number;
+    referencePos: {x: number, y: number};
 }
\ No newline at end of file