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

Merge pull request #371 from Connoropolous/wip-MouseStuff

Browse source 
Changes to Mouse Functionality
This commit is contained in:
Connor Turland 2014-10-22 11:34:51 -04:00
commit 49c0af3add
4 changed files with 71 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/javascripts/src/JIT.js
View file

@ -2481,6 +2481,7 @@ Extras.Classes.Navigation = new Class({
}, },
onMouseDown: function(e, win, eventInfo) { onMouseDown: function(e, win, eventInfo) {
///console.log('mouse down!!!!');
if(!this.config.panning) return; if(!this.config.panning) return;
//START METAMAPS CODE //START METAMAPS CODE
@ -2495,8 +2496,9 @@ Extras.Classes.Navigation = new Class({
//START METAMAPS CODE //START METAMAPS CODE
var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey);
// TODO make sure this works across browsers // TODO make sure this works across browsers
if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey) || (rightClick && e.ctrlKey))) {
Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos(); Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos();
//console.log('mouse down');
} }
Metamaps.Mouse.didPan = false; Metamaps.Mouse.didPan = false;
@ -2524,14 +2526,19 @@ Extras.Classes.Navigation = new Class({
// START METAMAPS CODE // START METAMAPS CODE
var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey);
if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey) || (rightClick && e.ctrlKey))) {
Metamaps.Visualize.mGraph.busy = true; Metamaps.Visualize.mGraph.busy = true;
Metamaps.boxStartCoordinates = eventInfo.getPos(); Metamaps.boxStartCoordinates = eventInfo.getPos();
//console.log('mouse move');
return; return;
} }
if (Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) { if (Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey) || (rightClick && e.ctrlKey))) {
Metamaps.Visualize.mGraph.busy = true; Metamaps.Visualize.mGraph.busy = true;
Metamaps.JIT.drawSelectBox(eventInfo,e); Metamaps.JIT.drawSelectBox(eventInfo,e);
//console.log('mouse move');
return;
}
if (rightClick){
return; return;
} }
if (e.target.id != 'infovis-canvas') { if (e.target.id != 'infovis-canvas') {
@ -11202,4 +11209,4 @@ $jit.ForceDirected3D.$extend = true;
})(); })();

70
app/assets/javascripts/src/Metamaps.JIT.js
View file

