Advanced GC-MS

Advanced example of the GCMS showing how you can register callbacks onto shape modifications or act onto shapes programatically. The example relies on the GC-MS script (download here) that interfaces the basics of the GC-MS behaviour.
Tip: Use backspace to remove a shape
Source code

"use strict";
var div1 = document.createElement( 'div' );
var div2 = document.createElement( 'div' );

var domGraph = document.getElementById( domGraph );
$.get( '../../../examples/science/_lib/gcms.jdx', {}, function( data ) {

  JcampConverter( data ).then( function( gcmsData ) {

    domGraph.appendChild( div1 );
    domGraph.appendChild( div2 );

    div2.style.width = '100%';
    div2.style.height = '100px';

    div1.style.width = '100%';
    div1.style.height = '250px';

    var table = $( "

From
To
Color
Display MS


" );
    var tbody = table.find( 'tbody' );

    var gcmsinstance = new GCMS( div1, div2, {

      AUCCreated: function( auc ) {

        var self = this;
        var pos = Math.round( auc.data.pos.x );
        var pos2 = Math.round( auc.data.pos2.x );
        var color = rgbToHex.apply( this, auc.data.color );

        var tr = $( "" )
          .append( '' + pos + '

' + pos2 + '


+ color + '" />

' );

        tr.find( 'input.displayMS' ).bind( 'change', function( e ) {

          if ( !auc.msFromAucSerie ) {
            return;
          }

          if ( !$( this ).prop( 'checked' ) ) {
            auc.msFromAucSerie.hide();
          } else {
            auc.msFromAucSerie.show();
          }

          self.redrawMs();

        } );

        tr.find( 'input.color' ).bind( 'change', function( e ) {
          var rgb = hexToRgb( $( this ).prop( 'value' ) );

          auc.data.color = [  rgb.r, rgb.g, rgb.b ];

          if ( !auc.isSelected() ) {

            auc.set( 'fillColor', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.3)' );
            auc.set( 'strokeColor', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 1)' );

            auc.setFillColor();
            auc.setStrokeColor();

            if ( auc.msFromAucSerie ) {
              auc.msFromAucSerie.setLineColor( 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.3)' );
              auc.msFromAucSerie.applyLineStyles();
            }

          }

          //                                                                   auc.redraw();
        } )
        auc._tr = tr;
        table.append( tr );
      },

      AUCChange: function( auc ) {

        var pos = Math.round( auc.data.pos.x );
        var pos2 = Math.round( auc.data.pos2.x );

        if ( auc._tr ) {
          auc._tr.children().eq( 0 ).html( pos );
          auc._tr.children().eq( 1 ).html( pos2 );
        }

        if ( auc.msFromAucSerie ) {
          auc.msFromAucSerie.setLineColor( 'rgba(255, 0, 0, 1)' );
          auc.msFromAucSerie.applyLineStyles();

          //                                                                   auc.msFromAucSerie.showPeakPicking();
        }

      },

      AUCSelected: function( auc ) {

        if ( auc.msFromAucSerie ) {
          auc.msFromAucSerie.setLineColor( 'rgba(255, 0, 0, 1)' );
          auc.msFromAucSerie.applyLineStyles();

          auc.msFromAucSerie.showPeakPicking( true );
        }

        if ( auc._tr ) {
          auc._tr.css( {
            backgroundColor: 'rgba(200, 0, 0, 0.1)'
          } )
          auc._tr.find( 'input.displayMS' ).prop( 'disabled', 'disabled' ).prop( 'checked', 'checked' );
        }

      },

      AUCUnselected: function( auc ) {

        var rgb = auc.data.color;

        auc.set( 'fillColor', 'rgba(' + rgb[ 0 ] + ', ' + rgb[ 1 ] + ', ' + rgb[ 2 ] + ', 0.3)' );
        auc.set( 'strokeColor', 'rgba(' + rgb[ 0 ] + ', ' + rgb[ 1 ] + ', ' + rgb[ 2 ] + ', 1)' );

        auc.setFillColor();
        auc.setStrokeColor();

        if ( auc.msFromAucSerie ) {
          auc.msFromAucSerie.setLineColor( 'rgba(' + rgb[ 0 ] + ', ' + rgb[ 1 ] + ', ' + rgb[ 2 ] + ', 0.3)' );
          auc.msFromAucSerie.applyLineStyles();
          auc.msFromAucSerie.hidePeakPicking( true );
        }

        if ( auc._tr ) {
          auc._tr.css( {
            backgroundColor: 'transparent'
          } );
          auc._tr.find( 'input.displayMS' ).prop( 'disabled', '' );
        }
      },

      AUCRemoved: function( auc ) {

        if ( auc._tr ) {
          auc._tr.remove();
        }

        if ( auc.msFromAucSerie ) {
          auc.msFromAucSerie.kill();
        }

      }

    } );

    domGraph.appendChild( table.get( 0 ) );
    gcmsinstance.setGC( gcmsData.gcms.gc );
    gcmsinstance.setMS( gcmsData.gcms.ms );
  } )

} )