Skip to content
GitLab
Commit ad492305 authored by Philippe Bardou's avatar Philippe Bardou
Browse files

Graph view: 

- layout
- action info/reset
- zoom
- ...
parent 097c0534
Expand all Hide whitespace changes
Inline Side-by-side
docs/example1.html
View file @ ad492305
......@@ -153,6 +153,9 @@
<script src="../src/js/jquery.fileupload-process.js"></script>
<script src="../src/js/jquery.fileupload-validate.js"></script>
<script src='../src/js/cytoscape.js' type='text/javascript'></script>
<script src='../src/js/cytoscape.js-panzoom.js' type='text/javascript'></script>
<link href="../src/css/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css">
<link href="../src/css/font-awesome.css" rel="stylesheet" type="text/css">
<script src='../src/js/jflow-activewf.js' type='text/javascript'></script>
<script src='../src/js/jflow-availablewf.js' type='text/javascript'></script>
......
src/css/cytoscape.js-panzoom.css 0 → 100644
View file @ ad492305
.ui-cytoscape-panzoom {
position: absolute;
font-size: 12px;
color: #fff;
font-family: arial, helvetica, sans-serif;
line-height: 1;
color: #666;
font-size: 11px;
z-index: 99999;
}
.ui-cytoscape-panzoom-zoom-button {
cursor: pointer;
padding: 3px;
text-align: center;
position: absolute;
border-radius: 3px;
width: 18px; /*10px;*/
height: 18px; /*10px;*/
left: 16px;
background: #fff;
border: 1px solid #999;
margin-left: -1px;
margin-top: -1px;
z-index: 1;
}
.ui-cytoscape-panzoom-zoom-button:active,
.ui-cytoscape-panzoom-slider-handle:active,
.ui-cytoscape-panzoom-slider-handle.active {
background: #ddd;
}
.ui-cytoscape-panzoom-pan-button {
position: absolute;
z-index: 1;
height: 16px;
width: 16px;
}
.ui-cytoscape-panzoom-reset {
top: 55px;
}
.ui-cytoscape-panzoom-zoom-in {
top: 80px;
}
.ui-cytoscape-panzoom-zoom-out {
top: 197px;
}
.ui-cytoscape-panzoom-pan-up {
top: 0;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #666;
}
.ui-cytoscape-panzoom-pan-down {
bottom: 0;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #666;
}
.ui-cytoscape-panzoom-pan-left {
top: 50%;
left: 0;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #666;
}
.ui-cytoscape-panzoom-pan-right {
top: 50%;
right: 0;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #666;
}
.ui-cytoscape-panzoom-pan-indicator {
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 8px;
border-radius: 8px;
background: #000;
border-radius: 8px;
margin-left: -5px;
margin-top: -5px;
display: none;
z-index: 999;
opacity: 0.6;
}
.ui-cytoscape-panzoom-slider {
position: absolute;
top: 97px;
left: 17px;
height: 100px;
width: 15px;
}
.ui-cytoscape-panzoom-slider-background {
position: absolute;
top: 0;
width: 4px; /*2px;*/
height: 100px;
left: 5px;
background: #fff;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.ui-cytoscape-panzoom-slider-handle {
position: absolute;
width: 18px; /*16px;*/
height: 9px; /*8px;*/
background: #fff;
border: 1px solid #999;
border-radius: 2px;
margin-left: -2px;
z-index: 999;
line-height: 8px;
cursor: default;
}
.ui-cytoscape-panzoom-slider-handle .icon {
margin: 0 4px;
line-height: 10px;
}
.ui-cytoscape-panzoom-no-zoom-tick {
position: absolute;
background: #666;
border: 1px solid #fff;
border-radius: 2px;
margin-left: -1px;
width: 10px; /*8px;*/
height: 3px; /*2px;*/
left: 3px;
z-index: 1;
margin-top: 3px;
}
.ui-cytoscape-panzoom-panner {
position: absolute;
left: 5px;
top: 5px;
height: 40px;
width: 40px;
background: #fff;
border: 1px solid #999;
border-radius: 40px;
margin-left: -1px;
}
.ui-cytoscape-panzoom-panner-handle {
position: absolute;
left: 0;
top: 0;
outline: none;
height: 40px;
width: 40px;
position: absolute;
z-index: 999;
}
src/css/font-awesome.css 0 → 100644
View file @ ad492305
This diff is collapsed.
src/fonts/fontawesome-webfont.svg 0 → 100755
View file @ ad492305
This diff is collapsed.
src/js/cytoscape.js
View file @ ad492305
......@@ -13536,7 +13536,34 @@ var cytoscape;
context.fill();
}
}
// Patch (reset and info node)
if(node._private.data.id == 'reset'){
var tmpLineWidth = context.lineWidth;
context.beginPath();
context.lineWidth = 2.2;
context.strokeStyle = 'white';
context.moveTo(-4, -4);
context.lineTo( 4, 4);
context.moveTo(-4, 4);
context.lineTo( 4, -4);
context.stroke();
context.closePath();
context.lineWidth = tmpLineWidth;
}
if(node._private.data.id == 'info'){
var tmpLineWidth = context.lineWidth;
var tmpFont = context.font;
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.font = "bold 12pt 'Courier New', Courier, monospace";
context.fillText('i', 0, -8);
context.closePath();
context.lineWidth = tmpLineWidth;
context.font = tmpFont;
}
// Border width, draw border
if (style['border-width'].pxValue > 0) {
 
......@@ -13551,7 +13578,6 @@ var cytoscape;
if( usePaths ){
context.translate( -pos.x, -pos.y );
}
// draw the overlay
} else {
 
......@@ -13569,7 +13595,7 @@ var cytoscape;
context.fill();
}
}
context.shadowBlur = 0;
};
 
