Source: sigplot.playback.js

/**
 * @license
 * File: sigplot.playback.js
 *
 * Copyright (c) 2012-2014, Michael Ihde, All rights reserved.
 * Copyright (c) 2012-2014, Axios Inc., All rights reserved.
 *
 * This file is part of SigPlot.
 * 
 * SigPlot is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser 
 * General Public License as published by the Free Software Foundation; either version 3.0 of the License, or 
 * (at your option) any later version. This library is distributed in the hope that it will be useful, but 
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR 
 * PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the 
 * GNU Lesser General Public License along with SigPlot.
 */

/* global mx */
/* global m */
(function( sigplot, mx, m, undefined ) {
	
	/**
	 * @constructor
	 * @param options
	 * @returns {sigplot.PlaybackControlsPlugin}
	 */
	sigplot.PlaybackControlsPlugin = function(options) {
		this.options = (options === undefined) ? {} : options;
		
		if (this.options.display === undefined) { this.options.display = true; }
		
		this.options.size = this.options.size || 25;
		this.options.lineWidth = this.options.lineWidth || 2;
		this.state = "paused";
		this.highlight = false;
	};
	
	sigplot.PlaybackControlsPlugin.prototype = {
			init: function(plot) {
				this.plot = plot;
				
				// Register for mouse events
				var self = this;
				var Mx = this.plot._Mx;
				this.onmousemove = function(evt) {
					if (Mx.warpbox) { return; } // Don't highlight if a warpbox is being drawn
					
					// Ignore if the mouse is outside of the control area
					if (self.ismouseover(evt.xpos, evt.ypos)) {
						self.set_highlight(true);
					} else {
						self.set_highlight(false);
					}
				};
				this.plot.addListener("mmove", this.onmousemove);
				
				this.onmousedown = function(evt) {
					if (Mx.warpbox) { return; } // Don't handle if a warpbox is being drawn
					
					// Ignore if the mouse is outside of the control area
					if (self.ismouseover(evt.xpos, evt.ypos)) {
						evt.preventDefault();
					}
				};
				// Prevents zooms and stuff from occuring
				this.plot.addListener("mdown", this.onmousedown);
				
				this.onmouseclick = function(evt) {
					if (Mx.warpbox) { return; } // Don't handle if a warpbox is being drawn
					
					// Ignore if the mouse is outside of the control area
					if (self.ismouseover(evt.xpos, evt.ypos)) {
						self.toggle();
						evt.preventDefault();
					}
				};
				this.plot.addListener("mclick", this.onmouseclick);
			},
			
			set_highlight: function(ishighlight) {
				if (ishighlight !== this.highlight) {
					this.highlight = ishighlight;
					this.plot.redraw();
				}
			},
			
			toggle: function(new_state) {
				if (!new_state) {
					if (this.state === "paused") {
						new_state = "playing";
					} else {
						new_state = "paused";
					}
				}
				
				if (new_state !== this.state) {
					if (this.plot) {
						var Mx = this.plot._Mx;
						var evt = document.createEvent('Event');
						evt.initEvent('playbackevt', true, true);
						evt.state = new_state;
						var canceled = !mx.dispatchEvent(Mx, evt);
						if (!canceled) {
							this.state = new_state;
						}
						this.plot.redraw();
					}
				}
			},
			
			addListener: function (what, callback) {
				var Mx = this.plot._Mx;
				mx.addEventListener(Mx, what, callback, false);
			},
			
			removeListener: function (what, callback) {
				var Mx = this.plot._Mx;
				mx.removeEventListener(Mx, what, callback, false);
			},
			
			ismouseover: function(xpos, ypos) {
				var position = this.position();
				var distance_from_ctr = Math.pow(xpos - position.x, 2) + Math.pow(ypos - position.y, 2);
				var R = this.options.size / 2;
				
				return (distance_from_ctr < Math.pow(R, 2));
			},
			
			position: function() {
				if (this.options.position) {
					return this.options.position;
				} else if (this.plot) {
					var Mx = this.plot._Mx;
					var R = this.options.size / 2;
					return {x: Mx.l+R+this.options.lineWidth+1, y: Mx.t+R+this.options.lineWidth+1};
				} else {
					return {x: null, y: null};
				}
			},
			
			refresh: function(canvas) {
				if (!this.options.display) { return; }
				var Gx = this.plot._Gx;
				var Mx = this.plot._Mx;
				
				var ctx = canvas.getContext("2d");
				
				ctx.lineWidth = this.options.lineWidth;
				var R = this.options.size / 2;
				
				if (this.highlight) {
					ctx.lineWidth += 2;
					R += 1;
				}
				
				var position = this.position();
				

				ctx.beginPath();
				ctx.arc(position.x, position.y, R-ctx.lineWidth, 0, Math.PI * 2, true);
				ctx.closePath();
				
				ctx.strokeStyle = this.options.strokeStyle || Mx.fg;
				ctx.stroke();
				
				if (this.options.fillStyle) {
					ctx.fillStyle = this.options.fillStyle;
					ctx.fill();
				}
				
				if (this.state === "paused") {
					var p1 = {x: R*0.8, y: R*0.56};
					var p2 = {x: R*1.45, y: R};
					var p3 = {x: R*0.8, y: R*1.45};

					p1.x += (position.x - R);
					p2.x += (position.x - R);
					p3.x += (position.x - R);
					p1.y += (position.y - R);
					p2.y += (position.y - R);
					p3.y += (position.y - R);
					
					ctx.beginPath();
					ctx.moveTo(p1.x, p1.y);
					ctx.lineTo(p2.x, p2.y);
					ctx.lineTo(p3.x, p3.y);
					ctx.closePath();
					
					ctx.fillStyle = this.options.strokeStyle || Mx.fg;
					ctx.fill();
				} else {
					ctx.lineCap = 'round';
					ctx.lineWidth = Math.floor(Math.min(1, this.options.size / 8));
					
					var p1 = {x: R*0.8, y: R/2};
					var p2 = {x: R*0.8, y: R*1.5};
					p1.x += (position.x - R);
					p2.x += (position.x - R);
					p1.y += (position.y - R);
					p2.y += (position.y - R);
					
					ctx.beginPath();
					ctx.moveTo(p1.x, p1.y);
					ctx.lineTo(p2.x, p2.y);
					ctx.closePath();
					ctx.stroke();
					
					var p1 = {x: R+(R/5), y: R/2};
					var p2 = {x: R+(R/5), y: R*1.5};
					p1.x += (position.x - R);
					p2.x += (position.x - R);
					p1.y += (position.y - R);
					p2.y += (position.y - R);
					
					ctx.beginPath();
					ctx.moveTo(p1.x, p1.y);
					ctx.lineTo(p2.x, p2.y);
					ctx.closePath();
					ctx.stroke();
				}
				
				ctx.restore();
			},
			
			dispose: function() {
				this.plot = undefined;
				this.boxes = undefined;
			}
	};
	
}( window.sigplot = window.sigplot || {}, mx, m));
DocStrap Copyright © 2012-2013 The contributors to the JSDoc3 and DocStrap projects.
Documentation generated by JSDoc 3.2.2 on Mon Aug 18 2014 21:57:05 GMT+0100 (BST) using the DocStrap template.