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
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
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 { Utils, returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../Utils';
import { Doc, Opt } from '../../../fields/Doc';
import { DocumentType } from '../../documents/DocumentTypes';
import { SelectionManager } from '../../util/SelectionManager';
import { SettingsManager } from '../../util/SettingsManager';
import { AntimodeMenu, AntimodeMenuProps } from '../AntimodeMenu';
import { LinkPopup } from '../linking/LinkPopup';
import './AnchorMenu.scss';
import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
@observer
export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
static Instance: AnchorMenu;
private _disposer: IReactionDisposer | undefined;
private _commentRef = React.createRef<HTMLDivElement>();
private _cropRef = React.createRef<HTMLDivElement>();
constructor(props: any) {
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 = '';
@action
public setSelectedText = (txt: string) => (this.selectedText = txt);
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) => Opt<Doc> = (color: string) => undefined;
public GetAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => undefined;
public Delete: () => void = unimplementedFunction;
public PinToPres: () => void = unimplementedFunction;
public MakeTargetToggle: () => void = unimplementedFunction;
public ShowTargetTrail: () => void = unimplementedFunction;
public IsTargetToggler: () => boolean = returnFalse;
public get Active() {
return this._left > 0;
}
componentWillUnmount() {
this._disposer?.();
}
componentDidMount() {
this._disposer = reaction(
() => SelectionManager.Views.slice(),
sel => AnchorMenu.Instance.fadeOut(true)
);
}
/**
* Invokes the API with the selected text and stores it in the summarized text.
* @param e pointer down event
*/
gptSummarize = async (e: React.PointerEvent) => {
GPTPopup.Instance?.setSelectedText(this.selectedText);
GPTPopup.Instance.generateSummary();
};
pointerDown = (e: React.PointerEvent) => {
setupMoveUpEvents(
this,
e,
(e: PointerEvent) => {
this.StartDrag(e, this._commentRef.current!);
return true;
},
returnFalse,
e => this.OnClick?.(e)
);
};
audioDown = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, returnFalse, returnFalse, e => this.OnAudio?.(e));
};
cropDown = (e: React.PointerEvent) => {
setupMoveUpEvents(
this,
e,
(e: PointerEvent) => {
this.StartCropDrag(e, this._cropRef.current!);
return true;
},
returnFalse,
e => this.OnCrop?.(e)
);
};
@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 = Utils.colorString(col);
};
/**
* Returns whether the selected text can be summarized. The goal is to have
* all selected text available to summarize but its only supported for pdf and web ATM.
* @returns Whether the GPT icon for summarization should appear
*/
canSummarize = () => SelectionManager.Docs.some(doc => [DocumentType.PDF, DocumentType.WEB].includes(doc.type as any));
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*/}
{AnchorMenu.Instance.StartCropDrag === unimplementedFunction && this.canSummarize() && (
<IconButton
tooltip="Summarize with AI" //
onPointerDown={this.gptSummarize}
icon={<FontAwesomeIcon icon="comment-dots" size="lg" />}
color={SettingsManager.userColor}
/>
)}
{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);
}
}
|
