diff --git a/application/itopwebpage.class.inc.php b/application/itopwebpage.class.inc.php index f4bbc1483..e64f2e719 100644 --- a/application/itopwebpage.class.inc.php +++ b/application/itopwebpage.class.inc.php @@ -75,6 +75,7 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage $this->add_linked_script('../js/charts.js'); $this->add_linked_script('../js/jquery.multiselect.min.js'); $this->add_linked_script('../js/ajaxfileupload.js'); + $this->add_linked_script('../js/jquery.mousewheel.js'); $sSearchAny = addslashes(Dict::S('UI:SearchValue:Any')); $sSearchNbSelected = addslashes(Dict::S('UI:SearchValue:NbSelected')); diff --git a/core/displayablegraph.class.inc.php b/core/displayablegraph.class.inc.php index 529639e7d..518037902 100644 --- a/core/displayablegraph.class.inc.php +++ b/core/displayablegraph.class.inc.php @@ -1273,6 +1273,8 @@ EOF 'none_selected' => Dict::S('UI:Relation:NoneSelected'), 'nb_selected' => Dict::S('UI:SearchValue:NbSelected'), 'additional_context_info' => Dict::S('UI:Relation:AdditionalContextInfo'), + 'zoom' => Dict::S('UI:Relation:Zoom'), + 'loading' => Dict::S('UI:Loading'), ), 'page_format' => array( 'label' => Dict::S('UI:Relation:PDFExportPageFormat'), diff --git a/css/light-grey.css b/css/light-grey.css index f5576c970..e9d66ebd5 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -1967,3 +1967,23 @@ table.export_parameters td { } +.graph_zoom { + display: inline-block; + float: right; + margin-right: 2em; +} + + +.graph_zoom_slider { + display: inline-block; + width: 10em; +} + + +.graph_zoom_minus, .graph_zoom_plus { + display: inline-block; + margin-left: 1em; + margin-right: 1em; +} + + diff --git a/css/light-grey.scss b/css/light-grey.scss index 9dd287ebd..bdc1dac3b 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -1452,4 +1452,18 @@ table.export_parameters td { } .table_preview .drag-handle { cursor: move; -} \ No newline at end of file +} +.graph_zoom { + display: inline-block; + float: right; + margin-right: 2em; +} +.graph_zoom_slider { + display: inline-block; + width: 10em; +} +.graph_zoom_plus, .graph_zoom_minus { + display: inline-block; + margin-left: 1em; + margin-right: 1em; +} \ No newline at end of file diff --git a/dictionaries/dictionary.itop.ui.php b/dictionaries/dictionary.itop.ui.php index 226c90729..a3608a58b 100644 --- a/dictionaries/dictionary.itop.ui.php +++ b/dictionaries/dictionary.itop.ui.php @@ -973,6 +973,7 @@ When associated with a trigger, each action is given an "order" number, specifyi 'UI:RelationOption:GroupingThreshold' => 'Grouping threshold', 'UI:Relation:AdditionalContextInfo' => 'Additional context info', 'UI:Relation:NoneSelected' => 'None', + 'UI:Relation:Zoom' => 'Zoom', 'UI:Relation:ExportAsAttachment' => 'Export as Attachment...', 'UI:Relation:DrillDown' => 'Details...', 'UI:Relation:PDFExportOptions' => 'PDF Export Options', diff --git a/dictionaries/fr.dictionary.itop.ui.php b/dictionaries/fr.dictionary.itop.ui.php index c8b16404c..264ce5fcb 100644 --- a/dictionaries/fr.dictionary.itop.ui.php +++ b/dictionaries/fr.dictionary.itop.ui.php @@ -816,6 +816,7 @@ Lors de l\'association à un déclencheur, on attribue à chaque action un numé 'UI:RelationOption:GroupingThreshold' => 'Seuil de groupage', 'UI:Relation:AdditionalContextInfo' => 'Infos complémentaires de contexte', 'UI:Relation:NoneSelected' => 'Aucune', + 'UI:Relation:Zoom' => 'Zoom', 'UI:Relation:ExportAsAttachment' => 'Exporter comme une Pièce Jointe...', 'UI:Relation:DrillDown' => 'Détails...', 'UI:Relation:PDFExportOptions' => 'Options de l\'export en PDF', diff --git a/js/jquery.mousewheel.js b/js/jquery.mousewheel.js new file mode 100755 index 000000000..9d65c7162 --- /dev/null +++ b/js/jquery.mousewheel.js @@ -0,0 +1,117 @@ +/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net) + * Licensed under the MIT License (LICENSE.txt). + * + * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. + * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. + * Thanks to: Seamus Leahy for adding deltaX and deltaY + * + * Version: 3.1.3 + * + * Requires: 1.2.2+ + */ + +(function (factory) { + if ( typeof define === 'function' && define.amd ) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS style for Browserify + module.exports = factory; + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; + var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll']; + var lowestDelta, lowestDeltaXY; + + if ( $.event.fixHooks ) { + for ( var i = toFix.length; i; ) { + $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; + } + } + + $.event.special.mousewheel = { + setup: function() { + if ( this.addEventListener ) { + for ( var i = toBind.length; i; ) { + this.addEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = handler; + } + }, + + teardown: function() { + if ( this.removeEventListener ) { + for ( var i = toBind.length; i; ) { + this.removeEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = null; + } + } + }; + + $.fn.extend({ + mousewheel: function(fn) { + return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); + }, + + unmousewheel: function(fn) { + return this.unbind("mousewheel", fn); + } + }); + + + function handler(event) { + var orgEvent = event || window.event, + args = [].slice.call(arguments, 1), + delta = 0, + deltaX = 0, + deltaY = 0, + absDelta = 0, + absDeltaXY = 0, + fn; + event = $.event.fix(orgEvent); + event.type = "mousewheel"; + + // Old school scrollwheel delta + if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; } + if ( orgEvent.detail ) { delta = orgEvent.detail * -1; } + + // New school wheel delta (wheel event) + if ( orgEvent.deltaY ) { + deltaY = orgEvent.deltaY * -1; + delta = deltaY; + } + if ( orgEvent.deltaX ) { + deltaX = orgEvent.deltaX; + delta = deltaX * -1; + } + + // Webkit + if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; } + if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; } + + // Look for lowest delta to normalize the delta values + absDelta = Math.abs(delta); + if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; } + absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX)); + if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; } + + // Get a whole value for the deltas + fn = delta > 0 ? 'floor' : 'ceil'; + delta = Math[fn](delta / lowestDelta); + deltaX = Math[fn](deltaX / lowestDeltaXY); + deltaY = Math[fn](deltaY / lowestDeltaXY); + + // Add event and delta to the front of the arguments + args.unshift(event, delta, deltaX, deltaY); + + return ($.event.dispatch || $.event.handle).apply(this, args); + } + +})); diff --git a/js/simple_graph.js b/js/simple_graph.js index c12fa4c5e..8ba5242a4 100644 --- a/js/simple_graph.js +++ b/js/simple_graph.js @@ -34,6 +34,8 @@ $(function() uncheck_all: 'Uncheck All', none_selected: 'None', nb_selected: '# selected', + zoom: 'Zoom', + loading: 'Loading...' }, export_as_document: null, drill_down: null, @@ -54,9 +56,13 @@ $(function() this.fZoom = 1.0; this.xOffset = 0; this.yOffset = 0; + this.xPan = 0; + this.yPan = 0; this.iTextHeight = 12; + this.fSliderZoom = 1.0; + this.bInUpdateSliderZoom = false; - this.oPaper = Raphael(this.element.get(0), this.element.width(), this.element.height()); + this.oPaper = Raphael(this.element.get(0), 16*this.element.width(), 16*this.element.height()); this.element .addClass('panel-resized') @@ -66,6 +72,9 @@ $(function() this._create_toolkit_menu(); this._build_context_menus(); $(window).bind('resized', function() { var that = me; window.setTimeout(function() { that._on_resize(); }, 50); } ); + this.element.bind('mousewheel', function(event, delta, deltaX, deltaY) { + return me._on_mousewheel(event, delta, deltaX, deltaY); + }); if (this.options.source_url != null) { this.load_from_url(this.options.source_url); @@ -104,6 +113,8 @@ $(function() this._updateBBox(); this.auto_scale(); this.oPaper.clear(); + this._reset + this.oPaper.setViewBox(this.xPan, this.yPan, this.element.width(), this.element.height(), false); for(var k in this.aNodes) { this.aNodes[k].aElements = []; @@ -114,6 +125,12 @@ $(function() this.aEdges[k].aElements = []; this._draw_edge(this.aEdges[k]); } + var me = this; + this.oBackground = this.oPaper + .rect(-10000, -10000, 20000, 20000) + .attr({fill: '#fff', opacity: 0, cursor: 'move'}) + .toBack() + .drag(function(dx, dy, x, y, event) { me._on_background_move(dx, dy, x, y, event); }, function(x, y, event) { me._on_background_drag_start(x, y, event); }, function (event) { me._on_background_drag_end(event); }); this._make_tooltips(); }, _draw_node: function(oNode) @@ -121,35 +138,36 @@ $(function() var iWidth = oNode.width; var iHeight = 32; var iFontSize = 10; - var xPos = Math.round(oNode.x * this.fZoom + this.xOffset); - var yPos = Math.round(oNode.y * this.fZoom + this.yOffset); + var fTotalZoom = this.fZoom * this.fSliderZoom; + var xPos = Math.round(oNode.x * fTotalZoom + this.xOffset); + var yPos = Math.round(oNode.y * fTotalZoom + this.yOffset); oNode.tx = 0; oNode.ty = 0; switch(oNode.shape) { case 'disc': - oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*this.fZoom / 2).attr(oNode.disc_attr)); + oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*fTotalZoom / 2).attr(oNode.disc_attr)); var oText = this.oPaper.text(xPos, yPos, oNode.label); - oNode.text_attr['font-size'] = iFontSize * this.fZoom; + oNode.text_attr['font-size'] = iFontSize * fTotalZoom; oText.attr(oNode.text_attr); //oText.transform('s'+this.fZoom); oNode.aElements.push(oText); break; case 'group': - oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*this.fZoom / 2).attr({fill: '#fff', 'stroke-width':0})); - oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*this.fZoom / 2).attr(oNode.disc_attr)); - var xIcon = xPos - 18 * this.fZoom; - var yIcon = yPos - 18 * this.fZoom; - oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon, yIcon, 16*this.fZoom, 16*this.fZoom).attr(oNode.icon_attr)); - oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon + 18*this.fZoom, yIcon, 16*this.fZoom, 16*this.fZoom).attr(oNode.icon_attr)); - oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon + 9*this.fZoom, yIcon + 18*this.fZoom, 16*this.fZoom, 16*this.fZoom).attr(oNode.icon_attr)); + oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*fTotalZoom / 2).attr({fill: '#fff', 'stroke-width':0})); + oNode.aElements.push(this.oPaper.circle(xPos, yPos, iWidth*fTotalZoom / 2).attr(oNode.disc_attr)); + var xIcon = xPos - 18 * fTotalZoom; + var yIcon = yPos - 18 * fTotalZoom; + oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon, yIcon, 16*fTotalZoom, 16*fTotalZoom).attr(oNode.icon_attr)); + oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon + 18*fTotalZoom, yIcon, 16*fTotalZoom, 16*fTotalZoom).attr(oNode.icon_attr)); + oNode.aElements.push(this.oPaper.image(oNode.icon_url, xIcon + 9*fTotalZoom, yIcon + 18*fTotalZoom, 16*fTotalZoom, 16*fTotalZoom).attr(oNode.icon_attr)); var oText = this.oPaper.text(xPos, yPos +2, oNode.label); - oNode.text_attr['font-size'] = iFontSize * this.fZoom; + oNode.text_attr['font-size'] = iFontSize * fTotalZoom; oText.attr(oNode.text_attr); //oText.transform('s'+this.fZoom); var oBB = oText.getBBox(); - var dy = iHeight/2*this.fZoom + oBB.height/2; + var dy = iHeight/2*fTotalZoom + oBB.height/2; oText.remove(); oText = this.oPaper.text(xPos, yPos +dy +2, oNode.label); oText.attr(oNode.text_attr); @@ -163,9 +181,9 @@ $(function() if(Raphael.svg) { // the colorShift plugin works only in SVG - oNode.aElements.push(this.oPaper.image(oNode.icon_url, xPos - iWidth * this.fZoom/2, yPos - iHeight * this.fZoom/2, iWidth*this.fZoom, iHeight*this.fZoom).colorShift('#fff', 1)); + oNode.aElements.push(this.oPaper.image(oNode.icon_url, xPos - iWidth * fTotalZoom/2, yPos - iHeight * fTotalZoom/2, iWidth*fTotalZoom, iHeight*fTotalZoom).colorShift('#fff', 1)); } - oNode.aElements.push(this.oPaper.image(oNode.icon_url, xPos - iWidth * this.fZoom/2, yPos - iHeight * this.fZoom/2, iWidth*this.fZoom, iHeight*this.fZoom).attr(oNode.icon_attr)); + oNode.aElements.push(this.oPaper.image(oNode.icon_url, xPos - iWidth * fTotalZoom/2, yPos - iHeight * fTotalZoom/2, iWidth*fTotalZoom, iHeight*fTotalZoom).attr(oNode.icon_attr)); var idx = 0; for(var i in oNode.context_icons) @@ -173,33 +191,33 @@ $(function() var sgn = 2*(idx % 2) -1; // Suite: -1, 1, -1, 1, -1, 1, -1, etc. var coef = Math.floor((1+idx)/2) * sgn; // Suite: 0, 1, -1, 2, -2, 3, -3, etc. var alpha = coef*Math.PI/4 - Math.PI/2; - var x = xPos + Math.cos(alpha) * 1.25*iWidth * this.fZoom / 2; - var y = yPos + Math.sin(alpha) * 1.25*iWidth * this.fZoom / 2; - var l = iWidth/3 * this.fZoom; + var x = xPos + Math.cos(alpha) * 1.25*iWidth * fTotalZoom / 2; + var y = yPos + Math.sin(alpha) * 1.25*iWidth * fTotalZoom / 2; + var l = iWidth/3 * fTotalZoom; oNode.aElements.push(this.oPaper.image(oNode.context_icons[i], x - l/2, y - l/2, l , l).attr(oNode.icon_attr)); idx++; } var oText = this.oPaper.text( xPos, yPos, oNode.label); - oNode.text_attr['font-size'] = iFontSize * this.fZoom; + oNode.text_attr['font-size'] = iFontSize * fTotalZoom; oText.attr(oNode.text_attr); - //oText.transform('S'+this.fZoom); + //oText.transform('S'+fTotalZoom); var oBB = oText.getBBox(); - var dy = iHeight/2*this.fZoom + oBB.height/2; + var dy = iHeight/2*fTotalZoom + oBB.height/2; oText.remove(); oText = this.oPaper.text( xPos, yPos + dy, oNode.label); oText.attr(oNode.text_attr); - //oText.transform('S'+this.fZoom); + //oText.transform('S'+fTotalZoom); oNode.aElements.push(oText); oNode.aElements.push(this.oPaper.rect( xPos - oBB.width/2 -2, yPos - oBB.height/2 + dy, oBB.width +4, oBB.height).attr({fill: '#fff', stroke: '#fff', opacity: 0.9}).toBack()); break; } if (oNode.source) { - oNode.aElements.push(this.oPaper.circle(xPos, yPos, 1.25*iWidth*this.fZoom / 2).attr({stroke: '#c33', 'stroke-width': 3*this.fZoom }).toBack()); + oNode.aElements.push(this.oPaper.circle(xPos, yPos, 1.25*iWidth*fTotalZoom / 2).attr({stroke: '#c33', 'stroke-width': 3*fTotalZoom }).toBack()); } if (oNode.sink) { - oNode.aElements.push(this.oPaper.circle(xPos, yPos, 1.25*iWidth*this.fZoom / 2).attr({stroke: '#33c', 'stroke-width': 3*this.fZoom }).toBack()); + oNode.aElements.push(this.oPaper.circle(xPos, yPos, 1.25*iWidth*fTotalZoom / 2).attr({stroke: '#33c', 'stroke-width': 3*fTotalZoom }).toBack()); } var me = this; @@ -223,8 +241,9 @@ $(function() }, _move: function(sNodeId, dx, dy, x, y, event) { - var origDx = dx / this.fZoom; - var origDy = dy / this.fZoom; + var fTotalZoom = this.fZoom * this.fSliderZoom; + var origDx = dx / fTotalZoom; + var origDy = dy / fTotalZoom; var oNode = this._find_node(sNodeId); oNode.x = oNode.xOrig + origDx; @@ -254,9 +273,10 @@ $(function() }, _drag_end: function(sNodeId, event) { + var fTotalZoom = this.fZoom * this.fSliderZoom; var oNode = this._find_node(sNodeId); - oNode.tx += (oNode.x - oNode.xOrig) * this.fZoom; - oNode.ty += (oNode.y - oNode.yOrig) * this.fZoom; + oNode.tx += (oNode.x - oNode.xOrig) * fTotalZoom; + oNode.ty += (oNode.y - oNode.yOrig) * fTotalZoom; oNode.xOrig = oNode.x; oNode.yOrig = oNode.y; this._updateBBox(); @@ -277,16 +297,17 @@ $(function() }, _get_edge_path: function(oEdge) { + var fTotalZoom = this.fZoom * this.fSliderZoom; var oStart = this._find_node(oEdge.source_node_id); var oEnd = this._find_node(oEdge.sink_node_id); var iArrowSize = 5; if ((oStart == null) || (oEnd == null)) return ''; - var xStart = Math.round(oStart.x * this.fZoom + this.xOffset); - var yStart = Math.round(oStart.y * this.fZoom + this.yOffset); - var xEnd = Math.round(oEnd.x * this.fZoom + this.xOffset); - var yEnd = Math.round(oEnd.y * this.fZoom + this.yOffset); + var xStart = Math.round(oStart.x * fTotalZoom + this.xOffset); + var yStart = Math.round(oStart.y * fTotalZoom + this.yOffset); + var xEnd = Math.round(oEnd.x * fTotalZoom + this.xOffset); + var yEnd = Math.round(oEnd.y * fTotalZoom + this.yOffset); var sPath = Raphael.format('M{0},{1}L{2},{3}', xStart, yStart, xEnd, yEnd); var vx = (xEnd - xStart); @@ -296,15 +317,16 @@ $(function() vy = vy / l; var ux = -vy; var uy = vx; - var lPos = Math.max(l/2, l - 40*this.fZoom); + var lPos = Math.max(l/2, l - 40*fTotalZoom); var xArrow = xStart + vx * lPos; var yArrow = yStart + vy * lPos; - sPath += Raphael.format('M{0},{1}l{2},{3}M{4},{5}l{6},{7}', xArrow, yArrow, this.fZoom * iArrowSize *(-vx + ux), this.fZoom * iArrowSize *(-vy + uy), xArrow, yArrow, this.fZoom * iArrowSize *(-vx - ux), this.fZoom * iArrowSize *(-vy - uy)); + sPath += Raphael.format('M{0},{1}l{2},{3}M{4},{5}l{6},{7}', xArrow, yArrow, fTotalZoom * iArrowSize *(-vx + ux), fTotalZoom * iArrowSize *(-vy + uy), xArrow, yArrow, fTotalZoom * iArrowSize *(-vx - ux), fTotalZoom * iArrowSize *(-vy - uy)); return sPath; }, _draw_edge: function(oEdge) { - var fStrokeSize = Math.max(1, 2 * this.fZoom); + var fTotalZoom = this.fZoom * this.fSliderZoom; + var fStrokeSize = Math.max(1, 2 * fTotalZoom); var sPath = this._get_edge_path(oEdge); var oAttr = $.extend(oEdge.attr); oAttr['stroke-linecap'] = 'round'; @@ -421,7 +443,13 @@ $(function() } //sHtml += '