From bcbbfc670b95530b4dd9bd258e726fe75c47cfa8 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 16 Jul 2024 03:17:11 -0400
Subject: refactored click events; zoom in/out option

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  82 ++++++++---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 150 +++++++++------------
 2 files changed, 125 insertions(+), 107 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bfc1c1216..a9b4e2501 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -1,3 +1,10 @@
+.no-margin {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}
+
 .docCreatorMenu-cont {
     position: absolute;
     z-index: 100000;
@@ -269,25 +276,64 @@
 
     }
 
-    .docCreatorMenu-layout-preview-window {
-        padding: 5px;
-        flex: 0 0 auto;
-        overflow: scroll;
-        display: grid;
-        width: 240;
-        height: 240;
-        border: 1px solid whitesmoke;
-        border-radius: 5px;
-        background-color: rgb(34, 34, 37);
-        -ms-overflow-style: none; 
-        scrollbar-width: none;
-
-        .docCreatorMenu-layout-preview-item {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+    .docCreatorMenu-layout-preview-window-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 85%;
+        height: auto;
+        position: relative;
+        padding: 0px;
+
+        &:hover .docCreatorMenu-zoom-button {
+            display: block;
+        }
+
+        .docCreatorMenu-layout-preview-window {
+            padding: 5px;
+            flex: 0 0 auto;
+            overflow: scroll;
+            display: grid;
+            width: auto;
+            height: auto;
+            max-width: 240;
+            max-height: 240;
+            border: 1px solid whitesmoke;
+            border-radius: 5px;
+            background-color: rgb(34, 34, 37);
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+
+            .docCreatorMenu-layout-preview-item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 3px;
+                border: solid 1px lightblue;
+            }
+        }
+
+        .docCreatorMenu-zoom-button{ 
+            display: none;
+            width: 15px;
+            height: 15px;
+            background: whitesmoke; 
+            background-color: rgb(34, 34, 37);
             border-radius: 3px;
-            border: solid 1px lightblue;
+            border: 1px solid whitesmoke;
+            padding: 0px;
+            font-size: 10px;
+            position: absolute;
+            top: 0px;
+            z-index: 6;
+            margin-left: 0px;
+            margin-top: 0px;
+            margin-right: 225px;
+            margin-bottom: 0px;
+
+            &.zoom-in{
+                top: 15px;
+            }
         }
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 9da9f5aa8..bae2d2000 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -39,7 +39,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0};
+    @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns: number} = {yMargin: 0, xMargin: 0, columns: 1};
     @observable _layoutPreview: boolean = false;
     @observable _layoutPreviewScale: number = 1;
 
@@ -76,7 +76,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             case LayoutType.Column:
                 return this.docsToRender.length;
             case LayoutType.Grid:
-                return this._layout.rows ?? 0;
+                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
             default: 
                 return 0;
         }
@@ -95,6 +95,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    setUpButtonClick = (e: any, func: Function) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoable(clickEv => {
+                clickEv.stopPropagation();
+                func();
+            }, 'create docs')
+        )
+    }
+
     @action
     onPointerDown = (e: PointerEvent) => {
         this._mouseX = e.clientX;
@@ -130,7 +143,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             this._shouldDisplay = false;
         } else {
             this._pageX = x;
-            console.log(y);
             this._pageY = y;
             this._shouldDisplay = true;
         }
@@ -174,15 +186,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
                         boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
-                    onPointerDown={e =>
-                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
-                            undoable(clickEv => {
-                                clickEv.stopPropagation();
-                                this._selectedTemplate = info.doc;
-                                MakeTemplate(info.doc);
-                            }, 'open actions menu')
-                        )
-                    }>
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {this._selectedTemplate = info.doc; MakeTemplate(info.doc);}))}>
                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                     </div>
                 )})}
