-
Notifications
You must be signed in to change notification settings - Fork 2
/
ui.js
95 lines (81 loc) · 2.21 KB
/
ui.js
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
// UI for virtual input
const ui = module.exports;
const css = process.env.WEBPACK ? require('./index.scss') : ''; // CSS (both for UI and GUI
class UI {
constructor() {
while( document.getElementById(`nguJsDiv`) ) {
console.warn( `Found an instance of NGU.js still installed, uhm...` );
document.getElementById(`nguJsDiv`).remove();
}
const div = this.div = document.createElement(`div`);
div.id = `nguJsDiv`;
document.body.appendChild( div );
// events received on our widget shouldn't propagate to the canvas beneath
[`mousemove`, `mousedown`, `mouseup`, `keydown`, `keypress`, `keyup`].forEach( (eventName)=>{
div.addEventListener( eventName, (e)=>{ e.stopPropagation(); });
});
// applying our stylesheet
const style = this.style = document.createElement(`style`);
style.type = 'text/css';
style.appendChild( document.createTextNode(css) );
div.appendChild( style ); // NOTE(peoro): a <style> in a <div> is not standard, but it works
}
destroy() {
this.div.remove();
}
}
class UIElement {
constructor( className='point' ) {
this.div = document.createElement(`div`);
this.restyle( className );
}
restyle( className ) {
this.div.className = className;
}
show( ui ) { ui.div.appendChild(this.div); }
hide() { this.div.remove(); }
}
class Point extends UIElement {
constructor( className='point' ) {
super( className );
}
move( {x,y} ) {
const style = this.div.style;
style.left = `${x}px`;
style.top = `${y}px`;
}
}
class Rect extends UIElement {
constructor( className='rect' ) {
super( className );
}
set( rect ) {
const style = this.div.style;
style.left = `${rect.left}px`;
style.top = `${rect.top}px`;
style.width = `${rect.width}px`;
style.height = `${rect.height}px`;
}
}
// adding debug methods to `util.Pixel` and `util.Rect`
const util = require('./util.js');
util.Pixel.prototype.debug = async function( s=2 ) {
const el = new Point('debug-point');
el.move( this );
el.show( nguJs.ui );
await util.wait( s );
el.hide();
};
util.Rect.prototype.debug = async function( s=2 ) {
const el = new Rect('debug-rect');
el.set( this );
el.show( nguJs.ui );
await util.wait( s );
el.hide();
};
Object.assign( ui, {
UI,
UIElement,
Point,
Rect,
});