social_cheesecake 0.4.0 → 0.5.0

data/app/assets/javascripts/socialcheesecake/eventCallbackHandlers.js

@@ -56,8 +56,9 @@ var socialCheesecake = socialCheesecake || {};
 			mouseout : function() {
 				document.body.style.cursor = "default";
 			},
-			click : function() {
-				return;
+			click : function(sector) {
+				sector.changeProperty("label","");
+				sector.getCheesecake().unfocusAndUnblurCheesecake();
 			},
 			mouseup : function() {
 				return;
@@ -70,13 +71,13 @@ var socialCheesecake = socialCheesecake || {};
 			mouseover : function(subsector) {
 				var cheesecake = subsector.getCheesecake();
 				document.body.style.cursor = "pointer";
-				if(subsector.parent.subsectors.length < 1) cheesecake.grid.focus(subsector.actors);
+				cheesecake.grid.focus(subsector.actors);
 				cheesecake.setHighlightedSector(subsector);
 			},
 			mouseout : function(subsector) {
 				var cheesecake = subsector.getCheesecake();
 				document.body.style.cursor = "default";
-				if(subsector.parent.subsectors.length < 1) cheesecake.grid.unfocus(subsector.actors);
+				cheesecake.grid.unfocus(subsector.actors);
 				cheesecake.setHighlightedSector(subsector.parent);
 			},
 			click : function(subsector) {
@@ -111,6 +112,14 @@ var socialCheesecake = socialCheesecake || {};
 			mouseup : function() {
 				return;
 			}
-		}
+		},
+		onSectorHighlight : null,
+		onSubsectorAddedBegin : null,
+		onSubsectorAddedEnd : null,
+		onSectorFocusBegin : null,
+		onSectorFocusEnd : null,
+		onSectorUnfocusBegin : null,
+		onSectorUnfocusEnd : null,
+		onChange : null
 	}
 })();

data/app/assets/javascripts/socialcheesecake/grid.js

@@ -7,21 +7,23 @@ var socialCheesecake = socialCheesecake || {};
 
 		//Actors dimensions and positions
 		this.actors = [];
+		this.orphans = [];
 		this.parent = settings.parent;
 		this.id = settings.grid_id;
 		this.divIdPrefix = settings.divIdPrefix;
-		socialCheesecake.Grid.maxOpacity = settings.maxOpacity;
-		socialCheesecake.Grid.minOpacity = settings.minOpacity;
+		this.maxOpacity = settings.maxOpacity;
+		this.minOpacity = settings.minOpacity;
 	}
 
