diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 208ed56c9..5cfe0bd5f 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -96,6 +96,58 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @observable openAppearance: boolean = true; @observable openTransform: boolean = true; @observable openFilters: boolean = false; + @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); //Pres Trails booleans: @observable openPresTransitions: boolean = true; @@ -1167,6 +1219,60 @@ 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...'} + <ReactTextareaAutosize + 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()}> @@ -1252,10 +1358,23 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps 'change link relationship' ); + handleColorChange = undoable( + action((value: string) => { + if (LinkManager.currentLink && this.selectedDoc) { + this.setColorValue(value); + } + }), + 'change link color' + ); + @undoBatch setDescripValue = action((value: string) => { if (LinkManager.currentLink) { Doc.GetProto(LinkManager.currentLink).link_description = value; + + if (LinkManager.currentLink.show_description === undefined) { + LinkManager.currentLink.show_description = !LinkManager.currentLink.show_description; + } } }); @@ -1301,6 +1420,13 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } }); + @undoBatch + setColorValue = action((value: string) => { + if (LinkManager.currentLink) { + Doc.GetProto(LinkManager.currentLink).link_color = value; + } + }); + changeFollowBehavior = undoable((loc: Opt<string>) => this.sourceAnchor && (this.sourceAnchor.followLinkLocation = loc), 'change follow behavior'); @undoBatch @@ -1469,6 +1595,28 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" /> </button> </div> + <div className="propertiesView-input inline" style={{ marginLeft: 10 }}> + <p>Show description</p> + <button + style={{ background: !LinkManager.currentLink?.show_description ? '' : '#4476f7', borderRadius: 3 }} + onPointerDown={e => this.toggleLinkProp(e, 'show_description')} + onClick={e => e.stopPropagation()} + className="propertiesButton"> + <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" /> + </button> + </div> + <div className="propertiesView-input inline" style={{ marginLeft: 10 }}> + <p>Link color</p> + <ColorPicker + tooltip={'User Color'} // + color={SettingsManager.userColor} + type={Type.SEC} + icon={<FaFillDrip />} + selectedColor={LinkManager.currentLink?.link_color ? StrCast(LinkManager.currentLink?.link_color) : '#449ef7'} + setSelectedColor={this.handleColorChange} + setFinalColor={this.handleColorChange} + /> + </div> </div> {!hasSelectedAnchor ? null : ( <div className="propertiesView-section"> @@ -1703,6 +1851,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-name">{this.editableTitle}</div> <div className="propertiesView-type"> {this.currentType} </div> + {this.stylingSubMenu} {this.optionsSubMenu} {this.linksSubMenu} {!LinkManager.currentLink || !this.openLinks ? null : this.linkProperties} |