Update Commands module JSDoc

src/commands/main.js

@@ -1,78 +1,123 @@
+/**
+ * This module manages commands which could be called mainly by buttons.
+ * You can init the editor with all necessary commands via configuration
+ *
+ * ```js
+ * var editor = new GrapesJS({
+ * 	...
+ *  commands: {...} // Check below for the properties
+ * 	...
+ * });
+ * ```
+ *
+ * Before using methods you should get first the module from the editor instance, in this way:
+ *
+ * ```js
+ * var commandsService = editor.get('Commands');
+ * ```
+ *
+ * @module Commands
+ * @param {Object} config Configurations
+ * @param {Array<Object>} [config.defaults=[]] Array of possible commands
+ * @param {Boolean} [config.firstCentered=true] If true will center new first-level components
+ * @param {number} [config.minComponentH=50] Minimum height (in px) for new inserted components
+ * @param {number} [config.minComponentW=50] Minimum width (in px) for new inserted components
+ * @example
+ * ...
+ * commands: {
+ *  firstCentered: true,
+ *  minComponentH: 100,
+ *  minComponentW: 100,
+ * 	defaults: [{
+ * 		id: 'helloWorld',
+ * 		run:  function(serviceManager, senderBtn){
+ * 			alert('Hello world!');
+ * 		},
+ * 		stop:  function(serviceManager, senderBtn){
+ * 			alert('Stop!');
+ * 		},
+ * 	}],
+ * },
+ * ...
+ */
 define(function(require) {
-	/**
-	 * @class 	Commands
-	 * @param 	{Object} Configurations
-	 *
-	 * @return	{Object}
- 	 * */
-	function Commands(config)
-	{
-		var c				= config || {},
-			defaults		= require('./config/config'),
-			AbsCommands		= require('./view/CommandAbstract');
+
+	var Commands = function(conf){
+
+		var c = conf || {},
+			defaults = require('./config/config'),
+			AbsCommands = require('./view/CommandAbstract');
 
 		for (var name in defaults) {
 			if (!(name in c))
 				c[name] = defaults[name];
 		}
 
-		this.commands		= {};
-		this.config			= c;
-		this.Abstract		= AbsCommands;
+		// Need it here as it would be used below
+		var add = function(id, obj){
+			delete obj.initialize;
+			commands[id] = Abstract.extend(obj);
+			return this;
+		};
 
-		// Load commands passed by configuration
+		var commands = {};
+		var config = c;
+		var Abstract = AbsCommands;
+
+		// Load commands passed via configuration
 		for( var k in c.defaults){
-			var obj 	= c.defaults[k];
+			var obj = c.defaults[k];
 			if(obj.id)
-				this.add(obj.id, obj);
+				add(obj.id, obj);
 		}
 
-		this.defaultCommands					= {};
-		this.defaultCommands['select-comp']		= require('./view/SelectComponent');
-		this.defaultCommands['create-comp']		= require('./view/CreateComponent');
-		this.defaultCommands['delete-comp']		= require('./view/DeleteComponent');
+		var defaultCommands = {};
+		defaultCommands['select-comp'] = require('./view/SelectComponent');
+		defaultCommands['create-comp'] = require('./view/CreateComponent');
+		defaultCommands['delete-comp'] = require('./view/DeleteComponent');
+		defaultCommands['image-comp'] = require('./view/ImageComponent');
+		defaultCommands['move-comp'] = require('./view/MoveComponent');
+		defaultCommands['text-comp'] = require('./view/TextComponent');
+		defaultCommands['insert-custom'] = require('./view/InsertCustom');
+		defaultCommands['export-template'] = require('./view/ExportTemplate');
+		defaultCommands['sw-visibility'] = require('./view/SwitchVisibility');
+		defaultCommands['open-layers'] = require('./view/OpenLayers');
+		defaultCommands['open-sm'] = require('./view/OpenStyleManager');
 		//this.defaultCommands['resize-comp'] 	= require('./view/ResizeComponent');
-		this.defaultCommands['image-comp']		= require('./view/ImageComponent');
-		this.defaultCommands['move-comp']		= require('./view/MoveComponent');
-		this.defaultCommands['text-comp']		= require('./view/TextComponent');
-		this.defaultCommands['insert-custom']	= require('./view/InsertCustom');
-		this.defaultCommands['export-template']	= require('./view/ExportTemplate');
-		this.defaultCommands['sw-visibility']	= require('./view/SwitchVisibility');
-		this.defaultCommands['open-layers']		= require('./view/OpenLayers');
-		this.defaultCommands['open-sm']			= require('./view/OpenStyleManager');
-
-		this.config.model 		= this.config.em.get('Canvas');
-	}
+		config.model = config.em.get('Canvas');
 
-	Commands.prototype	= {
+		return {
 
 			/**
-			 * Add new command
-			 * @param	{String}	id
-			 * @param	{Object}	obj
-			 *
-			 * @return 	this
+			 * Add new command to the collection
+			 * @param	{string} id Command's ID
+			 * @param	{Object} command Object representing you command. Methods `run` and `stop` are required
+			 * @return {this}
+			 * @example
+			 * commandsService.add('myCommand', {
+			 * 	run:  function(serviceManager, senderBtn){
+			 * 		alert('Hello world!');
+			 * 	},
+			 * 	stop:  function(serviceManager, senderBtn){
+			 * 	},
+			 * });
 			 * */
-			add	: function(id, obj)
-			{
-				delete obj.initialize;
-				this.commands[id]		= this.Abstract.extend(obj);
-				return this;
-			},
+			add: add,
 
 			/**
-			 * Get command
-			 * @param	{String}	id
-			 *
-			 * @return 	Command
+			 * Get command by ID
+			 * @param	{string}	id Command's ID
+			 * @return {Object} Object representing the command
+			 * @example
+			 * var myCommand = commandsService.get('myCommand');
+			 * myCommand.run();
 			 * */
-			get	: function(id)
-			{
-				var el	= this.commands[id];
+			get: function(id){
+				var el = commands[id];
 
 				if(typeof el == 'function'){
-					el 					= new el(this.config);
-					this.commands[id]	= el;
+					el = new el(config);
+					commands[id]	= el;
 				}
 
 				return el;
@@ -80,17 +125,18 @@ define(function(require) {
 
 			/**
 			 * Load default commands
-			 *
-			 * @return 	this
+			 * @return {this}
+			 * @private
 			 * */
-			loadDefaultCommands	: function()
-			{
-				for (var id in this.defaultCommands) {
-					this.add(id, this.defaultCommands[id]);
+			loadDefaultCommands: function(){
+				for (var id in defaultCommands) {
+					this.add(id, defaultCommands[id]);
 				}
 
 				return this;
 			},
+		};
+
 	};
 
 	return Commands;

src/commands/view/CommandAbstract.js

@@ -2,12 +2,14 @@ define(['backbone'],
 	function(Backbone) {
 		/**
 		 * @class CommandAbstract
+		 * @private
 		 * */
 		return Backbone.View.extend({
 
 			/**
 			 * Initialize method that can't be removed
 			 * @param	{Object}	o Options
+			 * @private
 			 * */
 			initialize: function(o) {
 				this.config				= o;
@@ -27,6 +29,7 @@ define(['backbone'],
 			/**
 			 * Callback triggered after initialize
 			 * @param	{Object}	o 	Options
+			 * @private
 			 * */
 			init: function(o){},
 
@@ -34,6 +37,7 @@ define(['backbone'],
 			 * Method that run command
 			 * @param	{Object}	em 		Editor model
 			 * @param	{Object}	sender	Button sender
+			 * @private
 			 * */
 			run: function(em, sender) {
 				console.warn("No run method found");
@@ -43,6 +47,7 @@ define(['backbone'],
 			 * Method that stop command
 			 * @param	{Object}	em Editor model
 			 * @param	{Object}	sender	Button sender
+			 * @private
 			 * */
 			stop: function(em, sender) {
 				console.warn("No stop method found");

src/commands/view/CreateComponent.js

@@ -1,8 +1,10 @@
+/**
+ * @module CreateComponent
+ * @private
+ * */
 define(['backbone','./SelectPosition'],
 	function(Backbone, SelectPosition) {
-		/**
-		 * @class CreateComponent
-		 * */
+
 		return _.extend({}, SelectPosition, {
 
 			newElement : null,
@@ -20,6 +22,7 @@ define(['backbone','./SelectPosition'],
 			 * Returns creation placeholder
 			 *
 			 * @return 	{Object}
+			 * @private
 			 * */
 			getCreationPlaceholder: function()
 			{
@@ -30,6 +33,7 @@ define(['backbone','./SelectPosition'],
 			 * Removes creation placeholder
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			removeCreationPlaceholder: function()
 			{
@@ -39,6 +43,7 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * Start with enabling to select position and listening to start drawning
 			 * @return 	void
+			 * @private
 			 * */
 			enable: function()
 			{
@@ -51,6 +56,7 @@ define(['backbone','./SelectPosition'],
 			 * Enable user to draw components
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			enableToDraw: function()
 			{
@@ -63,6 +69,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object}	e	Event
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			startDraw : function(e)
 			{
@@ -88,6 +95,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object}	e	Event
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			draw: function(e)
 			{
@@ -100,6 +108,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object}	e Event
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			endDraw : function(e)
 			{
@@ -127,6 +136,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{String}	method 		Before or after of the children
 			 *
 			 * @return 	{Object} Created model
+			 * @private
 			 * */
 			create: function(target, component, posIndex, method)
 			{
@@ -150,6 +160,7 @@ define(['backbone','./SelectPosition'],
 			 * Check and set basic requirements for the component
 			 * @param 	{Object}	component	New component to be created
 			 * @return 	{Object} 	Component updated
+			 * @private
 			 * */
 			setRequirements: function(component)
 			{
@@ -173,6 +184,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object} 	e	Event
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			updateComponentSize : function (e)
 			{
@@ -207,6 +219,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Boolean} 	forse	Indicates if rollback in anycase
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			rollback: function(e, force)
 			{
@@ -223,6 +236,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object}	component	Object component before creation
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			beforeDraw: function(component){
 				component.editable = false;//set this component editable
@@ -233,6 +247,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object}	model	Component model created
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			afterDraw: function(model){},
 
@@ -241,6 +256,7 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object} 	component	Object component before creation
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			beforeCreation: function(component){},
 
@@ -249,19 +265,16 @@ define(['backbone','./SelectPosition'],
 			 * @param 	{Object}	model	Component model created
 			 *
 			 * @return 	void
+			 * @private
 			 * */
 			afterCreation: function(model){},
 
-			/** Run method
-			 * */
 			run: function(em, sender){
 				this.sender	= sender;
 				this.$el 	= this.$wrapper;
 				this.enable();
 			},
 
-			/** Stop method
-			 * */
 			stop: function(){
 				this.removePositionPlaceholder();											//Removes placeholder from eventSelectPosition
 				this.stopSelectPosition();

src/commands/view/DeleteComponent.js

@@ -2,6 +2,7 @@ define(['backbone', './SelectComponent'],
 	function(Backbone, SelectComponent) {
 		/**
 		 * @class DeleteComponent
+		 * @private
 		 * */
 		return _.extend({},SelectComponent,{
 
@@ -23,6 +24,7 @@ define(['backbone', './SelectComponent'],
 			/**
 			 * Start command
 			 * @param {Object}	e
+			 * @private
 			 */
 			startDelete: function(e)
 			{
@@ -40,6 +42,7 @@ define(['backbone', './SelectComponent'],
 			/**
 			 * Stop command
 			 * @param {Object}	e
+			 * @private
 			 */
 			stopDelete: function(e)
 			{
@@ -55,6 +58,7 @@ define(['backbone', './SelectComponent'],
 			/**
 			 * Delete command
 			 * @param {Object}	e
+			 * @private
 			 */
 			onDelete: function(e)
 			{
@@ -73,6 +77,7 @@ define(['backbone', './SelectComponent'],
 			/**
 			 * Updates badge label
 			 * @param 	{Object}	model
+			 * @private
 			 * */
 			updateBadgeLabel: function (model)
 			{

src/commands/view/ExportTemplate.js

@@ -1,6 +1,7 @@
 define(function() {
 		/**
 		 * @class ExportTemplate
+		 * @private
 		 * */
 		return {
 
@@ -20,6 +21,7 @@ define(function() {
 			 * @param	{String}	label
 			 *
 			 * @return	{Object}	Editor
+			 * @private
 			 * */
 			buildEditor: function(codeName, theme, label)
 			{

src/commands/view/ImageComponent.js

@@ -2,12 +2,14 @@ define(['backbone', './InsertCustom'],
 	function(Backbone, InsertCustom) {
 		/**
 		 * @class ImageComponent
+		 * @private
 		 * */
 		return _.extend({}, InsertCustom, {
 
 			/**
 			 * Trigger before insert
 			 * @param 	{Object}	object
+			 * @private
 			 *
 			 * */
 			beforeInsert: function(object){
@@ -27,7 +29,7 @@ define(['backbone', './InsertCustom'],
 			/**
 			 * Trigger after insert
 			 * @param	{Object}	model	Model created after insert
-			 *
+			 * @private
 			 * */
 			afterInsert: function(model){
 				model.trigger('dblclick');

src/commands/view/InsertCustom.js

@@ -2,11 +2,13 @@ define(['backbone', './SelectPosition'],
 	function(Backbone, SelectPosition) {
 		/**
 		 * @class InsertCustom
+		 * @private
 		 * */
 		return _.extend({}, SelectPosition, {
 
 			/**
 			 * Run method
+			 * @private
 			 * */
 			run: function(em, sender){
 				this.enable();
@@ -25,8 +27,7 @@ define(['backbone', './SelectPosition'],
 
 			/**
 			 * Start insert event
-			 *
-			 * @return void
+			 * @private
 			 * */
 			insertComponent: function(){
 				this.$wp.off('click', this.insertComponent);
@@ -49,16 +50,14 @@ define(['backbone', './SelectPosition'],
 			/**
 			 * Trigger before insert
 			 * @param 	{Object}	obj
-			 *
-			 * @return 	void
+			 * @private
 			 * */
 			beforeInsert: function(obj){},
 
 			/**
 			 * Trigger after insert
 			 * @param	{Object}	model	Model created after insert
-			 *
-			 * @return 	void
+			 * @private
 			 * */
 			afterInsert: function(model){},
 
@@ -66,6 +65,7 @@ define(['backbone', './SelectPosition'],
 			 * Create different object, based on content, to insert inside canvas
 			 *
 			 * @return 	{Object}
+			 * @private
 			 * */
 			buildContent: function(){
 				var result = {};

src/commands/view/MoveComponent.js

@@ -2,6 +2,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 	function(Backbone, SelectComponent, SelectPosition) {
 		/**
 		 * @class MoveComponent
+		 * @private
 		 * */
 		return _.extend({},SelectComponent, SelectPosition,{
 
@@ -28,6 +29,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			/**
 			 * Hover command
 			 * @param {Object}	e
+			 * @private
 			 */
 			onHover: function(e)
 			{
@@ -44,11 +46,13 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			 * 	- Method from selectComponent
 			 * @param Event
 			 * @param Object Selected element
+			 * @private
 			 * */
 			onSelect: function(e,el){},
 
 			/** Picking component to move
 			 * @param event
+			 * @private
 			 * */
 			startMove: function(e, el){
 				this.moved = false;
@@ -74,7 +78,9 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			},
 
 			/** During move
-			 * @param event */
+			 * @param event
+			 * @private
+			 * */
 			onMove: function(e){
 				this.moved = true;
 				var relativeY = (e.pageY - this.canvasTop) + this.$canvas.scrollTop();
@@ -84,7 +90,9 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			},
 
 			/** Leave component
-			 * @param event */
+			 * @param event
+			 * @private
+			 * */
 			endMove: function(e){
 				this.$el.off('mousemove',this.onMove);
 				$(document).off('mouseup', this.endMove);
@@ -107,7 +115,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			 * @param int Indicates the position inside the collection
 			 * @param string Before of after component
 			 *
-			 * @return void
+			 * @private
 			 * */
 			move: function(target, el, posIndex, posMethod){
 				var index = posIndex || 0;
@@ -128,7 +136,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 
 			/** Make component untouchable
 			 * @param object Component
-			 * @return void
+			 * @private
 			 * */
 			freezeComponent: function($component){
 				$component.css({'pointer-events':'none'});
@@ -137,7 +145,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 
 			/** Make component touchable
 			 * @param object Component
-			 * @return void
+			 * @private
 			 * */
 			unfreezeComponent: function($component){
 				$component.css({'pointer-events':'auto'});
@@ -147,7 +155,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			/** Used to bring the previous situation before start moving the component
 			 * @param Event
 			 * @param Bool Indicates if rollback in anycase
-			 * @return void
+			 * @private
 			 * */
 			rollback: function(e, force){
 				var key = e.which || e.keyCode;
@@ -158,7 +166,9 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				return;
 			},
 
-			/** Closing method
+			/**
+			 * Closing method
+			 * @private
 			 * */
 			last: function(){
 				this.placeholder.remove();
@@ -169,12 +179,10 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				$(document).off('keypress', this.rollback);
 			},
 
-			/* Run method */
 			run: function(){
 				this.enable();
 			},
 
-			/* Stop method */
 			stop: function(){
 				this.stopSelectComponent();
 				this.$el.css('cursor','');//changes back aspect of the cursor

src/commands/view/OpenLayers.js

@@ -1,6 +1,7 @@
 define(['Navigator'], function(Layers) {
 		/**
 		 * @class OpenStyleManager
+		 * @private
 		 * */
 		return {
 

src/commands/view/OpenStyleManager.js

@@ -1,6 +1,7 @@
 define(['StyleManager'], function(StyleManager) {
 		/**
 		 * @class OpenStyleManager
+		 * @private
 		 * */
 		return {
 
@@ -61,6 +62,7 @@ define(['StyleManager'], function(StyleManager) {
 
 			/**
 			 * Toggle Style Manager visibility
+			 * @private
 			 */
 			toggleSm: function()
 			{

src/commands/view/ResizeComponent.js

@@ -1,10 +1,11 @@
 define(['backbone', 'jqueryUi', './MoveComponent'],
 	function(Backbone, jqueryUi, MoveComponent) {
-		/** 
+		/**
 		 * @class ResizeComponent
+		 * @private
 		 * */
 		return _.extend({}, MoveComponent,{
-			
+
 			enable: function(){
 				var $this = this;
 				this.startSelectComponent();
@@ -14,14 +15,14 @@ define(['backbone', 'jqueryUi', './MoveComponent'],
 						ui.element[0].style.height = ui.element.height()+'px';
 						ui.element.css({'min-height':'', 'min-width':'' });
 					},
-					stop: function(event,ui){ 
+					stop: function(event,ui){
 						ui.element.css('overflow','auto');
-						$this.updateModel(ui); 
+						$this.updateModel(ui);
 					}
 				});
 			},
-			
-			
+
+
 			/**
 			 * Update model of resized element
 			 * @param object Component model
@@ -37,21 +38,21 @@ define(['backbone', 'jqueryUi', './MoveComponent'],
 				style.overflow	=  'auto';
 				model.set('style', style);
 			},
-			
-			/** 
-			 * Run method 
+
+			/**
+			 * Run method
 			 * */
 			run: function(){
 				this.enable();
 				this.active = true;
 			},
-			
-			/** 
-			 * Stop method 
+
+			/**
+			 * Stop method
 			 * */
 			stop: function(){
 				this.stopSelectComponent();
-				this.$el.find('.ui-resizable').resizable("destroy"); 
+				this.$el.find('.ui-resizable').resizable("destroy");
 				this.$el.unbind();//removes all attached events
 				this.active = false;
 			}

src/commands/view/SelectComponent.js

@@ -1,6 +1,7 @@
 define(function() {
 		/**
 		 * @class SelectComponent
+		 * @private
 		 * */
 		return {
 
@@ -21,6 +22,7 @@ define(function() {
 
 			/**
 			 * Copy component to clipboard
+			 * @private
 			 */
 			copyComp: function()
 			{
@@ -32,6 +34,7 @@ define(function() {
 
 			/**
 			 * Paste component from clipboard
+			 * @private
 			 */
 			pasteComp: function()
 			{
@@ -44,8 +47,9 @@ define(function() {
 					}
 			},
 
-			/** Start select component event
-			 * @return void
+			/**
+			 * Start select component event
+			 * @private
 			 * */
 			startSelectComponent: function(){
 				var that = this;
@@ -59,6 +63,7 @@ define(function() {
 			/**
 			 * Hover command
 			 * @param {Object}	e
+			 * @private
 			 */
 			onHover: function(e)
 			{
@@ -70,6 +75,7 @@ define(function() {
 			/**
 			 * Out command
 			 * @param {Object}	e
+			 * @private
 			 */
 			onOut: function(e)
 			{
@@ -82,6 +88,7 @@ define(function() {
 			/**
 			 * Hover command
 			 * @param {Object}	e
+			 * @private
 			 */
 			onClick: function(e)
 			{
@@ -93,7 +100,7 @@ define(function() {
 
 			/** Stop select component event
 			 * @param Event
-			 * @return void
+			 * @private
 			 * */
 			stopSelectComponent: function(e){
 				if(this.selEl)
@@ -105,6 +112,7 @@ define(function() {
 			 * Say what to do after the component was selected
 			 * @param 	{Object}	e
 			 * @param 	{Object}	el
+			 * @private
 			 * */
 			onSelect: function(e, el)
 			{
@@ -119,8 +127,9 @@ define(function() {
 				}
 			},
 
-			/** Removes all highlighting effects on components
-			 * @return void
+			/**
+			 * Removes all highlighting effects on components
+			 * @private
 			 * */
 			clean: function(){
 				this.$el.find('*').removeClass(this.hoverClass);
@@ -128,7 +137,7 @@ define(function() {
 
 			/** Attach badge to component
 			 * @param Object Component
-			 * @return void
+			 * @private
 			 * */
 			attachBadge: function(el){
 				var model = $(el).data("model");
@@ -152,15 +161,17 @@ define(function() {
 				this.badge.css({ left: relativeL, top:relativeT });
 			},
 
-			/** Create badge for the component
-			 * @return void
+			/**
+			 * Create badge for the component
+			 * @private
 			 * */
 			createBadge: function (){
 				this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper);
 			},
 
-			/** Remove badge
-			 * @return void
+			/**
+			 * Remove badge
+			 * @private
 			 * */
 			removeBadge: function (){
 				if(this.badge){
@@ -169,9 +180,10 @@ define(function() {
 				}
 			},
 
-			/** Updates badge label
+			/**
+			 * Updates badge label
 			 * @param Object Model
-			 * @return void
+			 * @private
 			 * */
 			updateBadgeLabel: function (model){
 				if(model)
@@ -181,6 +193,7 @@ define(function() {
 			/**
 			 * Clean previous model from different states
 			 * @param {Component} model
+			 * @private
 			 */
 			cleanPrevious: function(model){
 				model.set({
@@ -189,17 +202,11 @@ define(function() {
 				});
 			},
 
-			/**
-			 * Run method
-			 * */
 			run: function(em, sender){
 				this.enable();
 				this.render();
 			},
 
-			/**
-			 * Stop method
-			 * */
 			stop: function(){
 				var sel 	= this.editorModel.get('selectedComponent');
 				if(sel)

src/commands/view/SelectPosition.js

@@ -1,28 +1,30 @@
 define(function() {
-		/** 
+		/**
 		 * @class SelectPosition
+		 * @private
 		 * */
 		return {
-			
+
 			init: function(opt) {
 				_.bindAll(this,'selectingPosition','itemLeft');
 				this.config	= opt;
 			},
-			
-			/** 
+
+			/**
 			 * Returns position placeholder
-			 * 
+			 *
 			 * @return	{Object}	Placeholder
+			 * @private
 			 * */
 			getPositionPlaceholder: function()
 			{
 				return this.$plh;
 			},
-			
-			/** 
+
+			/**
 			 * Creates position placeholder
-			 * 
 			 * @return	{Object}	Placeholder
+			 * @private
 			 * */
 			createPositionPlaceholder: function()
 			{
@@ -32,26 +34,25 @@ define(function() {
 				this.$plh.appendTo( this.$wrapper );
 				return this.$plh;
 			},
-			
+
 			enable: function()
 			{
 				this.startSelectPosition();
 			},
-			
-			/** 
+
+			/**
 			 * Start select position event
-			 * 
-			 * @return 	void
+			 * @private
 			 * */
 			startSelectPosition: function()
 			{
 				this.isPointed = false;
 				this.$wrapper.on('mousemove', this.selectingPosition);
 			},
-			
-			/** 
+
+			/**
 			 * Stop select position event
-			 * @return 	void
+			 * @private
 			 * */
 			stopSelectPosition: function()
 			{
@@ -60,21 +61,22 @@ define(function() {
 				this.posIndex 	= this.posMethod=='after' && this.cDim.length!==0 ? this.posIndex + 1 : this.posIndex; //Normalize
 				if(this.cDim){
 					this.posIsLastEl	= this.cDim.length!==0 && this.posMethod=='after' && this.posIndex==this.cDim.length;
-					this.posTargetEl 	= (this.cDim.length===0 ? $(this.outsideElem) : 
+					this.posTargetEl 	= (this.cDim.length===0 ? $(this.outsideElem) :
 						 (!this.posIsLastEl && this.cDim[this.posIndex] ? $(this.cDim[this.posIndex][5]).parent() : $(this.outsideElem) ));
 					this.posTargetModel 		= this.posTargetEl.data("model");
 					this.posTargetCollection 	= this.posTargetEl.data("model-comp");
 				}
 			},
-			
-			/** 
+
+			/**
 			 * During event
-			 * @param	{Object}	e Event 
+			 * @param	{Object}	e Event
+			 * @private
 			 * */
 			selectingPosition: function(e)
 			{
 				this.isPointed = true;
-				
+
 				if(!this.wp){
 					this.$wp 	= this.$wrapper;
 					this.wp		= this.$wp[0];
@@ -84,33 +86,32 @@ define(function() {
 				this.wpL	= wpO.left;
 				this.wpScT	= this.$wp.scrollTop();
 				this.wpScL	= this.$wp.scrollLeft();
-				
+
 				if(!this.$plh)
 					this.createPositionPlaceholder();
-				
+
 				this.rY			= (e.pageY - this.wpT) + this.wpScT;
 				this.rX 		= (e.pageX - this.wpL) + this.wpScL;
-				
+
 				this.entered(e);
 				this.updatePosition(this.rX, this.rY);
 				var actualPos 	= this.posIndex + ':' + this.posMethod;									//save globally the new index
-				
-				if(!this.lastPos || (this.lastPos != actualPos)){						//If there is a significant changes with mouse									
+
+				if(!this.lastPos || (this.lastPos != actualPos)){						//If there is a significant changes with mouse
 					this.updatePositionPlaceholder(this.posIndex, this.posMethod);
 					this.lastPos = actualPos;
 				}
 			},
-			
-			/** 
+
+			/**
 			 * Search where to put placeholder
 			 * @param	{Integer} 	posX	X position of the mouse
 			 * @param	{Integer} 	posY	Y position of the mouse
-			 * 
-			 * @retun void
+			 * @private
 			 * */
 			updatePosition: function( posX, posY ){
 				this.posMethod = "before";
-				this.posIndex = 0;				
+				this.posIndex = 0;
 				var leftLimit = 0, xLimit = 0, dimRight = 0, yLimit = 0, xCenter = 0, yCenter = 0, dimDown = 0, dim = 0;
 				for(var i = 0; i < this.cDim.length; i++){
 					dim = this.cDim[i];
@@ -122,7 +123,7 @@ define(function() {
 						(leftLimit && dimRight < leftLimit))										//No need with this one if over the limit
 							continue;
 					if(!dim[4]){																	//If it's not inFlow (like float element)
-						if( posY < dimDown)	
+						if( posY < dimDown)
 							yLimit = dimDown;
 						if( posX < xCenter){														//If mouse lefter than center
 							xLimit = xCenter;
@@ -145,13 +146,12 @@ define(function() {
 					this.posIndex--;
 				}
 			},
-			
-			/** 
+
+			/**
 			 * Updates the position of the placeholder
 			 * @param 	{Integer}	index	Index of the nearest child
 			 * @param 	{String}	method 	Before or after position
-			 * 
-			 * @return 	void
+			 * @private
 			 * */
 			updatePositionPlaceholder: function(index, method){
 				var t = 0, l = 0, w = 0, h = 0,
@@ -163,7 +163,7 @@ define(function() {
 					var elDim	= this.cDim[index];
 					if(!elDim[4]){
 						w 	= 'auto';
-						t	= elDim[0] + marg;	
+						t	= elDim[0] + marg;
 						h	= elDim[2] - (marg * 2) + un;
 						l	= (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg);
 					}else{
@@ -184,7 +184,7 @@ define(function() {
 						h		= 'auto';
 					}
 				}
-				
+
 				plh.style.top		= t + un;
 				plh.style.left		= l	+ un;
 				if(w)
@@ -192,12 +192,11 @@ define(function() {
 				if(h)
 					plh.style.height	= h;
 			},
-			
-			/** 
+
+			/**
 			 * Track inside which element pointer entered
-			 * @param	{Object}	e	Event 
-			 * 
-			 * @return 	void
+			 * @param	{Object}	e	Event
+			 * @private
 			 * */
 			entered: function(e){
 				if( (!this.outsideElem || this.outsideElem != e.target) ){							//If I'm in the new element
@@ -214,50 +213,50 @@ define(function() {
 					this.cDim = this.getChildrenDim();
 				}
 			},
-			
-			/** 
+
+			/**
 			 * Check if pointer is near to the borders of the target
-			 * @param	{Object}	e	Event 
-			 * 
+			 * @param	{Object}	e	Event
 			 * @return	{Integer}
+			 * @private
 			 * */
 			nearToBorders: function(e){
 				var m 		= 7;																		//Limit in pixels for be near
-				if(!this.dimT) 
-					return; 
+				if(!this.dimT)
+					return;
 				var dimT 	= this.dimT;
 				if(dimT[2] < 40)
-					m 		= 5; 
-				if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) || 
+					m 		= 5;
+				if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) ||
 					((dimT[1] + m) > this.rX) || (this.rX > (dimT[1] + dimT[3] - m))  )					//Check if the pointer is near
 					return 1;
 				else
 					return 0;
 			},
-			
-			/** 
+
+			/**
 			 * Check if pointer is near to the float component
-			 * 
 			 * @return	{Integer}
+			 * @private
 			 * */
 			nearToFloat: function()
 			{
 				var index 	= this.posIndex;
 				var isLastEl	= this.posIsLastEl;
-				if(this.cDim.length !== 0 && ( 
-						(!isLastEl && !this.cDim[index][4]) || 
+				if(this.cDim.length !== 0 && (
+						(!isLastEl && !this.cDim[index][4]) ||
 						(this.cDim[index-1] && !this.cDim[index-1][4]) ||
 						(isLastEl && !this.cDim[index-1][4]) ) )
 					return 1;
 				else
 					return 0;
 			},
-			
-			/** 
+
+			/**
 			 * Returns dimension of the taget
 			 * @param	{Object}	e Event
-			 * 
 			 * @return	{Array}
+			 * @private
 			 * */
 			getTargetDim: function(e)
 			{
@@ -265,13 +264,13 @@ define(function() {
 					$el	= $(elT);
 				return [ elT.offsetTop, elT.offsetLeft, $el.outerHeight(), $el.outerWidth() ];
 			},
-			
-			/** 
-			 * Returns children and their dimensions of the target element, 
+
+			/**
+			 * Returns children and their dimensions of the target element,
 			 * excluding text nodes and the move placeholder
 			 * @param 	{Object}	el Element
-			 * 
-			 * @return 	{Array} 
+			 * @return 	{Array}
+			 * @private
 			 * */
 			getChildrenDim: function(el)
 			{
@@ -287,12 +286,11 @@ define(function() {
 				});
 				return dim;
 			},
-			
-			/** 
+
+			/**
 			 * Track when I go ouside of the element (basically when the target changes)
-			 * @param	{Object}	e Event 
-			 * 
-			 * @return	void
+			 * @param	{Object}	e Event
+			 * @private
 			 * */
 			itemLeft: function(e)
 			{
@@ -301,35 +299,35 @@ define(function() {
 				this.$targetEl	 = null;
 				this.lastPos = null;
 			},
-			
-			/** 
+
+			/**
 			 * Returns true if the elements is in flow, or better is not in flow where
 			 *  for example the component is with float:left
 			 *  @param	{Object}	$this	Context
 			 *  @param 	{Object}	elm	 	Element
-			 *  
 			 *  @return {Boolean}
+			 *  @private
 			 * */
 			isInFlow:  function($this, elm)
 			{
-			    var $elm = $(elm), ch = -1; 
+			    var $elm = $(elm), ch = -1;
 			    if(!$elm.length)
 			    	return false;
-			    if( ($elm.height() < ch) || !$this.okProps($elm) ) 
+			    if( ($elm.height() < ch) || !$this.okProps($elm) )
 			    	return false;
 			    return true;
 			},
-			
-			/** 
+
+			/**
 			 * Returns true only if the element follow the standard flow
 			 * @param 	{Object}	$elm	Element
-			 * 
 			 * @return 	{Boolean}
+			 * @private
 			 * */
-			okProps: function($elm) 
+			okProps: function($elm)
 			{
 			    if ($elm.css('float')!=='none')
-			        return false;  
+			        return false;
 			    switch($elm.css('position')) {
 			        case 'static': case 'relative':  break;
 			        default: 						 return false;
@@ -339,11 +337,11 @@ define(function() {
 			    }
 			    return false;
 			},
-			
+
 			/**
 			 * Removes position placeholder
-			 * 
 			 * @param	void
+			 * @private
 			 * */
 			removePositionPlaceholder: function()
 			{
@@ -351,13 +349,11 @@ define(function() {
 					this.$plh.remove();
 				this.$plh = null;
 			},
-			
-			/* Run method */
+
 			run: function(){
 				this.enable();
 			},
-			
-			/* Stop method */
+
 			stop: function(){
 				this.removePositionPlaceholder();
 				this.stopSelectPosition();

src/commands/view/SwitchVisibility.js

@@ -1,14 +1,15 @@
 define(function() {
 		/**
 		 * @class SwitchVisibility
+		 * @private
 		 * */
 		return {
-			
+
 			run: function()
 			{
 				this.$canvas.addClass(this.pfx + 'dashed');
 			},
-			
+
 			stop: function()
 			{
 				this.$canvas.removeClass(this.pfx + 'dashed');

src/commands/view/TextComponent.js

@@ -2,13 +2,14 @@ define(['backbone', './CreateComponent'],
 	function(Backbone, CreateComponent) {
 		/**
 		 * @class TextComponent
+		 * @private
 		 * */
 		return _.extend({}, CreateComponent, {
-			
-			/** 
+
+			/**
 			 * This event is triggered at the beginning of a draw operation
 			 * @param 	{Object} 	component	Object component before creation
-			 * 
+			 * @private
 			 * */
 			beforeDraw: function(component){
 				component.type = 'text';
@@ -16,11 +17,11 @@ define(['backbone', './CreateComponent'],
 					component.style	= {};
 				component.style.padding = '10px';
 			},
-			
-			/** 
+
+			/**
 			 * This event is triggered at the end of a draw operation
 			 * @param 	{Object}	model	Component model created
-			 * 
+			 * @private
 			 * */
 			afterDraw: function(model){
 				if(!model || !model.set)
@@ -29,6 +30,6 @@ define(['backbone', './CreateComponent'],
 				if(this.sender)
 					this.sender.set('active', false);
 			},
-			
+
 		});
 	});