docCreatorMenu progress

5 files changed, 157 insertions, 34 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d784a14b8..de985263d 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -269,7 +269,6 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                 // if (this._searchString.startsWith(this._defaultPrefix)) {
                 this._defaultItem?.(this._searchString.substring(this._defaultPrefix.length));
             }
-            this.closeMenu();
             e.preventDefault();
             e.stopPropagation();
         }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5b9ddbb88..926e5fd55 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -76,6 +76,7 @@ import { PresBox } from './nodes/trails';
 import { AnchorMenu } from './pdf/AnchorMenu';
 import { GPTPopup } from './pdf/GPTPopup/GPTPopup';
 import { TopBar } from './topbar/TopBar';
+import { DocCreatorMenu } from './nodes/DataVizBox/DocCreatorMenu';
 
 const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
 const _global = (window /* browser */ || global) /* node */ as any;
@@ -278,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faWindowMaximize,
                 fa.faGift,
                 fa.faLockOpen,
                 fa.faSort,
@@ -1093,6 +1095,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 <PreviewCursor />
                 <TaskCompletionBox />
                 <ContextMenu />
+                <DocCreatorMenu/>
                 <ImageLabelHandler />
                 <AnchorMenu />
                 <MapAnchorMenu />
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index dae535ba6..1e0a72a91 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -429,12 +429,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection;
     };
 
-    specificContextMenu = (): void => {
+    specificContextMenu = (x: number, y: number): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
-        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.displayMenu(200, 200), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.toggleDisplay(x, y), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -518,8 +518,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             // displays how to get data into the DataVizBox if its empty
             <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command (ctrl + p) to bring the data table to your canvas.</div>
         ) : (
-            <div>
-                <DocCreatorMenu/>
             <div
                 className="dataViz-box"
                 onPointerDown={this.marqueeDown}
@@ -530,7 +528,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     transform: `scale(${scale})`,
                     position: 'absolute',
                 }}
-                onContextMenu={this.specificContextMenu}
+                onContextMenu={(e) => this.specificContextMenu(e.pageX, e.pageY)}
                 onWheel={e => e.stopPropagation()}
                 ref={this._mainCont}>
                 <div className="datatype-button">
@@ -596,7 +594,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     />
                 )}
             </div>
-            </div>
         );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index fea5a6f59..43053ee34 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -1,12 +1,55 @@
 .docCreatorMenu-cont {
     position: absolute;
-    display: flex;
-    min-width: 300px;
-    min-height: 400px;
-    z-index: 6;
-    box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
-    flex-direction: column;
-    background: whitesmoke;
-    color: black;
+    z-index: 100000;
+    // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
+    // background: whitesmoke; 
+    // color: black;
     border-radius: 3px;
+}   
+
+.docCreatorMenu-menu {
+    display: flex;
+    flex-direction: row;
+}
+
+.docCreatorMenu-menu-button {
+    width: 30px;
+    height: 30px;
+    background: whitesmoke; 
+    background-color: rgb(34, 34, 37);
+    border-radius: 5px;
+    border: 1px solid whitesmoke;
+    padding: 0px;
+    font-size: 14px;
+     
+    &.right{
+        margin-left: auto;
+        font-size: 12px;
+    }
+
+    &.close-menu {
+        margin-left: 0px;
+        font-size: 12px;
+    }
+
+    &.options {
+        margin-left: 0px;
+    }
+
+    &:hover {
+        background-color: rgb(60, 60, 65);
+    }
+}
+
+.docCreatorMenu-menu-hr{
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.docCreatorMenu-content {
+    margin: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 51px);
+    border: 1px solid whitesmoke;
+    border-radius: 5px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index d5c2bc227..dbd385047 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,16 +1,25 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { SnappingManager } from '../../../util/SnappingManager';
 import './DocCreatorMenu.scss';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { IconButton, Size } from 'browndash-components';
+import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
+import { undoable } from '../../../util/UndoManager';
+import { DragManager } from '../../../util/DragManager';
+import { DocumentView } from '../DocumentView';
+import { dropActionType } from '../../../util/DropActionTypes';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     static Instance: DocCreatorMenu;
 
+    private _ref: HTMLDivElement | null = null;
+
     private _reactionDisposer?: IReactionDisposer;
 
     @observable _pageX: number = 0;
@@ -22,8 +31,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
+    @observable _startPos: {x: number, y: number} | undefined = undefined;
     @observable _shouldDisplay: boolean = false;
 
+    @observable _menuContent: 'templates' | 'options' = 'templates';
+    @observable _dragging: boolean = false;
+
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -35,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
     };
