diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 73 |
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> */ ); } |