From b013de245c77e40487e9842650239eff20c0e361 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Thu, 3 Oct 2024 02:47:21 -0400 Subject: started work on template editing within docCreatorMenu; fixed deleting fields in the dashboard --- .../views/nodes/DataVizBox/DocCreatorMenu.scss | 10 +- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 138 +++++++++++++-------- 2 files changed, 93 insertions(+), 55 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 9d82ada37..4ea904b8e 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -289,19 +289,27 @@ } .docCreatorMenu-expanded-template-preview { + display: flex; + flex-direction: column; + justify-content: flex-start; position: relative; width: 100%; height: 100%; + .top-panel{ + width: 100%; + height: 10px; + } + .right-buttons-panel { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; - width: 40px; position: absolute; right: 0px; top: 0px; + width: 40px; padding: 5px; gap: 2px; } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 43e9248a7..44f743a97 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -5,11 +5,11 @@ import { observer } from 'mobx-react'; import { IDisposer } from 'mobx-utils'; import * as React from 'react'; import ReactLoading from 'react-loading'; -import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils'; +import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; -import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc'; +import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; -import { DocCast, ImageCast, StrCast } from '../../../../fields/Types'; +import { Cast, DocCast, ImageCast, StrCast } from '../../../../fields/Types'; import { ImageField } from '../../../../fields/URLField'; import { Networking } from '../../../Network'; import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT'; @@ -26,6 +26,8 @@ import { FieldViewProps } from '../FieldView'; import { OpenWhere } from '../OpenWhere'; import { DataVizBox } from './DataVizBox'; import './DocCreatorMenu.scss'; +import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider'; +import { Transform } from '../../../util/Transform'; export enum LayoutType { Stacked = 'stacked', @@ -218,11 +220,11 @@ export class DocCreatorMenu extends ObservableReactComponent { document.addEventListener('pointerup', this.onPointerUp); this._disposers.templates = reaction( () => this._templateDocs.slice(), - docs => docs.map(this.getIcon) + docs => this.updateIcons(docs) ); this._disposers.gpt = reaction( () => this._suggestedTemplates.slice(), - docs => docs.map(this.getIcon) + docs => this.updateIcons(docs) ); //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')}) this._disposers.lightbox = reaction( @@ -241,6 +243,7 @@ export class DocCreatorMenu extends ObservableReactComponent { } updateIcons = (docs: Doc[]) => { + console.log('called') docs.map(this.getIcon); }; @@ -442,43 +445,20 @@ export class DocCreatorMenu extends ObservableReactComponent { }; testTemplate = async () => { - // const temp = TemplateLayouts.FourField001; - // const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'}); - // const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40}); - // const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'}); - // const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10}); - - // const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 }); - - // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - // mainCollection.addDocument(doc); - - // const temp = TemplateLayouts.FourField001; - - // const img: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: 'description whpoo', size: TemplateFieldSize.LARGE, defaultContent: ''}; - // const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Image', desc: 'description hey', size: TemplateFieldSize.TINY}; - // const capt2: Col = {type: TemplateFieldType.TEXT, title: 'Locality', desc: '', size: TemplateFieldSize.TINY, defaultContent: ''}; - // const desc: Col = {type: TemplateFieldType.TEXT, title: 'Description', desc: '', size: TemplateFieldSize.LARGE, defaultContent: 'This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well.'}; - - // const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc} - - // this.createEmptyTemplate(temp, assignments); - // console.log(this.findValidTemplates(this.fieldsInfos, TemplateLayouts.allTemplates)); + this.updateIcons(this._suggestedTemplates.slice()); + this.forceUpdate(); - // console.log(this._dataViz?.colsInfo.get("IMG")?.size, this._dataViz?.colsInfo.get("IMG")?.type) - // console.log(this.fieldsInfos) + // try { + // const res = await gptImageCall('Image of panda eating a cookie'); - try { - const res = await gptImageCall('Image of panda eating a cookie'); + // if (res) { + // const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res }); - if (res) { - const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res }); - - console.log(result); - } - } catch (e) { - console.log(e); - } + // console.log(result); + // } + // } catch (e) { + // console.log(e); + // } }; @action addField = () => { @@ -935,9 +915,69 @@ export class DocCreatorMenu extends ObservableReactComponent { }; @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => { - this._expandedPreview = info; + if (info) { + const doc = info.doc; + const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); + const newInfo = {icon: new ImageField(''), doc: wrapper} + this._expandedPreview = newInfo; + } else { + this._expandedPreview = info; + } }; + get editingWindow(){ + const doc = this._expandedPreview?.doc ?? new Doc(); + const rendered = +
+ Cast(doc.childLayoutTemplate, Doc, null)} + isContentActive={emptyFunction} + isAnyChildContentActive={() => true} + select={emptyFunction} + isSelected={returnFalse} + fieldKey={Doc.LayoutFieldKey(doc)} + addDocument={returnFalse} + moveDocument={returnFalse} + removeDocument={returnFalse} + PanelWidth={() => this._menuDimensions.width - 10} + PanelHeight={() => this._menuDimensions.height - 60} + ScreenToLocalTransform={Transform.Identity} + renderDepth={5} + whenChildContentsActiveChanged={emptyFunction} + focus={emptyFunction} + styleProvider={DefaultStyleProvider} + addDocTab={this._props.addDocTab} + // eslint-disable-next-line no-use-before-define + pinToPres={() => undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + fitContentsToBox={returnTrue} + xPadding={0} + yPadding={0} + /> +
+ + + return ( +
+
+ {rendered} +
+ + +
+
+ + ); + } + get templatesPreviewContents() { const renderedTemplates: Doc[] = []; @@ -948,17 +988,7 @@ export class DocCreatorMenu extends ObservableReactComponent { return (
{this._expandedPreview ? ( -
- -
- - -
-
+ this.editingWindow ) : (
@@ -1355,7 +1385,7 @@ export class DocCreatorMenu extends ObservableReactComponent {
{`${field.title} Field`} -
@@ -1413,12 +1443,12 @@ export class DocCreatorMenu extends ObservableReactComponent {
-
Description
+
Prompt