diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/LightboxView.tsx | 20 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarouselView.tsx | 11 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 10 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 13 | ||||
| -rw-r--r-- | src/client/views/smartdraw/AnnotationPalette.tsx | 203 | ||||
| -rw-r--r-- | src/client/views/smartdraw/SmartDrawHandler.tsx | 9 |
10 files changed, 86 insertions, 192 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index eb0b00472..6950bec14 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -249,7 +249,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( saveAnno = action((targetDoc: Doc) => { // targetDoc.savedAsAnno = true; this._annoSaved = true; - AnnotationPalette.Instance.addToPalette(targetDoc); + // AnnotationPalette.addToPalette(targetDoc); }); @computed diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index a229b15db..ae4f5b98b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -229,6 +229,11 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora if (iconViewDoc.activeFrame) { iconViewDoc.opacity = 0; // bcz: hacky ... allows inkMasks and other documents to be "turned off" without removing them from the animated collection which allows them to function properly in a presenation. } else { + // to mark annotations as no longer saved if they're deleted from the palette + const dragFactory: Doc = DocCast(iconView.Document.dragFactory); + if (dragFactory && DocCast(dragFactory.cloneOf).savedAsAnno) { + DocCast(dragFactory.cloneOf).savedAsAnno = undefined; + } iconView._props.removeDocument?.(iconView.Document); } }); @@ -872,4 +877,4 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora </div> ); } -}
\ No newline at end of file +} diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 4fcb7ec9c..b0d469674 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -12,7 +12,7 @@ import { emptyFunction } from '../../Utils'; import { CreateLinkToActiveAudio, Doc, DocListCast, FieldResult, Opt } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { InkTool } from '../../fields/InkField'; -import { Cast, NumCast, toList } from '../../fields/Types'; +import { Cast, DocCast, NumCast, toList } from '../../fields/Types'; import { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; import { GestureOverlay } from './GestureOverlay'; @@ -43,13 +43,11 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { * @returns true if a DocumentView is descendant of the lightbox view */ public static Contains(view?: DocumentView) { - return true; - } - // return ( - // (view && LightboxView.Instance?._docView && (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView)) || - // view?.Document === AnnotationPalette.Instance.FreeformCanvas || - // view?.Document.embedContainer === AnnotationPalette.Instance.DrawingCarousel - // ); } // prettier-ignore + return ( + (view && LightboxView.Instance?._docView && (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView)) || + (view && LightboxView.Instance?._annoPaletteView?.Contains(view)) + ); + } // prettier-ignore public static LightboxDoc = () => LightboxView.Instance?._doc; // eslint-disable-next-line no-use-before-define static Instance: LightboxView; @@ -69,6 +67,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { @observable private _docTarget: Opt<Doc> = undefined; @observable private _docView: Opt<DocumentView> = undefined; @observable private _showPalette: boolean = false; + private _annoPaletteView: AnnotationPalette | null = null; @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore @computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore @@ -114,7 +113,6 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { this._history = []; Doc.ActiveTool = InkTool.None; SnappingManager.SetExploreMode(false); - AnnotationPalette.Instance.displayPalette(false); this._showPalette = false; } DocumentView.DeselectAll(); @@ -217,8 +215,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { }; togglePalette = () => { this._showPalette = !this._showPalette; - AnnotationPalette.Instance.displayPalette(this._showPalette); - if (this._showPalette === false) AnnotationPalette.Instance.resetPalette(true); + // if (this._showPalette === false) AnnotationPalette.Instance.resetPalette(true); }; togglePen = () => { Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; @@ -324,6 +321,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> { </GestureOverlay> </div> + {this._showPalette && <AnnotationPalette ref={r => (this._annoPaletteView = r)} Document={DocCast(Doc.UserDoc().myLightboxDrawings)} />} {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} {this.renderNavBtn( this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index fd1af7547..757fc3fe2 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1119,7 +1119,6 @@ export class MainView extends ObservableReactComponent<{}> { <GPTPopup key="gptpopup" /> <SchemaCSVPopUp key="schemacsvpopup" /> <GenerativeFill imageEditorOpen={ImageEditor.Open} imageEditorSource={ImageEditor.Source} imageRootDoc={ImageEditor.RootDoc} addDoc={ImageEditor.AddDoc} /> - <AnnotationPalette /> </div> ); } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 27c85533f..241087fd2 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -78,7 +78,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { // suppressSetHeight={true} NativeWidth={returnZero} NativeHeight={returnZero} - fitWidth={undefined} + fitWidth={this._props.childLayoutFitWidth} onDoubleClickScript={this.onChildDoubleClick} renderDepth={this._props.renderDepth + 1} LayoutTemplate={this._props.childLayoutTemplate} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 2adad68e0..8b083de15 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -8,7 +8,7 @@ import * as React from 'react'; import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; -import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { ContextMenu } from '../ContextMenu'; @@ -144,6 +144,7 @@ export class CollectionCarouselView extends CollectionSubView() { revealItems.push({description: 'Quiz Cards', event: () => {this.layoutDoc.filterOp = cardMode.QUIZ;}, icon: 'pencil',}); // prettier-ignore !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' }); }; + childFitWidth = (doc: Doc) => Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null)); @computed get content() { const index = NumCast(this.layoutDoc._carousel_index); const curDoc = this.carouselItems?.[index]; @@ -154,10 +155,11 @@ export class CollectionCarouselView extends CollectionSubView() { <div className="collectionCarouselView-image" key="image"> <DocumentView {...this._props} - NativeWidth={returnZero} - NativeHeight={returnZero} - fitWidth={undefined} + // NativeWidth={returnZero} + // NativeHeight={returnZero} + fitWidth={returnTrue} setContentViewBox={undefined} + containerViewPath={this.DocumentView?.().docViewPath} onDoubleClickScript={this.onContentDoubleClick} onClickScript={this.onContentClick} isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive} @@ -169,6 +171,7 @@ export class CollectionCarouselView extends CollectionSubView() { Document={curDoc.layout} TemplateDataDocument={DocCast(curDoc.layout.resolvedDataDoc)} PanelHeight={this.panelHeight} + PanelWidth={this._props.PanelWidth} /> </div> {!carouselShowsCaptions ? null : ( diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index d0f65866b..f2b94fabc 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1312,7 +1312,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection this._drawing.push(inkDoc); this.addDocument(inkDoc); }); - const collection = containerDoc || this._marqueeViewRef.current?.collection(undefined, true, this._drawing); + const collection = this._marqueeViewRef.current?.collection(undefined, true, this._drawing); if (collection) { const docData = collection[DocData]; docData.title = opts.text.match(/^(.*?)~~~.*$/)?.[1] || opts.text; @@ -1329,14 +1329,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection removeDrawing = (doc?: Doc) => { this._batch = UndoManager.StartBatch('regenerateDrawing'); if (doc) { - const docData = DocCast(doc[DocData]); + const docData = doc[DocData]; const children = DocListCast(docData.data); + this._props.removeDocument?.(doc); this._props.removeDocument?.(children); - // this._props.removeDocument?.(doc); } else { - this._props.removeDocument?.(this._drawing); - // if (this._drawingContainer) this._props.removeDocument?.(this._drawingContainer); + if (this._drawingContainer) this._props.removeDocument?.(this._drawingContainer); } + this._drawing = []; }; @action diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 5aff3ed6f..8560323c9 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -363,7 +363,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps this.hideMarquee(); }); - getCollection = action((selected: Doc[], creator: Opt<(documents: Array<Doc>, options: DocumentOptions, id?: string) => Doc>, makeGroup: Opt<boolean>) => { + public static getCollection = action((selected: Doc[], creator: Opt<(documents: Array<Doc>, options: DocumentOptions, id?: string) => Doc>, makeGroup: Opt<boolean>, bounds: MarqueeViewBounds) => { const newCollection = creator ? creator(selected, { title: 'nested stack' }) : ((doc: Doc) => { @@ -375,14 +375,13 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps return doc; })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); newCollection.isSystem = undefined; - newCollection._width = this.Bounds.width || 1; // if width/height are unset/0, then groups won't autoexpand to contain their children - newCollection._height = this.Bounds.height || 1; + newCollection._width = bounds.width || 1; // if width/height are unset/0, then groups won't autoexpand to contain their children + newCollection._height = bounds.height || 1; newCollection._dragWhenActive = makeGroup; - newCollection.x = this.Bounds.left; - newCollection.y = this.Bounds.top; + newCollection.x = bounds.left; + newCollection.y = bounds.top; newCollection.layout_fitWidth = true; selected.forEach(d => Doc.SetContainer(d, newCollection)); - this.hideMarquee(); return newCollection; }); @@ -419,7 +418,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps this._props.removeDocument?.(selected); } - const newCollection = this.getCollection(selected, (e as KeyboardEvent)?.key === 't' ? Docs.Create.StackingDocument : undefined, group); + const newCollection = MarqueeView.getCollection(selected, (e as KeyboardEvent)?.key === 't' ? Docs.Create.StackingDocument : undefined, group, this.Bounds); newCollection._freeform_panX = this.Bounds.left + this.Bounds.width / 2; newCollection._freeform_panY = this.Bounds.top + this.Bounds.height / 2; newCollection._currentFrame = activeFrame; diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx index c8ce9e653..83f173fcb 100644 --- a/src/client/views/smartdraw/AnnotationPalette.tsx +++ b/src/client/views/smartdraw/AnnotationPalette.tsx @@ -8,13 +8,13 @@ import * as React from 'react'; import { AiOutlineSend } from 'react-icons/ai'; import ReactLoading from 'react-loading'; import { returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils'; -import { ActiveInkWidth, Doc, DocListCast, StrListCast } from '../../../fields/Doc'; +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 { emptyFunction, unimplementedFunction } from '../../../Utils'; import { Docs } from '../../documents/Documents'; -import { makeUserTemplateButton } from '../../util/DropConverter'; +import { makeUserTemplateButton, makeUserTemplateImage } from '../../util/DropConverter'; import { SettingsManager } from '../../util/SettingsManager'; import { Transform } from '../../util/Transform'; import { undoable, undoBatch } from '../../util/UndoManager'; @@ -28,20 +28,18 @@ import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler'; import { DocumentType } from '../../documents/DocumentTypes'; import { ImageField } from '../../../fields/URLField'; import { CollectionCarousel3DView } from '../collections/CollectionCarousel3DView'; +import { Copy } from '../../../fields/FieldSymbols'; @observer -export class AnnotationPalette extends ObservableReactComponent<{}> { +export class AnnotationPalette extends ObservableReactComponent<{ Document: Doc }> { static Instance: AnnotationPalette; - @observable private _display: boolean = false; @observable private _paletteMode: 'create' | 'view' = 'view'; @observable private _userInput: string = ''; @observable private _isLoading: boolean = false; @observable private _canInteract: boolean = true; @observable private _showRegenerate: boolean = false; - @observable private _freeFormCanvas = Docs.Create.FreeformDocument([], {}); - @observable private _drawingCarousel = Docs.Create.CarouselDocument([], {}); - @observable private _drawings: Doc[] = []; - private _drawing: Doc[] = []; + @observable private _docView: DocumentView | null = null; + @observable private _docCarouselView: DocumentView | null = null; @observable private _opts: DrawingOptions = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 }; private _gptRes: string[] = []; @@ -55,33 +53,16 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { return FieldView.LayoutString(AnnotationPalette, fieldKey); } - public get FreeformCanvas() { - return this._freeFormCanvas; - } - - public get DrawingCarousel() { - return this._drawingCarousel; - } - - // componentDidUpdate(prevProps: Readonly<{}>) { - // const docView = DocumentView.getDocumentView(this._freeFormCanvas); - // const componentView = docView?.ComponentView as CollectionFreeFormView; - // if (componentView) { - // componentView.fitContentOnce(); - // } - // this._freeFormCanvas._freeform_fitContentsToBox = false; - // } + Contains = (view: DocumentView) => { + return (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) => { if (event.key === 'Enter') { - // if (this._showRegenerate) { - // this.regenerate(); - // } else { await this.generateDrawing(); - // } } }; @@ -117,42 +98,34 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { this.setDetail(5); this.setColor(true); this.setSize(200); - this._freeFormCanvas = Docs.Create.FreeformDocument([], {}); - this._drawingCarousel = Docs.Create.CarouselDocument([], {}); this._showRegenerate = false; this._canInteract = true; - this._drawing = []; - this._drawings = []; this._opts = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 }; this._gptRes = []; }; - addToPalette = async (doc: Doc) => { - if (!doc.savedAsAnno) { - const clone = await Doc.MakeClone(doc); - clone.clone.title = doc.title; - const image = await this.getIcon(doc); - if (image) { - const imageDoc = Docs.Create.ImageDocument(image); - Doc.AddDocToList(Doc.MyAnnos, 'data', imageDoc); - } - doc.savedAsAnno = true; - // const templateBtn = makeUserTemplateButton(clone.clone); - // Doc.AddDocToList(Doc.MyAnnos, 'data', templateBtn); - // this.resetPalette(true); - } + 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); + // } }; - @action - displayPalette = (display: boolean) => { - this._display = display; - }; + // @action + // displayPalette = (display: boolean) => { + // this._display = display; + // }; @undoBatch generateDrawing = action(async () => { this._isLoading = true; - this._drawings = []; - this._drawing = []; for (var i = 0; i < 3; i++) { try { SmartDrawHandler.Instance._addFunc = this.createDrawing; @@ -177,8 +150,8 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { createDrawing = (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string) => { this._opts = opts; this._gptRes.push(gptRes); - this._drawing = []; - // const childDocs = DocListCast(this._drawing1[DocData].data); + const drawing: Doc[] = []; + strokeList.forEach((stroke: [InkData, string, string]) => { const bounds = InkField.getBounds(stroke[0]); const inkWidth = ActiveInkWidth(); @@ -199,51 +172,27 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { ActiveDash(), ActiveIsInkMask() ); - this._drawing.push(inkDoc); - // childDocs.push(inkDoc); + drawing.push(inkDoc); }); - const cv = DocumentView.getDocumentView(this._freeFormCanvas)?.ComponentView as CollectionFreeFormView; - const collection = cv._marqueeViewRef.current?.collection(undefined, true, this._drawing); + const collection = MarqueeView.getCollection(drawing, undefined, true, { left: 1, top: 1, width: 1, height: 1 }); if (collection) { - this._drawings.push(collection); - cv.fitContentOnce(); + Doc.AddDocToList(this._props.Document, 'data', collection); } - this._drawingCarousel = Docs.Create.CarouselDocument(this._drawings, { childLayoutFitWidth: true, _layout_fitWidth: true, _freeform_fitContentsToBox: true }); - this._freeFormCanvas = Docs.Create.FreeformDocument(this._drawing, { _freeform_fitContentsToBox: true }); }; saveDrawing = async () => { - // const cv = DocumentView.getDocumentView(this._freeFormCanvas)?.ComponentView as CollectionFreeFormView; - // if (cv) { - // const collection = cv._marqueeViewRef.current?.collection(undefined, true, this._drawing); - 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; - // const image = await this.getIcon(collection); - await this.addToPalette(focusedDrawing); - - // if (collection) { - // const docData = collection[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; - // docData.width = this._opts.size; - // // const image = await this.getIcon(collection); - // await this.addToPalette(collection); - // } - // } + // 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); }; async getIcon(group: Doc) { @@ -255,36 +204,13 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { return undefined; } - @computed get drawingCreator() { - return ( - <DocumentView - Document={this._freeFormCanvas} - addDocument={undefined} - addDocTab={DocumentViewInternal.addDocTabFunc} - pinToPres={DocumentView.PinDoc} - containerViewPath={returnEmptyDoclist} - styleProvider={DefaultStyleProvider} - removeDocument={returnFalse} - ScreenToLocalTransform={Transform.Identity} - PanelWidth={this.return170} - PanelHeight={this.return170} - renderDepth={1} - isContentActive={returnTrue} - focus={emptyFunction} - whenChildContentsActiveChanged={emptyFunction} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - /> - ); - } - render() { - return !this._display ? null : ( + return ( <div className="annotation-palette" style={{ zIndex: 1000 }}> {this._paletteMode === 'view' && ( <> <DocumentView + ref={r => (this._docView = r)} Document={Doc.MyAnnos} addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} @@ -303,34 +229,19 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} /> - <Button - // style={{ alignSelf: 'center' }} - text="Add" - icon={<FontAwesomeIcon icon="square-plus" />} - // iconPlacement="" - color={SettingsManager.userColor} - onClick={() => this.setPaletteMode('create')} - /> + <Button text="Add" icon={<FontAwesomeIcon icon="square-plus" />} color={SettingsManager.userColor} onClick={() => this.setPaletteMode('create')} /> </> )} {this._paletteMode === 'create' && ( <> <div style={{ display: 'flex', flexDirection: 'row', width: '170px' }}> - {/* <IconButton - tooltip="Advanced Options" - icon={<FontAwesomeIcon icon="caret-right" />} - color={SettingsManager.userColor} - style={{ width: '14px' }} - // onClick={() => { - // this._showOptions = !this._showOptions; - // }} - /> */} <input aria-label="label-input" id="new-label" type="text" style={{ color: 'black', width: '170px' }} value={this._userInput} + onClick={e => e.stopPropagation()} onChange={e => { this.setUserInput(e.target.value); }} @@ -423,29 +334,9 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { /> </div> </div> - <div style={{ display: 'none' }}> - <DocumentView - Document={this._freeFormCanvas} - addDocument={undefined} - addDocTab={DocumentViewInternal.addDocTabFunc} - pinToPres={DocumentView.PinDoc} - containerViewPath={returnEmptyDoclist} - styleProvider={DefaultStyleProvider} - removeDocument={returnFalse} - ScreenToLocalTransform={Transform.Identity} - PanelWidth={this.return170} - PanelHeight={this.return170} - renderDepth={1} - isContentActive={returnTrue} - focus={emptyFunction} - whenChildContentsActiveChanged={emptyFunction} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - /> - </div> <DocumentView - Document={this._drawingCarousel} + ref={r => (this._docCarouselView = r)} + Document={this._props.Document} addDocument={undefined} addDocTab={DocumentViewInternal.addDocTabFunc} pinToPres={DocumentView.PinDoc} diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx index 489f6f92b..ca65ea388 100644 --- a/src/client/views/smartdraw/SmartDrawHandler.tsx +++ b/src/client/views/smartdraw/SmartDrawHandler.tsx @@ -99,7 +99,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { @action displayRegenerate = (x: number, y: number, addFunc: (strokeData: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => void, deleteFunc: (doc?: Doc) => void) => { - this._selectedDoc = DocumentView.SelectedDocs().lastElement(); + this._selectedDoc = DocumentView.SelectedDocs()?.lastElement(); const docData = this._selectedDoc[DocData]; this._addFunc = addFunc; this._deleteFunc = deleteFunc; @@ -123,7 +123,6 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { this._size = 350; this._autoColor = true; Doc.ActiveTool = InkTool.None; - this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 }; }; @action @@ -154,8 +153,6 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { } else { this._showOptions = false; await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput, this._complexity, this._size, this._autoColor); - this.hideSmartDrawHandler(); - this._showRegenerate = true; } this._isLoading = false; this._canInteract = true; @@ -176,6 +173,8 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { console.log(res); const strokeData = await this.parseResponse(res, startPt, false, autoColor); this._errorOccurredOnce = false; + this.hideSmartDrawHandler(); + this._showRegenerate = true; return strokeData; } catch (err) { if (this._errorOccurredOnce) { @@ -239,7 +238,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { }); if (regenerate) { if (this._deleteFunc !== unimplementedFunction) this._deleteFunc(this._selectedDoc); - this._addFunc(strokeData, this._lastInput, svg[0], this._selectedDoc); + this._addFunc(strokeData, this._lastInput, svg[0]); } else { this._addFunc(strokeData, this._lastInput, svg[0]); } |
