working on layout preview window

1 files changed, 30 insertions, 33 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index c8b414c59..9da9f5aa8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -17,6 +17,7 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { Colors } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
 import { threadId } from 'worker_threads';
+import { ideahub } from 'googleapis/build/src/apis/ideahub';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -40,6 +41,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0};
     @observable _layoutPreview: boolean = false;
+    @observable _layoutPreviewScale: number = 1;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -190,48 +192,42 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input) };
     @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input) };
-    @action updateDimensions = (dimension: 'x' | 'y', input: string) => {
-        if (dimension === 'x') {
-            this._layout.rows = Number(input);
-        } else {
-            this._layout.columns = Number(input);
-        }
-    };
+    @action updateColumns = (input: string) => { this._layout.columns = Number(input) };
 
     get layoutConfigOptions() {
-        const optionInput = (title: string, func: Function) => {
+        const optionInput = (title: string, func: Function, def?: number, key?: string) => {
             return (
-                <div className='docCreatorMenu-option-container'>
+                <div className='docCreatorMenu-option-container small' key={key}>
                     <div className='docCreatorMenu-option-title config layout-config'>
                         {title}
                     </div>
-                    <input onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
+                    <input defaultValue={def} onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
                 </div>
             );
         }
 
         switch (this._layout.type) {
-            case LayoutType.Row: case LayoutType.Column:
+            case LayoutType.Row:
+                return (
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Margin:', this.updateXMargin, this._layout.xMargin, '0')}
+                    </div>
+                    );
+            case LayoutType.Column:
                 return (
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:', this.updateYMargin)}
-                        {optionInput('X Margin:', this.updateXMargin)}
+                        {optionInput('Margin:', this.updateYMargin, this._layout.yMargin, '1')}
                     </div>
                     );
             case LayoutType.Grid:
                 return (
                     <>
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:', this.updateYMargin)}
-                        {optionInput('X Margin:', this.updateXMargin)}
+                        {optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')}
+                        {optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')}
                     </div>
                     <div className='docCreatorMenu-configuration-bar no-gap'>
-                        <div className='docCreatorMenu-option-title config dimensions'>
-                            Dimensions:
-                        </div>
-                        <input className='docCreatorMenu-input config dimensions left' onInput={(e) => {this.updateDimensions('x', e.currentTarget.value); this.forceUpdate()}}/>
-                        <div className='docCreatorMenu-option-title spacer small'>x</div>
-                        <input className='docCreatorMenu-input config dimensions right' onInput={(e) => this.updateDimensions('y', e.currentTarget.value)}/>
+                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3')}
                     </div>
                     </>
                 );
@@ -248,28 +244,29 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const horizontalSpan: number = (docWidth + this._layout.xMargin) * this.columnsCount - this._layout.xMargin;
         const verticalSpan: number = (docHeight + this._layout.yMargin) * this.rowsCount - this._layout.yMargin;
         const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-        const scaleDownFactor: number = largerSpan / 235;
-        const scaledWidth = docWidth / scaleDownFactor;
-        const scaledHeight = docHeight / scaleDownFactor;
-
-        console.log(this.rowsCount);
-        console.log(this.columnsCount)
+        const scaledDown = (input: number) => {return input / (largerSpan / 225 * this._layoutPreviewScale)}
+        const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
             <div 
             className='docCreatorMenu-layout-preview-window'
             style={{
-                gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledWidth}px)`,
-                gridTemplateRows: `repeat(${this.rowsCount}, ${scaledHeight}px)`,
-                rowGap: `${this._layout.yMargin}px`,
-                columnGap: `${this._layout.xMargin}px`
+                gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
+                gridTemplateRows: `${scaledDown(docHeight)}px`,
+                gridAutoRows: `${scaledDown(docHeight)}px`,
+                rowGap: `${scaledDown(this._layout.yMargin)}px`,
+                columnGap: `${scaledDown(this._layout.xMargin)}px`
             }}>
+                {/* <button>
+
+                </button> */}
                 {this.docsToRender.map(num => 
                     <div 
                     className='docCreatorMenu-layout-preview-item'
                     style={{
-                        width: scaledWidth, 
-                        height: scaledHeight,
+                        width: scaledDown(docWidth), 
+                        height: scaledDown(docHeight),
+                        fontSize: fontSize,
                     }}
                     >
                         {num}