From f83ac95b85b2fabaa3e3fe24cb4879d8a6cbbd1e Mon Sep 17 00:00:00 2001 From: rangeonnicolas Date: Thu, 4 Sep 2014 22:04:06 +0200 Subject: [PATCH 1/6] Ajout de l'option showEdgesWhileDragging + debut de decoupage de la grande fonction traceMap en sous-fonctions --- config.js | 5 +++ js/gexfjs.js | 97 +++++++++++++++++++++++++++++----------------------- 2 files changed, 60 insertions(+), 42 deletions(-) diff --git a/config.js b/config.js index 6d70830..7673192 100644 --- a/config.js +++ b/config.js @@ -46,6 +46,11 @@ setParams({ Show the weight of edges in the list this setting can't be changed from the User Interface */ + showEdgesWhileDragging : false, + /* + Show edges when dragging the graph. If False, the display is much quicker + this setting can't be changed from the User Interface + */ language: false /* Set to an ISO language code to switch the interface to that language. diff --git a/js/gexfjs.js b/js/gexfjs.js index ea42660..3af9e3a 100644 --- a/js/gexfjs.js +++ b/js/gexfjs.js @@ -247,25 +247,29 @@ function updateWorkspaceBounds() { $("#leftcolumn").css(_top); GexfJS.graphZone.width = _elZC.width(); GexfJS.graphZone.height = _elZC.height(); + GexfJS.areParamsIdentical = true; for (var i in GexfJS.graphZone) { GexfJS.areParamsIdentical = GexfJS.areParamsIdentical && ( GexfJS.graphZone[i] == GexfJS.oldGraphZone[i] ); } + GexfJS.areParamsIdentical = GexfJS.areParamsIdentical && ( GexfJS.dragOn == GexfJS.oldDragOn ); + if (!GexfJS.areParamsIdentical) { - $("#carte") - .attr({ - width : GexfJS.graphZone.width, - height : GexfJS.graphZone.height - }) - .css({ - width : GexfJS.graphZone.width + "px", - height : GexfJS.graphZone.height + "px" - }); + $("#carte") + .attr({ + width : GexfJS.graphZone.width, + height : GexfJS.graphZone.height + }) + .css({ + width : GexfJS.graphZone.width + "px", + height : GexfJS.graphZone.height + "px" + }); for (var i in GexfJS.graphZone) { GexfJS.oldGraphZone[i] = GexfJS.graphZone[i]; } + GexfJS.oldDragOn = GexfJS.dragOn; } } @@ -603,9 +607,9 @@ function traceMap() { GexfJS.ctxGraphe.closePath(); GexfJS.ctxGraphe.fill(); } - + var _centralNode = ( ( GexfJS.params.activeNode != -1 ) ? GexfJS.params.activeNode : GexfJS.params.currentNode ); - + for (var i in GexfJS.graph.nodeList) { var _d = GexfJS.graph.nodeList[i]; _d.coords.actual = { @@ -622,39 +626,11 @@ function traceMap() { if ( _centralNode != -1 ) { _tagsMisEnValeur = [ _centralNode ]; } - - var _displayEdges = ( GexfJS.params.showEdges && GexfJS.params.currentNode == -1 ); - - for (var i in GexfJS.graph.edgeList) { - var _d = GexfJS.graph.edgeList[i], - _six = _d.source, - _tix = _d.target, - _ds = GexfJS.graph.nodeList[_six], - _dt = GexfJS.graph.nodeList[_tix]; - var _isLinked = false; - if (_centralNode != -1) { - if (_six == _centralNode) { - _tagsMisEnValeur.push(_tix); - _coulTag = _dt.color.base; - _isLinked = true; - _dt.visible = true; - } - if (_tix == _centralNode) { - _tagsMisEnValeur.push(_six); - _coulTag = _ds.color.base; - _isLinked = true; - _ds.visible = true; - } - } - if ( ( _isLinked || _displayEdges ) && ( _ds.withinFrame || _dt.withinFrame ) && _ds.visible && _dt.visible ) { - GexfJS.ctxGraphe.lineWidth = _edgeSizeFactor * _d.width; - var _coords = ( ( GexfJS.params.useLens && GexfJS.mousePosition ) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _ds.coords.actual ) : _ds.coords.actual ); - _coordt = ( (GexfJS.params.useLens && GexfJS.mousePosition) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _dt.coords.actual ) : _dt.coords.actual ); - GexfJS.ctxGraphe.strokeStyle = ( _isLinked ? _d.color : "rgba(100,100,100,0.2)" ); - traceArc(GexfJS.ctxGraphe, _coords, _coordt); - } + if(!GexfJS.dragOn || GexfJS.params.showEdgesWhileDragging){ + traceMap_edges(_centralNode,_sizeFactor,_tagsMisEnValeur); } + GexfJS.ctxGraphe.lineWidth = 4; GexfJS.ctxGraphe.strokeStyle = "rgba(0,100,0,0.8)"; @@ -739,6 +715,43 @@ function traceMap() { GexfJS.ctxMini.strokeRect( _x, _y, _w, _h ); } +function traceMap_edges(_centralNode,_sizeFactor,_tagsMisEnValeur) { + + var _displayEdges = ( GexfJS.params.showEdges && GexfJS.params.currentNode == -1 ), + _edgeSizeFactor = _sizeFactor * GexfJS.params.edgeWidthFactor; + + for (var i in GexfJS.graph.edgeList) { + var _d = GexfJS.graph.edgeList[i], + _six = _d.source, + _tix = _d.target, + _ds = GexfJS.graph.nodeList[_six], + _dt = GexfJS.graph.nodeList[_tix]; + var _isLinked = false; + if (_centralNode != -1) { + if (_six == _centralNode) { + _tagsMisEnValeur.push(_tix); + _coulTag = _dt.color.base; + _isLinked = true; + _dt.visible = true; + } + if (_tix == _centralNode) { + _tagsMisEnValeur.push(_six); + _coulTag = _ds.color.base; + _isLinked = true; + _ds.visible = true; + } + } + + if ( ( _isLinked || _displayEdges ) && ( _ds.withinFrame || _dt.withinFrame ) && _ds.visible && _dt.visible ) { + GexfJS.ctxGraphe.lineWidth = _edgeSizeFactor * _d.width; + var _coords = ( ( GexfJS.params.useLens && GexfJS.mousePosition ) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _ds.coords.actual ) : _ds.coords.actual ); + _coordt = ( (GexfJS.params.useLens && GexfJS.mousePosition) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _dt.coords.actual ) : _dt.coords.actual ); + GexfJS.ctxGraphe.strokeStyle = ( _isLinked ? _d.color : "rgba(100,100,100,0.2)" ); + traceArc(GexfJS.ctxGraphe, _coords, _coordt); + } + } +} + function hoverAC() { $("#autocomplete li").removeClass("hover"); $("#liac_"+GexfJS.autoCompletePosition).addClass("hover"); From 981530386f24af65478e5c63ad9893fc944eb9de Mon Sep 17 00:00:00 2001 From: rangeonnicolas Date: Thu, 4 Sep 2014 22:49:27 +0200 Subject: [PATCH 2/6] changement de la couleur de contour du noeud MisEnValeur --- js/gexfjs.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/gexfjs.js b/js/gexfjs.js index 3af9e3a..978b8f9 100644 --- a/js/gexfjs.js +++ b/js/gexfjs.js @@ -456,8 +456,9 @@ function loadGraph() { g : _g, b : _b }, - base : "rgba(" + _r + "," + _g + "," + _b + ",.7)", - gris : "rgba(" + Math.floor(84 + .33 * _r) + "," + Math.floor(84 + .33 * _g) + "," + Math.floor(84 + .33 * _b) + ",.5)" + base : "rgba(" + _r + "," + _g + "," + _b + ",.7)", + baseDarker : "rgba(" + Math.floor(62 + .5 * _r) + "," + Math.floor(62 + .5 * _g) + "," + Math.floor(62 + .5 * _b) + ",1)", + gris : "rgba(" + Math.floor(84 + .33 * _r) + "," + Math.floor(84 + .33 * _g) + "," + Math.floor(84 + .33 * _b) + ",.5)" } _d.attributes = []; $(_attr).each(function() { @@ -632,7 +633,6 @@ function traceMap() { } GexfJS.ctxGraphe.lineWidth = 4; - GexfJS.ctxGraphe.strokeStyle = "rgba(0,100,0,0.8)"; if (_centralNode != -1) { var _dnc = GexfJS.graph.nodeList[_centralNode]; @@ -681,6 +681,7 @@ function traceMap() { } if (_centralNode != -1) { + GexfJS.ctxGraphe.strokeStyle = _dnc.color.baseDarker; GexfJS.ctxGraphe.fillStyle = _dnc.color.base; GexfJS.ctxGraphe.beginPath(); GexfJS.ctxGraphe.arc( _dnc.coords.real.x , _dnc.coords.real.y , _dnc.coords.real.r , 0 , Math.PI*2 , true ); From 0207aeb98552f0aebe221c03f1dce0cebb008d16 Mon Sep 17 00:00:00 2001 From: rangeonnicolas Date: Thu, 4 Sep 2014 23:10:50 +0200 Subject: [PATCH 3/6] Quand le label du noeud est tout petit, le surlignage se pixellisait un peu --- index.html | 4 ++-- js/gexfjs.js | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index cef7a55..4ec68db 100644 --- a/index.html +++ b/index.html @@ -52,8 +52,8 @@

Gephi: JavaScript GEXF Viewer

- - + +