fps-detector 1.0.0 → 1.0.3
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/LICENSE +21 -0
- package/README.md +17 -4
- package/dist/fps-detector.js +1 -260
- package/dist/fps-detector.js.map +1 -1
- package/package.json +10 -5
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 cenfun
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# fps-detector
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
> A tool to display FPS in real time for detecting JS performance.
|
|
4
3
|
# Install
|
|
5
4
|
```sh
|
|
6
5
|
npm i fps-detector
|
|
7
6
|
```
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
## Online Demo
|
|
9
|
+
[https://cenfun.github.io/fps-detector](https://cenfun.github.io/fps-detector)
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
10
12
|
```js
|
|
11
13
|
import FPSDetector from 'fps-detector';
|
|
12
14
|
new FPSDetector('.fps-detector', {
|
|
@@ -14,4 +16,15 @@ new FPSDetector('.fps-detector', {
|
|
|
14
16
|
height: 30
|
|
15
17
|
});
|
|
16
18
|
```
|
|
17
|
-
see [preview/index.html](preview/index.html)
|
|
19
|
+
see [preview/index.html](preview/index.html)
|
|
20
|
+
|
|
21
|
+
## CDN Usage
|
|
22
|
+
```html
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/fps-detector@latest/dist/fps-detector.js"></script>
|
|
24
|
+
|
|
25
|
+
<div class="fps-detector"></div>
|
|
26
|
+
<script>
|
|
27
|
+
const FPSDetector = window['fps-detector'].FPSDetector;
|
|
28
|
+
new FPSDetector('.fps-detector');
|
|
29
|
+
</script>
|
|
30
|
+
```
|
package/dist/fps-detector.js
CHANGED
|
@@ -1,261 +1,2 @@
|
|
|
1
|
-
(function
|
|
2
|
-
if(typeof exports === 'object' && typeof module === 'object')
|
|
3
|
-
module.exports = factory();
|
|
4
|
-
else if(typeof define === 'function' && define.amd)
|
|
5
|
-
define("fps-detector", [], factory);
|
|
6
|
-
else if(typeof exports === 'object')
|
|
7
|
-
exports["fps-detector"] = factory();
|
|
8
|
-
else
|
|
9
|
-
root["fps-detector"] = factory();
|
|
10
|
-
})(self, function() {
|
|
11
|
-
return /******/ (() => { // webpackBootstrap
|
|
12
|
-
/******/ "use strict";
|
|
13
|
-
/******/ // The require scope
|
|
14
|
-
/******/ var __webpack_require__ = {};
|
|
15
|
-
/******/
|
|
16
|
-
/************************************************************************/
|
|
17
|
-
/******/ /* webpack/runtime/define property getters */
|
|
18
|
-
/******/ (() => {
|
|
19
|
-
/******/ // define getter functions for harmony exports
|
|
20
|
-
/******/ __webpack_require__.d = (exports, definition) => {
|
|
21
|
-
/******/ for(var key in definition) {
|
|
22
|
-
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
23
|
-
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
24
|
-
/******/ }
|
|
25
|
-
/******/ }
|
|
26
|
-
/******/ };
|
|
27
|
-
/******/ })();
|
|
28
|
-
/******/
|
|
29
|
-
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
30
|
-
/******/ (() => {
|
|
31
|
-
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
32
|
-
/******/ })();
|
|
33
|
-
/******/
|
|
34
|
-
/******/ /* webpack/runtime/make namespace object */
|
|
35
|
-
/******/ (() => {
|
|
36
|
-
/******/ // define __esModule on exports
|
|
37
|
-
/******/ __webpack_require__.r = (exports) => {
|
|
38
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
39
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
40
|
-
/******/ }
|
|
41
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
42
|
-
/******/ };
|
|
43
|
-
/******/ })();
|
|
44
|
-
/******/
|
|
45
|
-
/************************************************************************/
|
|
46
|
-
var __webpack_exports__ = {};
|
|
47
|
-
/*!**********************!*\
|
|
48
|
-
!*** ./src/index.js ***!
|
|
49
|
-
\**********************/
|
|
50
|
-
__webpack_require__.r(__webpack_exports__);
|
|
51
|
-
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
52
|
-
/* harmony export */ "FPSDetector": () => (/* binding */ FPSDetector),
|
|
53
|
-
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
54
|
-
/* harmony export */ });
|
|
55
|
-
class FPSDetector {
|
|
56
|
-
constructor($container, option) {
|
|
57
|
-
if (typeof $container === 'string') {
|
|
58
|
-
$container = document.querySelector($container);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
this.option = Object.assign({
|
|
62
|
-
width: 85,
|
|
63
|
-
height: 30,
|
|
64
|
-
colors: ['red', 'orange', 'green'],
|
|
65
|
-
bgColor: '#fff',
|
|
66
|
-
fgColor: '#ddd',
|
|
67
|
-
padding: 1
|
|
68
|
-
}, option);
|
|
69
|
-
const $canvas = document.createElement('canvas');
|
|
70
|
-
$canvas.style.display = 'block';
|
|
71
|
-
$canvas.setAttribute('width', this.option.width);
|
|
72
|
-
$canvas.setAttribute('height', this.option.height);
|
|
73
|
-
$container.appendChild($canvas);
|
|
74
|
-
$container.title = 'FPS Monitor';
|
|
75
|
-
this.numbers = {
|
|
76
|
-
'-': {
|
|
77
|
-
'd': 'm2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z'
|
|
78
|
-
},
|
|
79
|
-
'0': {
|
|
80
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
|
|
81
|
-
},
|
|
82
|
-
'1': {
|
|
83
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
|
|
84
|
-
},
|
|
85
|
-
'2': {
|
|
86
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
|
|
87
|
-
},
|
|
88
|
-
'3': {
|
|
89
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
|
|
90
|
-
},
|
|
91
|
-
'4': {
|
|
92
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
|
|
93
|
-
},
|
|
94
|
-
'5': {
|
|
95
|
-
'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
|
|
96
|
-
},
|
|
97
|
-
'6': {
|
|
98
|
-
'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
|
|
99
|
-
},
|
|
100
|
-
'7': {
|
|
101
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
|
|
102
|
-
},
|
|
103
|
-
'8': {
|
|
104
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
|
|
105
|
-
},
|
|
106
|
-
'9': {
|
|
107
|
-
'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
this.initNumbers($canvas);
|
|
111
|
-
this.ctx = $canvas.getContext('2d');
|
|
112
|
-
this.start();
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
render() {
|
|
116
|
-
const w = this.option.width;
|
|
117
|
-
const h = this.option.height;
|
|
118
|
-
const ctx = this.ctx;
|
|
119
|
-
const list = this.list;
|
|
120
|
-
const iw = 11;
|
|
121
|
-
const ih = 16;
|
|
122
|
-
const padding = this.option.padding;
|
|
123
|
-
const lx = padding;
|
|
124
|
-
const ly = padding;
|
|
125
|
-
const lw = w - (iw * 2 + padding * 3);
|
|
126
|
-
const lh = h - padding * 2;
|
|
127
|
-
let startIndex = padding;
|
|
128
|
-
|
|
129
|
-
if (list.length > lw) {
|
|
130
|
-
list.length = lw;
|
|
131
|
-
} else {
|
|
132
|
-
startIndex = padding + (lw - list.length);
|
|
133
|
-
} //console.log(list);
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
ctx.fillStyle = this.option.bgColor; //ctx.globalAlpha = 1;
|
|
137
|
-
|
|
138
|
-
ctx.fillRect(0, 0, w, h);
|
|
139
|
-
ctx.fillStyle = this.option.fgColor;
|
|
140
|
-
ctx.fillRect(lx, ly, lw, lh);
|
|
141
|
-
const ls = [].concat(list).reverse();
|
|
142
|
-
let lastItem;
|
|
143
|
-
let lastColor;
|
|
144
|
-
ls.forEach((item, i) => {
|
|
145
|
-
lastItem = item;
|
|
146
|
-
const color = this.getColor(item);
|
|
147
|
-
lastColor = color;
|
|
148
|
-
ctx.fillStyle = color;
|
|
149
|
-
const ch = Math.max(Math.floor(item / 60 * lh), 1);
|
|
150
|
-
ctx.fillRect(startIndex + i, lh + ly - ch, 1, ch);
|
|
151
|
-
});
|
|
152
|
-
const str = "".concat(lastItem).padStart(2, '0');
|
|
153
|
-
const x = Math.floor(lx + lw + padding);
|
|
154
|
-
const y = Math.ceil((h - ih) / 2);
|
|
155
|
-
str.split('').forEach((s, i) => {
|
|
156
|
-
const img = this.getImg(s, lastColor);
|
|
157
|
-
|
|
158
|
-
if (img) {
|
|
159
|
-
ctx.drawImage(img, x + i * iw, y);
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
getColor(v) {
|
|
165
|
-
const colors = this.option.colors;
|
|
166
|
-
|
|
167
|
-
if (v < 10) {
|
|
168
|
-
return colors[0];
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
if (v < 30) {
|
|
172
|
-
return colors[1];
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
return colors[2];
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
initNumbers($container) {
|
|
179
|
-
const numbers = this.numbers;
|
|
180
|
-
const colors = this.option.colors;
|
|
181
|
-
Object.keys(numbers).forEach(key => {
|
|
182
|
-
const item = numbers[key];
|
|
183
|
-
colors.forEach(color => {
|
|
184
|
-
if (item[color]) {
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
const svg = "\n <svg viewBox=\"0 0 11 16\" width=\"11\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"".concat(color, "\" d=\"").concat(item.d, "\" />\n </svg>\n ");
|
|
189
|
-
const $img = document.createElement('img');
|
|
190
|
-
$img.src = "data:image/svg+xml;base64,".concat(btoa(svg));
|
|
191
|
-
$container.appendChild($img);
|
|
192
|
-
item[color] = $img;
|
|
193
|
-
});
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
getImg(n, color) {
|
|
198
|
-
const item = this.numbers[n];
|
|
199
|
-
|
|
200
|
-
if (item) {
|
|
201
|
-
return item[color];
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
start() {
|
|
206
|
-
this.stopped = false;
|
|
207
|
-
this.list = [];
|
|
208
|
-
this.frames = 0;
|
|
209
|
-
this.startTime = window.performance.now();
|
|
210
|
-
this.update();
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
update() {
|
|
214
|
-
if (this.stopped) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
window.requestAnimationFrame(() => {
|
|
219
|
-
this.count();
|
|
220
|
-
});
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
count() {
|
|
224
|
-
const list = this.list;
|
|
225
|
-
const now = window.performance.now();
|
|
226
|
-
let d = now - this.startTime; //count each 1s
|
|
227
|
-
|
|
228
|
-
if (d < 1000) {
|
|
229
|
-
this.frames += 1;
|
|
230
|
-
} else {
|
|
231
|
-
d -= 1000;
|
|
232
|
-
|
|
233
|
-
while (d > 1000) {
|
|
234
|
-
list.unshift(0);
|
|
235
|
-
d -= 1000;
|
|
236
|
-
} //1s
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
list.unshift(this.frames);
|
|
240
|
-
this.render(); //next
|
|
241
|
-
|
|
242
|
-
this.frames = 1;
|
|
243
|
-
this.startTime = now - d;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
this.update();
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
stop() {
|
|
250
|
-
this.stopped = true;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FPSDetector);
|
|
257
|
-
/******/ return __webpack_exports__;
|
|
258
|
-
/******/ })()
|
|
259
|
-
;
|
|
260
|
-
});
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("fps-detector",[],e):"object"==typeof exports?exports["fps-detector"]=e():t["fps-detector"]=e()}(self,(()=>(()=>{"use strict";var t={d:(e,l)=>{for(var o in l)t.o(l,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:l[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{FPSDetector:()=>l,default:()=>o});class l{constructor(t,e){"string"==typeof t&&(t=document.querySelector(t)),this.option={width:85,height:30,fpsLevels:[10,30],memLevels:[200,100],colors:["red","orange","green"],bgColor:"#fff",fgColor:"#ddd",padding:1,...e};const l=document.createElement("canvas");l.style.display="block",l.setAttribute("width",this.option.width),l.setAttribute("height",this.option.height),t.appendChild(l),t.title="FPS Detector",t.onclick=t=>{this.showMemory=!this.showMemory,this.render()},this.numbers={"-":{d:"m2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z"},0:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z"},1:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z"},2:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z"},3:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z"},4:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z"},5:{d:"m1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z"},6:{d:"m1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z"},7:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z"},8:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z"},9:{d:"M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z"}},this.initNumbers(l),this.ctx=l.getContext("2d"),this.start()}render(){const t=this.option.width,e=this.option.height,l=this.ctx,o=this.list,i=this.option.padding,s=i,h=i,r=t-(22+3*i),n=e-2*i;let v=i;if(o.length>r?o.length=r:v=i+(r-o.length),l.fillStyle=this.option.bgColor,l.fillRect(0,0,t,e),this.showMemory){const o=window.performance.memory.usedJSHeapSize/1048576;return l.font="Bold 16px",l.textAlign="center",l.textBaseline="middle",l.fillStyle=this.getMEMColor(o),void l.fillText("MEM ".concat(o.toFixed(1)," MB"),t/2,Math.ceil(e/2)+1)}l.fillStyle=this.option.fgColor,l.fillRect(s,h,r,n);let c,m;[].concat(o).reverse().forEach(((t,e)=>{c=t;const o=this.getFPSColor(t);m=o,l.fillStyle=o;const i=Math.max(Math.floor(t/60*n),1);l.fillRect(v+e,n+h-i,1,i)}));const d="".concat(c).padStart(2,"0"),a=Math.floor(s+r+i),f=Math.ceil((e-16)/2);d.split("").forEach(((t,e)=>{const o=this.getImg(t,m);o&&l.drawImage(o,a+11*e,f)}))}getFPSColor(t){const e=this.option.colors,l=this.option.fpsLevels;let o;for(o=0;o<l.length;o++){if(t<l[o])return e[o]}return e[o]}getMEMColor(t){const e=this.option.colors,l=this.option.memLevels;let o;for(o=0;o<l.length;o++){if(t>l[o])return e[o]}return e[o]}initNumbers(t){const e=this.numbers,l=this.option.colors;Object.keys(e).forEach((o=>{const i=e[o];l.forEach((e=>{if(i[e])return;const l='\n <svg viewBox="0 0 11 16" width="11" height="16" xmlns="http://www.w3.org/2000/svg">\n <path fill="'.concat(e,'" d="').concat(i.d,'" />\n </svg>\n '),o=document.createElement("img");o.src="data:image/svg+xml;base64,".concat(btoa(l)),t.appendChild(o),i[e]=o}))}))}getImg(t,e){const l=this.numbers[t];if(l)return l[e]}start(){this.stopped=!1,this.list=[],this.frames=0,this.startTime=window.performance.now(),this.update()}update(){this.stopped||window.requestAnimationFrame((()=>{this.count()}))}count(){const t=this.list,e=window.performance.now();let l=e-this.startTime;if(l<1e3)this.frames+=1;else{for(l-=1e3;l>1e3;)t.unshift(0),l-=1e3;t.unshift(this.frames),this.render(),this.frames=1,this.startTime=e-l}this.update()}stop(){this.stopped=!0}}const o=l;return e})()));
|
|
261
2
|
//# sourceMappingURL=fps-detector.js.map
|
package/dist/fps-detector.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fps-detector.js","mappings":"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","sources":["webpack://fps-detector/webpack/universalModuleDefinition","webpack://fps-detector/webpack/bootstrap","webpack://fps-detector/webpack/runtime/define property getters","webpack://fps-detector/webpack/runtime/hasOwnProperty shorthand","webpack://fps-detector/webpack/runtime/make namespace object","webpack://fps-detector/./src/index.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"fps-detector\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"fps-detector\"] = factory();\n\telse\n\t\troot[\"fps-detector\"] = factory();\n})(self, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","class FPSDetector {\r\n constructor($container, option) {\r\n if (typeof $container === 'string') {\r\n $container = document.querySelector($container);\r\n }\r\n\r\n this.option = Object.assign({\r\n width: 85,\r\n height: 30,\r\n colors: ['red', 'orange', 'green'],\r\n bgColor: '#fff',\r\n fgColor: '#ddd',\r\n padding: 1\r\n }, option);\r\n\r\n const $canvas = document.createElement('canvas');\r\n $canvas.style.display = 'block';\r\n $canvas.setAttribute('width', this.option.width);\r\n $canvas.setAttribute('height', this.option.height);\r\n\r\n $container.appendChild($canvas);\r\n $container.title = 'FPS Monitor';\r\n\r\n this.numbers = {\r\n '-': {\r\n 'd': 'm2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z'\r\n },\r\n '0': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '1': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '2': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '3': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '4': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '5': {\r\n 'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '6': {\r\n 'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '7': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '8': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '9': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n }\r\n };\r\n this.initNumbers($canvas);\r\n\r\n this.ctx = $canvas.getContext('2d');\r\n \r\n this.start();\r\n\r\n }\r\n\r\n render() {\r\n\r\n const w = this.option.width;\r\n const h = this.option.height;\r\n const ctx = this.ctx;\r\n const list = this.list;\r\n\r\n const iw = 11;\r\n const ih = 16;\r\n\r\n const padding = this.option.padding;\r\n\r\n const lx = padding;\r\n const ly = padding;\r\n const lw = w - (iw * 2 + padding * 3);\r\n const lh = h - padding * 2;\r\n\r\n let startIndex = padding;\r\n if (list.length > lw) {\r\n list.length = lw;\r\n } else {\r\n startIndex = padding + (lw - list.length);\r\n }\r\n\r\n //console.log(list);\r\n \r\n ctx.fillStyle = this.option.bgColor;\r\n //ctx.globalAlpha = 1;\r\n ctx.fillRect(0, 0, w, h);\r\n\r\n ctx.fillStyle = this.option.fgColor;\r\n ctx.fillRect(lx, ly, lw, lh);\r\n\r\n const ls = [].concat(list).reverse();\r\n\r\n let lastItem;\r\n let lastColor;\r\n ls.forEach((item, i) => {\r\n lastItem = item;\r\n const color = this.getColor(item);\r\n lastColor = color;\r\n ctx.fillStyle = color;\r\n const ch = Math.max(Math.floor(item / 60 * lh), 1);\r\n ctx.fillRect(startIndex + i, lh + ly - ch, 1, ch);\r\n });\r\n\r\n const str = `${lastItem}`.padStart(2, '0');\r\n \r\n const x = Math.floor(lx + lw + padding);\r\n const y = Math.ceil((h - ih) / 2);\r\n\r\n str.split('').forEach((s, i) => {\r\n const img = this.getImg(s, lastColor);\r\n if (img) {\r\n ctx.drawImage(img, x + i * iw, y);\r\n }\r\n });\r\n\r\n }\r\n\r\n getColor(v) {\r\n const colors = this.option.colors;\r\n if (v < 10) {\r\n return colors[0];\r\n }\r\n if (v < 30) {\r\n return colors[1];\r\n }\r\n return colors[2];\r\n }\r\n\r\n initNumbers($container) {\r\n const numbers = this.numbers;\r\n const colors = this.option.colors;\r\n Object.keys(numbers).forEach(key => {\r\n const item = numbers[key];\r\n colors.forEach(color => {\r\n if (item[color]) {\r\n return;\r\n }\r\n const svg = `\r\n <svg viewBox=\"0 0 11 16\" width=\"11\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill=\"${color}\" d=\"${item.d}\" />\r\n </svg>\r\n `;\r\n const $img = document.createElement('img');\r\n $img.src = `data:image/svg+xml;base64,${btoa(svg)}`;\r\n $container.appendChild($img);\r\n item[color] = $img;\r\n });\r\n });\r\n }\r\n\r\n getImg(n, color) {\r\n const item = this.numbers[n];\r\n if (item) {\r\n return item[color];\r\n }\r\n }\r\n\r\n start() {\r\n this.stopped = false;\r\n this.list = [];\r\n this.frames = 0;\r\n this.startTime = window.performance.now();\r\n this.update();\r\n }\r\n\r\n update() {\r\n if (this.stopped) {\r\n return;\r\n }\r\n window.requestAnimationFrame(() => {\r\n this.count();\r\n });\r\n }\r\n\r\n count() {\r\n\r\n const list = this.list;\r\n\r\n const now = window.performance.now();\r\n let d = now - this.startTime;\r\n //count each 1s\r\n if (d < 1000) {\r\n this.frames += 1;\r\n } else {\r\n\r\n d -= 1000;\r\n while (d > 1000) {\r\n list.unshift(0);\r\n d -= 1000;\r\n }\r\n\r\n //1s\r\n list.unshift(this.frames);\r\n this.render();\r\n //next\r\n this.frames = 1;\r\n this.startTime = now - d;\r\n }\r\n \r\n this.update();\r\n }\r\n\r\n stop() {\r\n this.stopped = true;\r\n }\r\n\r\n}\r\n\r\nexport { FPSDetector };\r\n\r\nexport default FPSDetector;"],"names":["FPSDetector","constructor","$container","option","document","querySelector","Object","assign","width","height","colors","bgColor","fgColor","padding","$canvas","createElement","style","display","setAttribute","appendChild","title","numbers","initNumbers","ctx","getContext","start","render","w","h","list","iw","ih","lx","ly","lw","lh","startIndex","length","fillStyle","fillRect","ls","concat","reverse","lastItem","lastColor","forEach","item","i","color","getColor","ch","Math","max","floor","str","padStart","x","y","ceil","split","s","img","getImg","drawImage","v","keys","key","svg","d","$img","src","btoa","n","stopped","frames","startTime","window","performance","now","update","requestAnimationFrame","count","unshift","stop"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"fps-detector.js","mappings":"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","sources":["webpack://fps-detector/webpack/universalModuleDefinition","webpack://fps-detector/webpack/bootstrap","webpack://fps-detector/webpack/runtime/define property getters","webpack://fps-detector/webpack/runtime/hasOwnProperty shorthand","webpack://fps-detector/webpack/runtime/make namespace object","webpack://fps-detector/./src/index.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"fps-detector\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"fps-detector\"] = factory();\n\telse\n\t\troot[\"fps-detector\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","class FPSDetector {\r\n constructor($container, option) {\r\n if (typeof $container === 'string') {\r\n $container = document.querySelector($container);\r\n }\r\n\r\n this.option = {\r\n width: 85,\r\n height: 30,\r\n\r\n fpsLevels: [10, 30],\r\n memLevels: [200, 100],\r\n colors: ['red', 'orange', 'green'],\r\n\r\n bgColor: '#fff',\r\n fgColor: '#ddd',\r\n padding: 1,\r\n ... option\r\n };\r\n\r\n const $canvas = document.createElement('canvas');\r\n $canvas.style.display = 'block';\r\n $canvas.setAttribute('width', this.option.width);\r\n $canvas.setAttribute('height', this.option.height);\r\n\r\n $container.appendChild($canvas);\r\n $container.title = 'FPS Detector';\r\n $container.onclick = (e) => {\r\n this.showMemory = !this.showMemory;\r\n this.render();\r\n };\r\n\r\n this.numbers = {\r\n '-': {\r\n 'd': 'm2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z'\r\n },\r\n '0': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '1': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '2': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '3': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '4': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '5': {\r\n 'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '6': {\r\n 'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '7': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '8': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '9': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n }\r\n };\r\n this.initNumbers($canvas);\r\n\r\n this.ctx = $canvas.getContext('2d');\r\n\r\n this.start();\r\n\r\n }\r\n\r\n render() {\r\n\r\n const w = this.option.width;\r\n const h = this.option.height;\r\n const ctx = this.ctx;\r\n const list = this.list;\r\n\r\n const iw = 11;\r\n const ih = 16;\r\n\r\n const padding = this.option.padding;\r\n\r\n const lx = padding;\r\n const ly = padding;\r\n const lw = w - (iw * 2 + padding * 3);\r\n const lh = h - padding * 2;\r\n\r\n let startIndex = padding;\r\n if (list.length > lw) {\r\n list.length = lw;\r\n } else {\r\n startIndex = padding + (lw - list.length);\r\n }\r\n\r\n //console.log(list);\r\n\r\n ctx.fillStyle = this.option.bgColor;\r\n ctx.fillRect(0, 0, w, h);\r\n\r\n if (this.showMemory) {\r\n\r\n const memory = window.performance.memory;\r\n const mem = memory.usedJSHeapSize / 1048576;\r\n //const memTotal = memory.jsHeapSizeLimit / 1048576;\r\n //const per = (mem / memTotal * 100).toFixed(2);\r\n\r\n //console.log(mem, per);\r\n ctx.font = 'Bold 16px';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillStyle = this.getMEMColor(mem);\r\n ctx.fillText(`MEM ${mem.toFixed(1)} MB`, w / 2, Math.ceil(h / 2) + 1);\r\n\r\n return;\r\n }\r\n\r\n ctx.fillStyle = this.option.fgColor;\r\n ctx.fillRect(lx, ly, lw, lh);\r\n\r\n const ls = [].concat(list).reverse();\r\n\r\n let lastItem;\r\n let lastColor;\r\n ls.forEach((item, i) => {\r\n lastItem = item;\r\n const color = this.getFPSColor(item);\r\n lastColor = color;\r\n ctx.fillStyle = color;\r\n const ch = Math.max(Math.floor(item / 60 * lh), 1);\r\n ctx.fillRect(startIndex + i, lh + ly - ch, 1, ch);\r\n });\r\n\r\n const str = `${lastItem}`.padStart(2, '0');\r\n\r\n const x = Math.floor(lx + lw + padding);\r\n const y = Math.ceil((h - ih) / 2);\r\n\r\n str.split('').forEach((s, i) => {\r\n const img = this.getImg(s, lastColor);\r\n if (img) {\r\n ctx.drawImage(img, x + i * iw, y);\r\n }\r\n });\r\n\r\n }\r\n\r\n //asc\r\n getFPSColor(v) {\r\n const colors = this.option.colors;\r\n const fpsLevels = this.option.fpsLevels;\r\n let i;\r\n for (i = 0; i < fpsLevels.length; i++) {\r\n const item = fpsLevels[i];\r\n if (v < item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\r\n }\r\n\r\n //desc\r\n getMEMColor(v) {\r\n const colors = this.option.colors;\r\n const memLevels = this.option.memLevels;\r\n let i;\r\n for (i = 0; i < memLevels.length; i++) {\r\n const item = memLevels[i];\r\n if (v > item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\r\n }\r\n\r\n initNumbers($container) {\r\n const numbers = this.numbers;\r\n const colors = this.option.colors;\r\n Object.keys(numbers).forEach((key) => {\r\n const item = numbers[key];\r\n colors.forEach((color) => {\r\n if (item[color]) {\r\n return;\r\n }\r\n const svg = `\r\n <svg viewBox=\"0 0 11 16\" width=\"11\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill=\"${color}\" d=\"${item.d}\" />\r\n </svg>\r\n `;\r\n const $img = document.createElement('img');\r\n $img.src = `data:image/svg+xml;base64,${btoa(svg)}`;\r\n $container.appendChild($img);\r\n item[color] = $img;\r\n });\r\n });\r\n }\r\n\r\n getImg(n, color) {\r\n const item = this.numbers[n];\r\n if (item) {\r\n return item[color];\r\n }\r\n }\r\n\r\n start() {\r\n this.stopped = false;\r\n this.list = [];\r\n this.frames = 0;\r\n this.startTime = window.performance.now();\r\n this.update();\r\n }\r\n\r\n update() {\r\n if (this.stopped) {\r\n return;\r\n }\r\n window.requestAnimationFrame(() => {\r\n this.count();\r\n });\r\n }\r\n\r\n count() {\r\n\r\n const list = this.list;\r\n\r\n const now = window.performance.now();\r\n let d = now - this.startTime;\r\n //count each 1s\r\n if (d < 1000) {\r\n this.frames += 1;\r\n } else {\r\n\r\n d -= 1000;\r\n while (d > 1000) {\r\n list.unshift(0);\r\n d -= 1000;\r\n }\r\n\r\n //1s\r\n list.unshift(this.frames);\r\n this.render();\r\n //next\r\n this.frames = 1;\r\n this.startTime = now - d;\r\n }\r\n\r\n this.update();\r\n }\r\n\r\n stop() {\r\n this.stopped = true;\r\n }\r\n\r\n}\r\n\r\nexport { FPSDetector };\r\n\r\nexport default FPSDetector;\r\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","FPSDetector","constructor","$container","option","document","querySelector","this","width","height","fpsLevels","memLevels","colors","bgColor","fgColor","padding","$canvas","createElement","style","display","setAttribute","appendChild","title","onclick","e","showMemory","render","numbers","initNumbers","ctx","getContext","start","w","h","list","lx","ly","lw","iw","lh","startIndex","length","fillStyle","fillRect","mem","window","performance","memory","usedJSHeapSize","font","textAlign","textBaseline","getMEMColor","fillText","toFixed","Math","ceil","lastItem","lastColor","concat","reverse","forEach","item","i","color","getFPSColor","ch","max","floor","str","padStart","x","y","split","s","img","getImg","drawImage","v","keys","svg","d","$img","src","btoa","n","stopped","frames","startTime","now","update","requestAnimationFrame","count","unshift","stop"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fps-detector",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "A tool to display FPS in real time for detecting JS performance",
|
|
5
5
|
"main": "dist/fps-detector.js",
|
|
6
|
-
"scripts": {
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "sf lint && sf b -p",
|
|
8
|
+
"patch": "npm run build && sf publish patch",
|
|
9
|
+
"pack": "sf lint && sf pack -o docs -q v={version}"
|
|
10
|
+
},
|
|
7
11
|
"files": [
|
|
8
12
|
"dist"
|
|
9
13
|
],
|
|
@@ -12,8 +16,9 @@
|
|
|
12
16
|
"url": "git+https://github.com/cenfun/fps-detector.git"
|
|
13
17
|
},
|
|
14
18
|
"devDependencies": {
|
|
15
|
-
"eslint": "^8.
|
|
16
|
-
"eslint-
|
|
19
|
+
"eslint": "^8.21.0",
|
|
20
|
+
"eslint-config-plus": "^1.0.3",
|
|
21
|
+
"eslint-plugin-html": "^7.1.0"
|
|
17
22
|
},
|
|
18
23
|
"dependencies": {}
|
|
19
24
|
}
|