client/js/renderer/scene.js
changeset 512 480c1d2d6915
parent 490 8b05c7322e93
parent 511 4a48a1a9fd1e
child 519 b94a34c139c1
--- a/client/js/renderer/scene.js	Wed Sep 09 13:10:01 2015 +0200
+++ b/client/js/renderer/scene.js	Wed Sep 09 15:05:30 2015 +0200
@@ -21,11 +21,7 @@
         }
         this.notif_$ = this.$.find(".Rk-Notifications");
         paper.setup(this.canvas_$[0]);
-        this.scale = 1;
-        this.initialScale = 1;
-        this.offset = paper.view.center;
         this.totalScroll = 0;
-        this.hiddenNodes = [];
         this.mouse_down = false;
         this.click_target = null;
         this.selected_target = null;
@@ -128,7 +124,7 @@
                     _lastTap = new Date();
                     _lastTapX = _touches.pageX;
                     _lastTapY = _touches.pageY;
-                    _originalScale = _this.scale;
+                    _originalScale = _this.view.scale;
                     _zooming = false;
                     _this.onMouseDown(_touches, true);
                 }
@@ -149,12 +145,12 @@
                         return;
                     }
                     var _newScale = _event.originalEvent.scale * _originalScale,
-                    _scaleRatio = _newScale / _this.scale,
+                    _scaleRatio = _newScale / _this.view.scale,
                     _newOffset = new paper.Point([
                                                   _this.canvas_$.width(),
                                                   _this.canvas_$.height()
-                                                  ]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.offset.multiply( _scaleRatio ));
-                    _this.setScale(_newScale, _newOffset);
+                                                  ]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.view.offset.multiply( _scaleRatio ));
+                    _this.view.setScale(_newScale, _newOffset);
                 }
             },
             touchend: function(_event) {
@@ -234,34 +230,6 @@
             });
         };
 
-        bindClick(".Rk-ZoomOut", "zoomOut");
-        bindClick(".Rk-ZoomIn", "zoomIn");
-        bindClick(".Rk-ZoomFit", "autoScale");
-        this.$.find(".Rk-ZoomSave").click( function() {
-            // Save scale and offset point
-            _this.renkan.project.addView( { zoom_level:_this.scale, offset:_this.offset, hidden_nodes: _this.hiddenNodes } );
-        });
-        this.$.find(".Rk-ZoomSetSaved").click( function() {
-            var view = _this.renkan.project.get("views").last();
-            if(view){
-                _this.showNodes(false);
-                _this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
-                if (_this.renkan.options.hide_nodes){
-                    _this.hiddenNodes = (view.get("hidden_nodes") || []).concat();
-                    _this.hideNodes();                    
-                }
-            }
-        });
-        this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() {
-            _this.showNodes(true);
-            _this.$.find(".Rk-ShowHiddenNodes").mouseleave( function() {
-                _this.hideNodes();
-            });
-        });
-        this.$.find(".Rk-ShowHiddenNodes").click( function() {
-            _this.showNodes(false);
-            _this.$.find(".Rk-ShowHiddenNodes").off( "mouseleave" );
-        });
         if(this.renkan.project.get("views").length > 0 && this.renkan.options.save_view){
             this.$.find(".Rk-ZoomSetSaved").show();
         }
@@ -314,7 +282,7 @@
                 _ratio = ratioW;
             }
 
-            _this.resizeZoom(ratioW, ratioH, _ratio);
+            _this.view.resizeZoom(ratioW, ratioH, _ratio);
 
             _this.redraw();
 
@@ -323,7 +291,7 @@
         var _thRedraw = _.throttle(function() {
             _this.redraw();
         },50);
-
+           
         this.addRepresentations("Node", this.renkan.project.get("nodes"));
         this.addRepresentations("Edge", this.renkan.project.get("edges"));
         this.renkan.project.on("change:title", function() {
@@ -370,6 +338,7 @@
             }
             else{
                 Backbone.history.start();
+                _thRedraw();
             }
         });
 
@@ -518,13 +487,12 @@
 
     _(Scene.prototype).extend({
         fixSize: function() {
-            if( this.renkan.options.default_view && this.renkan.project.get("views").length > 0) {
-                var view = this.renkan.project.get("views").last();
-                this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
-            }
-            else{
-                this.autoScale();
-            }
+//            if(typeothis.view) {
+//                this.view.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
+//            }
+//            else{
+//                this.view.autoScale();
+//            }
         },
         drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
             var _options = this.renkan.options,
@@ -674,38 +642,6 @@
             }
             this.redrawUsers();
         },
