UI+Canvas+Visualisation: canvasToggle/Render

Author: mr21

api/main.js

@@ -5,7 +5,7 @@
 var loaded = false;
 
 window.api = {
-	version: "0.8.10",
+	version: "0.8.11",
 	thumbnail: {}
 };
 

api/visualisations.js

@@ -4,21 +4,22 @@
 
 var
 	that,
-	requestId,
-	jqOldVisu = dom.empty,
+	obj,
+	enable = false,
 	visu = {},
+	jqOldVisu = dom.empty,
 	selectedVisu = $.noop,
-	analyser = api.audio.analyser,
-	ctxAudio = api.audio.ctx,
-	canvas = dom.screenCanvas[ 0 ],
-	ctxCanvas = canvas.getContext( "2d" ),
-	enable = false,
-	frameInfo = {
-		ctxCanvas: ctxCanvas,
-		analyser: analyser
-	}
+	analyser = api.audio.analyser
 ;
 
+if ( analyser ) {
+	analyser.fftSize = 4096;
+	obj = {
+		analyser: analyser,
+		data: new Uint8Array( analyser.frequencyBinCount )
+	}
+}
+
 api.visualisations = that = {
 	add: function( name, fn ) {
 		visu[ name ] = fn;
@@ -29,40 +30,31 @@ api.visualisations = that = {
 		return that;
 	},
 	select: function( name ) {
-		selectedVisu = visu[ name ] || $.noop;
-		jqOldVisu.removeClass( "selected" );
-		jqOldVisu = dom.ctrlVisualList.find( "[data-name='" + name + "']" ).addClass( "selected" );
-		return that;
-	},
-	enable: function() {
-		function frame( timestamp ) {
-			selectedVisu( frameInfo );
-			requestId = requestAnimationFrame( frame );
+		if ( selectedVisu !== visu[ name ] ) {
+			selectedVisu = visu[ name ] || $.noop;
+			jqOldVisu.removeClass( "selected" );
+			jqOldVisu = dom.ctrlVisualList.find( "[data-name='" + name + "']" ).addClass( "selected" );
+			if ( enable ) {
+				that.toggle( true );
+			}
 		}
-		if ( !ctxAudio ) {
-			ui.visualisationsToggle( enable = false );
-			api.error.throw( "WEBAUDIO" );
-		} else if ( !enable ) {
-			analyser.fftSize = 4096;
-			frameInfo.data = new Uint8Array( analyser.frequencyBinCount );
-			requestId = requestAnimationFrame( frame );
-			ui.visualisationsToggle( enable = true );
-		}
-		return that;
-	},
-	disable: function() {
-		if ( enable ) {
-			ctxCanvas.clearRect( 0, 0, canvas.width, canvas.height );
-			cancelAnimationFrame( requestId );
-		}
-		ui.visualisationsToggle( enable = false );
 		return that;
 	},
 	toggle: function( b ) {
 		if ( typeof b !== "boolean" ) {
 			b = !enable;
 		}
-		return b ? that.enable() : that.disable();
+		if ( b && !api.audio.ctx ) {
+			b = false;
+			api.error.throw( "WEBAUDIO" );
+		}
+		ui
+			.canvasToggle( b )
+			.canvasRender( b && selectedVisu, obj )
+			.visualisationsToggle( b )
+		;
+		enable = b;
+		return that;
 	}
 };
 

index.html

@@ -226,6 +226,7 @@
 	<script src="ui/actionDesc.js"></script>
 	<script src="ui/brightness.js"></script>
 	<script src="ui/buffered.js"></script>
+	<script src="ui/canvas.js"></script>
 	<script src="ui/currentTimeDuration.js"></script>
 	<script src="ui/fileDetach.js"></script>
 	<script src="ui/fileSelect.js"></script>

main.js

@@ -0,0 +1,42 @@
+"use strict";
+
+(function() {
+
+var
+	requestId,
+	jqCanvas = dom.screenCanvas,
+	canvas = jqCanvas[ 0 ],
+	ctx = canvas.getContext( "2d" )
+;
+
+$.extend( ui, {
+	canvasDisplay: false,
+	canvasToggle: function( b ) {
+		if ( typeof b !== "boolean" ) {
+			b = !ui.canvasDisplay;
+		}
+		if ( b !== ui.canvasDisplay ) {
+			ui.canvasDisplay = b;
+			jqCanvas.toggle( b );
+		}
+		return ui;
+	},
+	canvasRender: function( fn, obj ) {
+		function frame( timestamp ) {
+			obj.timestamp = timestamp;
+			fn( obj );
+			requestId = requestAnimationFrame( frame );
+		}
+		ctx.clearRect( 0, 0, canvas.width, canvas.height );
+		cancelAnimationFrame( requestId );
+		if ( fn ) {
+			obj = $.extend( obj, {
+				ctxCanvas: ctx
+			});
+			requestId = requestAnimationFrame( frame );
+		}
+		return ui;
+	}
+});
+
+})();