Follow user: List of users in People tab, click to follow user, click…

… again to unfollow

Other changes:
- add E2.app.growl() method for showing messages
- stop handling ctrl/cmd-l
- add userId to session cookie
- make the server know about active graph, followers

app.js

@@ -12,6 +12,7 @@ var morgan = require('morgan');
 var errorHandler = require('errorhandler');
 var csrf = require('lusca').csrf();
 var methodOverride = require('method-override');
+var crypto = require('crypto')
 
 var flash = require('express-flash');
 var path = require('path');
@@ -135,6 +136,11 @@ app.use(flash());
 
 app.use(function(req, res, next)
 {
+	if (!req.user)
+		req.session.userId = crypto.randomBytes(12).toString('hex')
+	else
+		req.session.userId = req.user._id
+
 	res.locals.user = req.user;
 	res.locals.KEY_GA = process.env.KEY_GA;
 	next();

browser/scripts/application.js

@@ -62,6 +62,8 @@ function Application() {
 	this.graphStore = new GraphStore()
 	this.peopleStore = new PeopleStore()
 
+	this.peopleManager = new PeopleManager(this.peopleStore, $('#peopleTab'))
+
 	// Make the UI visible now that we know that we can execute JS
 	$('.nodisplay').removeClass('nodisplay');
 
@@ -1268,14 +1270,6 @@ Application.prototype.onKeyDown = function(e) {
 		}
 		else if(e.keyCode === 76) // CTRL+l
 		{
-			this.collapse_log = !this.collapse_log;
-			E2.dom.dbg.toggle(!this.collapse_log);
-
-			if(!this.collapse_log)
-				msg(null); // Update scroll position.
-
-			this.onWindowResize();
-			e.preventDefault();
 			return;
 		}
 
@@ -1526,6 +1520,34 @@ Application.prototype.onLoadClipboardClicked = function() {
 	})
 }
 
+var growlOpen
+Application.prototype.growl = function(title) {
+	var tt = $('#breadcrumb')
+
+	function close() {
+		tt.tooltip('hide')
+		tt.tooltip('destroy')
+		growlOpen = false
+	}
+
+	if (growlOpen)
+		close()
+
+	tt.tooltip({
+		title: title,
+		container: 'body',
+		animation: false,
+		trigger: 'manual',
+		placement: 'bottom'
+	})
+
+	growlOpen = true
+
+	tt.tooltip('show')
+
+	setTimeout(close, 3000)
+}
+
 Application.prototype.onShowTooltip = function(e) {
 	var that = this
 
@@ -1606,6 +1628,7 @@ Application.prototype.onShowTooltip = function(e) {
 			container: 'body',
 			animation: false,
 			trigger: 'manual',
+			placement: 'bottom',
 			html: true
 		})
 		.tooltip('show');
@@ -1705,11 +1728,6 @@ Application.prototype.onGraphSelected = function(graph) {
 	E2.core.active_graph.destroy_ui()
 	E2.core.active_graph = graph
 
-	this.dispatcher.dispatch({
-		actionType: 'uiActiveGraphChanged',
-		activeGraphUid: graph.uid
-	})
-
 	E2.dom.canvas_parent.scrollTop(0)
 	E2.dom.canvas_parent.scrollLeft(0)
 	this.scrollOffset[0] = this.scrollOffset[1] = 0
@@ -1751,9 +1769,11 @@ Application.prototype.onGraphSelected = function(graph) {
 
 	E2.core.active_graph.reset()
 	E2.core.active_graph_dirty = true
+
+	E2.app.updateCanvas(true)
 }
 
-Application.prototype.setupMouseMirroring = function() {
+Application.prototype.setupPeopleEvents = function() {
 	var that = this
 	var cursors = this.mouseCursors = {}
 
@@ -1801,8 +1821,11 @@ Application.prototype.setupMouseMirroring = function() {
 	})
 
 	this.peopleStore.on('activeGraphChanged', function(person) {
+		if (E2.app.channel.uid === person.uid) // it's for me
+			return E2.app.onGraphSelected(Graph.lookup(person.activeGraphUid))
+
 		var $cursor = cursors[person.uid]
-		if (person.activeGraphUid === E2.core.active_graph.uid)
+		if (person.activeGraphUid === E2.core.active_graph.uid) 
 			$cursor.show()
 		else
 			$cursor.hide()
@@ -1914,7 +1937,7 @@ Application.prototype.start = function() {
 	this.midPane = new E2.MidPane()
 
 	that.peopleStore.initialize()
-	that.setupMouseMirroring()
+	that.setupPeopleEvents()
 	that.setupStoreListeners()
 
 	E2.app.player.play() // autoplay
@@ -2005,8 +2028,6 @@ E2.InitialiseEngi = function(vr_devices, loadGraphUrl) {
 		function(graph) { // On item activation
 			E2.app.clearEditState()
 			E2.app.clearSelection()
-			E2.app.onGraphSelected(graph)
-			E2.app.updateCanvas(true)
 		},
 		// on graph reorder
 		E2.app.graphApi.reorder.bind(E2.app.graphApi)

browser/scripts/editConnection.js

@@ -75,8 +75,6 @@ EditConnection.prototype.canConnectTo = function(node, slot) {
 
 	var can = a && b && c
 
-	console.log('can',can, a,b,c, this.dstSlot)
-
 	if (can) {
 		this._lastMatch = [node, slot]
 	} else {

browser/scripts/editorChannel.js

@@ -73,6 +73,8 @@ function isAcceptedDispatch(m) {
 
 		case 'uiMouseMoved':
 		case 'uiMouseClicked':
+		case 'uiUserIdFollowed':
+		case 'uiUserIdUnfollowed':
 		case 'uiActiveGraphChanged':
 			return true;
 	}
@@ -87,12 +89,13 @@ function EditorChannel() {
 
 	var that = this
 
-	this.colors = {}
-
 	this.channel = new WebSocketChannel()
 
 	this.channel
 		.connect('/__editorChannel')
+		.on('disconnected', function() {
+			E2.app.growl('Disconnected from server')
+		})
 		.on('ready', function(uid) {
 			that.uid = uid
 
@@ -126,8 +129,14 @@ EditorChannel.prototype.join = function(channelName) {
 	}
 
 	this.channelName = channelName
+
+	this.channel.ws.send(JSON.stringify({
+		kind: 'join',
+		channel: channelName,
+		activeGraphUid: E2.core.active_graph.uid
+	}))
+
 	this.channel
-		.join(channelName)
 		.on('*', function(payload) {
 			if (!payload.actionType || !payload.from)
 				return;

browser/scripts/peopleManager.js

@@ -0,0 +1,62 @@
+
+function PeopleManager(peopleStore, $el) {
+	var that = this
+
+	this.peopleStore = peopleStore
+	this.$el = $el
+	this._template = E2.views.partials.peopleMenu
+
+	this.peopleStore.on('added', this.render.bind(this))
+	this.peopleStore.on('removed', this.render.bind(this))
+	this.peopleStore.on('userUnfollowed', function(person, followee) {
+		if (followee.uid === E2.app.channel.uid)
+			E2.app.growl(person.username+' stopped following you')
+
+		that.render()
+	})
+	this.peopleStore.on('userFollowed', function(person, followee) {
+		if (followee.uid === E2.app.channel.uid)
+			E2.app.growl(person.username+' started following you')
+
+		that.render()
+	})
+}
+
+PeopleManager.prototype.render = function() {
+	var that = this
+
+	var people = this.peopleStore.list().map(function(p) {
+		p.followed = (p.uid === that.peopleStore.me.followUid)
+
+		if (p.uid === E2.app.channel.uid)
+			p.itsMe = true
+
+		return p
+	})
+
+	var html = this._template({ people: people })
+
+	this.$el.empty().html(html)
+
+	this.$el.find('li').click(function(e) {
+		var $t = $(e.target).closest('li')
+		var uid = $t.data('uid')
+
+		if (that.peopleStore.me.followUid === uid) {
+			E2.app.dispatcher.dispatch({
+				actionType: 'uiUserIdUnfollowed',
+				followUid: uid
+			})
+		} else {
+			if (uid === E2.app.channel.uid)
+				return;
+
+			E2.app.dispatcher.dispatch({
+				actionType: 'uiUserIdFollowed',
+				followUid: uid
+			})
+		}
+	})
+}
+
+

browser/scripts/peopleStore.js

@@ -11,6 +11,7 @@ if (typeof(module) !== 'undefined') {
  * It knows about their active graph, pointer color, position,
  * and when they click.
  *
+ * @fires PeopleStore#userFollowed
  * @fires PeopleStore#activeGraphChanged
  * @fires PeopleStore#mouseClicked
  * @fires PeopleStore#mouseMoved
@@ -31,23 +32,71 @@ PeopleStore.prototype.initialize = function() {
 	document.addEventListener('mousemove', this._mouseMoveHandler.bind(this))
 	document.addEventListener('click', this._mouseClickHandler.bind(this))
 
-	E2.app.dispatcher.register(function(payload) {
-		if (!payload.from || payload.from === E2.app.channel.uid)
-			return
+	var myUid = E2.app.channel.uid
+
+	this.me = this.people[myUid] = {
+		uid: myUid,
+		activeGraphUid: E2.core.active_graph.uid
+	}
+
+	function setOwnGraph(graphUid) {
+		that.me.activeGraphUid = graphUid
+		that.emit('activeGraphChanged', that.me)
+	}
 
-		var uid = payload.from
+	E2.app.dispatcher.register(function(payload) {
+		var uid = payload.from = payload.from || myUid
+		var isOwn = payload.from === myUid
 
 		switch(payload.actionType) {
+			case 'uiUserIdUnfollowed':
+				var person = that.people[uid]
+				var target = that.people[payload.followUid]
+				person.followUid = null
+				target.followers--
+				that.emit('userUnfollowed', person, target)
+				break;
+			case 'uiUserIdFollowed':
+				var person = that.people[uid]
+				var followee = that.people[payload.followUid]
+				if (!followee)
+					return;
+
+				person.followUid = payload.followUid
+
+				followee.followers++
+
+				if (isOwn)
+					setOwnGraph(followee.activeGraphUid)
+
+				that.emit('userFollowed', person, followee)
+
+				break
+
 			case 'uiActiveGraphChanged':
 				that.people[uid].activeGraphUid = payload.activeGraphUid
 				that.emit('activeGraphChanged', that.people[uid])
+
+				if (isOwn)
+					return
+
+				// if I'm following them, change my activeGraph too
+				if (that.me.followUid === uid)
+					setOwnGraph(payload.activeGraphUid)
+
 				break;
 
 			case 'uiMouseClicked':
+				if (isOwn)
+					return
+
 				that.emit('mouseClicked', uid)
 				break;
 
 			case 'uiMouseMoved':
+				if (isOwn)
+					return
+
 				that.people[uid].x = payload.x
 				that.people[uid].y = payload.y
 
@@ -58,22 +107,29 @@ PeopleStore.prototype.initialize = function() {
 
 	E2.app.channel
 	.on('leave', function(m) {
+		var person = that.people[m.id]
 		if (m.id === E2.app.channel.uid) {
 			that.empty()
 		} else {
+			if (person.followUid)
+				that.people[person.followUid].followers--;
+
 			delete that.people[m.id]
 			that.emit('removed', m.id)
 		}
 	})
 	.on('join', function(m) {
-		if (that.people[m.id])
-			return;
+		if (!that.people[m.id])
+			that.people[m.id] = {}
 
-		that.people[m.id] = {
-			uid: m.id,
-			color: m.color,
-			activeGraphUid: E2.core.root_graph.uid
-		}
+		that.people[m.id].uid = m.id
+		that.people[m.id].username = m.username
+		that.people[m.id].color = m.color
+		that.people[m.id].activeGraphUid = m.activeGraphUid
+		that.people[m.id].followers = m.followers || 0
+
+		if (m.id === myUid)
+			that.me = that.people[m.id]
 
 		that.emit('added', that.people[m.id])
 	})

browser/scripts/player.js

@@ -18,7 +18,7 @@ function Player(vr_devices, canvas, root_node, cb)
 	this.frames = 0;
 	this.scheduled_stop = null;
 
-	this.core.active_graph = this.core.root_graph = new Graph(this.core, null, 0);
+	this.core.active_graph = this.core.root_graph = new Graph(this.core, null, 'root');
 	this.core.graphs.push(this.core.root_graph);
 
 	this.play = function()

browser/scripts/treeview.js

@@ -175,6 +175,11 @@ TreeView.prototype.select = function(t_node) {
 
 	if(highest_closed)
 		highest_closed.rebuild_dom();
+
+	E2.app.dispatcher.dispatch({
+		actionType: 'uiActiveGraphChanged',
+		activeGraphUid: t_node.graph.uid
+	})
 
 	this.on_activate(t_node.parent_node ? t_node.graph : this.root.graph);