[WIP] Clock display

package.json

@@ -10,7 +10,7 @@
     ]
   },
   "scripts": {
-    "dev": "lerna run dev --parallel --scope @hedron/engine --scope @hedron/desktop",
+    "dev": "lerna run dev --parallel --scope @hedron/clock --scope @hedron/engine --scope @hedron/desktop",
     "dev:clock": "lerna run dev --parallel --scope @hedron/clock --scope @hedron/clock-test-app",
     "storybook": "lerna run storybook --scope @hedron/desktop",
     "build:engine": "lerna run build --scope @hedron/engine",

packages/clock-test-app/src/App.tsx

@@ -25,6 +25,14 @@ function App() {
   useEffect(() => {
     clockRef.current = new Clock(DEFAULT_BPM)
 
+    const unsubscribeBeats = clockRef.current.onNewBeat((beat) => {
+      $text('beat', beat)
+    })
+
+    const unsubscribeBpm = clockRef.current.onBpmChange((bpm) => {
+      $text('smoothedBpm', bpm)
+    })
+
     let raf = 0
 
     const midiClockListener = new MidiClockListener({
@@ -55,9 +63,7 @@ function App() {
       }
 
       $text('delta', d)
-      $text('smoothedBpm', clockRef.current!.smoothedBpm)
       $text('bpm', Math.round(clockRef.current!.bpm * 100) / 100)
-      $text('beat', clockRef.current!.beatCount)
       $text('beatPulseOffset', Math.round(clockRef.current!.beatPulseOffset * 10000) / 10000)
 
       $y('saw', (d * H) % H)
@@ -74,6 +80,8 @@ function App() {
     return () => {
       midiClockListener.clearMidiEventListeners()
       cancelAnimationFrame(raf)
+      unsubscribeBeats()
+      unsubscribeBpm()
     }
   }, [])
 

packages/clock/src/index.ts

@@ -27,12 +27,16 @@ export class Clock {
   private _smoothedBpm: number = 0
   private _smoothedBeatPulseOffset: number = 0
   private _lastBeatTimestamp: number | null = null
+  private _onNewBeat?: (beatCount: number) => void
+  private _onBpmChange?: (bpm: number) => void
+  private _onIsRunningChange?: (isRunning: boolean) => void
 
   /**
    * @param bpm Beats per minute
    */
   constructor(bpm: number = 128) {
     this.bpm = bpm
+    this.smoothedBpm = bpm
   }
 
   /**
@@ -51,7 +55,12 @@ export class Clock {
         this._beatsPerMs * (timestamp - this._lastTimestamp) * (1 + this._beatPulseOffset)
       this._beatDelta += deltaInc
       this._beatPulseComparisonDelta += deltaInc
-      this._beatCount = Math.floor(this._beatDelta % 4)
+
+      const newBeatCount = Math.floor(this._beatDelta % 4)
+      if (newBeatCount !== this._beatCount) {
+        this._onNewBeat?.(newBeatCount)
+        this._beatCount = newBeatCount
+      }
 
       requestAnimationFrame(this.tick)
 
@@ -66,6 +75,8 @@ export class Clock {
   set bpm(bpm: number) {
     this._bpm = bpm
     this._beatsPerMs = bpm / MS_IN_MINUTE
+
+    this.smoothedBpm = bpm
   }
 
   /**
@@ -76,6 +87,14 @@ export class Clock {
     return this._bpm
   }
 
+  /**
+   * Gets whether the clock is currently running.
+   * @returns Whether the clock is currently running.
+   */
+  get isRunning() {
+    return this._isRunning
+  }
+
   /**
    * Gets the current beat delta, a value that increments fractionally every frame, at a rate of exactly 1 per beat.
    * @returns The current beat delta
@@ -109,6 +128,14 @@ export class Clock {
     return this._smoothedBpm
   }
 
+  private set smoothedBpm(bpm: number) {
+    if (this._smoothedBpm !== bpm) {
+      this._onBpmChange?.(bpm)
+    }
+
+    this._smoothedBpm = bpm
+  }
+
   /**
    * Gets the smoothed beat pulse offset. Only useful for very detailed output of info (e.g. dev stuff)
    * @returns The smoothed beat pulse offset
@@ -131,6 +158,7 @@ export class Clock {
 
     this._lastTimestamp = performance.now()
     this._isRunning = true
+    this._onIsRunningChange?.(true)
 
     requestAnimationFrame(this.tick)
   }
@@ -147,6 +175,7 @@ export class Clock {
    */
   public stop = () => {
     this._isRunning = false
+    this._onIsRunningChange?.(false)
   }
 
   /**
@@ -161,6 +190,8 @@ export class Clock {
     this._lastPulseTimestamp = null
     this._shouldStartOnNextTimingPulse = false
     this._timingPulseCount = 0
+
+    this._onNewBeat?.(0)
   }
 
   /**
@@ -209,7 +240,7 @@ export class Clock {
 
     // lock BPM to whole number because we're just apes tapping without built in oscilators
     this.bpm = Math.round(MS_IN_MINUTE / averageDelta)
-    this._smoothedBpm = this.bpm
+    this.smoothedBpm = this.bpm
 
     this._lastTempoTap = now
   }
@@ -250,11 +281,52 @@ export class Clock {
     if (this._timingPulseCount % PPQN === 0) {
       if (this._lastBeatTimestamp !== null) {
         const delta = now - this._lastBeatTimestamp
-        this._smoothedBpm = Math.round(MS_IN_MINUTE / delta)
+        this.smoothedBpm = Math.round(MS_IN_MINUTE / delta)
       }
       this._lastBeatTimestamp = now
     }
 
     this._lastPulseTimestamp = now
   }
+
+  /**
+   * Register a callback to be called every time a new beat is detected.
+   * @param callback The callback
+   * @returns A cleanup function to unregister the callback
+   */
+  public onNewBeat = (callback: (beatCount: number) => void) => {
+    this._onNewBeat = (beat: number) => {
+      if (beat >= 0) {
+        callback(beat + 1)
+      }
+    }
+    this._onNewBeat(this._beatCount)
+
+    return () => {
+      this._onNewBeat = undefined
+    }
+  }
+
+  /**
+   * Register a callback to be called every time smoothed BPM changes.
+   * @param callback The callback
+   * @returns A cleanup function to unregister the callback
+   */
+  public onBpmChange = (callback: (bpm: number) => void) => {
+    this._onBpmChange = callback
+    this._onBpmChange(this._smoothedBpm)
+
+    return () => {
+      this._onBpmChange = undefined
+    }
+  }
+
+  public onIsRunningChange = (callback: (isRunning: boolean) => void) => {
+    this._onIsRunningChange = callback
+    this._onIsRunningChange(this._isRunning)
+
+    return () => {
+      this._onIsRunningChange = undefined
+    }
+  }
 }

packages/desktop/package.json

@@ -23,7 +23,8 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "@hedron/engine": "^1.0.0-alpha.1",
+    "@hedron/clock": "workspace:^",
+    "@hedron/engine": "workspace:^",
     "@redux-devtools/extension": "^3.3.0",
     "@tomjs/electron-devtools-installer": "^2.3.2",
     "@uiw/react-color": "^2.3.4",

packages/desktop/src/renderer/components/App/App.module.css

@@ -13,3 +13,12 @@
 .right {
   flex: 1;
 }
+
+.widgetStrip {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.widgetItem {
+  padding: 0.25rem 0;
+}

packages/desktop/src/renderer/components/App/App.tsx

@@ -1,6 +1,8 @@
 // import { Audio } from '../Audio'
 import c from './App.module.css'
+import { GlobalClock } from '@components/GlobalClock/GlobalClock'
 import { GlobalDialogs } from '@components/GlobalDialogs/GlobalDialogs'
+import { PerformanceStats } from '@components/PerformanceStats/PerformanceStats'
 import { Viewer } from '@components/Viewer'
 import { WorkArea } from '@components/WorkArea/WorkArea'
 
@@ -9,9 +11,13 @@ export const App = (): JSX.Element => {
     <div className={c.wrapper}>
       <div className={c.left}>
         <Viewer />
-        {/* <Audio /> */}
-        {/* <Overview stats={stats} />
-      <PanelDragger onHandleDrag={onLeftDrag} position={leftWidth} /> */}
+        <div className={c.widgetStrip}>
+          <PerformanceStats />
+          <div className={c.widgetItem}>
+            <GlobalClock />
+          </div>
+          {/* <Audio /> */}
+        </div>
       </div>
       <div className={c.right}>
         <WorkArea />

packages/desktop/src/renderer/components/GlobalClock/GlobalClock.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { ClockDisplay } from '@components/core/ClockDisplay/ClockDisplay'
+import { clock } from '@renderer/engine'
+
+const onBpmEdit = (bpm: number) => {
+  clock.bpm = bpm
+}
+
+export const GlobalClock = () => {
+  const [bpm, setBpm] = useState<number>(0)
+  const [beat, setBeat] = useState<number>(1)
+  const [isRunning, setIsRunning] = useState<boolean>(false)
+
+  useEffect(() => {
+    const unregisterBeats = clock.onNewBeat(setBeat)
+    const unregisterBpm = clock.onBpmChange(setBpm)
+    const unregisterIsRunning = clock.onIsRunningChange(setIsRunning)
+
+    return () => {
+      unregisterBeats()
+      unregisterBpm()
+      unregisterIsRunning()
+    }
+  }, [])
+
+  return (
+    <ClockDisplay
+      isRunning={isRunning}
+      bpm={bpm}
+      beat={beat}
+      onBpmEdit={onBpmEdit}
+      onStartClick={clock.start}
+      onStopClick={clock.stop}
+      onTapClick={clock.sendTempoTap}
+      onResetClick={clock.reset}
+    />
+  )
+}

packages/desktop/src/renderer/components/PerformanceStats/PerformanceStats.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+import { performanceMonitor } from '@renderer/engine'
+
+export const PerformanceStats = () => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.appendChild(performanceMonitor.dom)
+      performanceMonitor.dom.setAttribute('style', '')
+    }
+
+    return () => {
+      performanceMonitor.dom.remove()
+    }
+  }, [])
+
+  return <div ref={ref} />
+}

packages/desktop/src/renderer/components/core/Button/Button.module.css

@@ -18,40 +18,55 @@
   &:hover {
     background: var(--actionColor1Hover);
   }
+}
 
-  &:global(.secondary) {
-    background: var(--actionColor2);
+.secondary {
+  background: var(--actionColor2);
 
-    &:hover {
-      background: var(--actionColor2Hover);
-    }
+  &:hover {
+    background: var(--actionColor2Hover);
   }
+}
 
-  &:global(.neutral) {
-    border: 1px solid var(--lineColor2);
-    color: var(--textColorLight1);
-    background: var(--bgColorDark1);
+.ghost {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
 
-    &:hover {
-      background: var(--bgColorDark2);
-    }
+  &:hover {
+    background: var(--bgColorDark4);
   }
+}
 
-  &:global(.danger) {
-    color: var(--textColorLight1);
-    background: var(--dangerColor);
+.neutral {
+  border: 1px solid var(--lineColor2);
+  color: var(--textColorLight1);
+  background: var(--bgColorDark1);
 
-    &:hover {
-      background: var(--dangerColorHover);
-    }
+  &:hover {
+    background: var(--bgColorDark2);
   }
+}
 
-  &:global(.slim) {
-    padding: 0.25rem;
-  }
+.danger {
+  color: var(--textColorLight1);
+  background: var(--dangerColor);
 
-  .icon {
-    font-size: 1.1em;
-    line-height: 1.1;
+  &:hover {
+    background: var(--dangerColorHover);
   }
 }
+
+.slim {
+  padding: 0.25rem;
+}
+
+.icon {
+  font-size: 1.1em;
+  line-height: 1.1;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}