get all events working

app/models/mapping.rb

@@ -33,10 +33,16 @@ class Mapping < ApplicationRecord
     if mappable_type == 'Topic'
       meta = {'x': xloc, 'y': yloc, 'mapping_id': id}
       Events::TopicAddedToMap.publish!(mappable, map, user, meta)
-      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'topicAdded', topic: mappable.filtered
+      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'topicAdded', topic: mappable.filtered, mapping_id: id
     elsif mappable_type == 'Synapse'
       Events::SynapseAddedToMap.publish!(mappable, map, user, meta)
-      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'synapseAdded', synapse: synapse.filtered
+      ActionCable.server.broadcast(
+        'map_' + map.id.to_s,
+        type: 'synapseAdded',
+        synapse: mappable.filtered,
+        topic1: mappable.topic1.filtered,
+        topic2: mappable.topic2.filtered,
+        mapping_id: id)
     end
   end
 
@@ -44,8 +50,7 @@ class Mapping < ApplicationRecord
     if mappable_type == 'Topic' and (xloc_changed? or yloc_changed?)
       meta = {'x': xloc, 'y': yloc, 'mapping_id': id}
       Events::TopicMovedOnMap.publish!(mappable, map, updated_by, meta)
-      # should we add another actioncable event here? don't need it right now because sockets handles 
+      # we should add another action cable event here
-      # the moving/dragging of topics. it could be moved via the api or some other source though
     end
   end
 
@@ -59,10 +64,10 @@ class Mapping < ApplicationRecord
     meta = {'mapping_id': id}
     if mappable_type == 'Topic'
       Events::TopicRemovedFromMap.publish!(mappable, map, updated_by, meta)
-      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'topicRemoved', id: mappable.id
+      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'topicRemoved', id: mappable.id, mapping_id: id
     elsif mappable_type == 'Synapse'
       Events::SynapseRemovedFromMap.publish!(mappable, map, updated_by, meta)
-      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'synapseRemoved', id: mappable.id
+      ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'synapseRemoved', id: mappable.id, mapping_id: id
     end
   end
 end

frontend/src/Metamaps/Cable.js

