all files / ui/ Overlay.js

0% Statements 0/35
0% Branches 0/8
0% Functions 0/10
0% Lines 0/35
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90                                                                                                                                                                                   
import Toolbox from './Toolbox'
 
/*
  A default implementation to render the content for the overlay (aka popup) tools.
*/
class Overlay extends Toolbox {
 
  didMount() {
    super.didMount()
    if (!this.context.scrollPane) {
      throw new Error('Requires scrollPane context')
    }
    this.context.scrollPane.on('selection:positioned', this._onSelectionPositioned, this)
  }
 
  dispose() {
    super.dispose()
    this.context.scrollPane.off(this)
  }
 
  render($$) {
    let el = $$('div').addClass(this.getClassNames())
    el.addClass('sm-hidden')
    el.addClass('sm-theme-'+this.getTheme())
    let activeToolGroups = this.state.activeToolGroups
    let activeToolsEl = $$('div').addClass('se-active-tools')
 
    activeToolGroups.forEach((toolGroup) => {
      let toolGroupProps = Object.assign({}, toolGroup, {
        toolStyle: this.getToolStyle(),
        showIcons: true
      })
      activeToolsEl.append(
        $$(toolGroup.Class, toolGroupProps).ref(toolGroup.name)
      )
    })
 
    el.append(activeToolsEl)
    return el
  }
 
  getToolStyle() {
    return this.props.theme || 'plain-dark'
  }
 
  show(hints) {
    this.el.removeClass('sm-hidden')
    this._position(hints)
  }
 
  hide() {
    this.el.addClass('sm-hidden')
  }
 
  _onSelectionPositioned(hints) {
    if (this.hasActiveTools()) {
      this.el.removeClass('sm-hidden')
      let overlayWidth = this.el.htmlProp('offsetWidth')
      let selRect = hints.selectionRect
      let selectionMaxWidth = selRect.width
      // By default, Overlays are aligned center/bottom to the selection
      this.el.css('top', selRect.top + selRect.height)
      let leftPos = selRect.left + selectionMaxWidth/2 - overlayWidth/2
      // Must not exceed left bound
      leftPos = Math.max(leftPos, 0)
      // Must not exceed right bound
      let maxLeftPos = selRect.left + selectionMaxWidth + selRect.right - overlayWidth
      leftPos = Math.min(leftPos, maxLeftPos)
      this.el.css('left', leftPos)
    } else {
      this.el.addClass('sm-hidden')
    }
  }
 
  getClassNames() {
    return 'sc-overlay'
  }
 
  getTheme() {
    return 'dark'
  }
 
  getActiveToolGroupNames() {
    return this.props.toolGroups || ['overlay']
  }
 
}
 
export default Overlay