Source: core/Gui.js

/**
 * @author Inateno / http://inateno.com / http://dreamirl.com
 */

/* TODO - add DOM Gui possible, remove specific GuiComponents and use GameObjects
 So I don't comment methods here because this will change a lot */

/**
 * @constructor Gui
 * @class used to create a CanvasGui binded on the given camera
 */
define( [ 'DE.CONFIG', 'DE.COLORS', 'DE.Inputs', 'DE.CanvasBuffer' ],
function( CONFIG, COLORS, InputHandler, CanvasBuffer )
{
  function Gui( camera, params )
  {
    if ( !camera )
      throw new Error( "Gui :: You have to pass at least a camera to instantiate -- see the doc" );
    
    params = params || {};
    
    this.id        = params.id || undefined;
    this.isVisible = params.isVisible || true;
    this.opacity   = params.opacity || 1;
    
    this.components = params.components || {};
    
    var _buffer = new CanvasBuffer( camera.renderSizes.width, camera.renderSizes.height );
    
    this.needUpdate = true;
    
    /***
    * @update
    ***/
    this.update = function( deltaTime ) 
    {
      //update all components if necessary
      if ( this.needUpdate )
      {
        for ( var i in Gui.components )
        {
          var component = Gui.components[i];
          if ( typeof( component.update ) !== "undefined" )
            component.update( deltaTime );
        }
      }
    }
    
    /***
    * @render
    ***/
    this.render = function( ctx, position, sizes, drawRatio, pr )
    {
      if ( this.needUpdate )
      {
        for ( var i in this.components )
        {
          if ( !this.components[ i ].enable )
          {
            if ( !this.components[ i ].isDisable )
              this.components[ i ].clearMe( _buffer.ctx );
            continue;
          }
          this.components[ i ].oRender( _buffer.ctx, sizes );
        }
        
        if ( CONFIG.DEBUG )
        {
          _buffer.ctx.fillStyle = COLORS.DEBUG.GUI;
          _buffer.ctx.fillText( "GUI " + this.id, 20, _buffer.canvas.height - 20 );
        }
        this.needUpdate = false;
      }
      
      var oldAlpha = ctx.globalAlpha;
      ctx.globalAlpha = this.opacity;
      ctx.drawImage( _buffer.canvas
                    , -sizes.width * sizes.scaleX * drawRatio * 0.5 >> 0
                    , -sizes.height * sizes.scaleY * drawRatio * 0.5 >> 0
                    , sizes.width * sizes.scaleX * drawRatio >> 0
                    , sizes.height * sizes.scaleY * drawRatio >> 0 );
      ctx.globalAlpha = oldAlpha;
    }
    
    /***
    * @add
    add a given component
    ***/
    this.add = function( component )
    {
      if ( this.components[ component.id ] )
      {
        CONFIG.debug.log( "%cComponent override an older:: " + component.id, 1, "color:orange" );
        delete this.components[ component.id ];
      }

      this.components[ component.id ] = component;
      this.components[ component.id ].gui = this;
    }
    
    /***
    * @remove
    remove a given component
    ***/
    this.remove = function( id )
    {
      if ( !this.components[ id ] )
      {
        CONFIG.debug.log( "%cComponent " + id + " couldn't be found", 1, "color:orange" );
        return;
      }
      
      this.components[ id ].gui = null;
      delete this.components[ id ];
    }
    
    /***
    * @EVENTS @onMouseMove
    */
    this.onMouseMove = function( mouse )
    {
      for ( var i in this.components )
      {
        if ( !this.components[ i ].enable )
          continue;
        var component = this.components[ i ];
        if (  component.checkState && component.checkState( mouse ) )
        {
          component.onMouseMove( mouse );
          return true;
        }
      }
      return false;
    }
    
    /***
    * @EVENTS @onMouseDown
    */
    this.onMouseDown = function( mouse )
    {
      for ( var i in this.components )
      {
        if ( !this.components[ i ].enable )
          continue;
        var component = this.components[ i ];
        if (  component.checkState && component.checkState( mouse ) )
        {
          component.onMouseDown( mouse );
          component.isClicked = true;
          return true;
        }
      }
      return false;
    }
    
    /***
    * @EVENTS @onMouseUp
    */
    this.onMouseUp = function( mouse )
    {
      for ( var i in this.components )
      {
        if ( !this.components[ i ].enable )
          continue;
        var component = this.components[ i ];
        if (  component.checkState && component.checkState( mouse ) )
        {
          component.isClicked = false;
          component.onMouseUp( mouse );
          return true;
        }
      }
      return false;
    }
    
    /***
    * @EVENTS @onMouseClick
    */
    this.onMouseClick = function( mouseEvent )
    {
      //launch click on components 
      for ( var i in this.components )
      {
        if ( !this.components[ i ].enable )
          continue;
        var component = this.components[i];
        if ( typeof( component.checkState ) !== "undefined" )
        {
          this.isFocus = component.checkState( InputHandler.mouse, true ); //if focus obtained via click return it in function
        }
      }
    }
    
    this.onKeyDown = function( keyEvent )
    {
      //send onKeyDown event to all components . NOTE : component MUST HAVE FOCUS to receive the event (test is made)
      for ( var i in Gui.components )
      {
        if ( !Gui.components[ i ].enable )
          continue;
        var component = Gui.components[i];
        if ( typeof( component.onKeyDown ) !== "undefined" )
        {
          component.onKeyDown( keyEvent );
        }
      }
    }
  }
  
  //static boolean to handle focus events
  Gui.isFocus = false;
  
  //static components for event handling
  Gui.components = {};
  Gui.prototype.DEName = "Gui";
  
  CONFIG.debug.log( "Gui loaded", 3 );
  return Gui
} );