perfect-gui 3.5.10 → 3.5.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -3
- package/package.json +1 -1
- package/src/index.js +13 -0
- package/test/src/index.html +6 -3
- package/test/src/styles/styles.css +23 -4
package/README.md
CHANGED
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -459,6 +459,19 @@ export default class GUI {
|
|
|
459
459
|
onclick: (evt) => {
|
|
460
460
|
objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX).toFixed(1));
|
|
461
461
|
objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY).toFixed(1));
|
|
462
|
+
},
|
|
463
|
+
});
|
|
464
|
+
let pointer_is_down = false;
|
|
465
|
+
area.addEventListener('pointerdown', (evt) => {
|
|
466
|
+
pointer_is_down = true;
|
|
467
|
+
});
|
|
468
|
+
area.addEventListener('pointerup', () => {
|
|
469
|
+
pointer_is_down = false;
|
|
470
|
+
});
|
|
471
|
+
area.addEventListener('pointermove', (evt) => {
|
|
472
|
+
if (pointer_is_down) {
|
|
473
|
+
objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX).toFixed(1));
|
|
474
|
+
objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY).toFixed(1));
|
|
462
475
|
}
|
|
463
476
|
});
|
|
464
477
|
|
package/test/src/index.html
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
7
|
<title>Perfect GUI</title>
|
|
8
8
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
-
<link href="main.css?166a9da11b001ec1b300" rel="stylesheet">
|
|
10
9
|
|
|
11
10
|
<meta name="author" content="Thibaut Foussard">
|
|
12
11
|
<meta name="description" content="Nice and simple GUI for JavaScript">
|
|
@@ -24,7 +23,7 @@
|
|
|
24
23
|
<link rel="apple-touch-icon" sizes="180x180" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.png">
|
|
25
24
|
<link rel="icon" type="image/png" sizes="32x32" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/32x32.png">
|
|
26
25
|
<link rel="icon" type="image/png" sizes="16x16" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/16x16.png">
|
|
27
|
-
<link rel="shortcut icon" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.
|
|
26
|
+
<link rel="shortcut icon" href="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.png">
|
|
28
27
|
</head>
|
|
29
28
|
|
|
30
29
|
<body>
|
|
@@ -38,8 +37,12 @@
|
|
|
38
37
|
<a class="sidebar__item" href="#killing-creating">Killing and creating dynamically</a>
|
|
39
38
|
</div>
|
|
40
39
|
<div class="main">
|
|
40
|
+
<div class="title">
|
|
41
|
+
<h1>Perfect GUI API</h1>
|
|
41
42
|
|
|
42
|
-
|
|
43
|
+
<a class="link" target="_blank" href="https://github.com/thibka/perfect-gui">Github</a>
|
|
44
|
+
<a class="link" target="_blank" href="https://www.npmjs.com/package/perfect-gui">NPM</a>
|
|
45
|
+
</div>
|
|
43
46
|
|
|
44
47
|
<h2 id="basics">Basics</h2>
|
|
45
48
|
|
|
@@ -77,21 +77,37 @@ body {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
.title {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: row;
|
|
83
|
+
margin: 80px 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.link {
|
|
87
|
+
padding: 10px;
|
|
88
|
+
border-bottom: 1px solid var(--white);
|
|
89
|
+
margin-left: 20px;
|
|
90
|
+
font-size: 1.4rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
80
93
|
h1, h2 {
|
|
81
94
|
font-family: var(--sans), sans-serif;
|
|
82
95
|
font-weight: normal;
|
|
83
96
|
}
|
|
84
97
|
|
|
85
98
|
h1 {
|
|
86
|
-
margin:
|
|
99
|
+
margin: 0;
|
|
100
|
+
margin-right: auto;
|
|
87
101
|
}
|
|
88
102
|
|
|
89
103
|
h2 {
|
|
90
104
|
margin-top: 80px;
|
|
105
|
+
font-size: 2rem;
|
|
91
106
|
}
|
|
92
107
|
|
|
93
108
|
p {
|
|
94
109
|
line-height: 1.4;
|
|
110
|
+
font-size: 1.4rem;
|
|
95
111
|
}
|
|
96
112
|
|
|
97
113
|
a {
|
|
@@ -100,10 +116,12 @@ a {
|
|
|
100
116
|
}
|
|
101
117
|
|
|
102
118
|
.code-button {
|
|
103
|
-
text-decoration: underline;
|
|
104
119
|
cursor: pointer;
|
|
105
120
|
margin-bottom: 10px;
|
|
106
|
-
font-size: 1.
|
|
121
|
+
font-size: 1.4rem;
|
|
122
|
+
display: inline-block;
|
|
123
|
+
padding: 0 0px 3px 0;
|
|
124
|
+
border-bottom: 1px solid var(--white);
|
|
107
125
|
}
|
|
108
126
|
|
|
109
127
|
.code-block--hidden {
|
|
@@ -168,4 +186,5 @@ pre[class*=language-] {
|
|
|
168
186
|
font-family: arial;
|
|
169
187
|
color: var(--black);
|
|
170
188
|
font-size: 1rem;
|
|
171
|
-
}
|
|
189
|
+
}
|
|
190
|
+
|