From f3e2bd31ce9058ea8c739038ca8dbc7dbae68625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= <fva@openerp.com>
Date: Wed, 29 Feb 2012 11:37:41 +0100
Subject: [PATCH] [IMP] Diagram: Prevent panning and scrolling from hiding the
 graph

bzr revid: fva@openerp.com-20120229103741-l45e34cm8l3ioxfq
---
 addons/web_diagram/static/src/js/diagram.js |  8 ++-
 addons/web_diagram/static/src/js/graph.js   | 58 +++++++++++++++++++--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/addons/web_diagram/static/src/js/diagram.js b/addons/web_diagram/static/src/js/diagram.js
index 84112262718..ea2c1126e70 100644
--- a/addons/web_diagram/static/src/js/diagram.js
+++ b/addons/web_diagram/static/src/js/diagram.js
@@ -142,13 +142,17 @@ openerp.web.DiagramView = openerp.web.View.extend({
 
                         "gray"                          : "#DCDCDC",
                         "white"                         : "#FFF",
+
+                        "viewport_margin"               : 50,
                         };
 
         $('#dia-canvas').empty();    // remove previous diagram
 
-        var r  = new Raphael(document.getElementById("dia-canvas"), '100%','100%');
+        var canvas = document.getElementById("dia-canvas");
 
-        var graph  = new CuteGraph(r,style);
+        var r  = new Raphael(canvas, '100%','100%');
+
+        var graph  = new CuteGraph(r,style,canvas.parentNode);
 
         _.each(res_nodes, function(node) {
             var n = new CuteNode(     graph,
diff --git a/addons/web_diagram/static/src/js/graph.js b/addons/web_diagram/static/src/js/graph.js
index 95c3bf62520..1bf11539166 100644
--- a/addons/web_diagram/static/src/js/graph.js
+++ b/addons/web_diagram/static/src/js/graph.js
@@ -95,7 +95,12 @@
         this.hide = hide;
     }
     
-    function Graph(r,style){
+    //Creates a new graph on raphael document r.
+    //style is a dictionary containing the style definitions
+    //viewport (optional) is the dom element representing the viewport of the graph. It is used
+    //to prevent scrolling to scroll the graph outside the viewport.
+
+    function Graph(r,style,viewport){
         var self = this;
         var nodes = [];  // list of all nodes in the graph
         var edges = [];  // list of all edges in the graph
@@ -131,11 +136,56 @@
                 }
             });
         };
+        //returns {minx, miny, maxx, maxy}, the translated bounds containing all nodes
+        var get_bounds = function(){
+            var minx = Number.MAX_VALUE;
+            var miny = Number.MAX_VALUE;
+            var maxx = Number.MIN_VALUE;
+            var maxy = Number.MIN_VALUE;
+            
+            for(var i = 0; i < nodes.length; i++){
+                var pos = nodes[i].get_pos();
+                minx = Math.min(minx,pos.x);
+                miny = Math.min(miny,pos.y);
+                maxx = Math.max(maxx,pos.x);
+                maxy = Math.max(maxy,pos.y);
+            }
 
+            minx = minx - style.node_size_x / 2 + tr_x;
+            miny = miny - style.node_size_y / 2 + tr_y;
+            maxx = maxx + style.node_size_x / 2 + tr_x;
+            maxy = maxy + style.node_size_y / 2 + tr_y;
+
+            return { minx:minx, miny:miny, maxx:maxx, maxy:maxy };
+        
+        };
+        // returns false if the translation dx,dy of the viewport 
+        // hides the graph (with optional margin)
+        var translation_respects_viewport = function(dx,dy,margin){
+            if(!viewport){
+                return true;
+            }
+            margin = margin || 0;
+            var b = get_bounds();
+            var width = viewport.offsetWidth; 
+            var height = viewport.offsetHeight;
+            
+            if( b.maxy + dy < margin   ||
+                b.miny + dy > height - margin ||
+                b.maxx + dx < margin ||
+                b.minx + dx > width - margin ){
+                return false;
+            }
+
+            return true;
+        }
         //Adds a mousewheel event callback to raph_element that scrolls the viewport
         this.set_scrolling = function(raph_element){
             $(raph_element.node).bind('mousewheel',function(event,delta){
-                translate_all(0,delta*20);
+                var dy = delta * 20;
+                if( translation_respects_viewport(0,dy, style.viewport_margin) ){
+                    translate_all(0,dy);
+                }
             });
         };
 
@@ -149,7 +199,9 @@
             var dy = y - py;
             px = x;
             py = y;
-            translate_all(dx,dy);
+            if( translation_respects_viewport(dx,dy, style.viewport_margin) ){
+                translate_all(dx,dy);
+            }
         };
         var bg_drag_up   = function(){};
         background.drag( bg_drag_move, bg_drag_down, bg_drag_up);