images displaying

1 files changed, 48 insertions, 32 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 520dd9c2d..1976ecad2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,17 +1,18 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
+import { IReactionDisposer, action, makeObservable, observable, reaction, 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 { Doc } from '../../../../fields/Doc';
+import { DocCast, ImageCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
+import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
-import { DragManager } from '../../../util/DragManager';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
-import { dropActionType } from '../../../util/DropActionTypes';
+import { DataVizBox } from './DataVizBox';
+import './DocCreatorMenu.scss';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -20,22 +21,21 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     private _ref: HTMLDivElement | null = null;
 
-    private _reactionDisposer?: IReactionDisposer;
+    @observable _templateDocs: Doc[] = [];
+    @observable _icons : (ImageField|undefined)[] = [];
 
     @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 _startPos: {x: number, y: number} | undefined = undefined;
+    @observable _startPos?: {x: number, y: number};
     @observable _shouldDisplay: boolean = false;
 
     @observable _menuContent: 'templates' | 'options' = 'templates';
     @observable _dragging: boolean = false;
+    @observable _dataViz?: DataVizBox;
 
     constructor(props: any) {
         super(props);
@@ -43,6 +43,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         DocCreatorMenu.Instance = this;
     }
 
+    @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
+    @action setTemplateDocs = (docs: Doc[]) => {
+         this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc);
+    };
+
     @action
     onPointerDown = (e: PointerEvent) => {
         this._mouseX = e.clientX;
@@ -59,22 +64,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
+    _disposer: IReactionDisposer|undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
+        this._disposer = reaction(() => this._templateDocs.slice(),
+            async(docs) => this._icons =  (await Promise.all(docs.map(doc => this.getIcon(doc))))
+            , {fireImmediately: true});
     }
 
     componentWillUnmount() {
+        this._disposer?.();
         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);
     }
 
     @action
@@ -105,23 +107,37 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    async getIcon(doc: Doc) {
+        const docView = DocumentView.getDocumentView(doc);
+        if (docView) {
+            docView.ComponentView?.updateIcon?.();
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+        }
+        return undefined;
+    }
+
     get templatesPreviewContents(){
-        const tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
         return (
-            <div className='docCreatorMenu-preview-content'>
-                {tempArray.map(i => 
-                    <div
-                        className='docCreatorMenu-preview-window'
-                    >
-                    
-                    </div>)}
+            <div className='docCreatorMenu-preview-container'>
+                {this._icons.filter(url => url).map(url => 
+                    <div className='docCreatorMenu-preview-window'>
+                        <img src={url!.url.href.replace(".png", "_s.png")} />
+                    </div>)
+                }
             </div>
         );
     }
 
     get optionsMenuContents(){
         return (
-            <div></div>
+            <div className='docCreatorMenu-options-container'>
+                <div className="docCreatorMenu-dropdown-button">Dropdown</div>
+                <div className="docCreatorMenu-dropdown-content">
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                </div>
+            </div>
         );
     }
 
@@ -181,6 +197,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
                         </button>
+                        <button className='docCreatorMenu-menu-button right'>
+                            <FontAwesomeIcon icon={'plus'}/>
+                        </button>
                         <button 
                             className='docCreatorMenu-menu-button close-menu'
                             onPointerDown={e =>
@@ -198,9 +217,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={'minus'}/>
                         </button>
-                        <button className='docCreatorMenu-menu-button right'>
-                            <FontAwesomeIcon icon={'plus'}/>
-                        </button>
                     </div>
                     <hr className='docCreatorMenu-menu-hr'/>
                     {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}