diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 68 |
1 files changed, 49 insertions, 19 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 3ebf97570..88308c226 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, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; +import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc } from '../../../../fields/Doc'; import { DocCast, ImageCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; @@ -15,6 +15,15 @@ import { DataVizBox } from './DataVizBox'; import './DocCreatorMenu.scss'; import { Id } from '../../../../fields/FieldSymbols'; import { Colors } from 'browndash-components'; +import { MakeTemplate } from '../../../util/DropConverter'; + +export enum LayoutType { + Stacked = 'stacked', + Grid = 'grid', + Row = 'row', + Column = 'column', + Custom = 'custom' +} @observer export class DocCreatorMenu extends ObservableReactComponent<{}> { @@ -25,9 +34,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { @observable _templateDocs: Doc[] = []; @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>; - @observable _selectedTemplateID?: Doc; + @observable _selectedTemplate?: Doc; - @observable _selectedLayout?: 'stacked' | 'grid' | 'row' | 'column' | 'custom'; + @observable _selectedLayout?: LayoutType; @observable _pageX: number = 0; @observable _pageY: number = 0; @@ -49,9 +58,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { } @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz }; - @action setTemplateDocs = (docs: Doc[]) => { - this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc); - }; + @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)}; + @action onPointerDown = (e: PointerEvent) => { @@ -126,17 +134,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { if (renderedTemplates.includes(info.doc)) return undefined; renderedTemplates.push(info.doc); + //let ref: any = undefined; return (<div + //ref={r => ref = r} className='docCreatorMenu-preview-window' style={{ - background: this._selectedTemplateID === info.doc ? Colors.MEDIUM_BLUE : '', - boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '' + background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '', + boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '' }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); - this._selectedTemplateID = info.doc; + this._selectedTemplate = info.doc; + MakeTemplate(info.doc); + // ref.style.background = Colors.MEDIUM_BLUE; + // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`; this.forceUpdate(); }, 'open actions menu') ) @@ -150,7 +163,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { get optionsMenuContents(){ - const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom', optStyle?: {}) => { + const layoutOption = (option: LayoutType, optStyle?: {}) => { return ( <div className="docCreatorMenu-dropdown-option" @@ -173,11 +186,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { <div className='docCreatorMenu-dropdown-hoverable'> <div className="docCreatorMenu-dropdown-title">Choose Layout</div> <div className="docCreatorMenu-dropdown-content"> - {layoutOption('stacked')} - {layoutOption('grid')} - {layoutOption('row')} - {layoutOption('column')} - {layoutOption('custom', {borderBottom: `0px`})} + {layoutOption(LayoutType.Stacked)} + {layoutOption(LayoutType.Grid)} + {layoutOption(LayoutType.Row)} + {layoutOption(LayoutType.Column)} + {layoutOption(LayoutType.Custom, {borderBottom: `0px`})} </div> </div> <div className='docCreatorMenu-layout-preview-window'> @@ -242,7 +255,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { > <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'magnifying-glass'}/> </button> - <button className='docCreatorMenu-menu-button right'> + <button + className='docCreatorMenu-menu-button right' + onPointerDown={e => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + undoable(clickEv => { + clickEv.stopPropagation(); + if (!this._selectedTemplate) return; + const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate}; + this._dataViz?.createDocsFromTemplate(templateInfo); + }, 'make docs') + ) + }> <FontAwesomeIcon icon={'plus'}/> </button> <button @@ -258,8 +286,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { this.closeMenu(); }, 'close menu') ) - } - > + }> <FontAwesomeIcon icon={'minus'}/> </button> </div> @@ -270,6 +297,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { </div> ) } - +} +export interface DataVizTemplateInfo { + doc: Doc; + layout?: LayoutType; }
\ No newline at end of file |