@@ -195,9 +199,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @action updateColumns = (input: string) => { this._layout.columns = Number(input) };
 
     get layoutConfigOptions() {
-        const optionInput = (title: string, func: Function, def?: number, key?: string) => {
+        const optionInput = (title: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
             return (
-                <div className='docCreatorMenu-option-container small' key={key}>
+                <div className='docCreatorMenu-option-container small' key={key} style={{marginTop: noMargin ? '0px' : ''}}
+                >
                     <div className='docCreatorMenu-option-title config layout-config'>
                         {title}
                     </div>
@@ -226,8 +231,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         {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'>
-                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3')}
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3', true)}
                     </div>
                     </>
                 );
@@ -248,49 +253,51 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
-            <div 
-            className='docCreatorMenu-layout-preview-window'
-            style={{
-                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: scaledDown(docWidth), 
-                        height: scaledDown(docHeight),
-                        fontSize: fontSize,
-                    }}
-                    >
-                        {num}
-                    </div>
-                )}
+            <div className='docCreatorMenu-layout-preview-window-wrapper'>
+                <button 
+                    className='docCreatorMenu-zoom-button'
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
+                        <FontAwesomeIcon icon={'minus'}/>
+                </button>
+                <button 
+                    className='docCreatorMenu-zoom-button zoom-in'
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
+                        <FontAwesomeIcon icon={'plus'}/>
+                </button>
+                <div 
+                className='docCreatorMenu-layout-preview-window'
+                style={{
+                    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`
+                }}>
+                    {this.docsToRender.map(num => 
+                        <div 
+                        className='docCreatorMenu-layout-preview-item'
+                        style={{
+                            width: scaledDown(docWidth), 
+                            height: scaledDown(docHeight),
+                            fontSize: fontSize,
+                        }}
+                        >
+                            {num}
+                        </div>
+                    )}
 
+                </div>
             </div>
         );
     }
 
     get optionsMenuContents(){
-        const layoutOption = (option: LayoutType, optStyle?: {}) => {
+        const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
             return (
                 <div 
                     className="docCreatorMenu-dropdown-option" 
                     style={optStyle}
-                    onPointerDown={e =>
-                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
-                            undoable(clickEv => {
-                                clickEv.stopPropagation();
-                                runInAction(() => this._layout.type = option);
-                            }, 'open actions menu')
-                        )
-                    }>
+                    onPointerDown={e => this.setUpButtonClick(e, () => {specialFunc?.(); runInAction(() => this._layout.type = option)})}>
                     {option}
                 </div>
             );
@@ -318,7 +325,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
                             {layoutOption(LayoutType.Stacked)}
-                            {layoutOption(LayoutType.Grid)}
+                            {layoutOption(LayoutType.Grid, undefined, () => {this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
                             {layoutOption(LayoutType.Row)}
                             {layoutOption(LayoutType.Column)}
                             {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
@@ -326,14 +333,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     </div>
                     <button 
                         className='docCreatorMenu-menu-button'
-                        onPointerDown={e =>
-                            setupMoveUpEvents(this, e, returnFalse, emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    runInAction(() => this._layoutPreview = !this._layoutPreview);
-                                }, 'open actions menu')
-                            )
-                        }>
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreview = !this._layoutPreview))}>
                         <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
                     </button>
                 </div>
@@ -384,29 +384,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >  
                             <button 
                                 className='docCreatorMenu-menu-button'
-                                onPointerDown={e =>
-                                    setupMoveUpEvents(
-                                        this,
-                                        e,
-                                        returnFalse,
-                                        emptyFunction,
-                                        undoable(clickEv => {
-                                            clickEv.stopPropagation();
-                                            runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
-                                        }, 'create docs')
-                                    )
-                                }
-                            >
+                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
                                 <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
                             </button>
                             <button 
                             className='docCreatorMenu-menu-button right'
-                            onPointerDown={e =>
-                                setupMoveUpEvents(
-                                    this,
-                                    e,
-                                    returnFalse,
-                                    emptyFunction,
+                            onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         if (!this._selectedTemplate) return;
@@ -419,18 +402,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             </button>
                             <button 
                                 className='docCreatorMenu-menu-button close-menu'
-                                onPointerDown={e =>
-                                    setupMoveUpEvents(
-                                        this,
-                                        e,
-                                        returnFalse,
-                                        emptyFunction,
-                                        undoable(clickEv => {
-                                            clickEv.stopPropagation();
-                                            this.closeMenu();
-                                        }, 'close menu')
-                                    )
-                                }>
+                                onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
                                 <FontAwesomeIcon icon={'minus'}/>
                             </button>
                         </div>
-- 
cgit v1.2.3-70-g09d2