From 3e1ef3d0b5445065ab3f44ffc17bbb04efaa8c8a Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Tue, 23 Jul 2024 12:07:53 -0400 Subject: merging w/ zach's branch --- src/.DS_Store | Bin 10244 -> 10244 bytes src/client/documents/DocumentTypes.ts | 1 + src/client/util/CurrentUserUtils.ts | 1 + src/client/views/DocumentButtonBar.tsx | 12 +- src/client/views/LightboxView.tsx | 13 +- src/client/views/MainView.tsx | 2 + .../collectionFreeForm/CollectionFreeFormView.tsx | 50 +-- src/client/views/smartdraw/AnnotationPalette.tsx | 370 ++++++++++++++------- src/client/views/smartdraw/SmartDrawHandler.tsx | 97 +++--- 9 files changed, 360 insertions(+), 186 deletions(-) (limited to 'src') diff --git a/src/.DS_Store b/src/.DS_Store index 75cff7b55..d7a0cd9d4 100644 Binary files a/src/.DS_Store and b/src/.DS_Store differ diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 8f95068db..03ae2efb7 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -26,6 +26,7 @@ export enum DocumentType { FUNCPLOT = 'funcplot', // function plotter MAP = 'map', DATAVIZ = 'dataviz', + ANNOPALETTE = 'annopalette', LOADING = 'loading', SIMULATION = 'simulation', // physics simulation diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 24a5de42b..fa0cb920d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -441,6 +441,7 @@ pie title Minerals in my tap water { toolTip: "Tap or drag to create a bullet slide", title: "PPT Slide", icon: "person-chalkboard", dragFactory: doc.emptySlide as Doc, clickFactory: DocCast(doc.emptySlide), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a view slide", title: "View Slide", icon: "address-card", dragFactory: doc.emptyViewSlide as Doc,clickFactory: DocCast(doc.emptyViewSlide),openFactoryLocation: OpenWhere.overlay,funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a data note", title: "DataNote", icon: "window-maximize",dragFactory: doc.emptyHeader as Doc,clickFactory: DocCast(doc.emptyHeader), openFactoryAsDelegate: true, funcs: { hidden: "IsNoviceMode()"} }, + { toolTip: "Tap or drag to create an annotation palette",title: "Annotation Palette", icon: "palette", dragFactory: doc.emptyAnnoPalette as Doc, clickFactory: DocCast(doc.emptyAnnoPalette)}, { toolTip: "Toggle a Calculator REPL", title: "replviewer", icon: "calculator", clickFactory: '' as any, openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script // { toolTip: "Toggle an UndoStack", title: "undostacker", icon: "calculator", clickFactory: "" as any, openFactoryLocation: OpenWhere.overlay}, ].map(tuple => ( diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 177546fdc..eb0b00472 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -244,12 +244,14 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( } @observable _annoSaved: boolean = false; - @action - saveAnno = (targetDoc: Doc) => { - targetDoc.savedAsAnno = true; + + @undoBatch + saveAnno = action((targetDoc: Doc) => { + // targetDoc.savedAsAnno = true; this._annoSaved = true; - AnnotationPalette.Instance.saveAnno(this.view0, targetDoc); - }; + AnnotationPalette.Instance.addToPalette(targetDoc); + }); + @computed get saveAnnoButton() { const targetDoc = this.view0?.Document; diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index dcd5a61c7..4fcb7ec9c 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -24,6 +24,7 @@ import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { OverlayView } from './OverlayView'; import { AnnotationPalette } from './smartdraw/AnnotationPalette'; +import { DocData } from '../../fields/DocSymbols'; interface LightboxViewProps { PanelWidth: number; @@ -41,7 +42,14 @@ export class LightboxView extends ObservableReactComponent { * @param view * @returns true if a DocumentView is descendant of the lightbox view */ - public static Contains(view?:DocumentView) { return view && LightboxView.Instance?._docView && (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView); } // prettier-ignore + 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 public static LightboxDoc = () => LightboxView.Instance?._doc; // eslint-disable-next-line no-use-before-define static Instance: LightboxView; @@ -210,6 +218,7 @@ export class LightboxView extends ObservableReactComponent { togglePalette = () => { this._showPalette = !this._showPalette; AnnotationPalette.Instance.displayPalette(this._showPalette); + if (this._showPalette === false) AnnotationPalette.Instance.resetPalette(true); }; togglePen = () => { Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; @@ -327,7 +336,7 @@ export class LightboxView extends ObservableReactComponent { )} {toggleBtn('lightboxView-navBtn', 'toggle reading view', this._doc?._layout_fitWidth, 'book-open', 'book', this.toggleFitWidth)} - {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-download', '', this.downloadDoc)} + {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-export', '', this.downloadDoc)} {toggleBtn('lightboxView-paletteBtn', 'toggle annotation palette', this._showPalette === true, 'palette', '', this.togglePalette)} {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)} {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 2e7cb1102..d9a8730e4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -342,6 +342,7 @@ export class MainView extends ObservableReactComponent<{}> { fa.faTerminal, fa.faToggleOn, fa.faFile, + fa.faFileExport, fa.faLocationArrow, fa.faSearch, fa.faFileDownload, @@ -485,6 +486,7 @@ export class MainView extends ObservableReactComponent<{}> { fa.faAlignJustify, fa.faCheckSquare, fa.faSquarePlus, + fa.faReply, fa.faListUl, fa.faWindowMinimize, fa.faWindowRestore, diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3cd1e99ef..d0f65866b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -57,6 +57,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; import { DrawingOptions, SmartDrawHandler } from '../../smartdraw/SmartDrawHandler'; +import { AnnotationPalette } from '../../smartdraw/AnnotationPalette'; @observer class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> { @@ -662,18 +663,19 @@ export class CollectionFreeFormView extends CollectionSubView this._eraserLock--); + inkWidth, + ActiveInkColor(), + ActiveInkBezierApprox(), + ActiveFillColor(), + ActiveArrowStart(), + ActiveArrowEnd(), + ActiveDash(), + ActiveIsInkMask() + ); + }); + newStrokes && this.addDocument?.(newStrokes); + // setTimeout(() => this._eraserLock--); + } } }); } @@ -1284,10 +1286,11 @@ export class CollectionFreeFormView extends CollectionSubView { this._drawing = []; - this._drawingContainer = undefined; + const xf = this.screenToFreeformContentsXf; + // this._drawingContainer = undefined; strokeData.forEach((stroke: [InkData, string, string]) => { const bounds = InkField.getBounds(stroke[0]); - const B = this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height); + const B = xf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height); const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale; const inkDoc = Docs.Create.InkDocument( stroke[0], @@ -1299,16 +1302,20 @@ export class CollectionFreeFormView extends CollectionSubView { - this._showDrawingEditor = !this._showDrawingEditor; - this._showDrawingEditor ? SmartDrawHandler.Instance.displayRegenerate(this._downX, this._downY - 10, this.createDrawing, this.removeDrawing) : SmartDrawHandler.Instance.hideRegenerate(); + !SmartDrawHandler.Instance._showRegenerate ? SmartDrawHandler.Instance.displayRegenerate(this._downX, this._downY - 10, this.createDrawing, this.removeDrawing) : SmartDrawHandler.Instance.hideRegenerate(); }), icon: 'pen-to-square', }); diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx index 10e88e91e..c8ce9e653 100644 --- a/src/client/views/smartdraw/AnnotationPalette.tsx +++ b/src/client/views/smartdraw/AnnotationPalette.tsx @@ -1,49 +1,49 @@ +import { faLaptopHouse } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { flexibleCompare } from '@fullcalendar/core/internal'; import { Slider, Switch } from '@mui/material'; import { Button, IconButton } from 'browndash-components'; -import { data } from 'jquery'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; 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, StrListCast } from '../../../fields/Doc'; +import { ActiveInkWidth, Doc, DocListCast, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { InkData, InkField } from '../../../fields/InkField'; -import { BoolCast, DocCast } from '../../../fields/Types'; -import { emptyFunction } from '../../../Utils'; +import { BoolCast, DocCast, ImageCast, NumCast } from '../../../fields/Types'; +import { emptyFunction, unimplementedFunction } from '../../../Utils'; import { Docs } from '../../documents/Documents'; -import { CollectionViewType } from '../../documents/DocumentTypes'; -import { DragManager } from '../../util/DragManager'; -import { convertDropDataToButtons, makeUserTemplateButton } from '../../util/DropConverter'; +import { makeUserTemplateButton } from '../../util/DropConverter'; import { SettingsManager } from '../../util/SettingsManager'; import { Transform } from '../../util/Transform'; -import { MarqueeOptionsMenu, MarqueeView } from '../collections/collectionFreeForm'; -import { CollectionGridView } from '../collections/collectionGrid'; -import { CollectionStackingView } from '../collections/CollectionStackingView'; -import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; -import { FieldViewProps } from '../nodes/FieldView'; +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 { FieldView } from '../nodes/FieldView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider } from '../StyleProvider'; import './AnnotationPalette.scss'; -import { SmartDrawHandler } from './SmartDrawHandler'; +import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler'; +import { DocumentType } from '../../documents/DocumentTypes'; +import { ImageField } from '../../../fields/URLField'; +import { CollectionCarousel3DView } from '../collections/CollectionCarousel3DView'; @observer export class AnnotationPalette extends ObservableReactComponent<{}> { static Instance: AnnotationPalette; - @observable private _savedDrawings: Doc[] = []; - // @observable private _marqueeViewRef = React.createRef(); @observable private _display: boolean = false; @observable private _paletteMode: 'create' | 'view' = 'view'; @observable private _userInput: string = ''; - @observable private _showDrawing: boolean = false; - @observable private _drawing: Doc | undefined = undefined; @observable private _isLoading: boolean = false; - @observable private _detail: number = 5; - @observable private _size: number = 350; @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 _opts: DrawingOptions = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 }; + private _gptRes: string[] = []; constructor(props: any) { super(props); @@ -51,8 +51,40 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { AnnotationPalette.Instance = this; } + public static LayoutString(fieldKey: string) { + 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; + // } + return170 = () => 170; + @action + handleKeyPress = async (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + // if (this._showRegenerate) { + // this.regenerate(); + // } else { + await this.generateDrawing(); + // } + } + }; + @action setPaletteMode = (mode: 'create' | 'view') => { this._paletteMode = mode; @@ -60,31 +92,55 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { @action setUserInput = (input: string) => { - this._userInput = input; + if (!this._isLoading) this._userInput = input; }; @action setDetail = (detail: number) => { - this._detail = detail; + if (this._canInteract) this._opts.complexity = detail; + }; + + @action + setColor = (autoColor: boolean) => { + if (this._canInteract) this._opts.autoColor = autoColor; }; @action setSize = (size: number) => { - this._size = size; + if (this._canInteract) this._opts.size = size; }; - saveAnno = async (docView: DocumentView | undefined, doc: Doc) => { - const dragData = new DragManager.DocumentDragData([doc]); - // convertDropDataToButtons(dragData); - const clone = await Doc.MakeClone(doc); - clone.clone.title = doc.title; - const templateBtn = makeUserTemplateButton(clone.clone); + @action + resetPalette = (changePaletteMode: boolean) => { + if (changePaletteMode) this.setPaletteMode('view'); + this.setUserInput(''); + 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 = []; + }; - // const cloneData: Doc = DocCast(clone.clone[DocData]); - // cloneData.dragFactory = doc; - Doc.AddDocToList(Doc.MyAnnos, 'data', templateBtn); - // const collection = this._marqueeViewRef.current?.collection(undefined, false, this._savedDrawings); - // if (docView) docView.ComponentView?.removeDocument?.(doc); + 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); + } }; @action @@ -92,78 +148,136 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { this._display = display; }; - @action - generateDrawing = async () => { + @undoBatch + generateDrawing = action(async () => { this._isLoading = true; - try { - const drawingRes = await SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput); - const opts = drawingRes?.lastInput; - const drawing: Doc[] = []; - drawingRes?.data.forEach((stroke: [InkData, string, string]) => { - const bounds = InkField.getBounds(stroke[0]); - // const B = this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height); - const inkWidth = ActiveInkWidth(); - const inkDoc = Docs.Create.InkDocument( - stroke[0], - { title: 'stroke', - // x: B.x - inkWidth / 2, - // y: B.y - inkWidth / 2, - // _width: B.width + inkWidth, - // _height: B.height + inkWidth, - stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore - inkWidth, - stroke[1], - undefined, - stroke[2] === 'none' ? undefined : stroke[2] - ); - drawing.push(inkDoc); - }); - const collection = MarqueeOptionsMenu.Instance.createCollection(undefined, true, drawing); - if (collection) { - const docData = collection[DocData]; - docData.title = opts?.text; - docData.drawingInput = opts?.text; - docData.drawingComplexity = opts?.complexity; - docData.drawingColored = opts?.autoColor; - docData.drawingSize = opts?.size; - docData.drawingData = drawingRes?.lastRes; - this._drawing = collection; + this._drawings = []; + this._drawing = []; + for (var i = 0; i < 3; i++) { + try { + SmartDrawHandler.Instance._addFunc = this.createDrawing; + this._canInteract = false; + if (this._showRegenerate) { + SmartDrawHandler.Instance._deleteFunc = unimplementedFunction; + await SmartDrawHandler.Instance.regenerate(this._opts, this._gptRes[i], this._userInput); + } else { + await SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput, this._opts.complexity, this._opts.size, this._opts.autoColor); + } + } catch (e) { + console.log('Error generating drawing'); } - this._showDrawing = true; - } catch (e) { - console.log('Error generating drawing'); } + 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 + 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); + strokeList.forEach((stroke: [InkData, string, string]) => { + const bounds = InkField.getBounds(stroke[0]); + const inkWidth = ActiveInkWidth(); + const inkDoc = Docs.Create.InkDocument( + stroke[0], + { title: 'stroke', + x: bounds.left - inkWidth / 2, + y: bounds.top - inkWidth / 2, + _width: bounds.width + inkWidth, + _height: bounds.height + inkWidth, + stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore + inkWidth, + stroke[1], + ActiveInkBezierApprox(), + stroke[2] === 'none' ? ActiveFillColor() : stroke[2], + ActiveArrowStart(), + ActiveArrowEnd(), + ActiveDash(), + ActiveIsInkMask() + ); + this._drawing.push(inkDoc); + // childDocs.push(inkDoc); + }); + + const cv = DocumentView.getDocumentView(this._freeFormCanvas)?.ComponentView as CollectionFreeFormView; + const collection = cv._marqueeViewRef.current?.collection(undefined, true, this._drawing); + if (collection) { + this._drawings.push(collection); + cv.fitContentOnce(); + } + 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 }); }; - // @computed get drawingCreator() { - // return ( - // MarqueeOptionsMenu.Instance.createCollection(undefined, true, this._drawing); - // ); - // } - // return Docs.Create.FreeformDocument([], {}); - // Docs.Create. - // return ( - // - // ); + 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); + // } + // } + }; + + async getIcon(group: Doc) { + const docView = DocumentView.getDocumentView(group); + if (docView) { + docView.ComponentView?.updateIcon?.(); + return new Promise(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 1000)); + } + return undefined; + } + + @computed get drawingCreator() { + return ( + + ); + } render() { return !this._display ? null : ( @@ -220,13 +334,13 @@ export class AnnotationPalette extends ObservableReactComponent<{}> { onChange={e => { this.setUserInput(e.target.value); }} - placeholder="Enter item to draw" - // onKeyDown={this.handleKeyPress} + placeholder={this._showRegenerate ? '(Optional) Enter edits' : 'Enter item to draw'} + onKeyDown={this.handleKeyPress} />