Merge pull request #39 from ESSS/fb-ASIM-1235-zoom-network

Add zoom in/out/reset and fit option

qmxgraph/api.py

@@ -339,6 +339,62 @@ def is_visible(self, cell_id):
         """
         return self.call_api('isVisible', cell_id)
 
+    def zoom_in(self):
+        """
+        Zoom in the graph.
+        """
+        return self.call_api('zoomIn')
+
+    def zoom_out(self):
+        """
+        Zoom out the graph.
+        """
+        return self.call_api('zoomOut')
+
+    def reset_zoom(self):
+        """
+        Reset graph's zoom.
+        """
+        return self.call_api('resetZoom')
+
+    def fit(self):
+        """
+        Rescale the graph to fit in the container.
+        """
+        return self.call_api('fit')
+
+    def get_zoom_scale(self):
+        """
+        Return the current scale (zoom).
+
+        :rtype: float
+        """
+        return self.call_api('getZoomScale')
+
+    def get_scale_and_translation(self):
+        """
+        Get the current scale and translation.
+
+        :rtype: Tuple[float, float, float]
+        :return: Respectively the values of graph scale, the translation
+            along the x axis, and the translation along the y axis. The
+            three values returned by this function is suitable to be
+            supplied to `` to set the scale and translation to a previous
+            value.
+        """
+        return tuple(self.call_api('getScaleAndTranslation'))
+
+    def set_scale_and_translation(self, scale, x, y):
+        """
+        Set the scale and translation.
+
+        :param float scale: The new graph's scale (1 = 100%).
+        :param float x: The new graph's translation along the X axis
+            (0 = origin).
+        :param float y: The new graph's scale along the Y axis (0 = origin}.
+        """
+        return self.call_api('setScaleAndTranslation', scale, x, y)
+
     def set_selected_cells(self, cell_ids):
         """
         Select the cells with the given ids.

qmxgraph/page/api.js

@@ -77,8 +77,6 @@ graphs.Api.prototype.insertVertex = function insertVertex (
         style
     );
 
-    graphs.utils.resizeContainerOnDemand(graph, vertex);
-
     return vertex.getId();
 };
 
@@ -134,7 +132,6 @@ graphs.Api.prototype.insertPort = function insertPort (
     } finally {
         model.endUpdate();
     }
