aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/smartdraw/SmartDrawHandler.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/smartdraw/SmartDrawHandler.tsx')
-rw-r--r--src/client/views/smartdraw/SmartDrawHandler.tsx97
1 files changed, 52 insertions, 45 deletions
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 24046bb83..489f6f92b 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -17,6 +17,7 @@ import { DocData } from '../../../fields/DocSymbols';
import { DocumentView } from '../nodes/DocumentView';
import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
import './SmartDrawHandler.scss';
+import { unimplementedFunction } from '../../../Utils';
export interface DrawingOptions {
text: string;
@@ -39,15 +40,15 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
@observable private _userInput: string = '';
@observable private _showOptions: boolean = false;
@observable private _showEditBox: boolean = false;
- @observable private _showRegenerate: boolean = false;
+ @observable public _showRegenerate: boolean = false;
@observable private _complexity: number = 5;
@observable private _size: number = 200;
@observable private _autoColor: boolean = true;
@observable private _regenInput: string = '';
@observable private _canInteract: boolean = true;
- private _addFunc: (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => void = () => {};
- private _deleteFunc: (doc?: Doc) => void = () => {};
- private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 300, autoColor: true, x: 0, y: 0 };
+ public _addFunc: (strokeList: [InkData, string, string][], opts: DrawingOptions, gptRes: string, containerDoc?: Doc) => void = () => {};
+ public _deleteFunc: (doc?: Doc) => void = () => {};
+ private _lastInput: DrawingOptions = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
private _lastResponse: string = '';
private _selectedDoc: Doc | undefined = undefined;
@@ -119,51 +120,62 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
this._showOptions = false;
this._userInput = '';
this._complexity = 5;
- this._size = 300;
+ this._size = 350;
this._autoColor = true;
Doc.ActiveTool = InkTool.None;
+ this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
};
@action
hideRegenerate = () => {
- this._showRegenerate = false;
- this._isLoading = false;
- this._regenInput = '';
+ if (!this._isLoading) {
+ this._showRegenerate = false;
+ this._isLoading = false;
+ this._regenInput = '';
+ this._lastInput = { text: '', complexity: 5, size: 350, autoColor: true, x: 0, y: 0 };
+ }
};
@action
handleKeyPress = async (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
- if (this._showRegenerate) {
- this.regenerate();
- } else {
- await this.drawWithGPT({ X: this._pageX, Y: this._pageY }, this._userInput);
- this._userInput = '';
- }
+ await this.handleSendClick();
}
};
- _errorOccurredOnce = false;
@action
- drawWithGPT = async (startPt: { X: number; Y: number }, input: string) => {
- if (input === '') return;
- this._lastInput = { text: input, complexity: this._complexity, size: this._size, autoColor: this._autoColor, x: startPt.X, y: startPt.Y };
+ handleSendClick = async () => {
this._isLoading = true;
this._canInteract = false;
- this._showOptions = false;
+ if (this._showRegenerate) {
+ await this.regenerate();
+ this._regenInput = '';
+ this._showEditBox = false;
+ } 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;
+ };
+
+ _errorOccurredOnce = false;
+ @action
+ drawWithGPT = async (startPt: { X: number; Y: number }, input: string, complexity: number, size: number, autoColor: boolean) => {
+ if (input === '') return;
+ this._lastInput = { text: input, complexity: complexity, size: size, autoColor: autoColor, x: startPt.X, y: startPt.Y };
+
try {
- const res = await gptAPICall(`"${input}", "${this._complexity}", "${this._size}"`, GPTCallType.DRAW, undefined, true);
+ const res = await gptAPICall(`"${input}", "${complexity}", "${size}"`, GPTCallType.DRAW, undefined, true);
if (!res) {
console.error('GPT call failed');
return;
}
console.log(res);
- const strokeData = await this.parseResponse(res, startPt, false);
- this.hideSmartDrawHandler();
- this._showRegenerate = true;
+ const strokeData = await this.parseResponse(res, startPt, false, autoColor);
this._errorOccurredOnce = false;
- this._isLoading = false;
- this._canInteract = true;
return strokeData;
} catch (err) {
if (this._errorOccurredOnce) {
@@ -171,7 +183,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
this._errorOccurredOnce = false;
} else {
this._errorOccurredOnce = true;
- this.drawWithGPT(startPt, input);
+ this.drawWithGPT(startPt, input, complexity, size, autoColor);
}
}
};
@@ -182,9 +194,11 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
};
@action
- regenerate = async () => {
- this._isLoading = true;
- this._canInteract = false;
+ regenerate = async (lastInput?: DrawingOptions, lastResponse?: string, regenInput?: string) => {
+ if (lastInput) this._lastInput = lastInput;
+ if (lastResponse) this._lastResponse = lastResponse;
+ if (regenInput) this._regenInput = regenInput;
+
try {
let res;
if (this._regenInput !== '') {
@@ -199,21 +213,15 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
return;
}
console.log(res);
- this.parseResponse(res, { X: this._lastInput.x, Y: this._lastInput.y }, true);
+ this.parseResponse(res, { X: this._lastInput.x, Y: this._lastInput.y }, true, lastInput?.autoColor || this._autoColor);
} catch (err) {
console.error('GPT call failed', err);
}
- this._isLoading = false;
- this._canInteract = true;
- this._regenInput = '';
- this._showEditBox = false;
};
@action
- parseResponse = async (res: string, startPoint: { X: number; Y: number }, regenerate: boolean) => {
+ parseResponse = async (res: string, startPoint: { X: number; Y: number }, regenerate: boolean, autoColor: boolean) => {
const svg = res.match(/<svg[^>]*>([\s\S]*?)<\/svg>/g);
- console.log(svg);
- console.log('start point is', startPoint);
if (svg) {
this._lastResponse = svg[0];
const svgObject = await parse(svg[0]);
@@ -225,12 +233,12 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
convertedBezier.map(point => {
return { X: point.X + startPoint.X - this._size / 1.5, Y: point.Y + startPoint.Y - this._size / 2 };
}),
- (regenerate ? this._lastInput.autoColor : this._autoColor) ? child.attributes.stroke : undefined,
- (regenerate ? this._lastInput.autoColor : this._autoColor) ? child.attributes.fill : undefined,
+ (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.stroke : undefined,
+ (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.fill : undefined,
]);
});
if (regenerate) {
- this._deleteFunc(this._selectedDoc);
+ if (this._deleteFunc !== unimplementedFunction) this._deleteFunc(this._selectedDoc);
this._addFunc(strokeData, this._lastInput, svg[0], this._selectedDoc);
} else {
this._addFunc(strokeData, this._lastInput, svg[0]);
@@ -283,9 +291,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
icon={this._isLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
iconPlacement="right"
color={SettingsManager.userColor}
- onClick={e => {
- this.drawWithGPT({ X: e.clientX, Y: e.clientY }, this._userInput);
- }}
+ onClick={this.handleSendClick}
/>
</div>
{this._showOptions && (
@@ -303,6 +309,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
},
}}
defaultChecked={true}
+ value={this._autoColor}
size="small"
onChange={this.setAutoColor}
/>
@@ -390,7 +397,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
tooltip="Regenerate"
icon={this._isLoading && this._regenInput === '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <FontAwesomeIcon icon={'rotate'} />}
color={SettingsManager.userColor}
- onClick={this.regenerate}
+ onClick={this.handleSendClick}
/>
<IconButton tooltip="Edit with GPT" icon={<FontAwesomeIcon icon="pen-to-square" />} color={SettingsManager.userColor} onClick={this.edit} />
{this._showEditBox && (
@@ -418,7 +425,7 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
iconPlacement="right"
color={SettingsManager.userColor}
- onClick={this.regenerate}
+ onClick={this.handleSendClick}
/>
</div>
)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 15:05:46 +0000