added url for embedding maps
This commit is contained in:
parent
1b29eb1eb3
commit
50bc2b53a9
9 changed files with 165 additions and 10 deletions
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
var MetamapsModel = new Object();
|
||||
MetamapsModel.embed = false;
|
||||
MetamapsModel.selectedEdges = new Array();
|
||||
MetamapsModel.showcardInUse = null;
|
||||
MetamapsModel.lastCanvasClick = 0;
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* Then if it's a centred graph additional settings are added.
|
||||
*/
|
||||
|
||||
function graphSettings(type) {
|
||||
function graphSettings(type, embed) {
|
||||
var t = {
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
|
@ -103,6 +103,10 @@ function graphSettings(type) {
|
|||
}
|
||||
};
|
||||
|
||||
if (embed) {
|
||||
t.Edge.type = 'customEdgeEmbed';
|
||||
}
|
||||
|
||||
if (type == "centered") {
|
||||
t.background = {
|
||||
CanvasStyles: {
|
||||
|
@ -247,7 +251,8 @@ var nodeSettings = {
|
|||
if (onCanvas) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, dim+3, 0, 2 * Math.PI, false);
|
||||
ctx.strokeStyle = 'white';
|
||||
if (! MetamapsModel.embed) ctx.strokeStyle = 'white';
|
||||
if (MetamapsModel.embed) ctx.strokeStyle = '#999';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
@ -337,6 +342,59 @@ var nodeSettings = {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
var edgeSettingsEmbed = {
|
||||
'customEdgeEmbed': {
|
||||
'render': 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
|
||||
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 = decodeEntities(desc);
|
||||
|
||||
//now adjust the label placement
|
||||
var ctx = canvas.getCtx();
|
||||
var radius = canvas.getSize();
|
||||
var x = parseInt((pos.x + posChild.x - (desc.length * 5)) /2);
|
||||
var y = parseInt((pos.y + posChild.y) /2);
|
||||
ctx.font = 'bold 14px arial';
|
||||
|
||||
//render background
|
||||
ctx.fillStyle = '#999';
|
||||
var margin = 5;
|
||||
var height = 14 + margin; //font size + margin
|
||||
var CURVE = height / 2; //offset for curvy corners
|
||||
var width = ctx.measureText(desc).width + 2 * margin - 2 * CURVE
|
||||
var labelX = x - margin + CURVE;
|
||||
var labelY = y - height + margin;
|
||||
ctx.fillRect(labelX, labelY, width, height);
|
||||
|
||||
//curvy corners woo - circles in place of last CURVE pixels of rect
|
||||
ctx.beginPath();
|
||||
ctx.arc(labelX, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
|
||||
ctx.arc(labelX + width, labelY + CURVE, CURVE, 0, 2 * Math.PI, false);
|
||||
ctx.fill();
|
||||
|
||||
//render text
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillText(desc, x, y);
|
||||
}
|
||||
}, '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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function onMouseMoveHandler(node, eventInfo, e) {
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
$jit.ForceDirected.Plot.NodeTypes.implement(nodeSettings);
|
||||
//implement an edge type
|
||||
$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettings);
|
||||
$jit.ForceDirected.Plot.EdgeTypes.implement(edgeSettingsEmbed);
|
||||
// end
|
||||
|
||||
// init custom node type
|
||||
|
@ -25,11 +26,14 @@ $jit.RGraph.Plot.NodeTypes.implement(nodeSettings);
|
|||
$jit.RGraph.Plot.EdgeTypes.implement(edgeSettings);
|
||||
// end
|
||||
|
||||
function initialize(type, loadLater){
|
||||
function initialize(type, loadLater, embed){
|
||||
|
||||
if (loadLater == null) {
|
||||
loadlater = false;
|
||||
}
|
||||
if (embed == null) {
|
||||
embed = false;
|
||||
}
|
||||
|
||||
viewMode = "graph";
|
||||
gType = type;
|
||||
|
@ -40,7 +44,7 @@ function initialize(type, loadLater){
|
|||
}
|
||||
else if ( type == "arranged" || type == "chaotic" ) {
|
||||
// init ForceDirected
|
||||
Mconsole = new $jit.ForceDirected(graphSettings(type));
|
||||
Mconsole = new $jit.ForceDirected(graphSettings(type, embed));
|
||||
}
|
||||
else {
|
||||
alert("You didn't specify a type!");
|
||||
|
|
|
@ -295,11 +295,19 @@ function selectEdge(edge) {
|
|||
var showDesc = edge.getData("showDesc");
|
||||
if (! showDesc) {
|
||||
edge.setData('showDesc', true, 'current');
|
||||
edge.setDataset('end', {
|
||||
lineWidth: 4,
|
||||
color: '#FFFFFF',
|
||||
alpha: 1
|
||||
});
|
||||
if ( ! MetamapsModel.embed) {
|
||||
edge.setDataset('end', {
|
||||
lineWidth: 4,
|
||||
color: '#FFFFFF',
|
||||
alpha: 1
|
||||
});
|
||||
} else if (MetamapsModel.embed) {
|
||||
edge.setDataset('end', {
|
||||
lineWidth: 4,
|
||||
color: '#999',
|
||||
alpha: 1
|
||||
});
|
||||
}
|
||||
Mconsole.fx.animate({
|
||||
modes: ['edge-property:lineWidth:color:alpha'],
|
||||
duration: 100
|
||||
|
|
|
@ -2,6 +2,10 @@
|
|||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
.white_bg {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.mapdata {
|
||||
color: #1A1;
|
||||
font-style: italic;
|
||||
|
|
|
@ -48,6 +48,24 @@ class MapsController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
# GET maps/:id/embed
|
||||
def embed
|
||||
|
||||
@current = current_user
|
||||
@map = Map.find(params[:id]).authorize_to_show(@current)
|
||||
|
||||
if not @map
|
||||
redirect_to root_url and return
|
||||
end
|
||||
|
||||
@mapjson = @map.self_as_json(@current).html_safe
|
||||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@map, @user) }
|
||||
format.json { respond_with(@mapjson) }
|
||||
end
|
||||
end
|
||||
|
||||
# GET maps/:id/json
|
||||
def json
|
||||
|
||||
|
|
61
app/views/maps/embed.html.erb
Normal file
61
app/views/maps/embed.html.erb
Normal file
|
@ -0,0 +1,61 @@
|
|||
<%#
|
||||
# @file
|
||||
# Code to display a map
|
||||
# /maps/:id
|
||||
#%>
|
||||
|
||||
<div class="headertop">
|
||||
<% if authenticated? %>
|
||||
<% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
|
||||
<button onclick="removeSelectedEdges();removeSelectedNodes();">Remove Selected From Map</button>
|
||||
<% end %>
|
||||
<button onclick="var r=confirm('Are you sure you want to permanently delete selected objects?!'); if (r == true) {deleteSelectedEdges();deleteSelectedNodes();}">Permanently Delete Selected</button>
|
||||
<% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
|
||||
<%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
|
||||
<%= form.hidden_field "coordinates", :value => "" %>
|
||||
<%= form.submit "Save Layout", class: "saveLayout", id: "saveLayout" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<div class="maps onMap white_bg" id="container">
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<% if authenticated? %>
|
||||
<%= render :partial => 'newtopic' %>
|
||||
<%= render :partial => 'newsynapse' %>
|
||||
<% end %>
|
||||
|
||||
<script>
|
||||
var dragged = 0;
|
||||
mapid = <%= @map.id %>;
|
||||
<% if (@map.permission == "commons" && authenticated?) || @map.user == user %>
|
||||
mapperm = true;
|
||||
<% end %>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
viewMode = "graph";
|
||||
json = <%= @mapjson %>;
|
||||
if (json.length > 0) {
|
||||
$(document).ready(function() {
|
||||
<% if (@map.arranged) %>
|
||||
initialize("arranged", false, true);
|
||||
<% else %>
|
||||
initialize("chaotic", false, true);
|
||||
<% end %>
|
||||
});
|
||||
}
|
||||
else {
|
||||
$(document).ready(function() {
|
||||
initialize("chaotic", true, true);
|
||||
});
|
||||
}
|
||||
MetamapsModel.embed = true;
|
||||
</script>
|
|
@ -2,9 +2,9 @@
|
|||
* @file
|
||||
* This javascript is returned and executed when you create a new node.
|
||||
*/
|
||||
$('#topic_name').autocomplete('disable');
|
||||
$('#new_topic').fadeOut('fast');
|
||||
$('#topic_name').attr('value','');
|
||||
$('#topic_name').autocomplete('disable');
|
||||
$('#topic_grabTopic').attr('value','null');
|
||||
$('#topic_addSynapse').attr('value','false');
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ ISSAD::Application.routes.draw do
|
|||
resources :maps do
|
||||
get :autocomplete_map_name, :on => :collection
|
||||
end
|
||||
match 'maps/:id/embed', to: 'maps#embed', via: :get, as: :embed
|
||||
match 'maps/:id/:format', to: 'maps#json', via: :get, as: :json
|
||||
|
||||
resources :users do
|
||||
|
|
Loading…
Reference in a new issue