Properties API for Canvas GUI

PropertiesAPI.js

/* Properties are nothing more but a complex event handlers */

GUI.properties.myProperty = {

  /* Order of appliance when set in group */

  order: 3,

  /* Rendering order to determine wheter it should be drawn before or after other properties */

  renderOrder: 2,

  /* Update if one of these properties has changed */

  updateWith: ["width", "height"],

  /* Update if one of these properties has changed in parent */

  updateWithParent: ["width", "height"],

  /* Update if one of these properties has changed in any children */

  updateWithChidlren: ["width", "height"],

  /* Handle the update 
    
    @sender: element in which the property has been updated
    @property: property that has been updated

  */

  update: function(element, sender, property) {},

  /* Called when property has changed due to the cascade 
     Change can also be force if so prev === next */

  change: function(element, prev, next) {},

  /* Called right away when user, style or layout sets the property 
     
     @set: a method that has been used to set the value,
           use it to replace the value or set another value
           on the same level of cascade (layout, user, style)

  */

  set: function(element, value, set) {},

  /* Called if previously unset property has been introduced to cascade */

  add: function(element, value) {},

  /* Called if property has been removed from cascade */

  remove: function(element, value) {},

  /* Render in background */

  render: function(element, layer, x, y) {

  },

  /* Render among element's children - translated, scrolled and clipped 
     to fit inside the content */

  renderChild: function(element, layer, x, y) {},

  /* Render in foreground */

  postrender: function(element, layer, x, y) {},

  /* Called when some dimension has changed, great to redraw and cache heavy content.

     @layer: is a canvas shared between redraw calls for all attached properties  

  */

  redraw: function(element, layer) {},

  /* Called when image requested by property has been loaded */

  imageready: function(element, image) {

  }

};

/* A bunch of helpers to use inside handlers 
   Using image as an example.
*/

GUI.properties.image = {

  change: function(element, prev, next) {

    /* Hold any custom property data for an element */

    var data = element.pd("image");

    data.ready = false;

    /* Load an image - imageready will be called when ready  */

    if (next) {

      element.requestImage(next, this, element);

    }

  },

  redraw: function(element, layer) {

    var data = element.pd("image");

    if (!data.ready) return;

    layer.drawImage(data.image, 0, 0);

  },

  imageready: function(element, image) {

    var data = element.pd("image");

    data.ready = true;
    data.image = image;

    /* Stack values to be pulled if property is not set for an element 
       For example to decide width/height from image
    */

    element.stack("width", image.width, this);
    element.stack("height", image.width, this);

    /* redraw will be called automatically, because of requestImage earlier
       knows that sender property has a redraw handler */

  }

}