Skip to content

Commit

Permalink
doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrelino
adrelino committed Dec 23, 2016
1 parent be2daba commit bcc507c
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 97 deletions.
145 changes: 78 additions & 67 deletions implementation/library-d3-svg/js/GraphDrawer.js
View file
Expand Up @@ -3,68 +3,82 @@
* Aus dem TUM Styleguide.
* @type Object
*/
var const_Colors = {NodeFilling: "#98C6EA", // Pantone 283, 100%
NodeBorder: "#0065BD", // Pantone 300, 100%, "TUM-Blau"
NodeBorderHighlight: "#C4071B", // Helles Rot 100% aus TUM Styleguide
NodeFillingHighlight: "#73B78D", // Dunkelgrün 55 % aus TUM Styleguide
NodeFillingLight: "#00c532", // Dunkelgrün 55 % aus TUM Styleguide
NodeFillingQuestion: "#C4071B", // Helles Rot 100% aus TUM Styleguide
EdgeHighlight1: "#C4071B", // Helles Rot 100% aus TUM Styleguide
EdgeHighlight2: "#73B78D", // Dunkelgrün 55 % aus TUM Styleguide
EdgeHighlight3: "#73B78D", // Dunkelgrün 55 % aus TUM Styleguide
EdgeHighlight4: "#007C30", // Dunkelgrün 100 % aus TUM Styleguide
RedText: "#C4071B", // Helles Rot 100% aus TUM Styleguide
GreenText: "#007C30", // Dunkelgrün 100 % aus TUM Styleguide
var const_Colors = {
NodeFilling: "#98C6EA", // Pantone 283, 100%
NodeBorder: "#0065BD", // Pantone 300, 100%, "TUM-Blau"
NodeBorderHighlight: "#C4071B", // Helles Rot 100% aus TUM Styleguide
NodeFillingHighlight: "#73B78D", // Dunkelgrün 55 % aus TUM Styleguide
NodeFillingLight: "#00c532", // Dunkelgrün 55 % aus TUM Styleguide
NodeFillingQuestion: "#C4071B", // Helles Rot 100% aus TUM Styleguide
EdgeHighlight1: "#C4071B", // Helles Rot 100% aus TUM Styleguide
EdgeHighlight2: "#73B78D", // Dunkelgrün 55 % aus TUM Styleguide
EdgeHighlight3: "#73B78D", // Dunkelgrün 55 % aus TUM Styleguide
EdgeHighlight4: "#007C30", // Dunkelgrün 100 % aus TUM Styleguide
RedText: "#C4071B", // Helles Rot 100% aus TUM Styleguide
GreenText: "#007C30", // Dunkelgrün 100 % aus TUM Styleguide
PQColor : "#FFFF70", // Helles Gelb
StartNodeColor : "#33CC33", // Dunklgrün
CurrentNodeColor : "#C4071B", // Helles Rot
FinishedNodeColor : "#73B78D", // Wie EdgeHighlight2
ShortestPathColor : "#73B78D", // Wie EdgeHighlight2
UnusedEdgeColor : "#0065BD", // Wie NodeBorder
NormalEdgeColor : "#000000" // Schwarz
};
};

/**
* Standardgröße eines Knotens
* @type Number
*/
var global_KnotenRadius = 15; // Radius der Knoten
var global_KnotenRadius = 15;

/**
* Standardaussehen einer Kante.
* @type Object
*/
var global_Edgelayout = {'arrowAngle' : Math.PI/8, // Winkel des Pfeilkopfs relativ zum Pfeilkörper
'arrowHeadLength' : 15, // Länge des Pfeilkopfs
'lineColor' : "black", // Farbe des Pfeils
'lineWidth' : 2, // Dicke des Pfeils
'font' : 'Arial', // Schrifart
'fontSize' : 14, // Schriftgrösse in Pixeln
'isHighlighted': false, // Ob die Kante eine besondere Markierung haben soll
'progressArrow': false, // Zusätzlicher Animationspfeil
'progressArrowPosition': 0.0, // Position des Animationspfeils
'progressArrowSource': null, // Animationspfeil Source Knoten
'progressArrowTarget': null // Animationspfeil Target Knoten
};
var global_Edgelayout = {
'arrowAngle' : Math.PI/8, // Winkel des Pfeilkopfs relativ zum Pfeilkörper
'arrowHeadLength' : 15, // Länge des Pfeilkopfs
'lineColor' : "black", // Farbe des Pfeils
'lineWidth' : 2, // Dicke des Pfeils
'font' : 'Arial', // Schrifart
'fontSize' : 14, // Schriftgrösse in Pixeln
'isHighlighted': false, // Ob die Kante eine besondere Markierung haben soll
'progressArrow': false, // Zusätzlicher Animationspfeil
'progressArrowPosition': 0.0, // Position des Animationspfeils
'progressArrowSource': null, // Animationspfeil Source Knoten
'progressArrowTarget': null // Animationspfeil Target Knoten
};

