Topology Viewport module

app/assets/javascripts/d3-components.js

 'use strict';
 
 /**
  * Provides a declarative structure around interactive D3
  * applications.
  *
  * @module d3-components
  **/
 
 YUI.add('d3-components', function(Y) {
@@ skipping 176 matching lines @@
           modEvents = this.events[modName],
           module = this.modules[modName],
           owns = Y.Object.owns,
           container = this.get('container'),
           subscriptions = [],
           handlers,
           handler;
 
       function _bindEvent(name, handler, container, selector, context) {
         // Adapt between d3 events and YUI delegates.
-        var d3Adaptor = function(evt) {
+        var d3Adapter = function(evt) {
           var selection = d3.select(evt.currentTarget.getDOMNode()),
               d = selection.data()[0];
           // This is a minor violation (extension)
           // of the interface, but suits us well.
           d3.event = evt;
+          //console.debug('Handler for', name, selector, d3.event);

[matthew.scott, 2013/01/08 18:38:47]

Could be removed or just uncommented, unless it causes too much clutter in the
console.

           return handler.call(
               evt.currentTarget.getDOMNode(), d, context);
         };
 
         subscriptions.push(
-            Y.delegate(name, d3Adaptor, container, selector, context));
+            Y.delegate(name, d3Adapter, container, selector, context));
       }
 
       this.unbind(modName);
 
       // Bind 'scene' events
       Y.each(modEvents.scene, function(handlers, selector, sceneEvents) {
         Y.each(handlers, function(handler, trigger) {
           handler = self._normalizeHandler(handler, module, selector);
           if (L.isValue(handler)) {
             _bindEvent(trigger, handler.callback,
@@ skipping 26 matching lines @@
               // context as third argument.
               var target = self,
                   callback = Y.bind(handler.callback, handler.context);
               if (Y.Array.indexOf(['windowresize'], name) !== -1) {
                 target = Y;
                 handler.context = null;
               } else {
                 // (re)Register the event to bubble.
                 self.publish(name, {emitFacade: true});
               }
-              console.debug('d3 component yui event binding', target.toString(),
-                            eventPhase, name);
+              console.debug('yui event binding', module.name, eventPhase, name);
               subscriptions.push(
                   target[eventPhase](
                   name, callback, handler.context));
             });
           }
         });
       }
       return subscriptions;
     },
 
@@ skipping 14 matching lines @@
       Y.each(Y.Object.keys(eventSet), function(name) {
         this.events[name].subscriptions = this._bindEvents(name);
       }, this);
       return this;
     },
 
     /**
      * Specialized handling of events only found in d3.
      * This is again an internal implementation detail.
      *
-     * Its worth noting that d3 events don't use a delegate pattern
+     * It is worth noting that d3 events don't use a delegate pattern
      * and thus must be bound to nodes present in a selection.
      * For this reason binding d3 events happens after render cycles.
      *
      * @method _bindD3Events
      * @param {String} modName Module name.
      **/
     _bindD3Events: function(modName) {
       // Walk each selector for a given module 'name', doing a
       // d3 selection and an 'on' binding.
       var self = this,
           modEvents = this.events[modName],
           owns = Y.Object.owns,
           module;
 
       if (!modEvents || !modEvents.d3) {
         return;
       }
       modEvents = modEvents.d3;
       module = this.modules[modName];
 
       Y.each(modEvents, function(handlers, selector) {
         Y.each(handlers, function(handler, trigger) {
           var adapter;
           handler = self._normalizeHandler(handler, module);
-          // Create an adaptor
+          // Create an adapter
           adapter = function() {
             var selection = d3.select(this),
                 d = selection.data()[0];
+            console.debug('D3 Handler for', selector, trigger);
             return handler.callback.call(this, d, handler.context);
           };
           d3.selectAll(selector).on(trigger, adapter);
         });
       });
     },
 
     /**
-     * Allow d3 event rebinding after rendering.
+     * Allow d3 event rebinding after rendering. The component
+     * can trigger this after it is sure relevant elements
+     * are in the bound DOM.
      *
      **/
     bindAllD3Events: function() {
       var self = this;
       Y.each(this.modules, function(mod, name) {
         self._bindD3Events(name);
       });
     },
 
     /**
@@ skipping 164 matching lines @@
     }
 
   });
   ns.Component = Component;
 }, '0.1', {
   'requires': ['d3',
     'base',
     'array-extras',
     'event',
     'event-resize']});