-	socialCheesecake.Grid.prototype.addActor = function(actor_info, subsector) {
+	socialCheesecake.Grid.prototype.addActor = function(actorInfo, subsector) {
 		var actors = this.actors;
-		var actor;
+		var orphans = this.orphans;
+		var actor = null;
 
 		//Check if the actor is already in the array
 		var actorAlreadyDeclared = false;
 		for(var i in actors) {
-			if(actors[i].id == actor_info.id) {
+			if(actors[i].id == actorInfo.id) {
 				actorAlreadyDeclared = true;
 				actor = actors[i];
 				//Check if the subsector has already been declared a parent of the actor
@@ -34,10 +36,25 @@ var socialCheesecake = socialCheesecake || {};
 					actor.parents.push(subsector);
 			}
 		}
-		// If the actor was not in the array, create it and add it to the array
+		// If the actor was not in the array:
 		if(!actorAlreadyDeclared) {
-			actor_info.parent = subsector;
-			actor = new socialCheesecake.Actor(actor_info);
+			//Check if the actor exists as an orphan (with no subsectors parents)
+			var orphanActor = false;
+			for(var i in orphans){
+				//If it exists, take it out from this array and add its new parent
+				if(orphans[i].id == actorInfo.id){
+					orphanActor = true;
+					actor = orphans[i];
+					orphans.splice(i, 1);
+					actor.removeClass("orphan");
+					actor.parents.push(subsector);
+				}
+			}//If it doesn't, create new Actor and add its parent.
+			if(!orphanActor){
+				actorInfo.parent = subsector;
+				actorInfo.grid = this;
+				actor = new socialCheesecake.Actor(actorInfo);
+			}
 			actors.push(actor);
 		}
 		return actor;
@@ -45,9 +62,12 @@ var socialCheesecake = socialCheesecake || {};
 
 	socialCheesecake.Grid.prototype.removeActor = function(actor) {
 		var actors = this.actors;
+		var orphans = this.orphans;
 		for(var actorIndex in actors) {
-			if((actors[actorIndex].id == actor.id) && (actor.parents.length <= 0 )) {
+			if((actors[actorIndex].id == actor.id) && (actor.isOrphan())) {
 				actors.splice(actorIndex, 1);
+				orphans.push(actor);
+				actor.addClass("orphan");
 			}
 		}
 	}
@@ -64,11 +84,16 @@ var socialCheesecake = socialCheesecake || {};
 
 	socialCheesecake.Grid.prototype.getSelectedActors = function() {
 		var actors = this.actors;
+		var orphans = this.orphans;
 		var selectedActors = [];
 		for(var i in actors) {
-			if(actors[i] && actors[i].isSelected())
+			if(actors[i].isSelected())
 				selectedActors.push(actors[i]);
 		}
+		for (var i in orphans){
+			if(orphans[i].isSelected())
+				selectedActors.push(orphans[i]);
+		}
 		return selectedActors;
 	}
 

data/app/assets/javascripts/socialcheesecake/search.js

@@ -1,26 +1,18 @@
 var socialCheesecake = socialCheesecake || {}; 
 (function() {
-	socialCheesecake.SearchEngine = function(settings) {
-		this.parent = settings.parent;
-	}
-
-	socialCheesecake.SearchEngine.prototype.filter = function(pattern) {
-		var actors = this.parent.grid.actors;
-		var patt = new RegExp(pattern.toLowerCase());
-
-		for(var i in actors) {
-			var actor = actors[i];
-			if(actor.name.toLowerCase().match(patt)) {
-				actor.unfilter();
-			} else {
-				actor.filter();
+	socialCheesecake.SearchEngine = {
+		filter : function(pattern, actors) {
+			var actors = actors;
+			var patt = new RegExp(pattern.toLowerCase());
+	
+			for(var i in actors) {
+				var actor = actors[i];
+				if(actor.name.toLowerCase().match(patt)) {
+					actor.unfilter();
+				} else {
+					actor.filter();
+				}
 			}
 		}
-
-		if(this.parent.highlightedSector) {
-			this.parent.grid.fadeIn(this.parent.highlightedSector.actors, 100, true);
-		} else {
-			this.parent.grid.fadeIn(this.parent.grid.actors, 100, true);
-		}
 	}
 })();

data/app/assets/javascripts/socialcheesecake/sector.js

@@ -24,10 +24,10 @@ var socialCheesecake = socialCheesecake || {};
 		while(settings.phi <0){
 			settings.phi += 2*Math.PI;
 		}
-		if(settings.delta <= 0 || settings.delta > 2 * Math.PI) {
+		// Possible exceptions
+		if(settings.delta <= 0 || settings.delta > 2 * Math.PI) 
 			throw "Delta must be greater than 0 and less than 2*pi";
-		}
-		if(settings.id) this.id = settings.id;
+		if(settings.id != undefined) this.id = settings.id;
 		this.x = settings.center.x;
 		this.y = settings.center.y;
 		this.rOut = settings.rOut;
@@ -86,6 +86,8 @@ var socialCheesecake = socialCheesecake || {};
 		
 		this._region = null;
 	}
+	//ID beginning fot the new subsectors created by the user.
+	socialCheesecake.Sector.newSubsectorIdRoot = "new_";
 	
 	socialCheesecake.Sector.prototype._draw = function(context) {
 		var x = this.x;
@@ -94,11 +96,13 @@ var socialCheesecake = socialCheesecake || {};
 		var delta = this.delta;
 		var rIn = this.rIn;
 		var rOut = this.rOut;
-		var color = this.color;
+		var color = this.color || socialCheesecake.colors[type]["background"];
 		var label = this.label;
 		var actors = this.actors;
 		var type = this.type;
 		var fontColor = this.fontColor || socialCheesecake.colors[type]["font"];
+		var rLabel = 0.7*(rOut-rIn) + rIn;
+		var rNumber = rLabel;
 		
 		context.restore();
 		context.save();
@@ -112,28 +116,35 @@ var socialCheesecake = socialCheesecake || {};
 		context.lineWidth = 2;
 		context.strokeStyle = this.borderColor || socialCheesecake.colors[type]["border"];
 		context.stroke();
+		
+		//Write on them
 		if((this.auxiliar)&&(label=="+")){
 			socialCheesecake.text.addPlusCharacter(context, x, y, 0.5*(rOut-rIn) + rIn, 
 				phi, delta, fontColor);
 		}else if((this.parent.auxiliar)&&(this.parent.label=="+")){
-			socialCheesecake.text.writeCurvedText(label, context, x, y, 0.7*(rOut-rIn) + rIn, 
+			socialCheesecake.text.writeCurvedText(label, context, x, y, rLabel, 
 				phi, delta, fontColor, "newStyle");
 		}else{
-			socialCheesecake.text.writeCurvedText(label, context, x, y, 0.7*(rOut-rIn) + rIn, 
+			socialCheesecake.text.writeCurvedText(label, context, x, y, rLabel, 
 				phi, delta, fontColor);
 		}				
-		if(!this.auxiliar)
+		if(!this.auxiliar){
+			rNumber -= socialCheesecake.text.getTextHeight(label);
 			socialCheesecake.text.writeCurvedText("(" + actors.length + ")", context, x, y, 
-				0.55*(rOut-rIn) + rIn, phi, delta, fontColor);
+				rNumber, phi, delta, fontColor);
+		}
 	}
 	
 	socialCheesecake.Sector.prototype.getRegion = function() {
 		if(this._region == null) {
 			var sector = this;
-			sector._region = new Kinetic.Shape(function() {
-				var context = this.getContext();
-				sector._draw(context);
-			}, sector.label);
+			sector._region = new Kinetic.Geometry({
+				drawFunc : function() {
+					var context = this.getContext();
+					sector._draw(context);
+				}, 
+				name : sector.label
+			});
 			sector._region.on('mouseover', function() {
 				sector.eventHandler('mouseover');
 			});
@@ -150,6 +161,11 @@ var socialCheesecake = socialCheesecake || {};
 		return this._region
 	}
 	
+	socialCheesecake.Sector.prototype.getLayer = function(){
+		if(this.getRegion().getParent()) return this.getRegion().getLayer(); /*KINETIC FIX*/
+		return undefined;
+	}
+	
 	socialCheesecake.Sector.prototype.eventHandler = function(eventName) {
 		this.colorHandler(eventName);
 		this.callbackHandler(eventName);
@@ -180,6 +196,18 @@ var socialCheesecake = socialCheesecake || {};
 	socialCheesecake.Sector.prototype.getCheesecake = function () {
 		return this.parent;
 	}
+	/*
+	 * Returns the sector's index IN CHEESECAKE
+	 */
+	socialCheesecake.Sector.prototype.getIndex = function(){
+		var sector = this;
+		var cheesecake = sector.getCheesecake();
+		var index = null;
+		for(var i in cheesecake.sectors){
+			if(cheesecake.sectors[i] === sector ) index = i;
+		}
+		return index;
+	}
 	
 	socialCheesecake.Sector.prototype.turnExtraIntoNewSubsector = function (subsectorIndex){
 		var sector = this;
@@ -189,7 +217,14 @@ var socialCheesecake = socialCheesecake || {};
 		var dummyExtra = [];
 		var step = 1.5;
 		var mainExtraAnchor = "m";
-
+		var onSubsectorAddedBegin = socialCheesecake.eventCallbackHandlers.onSubsectorAddedBegin;
+		var onSubsectorAddedEnd = socialCheesecake.eventCallbackHandlers.onSubsectorAddedEnd;
+		
+		if(this.subsectors.length >= 4){
+			console.log("Reached subsectors limit. No new subsectors will be added");
+			return;
+		}
+		
 		//Create dummies for the animation
 		for(var i in allSubsectors){
 			var settings = {
@@ -201,28 +236,30 @@ var socialCheesecake = socialCheesecake || {};
 				phi 	: allSubsectors[i].phi,
 				delta : allSubsectors[i].delta,
 				type 	: allSubsectors[i].type,
-				auxiliar : allSubsectors[i].auxiliar || null,
+				auxiliar : true,
 				parent : allSubsectors[i].parent,
 				color : allSubsectors[i].color
 			};
 			if(i < this.extraSubsectors.length){
 				dummyExtra.push(new socialCheesecake.Subsector(settings));
-				dummyExtra[i].listen(false);
 			}else{
 				dummyNormal.push(new socialCheesecake.Subsector(settings));
-				dummyNormal[i - dummyExtra.length].listen(false);
 			}
 		}
+		cheesecake.disable();
 		cheesecake.addToLayer(dummyNormal.concat(dummyExtra));
 		//Add new Subsector and calculate subsector's new sizes
 		cheesecake.removeFromLayer(allSubsectors);
 		this.addNewSubsector(subsectorIndex);
+		//Initial callback
+		if(onSubsectorAddedBegin != null) onSubsectorAddedBegin(sector.subsectors[subsectorIndex]);
 		var normalSubsectors = this.subsectors;
 		this.extraSubsectors = [];
 		var extraSubsectors = sector.extraSubsectors;
 		var clone = this.getCheesecake().getAuxiliarClone();
 		clone.calculateSubportions();
-		clone.label="";
+		clone.label ="";
+		clone.color =socialCheesecake.colors.normalSector.background;
 		
 		for(var i in dummyExtra){
 			if(i != subsectorIndex){
@@ -281,8 +318,8 @@ var socialCheesecake = socialCheesecake || {};
 				};
 				dummyExtra.push(new socialCheesecake.Subsector(settings));
 				dummyExtra.push(new socialCheesecake.Subsector(settings));
+				var done = false;
 				for(var i = 0; i < dummyExtra.length; i++){
-					var done = false;
 					if(i != subsectorIndex){
 						dummyExtra[i].rIn = (i < subsectorIndex) ? extraSubsectors[i].getMediumRadius() : extraSubsectors[i-1].getMediumRadius();
 						dummyExtra[i].rOut = dummyExtra[i].rIn;
@@ -291,10 +328,11 @@ var socialCheesecake = socialCheesecake || {};
 							width : (i < subsectorIndex) ? extraSubsectors[i].getWidth() : extraSubsectors[i-1].getWidth(),
 							anchor : "m",
 							step : step,
-							callback : (!done) ? function (){
-								finalAnimationCallback();
+							callback : function (){
+								if(done) return;
 								done = true;
-							} : function(){return;}
+								return finalAnimationCallback;
+							}()
 						});
 					}
 				}
@@ -302,9 +340,11 @@ var socialCheesecake = socialCheesecake || {};
 		};
 		var finalAnimationCallback = function(){
 			cheesecake.removeFromLayer(dummyNormal.concat(dummyExtra));
-			cheesecake.addToLayer(normalSubsectors);	
+			cheesecake.addToLayer(normalSubsectors);
 			if(extraSubsectors) cheesecake.addToLayer(extraSubsectors);
 			cheesecake.drawLayer();
+			cheesecake.enable();
+			if(onSubsectorAddedEnd != null) onSubsectorAddedEnd(sector.subsectors[subsectorIndex]);
 		};
 		for (var i = 0; i< dummyNormal.length; i++){
 			dummyNormal[i].resizeWidth({
@@ -318,7 +358,7 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Sector.prototype.splitUp = function() {
 		var cheesecake = this.getCheesecake();
-		var callback = cheesecake.onSectorFocusEnd;
+		var onSectorFocusEnd = socialCheesecake.eventCallbackHandlers.onSectorFocusEnd;
 		var sector = (this.simulate != null) ? cheesecake.sectors[this.simulate] :  this;
 		var subsectors = sector.subsectors;
 
@@ -328,9 +368,7 @@ var socialCheesecake = socialCheesecake || {};
 		this.calculateSubportions();
 		cheesecake.addToLayer(subsectors.concat(sector.extraSubsectors));
 		cheesecake.drawLayer();
-		if(callback){
-			callback(cheesecake);
-		}
+		if(onSectorFocusEnd) onSectorFocusEnd(cheesecake);
 	}
 	
 	socialCheesecake.Sector.prototype.putTogether = function() {
@@ -416,12 +454,11 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Sector.prototype.changeProperty = function (name, value){
 		var sector = this;
-		var stage = sector.getCheesecake().stage;
-		var context = stage.mainLayer.getContext();
+		var cheesecake = sector.getCheesecake();
+		var layer = sector.getLayer();
 		sector[name] = value;
-		context.restore();
-		context.save();
-		stage.draw();
+		if((sector.type == "normalSector") && (name == "label")) cheesecake.updateSectorChanges(sector);
+		if(layer) cheesecake.drawLayer(layer);
 	}
 	
 	/**
@@ -438,8 +475,6 @@ var socialCheesecake = socialCheesecake || {};
 		if(!options)
 			throw "No arguments passed to the function";
 		var sector = this;
-		var stage = sector.getCheesecake().stage;
-		var context = stage.mainLayer.getContext();
 		var currentDelta = sector.delta;
 		var currentPhi = sector.phi;
 		var step = 0.05;
@@ -484,9 +519,7 @@ var socialCheesecake = socialCheesecake || {};
 		sector.phi = currentPhi;
 		
 		//Redraw
-		context.restore();
-		context.save();
-		stage.draw();
+		sector.getCheesecake().drawLayer(sector.getLayer());
 		//Repeat if necessary
 		if(goOn && (Math.round(currentDelta*1000) != Math.round(goalDelta*1000))) {
 			requestAnimFrame(function() {
@@ -512,8 +545,6 @@ var socialCheesecake = socialCheesecake || {};
 	 */
 	socialCheesecake.Sector.prototype.resizeWidth = function(options) {
 		var sector = this;
-		var stage = sector.getCheesecake().stage;
-		var context = stage.mainLayer.getContext();
 		var currentRIn = this.rIn;
 		var currentROut = this.rOut;
 		var currentWidth = (currentROut - currentRIn);
@@ -566,9 +597,7 @@ var socialCheesecake = socialCheesecake || {};
 		sector.rOut = currentROut;
 		sector.rIn = currentRIn;
 		//Redraw
-		context.restore();
-		context.save();
-		stage.draw();
+		sector.getCheesecake().drawLayer(sector.getLayer());
 		//Repeat if necessary
 		if ((goOn) &&(Math.round(currentWidth *1000) != Math.round(goalWidth *1000))) {
 			requestAnimFrame(function() {
@@ -590,7 +619,6 @@ var socialCheesecake = socialCheesecake || {};
 		if(options.radius - this.getWidth()/2 < 0) options.radius = this.getWidth()/2;
 		var goalMedRad = options.radius || currentMedRad;
 		var step = options.step || 0.05;
-		var context = this.getCheesecake().stage.mainLayer.getContext();
 		
 		if(goalMedRad > currentMedRad){
 			if(goalMedRad - currentMedRad < step) step = goalMedRad - currentMedRad;
@@ -605,9 +633,7 @@ var socialCheesecake = socialCheesecake || {};
 		this.rOut = Math.round(currentROut *1000)/1000;
 		currentMedRad = this.getMediumRadius();
 		//Redraw
-		context.restore();
-		context.save();
-		this.getCheesecake().stage.draw();
+		sector.getCheesecake().drawLayer(sector.getLayer());
 		//Repeat if necessary
 		if ((Math.round(currentMedRad *1000) != Math.round(goalMedRad *1000))) {
 			requestAnimFrame(function() {
@@ -622,22 +648,12 @@ var socialCheesecake = socialCheesecake || {};
 	
 	socialCheesecake.Sector.prototype.focus = function() {
 		var sector = this;
-		var stage = sector.getCheesecake().stage;
-		var context = stage.mainLayer.getContext();
-		sector.rOut = sector.originalAttr.rOut * 1.05;
-		context.restore();
-		context.save();
-		stage.draw();
+		sector.changeProperty("rOut", sector.originalAttr.rOut * 1.05);
 	}
 	
 	socialCheesecake.Sector.prototype.unfocus = function() {
 		var sector = this;
-		var stage = sector.getCheesecake().stage;
-		var context = stage.mainLayer.getContext();
-		sector.rOut = sector.originalAttr.rOut;
-		context.restore();
-		context.save();
-		stage.draw();
+		sector.changeProperty("rOut", sector.originalAttr.rOut);
 	}
 	
 	/**
@@ -668,14 +684,11 @@ var socialCheesecake = socialCheesecake || {};
 	}
 	
 	socialCheesecake.Sector.prototype.rotateTo = function(options) {
-		// update stage
 		var sector = this;
 		var currentPhi = this.phi % (2 * Math.PI);
 		var delta = this.delta;
 		var step = 0.05;
 		var anchor = 0;
-		var stage = sector.getCheesecake().stage;
-		var context = sector.getRegion().getLayer().getContext();
 		if(!options) throw "No arguments passed to the function";
 		if(options.step) step = options.step;
 		if(options.destination == null) throw "destination must be defined";
@@ -721,16 +734,13 @@ var socialCheesecake = socialCheesecake || {};
 		sector.phi = currentPhi;
 
 		// redraw
-		context.restore();
-		context.save();
-		stage.draw();
+		sector.getCheesecake().drawLayer(sector.getLayer());
 
 		// request new frame
 		if(Math.abs(currentPhi - phiDestination) > 0.001) {
 			sector.phi = currentPhi % (2 * Math.PI);
 			requestAnimFrame(function() {
 				sector.rotateTo({
-					context : context,
 					destination : options.destination,
 					step : step,
 					callback : options.callback,
@@ -742,25 +752,27 @@ var socialCheesecake = socialCheesecake || {};
 		}
 	}
 	
-	socialCheesecake.Sector.prototype.addNewSubsector = function (sectorIndex){
+	socialCheesecake.Sector.prototype.addNewSubsector = function (subectorIndex){
 		var subsectors = this.subsectors;
 		var settings = {
 			parent : this,
 			x : this.x,
 			y : this.y,
 			delta : this.delta,
-			phi : this.phi /*,
-			id : jsonSectors[i].id,*/
+			phi : this.phi,
+			id : socialCheesecake.Sector.newSubsectorIdRoot +'S'+ this.getIndex() +'s'+subectorIndex
 		};
-		/*Rearrange subsectors*/		
+		//Rearrange subsectors
 		for(var i = subsectors.length ; i >= 0 ; i--){
-			if( i > sectorIndex) subsectors[i] = subsectors[i-1];
-			if( i == sectorIndex ){
+			if( i > subectorIndex) subsectors[i] = subsectors[i-1];
+			if( i == subectorIndex ){
 				settings.label = "New Subsector "+ i;
 				subsectors[i]= new socialCheesecake.Subsector(settings);
 			}
 		}
-		return subsectors[sectorIndex];
+		//Communicate changes to Cheesecake
+		this.getCheesecake().updateSectorChanges(this);
+		return subsectors[subectorIndex];
 	}
 	
 	socialCheesecake.Sector.prototype.addActor = function(actorInfo , subsector){
@@ -797,6 +809,7 @@ var socialCheesecake = socialCheesecake || {};
 		var actors = this.actors;
 		var actorParents;
 		var actorPresentInSector = false;
+		var grid = this.getCheesecake().grid;
 		
 		for(var actorIndex in actors){
 			if(actors[actorIndex].id == actor.id){
@@ -813,6 +826,7 @@ var socialCheesecake = socialCheesecake || {};
 				//If there isn't, remove the actor from the array and tell the Grid
 				if(!actorPresentInSector){
 					actors.splice(actorIndex,1);
+					grid.removeActor(actor);
 				}
 			}
 		}
@@ -826,6 +840,14 @@ var socialCheesecake = socialCheesecake || {};
 		return (this.rOut + this.rIn)/2;
 	}
 	
+	socialCheesecake.Sector.prototype.getSubsectorsIds = function(){
+		var subsectors = [];
+		for(var subsector in this.subsectors){
+			subsectors.push(this.subsectors[subsector].id);
+		}
+		return subsectors;
+	}
+	
 	socialCheesecake.Sector.prototype.listen = function (on){
 		var region = this.getRegion();
 		var sector = this;