diff -r 3ba7920facf4 -r 480c1d2d6915 client/js/renderer/scene.js --- 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("»"); } - _this.resizeZoom(1, 1, (sizeAft/sizeBef)); + _this.view.resizeZoom(1, 1, (sizeAft/sizeBef)); }, save: function() { }, open: function() { }