GraphViewer: The label<-> colour list is now displayed right to the SVG

html/admin/js/graphViewer/graph/colourMapper.js

@@ -34,6 +34,8 @@ function ColourMapper() {
   mapping = {},
   reverseMapping = {},
   colours = [],
+  listener,
+  self = this,
   nextColour = 0;
   
   colours.push("navy");
@@ -69,18 +71,30 @@ function ColourMapper() {
         nextColour = 0;
       }
     }
+    if (listener !== undefined) {
+      listener(self.getList());
+    }
     return mapping[value];
   };
   
+  
+  
   this.reset = function() {
     mapping = {};
     reverseMapping = {};
     nextColour = 0;
+    if (listener !== undefined) {
+      listener(self.getList());
+    }
   };
   
   this.getList = function() {
     return reverseMapping;
   };
   
+  this.setChangeListener = function(callback) {
+    listener = callback;
+  }; 
+  
   this.reset();
 }

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

@@ -460,6 +460,10 @@ function NodeShaper(parent, flags, idfunc) {
     return colourMapper.getList();
   }; 
   
+  self.setColourMappingListener = function(callback) {
+    colourMapper.setChangeListener(callback);
+  };
+  
 }
 
 NodeShaper.shapes = Object.freeze({

html/admin/js/graphViewer/jasmine_test/specColourMapper/colourMapperSpec.js

@@ -130,6 +130,20 @@
       });
       
     });
+    
+    it('should be possible to add a change listener', function() {
+      var res = {},
+        correct = {},
+        listener = function(mapping) {
+          res = mapping;
+        };
+        
+      mapper.setChangeListener(listener);
+      mapper.getColour("1");
+      correct = mapper.getList();
+      
+      expect(res).toEqual(correct);
+    });
   });
   
 }());

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js

@@ -341,6 +341,37 @@
       });
     });
     
+    describe('checking the node colour mapping list', function() {
+      
+      var map;
+      
+      beforeEach(function() {
+        map = $("#contentDiv #node_colour_list");
+      });
+      
+      it('should append the list', function() {
+        expect(map.length).toEqual(1);
+      });
+      
+      it('should be positioned in the top-right corner of the svg', function() {
+        expect(map.css("position")).toEqual("absolute");
+        var leftPos = $("#contentDiv svg").position().left,
+        topPos = $("#contentDiv svg").position().top;
+        leftPos += $("#contentDiv svg").width();
+        if (leftPos === Math.round(leftPos)) {
+          expect(map.css("left")).toEqual(leftPos + "px");
+        } else {
+          expect(map.css("left")).toEqual(leftPos.toFixed(1) + "px");
+        }
+        if (topPos === Math.round(topPos)) {
+          expect(map.css("top")).toEqual(topPos + "px");
+        } else {
+          expect(map.css("top")).toEqual(topPos.toFixed(1) + "px");
+        }
+      });
+      
+    });
+    
     describe('checking to load a graph', function() {
       
       var waittime = 200;

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js

@@ -320,6 +320,49 @@
         });
       });
       
+      it('should be possible to add a change listener for the mapping', function() {
+        var nodes = [
+          {
+            _id: 1,
+            _data: {
+              label: "lbl1"
+            }
+          }, {
+            _id: 2,
+            _data: {
+              label: "lbl2"
+            }
+          }, {
+            _id: 3,
+            _data: {
+              label: "lbl3"
+            }
+          }, {
+            _id: 4,
+            _data: {
+              label: "lbl1"
+            }
+          }],
+        shaper = new NodeShaper(d3.select("svg"),
+        {
+          color: {
+            type: "attribute",
+            key: "label"
+          }
+        }),
+        testee,
+        colorList;
+        shaper.setColourMappingListener(function(mapping) {
+          testee = mapping;
+        });
+        
+        shaper.drawNodes(nodes);
+        
+        colorList = shaper.getColourMapping();
+        
+        expect(testee).toEqual(colorList);
+      });
+      
     });
 
     describe('when nodes are already drawn', function() {

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js

@@ -1,6 +1,6 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
 /*global beforeEach, afterEach */
-/*global describe, it, expect*/
+/*global describe, it, expect, jasmine*/
 /*global runs, waitsFor, spyOn */
 /*global window, eb, loadFixtures, document */
 /*global $, _, d3*/
@@ -56,6 +56,7 @@
           "green": ["gr", "een"]
         };
       });
