orchestra-music-score/src/helpers/section-hint.ts

import { getBoundingBoxByverticalNote } from '/src/pages/detail/helpers'
import SettingState from '/src/pages/detail/setting-state'
import { formatZoom } from './utils'

export default class SectionHint {
  constructor() {
    // this.parentEl = parentEl || document.body
    this.init()
  }

  currentNote = null

  // parentEl = document.body

  el = document.createElement('div')

  span = document.createElement('span')

  init() {
    this.el.id = 'section-hint' + Math.floor(Math.random() * 100000)
    this.hide()
    // console.log(this.parentEl)
    // this.parentEl.appendChild(this.el)
  }

  showForElement(currentNote: any) {
    if (this.currentNote === currentNote) {
      return
    }
    if (!this.el) {
      this.el = document.createElement('div')
      this.init()
      this.show()
    }
    this.currentNote = currentNote
    const stave = getBoundingBoxByverticalNote(currentNote)
    const container = document.querySelector('#osmdSvgPage1')
    if (stave) {
      const { x, y, width, height } = stave
      this.el.id = 'custom-cursor-bg-hint'
      this.el.style.position = 'absolute'
      this.el.style.top = formatZoom(y) + 'px'
      this.el.style.left = formatZoom(x) + 'px'
      this.el.style.width = formatZoom(width) + 'px'
      this.el.style.height = formatZoom(height) + 'px'
      this.el.style.zIndex = '-1'
      // currentNote.osdmContext?.cursor?.container.appendChild(this.el)
      container?.parentNode?.appendChild(this.el)
    }
  }

  hide() {
    this.el.style.display = 'none'
  }

  show() {
    this.el.style.display = ''
  }

  destroy() {
    this.currentNote = null
    this.hide()
    // this.el.remove()
  }
}

export interface ISectionHint {
  el: HTMLDivElement
  init: () => void
  hide: () => void
  show: () => void
  destroy: () => void
  showForElement: (currentNote: any) => void
}