diff --git a/Kieker.WebGUI/src/main/java/kieker/webgui/beans/view/CurrentAnalysisEditorGraphBean.java b/Kieker.WebGUI/src/main/java/kieker/webgui/beans/view/CurrentAnalysisEditorGraphBean.java
index 79fca9af9c1bca6fccb7f0bc6e21be0c3b9a2ddd..68f95456f8ebf8648cce97ba9e44c454824f4ff8 100644
--- a/Kieker.WebGUI/src/main/java/kieker/webgui/beans/view/CurrentAnalysisEditorGraphBean.java
+++ b/Kieker.WebGUI/src/main/java/kieker/webgui/beans/view/CurrentAnalysisEditorGraphBean.java
@@ -98,15 +98,15 @@ public class CurrentAnalysisEditorGraphBean {
/**
* This is the javascript code to add a filter to the graph.
*/
- private static final String JS_CMD_ADD_FILTER = "graph.addFilter(%d, %d, %s,[%s],[%s],[%s]);";
+ private static final String JS_CMD_ADD_FILTER = "graph.addNode(%d, %d, %s,[%s],[%s],[%s],'Filter');";
/**
* This is the javascript code to add a reader to the graph.
*/
- private static final String JS_CMD_ADD_READER = "graph.addReader(%d, %d, %s,[%s],[%s]);";
+ private static final String JS_CMD_ADD_READER = "graph.addNode(%d, %d, %s,[%s],null,[%s], 'Reader');";
/**
* This is the javascript code to add a repository to the graph.
*/
- private static final String JS_CMD_ADD_REPOSITORY = "graph.addRepository(%d, %d, %s,%s);";
+ private static final String JS_CMD_ADD_REPOSITORY = "graph.addNode(%d, %d, %s, null, [%s], null, 'Repository');";
/**
* This is the javascript code to add an edge to the graph.
*/
@@ -121,6 +121,15 @@ public class CurrentAnalysisEditorGraphBean {
private static final String JS_CMD_RENAME_NODE = "graph.getNode(%s).name = '%s';";
private static final Object REPOSITORY_INPUT_PORT = "R";
+ private static final String JS_CMD_ENABLE_GRID = "";
+ private static final String JS_CMD_DISABLE_GRID = "";
+ private static final String JS_CMD_ENABLE_SNAP = "";
+ private static final String JS_CMD_DISABLE_SNAP = "";
+ private static final String JS_CMD_SCALE_TO_FIT = "graph.scaleToFit();";
+
+ private boolean gridEnabled = false;
+ private boolean snapEnabled = false;
+
/**
* This map contains all components (plugins, repositories and ports) within the graph to identify them with a unique ID.
*/
@@ -487,6 +496,38 @@ public class CurrentAnalysisEditorGraphBean {
}
}
+ public void scaleToFit() {
+ RequestContext.getCurrentInstance().execute(CurrentAnalysisEditorGraphBean.JS_CMD_SCALE_TO_FIT);
+ }
+
+ public void switchGrid() {
+ if (this.gridEnabled) {
+ RequestContext.getCurrentInstance().execute(CurrentAnalysisEditorGraphBean.JS_CMD_DISABLE_GRID);
+ } else {
+ RequestContext.getCurrentInstance().execute(CurrentAnalysisEditorGraphBean.JS_CMD_ENABLE_GRID);
+ }
+
+ this.gridEnabled = !this.gridEnabled;
+ }
+
+ public void switchSnap() {
+ if (this.snapEnabled) {
+ RequestContext.getCurrentInstance().execute(CurrentAnalysisEditorGraphBean.JS_CMD_DISABLE_SNAP);
+ } else {
+ RequestContext.getCurrentInstance().execute(CurrentAnalysisEditorGraphBean.JS_CMD_ENABLE_SNAP);
+ }
+
+ this.snapEnabled = !this.snapEnabled;
+ }
+
+ public boolean isGridEnabled() {
+ return this.gridEnabled;
+ }
+
+ public boolean isSnapEnabled() {
+ return this.snapEnabled;
+ }
+
/**
* The setter for the field {@link CurrentAnalysisEditorGraphBean#currentAnalysisEditorBean}.
*
diff --git a/Kieker.WebGUI/src/main/webapp/AnalysisEditor.xhtml b/Kieker.WebGUI/src/main/webapp/AnalysisEditor.xhtml
index 071ef42c1f4e2bace54991f59b77f5bf1a2a7cdd..d7033c9d2d74f4688b8e799905cfae0313591d0a 100644
--- a/Kieker.WebGUI/src/main/webapp/AnalysisEditor.xhtml
+++ b/Kieker.WebGUI/src/main/webapp/AnalysisEditor.xhtml
@@ -58,7 +58,7 @@
<p:layout fullPage="true">
<p:layoutUnit position="north">
- <h:form>
+ <h:form id="menuForm">
<!-- The following is the toolbar to navigate between the different pages. -->
<p:toolbar>
<p:toolbarGroup align="left">
@@ -94,6 +94,15 @@
<p:menuitem styleClass="element-with-whitespace" icon="ui-icon-circle-close" value=" Close Project" action="ProjectOverview.xhtml?faces-redirect=true" ajax="false"/>
</p:submenu>
+ <p:submenu label="Graph">
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-search" value=" Scale To Fit" ajax="true" action="#{currentAnalysisEditorGraphBean.scaleToFit()}" />
+ <p:separator/>
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-grip-dotted-horizontal" value=" Enable/Disable Grid" ajax="true" />
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-link" value=" Enable/Disable Snap" ajax="true" />
+ <p:separator/>
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-shuffle" value=" Auto-Layout" ajax="true" />
+ </p:submenu>
+
<p:submenu label="Help">
<p:menuitem styleClass="element-with-whitespace" icon="ui-icon-help" value=" User Guide" ajax="true" disabled="true"/>
<p:separator/>
@@ -101,7 +110,14 @@
</p:submenu>
<p:menuitem styleClass="logOutButton" icon="ui-icon-power" value="#{userBean.userName}" ajax="true" url="login"/>
- </p:menubar>
+ </p:menubar>
+ <p:spacer height="5"/>
+ <p:menubar>
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-search" value=" Scale To Fit" ajax="true" action="#{currentAnalysisEditorGraphBean.scaleToFit()}" />
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-grip-dotted-horizontal" value=" #{currentAnalysisEditorGraphBean.gridEnabled ? 'Disable' : 'Enable'} Grid" ajax="true" action="#{currentAnalysisEditorGraphBean.switchGrid()}" update=":menuForm"/>
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-link" value=" #{currentAnalysisEditorGraphBean.snapEnabled ? 'Disable' : 'Enable'} Snap" ajax="true" action="#{currentAnalysisEditorGraphBean.switchSnap()}" update=":menuForm"/>
+ <p:menuitem styleClass="element-with-whitespace" icon="ui-icon-shuffle" value=" Auto-Layout" ajax="true" />
+ </p:menubar>
</h:form>
</p:layoutUnit>
@@ -136,7 +152,7 @@
<p:inplace id="normalEditor" editor="true" rendered="#{rowIndex > 1}">
<p:inputText value="#{property.value}" />
</p:inplace>
- <p:tooltip for="className" value="The class name of this component." rendered="#{rowIndex == 0}"/>
+ <p:tooltip for="className" value="The class name of this component." rendered="#{rowIndex == 0}"/>
<p:tooltip for="nameEditor" value="The name of this component." rendered="#{rowIndex == 1}"/>
<p:tooltip for="normalEditor" value="#{currentAnalysisEditorBean.getDescription(currentAnalysisEditorBean.selectedPlugin, property.name)}" rendered="#{rowIndex > 1}"/>
</p:column>
diff --git a/Kieker.WebGUI/src/main/webapp/js/flowEditor.js b/Kieker.WebGUI/src/main/webapp/js/flowEditor.js
index 93fafe7bdc9cfdf616322ab7a2691d0f8d793ae4..4497d1583918c9086fb754e8f7fa16ef18c07bd6 100644
--- a/Kieker.WebGUI/src/main/webapp/js/flowEditor.js
+++ b/Kieker.WebGUI/src/main/webapp/js/flowEditor.js
@@ -1,8 +1,8 @@
var labelType, useGradients, nativeTextSupport, animate;
-///////////////////////////////////////////////////
-// le main code
-///////////////////////////////////////////////////
+/**
+ Set up Error Text and Navigator
+*/
(function() {
var ua = navigator.userAgent,
@@ -30,19 +30,13 @@ var Log = {
};
-function Listener(){
-}
-Listener.prototype.onCall = function(node, eventInfo, e, listenerFunction){
- // do nothing
-}
-
function GraphFlow(){
/////////////////////////////////////////////
// VARIABLES //
/////////////////////////////////////////////
- //var that = this;
+ var visContainer = 'infovis';
/** Color Palettes */
var nodeFillColor = [];
@@ -59,7 +53,7 @@ function GraphFlow(){
edgeColor = "#114270",
edgeColorFocus = "#0098BE";
- /** Icon Pathes */
+ /** Icon Images */
var nodeIcons = [];
/** Overall size modifier: the width of node labels in pixels */
@@ -100,20 +94,106 @@ function GraphFlow(){
var mouseOverNode = false;
var mouseOverEdge = false;
- /** A hashtable of mouseEvents to arrays of functions that
+ /** A hashtable of mouse and node events to arrays of functions that
should happen on these events
*/
var listener = [];
+ /** Can be changed to allow or prohibit node movement or creation */
+ var readOnly = {'deleteCreate' : true,
+ 'move' : true};
+
+ /** Options concerning the grid.
+
+ var grid = {'size' : 32,
+ 'visible': true,
+ 'snap' : false,
+ 'color' : '#0000FF'};*/
+
+ /** Stores information about the canvas, such as its dimensions and its position
+ */
+ var navi = { 'width' : document.getElementById(visContainer).clientWidth,
+ 'height': document.getElementById(visContainer).clientHeight,
+ 'centerX' : 0,
+ 'centerY' : 0,
+ 'dragX' : null,
+ 'dragY' : null,
+ 'draggedNodes' : null};
+
/////////////////////////////////////////////
// FUNCTIONS //
/////////////////////////////////////////////
+ /**
+ Scales and centers the graph to fit the space provided by the container
+ in which it is drawn.
+ */
+ this.scaleToFit = function(){
- this.scaleGraphToFit = function(){
- //fd.canvas.scaleOffsetX = 10;
+ // do nothing if the graph is empty
+ if(jsonCapacity.occupied == 0){
+ return;
}
+ // init loop variables
+ var data = json[0].data,
+ width = data.$width/2,
+ height = data.$height/2;
+
+ var left = data.$xPos - width,
+ right = data.$xPos + width,
+ top = data.$yPos - height,
+ bottom = data.$yPos + height;
+
+ // init the outer bounds of the displayed graph
+ var leftMost = left,
+ rightMost = right,
+ topMost = top,
+ bottomMost = bottom;
+
+ // calculate the outer bounds of the displayed graph
+ for(var n = 1, l= jsonCapacity.occupied; n < l; n++){
+ data = json[n].data,
+ width = data.$width/2,
+ height = data.$height/2;
+
+ left = data.$xPos - width,
+ right = data.$xPos + width,
+ top = data.$yPos - height,
+ bottom = data.$yPos + height;
+
+ // update bounds
+ if(left < leftMost){
+ leftMost = left;
+ }
+ if(right > rightMost){
+ rightMost = right;
+ }
+ if(top < topMost){
+ topMost = top;
+ }
+ if(bottom > bottomMost){
+ bottomMost = bottom;
+ }
+ }
+
+ // scaling values
+ var oldScale = fd.canvas.scaleOffsetX,
+ scaleX = navi.width / (rightMost - leftMost + 4*vertexLabelSize),
+ scaleY = navi.height / (bottomMost - topMost +4*vertexLabelSize)
+ scale = Math.min(scaleX, scaleY) / oldScale;
+
+ // translation values
+ var midX = (leftMost + rightMost) / 2,
+ midY = (topMost + bottomMost) / 2 -vertexLabelSize;
+
+ // translate to origin, scale, and translate to the center of the graph
+ fd.canvas.translate( -fd.canvas.translateOffsetX/oldScale, -fd.canvas.translateOffsetY/oldScale);
+ fd.canvas.scale(scale, scale);
+ fd.canvas.translate( -midX, -midY);
+ }
+
+
/**
Assigns an iconPath to a type of node. Needs a refresh() to take effect.
@param nodeType - the type of the node. Typically 'Repository',
@@ -124,26 +204,30 @@ function GraphFlow(){
this.setNodeIcon = function(nodeType, path){
if(path == null){
delete nodeIcons[nodeType];
+ //TODO: adjust shrink width
}
else{
// if nodes were already created, we need to
// adjust their width and iconPath
if(nodeIcons[nodeType] == undefined){
- var addSize = 6* vertexLabelSize,
+ var icon = Image();
+ addSize = 6* vertexLabelSize,
addPortSize = addSize / 2,
max = jsonCapacity.max;
+ icon.src = path;
+
var data, portData, portCount, addPortSizeRel;
for(var n = 0, l = jsonCapacity.occupied; n < l; n++){
// adjust node width
data = json[n].data;
if(data.$nodeType == nodeType){
- data.$icon = path;
+ data.$icon = icon;
data.$width += addSize;
portCount = data.$portCount;
// adjust port positions
- for(var p = data.$portIndex+max, s = p+portCount+1; p < s; p++){
+ for(var p = data.$portIndex+max, s = p+portCount; p < s; p++){
portData = json[p].data;
if(portData.$type == "inputPort"){
addPortSizeRel = -addPortSize;
@@ -158,7 +242,7 @@ function GraphFlow(){
}
}
}
- nodeIcons[nodeType] = path;
+ nodeIcons[nodeType] = icon;
}
}
@@ -212,7 +296,7 @@ function GraphFlow(){
dot+= '<TR><TD COLSPAN="2" HEIGHT="'+(2.5*vertexLabelSize)+'"></TD></TR><TR>\n';
var portIndex = nodeFamily.data.$jsonIndex+2,
- lastPortIndex = nodeFamily.data.$jsonIndex+1+ nodeFamily.data.$portCount;
+ lastPortIndex = nodeFamily.data.$jsonIndex+ nodeFamily.data.$portCount;
var port = json[portIndex];
if(port.data.$type == "inputPort"){
@@ -323,8 +407,11 @@ function GraphFlow(){
this.refresh = function(){
// reload graph
var mouseIndex = jsonCapacity.max;
+
fd.loadGraphFlowJSON(json, mouseIndex);
fd.plot();
+
+ // set the mouseNode to the freshly created graph node
mouseNode = fd.graph.getNode(json[mouseIndex].id);
}
@@ -360,24 +447,29 @@ function GraphFlow(){
Calls all listener that are registered under the eventName.
@param eventName - see 'addListener()'
@param arguments - an array of arguments. For mouseEvents it is [node, eventInfo, e],
- for nodeEvents it is [nodeID],
- and for edgeEvents it is [sourceNodeID, targetNodeID, sourcePortID, targetPortID]
+ for nodeEvents it is [node],
+ and for edgeEvents it is [sourceNode, targetNode, sourcePort, targetPort]
@return true if an editor action is permitted
*/
function callListener(eventName, arguments){
- //Log.write("call "+eventName+" "+arguments.length + " ("+Math.random()+")");
var lArr = listener[eventName];
- var permitted = true;
- var testval;
- if(lArr == undefined){
+ if(!lArr){
return true;
}
+
+ var permitted = true;
+ var testval;
+
// iterate through all listener this event concerns
+
+ // mouse listener functions with 3 arguments (node, eventInfo, e)
if(arguments.length == 3){
for(var l=0; l < lArr.length; l++){
lArr[l](arguments[0], arguments[1], arguments[2]);
}
+
+ // node listener functions with 1 argument (node)
}else if(arguments.length == 1){
for(var l=0; l < lArr.length; l++){
testval = lArr[l](arguments[0]);
@@ -385,6 +477,8 @@ function GraphFlow(){
permitted = false;
}
}
+
+ // edge listener functions with 4 arguments (sourceNode, targetNode, sourcePort, targetPort)
}else if(arguments.length == 4){
for(var l=0; l < lArr.length; l++){
testval = lArr[l](arguments[0], arguments[1], arguments[2], arguments[3]);
@@ -397,7 +491,7 @@ function GraphFlow(){
}
/**
- Adds a listener that forbids edge creation if...
+ Adds a listener that prohibits edge creation if...
... an edge with the same source and target exists.
... the target node is the source node.
... the source and target node are of the same port type.
@@ -453,7 +547,6 @@ function GraphFlow(){
node = json[n];
nodeFunction(node);
}
- alert(json.length);
for(var n=jsonCapacity.max+1, l= json.length; n < l; n++){
node = json[n];
nodeFunction(node);
@@ -489,61 +582,30 @@ function GraphFlow(){
}
/**
- Changes all colors of the graph. Colors that should not be changed are given null as argument.
+ Permits or prohibits node and edge deletion/creation and hides the cross
+ accordingly.
+ @param deleteCreate - if true, one can change the graph in any way
+ @param move - if true, one can change the graph in any way
*/
- /*
- this.setColors = function(nodeFocus, edgeFocus, edge, filterFill, filterStroke, readerFill, readerStroke, repoFill, repoSroke){
-
- var nodeFillColor = [];
- nodeFillColor['Filter'] = "#DEDEDE";
- nodeFillColor['Repository'] = "#EFAC6A";
- nodeFillColor['Reader'] = "#6AEF73";
-
- var nodeStrokeColor = [];
- nodeStrokeColor['Filter'] = "#4D4D4D";
- nodeStrokeColor['Repository'] = "#735332";
- nodeStrokeColor['Reader'] = "#327337";
- nodeStrokeColor['inputPort'] = "#AA0000";
- nodeStrokeColor['outputPort'] = "#AA0000";
- nodeStrokeColor['repositoryPort'] = "#AA0000";
+ this.setReadOnly = function(deleteCreate, move){
- var nodeColorFocus = "#0098BE",
- edgeColor = "#114270",
- edgeColorFocus = "#0098BE";
+ if(deleteCreate != readOnly.deleteCreate){
+ // set crossBoxes (in)visible
+ var data;
+ for(var n=jsonCapacity.max+1, l= json.length; n < l; n++){
+ data = json[n].data;
+ if(data.$type == "crossBox"){
+ data.$visible = deleteCreate;
+ }
+ }
+ readOnly.deleteCreate = deleteCreate;
+ }
- }*/
-
- /**
- Adds a repository node to the graph.
- @param nodeFamily - describes some properties of the node: (id, name, nodeClass, tooltip)
- @param outputPort - properties of the single output port(id, name, tooltip)
- */
- this.addRepository = function(xPosition, yPosition, nodeFamily, inputPort){
- addNode(xPosition, yPosition, nodeFamily, null, [inputPort], null, "Repository");
- }
-
- /**
- Adds a reader node to the graph.
- @param nodeFamily - describes some properties of the node: (id, name, nodeClass, tooltip)
- @param repositoryPorts - an array of properties for the repository ports (id, name, tooltip)
- @param outputPorts - an array of properties for the output ports (id, name, tooltip)
- */
- this.addReader = function(xPosition, yPosition, nodeFamily, repositoryPorts, outputPorts){
- addNode(xPosition, yPosition, nodeFamily, repositoryPorts, null, outputPorts, "Reader");
- }
-
- /**
- Adds a filter node to the graph.
- @param nodeFamily - describes some properties of the node: (id, name, nodeClass, tooltip)
- @param outputPort - properties of the single output port(id, name, tooltip)
- @param repositoryPorts - an array of properties for the repository ports (id, name, tooltip)
- @param inputPorts - an array of properties for the input ports (id, name, tooltip)
- @param outputPorts - an array of properties for the output ports (id, name, tooltip)
- */
- this.addFilter = function(xPosition, yPosition, nodeFamily, repositoryPorts, inputPorts, outputPorts){
- addNode(xPosition, yPosition, nodeFamily, repositoryPorts, inputPorts, outputPorts, "Filter");
+ if(move != undefined){
+ readOnly.move = move;
+ }
}
-
+
/**
Adds a Node to the graph.
@param nodeFamily - describes some properties of the node: (id, name, nodeClass, tooltip)
@@ -632,21 +694,25 @@ function GraphFlow(){
json[occ] = newNode;
// add closeButton
- var closeButton ={
- "adjacencies": [],
- "data": {
- "$dim": size,
- "$type": "crossBox",
- "$family": newNode,
- "$xPos": xPosition+ width/2,
- "$yPos": yPosition- height/2,
- "$color": strokeColor,
- "$fillColor": nodeColor,
- },
- "id": nodeFamily.id+".close",
- "name": "x"
- };
+ var closeButton ={
+ "adjacencies": [],
+ "data": {
+ "$dim": size,
+ "$type": "crossBox",
+ "$family": newNode,
+ "$xPos": xPosition+ width/2,
+ "$yPos": yPosition- height/2,
+ "$relativeX": width/2,
+ "$relativeY": -height/2,
+ "$color": strokeColor,
+ "$fillColor": nodeColor,
+ "$visible":true
+ },
+ "id": nodeFamily.id+".close",
+ "name": "x"
+ };
json.push(closeButton);
+ json[occ].data.$portCount++;
// Loop Info:
// This loop adds all port types to the temporary port array.
@@ -731,6 +797,7 @@ function GraphFlow(){
@param nodeFamily - the node which is to be removed
*/
this.removeNode = function(nodeFamily, forced){
+ //fd.graph.removeNode(node.id);
// call listener
if(!forced && !callListener("onRemoveNode", [nodeFamily])){
return;
@@ -746,7 +813,7 @@ function GraphFlow(){
delete json[deleteFrom];
// delete ports
- for(var n = deleteFrom+1; n <= deleteUntil; n++){
+ for(var n = deleteFrom+1; n < deleteUntil; n++){
var portID = json[n].id;
// remove all incoming edges
@@ -761,7 +828,7 @@ function GraphFlow(){
}
// remove space that was used for ports
- var deletionSum = deleteUntil-deleteFrom+1;
+ var deletionSum = deleteUntil-deleteFrom;
json.splice(deleteFrom, deletionSum);
selectedNode = null;
@@ -801,47 +868,81 @@ function GraphFlow(){
return;
}
- /**
- Moves a node to the specified position.
- @param nodeFamily - the node which is to be moved
- @param x - desired x-Position
- @param y - desired y-Position
+ /**
+ Prepares a drag opertion for a node, by memorizing all corresponding graph nodes.
+ This speeds up the moveNode() function considerably.
*/
- function moveNode(nodeFamily, x, y){
- var familyIndex = nodeFamily.data.$jsonIndex,
- moveFrom = nodeFamily.data.$portIndex+ jsonCapacity.max,
- moveUntil = moveFrom+ nodeFamily.data.$portCount,
- dim = nodeFamily.data.$dim;
-
- // set pos of family box
- nodeFamily.pos.setc(x, y);
- json[familyIndex].data.$xPos = x;
- json[familyIndex].data.$yPos = y;
+ function prepareNodeMove(node){
+ var nodes = [];
+ var familyIndex = node.data.$jsonIndex,
+ moveFrom = node.data.$portIndex+ jsonCapacity.max,
+ moveUntil = moveFrom+ node.data.$portCount;
+
+ // memorize the nodeFamily
+ nodes.push(node);
- // set pos of close button
- var node = fd.graph.getNode(json[moveFrom].id),
- nodeX = x + nodeFamily.data.$width/2,
- nodeY = y - nodeFamily.data.$height/2;
+ // memorize all ports and the crossbox
+ var subnode;
+ for(var i= moveFrom; i< moveUntil; i++){
+ subnode = fd.graph.getNode(json[i].id);
+ nodes.push(subnode);
- node.pos.setc(nodeX, nodeY);
- json[moveFrom].data.$xPos = nodeX;
- json[moveFrom].data.$yPos = nodeY;
- moveFrom++;
+ }
- // set pos of ports
- for(var i= moveFrom; i<= moveUntil; i++){
- node = fd.graph.getNode(json[i].id);
+ navi.draggedNodes = nodes;
+ }
+
+ /**
+ Moves a nodeFamily and its subnodes to the specified position.
+ */
+ function moveNode(x, y){
+ var nodes = navi.draggedNodes;
+
+ // set position of nodeFamily
+ var node = nodes[0],
+ dim = node.data.$dim;
+ node.pos.setc(x, y);
+
+ // set position of ports and crossbox
+ var nodeX, nodeY;
+ for(var i= 1, l = nodes.length; i < l; i++){
+ node = nodes[i];
- if(node.data.$relativeX != undefined){
+ if(node.data.$relativeX){
nodeX = x+ node.data.$relativeX;
nodeY = y+ node.data.$relativeY;
}
node.pos.setc(nodeX,nodeY);
- json[i].data.$xPos = nodeX;
- json[i].data.$yPos = nodeY;
- nodeY+= dim;
+ nodeY += dim;
}
}
+
+ /**
+ Saves the position of a node, so that it will be placed there again,
+ when the graph is altered.
+ */
+ function saveNodeMove(){
+ var node = navi.draggedNodes[0],
+ familyIndex = node.data.$jsonIndex,
+ moveFrom = node.data.$portIndex+ jsonCapacity.max-1,
+ nodes = navi.draggedNodes,
+ pos = node.pos.getc(true);
+
+ // set pos of family box
+ var data= json[familyIndex].data;
+ data.$xPos = pos.x;
+ data.$yPos = pos.y;
+
+ // set pos of ports
+ for(var i= 1, l = nodes.length; i < l; i++){
+ data = json[moveFrom+i].data;
+ pos = nodes[i].pos.getc(true);
+
+ data.$xPos = pos.x;
+ data.$yPos = pos.y;
+ }
+ navi.draggedNodes = null;
+ }
/**
@@ -1062,7 +1163,7 @@ function GraphFlow(){
// Animations overwrite each other. If we let this animation
// execute while we delete an edge, the onComplete() function
// of the edge animation will not be called
- fd.fx.animate({
+ fd.animate({
modes: ['edge-property:lineWidth:color',
'node-property:color'],
transition: trans,
@@ -1091,7 +1192,7 @@ function GraphFlow(){
fd = new $jit.FlowGraph({
//id of the visualization container
- injectInto: 'infovis',
+ injectInto: visContainer,
//Enable zooming and panning
//with scrolling and DnD
Navigation: {
@@ -1108,7 +1209,6 @@ function GraphFlow(){
// JSON structure.
Node: {
overridable: true,
- //color: "#FFFFFF",
CanvasStyles: {
lineWidth: 2
}
@@ -1161,6 +1261,10 @@ function GraphFlow(){
* EVENT: OnDragEnd
*/
onDragEnd: function(node, eventInfo, e) {
+ if(node.data.$type == "nodeFamily"){
+ saveNodeMove();
+ }
+ fd.plot();
callListener("onDragEnd", [node, eventInfo, e]);
},
@@ -1192,10 +1296,9 @@ function GraphFlow(){
mouseOverEdge = !mouseOverNode;
setHighlight(node);
-
- if(node.data.$type == "nodeFamily"){
+ if(readOnly.move && node.data.$type == "nodeFamily"){
fd.canvas.getElement().style.cursor = 'move';
- }else{
+ }else if (readOnly.deleteCreate){
fd.canvas.getElement().style.cursor = 'pointer';
}
callListener("onMouseEnter", [node, eventInfo, e]);
@@ -1205,6 +1308,15 @@ function GraphFlow(){
* EVENT: OnMouseMove
*/
onMouseMove: function(node, eventInfo, e) {
+ /*if(!node && navi.isDragging){
+ var mousePos = eventInfo.getPos(),
+ deltaX = mousePos.x - navi.dragX,
+ deltaY = mousePos.y - navi.dragY;
+ fd.canvas.translate(deltaX, deltaY);
+ deltaX = mousePos.x;
+ deltaY = mousePos.y;
+ }
+ */
// are we dragging an edge with the mouse ?
if(selectedNode != null){
var pos = eventInfo.getPos();
@@ -1230,18 +1342,27 @@ function GraphFlow(){
* EVENT: OnDragStart
*/
onDragStart: function(node, eventInfo, e) {
+ var mousePos = eventInfo.getPos();
+
if(node == false || node.id == mouseNode.id ||
node.data.$type != "nodeFamily"){
+ navi.dragX = e.pageX;
+ navi.dragY = e.pageY;
+ navi.isDragging = true;
return;
}
// memorize where we drag the node instead on centering
// it to the mouse pointer
- var mousePos = eventInfo.getPos(),
- nodePos = node.pos.getc(true);
+ var nodePos = node.pos.getc(true);
- mouseNode.data.$dragX = nodePos.x - mousePos.x;
- mouseNode.data.$dragY = nodePos.y - mousePos.y;
+ navi.dragX = nodePos.x - mousePos.x;
+ navi.dragY = nodePos.y - mousePos.y;
+
+ // we memorize all subnodes of the dragged nodefamily, to speed up
+ // dragging
+ prepareNodeMove(node);
+
callListener("onDragStart", [node, eventInfo, e]);
},
@@ -1249,15 +1370,13 @@ function GraphFlow(){
* EVENT: OnDragMove
*/
onDragMove: function(node, eventInfo, e) {
- if(node == false || node.id == mouseNode.id ||
- node.data.$type != "nodeFamily"){
- return;
+ if(!readOnly.move || !node ||
+ node.id == mouseNode.id || node.data.$type != "nodeFamily"){
+ return;
}
var pos = eventInfo.getPos();
-
- moveNode(node,
- pos.x+mouseNode.data.$dragX,
- pos.y+mouseNode.data.$dragY);
+ moveNode(pos.x+navi.dragX,
+ pos.y+navi.dragY);
callListener("onDragMove", [node, eventInfo, e]);
fd.plot();
@@ -1275,9 +1394,16 @@ function GraphFlow(){
* EVENT: OnClick
*/
onClick: function(node, eventInfo, e){
- var mousePos = eventInfo.getPos();
- if(mouseOverNode && node != false){
+ if(node == false){
+ var deltaX = e.pageX - navi.dragX,
+ deltaY = e.pageY - navi.dragY;
+ navi.centerX -= deltaX;
+ navi.centerY -= deltaY;
+ Log.write(" Offset:"+fd.canvas.translateOffsetX+","+fd.canvas.translateOffsetY);
+ //fd.canvas.translate(deltaX, deltaY);
+ }
+ else if(mouseOverNode && readOnly.deleteCreate){
switch(node.data.$type){
case "crossBox":
@@ -1325,7 +1451,7 @@ function GraphFlow(){
}
}
- else if(mouseOverEdge){
+ else if(mouseOverEdge && readOnly.deleteCreate){
// no selection yet
if(selectedNode == null){
selectedNode = {"id":node.data.$direction[0], "from":"outputPort", "label":node.data.$label};//nodeTo
@@ -1352,12 +1478,15 @@ function GraphFlow(){
refresh();
}
callListener("onClick", [node, eventInfo, e]);
+ navi.isDragging = false;
}
},
+
+
//Number of iterations for the FD algorithm
iterations: 0,
//Edge length
- levelDistance: 2*vertexLabelSize,
+ levelDistance: 0,
// This method is only triggered
// on label creation and only for DOM labels (not native canvas ones).
/*onCreateLabel: function(domElement, node){
@@ -1391,10 +1520,8 @@ function GraphFlow(){
var left = parseInt(style.left);
var top = parseInt(style.top);
var scale = fd.canvas.scaleOffsetX;
- var w = scale*vertexLabelSize* node.name.length;//domElement.offsetWidth;
- var h = scale*vertexLabelSize*1.65;//domElement.offsetHeight;
+ var w = scale*vertexLabelSize* node.name.length;
- // TODO: store more calculations inside a nodefamily!
var classWidth = scale*(vertexLabelSize-2)* (node.data.$nodeClass.length+2);
if(classWidth > w){
w = classWidth;
@@ -1415,97 +1542,16 @@ function GraphFlow(){
}*/
});
+ fd.setNavi(navi);
+
// load JSON data.
fd.loadGraphFlowJSON(json,jsonCapacity.max);
// compute positions
refresh();
// end
- //alert("final wut:"+fd.nodeSizeModifier);
}
// initialize graph
initGraph();
return this;
-}
-
-// test data
-
-function init(){
- var graph = GraphFlow();
- var nodecount=0;
- graph.addListener("onRightClick", function(node, info, e){
- var node2 = {"id":"Node"+(nodecount++),
- "name":"Supi",
- "nodeClass":"Repository",
- "tooltip":"look at me, i'm another node!"};
- graph.addRepository(100, 0, node2,{"name":"inputPort", "id":"ip1"});
- graph.refresh();
- });
-
- /** These listeners add a "new"-flag to a freshly added node. New nodes cannot be deleted until saved with a right click **/
- /*
- graph.addListener("onCreateNode", function(node){
- node.data.$saved = false;
- });
- graph.addListener("onRightClick", function(node, info, e){
- graph.iterateAllNodes(
- function(node){
- if(node.data.$type == "nodeFamily"){
- node.data.$saved = true;
- }
- });
- graph.refresh();
- });
- graph.addListener("onRemoveNode", function(node){
- if(node.data.$saved == false){
- alert("This node has not been saved!\n \ Right click node to save!");
- return false;
- }
- return true;
- });
- */
-
- // adds a listener that removes invalid Edges
- graph.addEdgeConstraints();
-
- // define graph by adding nodes
- var node1 = {"id":"superNode1",
- "name":"i am node",
- "nodeClass":"someFilter",
- "tooltip":"look at me, i'm a node!"};
-
- graph.addFilter(0, -100, node1,[{"name":"repoPort", "id":"rp1", "tooltip":"repo"},
- {"name":"repoPort", "id":"rp2", "tooltip":"repo"},
- {"name":"repoPort", "id":"rp3", "tooltip":"repo"}],
-
- [{"name":"inputPort","id":"ip1", "tooltip":"input goes here"},
- {"name":"inputPort","id":"ip2", "tooltip":"input goes here"},
- {"name":"inputPort","id":"ip3", "tooltip":"input goes here"},
- {"name":"inputPort","id":"ip4"},
- {"name":"inputPort","id":"ip5", "tooltip":"input goes here"},
- {"name":"inputPort","id":"ip6"}],
-
- [{"name":"outputPort", "id":"op1"}]);
-
- // add nodes after graph creation
- var node2 = {"id":"superNode2",
- "name":"Super Repo",
- "nodeClass":"Repository",
- "tooltip":"look at me, i'm another node!"};
- graph.addRepository(100, 0, node2,{"name":"inputPort", "id":"ip1"});
- var node3 = {"id":"superNode3",
- "name":"i am reader",
- "nodeClass":"Reader",
- "tooltip":"look at me, i'm another node!"};
- graph.addReader(0, 100, node3,[{"name":"repoPort", "id":"rp1"}], [{"name":"outputPort", "id":"op1"}]);
-
- graph.addEdge("superNode1.rp1", "superNode2.ip1", "I'm a label!");
-
- // add icons
- graph.setNodeIcon('Filter', 'http://icons.iconarchive.com/icons/everaldo/crystal-clear/96/Action-run-icon.png');
- graph.setNodeIcon('Reader', 'http://icons.iconarchive.com/icons/everaldo/crystal-clear/96/Filesystem-folder-yellow-icon.png');
- graph.setNodeIcon('Repository', 'http://icons.iconarchive.com/icons/everaldo/crystal-clear/96/App-ark-2-icon.png');
-
- // refresh graph to show the new nodes
- graph.refresh();
-}
+}
\ No newline at end of file
diff --git a/Kieker.WebGUI/src/main/webapp/js/jit.js b/Kieker.WebGUI/src/main/webapp/js/jit.js
index 53e0b2221aa88fd65cd061975b621b3a583a4d26..d27fb5bdd72ce7941f0ad2dd93bd46b604652135 100644
--- a/Kieker.WebGUI/src/main/webapp/js/jit.js
+++ b/Kieker.WebGUI/src/main/webapp/js/jit.js
@@ -7041,7 +7041,7 @@ Graph.Plot = {
}
})).start();
},
-
+
/*
nodeFx
@@ -7206,6 +7206,71 @@ Graph.Plot = {
node.visited = !T;
});
},
+
+ /*
+ Method: plot
+
+ Plots a <Graph>.
+
+ Parameters:
+
+ opt - (optional) Plotting options. Most of them are described in <Options.Fx>.
+
+ Example:
+
+ (start code js)
+ var viz = new $jit.Viz(options);
+ viz.fx.plot();
+ (end code)
+
+ */
+ plotGraphFlow: function(opt, animating) {
+ var viz = this.viz,
+ aGraph = viz.graph,
+ canvas = viz.canvas,
+ id = viz.root,
+ that = this,
+ ctx = canvas.getCtx(),
+ min = Math.min,
+ opt = opt || this.viz.controller;
+ //opt.clearCanvas && canvas.clear();
+
+ var root = aGraph.getNode(id);
+ if(!root) return;
+
+ var T = !!root.visited;
+ aGraph.eachNode(function(node) {
+ var nodeAlpha = node.getData('alpha');
+ node.eachAdjacency(function(adj) {
+ var nodeTo = adj.nodeTo;
+ if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
+ !animating && opt.onBeforePlotLine(adj);
+ ctx.save();
+ ctx.globalAlpha = min(nodeAlpha,
+ nodeTo.getData('alpha'),
+ adj.getData('alpha'));
+ that.plotLine(adj, canvas, animating);
+ ctx.restore();
+ !animating && opt.onAfterPlotLine(adj);
+ }
+ });
+ ctx.save();
+ if(node.drawn) {
+ !animating && opt.onBeforePlotNode(node);
+ that.plotNode(node, canvas, animating);
+ !animating && opt.onAfterPlotNode(node);
+ }
+ /*if(!that.labelsHidden && opt.withLabels) {
+ if(node.drawn && nodeAlpha >= 0.95) {
+ that.labels.plotLabel(canvas, node, opt);
+ } else {
+ that.labels.hideLabel(node, false);
+ }
+ }*/
+ ctx.restore();
+ node.visited = !T;
+ });
+ },
/*
Plots a Subtree.
@@ -17321,6 +17386,14 @@ $jit.FlowGraph = new Class( {
this.busy = false;
// initialize extras
this.initializeExtras();
+
+ // set grid and navi
+ this.grid = {'size' : 32,
+ 'visible': true,
+ 'snap' : false,
+ 'color' : '#0000FF'};
+ this.navi = false;
+
},
/*
@@ -17419,9 +17492,11 @@ $jit.FlowGraph = new Class( {
Plots the FlowGraph graph. This is a shortcut to *fx.plot*.
*/
plot: function() {
- this.fx.plot();
+ this.canvas.clear();
+ //this.drawGrid();
+ this.fx.plotGraphFlow();
},
-
+
/*
Method: animate
@@ -17431,7 +17506,60 @@ $jit.FlowGraph = new Class( {
this.fx.animate($.merge( {
modes: [ 'linear' ]
}, opt || {}));
- }
+ },
+
+ /*
+ Merhod: drawGrid
+
+ Draws a grid onto the canvas.
+ */
+ drawGrid: function(){
+ var grid = this.grid,
+ navi = this.navi;
+
+ if(!grid || !grid.visible || !navi){
+ return;
+ }
+
+ var centerX = - this.canvas.translateOffsetX,
+ centerY = - this.canvas.translateOffsetY,
+ size = grid.size,
+ width = navi.width/2,
+ height = navi.height/2,
+ left = centerX - width,
+ up = centerY - height,
+ ctx = this.canvas.getCtx();
+
+ ctx.strokeStyle = grid.color;
+ ctx.beginPath();
+
+ // draw vertical lines
+ for(var x = left - centerX % size, l = left + navi.width; x < l; x += size){
+ ctx.moveTo(x, up);
+ ctx.lineTo(x, height);
+ }
+ // draw horizontal lines
+ for(var y = up - centerY % size, l = up + navi.height; y < l; y += size){
+ ctx.moveTo(left, y);
+ ctx.lineTo(width, y);
+ }
+
+ ctx.stroke();
+ },
+
+/*
+ Method: setNavi
+
+ Performs the Force Directed algorithm incrementally.
+
+ Parameters:
+
+ grid - (object) An Object which contains grid properties such as size and color.
+ navi - (object) An Object which contains the screen dimensions and position.
+*/
+ setNavi: function(navi){
+ this.navi = navi;
+ }
});
@@ -17442,7 +17570,8 @@ $jit.FlowGraph.$extend = true;
/*
Method: calculateAnchorPoints
- Calculates the anchor points for an edge of the FlowGraph
+ Calculates the anchor points for an edge of the old FlowGraph.
+ Deprecated!
*/
FlowGraph.calculateAnchorPoints = function(nodeFrom, nodeTo){
var sizeModifier = 12;
@@ -17763,6 +17892,7 @@ $jit.FlowGraph.$extend = true;
'nodeFamily': {
'render': function(node, canvas){
+ //Log.write("render "+Math.random());
var pos = node.pos.getc(true),
width = node.getData('width'),
height = node.getData('height'),
@@ -17774,20 +17904,23 @@ $jit.FlowGraph.$extend = true;
posY = pos.y;
var ctx = canvas.getCtx();
- // draw Stroke ( in the color, specified in node properties)
- this.nodeHelper.roundRect.render('fill', {x: posX, y: posY}, width+2*strokeWidth, height+2*strokeWidth, rounded+2, canvas);
-
// fill box
ctx.fillStyle = fillColor;
this.nodeHelper.roundRect.render('fill', {x: posX, y: posY}, width, height, rounded, canvas);
+ //this.nodeHelper.rectangle.render('fill', {x: posX, y: posY}, width, height, canvas);
+
+ // draw Stroke ( in the color, specified in node properties)
+ this.nodeHelper.roundRect.render('stroke', {x: posX, y: posY}, width, height, rounded, canvas);
+ //this.nodeHelper.rectangle.render('stroke', {x: posX, y: posY}, width, height, canvas);
var tX = posX;
var img = node.data.$icon;
- if(img != undefined){
+ if(img){
tX += dim;
}
// paint name
+
var name = node.name;
var midX, midY, textWidth;
if(name != undefined){
@@ -17819,14 +17952,12 @@ $jit.FlowGraph.$extend = true;
}
// draw icon
- if(img != undefined){
- var icon = Image();
- icon.src = img;
+ if(img){
var ix = posX - textWidth - dim*1.3,
iy = posY - dim ;
- ctx.drawImage(icon, ix, iy, dim*2, dim*2);
+ ctx.drawImage(img, ix, iy, dim*2, dim*2);
}
},
@@ -17849,48 +17980,31 @@ $jit.FlowGraph.$extend = true;
*/
'crossBox': {
'render': function(node, canvas){
- //var vertexFillColor = '#F62929';
+ if(!node.data.$visible){
+ return;
+ }
var pos = node.pos.getc(true),
- size = node.getData('dim')/2,
- pe = size/5,
- bx = pos.x-size,
- by = pos.y+size,
+ size = node.getData('dim'),
+ hSize = size/2,
+ bx = pos.x - hSize,
+ by = pos.y - hSize/2,
ctx = canvas.getCtx();
- // draw close-button area
- this.nodeHelper.roundRect.render('fill', {x: bx, y: by}, size*2, size*2, size/2, canvas);
-
- // draw cross
- var yTop = by-4*pe,
- yBottom = by+4*pe,
- pe2 = 2*pe,
- pe4 = 4*pe;
-
- ctx.fillStyle = node.getData('fillColor');
-
- ctx.beginPath();
- ctx.moveTo(bx-pe4, yTop);
- ctx.lineTo(bx-pe2, yTop);
- ctx.lineTo(bx+pe4, yBottom);
- ctx.lineTo(bx+pe2, yBottom);
- ctx.closePath();
- ctx.fill();
-
- ctx.beginPath();
- ctx.moveTo(bx+pe2, yTop);
- ctx.lineTo(bx+pe4, yTop);
- ctx.lineTo(bx-pe2, yBottom);
- ctx.lineTo(bx-pe4, yBottom);
- ctx.closePath();
- ctx.fill();
+ ctx.font = 0.83 * size +"px Verdana";
+ ctx.fillText("x", bx, by);
},
'contains': function(node, pos){
-
+ if(!node.data.$visible){
+ return false;
+ }
+
var npos = node.pos.getc(true),
- size = node.getData('dim')/2;
- return Math.abs(pos.x - (npos.x-size)) <= size && Math.abs(pos.y - (npos.y + size)) <= size;
+ size = node.getData('dim')/2,
+ xN = npos.x - size/2,
+ yN = npos.y - size;
+ return Math.abs(pos.x - xN) <= size/2 && Math.abs(pos.y - yN) <= size;
}
},
@@ -17909,7 +18023,15 @@ $jit.FlowGraph.$extend = true;
// draw close-button area
this.nodeHelper.rectangle.render('fill', {x: bx, y: by+size/4}, size, size/2, canvas);
- var grid = size/8,
+ var bSize = size * 0.4;
+ bx -= size/6;
+ by += bSize;
+
+ ctx.fillStyle = node.getData('fillColor');
+ ctx.font = bSize +"px Arial Black";
+ ctx.fillText("R", bx, by);
+
+ /*var grid = size/8,
i = by + 2*grid,
b = by + grid,
h = grid/2,
@@ -17941,7 +18063,7 @@ $jit.FlowGraph.$extend = true;
ctx.lineTo(xh , by + j);
ctx.lineTo(xmh , by + j);
ctx.closePath();
- ctx.fill();
+ ctx.fill();*/
},
'contains': function(node, pos){
@@ -17962,13 +18084,21 @@ $jit.FlowGraph.$extend = true;
var pos = node.pos.getc(true),
size = node.getData('dim'),
bx = pos.x,
- by = pos.y+size/4,
+ by = pos.y,
ctx = canvas.getCtx();
// draw rectangle
- this.nodeHelper.rectangle.render('fill', {x: bx, y: by}, size, size/2, canvas);
+ this.nodeHelper.rectangle.render('fill', {x: bx, y: by+size/4}, size, size/2, canvas);
+
// draw arrow
+ /*var bSize = size * 0.4;
+ bx -= size/2;
+ by += bSize;
+ ctx.fillStyle = node.getData('fillColor');
+ ctx.font = bSize +"px Arial Black";
+ ctx.fillText(">", bx, by);*/
+ by += size/4;
var octo = size/8,
xp = bx - size/2 + octo;
ctx.fillStyle = node.getData('fillColor');
@@ -17979,6 +18109,7 @@ $jit.FlowGraph.$extend = true;
ctx.closePath();
ctx.fill();
+
},
'contains': function(node, pos){
@@ -17995,15 +18126,22 @@ $jit.FlowGraph.$extend = true;
var pos = node.pos.getc(true),
size = node.getData('dim'),
bx = pos.x,
- by = pos.y+size/4,
+ by = pos.y,
ctx = canvas.getCtx();
// draw rectangle
- this.nodeHelper.rectangle.render('fill', {x: bx, y: by}, size, size/2, canvas);
+ this.nodeHelper.rectangle.render('fill', {x: bx, y: by+size/4}, size, size/2, canvas);
+
// draw arrow
+ /*var bSize = size * 0.4;
+ bx += size/4;
+ by += bSize;
+ ctx.fillStyle = node.getData('fillColor');
+ ctx.font = bSize +"px Arial Black";
+ ctx.fillText(">", bx, by);*/
+ by += size/4;
var octo = size/8;
- //xp = bx + size/2 - octo;
ctx.fillStyle = node.getData('fillColor');
ctx.beginPath();
ctx.moveTo(bx, by - octo);
@@ -18011,7 +18149,7 @@ $jit.FlowGraph.$extend = true;
ctx.lineTo(bx, by + octo);
ctx.closePath();
ctx.fill();
-
+
},
'contains': function(node, pos){