path: root/ui/form/ListScrollForm.js

const ansi = require('../../util/ansi')
const telc = require('../../util/telchars')
const unic = require('../../util/unichars')

const DisplayElement = require('../DisplayElement')
const Form = require('./Form')

module.exports = class ListScrollForm extends Form {
  // A form that lets the user scroll through a list of items. It
  // automatically adjusts to always allow the selected item to be visible.

  constructor(layoutType = 'vertical', scrollBarShown = true) {
    super()

    this.layoutType = layoutType

    this.scrollItems = 0

    this.scrollBar = new ScrollBar(this)
    this.scrollBarShown = scrollBarShown
    if (scrollBarShown) {
      this.addChild(this.scrollBar)
    }
  }

  fixLayout() {
    // The scrollItems property represents the item to the very left of where
    // we've scrolled, so we know right away that none of those will be
    // visible and we won't bother iterating over them.
    const itemsPastScroll = this.inputs.slice(this.scrollItems)

    // We do need to hide them, though.
    const itemsBeforeScroll = this.inputs.slice(0, this.scrollItems)
    for (const item of itemsBeforeScroll) {
      item.visible = false
    }

    // This variable stores how far along the respective axis (as defined by
    // posProp) the next element should be.
    let nextPos = 0

    for (const item of itemsPastScroll) {
      item[this.posProp] = nextPos
      nextPos += item[this.sizeProp]

      // By default, the item should be visible..
      item.visible = true

      // ..but the item's far edge is past the form's far edge, it isn't
      // fully visible and should be hidden.
      if (item[this.posProp] + item[this.sizeProp] > this.formEdge) {
        item.visible = false
      }

      // Same deal goes for the close edge. We can check it against 0 since
      // the close edge of the form's content is going to be 0, of course!
      if (item[this.posProp] < 0) {
        item.visible = false
      }
    }
  }

  keyPressed(keyBuf) {
    let ret

    handleKeyPress: {
      if (this.layoutType === 'horizontal') {
        if (telc.isLeft(keyBuf)) {
          this.previousInput()
          ret = false; break handleKeyPress
        } else if (telc.isRight(keyBuf)) {
          this.nextInput()
          ret = false; break handleKeyPress
        }
      } else if (this.layoutType === 'vertical') {
        if (telc.isUp(keyBuf)) {
          this.previousInput()
          ret = false; break handleKeyPress
        } else if (telc.isDown(keyBuf)) {
          this.nextInput()
          ret = false; break handleKeyPress
        }
      }

      ret = super.keyPressed(keyBuf)
    }

    this.scrollSelectedElementIntoView()

    return ret
  }

  scrollSelectedElementIntoView() {
    const sel = this.inputs[this.curIndex]

    // If the item is ahead of our view (either to the right of or below),
    // we should move the view so that the item is the farthest right (of all
    // the visible items).
    if (this.getItemPos(sel) > this.formEdge + this.scrollSize) {
      this.scrollElementIntoEndOfView(sel)
    }

    // Adjusting the number of scroll items is much simpler to deal with if
    // the item is behind our view. Since the item's behind, we need to move
    // the scroll to be immediately behind it, which is simple since we
    // already have its index.
    if (this.getItemPos(sel) <= this.scrollSize) {
      this.scrollItems = this.curIndex
    }

    this.fixLayout()
  }

  firstInput(...args) {
    this.scrollItems = 0

    super.firstInput(...args)
  }

  getScrollPositionOfElementAtEndOfView(element) {
    // We can decide how many items to scroll past by moving forward until
    // the item's far edge is visible.
    let edge = this.formEdge
    let i = 0
    for (; i < this.inputs.length; i++) {
      if (this.getItemPos(element) <= edge) break

      edge += this.inputs[i][this.sizeProp]
    }
    return i
  }

  scrollElementIntoEndOfView(element) {
    this.scrollItems = this.getScrollPositionOfElementAtEndOfView(element)
  }

  scrollToBeginning() {
    this.scrollItems = 0
    this.fixLayout()
  }

  scrollToEnd() {
    this.scrollElementIntoEndOfView(this.inputs[this.inputs.length - 1])
    this.fixLayout()
  }

  getScrollItemsLength() {
    const lastInput = this.inputs[this.inputs.length - 1]
    return this.getScrollPositionOfElementAtEndOfView(lastInput)
  }

  getItemPos(item) {
    // Gets the position of the item in an unscrolled view.

    return this.inputs.slice(0, this.inputs.indexOf(item) + 1)
      .reduce((a, b) => a + b[this.sizeProp], 0)
  }

  get sizeProp() {
    // The property used to measure the size of an item. If the layoutType
    // isn't valid (that is, 'horizontal' or 'vertical'), it'll return null.

    return (
      this.layoutType === 'horizontal' ? 'w' :
      this.layoutType === 'vertical' ? 'h' :
      null
    )
  }

  get posProp() {
    // The property used to position an item. Like sizeProp, returns null if
    // the layoutType isn't valid.

    return (
      this.layoutType === 'horizontal' ? 'x' :
      this.layoutType === 'vertical' ? 'y' :
      null)
  }

  get edgeProp() {
    // The property used to get the far edge of the property. As with
    // sizeProp, if the layoutType doesn't have an expected value, it'll
    // return null.

    return (
      this.layoutType === 'horizontal' ? 'right' :
      this.layoutType === 'vertical' ? 'bottom' :
      null)
  }

  get formEdge() {
    // Returns the value of the far edge of this form. Items farther in the
    // list (up to the edge) will be closer to this edge.

    return (
      this.layoutType === 'horizontal' ? this.contentW :
      this.layoutType === 'vertical' ? this.contentH :
      null)
  }

  get scrollSize() {
    // Gets the actual length made up by all of the items currently scrolled
    // past.

    return this.inputs.slice(0, this.scrollItems)
      .reduce((a, b) => a + b[this.sizeProp], 0)
  }

  get contentW() {
    if (this.scrollBarShown && this.layoutType === 'vertical') {
      return this.w - 1
    } else {
      return this.w
    }
  }

  get contentH() {
    if (this.scrollBarShown && this.layoutType === 'horizontal') {
      return this.h - 1
    } else {
      return this.h
    }
  }
}

