diff options
Diffstat (limited to 'src')
7 files changed, 124 insertions, 62 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 311a0ad65..6621c610f 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -703,6 +703,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const values: string[] = []; fields.forEach(col => values.push(this.records[row][col])); + + const proto = new Doc(); proto.author = ClientUtils.CurrentUserEmail(); values.forEach((val, i) => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index e7d6bb98e..7491642eb 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -58,7 +58,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @observable _renderedDocCollection: Doc | undefined = undefined; @observable _templateDocs: Doc[] = []; - @observable _selectedTemplate: Doc | undefined = undefined; + @observable _selectedTemplateDoc: Doc | undefined = undefined; @observable _userCreatedColumns: Col[] = []; @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = []; @@ -68,7 +68,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @observable _savedLayouts: DataVizTemplateLayout[] = []; @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined; - @observable _suggestedTemplates: Doc[] = []; + @observable _suggestedTemplates: Template[] = []; @observable _GPTOpt: boolean = false; @observable _userPrompt: string = ''; @observable _callCount: number = 0; @@ -112,12 +112,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @action setTemplateDocs = (docs: Doc[]) => { this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc)); }; - @action setGSuggestedTemplates = (docs: Doc[]) => { - this._suggestedTemplates = docs; + @action setSuggestedTemplates = (templates: Template[]) => { + this._suggestedTemplates = templates; }; @computed get docsToRender() { - return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; + return this._selectedTemplateDoc ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; } @computed get rowsCount() { @@ -179,7 +179,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } @computed get canMakeDocs() { - return this._selectedTemplate !== undefined && this._layout !== undefined; + return this._selectedTemplateDoc !== undefined && this._layout !== undefined; } get bounds(): { t: number; b: number; l: number; r: number } { @@ -239,7 +239,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { docs => this.updateIcons(docs) ); this._disposers.gpt = reaction( - () => this._suggestedTemplates.slice(), + () => this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice(), docs => this.updateIcons(docs) ); //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) @@ -289,7 +289,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { @action openMenu = () => { - const allTemplates = this._templateDocs.concat(this._suggestedTemplates); + const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.mainField.renderedDoc())); this._shouldDisplay = true; this.updateIcons(allTemplates); }; @@ -374,15 +374,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { return undefined; } - @action updateSelectedTemplate = (template: Doc) => { - if (this._selectedTemplate === template) { - this._selectedTemplate = undefined; + @action updateSelectedTemplate = (template: Template) => { + if (this._selectedTemplateDoc === template.mainField.renderedDoc()) { + this._selectedTemplateDoc = undefined; return; } else { - this._selectedTemplate = template; - MakeTemplate(template); - const templateInfo: DataVizTemplateInfo = { doc: template, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount }; - this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? []; + this._selectedTemplateDoc = template.mainField.renderedDoc(); + template.renderUpdates(); + this._fullyRenderedDocs = this.createDocsFromTemplate(template) ?? []; this.updateRenderedDocCollection(); } }; @@ -701,11 +700,40 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { }); setTimeout(() => { - this.setGSuggestedTemplates(renderedTemplates); + this.setSuggestedTemplates(templates); this._GPTLoading = false; }); }; + createDocsFromTemplate = (template: Template) => { + const dv = this._dataViz; + if (!dv) return; + const fields: string[] = Array.from(Object.keys(dv.records[0])); + const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows); + + const fieldContents: {[title: string]: string}[] = selectedRows.map(row => { + let values: {[title: string]: string} = {}; + fields.forEach(col => { + values[col] = dv.records[row][col]; + }); + + return values; + }); + + const renderedDocs: Doc[] = []; + + fieldContents.forEach(content => { + fields.forEach(title => { + const field = template.getFieldByTitle(title); + field.setContent(content[title]); + }); + + renderedDocs.push(template.mainField.renderedDoc()); + }); + + return renderedDocs; + } + @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => { if (info) { const doc = info.doc; @@ -758,7 +786,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <div className="top-panel"/> {rendered} <div className="right-buttons-panel"> - <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice()); this.setExpandedView(undefined)})}> + <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice()); this.setExpandedView(undefined)})}> <FontAwesomeIcon icon="minimize" /> </button> <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}> @@ -797,16 +825,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { </div> ) : ( this._suggestedTemplates - ?.map(doc => ({ icon: ImageCast(doc.icon), doc })) + ?.map(template => ({ icon: ImageCast(template.mainField.renderedDoc().icon), doc: template.mainField.renderedDoc(), template: template })) .filter(info => info.icon && info.doc) .map(info => ( <div className="docCreatorMenu-preview-window" style={{ - border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', - boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '', + border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', + boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '', }} - onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> + onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.template)))}> <button className="option-button left" onPointerDown={e => @@ -845,7 +873,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}> <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" /> </div> - {this._templateDocs + {/* {this._templateDocs .map(doc => ({ icon: ImageCast(doc.icon), doc })) .filter(info => info.icon && info.doc) .map(info => { @@ -855,8 +883,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <div className="docCreatorMenu-preview-window" style={{ - border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', - boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '', + border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '', + boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '', }} onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}> <button @@ -880,7 +908,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} /> </div> ); - })} + })} */} </div> </div> </div> @@ -1072,7 +1100,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => { - const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate; + const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplateDoc; if (!doc) return; return ( @@ -1192,9 +1220,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); - if (!this._selectedTemplate) return; + if (!this._selectedTemplateDoc) return; const layout: DataVizTemplateLayout = { - template: this._selectedTemplate, + template: this._selectedTemplateDoc, layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 }, columns: this.columnsCount, rows: this.rowsCount, @@ -1219,8 +1247,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { emptyFunction, undoable(clickEv => { clickEv.stopPropagation(); - if (!this._selectedTemplate) return; - const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount }; + if (!this._selectedTemplateDoc) return; + const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplateDoc, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount }; this._dataViz?.createDocsFromTemplate(templateInfo); }, 'make docs') ) diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx index cd83472d8..c0f2f183a 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx @@ -30,7 +30,7 @@ export class DynamicField implements Field { this.subfields = this.setupSubfields(); } - setContent = (content: string, type: FieldContentType) => { return }; + setContent = (content: string, type?: FieldContentType) => { return }; getContent = () => { return '' }; setTitle = (title: string) => { this.title = title }; @@ -58,6 +58,10 @@ export class DynamicField implements Field { return []; } + updateRenderedDoc = () => { + return new Doc(); + } + setupSubfields = (): Field[] => { const fields: Field[] = []; this.settings.subfields?.forEach((fieldSettings, index) => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx index aeeaa58dd..8a571dae3 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx @@ -4,7 +4,7 @@ import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend"; export interface Field { getContent: () => string; - setContent: (content: string, type: FieldContentType) => void; + setContent: (content: string, type?: FieldContentType) => void; getDimensions: FieldDimensions; getSubfields: Field[]; getAllSubfields: Field[]; @@ -16,6 +16,7 @@ export interface Field { setupSubfields: () => Field[]; renderedDoc: () => Doc; matches: (cols: Col[]) => number[]; + updateRenderedDoc: () => Doc; } export type FieldSettings = { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx index 91adebe81..70596632a 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx @@ -15,21 +15,21 @@ export class FieldUtils { return { width, height, coord }; }; - public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings) => { + public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings, oldDoc?: Doc) => { const opts = settings.opts; - doc.isDefaultTemplateDoc = true; - doc._layout_hideScroll = true; - doc.x = parentDimensions.coord.x; - doc.y = parentDimensions.coord.y; - doc._height = parentDimensions.height; - doc._width = parentDimensions.width; - doc.backgroundColor = opts.backgroundColor ?? ''; - doc._layout_borderRounding = `${opts.cornerRounding ?? 0}px`; - doc.borderColor = opts.borderColor; - doc.borderWidth = opts.borderWidth; - doc.opacity = opts.opacity; - doc._rotation = opts.rotation; - doc.hCentering = opts.contentXCentering; + doc.isDefaultTemplateDoc = oldDoc ? oldDoc.isDefaultTemplateDoc : true; + doc._layout_hideScroll = oldDoc ? oldDoc._layout_hideScroll : true; + doc.x = oldDoc ? oldDoc.x : parentDimensions.coord.x; + doc.y = oldDoc ? oldDoc.y : parentDimensions.coord.y; + doc._height = oldDoc ? oldDoc.height : parentDimensions.height; + doc._width = oldDoc ? oldDoc.width : parentDimensions.width; + doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? ''; + doc._layout_borderRounding = oldDoc ? oldDoc.layout_borderRounding : `${opts.cornerRounding ?? 0}px`; + doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor; + doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth; + doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity; + doc._rotation = oldDoc ? oldDoc._rotation : opts.rotation; + doc.hCentering = oldDoc ? oldDoc.hCentering : opts.contentXCentering; }; public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx index 795581008..3e0c8abcf 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx @@ -12,6 +12,7 @@ export class StaticField { private content: string; private contentType: FieldContentType | undefined; private subfields: Field[] = []; + private renderedDocument: Doc; private id: number; private title: string = ''; @@ -29,6 +30,7 @@ export class StaticField { this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions); this.content = ''; this.subfields = this.setupSubfields(); + this.renderedDocument = this.updateRenderedDoc(); }; get getSubfields(): Field[] { return this.subfields ?? []; }; @@ -50,14 +52,22 @@ export class StaticField { return this.settings.description ?? ''; } - setContent = (newContent: string, type: FieldContentType) => { + renderedDoc = () => { + return this.renderedDocument; + } + + setContent = (newContent: string, type?: FieldContentType) => { this.content = newContent; - this.contentType = type; - console.log('id: ', this.content) + if (type) this.contentType = type; + this.updateRenderedDoc(this.renderedDocument); }; getContent() { return this.content }; - setTitle = (title: string) => { this.title = title }; + setTitle = (title: string) => { + this.title = title; + this.renderedDocument.title = title; + this.updateRenderedDoc(this.renderedDocument); + }; getTitle = () => { return this.title }; setupSubfields = (): Field[] => { @@ -99,33 +109,40 @@ export class StaticField { return matches; }; - renderedDoc = (): Doc => { + updateRenderedDoc = (oldDoc?: Doc): Doc => { const opts = this.settings.opts; if (!this.contentType) { this.contentType = FieldContentType.STRING }; + let doc: Doc; + switch (this.contentType) { case FieldContentType.STRING: const text = String(this.content); - const textDoc = Docs.Create.TextDocument(text, { + console.log('made text') + doc = Docs.Create.TextDocument(text, { title: this.title, - text_fontColor: opts.color, - contentBold: opts.fontBold, - textTransform: opts.fontTransform, - color: opts.color, + text_fontColor: oldDoc ? String(oldDoc.color) : opts.color, + contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.fontBold, + textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.fontTransform, + color: oldDoc ? String(oldDoc.color) : opts.color, _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}` }); - FieldUtils.applyBasicOpts(textDoc, this.dimensions, this.settings); - return textDoc; + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); + break; case FieldContentType.IMAGE: + console.log('made image') const url = String(this.content); - const imgDoc = Docs.Create.ImageDocument(url, { + doc = Docs.Create.ImageDocument(url, { title: this.title, _layout_fitWidth: false, }); - FieldUtils.applyBasicOpts(imgDoc, this.dimensions, this.settings); - return imgDoc; + FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc); + break; } - }; + this.renderedDocument = doc; + + return doc; + }; }
\ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx index 09eb86d20..6b981d77f 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx @@ -23,10 +23,20 @@ export class Template { return this.allFields.filter(field => field.getID === id)[0]; } + getFieldByTitle = (title: string) => { + return this.allFields.filter(field => field.getTitle() === title)[0]; + } + setupMainField = (templateInfo: FieldSettings) => { return new DynamicField(templateInfo, 1); } + renderUpdates = () => { + this.allFields.forEach(field => { + field.updateRenderedDoc(); + }); + }; + isValidTemplate = (cols: Col[]) => { const matches: number[][] = this.getMatches(cols); const maxMatches: number = this.maxMatches(matches); |