blob: 1a44e094debbae372942ecfccf0322159bceedfd (
plain)
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
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconButton } from '@dash/components';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
import './ImageLabelHandler.scss';
@observer
export class ImageLabelHandler extends ObservableReactComponent<object> {
// eslint-disable-next-line no-use-before-define
static Instance: ImageLabelHandler;
@observable _display: boolean = false;
@observable _pageX: number = 0;
@observable _pageY: number = 0;
@observable _yRelativeToTop: boolean = true;
@observable _currentLabel: string = '';
@observable _labelGroups: string[] = [];
constructor(props: object) {
super(props);
makeObservable(this);
ImageLabelHandler.Instance = this;
}
@action
displayLabelHandler = (x: number, y: number) => {
this._pageX = x;
this._pageY = y;
this._display = true;
this._labelGroups = [];
};
@action
hideLabelhandler = () => {
this._display = false;
this._labelGroups = [];
};
@action
addLabel = (labelIn: string) => {
const label = labelIn.toUpperCase().trim();
if (label.length > 0) {
if (!this._labelGroups.includes(label)) {
this._labelGroups = [...this._labelGroups, label];
}
}
};
@action
removeLabel = (label: string) => {
const labelUp = label.toUpperCase();
this._labelGroups = this._labelGroups.filter(group => group !== labelUp);
};
@action
groupImages = () => {
MarqueeOptionsMenu.Instance.groupImages();
this._display = false;
};
render() {
if (this._display) {
return (
<div
id="label-handler"
className="contextMenu-cont"
style={{
display: this._display ? '' : 'none',
left: this._pageX,
...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
background: SettingsManager.userBackgroundColor,
color: SettingsManager.userColor,
}}>
<div>
<IconButton tooltip={'Cancel'} onPointerDown={this.hideLabelhandler} icon={<FontAwesomeIcon icon="eye-slash" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
<input aria-label="label-input" id="new-label" type="text" placeholder="Input a classification" style={{ color: 'black' }} />
<IconButton
tooltip={'Add Label'}
onPointerDown={() => {
const input = document.getElementById('new-label') as HTMLInputElement;
const newLabel = input.value;
this.addLabel(newLabel);
this._currentLabel = '';
input.value = '';
}}
icon={<FontAwesomeIcon icon="plus" />}
color={MarqueeOptionsMenu.Instance.userColor}
style={{ width: '19px' }}
/>
<IconButton tooltip={'Group Images'} onPointerDown={this.groupImages} icon={<FontAwesomeIcon icon="object-group" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
</div>
<div>
{this._labelGroups.map(group => {
return (
<div key={group}>
<p>{group}</p>
<IconButton
tooltip="Remove Label"
onPointerDown={() => {
this.removeLabel(group);
}}
icon={'x'}
color={MarqueeOptionsMenu.Instance.userColor}
style={{ width: '19px' }}
/>
</div>
);
})}
</div>
</div>
);
} else {
return <></>;
}
}
}
|