-    graphs.utils.resizeContainerOnDemand(graph, port);
 };
 
 /**
@@ -369,7 +366,6 @@ graphs.Api.prototype.insertTable = function insertTable (
         model.endUpdate();
     }
 
-    graphs.utils.resizeContainerOnDemand(graph, table);
     return table.getId();
 };
 
@@ -706,6 +702,83 @@ graphs.Api.prototype.resizeContainer = function resizeContainer (width, height)
     this._graphEditor.graph.doResizeContainer(width, height);
 };
 
+/**
+ * Zoom in the graph.
+ */
+graphs.Api.prototype.zoomIn = function zoomIn () {
+    "use strict";
+
+    this._graphEditor.graph.zoomIn();
+};
+
+/**
+ * Zoom out the graph.
+ */
+graphs.Api.prototype.zoomOut = function zoomOut () {
+    "use strict";
+
+    this._graphEditor.graph.zoomOut();
+};
+
+/**
+ * Return the current scale (zoom).
+ *
+ * @returns {number}
+ */
+graphs.Api.prototype.getZoomScale = function getZoomScale () {
+    "use strict";
+
+    return this._graphEditor.graph.view.getScale();
+};
+
+/**
+ * Reset graph's zoom.
+ */
+graphs.Api.prototype.resetZoom = function resetZoom () {
+    "use strict";
+
+    this._graphEditor.graph.zoomActual();
+};
+
+/**
+ * Get the current scale and translation.
+ *
+ * @returns {number[]} The graph scale, the translation along the x axis, and the translation
+ * along the y axis. The three values returned by this function is suitable to be supplied to
+ * {@link graphs.Api#setScaleAndTranslation} to set the scale and translation to a previous value.
+ */
+graphs.Api.prototype.getScaleAndTranslation = function getScaleAndTranslation () {
+    "use strict";
+
+    var graph = this._graphEditor.graph;
+    var scale = graph.view.getScale();
+    var translate = graph.view.getTranslate();
+    return [scale, translate.x, translate.y];
+};
+
+/**
+ * Set the scale and translation.
+ *
+ * @param {number} scale The new graph's scale (1 = 100%).
+ * @param {number} x The new graph's translation along the X axis (0 = origin).
+ * @param {number} y The new graph's scale along the Y axis (0 = origin}.
+ */
+graphs.Api.prototype.setScaleAndTranslation = function setScaleAndTranslation (scale, x, y) {
+    "use strict";
+
+    var view = this._graphEditor.graph.getView();
+    view.scaleAndTranslate(scale, x, y);
+};
+
+/**
+ * Rescale the graph to fit in the container.
+ */
+graphs.Api.prototype.fit = function fit () {
+    "use strict";
+
+    this._graphEditor.graph.fit(10);
+};
+
 /**
  * Remove cells from graph.
  *

qmxgraph/page/css/graph.css

@@ -5,6 +5,7 @@ html, body {
 
 .graph {
     background:url('../images/grid.gif');
+    overflow: hidden;
 }
 
 .graph.hide-bg {

qmxgraph/page/graphs.js

@@ -431,6 +431,22 @@ graphs.createGraph = function createGraph (container, options, styles) {
     };
     graph.addListener(mxEvent.REFRESH, onRefresh);
 
+    // * Adds mouse wheel handling for zoom
+    mxEvent.addMouseWheelListener(function(evt, up) {
+        // - `up = true` direction:
+        //      Moves the viewport closer to the graph;
+        //      When browsing a web page the vertical scrollbar will move up;
+        // - `up = false` direction:
+        //      Moves the viewport away from the graph;
+        //      When browsing a web page the vertical scrollbar will move down;
+        if (up) {
+            graph.zoomIn();
+        } else {
+            graph.zoomOut();
+        }
+        mxEvent.consume(evt);
+    });
+
     // DEBUG -------------------------------------------------------------------
 
     graph.container.addEventListener(

qmxgraph/page/utils.js

@@ -272,23 +272,6 @@ graphs.utils.createTableElement = function createTableElement (contents, title)
     return table;
 };
 
-/**
- * In case cell is added too close to graph boundaries resize the container.
- *
- * @param {mxGraph} graph A graph.
- * @param {mxCell} cell A cell in graph.
- */
-graphs.utils.resizeContainerOnDemand = function resizeContainerOnDemand (graph, cell) {
-    "use strict";
-
-    var bbox = graph.getBoundingBox([cell]);
-    var containerWidth = Math.max(
-        graph.container.offsetWidth, bbox.x + bbox.width);
-    var containerHeight = Math.max(
-        graph.container.offsetHeight, bbox.y + bbox.height);
-    graph.doResizeContainer(containerWidth, containerHeight);
-};
-
 /**
  * Replace html "unsafe" characters on a given string.
  * From https://stackoverflow.com/a/4835406/783219

qmxgraph/widget.py

@@ -423,10 +423,15 @@ def _on_drop(self, event):
 
             if version in (1, 2):
                 vertices = parsed.get('vertices', [])
+                scale = self.api.get_zoom_scale()
                 for v in vertices:
+                    # place vertices with an offset so their center falls
+                    # in the event point.
+                    vertex_x = x + (v['dx'] - v['width'] * 0.5) * scale
+                    vertex_y = y + (v['dy'] - v['height'] * 0.5) * scale
                     self.api.insert_vertex(
-                        x=x + v['dx'] - v['width'] // 2,
-                        y=y + v['dy'] - v['height'] // 2,
+                        x=vertex_x,
+                        y=vertex_y,
                         width=v['width'],
                         height=v['height'],
                         label=v['label'],