.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 *{
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(){
<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>