3589 lines
141 KiB
JavaScript
3589 lines
141 KiB
JavaScript
|
var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
|
||
|
|
|
||
|
|
var labelType, useGradients, nativeTextSupport, animate;
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
var ua = navigator.userAgent,
|
||
|
|
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
|
||
|
|
typeOfCanvas = typeof HTMLCanvasElement,
|
||
|
|
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
|
||
|
|
textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
|
||
|
|
//I'm setting this based on the fact that ExCanvas provides text support for IE
|
||
|
|
//and that as of today iPhone/iPad current text support is lame
|
||
|
|
labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
|
||
|
|
nativeTextSupport = labelType == 'Native';
|
||
|
|
useGradients = nativeCanvasSupport;
|
||
|
|
animate = !(iStuff || !nativeCanvasSupport);
|
||
|
|
})();
|
||
|
|
|
||
|
|
var panningInt; // this variable is used to store a 'setInterval' for the Metamaps.JIT.SmoothPanning() function, so that it can be cleared with window.clearInterval
|
||
|
|
var tempNode = null,
|
||
|
|
tempInit = false,
|
||
|
|
tempNode2 = null;
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
_.templateSettings = {
|
||
|
|
interpolate: /{{(.+?)}}/g
|
||
|
|
};
|
||
|
|
|
||
|
|
for (var prop in Metamaps) {
|
||
|
|
if (Metamaps.hasOwnProperty(prop) &&
|
||
|
|
Metamaps[prop].hasOwnProperty('init') &&
|
||
|
|
typeof (Metamaps[prop].init) == 'function'
|
||
|
|
) {
|
||
|
|
Metamaps[prop].init();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.JIT.prepareVizData();
|
||
|
|
});
|
||
|
|
|
||
|
|
Metamaps.Settings = {
|
||
|
|
realtime: false, // indicates whether the user wants to be playing in the app with realtime updates to their topics
|
||
|
|
embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
|
||
|
|
sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database
|
||
|
|
selectedMetacodeSet: null, // will get initialized
|
||
|
|
selectedMetacodeSetIndex: null, // will get initialized
|
||
|
|
colors: {
|
||
|
|
background: '#344A58',
|
||
|
|
synapses: {
|
||
|
|
normal: '#222222',
|
||
|
|
hover: '#222222',
|
||
|
|
selected: '#FFFFFF'
|
||
|
|
},
|
||
|
|
topics: {
|
||
|
|
selected: '#FFFFFF'
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
background: '#18202E',
|
||
|
|
text: '#DDD'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// only one of these will be active at a time
|
||
|
|
// Map if you're on a map page
|
||
|
|
// Topic if you're on a topic page
|
||
|
|
Metamaps.Active = {
|
||
|
|
Map: null,
|
||
|
|
Topic: null
|
||
|
|
};
|
||
|
|
|
||
|
|
Metamaps.Backbone = {
|
||
|
|
init: function () {
|
||
|
|
var self = Metamaps.Backbone;
|
||
|
|
|
||
|
|
self.Metacode = Backbone.Model.extend({});
|
||
|
|
self.MetacodeCollection = Backbone.Collection.extend({
|
||
|
|
model: this.Metacode,
|
||
|
|
url: '/metacodes'
|
||
|
|
});
|
||
|
|
|
||
|
|
self.Topic = Backbone.Model.extend({
|
||
|
|
urlRoot: '/topics',
|
||
|
|
blacklist: ['mappings'],
|
||
|
|
toJSON: function (options) {
|
||
|
|
return _.omit(this.attributes, this.blacklist);
|
||
|
|
},
|
||
|
|
initialize: function () {
|
||
|
|
if (this.isNew()) {
|
||
|
|
this.set({
|
||
|
|
"user_id": Metamaps.Active.Mapper.id,
|
||
|
|
"desc": '',
|
||
|
|
"link": '',
|
||
|
|
"permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
|
||
|
|
"mappings": []
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
authorizeToEdit: function (mapper) {
|
||
|
|
if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
|
||
|
|
else return false;
|
||
|
|
},
|
||
|
|
authorizePermissionChange: function (mapper) {
|
||
|
|
if (mapper && this.get('user_id') === mapper.get('id')) return true;
|
||
|
|
else return false;
|
||
|
|
},
|
||
|
|
updateMappings: function () {
|
||
|
|
var mappings = this.get('mappings'),
|
||
|
|
l = mappings.length,
|
||
|
|
i;
|
||
|
|
|
||
|
|
for (i = 0; i < l; i++) {
|
||
|
|
mappings[i].set('topic_id', this.id);
|
||
|
|
if (!mappings[i].isNew()) mappings[i].save();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getDate: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
getUser: function () {
|
||
|
|
return Metamaps.Mapper.get(this.get('user_id'));
|
||
|
|
},
|
||
|
|
getMetacode: function () {
|
||
|
|
return Metamaps.Metacodes.get(this.get('metacode_id'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
self.TopicCollection = Backbone.Collection.extend({
|
||
|
|
model: self.Topic,
|
||
|
|
url: '/topics',
|
||
|
|
comparator: function (a, b) {
|
||
|
|
a = a.get('name').toLowerCase();
|
||
|
|
b = b.get('name').toLowerCase();
|
||
|
|
return a > b ? 1 : a < b ? -1 : 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
self.Synapse = Backbone.Model.extend({
|
||
|
|
urlRoot: '/synapses',
|
||
|
|
initialize: function () {
|
||
|
|
if (this.isNew()) {
|
||
|
|
this.set({
|
||
|
|
"user_id": Metamaps.Active.Mapper.id,
|
||
|
|
"permission": Metamaps.Active.Map.get('permission'),
|
||
|
|
"category": "from-to"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
authorizeToEdit: function (mapper) {
|
||
|
|
if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
|
||
|
|
else return false;
|
||
|
|
},
|
||
|
|
authorizePermissionChange: function (mapper) {
|
||
|
|
if (mapper && this.get('user_id') === mapper.get('id')) return true;
|
||
|
|
else return false;
|
||
|
|
},
|
||
|
|
updateMappings: function () {
|
||
|
|
var mappings = this.get('mappings'),
|
||
|
|
l = mappings.length,
|
||
|
|
i;
|
||
|
|
|
||
|
|
for (i = 0; i < l; i++) {
|
||
|
|
mappings[i].set('synapse_id', this.id);
|
||
|
|
if (!mappings[i].isNew()) mappings[i].save();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getUser: function () {
|
||
|
|
return Metamaps.Mapper.get(this.get('user_id'));
|
||
|
|
},
|
||
|
|
getTopic1: function () {
|
||
|
|
return Metamaps.Topic.get(this.get('node1_id'));
|
||
|
|
},
|
||
|
|
getTopic2: function () {
|
||
|
|
return Metamaps.Topic.get(this.get('node2_id'));
|
||
|
|
},
|
||
|
|
getDirection: function () {
|
||
|
|
var mapping1 = this.getTopic1().get('mappings')[0],
|
||
|
|
mapping2 = this.getTopic2().get('mappings')[0];
|
||
|
|
return [
|
||
|
|
mapping1.isNew() ? mapping1.cid : mapping1.id,
|
||
|
|
mapping2.isNew() ? mapping2.cid : mapping2.id
|
||
|
|
];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
self.SynapseCollection = Backbone.Collection.extend({
|
||
|
|
model: self.Synapse,
|
||
|
|
url: '/synapses'
|
||
|
|
});
|
||
|
|
|
||
|
|
self.Mapping = Backbone.Model.extend({
|
||
|
|
urlRoot: '/mappings',
|
||
|
|
blacklist: ['node', 'edge'],
|
||
|
|
toJSON: function (options) {
|
||
|
|
return _.omit(this.attributes, this.blacklist);
|
||
|
|
},
|
||
|
|
initialize: function () {
|
||
|
|
var topic = this.getTopic(),
|
||
|
|
synapse = this.getSynapse();
|
||
|
|
|
||
|
|
if (this.isNew()) {
|
||
|
|
this.set({
|
||
|
|
"user_id": Metamaps.Active.Mapper.id,
|
||
|
|
"map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (topic) topic.set('mappings', [this]);
|
||
|
|
else if (synapse) synapse.set('mappings', [this]);
|
||
|
|
},
|
||
|
|
getUser: function () {
|
||
|
|
return Metamaps.Mapper.get(this.get('user_id'));
|
||
|
|
},
|
||
|
|
getMap: function () {
|
||
|
|
return Metamaps.Map.get(this.get('map_id'));
|
||
|
|
},
|
||
|
|
getTopic: function () {
|
||
|
|
if (this.get('category') === 'Topic') return Metamaps.Topic.get(this.get('topic_id'));
|
||
|
|
else return false;
|
||
|
|
},
|
||
|
|
getSynapse: function () {
|
||
|
|
if (this.get('category') === 'Synapse') return Metamaps.Synapse.get(this.get('synapse_id'));
|
||
|
|
else return false;
|
||
|
|
},
|
||
|
|
createNode: function () {
|
||
|
|
var topic = this.getTopic();
|
||
|
|
if (topic) {
|
||
|
|
var node = {
|
||
|
|
id: this.isNew() ? this.cid : this.id,
|
||
|
|
name: topic.get('name')
|
||
|
|
};
|
||
|
|
return node;
|
||
|
|
} else return false;
|
||
|
|
},
|
||
|
|
updateNode: function () {
|
||
|
|
var topic = this.getTopic();
|
||
|
|
if (topic) {
|
||
|
|
var node = this.get('node');
|
||
|
|
node.setData('topic', topic);
|
||
|
|
node.setData('mapping', this);
|
||
|
|
node.id = this.isNew() ? this.cid : this.id;
|
||
|
|
return node;
|
||
|
|
} else return false;
|
||
|
|
},
|
||
|
|
createEdge: function () {
|
||
|
|
var synapse = this.getSynapse();
|
||
|
|
if (synapse) {
|
||
|
|
var edge = {
|
||
|
|
nodeFrom: synapse.getTopic1().get('mappings')[0].id,
|
||
|
|
nodeTo: synapse.getTopic2().get('mappings')[0].id,
|
||
|
|
data: {
|
||
|
|
$synapses: [],
|
||
|
|
$mappings: []
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return edge;
|
||
|
|
} else return false;
|
||
|
|
},
|
||
|
|
updateEdge: function () {
|
||
|
|
var synapse = this.getSynapse();
|
||
|
|
if (synapse) {
|
||
|
|
var edge = this.get('edge');
|
||
|
|
|
||
|
|
edge.getData('synapses').push(synapse);
|
||
|
|
edge.getData('mappings').push(this);
|
||
|
|
return edge;
|
||
|
|
} else return false;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
self.MappingCollection = Backbone.Collection.extend({
|
||
|
|
model: self.Mapping,
|
||
|
|
url: '/mappings'
|
||
|
|
});
|
||
|
|
|
||
|
|
self.Map = Backbone.Model.extend({
|
||
|
|
urlRoot: '/maps',
|
||
|
|
authorizeToEdit: function (mapper) {
|
||
|
|
if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
|
||
|
|
else return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
self.MapsCollection = Backbone.Collection.extend({
|
||
|
|
model: self.Map,
|
||
|
|
url: '/maps'
|
||
|
|
});
|
||
|
|
|
||
|
|
self.Mapper = Backbone.Model.extend({
|
||
|
|
urlRoot: '/users'
|
||
|
|
});
|
||
|
|
self.MapperCollection = Backbone.Collection.extend({
|
||
|
|
model: self.Mapper,
|
||
|
|
url: '/users'
|
||
|
|
});
|
||
|
|
|
||
|
|
Metamaps.Metacodes = new self.MetacodeCollection(Metamaps.Metacodes);
|
||
|
|
|
||
|
|
Metamaps.Active.Mapper = new self.Mapper({
|
||
|
|
id: userid,
|
||
|
|
name: username
|
||
|
|
});
|
||
|
|
Metamaps.Mappers = new self.MapperCollection([Metamaps.Active.Mapper]);
|
||
|
|
|
||
|
|
Metamaps.Topics = new self.TopicCollection(Metamaps.Topics);
|
||
|
|
|
||
|
|
Metamaps.Synapses = new self.SynapseCollection(Metamaps.Synapses);
|
||
|
|
|
||
|
|
Metamaps.Mappings = new self.MappingCollection(Metamaps.Mappings);
|
||
|
|
|
||
|
|
Metamaps.Active.Map = new self.Map(Metamaps.Active.Map);
|
||
|
|
Metamaps.Maps = new self.MapsCollection([Metamaps.Active.Map]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Control = {
|
||
|
|
init: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
selectNode: function (node) {
|
||
|
|
if (Metamaps.Selected.Topics.indexOf(node) != -1) return;
|
||
|
|
node.selected = true;
|
||
|
|
node.setData('dim', 30, 'current');
|
||
|
|
node.eachAdjacency(function (adj) {
|
||
|
|
Metamaps.Control.selectEdge(adj);
|
||
|
|
});
|
||
|
|
Metamaps.Selected.Topics.push(node);
|
||
|
|
},
|
||
|
|
deselectAllNodes: function () {
|
||
|
|
var l = Metamaps.Selected.Topics.length;
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
var node = Metamaps.Selected.Topics[i];
|
||
|
|
Metamaps.Control.deselectNode(node);
|
||
|
|
}
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
},
|
||
|
|
deselectNode: function (node) {
|
||
|
|
delete node.selected;
|
||
|
|
node.eachAdjacency(function (adj) {
|
||
|
|
Metamaps.Control.deselectEdge(adj);
|
||
|
|
});
|
||
|
|
node.setData('dim', 25, 'current');
|
||
|
|
|
||
|
|
//remove the node
|
||
|
|
Metamaps.Selected.Topics.splice(
|
||
|
|
Metamaps.Selected.Topics.indexOf(node), 1);
|
||
|
|
},
|
||
|
|
deleteSelectedNodes: function () { // refers to deleting topics permanently
|
||
|
|
var l = Metamaps.Selected.Topics.length;
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
var node = Metamaps.Selected.Topics[i];
|
||
|
|
Metamaps.Control.deleteNode(node.id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deleteNode: function (nodeid) { // refers to deleting topics permanently
|
||
|
|
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
|
||
|
|
var id = node.getData('id');
|
||
|
|
Metamaps.Control.deselectNode(node);
|
||
|
|
Metamaps.Topics.get(id).destroy();
|
||
|
|
Metamaps.Control.hideNode(nodeid);
|
||
|
|
},
|
||
|
|
removeSelectedNodes: function () { // refers to removing topics permanently from a map
|
||
|
|
var l = Metamaps.Selected.Topics.length,
|
||
|
|
i,
|
||
|
|
node,
|
||
|
|
mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
|
||
|
|
|
||
|
|
if (mapperm) {
|
||
|
|
for (i = l - 1; i >= 0; i -= 1) {
|
||
|
|
node = Metamaps.Selected.Topics[i];
|
||
|
|
Metamaps.Control.removeNode(node.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
removeNode: function (nodeid) { // refers to removing topics permanently from a map
|
||
|
|
var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
|
||
|
|
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
|
||
|
|
var mappingid = node.getData("mappingid");
|
||
|
|
|
||
|
|
if (mapperm) {
|
||
|
|
Metamaps.Control.deselectNode(node);
|
||
|
|
Metamaps.Mappings.get(mappingid).destroy();
|
||
|
|
Metamaps.Control.hideNode(nodeid);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hideSelectedNodes: function () {
|
||
|
|
var l = Metamaps.Selected.Topics.length,
|
||
|
|
i,
|
||
|
|
node;
|
||
|
|
|
||
|
|
for (i = l - 1; i >= 0; i -= 1) {
|
||
|
|
node = Metamaps.Selected.Topics[i];
|
||
|
|
Metamaps.Control.hideNode(node.id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hideNode: function (nodeid) {
|
||
|
|
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
|
||
|
|
if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph"
|
||
|
|
alert("You can't hide this topic, it is the root of your graph.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.Control.deselectNode(node);
|
||
|
|
|
||
|
|
node.setData('alpha', 0, 'end');
|
||
|
|
node.eachAdjacency(function (adj) {
|
||
|
|
adj.setData('alpha', 0, 'end');
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['node-property:alpha',
|
||
|
|
'edge-property:alpha'
|
||
|
|
],
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
setTimeout(function () {
|
||
|
|
Metamaps.Visualize.mGraph.graph.removeNode(nodeid);
|
||
|
|
}, 500);
|
||
|
|
},
|
||
|
|
selectEdge: function (edge) {
|
||
|
|
if (Metamaps.Selected.Synapses.indexOf(edge) != -1) return;
|
||
|
|
edge.setData('showDesc', true, 'current');
|
||
|
|
if (!Metamaps.Settings.embed) {
|
||
|
|
edge.setDataset('end', {
|
||
|
|
lineWidth: 4,
|
||
|
|
color: Metamaps.Settings.colors.synapses.selected,
|
||
|
|
alpha: 1
|
||
|
|
});
|
||
|
|
} else if (Metamaps.Settings.embed) {
|
||
|
|
edge.setDataset('end', {
|
||
|
|
lineWidth: 4,
|
||
|
|
color: Metamaps.Settings.colors.synapses.selected,
|
||
|
|
alpha: 1
|
||
|
|
});
|
||
|
|
}
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['edge-property:lineWidth:color:alpha'],
|
||
|
|
duration: 100
|
||
|
|
});
|
||
|
|
Metamaps.Selected.Synapses.push(edge);
|
||
|
|
},
|
||
|
|
deselectAllEdges: function () {
|
||
|
|
var l = Metamaps.Selected.Synapses.length;
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
var edge = Metamaps.Selected.Synapses[i];
|
||
|
|
Metamaps.Control.deselectEdge(edge);
|
||
|
|
}
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
},
|
||
|
|
deselectEdge: function (edge) {
|
||
|
|
edge.setData('showDesc', false, 'current');
|
||
|
|
edge.setDataset('end', {
|
||
|
|
lineWidth: 2,
|
||
|
|
color: Metamaps.Settings.colors.synapses.normal,
|
||
|
|
alpha: 0.4
|
||
|
|
});
|
||
|
|
|
||
|
|
if (Metamaps.Mouse.edgeHoveringOver == edge) {
|
||
|
|
edge.setData('showDesc', true, 'current');
|
||
|
|
edge.setDataset('end', {
|
||
|
|
lineWidth: 4,
|
||
|
|
color: Metamaps.Settings.colors.synapses.hover,
|
||
|
|
alpha: 1
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['edge-property:lineWidth:color:alpha'],
|
||
|
|
duration: 100
|
||
|
|
});
|
||
|
|
|
||
|
|
//remove the edge
|
||
|
|
Metamaps.Selected.Synapses.splice(
|
||
|
|
Metamaps.Selected.Synapses.indexOf(edge), 1);
|
||
|
|
},
|
||
|
|
deleteSelectedEdges: function () { // refers to deleting topics permanently
|
||
|
|
var edge,
|
||
|
|
l = Metamaps.Selected.Synapses.length;
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
edge = Metamaps.Selected.Synapses[i];
|
||
|
|
Metamaps.Control.deleteEdge(edge);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deleteEdge: function (edge) {
|
||
|
|
var id = edge.getData("id");
|
||
|
|
Metamaps.Synapses.get(id).destroy();
|
||
|
|
Metamaps.Control.hideEdge(edge);
|
||
|
|
},
|
||
|
|
removeSelectedEdges: function () {
|
||
|
|
var l = Metamaps.Selected.Synapses.length,
|
||
|
|
i,
|
||
|
|
edge;
|
||
|
|
|
||
|
|
if (Metamaps.Active.Map) {
|
||
|
|
for (i = l - 1; i >= 0; i -= 1) {
|
||
|
|
edge = Metamaps.Selected.Synapses[i];
|
||
|
|
Metamaps.Control.removeEdge(edge);
|
||
|
|
}
|
||
|
|
Metamaps.Selected.Synapses = new Array();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
removeEdge: function (edge) {
|
||
|
|
var mappingid = edge.getData("mappingid");
|
||
|
|
Metamaps.Mappings.get(mappingid).destroy();
|
||
|
|
Metamaps.Control.hideEdge(edge);
|
||
|
|
},
|
||
|
|
hideSelectedEdges: function () {
|
||
|
|
var edge,
|
||
|
|
l = Metamaps.Selected.Synapses.length,
|
||
|
|
i;
|
||
|
|
for (i = l - 1; i >= 0; i -= 1) {
|
||
|
|
edge = Metamaps.Selected.Synapses[i];
|
||
|
|
Metamaps.Control.hideEdge(edge);
|
||
|
|
}
|
||
|
|
Metamaps.Selected.Synapses = new Array();
|
||
|
|
},
|
||
|
|
hideEdge: function (edge) {
|
||
|
|
var from = edge.nodeFrom.id;
|
||
|
|
var to = edge.nodeTo.id;
|
||
|
|
edge.setData('alpha', 0, 'end');
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['edge-property:alpha'],
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
setTimeout(function () {
|
||
|
|
Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to);
|
||
|
|
}, 500);
|
||
|
|
},
|
||
|
|
updateSelectedPermissions: function (permission) {
|
||
|
|
|
||
|
|
// TODO
|
||
|
|
|
||
|
|
if ($('.notice.metamaps').length == 0) {
|
||
|
|
$('body').prepend('<div class="notice metamaps" />');
|
||
|
|
}
|
||
|
|
$('.notice.metamaps').hide().html('Working...').fadeIn('fast');
|
||
|
|
|
||
|
|
// variables to keep track of how many nodes and synapses you had the ability to change the permission of
|
||
|
|
var nCount = 0,
|
||
|
|
sCount = 0;
|
||
|
|
|
||
|
|
// change the permission of the selected synapses, if logged in user is the original creator
|
||
|
|
var l = Metamaps.Selected.Synapses.length;
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
var edge = Metamaps.Selected.Synapses[i];
|
||
|
|
|
||
|
|
if (edge.getData('userid') == userid) {
|
||
|
|
Metamaps.Control.updateSynapsePermission(edge, permission);
|
||
|
|
sCount++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// change the permission of the selected topics, if logged in user is the original creator
|
||
|
|
var l = Metamaps.Selected.Topics.length;
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
var node = Metamaps.Selected.Topics[i];
|
||
|
|
|
||
|
|
if (node.getData('userid') == userid) {
|
||
|
|
Metamaps.Control.updateTopicPermission(node, permission);
|
||
|
|
nCount++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ');
|
||
|
|
var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses');
|
||
|
|
|
||
|
|
$('.notice.metamaps').html(nString + sString + ' you created updated to ' + permission)
|
||
|
|
setTimeout(function () { // TODO make it so that this can be cancelled by another message which is trying to be shown
|
||
|
|
$('.notice.metamaps').fadeOut('fast');
|
||
|
|
}, 8000);
|
||
|
|
},
|
||
|
|
updateTopicPermission: function (node, permission) {
|
||
|
|
var mdata = {
|
||
|
|
"topic": {
|
||
|
|
"permission": permission
|
||
|
|
}
|
||
|
|
};
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
dataType: 'json',
|
||
|
|
url: "/topics/" + node.id,
|
||
|
|
data: mdata,
|
||
|
|
success: function (data) {
|
||
|
|
$('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
|
||
|
|
$('.permissionSelect').remove();
|
||
|
|
node.setData("permission", permission);
|
||
|
|
},
|
||
|
|
error: function () {
|
||
|
|
console.log('failed to update permission');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
updateSynapsePermission: function (edge, permission) {
|
||
|
|
var mdata = {
|
||
|
|
"synapse": {
|
||
|
|
"permission": permission
|
||
|
|
}
|
||
|
|
};
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
dataType: 'json',
|
||
|
|
url: "/synapses/" + edge.data.$id,
|
||
|
|
data: mdata,
|
||
|
|
success: function (data) {
|
||
|
|
$('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
|
||
|
|
$('#edit_synapse .permissionSelect').remove();
|
||
|
|
edge.setData("permission", permission);
|
||
|
|
},
|
||
|
|
error: function () {
|
||
|
|
console.log('failed to update permission');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
updateMapPermission: function (permission) {
|
||
|
|
var mdata = {
|
||
|
|
"map": {
|
||
|
|
"permission": permission
|
||
|
|
}
|
||
|
|
};
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
dataType: 'json',
|
||
|
|
url: "/maps/" + Metamaps.Active.Map.id,
|
||
|
|
data: mdata,
|
||
|
|
success: function (data) {
|
||
|
|
$('.mapPermission').removeClass('commons public private minimize').addClass(permission);
|
||
|
|
$('.mapPermission .permissionSelect').remove();
|
||
|
|
},
|
||
|
|
error: function () {
|
||
|
|
console.log('failed to update permission');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Metamaps.Create = {
|
||
|
|
init: function () {
|
||
|
|
Metamaps.Create.newTopic.init();
|
||
|
|
Metamaps.Create.newSynapse.init();
|
||
|
|
},
|
||
|
|
newTopic: {
|
||
|
|
init: function () {
|
||
|
|
$('#new_topic').bind('contextmenu', function (e) {
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#topic_name').keyup(function () {
|
||
|
|
Metamaps.Create.newTopic.name = $(this).val();
|
||
|
|
});
|
||
|
|
|
||
|
|
// initialize the autocomplete results for the metacode spinner
|
||
|
|
$('#topic_name').typeahead([
|
||
|
|
{
|
||
|
|
name: 'topic_autocomplete',
|
||
|
|
limit: 8,
|
||
|
|
template: $('#topicAutocompleteTemplate').html(),
|
||
|
|
remote: {
|
||
|
|
url: '/topics/autocomplete_topic?term=%QUERY'
|
||
|
|
},
|
||
|
|
engine: Hogan
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
// tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
|
||
|
|
$('#topic_name').bind('typeahead:selected', function (event, datum, dataset) {
|
||
|
|
Metamaps.Topic.getTopicFromAutocomplete(datum.id);
|
||
|
|
});
|
||
|
|
|
||
|
|
// initialize metacode spinner and then hide it
|
||
|
|
$("#metacodeImg").CloudCarousel({
|
||
|
|
titleBox: $('#metacodeImgTitle'),
|
||
|
|
yRadius: 40,
|
||
|
|
xPos: 150,
|
||
|
|
yPos: 40,
|
||
|
|
speed: 0.3,
|
||
|
|
mouseWheel: true,
|
||
|
|
bringToFront: true
|
||
|
|
});
|
||
|
|
$('.new_topic').hide();
|
||
|
|
},
|
||
|
|
name: null,
|
||
|
|
newId: 1,
|
||
|
|
beingCreated: false,
|
||
|
|
metacode: null,
|
||
|
|
x: null,
|
||
|
|
y: null,
|
||
|
|
addSynapse: false,
|
||
|
|
open: function () {
|
||
|
|
$('#new_topic').fadeIn('fast', function () {
|
||
|
|
$('#topic_name').focus();
|
||
|
|
});
|
||
|
|
Metamaps.Create.newTopic.beingCreated = true;
|
||
|
|
},
|
||
|
|
hide: function () {
|
||
|
|
$('#new_topic').fadeOut('fast');
|
||
|
|
$("#topic_name").typeahead('setQuery', '');
|
||
|
|
Metamaps.Create.newTopic.beingCreated = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
newSynapse: {
|
||
|
|
init: function () {
|
||
|
|
|
||
|
|
// keep the right click menu from opening
|
||
|
|
$('#new_synapse').bind('contextmenu', function (e) {
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#synapse_desc').keyup(function () {
|
||
|
|
Metamaps.Create.newSynapse.description = $(this).val();
|
||
|
|
});
|
||
|
|
|
||
|
|
// initialize the autocomplete results for synapse creation
|
||
|
|
$('#synapse_desc').typeahead([
|
||
|
|
{
|
||
|
|
name: 'synapse_autocomplete',
|
||
|
|
template: "<div>{{label}}</div>",
|
||
|
|
remote: {
|
||
|
|
url: '/search/synapses?term=%QUERY'
|
||
|
|
},
|
||
|
|
engine: Hogan
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'existing_synapses',
|
||
|
|
limit: 50,
|
||
|
|
template: $('#synapseAutocompleteTemplate').html(),
|
||
|
|
remote: {
|
||
|
|
url: '/search/synapses',
|
||
|
|
replace: function () {
|
||
|
|
var q = '/search/synapses?topic1id=' + Metamaps.Create.newSynapse.topic1id + '&topic2id=' + Metamaps.Create.newSynapse.topic2id;
|
||
|
|
return q;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
engine: Hogan,
|
||
|
|
header: "<h3>Existing Synapses</h3>"
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
$('#synapse_desc').bind('typeahead:selected', function (event, datum, dataset) {
|
||
|
|
if (datum.id) { // if they clicked on an existing synapse get it
|
||
|
|
Metamaps.Synapse.getSynapseFromAutocomplete(datum.id);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
beingCreated: false,
|
||
|
|
description: null,
|
||
|
|
topic1id: null,
|
||
|
|
topic2id: null,
|
||
|
|
newSynapseId: null,
|
||
|
|
open: function () {
|
||
|
|
$('#new_synapse').fadeIn('fast', function () {
|
||
|
|
$('#synapse_desc').focus();
|
||
|
|
});
|
||
|
|
Metamaps.Create.newSynapse.beingCreated = true;
|
||
|
|
},
|
||
|
|
hide: function () {
|
||
|
|
$('#new_synapse').fadeOut('fast');
|
||
|
|
Metamaps.Create.newSynapse.beingCreated = false;
|
||
|
|
Metamaps.Create.newTopic.addSynapse = false;
|
||
|
|
Metamaps.Create.newSynapse.topic1id = 0;
|
||
|
|
Metamaps.Create.newSynapse.topic2id = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Metamaps.Topic = {
|
||
|
|
// this function is to retrieve a topic JSON object from the database
|
||
|
|
// @param id = the id of the topic to retrieve
|
||
|
|
get: function (id, callback) {
|
||
|
|
// if the desired topic is not yet in the local topic repository, fetch it
|
||
|
|
if (Metamaps.Topics.get(id) == undefined) {
|
||
|
|
//console.log("Ajax call!");
|
||
|
|
if (!callback) {
|
||
|
|
var e = $.ajax({
|
||
|
|
url: "/topics/" + id + ".json",
|
||
|
|
async: false
|
||
|
|
});
|
||
|
|
Metamaps.Topics.add($.parseJSON(e.responseText));
|
||
|
|
return Metamaps.Topics.get(id);
|
||
|
|
} else {
|
||
|
|
return $.ajax({
|
||
|
|
url: "/topics/" + id + ".json",
|
||
|
|
success: function (data) {
|
||
|
|
Metamaps.Topics.add(data);
|
||
|
|
callback(Metamaps.Topics.get(id));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (!callback) {
|
||
|
|
return Metamaps.Topics.get(id);
|
||
|
|
} else {
|
||
|
|
return callback(Metamaps.Topics.get(id));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
renderTopic: function (mapping, topic, createNewInDB) {
|
||
|
|
var self = Metamaps.Topic;
|
||
|
|
|
||
|
|
var nodeOnViz, tempPos;
|
||
|
|
|
||
|
|
var newnode = mapping.createNode();
|
||
|
|
|
||
|
|
if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) {
|
||
|
|
Metamaps.Visualize.mGraph.graph.addNode(newnode);
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
n.setData("dim", 25, "start");
|
||
|
|
n.setData("dim", 25, "end");
|
||
|
|
});
|
||
|
|
nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id);
|
||
|
|
mapping.set('node', nodeOnViz);
|
||
|
|
mapping.updateNode(); // links the topic and the mapping to the node
|
||
|
|
|
||
|
|
|
||
|
|
nodeOnViz.setData("dim", 1, "start");
|
||
|
|
nodeOnViz.setData("dim", 40, "end");
|
||
|
|
if (Metamaps.Visualize.type === "RGraph") {
|
||
|
|
tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
|
||
|
|
tempPos = tempPos.toPolar();
|
||
|
|
nodeOnViz.setPos(tempPos, "current");
|
||
|
|
nodeOnViz.setPos(tempPos, "start");
|
||
|
|
nodeOnViz.setPos(tempPos, "end");
|
||
|
|
} else if (Metamaps.Visualize.type === "ForceDirected") {
|
||
|
|
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current");
|
||
|
|
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
|
||
|
|
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
|
||
|
|
}
|
||
|
|
if (Metamaps.Create.newTopic.addSynapse) {
|
||
|
|
Metamaps.Create.newSynapse.topic1id = tempNode.id;
|
||
|
|
Metamaps.Create.newSynapse.topic2id = nodeOnViz.id;
|
||
|
|
Metamaps.Create.newSynapse.open();
|
||
|
|
Metamaps.Create.newSynapse.beingCreated = true;
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ["node-property:dim"],
|
||
|
|
duration: 500,
|
||
|
|
onComplete: function () {
|
||
|
|
tempNode = null;
|
||
|
|
tempNode2 = null;
|
||
|
|
tempInit = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ["node-property:dim"],
|
||
|
|
duration: 500,
|
||
|
|
onComplete: function () {
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
Metamaps.Visualize.mGraph.loadJSON(newnode);
|
||
|
|
nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id);
|
||
|
|
mapping.set('node', nodeOnViz);
|
||
|
|
mapping.updateNode(); // links the topic and the mapping to the node
|
||
|
|
|
||
|
|
nodeOnViz.setData("dim", 1, "start");
|
||
|
|
nodeOnViz.setData("dim", 25, "end");
|
||
|
|
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current");
|
||
|
|
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
|
||
|
|
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ["node-property:dim"],
|
||
|
|
duration: 500,
|
||
|
|
onComplete: function () {
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!Metamaps.Settings.sandbox && createNewInDB) {
|
||
|
|
if (topic.isNew()) {
|
||
|
|
topic.save(null, {
|
||
|
|
success: function (topicModel, response) {
|
||
|
|
topicModel.updateMappings();
|
||
|
|
if (Metamaps.Active.Map) {
|
||
|
|
mapping.save();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (model, response) {
|
||
|
|
console.log('error saving topic to database');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else if (!topic.isNew() && Metamaps.Active.Map) {
|
||
|
|
mapping.save();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
createTopicLocally: function () {
|
||
|
|
var self = Metamaps.Topic;
|
||
|
|
|
||
|
|
var metacode = Metamaps.Metacodes.findWhere({
|
||
|
|
name: Metamaps.Create.newTopic.metacode
|
||
|
|
});
|
||
|
|
|
||
|
|
var topic = new Metamaps.Backbone.Topic({
|
||
|
|
name: Metamaps.Create.newTopic.name,
|
||
|
|
metacode_id: metacode.id
|
||
|
|
});
|
||
|
|
Metamaps.Topics.add(topic);
|
||
|
|
|
||
|
|
var mapping = new Metamaps.Backbone.Mapping({
|
||
|
|
category: "Topic",
|
||
|
|
xloc: Metamaps.Create.newTopic.x,
|
||
|
|
yloc: Metamaps.Create.newTopic.y,
|
||
|
|
topic_id: topic.cid
|
||
|
|
});
|
||
|
|
Metamaps.Mappings.add(mapping);
|
||
|
|
|
||
|
|
//these can't happen until the value is retrieved, which happens in the line above
|
||
|
|
Metamaps.Create.newTopic.hide();
|
||
|
|
Metamaps.Create.newTopic.addSynapse = false;
|
||
|
|
|
||
|
|
self.renderTopic(mapping, topic, true); // this function also includes the creation of the topic in the database
|
||
|
|
},
|
||
|
|
getTopicFromAutocomplete: function (id) {
|
||
|
|
var self = Metamaps.Topic;
|
||
|
|
|
||
|
|
Metamaps.Create.newTopic.hide();
|
||
|
|
|
||
|
|
var topic = self.get(id);
|
||
|
|
|
||
|
|
var mapping = new Metamaps.Backbone.Mapping({
|
||
|
|
category: "Topic",
|
||
|
|
xloc: Metamaps.Create.newTopic.x,
|
||
|
|
yloc: Metamaps.Create.newTopic.y,
|
||
|
|
topic_id: topic.id
|
||
|
|
});
|
||
|
|
Metamaps.Mappings.add(mapping);
|
||
|
|
|
||
|
|
self.renderTopic(mapping, topic, false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Metamaps.TopicCard = {
|
||
|
|
openTopicCard: null, //stores the JIT local ID of the topic with the topic card open
|
||
|
|
init: function () {
|
||
|
|
//$('.best_in_place').best_in_place();
|
||
|
|
Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html());
|
||
|
|
},
|
||
|
|
fadeInShowCard: function (topic) {
|
||
|
|
$('.showcard').fadeIn('fast');
|
||
|
|
Metamaps.TopicCard.openTopicCard = topic.isNew() ? topic.cid : topic.id;
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Will open the Topic Card for the node that it's passed
|
||
|
|
* @param {$jit.Graph.Node} node
|
||
|
|
*/
|
||
|
|
showCard: function (node) {
|
||
|
|
|
||
|
|
var topic = node.getData('topic');
|
||
|
|
|
||
|
|
//populate the card that's about to show with the right topics data
|
||
|
|
Metamaps.TopicCard.populateShowCard(topic);
|
||
|
|
Metamaps.TopicCard.fadeInShowCard(topic);
|
||
|
|
},
|
||
|
|
hideCard: function () {
|
||
|
|
$('.showcard').fadeOut('fast');
|
||
|
|
Metamaps.TopicCard.openTopicCard = null;
|
||
|
|
},
|
||
|
|
bindShowCardListeners: function (topic) {
|
||
|
|
var self = Metamaps.TopicCard;
|
||
|
|
var showCard = document.getElementById('showcard');
|
||
|
|
|
||
|
|
var selectingMetacode = false;
|
||
|
|
// attach the listener that shows the metacode title when you hover over the image
|
||
|
|
$('.showcard .metacodeImage').mouseenter(function () {
|
||
|
|
$('.showcard .icon').css('z-index', '4');
|
||
|
|
$('.showcard .metacodeTitle').show();
|
||
|
|
});
|
||
|
|
$('.showcard .linkItem.icon').mouseleave(function () {
|
||
|
|
if (!selectingMetacode) {
|
||
|
|
$('.showcard .metacodeTitle').hide();
|
||
|
|
$('.showcard .icon').css('z-index', '1');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.showcard .metacodeTitle').click(function () {
|
||
|
|
if (!selectingMetacode) {
|
||
|
|
selectingMetacode = true;
|
||
|
|
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
|
||
|
|
$('.metacodeSelect').show();
|
||
|
|
// add the scroll bar to the list of metacode select options if it isn't already there
|
||
|
|
if (!$('.metacodeSelect ul').hasClass('mCustomScrollbar')) {
|
||
|
|
$('.metacodeSelect ul').mCustomScrollbar({
|
||
|
|
mouseWheelPixels: 200,
|
||
|
|
advanced: {
|
||
|
|
updateOnContentResize: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.metacodeSelect li').click(function () {
|
||
|
|
selectingMetacode = false;
|
||
|
|
var metacodeName = $(this).find('.mSelectName').text();
|
||
|
|
//updateMetacode(node, metacodeName); //TODO
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
selectingMetacode = false;
|
||
|
|
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
|
||
|
|
$('.metacodeSelect').hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// ability to change permission
|
||
|
|
var selectingPermission = false;
|
||
|
|
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
|
||
|
|
$('.showcard .yourTopic .mapPerm').click(function () {
|
||
|
|
if (!selectingPermission) {
|
||
|
|
selectingPermission = true;
|
||
|
|
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
|
||
|
|
if ($(this).hasClass('co')) {
|
||
|
|
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
|
||
|
|
} else if ($(this).hasClass('pu')) {
|
||
|
|
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
|
||
|
|
} else if ($(this).hasClass('pr')) {
|
||
|
|
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
|
||
|
|
}
|
||
|
|
$('.permissionSelect li').click(function (event) {
|
||
|
|
selectingPermission = false;
|
||
|
|
var permission = $(this).attr('class');
|
||
|
|
// Metamaps.Control.updateTopicPermission(node, permission); // TODO
|
||
|
|
event.stopPropagation();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
selectingPermission = false;
|
||
|
|
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
|
||
|
|
$('.permissionSelect').remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// when you're typing a description, resize the scroll box to have space
|
||
|
|
$('.best_in_place_desc textarea').bind('keyup', function () {
|
||
|
|
var s = $('.showcard').find('.scroll');
|
||
|
|
s.height(s.height()).mCustomScrollbar('update');
|
||
|
|
});
|
||
|
|
|
||
|
|
//bind best_in_place ajax callbacks
|
||
|
|
$(showCard).find('.best_in_place_name').bind("ajax:success", function () {
|
||
|
|
|
||
|
|
var s = $('.showcard').find('.scroll');
|
||
|
|
s.height(s.height()).mCustomScrollbar('update');
|
||
|
|
|
||
|
|
var name = $(this).html();
|
||
|
|
topic.set("name", Metamaps.Util.decodeEntities(name));
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
|
||
|
|
this.innerHTML = this.innerHTML.replace(/\r/g, '')
|
||
|
|
|
||
|
|
var s = $('.showcard').find('.scroll');
|
||
|
|
s.height(s.height()).mCustomScrollbar('update');
|
||
|
|
|
||
|
|
var desc = $(this).html();
|
||
|
|
topic.set("desc", desc);
|
||
|
|
});
|
||
|
|
|
||
|
|
$(showCard).find('.best_in_place_link').bind("ajax:success", function () {
|
||
|
|
var link = $(this).html();
|
||
|
|
$(showCard).find('.go-link').attr('href', link);
|
||
|
|
topic.set("link", link);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
populateShowCard: function (topic) {
|
||
|
|
var self = Metamaps.TopicCard;
|
||
|
|
|
||
|
|
var showCard = document.getElementById('showcard');
|
||
|
|
|
||
|
|
$(showCard).find('.permission').remove();
|
||
|
|
|
||
|
|
var html = self.generateShowcardHTML.render(self.buildObject(topic));
|
||
|
|
|
||
|
|
if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
|
||
|
|
var perm = document.createElement('div');
|
||
|
|
|
||
|
|
var string = 'permission canEdit';
|
||
|
|
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic';
|
||
|
|
perm.className = string;
|
||
|
|
perm.innerHTML = html;
|
||
|
|
showCard.appendChild(perm);
|
||
|
|
} else {
|
||
|
|
var perm = document.createElement('div');
|
||
|
|
perm.className = 'permission cannotEdit';
|
||
|
|
perm.innerHTML = html;
|
||
|
|
showCard.appendChild(perm);
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.TopicCard.bindShowCardListeners(topic);
|
||
|
|
},
|
||
|
|
generateShowcardHTML: null, // will be initialized into a Hogan template within init function
|
||
|
|
//generateShowcardHTML
|
||
|
|
buildObject: function (topic) {
|
||
|
|
var nodeValues = {};
|
||
|
|
var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper);
|
||
|
|
|
||
|
|
//link is rendered differently if user is logged out or in
|
||
|
|
var go_link, a_tag, close_a_tag;
|
||
|
|
if (!authorized) {
|
||
|
|
go_link = '';
|
||
|
|
if (topic.get("link") != "") {
|
||
|
|
a_tag = '<a href="' + topic.get("link") + '" target="_blank">';
|
||
|
|
close_a_tag = '</a>';
|
||
|
|
} else {
|
||
|
|
a_tag = '';
|
||
|
|
close_a_tag = '';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
go_link = '<a href="' + topic.get("link") + '" ' +
|
||
|
|
' class="go-link" target="_blank"></a>';
|
||
|
|
a_tag = '';
|
||
|
|
close_a_tag = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
var desc_nil = "Click to add description...";
|
||
|
|
var link_nil = "Click to add link...";
|
||
|
|
|
||
|
|
nodeValues.permission = topic.get("permission");
|
||
|
|
nodeValues.mk_permission = topic.get("permission").substring(0, 2);
|
||
|
|
//nodeValues.map_count = topic.get("inmaps").length;
|
||
|
|
//nodeValues.synapse_count = topic.get("synapseCount");
|
||
|
|
nodeValues.id = topic.isNew() ? topic.cid : topic.id;
|
||
|
|
nodeValues.metacode = topic.getMetacode().get("name");
|
||
|
|
nodeValues.metacode_class = 'mbg' + topic.getMetacode().get("name").replace(/\s/g, '');
|
||
|
|
nodeValues.imgsrc = topic.getMetacode().get("icon");
|
||
|
|
nodeValues.name = topic.get("name");
|
||
|
|
nodeValues.userid = topic.get("user_id");
|
||
|
|
nodeValues.username = topic.getUser().get("name");
|
||
|
|
nodeValues.date = topic.getDate();
|
||
|
|
|
||
|
|
// the code for this is stored in /views/main/_metacodeOptions.html.erb
|
||
|
|
nodeValues.metacode_select = $('#metacodeOptions').html();
|
||
|
|
nodeValues.go_link = go_link;
|
||
|
|
nodeValues.a_tag = a_tag;
|
||
|
|
nodeValues.close_a_tag = close_a_tag;
|
||
|
|
nodeValues.link_nil = link_nil;
|
||
|
|
nodeValues.link = (topic.get("link") == "" && authorized) ? link_nil : topic.get("link");
|
||
|
|
nodeValues.desc_nil = desc_nil;
|
||
|
|
nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc");
|
||
|
|
return nodeValues;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Metamaps.Find = {
|
||
|
|
filters: {
|
||
|
|
name: "",
|
||
|
|
type: []
|
||
|
|
},
|
||
|
|
init: function () {
|
||
|
|
$('#filterText').on('input', function () {
|
||
|
|
Metamaps.Find.filterText();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
filterText: function () {
|
||
|
|
var duration = 500;
|
||
|
|
query = $('#filterText').val();
|
||
|
|
dim = $('#dim').is(":checked");
|
||
|
|
if (dim) {
|
||
|
|
alpha = 0.2;
|
||
|
|
} else {
|
||
|
|
alpha = 0.0;
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
//if node name doesnt matche query
|
||
|
|
if (query != "") {
|
||
|
|
if (n.name.toLowerCase().indexOf(query.toLowerCase()) === -1) {
|
||
|
|
n.setData('alpha', alpha, 'end');
|
||
|
|
n.eachAdjacency(function (adj) {
|
||
|
|
adj.setData('alpha', alpha, 'end');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
n.setData('alpha', 1.0, 'end');
|
||
|
|
n.eachAdjacency(function (adj) {
|
||
|
|
adj.setData('alpha', 1.0, 'end');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
//Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.animate({
|
||
|
|
modes: ['node-property:alpha',
|
||
|
|
'edge-property:alpha'],
|
||
|
|
duration: duration
|
||
|
|
});
|
||
|
|
},
|
||
|
|
passFilters: function (topic) {
|
||
|
|
var self = Metamaps.Find;
|
||
|
|
var filters = self.filters;
|
||
|
|
|
||
|
|
var passesName = filters.name == "" ? true : false,
|
||
|
|
passesType = filters.type == [] ? true : false;
|
||
|
|
|
||
|
|
//filter by name
|
||
|
|
if (topic.get('1')[1][0].toLowerCase().indexOf(filters.name) !== -1) {
|
||
|
|
passesName = true;
|
||
|
|
}
|
||
|
|
// filter by type
|
||
|
|
if (!filters.type == []) {
|
||
|
|
// get the array of types that your topic 'is'
|
||
|
|
var metacodes = topic.get('2') ? topic.get('2')[1] : [];
|
||
|
|
if (_.intersection(filters.type, metacodes).length == 0) passesType = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (passesName && passesType) {
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Metamaps.JIT = {
|
||
|
|
vizData: [], // contains the visualization-compatible graph
|
||
|
|
graphRendered: false, // flag indicates if we have rendered the data so we don't bother doing it again wastefully
|
||
|
|
metacodeIMGinit: false,
|
||
|
|
/**
|
||
|
|
* This method will bind the event handlers it is interested and initialize the class.
|
||
|
|
*/
|
||
|
|
init: function () {
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* convert our topic JSON into something JIT can use
|
||
|
|
*/
|
||
|
|
prepareVizData: function () {
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
var topic;
|
||
|
|
|
||
|
|
Metamaps.Mappings.each(function (m) {
|
||
|
|
if (m.get("category") === "Topic") {
|
||
|
|
self.vizData.push(m.createNode());
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (self.vizData.length == 0) {
|
||
|
|
Metamaps.Visualize.loadLater = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.Visualize.render("infovis", self.vizData);
|
||
|
|
}, // prepareVizData
|
||
|
|
edgeRender: function (adj, canvas) {
|
||
|
|
//get nodes cartesian coordinates
|
||
|
|
var pos = adj.nodeFrom.pos.getc(true);
|
||
|
|
var posChild = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
var synapse = adj.getData("synapses")[0]; // for now, just grab the first synapse
|
||
|
|
|
||
|
|
var directionCat = synapse.get("category");
|
||
|
|
|
||
|
|
//label placement on edges
|
||
|
|
Metamaps.JIT.renderEdgeArrows(this.edgeHelper, adj, synapse);
|
||
|
|
|
||
|
|
//check for edge label in data
|
||
|
|
var desc = synapse.get("desc");
|
||
|
|
|
||
|
|
var showDesc = adj.getData("showDesc");
|
||
|
|
|
||
|
|
if (desc != "" && showDesc) {
|
||
|
|
// '&' to '&'
|
||
|
|
desc = Metamaps.Util.decodeEntities(desc);
|
||
|
|
|
||
|
|
//now adjust the label placement
|
||
|
|
var ctx = canvas.getCtx();
|
||
|
|
ctx.font = 'bold 14px arial';
|
||
|
|
ctx.fillStyle = '#FFF';
|
||
|
|
ctx.textBaseline = 'hanging';
|
||
|
|
|
||
|
|
var arrayOfLabelLines = Metamaps.Util.splitLine(desc, 30).split('\n');
|
||
|
|
var index, lineWidths = [];
|
||
|
|
for (index = 0; index < arrayOfLabelLines.length; ++index) {
|
||
|
|
lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
|
||
|
|
}
|
||
|
|
var width = Math.max.apply(null, lineWidths) + 8;
|
||
|
|
var height = (16 * arrayOfLabelLines.length) + 8;
|
||
|
|
|
||
|
|
var x = (pos.x + posChild.x - width) / 2;
|
||
|
|
var y = ((pos.y + posChild.y) / 2) - height / 2;
|
||
|
|
var radius = 5;
|
||
|
|
|
||
|
|
//render background
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + radius, y);
|
||
|
|
ctx.lineTo(x + width - radius, y);
|
||
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||
|
|
ctx.lineTo(x + width, y + height - radius);
|
||
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||
|
|
ctx.lineTo(x + radius, y + height);
|
||
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||
|
|
ctx.lineTo(x, y + radius);
|
||
|
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
//render text
|
||
|
|
ctx.fillStyle = '#222222';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
for (index = 0; index < arrayOfLabelLines.length; ++index) {
|
||
|
|
ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, // edgeRender
|
||
|
|
edgeRenderEmbed: function (adj, canvas) {
|
||
|
|
//get nodes cartesian coordinates
|
||
|
|
var pos = adj.nodeFrom.pos.getc(true);
|
||
|
|
var posChild = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
var directionCat = adj.getData("category");
|
||
|
|
//label placement on edges
|
||
|
|
Metamaps.JIT.renderEdgeArrows(this.edgeHelper, adj);
|
||
|
|
|
||
|
|
//check for edge label in data
|
||
|
|
var desc = adj.getData("desc");
|
||
|
|
var showDesc = adj.getData("showDesc");
|
||
|
|
if (desc != "" && showDesc) {
|
||
|
|
// '&' to '&'
|
||
|
|
desc = Metamaps.Util.decodeEntities(desc);
|
||
|
|
|
||
|
|
//now adjust the label placement
|
||
|
|
var ctx = canvas.getCtx();
|
||
|
|
ctx.font = 'bold 14px arial';
|
||
|
|
ctx.fillStyle = '#FFF';
|
||
|
|
ctx.textBaseline = 'hanging';
|
||
|
|
|
||
|
|
var arrayOfLabelLines = Metamaps.Util.splitLine(desc, 30).split('\n');
|
||
|
|
var index, lineWidths = [];
|
||
|
|
for (index = 0; index < arrayOfLabelLines.length; ++index) {
|
||
|
|
lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
|
||
|
|
}
|
||
|
|
var width = Math.max.apply(null, lineWidths) + 8;
|
||
|
|
var height = (16 * arrayOfLabelLines.length) + 8;
|
||
|
|
|
||
|
|
var x = (pos.x + posChild.x - width) / 2;
|
||
|
|
var y = ((pos.y + posChild.y) / 2) - height / 2;
|
||
|
|
var radius = 5;
|
||
|
|
|
||
|
|
//render background
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + radius, y);
|
||
|
|
ctx.lineTo(x + width - radius, y);
|
||
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||
|
|
ctx.lineTo(x + width, y + height - radius);
|
||
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||
|
|
ctx.lineTo(x + radius, y + height);
|
||
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||
|
|
ctx.lineTo(x, y + radius);
|
||
|
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
//render text
|
||
|
|
ctx.fillStyle = '#222222';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
for (index = 0; index < arrayOfLabelLines.length; ++index) {
|
||
|
|
ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 5 + (16 * index));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, // edgeRenderEmbed
|
||
|
|
ForceDirected: {
|
||
|
|
animateSavedLayout: {
|
||
|
|
modes: ['linear'],
|
||
|
|
transition: $jit.Trans.Quad.easeInOut,
|
||
|
|
duration: 800,
|
||
|
|
onComplete: function () {
|
||
|
|
Metamaps.Visualize.mGraph.busy = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
animateFDLayout: {
|
||
|
|
modes: ['linear'],
|
||
|
|
transition: $jit.Trans.Elastic.easeOut,
|
||
|
|
duration: 2500,
|
||
|
|
onComplete: function () {
|
||
|
|
Metamaps.Visualize.mGraph.busy = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
graphSettings: {
|
||
|
|
//id of the visualization container
|
||
|
|
injectInto: 'infovis',
|
||
|
|
//Enable zooming and panning
|
||
|
|
//by scrolling and DnD
|
||
|
|
Navigation: {
|
||
|
|
enable: true,
|
||
|
|
//Enable panning events only if we're dragging the empty
|
||
|
|
//canvas (and not a node).
|
||
|
|
panning: 'avoid nodes',
|
||
|
|
zooming: 28 //zoom speed. higher is more sensible
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
type: 'Metamaps'
|
||
|
|
},
|
||
|
|
//NodeStyles: {
|
||
|
|
// enable: true,
|
||
|
|
// type: 'Native',
|
||
|
|
// stylesHover: {
|
||
|
|
// dim: 30
|
||
|
|
// },
|
||
|
|
// duration: 300
|
||
|
|
//},
|
||
|
|
// Change node and edge styles such as
|
||
|
|
// color and width.
|
||
|
|
// These properties are also set per node
|
||
|
|
// with dollar prefixed data-properties in the
|
||
|
|
// JSON structure.
|
||
|
|
Node: {
|
||
|
|
overridable: true,
|
||
|
|
color: '#2D6A5D',
|
||
|
|
type: 'customNode',
|
||
|
|
dim: 25
|
||
|
|
},
|
||
|
|
Edge: {
|
||
|
|
overridable: true,
|
||
|
|
color: Metamaps.Settings.colors.synapses.normal,
|
||
|
|
type: 'customEdge',
|
||
|
|
lineWidth: 2,
|
||
|
|
alpha: 0.4
|
||
|
|
},
|
||
|
|
//Native canvas text styling
|
||
|
|
Label: {
|
||
|
|
type: 'Native', //Native or HTML
|
||
|
|
size: 20,
|
||
|
|
family: 'arial',
|
||
|
|
textBaseline: 'hanging',
|
||
|
|
color: Metamaps.Settings.colors.labels.text
|
||
|
|
},
|
||
|
|
//Add Tips
|
||
|
|
Tips: {
|
||
|
|
enable: false,
|
||
|
|
onShow: function (tip, node) {}
|
||
|
|
},
|
||
|
|
// Add node events
|
||
|
|
Events: {
|
||
|
|
enable: true,
|
||
|
|
enableForEdges: true,
|
||
|
|
onMouseMove: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e);
|
||
|
|
},
|
||
|
|
//Update node positions when dragged
|
||
|
|
onDragMove: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e);
|
||
|
|
},
|
||
|
|
onDragEnd: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false);
|
||
|
|
},
|
||
|
|
onDragCancel: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false);
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchStart: function (node, eventInfo, e) {
|
||
|
|
//$jit.util.event.stop(e); //stop default touchmove event
|
||
|
|
//Metamaps.Visualize.mGraph.events.onMouseDown(e, null, eventInfo);
|
||
|
|
Metamaps.Visualize.mGraph.events.touched = true;
|
||
|
|
Metamaps.Touch.touchPos = eventInfo.getPos();
|
||
|
|
var canvas = Metamaps.Visualize.mGraph.canvas,
|
||
|
|
ox = canvas.translateOffsetX;
|
||
|
|
oy = canvas.translateOffsetY,
|
||
|
|
sx = canvas.scaleOffsetX,
|
||
|
|
sy = canvas.scaleOffsetY;
|
||
|
|
Metamaps.Touch.touchPos.x *= sx;
|
||
|
|
Metamaps.Touch.touchPos.y *= sy;
|
||
|
|
Metamaps.Touch.touchPos.x += ox;
|
||
|
|
Metamaps.Touch.touchPos.y += oy;
|
||
|
|
|
||
|
|
touchDragNode = node;
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchMove: function (node, eventInfo, e) {
|
||
|
|
if (Metamaps.Touch.touchDragNode) Metamaps.JIT.onDragMoveTopicHandler(Metamaps.Touch.touchDragNode, eventInfo, e);
|
||
|
|
else {
|
||
|
|
Metamaps.JIT.touchPanZoomHandler(eventInfo, e);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchEnd: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchCancel: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
//Add also a click handler to nodes
|
||
|
|
onClick: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
// remove the rightclickmenu
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
|
||
|
|
if (Metamaps.Mouse.boxStartCoordinates) {
|
||
|
|
Metamaps.Visualize.mGraph.busy = false;
|
||
|
|
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
|
||
|
|
Metamaps.JIT.selectNodesWithBox();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.target.id != "infovis-canvas") return false;
|
||
|
|
|
||
|
|
//clicking on a edge, node, or clicking on blank part of canvas?
|
||
|
|
if (node.nodeFrom) {
|
||
|
|
Metamaps.JIT.selectEdgeOnClickHandler(node, e);
|
||
|
|
} else if (node && !node.nodeFrom) {
|
||
|
|
Metamaps.JIT.selectNodeOnClickHandler(node, e);
|
||
|
|
} else {
|
||
|
|
Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e);
|
||
|
|
} //if
|
||
|
|
},
|
||
|
|
//Add also a click handler to nodes
|
||
|
|
onRightClick: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
node = eventInfo.getNode();
|
||
|
|
//clicking on a edge, node, or clicking on blank part of canvas?
|
||
|
|
if (node.nodeFrom) {
|
||
|
|
Metamaps.JIT.selectEdgeOnRightClickHandler(node, e);
|
||
|
|
} else if (node && !node.nodeFrom) {
|
||
|
|
Metamaps.JIT.selectNodeOnRightClickHandler(node, e);
|
||
|
|
} else {
|
||
|
|
|
||
|
|
} //if
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//Number of iterations for the FD algorithm
|
||
|
|
iterations: 200,
|
||
|
|
//Edge length
|
||
|
|
levelDistance: 200,
|
||
|
|
},
|
||
|
|
nodeSettings: {
|
||
|
|
'customNode': {
|
||
|
|
'render': function (node, canvas) {
|
||
|
|
var pos = node.pos.getc(true),
|
||
|
|
dim = node.getData('dim'),
|
||
|
|
topic = node.getData('topic'),
|
||
|
|
cat = topic ? topic.getMetacode().get('name') : false,
|
||
|
|
ctx = canvas.getCtx();
|
||
|
|
|
||
|
|
// if the topic is selected draw a circle around it
|
||
|
|
if (node.selected) {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false);
|
||
|
|
ctx.strokeStyle = Metamaps.Settings.colors.topics.selected;
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!cat || !imgArray[cat].complete || (typeof imgArray[cat].naturalWidth !== "undefined" && imgArray[cat].naturalWidth === 0)) {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false);
|
||
|
|
ctx.fillStyle = '#B6B2FD';
|
||
|
|
ctx.fill();
|
||
|
|
} else {
|
||
|
|
ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'contains': function (node, pos) {
|
||
|
|
var npos = node.pos.getc(true),
|
||
|
|
dim = node.getData('dim'),
|
||
|
|
arrayOfLabelLines = Metamaps.Util.splitLine(node.name, 30).split('\n'),
|
||
|
|
ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
|
||
|
|
|
||
|
|
var height = 25 * arrayOfLabelLines.length;
|
||
|
|
|
||
|
|
var index, lineWidths = [];
|
||
|
|
for (index = 0; index < arrayOfLabelLines.length; ++index) {
|
||
|
|
lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
|
||
|
|
}
|
||
|
|
var width = Math.max.apply(null, lineWidths) + 8;
|
||
|
|
var labely = npos.y + node.getData("height") + 5 + height / 2;
|
||
|
|
|
||
|
|
var overLabel = this.nodeHelper.rectangle.contains({
|
||
|
|
x: npos.x,
|
||
|
|
y: labely
|
||
|
|
}, pos, width, height);
|
||
|
|
|
||
|
|
return this.nodeHelper.circle.contains(npos, pos, dim) || overLabel;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
edgeSettings: {
|
||
|
|
'customEdge': {
|
||
|
|
'render': function (adj, canvas) {
|
||
|
|
Metamaps.JIT.edgeRender(adj, canvas)
|
||
|
|
},
|
||
|
|
'contains': function (adj, pos) {
|
||
|
|
var from = adj.nodeFrom.pos.getc(true),
|
||
|
|
to = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
embed: {
|
||
|
|
graphSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
nodeSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
edgeSettings: {
|
||
|
|
'customEdge': {
|
||
|
|
'render': function (adj, canvas) {
|
||
|
|
Metamaps.JIT.edgeRenderEmbed(adj, canvas)
|
||
|
|
},
|
||
|
|
'contains': function (adj, pos) {
|
||
|
|
var from = adj.nodeFrom.pos.getc(true),
|
||
|
|
to = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, // ForceDirected
|
||
|
|
ForceDirected3D: {
|
||
|
|
animate: {
|
||
|
|
modes: ['linear'],
|
||
|
|
transition: $jit.Trans.Elastic.easeOut,
|
||
|
|
duration: 2500,
|
||
|
|
onComplete: function () {
|
||
|
|
Metamaps.Visualize.mGraph.busy = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
graphSettings: {
|
||
|
|
//id of the visualization container
|
||
|
|
injectInto: 'infovis',
|
||
|
|
type: '3D',
|
||
|
|
Scene: {
|
||
|
|
Lighting: {
|
||
|
|
enable: false,
|
||
|
|
ambient: [0.5, 0.5, 0.5],
|
||
|
|
directional: {
|
||
|
|
direction: {
|
||
|
|
x: 1,
|
||
|
|
y: 0,
|
||
|
|
z: -1
|
||
|
|
},
|
||
|
|
color: [0.9, 0.9, 0.9]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//Enable zooming and panning
|
||
|
|
//by scrolling and DnD
|
||
|
|
Navigation: {
|
||
|
|
enable: false,
|
||
|
|
//Enable panning events only if we're dragging the empty
|
||
|
|
//canvas (and not a node).
|
||
|
|
panning: 'avoid nodes',
|
||
|
|
zooming: 10 //zoom speed. higher is more sensible
|
||
|
|
},
|
||
|
|
// Change node and edge styles such as
|
||
|
|
// color and width.
|
||
|
|
// These properties are also set per node
|
||
|
|
// with dollar prefixed data-properties in the
|
||
|
|
// JSON structure.
|
||
|
|
Node: {
|
||
|
|
overridable: true,
|
||
|
|
type: 'sphere',
|
||
|
|
dim: 15,
|
||
|
|
color: '#ffffff'
|
||
|
|
},
|
||
|
|
Edge: {
|
||
|
|
overridable: false,
|
||
|
|
type: 'tube',
|
||
|
|
color: '#111',
|
||
|
|
lineWidth: 3
|
||
|
|
},
|
||
|
|
//Native canvas text styling
|
||
|
|
Label: {
|
||
|
|
type: 'HTML', //Native or HTML
|
||
|
|
size: 10,
|
||
|
|
style: 'bold'
|
||
|
|
},
|
||
|
|
// Add node events
|
||
|
|
Events: {
|
||
|
|
enable: true,
|
||
|
|
type: 'Native',
|
||
|
|
i: 0,
|
||
|
|
onMouseMove: function (node, eventInfo, e) {
|
||
|
|
//if(this.i++ % 3) return;
|
||
|
|
var pos = eventInfo.getPos();
|
||
|
|
Metamaps.Visualize.cameraPosition.x += (pos.x - Metamaps.Visualize.cameraPosition.x) * 0.5;
|
||
|
|
Metamaps.Visualize.cameraPosition.y += (-pos.y - Metamaps.Visualize.cameraPosition.y) * 0.5;
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
},
|
||
|
|
onMouseWheel: function (delta) {
|
||
|
|
Metamaps.Visualize.cameraPosition.z += -delta * 20;
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
},
|
||
|
|
onClick: function () {}
|
||
|
|
},
|
||
|
|
//Number of iterations for the FD algorithm
|
||
|
|
iterations: 200,
|
||
|
|
//Edge length
|
||
|
|
levelDistance: 100
|
||
|
|
},
|
||
|
|
nodeSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
edgeSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
embed: {
|
||
|
|
graphSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
nodeSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
edgeSettings: {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, // ForceDirected3D
|
||
|
|
RGraph: {
|
||
|
|
animate: {
|
||
|
|
modes: ['polar'],
|
||
|
|
duration: 2000,
|
||
|
|
onComplete: function () {
|
||
|
|
Metamaps.Visualize.mGraph.busy = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
graphSettings: {
|
||
|
|
//id of the visualization container
|
||
|
|
injectInto: 'infovis',
|
||
|
|
//Enable zooming and panning
|
||
|
|
//by scrolling and DnD
|
||
|
|
Navigation: {
|
||
|
|
enable: true,
|
||
|
|
type: 'HTML',
|
||
|
|
//Enable panning events only if we're dragging the empty
|
||
|
|
//canvas (and not a node).
|
||
|
|
panning: 'avoid nodes',
|
||
|
|
zooming: 28 //zoom speed. higher is more sensible
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
type: 'Metamaps',
|
||
|
|
CanvasStyles: {
|
||
|
|
strokeStyle: '#333',
|
||
|
|
lineWidth: 1.5
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//NodeStyles: {
|
||
|
|
// enable: true,
|
||
|
|
// type: 'Native',
|
||
|
|
// stylesHover: {
|
||
|
|
// dim: 30
|
||
|
|
// },
|
||
|
|
// duration: 300
|
||
|
|
//},
|
||
|
|
// Change node and edge styles such as
|
||
|
|
// color and width.
|
||
|
|
// These properties are also set per node
|
||
|
|
// with dollar prefixed data-properties in the
|
||
|
|
// JSON structure.
|
||
|
|
Node: {
|
||
|
|
overridable: true,
|
||
|
|
color: '#2D6A5D',
|
||
|
|
type: 'customNode',
|
||
|
|
dim: 25
|
||
|
|
},
|
||
|
|
Edge: {
|
||
|
|
overridable: true,
|
||
|
|
color: '#222222',
|
||
|
|
type: 'customEdge',
|
||
|
|
lineWidth: 2,
|
||
|
|
alpha: 0.4
|
||
|
|
},
|
||
|
|
//Native canvas text styling
|
||
|
|
Label: {
|
||
|
|
type: 'HTML', //Native or HTML
|
||
|
|
size: 20,
|
||
|
|
//style: 'bold'
|
||
|
|
},
|
||
|
|
//Add Tips
|
||
|
|
Tips: {
|
||
|
|
enable: false,
|
||
|
|
onShow: function (tip, node) {}
|
||
|
|
},
|
||
|
|
// Add node events
|
||
|
|
Events: {
|
||
|
|
enable: true,
|
||
|
|
enableForEdges: true,
|
||
|
|
type: 'HTML',
|
||
|
|
onMouseMove: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e);
|
||
|
|
},
|
||
|
|
//Update node positions when dragged
|
||
|
|
onDragMove: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e);
|
||
|
|
},
|
||
|
|
onDragEnd: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false);
|
||
|
|
},
|
||
|
|
onDragCancel: function (node, eventInfo, e) {
|
||
|
|
Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false);
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchStart: function (node, eventInfo, e) {
|
||
|
|
//$jit.util.event.stop(e); //stop default touchmove event
|
||
|
|
//Metamaps.Visualize.mGraph.events.onMouseDown(e, null, eventInfo);
|
||
|
|
Metamaps.Visualize.mGraph.events.touched = true;
|
||
|
|
Metamaps.Touch.touchPos = eventInfo.getPos();
|
||
|
|
var canvas = Metamaps.Visualize.mGraph.canvas,
|
||
|
|
ox = canvas.translateOffsetX;
|
||
|
|
oy = canvas.translateOffsetY,
|
||
|
|
sx = canvas.scaleOffsetX,
|
||
|
|
sy = canvas.scaleOffsetY;
|
||
|
|
Metamaps.Touch.touchPos.x *= sx;
|
||
|
|
Metamaps.Touch.touchPos.y *= sy;
|
||
|
|
Metamaps.Touch.touchPos.x += ox;
|
||
|
|
Metamaps.Touch.touchPos.y += oy;
|
||
|
|
|
||
|
|
touchDragNode = node;
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchMove: function (node, eventInfo, e) {
|
||
|
|
if (Metamaps.Touch.touchDragNode) Metamaps.JIT.onDragMoveTopicHandler(Metamaps.Touch.touchDragNode, eventInfo, e);
|
||
|
|
else {
|
||
|
|
Metamaps.JIT.touchPanZoomHandler(eventInfo, e);
|
||
|
|
Metamaps.Visualize.mGraph.labels.hideLabel(Metamaps.Visualize.mGraph.graph.getNode(Metamaps.TopicCard.openTopicCard));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchEnd: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
//Implement the same handler for touchscreens
|
||
|
|
onTouchCancel: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
//Add also a click handler to nodes
|
||
|
|
onClick: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
if (Metamaps.Mouse.boxStartCoordinates) {
|
||
|
|
Metamaps.Visualize.mGraph.busy = false;
|
||
|
|
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
|
||
|
|
Metamaps.JIT.selectNodesWithBox();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.target.id != "infovis-canvas") return false;
|
||
|
|
|
||
|
|
//clicking on a edge, node, or clicking on blank part of canvas?
|
||
|
|
if (node.nodeFrom) {
|
||
|
|
Metamaps.JIT.selectEdgeOnClickHandler(node, e);
|
||
|
|
} else if (node && !node.nodeFrom) {
|
||
|
|
Metamaps.JIT.selectNodeOnClickHandler(node, e);
|
||
|
|
} else {
|
||
|
|
Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e);
|
||
|
|
} //if
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//Number of iterations for the FD algorithm
|
||
|
|
iterations: 200,
|
||
|
|
//Edge length
|
||
|
|
levelDistance: 200,
|
||
|
|
},
|
||
|
|
nodeSettings: {
|
||
|
|
'customNode': {
|
||
|
|
'render': function (node, canvas) {
|
||
|
|
var pos = node.pos.getc(true),
|
||
|
|
dim = node.getData('dim'),
|
||
|
|
cat = node.getData('metacode'),
|
||
|
|
ctx = canvas.getCtx();
|
||
|
|
// if the topic is on the Canvas draw a white circle around it
|
||
|
|
if (node.selected) {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false);
|
||
|
|
ctx.strokeStyle = Metamaps.Settings.colors.topics.selected;
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
ctx.drawImage(imgArray[cat], pos.x - dim, pos.y - dim, dim * 2, dim * 2);
|
||
|
|
} catch (e) {
|
||
|
|
alert("You've got an topic causing an issue! It's ->this-> one: " + cat);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'contains': function (node, pos) {
|
||
|
|
var npos = node.pos.getc(true),
|
||
|
|
dim = node.getData('dim');
|
||
|
|
return this.nodeHelper.circle.contains(npos, pos, dim);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
edgeSettings: {
|
||
|
|
'customEdge': {
|
||
|
|
'render': function (adj, canvas) {
|
||
|
|
Metamaps.JIT.edgeRender(adj, canvas)
|
||
|
|
},
|
||
|
|
'contains': function (adj, pos) {
|
||
|
|
var from = adj.nodeFrom.pos.getc(true),
|
||
|
|
to = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
embed: {
|
||
|
|
graphSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
nodeSettings: {
|
||
|
|
|
||
|
|
},
|
||
|
|
edgeSettings: {
|
||
|
|
'customEdge': {
|
||
|
|
'render': function (adj, canvas) {
|
||
|
|
Metamaps.JIT.edgeRenderEmbed(adj, canvas)
|
||
|
|
},
|
||
|
|
'contains': function (adj, pos) {
|
||
|
|
var from = adj.nodeFrom.pos.getc(true),
|
||
|
|
to = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
return this.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, // RGraph
|
||
|
|
addMetacode: function () {
|
||
|
|
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
// code from http://www.professorcloud.com/mainsite/carousel-integration.htm
|
||
|
|
//mouseWheel:true,
|
||
|
|
if (!self.metacodeIMGinit) {
|
||
|
|
$("#metacodeImg").CloudCarousel({
|
||
|
|
titleBox: $('#metacodeImgTitle'),
|
||
|
|
yRadius: 40,
|
||
|
|
xPos: 150,
|
||
|
|
yPos: 40,
|
||
|
|
speed: 0.15,
|
||
|
|
mouseWheel: true,
|
||
|
|
bringToFront: true
|
||
|
|
});
|
||
|
|
self.metacodeIMGinit = true;
|
||
|
|
$('#topic_inlanguage').typeahead([
|
||
|
|
{
|
||
|
|
name: 'topics',
|
||
|
|
template: '<p>{{value}}</p><div class="type">{{type}}</div><img width="20" height="20" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}"/>',
|
||
|
|
remote: {
|
||
|
|
url: '/topics/autocomplete_topic_inlanguage?term=%QUERY'
|
||
|
|
},
|
||
|
|
engine: Hogan
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
$('#topic_inlanguage').bind('typeahead:selected', function (event, datum, dataset) {
|
||
|
|
Metamaps.Topic.getTopicFromAutocomplete(datum.id);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, // addMetacode
|
||
|
|
editMetacodeSet: function (id) {
|
||
|
|
$('#metacodeImg, #metacodeImgTitle').empty();
|
||
|
|
$('#metacodeImg').append('<img class="loadingMetacodes" width="40" height="40" src="/assets/loading.gif" alt="809" style="position: absolute; left: 130px; top: 80px; z-index: 100;">');
|
||
|
|
$('#metacodeImg').removeData('cloudcarousel');
|
||
|
|
var newMetacodes = "";
|
||
|
|
/* _.each(topics, function (topic) {
|
||
|
|
newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + imgArray[topic[1][1][0]].src + '" alt="' + topic.id + '" title="' + topic[1][1][0] + '"/>';
|
||
|
|
});
|
||
|
|
$('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
|
||
|
|
titleBox: $('#metacodeImgTitle'),
|
||
|
|
yRadius: 40,
|
||
|
|
xPos: 150,
|
||
|
|
yPos: 40,
|
||
|
|
speed: 0.15,
|
||
|
|
mouseWheel: true,
|
||
|
|
bringToFront: true
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
|
||
|
|
}, // editMetacode
|
||
|
|
onMouseEnter: function (edge) {
|
||
|
|
|
||
|
|
$('canvas').css('cursor', 'pointer');
|
||
|
|
var edgeIsSelected = Metamaps.Selected.Synapses.indexOf(edge);
|
||
|
|
//following if statement only executes if the edge being hovered over is not selected
|
||
|
|
if (edgeIsSelected == -1) {
|
||
|
|
edge.setData('showDesc', true, 'current');
|
||
|
|
edge.setDataset('end', {
|
||
|
|
lineWidth: 4,
|
||
|
|
alpha: 1
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['edge-property:lineWidth:color:alpha'],
|
||
|
|
duration: 100
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}
|
||
|
|
}, // onMouseEnter
|
||
|
|
onMouseLeave: function (edge) {
|
||
|
|
$('canvas').css('cursor', 'default');
|
||
|
|
var edgeIsSelected = Metamaps.Selected.Synapses.indexOf(edge);
|
||
|
|
//following if statement only executes if the edge being hovered over is not selected
|
||
|
|
if (edgeIsSelected == -1) {
|
||
|
|
edge.setData('showDesc', false, 'current');
|
||
|
|
edge.setDataset('end', {
|
||
|
|
lineWidth: 2,
|
||
|
|
alpha: 0.4
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['edge-property:lineWidth:color:alpha'],
|
||
|
|
duration: 100
|
||
|
|
});
|
||
|
|
}
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}, // onMouseLeave
|
||
|
|
onMouseMoveHandler: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
|
||
|
|
if (Metamaps.Visualize.mGraph.busy) return;
|
||
|
|
|
||
|
|
var node = eventInfo.getNode();
|
||
|
|
var edge = eventInfo.getEdge();
|
||
|
|
|
||
|
|
//if we're on top of a node object, act like there aren't edges under it
|
||
|
|
if (node != false) {
|
||
|
|
if (Metamaps.Mouse.edgeHoveringOver) {
|
||
|
|
self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver);
|
||
|
|
}
|
||
|
|
$('canvas').css('cursor', 'pointer');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (edge == false && Metamaps.Mouse.edgeHoveringOver != false) {
|
||
|
|
//mouse not on an edge, but we were on an edge previously
|
||
|
|
self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver);
|
||
|
|
} else if (edge != false && Metamaps.Mouse.edgeHoveringOver == false) {
|
||
|
|
//mouse is on an edge, but there isn't a stored edge
|
||
|
|
self.onMouseEnter(edge);
|
||
|
|
} else if (edge != false && Metamaps.Mouse.edgeHoveringOver != edge) {
|
||
|
|
//mouse is on an edge, but a different edge is stored
|
||
|
|
self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver)
|
||
|
|
self.onMouseEnter(edge);
|
||
|
|
}
|
||
|
|
|
||
|
|
//could be false
|
||
|
|
Metamaps.Mouse.edgeHoveringOver = edge;
|
||
|
|
|
||
|
|
if (!node && !edge) {
|
||
|
|
$('canvas').css('cursor', 'default');
|
||
|
|
}
|
||
|
|
}, // onMouseMoveHandler
|
||
|
|
enterKeyHandler: function () {
|
||
|
|
// this is to submit new topic creation
|
||
|
|
if (Metamaps.Create.newTopic.beingCreated) {
|
||
|
|
Metamaps.Topic.createTopicLocally();
|
||
|
|
} else if (Metamaps.Create.newSynapse.beingCreated) {
|
||
|
|
Metamaps.Synapse.createSynapseLocally();
|
||
|
|
}
|
||
|
|
}, //enterKeyHandler
|
||
|
|
escKeyHandler: function () {
|
||
|
|
Metamaps.Control.deselectAllEdges();
|
||
|
|
Metamaps.Control.deselectAllNodes();
|
||
|
|
}, //escKeyHandler
|
||
|
|
touchPanZoomHandler: function (eventInfo, e) {
|
||
|
|
if (e.touches.length == 1) {
|
||
|
|
var thispos = Metamaps.Touch.touchPos,
|
||
|
|
currentPos = eventInfo.getPos(),
|
||
|
|
canvas = Metamaps.Visualize.mGraph.canvas,
|
||
|
|
ox = canvas.translateOffsetX,
|
||
|
|
oy = canvas.translateOffsetY,
|
||
|
|
sx = canvas.scaleOffsetX,
|
||
|
|
sy = canvas.scaleOffsetY;
|
||
|
|
currentPos.x *= sx;
|
||
|
|
currentPos.y *= sy;
|
||
|
|
currentPos.x += ox;
|
||
|
|
currentPos.y += oy;
|
||
|
|
//var x = currentPos.x - thispos.x,
|
||
|
|
// y = currentPos.y - thispos.y;
|
||
|
|
var x = currentPos.x - thispos.x,
|
||
|
|
y = currentPos.y - thispos.y;
|
||
|
|
Metamaps.Touch.touchPos = currentPos;
|
||
|
|
Metamaps.Visualize.mGraph.canvas.translate(x * 1 / sx, y * 1 / sy);
|
||
|
|
} else if (e.touches.length == 2) {
|
||
|
|
var touch1 = e.touches[0];
|
||
|
|
var touch2 = e.touches[1];
|
||
|
|
|
||
|
|
var dist = Metamaps.Util.getDistance({
|
||
|
|
x: touch1.clientX,
|
||
|
|
y: touch1.clientY
|
||
|
|
}, {
|
||
|
|
x: touch2.clientX,
|
||
|
|
y: touch2.clientY
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!lastDist) {
|
||
|
|
lastDist = dist;
|
||
|
|
}
|
||
|
|
|
||
|
|
var scale = dist / lastDist;
|
||
|
|
|
||
|
|
console.log(scale);
|
||
|
|
|
||
|
|
if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) {
|
||
|
|
Metamaps.Visualize.mGraph.canvas.scale(scale, scale);
|
||
|
|
}
|
||
|
|
if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX < 0.5) {
|
||
|
|
Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(true);
|
||
|
|
} else if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX > 0.5) {
|
||
|
|
Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(false);
|
||
|
|
}
|
||
|
|
lastDist = dist;
|
||
|
|
}
|
||
|
|
|
||
|
|
}, // touchPanZoomHandler
|
||
|
|
onDragMoveTopicHandler: function (node, eventInfo, e) {
|
||
|
|
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
|
||
|
|
if (node && !node.nodeFrom) {
|
||
|
|
Metamaps.Create.newTopic.hide();
|
||
|
|
Metamaps.Create.newSynapse.hide();
|
||
|
|
var pos = eventInfo.getPos();
|
||
|
|
// if it's a left click, or a touch, move the node
|
||
|
|
if (e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
|
||
|
|
//if the node dragged isn't already selected, select it
|
||
|
|
var whatToDo = self.handleSelectionBeforeDragging(node, e);
|
||
|
|
if (node.pos.rho || node.pos.rho === 0) {
|
||
|
|
var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
|
||
|
|
var theta = Math.atan2(pos.y, pos.x);
|
||
|
|
node.pos.setp(theta, rho);
|
||
|
|
} else if (whatToDo == 'only-drag-this-one') {
|
||
|
|
node.pos.setc(pos.x, pos.y);
|
||
|
|
node.setData('xloc', pos.x);
|
||
|
|
node.setData('yloc', pos.y);
|
||
|
|
} else {
|
||
|
|
var len = Metamaps.Selected.Topics.length;
|
||
|
|
|
||
|
|
//first define offset for each node
|
||
|
|
var xOffset = new Array();
|
||
|
|
var yOffset = new Array();
|
||
|
|
for (var i = 0; i < len; i += 1) {
|
||
|
|
var n = Metamaps.Selected.Topics[i];
|
||
|
|
xOffset[i] = n.pos.x - node.pos.x;
|
||
|
|
yOffset[i] = n.pos.y - node.pos.y;
|
||
|
|
} //for
|
||
|
|
|
||
|
|
for (var i = 0; i < len; i += 1) {
|
||
|
|
var n = Metamaps.Selected.Topics[i];
|
||
|
|
var x = pos.x + xOffset[i];
|
||
|
|
var y = pos.y + yOffset[i];
|
||
|
|
n.pos.setc(x, y);
|
||
|
|
n.setData('xloc', x);
|
||
|
|
n.setData('yloc', y);
|
||
|
|
} //for
|
||
|
|
} //if
|
||
|
|
|
||
|
|
if (whatToDo == 'deselect') {
|
||
|
|
Metamaps.Control.deselectNode(node);
|
||
|
|
}
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}
|
||
|
|
// if it's a right click or holding down alt, start synapse creation ->third option is for firefox
|
||
|
|
else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && userid != null) {
|
||
|
|
if (tempInit == false) {
|
||
|
|
tempNode = node;
|
||
|
|
tempInit = true;
|
||
|
|
|
||
|
|
// set the draw synapse start positions
|
||
|
|
var l = Metamaps.Selected.Topics.length;
|
||
|
|
if (l > 0) {
|
||
|
|
for (var i = l - 1; i >= 0; i -= 1) {
|
||
|
|
var n = Metamaps.Selected.Topics[i];
|
||
|
|
Metamaps.Mouse.synapseStartCoordinates.push({
|
||
|
|
x: n.pos.getc().x,
|
||
|
|
y: n.pos.getc().y
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
Metamaps.Mouse.synapseStartCoordinates = [{
|
||
|
|
x: tempNode.pos.getc().x,
|
||
|
|
y: tempNode.pos.getc().y
|
||
|
|
}];
|
||
|
|
}
|
||
|
|
Metamaps.Mouse.synapseEndCoordinates = {
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
};
|
||
|
|
}
|
||
|
|
//
|
||
|
|
temp = eventInfo.getNode();
|
||
|
|
if (temp != false && temp.id != node.id && Metamaps.Selected.Topics.indexOf(temp) == -1) { // this means a Node has been returned
|
||
|
|
tempNode2 = temp;
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
|
||
|
|
Metamaps.Mouse.synapseEndCoordinates = {
|
||
|
|
x: tempNode2.pos.getc().x,
|
||
|
|
y: tempNode2.pos.getc().y
|
||
|
|
};
|
||
|
|
|
||
|
|
// before making the highlighted one bigger, make sure all the others are regular size
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
n.setData('dim', 25, 'current');
|
||
|
|
});
|
||
|
|
temp.setData('dim', 35, 'current');
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotNode(tempNode, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotNode(temp, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
} else if (!temp) {
|
||
|
|
tempNode2 = null;
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
n.setData('dim', 25, 'current');
|
||
|
|
});
|
||
|
|
//pop up node creation :)
|
||
|
|
var myX = e.clientX - 110;
|
||
|
|
var myY = e.clientY - 30;
|
||
|
|
$('#new_topic').css('left', myX + "px");
|
||
|
|
$('#new_topic').css('top', myY + "px");
|
||
|
|
$('#new_synapse').css('left', myX + "px");
|
||
|
|
$('#new_synapse').css('top', myY + "px");
|
||
|
|
Metamaps.Create.newTopic.x = eventInfo.getPos().x;
|
||
|
|
Metamaps.Create.newTopic.y = eventInfo.getPos().y;
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
|
||
|
|
Metamaps.Mouse.synapseEndCoordinates = {
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, // onDragMoveTopicHandler
|
||
|
|
onDragCancelHandler: function (node, eventInfo, e, centred) {
|
||
|
|
tempNode = null;
|
||
|
|
tempNode2 = null;
|
||
|
|
tempInit = false;
|
||
|
|
// reset the draw synapse positions to false
|
||
|
|
Metamaps.Mouse.synapseStartCoordinates = [];
|
||
|
|
Metamaps.Mouse.synapseEndCoordinates = null;
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}, // onDragCancelHandler
|
||
|
|
onDragEndTopicHandler: function (node, eventInfo, e, allowRealtime) {
|
||
|
|
if (tempInit && tempNode2 == null) {
|
||
|
|
Metamaps.Create.newTopic.addSynapse = true;
|
||
|
|
$('#new_topic').fadeIn('fast');
|
||
|
|
Metamaps.Create.newTopic.beingCreated = true;
|
||
|
|
Metamaps.JIT.addMetacode();
|
||
|
|
$('#topic_name').focus();
|
||
|
|
} else if (tempInit && tempNode2 != null) {
|
||
|
|
Metamaps.Create.newTopic.addSynapse = false;
|
||
|
|
Metamaps.Create.newSynapse.topic1id = tempNode.id;
|
||
|
|
Metamaps.Create.newSynapse.topic2id = tempNode2.id;
|
||
|
|
Metamaps.Create.newSynapse.open();
|
||
|
|
Metamaps.Create.newSynapse.beingCreated = true
|
||
|
|
tempNode = null;
|
||
|
|
tempNode2 = null;
|
||
|
|
tempInit = false;
|
||
|
|
}
|
||
|
|
}, //onDragEndTopicHandler
|
||
|
|
canvasClickHandler: function (canvasLoc, e) {
|
||
|
|
//grab the location and timestamp of the click
|
||
|
|
var storedTime = Metamaps.Mouse.lastCanvasClick;
|
||
|
|
var now = Date.now(); //not compatible with IE8 FYI
|
||
|
|
Metamaps.Mouse.lastCanvasClick = now;
|
||
|
|
|
||
|
|
if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE) {
|
||
|
|
// DOUBLE CLICK
|
||
|
|
//pop up node creation :)
|
||
|
|
Metamaps.Create.newTopic.addSynapse = false;
|
||
|
|
Metamaps.Create.newTopic.x = canvasLoc.x;
|
||
|
|
Metamaps.Create.newTopic.y = canvasLoc.y;
|
||
|
|
$('#new_topic').css('left', e.clientX + "px");
|
||
|
|
$('#new_topic').css('top', e.clientY + "px");
|
||
|
|
$('#new_topic').fadeIn('fast');
|
||
|
|
Metamaps.Create.newTopic.beingCreated = true;
|
||
|
|
Metamaps.JIT.addMetacode();
|
||
|
|
$('#topic_name').focus();
|
||
|
|
} else if (!Metamaps.Mouse.didPan) {
|
||
|
|
// SINGLE CLICK
|
||
|
|
Metamaps.TopicCard.hideCard();
|
||
|
|
$('#new_topic').fadeOut('fast');
|
||
|
|
$("#topic_name").typeahead('setQuery', '');
|
||
|
|
Metamaps.Create.newTopic.beingCreated = false;
|
||
|
|
$('#new_synapse').fadeOut('fast');
|
||
|
|
Metamaps.Create.newSynapse.beingCreated = false;
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
// reset the draw synapse positions to false
|
||
|
|
Metamaps.Mouse.synapseStartCoordinates = [];
|
||
|
|
Metamaps.Mouse.synapseEndCoordinates = null;
|
||
|
|
tempInit = false;
|
||
|
|
tempNode = null;
|
||
|
|
tempNode2 = null;
|
||
|
|
Metamaps.Control.deselectAllEdges();
|
||
|
|
Metamaps.Control.deselectAllNodes();
|
||
|
|
}
|
||
|
|
}, //canvasClickHandler
|
||
|
|
nodeDoubleClickHandler: function (node, e) {
|
||
|
|
|
||
|
|
Metamaps.TopicCard.showCard(node);
|
||
|
|
|
||
|
|
}, // nodeDoubleClickHandler
|
||
|
|
nodeWasDoubleClicked: function () {
|
||
|
|
//grab the timestamp of the click
|
||
|
|
var storedTime = Metamaps.Mouse.lastNodeClick;
|
||
|
|
var now = Date.now(); //not compatible with IE8 FYI
|
||
|
|
Metamaps.Mouse.lastNodeClick = now;
|
||
|
|
|
||
|
|
if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE) {
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}, //nodeWasDoubleClicked;
|
||
|
|
handleSelectionBeforeDragging: function (node, e) {
|
||
|
|
// four cases:
|
||
|
|
// 1 nothing is selected, so pretend you aren't selecting
|
||
|
|
// 2 others are selected only and shift, so additionally select this one
|
||
|
|
// 3 others are selected only, no shift: drag only this one
|
||
|
|
// 4 this node and others were selected, so drag them (just return false)
|
||
|
|
//return value: deselect node again after?
|
||
|
|
if (Metamaps.Selected.Topics.length == 0) {
|
||
|
|
Metamaps.Control.selectNode(node);
|
||
|
|
return 'deselect';
|
||
|
|
}
|
||
|
|
if (Metamaps.Selected.Topics.indexOf(node) == -1) {
|
||
|
|
if (e.shiftKey) {
|
||
|
|
Metamaps.Control.selectNode(node);
|
||
|
|
return 'nothing';
|
||
|
|
} else {
|
||
|
|
return 'only-drag-this-one';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return 'nothing'; //case 4?
|
||
|
|
}, // handleSelectionBeforeDragging
|
||
|
|
selectNodesWithBox: function () {
|
||
|
|
|
||
|
|
var sX = Metamaps.Mouse.boxStartCoordinates.x,
|
||
|
|
sY = Metamaps.Mouse.boxStartCoordinates.y,
|
||
|
|
eX = Metamaps.Mouse.boxEndCoordinates.x,
|
||
|
|
eY = Metamaps.Mouse.boxEndCoordinates.y;
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
var x = n.pos.x,
|
||
|
|
y = n.pos.y;
|
||
|
|
|
||
|
|
if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
|
||
|
|
var nodeIsSelected = Metamaps.Selected.Topics.indexOf(n);
|
||
|
|
if (nodeIsSelected == -1) Metamaps.Control.selectNode(n); // the node is not selected, so select it
|
||
|
|
else if (nodeIsSelected != -1) Metamaps.Control.deselectNode(n); // the node is selected, so deselect it
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Metamaps.Mouse.boxStartCoordinates = false;
|
||
|
|
Metamaps.Mouse.boxEndCoordinates = false;
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}, // selectNodesWithBox
|
||
|
|
drawSelectBox: function (eventInfo, e) {
|
||
|
|
var ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
|
||
|
|
|
||
|
|
var startX = Metamaps.Mouse.boxStartCoordinates.x,
|
||
|
|
startY = Metamaps.Mouse.boxStartCoordinates.y,
|
||
|
|
currX = eventInfo.getPos().x,
|
||
|
|
currY = eventInfo.getPos().y;
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.canvas.clear();
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(startX, startY);
|
||
|
|
ctx.lineTo(startX, currY);
|
||
|
|
ctx.lineTo(currX, currY);
|
||
|
|
ctx.lineTo(currX, startY);
|
||
|
|
ctx.lineTo(startX, startY);
|
||
|
|
ctx.strokeStyle = "black";
|
||
|
|
ctx.stroke();
|
||
|
|
}, // drawSelectBox
|
||
|
|
selectNodeOnClickHandler: function (node, e) {
|
||
|
|
if (Metamaps.Visualize.mGraph.busy) return;
|
||
|
|
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
|
||
|
|
// catch right click on mac, which is often like ctrl+click
|
||
|
|
if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
|
||
|
|
self.selectNodeOnRightClickHandler(node, e)
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// if on a topic page, let alt+click center you on a new topic
|
||
|
|
if (Metamaps.Active.Topic && e.altKey) {
|
||
|
|
Metamaps.RGraph.centerOn(node.id);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var check = self.nodeWasDoubleClicked();
|
||
|
|
if (check) {
|
||
|
|
self.nodeDoubleClickHandler(node, e);
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
// wait a certain length of time, then check again, then run this code
|
||
|
|
setTimeout(function () {
|
||
|
|
if (!Metamaps.JIT.nodeWasDoubleClicked()) {
|
||
|
|
if (!e.shiftKey) {
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
if (n.id != node.id) {
|
||
|
|
Metamaps.Control.deselectNode(n);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (node.selected) {
|
||
|
|
Metamaps.Control.deselectNode(node);
|
||
|
|
} else {
|
||
|
|
Metamaps.Control.selectNode(node);
|
||
|
|
}
|
||
|
|
//trigger animation to final styles
|
||
|
|
Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['edge-property:lineWidth:color:alpha'],
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}
|
||
|
|
}, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE);
|
||
|
|
}
|
||
|
|
}, //selectNodeOnClickHandler
|
||
|
|
selectNodeOnRightClickHandler: function (node, e) {
|
||
|
|
// the 'node' variable is a JIT node, the one that was clicked on
|
||
|
|
// the 'e' variable is the click event
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
if (Metamaps.Visualize.mGraph.busy) return;
|
||
|
|
|
||
|
|
// delete old right click menu
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
// create new menu for clicked on node
|
||
|
|
var rightclickmenu = document.createElement("div");
|
||
|
|
rightclickmenu.className = "rightclickmenu";
|
||
|
|
|
||
|
|
// add the proper options to the menu
|
||
|
|
var menustring = '<ul>';
|
||
|
|
|
||
|
|
if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
|
||
|
|
if (Metamaps.Active.Map.id && userid != null) menustring += '<li class="rc-remove">Remove from map</li>';
|
||
|
|
menustring += '<li class="rc-hide">Hide until refresh</li>';
|
||
|
|
|
||
|
|
if (!Metamaps.Active.Map) menustring += '<li class="rc-center">Center this topic</li>';
|
||
|
|
menustring += '<li class="rc-popout">Open in new tab</li>';
|
||
|
|
if (userid) {
|
||
|
|
var options = '<ul><li class="changeP toCommons">commons</li> \
|
||
|
|
<li class="changeP toPublic">public</li> \
|
||
|
|
<li class="changeP toPrivate">private</li> \
|
||
|
|
</ul>';
|
||
|
|
|
||
|
|
menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
|
||
|
|
}
|
||
|
|
|
||
|
|
menustring += '</ul>';
|
||
|
|
rightclickmenu.innerHTML = menustring;
|
||
|
|
|
||
|
|
// position the menu where the click happened
|
||
|
|
$(rightclickmenu).css({
|
||
|
|
left: e.clientX,
|
||
|
|
top: e.clientY
|
||
|
|
});
|
||
|
|
//add the menu to the page
|
||
|
|
$('#center-container').append(rightclickmenu);
|
||
|
|
|
||
|
|
|
||
|
|
// attach events to clicks on the list items
|
||
|
|
|
||
|
|
// delete the selected things from the database
|
||
|
|
$('.rc-delete').click(function () {
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
var n = Metamaps.Selected.Topics.length;
|
||
|
|
var e = Metamaps.Selected.Synapses.length;
|
||
|
|
var ntext = n == 1 ? "1 topic" : n + " topics";
|
||
|
|
var etext = e == 1 ? "1 synapse" : e + " synapses";
|
||
|
|
var text = "You have " + ntext + " and " + etext + " selected. ";
|
||
|
|
|
||
|
|
var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
|
||
|
|
if (r == true) {
|
||
|
|
Metamaps.Control.deleteSelectedEdges();
|
||
|
|
Metamaps.Control.deleteSelectedNodes();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// remove the selected things from the map
|
||
|
|
$('.rc-remove').click(function () {
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
Metamaps.Control.removeSelectedEdges();
|
||
|
|
Metamaps.Control.removeSelectedNodes();
|
||
|
|
});
|
||
|
|
|
||
|
|
// hide selected nodes and synapses until refresh
|
||
|
|
$('.rc-hide').click(function () {
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
Metamaps.Control.hideSelectedEdges();
|
||
|
|
Metamaps.Control.hideSelectedNodes();
|
||
|
|
});
|
||
|
|
|
||
|
|
// when in radial, center on the topic you picked
|
||
|
|
$('.rc-center').click(function () {
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
centerOn(node.id);
|
||
|
|
});
|
||
|
|
|
||
|
|
// open the entity in a new tab
|
||
|
|
$('.rc-popout').click(function () {
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
var win = window.open('/topics/' + node.id, '_blank');
|
||
|
|
win.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
// change the permission of all the selected nodes and synapses that you were the originator of
|
||
|
|
$('.rc-permission li').click(function () {
|
||
|
|
$('.rightclickmenu').remove();
|
||
|
|
// $(this).text() will be 'commons' 'public' or 'private'
|
||
|
|
Metamaps.Control.updateSelectedPermissions($(this).text());
|
||
|
|
});
|
||
|
|
|
||
|
|
}, //selectNodeOnRightClickHandler
|
||
|
|
selectEdgeOnClickHandler: function (adj, e) {
|
||
|
|
if (Metamaps.Visualize.mGraph.busy) return;
|
||
|
|
|
||
|
|
//editing overrides everything else
|
||
|
|
if (e.altKey) {
|
||
|
|
//in select-edit-delete-nodes-and-edges.js
|
||
|
|
// editEdge(adj, e); TODO need to find and reimplement this function
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var edgeIsSelected = Metamaps.Selected.Synapses.indexOf(adj);
|
||
|
|
if (edgeIsSelected == -1) edgeIsSelected = false;
|
||
|
|
else if (edgeIsSelected != -1) edgeIsSelected = true;
|
||
|
|
|
||
|
|
if (edgeIsSelected && e.shiftKey) {
|
||
|
|
//deselecting an edge with shift
|
||
|
|
Metamaps.Control.deselectEdge(adj);
|
||
|
|
} else if (!edgeIsSelected && e.shiftKey) {
|
||
|
|
//selecting an edge with shift
|
||
|
|
Metamaps.Control.selectEdge(adj);
|
||
|
|
} else if (edgeIsSelected && !e.shiftKey) {
|
||
|
|
//deselecting an edge without shift - unselect all
|
||
|
|
Metamaps.Control.deselectAllEdges();
|
||
|
|
} else if (!edgeIsSelected && !e.shiftKey) {
|
||
|
|
//selecting an edge without shift - unselect all but new one
|
||
|
|
Metamaps.Control.deselectAllEdges();
|
||
|
|
Metamaps.Control.selectEdge(adj);
|
||
|
|
}
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.plot();
|
||
|
|
}, //selectEdgeOnClickHandler
|
||
|
|
selectEdgeOnRightClickHandler: function (adj, e) {
|
||
|
|
if (Metamaps.Visualize.mGraph.busy) return;
|
||
|
|
|
||
|
|
console.log('edge right click handler working');
|
||
|
|
}, //selectEdgeOnRightClickHandler
|
||
|
|
SmoothPanning: function () {
|
||
|
|
|
||
|
|
var sx = Metamaps.Visualize.mGraph.canvas.scaleOffsetX,
|
||
|
|
sy = Metamaps.Visualize.mGraph.canvas.scaleOffsetY,
|
||
|
|
y_velocity = Metamaps.Mouse.changeInY, // initial y velocity
|
||
|
|
x_velocity = Metamaps.Mouse.changeInX, // initial x velocity
|
||
|
|
easing = 1; // frictional value
|
||
|
|
|
||
|
|
easing = 1;
|
||
|
|
window.clearInterval(panningInt)
|
||
|
|
panningInt = setInterval(function () {
|
||
|
|
myTimer()
|
||
|
|
}, 1);
|
||
|
|
|
||
|
|
function myTimer() {
|
||
|
|
Metamaps.Visualize.mGraph.canvas.translate(x_velocity * easing * 1 / sx, y_velocity * easing * 1 / sy);
|
||
|
|
easing = easing * 0.75;
|
||
|
|
|
||
|
|
if (easing < 0.1) window.clearInterval(panningInt);
|
||
|
|
}
|
||
|
|
}, // SmoothPanning
|
||
|
|
generateLittleHTML: function (node) {
|
||
|
|
var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
|
||
|
|
|
||
|
|
var littleHTML = '<div class="label">{{ name }}</div><div class="nodeOptions">';
|
||
|
|
|
||
|
|
if (userid == null || !Metamaps.Active.Map || !mapperm) {
|
||
|
|
//unauthenticated, not on a map: can remove from canvas
|
||
|
|
littleHTML += '<span class="removeFromCanvas" onclick="Metamaps.Control.hideNode({{ id }})" title="Click to remove topic from canvas"></span>';
|
||
|
|
} else if (mapperm) {
|
||
|
|
//permission to remove nodes from the map
|
||
|
|
littleHTML += '<span class="removeFromCanvas" onclick="Metamaps.Control.hideNode({{ id }})" title="Click to remove topic from canvas"></span><span class="removeFromMap" onclick="Metamaps.Control.removeNode({{ id }})" title="Click to remove topic from map"></span>';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (userid == node.getData('userid')) {
|
||
|
|
//logged in, and owner of the topic, thus permission to delete
|
||
|
|
littleHTML += '<span class="deleteTopic" onclick="" title="Click to delete this topic"></span>';
|
||
|
|
}
|
||
|
|
littleHTML += '</div>';
|
||
|
|
|
||
|
|
var render = _.template(littleHTML);
|
||
|
|
var map;
|
||
|
|
Metamaps.Active.Map ? map = Metamaps.Active.Topic.id : map = null;
|
||
|
|
return render({
|
||
|
|
id: node.id,
|
||
|
|
mapid: map,
|
||
|
|
name: node.name
|
||
|
|
});
|
||
|
|
}, // generateLittleHTML
|
||
|
|
renderMidArrow: function (from, to, dim, swap, canvas, placement, newSynapse) {
|
||
|
|
var ctx = canvas.getCtx();
|
||
|
|
// invert edge direction
|
||
|
|
if (swap) {
|
||
|
|
var tmp = from;
|
||
|
|
from = to;
|
||
|
|
to = tmp;
|
||
|
|
}
|
||
|
|
// vect represents a line from tip to tail of the arrow
|
||
|
|
var vect = new $jit.Complex(to.x - from.x, to.y - from.y);
|
||
|
|
// scale it
|
||
|
|
vect.$scale(dim / vect.norm());
|
||
|
|
// compute the midpoint of the edge line
|
||
|
|
var newX = (to.x - from.x) * placement + from.x;
|
||
|
|
var newY = (to.y - from.y) * placement + from.y;
|
||
|
|
var midPoint = new $jit.Complex(newX, newY);
|
||
|
|
|
||
|
|
// move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint
|
||
|
|
var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
|
||
|
|
// compute the tail intersection point with the edge line
|
||
|
|
var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, arrowPoint.y - vect.y);
|
||
|
|
// vector perpendicular to vect
|
||
|
|
var normal = new $jit.Complex(-vect.y / 2, vect.x / 2);
|
||
|
|
var v1 = intermediatePoint.add(normal);
|
||
|
|
var v2 = intermediatePoint.$add(normal.$scale(-1));
|
||
|
|
|
||
|
|
if (newSynapse) {
|
||
|
|
ctx.strokeStyle = "#222222";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.globalAlpha = 0.4;
|
||
|
|
}
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(from.x, from.y);
|
||
|
|
ctx.lineTo(to.x, to.y);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(v1.x, v1.y);
|
||
|
|
ctx.lineTo(arrowPoint.x, arrowPoint.y);
|
||
|
|
ctx.lineTo(v2.x, v2.y);
|
||
|
|
ctx.stroke();
|
||
|
|
}, // renderMidArrow
|
||
|
|
renderEdgeArrows: function (edgeHelper, adj, synapse) {
|
||
|
|
|
||
|
|
var self = Metamaps.JIT;
|
||
|
|
|
||
|
|
var canvas = Metamaps.Visualize.mGraph.canvas;
|
||
|
|
|
||
|
|
var directionCat = synapse.get('category');
|
||
|
|
var direction = synapse.getDirection();
|
||
|
|
|
||
|
|
var pos = adj.nodeFrom.pos.getc(true);
|
||
|
|
var posChild = adj.nodeTo.pos.getc(true);
|
||
|
|
|
||
|
|
//plot arrow edge
|
||
|
|
if (directionCat == "none") {
|
||
|
|
edgeHelper.line.render({
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
}, {
|
||
|
|
x: posChild.x,
|
||
|
|
y: posChild.y
|
||
|
|
}, canvas);
|
||
|
|
} else if (directionCat == "both") {
|
||
|
|
self.renderMidArrow({
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
}, {
|
||
|
|
x: posChild.x,
|
||
|
|
y: posChild.y
|
||
|
|
}, 13, true, canvas, 0.7);
|
||
|
|
self.renderMidArrow({
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
}, {
|
||
|
|
x: posChild.x,
|
||
|
|
y: posChild.y
|
||
|
|
}, 13, false, canvas, 0.7);
|
||
|
|
} else if (directionCat == "from-to") {
|
||
|
|
var direction = adj.data.$direction;
|
||
|
|
var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id);
|
||
|
|
self.renderMidArrow({
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
}, {
|
||
|
|
x: posChild.x,
|
||
|
|
y: posChild.y
|
||
|
|
}, 13, inv, canvas, 0.7);
|
||
|
|
self.renderMidArrow({
|
||
|
|
x: pos.x,
|
||
|
|
y: pos.y
|
||
|
|
}, {
|
||
|
|
x: posChild.x,
|
||
|
|
y: posChild.y
|
||
|
|
}, 13, inv, canvas, 0.3);
|
||
|
|
}
|
||
|
|
} //renderEdgeArrows
|
||
|
|
};
|
||
|
|
Metamaps.Listeners = {
|
||
|
|
|
||
|
|
init: function () {
|
||
|
|
|
||
|
|
$(document).on('keydown', function (e) {
|
||
|
|
switch (e.which) {
|
||
|
|
case 13:
|
||
|
|
Metamaps.JIT.enterKeyHandler();
|
||
|
|
e.preventDefault();
|
||
|
|
break;
|
||
|
|
case 27:
|
||
|
|
Metamaps.JIT.escKeyHandler();
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break; //alert(e.which);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//$(window).resize(function () {
|
||
|
|
// Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height());
|
||
|
|
//});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Metamaps.Map = {
|
||
|
|
// this function is to retrieve a map JSON object from the database
|
||
|
|
// @param id = the id of the map to retrieve
|
||
|
|
get: function (id, callback) {
|
||
|
|
// if the desired topic is not yet in the local topic repository, fetch it
|
||
|
|
if (Metamaps.Maps.get(id) == undefined) {
|
||
|
|
if (!callback) {
|
||
|
|
var e = $.ajax({
|
||
|
|
url: "/maps/" + id + ".json",
|
||
|
|
async: false
|
||
|
|
});
|
||
|
|
Metamaps.Maps.add($.parseJSON(e.responseText));
|
||
|
|
return Metamaps.Maps.get(id);
|
||
|
|
} else {
|
||
|
|
return $.ajax({
|
||
|
|
url: "/users/" + id + ".json",
|
||
|
|
success: function (data) {
|
||
|
|
Metamaps.Maps.add(data);
|
||
|
|
callback(Metamaps.Maps.get(id));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (!callback) {
|
||
|
|
return Metamaps.Maps.get(id);
|
||
|
|
} else {
|
||
|
|
return callback(Metamaps.Maps.get(id));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
Metamaps.Maps = null; // will be initialized in Metamaps.Backbone.init as a MapCollection
|
||
|
|
|
||
|
|
Metamaps.Mapper = {
|
||
|
|
// this function is to retrieve a mapper JSON object from the database
|
||
|
|
// @param id = the id of the mapper to retrieve
|
||
|
|
get: function (id, callback) {
|
||
|
|
// if the desired topic is not yet in the local topic repository, fetch it
|
||
|
|
if (Metamaps.Mappers.get(id) == undefined) {
|
||
|
|
if (!callback) {
|
||
|
|
var e = $.ajax({
|
||
|
|
url: "/users/" + id + ".json",
|
||
|
|
async: false
|
||
|
|
});
|
||
|
|
Metamaps.Mappers.add($.parseJSON(e.responseText));
|
||
|
|
return Metamaps.Mappers.get(id);
|
||
|
|
} else {
|
||
|
|
return $.ajax({
|
||
|
|
url: "/users/" + id + ".json",
|
||
|
|
success: function (data) {
|
||
|
|
Metamaps.Mappers.add(data);
|
||
|
|
callback(Metamaps.Mappers.get(id));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (!callback) {
|
||
|
|
return Metamaps.Mappers.get(id);
|
||
|
|
} else {
|
||
|
|
return callback(Metamaps.Mappers.get(id));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
Metamaps.Mappers = null; // will be initialized in Metamaps.Backbone.init as a MapperCollection
|
||
|
|
|
||
|
|
Metamaps.Mouse = {
|
||
|
|
didPan: false,
|
||
|
|
changeInX: 0,
|
||
|
|
changeInY: 0,
|
||
|
|
edgeHoveringOver: false,
|
||
|
|
boxStartCoordinates: false,
|
||
|
|
boxEndCoordinates: false,
|
||
|
|
synapseStartCoordinates: [],
|
||
|
|
synapseEndCoordinates: null,
|
||
|
|
lastNodeClick: 0,
|
||
|
|
lastCanvasClick: 0,
|
||
|
|
DOUBLE_CLICK_TOLERANCE: 300
|
||
|
|
};
|
||
|
|
Metamaps.Organize = {
|
||
|
|
init: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
arrange: function (layout, centerNode) {
|
||
|
|
console.log(centerNode);
|
||
|
|
// first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
|
||
|
|
if (layout == 'grid') {
|
||
|
|
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
|
||
|
|
var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
|
||
|
|
var GRIDSPACE = 400;
|
||
|
|
var row = 0;
|
||
|
|
var column = 0;
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
if (column == numColumns) {
|
||
|
|
column = 0;
|
||
|
|
row += 1;
|
||
|
|
}
|
||
|
|
var newPos = new $jit.Complex();
|
||
|
|
newPos.x = column * GRIDSPACE;
|
||
|
|
newPos.y = row * GRIDSPACE;
|
||
|
|
n.setPos(newPos, 'end');
|
||
|
|
column += 1;
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
} else if (layout == 'grid_full') {
|
||
|
|
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
|
||
|
|
//var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
|
||
|
|
//var GRIDSPACE = 400;
|
||
|
|
var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height;
|
||
|
|
var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width;
|
||
|
|
var totalArea = height * width;
|
||
|
|
var cellArea = totalArea / numNodes;
|
||
|
|
var ratio = height / width;
|
||
|
|
var cellWidth = sqrt(cellArea / ratio);
|
||
|
|
var cellHeight = cellArea / cellWidth;
|
||
|
|
var row = floor(height / cellHeight);
|
||
|
|
var column = floor(width / cellWidth);
|
||
|
|
var totalCells = row * column;
|
||
|
|
|
||
|
|
if (totalCells)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
if (column == numColumns) {
|
||
|
|
column = 0;
|
||
|
|
row += 1;
|
||
|
|
}
|
||
|
|
var newPos = new $jit.Complex();
|
||
|
|
newPos.x = column * GRIDSPACE;
|
||
|
|
newPos.y = row * GRIDSPACE;
|
||
|
|
n.setPos(newPos, 'end');
|
||
|
|
column += 1;
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
} else if (layout == 'radial') {
|
||
|
|
|
||
|
|
var centerX = centerNode.getPos().x;
|
||
|
|
var centerY = centerNode.getPos().y;
|
||
|
|
centerNode.setPos(centerNode.getPos(), 'end');
|
||
|
|
|
||
|
|
console.log(centerNode.adjacencies);
|
||
|
|
var lineLength = 200;
|
||
|
|
/*
|
||
|
|
centerNode.eachAdjacency(function(n) {
|
||
|
|
var newPos = new $jit.Complex();
|
||
|
|
newPos.x = lineLength*Math.sin(degree) +centerX;
|
||
|
|
newPos.y = lineLength*Math.cos(degree) +centerY;
|
||
|
|
n.nodeTo.setPos(newPos, 'end');
|
||
|
|
degree += angle;
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var usedNodes = {};
|
||
|
|
usedNodes[centerNode.id] = centerNode;
|
||
|
|
var radial = function (node, level, degree) {
|
||
|
|
if (level == 1) {
|
||
|
|
var numLinksTemp = _.size(node.adjacencies);
|
||
|
|
var angleTemp = 2 * Math.PI / numLinksTemp;
|
||
|
|
} else {
|
||
|
|
angleTemp = 2 * Math.PI / 20
|
||
|
|
};
|
||
|
|
node.eachAdjacency(function (a) {
|
||
|
|
var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1);
|
||
|
|
if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) {
|
||
|
|
var newPos = new $jit.Complex();
|
||
|
|
newPos.x = level * lineLength * Math.sin(degree) + centerX;
|
||
|
|
newPos.y = level * lineLength * Math.cos(degree) + centerY;
|
||
|
|
a.nodeTo.setPos(newPos, 'end');
|
||
|
|
usedNodes[a.nodeTo.id] = a.nodeTo;
|
||
|
|
|
||
|
|
radial(a.nodeTo, level + 1, degree);
|
||
|
|
degree += angleTemp;
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
radial(centerNode, 1, 0);
|
||
|
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
var radial = function (input) {
|
||
|
|
if (column == numColumns) {
|
||
|
|
column = 0;
|
||
|
|
row += 1;
|
||
|
|
}
|
||
|
|
var newPos = new $jit.Complex();
|
||
|
|
newPos.x = column*GRIDSPACE;
|
||
|
|
newPos.y = row*GRIDSPACE;
|
||
|
|
n.setPos(newPos, 'end');
|
||
|
|
|
||
|
|
});
|
||
|
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);*/
|
||
|
|
} else if (layout == 'center_viewport') {
|
||
|
|
|
||
|
|
var lowX = 0,
|
||
|
|
lowY = 0,
|
||
|
|
highX = 0,
|
||
|
|
highY = 0;
|
||
|
|
var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX;
|
||
|
|
var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY;
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
if (n.id === 1) {
|
||
|
|
lowX = n.getPos().x;
|
||
|
|
lowY = n.getPos().y;
|
||
|
|
highX = n.getPos().x;
|
||
|
|
highY = n.getPos().y;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (n.getPos().x < lowX) lowX = n.getPos().x;
|
||
|
|
if (n.getPos().y < lowY) lowY = n.getPos().y;
|
||
|
|
if (n.getPos().x > highX) highX = n.getPos().x;
|
||
|
|
if (n.getPos().y > highY) highY = n.getPos().y;
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
console.log(lowX, lowY, highX, highY);
|
||
|
|
var newOriginX = (lowX + highX) / 2;
|
||
|
|
var newOriginY = (lowY + highY) / 2;
|
||
|
|
console.log("new offset: (before translate)", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY);
|
||
|
|
console.log("new offset: (before translate)", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY);
|
||
|
|
Metamaps.Visualize.mGraph.canvas.translate(newOriginX - oldOriginX, newOriginY - oldOriginY);
|
||
|
|
console.log("ideal offset: ", newOriginX, newOriginY);
|
||
|
|
console.log("new offset: ", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY);
|
||
|
|
console.log("new offset: ", Metamaps.Visualize.mGraph.canvas.translateOffsetX, Metamaps.Visualize.mGraph.canvas.translateOffsetY);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
} else alert('please call function with a valid layout dammit!');
|
||
|
|
},
|
||
|
|
loadSavedLayout: function (id) {
|
||
|
|
Metamaps.Visualize.computePositions();
|
||
|
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
},
|
||
|
|
saveNewLayout: function () {
|
||
|
|
var layoutName = prompt("Enter a name for your layout...");
|
||
|
|
if (layoutName === null) return;
|
||
|
|
var layoutObject = {};
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
layoutObject[n.data.$id] = {
|
||
|
|
x: n.getPos().x,
|
||
|
|
y: n.getPos().y
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
function addMetadata(e) {
|
||
|
|
// add the 'expressed In English' field
|
||
|
|
Metamaps.Field.createFieldInDatabase("topic", e.id, 1, layoutName);
|
||
|
|
// add the 'is a' synapses
|
||
|
|
Metamaps.Synapse.createSynapseInDatabase(e.id, 2, 1087, false);
|
||
|
|
// add the 'saved coordinates' field
|
||
|
|
Metamaps.Field.createFieldInDatabase("topic", e.id, 1088, JSON.stringify(layoutObject));
|
||
|
|
// add the 'is layout for' synapses
|
||
|
|
Metamaps.Synapse.createSynapseInDatabase(e.id, 1089, Metamaps.Active.Topic.id, false);
|
||
|
|
$('#saveLayout').text('Saved!');
|
||
|
|
setTimeout(function () {
|
||
|
|
$('#saveLayout').text('Save New Layout')
|
||
|
|
}, 1500);
|
||
|
|
Metamaps.Topic.get(e.id, function (ee) {
|
||
|
|
// add the new layout to the list
|
||
|
|
$('#selectSavedLayout').append(Metamaps.Util.generateOptionsList([ee]));
|
||
|
|
// switch to the new layout
|
||
|
|
$('#selectSavedLayout').val(ee.id);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// call create topic which will run 'addMetadata' when it works
|
||
|
|
Metamaps.Topic.createTopicInDatabase(addMetadata, []);
|
||
|
|
},
|
||
|
|
saveCurrentLayout: function () {
|
||
|
|
var id = $('#selectSavedLayout option:selected').val();
|
||
|
|
if (id != "") {
|
||
|
|
Metamaps.Topic.get(id, function (e) {
|
||
|
|
// this is where the actual saved coordinates are
|
||
|
|
var fieldID = e[1088][2][0];
|
||
|
|
var layoutObject = {};
|
||
|
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||
|
|
layoutObject[n.data.$id] = {
|
||
|
|
x: n.getPos().x,
|
||
|
|
y: n.getPos().y
|
||
|
|
};
|
||
|
|
});
|
||
|
|
// update the 'saved coordinates' field
|
||
|
|
Metamaps.Field.updateFieldInDatabase(fieldID, JSON.stringify(layoutObject));
|
||
|
|
Metamaps.Topic.refresh(e.id);
|
||
|
|
$('#updateLayout').text('Updated!');
|
||
|
|
setTimeout(function () {
|
||
|
|
$('#updateLayout').text('Overwrite Layout')
|
||
|
|
}, 1500);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Selected = {
|
||
|
|
Topics: [],
|
||
|
|
Synapses: []
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Synapse = {
|
||
|
|
// this function is to retrieve a synapse JSON object from the database
|
||
|
|
// @param id = the id of the synapse to retrieve
|
||
|
|
get: function (id, callback) {
|
||
|
|
// if the desired topic is not yet in the local topic repository, fetch it
|
||
|
|
if (Metamaps.Synapses.get(id) == undefined) {
|
||
|
|
if (!callback) {
|
||
|
|
var e = $.ajax({
|
||
|
|
url: "/synapses/" + id + ".json",
|
||
|
|
async: false
|
||
|
|
});
|
||
|
|
Metamaps.Synapses.add($.parseJSON(e.responseText));
|
||
|
|
return Metamaps.Synapses.get(id);
|
||
|
|
} else {
|
||
|
|
return $.ajax({
|
||
|
|
url: "/synapses/" + id + ".json",
|
||
|
|
success: function (data) {
|
||
|
|
Metamaps.Synapses.add(data);
|
||
|
|
callback(Metamaps.Synapses.get(id));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (!callback) {
|
||
|
|
return Metamaps.Synapses.get(id);
|
||
|
|
} else {
|
||
|
|
return callback(Metamaps.Synapses.get(id));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/*
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
|
||
|
|
var self = Metamaps.Synapse;
|
||
|
|
|
||
|
|
var edgeOnViz;
|
||
|
|
|
||
|
|
var newedge = mapping.createEdge();
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data);
|
||
|
|
edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id);
|
||
|
|
mapping.set('edge', edgeOnViz);
|
||
|
|
mapping.updateEdge(); // links the topic and the mapping to the node
|
||
|
|
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotLine(edgeOnViz, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
Metamaps.Control.selectEdge(edgeOnViz);
|
||
|
|
|
||
|
|
if (!Metamaps.Settings.sandbox && createNewInDB) {
|
||
|
|
if (synapse.isNew()) {
|
||
|
|
synapse.save(null, {
|
||
|
|
success: function (synapseModel, response) {
|
||
|
|
synapseModel.updateMappings();
|
||
|
|
if (Metamaps.Active.Map) {
|
||
|
|
mapping.save();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (model, response) {
|
||
|
|
console.log('error saving synapse to database');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else if (!synapse.isNew() && Metamaps.Active.Map) {
|
||
|
|
mapping.save();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
createSynapseLocally: function () {
|
||
|
|
var self = Metamaps.Synapse,
|
||
|
|
topic1,
|
||
|
|
topic2,
|
||
|
|
node1,
|
||
|
|
node2,
|
||
|
|
synapse,
|
||
|
|
mapping;
|
||
|
|
|
||
|
|
//for each node in this array we will create a synapse going to the position2 node.
|
||
|
|
var synapsesToCreate = [];
|
||
|
|
|
||
|
|
node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
|
||
|
|
topic2 = node2.getData('topic');
|
||
|
|
|
||
|
|
var len = Metamaps.Selected.Topics.length;
|
||
|
|
if (len == 0) {
|
||
|
|
synapsesToCreate[0] = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
|
||
|
|
} else if (len > 0) {
|
||
|
|
synapsesToCreate = Metamaps.Selected.Topics;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < synapsesToCreate.length; i++) {
|
||
|
|
node1 = synapsesToCreate[i];
|
||
|
|
topic1 = node1.getData('topic');
|
||
|
|
synapse = new Metamaps.Backbone.Synapse({
|
||
|
|
desc: Metamaps.Create.newSynapse.description,
|
||
|
|
node1_id: topic1.isNew() ? topic1.cid : topic1.id,
|
||
|
|
node2_id: topic2.isNew() ? topic2.cid : topic2.id,
|
||
|
|
});
|
||
|
|
Metamaps.Synapses.add(synapse);
|
||
|
|
|
||
|
|
mapping = new Metamaps.Backbone.Mapping({
|
||
|
|
category: "Synapse",
|
||
|
|
synapse_id: synapse.cid
|
||
|
|
});
|
||
|
|
Metamaps.Mappings.add(mapping);
|
||
|
|
|
||
|
|
// this function also includes the creation of the synapse in the database
|
||
|
|
self.renderSynapse(mapping, synapse, node1, node2, true);
|
||
|
|
} // for each in synapsesToCreate
|
||
|
|
|
||
|
|
Metamaps.Create.newSynapse.hide();
|
||
|
|
},
|
||
|
|
getSynapseFromAutocomplete: function (id) {
|
||
|
|
var self = Metamaps.Synapse;
|
||
|
|
|
||
|
|
Metamaps.Create.newSynapse.hide();
|
||
|
|
|
||
|
|
var synapse = self.get(id);
|
||
|
|
|
||
|
|
var mapping = new Metamaps.Backbone.Mapping({
|
||
|
|
category: "Synapse",
|
||
|
|
synapse_id: synapse.id
|
||
|
|
});
|
||
|
|
Metamaps.Mappings.add(mapping);
|
||
|
|
|
||
|
|
self.renderSynapse(mapping, synapse, false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Synapses = {};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.SynapseCard = {
|
||
|
|
openSynapseCard: null
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Touch = {
|
||
|
|
touchPos: null, // this stores the x and y values of a current touch event
|
||
|
|
touchDragNode: null // this stores a reference to a JIT node that is being dragged
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Util = {
|
||
|
|
// helper function to determine how many lines are needed
|
||
|
|
// Line Splitter Function
|
||
|
|
// copyright Stephen Chapman, 19th April 2006
|
||
|
|
// you may copy this code but please keep the copyright notice as well
|
||
|
|
splitLine: function (st, n) {
|
||
|
|
var b = '';
|
||
|
|
var s = st;
|
||
|
|
while (s.length > n) {
|
||
|
|
var c = s.substring(0, n);
|
||
|
|
var d = c.lastIndexOf(' ');
|
||
|
|
var e = c.lastIndexOf('\n');
|
||
|
|
if (e != -1) d = e;
|
||
|
|
if (d == -1) d = n;
|
||
|
|
b += c.substring(0, d) + '\n';
|
||
|
|
s = s.substring(d + 1);
|
||
|
|
}
|
||
|
|
return b + s;
|
||
|
|
},
|
||
|
|
decodeEntities: function (desc) {
|
||
|
|
var str, temp = document.createElement('p');
|
||
|
|
temp.innerHTML = desc; //browser handles the topics
|
||
|
|
str = temp.textContent || temp.innerText;
|
||
|
|
temp = null; //delete the element;
|
||
|
|
return str;
|
||
|
|
}, //decodeEntities
|
||
|
|
getDistance: function (p1, p2) {
|
||
|
|
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
|
||
|
|
},
|
||
|
|
generateOptionsList: function (data) {
|
||
|
|
var newlist = "";
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
newlist = newlist + '<option value="' + data[i]['id'] + '">' + data[i]['1'][1] + '</option>';
|
||
|
|
}
|
||
|
|
return newlist;
|
||
|
|
},
|
||
|
|
checkURLisImage: function (url) {
|
||
|
|
// when the page reloads the following regular expression will be screwed up
|
||
|
|
// please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
|
||
|
|
return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
|
||
|
|
},
|
||
|
|
checkURLisYoutubeVideo: function (url) {
|
||
|
|
return (url.match(/^http:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Metamaps.Visualize = {
|
||
|
|
mGraph: {}, // a reference to the graph object.
|
||
|
|
cameraPosition: null, // stores the camera position when using a 3D visualization
|
||
|
|
type: "ForceDirected", // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
|
||
|
|
savedLayout: true, // indicates whether the map has a saved layout or not
|
||
|
|
loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
|
||
|
|
target: null, // the selector representing the location to render the graph
|
||
|
|
init: function () {
|
||
|
|
var self = Metamaps.Visualize;
|
||
|
|
// disable awkward dragging of the canvas element that would sometimes happen
|
||
|
|
$('#infovis-canvas').on('dragstart', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
// prevent touch events on the canvas from default behaviour
|
||
|
|
$("#infovis-canvas").bind('touchstart', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
self.mGraph.events.touched = true;
|
||
|
|
});
|
||
|
|
|
||
|
|
// prevent touch events on the canvas from default behaviour
|
||
|
|
$("#infovis-canvas").bind('touchmove', function (event) {
|
||
|
|
//Metamaps.JIT.touchPanZoomHandler(event);
|
||
|
|
});
|
||
|
|
|
||
|
|
// prevent touch events on the canvas from default behaviour
|
||
|
|
$("#infovis-canvas").bind('touchend touchcancel', function (event) {
|
||
|
|
lastDist = 0;
|
||
|
|
if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard();
|
||
|
|
self.mGraph.events.touched = self.mGraph.events.touchMoved = false;
|
||
|
|
Metamaps.Touch.touchDragNode = false;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
render: function (targetID, vizData) {
|
||
|
|
var self = Metamaps.Visualize;
|
||
|
|
self.mGraph = {};
|
||
|
|
self.target = targetID;
|
||
|
|
self.__buildGraph(vizData);
|
||
|
|
},
|
||
|
|
computePositions: function () {
|
||
|
|
var self = Metamaps.Visualize;
|
||
|
|
if (self.type == "RGraph") {
|
||
|
|
self.mGraph.graph.eachNode(function (n) {
|
||
|
|
var pos = n.getPos();
|
||
|
|
pos.setc(-200, -200);
|
||
|
|
});
|
||
|
|
self.mGraph.compute('end');
|
||
|
|
} else if (self.type == "ForceDirected" && self.savedLayout) {
|
||
|
|
var startPos, endPos, mapping;
|
||
|
|
|
||
|
|
self.mGraph.graph.eachNode(function (n) {
|
||
|
|
mapping = Metamaps.Mappings.get(n.id);
|
||
|
|
mapping.set('node', n);
|
||
|
|
mapping.updateNode();
|
||
|
|
|
||
|
|
startPos = new $jit.Complex(0, 0);
|
||
|
|
endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
|
||
|
|
n.setPos(startPos, 'start');
|
||
|
|
n.setPos(endPos, 'end');
|
||
|
|
});
|
||
|
|
} else if (self.type == "ForceDirected3D" || !self.savedLayout) {
|
||
|
|
self.mGraph.compute();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* __buildGraph does the heavy lifting of creating the engine that renders the graph with the properties we desire
|
||
|
|
*
|
||
|
|
* @param vizData a json structure containing the data to be rendered.
|
||
|
|
*/
|
||
|
|
__buildGraph: function (vizData) {
|
||
|
|
var self = Metamaps.Visualize;
|
||
|
|
|
||
|
|
// normally this will be true, and will enter into this first scenario
|
||
|
|
if (!Metamaps.Settings.embed) {
|
||
|
|
if (self.type == "RGraph") {
|
||
|
|
$jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.RGraph.nodeSettings);
|
||
|
|
$jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.RGraph.edgeSettings);
|
||
|
|
self.mGraph = new $jit.RGraph(Metamaps.JIT.RGraph.graphSettings);
|
||
|
|
} else if (self.type == "ForceDirected") {
|
||
|
|
$jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
|
||
|
|
$jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
|
||
|
|
self.mGraph = new $jit.ForceDirected(Metamaps.JIT.ForceDirected.graphSettings);
|
||
|
|
} else if (self.type == "ForceDirected3D") {
|
||
|
|
// init ForceDirected3D
|
||
|
|
self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings);
|
||
|
|
self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
|
||
|
|
}
|
||
|
|
} else { // in the case where these visualizations are to be embedded in other sites TODO
|
||
|
|
if (self.type == "RGraph") {
|
||
|
|
$jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.RGraph.embed.nodeSettings);
|
||
|
|
$jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.RGraph.embed.edgeSettings);
|
||
|
|
self.mGraph = new $jit.RGraph(Metamaps.JIT.RGraph.embed.graphSettings);
|
||
|
|
} else if (self.type == "ForceDirected") {
|
||
|
|
$jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.embed.nodeSettings);
|
||
|
|
$jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.embed.edgeSettings);
|
||
|
|
self.mGraph = new $jit.ForceDirected(Metamaps.JIT.ForceDirected.embed.graphSettings);
|
||
|
|
} else if (self.type == "ForceDirected3D") {
|
||
|
|
// init ForceDirected3D
|
||
|
|
self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.embed.graphSettings);
|
||
|
|
self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// load JSON data, if it's not empty
|
||
|
|
if (!self.loadLater) {
|
||
|
|
//load JSON data.
|
||
|
|
self.mGraph.loadJSON(vizData);
|
||
|
|
//compute positions and plot.
|
||
|
|
self.computePositions();
|
||
|
|
if (self.type == "RGraph") {
|
||
|
|
self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate);
|
||
|
|
} else if (self.type == "ForceDirected" && self.savedLayout) {
|
||
|
|
return Metamaps.Organize.loadSavedLayout();
|
||
|
|
//self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
||
|
|
} else if (self.type == "ForceDirected3D" || !self.savedLayout) {
|
||
|
|
self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
Metamaps.Realtime = {
|
||
|
|
// this is for the heroku staging environment
|
||
|
|
//Metamaps.Realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
|
||
|
|
// this is for metamaps.cc
|
||
|
|
//Metamaps.Realtime.socket = io.connect('http://metamaps.cc:5001');
|
||
|
|
// this is for localhost development
|
||
|
|
//Metamaps.Realtime.socket = io.connect('http://localhost:5001');
|
||
|
|
socket: null,
|
||
|
|
notifyTimeOut: null,
|
||
|
|
init: function () {
|
||
|
|
var mapperm = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
|
||
|
|
|
||
|
|
if (mapperm) {
|
||
|
|
Metamaps.Realtime.socket = io.connect('http://localhost:5001');
|
||
|
|
Metamaps.Realtime.socket.on('connect', function () {
|
||
|
|
console.log('socket connected');
|
||
|
|
Metamaps.Realtime.setupSocket();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
notifyUser: function (message) {
|
||
|
|
if ($('.notice.metamaps').length == 0) {
|
||
|
|
$('body').prepend('<div class="notice metamaps" />');
|
||
|
|
}
|
||
|
|
$('.notice.metamaps').hide().html(message).fadeIn('fast');
|
||
|
|
|
||
|
|
clearTimeout(Metamaps.Realtime.notifyTimeOut);
|
||
|
|
Metamaps.Realtime.notifyTimeOut = setTimeout(function () {
|
||
|
|
$('.notice.metamaps').fadeOut('fast');
|
||
|
|
}, 8000);
|
||
|
|
},
|
||
|
|
setupSocket: function () {
|
||
|
|
var socket = Metamaps.Realtime.socket;
|
||
|
|
|
||
|
|
socket.emit('newMapperNotify', {
|
||
|
|
userid: userid,
|
||
|
|
username: username,
|
||
|
|
mapid: Metamaps.Active.Map.id
|
||
|
|
});
|
||
|
|
|
||
|
|
// if you're the 'new guy' update your list with who's already online
|
||
|
|
socket.on(userid + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', function (data) {
|
||
|
|
// data.userid
|
||
|
|
// data.username
|
||
|
|
// data.userrealtime
|
||
|
|
|
||
|
|
MetamapsModel.mappersOnMap[data.userid] = {
|
||
|
|
name: data.username,
|
||
|
|
realtime: data.userrealtime
|
||
|
|
};
|
||
|
|
|
||
|
|
var onOff = data.userrealtime ? "On" : "Off";
|
||
|
|
var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRt' + onOff + '">' + data.username + '</li>';
|
||
|
|
$('#mapper' + data.userid).remove();
|
||
|
|
$('.realtimeMapperList ul').append(mapperListItem);
|
||
|
|
});
|
||
|
|
|
||
|
|
// receive word that there's a new mapper on the map
|
||
|
|
socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', function (data) {
|
||
|
|
// data.userid
|
||
|
|
// data.username
|
||
|
|
|
||
|
|
MetamapsModel.mappersOnMap[data.userid] = {
|
||
|
|
name: data.username,
|
||
|
|
realtime: false
|
||
|
|
};
|
||
|
|
|
||
|
|
var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOff">' + data.username + '</li>';
|
||
|
|
$('#mapper' + data.userid).remove();
|
||
|
|
$('.realtimeMapperList ul').append(mapperListItem);
|
||
|
|
|
||
|
|
Metamaps.Realtime.notifyUser(data.username + ' just joined the map');
|
||
|
|
|
||
|
|
// send this new mapper back your details, and the awareness that you've loaded the map
|
||
|
|
var update = {
|
||
|
|
userToNotify: data.userid,
|
||
|
|
username: username,
|
||
|
|
userid: userid,
|
||
|
|
userrealtime: goRealtime,
|
||
|
|
mapid: Metamaps.Active.Map.id
|
||
|
|
};
|
||
|
|
socket.emit('updateNewMapperList', update);
|
||
|
|
});
|
||
|
|
|
||
|
|
// receive word that a mapper left the map
|
||
|
|
socket.on('maps-' + Metamaps.Active.Map.id + '-lostmapper', function (data) {
|
||
|
|
// data.userid
|
||
|
|
// data.username
|
||
|
|
|
||
|
|
delete MetamapsModel.mappersOnMap[data.userid];
|
||
|
|
|
||
|
|
$('#mapper' + data.userid).remove();
|
||
|
|
|
||
|
|
Metamaps.Realtime.notifyUser(data.username + ' just left the map');
|
||
|
|
});
|
||
|
|
|
||
|
|
// receive word that there's a mapper turned on realtime
|
||
|
|
socket.on('maps-' + Metamaps.Active.Map.id + '-newrealtime', function (data) {
|
||
|
|
// data.userid
|
||
|
|
// data.username
|
||
|
|
|
||
|
|
MetamapsModel.mappersOnMap[data.userid].realtime = true;
|
||
|
|
|
||
|
|
$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
|
||
|
|
|
||
|
|
Metamaps.Realtime.notifyUser(data.username + ' just turned on realtime');
|
||
|
|
});
|
||
|
|
|
||
|
|
// receive word that there's a mapper turned on realtime
|
||
|
|
socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', function (data) {
|
||
|
|
// data.userid
|
||
|
|
// data.username
|
||
|
|
|
||
|
|
MetamapsModel.mappersOnMap[data.userid].realtime = false;
|
||
|
|
|
||
|
|
$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
|
||
|
|
|
||
|
|
Metamaps.Realtime.notifyUser(data.username + ' just turned off realtime');
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('maps-' + Metamaps.Active.Map.id, function (data) {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//as long as you weren't the origin of the changes, update your map
|
||
|
|
if (data.origin != userid && goRealtime) {
|
||
|
|
if (data.resource == 'Topic') {
|
||
|
|
topic = $.parseJSON(data.obj);
|
||
|
|
|
||
|
|
if (data.action == 'create') {
|
||
|
|
Metamaps.Realtime.addTopicToMap(topic);
|
||
|
|
} else if (data.action == 'update' && Metamaps.Visualize.mGraph.graph.getNode(topic.id) != 'undefined') {
|
||
|
|
Metamaps.Realtime.updateTopicOnMap(topic);
|
||
|
|
} else if (data.action == 'destroy' && Metamaps.Visualize.mGraph.graph.getNode(topic.id) != 'undefined') {
|
||
|
|
hideNode(topic.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
return;
|
||
|
|
} else if (data.resource == 'Synapse') {
|
||
|
|
synapse = $.parseJSON(data.obj);
|
||
|
|
|
||
|
|
if (data.action == 'create') {
|
||
|
|
Metamaps.Realtime.addSynapseToMap(synapse);
|
||
|
|
} else if (data.action == 'update' &&
|
||
|
|
Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
|
||
|
|
Metamaps.Realtime.updateSynapseOnMap(synapse);
|
||
|
|
} else if (data.action == 'destroy' &&
|
||
|
|
Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']) != 'undefined') {
|
||
|
|
var edge = Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction['0'], synapse.data.$direction['1']);
|
||
|
|
hideEdge(edge);
|
||
|
|
}
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
sendRealtimeOn: function () {
|
||
|
|
// send this new mapper back your details, and the awareness that you're online
|
||
|
|
var update = {
|
||
|
|
username: username,
|
||
|
|
userid: userid,
|
||
|
|
mapid: Metamaps.Active.Map.id
|
||
|
|
};
|
||
|
|
Metamaps.Realtime.socket.emit('notifyStartRealtime', update);
|
||
|
|
},
|
||
|
|
sendRealtimeOff: function () {
|
||
|
|
// send this new mapper back your details, and the awareness that you're online
|
||
|
|
var update = {
|
||
|
|
username: username,
|
||
|
|
userid: userid,
|
||
|
|
mapid: Metamaps.Active.Map.id
|
||
|
|
};
|
||
|
|
Metamaps.Realtime.socket.emit('notifyStopRealtime', update);
|
||
|
|
},
|
||
|
|
addTopicToMap: function (topic) {
|
||
|
|
var newPos, tempForT;
|
||
|
|
Metamaps.Visualize.mGraph.graph.addNode(topic);
|
||
|
|
tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id);
|
||
|
|
tempForT.setData('dim', 1, 'start');
|
||
|
|
tempForT.setData('dim', 25, 'end');
|
||
|
|
newPos = new $jit.Complex();
|
||
|
|
newPos.x = tempForT.data.$xloc;
|
||
|
|
newPos.y = tempForT.data.$yloc;
|
||
|
|
tempForT.setPos(newPos, 'start');
|
||
|
|
tempForT.setPos(newPos, 'current');
|
||
|
|
tempForT.setPos(newPos, 'end');
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotNode(tempForT, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
return Metamaps.Visualize.mGraph.labels.plotLabel(Metamaps.Visualize.mGraph.canvas, tempForT, Metamaps.Visualize.mGraph.config);
|
||
|
|
},
|
||
|
|
updateTopicOnMap: function (topic) {
|
||
|
|
var newPos, tempForT;
|
||
|
|
tempForT = Metamaps.Visualize.mGraph.graph.getNode(topic.id);
|
||
|
|
tempForT.data = topic.data;
|
||
|
|
tempForT.name = topic.name;
|
||
|
|
if (MetamapsModel.showcardInUse === topic.id) {
|
||
|
|
populateShowCard(tempForT);
|
||
|
|
}
|
||
|
|
newPos = new $jit.Complex();
|
||
|
|
newPos.x = tempForT.data.$xloc;
|
||
|
|
newPos.y = tempForT.data.$yloc;
|
||
|
|
tempForT.setPos(newPos, 'start');
|
||
|
|
tempForT.setPos(newPos, 'current');
|
||
|
|
tempForT.setPos(newPos, 'end');
|
||
|
|
return Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
|
||
|
|
transition: $jit.Trans.Quad.easeInOut,
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
},
|
||
|
|
addSynapseToMap: function (synapse) {
|
||
|
|
var Node1, Node2, tempForS;
|
||
|
|
Node1 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[0]);
|
||
|
|
Node2 = Metamaps.Visualize.mGraph.graph.getNode(synapse.data.$direction[1]);
|
||
|
|
Metamaps.Visualize.mGraph.graph.addAdjacence(Node1, Node2, {});
|
||
|
|
tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(Node1.id, Node2.id);
|
||
|
|
tempForS.setDataset('start', {
|
||
|
|
lineWidth: 0.4
|
||
|
|
});
|
||
|
|
tempForS.setDataset('end', {
|
||
|
|
lineWidth: 2
|
||
|
|
});
|
||
|
|
tempForS.data = synapse.data;
|
||
|
|
Metamaps.Visualize.mGraph.fx.plotLine(tempForS, Metamaps.Visualize.mGraph.canvas);
|
||
|
|
return Metamaps.Visualize.mGraph.fx.animate({
|
||
|
|
modes: ['linear', 'node-property:dim', 'edge-property:lineWidth'],
|
||
|
|
transition: $jit.Trans.Quad.easeInOut,
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
},
|
||
|
|
updateSynapseOnMap: function (synapse) {
|
||
|
|
var k, tempForS, v, wasShowDesc, _ref;
|
||
|
|
tempForS = Metamaps.Visualize.mGraph.graph.getAdjacence(synapse.data.$direction[0], synapse.data.$direction[1]);
|
||
|
|
wasShowDesc = tempForS.data.$showDesc;
|
||
|
|
_ref = synapse.data;
|
||
|
|
for (k in _ref) {
|
||
|
|
v = _ref[k];
|
||
|
|
tempForS.data[k] = v;
|
||
|
|
}
|
||
|
|
tempForS.data.$showDesc = wasShowDesc;
|
||
|
|
if (MetamapsModel.edgecardInUse === synapse.data.$id) {
|
||
|
|
editEdge(tempForS, false);
|
||
|
|
}
|
||
|
|
return Metamaps.Visualize.mGraph.plot();
|
||
|
|
}
|
||
|
|
};
|