modules/graph-resources/src/main/resources/graph/eventListener.js

   1 // Math.sign is used a lot here and outdated brownser don't have it.
   2 if (typeof Math.sign !== 'function') {
   3     Math.sign = function(value) {
   4         return value ? value < 0 ? -1 : 1 : 0;
   5     };
   6 }
   7
   8 module.exports = function(stage, graph) {
   9     // constant TODO: change to use settings
  10     var MAX_SCALE = 2.0;
  11     var MIN_SCALE = 0.1;
  12     //------//
  13
  14     // pointer options
  15     var POINTER_DEFAULT = 'auto';
  16     var POINTER_DRAG = 'all-scroll';
  17
  18     var event = require('events');
  19     var emitter = new event.EventEmitter();
  20     var mouseDown = false;
  21     var draggedNode = null;
  22
  23     var camera = stage.camera;
  24     var oldPos = new PIXI.Point(0, 0);
  25
  26     // Start dragging the node
  27     stage.interactionManager.onMouseDown = function(e) {
  28         mouseDown = true;
  29         oldPos.set(-1, -1);
  30
  31         draggedNode = graph.getNodeAt(e.layerX, e.layerY);
  32
  33         if (draggedNode) {
  34             emitter.emit('nodeDown', draggedNode);
  35         }
  36     };
  37
  38     // If the node is dragged, update the position
  39     // otherwise emit a callable event
  40     stage.interactionManager.onMouseMove = function(e) {
  41         if (draggedNode) { // drag node
  42             setPointerStyle(POINTER_DRAG);
  43             var realPos = camera.transform.inverse().transformPoint(e.layerX, e.layerY);
  44             draggedNode.pos.x = realPos[0];
  45             draggedNode.pos.y = realPos[1];
  46         }
  47         else if (mouseDown) { // do a pan
  48             setPointerStyle(POINTER_DRAG);
  49             if (oldPos.x == -1 && oldPos.y == -1) {
  50                 oldPos.set(e.layerX, e.layerY);
  51             }
  52
  53             var pos = new PIXI.Point(0,0);
  54             var deltaX = e.layerX - oldPos.x;
  55             var deltaY = e.layerY - oldPos.y;
  56
  57             pos.set(
  58                 Math.sign(deltaX) * Math.abs(deltaX),
  59                 Math.sign(deltaY) * Math.abs(deltaY)
  60             );
  61
  62             oldPos.set(e.layerX, e.layerY);
  63             camera.transform.translate(pos.x, pos.y);
  64         }
  65         else {
  66             var node = graph.getNodeAt(e.layerX, e.layerY);
  67
  68             if (node) {
  69                 emitter.emit('nodeOver', node);
  70                 return;
  71             }
  72
  73             emitter.emit('mouseMove', e);
  74         }
  75     };
  76
  77     // Stop dragging the node
  78     stage.interactionManager.onMouseUp = function(e) {
  79         mouseDown = false;
  80         setPointerStyle(POINTER_DEFAULT);
  81
  82         if (draggedNode) {
  83             emitter.emit('nodeUp', draggedNode);
  84             draggedNode = null;
  85         }
  86     };
  87
  88     // Release drag or pan if out of the canvas
  89     stage.interactionManager.onMouseOut = function(e) {
  90         mouseDown = false;
  91         draggedNode = null;
  92         setPointerStyle(POINTER_DEFAULT);
  93     };
  94
  95     function setPointerStyle(style) {
  96         if (document.body.style.cursor != style) {
  97             document.body.style.cursor = style;
  98         }
  99     }
 100
 101     function zoom(e) {
 102
 103         // stop scrolling while zooming
 104         e.preventDefault();
 105
 106         /* Each brownser on each platform
 107          * set the wheel distance a different value. That's why the arbitrary value
 108         */
 109         var factor = 0.10;
 110         var sign = Math.sign(e.detail || e.wheelDelta);
 111
 112         var currentScale = camera.scaleFactor;
 113         var scale = currentScale + (sign * factor);
 114
 115         if (scale > MAX_SCALE) {
 116             scale = MAX_SCALE;
 117         }
 118         else if (scale < MIN_SCALE) {
 119             scale = MIN_SCALE;
 120         }
 121         camera.scaleFactor = scale;
 122     }
 123
 124     // Mouse wheel to Zoom
 125     document.getElementById(stage.containerId).addEventListener('mousewheel', zoom, false); // chrome, safari
 126     document.getElementById(stage.containerId).addEventListener('DOMMouseScroll', zoom, false); // firefox
 127
 128     return emitter;
 129 };