Merge pull request #15 from qazsato/add_count_per_sec

add debug view events per sec
qazsato · Dec 6, 2024 · e134bf5 · e134bf5
2 parents 1deab9b + 5ff37dd
commit e134bf5
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 38 deletions.
diff --git a/docs/index-BkH9e1jg.css → docs/index-CkherYMV.css b/docs/index-BkH9e1jg.css → docs/index-CkherYMV.css
diff --git a/docs/index-B7U_mx4l.js → docs/index-NS4a8Agm.js b/docs/index-B7U_mx4l.js → docs/index-NS4a8Agm.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/maplibre-gl-compass/compass.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>maplibre-gl-compass</title>
-    <script type="module" crossorigin src="/maplibre-gl-compass/index-B7U_mx4l.js"></script>
-    <link rel="stylesheet" crossorigin href="/maplibre-gl-compass/index-BkH9e1jg.css">
+    <script type="module" crossorigin src="/maplibre-gl-compass/index-NS4a8Agm.js"></script>
+    <link rel="stylesheet" crossorigin href="/maplibre-gl-compass/index-CkherYMV.css">
   </head>
   <body>
     <div id="app">

diff --git a/src/components/DebugView.css b/src/components/DebugView.css
@@ -1,13 +1,25 @@
 .maplibregl-ctrl-compass-heading-debug {
-  width: 180px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 200px;
   margin: 0;
   padding: 5px 10px;
   list-style: none;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: 0 0 0 2px rgba(0,0,0,.1);
 
-  li {
+  dt {
+    margin: 0;
+    width: 50px;
+    font-weight: bold;
+  }
+
+  dd {
+    margin: 0;
+    flex-grow: 1;
+    width: calc(100% - 50px);
+    text-align: right;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

diff --git a/src/components/DebugView.ts b/src/components/DebugView.ts
@@ -3,32 +3,72 @@ import './DebugView.css'
 
 export class DebugView {
   private element: HTMLElement
+  private eventTimestamps: number[] = []
 
   constructor(parent: HTMLElement) {
     this.element = document.createElement('div')
     this.element.classList.add('maplibregl-ctrl')
     this.element.innerHTML = `
-    <ul class="maplibregl-ctrl-compass-heading-debug">
-      <li><b>event</b>: <span class="event-name"></span></li>
-      <li><b>heading</b>: <span class="heading"></span></li>
-      <li><b>alpha</b>: <span class="alpha"></span></li>
-      <li><b>beta</b>: <span class="beta"></span></li>
-      <li><b>gamma</b>: <span class="gamma"></span></li>
-    </ul>
+    <dl class="maplibregl-ctrl-compass-heading-debug">
+      <dt>event</dt>
+      <dd class="event-type"></dd>
+      <dt>heading</dt>
+      <dd class="heading"></dd>
+      <dt>alpha</dt>
+      <dd class="alpha"></dd>
+      <dt>beta</dt>
+      <dd class="beta"></dd>
+      <dt>gamma</dt>
+      <dd class="gamma"></dd>
+      <dt>count</dt>
+      <dd class="count"></dd>
+    </dl>
     `
     parent.appendChild(this.element)
   }
 
-  update(event?: CompassEvent) {
-    const eventName = this.element.querySelector('.event-name')
-    const headingSpan = this.element.querySelector('.heading')
-    const alphaSpan = this.element.querySelector('.alpha')
-    const betaSpan = this.element.querySelector('.beta')
-    const gammaSpan = this.element.querySelector('.gamma')
-    if (eventName) eventName.textContent = event?.originalEvent.type || ''
-    if (headingSpan) headingSpan.textContent = `${event?.heading || ''}`
-    if (alphaSpan) alphaSpan.textContent = `${event?.originalEvent.alpha || ''}`
-    if (betaSpan) betaSpan.textContent = `${event?.originalEvent.beta || ''}`
-    if (gammaSpan) gammaSpan.textContent = `${event?.originalEvent.gamma || ''}`
+  update(e?: CompassEvent) {
+    if (!e) {
+      this.clear()
+      return
+    }
+
+    const now = Date.now()
+    this.eventTimestamps.push(now)
+    this.eventTimestamps = this.eventTimestamps.filter((ts) => now - ts <= 1000)
+
+    const eventType = e.originalEvent.type
+    const heading = e.heading != null ? e.heading.toFixed(4) : ''
+    const alpha =
+      e.originalEvent.alpha != null ? e.originalEvent.alpha.toFixed(4) : ''
+    const beta =
+      e.originalEvent.beta != null ? e.originalEvent.beta.toFixed(4) : ''
+    const gamma =
+      e.originalEvent.gamma != null ? e.originalEvent.gamma.toFixed(4) : ''
+    const count = `${this.eventTimestamps.length} events/sec`
+
+    this.updateField('.event-type', eventType)
+    this.updateField('.heading', heading)
+    this.updateField('.alpha', alpha)
+    this.updateField('.beta', beta)
+    this.updateField('.gamma', gamma)
+    this.updateField('.count', count)
+  }
+
+  private clear() {
+    const fields = [
+      '.event-type',
+      '.heading',
+      '.alpha',
+      '.beta',
+      '.gamma',
+      '.count',
+    ]
+    fields.forEach((selector) => this.updateField(selector, ''))
+  }
+
+  private updateField(selector: string, value: string) {
+    const element = this.element.querySelector(selector)
+    if (element) element.textContent = value
   }
 }
diff --git a/tests/DebugView.test.ts b/tests/DebugView.test.ts
@@ -30,7 +30,7 @@ describe('DebugView', () => {
       } as WebkitDeviceOrientationEvent,
     })
     const headingSpan = parentElement.querySelector('.heading')
-    expect(headingSpan?.textContent).toBe('180.123')
+    expect(headingSpan?.textContent).toBe('180.1230')
   })
 
   it('should handle missing elements gracefully', () => {