function onAnnotationSelect(e) {
  const annotation = e.annotation;
  let fill, color, thickness, dash;
  const annotationDrawingFunctions = annotation.getType() === 'label' ?
      annotation.background() :
      annotation;

  // activate toolbar for selected annotation
  const isDrawingTool = annotation.getType() !== 'label' && annotation.getType() !== 'marker';
  const type = isDrawingTool ? 'drawing' : annotation.getType();
  selectTools(type);
  $('.toolbar a[href="#annotation-panel"]').tab('show');

  if (annotation.getType() === 'label') {
    $annotationLabel.focus();

    // set font size select value
    const fontSize = annotation.fontSize();
    $fontSize.val(fontSize).selectpicker('refresh');

    // set font color to colorpicker button
    const fontColor = annotation.fontColor();
    colorHandler($fontColorPicker, fontColor);

    // update font settings select
    const fontSettings = [];
    $labelMethod.each(function() {
      const method = $(this).data('labelMethod');
      fontSettings.push(annotation[method]());
    });
    $fontSettings.val(fontSettings).selectpicker('refresh');
  }

  // disable fill colorpicker if annotation hasn't fill
  if (type === 'drawing' && !annotation.fill) {
    $fillColorPicker.attr('disabled', 'disabled');
  } else {
    $fillColorPicker.removeAttr('disabled');

    // get annotation fill
    fill = annotationDrawingFunctions.fill();
  }

  const annotationStroke = annotationDrawingFunctions.stroke();

  if (typeof annotationStroke === 'function') {
    // get annotation stroke & fill colors
    color = colorHandler($strokeColorPicker);
    fill = colorHandler($fillColorPicker);

    if (!fill.includes('a')) {
      fill = fill.replace('rgb', 'rgba').replace(')', ', 0.3)');
    }

    // get stroke settings values
    [thickness, dash] = $strokeSettings.map(function() {return this.value}).get();
  } else {
    // get stroke settings
    color = annotationStroke.color;
    thickness = annotationStroke.thickness;
    switch (annotationStroke.dash) {
      case `${thickness} ${thickness}`:
        dash = 'dotted';
        break;
      case '10 5':
        dash = 'dashed';
        break;
      default:
        dash = 'solid';
        break;
    }
  }

  if (annotation.getType() === 'marker') {
    // get marker size
    const markerSize = annotation.size();

    // update marker size select
    $markerSize.val(markerSize).selectpicker('refresh');
    annotation.size(markerSize);
  }

  if (fill)
    // set fill color picker button color
    colorHandler($fillColorPicker, fill.color);

  // set stroke color picker button color
  colorHandler($strokeColorPicker, color);

  // update stroke settings select
  $strokeSettings.val([thickness, dash]).selectpicker('refresh');

  // enable "remove annotation" button
  $('[data-action-type="removeSelectedAnnotation"]').removeClass('disabled');

  // enable toolbar for the selected annotation
  $('[data-toolbar-type]').removeClass('active');
  $(`[data-toolbar-type="${type}"]`).addClass('active');
}
/**
 * annotation select event handler
 * @param {Object} e Event
 */
