vfloater.js

/*
view/vfloater.js

Jake Read at the Center for Bits and Atoms
(c) Massachusetts Institute of Technology 2019

This work may be reproduced, modified, distributed, performed, and
displayed for any purpose, but must acknowledge the squidworks and cuttlefish projects.
Copyright is retained and must be preserved. The work is provided as is;
no warranty is provided, and users accept all liability.
*/

import DomTools from './vdom.js'

function Floater(view, grouptype) {
  // want one,
  // altho, non-ideal ...
  let dt = new DomTools(view)
  // TODO:
  /*
  ... think ... think ...
  -> button to expand, and gather? div-related?
  -> button drags as well ? titlematter does hover, not drag, two funcitons ?
  -> !!!!!!!!!!!!! button for fixed ! fixed !!!!!!!!!!!!!!!
  -> roll sim back, so that fixed / unfixed is meaningful
  -> explosions afterwards
  */
  // a floater is an individual that can be dragged, fixed/unfixed, etc
  // it is exactly the thing we give to d3 to lay out
  this.x = 0
  this.y = 0
  // want these,
  this.w = 101
  this.h = 101
  // if it has fx, fy, it is fixed
  this.r = 101 // to default,
  // these are handy,
  this.bb = {}
  this.bb.x1 = -50
  this.bb.y1 = -50
  this.bb.x2 = 51
  this.bb.y2 = 51
  // by default, no
  this.isFixed = false
  // will have this to track within simulation links
  this.simIndex = null

  // every floater has *at least* this ...
  // this is where we put the buttonz
  this.ownElement = $(`<div>`).addClass('float').get(0)
  $(this.ownElement).append(`<i class="em em-pushpin"></i>`)
  $(this.ownElement).on('click', (evt) => {
    if (this.isFixed === true) {
      this.free()
    } else {
      this.fix()
    }
  }).on('mouseover', (evt) => {
    document.body.style.cursor = 'pointer'
  }).on('mouseout', (evt) => [
    document.body.style.cursor = 'auto'
  ])
  $(view.plane).append(this.ownElement)
  // fixed <i class="em em-round_pushpin"></i>
  // open <i class="em em-pushpin"></i>

  // this is a list of elements to carry about
  this.bag = [] // gets {element, x, y}
  // fuuu
  let writeTitleMatter = (div, def) => {
    let md = false
    div.onmouseover = () => {
      def.highlight()
      if (!md) document.body.style.cursor = 'grab'
    }
    div.onmouseout = () => {
      def.unhighlight()
      if (!md) document.body.style.cursor = 'auto'
    }
    div.onmousedown = (evt) => {
      md = true
      document.body.style.cursor = 'grabbing'
      // pin to current position,
      this.fix()
      evt.preventDefault()
      evt.stopPropagation()
      let domElemMouseMove = (evt) => {
        // TRANSFORMS here to move div about on drag
        evt.preventDefault()
        evt.stopPropagation()
        // need to find that top-level view's scale transform
        this.fx += evt.movementX / view.tls
        this.fy += evt.movementY / view.tls
        this.newFix()
        this.tick()
      }

      function rmOnMouseUp(evt) {
        md = false
        document.body.style.cursor = 'auto'
        document.removeEventListener('mousemove', domElemMouseMove)
        document.removeEventListener('mouseup', rmOnMouseUp)
      }

      document.addEventListener('mousemove', domElemMouseMove)
      document.addEventListener('mouseup', rmOnMouseUp)
    }
  }

  // -------------------------------------------- TAKE

  // take up new things
  this.typeset = []
  this.take = (div, def, stall, resize) => {
    let type = ''
    // cover view-containing ... ??
    // if ($(div).is('.native') && $(div).children().contains('.view'))
    let item = {
      type: '',
      de: div,
      def: def,
      offsetX: 0,
      offsetY: 0
    }
    // always nice to do this first,
    // defs -> the dom
    $(view.plane).append(item.de)
    // only a few cases we will allow,
    if ($(div).is('.inputs')) {
      item.type = 'inputs'
    } else if ($(div).is('.outputs')) {
      item.type = 'outputs'
    } else if ($(div).is('.defcore')) {
      item.type = 'core'
    } else if ($(div).is('.nativewrap')) {
      item.type = 'native'
      // at the gitgo, set this to our current width...
      // this width thing is happening because you're rewriting the
      // so ... not a take, a swap ? !!! FFUUUUU
      // native element's wrapper ...
      this.calculateSizes()
      if (this.w < 200) {
        $(item.de).css('width', `200px`)
      } else {
        $(item.de).css('width', `${this.w}px`)
      }
      // and for non-spec'd heights,
      if (item.de.clientHeight < 10) {
        $(item.de).css('height', '200px')
      }
      // ok then, resizeable also
      dt.makeResizeable(item.de, this.onElementResize, resize)
    } else if ($(div).is('.defbutton')) {
      item.type = 'button'
    } else {
      // best guess, but..
      item.type = 'core'
      console.error('no thx, no recognized type when taking div into floater')
    }
    // put it in the baaaag
    this.typeset.push(item.type)
    this.bag.push(item)
    // (also) write the drag content, if there's a header on board
    let header = $(div).children('.header').get(0)
    if (header) {
      writeTitleMatter(header, item.def)
    }
    // just want to do this once,
    if (stall !== true) this.onChange()
  } // end take

  this.fitNativeToFloater = () => {
    this.calculateSizes(true)
    // find it,
    let nt = this.bag.find((cnd) => {
      return cnd.type === 'native'
    })
    if (!nt) {
      console.error('not finding a native element to resize here')
    } else {
      $(nt.de).css('width', `${this.w}px`)
      // want also to reset the resizing handle ...
      // kind of messy call, but
      let w = nt.de.clientWidth
      let h = nt.de.clientHeight
      let handle = $(nt.de).children('.resizehandle').get(0)
      dt.writeTransform(handle, {
        x: w,
        y: h
      })
    }
  }

  // to catch,
  this.onElementResize = () => {
    // this is a lot,
    this.onChange()
    // our parent,
    view.kick()
  }

  // GROUP TYPES:
  // 'edges' ... (core) with (outputs) and .edges || (inputs)
  // 'unwrapped' ... (core) with (outputs) and .unwrapped || (inputs)
  // 'wrapped' ... (core) with (inputs) and (outputs) and (native .view) and .wrapped
  // 'std' ... (core) with some set of (inputs) and (outputs) and (native)

  this.makeEdges = () => {
    this.grouptype === 'edges'
    this.onChange()
  }

  // -------------------------------------------- CHANGE

  this.grouptype = grouptype
  // don't want to do this all the time
  // to 'open' ... put core with outputs,
  // to 'unwrap' ... put core with inputs, it will go below
  this.onChange = () => {
    // find types,
    let core = this.bag.find((cnd) => {
      return cnd.type === 'core'
    })
    let inputs = this.bag.find((cnd) => {
      return cnd.type === 'inputs'
    })
    let outputs = this.bag.find((cnd) => {
      return cnd.type === 'outputs'
    })
    let native = this.bag.find((cnd) => {
      return cnd.type === 'native'
    })
    // possible to have many,
    let buttons = []
    for (let item of this.bag) {
      if (item.type === 'button') buttons.push(item)
    }

    let spaces = 5

    // TYPE CASES BY TYPESET
    //console.log('FLT onchange, floater has', core ? '(core)' : '', inputs ? '(inputs)' : '', outputs ? '(outputs)' : '', native ? '(native)' : '')

    if (this.grouptype === 'std') {
      // 'std' ... (core) with some set of (inputs) and (outputs) and (native)
      core.offsetX = -core.de.clientWidth
      core.offsetY = 0
      if (inputs) {
        inputs.offsetX = core.offsetX - inputs.de.clientWidth - spaces - 2
        inputs.offsetY = 0
      }
      if (outputs) {
        outputs.offsetX = spaces
        outputs.offsetY = 0
      }
      if (native) {
        // calc sizes, ignoring native
        this.calculateSizes(true)
        native.offsetX = this.bb.x1
        native.offsetY = this.bb.y2 + spaces
        // for resizing,
        if (outputs) {
          let gap = native.de.clientWidth - this.w
          if (gap > 1) {
            outputs.offsetX += gap
          }
        }
      }
    } else if (this.grouptype === 'unwrapped') {
      // 'unwrapped' ... (core) with (outputs) and .unwrapped || (inputs)
      if (core) {
        // unwrapped, left side, core, outputs, etc
        core.offsetX = -core.de.clientWidth
        core.offsetY = 0
        if (outputs) {
          outputs.offsetX = spaces
          outputs.offsetY = 0
        }
        if (native) {
          this.calculateSizes(true)
          native.offsetX = this.bb.x1
          native.offsetY = this.bb.y2 + spaces
          if (outputs) {
            let gap = native.de.clientWidth - this.w
            if (gap > 1) {
              outputs.offsetX += gap
            }
          }
        }
      } else {
        // unwrapped, right side, it's the lonely inputs
        if (inputs) {
          inputs.offsetX = -inputs.de.clientWidth
          inputs.offsetY = 0
        }
      }
    } else if (this.grouptype === 'wrapped') {
      // should have 'em all let's just wyld out
      // the view attached is king,
      let ntw = native.de.clientWidth
      let nth = native.de.clientHeight
      // left ...
      native.offsetX = -core.de.clientWidth
      native.offsetY = core.de.clientHeight + spaces
      // core
      core.offsetX = -core.de.clientWidth
      core.offsetY = 0
      // inputs, well left
      inputs.offsetX = core.offsetX - inputs.de.clientWidth - spaces
      inputs.offsetY = $(inputs.de).children('.header').get(0).clientHeight + spaces + native.offsetY
      // ouputs, as is tradition
      outputs.offsetX = ntw + spaces + core.offsetX
      outputs.offsetY = inputs.offsetY
    } else if (this.grouptype === 'edges') {
      if(core && outputs){
        this.edgetype = 'left'
        // and on top of self,
        core.offsetX = -core.de.clientWidth
        core.offsetY = -core.de.clientHeight - 25
        outputs.offsetX = core.offsetX
        outputs.offsetY = core.offsetY - outputs.de.clientHeight - spaces
      } else {
        this.edgetype = 'right'
        inputs.offsetX = -inputs.de.clientWidth
        inputs.offsetY = -inputs.de.clientHeight - 25
        // aaand
        view.msgbox.setTopMargin( - inputs.offsetY + 20)
      }
    } else {
      console.error(`this floater grouptype not written or recognized: '${this.grouptype}'`)
    }

    // now we can cover buttons, using core offsets
    // cover buttons, if(buttons.length){
    if (buttons.length > 0) {
      if (!core) console.error('watch buttons not-on core?')
      let inc = 0
      for (let btn of buttons) {
        btn.offsetX = core.offsetX + inc
        btn.offsetY = -20 - core.offsetY
        inc += 20
      }
    }
    // ok,

    // now we can execute this,
    this.moveTo()
    // oy oy oy
  } // end onChange

  let writePosition = (element, x, y) => {
    $(element).css('left', `${x}px`).css('top', `${y}px`)
  }

  let readPosition = (element) => {
    let it = $(element)
    return {
      x: parseInt(it.css('left')),
      y: parseInt(it.css('top'))
    }
  }

  let readSize = (element) => {
    return {
      w: element.clientWidth,
      h: element.clientHeight
    }
  }

  this.moveTo = (x, y, backdoor) => {
    // but still probably want to check our offsets,
    if (this.isFixed && !backdoor) {
      this.x = this.fx
      this.y = this.fy
    }
    // to just draw new position, run with no args
    if (x === undefined) {
      x = this.x
      y = this.y
    } else {
      this.x = x
      this.y = y
    }
    // will return this ...
    let desire = {
      x: 0,
      y: 0
    }
    // check bounds,
    if(!view.isTopLevel){
      // bummer to do so many times !
      let bounds = view.getCurrentBounds()
      this.calculateSizes()
      //
      if(this.grouptype === 'edges'){
        //console.log('bounds', bounds)
        // x1, y1, x2, y2, w, h
        if(this.edgetype === 'left'){
          this.x = - this.bb.x1
          this.y = - this.bb.y1 + 17 + 5
        } else {
          this.x = bounds.x2 - this.bb.x2 - 2
          this.y = bounds.y1 - this.bb.y1 + 17 + 5
        }
      } else {
        //console.log('place bounds', this.bb)
        //console.log('bounds', bounds)
        // x needs to contend with offset,
        // this.bb.x1 probably -ve,
        // this.bb.y1 probably -ve,
        // want to track, but won't push things left or up,
        this.x = Math.max(bounds.x1 - this.bb.x1, this.x) // lower bounds
        this.y = Math.max(bounds.y1 - this.bb.y1, this.y)

        // want-right term,
        let rbnd = bounds.x2 - this.bb.x2
        if(this.x > rbnd){
          desire.x = this.x - rbnd
          this.x = rbnd
          // wants to go right
        }
        // want-down term,
        let lbnd = bounds.y2 - this.bb.y2
        if(this.y > lbnd){
          desire.y = this.y - lbnd
          this.y = lbnd
          // wants to go down
        }
      }
    }
    // do work
    writePosition(this.ownElement, x - 16.5, y - 20)
    for (let item of this.bag) {
      writePosition(item.de, this.x + item.offsetX, this.y + item.offsetY)
    }
    // aaaand tell em what we waaaaant
    return desire
  }

  this.newFix = () => {
    this.moveTo(this.fx, this.fy, true)
  }

  // as is tradition, we'll keep things local,
  // and just make sure we re-calculate during relevant events... ?
  this.calculateSizes = (nonNative) => {
    // from core of xy, values like
    //
    //   * -------------- (y1) -------- *
    //   |                 |            |
    //   |(x1) --------- (x,y) ---- (x2)|
    //   |                |             |
    //   |                |             |
    //   * ------------ (y2) ---------- *

    let x1 = 0
    let y1 = 0
    let x2 = 0
    let y2 = 0
    for (let item of this.bag) {
      // items are str8 cut dom elements,
      if (nonNative && item.type === 'native') continue
      let wt = readSize(item.de)
      // we know item offsets, so
      if (item.offsetX < x1) x1 = item.offsetX
      if (item.offsetY < y1) y1 = item.offsetY
      if (item.offsetX + wt.w > x2) x2 = item.offsetX + wt.w
      if (item.offsetY + wt.h > y2) y2 = item.offsetY + wt.h
      // corners
    }
    this.bb.x1 = x1
    this.bb.y1 = y1
    this.bb.x2 = x2
    this.bb.y2 = y2
    // ok,
    this.w = x2 - x1
    this.h = y2 - y1
    // also,
    this.r = Math.max(this.w, this.h) / 2
    // check,
    let aspect = this.w / this.h
    if (aspect > 8 || aspect < 0.125) {
      //console.error(`warning: deviously large aspect for 'circular' collisions: ${aspect}, logging floater`, this)
    }
  }

  this.tick = () => {
    // will use to bother the simulation
    view.tick()
  }

  this.free = () => {
    this.x = this.fx
    this.y = this.fy
    delete this.fx
    delete this.fy
    this.isFixed = false
    $(this.ownElement).html(`<i class="em em-pushpin"></i>`)
    this.tick()
  }

  this.fix = () => {
    $(this.ownElement).html(`<i class="em em-round_pushpin"></i>`)
    this.isFixed = true
    this.fx = this.x
    this.fy = this.y
    this.moveTo(this.fx, this.fy, true)
  }

  this.fixTo = (x, y) => {
    this.x = x
    this.y = y
    this.fix()
  }

  // RIP
  this.cleanup = () => {
    // js deletes things that are unreachable, so
    // there are a few objects that are on the canvas we want to get rid of
    $(this.ownElement).remove()
    // also, any handle added to a native element
    // not being able to search by js subset is kind of a bummer here, but
    let native = this.bag.find((cnd) => {
      return cnd.type === 'native'
    })
    if (native) {
      $(native.de).children('.resizehandle').remove()
    }
  }
  //
}

export default Floater