Method startColDrag

packages/app-core/src/lib/cm-table.ts:547–592

Drag a column to a new position.

(fromCol: number)

  /** Drag a column to a new position. */
  private startColDrag(fromCol: number): void {
    const dom = this.dom
    if (!dom) return
    this.syncFromDom()
    const wrapper = dom.querySelector<HTMLElement>('.cm-table-wrapper')
    const headers = Array.from(dom.querySelectorAll<HTMLElement>('thead th'))
    if (!wrapper || headers.length === 0) return
    dom.classList.add('is-dragging')
    const indicator = document.createElement('div')
    indicator.className = 'cm-table-drop-indicator cm-table-drop-col'
    wrapper.append(indicator)

    // Drop-onto-column semantics, mirroring rows.
    const hoveredFor = (x: number): number => {
      for (let i = 0; i < headers.length; i++) {
        if (x <= headers[i].getBoundingClientRect().right) return i
      }
      return headers.length - 1
    }
    const place = (hovered: number): void => {
      if (hovered === fromCol) {
        indicator.style.display = 'none'
        return
      }
      indicator.style.display = 'block'
      const wrect = wrapper.getBoundingClientRect()
      const rect = headers[hovered].getBoundingClientRect()
      const left = (hovered > fromCol ? rect.right : rect.left) - wrect.left
      indicator.style.left = `${left}px`
    }
    place(fromCol)

    const onMove = (e: MouseEvent): void => place(hoveredFor(e.clientX))
    const onUp = (e: MouseEvent): void => {
      window.removeEventListener('mousemove', onMove)
      window.removeEventListener('mouseup', onUp)
      indicator.remove()
      dom.classList.remove('is-dragging')
      const hovered = hoveredFor(e.clientX)
      if (hovered !== fromCol) {
        this.applyModel(moveColumn(this.model, fromCol, hovered))
      }
    }
    window.addEventListener('mousemove', onMove)
    window.addEventListener('mouseup', onUp)
  }

  private onCellKeydown(
    event: KeyboardEvent,