client/js/renderer/scene.js
changeset 403 96781c1a8bbe
parent 398 57f8d344fde9
child 411 38527e730186
--- a/client/js/renderer/scene.js	Fri Mar 13 16:46:50 2015 +0100
+++ b/client/js/renderer/scene.js	Tue Mar 17 18:53:36 2015 +0100
@@ -30,9 +30,6 @@
         this.delete_list = [];
         this.redrawActive = true;
 
-        var currentWidth = this.canvas_$.width();
-        var currentHeight = this.canvas_$.height();
-
         if (_renkan.options.show_minimap) {
             this.minimap = {
                     background_layer: new paper.Layer(),
@@ -60,7 +57,7 @@
             this.minimap.miniframe.fillColor = '#c0c0ff';
             this.minimap.miniframe.opacity = 0.3;
             this.minimap.miniframe.strokeColor = '#000080';
-            this.minimap.miniframe.strokeWidth = 3;
+            this.minimap.miniframe.strokeWidth = 2;
             this.minimap.miniframe.__representation = new MiniFrame(this, null);
         }
 
@@ -280,13 +277,8 @@
 
         paper.view.onResize = function(_event) {
             var _ratio,
-                newWidth= _this.canvas_$.parent().width(),
-                newHeight = _this.canvas_$.parent().height();
-            // Because of paper bug which does not calculate the good height and width
-            // We have to update manually the canvas's height and width
-
-            paper.view._viewSize.height =  _event.size.height = _this.canvas_$.parent().height();
-            paper.view._viewSize.width =  _event.size.height = _this.canvas_$.parent().width();
+                newWidth = _event.width,
+                newHeight = _event.height;
 
             if (_this.minimap) {
                 _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size);
@@ -294,16 +286,15 @@
                 _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);
             }
 
+            var ratioH = newHeight/(newHeight-_event.delta.height),
+                ratioW = newWidth/(newWidth-_event.delta.width);
             if (newHeight < newWidth) {
-                    _ratio = (newHeight/currentHeight);
+                    _ratio = ratioH;
             } else {
-                _ratio = (newWidth/currentWidth);
+                _ratio = ratioW;
             }
 
-            _this.resizeZoom((newWidth/currentWidth), (newHeight/currentHeight), _ratio);
-
-            currentWidth = newWidth;
-            currentHeight = newHeight;
+            _this.resizeZoom(ratioW, ratioH, _ratio);
 
             _this.redraw();
 
@@ -522,7 +513,7 @@
                 'if (options.show_search_field) { %>' +
                 '<form action="#" class="Rk-GraphSearch-Form"><input type="search" class="Rk-GraphSearch-Field" placeholder="<%- translate("Search in graph") %>" /></form><div class="Rk-TopBar-Separator"></div><% } %></div><% } %>' +
                 '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">' +
-                '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Notifications"></div><div class="Rk-Editor">' +
+                '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" <% if (options.resize) { %> resize="" <% } %>></canvas><div class="Rk-Notifications"></div><div class="Rk-Editor">' +
                 '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>' +
                 '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomFit" title="<%-translate("Zoom Fit")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div>' +
                 '<% if (options.editor_mode) { %><div class="Rk-ZoomSave" title="<%-translate("Zoom Save")%>"></div><% } %>' +
@@ -530,17 +521,6 @@
                 '</div></div>'
         ),
         fixSize: function(_autoscale) {
-            var w = this.$.width(),
-            h = this.$.height();
-            if (this.renkan.options.show_top_bar) {
-                h -= this.$.find(".Rk-TopBar").height();
-            }
-            this.canvas_$.attr({
-                width: w,
-                height: h
-            });
-
-            paper.view.viewSize = new paper.Size([w, h]);
 
             if (_autoscale) {
                 // If _autoscale, we get the initial view (zoom+offset) set in the project datas.
@@ -734,18 +714,18 @@
         },
         redrawMiniframe: function() {
             var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))),
-            bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight));
+                bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight));
             this.minimap.miniframe.fitBounds(topleft, bottomright);
         },
         rescaleMinimap: function() {
             var nodes = this.renkan.project.get("nodes");
             if (nodes.length > 1) {
                 var _xx = nodes.map(function(_node) { return _node.get("position").x; }),
-                _yy = nodes.map(function(_node) { return _node.get("position").y; }),
-                _minx = Math.min.apply(Math, _xx),
-                _miny = Math.min.apply(Math, _yy),
-                _maxx = Math.max.apply(Math, _xx),
-                _maxy = Math.max.apply(Math, _yy);
+                    _yy = nodes.map(function(_node) { return _node.get("position").y; }),
+                    _minx = Math.min.apply(Math, _xx),
+                    _miny = Math.min.apply(Math, _yy),
+                    _maxx = Math.max.apply(Math, _xx),
+                    _maxy = Math.max.apply(Math, _yy);
                 var _scale = Math.min(
                         this.scale * 0.8 * this.renkan.options.minimap_width / paper.view.bounds.width,
                         this.scale * 0.8 * this.renkan.options.minimap_height / paper.view.bounds.height,
@@ -1186,10 +1166,10 @@
         },
         fullScreen: function() {
             var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
-              _el = this.renkan.$[0],
-              _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
-              _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"],
-              i;
+                _el = this.renkan.$[0],
+                _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+                _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"],
+                i;
             if (_isFull) {
                 for (i = 0; i < _cancelMethods.length; i++) {
                     if (typeof document[_cancelMethods[i]] === "function") {
@@ -1207,12 +1187,7 @@
                     widthAft -= this.renkan.$.find(".Rk-Bins").width();
                 }
 
-                this.canvas_$.attr({
-                    width: widthAft,
-                    height: heightAft
-                });
-
-                paper.view.viewSize = new paper.Size([this.canvas_$.width(), this.canvas_$.height()]);
+                paper.view.viewSize = new paper.Size([widthAft, heightAft]);
 
             } else {
                 for (i = 0; i < _requestMethods.length; i++) {
@@ -1221,6 +1196,7 @@
                         break;
                     }
                 }
+                this.redraw();
             }
         },
         zoomOut: function() {