UI

1 files changed, 56 insertions, 17 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index ee154994e..2be89daf0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnAll, returnFalse, returnNone, returnOne, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
 import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
@@ -24,6 +24,10 @@ import { OpenWhere } from '../OpenWhere';
 import { IDisposer } from 'mobx-utils';
 import { LightboxView } from '../../LightboxView';
 import ReactLoading from 'react-loading';
+import { CollectionStackingView } from '../../collections/CollectionStackingView';
+import { FieldViewProps } from '../FieldView';
+import { CollectionViewType } from '../../../documents/DocumentTypes';
+import { dropActionType } from '../../../util/DropActionTypes';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -34,7 +38,7 @@ export enum LayoutType {
 }
 
 @observer
-export class DocCreatorMenu extends ObservableReactComponent<{}> {
+export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & CollectionFreeFormView> {
 
     static Instance: DocCreatorMenu;
 
@@ -78,7 +82,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _offset: {x: number, y: number} = {x: 0, y: 0};
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
     @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
-    @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 365};
+    @observable _menuDimensions: {width: number, height: number} = {width: 400, height: 400};
     @observable _editing: boolean = false;
 
     constructor(props: any) {
@@ -194,6 +198,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
 
+    updateIcons = (docs: Doc[]) => { docs.map(this.getIcon) }
+
     @action
     toggleDisplay = (x: number, y: number) => {
         if (this._shouldDisplay) {
@@ -209,7 +215,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     closeMenu = () => { this._shouldDisplay = false };
 
     @action
-    openMenu = () => { this._shouldDisplay = true };
+    openMenu = () => { 
+        const allTemplates = this._templateDocs.concat(this._GPTTemplates);
+        this._shouldDisplay = true;
+        this.updateIcons(allTemplates);
+    };
 
     @action
     onResizePointerDown = (e: React.PointerEvent): void => {
@@ -286,9 +296,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const docView = DocumentView.getDocumentView(doc);
         if (docView) {
             docView.ComponentView?.updateIcon?.();
-            const f = new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
-            console.log(f)
-            return f;
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));;
         }
         return undefined;
     }
@@ -390,14 +398,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
         return (
             <div className='docCreatorMenu-templates-view'>
-                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 165}}>
+                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
                         <div className='docCreatorMenu-section-topbar'>
                             <div className='docCreatorMenu-section-title'>Suggested Templates</div>
                             <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
                                 <FontAwesomeIcon icon='gear'/>
                             </button>
                         </div>
-                        <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading ? 'center' : ''}}>
+                        <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : ''}}>
                             {this._GPTLoading ? (
                                 <div className="loading-spinner">
                                     <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
@@ -422,15 +430,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     </div>
                             ))}
                         </div>
-                        {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
+                        <div className='docCreatorMenu-GPT-options'>
                             <div className='docCreatorMenu-GPT-options-container'>
                                 <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
                                     <FontAwesomeIcon icon='arrows-rotate'/>
                                 </button>
                                 <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
                             </div>
-                            {this._GPTOpt ? GPTOptions : null}
-                        </div>) : null}
+                            {this._GPTOpt ? GPTOptions : null }
+                        </div>
                 </div>
                 <hr className='docCreatorMenu-option-divider full no-margin'/>
                 <div className='docCreatorMenu-section'>
@@ -440,7 +448,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='gear'/>
                         </button>
                     </div>
-                    <div className='docCreatorMenu-templates-preview-window'>
+                    <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
                         <div className='docCreatorMenu-preview-window empty'
                         onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
                         >
@@ -535,6 +543,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    doc = () => {
+        return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
+    }
+
+    screenToLocalTransform = () =>
+    this._props
+        .ScreenToLocalTransform();
+
     layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
         if (!doc) return;
@@ -550,7 +566,30 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
-            <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
+            <div className='divvv' style={{width: 100, height: 100, border: `1px solid white`}}>
+                <CollectionFreeFormView
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this._props}
+                    Document={new Doc()}
+                    isContentActive={returnFalse}
+                    setContentViewBox={emptyFunction}
+                    NativeWidth={() => 100}
+                    NativeHeight={() => 100}
+                    pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone}
+                    isAnnotationOverlay
+                    isAnnotationOverlayScrollable
+                    childDocumentsActive={returnFalse}
+                    fieldKey={this._props.fieldKey + '_annotations'}
+                    dropAction={dropActionType.move}
+                    select={emptyFunction}
+                    addDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    renderDepth={this._props.renderDepth + 1}>
+                    {null}
+                </CollectionFreeFormView>
+            </div>
+            /*<div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
                 <div className='docCreatorMenu-zoom-button-container'>
                     <button 
                         className='docCreatorMenu-zoom-button'
@@ -568,7 +607,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon={'trash'}/>
                     </button> : null}
                 </div>
-                <div 
+                {<div 
                 id={String(id) ?? undefined}
                 className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
                 style={{
@@ -604,8 +643,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </div>
                     )}
 
-                </div>
-            </div>
+                </div>}
+            </div> */
         );
     }