renkan: comparison client/js/renderer/scene.js

Mercurial Mercurial > renkan / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/js/renderer/scene.js

changeset 512	480c1d2d6915
parent 490	8b05c7322e93
parent 511	4a48a1a9fd1e
child 519	b94a34c139c1

equal deleted inserted replaced

-:3ba7920facf4
+:480c1d2d6915
 }else{
 this.editor_$ = this.$.find(".Rk-Editor");
 }
 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;
 this.edge_layer = new paper.Layer();
 this.node_layer = new paper.Layer();
 _this.onDoubleClick(_touches);
 } else {
 _lastTap = new Date();
 _lastTapX = _touches.pageX;
 _lastTapY = _touches.pageY;
-_originalScale = _this.scale;
+_originalScale = _this.view.scale;
 _zooming = false;
 _this.onMouseDown(_touches, true);
 }
 },
 touchmove: function(_event) {
 }
 if (_event.originalEvent.scale === "undefined") {
 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 ));
+]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.view.offset.multiply( _scaleRatio ));
-_this.setScale(_newScale, _newOffset);
+_this.view.setScale(_newScale, _newOffset);
 }
 },
 touchend: function(_event) {
 _event.preventDefault();
 _this.onMouseUp(_event.originalEvent.changedTouches[0], true);
 _this[fname](evt);
 return false;
 });
 };
-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();
 }
 this.$.find(".Rk-CurrentUser").mouseenter(
 function() { _this.$.find(".Rk-UserList").slideDown(); }
 _ratio = ratioH;
 } else {
 _ratio = ratioW;
 }
-_this.resizeZoom(ratioW, ratioH, _ratio);
+_this.view.resizeZoom(ratioW, ratioH, _ratio);
 _this.redraw();
 };
 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() {
 _this.$.find(".Rk-PadTitle").val(_renkan.project.get("title"));
 });
 _this.$.find(".loader").hide(250);
 }, 3000);
 }
 else{
 Backbone.history.start();
+_thRedraw();
 }
 });
 this.renkan.project.on("add:users remove:users", _thRedrawUsers);
 };
 _(Scene.prototype).extend({
 fixSize: function() {
-if( this.renkan.options.default_view && this.renkan.project.get("views").length > 0) {
+//            if(typeothis.view) {
-var view = this.renkan.project.get("views").last();
+//                this.view.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
-this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
+//            }
-}
+//            else{
-else{
+//                this.view.autoScale();
-this.autoScale();
+//            }
-}
 },
 drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
 var _options = this.renkan.options,
 _startRads = _startAngle * Math.PI / 180,
 _endRads = _endAngle * Math.PI / 180,
 tip.text(this.renkan.translate("Auto-save enabled"));
 }
 }
 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));
 this.minimap.miniframe.fitBounds(topleft, bottomright);
 },
 _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.view.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_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)
 );
 this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
 this.minimap.scale = _scale;
 this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]).multiply(this.minimap.scale));
 }
 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;
 },
 addRepresentations: function(_type, _collection) {
 var _this = this;
 _collection.forEach(function(_model) {
 _this.addRepresentation(_type, _model);
 return;
 }
 _.each(this.representations, function(_representation) {
 _representation.redraw({ dontRedrawEdges:true });
 });
-if (this.minimap) {
+if (this.minimap && typeof this.view !== 'undefined') {
 this.redrawMiniframe();
 }
 paper.view.draw();
 },
 addTempEdge: function(_from, _point) {
 _tmpEdge.end_pos = _point;
 _tmpEdge.from_representation = _from;
 _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;
 if (this.selected_target !== _hitResult.item.__representation) {
 if (this.selected_target) {
 if (this.selected_target) {
 this.selected_target.unselect();
 }
 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([
 _event.pageX - _off.left,
 var _hitResult = paper.project.hitTest(_point);
 if (this.is_dragging) {
 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);
 }
 paper.view.draw();
 this.click_target = null;
 this.is_dragging = false;
 if (_isTouch) {
 this.unselectAll();
 }
+this.view.updateUrl();
 }
 paper.view.draw();
 },
 onScroll: function(_event, _scrolldelta) {
 this.totalScroll += _scrolldelta;
 if (Math.abs(this.totalScroll) >= 1) {
 var _off = this.canvas_$.offset(),
 _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;
 }
 },
 onDoubleClick: function(_event) {
 }
 }
 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;
 this.notif_$.hide();
 } else {
 var blob = new Blob([projectJSONStr], {type: "application/json;charset=utf-8"});
 filesaver(blob,fileNameToSaveAs);
 },
 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() {
 var foldBinsButton = this.$.find(".Rk-Fold-Bins"),
 bins = this.renkan.$.find(".Rk-Bins");
 paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
 });
 sizeAft = sizeBef+300;
 foldBinsButton.html("&raquo;");
 }
-_this.resizeZoom(1, 1, (sizeAft/sizeBef));
+_this.view.resizeZoom(1, 1, (sizeAft/sizeBef));
 },
 save: function() { },
 open: function() { }
 }).value();

renkan