all files / ui/ Tool.js

3.57% Statements 1/28
0% Branches 0/16
11.11% Functions 1/9
3.7% Lines 1/27
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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120                                                                            2935×                                                                                                                                                                  
import { capitalize } from '../util'
import Component from './Component'
 
/**
  Default Tool implementation
 
  A tool must be associated with a Command, which holds all the logic, while the tool
  is just the visual representation of the command state. You can use this component
  for simple button-like tools, or extend it to create your own UI.
 
  @class
  @component
 
  @example
 
  Usually instantiated in a Toolbar or an Overlay. Usage:
 
  ```
  $$(Tool, {
    icon: 'strong',
    label: 'strong',
    style: 'outline',
    active: false,
    disabled: false
  })
  ```
 
 
  ```
  config.addCommand('strong', AnnotationCommand, { nodeType: 'strong' })
  config.addTool('strong', AnnotationTool, {
    target: 'annotations'
  })
  ```
*/
class Tool extends Component {
 
  get _isTool() {
    return true
  }
 
  /**
    Default tool rendering. You can override this method to provide your custom markup
  */
  render($$) {
    let el = $$('div')
      .addClass('se-tool')
 
    let customClassNames = this.getClassNames()
    if (customClassNames) {
      el.addClass(customClassNames)
    }
 
    let title = this.getTitle()
    if (title) {
      el.attr('title', title)
      el.attr('aria-label', title)
    }
 
    el.append(
      this.renderButton($$)
    )
    return el
  }
 
  renderButton($$) {
    let Button = this.getComponent('button')
    let btn = $$(Button, {
      icon: this.props.showIcon ? this.props.name : null,
      label: this.props.showLabel ? this.props.name : null,
      hint: this.props.showHint ? this.props.name : null,
      active: this.props.active,
      disabled: this.props.disabled,
      style: this.props.style
    }).on('click', this.onClick)
    return btn
  }
 
  getClassNames() {
    return ''
  }
 
  getTitle() {
    let labelProvider = this.context.labelProvider
    let title = this.props.title || labelProvider.getLabel(this.getName())
    // Used only by annotation tool so far
    if (this.props.mode) {
      title = [capitalize(this.props.mode), title].join(' ')
    }
    return title
  }
 
  /*
    For now always same as tool name
  */
  getCommandName() {
    return this.getName()
  }
 
  getName() {
    return this.props.name
  }
 
  onClick(e) {
    e.preventDefault()
    e.stopPropagation()
    if (!this.props.disabled) this.executeCommand()
  }
 
  /**
    Executes the associated command
  */
  executeCommand(props) {
    props = Object.assign({ mode: this.props.mode }, props)
    this.context.commandManager.executeCommand(this.getCommandName(), props)
  }
}
 
export default Tool