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
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { SnappingManager } from '../../../util/SnappingManager';
import './DocCreatorMenu.scss';
import { ObservableReactComponent } from '../../ObservableReactComponent';
@observer
export class DocCreatorMenu extends ObservableReactComponent<{}> {
static Instance: DocCreatorMenu;
private _reactionDisposer?: IReactionDisposer;
@observable _pageX: number = 0;
@observable _pageY: number = 0;
@observable _display: boolean = false;
@observable _yRelativeToTop: boolean = true;
@observable _selectedIndex = -1;
@observable _mouseX: number = -1;
@observable _mouseY: number = -1;
@observable _shouldDisplay: boolean = false;
constructor(props: any) {
super(props);
makeObservable(this);
DocCreatorMenu.Instance = this;
}
@action
onPointerDown = (e: PointerEvent) => {
this._mouseX = e.clientX;
this._mouseY = e.clientY;
};
@action
onPointerUp = (e: PointerEvent) => {
if (e.button !== 2 && !e.ctrlKey) return;
const curX = e.clientX;
const curY = e.clientY;
if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
this._shouldDisplay = false;
}
if (this._shouldDisplay) {
this._display = true;
}
};
componentDidMount() {
document.addEventListener('pointerdown', this.onPointerDown, true);
document.addEventListener('pointerup', this.onPointerUp);
}
componentWillUnmount() {
document.removeEventListener('pointerdown', this.onPointerDown, true);
document.removeEventListener('pointerup', this.onPointerUp);
this._reactionDisposer?.();
}
static readonly buffer = 20;
static readonly width = 300;
static readonly height = 400;
get pageX() {
return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
}
get pageY() {
return this._pageY + DocCreatorMenu.height > window.innerHeight - DocCreatorMenu.buffer ? window.innerHeight - DocCreatorMenu.buffer - DocCreatorMenu.height : Math.max(0, this._pageY);
}
@action
displayMenu = (x: number, y: number) => {
// maxX and maxY will change if the UI/font size changes, but will work for any amount
// of items added to the menu
this._pageX = x;
this._pageY = y;
this._shouldDisplay = true;
};
@action
closeMenu = () => {
const wasOpen = this._display;
this._display = false;
this._shouldDisplay = false;
return wasOpen;
};
render() {
return (
<div
className="docCreatorMenu-cont"
style={{
display: '',
left: this.pageX,
...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
background: SnappingManager.userBackgroundColor,
color: SnappingManager.userColor,
}}>
{!this._shouldDisplay ? undefined :
<div>hi hi</div>
}
</div>
)
}
}
|
