Browse Source

changed popup css to pass all mouse events. All pageX and pageY changed to clientX and clientY because the correction is done with getBoundingClientRect

flowchartTest
Alex de Mulder 9 years ago
parent
commit
0219c43720
7 changed files with 1952 additions and 1930 deletions
  1. +1
    -0
      dist/vis.css
  2. +1876
    -1925
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +1
    -0
      examples/network/events/interactionEvents.html
  5. +1
    -0
      lib/network/css/network-tooltip.css
  6. +3
    -3
      lib/network/modules/InteractionHandler.js
  7. +69
    -1
      test/networkTest.html

+ 1
- 0
dist/vis.css View File

@ -825,6 +825,7 @@ div.vis-network-tooltip {
border: 1px solid #808074; border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
pointer-events: none;
} }
div.vis-network-configuration { div.vis-network-configuration {
position:relative; position:relative;

+ 1876
- 1925
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
examples/network/events/interactionEvents.html View File

@ -8,6 +8,7 @@
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
margin-top:1000px;
width: 600px; width: 600px;
height: 400px; height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;

+ 1
- 0
lib/network/css/network-tooltip.css View File

@ -15,4 +15,5 @@ div.vis-network-tooltip {
border: 1px solid #808074; border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
pointer-events: none;
} }

+ 3
- 3
lib/network/modules/InteractionHandler.js View File

@ -163,7 +163,7 @@ class InteractionHandler {
} }
onContext(event) { onContext(event) {
let pointer = this.getPointer({x:event.pageX, y:event.pageY});
let pointer = this.getPointer({x:event.clientX, y:event.clientY});
this.selectionHandler._generateClickEvent('oncontext', event, pointer); this.selectionHandler._generateClickEvent('oncontext', event, pointer);
} }
@ -448,7 +448,7 @@ class InteractionHandler {
scale *= (1 + zoom); scale *= (1 + zoom);
// calculate the pointer location // calculate the pointer location
let pointer = this.getPointer({x:event.pageX, y:event.pageY});
let pointer = this.getPointer({x:event.clientX, y:event.clientY});
// apply the new scale // apply the new scale
this.zoom(scale, pointer); this.zoom(scale, pointer);
@ -465,7 +465,7 @@ class InteractionHandler {
* @private * @private
*/ */
onMouseMove(event) { onMouseMove(event) {
let pointer = this.getPointer({x:event.pageX, y:event.pageY});
let pointer = this.getPointer({x:event.clientX, y:event.clientY});
let popupVisible = false; let popupVisible = false;
// check if the previously selected node is still selected // check if the previously selected node is still selected

+ 69
- 1
test/networkTest.html View File

@ -20,11 +20,79 @@
Create a simple network with some nodes and edges. Create a simple network with some nodes and edges.
</p> </p>
<div id="div_graph"></div>
<div id="visualization"></div>
<script type="text/javascript"> <script type="text/javascript">
var nodes = new vis.DataSet([
{id: '1', label: 'Test1', step : 1},
{id: '2', label: 'Test2', step : 2},
{id: '3', label: 'Test3', step : 3}
]);
var edges = new vis.DataSet([
{from: '1', to: '2', label: '1'},
{from: '3', to: '2'}
]);
var currentStep = 1;
var maxStep = nodes.length;
var nodesView = new vis.DataView(nodes, {
filter: function(node)
{
if(node.hasOwnProperty('step'))
return node.step <= currentStep;
else
return false;
}
});
var options = {
width : '100%',
height : '100%',
};
console.log(nodesView, edges)
// create a network
var container = document.getElementById('visualization');
var data = {
nodes: nodesView,
edges: edges
};
var network = new vis.Network(container, data, options);
// nodesView.refresh();
function StepNext()
{
currentStep = currentStep + 1;
if(currentStep > maxStep)
currentStep = maxStep;
nodesView.refresh();
}
function StepBack()
{
currentStep = currentStep - 1;
if(currentStep < 1)
currentStep = 1;
nodesView.refresh();
}
</script> </script>
<button id="btnPrevious" type="button" onclick="StepBack();"><<</button>
<button id="btnNext" type="button" onclick="StepNext();">>></button>
</body> </body>
</html> </html>

Loading…
Cancel
Save