From f992fbeed6c523985e5ee6c851217a0dc38358d4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 15 Jul 2024 19:42:08 -0400
Subject: working on layout preview window

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  7 ++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 63 +++++++++++-----------
 2 files changed, 33 insertions(+), 37 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index e3530c0ef..bfc1c1216 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -211,7 +211,6 @@
 .docCreatorMenu-menu-container {
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: center;
     overflow-y: scroll;
     margin: 5px;
@@ -272,14 +271,14 @@
 
     .docCreatorMenu-layout-preview-window {
         padding: 5px;
+        flex: 0 0 auto;
         overflow: scroll;
-        aspect-ratio: 1 / 1;
         display: grid;
-        width: 85%;
+        width: 240;
+        height: 240;
         border: 1px solid whitesmoke;
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
-        margin-top: 10px;
         -ms-overflow-style: none; 
         scrollbar-width: none;
 
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}
-- 
cgit v1.2.3-70-g09d2