aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss10
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx138
2 files changed, 93 insertions, 55 deletions
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<FieldViewProps> {
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<FieldViewProps> {
}
updateIcons = (docs: Doc[]) => {
+ console.log('called')
docs.map(this.getIcon);
};
@@ -442,43 +445,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
};
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<FieldViewProps> {
};
@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 =
+ <div className="docCreatorMenu-expanded-template-preview">
+ <CollectionFreeFormView
+ Document={this._expandedPreview!.doc}
+ docViewPath={returnEmptyDocViewList}
+ childLayoutTemplate={() => 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}
+ />
+ </div>
+
+
+ return (
+ <div className="docCreatorMenu-expanded-template-preview">
+ <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)})}>
+ <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))}>
+ <FontAwesomeIcon icon="plus" color="white" />
+ </button>
+ </div>
+ </div>
+
+ );
+ }
+
get templatesPreviewContents() {
const renderedTemplates: Doc[] = [];
@@ -948,17 +988,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
return (
<div className={`docCreatorMenu-templates-view`}>
{this._expandedPreview ? (
- <div className="docCreatorMenu-expanded-template-preview">
- <img className="docCreatorMenu-preview-image expanded" src={this._expandedPreview.icon!.url.href.replace('.png', '_o.png')} />
- <div className="right-buttons-panel">
- <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => 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))}>
- <FontAwesomeIcon icon="plus" color="white" />
- </button>
- </div>
- </div>
+ this.editingWindow
) : (
<div>
<div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
@@ -1355,7 +1385,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
<div className="field-panel">
<div className="top-bar">
<span className="field-title">{`${field.title} Field`}</span>
- <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{ position: 'absolute', right: '0px' }}>
+ <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
<FontAwesomeIcon icon="minus" />
</button>
</div>
@@ -1413,12 +1443,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
</div>
</div>
<div className="desc-box">
- <div className="top-bar"> Description </div>
+ <div className="top-bar"> Prompt </div>
<textarea
className="content"
onChange={e => this.setColDesc(field, e.target.value)}
defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
- placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description to help with template generation.'}
+ placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
/>
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 20:10:15 +0000