-        setScale: function(_newScale, _offset) {
-            if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) {
-                this.scale = _newScale;
-                if (_offset) {
-                    this.offset = _offset;
-                }
-                this.redraw();
-            }
-        },
-        autoScale: function(force_view) {
-            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);
-                var _scale = Math.min( (paper.view.size.width - 2 * this.renkan.options.autoscale_padding) / (_maxx - _minx), (paper.view.size.height - 2 * this.renkan.options.autoscale_padding) / (_maxy - _miny));
-                this.initialScale = _scale;
-                // Override calculated scale if asked
-                if((typeof force_view !== "undefined") && parseFloat(force_view.zoom_level)>0 && parseFloat(force_view.offset.x)>0 && parseFloat(force_view.offset.y)>0){
-                    this.setScale(parseFloat(force_view.zoom_level), new paper.Point(parseFloat(force_view.offset.x), parseFloat(force_view.offset.y)));
-                }
-                else{
-                    this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)));
-                }
-            }
-            if (nodes.length === 1) {
-                this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])));
-            }
-        },
         redrawMiniframe: function() {
             var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))),
                 bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight));
@@ -721,8 +657,8 @@
                     _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,
+                        this.view.scale * 0.8 * this.renkan.options.minimap_width / paper.view.bounds.width,
+                        this.view.scale * 0.8 * this.renkan.options.minimap_height / paper.view.bounds.height,
                         ( this.renkan.options.minimap_width - 2 * this.renkan.options.minimap_padding ) / (_maxx - _minx),
                         ( this.renkan.options.minimap_height - 2 * this.renkan.options.minimap_padding ) / (_maxy - _miny)
                 );
@@ -736,19 +672,19 @@
             this.redraw();
         },
         toPaperCoords: function(_point) {
-            return _point.multiply(this.scale).add(this.offset);
+            return _point.multiply(this.view.scale).add(this.view.offset);
         },
         toMinimapCoords: function(_point) {
             return _point.multiply(this.minimap.scale).add(this.minimap.offset).add(this.minimap.topleft);
         },
         toModelCoords: function(_point) {
-            return _point.subtract(this.offset).divide(this.scale);
+            return _point.subtract(this.view.offset).divide(this.view.scale);
         },
         addRepresentation: function(_type, _model) {
             var RendererType = requtils.getRenderer()[_type];
             var _repr = new RendererType(this, _model);
             this.representations.push(_repr);
-            return _repr;
+            return _repr;                
         },
         addRepresentations: function(_type, _collection) {
             var _this = this;
@@ -864,7 +800,7 @@
             _.each(this.representations, function(_representation) {
                 _representation.redraw({ dontRedrawEdges:true });
             });
-            if (this.minimap) {
+            if (this.minimap && typeof this.view !== 'undefined') {
                 this.redrawMiniframe();
             }
             paper.view.draw();
@@ -876,40 +812,6 @@
             _tmpEdge.redraw();
             this.click_target = _tmpEdge;
         },
-        addHiddenNode: function(_model){
-            this.hideNode(_model);
-            this.hiddenNodes.push(_model.id);
-        },
-        hideNode: function(_model){
-            var _this = this;
-            if (typeof _this.getRepresentationByModel(_model) !== 'undefined'){
-                _this.getRepresentationByModel(_model).hide();
-            }
-        },
-        hideNodes: function(){
-            var _this = this;
-            this.hiddenNodes.forEach(function(_id, index){
-                var node = _this.renkan.project.get("nodes").get(_id);
-                if (typeof node !== 'undefined'){
-                    return _this.hideNode(_this.renkan.project.get("nodes").get(_id));
-                }else{
-                    _this.hiddenNodes.splice(index, 1);
-                }
-            });
-            paper.view.draw();
-        },
-        showNodes: function(ghost){
-            var _this = this;
-            var i = 0;
-            this.hiddenNodes.forEach(function(_id){
-                i++;
-                _this.getRepresentationByModel(_this.renkan.project.get("nodes").get(_id)).show(ghost);
-            });
-            if (!ghost){
-                this.hiddenNodes = [];
-            }
-            paper.view.draw();
-        },
         findTarget: function(_hitResult) {
             if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
                 var _newTarget = _hitResult.item.__representation;
@@ -927,10 +829,6 @@
                 this.selected_target = null;
             }
         },