// does the node have at least one pie piece?
......@@ -13636,8 +13662,18 @@ var cytoscape;
context.beginPath();
context.arc(x, y, 31, 0, 2 * Math.PI, false);
var my_gradient = context.createLinearGradient(0,0,0,40);
my_gradient.addColorStop(0,"#7c7c7c");
my_gradient.addColorStop(1,"#a2a2a2");
if(node[0].css('border-width') == '0.8px') {
context.shadowColor = 'darkgrey';
context.shadowBlur = 3;
my_gradient.addColorStop(0,"#8f8f8f");
my_gradient.addColorStop(1,"#b3b3b3");
}
else {
context.shadowColor = 'darkgrey';
context.shadowBlur = 0;
my_gradient.addColorStop(0,"#7c7c7c");
my_gradient.addColorStop(1,"#a2a2a2");
}
context.fillStyle = my_gradient;
context.fill();
//context.lineWidth = 0;
......@@ -13645,12 +13681,12 @@ var cytoscape;
//context.stroke();
context.closePath();
/*context.shadowColor = 'darkgrey';
context.shadowBlur = 3;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.closePath();
context.fill();*/
/*context.beginPath();
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.closePath();
context.fill();*/
 
context.beginPath();
context.moveTo(x,y-40);
......@@ -14503,7 +14539,7 @@ var cytoscape;
};
 
