1 files changed, 113 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
new file mode 100644
index 000000000..d5c2bc227
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -0,0 +1,113 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { SnappingManager } from '../../../util/SnappingManager';
+import './DocCreatorMenu.scss';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+
+@observer
+export class DocCreatorMenu extends ObservableReactComponent<{}> {
+
+    static Instance: DocCreatorMenu;
+
+    private _reactionDisposer?: IReactionDisposer;
+
+    @observable _pageX: number = 0;
+    @observable _pageY: number = 0;
+    @observable _display: boolean = false;
+
+    @observable _yRelativeToTop: boolean = true;
+    @observable _selectedIndex = -1;
+
+    @observable _mouseX: number = -1;
+    @observable _mouseY: number = -1;
+    @observable _shouldDisplay: boolean = false;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        DocCreatorMenu.Instance = this;
+    }
+
+    @action
+    onPointerDown = (e: PointerEvent) => {
+        this._mouseX = e.clientX;
+        this._mouseY = e.clientY;
+    };
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        if (e.button !== 2 && !e.ctrlKey) return;
+        const curX = e.clientX;
+        const curY = e.clientY;
+        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
+            this._shouldDisplay = false;
+        }
+
+        if (this._shouldDisplay) {
+            this._display = true;
+        }
+    };
+
+    componentDidMount() {
+        document.addEventListener('pointerdown', this.onPointerDown, true);
+        document.addEventListener('pointerup', this.onPointerUp);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('pointerdown', this.onPointerDown, true);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        this._reactionDisposer?.();
+    }
+
+    static readonly buffer = 20;
+    static readonly width = 300;
+    static readonly height = 400;
+    get pageX() {
+        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) => {
+        // 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;
+    };
+
+    @action
+    closeMenu = () => {
+        const wasOpen = this._display;
+        this._display = false;
+        this._shouldDisplay = false;
+        return wasOpen;
+    };
+
+    render() {
+        return (
+            <div
+                className="docCreatorMenu-cont"
+                style={{
+                    display: '',
+                    left: this.pageX,
+                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
+                    background: SnappingManager.userBackgroundColor,
+                    color: SnappingManager.userColor,
+                }}>
+            {!this._shouldDisplay ? undefined : 
+            <div>hi hi</div>
+            
+            
+            }
+            </div>
+            )
+        }
+    
+
+}
+\ No newline at end of file