/**
* Standardaussehen eines Knotens.
* @type Object
*/
var global_NodeLayout = {'fillStyle' : const_Colors.NodeFilling, // Farbe der Füllung
'nodeRadius' : 15, // Radius der Kreises
'borderColor' : const_Colors.NodeBorder, // Farbe des Rands (ohne Markierung)
'borderWidth' : 2, // Breite des Rands
'fontColor' : 'black', // Farbe der Schrift
'font' : 'bold', // Schriftart
'fontSize' : 14 // Schriftgrösse in Pixeln
};
var global_NodeLayout = {
'fillStyle' : const_Colors.NodeFilling, // Farbe der Füllung
'nodeRadius' : 15, // Radius der Kreises
'borderColor' : const_Colors.NodeBorder, // Farbe des Rands (ohne Markierung)
'borderWidth' : 2, // Breite des Rands
'fontColor' : 'black', // Farbe der Schrift
'font' : 'bold', // Schriftart
'fontSize' : 14 // Schriftgrösse in Pixeln
};

/**
* Helper function to return a string representaiton of SVG's translate tranform
*/
function translate(x,y){
return "translate("+x+","+y+")";
}

/**
* Global map where we save the GraphDrawer instances. Used when saving svg to disc.
*/
GraphAlgos = d3.map();

/**
* The base class of a Network visualization of a graph. Based on D3 and SVG.
* Graph Editors and Graph Algorithms should inherit from this class.
*/
GraphDrawer = function(svgOrigin,extraMargin,transTime){

/////////////////
Expand All @@ -81,13 +95,14 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
var wS = global_NodeLayout['borderWidth'];

var margin = {
top: global_KnotenRadius+wS+ (extraMargin.top || 10),
right: global_KnotenRadius+wS,
bottom: global_KnotenRadius+wS,
left: global_KnotenRadius+wS +(extraMargin.left || 0)}
top: global_KnotenRadius+wS+ (extraMargin.top || 10),
right: global_KnotenRadius+wS,
bottom: global_KnotenRadius+wS,
left: global_KnotenRadius+wS +(extraMargin.left || 0)
}

width = xRange - margin.left - margin.right,
height = yRange - margin.top - margin.bottom;
var width = xRange - margin.left - margin.right,
var height = yRange - margin.top - margin.bottom;

this.height = height;
this.width = width;
Expand Down Expand Up @@ -119,9 +134,10 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){

var transform = function(d){
return translate(this.x(this.nodeX(d)),this.y(this.nodeY(d)));
}
transform = transform.bind(this);
}; transform = transform.bind(this);

//fit the graph extend in a smaller window. needed for algorithm tab
//since there the network graph is only half as wide as in the graph editor tab.
NOSQUEEZE=false;
this.squeeze = function(){
if(NOSQUEEZE) return; //define flag for debug
Expand All @@ -133,19 +149,14 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
}
}

//somehow we get old copies of nodes in d where the state is outdated
//-> workaround: get the correct node from the Graph instance using its id
var xfun = function(d){
return this.x(this.nodeX(Graph.instance.nodes.get(d.id) || d));
}
}; xfun = xfun.bind(this);


var yfun = function(d){
return this.y(this.nodeY(Graph.instance.nodes.get(d.id) || d));
}

xfun = xfun.bind(this);

yfun = yfun.bind(this);
}; yfun = yfun.bind(this);

function lineAttribs(d){
var attr = { x1:xfun(d.start), y1:yfun(d.start), x2:xfun(d.end), y2:yfun(d.end)};
Expand All @@ -159,10 +170,11 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
else d3.select(this).attr(attr);
};



/////////////////
//PRIVILEDGED


this.clear = function(){
svg_nodes.selectAll("g").remove();
svg_links.selectAll("g").remove();
Expand All @@ -182,6 +194,9 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
return "translate(" + (pos[0]-margin.left) + "," + (pos[1]-margin.top) + ")";
}

/**
* D3's Data Join of node data with their visualization (circles)
*/
this.updateNodes = function(){

// DATA JOIN
Expand Down Expand Up @@ -252,7 +267,9 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
} //end updateNodes()



/**
* D3's Data Join of edge data with their visualization (lines)
*/
this.updateEdges = function(){

var selection = svg_links.selectAll(".edge")
Expand Down Expand Up @@ -322,7 +339,6 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){

}


//initialize //TODO: is called twice when we init both tabs at the same time
if(Graph.instance==null){
//calls registered event listeners when loaded;
Expand All @@ -332,31 +348,28 @@ GraphDrawer = function(svgOrigin,extraMargin,transTime){
console.log("error loading graph instance "+error + " from " + filename +" text: "+text);
});
}

} //end constructor GraphDrawer


