1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
|
import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from '@dash/components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ColorResult } from 'react-color';
import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
import { emptyFunction, unimplementedFunction } from '../../../Utils';
import { Doc, Opt } from '../../../fields/Doc';
import { SettingsManager } from '../../util/SettingsManager';
import { AntimodeMenu, AntimodeMenuProps } from '../AntimodeMenu';
import { LinkPopup } from '../linking/LinkPopup';
import { DocumentView } from '../nodes/DocumentView';
import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
import './AnchorMenu.scss';
import { GPTPopup } from './GPTPopup/GPTPopup';
@observer
export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
// eslint-disable-next-line no-use-before-define
static Instance: AnchorMenu;
private _disposer: IReactionDisposer | undefined;
private _commentRef = React.createRef<HTMLDivElement>();
private _cropRef = React.createRef<HTMLDivElement>();
@observable private _loading = false;
constructor(props: AntimodeMenuProps) {
super(props);
makeObservable(this);
AnchorMenu.Instance = this;
AnchorMenu.Instance._canFade = false;
}
@observable private highlightColor: string = 'rgba(245, 230, 95, 0.616)';
@observable public Status: 'marquee' | 'annotation' | '' = '';
// GPT additions
@observable private _selectedText: string = '';
@observable private _x: number = 0;
@observable private _y: number = 0;
@observable private _isLoading: boolean = false;
@action
public setSelectedText = (txt: string) => {
this._selectedText = txt.trim();
};
@action
public setLocation = (x: number, y: number) => {
this._x = x;
this._y = y;
};
@computed public get selectedText() {
return this._selectedText;
}
public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search
public OnCrop: (e: PointerEvent) => void = unimplementedFunction;
public OnClick: (e: PointerEvent) => void = unimplementedFunction;
public OnAudio: (e: PointerEvent) => void = unimplementedFunction;
public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
public StartCropDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
public Highlight: (color: string) => void = emptyFunction;
public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = emptyFunction;
public Delete: () => void = unimplementedFunction;
public PinToPres: () => void = unimplementedFunction;
public MakeTargetToggle: () => void = unimplementedFunction;
public ShowTargetTrail: () => void = unimplementedFunction;
public IsTargetToggler: () => boolean = returnFalse;
public makeLabels: () => void = unimplementedFunction;
public marqueeWidth = 0;
public marqueeHeight = 0;
public get Active() {
return this._left > 0;
}
public AddDrawingAnnotation: (doc: Doc) => void = unimplementedFunction;
public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
componentWillUnmount() {
this._disposer?.();
}
componentDidMount() {
this._disposer = reaction(
() => DocumentView.Selected().slice(),
() => AnchorMenu.Instance.fadeOut(true)
);
}
/**
* Invokes the API with the selected text and stores it in the summarized text.
* @param e pointer down event
*/
gptAskAboutSelection = () => {
GPTPopup.Instance.askAIAboutSelection(this._selectedText);
AnchorMenu.Instance.fadeOut(true);
};
pointerDown = (e: React.PointerEvent) => {
setupMoveUpEvents(
this,
e,
(moveEv: PointerEvent) => {
this.StartDrag(moveEv, this._commentRef.current!);
return true;
},
returnFalse,
clickEv => this.OnClick?.(clickEv)
);
};
audioDown = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, returnFalse, returnFalse, clickEv => this.OnAudio?.(clickEv));
};
cropDown = (e: React.PointerEvent) => {
setupMoveUpEvents(
this,
e,
(moveEv: PointerEvent) => {
this.StartCropDrag(moveEv, this._cropRef.current!);
return true;
},
returnFalse,
clickev => this.OnCrop?.(clickev)
);
};
@action
highlightClicked = () => {
this.Highlight(this.highlightColor);
AnchorMenu.Instance.fadeOut(true);
};
@computed get highlighter() {
return (
<Group>
<IconButton
icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
tooltip="Click to Highlight"
onClick={this.highlightClicked}
colorPicker={this.highlightColor}
color={SettingsManager.userColor}
/>
<ColorPicker selectedColor={this.highlightColor} setFinalColor={this.changeHighlightColor} setSelectedColor={this.changeHighlightColor} size={Size.XSMALL} />
</Group>
);
}
@action changeHighlightColor = (color: string) => {
const col: ColorResult = {
hex: color,
hsl: { a: 0, h: 0, s: 0, l: 0 },
rgb: { a: 0, r: 0, b: 0, g: 0 },
};
this.highlightColor = ClientUtils.colorString(col);
};
render() {
const buttons =
this.Status === 'marquee' ? (
<>
{this.highlighter}
<div ref={this._commentRef}>
<IconButton
tooltip="Drag to Place Annotation" //
onPointerDown={this.pointerDown}
icon={<FontAwesomeIcon icon="comment-alt" />}
color={SettingsManager.userColor}
/>
</div>
{/* GPT Summarize icon only shows up when text is highlighted, not on marquee selection */}
{this._selectedText && (
<IconButton
tooltip="Ask AI..." //
onPointerDown={this.gptAskAboutSelection}
icon={<FontAwesomeIcon icon="comment-dots" size="lg" />}
color={SettingsManager.userColor}
/>
)}
{/* Adds a create flashcards option to the anchor menu, which calls the gptFlashcard method. */}
{this.makeLabels === unimplementedFunction ? null : <IconButton tooltip="Create labels" onPointerDown={this.makeLabels} icon={<FontAwesomeIcon icon="tag" size="lg" />} color={SettingsManager.userColor} />}
{this._selectedText && RichTextMenu.Instance?.createLinkButton()}
{AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
<IconButton
tooltip="Click to Record Annotation" //
onPointerDown={this.audioDown}
icon={<FontAwesomeIcon icon="microphone" />}
color={SettingsManager.userColor}
/>
)}
<Popup
tooltip="Find document to link to selected text" //
type={Type.PRIM}
icon={<FontAwesomeIcon icon="search" />}
popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />}
color={SettingsManager.userColor}
/>
{AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : (
<div ref={this._cropRef}>
<IconButton
tooltip="Click/Drag to create cropped image" //
onPointerDown={this.cropDown}
icon={<FontAwesomeIcon icon="image" />}
color={SettingsManager.userColor}
/>
</div>
)}
</>
) : (
<>
{this.Delete !== returnFalse && (
<IconButton
tooltip="Remove Link Anchor" //
onPointerDown={this.Delete}
icon={<FontAwesomeIcon icon="trash-alt" />}
color={SettingsManager.userColor}
/>
)}
{this.PinToPres !== returnFalse && (
<IconButton
tooltip="Pin to Presentation" //
onPointerDown={this.PinToPres}
icon={<FontAwesomeIcon icon="map-pin" />}
color={SettingsManager.userColor}
/>
)}
{this.ShowTargetTrail !== returnFalse && (
<IconButton
tooltip="Show Linked Trail" //
onPointerDown={this.ShowTargetTrail}
icon={<FontAwesomeIcon icon="taxi" />}
color={SettingsManager.userColor}
/>
)}
{this.IsTargetToggler !== returnFalse && (
<Toggle
tooltip="Make target visibility toggle on click"
type={Type.PRIM}
toggleType={ToggleType.BUTTON}
toggleStatus={this.IsTargetToggler()}
onClick={this.MakeTargetToggle}
icon={<FontAwesomeIcon icon="thumbtack" />}
color={SettingsManager.userColor}
/>
)}
</>
);
return this.getElement(buttons);
}
}
|
