GraphViewer: The other classes now use the better handleing for SVG events

html/admin/js/graphViewer/graph/edgeShaper.js

@@ -70,7 +70,9 @@ function EdgeShaper(parent, flags, idfunc) {
        dblclick: noop,
        mousedown: noop,
        mouseup: noop,
-       mousemove: noop
+       mousemove: noop,
+       mouseout: noop,
+       mouseover: noop
      };
      addUpdate = noop;
     },

html/admin/js/graphViewer/graph/eventDispatcher.js

@@ -152,7 +152,9 @@ function EventDispatcher(nodeShaper, edgeShaper, config) {
     dblclick: [],
     mousedown: [],
     mouseup: [],
-    mousemove: []
+    mousemove: [],
+    mouseout: [],
+    mouseover: []
   };
   svgTemp = {};
   

html/admin/js/graphViewer/graph/nodeShaper.js

@@ -114,7 +114,9 @@ function NodeShaper(parent, flags, idfunc) {
         drag: noop,
         mousedown: noop,
         mouseup: noop,
-        mousemove: noop
+        mousemove: noop,
+        mouseout: noop,
+        mouseover: noop
       };
       addUpdate = noop;
     },

html/admin/js/graphViewer/graphViewer.js

@@ -1,6 +1,6 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
 /*global _*/
-/*global EventDispatcher, ArangoAdapter, JSONAdapter */
+/*global ArangoAdapter, JSONAdapter */
 /*global ForceLayouter, EdgeShaper, NodeShaper, ZoomManager */
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
@@ -56,7 +56,6 @@ function GraphViewer(svg, width, height, adapterConfig, config) {
     edgeContainer,
     zoomManager,
     fixedSize,
-    dispatcher,
     edges = [],
     nodes = [],
 

html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherUISpec.js

@@ -138,7 +138,9 @@
       nodeShaper.drawNodes(nodes);
       edgeShaper.drawEdges(edges);
       
-      dispatcherUI = new EventDispatcherControls(list, nodeShaper, edgeShaper, completeConfig);
+      dispatcherUI = new EventDispatcherControls(
+        list, mousePointerbox, nodeShaper, edgeShaper, completeConfig
+      );
       spyOn(nodeShaper, "changeTo").andCallThrough();
       spyOn(edgeShaper, "changeTo").andCallThrough();
       
@@ -191,9 +193,12 @@
       }).toThrow("A list element has to be given.");
       expect(function() {
         var e = new EventDispatcherControls(list);
+      }).toThrow("The cursor decoration box has to be given.");
+      expect(function() {
+        var e = new EventDispatcherControls(list, mousePointerbox);
       }).toThrow("The NodeShaper has to be given.");
       expect(function() {
-        var e = new EventDispatcherControls(list, nodeShaper);
+        var e = new EventDispatcherControls(list, mousePointerbox, nodeShaper);
       }).toThrow("The EdgeShaper has to be given.");
     });
     

html/admin/js/graphViewer/ui/eventDispatcherControls.js

@@ -1,6 +1,6 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
 /*global $, _, d3*/
-/*global document*/
+/*global document, window*/
 /*global modalDialogHelper, uiComponentsHelper */
 /*global EventDispatcher, EventLibrary*/
 ////////////////////////////////////////////////////////////////////////////////
@@ -29,12 +29,15 @@
 /// @author Michael Hackstein
 /// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
 ////////////////////////////////////////////////////////////////////////////////
-function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig) {
+function EventDispatcherControls(list, cursorIconBox, nodeShaper, edgeShaper, dispatcherConfig) {
   "use strict";
   
   if (list === undefined) {
     throw "A list element has to be given.";
   }
+  if (cursorIconBox === undefined) {
+    throw "The cursor decoration box has to be given.";
+  }
   if (nodeShaper === undefined) {
     throw "The NodeShaper has to be given.";
   }
@@ -45,7 +48,6 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
   var self = this,
     firstButton = true,
     currentListGroup,
-    cursorIconBox,
     placeHolderBtn = uiComponentsHelper.createIconButton(
       "none",
       ""
@@ -55,7 +57,6 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
     dispatcher = new EventDispatcher(nodeShaper, edgeShaper, dispatcherConfig),
     
     setCursorIcon = function(icon) {
-      cursorIconBox = cursorIconBox || document.getElementById("mousepointer");
       cursorIconBox.className = "mousepointer icon-" + icon;
     },
     
@@ -98,8 +99,35 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
     },
     rebindSVG = function(actions) {
       dispatcher.rebind("svg", actions);
+    },
+    
+    getCursorPosition = function (ev) {
+      var e = ev || window.event,
+        res = {};
+      res.x = e.clientX;
+      res.y = e.clientY;
+      res.x += document.body.scrollLeft;
+      res.y += document.body.scrollTop;
+      return res;
+    },
+    
+    moveCursorBox = function(ev) {
+      var pos = getCursorPosition(ev);
+      pos.x += 7;
+      pos.y += 12;
+      cursorIconBox.style.position = "absolute";
+      cursorIconBox.style.left  = pos.x + 'px';
+      cursorIconBox.style.top = pos.y + 'px';
     };
   
+  dispatcher.fixSVG("mousemove", moveCursorBox);
+  dispatcher.fixSVG("mouseout", function() {
+    cursorIconBox.style.display = "none";
+  });
+  dispatcher.fixSVG("mouseover", function() {
+    cursorIconBox.style.display = "block";
+  });
+  
   this.addControlDrag = function() {
     var prefix = "control_event_drag",
       idprefix = prefix + "_",

html/admin/js/graphViewer/ui/graphViewerUI.js

@@ -50,24 +50,6 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
     background = document.createElement("div"),
     mousePointerBox = document.createElement("div"),
     svg,
-    getCursorPosition = function (ev) {
-      var e = ev || window.event,
-        res = {};
-      res.x = e.clientX;
-      res.y = e.clientY;
-      res.x += document.body.scrollLeft;
-      res.y += document.body.scrollTop;
-      return res;
-    },
-    
-    moveCursorBox = function(ev) {
-      var pos = getCursorPosition(ev);
-      pos.x += 7;
-      pos.y += 12;
-      mousePointerBox.style.position = "absolute";
-      mousePointerBox.style.left  = pos.x + 'px';
-      mousePointerBox.style.top = pos.y + 'px';
-    },
     
     makeBootstrapDropdown = function (div, id, title) {
       var btn, caret, list;
@@ -99,6 +81,7 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
       var toolbox = document.createElement("div"),
         dispatcherUI = new EventDispatcherControls(
           toolbox,
+          mousePointerBox,
           graphViewer.nodeShaper,
           graphViewer.edgeShaper,
           graphViewer.dispatcherConfig
@@ -273,12 +256,4 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
   
   createToolbox();
   createMenu();
-  
-  document.getElementById("graphViewerSVG").onmousemove = moveCursorBox;
-  document.getElementById("graphViewerSVG").onmouseout = function() {
-    mousePointerBox.style.display = "none";
-  };
-  document.getElementById("graphViewerSVG").onmouseover = function() {
-    mousePointerBox.style.display = "block";
-  };
 }