aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/smartdraw
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/smartdraw')
-rw-r--r--src/client/views/smartdraw/SmartDrawHandler.scss70
-rw-r--r--src/client/views/smartdraw/SmartDrawHandler.tsx17
-rw-r--r--src/client/views/smartdraw/StickerPalette.scss (renamed from src/client/views/smartdraw/AnnotationPalette.scss)2
-rw-r--r--src/client/views/smartdraw/StickerPalette.tsx (renamed from src/client/views/smartdraw/AnnotationPalette.tsx)47
4 files changed, 75 insertions, 61 deletions
diff --git a/src/client/views/smartdraw/SmartDrawHandler.scss b/src/client/views/smartdraw/SmartDrawHandler.scss
index 0e8bd3349..c25273876 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.scss
+++ b/src/client/views/smartdraw/SmartDrawHandler.scss
@@ -1,44 +1,52 @@
.smart-draw-handler {
position: absolute;
-}
-
-.smartdraw-input {
- color: black;
-}
-
-.smartdraw-options {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
+ // width: 265px;
- .auto-color {
+ .smart-draw-main {
display: flex;
- flex-direction: column;
- justify-content: center;
- width: 30%;
- }
+ flex-direction: row;
- .complexity {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 31%;
+ .smartdraw-input {
+ color: black;
+ margin: auto;
+ }
}
- .size {
+ .smartdraw-options {
+ margin-top: 5px;
display: flex;
- flex-direction: column;
- justify-content: center;
- width: 39%;
+ flex-direction: row;
+ justify-content: space-around;
- .size-slider {
- width: 80%;
+ .auto-color {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 30%;
+ }
+
+ .complexity {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 31%;
+ }
+
+ .size {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 39%;
+
+ .size-slider {
+ width: 80%;
+ }
}
}
-}
-.regenerate-box,
-.edit-box {
- display: flex;
- flex-direction: row;
+ .regenerate-box,
+ .edit-box {
+ display: flex;
+ flex-direction: row;
+ }
}
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index d0f6566a5..23ab7657f 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -61,6 +61,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
@observable private _display: boolean = false;
@observable private _pageX: number = 0;
@observable private _pageY: number = 0;
+ @observable private _scale: number = 0;
@observable private _yRelativeToTop: boolean = true;
@observable private _isLoading: boolean = false;
@observable private _userInput: string = '';
@@ -82,8 +83,8 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
/**
* AddDrawing and RemoveDrawing are defined by the other classes that call the smart draw functions (i.e.
- CollectionFreeForm, FormattedTextBox, AnnotationPalette) to define how a drawing document should be added
- or removed in their respective locations (to the freeform canvs, to the annotation palette's preview, etc.)
+ CollectionFreeForm, FormattedTextBox, StickerPalette) to define how a drawing document should be added
+ or removed in their respective locations (to the freeform canvas, to the sticker palette's preview, etc.)
*/
public AddDrawing: (doc: Doc, opts: DrawingOptions, gptRes: string) => void = unimplementedFunction;
public RemoveDrawing: (useLastContainer: boolean, doc?: Doc) => void = unimplementedFunction;
@@ -122,9 +123,10 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
};
@action
- displaySmartDrawHandler = (x: number, y: number) => {
+ displaySmartDrawHandler = (x: number, y: number, scale: number) => {
[this._pageX, this._pageY] = [x, y];
this._display = true;
+ this._scale = scale;
};
/**
@@ -200,6 +202,10 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
this._showEditBox = false;
});
} else {
+ if (this._userInput == '') {
+ this._isLoading = false;
+ return;
+ }
runInAction(() => {
this._showOptions = false;
});
@@ -292,7 +298,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
svgStrokes.forEach(child => {
const convertedBezier: InkData = SVGToBezier(child.name as SVGType, child.attributes);
strokeData.push([
- convertedBezier.map(point => ({ X: point.X + startPoint.X - this._size / 1.5, Y: point.Y + startPoint.Y - this._size / 2 })),
+ convertedBezier.map(point => ({ X: startPoint.X + (point.X - startPoint.X) * this._scale, Y: startPoint.Y + (point.Y - startPoint.Y) * this._scale })),
(regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.stroke : '',
(regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.fill : '',
]);
@@ -345,7 +351,6 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
renderDisplay() {
return (
<div
- id="label-handler"
className="smart-draw-handler"
style={{
display: this._display ? '' : 'none',
@@ -354,7 +359,7 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
background: SettingsManager.userBackgroundColor,
color: SettingsManager.userColor,
}}>
- <div>
+ <div className="smart-draw-main">
<IconButton
tooltip="Cancel"
onClick={() => {
diff --git a/src/client/views/smartdraw/AnnotationPalette.scss b/src/client/views/smartdraw/StickerPalette.scss
index 4f11e8afc..ca99410cf 100644
--- a/src/client/views/smartdraw/AnnotationPalette.scss
+++ b/src/client/views/smartdraw/StickerPalette.scss
@@ -1,4 +1,4 @@
-.annotation-palette {
+.sticker-palette {
display: flex;
flex-direction: column;
align-items: center;
diff --git a/src/client/views/smartdraw/AnnotationPalette.tsx b/src/client/views/smartdraw/StickerPalette.tsx
index f1e2e4f41..468d0fd13 100644
--- a/src/client/views/smartdraw/AnnotationPalette.tsx
+++ b/src/client/views/smartdraw/StickerPalette.tsx
@@ -22,24 +22,25 @@ import { ObservableReactComponent } from '../ObservableReactComponent';
import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
import { FieldView } from '../nodes/FieldView';
-import './AnnotationPalette.scss';
+import './StickerPalette.scss';
import { DrawingOptions, SmartDrawHandler } from './SmartDrawHandler';
-interface AnnotationPaletteProps {
+interface StickerPaletteProps {
Document: Doc;
}
/**
- * The AnnotationPalette can be toggled in the lightbox view of a document. The goal of the palette
- * is to offer an easy way for users to save then drag and drop repeated annotations onto a document.
- * These annotations can be of any annotation type and operate similarly to user templates.
+ * The StickerPalette can be toggled in the lightbox view of a document. The goal of the palette
+ * is to offer an easy way for users to create stickers and drag and drop them onto a document.
+ * These stickers can technically be of any document type and operate similarly to user templates.
+ * However, the palette is designed to be geared toward ink stickers and image stickers.
*
- * On the "add" side of the palette, there is a way to create a drawing annotation with GPT. Users can
+ * On the "add" side of the palette, there is a way to create a drawing sticker with GPT. Users can
* enter the item to draw, toggle different settings, then GPT will generate three versions of the drawing
- * to choose from. These drawings can then be saved to the palette as annotations.
+ * to choose from. These drawings can then be saved to the palette as stickers.
*/
@observer
-export class AnnotationPalette extends ObservableReactComponent<AnnotationPaletteProps> {
+export class StickerPalette extends ObservableReactComponent<StickerPaletteProps> {
@observable private _paletteMode: 'create' | 'view' = 'view';
@observable private _userInput: string = '';
@observable private _isLoading: boolean = false;
@@ -50,13 +51,13 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
@observable private _opts: DrawingOptions = { text: '', complexity: 5, size: 200, autoColor: true, x: 0, y: 0 };
private _gptRes: string[] = [];
- constructor(props: AnnotationPaletteProps) {
+ constructor(props: StickerPaletteProps) {
super(props);
makeObservable(this);
}
public static LayoutString(fieldKey: string) {
- return FieldView.LayoutString(AnnotationPalette, fieldKey);
+ return FieldView.LayoutString(StickerPalette, fieldKey);
}
Contains = (view: DocumentView) => {
@@ -112,18 +113,18 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
};
/**
- * Adds a doc to the annotation palette. Gets a snapshot of the document to use as a preview in the palette. When this
- * preview is dragged onto a parent document, a copy of that document is added as an annotation.
+ * Adds a doc to the sticker palette. Gets a snapshot of the document to use as a preview in the palette. When this
+ * preview is dragged onto a parent document, a copy of that document is added as a sticker.
*/
public static addToPalette = async (doc: Doc) => {
- if (!doc.savedAsAnno) {
+ if (!doc.savedAsSticker) {
const docView = DocumentView.getDocumentView(doc);
await docView?.ComponentView?.updateIcon?.(true);
const { clone } = await Doc.MakeClone(doc);
clone.title = doc.title;
const image = ImageCast(doc.icon, ImageCast(clone[Doc.LayoutFieldKey(clone)]))?.url?.href;
- Doc.AddDocToList(Doc.MyAnnos, 'data', makeUserTemplateButtonOrImage(clone, image));
- doc.savedAsAnno = true;
+ Doc.AddDocToList(Doc.MyStickers, 'data', makeUserTemplateButtonOrImage(clone, image));
+ doc.savedAsSticker = true;
}
};
@@ -138,7 +139,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
/**
* Calls the draw with GPT functions in SmartDrawHandler to allow users to generate drawings straight from
- * the annotation palette.
+ * the sticker palette.
*/
@undoBatch
generateDrawings = action(async () => {
@@ -171,7 +172,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
};
/**
- * Saves the currently showing, newly generated drawing to the annotation palette and sets the metadata.
+ * Saves the currently showing, newly generated drawing to the sticker palette and sets the metadata.
* AddToPalette() is generically used to add any document to the palette, while this defines the behavior for when a user
* presses the "save drawing" button.
*/
@@ -185,21 +186,21 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
docData.drawingColored = this._opts.autoColor;
docData.drawingSize = this._opts.size;
docData.drawingData = this._gptRes[cIndex];
- docData.width = this._opts.size;
+ focusedDrawing.width = this._opts.size;
docData.x = this._opts.x;
docData.y = this._opts.y;
- await AnnotationPalette.addToPalette(focusedDrawing);
+ await StickerPalette.addToPalette(focusedDrawing);
this.resetPalette(true);
};
render() {
return (
- <div className="annotation-palette" style={{ zIndex: 1000 }} onClick={e => e.stopPropagation()}>
+ <div className="sticker-palette" style={{ zIndex: 1000 }} onClick={e => e.stopPropagation()}>
{this._paletteMode === 'view' && (
<>
<DocumentView
ref={r => (this._docView = r)}
- Document={Doc.MyAnnos}
+ Document={Doc.MyStickers}
addDocument={undefined}
addDocTab={DocumentViewInternal.addDocTabFunc}
pinToPres={DocumentView.PinDoc}
@@ -342,7 +343,7 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
searchFilterDocs={returnEmptyDoclist}
/>
<div className="palette-buttons">
- <Button text="Back" tooltip="Back to All Annotations" icon={<FontAwesomeIcon icon="reply" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(true)} />
+ <Button text="Back" tooltip="Back to All Stickers" icon={<FontAwesomeIcon icon="reply" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(true)} />
<div className="palette-save-reset">
<Button tooltip="Save" icon={<FontAwesomeIcon icon="file-arrow-down" />} color={SettingsManager.userColor} onClick={this.saveDrawing} />
<Button tooltip="Reset" icon={<FontAwesomeIcon icon="rotate-left" />} color={SettingsManager.userColor} onClick={() => this.resetPalette(false)} />
@@ -356,6 +357,6 @@ export class AnnotationPalette extends ObservableReactComponent<AnnotationPalett
}
Docs.Prototypes.TemplateMap.set(DocumentType.ANNOPALETTE, {
- layout: { view: AnnotationPalette, dataField: 'data' },
+ layout: { view: StickerPalette, dataField: 'data' },
options: { acl: '' },
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 15:32:20 +0000