fps-detector 1.0.3 → 1.1.0

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.
Files changed (6) hide show
  1. package/README.md +65 -30
  2. package/dist/fps-detector.d.ts +31 -0
  3. package/dist/fps-detector.esm.js +111 -0
  4. package/dist/fps-detector.js +5 -2
  5. package/package.json +27 -7
  6. package/dist/fps-detector.js.map +0 -1
package/README.md CHANGED
@@ -1,30 +1,65 @@
1
- # fps-detector
2
- > A tool to display FPS in real time for detecting JS performance.
3
- # Install
4
- ```sh
5
- npm i fps-detector
6
- ```
7
-
8
- ## Online Demo
9
- [https://cenfun.github.io/fps-detector](https://cenfun.github.io/fps-detector)
10
-
11
- ## Usage
12
- ```js
13
- import FPSDetector from 'fps-detector';
14
- new FPSDetector('.fps-detector', {
15
- width: 120,
16
- height: 30
17
- });
18
- ```
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
- ```
1
+ # fps-detector
2
+ > A tool to display FPS in real time for detecting JS performance.
3
+
4
+ ## Install
5
+ ```sh
6
+ npm i fps-detector
7
+ ```
8
+
9
+ ## Online Demo
10
+ [https://cenfun.github.io/fps-detector](https://cenfun.github.io/fps-detector)
11
+
12
+ ## Usage
13
+
14
+ ### ESM
15
+ ```js
16
+ import FPSDetector from 'fps-detector';
17
+ // or named import
18
+ // import { FPSDetector } from 'fps-detector';
19
+
20
+ new FPSDetector('.fps-detector', {
21
+ width: 120,
22
+ height: 30
23
+ });
24
+ ```
25
+
26
+ ### CDN
27
+ ```html
28
+ <script src="https://cdn.jsdelivr.net/npm/fps-detector@latest/dist/fps-detector.js"></script>
29
+
30
+ <div class="fps-detector"></div>
31
+ <script>
32
+ const FPSDetector = window['fps-detector'].FPSDetector;
33
+ new FPSDetector('.fps-detector');
34
+ </script>
35
+ ```
36
+
37
+ ## Options
38
+
39
+ | Option | Type | Default | Description |
40
+ |--------|------|---------|-------------|
41
+ | `width` | `number` | `85` | Canvas width |
42
+ | `height` | `number` | `30` | Canvas height |
43
+ | `fpsLevels` | `number[]` | `[10, 30]` | FPS thresholds (ascending), values below threshold use corresponding color |
44
+ | `memLevels` | `number[]` | `[200, 100]` | Memory thresholds in MB (descending), values above threshold use corresponding color |
45
+ | `colors` | `string[]` | `['red', 'orange', 'green']` | Colors for each level (low to high performance) |
46
+ | `bgColor` | `string` | `'#fff'` | Background color |
47
+ | `fgColor` | `string` | `'#ddd'` | Foreground (chart area) color |
48
+ | `padding` | `number` | `1` | Canvas padding |
49
+
50
+ ## Methods
51
+
52
+ | Method | Description |
53
+ |--------|-------------|
54
+ | `start()` | Start/resume FPS monitoring |
55
+ | `stop()` | Stop FPS monitoring |
56
+ | `render()` | Manually trigger a re-render |
57
+
58
+ ## Features
59
+
60
+ - **Click to toggle**: Click the detector to switch between FPS and Memory display mode
61
+ - **Memory display**: Shows used JS heap size in MB (Chrome only, requires `window.performance.memory`)
62
+ - **Color-coded levels**: FPS and memory values are color-coded based on configured thresholds
63
+ - **Real-time bar chart**: Visualizes FPS history as a scrolling bar chart
64
+
65
+ see [index.html](index.html) for a complete example.
package/dist/fps-detector.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ export interface FPSDetectorOption {
2
+ width?: number;
3
+ height?: number;
4
+ fpsLevels?: number[];
5
+ memLevels?: number[];
6
+ colors?: string[];
7
+ bgColor?: string;
8
+ fgColor?: string;
9
+ padding?: number;
10
+ }
11
+
12
+ export declare class FPSDetector {
13
+ constructor($container: string | HTMLElement, option?: FPSDetectorOption);
14
+
15
+ showMemory: boolean;
16
+ list: number[];
17
+ frames: number;
18
+ startTime: number;
19
+ stopped: boolean;
20
+
21
+ render(): void;
22
+ getFPSColor(v: number): string;
23
+ getMEMColor(v: number): string;
24
+ getImg(n: string, color: string): HTMLImageElement | undefined;
25
+ start(): void;
26
+ update(): void;
27
+ count(): void;
28
+ stop(): void;
29
+ }
30
+
31
+ export default FPSDetector;
package/dist/fps-detector.esm.js ADDED
@@ -0,0 +1,111 @@
1
+ //#region src/index.js
2
+ var e = class {
3
+ constructor(e, t) {
4
+ typeof e == "string" && (e = document.querySelector(e)), this.option = {
5
+ width: 85,
6
+ height: 30,
7
+ fpsLevels: [10, 30],
8
+ memLevels: [200, 100],
9
+ colors: [
10
+ "red",
11
+ "orange",
12
+ "green"
13
+ ],
14
+ bgColor: "#fff",
15
+ fgColor: "#ddd",
16
+ padding: 1,
17
+ ...t
18
+ };
19
+ let n = document.createElement("canvas");
20
+ n.style.display = "block", n.setAttribute("width", this.option.width), n.setAttribute("height", this.option.height), e.appendChild(n), e.title = "FPS Detector", e.onclick = (e) => {
21
+ this.showMemory = !this.showMemory, this.render();
22
+ }, this.numbers = {
23
+ "-": { d: "m2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z" },
24
+ 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" },
25
+ 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" },
26
+ 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" },
27
+ 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" },
28
+ 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" },
29
+ 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" },
30
+ 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" },
31
+ 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" },
32
+ 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" },
33
+ 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" }
34
+ }, this.initNumbers(n), this.ctx = n.getContext("2d"), this.start();
35
+ }
36
+ render() {
37
+ let e = this.option.width, t = this.option.height, n = this.ctx, r = this.list, i = this.option.padding, a = i, o = i, s = e - (22 + i * 3), c = t - i * 2, l = i;
38
+ if (r.length > s ? r.length = s : l = i + (s - r.length), n.fillStyle = this.option.bgColor, n.fillRect(0, 0, e, t), this.showMemory) {
39
+ let r = window.performance.memory;
40
+ if (!r) return;
41
+ let i = r.usedJSHeapSize / 1048576;
42
+ n.font = "Bold 16px", n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = this.getMEMColor(i), n.fillText(`MEM ${i.toFixed(1)} MB`, e / 2, Math.ceil(t / 2) + 1);
43
+ return;
44
+ }
45
+ n.fillStyle = this.option.fgColor, n.fillRect(a, o, s, c);
46
+ let u = [].concat(r).reverse(), d, f;
47
+ u.forEach((e, t) => {
48
+ d = e;
49
+ let r = this.getFPSColor(e);
50
+ f = r, n.fillStyle = r;
51
+ let i = Math.max(Math.floor(e / 60 * c), 1);
52
+ n.fillRect(l + t, c + o - i, 1, i);
53
+ });
54
+ let p = `${d}`.padStart(2, "0"), m = Math.floor(a + s + i), h = Math.ceil((t - 16) / 2);
55
+ p.split("").forEach((e, t) => {
56
+ let r = this.getImg(e, f);
57
+ r && n.drawImage(r, m + t * 11, h);
58
+ });
59
+ }
60
+ getFPSColor(e) {
61
+ let t = this.option.colors, n = this.option.fpsLevels, r;
62
+ for (r = 0; r < n.length; r++) if (e < n[r]) return t[r];
63
+ return t[r];
64
+ }
65
+ getMEMColor(e) {
66
+ let t = this.option.colors, n = this.option.memLevels, r;
67
+ for (r = 0; r < n.length; r++) if (e > n[r]) return t[r];
68
+ return t[r];
69
+ }
70
+ initNumbers(e) {
71
+ let t = this.numbers, n = this.option.colors;
72
+ Object.keys(t).forEach((r) => {
73
+ let i = t[r];
74
+ n.forEach((t) => {
75
+ if (i[t]) return;
76
+ let n = `
77
+ <svg viewBox="0 0 11 16" width="11" height="16" xmlns="http://www.w3.org/2000/svg">
78
+ <path fill="${t}" d="${i.d}" />
79
+ </svg>
80
+ `, r = document.createElement("img");
81
+ r.src = `data:image/svg+xml;base64,${btoa(n)}`, e.appendChild(r), i[t] = r;
82
+ });
83
+ });
84
+ }
85
+ getImg(e, t) {
86
+ let n = this.numbers[e];
87
+ if (n) return n[t];
88
+ }
89
+ start() {
90
+ this.stopped = !1, this.list = [], this.frames = 0, this.startTime = window.performance.now(), this.update();
91
+ }
92
+ update() {
93
+ this.stopped || window.requestAnimationFrame(() => {
94
+ this.count();
95
+ });
96
+ }
97
+ count() {
98
+ let e = this.list, t = window.performance.now(), n = t - this.startTime;
99
+ if (n < 1e3) this.frames += 1;
100
+ else {
101
+ for (n -= 1e3; n > 1e3;) e.unshift(0), n -= 1e3;
102
+ e.unshift(this.frames), this.render(), this.frames = 1, this.startTime = t - n;
103
+ }
104
+ this.update();
105
+ }
106
+ stop() {
107
+ this.stopped = !0;
108
+ }
109
+ };
110
+ //#endregion
111
+ export { e as FPSDetector, e as default };
package/dist/fps-detector.js CHANGED
@@ -1,2 +1,5 @@
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})()));
2
- //# sourceMappingURL=fps-detector.js.map
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`fps-detector`]={}))})(this,function(e){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var t=class{constructor(e,t){typeof e==`string`&&(e=document.querySelector(e)),this.option={width:85,height:30,fpsLevels:[10,30],memLevels:[200,100],colors:[`red`,`orange`,`green`],bgColor:`#fff`,fgColor:`#ddd`,padding:1,...t};let n=document.createElement(`canvas`);n.style.display=`block`,n.setAttribute(`width`,this.option.width),n.setAttribute(`height`,this.option.height),e.appendChild(n),e.title=`FPS Detector`,e.onclick=e=>{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(n),this.ctx=n.getContext(`2d`),this.start()}render(){let e=this.option.width,t=this.option.height,n=this.ctx,r=this.list,i=this.option.padding,a=i,o=i,s=e-(22+i*3),c=t-i*2,l=i;if(r.length>s?r.length=s:l=i+(s-r.length),n.fillStyle=this.option.bgColor,n.fillRect(0,0,e,t),this.showMemory){let r=window.performance.memory;if(!r)return;let i=r.usedJSHeapSize/1048576;n.font=`Bold 16px`,n.textAlign=`center`,n.textBaseline=`middle`,n.fillStyle=this.getMEMColor(i),n.fillText(`MEM ${i.toFixed(1)} MB`,e/2,Math.ceil(t/2)+1);return}n.fillStyle=this.option.fgColor,n.fillRect(a,o,s,c);let u=[].concat(r).reverse(),d,f;u.forEach((e,t)=>{d=e;let r=this.getFPSColor(e);f=r,n.fillStyle=r;let i=Math.max(Math.floor(e/60*c),1);n.fillRect(l+t,c+o-i,1,i)});let p=`${d}`.padStart(2,`0`),m=Math.floor(a+s+i),h=Math.ceil((t-16)/2);p.split(``).forEach((e,t)=>{let r=this.getImg(e,f);r&&n.drawImage(r,m+t*11,h)})}getFPSColor(e){let t=this.option.colors,n=this.option.fpsLevels,r;for(r=0;r<n.length;r++)if(e<n[r])return t[r];return t[r]}getMEMColor(e){let t=this.option.colors,n=this.option.memLevels,r;for(r=0;r<n.length;r++)if(e>n[r])return t[r];return t[r]}initNumbers(e){let t=this.numbers,n=this.option.colors;Object.keys(t).forEach(r=>{let i=t[r];n.forEach(t=>{if(i[t])return;let n=`
2
+ <svg viewBox="0 0 11 16" width="11" height="16" xmlns="http://www.w3.org/2000/svg">
3
+ <path fill="${t}" d="${i.d}" />
4
+ </svg>
5
+ `,r=document.createElement(`img`);r.src=`data:image/svg+xml;base64,${btoa(n)}`,e.appendChild(r),i[t]=r})})}getImg(e,t){let n=this.numbers[e];if(n)return n[t]}start(){this.stopped=!1,this.list=[],this.frames=0,this.startTime=window.performance.now(),this.update()}update(){this.stopped||window.requestAnimationFrame(()=>{this.count()})}count(){let e=this.list,t=window.performance.now(),n=t-this.startTime;if(n<1e3)this.frames+=1;else{for(n-=1e3;n>1e3;)e.unshift(0),n-=1e3;e.unshift(this.frames),this.render(),this.frames=1,this.startTime=t-n}this.update()}stop(){this.stopped=!0}};e.FPSDetector=t,e.default=t});
package/package.json CHANGED
@@ -1,24 +1,44 @@
1
1
  {
2
2
  "name": "fps-detector",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
+ "type": "module",
4
5
  "description": "A tool to display FPS in real time for detecting JS performance",
6
+ "keywords": [
7
+ "fps",
8
+ "performance",
9
+ "detector",
10
+ "monitor"
11
+ ],
5
12
  "main": "dist/fps-detector.js",
13
+ "module": "dist/fps-detector.esm.js",
14
+ "types": "dist/fps-detector.d.ts",
15
+ "exports": {
16
+ ".": {
17
+ "types": "./dist/fps-detector.d.ts",
18
+ "import": "./dist/fps-detector.esm.js",
19
+ "require": "./dist/fps-detector.js",
20
+ "default": "./dist/fps-detector.js"
21
+ },
22
+ "./package.json": "./package.json"
23
+ },
6
24
  "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}"
25
+ "build": "vite build",
26
+ "build:docs": "vite build --mode docs",
27
+ "dev": "vite",
28
+ "preview": "vite preview"
10
29
  },
11
30
  "files": [
12
31
  "dist"
13
32
  ],
33
+ "license": "MIT",
14
34
  "repository": {
15
35
  "type": "git",
16
36
  "url": "git+https://github.com/cenfun/fps-detector.git"
17
37
  },
18
38
  "devDependencies": {
19
- "eslint": "^8.21.0",
20
- "eslint-config-plus": "^1.0.3",
21
- "eslint-plugin-html": "^7.1.0"
39
+ "eslint": "^10.5.0",
40
+ "eslint-config-plus": "^2.0.4",
41
+ "vite": "^8.0.16"
22
42
  },
23
43
  "dependencies": {}
24
44
  }
package/dist/fps-detector.js.map DELETED
@@ -1 +0,0 @@
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":""}