+
     @action
     onPointerUp = (e: PointerEvent) => {
         if (e.button !== 2 && !e.ctrlKey) return;
@@ -43,10 +57,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
             this._shouldDisplay = false;
         }
-
-        if (this._shouldDisplay) {
-            this._display = true;
-        }
     };
 
     componentDidMount() {
@@ -67,18 +77,18 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
     }
 
-    get pageY() {
-        return this._pageY + DocCreatorMenu.height > window.innerHeight - DocCreatorMenu.buffer ? window.innerHeight - DocCreatorMenu.buffer - DocCreatorMenu.height : Math.max(0, this._pageY);
-    }
-
     @action
-    displayMenu = (x: number, y: number) => {
+    toggleDisplay = (x: number, y: number) => {
         // maxX and maxY will change if the UI/font size changes, but will work for any amount
         // of items added to the menu
-
-        this._pageX = x;
-        this._pageY = y;
-        this._shouldDisplay = true;
+        if (this._shouldDisplay) {
+            this._shouldDisplay = false;
+        } else {
+            this._pageX = x;
+            console.log(y);
+            this._pageY = y;
+            this._shouldDisplay = true;
+        }
     };
 
     @action
@@ -89,21 +99,92 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return wasOpen;
     };
 
+    @action
+    onPointerMove = (e: any) => {
+        if (this._dragging){
+            this._pageX = e.pageX - (this._startPos?.x ?? 0);
+            this._pageY = e.pageY - (this._startPos?.y ?? 0);
+        }
+    }
+
+    setDragStart = () => {
+
+    }
+
     render() {
         return (
             <div
                 className="docCreatorMenu-cont"
+                ref={r => this._ref = r}
                 style={{
                     display: '',
-                    left: this.pageX,
-                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
+                    left: this._pageX,
+                    top: this._pageY,
+                    width: this._shouldDisplay ? 300 : 0,
+                    height: this._shouldDisplay ? 400 : 0,
                     background: SnappingManager.userBackgroundColor,
                     color: SnappingManager.userColor,
                 }}>
             {!this._shouldDisplay ? undefined : 
-            <div>hi hi</div>
-            
-            
+                <>
+                    <div 
+                    className='docCreatorMenu-menu'
+                    onPointerDown={e =>
+                        setupMoveUpEvents(
+                            this,
+                            e,
+                            (e) => {
+                                this._dragging = 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();
+                            }, 'open actions menu')
+                        )
+                    
+                    }
+                    onPointerMove={e => this.onPointerMove(e)}
+                    onPointerUp={() => this._dragging = false}
+                    >  
+                        <button 
+                            className='docCreatorMenu-menu-button'
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    returnFalse,
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                        runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
+                                    }, 'open actions menu')
+                                )
+                            }
+                        >
+                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
+                        </button>
+                        <button className='docCreatorMenu-menu-button close-menu'>
+                            <FontAwesomeIcon icon={'minus'}/>
+                        </button>
+                        <button className='docCreatorMenu-menu-button right'>
+                            <FontAwesomeIcon icon={'plus'}/>
+                        </button>
+                    </div>
+                    <hr className='docCreatorMenu-menu-hr'/>
+                    <div className='docCreatorMenu-content'>
+                        {this._menuContent === 'templates' ? 
+                            <div>
+                            </div>
+                            :
+                            <div>
+                            </div>
+                        }
+                    </div>
+                </>
             }
             </div>
             )