From 49b3c7cbe01f830a2b1d2c02452901fe360348d3 Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Thu, 11 Jul 2024 11:50:01 -0400 Subject: updates --- src/client/views/smartdraw/AnnotationPalette.tsx | 337 +++++++++++++++++++++++ 1 file changed, 337 insertions(+) create mode 100644 src/client/views/smartdraw/AnnotationPalette.tsx (limited to 'src/client/views/smartdraw/AnnotationPalette.tsx') diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/AnnotationPalette.tsx new file mode 100644 index 000000000..10e88e91e --- /dev/null +++ b/src/client/views/smartdraw/AnnotationPalette.tsx @@ -0,0 +1,337 @@ +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 { DocData } from '../../../fields/DocSymbols'; +import { InkData, InkField } from '../../../fields/InkField'; +import { BoolCast, DocCast } from '../../../fields/Types'; +import { emptyFunction } from '../../../Utils'; +import { Docs } from '../../documents/Documents'; +import { CollectionViewType } from '../../documents/DocumentTypes'; +import { DragManager } from '../../util/DragManager'; +import { convertDropDataToButtons, 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 { ObservableReactComponent } from '../ObservableReactComponent'; +import { DefaultStyleProvider } from '../StyleProvider'; +import './AnnotationPalette.scss'; +import { SmartDrawHandler } from './SmartDrawHandler'; + +@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; + + constructor(props: any) { + super(props); + makeObservable(this); + AnnotationPalette.Instance = this; + } + + return170 = () => 170; + + @action + setPaletteMode = (mode: 'create' | 'view') => { + this._paletteMode = mode; + }; + + @action + setUserInput = (input: string) => { + this._userInput = input; + }; + + @action + setDetail = (detail: number) => { + this._detail = detail; + }; + + @action + setSize = (size: number) => { + this._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); + + // 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); + }; + + @action + displayPalette = (display: boolean) => { + this._display = display; + }; + + @action + generateDrawing = 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._showDrawing = true; + } catch (e) { + console.log('Error generating drawing'); + } + this._isLoading = false; + }; + + // @computed get drawingCreator() { + // return ( + // MarqueeOptionsMenu.Instance.createCollection(undefined, true, this._drawing); + // ); + // } + // return Docs.Create.FreeformDocument([], {}); + // Docs.Create. + // return ( + // + // ); + + render() { + return !this._display ? null : ( +
+ {this._paletteMode === 'view' && ( + <> + +
+
+
+ Color + +
+
+ Detail + { + this.setDetail(val as number); + }} + valueLabelDisplay="auto" + /> +
+
+ Size + { + this.setSize(val as number); + }} + valueLabelDisplay="auto" + /> +
+
+ {this._drawing !== undefined && ( + + )} + + )} + + ); + } +} -- cgit v1.2.3-70-g09d2