diff --git a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js index 3e3acd36..33a1d5e0 100644 --- a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js +++ b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js @@ -82,8 +82,13 @@ Metamaps.GlobalUI = { $('.alert.metamaps').delay(10000).fadeOut('fast'); // initialize global backbone models and collections - Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper); - Metamaps.Maps = new Metamaps.Backbone.MapsCollection(); + if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper); + Metamaps.Mappers = new Metamaps.Backbone.MapperCollection([Metamaps.Active.Mapper]); + Metamaps.Maps = {}; + Metamps.Maps.Mine = new Metamaps.Backbone.MapsCollection(); + Metamps.Maps.Featured = new Metamaps.Backbone.MapsCollection(); + Metamps.Maps.Active = new Metamaps.Backbone.MapsCollection(); + Metamps.Maps.New = new Metamaps.Backbone.MapsCollection(); }, openLightbox: function (which) { var self = Metamaps.GlobalUI; diff --git a/app/assets/javascripts/metamaps/Metamaps.JIT.js b/app/assets/javascripts/metamaps/Metamaps.JIT.js index 8c6cb11e..41ff23ba 100644 --- a/app/assets/javascripts/metamaps/Metamaps.JIT.js +++ b/app/assets/javascripts/metamaps/Metamaps.JIT.js @@ -8,6 +8,10 @@ Metamaps.JIT = { var self = Metamaps.JIT; self.prepareVizData(); + $(".zoomIn").click(self.zoomIn); + $(".zoomOut").click(self.zoomOut); + $(".centerMap").click(self.centerMap); + $(".zoomExtents").click(self.zoomExtents); }, /** * convert our topic JSON into something JIT can use @@ -307,7 +311,7 @@ Metamaps.JIT = { if (Metamaps.Mouse.boxStartCoordinates) { Metamaps.Visualize.mGraph.busy = false; Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - Metamaps.JIT.selectNodesWithBox(e); + Metamaps.JIT.selectWithBox(e); return; } @@ -331,7 +335,7 @@ Metamaps.JIT = { if (Metamaps.Mouse.boxStartCoordinates) { Metamaps.Visualize.mGraph.busy = false; Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); - Metamaps.JIT.selectNodesWithBox(e); + Metamaps.JIT.selectWithBox(e); return; } @@ -897,7 +901,7 @@ Metamaps.JIT = { } return 'nothing'; //case 4? }, // handleSelectionBeforeDragging - selectNodesWithBox: function (e) { + selectWithBox: function (e) { var sX = Metamaps.Mouse.boxStartCoordinates.x, sY = Metamaps.Mouse.boxStartCoordinates.y, @@ -1025,7 +1029,7 @@ Metamaps.JIT = { Metamaps.Mouse.boxStartCoordinates = false; Metamaps.Mouse.boxEndCoordinates = false; Metamaps.Visualize.mGraph.plot(); - }, // selectNodesWithBox + }, // selectWithBox drawSelectBox: function (eventInfo, e) { var ctx = Metamaps.Visualize.mGraph.canvas.getCtx(); @@ -1425,5 +1429,91 @@ Metamaps.JIT = { y: posChild.y }, 13, inv, canvas, 0.3); } - } //renderEdgeArrows + }, //renderEdgeArrows + zoomIn: function () { + Metamaps.Visualize.mGraph.canvas.scale(1.25,1.25); + }, + zoomOut: function () { + Metamaps.Visualize.mGraph.canvas.scale(0.8,0.8); + }, + centerMap: function () { + var canvas = Metamaps.Visualize.mGraph.canvas; + var offsetScale = canvas.scaleOffsetX; + + canvas.scale(1/offsetScale,1/offsetScale); + + var offsetX = canvas.translateOffsetX; + var offsetY = canvas.translateOffsetY; + + canvas.translate(-1*offsetX,-1*offsetY); + }, + zoomExtents: function () { + Metamaps.JIT.centerMap(); + var height = $(document).height(), + width = $(document).width(), + maxX, minX, maxY, minY, counter = 0; + + var nodes = Metamaps.Visualize.mGraph.graph; + + + if(Object.keys(nodes).length >1){ + + + nodes.eachNode(function (n) { + var x = n.pos.x, + y = n.pos.y; + + if (counter == 0){ + maxX = x; + minX = x; + maxY = y; + minY = y; + } + + maxX = Math.max(x,maxX); + maxY = Math.max(y,maxY); + minX = Math.min(x,minX); + minY = Math.min(y,minY); + + counter++; + }); + + var spanX = maxX - minX; + var spanY = maxY - minY; + var ratioX = spanX / width; + var ratioY = spanY / height; + + var newRatio = Math.max(ratioX,ratioY); + + var canvas = Metamaps.Visualize.mGraph.canvas; + + canvas.scale(1/newRatio*0.9,1/newRatio*0.9); + + counter = 0; + + nodes.eachNode(function (n) { + var x = n.pos.x, + y = n.pos.y; + + if (counter == 0){ + maxX = x; + minX = x; + maxY = y; + minY = y; + } + + maxX = Math.max(x,maxX); + maxY = Math.max(y,maxY); + minX = Math.min(x,minX); + minY = Math.min(y,minY); + + counter++; + }); + + var cogX = (maxX + minX)/2; + var cogY = (maxY + minY)/2; + + canvas.translate(-1* cogX, -1* cogY); + } + } }; \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/Metamaps.Router.js b/app/assets/javascripts/metamaps/Metamaps.Router.js index 6fd212c4..6e989d3b 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Router.js +++ b/app/assets/javascripts/metamaps/Metamaps.Router.js @@ -5,18 +5,29 @@ "explore/:section": "explore", // #explore/active "maps/:id": "maps" // #maps/7 }, + home: function () { + + document.title = 'My Maps | Metamaps'; + $('#cards').show(); + }, explore: function (section) { - console.log(section); + + var capitalize = section.charAt(0).toUpperCase() + section.slice(1); + + document.title = 'Explore ' + capitalize + ' Maps | Metamaps'; + //$('#cards').hide(); }, maps: function (id) { - console.log(id); + + document.title = 'Map ' + id + ' | Metamaps'; + $('#cards').hide(); } }); Metamaps.Router = new Router(); Metamaps.Router.init = function () { - /*Backbone.history.start({ + Backbone.history.start({ pushState: true, - root: '' + root: '/' }); console.log('router started'); $(document).on("click", "a:not([data-bypass])", function (evt) { @@ -25,11 +36,13 @@ attr: $(this).attr("href") }; var root = location.protocol + "//" + location.host + Backbone.history.options.root; - + + if (href.prop && href.prop === root) href.attr = "" + if (href.prop && href.prop.slice(0, root.length) === root) { evt.preventDefault(); Backbone.history.navigate(href.attr, true); } - });*/ + }); } })(); diff --git a/app/assets/javascripts/metamaps/Metamaps.Views.js b/app/assets/javascripts/metamaps/Metamaps.Views.js new file mode 100644 index 00000000..396f6beb --- /dev/null +++ b/app/assets/javascripts/metamaps/Metamaps.Views.js @@ -0,0 +1,26 @@ +(function () { + Metamaps.Views = {}; + + Metamaps.Views.MapCard = Backbone.View.extend({ + + tagName: "div", + + className: "map", + + events: { + "click .icon": "open", + "click .button.edit": "openEditDialog", + "click .button.delete": "destroy" + }, + + initialize: function () { + this.listenTo(this.model, "change", this.render); + }, + + render: function () { + + } + + }); + +})(); \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index 6e12e97d..c9808092 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/app/assets/javascripts/metamaps/Metamaps.js @@ -1679,9 +1679,8 @@ Metamaps.Control = { }, 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.Topics.get(nodeid).destroy(); Metamaps.Control.hideNode(nodeid); }, removeSelectedNodes: function () { // refers to removing topics permanently from a map @@ -1700,11 +1699,10 @@ Metamaps.Control = { 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("mapping").id; if (mapperm) { Metamaps.Control.deselectNode(node); - Metamaps.Mappings.get(mappingid).destroy(); + node.getData('mapping').destroy(); Metamaps.Control.hideNode(nodeid); } }, @@ -2059,7 +2057,7 @@ Metamaps.Filter = { var addedSynapses = []; Metamaps.Synapses.each(function(synapse) { - if (newSynapsesList.indexOf(synapse.get('desc')) === -1) { + if (synapse.get('desc') && newSynapsesList.indexOf(synapse.get('desc')) === -1) { newSynapsesList.push(synapse.get('desc').toString()); } }); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 9d17ce88..d7b824bb 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -791,6 +791,47 @@ li.accountInvite span { width: 35px; height: 35px; } + +.zoomIn { + position: absolute; + bottom: 100px; + right: 20px; + z-index: 200; + width: 35px; + height: 35px; + background: blue; +} + +.zoomOut { + position: absolute; + bottom: 60px; + right: 20px; + z-index: 200; + width: 35px; + height: 35px; + background: blue; +} + +.centerMap { + position: absolute; + bottom: 140px; + right: 20px; + z-index: 200; + width: 35px; + height: 35px; + background: blue; +} + +.zoomExtents { + position: absolute; + bottom: 180px; + right: 20px; + z-index: 200; + width: 35px; + height: 35px; + background: blue; +} + .sidebarFilter.loggedout { right: 35px; } diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb index 2e2b5e25..ae6feadb 100644 --- a/app/controllers/maps_controller.rb +++ b/app/controllers/maps_controller.rb @@ -12,22 +12,22 @@ class MapsController < ApplicationController # GET /maps/mappers/:id def index - if request.path == "/maps" + if request.path == "/explore" redirect_to activemaps_url and return end @current = current_user @user = nil - if request.path =="/maps/active" + if request.path =="/explore/active" @maps = Map.order("updated_at DESC").limit(20) @request = "active" - elsif request.path =="/maps/featured" + elsif request.path =="/explore/featured" @maps = Map.order("name ASC").find_all_by_featured(true) @request = "featured" - elsif request.path == "/maps/new" + elsif request.path == "/explore/new" @maps = Map.order("created_at DESC").limit(20) @request = "new" diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index fc6b241f..85392e8c 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -4,7 +4,40 @@ #%>
- + + + +