diff options
Diffstat (limited to 'src/client/views/smartdraw/AnnotationPalette.tsx')
| -rw-r--r-- | src/client/views/smartdraw/AnnotationPalette.tsx | 80 |
1 files changed, 44 insertions, 36 deletions
diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx index 83f173fcb..ec4279e3e 100644 --- a/src/client/views/smartdraw/AnnotationPalette.tsx +++ b/src/client/views/smartdraw/AnnotationPalette.tsx @@ -11,7 +11,7 @@ import { returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOn import { ActiveInkWidth, Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { InkData, InkField } from '../../../fields/InkField'; -import { BoolCast, DocCast, ImageCast, NumCast } from '../../../fields/Types'; +import { BoolCast, DocCast, ImageCast } from '../../../fields/Types'; import { emptyFunction, unimplementedFunction } from '../../../Utils'; import { Docs } from '../../documents/Documents'; import { makeUserTemplateButton, makeUserTemplateImage } from '../../util/DropConverter'; @@ -19,7 +19,7 @@ import { SettingsManager } from '../../util/SettingsManager'; import { Transform } from '../../util/Transform'; import { undoable, undoBatch } from '../../util/UndoManager'; import { CollectionFreeFormView, MarqueeOptionsMenu, MarqueeView } from '../collections/collectionFreeForm'; -import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveIsInkMask, DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; +import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveIsInkMask, DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; import { FieldView } from '../nodes/FieldView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider } from '../StyleProvider'; @@ -30,9 +30,12 @@ import { ImageField } from '../../../fields/URLField'; import { CollectionCarousel3DView } from '../collections/CollectionCarousel3DView'; import { Copy } from '../../../fields/FieldSymbols'; +interface AnnotationPaletteProps { + Document: Doc; +} + @observer -export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc }> { - static Instance: AnnotationPalette; +export class AnnotationPalette extends ObservableReactComponent<AnnotationPaletteProps> { @observable private _paletteMode: 'create' | 'view' = 'view'; @observable private _userInput: string = ''; @observable private _isLoading: boolean = false; @@ -46,7 +49,6 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc constructor(props: any) { super(props); makeObservable(this); - AnnotationPalette.Instance = this; } public static LayoutString(fieldKey: string) { @@ -102,30 +104,35 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc this._canInteract = true; this._opts = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 }; this._gptRes = []; + this._props.Document[DocData].data = undefined; }; public static addToPalette = async (doc: Doc) => { - // if (!doc.savedAsAnno) { - // const clone = await Doc.MakeClone(doc); - // clone.clone.title = doc.title; - // const image = (await this.getIcon(doc))?.[Copy](); - // if (image) { - // const imageTemplate = makeUserTemplateImage(clone.clone, image); - // Doc.AddDocToList(Doc.MyAnnos, 'data', imageTemplate); - // doc.savedAsAnno = true; - // } - // this.resetPalette(true); - // } + if (!doc.savedAsAnno) { + const clone = await Doc.MakeClone(doc); + clone.clone.title = doc.title; + const image = (await AnnotationPalette.getIcon(doc))?.[Copy](); + if (image) { + const imageTemplate = makeUserTemplateImage(clone.clone, image); + Doc.AddDocToList(Doc.MyAnnos, 'data', imageTemplate); + doc.savedAsAnno = true; + } + } }; - // @action - // displayPalette = (display: boolean) => { - // this._display = display; - // }; + public static getIcon(group: Doc) { + const docView = DocumentView.getDocumentView(group); + if (docView) { + docView.ComponentView?.updateIcon?.(true); + return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); + } + return undefined; + } @undoBatch generateDrawing = action(async () => { this._isLoading = true; + this._props.Document[DocData].data = undefined; for (var i = 0; i < 3; i++) { try { SmartDrawHandler.Instance._addFunc = this.createDrawing; @@ -154,7 +161,7 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc strokeList.forEach((stroke: [InkData, string, string]) => { const bounds = InkField.getBounds(stroke[0]); - const inkWidth = ActiveInkWidth(); + const inkWidth = Math.min(5, ActiveInkWidth()); const inkDoc = Docs.Create.InkDocument( stroke[0], { title: 'stroke', @@ -164,7 +171,7 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc _height: bounds.height + inkWidth, stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore inkWidth, - stroke[1], + opts.autoColor ? stroke[1] : ActiveInkColor(), ActiveInkBezierApprox(), stroke[2] === 'none' ? ActiveFillColor() : stroke[2], ActiveArrowStart(), @@ -177,28 +184,30 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc const collection = MarqueeView.getCollection(drawing, undefined, true, { left: 1, top: 1, width: 1, height: 1 }); if (collection) { + collection[DocData].freeform_fitContentsToBox = true; Doc.AddDocToList(this._props.Document, 'data', collection); } }; saveDrawing = async () => { - // const cIndex: number = this._drawingCarousel.carousel_index as number; - // const focusedDrawing = this._drawings[cIndex]; - // const docData = focusedDrawing[DocData]; - // docData.title = this._opts.text.match(/^(.*?)~~~.*$/)?.[1] || this._opts.text; - // docData.drawingInput = this._opts.text; - // docData.drawingComplexity = this._opts.complexity; - // docData.drawingColored = this._opts.autoColor; - // docData.drawingSize = this._opts.size; - // docData.drawingData = this._gptRes[cIndex]; - // docData.width = this._opts.size; - // await AnnotationPalette.addToPalette(focusedDrawing); + const cIndex: number = this._props.Document.carousel_index as number; + const focusedDrawing = DocListCast(this._props.Document.data)[cIndex]; + const docData = focusedDrawing[DocData]; + docData.title = this._opts.text.match(/^(.*?)~~~.*$/)?.[1] || this._opts.text; + docData.drawingInput = this._opts.text; + docData.drawingComplexity = this._opts.complexity; + docData.drawingColored = this._opts.autoColor; + docData.drawingSize = this._opts.size; + docData.drawingData = this._gptRes[cIndex]; + docData.width = this._opts.size; + await AnnotationPalette.addToPalette(focusedDrawing); + this.resetPalette(true); }; async getIcon(group: Doc) { const docView = DocumentView.getDocumentView(group); if (docView) { - docView.ComponentView?.updateIcon?.(); + docView.ComponentView?.updateIcon?.(true); return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); } return undefined; @@ -206,7 +215,7 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc render() { return ( - <div className="annotation-palette" style={{ zIndex: 1000 }}> + <div className="annotation-palette" style={{ zIndex: 1000 }} onClick={e => e.stopPropagation()}> {this._paletteMode === 'view' && ( <> <DocumentView @@ -241,7 +250,6 @@ export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc type="text" style={{ color: 'black', width: '170px' }} value={this._userInput} - onClick={e => e.stopPropagation()} onChange={e => { this.setUserInput(e.target.value); }} |