[IMP] Diagram: Resizable viewport, viewport move cursor

bzr revid: fva@openerp.com-20120228103933-j92bexvam1hsfc7t

addons/web_diagram/static/src/css/base_diagram.css

@@ -10,19 +10,31 @@
 .openerp .clear{
     clear:both;
 }
-.openerp .diagram{
+/* We use a resizable diagram-container. The problem with a 
+ * resizable diagram is that the diagram catches the mouse events
+ * and the diagram is then impossible to resize. That's why the
+ * diagram has a height of 98.5%, so that the bottom part of the
+ * diagram can be used for resize
+ */
+.openerp .diagram-container{
     margin:0;
     padding:0;
     width:100%;
-    height:500px;
-    /* resize:vertical; doesn't work because raphael catches the resize event...*/
-    min-height:100%;
-    background-color:white;
+    height:800px;
+    resize:vertical;
+    background-color:#FFF;
     border-style:solid;
     border-width:1px;
     border-color:#DCDCDC;
     overflow:hidden;
 }
+.openerp .diagram{
+    margin:0;
+    padding:0;
+    background-color:#FFF;
+    width:100%;
+    height:98.5%;
+}
 
 /* prevent accidental selection of the text in the svg nodes */
 .openerp .diagram *{

addons/web_diagram/static/src/js/graph.js

@@ -109,7 +109,7 @@
         self.style  = style;        // definition of the colors, spacing, fonts, ... used by the elements
         var tr_x = 0, tr_y = 0;         // global translation coordinate
 
-        var background = r.rect(0,0,'100%','100%').attr({'fill':'white', 'stroke':'none', 'opacity':0});
+        var background = r.rect(0,0,'100%','100%').attr({'fill':'white', 'stroke':'none', 'opacity':0, 'cursor':'move'});
         
         // return the global transform of the scene
         this.get_transform = function(){

addons/web_diagram/static/src/xml/base_diagram.xml

@@ -12,6 +12,8 @@
         <div class="clear"></div>
     </div>
     
-    <div id="dia-canvas" class="diagram"></div>
+    <div class="diagram-container">
+        <div id="dia-canvas" class="diagram"></div>
+    </div>
 </t>
 </template>