diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 161 |
1 files changed, 124 insertions, 37 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 2be89daf0..8ec255dfe 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co @observable _templateDocs: Doc[] = []; @observable _selectedTemplate: Doc | undefined = undefined; + @observable _fields: {title: string, type: string, id: number}[] = []; @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0}; @observable _layoutPreview: boolean = true; @@ -71,7 +72,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co @observable _startPos?: {x: number, y: number}; @observable _shouldDisplay: boolean = false; - @observable _menuContent: 'templates' | 'options' | 'saved' = 'templates'; + @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' = 'templates'; @observable _dragging: boolean = false; @observable _draggingIndicator: boolean = false; @observable _dataViz?: DataVizBox; @@ -126,10 +127,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co } } - @computed get selectedFields(){ + @computed get selectedFields() { return StrListCast(this._dataViz?.layoutDoc._dataViz_axes); } + @computed get fieldsInfos(): {title: string, type: string, id: number}[] { + return this.selectedFields.map(field => {return {title: field, type: '', id: Math.random() * 100000}}).concat(this._fields); + } + @computed get canMakeDocs(){ return this._selectedTemplate !== undefined && this._layout !== undefined; } @@ -367,14 +372,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co return doc; }); - const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 }); + const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400000, y: 400000 }); mainCollection.addDocument(template); GPTTemplates.push(template); }); - setTimeout(() => {this.setGPTTemplates(GPTTemplates); GPTTemplates.forEach(template => mainCollection.removeDocument(template))}, 100); + setTimeout(() => {this.setGPTTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100); this.forceUpdate(); } @@ -449,9 +454,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co </button> </div> <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)} - > + <div className='docCreatorMenu-preview-window empty'> <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/> </div> {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => { @@ -566,30 +569,30 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3)); return ( - <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='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' @@ -644,7 +647,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co )} </div>} - </div> */ + </div> ); } @@ -735,10 +738,35 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co ); } - basicTemplateTest = () => { - console.log(this._GPTTemplates) - this.forceUpdate(); - //this._dataViz?.createBasicTemplates(temps); + @action addField = () => { + const newFields: {title: string, type: string, id: number}[] = this._fields.concat([{title: '', type: '', id: Math.random() * 100000}]) + this._fields = newFields; + } + + get dashboardContents(){ + return ( + <div className='docCreatorMenu-dashboard-view'> + <div className='topbar'> + <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}> + <FontAwesomeIcon icon='plus'/> + </button> + </div> + {this.fieldsInfos.map(field => + <div className='field-panel'> + <div className='properties-wrapper'> + <input className='field-property-container' defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/> + <input className='field-property-container' placeholder={'Enter type'} /> + {field.type === 'Text' ? + <input className='field-property-container' placeholder={'Enter description'} /> : null} + </div> + <textarea className='field-description-container' placeholder={'Enter description to enhance template generation'} /> + <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {console.log(this._fields); this._fields = this._fields.splice(this._fields.indexOf(field), 1); console.log(this._fields); this.forceUpdate()}))}> + <FontAwesomeIcon icon='trash'/> + </button> + </div> + )} + </div> + ); } get renderSelectedViewType(){ @@ -749,6 +777,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co return this.optionsMenuContents; case 'saved': return this.savedLayoutsPreviewContents; + case 'dashboard': + return this.dashboardContents; default: return undefined; } @@ -785,7 +815,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co } const onPreviewSelected = () => {this._menuContent = 'templates'} - const onSavedSelected = () => {this._menuContent = 'saved'} + const onSavedSelected = () => {this._menuContent = 'dashboard'} const onOptionsSelected = () => { this._menuContent = 'options'; if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length)); @@ -861,4 +891,61 @@ export interface DataVizTemplateLayout { layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number}; columns: number; rows: number; +} + +export interface TemplateDocInfos { + baseHeight: number; + baseWidth: number; + fields: TemplateDocField[]; +} + +export interface TemplateDocField { + coordinates: {tl: [number, number], br: [number, number]}; + title: string; + content: string; + getDoc: (parentWidth: number, parentHeight: number) => Doc; +} + +export class TemplateDocTextField implements TemplateDocField { + + coordinates: {tl: [number, number], br: [number, number]}; + title: string; + content: string; + + constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) { + this.coordinates = coords; + this.title = title; + this.content = content; + } + + getDoc = (parentWidth: number, parentHeight: number) => { + const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentWidth; //prettier-ignore + const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentWidth; //prettier-ignore + const width = l - r; + const height = t - b; + const coord = {x: l, y: t}; + + const doc = Docs.Create.TextDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) + + return doc; + }; +} + +export class TemplateDocImageField implements TemplateDocField { + + coordinates: {tl: [number, number], br: [number, number]}; + title: string; + content: string; + + constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) { + this.coordinates = coords; + this.title = title; + this.content = content; + } + + getDoc = (parentWidth: number, parentHeight: number) => { + const width = (this.coordinates.br[0] - this.coordinates.tl[0]) * parentWidth; + //const height; + return new Doc(); + }; }
\ No newline at end of file |