From 938dfadc3e1ead71d418da2f508f084bf0805104 Mon Sep 17 00:00:00 2001
From: Nils Christian Ehmke <nie@informatik.uni-kiel.de>
Date: Mon, 10 Sep 2012 17:29:00 +0200
Subject: [PATCH] Updated the flow editor
---
.../view/CurrentAnalysisEditorGraphBean.java | 6 ++
.../src/main/webapp/js/flowEditor.js | 81 +++++++++++++++++--
Kieker.WebGUI/src/main/webapp/js/jit.js | 56 ++++++++++++-
3 files changed, 132 insertions(+), 11 deletions(-)
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 f687baf0..73c77ba6 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
@@ -140,6 +140,12 @@ public class CurrentAnalysisEditorGraphBean {
*/
public void declareGraph() {
RequestContext.getCurrentInstance().execute(CurrentAnalysisEditorGraphBean.JS_CMD_CREATE_GRAPH_VAR);
+ RequestContext.getCurrentInstance().execute(
+ "graph.setNodeIcon('Filter', 'http://icons.iconarchive.com/icons/everaldo/crystal-clear/96/Action-run-icon.png');");
+ RequestContext.getCurrentInstance().execute(
+ "graph.setNodeIcon('Reader', 'http://icons.iconarchive.com/icons/everaldo/crystal-clear/96/Filesystem-folder-yellow-icon.png');");
+ RequestContext.getCurrentInstance().execute(
+ "graph.setNodeIcon('Repository', 'http://icons.iconarchive.com/icons/everaldo/crystal-clear/96/App-ark-2-icon.png');");
}
/**
diff --git a/Kieker.WebGUI/src/main/webapp/js/flowEditor.js b/Kieker.WebGUI/src/main/webapp/js/flowEditor.js
index fbd72d47..bd148963 100644
--- a/Kieker.WebGUI/src/main/webapp/js/flowEditor.js
+++ b/Kieker.WebGUI/src/main/webapp/js/flowEditor.js
@@ -52,13 +52,16 @@ function GraphFlow(){
nodeStrokeColor['inputPort'] = "#AA0000";
nodeStrokeColor['outputPort'] = "#AA0000";
nodeStrokeColor['repositoryPort'] = "#AA0000";
- nodeStrokeColor['nodeFamily'] = "#4D4D4D";
- nodeStrokeColor['crossBox'] = "#4D4D4D";
+ nodeStrokeColor['nodeFamily'] = "#4D4D4D";
+ nodeStrokeColor['crossBox'] = "#4D4D4D";
var nodeColorFocus = "#0098BE",
edgeColor = "#114270",
edgeColorFocus = "#0098BE";
+ /** Icon Pathes */
+ var nodeIcons = [];
+
/** Overall size modifier: the width of node labels in pixels */
var vertexLabelSize = 12;
@@ -111,6 +114,54 @@ function GraphFlow(){
//fd.canvas.scaleOffsetX = 10;
}
+ /**
+ Assigns an iconPath to a type of node. Needs a refresh() to take effect.
+ @param nodeType - the type of the node. Typically 'Repository',
+ 'Filter', or 'Reader'
+ @param path - the path to the image. If null, an existing
+ icon will be deleted
+ */
+ this.setNodeIcon = function(nodeType, path){
+ if(path == null){
+ delete nodeIcons[nodeType];
+ }
+ else{
+ // if nodes were already created, we need to
+ // adjust their width and iconPath
+ if(nodeIcons[nodeType] == undefined){
+ var addSize = 6* vertexLabelSize,
+ addPortSize = addSize / 2,
+ max = jsonCapacity.max;
+
+ 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.$width += addSize;
+ portCount = data.$portCount;
+
+ // adjust port positions
+ for(var p = data.$portIndex+max, s = p+portCount+1; p < s; p++){
+ portData = json[p].data;
+ if(portData.$type == "inputPort"){
+ addPortSizeRel = -addPortSize;
+ }else{
+ addPortSizeRel = addPortSize;
+ }
+ if(portData.$relativeX != undefined){
+ portData.$relativeX += addPortSizeRel;
+ }
+ portData.$xPos += addPortSizeRel;
+ }
+ }
+ }
+ }
+ nodeIcons[nodeType] = path;
+ }
+ }
+
/**
Sets the mouseCursor to a new one. If the new cursor is null,
it will be reset to the default mouse cursor.
@@ -271,8 +322,10 @@ function GraphFlow(){
*/
this.refresh = function(){
// reload graph
- fd.loadGraphFlowJSON(json, jsonCapacity.max);
+ var mouseIndex = jsonCapacity.max;
+ fd.loadGraphFlowJSON(json, mouseIndex);
fd.plot();
+ mouseNode = fd.graph.getNode(json[mouseIndex].id);
}
/**
@@ -516,7 +569,8 @@ function GraphFlow(){
var countRepo = 0,
countInput = 0,
- countOutput = 0;
+ countOutput = 0,
+ iconSpace = 0;
if(repositoryPorts != null){
countRepo= repositoryPorts.length;
@@ -535,14 +589,19 @@ function GraphFlow(){
if(maxPorts > countInput && (countRepo == 0 || countOutput == 0)){
maxPorts-= 0.5;
}
+
+ // check if this nodeType has a defined icon
+ if(nodeIcons[nodeType] != undefined){
+ iconSpace = 6;
+ }
- var width = (nodeFamily.name.length+4)*vertexLabelSize,
+ var width = (nodeFamily.name.length+4+iconSpace)*vertexLabelSize,
height = size +
Math.max( 2*size, size/2 + maxPorts * size);
// the classname may be longer than the diplayed name
if( nodeFamily.nodeClass != undefined){
- width = Math.max(width, (nodeFamily.nodeClass.length+6)*(vertexLabelSize-2));
+ width = Math.max(width, (nodeFamily.nodeClass.length+6+iconSpace)*(vertexLabelSize-4));
}
// add big node box
@@ -556,6 +615,7 @@ function GraphFlow(){
"$jsonIndex": occ,
"$portCount": countRepo+countInput+countOutput,
"$portIndex": json.length - max,
+ "$icon": nodeIcons[nodeType],
"$width": width,
"$height": height,
"$color": strokeColor,
@@ -1300,7 +1360,7 @@ function GraphFlow(){
levelDistance: 2*vertexLabelSize,
// This method is only triggered
// on label creation and only for DOM labels (not native canvas ones).
- onCreateLabel: function(domElement, node){
+ /*onCreateLabel: function(domElement, node){
// do not add labels if it is a dummy element
// instead save pointer to domElement
if(node.id == "#DUMMY_MOUSE_NODE"){
@@ -1352,7 +1412,7 @@ function GraphFlow(){
var fontSize= scale*1.65*(vertexLabelSize-2);
domElement.innerHTML += "<div style=\"font-size:"+fontSize+"px\"> <"+node.data.$nodeClass+">";
}
- }
+ }*/
});
// load JSON data.
@@ -1440,6 +1500,11 @@ function init(){
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();
}
diff --git a/Kieker.WebGUI/src/main/webapp/js/jit.js b/Kieker.WebGUI/src/main/webapp/js/jit.js
index 0ef47b26..53e0b222 100644
--- a/Kieker.WebGUI/src/main/webapp/js/jit.js
+++ b/Kieker.WebGUI/src/main/webapp/js/jit.js
@@ -17766,7 +17766,8 @@ $jit.FlowGraph.$extend = true;
var pos = node.pos.getc(true),
width = node.getData('width'),
height = node.getData('height'),
- rounded = node.getData('dim')/4,
+ dim = node.getData('dim'),
+ rounded = dim/4,
strokeWidth = 2,
fillColor = node.getData('fillColor'),
posX = pos.x ,
@@ -17779,6 +17780,55 @@ $jit.FlowGraph.$extend = true;
// fill box
ctx.fillStyle = fillColor;
this.nodeHelper.roundRect.render('fill', {x: posX, y: posY}, width, height, rounded, canvas);
+
+ var tX = posX;
+ var img = node.data.$icon;
+ if(img != undefined){
+ tX += dim;
+ }
+
+ // paint name
+ var name = node.name;
+ var midX, midY, textWidth;
+ if(name != undefined){
+ ctx.fillStyle = node.getData('color');
+ ctx.font = 0.83 * dim +"px Lucida Console";
+
+ textWidth = ctx.measureText(name).width/2;
+ midX = tX - textWidth;
+ midY = posY;
+
+ ctx.fillText(name, midX, midY);
+ }
+
+ // paint class
+ var nodeClass = node.data.$nodeClass;
+ if(nodeClass != undefined){
+ nodeClass = "<"+nodeClass+">";
+ ctx.font = 0.83 * (dim-4) + "px Lucida Console";
+
+ var classWidth = ctx.measureText(nodeClass).width/2;
+ midX = tX - classWidth;
+ midY += dim * 0.83;
+
+ ctx.fillText(nodeClass, midX, midY);
+
+ if(textWidth < classWidth){
+ textWidth = classWidth;
+ }
+ }
+
+ // draw icon
+ if(img != undefined){
+ var icon = Image();
+ icon.src = img;
+
+ var ix = posX - textWidth - dim*1.3,
+ iy = posY - dim ;
+
+ ctx.drawImage(icon, ix, iy, dim*2, dim*2);
+ }
+
},
'contains': function(node, pos){
@@ -18082,7 +18132,7 @@ $jit.FlowGraph.$extend = true;
// add the label
// apparently this throws an error on FireFox...
- var label = adj.data.$label;
+ /*var label = adj.data.$label;
if(label != undefined){
var ctx = canvas.getCtx();
ctx.font = (1.23 * dim)+"px Arial";
@@ -18090,7 +18140,7 @@ $jit.FlowGraph.$extend = true;
var midX = (from.x + to.x - ctx.measureText(label).width) / 2,
midY = (from.y + to.y -dim) / 2;
ctx.fillText(label, midX, midY);
- }
+ }*/
},
'contains': function(adj, pos) {
return false;
--
GitLab