glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

get all events working

Browse source
This commit is contained in:
Connor Turland 2016-12-29 20:28:30 +00:00
parent 36449cce47
commit b6ce1d8c19
13 changed files with 141 additions and 319 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/models/mapping.rb
View file

@ -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
# the moving/dragging of topics. it could be moved via the api or some other source though
# we should add another action cable event here
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

168
frontend/src/Metamaps/Cable.js
View file

@ -29,58 +29,63 @@ 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')
}
},
synapseAdded2: event => {
var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper
// refactor the heck outta this
var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper
function waitThenRenderSynapse() {
if (synapse && mapping && mapper) {
topic1 = synapse.getTopic1()
node1 = topic1.get('node')
topic2 = synapse.getTopic2()
node2 = topic2.get('node')
function waitThenRenderSynapse() {
if (synapse && mapping && mapper) {
topic1 = synapse.getTopic1()
node1 = topic1.get('node')
topic2 = synapse.getTopic2()
node2 = topic2.get('node')
Synapse.renderSynapse(mapping, synapse, node1, node2, false)
} else if (!cancel) {
setTimeout(waitThenRenderSynapse, 10)
Synapse.renderSynapse(mapping, synapse, node1, node2, false)
} else if (!cancel) {
setTimeout(waitThenRenderSynapse, 10)
}
}
}
mapper = DataModel.Mappers.get(data.mapperid)
if (mapper === undefined) {
Mapper.get(data.mapperid, function(m) {
DataModel.Mappers.add(m)
mapper = m
mapper = DataModel.Mappers.get(event.synapse.user_id)
if (mapper === undefined) {
Mapper.get(event.synapse.user_id, function(m) {
DataModel.Mappers.add(m)
mapper = m
})
}
$.ajax({
url: '/synapses/' + event.synapse.id + '.json',
success: function(response) {
DataModel.Synapses.add(response)
synapse = DataModel.Synapses.get(response.id)
},
error: function() {
cancel = true
}
})
$.ajax({
url: '/mappings/' + event.mapping_id + '.json',
success: function(response) {
DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id)
},
error: function() {
cancel = true
}
})
waitThenRenderSynapse()
}
$.ajax({
url: '/synapses/' + data.mappableid + '.json',
success: function(response) {
DataModel.Synapses.add(response)
synapse = DataModel.Synapses.get(response.id)
},
error: function() {
cancel = true
}
})
$.ajax({
url: '/mappings/' + data.mappingid + '.json',
success: function(response) {
DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id)
},
error: function() {
cancel = true
}
})
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,45 +121,55 @@ const Cable = {
}
},
topicAdded: event => {
var topic, mapping, mapper, cancel
// make sure we don't have the relevant topic first
function waitThenRenderTopic() {
if (topic && mapping && mapper) {
Topic.renderTopic(mapping, topic, false, false)
} else if (!cancel) {
setTimeout(waitThenRenderTopic, 10)
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() {
if (topic && mapping && mapper) {
Topic.renderTopic(mapping, topic, false, false)
} else if (!cancel) {
setTimeout(waitThenRenderTopic, 10)
}
}
}
mapper = DataModel.Mappers.get(data.mapperid)
if (mapper === undefined) {
Mapper.get(data.mapperid, function(m) {
DataModel.Mappers.add(m)
mapper = m
mapper = DataModel.Mappers.get(event.topic.user_id)
if (mapper === undefined) {
Mapper.get(event.topic.user_id, function(m) {
DataModel.Mappers.add(m)
mapper = m
})
}
$.ajax({
url: '/topics/' + event.topic.id + '.json',
success: function(response) {
DataModel.Topics.add(response)
topic = DataModel.Topics.get(response.id)
},
error: function() {
cancel = true
}
})
$.ajax({
url: '/mappings/' + event.mapping_id + '.json',
success: function(response) {
DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id)
},
error: function() {
cancel = true
}
})
waitThenRenderTopic()
}
$.ajax({
url: '/topics/' + data.mappableid + '.json',
success: function(response) {
DataModel.Topics.add(response)
topic = DataModel.Topics.get(response.id)
},
error: function() {
cancel = true
}
})
$.ajax({
url: '/mappings/' + data.mappingid + '.json',
success: function(response) {
DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id)
},
error: function() {
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

12
frontend/src/Metamaps/Control.js
View file

@ -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

24
frontend/src/Metamaps/DataModel/Map.js
View file

@ -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 && (

47
frontend/src/Metamaps/DataModel/Synapse.js
View file

@ -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()

48
frontend/src/Metamaps/DataModel/Topic.js
View file

@ -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')

3
frontend/src/Metamaps/Map/index.js
View file

@ -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')
}
},

10
frontend/src/Metamaps/Realtime/events.js
View file

@ -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'
}

87
frontend/src/Metamaps/Realtime/index.js
View file

@ -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,
MESSAGE_CREATED,
TOPIC_ADDED,
TOPIC_UPDATED,
TOPIC_REMOVED,
SYNAPSE_ADDED,
SYNAPSE_UPDATED,
SYNAPSE_REMOVED,
MAP_UPDATED
TOPIC_DRAGGED
} from './events'
import {
@ -112,10 +104,7 @@ let Realtime = {
self.socket.on('connect', function() {
console.log('connected')
subscribeToEvents(self, self.socket)
if (!self.disconnected) {
self.startActiveMap()
} else self.disconnected = false
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()
self.setupLocalSendables()
if (self.socket.connected) {
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)
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) {
})
$(document).on(JIT.events.topicDrag + '.map', 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],
['createTopic', createTopic],
['updateTopic', updateTopic],
['removeTopic', removeTopic],
['deleteTopic', deleteTopic],
['createSynapse', createSynapse],
['updateSynapse', updateSynapse],
['removeSynapse', removeSynapse],
['deleteSynapse', deleteSynapse],
['updateMap', updateMap]
['dragTopic', dragTopic]
]
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

2
frontend/src/Metamaps/Realtime/sendable.js
View file

@ -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,

16
frontend/src/Metamaps/Synapse.js
View file

@ -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')
}
})
}
}

6
frontend/src/Metamaps/Topic.js
View file

@ -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)

10
frontend/src/Metamaps/Views/ChatView.js
View file

@ -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.participants.reset()
ChatView.messages.reset()
ChatView.mapChat && ChatView.mapChat.reset()
ChatView.participants && ChatView.participants.reset()
ChatView.messages && ChatView.messages.reset()
ChatView.render()
}
}