feat(web): extract ui-services package

packages/ui-services/src/IO/IOService.ts

@@ -0,0 +1,212 @@
+import { removeFromArray } from '@standardnotes/snjs'
+
+export enum KeyboardKey {
+  Tab = 'Tab',
+  Backspace = 'Backspace',
+  Up = 'ArrowUp',
+  Down = 'ArrowDown',
+  Left = 'ArrowLeft',
+  Right = 'ArrowRight',
+  Enter = 'Enter',
+  Escape = 'Escape',
+  Home = 'Home',
+  End = 'End',
+}
+
+export enum KeyboardModifier {
+  Shift = 'Shift',
+  Ctrl = 'Control',
+  /** ⌘ key on Mac, ⊞ key on Windows */
+  Meta = 'Meta',
+  Alt = 'Alt',
+}
+
+enum KeyboardKeyEvent {
+  Down = 'KeyEventDown',
+  Up = 'KeyEventUp',
+}
+
+type KeyboardObserver = {
+  key?: KeyboardKey | string
+  modifiers?: KeyboardModifier[]
+  onKeyDown?: (event: KeyboardEvent) => void
+  onKeyUp?: (event: KeyboardEvent) => void
+  element?: HTMLElement
+  elements?: HTMLElement[]
+  notElement?: HTMLElement
+  notElementIds?: string[]
+  notTags?: string[]
+}
+
+export class IOService {
+  readonly activeModifiers = new Set<KeyboardModifier>()
+  private observers: KeyboardObserver[] = []
+
+  constructor(private isMac: boolean) {
+    window.addEventListener('keydown', this.handleKeyDown)
+    window.addEventListener('keyup', this.handleKeyUp)
+    window.addEventListener('blur', this.handleWindowBlur)
+  }
+
+  public deinit() {
+    this.observers.length = 0
+    window.removeEventListener('keydown', this.handleKeyDown)
+    window.removeEventListener('keyup', this.handleKeyUp)
+    window.removeEventListener('blur', this.handleWindowBlur)
+    ;(this.handleKeyDown as unknown) = undefined
+    ;(this.handleKeyUp as unknown) = undefined
+    ;(this.handleWindowBlur as unknown) = undefined
+  }
+
+  private addActiveModifier = (modifier: KeyboardModifier | undefined): void => {
+    if (!modifier) {
+      return
+    }
+
+    switch (modifier) {
+      case KeyboardModifier.Meta: {
+        if (this.isMac) {
+          this.activeModifiers.add(modifier)
+        }
+        break
+      }
+      case KeyboardModifier.Ctrl: {
+        if (!this.isMac) {
+          this.activeModifiers.add(modifier)
+        }
+        break
+      }
+      default: {
+        this.activeModifiers.add(modifier)
+        break
+      }
+    }
+  }
+
+  private removeActiveModifier = (modifier: KeyboardModifier | undefined): void => {
+    if (!modifier) {
+      return
+    }
+
+    this.activeModifiers.delete(modifier)
+  }
+
+  public cancelAllKeyboardModifiers = (): void => {
+    this.activeModifiers.clear()
+  }
+
+  public handleComponentKeyDown = (modifier: KeyboardModifier | undefined): void => {
+    this.addActiveModifier(modifier)
+  }
+
+  public handleComponentKeyUp = (modifier: KeyboardModifier | undefined): void => {
+    this.removeActiveModifier(modifier)
+  }
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    this.updateAllModifiersFromEvent(event)
+    this.notifyObserver(event, KeyboardKeyEvent.Down)
+  }
+
+  private handleKeyUp = (event: KeyboardEvent): void => {
+    this.updateAllModifiersFromEvent(event)
+    this.notifyObserver(event, KeyboardKeyEvent.Up)
+  }
+
+  private updateAllModifiersFromEvent(event: KeyboardEvent): void {
+    for (const modifier of Object.values(KeyboardModifier)) {
+      if (event.getModifierState(modifier)) {
+        this.addActiveModifier(modifier)
+      } else {
+        this.removeActiveModifier(modifier)
+      }
+    }
+  }
+
+  handleWindowBlur = (): void => {
+    for (const modifier of this.activeModifiers) {
+      this.activeModifiers.delete(modifier)
+    }
+  }
+
+  modifiersForEvent(event: KeyboardEvent): KeyboardModifier[] {
+    const allModifiers = Object.values(KeyboardModifier)
+    const eventModifiers = allModifiers.filter((modifier) => {
+      // For a modifier like ctrlKey, must check both event.ctrlKey and event.key.
+      // That's because on keyup, event.ctrlKey would be false, but event.key == Control would be true.
+      const matches =
+        ((event.ctrlKey || event.key === KeyboardModifier.Ctrl) && modifier === KeyboardModifier.Ctrl) ||
+        ((event.metaKey || event.key === KeyboardModifier.Meta) && modifier === KeyboardModifier.Meta) ||
+        ((event.altKey || event.key === KeyboardModifier.Alt) && modifier === KeyboardModifier.Alt) ||
+        ((event.shiftKey || event.key === KeyboardModifier.Shift) && modifier === KeyboardModifier.Shift)
+
+      return matches
+    })
+
+    return eventModifiers
+  }
+
+  private eventMatchesKeyAndModifiers(
+    event: KeyboardEvent,
+    key: KeyboardKey | string | undefined,
+    modifiers: KeyboardModifier[] = [],
+  ): boolean {
+    const eventModifiers = this.modifiersForEvent(event)
+    if (eventModifiers.length !== modifiers.length) {
+      return false
+    }
+    for (const modifier of modifiers) {
+      if (!eventModifiers.includes(modifier)) {
+        return false
+      }
+    }
+    // Modifers match, check key
+    if (!key) {
+      return true
+    }
+    // In the browser, shift + f results in key 'f', but in Electron, shift + f results in 'F'
+    // In our case we don't differentiate between the two.
+    return key.toLowerCase() === event.key.toLowerCase()
+  }
+
+  notifyObserver(event: KeyboardEvent, keyEvent: KeyboardKeyEvent): void {
+    const target = event.target as HTMLElement
+    for (const observer of this.observers) {
+      if (observer.element && event.target !== observer.element) {
+        continue
+      }
+
+      if (observer.elements && !observer.elements.includes(target)) {
+        continue
+      }
+
+      if (observer.notElement && observer.notElement === event.target) {
+        continue
+      }
+
+      if (observer.notElementIds && observer.notElementIds.includes(target.id)) {
+        continue
+      }
+
+      if (observer.notTags && observer.notTags.includes(target.tagName)) {
+        continue
+      }
+
+      if (this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)) {
+        const callback = keyEvent === KeyboardKeyEvent.Down ? observer.onKeyDown : observer.onKeyUp
+        if (callback) {
+          callback(event)
+        }
+      }
+    }
+  }
+
+  addKeyObserver(observer: KeyboardObserver): () => void {
+    this.observers.push(observer)
+
+    const thislessObservers = this.observers
+    return () => {
+      removeFromArray(thislessObservers, observer)
+    }
+  }
+}