diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
-rw-r--r-- | src/client/views/PropertiesView.tsx | 107 |
1 files changed, 2 insertions, 105 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 6da46c229..15974b9a7 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -43,7 +43,6 @@ import { KeyValueBox } from './nodes/KeyValueBox'; import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; import { ExtractColors } from './ExtractColors'; import TextareaAutosize from 'react-textarea-autosize'; -import { GeneratedResponse, StyleInput, generatePalette } from '../apis/gpt/customization'; import { FaFillDrip } from 'react-icons/fa'; import { LinkBox } from './nodes/LinkBox'; @@ -109,55 +108,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @observable openStyling: boolean = true; // GPT styling - public styleInput: StyleInput | undefined; - @observable loadingStyles: boolean = false; - @observable generatedStyles: GeneratedResponse[] = []; - @observable inputDocs: Doc[] = []; - @observable selectedStyle: number = -1; - @observable useImageData = false; - - @observable chatInput: string = ''; - - @action - setChatInput = (input: string) => { - this.chatInput = input; - }; - - @action - setLoading = (loading: boolean) => { - this.loadingStyles = loading; - }; - - @action - gptStyling = async () => { - // this.generatedStyles = []; - this.selectedStyle = -1; - this.setLoading(true); - console.log('Style input: ', this.styleInput); - - if (!this.styleInput) return; - - try { - let res: any; - if (this.generatedStyles.length === 0) { - res = await generatePalette(this.styleInput, this.useImageData, this.chatInput); - } else { - res = await generatePalette(this.styleInput, this.useImageData, this.chatInput, this.generatedStyles); - } - if (typeof res === 'string') { - console.log('Generated palettes: ', res); - const resObj = JSON.parse(res) as GeneratedResponse[]; - this.setGeneratedStyles(resObj); - } - } catch (err) { - console.error(err); - } - this.setLoading(false); - }; - - @action - setGeneratedStyles = (responses: GeneratedResponse[]) => (this.generatedStyles = responses); - setInputDocs = (docs: Doc[]) => (this.inputDocs = docs); + // removed for now //Pres Trails booleans: @observable openPresTransitions: boolean = true; @@ -1197,60 +1148,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } }; - @action - styleCollection = (i: number) => { - this.selectedStyle = i; - const resObj = this.generatedStyles[i]; - if (this.selectedDoc && this.selectedDoc.type === 'collection') { - this.selectedDoc.backgroundColor = resObj.collectionBackgroundColor; - resObj.documentsWithColors.forEach((elem, i) => (this.inputDocs[i].backgroundColor = elem.color)); - } - }; - - // GPT styling - @computed get stylingSubMenu() { - return ( - <PropertiesSection title="Styling" isOpen={this.openStyling} setIsOpen={bool => (this.openStyling = bool)} onDoubleClick={() => this.CloseAll()}> - <div className="propertiesView-content" style={{ position: 'relative', height: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}> - {this.generatedStyles.length > 0 && - this.generatedStyles.map((style, i) => ( - <div - key={i} - className="propertiesView-palette" - style={{ display: 'flex', gap: '4px', backgroundColor: this.selectedStyle === i ? StrCast(Doc.UserDoc().userVariantColor) : '#00000000' }} - onClick={() => this.styleCollection(i)}> - <div style={{ width: '24px', height: '24px', backgroundColor: style.collectionBackgroundColor, borderRadius: '2px' }}></div> - {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map((c, i) => ( - <div key={i} style={{ width: '24px', height: '24px', backgroundColor: c.hex, borderRadius: '2px' }}></div> - ))} - </div> - ))} - {this.loadingStyles && 'Generating styles...'} - <TextareaAutosize - minRows={3} - placeholder="Customize..." - className="styling-chatbox" - autoFocus={true} - value={this.chatInput} - onChange={e => { - this.setChatInput(e.target.value); - }} - onKeyDown={e => { - e.stopPropagation(); - }} - /> - <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}> - <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}> - <label style={{ margin: '0px' }}>Use Images </label> - <input style={{ margin: '0px' }} type="checkbox" checked={this.useImageData} onChange={action(e => (this.useImageData = e.target.checked))} /> - </div> - <Button text={'Regenerate'} type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={this.gptStyling} /> - </div> - </div> - </PropertiesSection> - ); - } - @computed get filtersSubMenu() { return ( <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={bool => (this.openFilters = bool)} onDoubleClick={() => this.CloseAll()}> @@ -1756,7 +1653,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-name">{this.editableTitle}</div> <div className="propertiesView-type"> {this.currentType} </div> - {this.stylingSubMenu} + {/* {this.stylingSubMenu} */} {this.fieldsSubMenu} {this.optionsSubMenu} {this.linksSubMenu} |