// Primary key
r.registerBinding(r.data.container, 'mousedown', function(e) {
r.registerBinding(r.data.container, 'mousedown', function(e) {
e.preventDefault();
r.hoverData.capture = true;
r.hoverData.which = e.which;
......@@ -14538,9 +14574,9 @@ var cytoscape;
 
// Primary button
} else if (e.which == 1) {
if( near ){
near.activate();
//near.activate(); // PATCH to enable rect
//console.log(near);
}
 
// Element dragging
......
src/js/cytoscape.js-panzoom.js 0 → 100644
View file @ ad492305
;(function($, $$){
var defaults = {
zoomFactor: 0.05, // zoom factor per zoom tick
zoomDelay: 45, // how many ms between zoom ticks
minZoom: 0.1, // min zoom level
maxZoom: 10, // max zoom level
fitPadding: 50, // padding when fitting
panSpeed: 10, // how many ms in between pan ticks
panDistance: 10, // max pan distance per tick
panDragAreaSize: 75, // the length of the pan drag box in which the vector for panning is calculated (bigger = finer control of pan speed and direction)
panMinPercentSpeed: 0.25, // the slowest speed we can pan by (as a percent of panSpeed)
panInactiveArea: 8, // radius of inactive area in pan drag box
panIndicatorMinOpacity: 0.5, // min opacity of pan indicator (the draggable nib); scales from this to 1.0
autodisableForMobile: true, // disable the panzoom completely for mobile (since we don't really need it with gestures like pinch to zoom)
// icon class names
sliderHandleIcon: 'fa fa-minus',
zoomInIcon: 'fa fa-plus',
zoomOutIcon: 'fa fa-minus',
resetIcon: 'fa fa-expand'
};
$.fn.cytoscapePanzoom = function(params){
var options = $.extend(true, {}, defaults, params);
var fn = params;
var functions = {
destroy: function(){
var $this = $(this);
$this.find(".ui-cytoscape-panzoom").remove();
},
init: function(){
var browserIsMobile = 'ontouchstart' in window;
if( browserIsMobile && options.autodisableForMobile ){
return $(this);
}
return $(this).each(function(){
var $container = $(this);
var $panzoom = $('<div class="ui-cytoscape-panzoom"></div>');
$container.append( $panzoom );
if( options.staticPosition ){
$panzoom.addClass("ui-cytoscape-panzoom-static");
}
// add base html elements
/////////////////////////
var $zoomIn = $('<div class="ui-cytoscape-panzoom-zoom-in ui-cytoscape-panzoom-zoom-button"><span class="icon '+ options.zoomInIcon +'"></span></div>');
$panzoom.append( $zoomIn );
var $zoomOut = $('<div class="ui-cytoscape-panzoom-zoom-out ui-cytoscape-panzoom-zoom-button"><span class="icon ' + options.zoomOutIcon + '"></span></div>');
$panzoom.append( $zoomOut );
var $reset = $('<div class="ui-cytoscape-panzoom-reset ui-cytoscape-panzoom-zoom-button"><span class="icon ' + options.resetIcon + '"></span></div>');
$panzoom.append( $reset );
var $slider = $('<div class="ui-cytoscape-panzoom-slider"></div>');
$panzoom.append( $slider );
$slider.append('<div class="ui-cytoscape-panzoom-slider-background"></div>');
var $sliderHandle = $('<div class="ui-cytoscape-panzoom-slider-handle"><span class="icon ' + options.sliderHandleIcon + '"></span></div>');
$slider.append( $sliderHandle );
var $noZoomTick = $('<div class="ui-cytoscape-panzoom-no-zoom-tick"></div>');
$slider.append( $noZoomTick );
var $panner = $('<div class="ui-cytoscape-panzoom-panner"></div>');
$panzoom.append( $panner );
var $pHandle = $('<div class="ui-cytoscape-panzoom-panner-handle"></div>');
$panner.append( $pHandle );
var $pUp = $('<div class="ui-cytoscape-panzoom-pan-up ui-cytoscape-panzoom-pan-button"></div>');
var $pDown = $('<div class="ui-cytoscape-panzoom-pan-down ui-cytoscape-panzoom-pan-button"></div>');
var $pLeft = $('<div class="ui-cytoscape-panzoom-pan-left ui-cytoscape-panzoom-pan-button"></div>');
var $pRight = $('<div class="ui-cytoscape-panzoom-pan-right ui-cytoscape-panzoom-pan-button"></div>');
$panner.append( $pUp ).append( $pDown ).append( $pLeft ).append( $pRight );
var $pIndicator = $('<div class="ui-cytoscape-panzoom-pan-indicator"></div>');
$panner.append( $pIndicator );
// functions for calculating panning
////////////////////////////////////
function handle2pan(e){
var v = {
x: e.originalEvent.pageX - $panner.offset().left - $panner.width()/2,
y: e.originalEvent.pageY - $panner.offset().top - $panner.height()/2
}
var r = options.panDragAreaSize;
var d = Math.sqrt( v.x*v.x + v.y*v.y );
var percent = Math.min( d/r, 1 );
if( d < options.panInactiveArea ){
return {
x: NaN,
y: NaN
};
}
v = {
x: v.x/d,
y: v.y/d
};
percent = Math.max( options.panMinPercentSpeed, percent );
var vnorm = {
x: -1 * v.x * (percent * options.panDistance),
y: -1 * v.y * (percent * options.panDistance)
};
return vnorm;
}
function donePanning(){
clearInterval(panInterval);
$(window).unbind("mousemove", handler);
$pIndicator.hide();
}
function positionIndicator(pan){
var v = pan;
var d = Math.sqrt( v.x*v.x + v.y*v.y );
var vnorm = {
x: -1 * v.x/d,
y: -1 * v.y/d
};
var w = $panner.width();
var h = $panner.height();
var percent = d/options.panDistance;
var opacity = Math.max( options.panIndicatorMinOpacity, percent );
var color = 255 - Math.round( opacity * 255 );
$pIndicator.show().css({
left: w/2 * vnorm.x + w/2,
top: h/2 * vnorm.y + h/2,
background: "rgb(" + color + ", " + color + ", " + color + ")"
});
}
function calculateZoomCenterPoint(){
var cy = $container.cytoscape("get");
var pan = cy.pan();
var zoom = cy.zoom();
zx = $container.width()/2;
zy = $container.height()/2;
}
var zooming = false;
function startZooming(){
zooming = true;
calculateZoomCenterPoint();
}
function endZooming(){
zooming = false;
}
var zx, zy;
function zoomTo(level){
var cy = $container.cytoscape("get");
if( !zooming ){ // for non-continuous zooming (e.g. click slider at pt)
calculateZoomCenterPoint();
}
cy.zoom({
level: level,
renderedPosition: { x: zx, y: zy }
});
}
var panInterval;
var handler = function(e){
e.stopPropagation(); // don't trigger dragging of panzoom
e.preventDefault(); // don't cause text selection
clearInterval(panInterval);
var pan = handle2pan(e);
if( isNaN(pan.x) || isNaN(pan.y) ){
$pIndicator.hide();
return;
}
positionIndicator(pan);
panInterval = setInterval(function(){
$container.cytoscape("get").panBy(pan);
}, options.panSpeed);
};
$pHandle.bind("mousedown", function(e){
// handle click of icon
handler(e);
// update on mousemove
$(window).bind("mousemove", handler);
});
$pHandle.bind("mouseup", function(){
donePanning();
});
$(window).bind("mouseup blur", function(){
donePanning();
});
// set up slider behaviour
//////////////////////////
$slider.bind('mousedown', function(){
return false; // so we don't pan close to the slider handle
});
var sliderVal;
var sliding = false;
var sliderPadding = 2;
function setSliderFromMouse(evt, handleOffset){
if( handleOffset === undefined ){
handleOffset = 0;
}
var padding = sliderPadding;
var min = 0 + padding;
var max = $slider.height() - $sliderHandle.height() - 2*padding;
var top = evt.pageY - $slider.offset().top - handleOffset;
// constrain to slider bounds
if( top < min ){ top = min }
if( top > max ){ top = max }
var percent = 1 - (top - min) / ( max - min );
// move the handle
$sliderHandle.css('top', top);
var zmin = options.minZoom;
var zmax = options.maxZoom;
// assume (zoom = zmax ^ p) where p ranges on (x, 1) with x negative
var x = Math.log(zmin) / Math.log(zmax);
var p = (1 - x)*percent + x;
// change the zoom level
var z = Math.pow( zmax, p );
// bound the zoom value in case of floating pt rounding error
if( z < zmin ){
z = zmin;
} else if( z > zmax ){
z = zmax;
}
zoomTo( z );
}
var sliderMdownHandler, sliderMmoveHandler;
$sliderHandle.bind('mousedown', sliderMdownHandler = function( mdEvt ){
var handleOffset = mdEvt.target === $sliderHandle[0] ? mdEvt.offsetY : 0;
sliding = true;
startZooming();
$sliderHandle.addClass("active");
var lastMove = 0;
$(window).bind('mousemove', sliderMmoveHandler = function( mmEvt ){
var now = +new Date;
// throttle the zooms every 10 ms so we don't call zoom too often and cause lag
if( now > lastMove + 10 ){
lastMove = now;
} else {
return false;
}
setSliderFromMouse(mmEvt, handleOffset);
return false;