--- a/client/js/renderer/scene.js Thu Jun 18 17:18:15 2015 +0200
+++ b/client/js/renderer/scene.js Wed Jun 24 17:15:22 2015 +0200
@@ -21,9 +21,6 @@
}
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.mouse_down = false;
this.click_target = null;
@@ -127,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);
}
@@ -148,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) {
@@ -233,19 +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.view.hiddenNodes } );
- });
- this.$.find(".Rk-ZoomSetSaved").click( function() {
- var view = _this.renkan.project.get("views").last();
- if(view){
- _this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
- }
- });
if(this.renkan.project.get("views").length > 0 && this.renkan.options.save_view){
this.$.find(".Rk-ZoomSetSaved").show();
}
@@ -298,7 +282,7 @@
_ratio = ratioW;
}
- _this.resizeZoom(ratioW, ratioH, _ratio);
+ _this.view.resizeZoom(ratioW, ratioH, _ratio);
_this.redraw();
@@ -353,7 +337,9 @@
}, 3000);
}
else{
+ _this.view = _this.addRepresentation("View", _this.renkan.project.get("views").last());
Backbone.history.start();
+ _thRedraw();
}
});
@@ -380,14 +366,14 @@
_thRedraw();
}
});
- this.renkan.project.on("add:views", function(_view) {
- if (!_this.view){
- _this.view = _this.addRepresentation("View", _view);
- }
- if (!_this.renkan.project.get("loadingStatus")){
- _thRedraw();
- }
- });
+// this.renkan.project.on("add:views", function(_view) {
+// if (!_this.view){
+// _this.view = _this.addRepresentation("View", _view);
+// }
+// if (!_this.renkan.project.get("loadingStatus")){
+// _thRedraw();
+// }
+// });
this.renkan.project.on("change:title", function(_model, _title) {
var el = _this.$.find(".Rk-PadTitle");
if (el.is("input")) {
@@ -510,12 +496,11 @@
_(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")));
+ if( this.renkan.options.default_view && this.view) {
+ this.view.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
}
else{
- this.autoScale();
+ this.view.autoScale();
}
},
drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
@@ -666,38 +651,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));
@@ -713,8 +666,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)
);
@@ -728,13 +681,13 @@
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];
@@ -856,7 +809,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();
@@ -886,7 +839,7 @@
}
},
paperShift: function(_delta) {
- this.offset = this.offset.add(_delta);
+ this.view.offset = this.view.offset.add(_delta);
this.redraw();
},
onMouseMove: function(_event) {
@@ -988,11 +941,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;
}
@@ -1192,30 +1145,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;
@@ -1315,7 +1244,7 @@
sizeAft = sizeBef+300;
foldBinsButton.html("»");
}
- _this.resizeZoom(1, 1, (sizeAft/sizeBef));
+ _this.view.resizeZoom(1, 1, (sizeAft/sizeBef));
},
save: function() { },
open: function() { }
--- a/client/js/renderer/viewrepr.js Thu Jun 18 17:18:15 2015 +0200
+++ b/client/js/renderer/viewrepr.js Wed Jun 24 17:15:22 2015 +0200
@@ -15,18 +15,38 @@
this.$ = $(".Rk-Render");
this.type = "View";
this.hiddenNodes = [];
+ this.scale = 1;
+ this.initialScale = 1;
+ this.offset = paper.view.center;
-// this.$.find(".Rk-ZoomSetSaved").click( function() {
-// var view = _this.renkan.project.get("views").last();
-// if(view){
-// //_this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset")));
- _this.showNodes(false);
- if (this.options.hide_nodes){
- this.hiddenNodes = (this.model.get("hidden_nodes") || []).concat();
- this.hideNodes();
+ var bindClick = function(selector, fname) {
+ _this.$.find(selector).click(function(evt) {
+ _this[fname](evt);
+ return false;
+ });
+ };
+
+ bindClick(".Rk-ZoomOut", "zoomOut");
+ bindClick(".Rk-ZoomIn", "zoomIn");
+ bindClick(".Rk-ZoomFit", "autoScale");
+
+ this.$.find(".Rk-ZoomSave").click( function() {
+ var offset = {};
+ offset.x = _this.offset.x;
+ offset.y = _this.offset.y;
+ _this.model.set( { zoom_level:_this.scale, offset:offset, hidden_nodes: _this.hiddenNodes.concat() } );
+ });
+
+ this.$.find(".Rk-ZoomSetSaved").click( function() {
+ if(_this.model){
+ _this.setScale(_this.model.get("zoom_level"), new paper.Point(_this.model.get("offset")));
+ _this.showNodes(false);
+ if (_this.options.hide_nodes){
+ _this.hiddenNodes = (_this.model.get("hidden_nodes") || []).concat();
+ _this.hideNodes();
+ }
}
-// }
-// });
+ });
this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() {
_this.showNodes(true);
@@ -43,6 +63,7 @@
}
},
redraw: function(options) {
+ //console.log("redraw view repr");
},
addHiddenNode: function(_model){
this.hideNode(_model);
@@ -75,6 +96,69 @@
}
paper.view.draw();
},
+ setScale: function(_newScale, _offset) {
+ if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) {
+ this.scale = _newScale;
+ this.renderer.scale = _newScale;
+ if (_offset) {
+ this.offset = _offset;
+ this.renderer.offset = _offset;
+ }
+ this.renderer.redraw();
+ }
+ },
+ zoomOut: function() {
+ var _newScale = this.scale * Math.SQRT1_2,
+ _offset = new paper.Point([
+ this.renderer.canvas_$.width(),
+ this.renderer.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.renderer.canvas_$.width(),
+ this.renderer.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 );
+ },
+ 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])));
+ }
+ },
+ paperShift: function(_delta) {
+ this.offset = this.offset.add(_delta);
+ this.renderer.offset = this.renderer.offset.add(_delta);
+ this.renderer.redraw();
+ },
}).value();
return ViewRepr;