code: function () {
      // constants
      this.HOVER_EVENT = 'hover-start'
      this.UNHOVER_EVENT = 'hover-end'
      this.GRAB_EVENT = 'grab-start'
      this.UNGRAB_EVENT = 'grab-end'
      this.STRETCH_EVENT = 'stretch-start'
      this.UNSTRETCH_EVENT = 'stretch-end'
      this.DRAG_EVENT = 'drag-start'
      this.UNDRAG_EVENT = 'drag-end'
      this.DRAGOVER_EVENT = 'dragover-start'
      this.UNDRAGOVER_EVENT = 'dragover-end'
      this.DRAGDROP_EVENT = 'drag-drop'
  
      // links to other systems/components
      this.otherSuperHand = null
  
      // state tracking - global event handlers (GEH)
      this.gehDragged = new Set()
      this.gehClicking = new Set()
  
      // state tracking - reaction components
      this.hoverEls = []
      this.hoverElsIntersections = []
      this.prevCheckTime = null
      this.state = new Map()
      this.dragging = false
  
      this.unHover = this.unHover.bind(this)
      this.unWatch = this.unWatch.bind(this)
      this.onHit = this.onHit.bind(this)
      this.onGrabStartButton = this.onGrabStartButton.bind(this)
      this.onGrabEndButton = this.onGrabEndButton.bind(this)
      this.onStretchStartButton = this.onStretchStartButton.bind(this)
      this.onStretchEndButton = this.onStretchEndButton.bind(this)
      this.onDragDropStartButton = this.onDragDropStartButton.bind(this)
      this.onDragDropEndButton = this.onDragDropEndButton.bind(this)
      this.system.registerMe(this)
    }
docs: Called once when component is attached. Generally for initial setup.