@@ -29,15 +29,19 @@ const Cable = {
     delete self.sub
   },
   synapseAdded: event => {
+    // make sure we don't have the relevant synapse first
+    
+    // we receive contentless models from the server
+    // containing only the information we need to determine whether the active mapper
+    // can view this synapse and the two topics it connects,
+    // then if we determine it can, we make a call for the full model
     const m = Active.Mapper
     const s = new DataModel.Synapse(event.synapse)
     const t1 = new DataModel.Topic(event.topic1)
     const t2 = new DataModel.Topic(event.topic2)
+
     if (t1.authorizeToShow(m) && t2.authorizeToShow(m) && s.authorizeToShow(m)) {
-      console.log('permission to fetch new synapse')
+      // refactor the heck outta this
-    }
-  },
-  synapseAdded2: event => {
       var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper
  
       function waitThenRenderSynapse() {
@@ -53,15 +57,15 @@ const Cable = {
         }
       }
 
-    mapper = DataModel.Mappers.get(data.mapperid)
+      mapper = DataModel.Mappers.get(event.synapse.user_id)
       if (mapper === undefined) {
-      Mapper.get(data.mapperid, function(m) {
+        Mapper.get(event.synapse.user_id, function(m) {
           DataModel.Mappers.add(m)
           mapper = m
         })
       }
       $.ajax({
-      url: '/synapses/' + data.mappableid + '.json',
+        url: '/synapses/' + event.synapse.id + '.json',
         success: function(response) {
           DataModel.Synapses.add(response)
           synapse = DataModel.Synapses.get(response.id)
@@ -71,7 +75,7 @@ const Cable = {
         }
       })
       $.ajax({
-      url: '/mappings/' + data.mappingid + '.json',
+        url: '/mappings/' + event.mapping_id + '.json',
         success: function(response) {
           DataModel.Mappings.add(response)
           mapping = DataModel.Mappings.get(response.id)
@@ -81,6 +85,7 @@ const Cable = {
         }
       })
       waitThenRenderSynapse()
+    }
   },
   synapseUpdated: event => {
     var synapse = DataModel.Synapses.get(event.id)
@@ -96,6 +101,7 @@ const Cable = {
     }
   },
   synapseRemoved: event => {
+    // remove by the mapping id instead
     var synapse = DataModel.Synapses.get(event.id)
     if (synapse) {
       var edge = synapse.get('edge')
@@ -115,6 +121,16 @@ const Cable = {
     }
   },
   topicAdded: event => {
+    // make sure we don't have the relevant topic first
+
+    const m = Active.Mapper
+    // we receive a contentless model from the server
+    // containing only the information we need to determine whether the active mapper
+    // can view this topic, then if we determine it can, we make a call for the full model
+    const t = new DataModel.Topic(event.topic)
+
+    if (t.authorizeToShow(m)) {
+      // refactor the heck outta this
       var topic, mapping, mapper, cancel
     
       function waitThenRenderTopic() {
@@ -125,15 +141,15 @@ const Cable = {
         }
       }
     
-    mapper = DataModel.Mappers.get(data.mapperid)
+      mapper = DataModel.Mappers.get(event.topic.user_id)
       if (mapper === undefined) {
-      Mapper.get(data.mapperid, function(m) {
+        Mapper.get(event.topic.user_id, function(m) {
           DataModel.Mappers.add(m)
           mapper = m
         })
       }
       $.ajax({
-      url: '/topics/' + data.mappableid + '.json',
+        url: '/topics/' + event.topic.id + '.json',
         success: function(response) {
           DataModel.Topics.add(response)
           topic = DataModel.Topics.get(response.id)
@@ -143,7 +159,7 @@ const Cable = {
         }
       })
       $.ajax({
-      url: '/mappings/' + data.mappingid + '.json',
+        url: '/mappings/' + event.mapping_id + '.json',
         success: function(response) {
           DataModel.Mappings.add(response)
           mapping = DataModel.Mappings.get(response.id)
@@ -152,8 +168,8 @@ const Cable = {
           cancel = true
         }
       })
-  
       waitThenRenderTopic()
+    }
   },
   topicUpdated: event => {
     var topic = DataModel.Topics.get(event.id)
@@ -168,6 +184,7 @@ const Cable = {
     }
   },
   topicRemoved: event => {
+    // remove by the mapping id instead
     var topic = DataModel.Topics.get(event.id)
     if (topic) {
       var node = topic.get('node')
@@ -200,5 +217,6 @@ const Cable = {
       }
     })
   }
+}
 
 export default Cable

frontend/src/Metamaps/Control.js

@@ -102,9 +102,6 @@ const Control = {
       var mapping = node.getData('mapping')
       topic.destroy()
       DataModel.Mappings.remove(mapping)
-      $(document).trigger(JIT.events.deleteTopic, [{
-        mappableid: mappableid
-      }])
       Control.hideNode(nodeid)
     } else {
       GlobalUI.notifyUser('Only topics you created can be deleted')
@@ -155,9 +152,6 @@ const Control = {
     var mapping = node.getData('mapping')
     mapping.destroy()
     DataModel.Topics.remove(topic)
-    $(document).trigger(JIT.events.removeTopic, [{
-      mappableid: mappableid
-    }])
     Control.hideNode(nodeid)
   },
   hideSelectedNodes: function() {
@@ -283,9 +277,6 @@ const Control = {
       if (edge.getData('displayIndex')) {
         delete edge.data.$displayIndex
       }
-      $(document).trigger(JIT.events.deleteSynapse, [{
-        mappableid: mappableid
-      }])
     } else {
       GlobalUI.notifyUser('Only synapses you created can be deleted')
     }
@@ -337,9 +328,6 @@ const Control = {
     if (edge.getData('displayIndex')) {
       delete edge.data.$displayIndex
     }
-    $(document).trigger(JIT.events.removeSynapse, [{
-      mappableid: mappableid
-    }])
   },
   hideSelectedEdges: function() {
     const l = Selected.Edges.length

frontend/src/Metamaps/DataModel/Map.js

@@ -15,32 +15,8 @@ const Map = Backbone.Model.extend({
   toJSON: function(options) {
     return _.omit(this.attributes, this.blacklist)
   },
-  save: function(key, val, options) {
-    var attrs
-
-    // Handle both `"key", value` and `{key: value}` -style arguments.
-    if (key == null || typeof key === 'object') {
-      attrs = key
-      options = val
-    } else {
-      (attrs = {})[key] = val
-    }
-
-    var newOptions = options || {}
-    var s = newOptions.success
-
-    newOptions.success = function(model, response, opt) {
-      if (s) s(model, response, opt)
-      model.trigger('saved')
-    }
-    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
-  },
   initialize: function() {
     this.on('changeByOther', this.updateView)
-    this.on('saved', this.savedEvent)
-  },
-  savedEvent: function() {
-    Realtime.updateMap(this)
   },
   authorizeToEdit: function(mapper) {
     if (mapper && (

frontend/src/Metamaps/DataModel/Synapse.js

@@ -20,34 +20,6 @@ const Synapse = Backbone.Model.extend({
   toJSON: function(options) {
     return _.omit(this.attributes, this.blacklist)
   },
-  save: function(key, val, options) {
-    var attrs
-
-    // Handle both `"key", value` and `{key: value}` -style arguments.
-    if (key == null || typeof key === 'object') {
-      attrs = key
-      options = val
-    } else {
-      (attrs = {})[key] = val
-    }
-
-    var newOptions = options || {}
-    var s = newOptions.success
-
-    var permBefore = this.get('permission')
-
-    newOptions.success = function(model, response, opt) {
-      if (s) s(model, response, opt)
-      model.trigger('saved')
-
-      if (permBefore === 'private' && model.get('permission') !== 'private') {
-        model.trigger('noLongerPrivate')
-      } else if (permBefore !== 'private' && model.get('permission') === 'private') {
-        model.trigger('nowPrivate')
-      }
-    }
-    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
-  },
   initialize: function() {
     if (this.isNew()) {
       this.set({
@@ -56,24 +28,8 @@ const Synapse = Backbone.Model.extend({
         'category': 'from-to'
       })
     }
-
     this.on('changeByOther', this.updateCardView)
     this.on('change', this.updateEdgeView)
-    this.on('saved', this.savedEvent)
-    this.on('noLongerPrivate', function() {
-      var newSynapseData = {
-        mappingid: this.getMapping().id,
-        mappableid: this.id
-      }
-
-      $(document).trigger(JIT.events.newSynapse, [newSynapseData])
-    })
-    this.on('nowPrivate', function() {
-      $(document).trigger(JIT.events.removeSynapse, [{
-        mappableid: this.id
-      }])
-    })
-
     this.on('change:desc', Filter.checkSynapses, this)
   },
   prepareLiForFilter: function() {
@@ -153,9 +109,6 @@ const Synapse = Backbone.Model.extend({
 
     return edge
   },
-  savedEvent: function() {
-    Realtime.updateSynapse(this)
-  },
   updateViews: function() {
     this.updateCardView()
     this.updateEdgeView()

frontend/src/Metamaps/DataModel/Topic.js

@@ -19,34 +19,6 @@ const Topic = Backbone.Model.extend({
   toJSON: function(options) {
     return _.omit(this.attributes, this.blacklist)
   },
-  save: function(key, val, options) {
-    var attrs
-
-    // Handle both `"key", value` and `{key: value}` -style arguments.
-    if (key == null || typeof key === 'object') {
-      attrs = key
-      options = val
-    } else {
-      (attrs = {})[key] = val
-    }
-
-    var newOptions = options || {}
-    var s = newOptions.success
-
-    var permBefore = this.get('permission')
-
-    newOptions.success = function(model, response, opt) {
-      if (s) s(model, response, opt)
-      model.trigger('saved')
-
-      if (permBefore === 'private' && model.get('permission') !== 'private') {
-        model.trigger('noLongerPrivate')
-      } else if (permBefore !== 'private' && model.get('permission') === 'private') {
-        model.trigger('nowPrivate')
-      }
-    }
-    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
-  },
   initialize: function() {
     if (this.isNew()) {
       this.set({
@@ -59,23 +31,6 @@ const Topic = Backbone.Model.extend({
 
     this.on('changeByOther', this.updateCardView)
     this.on('change', this.updateNodeView)
-    this.on('saved', this.savedEvent)
-    this.on('nowPrivate', function() {
-      var removeTopicData = {
-        mappableid: this.id
-      }
-
-      $(document).trigger(JIT.events.removeTopic, [removeTopicData])
-    })
-    this.on('noLongerPrivate', function() {
-      var newTopicData = {
-        mappingid: this.getMapping().id,
-        mappableid: this.id
-      }
-
-      $(document).trigger(JIT.events.newTopic, [newTopicData])
-    })
-
     this.on('change:metacode_id', Filter.checkMetacodes, this)
   },
   authorizeToEdit: function(mapper) {
@@ -139,9 +94,6 @@ const Topic = Backbone.Model.extend({
 
     return node
   },
-  savedEvent: function() {
-    Realtime.updateTopic(this)
-  },
   updateViews: function() {
     var onPageWithTopicCard = Active.Map || Active.Topic
     var node = this.get('node')

frontend/src/Metamaps/Map/index.js

@@ -5,7 +5,6 @@ import { find as _find } from 'lodash'
 
 import Active from '../Active'
 import AutoLayout from '../AutoLayout'
-import Cable from '../Cable'
 import Create from '../Create'
 import DataModel from '../DataModel'
 import DataModelMap from '../DataModel/Map'
@@ -125,7 +124,6 @@ const Map = {
       Filter.checkMappers()
 
       Realtime.startActiveMap()
-      Cable.subscribeToMap(id)
       Loading.hide()
 
       // for mobile
@@ -150,7 +148,6 @@ const Map = {
       Filter.close()
       InfoBox.close()
       Realtime.endActiveMap()
-      Cable.unsubscribeFromMap()
       $('.viewOnly').removeClass('isViewOnly')
     }
   },

frontend/src/Metamaps/Realtime/events.js

@@ -30,14 +30,4 @@ module.exports = {
   LOST_MAPPER: 'LOST_MAPPER',
   TOPIC_DRAGGED: 'TOPIC_DRAGGED',
   PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED',
-
-  /* EVENTS RECEIVABLE FROM RAILS SERVER THROUGH ACTIONCABLE */
-  MESSAGE_CREATED: 'MESSAGE_CREATED',
-  TOPIC_ADDED: 'TOPIC_ADDED',
-  TOPIC_UPDATED: 'TOPIC_UPDATED',
-  TOPIC_REMOVED: 'TOPIC_REMOVED',
-  SYNAPSE_ADDED: 'SYNAPSE_ADDED',
-  SYNAPSE_UPDATED: 'SYNAPSE_UPDATED',
-  SYNAPSE_REMOVED: 'SYNAPSE_REMOVED',
-  MAP_UPDATED: 'MAP_UPDATED'
 }

frontend/src/Metamaps/Realtime/index.js

@@ -4,6 +4,7 @@ import SimpleWebRTC from 'simplewebrtc'
 import SocketIoConnection from 'simplewebrtc/socketioconnection'
 
 import Active from '../Active'
+import Cable from '../Cable'
 import DataModel from '../DataModel'
 import JIT from '../JIT'
 import Util from '../Util'
@@ -26,16 +27,7 @@ import {
   NEW_MAPPER,
   LOST_MAPPER,
   PEER_COORDS_UPDATED,
-  TOPIC_DRAGGED,
+  TOPIC_DRAGGED
-
-  MESSAGE_CREATED,
-  TOPIC_ADDED,
-  TOPIC_UPDATED,
-  TOPIC_REMOVED,
-  SYNAPSE_ADDED,
-  SYNAPSE_UPDATED,
-  SYNAPSE_REMOVED,
-  MAP_UPDATED
 } from './events'
 
 import {
@@ -112,10 +104,7 @@ let Realtime = {
     self.socket.on('connect', function() {
       console.log('connected')
       subscribeToEvents(self, self.socket)
-
+      self.disconnected = false
-      if (!self.disconnected) {
-        self.startActiveMap()
-      } else self.disconnected = false
     })
     self.socket.on('disconnect', function() {
       self.disconnected = true
@@ -168,6 +157,8 @@ let Realtime = {
         config: { DOUBLE_CLICK_TOLERANCE: 200 }
       })
       self.room.videoAdded(self.handleVideoAdded)
+      
+      self.startActiveMap()
     } // if Active.Mapper
   },
   addJuntoListeners: function() {
@@ -201,10 +192,13 @@ let Realtime = {
     if (Active.Map && Active.Mapper) {
       if (Active.Map.authorizeToEdit(Active.Mapper)) {
         self.turnOn()
-        self.setupSocket()
+        if (self.socket.connected) {
-        self.setupLocalSendables()
+          self.checkForCall()
+          self.joinMap()
+        }
       }
       self.setupChat() // chat can happen on public maps too
+      Cable.subscribeToMap(Active.Map.id) // people with edit rights can still see live updates
     }
   },
   endActiveMap: function() {
@@ -218,6 +212,7 @@ let Realtime = {
     ChatView.hide()
     ChatView.close()
     ChatView.reset()
+    Cable.unsubscribeFromMap()
   },
   turnOn: function(notify) {
     var self = Realtime
@@ -234,6 +229,7 @@ let Realtime = {
     self.localVideo.view.$container.find('.video-cutoff').css({
       border: '4px solid ' + self.activeMapper.color
     })
+    self.setupLocalEvents()
   },
   setupChat: function() {
     const self = Realtime
@@ -242,44 +238,22 @@ let Realtime = {
     ChatView.addMessages(new DataModel.MessageCollection(DataModel.Messages), true)
     ChatView.show()
   },
-  setupSocket: function() {
+  setupLocalEvents: function() {
     var self = Realtime
-    self.checkForCall()
-    self.joinMap()
-  },
-  setupLocalSendables: function() {
-    var self = Realtime
-
     // local event listeners that trigger events
-    var sendCoords = function(event) {
+    $(document).on(JIT.events.zoom + '.map', self.positionPeerIcons)
+    $(document).on(JIT.events.pan + '.map', self.positionPeerIcons)
+    $(document).on('mousemove.map', function(event) {
       var pixels = {
         x: event.pageX,
         y: event.pageY
       }
       var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
       self.sendCoords(coords)
-    }
+    })
-    $(document).on('mousemove.map', sendCoords)
+    $(document).on(JIT.events.topicDrag + '.map', function(event, positions) {
-
-    var zoom = function(event, e) {
-      if (e) {
-        var pixels = {
-          x: e.pageX,
-          y: e.pageY
-        }
-        var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
-        self.sendCoords(coords)
-      }
-      self.positionPeerIcons()
-    }
-    $(document).on(JIT.events.zoom + '.map', zoom)
-
-    $(document).on(JIT.events.pan + '.map', self.positionPeerIcons)
-
-    var dragTopic = function(event, positions) {
       self.dragTopic(positions)
-    }
+    })
-    $(document).on(JIT.events.topicDrag + '.map', dragTopic)
   },
   countOthersInConversation: function() {
     var self = Realtime
@@ -442,17 +416,7 @@ const sendables = [
   ['leaveCall', leaveCall],
   ['sendMapperInfo', sendMapperInfo],
   ['sendCoords', sendCoords],
-  ['createMessage', createMessage],
+  ['dragTopic', dragTopic]
-  ['dragTopic', dragTopic],
-  ['createTopic', createTopic],
-  ['updateTopic', updateTopic],
-  ['removeTopic', removeTopic],
-  ['deleteTopic', deleteTopic],
-  ['createSynapse', createSynapse],
-  ['updateSynapse', updateSynapse],
-  ['removeSynapse', removeSynapse],
-  ['deleteSynapse', deleteSynapse],
-  ['updateMap', updateMap]
 ]
 sendables.forEach(sendable => {
   Realtime[sendable[0]] = sendable[1](Realtime)
@@ -474,17 +438,6 @@ const subscribeToEvents = (Realtime, socket) => {
   socket.on(NEW_MAPPER, newMapper(Realtime))
   socket.on(LOST_MAPPER, lostMapper(Realtime))
   socket.on(TOPIC_DRAGGED, topicDragged(Realtime))
-
-/*
-  socket.on(MESSAGE_CREATED, messageCreated(Realtime))
-  socket.on(TOPIC_ADDED, topicAdded(Realtime))
-  socket.on(TOPIC_UPDATED, topicUpdated(Realtime))
-  socket.on(TOPIC_REMOVED, topicRemoved(Realtime))
-  socket.on(SYNAPSE_ADDED, synapseAdded(Realtime))
-  socket.on(SYNAPSE_UPDATED, synapseUpdated(Realtime))
-  socket.on(SYNAPSE_REMOVED, synapseRemoved(Realtime))
-  socket.on(MAP_UPDATED, mapUpdated(Realtime))
-*/
 }
 
 export default Realtime

frontend/src/Metamaps/Realtime/sendable.js

@@ -148,7 +148,7 @@ export const inviteToJoin = self => userid => {
 export const sendCoords = self => coords => {
   var map = Active.Map
   var mapper = Active.Mapper
-  if (map.authorizeToEdit(mapper)) {
+  if (map && map.authorizeToEdit(mapper)) {
     var update = {
       usercoords: coords,
       userid: Active.Mapper.id,

frontend/src/Metamaps/Synapse.js

@@ -40,18 +40,12 @@ const Synapse = {
 
     Control.selectEdge(edgeOnViz)
 
-    var mappingSuccessCallback = function(mappingModel, response) {
-      var newSynapseData = {
-        mappingid: mappingModel.id,
-        mappableid: mappingModel.get('mappable_id')
-      }
-
-      $(document).trigger(JIT.events.newSynapse, [newSynapseData])
-    }
     var synapseSuccessCallback = function(synapseModel, response) {
       if (Active.Map) {
         mapping.save({ mappable_id: synapseModel.id }, {
-          success: mappingSuccessCallback
+          error: function(model, response) {
+            console.log('error saving mapping to database')
+          }
         })
       }
     }
@@ -66,7 +60,9 @@ const Synapse = {
         })
       } else if (!synapse.isNew() && Active.Map) {
         mapping.save(null, {
-          success: mappingSuccessCallback
+          error: function(model, response) {
+            console.log('error saving mapping to database')
+          }
         })
       }
     }

frontend/src/Metamaps/Topic.js

@@ -242,12 +242,6 @@ const Topic = {
     }
 
     var mappingSuccessCallback = function(mappingModel, response, topicModel) {
-      var newTopicData = {
-        mappingid: mappingModel.id,
-        mappableid: mappingModel.get('mappable_id')
-      }
-
-      $(document).trigger(JIT.events.newTopic, [newTopicData])
       // call a success callback if provided
       if (opts.success) {
         opts.success(topicModel)

frontend/src/Metamaps/Views/ChatView.js

@@ -120,10 +120,10 @@ const ChatView = {
     ChatView.render()
   },
   close: () => {
-    ChatView.mapChat.close()
+    ChatView.mapChat && ChatView.mapChat.close()
   },
   open: () => {
-    ChatView.mapChat.open()
+    ChatView.mapChat && ChatView.mapChat.open()
   },
   videoToggleClick: function() {
     ChatView.videosShowing = !ChatView.videosShowing
@@ -176,9 +176,9 @@ const ChatView = {
     messages.models.forEach(m => ChatView.addMessage(m, isInitial, wasMe))
   },
   reset: () => {
-    ChatView.mapChat.reset()
+    ChatView.mapChat && ChatView.mapChat.reset()
-    ChatView.participants.reset()
+    ChatView.participants && ChatView.participants.reset()
-    ChatView.messages.reset()
+    ChatView.messages && ChatView.messages.reset()
     ChatView.render()
   }
 }