From f5a018b6e40c6d0239d1b64ea9b21e73d752bc2f Mon Sep 17 00:00:00 2001 From: Michael Hackstein Date: Tue, 2 Apr 2013 11:31:17 +0200 Subject: [PATCH] GraphViewer: Implemented UI Button creation for the EdgeShaper --- .../graphViewer/jasmine_test/runnerAll.html | 2 + .../jasmine_test/runnerEdgeShaper.html | 2 + .../specEdgeShaper/edgeShaperUISpec.js | 2 +- .../specNodeShaper/nodeShaperUISpec.js | 2 +- .../js/graphViewer/ui/edgeShaperControls.js | 138 ++++++------------ 5 files changed, 49 insertions(+), 97 deletions(-) diff --git a/html/admin/js/graphViewer/jasmine_test/runnerAll.html b/html/admin/js/graphViewer/jasmine_test/runnerAll.html index adc9dd6740..016c382b11 100644 --- a/html/admin/js/graphViewer/jasmine_test/runnerAll.html +++ b/html/admin/js/graphViewer/jasmine_test/runnerAll.html @@ -6,6 +6,7 @@ + @@ -14,6 +15,7 @@ + diff --git a/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html b/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html index 58c1faa2b8..0b8ca1f98d 100644 --- a/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html +++ b/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html @@ -6,6 +6,7 @@ + @@ -14,6 +15,7 @@ + diff --git a/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js b/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js index e99b1f0b54..5910623e50 100644 --- a/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js +++ b/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js @@ -115,7 +115,7 @@ }); waitsFor(function() { - return $("#control_rect_modal").length === 0; + return $("#control_label_modal").length === 0; }, 2000, "The modal dialog should disappear."); }); diff --git a/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js b/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js index 4dc590d6f2..351216f676 100644 --- a/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js +++ b/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js @@ -150,7 +150,7 @@ }); waitsFor(function() { - return $("#control_rect_modal").length === 0; + return $("#control_label_modal").length === 0; }, 2000, "The modal dialog should disappear."); }); diff --git a/html/admin/js/graphViewer/ui/edgeShaperControls.js b/html/admin/js/graphViewer/ui/edgeShaperControls.js index 98a3025243..f41efec2d7 100644 --- a/html/admin/js/graphViewer/ui/edgeShaperControls.js +++ b/html/admin/js/graphViewer/ui/edgeShaperControls.js @@ -28,112 +28,60 @@ /// @author Michael Hackstein /// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany //////////////////////////////////////////////////////////////////////////////// -function NodeShaperControls(list, shaper) { +function EdgeShaperControls(list, shaper) { "use strict"; if (list === undefined) { throw "A list element has to be given."; } if (shaper === undefined) { - throw "The NodeShaper has to be given."; + throw "The EdgeShaper has to be given."; } - var self = this, + var self = this; - createModalDialog = function(title, idprefix, objects, callback) { - var table = modalDialogHelper.modalDivTemplate(title, idprefix, callback); + this.addControlOpticShapeNone = function() { + var prefix = "control_none", + idprefix = prefix + "_", + callback = function() { + shaper.changeTo({ + shape: { + type: EdgeShaper.shapes.NONE + } + }); + }, + button = document.createElement("li"); + button.className = "graph_control " + prefix; + button.id = prefix; + button.appendChild(document.createTextNode("None")); + list.appendChild(button); + button.onclick = callback; + }; + + this.addControlOpticShapeArrow = function() { + var prefix = "control_arrow", + idprefix = prefix + "_", + callback = function() { + shaper.changeTo({ + shape: { + type: EdgeShaper.shapes.ARROW + } + }); + }, + button = document.createElement("li"); + button.className = "graph_control " + prefix; + button.id = prefix; + button.appendChild(document.createTextNode("Arrow")); + list.appendChild(button); + button.onclick = callback; + }; + + - _.each(objects, function(o) { - var tr = document.createElement("tr"), - labelTh = document.createElement("th"), - contentTh = document.createElement("th"), - input; - - table.appendChild(tr); - tr.appendChild(labelTh); - labelTh.className = "collectionTh capitalize"; - labelTh.appendChild(document.createTextNode(o.id + ":")); - tr.appendChild(contentTh); - contentTh.className = "collectionTh"; - switch(o.type) { - case "text": - input = document.createElement("input"); - input.type = "text"; - input.id = idprefix + o.id; - contentTh.appendChild(input); - break; - default: - //Sorry unknown - table.removeChild(tr); - break; - } - }); - $("#" + idprefix + "modal").modal('show'); - }; - - this.addControlOpticShapeCircle = function() { - var prefix = "control_circle", - idprefix = prefix + "_", - callback = function() { - createModalDialog("Switch to Circle", - idprefix, [{ - type: "text", - id: "radius" - }], function () { - var r = $("#" + idprefix + "radius").attr("value"); - shaper.changeTo({ - shape: { - type: NodeShaper.shapes.CIRCLE, - radius: r - } - }); - } - ); - }, - button = document.createElement("li"); - button.className = "graph_control " + prefix; - button.id = prefix; - button.appendChild(document.createTextNode("Circle")); - list.appendChild(button); - button.onclick = callback; - }; - - this.addControlOpticShapeRect = function() { - var prefix = "control_rect", - idprefix = prefix + "_", - callback = function() { - createModalDialog("Switch to Rectangle", - idprefix, [{ - type: "text", - id: "width" - },{ - type: "text", - id: "height" - }], function () { - var w = $("#" + idprefix + "width").attr("value"), - h = $("#" + idprefix + "height").attr("value"); - shaper.changeTo({ - shape: { - type: NodeShaper.shapes.RECT, - width: w, - height: h - } - }); - } - ); - }, - button = document.createElement("li"); - button.className = "graph_control " + prefix; - button.id = prefix; - button.appendChild(document.createTextNode("Rectangle")); - list.appendChild(button); - button.onclick = callback; - }; - this.addControlOpticLabel = function() { var prefix = "control_label", idprefix = prefix + "_", callback = function() { - createModalDialog("Switch Label Attribute", + modalDialogHelper.createModalDialog("Switch Label Attribute", idprefix, [{ type: "text", id: "key" @@ -154,8 +102,8 @@ function NodeShaperControls(list, shaper) { }; this.addAllOptics = function () { - self.addControlOpticShapeCircle(); - self.addControlOpticShapeRect(); + self.addControlOpticShapeNone(); + self.addControlOpticShapeArrow(); self.addControlOpticLabel(); };