-        paperShift: function(_delta) {
-            this.offset = this.offset.add(_delta);
-            this.redraw();
-        },
         onMouseMove: function(_event) {
             var _off = this.canvas_$.offset(),
             _point = new paper.Point([
@@ -947,7 +845,7 @@
                 if (this.click_target && typeof this.click_target.paperShift === "function") {
                     this.click_target.paperShift(_delta);
                 } else {
-                    this.paperShift(_delta);
+                    this.view.paperShift(_delta);
                 }
             } else {
                 this.findTarget(_hitResult);
@@ -1020,6 +918,7 @@
                 if (_isTouch) {
                     this.unselectAll();
                 }
+                this.view.updateUrl();
             }
             paper.view.draw();
         },
@@ -1030,11 +929,11 @@
                 _delta = new paper.Point([
                                           _event.pageX - _off.left,
                                           _event.pageY - _off.top
-                                          ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
+                                          ]).subtract(this.view.offset).multiply( Math.SQRT2 - 1 );
                 if (this.totalScroll > 0) {
-                    this.setScale( this.scale * Math.SQRT2, this.offset.subtract(_delta) );
+                    this.view.setScale( this.view.scale * Math.SQRT2, this.view.offset.subtract(_delta) );
                 } else {
-                    this.setScale( this.scale * Math.SQRT1_2, this.offset.add(_delta.divide(Math.SQRT2)));
+                    this.view.setScale( this.view.scale * Math.SQRT1_2, this.view.offset.add(_delta.divide(Math.SQRT2)));
                 }
                 this.totalScroll = 0;
             }
@@ -1234,30 +1133,6 @@
                 this.redraw();
             }
         },
-        zoomOut: function() {
-            var _newScale = this.scale * Math.SQRT1_2,
-            _offset = new paper.Point([
-                                       this.canvas_$.width(),
-                                       this.canvas_$.height()
-                                       ]).multiply( 0.5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 ));
-            this.setScale( _newScale, _offset );
-        },
-        zoomIn: function() {
-            var _newScale = this.scale * Math.SQRT2,
-            _offset = new paper.Point([
-                                       this.canvas_$.width(),
-                                       this.canvas_$.height()
-                                       ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));
-            this.setScale( _newScale, _offset );
-        },
-        resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) {
-            var _newScale = this.scale * _ratio,
-                _offset = new paper.Point([
-                                       (this.offset.x * _scaleWidth),
-                                       (this.offset.y * _scaleHeight)
-                                       ]);
-            this.setScale( _newScale, _offset );
-        },
         addNodeBtn: function() {
             if (this.click_mode === Utils._CLICKMODE_ADDNODE) {
                 this.click_mode = false;
@@ -1325,9 +1200,42 @@
 
         },
         parameters: function(_params){
-            if (typeof _params.idnode !== 'undefined'){
+            if ($.isEmptyObject(_params)){
+                this.view = this.addRepresentation("View", this.renkan.project.get("views").last());
+                return;
+            }
+            if (typeof _params.view !== 'undefined'){
+                var viewParams = _params.view.split(",");
+                if (viewParams.length >= 3){
+                    var params = {
+                            "project": this.renkan.project,
+                            "offset": {
+                                "x": parseFloat(viewParams[0]),
+                                "y": parseFloat(viewParams[1])
+                            },
+                            "zoom_level": parseFloat(viewParams[2])
+                    };
+                    for (var i = 3; i < viewParams.length; i++){
+                        params.hidden_nodes.push(viewParams[i]);
+                    }
+                    //var view = new Rkns.Models.View(params);
+                    
+                    if (this.view){
+                        this.view.showNodes(false);
+                        this.removeRepresentation(this.view);
+                    }
+                    
+                    this.view = this.addRepresentation("View", null);
+                    this.view.params = params;
+                    this.view.init();
+                } else {
+                    this.view = this.addRepresentation("View", this.renkan.project.get("views").last());
+                }
+            }
+            //other parameters must go after because most of them depends on a view that must be initialize before
+            if (typeof _params.idNode !== 'undefined'){
                 this.unhighlightAll();
-                this.highlightModel(this.renkan.project.get("nodes").get(_params.idnode));                 
+                this.highlightModel(this.renkan.project.get("nodes").get(_params.iNnode));                 
             }
         },
         foldBins: function() {
@@ -1357,7 +1265,7 @@
                 sizeAft = sizeBef+300;
                 foldBinsButton.html("&raquo;");
             }
-            _this.resizeZoom(1, 1, (sizeAft/sizeBef));
+            _this.view.resizeZoom(1, 1, (sizeAft/sizeBef));
         },
         save: function() { },
         open: function() { }