annotation select event handler
@param {Object} e Event
annotation select event handler @param { Object } e Event
function onAnnotationSelect(e) {
  const annotation = e.annotation;
  let fill, color, thickness, dash;
  const annotationDrawingFunctions = annotation.getType() === 'label' ?
      annotation.background() :
      annotation;
  const isDrawingTool = annotation.getType() !== 'label' && annotation.getType() !== 'marker';
  const type = isDrawingTool ? 'drawing' : annotation.getType();
  selectTools(type);
  $('.toolbar a[href="#annotation-panel"]').tab('show');
  if (annotation.getType() === 'label') {
    $annotationLabel.focus();
    const fontSize = annotation.fontSize();
    $fontSize.val(fontSize).selectpicker('refresh');
    const fontColor = annotation.fontColor();
    colorHandler($fontColorPicker, fontColor);
    const fontSettings = [];
    $labelMethod.each(function() {
      const method = $(this).data('labelMethod');
      fontSettings.push(annotation[method]());
    });
    $fontSettings.val(fontSettings).selectpicker('refresh');
  }
  if (type === 'drawing' && !annotation.fill) {
    $fillColorPicker.attr('disabled', 'disabled');
  } else {
    $fillColorPicker.removeAttr('disabled');
    fill = annotationDrawingFunctions.fill();
  }
  const annotationStroke = annotationDrawingFunctions.stroke();
  if (typeof annotationStroke === 'function') {
    color = colorHandler($strokeColorPicker);
    fill = colorHandler($fillColorPicker);
    if (!fill.includes('a')) {
      fill = fill.replace('rgb', 'rgba').replace(')', ', 0.3)');
    }
    [thickness, dash] = $strokeSettings.map(function() {return this.value}).get();
  } else {
    color = annotationStroke.color;
    thickness = annotationStroke.thickness;
    switch (annotationStroke.dash) {
      case `${thickness} ${thickness}`:
        dash = 'dotted';
        break;
      case '10 5':
        dash = 'dashed';
        break;
      default:
        dash = 'solid';
        break;
    }
  }
  if (annotation.getType() === 'marker') {
    const markerSize = annotation.size();
    $markerSize.val(markerSize).selectpicker('refresh');
    annotation.size(markerSize);
  }
  if (fill)
    colorHandler($fillColorPicker, fill.color);
  colorHandler($strokeColorPicker, color);
  $strokeSettings.val([thickness, dash]).selectpicker('refresh');
  $('[data-action-type="removeSelectedAnnotation"]').removeClass('disabled');
  $('[data-toolbar-type]').removeClass('active');
  $(`[data-toolbar-type="${type}"]`).addClass('active');
}
function onAnnotationSelect ( e ) { const annotation = e . annotation ; let fill , color , thickness , dash ; const annotationDrawingFunctions = annotation . getType ( ) === 'label' ? annotation . background ( ) : annotation ; const isDrawingTool = annotation . getType ( ) !== 'label' && annotation . getType ( ) !== 'marker' ; const type = isDrawingTool ? 'drawing' : annotation . getType ( ) ; selectTools ( type ) ; $ ( '.toolbar a[href="#annotation-panel"]' ) . tab ( 'show' ) ; if ( annotation . getType ( ) === 'label' ) { $annotationLabel . focus ( ) ; const fontSize = annotation . fontSize ( ) ; $fontSize . val ( fontSize ) . selectpicker ( 'refresh' ) ; const fontColor = annotation . fontColor ( ) ; colorHandler ( $fontColorPicker , fontColor ) ; const fontSettings = [ ] ; $labelMethod . each ( function ( ) { const method = $ ( this ) . data ( 'labelMethod' ) ; fontSettings . push ( annotation [ method ] ( ) ) ; } ) ; $fontSettings . val ( fontSettings ) . selectpicker ( 'refresh' ) ; } if ( type === 'drawing' && ! annotation . fill ) { $fillColorPicker . attr ( 'disabled' , 'disabled' ) ; } else { $fillColorPicker . removeAttr ( 'disabled' ) ; fill = annotationDrawingFunctions . fill ( ) ; } const annotationStroke = annotationDrawingFunctions . stroke ( ) ; if ( typeof annotationStroke === 'function' ) { color = colorHandler ( $strokeColorPicker ) ; fill = colorHandler ( $fillColorPicker ) ; if ( ! fill . includes ( 'a' ) ) { fill = fill . replace ( 'rgb' , 'rgba' ) . replace ( ')' , ', 0.3)' ) ; } [ thickness , dash ] = $strokeSettings . map ( function ( ) { return this . value } ) . get ( ) ; } else { color = annotationStroke . color ; thickness = annotationStroke . thickness ; switch ( annotationStroke . dash ) { case ` ${ thickness } ${ thickness } ` : dash = 'dotted' ; break ; case '10 5' : dash = 'dashed' ; break ; default : dash = 'solid' ; break ; } } if ( annotation . getType ( ) === 'marker' ) { const markerSize = annotation . size ( ) ; $markerSize . val ( markerSize ) . selectpicker ( 'refresh' ) ; annotation . size ( markerSize ) ; } if ( fill ) colorHandler ( $fillColorPicker , fill . color ) ; colorHandler ( $strokeColorPicker , color ) ; $strokeSettings . val ( [ thickness , dash ] ) . selectpicker ( 'refresh' ) ; $ ( '[data-action-type="removeSelectedAnnotation"]' ) . removeClass ( 'disabled' ) ; $ ( '[data-toolbar-type]' ) . removeClass ( 'active' ) ; $ ( ` ${ type } ` ) . addClass ( 'active' ) ; }
annotation select event handler
 @param {Object} e Event
annotation select event handler @param { Object } e Event
// activate toolbar for selected annotation // set font size select value // set font color to colorpicker button // update font settings select // disable fill colorpicker if annotation hasn't fill // get annotation fill // get annotation stroke & fill colors // get stroke settings values // get stroke settings // get marker size // update marker size select // set fill color picker button color // set stroke color picker button color // update stroke settings select // enable "remove annotation" button // enable toolbar for the selected annotation