RubberBand.js #1

(function() {
    var util = YAHOO.util,lang = YAHOO.lang;
    var Event = util.Event, Dom = util.Dom, Connect = util.Connect,JSON = lang.JSON,widget = YAHOO.widget;

/**
 * A CanvasElement widget to hand-draw a selection
 * @class WireIt.RubberBand
 * @extends WireIt.CanvasElement
 */
WireIt.RubberBand = function(grouper) {
	
	WireIt.RubberBand.superclass.constructor.call(this, grouper.layer.el);
	
	this.grouper = grouper;
	var self = this;
	this.scrollThreshold = 150;
	this.scrollAmount = 20;
	this.directions = {};
	
	grouper.layer.el.addEventListener("mousemove",  function(event)  { 
		var elem = self.grouper.layer.el;
		var rect = elem.getBoundingClientRect();
		
		var xNoScroll = event.clientX-rect.left;
		var yNoScroll = event.clientY-rect.top;
		
		self.lastX = xNoScroll + elem.scrollLeft;
		self.lastY = yNoScroll + elem.scrollTop;
		
		self.directions = {};
		if (xNoScroll < self.scrollThreshold) {
		    // Near the left edge so scroll left
		    self.directions.left = true;
		}
		else if ((rect.right - event.clientX) < self.scrollThreshold) {
		    // Near the right edge
		    self.directions.right = true;
		}
		
		if (yNoScroll < self.scrollThreshold) {
		    // Near top
		    self.directions.up = true;
		}
		else if ((rect.bottom - event.clientY) < self.scrollThreshold) {
		    // Near bottom
		    self.directions.down = true;
		}
		
   }, false);

};


/**
 * Delay in ms between two points of the RubberBand when drawing
 * @static
 */
WireIt.RubberBand.defaultDelay = 50;


YAHOO.lang.extend(WireIt.RubberBand, WireIt.CanvasElement, {
	
	/**
	 * Check if clicked in the layer and start the drawing mode
	 */
	layerMouseDown: function(event) {
	   var elem = this.grouper.layer.el;
	   var rect = elem.getBoundingClientRect();
	    
	   var xNoScroll = event.clientX-rect.left;
	   var yNoScroll = event.clientY-rect.top;
	    
	   if (xNoScroll < elem.clientWidth && yNoScroll < elem.clientHeight) {
			this.start();
		}
	},
	
	/**
	 * Start the drawing mode
	 */
	start: function() {
	    this.show();
	    
	    this.SetCanvasRegion(0, 0, this.grouper.layer.el.scrollWidth, this.grouper.layer.el.scrollHeight);
	    var ctxt = this.getContext();
	    ctxt.beginPath();
	    ctxt.moveTo(this.lastX, this.lastY);
	    this.startX = this.lastX;
	    this.startY = this.lastY;
	    this.timer = YAHOO.lang.later(WireIt.RubberBand.defaultDelay, this, function()  { 
		    this.nextPoint(this.lastX, this.lastY);
		    this.scroll(this.directions);
			}, 0, true);
	},

	/**
	 * Scroll the associated WireIt.Layer
	 */
	scroll: function(directions) {
	    var elem = this.grouper.layer.el;
	    
	    if (directions.left)
		elem.scrollLeft = Math.max(0, elem.scrollLeft-this.scrollAmount);
	    else if (directions.right)
		elem.scrollLeft = Math.min(elem.scrollWidth, elem.scrollLeft+this.scrollAmount);
		
	    if (directions.up)
		elem.scrollTop = Math.max(0, elem.scrollTop-this.scrollAmount);
	    else if (directions.down)
		elem.scrollTop = Math.min(elem.scrollHeight, elem.scrollTop+this.scrollAmount);
	},

	/**
	 * End the drawing mode
	 */
	finish: function() {
	    if (lang.isObject(this.timer)) {
			this.timer.cancel();
			this.timer = null;
		
			var ctxt = this.getContext();
			this.nextPoint(this.startX, this.startY);
	
			YAHOO.lang.later(1000, this, this.hide, 0, false);
	    }
	},

	/**
	 * Hide the RubberBand
	 */
	hide: function() {
	   if (!lang.isValue(this.element.style))
			this.element.style = {};
		    
	   this.element.style.display = "none";	    
	},
    
	/**
	 * Show the RubberBand
	 */
	show: function() {
	    if (!lang.isValue(this.element.style))
			this.element.style = {};
		    
	    this.element.style.display = "";	    
	},
	
	/**
	 * Add a point to the RubberBand
	 */
	nextPoint: function(x, y) {
		if (lang.isValue(x) && lang.isValue(y)) {
			var ctxt = this.getContext();
		
			// Draw the inner bezier curve
			ctxt.lineCap= "round";
			ctxt.strokeStyle="green";
			ctxt.lineWidth="3";

			ctxt.lineTo(x, y);
			ctxt.stroke();
	   }
	},

	/**
	 * Check if the given (x,y) is within the RubberBand path
	 */
	pointIsInside: function(x, y) {
	    return (this.getContext().isPointInPath(x, y));
	}

});



})();