1 files changed, 41 insertions, 7 deletions

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