From 8da4acee81701b2b779713b1ff4cc4d60e80f437 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 8 Jan 2025 10:29:50 -0500 Subject: code cleanup --- src/client/views/smartdraw/StickerPalette.tsx | 434 +++++++++++++------------- 1 file changed, 211 insertions(+), 223 deletions(-) (limited to 'src/client/views/smartdraw/StickerPalette.tsx') diff --git a/src/client/views/smartdraw/StickerPalette.tsx b/src/client/views/smartdraw/StickerPalette.tsx index d23763eb9..e3345f547 100644 --- a/src/client/views/smartdraw/StickerPalette.tsx +++ b/src/client/views/smartdraw/StickerPalette.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { AiOutlineSend } from 'react-icons/ai'; import ReactLoading from 'react-loading'; import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; -import { emptyFunction } from '../../../Utils'; +import { emptyFunction, numberRange } from '../../../Utils'; import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { ImageCast, NumCast } from '../../../fields/Types'; @@ -29,6 +29,11 @@ interface StickerPaletteProps { Document: Doc; } +enum StickerPaletteMode { + create, + view, +} + /** * The StickerPalette can be toggled in the lightbox view of a document. The goal of the palette * is to offer an easy way for users to create stickers and drag and drop them onto a document. @@ -41,7 +46,34 @@ interface StickerPaletteProps { */ @observer export class StickerPalette extends ObservableReactComponent { - @observable private _paletteMode: 'create' | 'view' = 'view'; + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(StickerPalette, fieldKey); + } + /** + * Adds a doc to the sticker palette. Gets a snapshot of the document to use as a preview in the palette. When this + * preview is dragged onto a parent document, a copy of that document is added as a sticker. + */ + public static addToPalette = async (doc: Doc) => { + if (!doc.savedAsSticker) { + const docView = DocumentView.getDocumentView(doc); + await docView?.ComponentView?.updateIcon?.(true); + const { clone } = await Doc.MakeClone(doc); + clone.title = doc.title; + const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href; + Doc.AddDocToList(Doc.MyStickers, 'data', makeUserTemplateButtonOrImage(clone, image)); + doc.savedAsSticker = true; + } + }; + + public static getIcon(group: Doc) { + const docView = DocumentView.getDocumentView(group); + docView?.ComponentView?.updateIcon?.(true); + return !docView ? undefined : new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); + } + + private _gptRes: string[] = []; + + @observable private _paletteMode = StickerPaletteMode.view; @observable private _userInput: string = ''; @observable private _isLoading: boolean = false; @observable private _canInteract: boolean = true; @@ -49,7 +81,6 @@ export class StickerPalette extends ObservableReactComponent { - return (this._docView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docView)) || (this._docCarouselView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docCarouselView)); - }; + Contains = (view: DocumentView) => + (this._docView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docView)) || // + (this._docCarouselView && (view.containerViewPath?.() ?? []).concat(view).includes(this._docCarouselView)); return170 = () => 170; - @action - handleKeyPress = async (event: React.KeyboardEvent) => { + handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { - await this.generateDrawings(); + this.generateDrawings(); } }; - @action - setPaletteMode = (mode: 'create' | 'view') => { + setPaletteMode = action((mode: StickerPaletteMode) => { this._paletteMode = mode; - }; + }); - @action - setUserInput = (input: string) => { + setUserInput = action((input: string) => { if (!this._isLoading) this._userInput = input; - }; + }); - @action - setDetail = (detail: number) => { + setDetail = action((detail: number) => { if (this._canInteract) this._opts.complexity = detail; - }; + }); - @action - setColor = (autoColor: boolean) => { + setColor = action((autoColor: boolean) => { if (this._canInteract) this._opts.autoColor = autoColor; - }; + }); - @action - setSize = (size: number) => { + setSize = action((size: number) => { if (this._canInteract) this._opts.size = size; - }; + }); - @action - resetPalette = (changePaletteMode: boolean) => { - if (changePaletteMode) this.setPaletteMode('view'); + resetPalette = action((changePaletteMode: boolean) => { + if (changePaletteMode) this.setPaletteMode(StickerPaletteMode.view); this.setUserInput(''); this.setDetail(5); this.setColor(true); @@ -114,55 +134,31 @@ export class StickerPalette extends ObservableReactComponent { - if (!doc.savedAsSticker) { - const docView = DocumentView.getDocumentView(doc); - await docView?.ComponentView?.updateIcon?.(true); - const { clone } = await Doc.MakeClone(doc); - clone.title = doc.title; - const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href; - Doc.AddDocToList(Doc.MyStickers, 'data', makeUserTemplateButtonOrImage(clone, image)); - doc.savedAsSticker = true; - } - }; - - public static getIcon(group: Doc) { - const docView = DocumentView.getDocumentView(group); - if (docView) { - docView.ComponentView?.updateIcon?.(true); - return new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); - } - return undefined; - } + }); /** * Calls the draw with AI functions in SmartDrawHandler to allow users to generate drawings straight from * the sticker palette. */ @undoBatch - generateDrawings = action(async () => { + generateDrawings = action(() => { this._isLoading = true; const prevDrawings = DocListCast(this._props.Document[DocData].data); this._props.Document[DocData].data = undefined; SmartDrawHandler.Instance.AddDrawing = this.addDrawing; this._canInteract = false; - await Promise.all( - Array.from({ length: 3 }).map((_, i) => { + Promise.all( + numberRange(3).map(i => { return this._showRegenerate ? SmartDrawHandler.Instance.regenerate(prevDrawings, this._opts, this._gptRes[i], this._userInput) : SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput, this._opts.complexity, this._opts.size, this._opts.autoColor); }) - ); - this._opts.text !== '' ? (this._opts.text = `${this._opts.text} ~~~ ${this._userInput}`) : (this._opts.text = this._userInput); - this._userInput = ''; - this._isLoading = false; - this._showRegenerate = true; + ).then(() => { + this._opts.text !== '' ? (this._opts.text = `${this._opts.text} ~~~ ${this._userInput}`) : (this._opts.text = this._userInput); + this._userInput = ''; + this._isLoading = false; + this._showRegenerate = true; + }); }); @action @@ -177,7 +173,7 @@ export class StickerPalette extends ObservableReactComponent { + saveDrawing = () => { const cIndex = NumCast(this._props.Document.carousel_index); const focusedDrawing = DocListCast(this._props.Document.data)[cIndex]; const docData = focusedDrawing[DocData]; @@ -191,168 +187,160 @@ export class StickerPalette extends ObservableReactComponent this.resetPalette(true)); + }; + + renderCreateInput = () => ( +
+ this.setUserInput(e.target.value)} + placeholder={this._showRegenerate ? '(Optional) Enter edits' : 'Enter item to draw'} + onKeyDown={this.handleKeyPress} + /> +
+ ); + renderCreateOptions = () => ( +
+
+ Color + this.setColor(!this._opts.autoColor)} + /> +
+
+ Detail + typeof val === 'number' && this.setDetail(val)} + valueLabelDisplay="auto" + /> +
+
+ Size + typeof val === 'number' && this.setSize(val)} + valueLabelDisplay="auto" + /> +
+
+ ); + renderDoc = (doc: Doc, refFunc: (r: DocumentView) => void) => { + return ( + + ); }; + renderPaletteCreate = () => ( + <> + {this.renderCreateInput()} + {this.renderCreateOptions()} + {this.renderDoc(this._props.Document, (r: DocumentView) => { + this._docCarouselView = r; + })} +
+
+ + + ); + renderPaletteView = () => ( + <> + {this.renderDoc(Doc.MyStickers, (r: DocumentView) => { + this._docView = r; + })} +