+      spyOn(shaper, "setColourMappingListener");
       this.addMatchers({
         toBeTag: function(name) {
           var el = this.actual;
@@ -263,32 +264,6 @@
       
     });
     
-    it('should be able to add a switch colour on attribute control to the list', function() {
-      runs(function() {
-        shaperUI.addControlOpticLabelAndColour();
-      
-        expect($("#control_node_list #control_node_labelandcolour").length).toEqual(1);
-        expect($("#control_node_list #control_node_labelandcolour")[0]).toConformToListCSS();
-      
-        helper.simulateMouseEvent("click", "control_node_labelandcolour");
-        $("#control_node_labelandcolour_key").attr("value", "label");
-        helper.simulateMouseEvent("click", "control_node_labelandcolour_submit");
-      
-        expect(shaper.changeTo).toHaveBeenCalledWith({
-          label: "label",
-          color: {
-            type: "attribute",
-            key: "label"
-          }
-        });
-      });
-      
-      waitsFor(function() {
-        return $("#control_node_attributecolour_modal").length === 0;
-      }, 2000, "The modal dialog should disappear.");
-      
-    });
-    
     it('should be able to add all optic controls to the list', function () {
       shaperUI.addAllOptics();
       
@@ -324,7 +299,9 @@
         blue = list.children[0],
         green = list.children[1];
       expect(shaper.getColourMapping).wasCalled();
+      expect(shaper.setColourMappingListener).wasCalledWith(jasmine.any(Function));
       expect(div).toBeTag("div");
+      expect($(div).attr("id")).toEqual("node_colour_list");
       expect(list).toBeTag("ul");
       expect(blue).toBeTag("li");
       expect($(blue).text()).toEqual("bl, ue");
@@ -336,6 +313,43 @@
     
     });
     
+    describe('checking to change colour and label at once', function() {
+      
+      it('should be able to add the control and create the mapping list', function() {
+        runs(function() {
+          shaperUI.addControlOpticLabelAndColour();
+          spyOn(shaperUI, "createColourMappingList").andCallThrough();
+          
+          expect($("#control_node_list #control_node_labelandcolour").length).toEqual(1);
+          expect($("#control_node_list #control_node_labelandcolour")[0]).toConformToListCSS();
+      
+          helper.simulateMouseEvent("click", "control_node_labelandcolour");
+          $("#control_node_labelandcolour_key").attr("value", "label");
+          helper.simulateMouseEvent("click", "control_node_labelandcolour_submit");
+          
+          
+          
+          expect(shaper.changeTo).toHaveBeenCalledWith({
+            label: "label",
+            color: {
+              type: "attribute",
+              key: "label"
+            }
+          });
+          expect(shaperUI.createColourMappingList).wasCalled();
+          expect(shaper.setColourMappingListener).wasCalledWith(jasmine.any(Function));
+        });
+      
+        waitsFor(function() {
+          return $("#control_node_attributecolour_modal").length === 0;
+        }, 2000, "The modal dialog should disappear.");
+      
+        runs(function() {
+          expect(true).toBeTruthy();
+        });
+      
+      });      
+    });
   });
 
 }());

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

@@ -48,6 +48,9 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
     height = optHeight || container.offsetHeight,
     menubar = document.createElement("ul"),
     background = document.createElement("div"),
+    colourList,
+    nodeShaperUI,
+    adapterUI,
     mousePointerBox = document.createElement("div"),
     svg,
     
@@ -152,15 +155,6 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
         ),
         */
         
-        nodeShaperUI = new NodeShaperControls(
-          configureList,
-          graphViewer.nodeShaper
-        ),
-        adapterUI = new ArangoAdapterControls(
-          configureList,
-          graphViewer.adapter
-        ),
-        
         searchFunction = function() {
           if (searchAttrField.value === ""
             || searchAttrField.value === undefined) {
@@ -173,6 +167,15 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
           }
         };
 
+      nodeShaperUI = new NodeShaperControls(
+        configureList,
+        graphViewer.nodeShaper
+      );
+      adapterUI = new ArangoAdapterControls(
+        configureList,
+        graphViewer.adapter
+      );
+
       menubar.id = "menubar";
       menubar.className = "thumbnails2";
       
@@ -244,6 +247,16 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
       layouterUI.addAll();
       adapterUI.addAll();
       */
+      
+    },
+    
+    createColourList = function() {
+      colourList = nodeShaperUI.createColourMappingList();
+      colourList.style.position = "absolute";
+      var intSVG = $("#graphViewerSVG");
+      colourList.style.top = intSVG.position().top.toFixed(1) + "px";
+      colourList.style.left = (intSVG.position().left + intSVG.width()).toFixed(1) + "px";
+      container.appendChild(colourList);
     };
   container.appendChild(menubar);
   container.appendChild(background);
@@ -256,4 +269,5 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
     
   createToolbox();
   createMenu();
+  createColourList();
 }

html/admin/js/graphViewer/ui/nodeShaperControls.js

@@ -38,7 +38,22 @@ function NodeShaperControls(list, shaper) {
     throw "The NodeShaper has to be given.";
   }
   var self = this,
-    baseClass = "graph";
+    baseClass = "graph",
+    colourDiv,
+    
+    fillColourDiv = function(mapping) {
+      while (colourDiv.hasChildNodes()) {
+          colourDiv.removeChild(colourDiv.lastChild);
+      }
+      var list = document.createElement("ul");
+      colourDiv.appendChild(list);
+      _.each(mapping, function(els, col) {
+        var li = document.createElement("li");
+        li.style.backgroundColor = col;
+        li.appendChild(document.createTextNode(els.join(", ")));
+        list.appendChild(li);
+      });
+    };
   
   this.addControlOpticShapeNone = function() {
     uiComponentsHelper.createButton(baseClass, list, "None", "control_node_none", function() {
@@ -213,6 +228,10 @@ function NodeShaperControls(list, shaper) {
               key: key
             }
           });
+          if (colourDiv === undefined) {
+            colourDiv = self.createColourMappingList();
+          }
+          
         }
       );
     });
@@ -246,16 +265,13 @@ function NodeShaperControls(list, shaper) {
   //////////////////////////////////////////////////////////////////  
   
   this.createColourMappingList = function() {
-    var div = document.createElement("div"),
+    if (colourDiv !== undefined) {
-    list = document.createElement("ul"),
+      return colourDiv;
-    mapping = shaper.getColourMapping();
+    }
-    div.appendChild(list);
+    colourDiv = document.createElement("div");
-    _.each(mapping, function(els, col) {
+    colourDiv.id = "node_colour_list";
-      var li = document.createElement("li");
+    fillColourDiv(shaper.getColourMapping());
-      li.style.backgroundColor = col;
+    shaper.setColourMappingListener(fillColourDiv);
-      li.appendChild(document.createTextNode(els.join(", ")));
+    return colourDiv;
-      list.appendChild(li);
-    });
-    return div;
   };
 }