@ -301,13 +301,16 @@ Metamaps.JIT = {
enableForEdges: true, enableForEdges: true,
onMouseMove: function (node, eventInfo, e) { onMouseMove: function (node, eventInfo, e) {
Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e); Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e);
//console.log('called mouse move handler');
}, },
//Update node positions when dragged //Update node positions when dragged
onDragMove: function (node, eventInfo, e) { onDragMove: function (node, eventInfo, e) {
Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e); Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e);
//console.log('called drag move handler');
}, },
onDragEnd: function (node, eventInfo, e) { onDragEnd: function (node, eventInfo, e) {
Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false); Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false);
//console.log('called drag end handler');
}, },
onDragCancel: function (node, eventInfo, e) { onDragCancel: function (node, eventInfo, e) {
Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false); Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false);
@ -352,10 +355,20 @@ Metamaps.JIT = {
$('.rightclickmenu').remove(); $('.rightclickmenu').remove();
if (Metamaps.Mouse.boxStartCoordinates) { if (Metamaps.Mouse.boxStartCoordinates) {
Metamaps.Visualize.mGraph.busy = false; if(e.ctrlKey && e.shiftKey){
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); Metamaps.Visualize.mGraph.busy = false;
Metamaps.JIT.zoomToBox(e); Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
return; Metamaps.JIT.zoomToBox(e);
//console.log('called zoom to box');
return;
}
else if (e.ctrlKey || e.shiftKey) {
Metamaps.Visualize.mGraph.busy = false;
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
Metamaps.JIT.selectWithBox(e);
//console.log('called select with box');
return;
};
} }
if (e.target.id != "infovis-canvas") return false; if (e.target.id != "infovis-canvas") return false;
@ -363,10 +376,13 @@ Metamaps.JIT = {
//clicking on a edge, node, or clicking on blank part of canvas? //clicking on a edge, node, or clicking on blank part of canvas?
if (node.nodeFrom) { if (node.nodeFrom) {
Metamaps.JIT.selectEdgeOnClickHandler(node, e); Metamaps.JIT.selectEdgeOnClickHandler(node, e);
//console.log('called selectEdgeOnClickHandler');
} else if (node && !node.nodeFrom) { } else if (node && !node.nodeFrom) {
Metamaps.JIT.selectNodeOnClickHandler(node, e); Metamaps.JIT.selectNodeOnClickHandler(node, e);
//console.log('called selectNodeOnClickHandler');
} else { } else {
Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e); Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e);
//console.log('called canvasClickHandler');
} //if } //if
}, },
//Add also a click handler to nodes //Add also a click handler to nodes
@ -375,10 +391,10 @@ Metamaps.JIT = {
// remove the rightclickmenu // remove the rightclickmenu
$('.rightclickmenu').remove(); $('.rightclickmenu').remove();
if (Metamaps.Mouse.boxStartCoordinates) { if (Metamaps.Mouse.boxStartCoordinates && e.ctrlKey) {
Metamaps.Visualize.mGraph.busy = false; Metamaps.Visualize.mGraph.busy = false;
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos(); Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
Metamaps.JIT.selectWithBox(e); Metamaps.JIT.zoomToBox(e);
return; return;
} }
@ -390,8 +406,8 @@ Metamaps.JIT = {
} else if (node && !node.nodeFrom) { } else if (node && !node.nodeFrom) {
Metamaps.JIT.selectNodeOnRightClickHandler(node, e); Metamaps.JIT.selectNodeOnRightClickHandler(node, e);
} else { } else {
console.log('right clicked on open space'); //console.log('right clicked on open space');
} //if }
} }
}, },
//Number of iterations for the FD algorithm //Number of iterations for the FD algorithm
@ -736,7 +752,7 @@ Metamaps.JIT = {
if (node && !node.nodeFrom) { if (node && !node.nodeFrom) {
var pos = eventInfo.getPos(); var pos = eventInfo.getPos();
// if it's a left click, or a touch, move the node // 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 (e.touches || (e.button == 0 && !e.altKey && !e.ctrlKey && !e.shiftKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
//if the node dragged isn't already selected, select it //if the node dragged isn't already selected, select it
var whatToDo = self.handleSelectionBeforeDragging(node, e); var whatToDo = self.handleSelectionBeforeDragging(node, e);
if (node.pos.rho || node.pos.rho === 0) { if (node.pos.rho || node.pos.rho === 0) {
@ -949,8 +965,10 @@ Metamaps.JIT = {
tempInit = false; tempInit = false;
tempNode = null; tempNode = null;
tempNode2 = null; tempNode2 = null;
Metamaps.Control.deselectAllEdges(); if (!e.ctrlKey && !e.shiftKey) {
Metamaps.Control.deselectAllNodes(); Metamaps.Control.deselectAllEdges();
Metamaps.Control.deselectAllNodes();
}
} }
}, //canvasClickHandler }, //canvasClickHandler
nodeDoubleClickHandler: function (node, e) { nodeDoubleClickHandler: function (node, e) {
@ -1181,19 +1199,20 @@ Metamaps.JIT = {
if (!e.shiftKey && !e.ctrlKey) { if (!e.shiftKey && !e.ctrlKey) {
Metamaps.Control.deselectAllNodes(); Metamaps.Control.deselectAllNodes();
Metamaps.Control.deselectAllEdges(); Metamaps.Control.deselectAllEdges();
Metamaps.Control.selectNode(node,e);
} }
if(e.ctrlKey || e.shiftKey){ else if(e.shiftKey && e.ctrlKey){
//no result
}
else if(e.ctrlKey){
if (node.selected) { if (node.selected) {
Metamaps.Control.deselectNode(node); Metamaps.Control.deselectNode(node);
} else { } else {
Metamaps.Control.selectNode(node,e); Metamaps.Control.selectNode(node,e);
} }
} }else if(e.shiftKey){
else{
Metamaps.Control.deselectAllNodes();
Metamaps.Control.deselectAllEdges();
Metamaps.Control.selectNode(node,e); Metamaps.Control.selectNode(node,e);
} }
//trigger animation to final styles //trigger animation to final styles
Metamaps.Visualize.mGraph.fx.animate({ Metamaps.Visualize.mGraph.fx.animate({
@ -1352,15 +1371,24 @@ Metamaps.JIT = {
// wait a certain length of time, then check again, then run this code // wait a certain length of time, then check again, then run this code
setTimeout(function () { setTimeout(function () {
if (!Metamaps.JIT.nodeWasDoubleClicked()) { if (!Metamaps.JIT.nodeWasDoubleClicked()) {
if (!e.shiftKey) { if (!e.shiftKey && !e.ctrlKey) {
Metamaps.Control.deselectAllNodes(); Metamaps.Control.deselectAllNodes();
Metamaps.Control.deselectAllEdges(); Metamaps.Control.deselectAllEdges();
} }
if (Metamaps.Selected.Edges.indexOf(adj) !== -1) { else if (e.shiftKey && e.ctrlKey){
Metamaps.Control.deselectEdge(adj); //no result
} else { }
else if (e.ctrlKey){
if (Metamaps.Selected.Edges.indexOf(adj) !== -1) {
Metamaps.Control.deselectEdge(adj);
} else {
Metamaps.Control.selectEdge(adj);
}
}
else if (e.shiftKey){
Metamaps.Control.selectEdge(adj); Metamaps.Control.selectEdge(adj);
} }
Metamaps.Visualize.mGraph.plot(); Metamaps.Visualize.mGraph.plot();
} }
}, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE); }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE);

8
app/assets/stylesheets/application.css
View file

@ -2730,3 +2730,11 @@ and it won't be important on password protected instances */
-webkit-transform-origin: left center; -webkit-transform-origin: left center;
transform-origin: left center; transform-origin: left center;
} }
.blockchain-btn {
display: inline;
float: right;
}
script.data-gratipay-username {
display: inline;
float: left;
}

6
app/views/layouts/_lightboxes.html.erb
View file

@ -167,14 +167,14 @@
<p>We welcome people of all skillsets to contribute to the project in different ways. Designers, researchers, academics, strategists, and facilitators can get in touch about opportunities to contribute to the project. If you're a developer, help us advance the code and take a look around our <a href="http://github.com/connoropolous/metamaps_gen002" target="_blank">Github</a>.</p> <p>We welcome people of all skillsets to contribute to the project in different ways. Designers, researchers, academics, strategists, and facilitators can get in touch about opportunities to contribute to the project. If you're a developer, help us advance the code and take a look around our <a href="http://github.com/connoropolous/metamaps_gen002" target="_blank">Github</a>.</p>
<p>Financial contributions are greatly appreciated in support of our work. All financial contributions are transparently governed and recorded in our value accounting system.</p> <p>Financial contributions are greatly appreciated in support of our work. All financial contributions are transparently governed and recorded in our value accounting system.</p>
<script data-gratipay-username="Metamaps.cc" src="//gttp.co/v1.js" style="float:left;display:inline;"></script> <script data-gratipay-username="Metamaps.cc" src="//gttp.co/v1.js"></script>
<div style="font-size:16px; width:250px; display:inline; float:right" class="blockchain-btn" <div style="font-size:16px; width:250px" class="blockchain-btn"
data-address="14GontNS1FKoiTQDEB5WBCUDZaFTiyxkzN" data-address="14GontNS1FKoiTQDEB5WBCUDZaFTiyxkzN"
data-shared="false"> data-shared="false">
<div class="blockchain stage-begin"> <div class="blockchain stage-begin">
<img src="https://blockchain.info//Resources/buttons/donate_64.png"/> <img src="https://blockchain.info//Resources/buttons/donate_64.png"/>
</div> </div>
<div class="blockchain stage-loading" style="display:inline;float:right;"> <div class="blockchain stage-loading">
<img src="https://blockchain.info//Resources/loading-large.gif"/> <img src="https://blockchain.info//Resources/loading-large.gif"/>
</div> </div>