--- a/client/js/paper-renderer.js Fri Mar 29 18:19:47 2013 +0100
+++ b/client/js/paper-renderer.js Tue Apr 02 18:01:14 2013 +0200
@@ -1,32 +1,18 @@
Rkns.Renderer = {
- _MINIMAP_MARGIN_X: 20,
- _MINIMAP_MARGIN_Y: 20,
+ _MINIMAP_MARGIN: 20,
_MIN_DRAG_DISTANCE: 2,
_NODE_SIZE_BASE: 25,
_NODE_BUTTON_WIDTH: 40,
_EDGE_BUTTON_INNER: 2,
_EDGE_BUTTON_OUTER: 40,
- _NODE_FONT_SIZE: 10,
- _EDGE_FONT_SIZE: 9,
- _EDGE_DISTANCE: 3,
- _NODE_MAX_CHAR: 50,
- _EDGE_MAX_CHAR: 40,
- _ARROW_LENGTH: 18,
- _ARROW_WIDTH: 12,
- _EDITOR_ARROW_LENGTH : 20,
- _EDITOR_ARROW_WIDTH : 40,
- _EDITOR_WIDTH : 275,
- _EDITOR_MARGIN : 15,
- _EDITOR_PADDING : 10,
- _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
_CLICKMODE_ADDNODE : 1,
_CLICKMODE_STARTEDGE : 2,
_CLICKMODE_ENDEDGE : 3,
_IMAGE_MAX_KB : 500,
_NODE_SIZE_STEP: Math.LN2/4,
+ _MIN_SCALE: 1/20,
+ _MAX_SCALE: 20,
_AUTOSCALE_MARGIN: 50,
- _MINIMAP_WIDTH: 160,
- _MINIMAP_HEIGHT: 120,
_USER_PLACEHOLDER : {
color: "#000000",
title: "(unknown user)",
@@ -45,21 +31,21 @@
shortenText : function(_text, _maxlength) {
return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);
},
- drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
- _selector.css({
- width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),
+ drawEditBox : function(_options, _coords, _path, _xmargin, _selector) {
+ _selector.css({
+ width: ( _options.tooltip_width - 2* _options.tooltip_margin ),
})
- var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING,
+ var _height = _selector.outerHeight() + 2* _options.tooltip_padding,
_isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
- _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH ),
- _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH + _width ),
+ _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
+ _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
_top = _coords.y - _height / 2;
- if (_top < Rkns.Renderer._EDITOR_MARGIN) {
- _top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
+ if (_top < _options.tooltip_margin) {
+ _top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 );
}
var _bottom = _top + _height;
- if (_bottom > (paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN)) {
- _bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
+ if (_bottom > (paper.view.size.height - _options.tooltip_margin)) {
+ _bottom = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 );
_top = _bottom - _height;
}
_path.segments[0].point
@@ -79,17 +65,18 @@
_path.segments[4].point.y
= _path.segments[5].point.y
= _bottom;
- _path.segments[1].point.y = _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;
- _path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2;
+ _path.segments[1].point.y = _coords.y - _options.tooltip_arrow_width / 2;
+ _path.segments[6].point.y = _coords.y + _options.tooltip_arrow_width / 2;
_path.closed = true;
- _path.fillColor = new paper.GradientColor(Rkns.Renderer._EDITOR_GRADIENT, [0,_top], [0, _bottom]);
+ _path.fillColor = new paper.GradientColor(new paper.Gradient([_options.tooltip_top_color, _options.tooltip_bottom_color]), [0,_top], [0, _bottom]);
_selector.css({
- left: (Rkns.Renderer._EDITOR_PADDING + Math.min(_left, _right)),
- top: (Rkns.Renderer._EDITOR_PADDING + _top)
+ left: (_options.tooltip_padding + Math.min(_left, _right)),
+ top: (_options.tooltip_padding + _top)
});
},
sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) {
- var _startRads = _startAngle * Math.PI / 180,
+ var _options = _repr.renderer.renkan.options,
+ _startRads = _startAngle * Math.PI / 180,
_endRads = _endAngle * Math.PI / 180,
_img = new Image(),
_span = _endRads - _startRads,
@@ -125,7 +112,7 @@
_path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);
_path.lineTo([_endXOut, _endYOut]);
_path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);
- _path.fillColor = "#333333";
+ _path.fillColor = _options.buttons_background;
_path.opacity = .5;
_path.closed = true;
_path.__representation = _repr;
@@ -136,8 +123,8 @@
}
var _text = new paper.PointText(_textX,_textY);
_text.characterStyle = {
- fontSize: 9,
- fillColor: '#c000c0'
+ fontSize: _options.buttons_label_font_size,
+ fillColor: _options.buttons_label_color
};
if (_textX > 2) {
_text.paragraphStyle.justification = 'left';
@@ -253,13 +240,20 @@
this.renderer.node_layer.activate();
this.type = "Node";
this.circle = new paper.Path.Circle([0, 0], 1);
+ this.circle.__representation = this;
this.circle.fillColor = '#ffffff';
- this.circle.__representation = this;
- this.circle.strokeWidth = 2;
+ if (this.renderer.renkan.options.show_node_circles) {
+ this.circle.strokeWidth = this.renderer.renkan.options.node_stroke_width;
+ this.h_ratio = 1;
+ } else {
+ this.circle.opacity = .01;
+ this.h_ratio = 0;
+ }
this.title = new paper.PointText([0,0]);
this.title.characterStyle = {
- fontSize: Rkns.Renderer._NODE_FONT_SIZE,
- fillColor: 'black'
+ font: this.renderer.renkan.options.node_label_font,
+ fontSize: this.renderer.renkan.options.node_label_font_size,
+ fillColor: this.renderer.renkan.options.node_label_color
};
if (this.renderer.renkan.options.editor_mode) {
this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
@@ -272,9 +266,11 @@
this.last_circle_radius = 1;
this.title.paragraphStyle.justification = 'center';
- this.renderer.minimap.node_layer.activate();
- this.minimap_circle = new paper.Path.Circle([0, 0], 1);
- this.renderer.minimap.node_group.addChild(this.minimap_circle);
+ if (this.renderer.minimap) {
+ this.renderer.minimap.node_layer.activate();
+ this.minimap_circle = new paper.Path.Circle([0, 0], 1);
+ this.renderer.minimap.node_group.addChild(this.minimap_circle);
+ }
}
Rkns.Renderer.Node.prototype.redraw = function(_dontRedrawEdges) {
@@ -293,7 +289,7 @@
var square = new paper.Size(this.circle_radius, this.circle_radius),
topleft = this.paper_coords.subtract(square),
bounds = new paper.Rectangle(topleft, square.multiply(2));
- this.circle.fitBounds(bounds);
+ this.circle.fitBounds(bounds);
if (this.node_image) {
this.node_image.fitBounds(bounds);
}
@@ -306,9 +302,12 @@
this.last_circle_radius = this.circle_radius;
var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
- this.title.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._NODE_MAX_CHAR);
+ this.title.content = Rkns.Renderer.Utils.shortenText(_text, this.renderer.renkan.options.node_label_max_length);
- this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
+ this.title.position = this.paper_coords.add([
+ 0,
+ this.circle_radius * this.h_ratio + this.renderer.renkan.options.node_label_font_size + this.renderer.renkan.options.node_label_distance
+ ]);
var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
this.circle.strokeColor = _color;
if (this.renderer.renkan.options.editor_mode) {
@@ -326,16 +325,20 @@
}
_this.renderer.node_layer.activate();
var _ratio = Math.min(2 / _image.width, 2 / _image.height );
+ if (!_this.renderer.renkan.options.show_node_circles) {
+ _this.h_ratio = Math.min(1, _image.height / _image.width);
+ }
var _raster = new paper.Raster(_image);
- if (_this.renderer.renkan.options.clip_images) {
+ if (_this.renderer.renkan.options.clip_node_images) {
var _clip = new paper.Path.Circle([0, 0], 1);
_raster.scale(_ratio);
_this.node_image = new paper.Group(_clip, _raster);
- _this.node_image.opacity = .9;
+ _this.node_image.opacity = .99;
/* This is a workaround to allow clipping at group level
* If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
*/
_this.node_image.clipped = true;
+ _clip.__representation = _this;
} else {
_this.node_image = _raster;
}
@@ -344,8 +347,7 @@
topleft = _this.paper_coords.subtract(square),
bounds = new paper.Rectangle(topleft, square.multiply(2));
_this.node_image.fitBounds(bounds);
- _clip.__representation = _this;
- paper.view.draw();
+ _this.redraw();
}
_image.src = _img;
}
@@ -355,11 +357,13 @@
delete this.node_image;
}
- this.minimap_circle.fillColor = _color;
- var minipos = this.renderer.toMinimapCoords(_model_coords),
- miniradius = this.renderer.minimap.scale * _baseRadius,
- minisize = new paper.Size([miniradius, miniradius]);
- this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));
+ if (this.renderer.minimap) {
+ this.minimap_circle.fillColor = _color;
+ var minipos = this.renderer.toMinimapCoords(_model_coords),
+ miniradius = this.renderer.minimap.scale * _baseRadius,
+ minisize = new paper.Size([miniradius, miniradius]);
+ this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));
+ }
if (!_dontRedrawEdges) {
Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){
@@ -392,7 +396,7 @@
}
Rkns.Renderer.Node.prototype.select = function() {
- this.circle.strokeWidth = 4;
+ this.circle.strokeWidth = this.renderer.renkan.options.selected_node_stroke_width;
if (this.renderer.isEditable()) {
this.edit_button.show();
this.remove_button.show();
@@ -410,7 +414,10 @@
if (!this.renderer.renkan.options.editor_mode) {
this.openEditor();
}
- this.minimap_circle.fillColor = "#ff00fc";
+
+ if (this.renderer.minimap) {
+ this.minimap_circle.fillColor = "#ff00fc";
+ }
}
Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
@@ -420,9 +427,11 @@
this.remove_button.hide();
this.link_button.hide();
}
- this.circle.strokeWidth = 2;
+ this.circle.strokeWidth = this.renderer.renkan.options.node_stroke_width;
Rkns.$('.Rk-Bin-Item').removeClass("selected");
- this.minimap_circle.fillColor = this.circle.strokeColor;
+ if (this.renderer.minimap) {
+ this.minimap_circle.fillColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+ }
}
}
@@ -436,7 +445,7 @@
Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) {
this.circle.fillColor = "#ffffff";
if (this.node_image) {
- this.node_image.opacity = .9;
+ this.node_image.opacity = .99;
}
}
@@ -474,7 +483,9 @@
}
this.circle.remove();
this.title.remove();
- this.minimap_circle.remove();
+ if (this.renderer.minimap) {
+ this.minimap_circle.remove();
+ }
if (this.node_image) {
this.node_image.remove();
}
@@ -493,14 +504,19 @@
this.line = new paper.Path();
this.line.add([0,0],[0,0],[0,0]);
this.line.__representation = this;
- this.line.strokeWidth = 2;
+ this.line.strokeWidth = this.renderer.renkan.options.edge_stroke_width;
this.arrow = new paper.Path();
- this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
+ this.arrow.add(
+ [ 0, 0 ],
+ [ this.renderer.renkan.options.edge_arrow_length, this.renderer.renkan.options.edge_arrow_width / 2 ],
+ [ 0, this.renderer.renkan.options.edge_arrow_width ]
+ );
this.arrow.__representation = this;
this.text = new paper.PointText();
this.text.characterStyle = {
- fontSize: Rkns.Renderer._EDGE_FONT_SIZE,
- fillColor: 'black'
+ font: this.renderer.renkan.options.edge_label_font,
+ fontSize: this.renderer.renkan.options.edge_label_font_size,
+ fillColor: this.renderer.renkan.options.edge_label_color
};
this.text.paragraphStyle.justification = 'center';
this.text_angle = 0;
@@ -511,6 +527,13 @@
this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
this.remove_button.edge_representation = this;
}
+
+ if (this.renderer.minimap) {
+ this.renderer.minimap.edge_layer.activate();
+ this.minimap_line = new paper.Path();
+ this.minimap_line.add([0,0],[0,0]);
+ this.minimap_line.strokeWidth = 1;
+ }
}
Rkns.Renderer.Edge.prototype.redraw = function() {
@@ -526,11 +549,11 @@
_u = _v.divide(_r),
_ortho = new paper.Point([- _u.y, _u.x]),
_group_pos = this.bundle.getPosition(this),
- _delta = _ortho.multiply( 12 * _group_pos ),
+ _delta = _ortho.multiply( this.renderer.renkan.options.edge_gap_in_bundles * _group_pos ),
_p0b = _p0a.add(_delta), /* Adding a 4 px difference */
- _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
+ _p1b = _p1a.add(_delta), /* to differentiate bundled links */
_a = _v.angle,
- _textdelta = _ortho.multiply(-Rkns.Renderer._EDGE_DISTANCE),
+ _textdelta = _ortho.multiply(this.renderer.renkan.options.edge_label_distance),
_handle = _v.divide(3),
_color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
this.paper_coords = _p0b.add(_p1b).divide(2);
@@ -542,7 +565,7 @@
this.line.segments[2].point = _p1a;
this.arrow.rotate(_a - this.arrow_angle);
this.arrow.fillColor = _color;
- this.arrow.position = this.paper_coords.subtract(_u.multiply(4));
+ this.arrow.position = this.paper_coords;
this.arrow_angle = _a;
if (_a > 90) {
_a -= 180;
@@ -554,13 +577,19 @@
}
this.text.rotate(_a - this.text_angle);
var _text = this.model.get("title");
- this.text.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._EDGE_MAX_CHAR);
+ this.text.content = Rkns.Renderer.Utils.shortenText(_text, this.renderer.renkan.options.edge_label_max_length);
this.text.position = this.paper_coords.add(_textdelta);
this.text_angle = _a;
if (this.renderer.renkan.options.editor_mode) {
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
}
+
+ if (this.renderer.minimap) {
+ this.minimap_line.strokeColor = _color;
+ this.minimap_line.segments[0].point = this.renderer.toMinimapCoords(new paper.Point(this.from_representation.model.get("position")));
+ this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get("position")));
+ }
}
Rkns.Renderer.Edge.prototype.openEditor = function() {
@@ -571,7 +600,7 @@
}
Rkns.Renderer.Edge.prototype.select = function() {
- this.line.strokeWidth = 4;
+ this.line.strokeWidth = this.renderer.renkan.options.selected_edge_stroke_width;
if (this.renderer.isEditable()) {
this.edit_button.show();
this.remove_button.show();
@@ -587,7 +616,7 @@
this.edit_button.hide();
this.remove_button.hide();
}
- this.line.strokeWidth = 2;
+ this.line.strokeWidth = this.renderer.renkan.options.edge_stroke_width;
}
}
@@ -620,6 +649,9 @@
this.line.remove();
this.arrow.remove();
this.text.remove();
+ if (this.renderer.minimap) {
+ this.minimap_line.remove();
+ }
if (this.renderer.renkan.options.editor_mode) {
this.edit_button.destroy();
this.remove_button.destroy();
@@ -645,7 +677,11 @@
this.line.__representation = this;
this.arrow = new paper.Path();
this.arrow.fillColor = _color;
- this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
+ this.arrow.add(
+ [ 0, 0 ],
+ [ this.renderer.renkan.options.edge_arrow_length, this.renderer.renkan.options.edge_arrow_width / 2 ],
+ [ 0, this.renderer.renkan.options.edge_arrow_width ]
+ );
this.arrow.__representation = this;
this.arrow_angle = 0;
}
@@ -874,7 +910,7 @@
Rkns.Renderer.NodeEditor.prototype.redraw = function() {
var _coords = this.node_representation.paper_coords;
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 20, this.editor_$);
+ Rkns.Renderer.Utils.drawEditBox(this.renderer.renkan.options, _coords, this.editor_block, this.node_representation.circle_radius * .75, this.editor_$);
this.editor_$.show();
paper.view.draw();
}
@@ -1025,7 +1061,7 @@
Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
var _coords = this.edge_representation.paper_coords;
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 5, this.editor_$);
+ Rkns.Renderer.Utils.drawEditBox(this.renderer.renkan.options, _coords, this.editor_block, 5, this.editor_$);
this.editor_$.show();
paper.view.draw();
}
@@ -1308,33 +1344,37 @@
this.node_layer = new paper.Layer();
this.buttons_layer = new paper.Layer();
- this.minimap = {
- background_layer: new paper.Layer(),
- node_layer: new paper.Layer(),
- node_group: new paper.Group(),
- size: new paper.Size( Rkns.Renderer._MINIMAP_WIDTH, Rkns.Renderer._MINIMAP_HEIGHT )
+ if (_renkan.options.show_minimap) {
+ this.minimap = {
+ background_layer: new paper.Layer(),
+ edge_layer: new paper.Layer(),
+ node_layer: new paper.Layer(),
+ node_group: new paper.Group(),
+ size: new paper.Size( _renkan.options.minimap_width, _renkan.options.minimap_height )
+ }
+
+ this.minimap.background_layer.activate();
+ this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size);
+ this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4]));
+ this.minimap.rectangle.fillColor = '#ffffff';
+ this.minimap.rectangle.strokeColor = '#cccccc';
+ this.minimap.rectangle.strokeWidth = 4;
+ this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
+ this.minimap.scale = .1;
+
+ this.minimap.node_layer.activate();
+ this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+ this.minimap.node_group.addChild(this.minimap.cliprectangle);
+ this.minimap.node_group.clipped = true;
+ this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+ this.minimap.node_group.addChild(this.minimap.miniframe);
+ this.minimap.miniframe.fillColor = '#c0c0ff';
+ this.minimap.miniframe.opacity = .3;
+ this.minimap.miniframe.strokeColor = '#000080';
+ this.minimap.miniframe.strokeWidth = 3;
+ this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null);
}
- this.minimap.background_layer.activate();
- this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size);
- this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4]));
- this.minimap.rectangle.fillColor = '#ffffff';
- this.minimap.rectangle.strokeColor = '#cccccc';
- this.minimap.rectangle.strokeWidth = 4;
- this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
- this.minimap.scale = .1;
-
- this.node_layer.activate();
- this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
- this.minimap.node_group.addChild(this.minimap.cliprectangle);
- this.minimap.node_group.clipped = true;
- this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
- this.minimap.node_group.addChild(this.minimap.miniframe);
- this.minimap.miniframe.fillColor = '#f0f0ff';
- this.minimap.miniframe.strokeColor = '#8080ff';
- this.minimap.miniframe.strokeWidth = 2;
- this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null);
-
this.bundles = [];
this.click_mode = false;
var _tool = new paper.Tool(),
@@ -1485,20 +1525,20 @@
}
})
this.editor_$.find(".Rk-ZoomOut").click(function() {
- _this.offset = new paper.Point([
- _this.canvas_$.width(),
- _this.canvas_$.height()
- ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
- _this.setScale( _this.scale * Math.SQRT1_2 );
- _this.redraw();
+ var _newScale = _this.scale * Math.SQRT1_2,
+ _offset = new paper.Point([
+ _this.canvas_$.width(),
+ _this.canvas_$.height()
+ ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
+ _this.setScale( _newScale, _offset );
});
this.editor_$.find(".Rk-ZoomIn").click(function() {
- _this.offset = new paper.Point([
- _this.canvas_$.width(),
- _this.canvas_$.height()
- ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
- _this.setScale( _this.scale * Math.SQRT2 );
- _this.redraw();
+ var _newScale = _this.scale * Math.SQRT2,
+ _offset = new paper.Point([
+ _this.canvas_$.width(),
+ _this.canvas_$.height()
+ ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
+ _this.setScale( _newScale, _offset );
});
this.$.find(".Rk-CurrentUser").mouseenter(
function() { _this.$.find(".Rk-UserList").slideDown() }
@@ -1581,9 +1621,11 @@
paper.view.onResize = function(_event) {
_this.offset = _this.offset.add(_event.delta.divide(2));
- _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size)
- _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
- _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);
+ if (_this.minimap) {
+ _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size)
+ _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
+ _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);
+ }
_this.redraw();
}
@@ -1628,9 +1670,12 @@
});
this.redraw();
- window.setInterval(function() {
- _this.rescaleMinimap()
- }, 2000);
+
+ if (this.minimap) {
+ window.setInterval(function() {
+ _this.rescaleMinimap()
+ }, 2000);
+ }
}
Rkns.Renderer.Scene.prototype.template = Rkns._.template(
@@ -1697,9 +1742,14 @@
}
}
-Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
- this.scale = _newScale;
- this.redraw();
+Rkns.Renderer.Scene.prototype.setScale = function(_newScale, _offset) {
+ if (_newScale > Rkns.Renderer._MIN_SCALE && _newScale < Rkns.Renderer._MAX_SCALE) {
+ this.scale = _newScale;
+ if (_offset) {
+ this.offset = _offset
+ }
+ this.redraw();
+ }
}
Rkns.Renderer.Scene.prototype.autoScale = function() {
@@ -1711,13 +1761,11 @@
_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 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxy - _miny));
- this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
- this.setScale(_scale);
+ var _scale = Math.max(Rkns.Renderer._MIN_SCALE, Math.min(Rkns.Renderer._MAX_SCALE, (paper.view.size.width - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxy - _miny)));
+ this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)));
}
if (nodes.length === 1) {
- this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
- this.setScale(1);
+ this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])));
}
}
@@ -1736,7 +1784,12 @@
_miny = Math.min.apply(Math, _yy),
_maxx = Math.max.apply(Math, _xx),
_maxy = Math.max.apply(Math, _yy);
- var _scale = Math.min(this.scale * .8 * Rkns.Renderer._MINIMAP_WIDTH / paper.view.bounds.width, this.scale * .8 * Rkns.Renderer._MINIMAP_HEIGHT / paper.view.bounds.height, (Rkns.Renderer._MINIMAP_WIDTH - 2 * Rkns.Renderer._MINIMAP_MARGIN_X) / (_maxx - _minx), (Rkns.Renderer._MINIMAP_HEIGHT - 2 * Rkns.Renderer._MINIMAP_MARGIN_Y) / (_maxy - _miny));
+ var _scale = Math.min(
+ this.scale * .8 * this.renkan.options.minimap_width / paper.view.bounds.width,
+ this.scale * .8 * this.renkan.options.minimap_height / paper.view.bounds.height,
+ ( this.renkan.options.minimap_width - 2 * Rkns.Renderer._MINIMAP_MARGIN ) / (_maxx - _minx),
+ ( this.renkan.options.minimap_height - 2 * Rkns.Renderer._MINIMAP_MARGIN ) / (_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;
}
@@ -1834,7 +1887,9 @@
Rkns._(this.representations).each(function(_representation) {
_representation.redraw(true);
});
- this.redrawMiniframe();
+ if (this.minimap) {
+ this.redrawMiniframe();
+ }
paper.view.draw();
}
@@ -1956,14 +2011,11 @@
_event.pageY - _off.top
]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
if (this.totalScroll > 0) {
- this.offset = this.offset.subtract(_delta);
- this.setScale( this.scale * Math.SQRT2 );
+ this.setScale( this.scale * Math.SQRT2, this.offset.subtract(_delta) );
} else {
- this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
- this.setScale( this.scale * Math.SQRT1_2);
+ this.setScale( this.scale * Math.SQRT1_2, this.offset.add(_delta.divide(Math.SQRT2)));
}
this.totalScroll = 0;
- this.redraw();
}
}