added url for embedding maps

This commit is contained in:
Connor Turland 2013-02-19 09:44:43 -05:00
parent 1b29eb1eb3
commit 50bc2b53a9
9 changed files with 165 additions and 10 deletions

View file

@ -6,6 +6,7 @@
*/
var MetamapsModel = new Object();
MetamapsModel.embed = false;
MetamapsModel.selectedEdges = new Array();
MetamapsModel.showcardInUse = null;
MetamapsModel.lastCanvasClick = 0;

View file

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

View file

@ -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!");

View file

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

View file

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

View file

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

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

View file

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

View file

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