class ScrollBar extends DisplayElement {
  constructor(listScrollForm) {
    super()

    this.listScrollForm = listScrollForm
  }

  fixLayout() {
    // Normally we'd subtract one from contentW/contentH when setting the x/y
    // position, but the scrollbar is actually displayed OUTSIDE of (adjacent
    // to) the parent's content area.
    if (this.listScrollForm.layoutType === 'vertical') {
      this.h = this.listScrollForm.contentH
      this.w = 1
      this.x = this.listScrollForm.contentW
      this.y = 0
    } else {
      this.h = 1
      this.w = this.listScrollForm.contentW
      this.x = 0
      this.y = this.listScrollForm.contentH
    }
  }

  drawTo(writable) {
    // Uuuurgh
    this.fixLayout()

    // TODO: Horizontal layout! Not functionally a lot different, but I'm too
    // lazy to write a test UI for it right now.

    // - 2 for extra UI elements (arrows)
    const totalLength = this.h - 2
    const totalScroll = this.listScrollForm.getScrollItemsLength()
    const currentScroll = this.listScrollForm.scrollItems
    const handlePosition = Math.floor(totalLength / (totalScroll + 1) * currentScroll)
    const handleLength = totalLength / (totalScroll + 1)

    const canScrollBackwards = (currentScroll > 0)
    const canScrollForwards = (currentScroll < totalScroll)

    if (this.listScrollForm.layoutType === 'vertical') {
      const start = this.absTop + handlePosition + 1
      for (let i = 0; i < handleLength; i++) {
        writable.write(ansi.moveCursor(start + i, this.absLeft))
        writable.write(unic.BOX_V_DOUBLE)
      }

      if (canScrollBackwards) {
        writable.write(ansi.moveCursor(this.absTop, this.absLeft))
        writable.write(unic.ARROW_UP_DOUBLE)
      }

      if (canScrollForwards) {
        writable.write(ansi.moveCursor(this.absBottom, this.absLeft))
        writable.write(unic.ARROW_DOWN_DOUBLE)
      }
    }
  }
}