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

more crazy refactoring

Browse source
This commit is contained in:
Connor Turland 2017-03-22 22:36:59 -04:00
parent b7a6e615a0
commit 79839a4b48
19 changed files with 2737 additions and 2733 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/Metamaps/GlobalUI/ReactApp.js
View file

@ -108,7 +108,7 @@ const ReactApp = {
mobileTitleClick: (e) => self.openMap && self.openMap.InfoBox.toggleBox(e),
openInviteLightbox: () => self.openLightbox('invite'),
serverData: self.serverData,
endActiveMap: mapControl.end,
endActiveMap: () => mapControl.end(self.openMap),
launchNewMap: mapControl.launch,
mapId: self.mapId,
topicId: self.topicId
@ -159,7 +159,7 @@ const ReactApp = {
openTopic: TopicCard.openTopic,
metacodeSets: self.metacodeSets,
updateTopic: (topic, obj) => topic.save(obj),
onTopicFollow: Topic.onTopicFollow // todo
onTopicFollow: () => {} // Topic.onTopicFollow // todo
}
},
getTopicProps: function() {

2
frontend/src/Metamaps/GlobalUI/Search.js
View file

@ -1,4 +1,4 @@
ReactApp.currentUserReactApp.currentUser/* global $, Hogan, Bloodhound, CanvasLoader */
/* global $, Hogan, Bloodhound, CanvasLoader */
import { browserHistory } from 'react-router'

33
frontend/src/Metamaps/Map/ChatView.js
View file

@ -4,6 +4,7 @@ import Backbone from 'backbone'
import { Howl } from 'howler'
import ReactApp from '../GlobalUI/ReactApp'
import MessageCollection from '../DataModel/MessageCollection'
const ChatView = (map) => {
const toExport = {
@ -12,19 +13,6 @@ const toExport = {
messages: new Backbone.Collection(),
conversationLive: false,
isParticipating: false,
init: function(urls) {
const self = toExport
self.sound = new Howl({
src: urls,
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
}
})
},
setNewMap: function() {
const self = toExport
self.unreadMessages = 0
@ -118,13 +106,13 @@ const toExport = {
addMessage: (message, isInitial, wasMe) => {
const self = toExport
if (!isInitial && !self.isOpen) self.unreadMessages += 1
if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
if (!wasMe && !isInitial && self.alertSound) ChatView.sound.play('receivechat')
self.messages.add(message)
if (!isInitial && self.isOpen) self.render()
},
sendChatMessage: message => {
var self = toExport
if (toExport.alertSound) toExport.sound.play('sendchat')
if (toExport.alertSound) ChatView.sound.play('sendchat')
var m = new DataModel.Message({
message: message.message,
resource_id: map.Active.Map.id,
@ -132,7 +120,7 @@ const toExport = {
})
m.save(null, {
success: function(model, response) {
self.addMessages(new DataModel.MessageCollection(model), false, true)
self.addMessages(new MessageCollection(model), false, true)
},
error: function(model, response) {
console.log('error!', response)
@ -150,7 +138,6 @@ const toExport = {
}
return toExport
}
/**
* @class
* @static
@ -165,5 +152,17 @@ ChatView.events = {
videosOff: 'ChatView:videosOff',
videosOn: 'ChatView:videosOn'
}
ChatView.init = function(urls) {
ChatView.sound = new Howl({
src: urls,
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
}
})
}
export default ChatView

4
frontend/src/Metamaps/Map/Create.js
View file

@ -266,7 +266,7 @@ const toExport = {
})
toExport.newTopic.beingCreated = true
toExport.newTopic.name = ''
//Map.setHasLearnedTopicCreation(true)
map.Map.setHasLearnedTopicCreation(true)
},
hide: function(force) {
if (force || !toExport.newTopic.pinned) {
@ -277,7 +277,7 @@ const toExport = {
toExport.newTopic.pinned = false
}
if (map.DataModel.Topics.length === 0) {
Map.setHasLearnedTopicCreation(false)
map.Map.setHasLearnedTopicCreation(false)
}
toExport.newTopic.beingCreated = false
},

16
frontend/src/Metamaps/Map/Filter.js
View file

@ -6,7 +6,7 @@ import GlobalUI, { ReactApp } from '../GlobalUI'
import Settings from '../Settings'
const Filter = (map) => {
const toExport = {
const toExport = {
dataForPresentation: {
metacodes: {},
mappers: {},
@ -45,7 +45,7 @@ const toExport = {
// the first option enables us to accept
// ['Topics', 'Synapses'] as 'collection'
if (typeof collection === 'object') {
DataModel[collection[0]].each(function(model) {
map.DataModel[collection[0]].each(function(model) {
var prop = model.get(propertyToCheck)
if (prop !== null) {
prop = prop.toString()
@ -54,7 +54,7 @@ const toExport = {
}
}
})
DataModel[collection[1]].each(function(model) {
map.DataModel[collection[1]].each(function(model) {
var prop = model.get(propertyToCheck)
if (prop !== null) {
prop = prop.toString()
@ -64,7 +64,7 @@ const toExport = {
}
})
} else if (typeof collection === 'string') {
DataModel[collection].each(function(model) {
map.DataModel[collection].each(function(model) {
var prop = model.get(propertyToCheck)
if (prop !== null) {
prop = prop.toString()
@ -82,8 +82,8 @@ const toExport = {
delete self.dataForPresentation[filtersToUse][identifier]
})
_.each(added, function(identifier) {
const model = DataModel[correlatedModel].get(identifier) ||
DataModel[correlatedModel].find(function(m) {
const model = map.DataModel[correlatedModel].get(identifier) ||
map.DataModel[correlatedModel].find(function(m) {
return m.get(propertyToCheck) === identifier
})
self.dataForPresentation[filtersToUse][identifier] = model.prepareDataForFilter()
@ -272,8 +272,8 @@ const toExport = {
duration: 200
})
}
}
return toExport
}
return toExport
}
export default Filter

50
frontend/src/Metamaps/Map/InfoBox.js
View file

@ -3,11 +3,12 @@
import outdent from 'outdent'
import { browserHistory } from 'react-router'
import DataModel from '../DataModel'
import GlobalUI, { ReactApp } from '../GlobalUI'
import Util from '../Util'
const InfoBox = (map) => {
const toExport = {
const toExport = {
isOpen: false,
selectingPermission: false,
changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, and the permission of all the topics and synapses you have authority to change will change as well.</div>",
@ -39,21 +40,21 @@ const toExport = {
self.updateThumbnail = updateThumbnail
$('.maptoExport').click(function(event) {
$('.mapInfoBox').click(function(event) {
event.stopPropagation()
})
$('body').click(self.close)
self.attachEventListeners()
self.generateBoxHTML = Hogan.compile($('#maptoExportTemplate').html())
self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
self.userImageUrl = serverData['user.png']
var querystring = window.location.search.replace(/^\?/, '')
if (querystring === 'new') {
self.open()
$('.maptoExport').addClass('mapRequestTitle')
$('.mapInfoBox').addClass('mapRequestTitle')
$('#mapInfoName').trigger('click')
$('#mapInfoName textarea').focus()
$('#mapInfoName textarea').select()
@ -77,7 +78,7 @@ const toExport = {
close: function() {
var self = toExport
$('.mapInfoIcon div').removeClass('hide')
$('.maptoExport').fadeOut(200, function() {
$('.mapInfoBox').fadeOut(200, function() {
self.isOpen = false
self.hidePermissionSelect()
$('.mapContributors .tip').hide()
@ -86,17 +87,17 @@ const toExport = {
load: function() {
var self = toExport
var map = map.Active.Map
var m = map.Active.Map
var obj = map.pick('permission', 'topic_count', 'synapse_count')
var obj = m.pick('permission', 'topic_count', 'synapse_count')
var isCreator = map.authorizePermissionChange(map.Active.Mapper)
var canEdit = map.authorizeToEdit(map.Active.Mapper)
var relevantPeople = map.get('permission') === 'commons' ? map.DataModel.Mappers : map.DataModel.Collaborators
var shareable = map.get('permission') !== 'private'
var isCreator = m.authorizePermissionChange(map.Active.Mapper)
var canEdit = m.authorizeToEdit(map.Active.Mapper)
var relevantPeople = m.get('permission') === 'commons' ? map.DataModel.Mappers : map.DataModel.Collaborators
var shareable = m.get('permission') !== 'private'
obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get('name')}) : map.get('name')
obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get('desc')}) : map.get('desc')
obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: m.id, name: m.get('name')}) : m.get('name')
obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: m.id, desc: m.get('desc')}) : m.get('desc')
obj['map_creator_tip'] = isCreator ? self.changePermissionText : ''
obj['contributor_count'] = relevantPeople.length
@ -105,10 +106,11 @@ const toExport = {
obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : self.userImageUrl
obj['contributor_list'] = self.createContributorList()
obj['user_name'] = isCreator ? 'You' : map.get('user_name')
obj['created_at'] = map.get('created_at_clean')
obj['updated_at'] = map.get('updated_at_clean')
obj['user_name'] = isCreator ? 'You' : m.get('user_name')
obj['created_at'] = m.get('created_at_clean')
obj['updated_at'] = m.get('updated_at_clean')
self.generateBoxHTML = self.generateBoxHTML || Hogan.compile($('#mapInfoBoxTemplate').html())
self.html = self.generateBoxHTML.render(obj)
ReactApp.render()
self.attachEventListeners()
@ -365,25 +367,25 @@ const toExport = {
confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
var doIt = window.confirm(confirmString)
var map = map.Active.Map
var m = map.Active.Map
var mapper = map.Active.Mapper
var authorized = map.authorizePermissionChange(mapper)
if (doIt && authorized) {
toExport.close()
DataModel.Maps.map.Active.remove(map)
DataModel.Maps.Featured.remove(map)
DataModel.Maps.Mine.remove(map)
DataModel.Maps.Shared.remove(map)
map.destroy()
DataModel.Maps.map.Active.remove(m)
DataModel.Maps.Featured.remove(m)
DataModel.Maps.Mine.remove(m)
DataModel.Maps.Shared.remove(m)
m.destroy()
browserHistory.push('/')
GlobalUI.notifyUser('Map eliminated')
} else if (!authorized) {
window.alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")
}
}
}
return toExport
}
return toExport
}
export default InfoBox

65
frontend/src/Metamaps/Map/JIT.js
View file

@ -17,8 +17,7 @@ import Util from '../Util'
let panningInt
const JIT = (map) => {
return {
const toExport = {
tempInit: false,
tempNode: null,
tempNode2: null,
@ -26,13 +25,6 @@ return {
dragFlag: 0,
dragTolerance: 0,
virtualPointer: {},
events: {
topicDrag: 'Metamaps:JIT:events:topicDrag',
pan: 'Metamaps:JIT:events:pan',
zoom: 'Metamaps:JIT:events:zoom',
animationDone: 'Metamaps:JIT:events:animationDone'
},
vizData: [], // contains the visualization-compatible graph
/**
* convert our topic JSON into something JIT can use
@ -90,7 +82,7 @@ return {
return [jitReady, synapsesToRemove]
},
prepareVizData: function() {
const self = JIT
const self = toExport
let mapping
self.vizData = []
map.Visualize.loadLater = false
@ -103,10 +95,10 @@ return {
if (map.DataModel.Mappings) map.DataModel.Mappings.remove(mapping)
})
if (self.vizData.length === 0) {
Map.setHasLearnedTopicCreation(false)
map.Map.setHasLearnedTopicCreation(false)
map.Visualize.loadLater = true
} else {
Map.setHasLearnedTopicCreation(true)
map.Map.setHasLearnedTopicCreation(true)
}
map.Visualize.render()
}, // prepareVizData
@ -239,7 +231,7 @@ return {
duration: 800,
onComplete: function() {
map.Visualize.mGraph.busy = false
$(document).trigger(map.JIT.events.animationDone)
$(document).trigger(JIT.events.animationDone)
}
},
animateFDLayout: {
@ -431,7 +423,7 @@ return {
// if the topic has a link, draw a small image to indicate that
const hasLink = topic && topic.get('link') !== '' && topic.get('link') !== null
const linkImage = map.JIT.topicLinkImage
const linkImage = JIT.topicLinkImage
const linkImageLoaded = linkImage.complete ||
(typeof linkImage.naturalWidth !== 'undefined' &&
linkImage.naturalWidth !== 0)
@ -441,7 +433,7 @@ return {
// if the topic has a desc, draw a small image to indicate that
const hasDesc = topic && topic.get('desc') !== '' && topic.get('desc') !== null
const descImage = map.JIT.topicDescImage
const descImage = JIT.topicDescImage
const descImageLoaded = descImage.complete ||
(typeof descImage.naturalWidth !== 'undefined' &&
descImage.naturalWidth !== 0)
@ -643,7 +635,7 @@ return {
map.Visualize.mGraph.plot()
}, // onMouseLeave
onMouseMoveHandler: function(_node, eventInfo, e) {
const self = JIT
const self = toExport
if (map.Visualize.mGraph.busy) return
@ -693,7 +685,7 @@ return {
map.Control.deselectAllNodes()
}, // escKeyHandler
onDragMoveTopicHandler: function(node, eventInfo, e) {
var self = JIT
var self = toExport
var authorized = map.Active.Map && map.Active.Map.authorizeToEdit(map.Active.Mapper)
@ -883,7 +875,7 @@ return {
map.Visualize.mGraph.plot()
}, // onDragCancelHandler
onDragEndTopicHandler: function(node, eventInfo, e) {
const self = JIT
const self = toExport
const midpoint = {}
let pixelPos
let mapping
@ -1039,7 +1031,7 @@ return {
} // for
if (map.Active.Map) {
$(document).trigger(map.JIT.events.topicDrag, [positionsToSend])
$(document).trigger(JIT.events.topicDrag, [positionsToSend])
}
},
@ -1254,7 +1246,7 @@ return {
selectNodeOnClickHandler: function(node, e) {
if (map.Visualize.mGraph.busy) return
const self = JIT
const self = toExport
// Copy topic title to clipboard
if (e.button === 1 && e.ctrlKey) clipboard.copy(node.name)
@ -1551,7 +1543,7 @@ return {
selectEdgeOnClickHandler: function(adj, e) {
if (map.Visualize.mGraph.busy) return
const self = JIT
const self = toExport
var synapseText = adj.data.$synapses[0].attributes.desc
// Copy synapse label to clipboard
if (e.button === 1 && e.ctrlKey && synapseText !== '') clipboard.copy(synapseText)
@ -1711,7 +1703,7 @@ return {
function myTimer() {
map.Visualize.mGraph.canvas.translate(xVelocity * easing * 1 / sx, yVelocity * easing * 1 / sy)
$(document).trigger(map.JIT.events.pan)
$(document).trigger(JIT.events.pan)
easing = easing * 0.75
if (easing < 0.1) window.clearInterval(panningInt)
@ -1759,7 +1751,7 @@ return {
ctx.stroke()
}, // renderMidArrow
renderEdgeArrows: function(edgeHelper, adj, synapse, canvas) {
const self = JIT
const self = toExport
const directionCat = synapse.get('category')
const direction = synapse.getDirection()
@ -1813,11 +1805,11 @@ return {
}, // renderEdgeArrows
zoomIn: function(event) {
map.Visualize.mGraph.canvas.scale(1.25, 1.25)
$(document).trigger(map.JIT.events.zoom, [event])
$(document).trigger(JIT.events.zoom, [event])
},
zoomOut: function(event) {
map.Visualize.mGraph.canvas.scale(0.8, 0.8)
$(document).trigger(map.JIT.events.zoom, [event])
$(document).trigger(JIT.events.zoom, [event])
},
centerMap: function(canvas) {
const offsetScale = canvas.scaleOffsetX
@ -1862,7 +1854,7 @@ return {
const cogY = (sY + eY) / 2
canvas.translate(-1 * cogX, -1 * cogY)
$(document).trigger(map.JIT.events.zoom, [event])
$(document).trigger(JIT.events.zoom, [event])
map.Mouse.boxStartCoordinates = false
map.Mouse.boxEndCoordinates = false
@ -1943,25 +1935,32 @@ return {
canvas.scale(scaleMultiplier, scaleMultiplier)
}
$(document).trigger(map.JIT.events.zoom, [event])
$(document).trigger(JIT.events.zoom, [event])
} else if (nodes.length === 1) {
nodes.forEach(function(n) {
const x = n.pos.x
const y = n.pos.y
canvas.translate(-1 * x, -1 * y)
$(document).trigger(map.JIT.events.zoom, [event])
$(document).trigger(JIT.events.zoom, [event])
})
}
}
}
return toExport
}
JIT.events = {
topicDrag: 'Metamaps:JIT:events:topicDrag',
pan: 'Metamaps:JIT:events:pan',
zoom: 'Metamaps:JIT:events:zoom',
animationDone: 'Metamaps:JIT:events:animationDone'
}
map.JIT.init = function(serverData) {
map.JIT.topicDescImage = new Image()
map.JIT.topicDescImage.src = serverData['topic_description_signifier.png']
JIT.init = function(serverData) {
JIT.topicDescImage = new Image()
JIT.topicDescImage.src = serverData['topic_description_signifier.png']
map.JIT.topicLinkImage = new Image()
map.JIT.topicLinkImage.src = serverData['topic_link_signifier.png']
JIT.topicLinkImage = new Image()
JIT.topicLinkImage.src = serverData['topic_link_signifier.png']
}
export default JIT

216
frontend/src/Metamaps/Map/Realtime/index.js
View file

@ -3,8 +3,12 @@
import SimpleWebRTC from 'simplewebrtc'
import SocketIoConnection from 'simplewebrtc/socketioconnection'
import MessageCollection from '../../DataModel/MessageCollection'
import Util from '../../Util'
import Views from '../Views'
import ChatView from '../ChatView'
import { ReactApp } from '../../GlobalUI'
import JIT from '../JIT'
import {
JUNTO_UPDATED,
@ -25,7 +29,6 @@ import {
} from './events'
import {
juntoUpdated,
invitedToCall,
invitedToJoin,
callAccepted,
@ -59,49 +62,63 @@ import {
} from './sendable'
const Realtime = (map) => {
const toExport = {
const toExport = {
videoId: 'video-wrapper',
socket: null,
webrtc: null,
readyToCall: false,
mappersOnMap: {},
disconnected: false,
chatOpen: false,
soundId: null,
broadcastingStatus: false,
inConversation: false,
localVideo: null,
'junto_spinner_darkgrey.gif': '',
init: function(serverData) {
onSocketConnect: () => {},
startActiveMap: function() {
var self = toExport
if (map.Active.Map.authorizeToEdit(map.Active.Mapper)) {
self.addJuntoListeners()
self.socket = new SocketIoConnection({
url: serverData['REALTIME_SERVER'],
socketio: {
// don't poll forever if in development
reconnectionAttempts: serverData.RAILS_ENV === 'development' ? 5 : Infinity
if (Realtime.socket && !Realtime.socket.disconnected) self.onSocketConnect = self._onSocketConnect
else self._onSocketConnect()
}
})
self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
self.socket.on('connect', function() {
console.log('connected')
if (map.Active.Map && map.Active.Mapper && map.Active.Map.authorizeToEdit(map.Active.Mapper)) {
self.checkForCall()
self.joinMap()
}
subscribeToEvents(self, self.socket)
self.disconnected = false
})
self.socket.on('disconnect', function() {
self.disconnected = true
})
if (map.Active.Mapper) {
self.setupChat() // chat can happen on public maps too
map.Cable.subscribeToMap(map.Active.Map.id) // people with viewing rights can still see live updates
}
},
endActiveMap: function() {
var self = toExport
$(document).off('.map')
// leave the appropriate rooms to leave
if (self.inConversation) self.leaveCall()
self.leaveMap()
$('.collabCompass').remove()
if (self.room) self.room.leave()
if (!Realtime.socket.disconnected) self.unsubscribeFromEvents()
map.Cable.unsubscribeFromMap()
},
_onSocketConnect: function() {
console.log('testing')
const self = toExport
const sendables = [
['joinMap', joinMap],
['leaveMap', leaveMap],
['checkForCall', checkForCall],
['acceptCall', acceptCall],
['denyCall', denyCall],
['denyInvite', denyInvite],
['inviteToJoin', inviteToJoin],
['inviteACall', inviteACall],
['joinCall', joinCall],
['leaveCall', leaveCall],
['sendMapperInfo', sendMapperInfo],
['sendCoords', sendCoords],
['dragTopic', dragTopic]
]
sendables.forEach(sendable => {
toExport[sendable[0]] = sendable[1](Realtime.socket, toExport, map)
})
self.webrtc = new SimpleWebRTC({
connection: self.socket,
connection: Realtime.socket,
localVideoEl: self.videoId,
remoteVideosEl: '',
debug: true,
@ -127,7 +144,6 @@ const toExport = {
console.log('remote ice failure', peer)
// remote ice failure
})
var $video = $('<video></video>').attr('id', self.videoId)
self.localVideo = {
$video: $video,
@ -136,21 +152,21 @@ const toExport = {
avatar: map.Active.Mapper ? map.Active.Mapper.get('image') : ''
})
}
self.room = new Views.Room({
webrtc: self.webrtc,
socket: self.socket,
room: 'global',
room: 'map-' + map.Active.Map.id,
$video: self.localVideo.$video,
myVideoView: self.localVideo.view,
config: { DOUBLE_CLICK_TOLERANCE: 200 }
})
self.room.videoAdded(self.handleVideoAdded)
} // if map.Active.Mapper
self.subscribeToEvents()
self.turnOn()
self.checkForCall()
self.joinMap()
},
addJuntoListeners: function() {
var self = toExport
$(document).on(ChatView.events.openTray, function() {
$('.main').addClass('compressed')
self.chatOpen = true
@ -174,32 +190,9 @@ const toExport = {
$('#wrapper').addClass('hideCursors')
})
},
startActiveMap: function() {
var self = toExport
if (map.Active.Map && map.Active.Mapper) {
if (map.Active.Map.authorizeToEdit(map.Active.Mapper)) {
self.turnOn()
self.checkForCall()
self.joinMap()
}
self.setupChat() // chat can happen on public maps too
map.Cable.subscribeToMap(map.Active.Map.id) // people with edit rights can still see live updates
}
},
endActiveMap: function() {
var self = toExport
$(document).off('.map')
// leave the appropriate rooms to leave
if (self.inConversation) self.leaveCall()
self.leaveMap()
$('.collabCompass').remove()
if (self.room) self.room.leave()
map.Cable.unsubscribeFromMap()
},
turnOn: function(notify) {
var self = toExport
$('.collabCompass').show()
self.room.room = 'map-' + map.Active.Map.id
self.activeMapper = {
id: map.Active.Mapper.id,
name: map.Active.Mapper.get('name'),
@ -217,13 +210,13 @@ const toExport = {
const self = toExport
map.ChatView.setNewMap()
map.ChatView.addParticipant(self.activeMapper)
map.ChatView.addMessages(new DataModel.MessageCollection(map.DataModel.Messages), true)
map.ChatView.addMessages(new MessageCollection(map.DataModel.Messages), true)
},
setupLocalEvents: function() {
var self = toExport
// local event listeners that trigger events
$(document).on(map.JIT.events.zoom + '.map', self.positionPeerIcons)
$(document).on(map.JIT.events.pan + '.map', self.positionPeerIcons)
$(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,
@ -232,10 +225,46 @@ const toExport = {
var coords = Util.pixelsToCoords(map.Visualize.mGraph, pixels)
self.sendCoords(coords)
})
$(document).on(map.JIT.events.topicDrag + '.map', function(event, positions) {
$(document).on(JIT.events.topicDrag + '.map', function(event, positions) {
self.dragTopic(positions)
})
},
subscribeToEvents: function() {
// todo scope these event listeners to map
const socket = Realtime.socket
socket.on(INVITED_TO_CALL, invitedToCall(toExport, map))
socket.on(INVITED_TO_JOIN, invitedToJoin(toExport, map))
socket.on(CALL_ACCEPTED, callAccepted(toExport, map))
socket.on(CALL_DENIED, callDenied(toExport, map))
socket.on(INVITE_DENIED, inviteDenied(toExport, map))
socket.on(CALL_IN_PROGRESS, callInProgress(toExport, map))
socket.on(CALL_STARTED, callStarted(toExport, map))
socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(toExport, map))
socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(toExport, map))
socket.on(MAPPER_LEFT_CALL, mapperLeftCall(toExport, map))
socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(toExport, map))
socket.on(NEW_MAPPER, newMapper(toExport, map))
socket.on(LOST_MAPPER, lostMapper(toExport, map))
socket.on(TOPIC_DRAGGED, topicDragged(toExport, map))
},
unsubscribeFromEvents: function() {
// todo scope these event listeners to map
const socket = Realtime.socket
socket.off(INVITED_TO_JOIN)
socket.off(CALL_ACCEPTED)
socket.off(INVITED_TO_CALL)
socket.off(CALL_DENIED)
socket.off(INVITE_DENIED)
socket.off(CALL_IN_PROGRESS)
socket.off(CALL_STARTED)
socket.off(MAPPER_LIST_UPDATED)
socket.off(MAPPER_JOINED_CALL)
socket.off(MAPPER_LEFT_CALL)
socket.off(PEER_COORDS_UPDATED)
socket.off(NEW_MAPPER)
socket.off(LOST_MAPPER)
socket.off(TOPIC_DRAGGED)
},
countOthersInConversation: function() {
var self = toExport
var count = 0
@ -382,45 +411,32 @@ const toExport = {
return {x: xLimit, y: yLimit}
}
}
return toExport
}
const sendables = [
['joinMap', joinMap],
['leaveMap', leaveMap],
['checkForCall', checkForCall],
['acceptCall', acceptCall],
['denyCall', denyCall],
['denyInvite', denyInvite],
['inviteToJoin', inviteToJoin],
['inviteACall', inviteACall],
['joinCall', joinCall],
['leaveCall', leaveCall],
['sendMapperInfo', sendMapperInfo],
['sendCoords', sendCoords],
['dragTopic', dragTopic]
]
sendables.forEach(sendable => {
toExport[sendable[0]] = sendable[1](toExport, map)
})
const subscribeToEvents = (toExport, socket) => {
socket.on(JUNTO_UPDATED, juntoUpdated(toExport, map))
socket.on(INVITED_TO_CALL, invitedToCall(toExport, map))
socket.on(INVITED_TO_JOIN, invitedToJoin(toExport, map))
socket.on(CALL_ACCEPTED, callAccepted(toExport, map))
socket.on(CALL_DENIED, callDenied(toExport, map))
socket.on(INVITE_DENIED, inviteDenied(toExport, map))
socket.on(CALL_IN_PROGRESS, callInProgress(toExport, map))
socket.on(CALL_STARTED, callStarted(toExport, map))
socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(toExport, map))
socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(toExport, map))
socket.on(MAPPER_LEFT_CALL, mapperLeftCall(toExport, map))
socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(toExport, map))
socket.on(NEW_MAPPER, newMapper(toExport, map))
socket.on(LOST_MAPPER, lostMapper(toExport, map))
socket.on(TOPIC_DRAGGED, topicDragged(toExport, map))
}
return toExport
Realtime.init = function(serverData) {
var self = Realtime
self.socket = new SocketIoConnection({
url: serverData['REALTIME_SERVER'],
socketio: {
// don't poll forever if in development
reconnectionAttempts: serverData.RAILS_ENV === 'development' ? 5 : Infinity
}
})
self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
self.socket.on('connect', function() {
console.log('connected')
self.socket.on(JUNTO_UPDATED, (state) => {
ReactApp.juntoState = state
ReactApp.render()
})
self.disconnected = false
ReactApp.openMap && ReactApp.openMap.Realtime.onSocketConnect()
})
self.socket.on('disconnect', function() {
self.disconnected = true
})
}

9
frontend/src/Metamaps/Map/Realtime/receivable.js
View file

@ -4,16 +4,9 @@
everthing in this file happens as a result of websocket events
*/
import { JUNTO_UPDATED } from './events'
import GlobalUI, { ReactApp } from '../../GlobalUI'
import GlobalUI from '../../GlobalUI'
import Util from '../../Util'
export const juntoUpdated = (self, map) => state => {
ReactApp.juntoState = state
$(document).trigger(JUNTO_UPDATED)
}
/* All the following events are received through the nodejs realtime server
and are done this way because they are transient data, not persisted to the server */
export const topicDragged = (self, map) => positions => {

58
frontend/src/Metamaps/Map/Realtime/sendable.js
View file

@ -18,8 +18,8 @@ import {
DRAG_TOPIC
} from './events'
export const joinMap = (self, map) => () => {
self.socket.emit(JOIN_MAP, {
export const joinMap = (socket, self, map) => () => {
socket.emit(JOIN_MAP, {
userid: map.Active.Mapper.id,
username: map.Active.Mapper.get('name'),
avatar: map.Active.Mapper.get('image'),
@ -28,15 +28,15 @@ export const joinMap = (self, map) => () => {
})
}
export const leaveMap = (self, map) => () => {
self.socket.emit(LEAVE_MAP)
export const leaveMap = (socket, self, map) => () => {
socket.emit(LEAVE_MAP)
}
export const checkForCall = (self, map) => () => {
self.socket.emit(CHECK_FOR_CALL, { room: self.room.room, mapid: map.Active.Map.id })
export const checkForCall = (socket, self, map) => () => {
socket.emit(CHECK_FOR_CALL, { room: self.room.room, mapid: map.Active.Map.id })
}
export const sendMapperInfo = (self, map) => userid => {
export const sendMapperInfo = (socket, self, map) => userid => {
// send this new mapper back your details, and the awareness that you've loaded the map
var update = {
userToNotify: userid,
@ -46,10 +46,10 @@ export const sendMapperInfo = (self, map) => userid => {
userinconversation: self.inConversation,
mapid: map.Active.Map.id
}
self.socket.emit(SEND_MAPPER_INFO, update)
socket.emit(SEND_MAPPER_INFO, update)
}
export const joinCall = (self, map) => () => {
export const joinCall = (socket, self, map) => () => {
self.webrtc.off('readyToCall')
self.webrtc.once('readyToCall', function() {
self.videoInitialized = true
@ -64,7 +64,7 @@ export const joinCall = (self, map) => () => {
map.ChatView.conversationInProgress(true)
})
self.inConversation = true
self.socket.emit(JOIN_CALL, {
socket.emit(JOIN_CALL, {
mapid: map.Active.Map.id,
id: map.Active.Mapper.id
})
@ -73,8 +73,8 @@ export const joinCall = (self, map) => () => {
map.ChatView.mapperJoinedCall(map.Active.Mapper.id)
}
export const leaveCall = (self, map) => () => {
self.socket.emit(LEAVE_CALL, {
export const leaveCall = (socket, self, map) => () => {
socket.emit(LEAVE_CALL, {
mapid: map.Active.Map.id,
id: map.Active.Mapper.id
})
@ -92,9 +92,9 @@ export const leaveCall = (self, map) => () => {
}
}
export const acceptCall = (self, map) => userid => {
export const acceptCall = (socket, self, map) => userid => {
map.ChatView.sound.stop(self.soundId)
self.socket.emit(ACCEPT_CALL, {
socket.emit(ACCEPT_CALL, {
mapid: map.Active.Map.id,
invited: map.Active.Mapper.id,
inviter: userid
@ -104,9 +104,9 @@ export const acceptCall = (self, map) => userid => {
GlobalUI.clearNotify()
}
export const denyCall = (self, map) => userid => {
export const denyCall = (socket, self, map) => userid => {
map.ChatView.sound.stop(self.soundId)
self.socket.emit(DENY_CALL, {
socket.emit(DENY_CALL, {
mapid: map.Active.Map.id,
invited: map.Active.Mapper.id,
inviter: userid
@ -114,9 +114,9 @@ export const denyCall = (self, map) => userid => {
GlobalUI.clearNotify()
}
export const denyInvite = (self, map) => userid => {
export const denyInvite = (socket, self, map) => userid => {
map.ChatView.sound.stop(self.soundId)
self.socket.emit(DENY_INVITE, {
socket.emit(DENY_INVITE, {
mapid: map.Active.Map.id,
invited: map.Active.Mapper.id,
inviter: userid
@ -124,8 +124,8 @@ export const denyInvite = (self, map) => userid => {
GlobalUI.clearNotify()
}
export const inviteACall = (self, map) => userid => {
self.socket.emit(INVITE_A_CALL, {
export const inviteACall = (socket, self, map) => userid => {
socket.emit(INVITE_A_CALL, {
mapid: map.Active.Map.id,
inviter: map.Active.Mapper.id,
invited: userid
@ -134,8 +134,8 @@ export const inviteACall = (self, map) => userid => {
GlobalUI.clearNotify()
}
export const inviteToJoin = (self, map) => userid => {
self.socket.emit(INVITE_TO_JOIN, {
export const inviteToJoin = (socket, self, map) => userid => {
socket.emit(INVITE_TO_JOIN, {
mapid: map.Active.Map.id,
inviter: map.Active.Mapper.id,
invited: userid
@ -143,22 +143,22 @@ export const inviteToJoin = (self, map) => userid => {
map.ChatView.invitationPending(userid)
}
export const sendCoords = (self, map) => coords => {
var map = map.Active.Map
export const sendCoords = (socket, self, map) => coords => {
var m = map.Active.Map
var mapper = map.Active.Mapper
if (map && map.authorizeToEdit(mapper)) {
if (m && m.authorizeToEdit(mapper)) {
var update = {
usercoords: coords,
userid: map.Active.Mapper.id,
mapid: map.Active.Map.id
mapid: m.id
}
self.socket.emit(SEND_COORDS, update)
socket.emit(SEND_COORDS, update)
}
}
export const dragTopic = (self, map) => positions => {
export const dragTopic = (socket, self, map) => positions => {
if (map.Active.Map) {
positions.mapid = map.Active.Map.id
self.socket.emit(DRAG_TOPIC, positions)
socket.emit(DRAG_TOPIC, positions)
}
}

1
frontend/src/Metamaps/Map/Views/Room.js
View file

@ -7,7 +7,6 @@ import VideoView from './VideoView'
const Room = function(opts = {}) {
this.isActiveRoom = false
this.socket = opts.socket
this.webrtc = opts.webrtc
this.room = opts.room
this.config = opts.config

5
frontend/src/Metamaps/Map/Views/index.js
View file

@ -2,13 +2,8 @@
import VideoView from './VideoView'
import Room from './Room'
import { JUNTO_UPDATED } from '../Realtime/events'
const Views = {
init: (serverData) => {
$(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
//map.ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']])
},
VideoView,
Room
}

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

@ -91,8 +91,8 @@ const mapControl = {
newMap.Active.Mapper = ReactApp.currentUser
newMap.DataModel.Mappers = new MapperCollection(data.mappers)
newMap.DataModel.Collaborators = new MapperCollection(data.collaborators)
newMap.DataModel.Topics = new TopicCollection(data.topics)
newMap.DataModel.Synapses = new SynapseCollection(data.synapses)
//newMap.DataModel.Topics = new TopicCollection(data.topics)
//newMap.DataModel.Synapses = new SynapseCollection(data.synapses)
newMap.DataModel.Mappings = new MappingCollection(data.mappings)
newMap.DataModel.Messages = data.messages
newMap.DataModel.Stars = data.stars
@ -127,15 +127,15 @@ const mapControl = {
end: function(map) {
$('.main').removeClass('compressed')
$('.rightclickmenu').remove()
map.AutoLayout.resetSpiral()
map.TopicCard.hideCard()
map.map.SynapseCard.hideCard()
//map.AutoLayout.resetSpiral()
//map.TopicCard.hideCard()
map.SynapseCard.hideCard()
map.Create.newTopic.hide(true) // true means force (and override pinned)
map.Create.newSynapse.hide()
map.InfoBox.close()
//map.Map.requests = []
//map.Map.hasLearnedTopicCreation = true
map.Realtime.endActiveMap()
map.Map.requests = []
map.Map.hasLearnedTopicCreation = true
}
}
export { mapControl }
@ -442,6 +442,9 @@ const Map = (map) => {
Map.events = {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
}
Map.init = (serverData) => {
ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']])
}
export { CheatSheet }
export default Map

2
frontend/src/Metamaps/index.js
View file

@ -58,7 +58,6 @@ Metamaps.Synapse = Synapse
Metamaps.SynapseCard = SynapseCard
Metamaps.Topic = Topic
Metamaps.Util = Util
Metamaps.Views = Views
Metamaps.Visualize = Visualize
Metamaps.GlobalUI = GlobalUI
@ -76,7 +75,6 @@ document.addEventListener('DOMContentLoaded', function() {
Metamaps[prop].hasOwnProperty('init') &&
typeof (Metamaps[prop].init) === 'function'
) {
console.log(prop)
Metamaps[prop].init(Metamaps.ServerData)
}
}

2
frontend/src/components/MapView/MapChat/index.js
View file

@ -59,7 +59,7 @@ class MapChat extends Component {
scroll = () => {
// hack: figure out how to do this right
this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight + 100
if (this.messagesDiv) this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight + 100
}
toggleDrawer = () => {

2
realtime/global.js
View file

@ -7,7 +7,7 @@ const {
LEAVE_CALL,
JOIN_MAP,
LEAVE_MAP
} = require('../frontend/src/Metamaps/Realtime/events')
} = require('../frontend/src/Metamaps/Map/Realtime/events')
module.exports = function(io, store) {
store.subscribe(() => {

2
realtime/junto.js
View file

@ -17,7 +17,7 @@ const {
INVITE_A_CALL,
JOIN_CALL,
LEAVE_CALL
} = require('../frontend/src/Metamaps/Realtime/events')
} = require('../frontend/src/Metamaps/Map/Realtime/events')
const { mapRoom, userMapRoom } = require('./rooms')

2
realtime/map.js
View file

@ -10,7 +10,7 @@ const {
SEND_COORDS,
SEND_MAPPER_INFO,
DRAG_TOPIC
} = require('../frontend/src/Metamaps/Realtime/events')
} = require('../frontend/src/Metamaps/Map/Realtime/events')
const { mapRoom, userMapRoom } = require('./rooms')

2
realtime/reducer.js
View file

@ -4,7 +4,7 @@ const {
LEAVE_MAP,
JOIN_CALL,
LEAVE_CALL
} = require('../frontend/src/Metamaps/Realtime/events')
} = require('../frontend/src/Metamaps/Map/Realtime/events')
const NOT_IN_CONVERSATION = 0
const IN_CONVERSATION = 1