/**
* The main function which triggers updates to node and edge selections.
*/
GraphDrawer.prototype.update= function(){
this.updateNodes();
this.updateEdges();
}

GraphDrawer.prototype.getType= function(){
console.log(this.type);
}

/**
* Callback functions to be overwritten to style the graph
*/
GraphDrawer.prototype.onNodesEntered = function(selection) {
// console.log(selection[0].length + " nodes entered")
}

GraphDrawer.prototype.onNodesUpdated = function(selection) {
// console.log(selection[0].length + " nodes updated")
}

GraphDrawer.prototype.onEdgesEntered = function(selection) {
// console.log(selection[0].length + " edges entered")
}

GraphDrawer.prototype.onEdgesUpdated = function(selection) {
// console.log(selection[0].length + " edges entered")
}
Expand All @@ -382,17 +395,15 @@ GraphDrawer.prototype.nodeLabel = function(d){
return d.id;
}

/**
* Position of node
*/
GraphDrawer.prototype.nodeX = function(d){
if(!d){
console.log(d);
}
return d.x;
};

GraphDrawer.prototype.nodeY = function(d){
return d.y;
};

GraphDrawer.prototype.nodePos = function(d){
var obj = {};
obj.x = this.x(this.nodeX(d));
Expand Down
45 changes: 15 additions & 30 deletions implementation/library-d3-svg/js/GraphEditor.js
View file
@@ -1,15 +1,3 @@
// function SpaceShip(scene, x, y) {
// Actor.call(this, scene, x, y);
// this.points = 0;
// }
// Calling the Actor constructor first ensures that all the instance properties created by Actor are added to the new object. After that, SpaceShip can define its own instance properties such as the ship’s current points count.
// In order for SpaceShip to be a proper subclass of Actor, its prototype must inherit from Actor.prototype. The best way to do the extension is with ES5’s Object.create:
// SpaceShip.prototype = Object.create(Actor.prototype);

// Things to Remember
// - Call the superclass constructor explicitly from subclass construc- tors, passing this as the explicit receiver.
// - Use Object.create to construct the subclass prototype object to avoid calling the superclass constructor.

var GraphEditor = function(svgOrigin){
GraphDrawer.call(this,svgOrigin,null,0);

Expand All @@ -21,20 +9,7 @@ var GraphEditor = function(svgOrigin){
.on("mousedown",mousedown)
.on("contextmenu", function(d){d3.event.stopPropagation();d3.event.preventDefault()});

//TODO::maybe we can add defs here so that they are only defined once per page so that they show in firefox. So far, we have to copy defs to each index_html
// this.svgOrigin
// .append("defs").append("marker")
// .attr("id", "arrowhead2")
// .attr("refX",12) /*must be smarter way to calculate shift*/
// .attr("refY",2)
// .attr("markerWidth", 12)
// .attr("markerHeight", 4)
// .attr("orient", "auto")
// .append("path")
// .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead

this.onNodesEntered = function(selection) {
// console.log("onNodesEntered in GraphEditor");

selection
.on("mousedown", mousedownNode)
Expand All @@ -43,7 +18,6 @@ var GraphEditor = function(svgOrigin){
.on("dblclick",dblclickResource);
// .style("cursor","move") //crosshair pointer move

// GraphDrawer.prototype.onNodesEntered.call(this,selection);
}

this.onNodesUpdated = function(selection){
Expand Down Expand Up @@ -284,15 +258,26 @@ function contextmenuEdge(d){
that.updateEdges();
}


function addNode(pos){
var xy = that.screenPosToNodePos(pos);
Graph.instance.addNode(xy.x, xy.y);
that.update();
// return point;
}


}

//inheritance
GraphEditor.prototype = Object.create(GraphDrawer.prototype);
GraphEditor.prototype.constructor = GraphEditor;
GraphEditor.prototype.constructor = GraphEditor;

// function SpaceShip(scene, x, y) {
// Actor.call(this, scene, x, y);
// this.points = 0;
// }
// Calling the Actor constructor first ensures that all the instance properties created by Actor are added to the new object. After that, SpaceShip can define its own instance properties such as the ship’s current points count.
// In order for SpaceShip to be a proper subclass of Actor, its prototype must inherit from Actor.prototype. The best way to do the extension is with ES5’s Object.create:
// SpaceShip.prototype = Object.create(Actor.prototype);

// Things to Remember
// - Call the superclass constructor explicitly from subclass construc- tors, passing this as the explicit receiver.
// - Use Object.create to construct the subclass prototype object to avoid calling the superclass constructor.

0 comments on commit bcc507c

Please sign in to comment.