From b6ae411cfa04f6736d91749e6c99beb8179b3a30 Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Fri, 14 Jun 2024 14:23:56 -0400 Subject: looking for weird error --- src/client/views/MainView.tsx | 4 +- src/client/views/MarqueeAnnotator.tsx | 5 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 26 +++--- .../collectionFreeForm/SmartDrawHandler.tsx | 95 +++++++++------------- 4 files changed, 57 insertions(+), 73 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a1cb44106..44e00396e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -55,7 +55,6 @@ import { TabDocView } from './collections/TabDocView'; import './collections/TreeView.scss'; import { CollectionFreeFormView } from './collections/collectionFreeForm'; import { ImageLabelHandler } from './collections/collectionFreeForm/ImageLabelHandler'; -import { SmartDrawHandler } from './collections/collectionFreeForm/SmartDrawHandler'; import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu'; import { CollectionLinearView } from './collections/collectionLinear'; import { LinkMenu } from './linking/LinkMenu'; @@ -318,6 +317,7 @@ export class MainView extends ObservableReactComponent<{}> { fa.faCompass, fa.faSnowflake, fa.faStar, + fa.faSplotch, fa.faMicrophone, fa.faCircleHalfStroke, fa.faKeyboard, @@ -402,7 +402,6 @@ export class MainView extends ObservableReactComponent<{}> { fa.faPortrait, fa.faRedoAlt, fa.faStamp, - fa.faTape, fa.faStickyNote, fa.faArrowsAltV, fa.faTimesCircle, @@ -1092,7 +1091,6 @@ export class MainView extends ObservableReactComponent<{}> { - diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index db48e095d..f06f3efe0 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -74,7 +74,8 @@ export class MarqueeAnnotator extends ObservableReactComponent ViewDefResult[] }> { @@ -144,10 +145,7 @@ export class CollectionFreeFormView extends CollectionSubView { this.erase(e, [0, 0]); + e.stopPropagation(); return false; }; @@ -1265,19 +1264,20 @@ export class CollectionFreeFormView extends CollectionSubView { - SmartDrawHandler.Instance.displaySmartDrawHandler(e.pageX, e.pageY, this.createInkStroke); + SmartDrawHandler.Instance.displaySmartDrawHandler(e.pageX, e.pageY, this.createInkStrokes); }; @action - createInkStroke = (strokeList: InkData[]) => { - strokeList.forEach(coords => { - // const stroke = new InkField(coords); - // const points = coords.map(p => intersect.inkView.ComponentView?.ptToScreen?.({ X: p.X, Y: p.Y }) ?? { X: 0, Y: 0 }), [] as PointData[]); - const bounds = InkField.getBounds(coords); + createInkStrokes = (strokeList: InkData[], alpha?: number) => { + console.log(strokeList.length); + strokeList.forEach(inkData => { + // const points: InkData = FitCurve(inkData, 20) as InkData; + const allPts = GenerateControlPoints(inkData, alpha); + const bounds = InkField.getBounds(allPts); const B = this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height); const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale; const inkDoc = Docs.Create.InkDocument( - coords, + allPts, { title: 'stroke', x: B.x - inkWidth / 2, y: B.y - inkWidth / 2, diff --git a/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx b/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx index fc8f7a429..4c2e78e31 100644 --- a/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx +++ b/src/client/views/collections/collectionFreeForm/SmartDrawHandler.tsx @@ -11,6 +11,7 @@ import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './ImageLabelHandler.scss'; import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT'; import { InkData } from '../../../../fields/InkField'; +import { ButtonType } from '../../nodes/FontIconBox/FontIconBox'; @observer export class SmartDrawHandler extends ObservableReactComponent<{}> { @@ -22,8 +23,11 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { @observable private _yRelativeToTop: boolean = true; @observable private _isLoading: boolean = false; @observable private _userInput: string = ''; + @observable private _drawingTypeToolTip = 'Create Geometric Drawing'; + @observable private _drawingTypeIcon: 'star' | 'splotch' = 'star'; + @observable private _alpha: number | undefined = undefined; // number between 0 and 1 that determines how rounded a drawing will be // @observable public strokes: InkData[] = []; - private _addToDocFunc: (strokeList: InkData[]) => void = () => {}; + private _addToDocFunc: (strokeList: InkData[], alpha?: number) => void = () => {}; constructor(props: any) { super(props); @@ -42,7 +46,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { }; @action - displaySmartDrawHandler = (x: number, y: number, addToDoc: (strokeList: InkData[]) => void) => { + displaySmartDrawHandler = (x: number, y: number, addToDoc: (strokeList: InkData[], alpha?: number) => void) => { this._pageX = x; this._pageY = y; this._display = true; @@ -50,13 +54,10 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { }; @action - hideLabelhandler = () => { + hideSmartDrawHandler = () => { this._display = false; }; - @action - waitForCoords = async () => {}; - @action drawWithGPT = async (startPoint: { X: number; Y: number }, input: string) => { console.log('start point is', startPoint); @@ -68,25 +69,18 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { return; } console.log('GPT response:', res); - // const controlPts: [number, number][][] = JSON.parse(res) as [number, number][][]; - // console.log("Control Points", controlPts); - // const transformedPts: { X: number; Y: number }[][] = []; - // controlPts.forEach(stroke => { - // stroke.map(pt => { - // pt.X += startPoint.X, pt.Y += startPoint.Y; - // }); - // transformedPts.push(stroke); - // }); const simplifiedRes: string = res.replace(/[^\d\[\],]/g, ''); - console.log(simplifiedRes) try { - const controlPts: { X: number; Y: number }[][] = JSON.parse(simplifiedRes).map((stroke: [number, number][]) => stroke.map(([X, Y]) => ({ X: X + startPoint.X, Y: Y + startPoint.Y }))); - console.log('transformed points', controlPts); - - // this.strokes = controlPts; - this._addToDocFunc(controlPts); + const parsedPts = JSON.parse(simplifiedRes); + if (parsedPts[0][0][0]) { + const controlPts = (parsedPts as [number, number][][]).map((stroke: [number, number][]) => stroke.map(([X, Y]) => ({ X: X + startPoint.X - 100, Y: Y + startPoint.Y - 100 }))); + this._addToDocFunc(controlPts, this._alpha); + } else { + const controlPts = (parsedPts as [number, number][]).map(([X, Y]) => ({ X: X + startPoint.X - 100, Y: Y + startPoint.Y - 100 })); + this._addToDocFunc([controlPts], this._alpha); + } } catch (err) { - console.error('Incompatible GPT output type'); + console.error('Error likely from bad GPT output type'); } } catch (err) { console.error('GPT call failed', err); @@ -94,6 +88,19 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { this.setIsLoading(false); this.setUserInput(''); + this.hideSmartDrawHandler(); + }; + + changeDrawingType = () => { + if (this._drawingTypeIcon === 'star') { + this._drawingTypeIcon = 'splotch'; + this._drawingTypeToolTip = 'Create Rounded Drawing'; + this._alpha = 0.2; + } else { + this._drawingTypeIcon = 'star'; + this._drawingTypeToolTip = 'Create Geometric Drawing'; + this._alpha = 0; + } }; render() { @@ -110,7 +117,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> { color: SettingsManager.userColor, }}>
- } color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} /> + } color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} /> { }} placeholder="Enter item to draw" /> + } color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '14px' }} onClick={this.changeDrawingType} /> + {/* } + color={MarqueeOptionsMenu.Instance.userColor} + style={{ width: '14px' }} + onClick={() => { + this._alpha = 0; + }} + /> */}
-
- {/* {this._labelGroups.map(group => { - return ( -
-

{group}

- { - this.removeLabel(group); - }} - icon={'x'} - color={MarqueeOptionsMenu.Instance.userColor} - style={{ width: '19px' }} - /> -
- ); - })} */}
); -- cgit v1.2.3-70-g09d2