renkan: comparison client/js/paper-renderer.js

Mercurial Mercurial > renkan / comparison

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

client/js/paper-renderer.js

changeset 120	112a82ddd7e5
parent 119	0f7d2275a88f
child 122	ea11e17e0a35

equal deleted inserted replaced

-:0f7d2275a88f
+:112a82ddd7e5
 Rkns.Renderer = {
-_MINIMAP_MARGIN_X: 20,
+_MINIMAP_MARGIN: 20,
-_MINIMAP_MARGIN_Y: 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)",
 get: function(attr) {
 return this[attr] || false;
 Rkns.Renderer.Utils = {
 	shortenText : function(_text, _maxlength) {
 		return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);
 	},
-drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
+drawEditBox : function(_options, _coords, _path, _xmargin, _selector) {
-_selector.css({
+	_selector.css({
-width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),
+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 ),
+_left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
-_right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH + _width ),
+_right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
 _top = _coords.y - _height / 2;
-if (_top < Rkns.Renderer._EDITOR_MARGIN) {
+if (_top < _options.tooltip_margin) {
-_top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
+_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)) {
+if (_bottom > (paper.view.size.height - _options.tooltip_margin)) {
-_bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 );
+_bottom = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 );
 _top = _bottom - _height;
 }
 _path.segments[0].point
 = _path.segments[7].point
 = _coords.add([_isLeft * _xmargin, 0]);
 = _path.segments[3].point.y
 = _top;
 _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[1].point.y = _coords.y - _options.tooltip_arrow_width / 2;
-_path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_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)),
+left: (_options.tooltip_padding + Math.min(_left, _right)),
-top: (Rkns.Renderer._EDITOR_PADDING + _top)
+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,
 _k = .0879 * _span,
 _kin = _k * _inR,
 var _path = new paper.Path();
 _path.add([_startXIn, _startYIn]);
 _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;
 if (_textX >= -2 && _textX <= 2) {
 if (_textY > 0) {
 _textY += 6;
 }
 }
 var _text = new paper.PointText(_textX,_textY);
 _text.characterStyle = {
-fontSize: 9,
+fontSize: _options.buttons_label_font_size,
-fillColor: '#c000c0'
+fillColor: _options.buttons_label_color
 };
 if (_textX > 2) {
 _text.paragraphStyle.justification = 'left';
 } else if (_textX < -2) {
 _text.paragraphStyle.justification = 'right';
 Rkns.Renderer.Node.prototype._init = function() {
 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;
+if (this.renderer.renkan.options.show_node_circles) {
-this.circle.strokeWidth = 2;
+	    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,
+font: this.renderer.renkan.options.node_label_font,
-fillColor: 'black'
+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);
 this.edit_button.node_representation = this;
 this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
 this.link_button.node_representation = this;
 }
 this.last_circle_radius = 1;
 this.title.paragraphStyle.justification = 'center';
-this.renderer.minimap.node_layer.activate();
+if (this.renderer.minimap) {
-this.minimap_circle = new paper.Path.Circle([0, 0], 1);
+	    this.renderer.minimap.node_layer.activate();
-this.renderer.minimap.node_group.addChild(this.minimap_circle);
+	    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) {
 var _model_coords = new paper.Point(this.model.get("position")),
 	_baseRadius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP);
 	    	this.link_button.setSectorSize();
 	    }
 	    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);
 	    }
 } else {
 	this.circle.position = this.paper_coords;
 }
 }
 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) {
 	this.edit_button.moveTo(this.paper_coords);
 	    this.remove_button.moveTo(this.paper_coords);
 if (_this.node_image) {
 _this.node_image.remove();
 }
 _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;
 }
 _this.node_image.__representation = _this;
 		    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.node_image.fitBounds(bounds);
-_clip.__representation = _this;
+_this.redraw();
-paper.view.draw();
 }
 _image.src = _img;
 }
 this.img = _img;
 if (this.node_image && !this.img) {
 this.node_image.remove();
 delete this.node_image;
 }
-this.minimap_circle.fillColor = _color;
+if (this.renderer.minimap) {
-var minipos = this.renderer.toMinimapCoords(_model_coords),
+	    this.minimap_circle.fillColor = _color;
-	miniradius = this.renderer.minimap.scale * _baseRadius,
+	    var minipos = this.renderer.toMinimapCoords(_model_coords),
-	minisize = new paper.Size([miniradius, miniradius]);
+	    	miniradius = this.renderer.minimap.scale * _baseRadius,
-this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));
+	    	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){
 	        var repr = this.renderer.getRepresentationByModel(edge);
 	    	if(repr != null && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") {
 _editor.node_representation = this;
 _editor.draw();
 }
 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();
 	    this.link_button.show();
 }
 	    });
 }
 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) {
 if (!_newTarget || _newTarget.node_representation !== this) {
 	    if (this.renderer.renkan.options.editor_mode) {
 	        this.edit_button.hide();
 	        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");
+	}
 }
 }
 Rkns.Renderer.Node.prototype.highlight = function() {
 this.circle.fillColor = "#ffff80";
 }
 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;
 }
 }
 Rkns.Renderer.Node.prototype.saveCoords = function() {
 var _coords = this.renderer.toModelCoords(this.paper_coords),
 	    this.remove_button.destroy();
 	    this.link_button.destroy();
 }
 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();
 }
 }
 this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
 this.bundle = this.renderer.addToBundles(this);
 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,
+font: this.renderer.renkan.options.edge_label_font,
-fillColor: 'black'
+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;
 this.arrow_angle = 0;
 if (this.renderer.renkan.options.editor_mode) {
 this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
 this.edit_button.edge_representation = this;
 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() {
 this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
 this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
 _v = _p1a.subtract(_p0a),
 _r = _v.length,
 _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);
 this.line.strokeColor = _color;
 this.line.segments[0].point = _p0a;
 this.line.segments[1].handleIn = _handle.multiply(-1);
 this.line.segments[1].handleOut = _handle;
 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;
 _textdelta = _textdelta.multiply(-1);
 }
 _a += 180;
 _textdelta = _textdelta.multiply(-1);
 }
 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() {
 this.renderer.removeRepresentationsOfType("editor");
 var _editor = this.renderer.addRepresentation("EdgeEditor",null);
 _editor.edge_representation = this;
 _editor.draw();
 }
 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();
 	}
 if (!this.renderer.renkan.options.editor_mode) {
 if (!_newTarget || _newTarget.edge_representation !== this) {
 	if (this.renderer.renkan.options.editor_mode) {
 	        this.edit_button.hide();
 	        this.remove_button.hide();
 }
-this.line.strokeWidth = 2;
+this.line.strokeWidth = this.renderer.renkan.options.edge_stroke_width;
 }
 }
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
 if (!this.renderer.renkan.read_only) {
 Rkns.Renderer.Edge.prototype.destroy = function() {
 this.super("destroy");
 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();
 	}
 var _this = this;
 this.line.strokeColor = _color;
 this.line.add([0,0],[0,0]);
 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;
 }
 Rkns.Renderer.TempEdge.prototype.redraw = function() {
 });
 }
 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();
 }
 Rkns.Renderer.NodeEditor.prototype.destroy = function() {
 }
 }
 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();
 }
 Rkns.Renderer.EdgeEditor.prototype.destroy = function() {
 this.selected_target = null;
 this.edge_layer = new paper.Layer();
 this.node_layer = new paper.Layer();
 this.buttons_layer = new paper.Layer();
-this.minimap = {
+if (_renkan.options.show_minimap) {
-	background_layer: new paper.Layer(),
+	    this.minimap = {
-	node_layer: new paper.Layer(),
+	    	background_layer: new paper.Layer(),
-	node_group: new paper.Group(),
+	    	edge_layer: new paper.Layer(),
-	size: new paper.Size( Rkns.Renderer._MINIMAP_WIDTH, Rkns.Renderer._MINIMAP_HEIGHT )
+	    	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.background_layer.activate();
-this.minimap.rectangle.fillColor = '#ffffff';
+	    this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size);
-this.minimap.rectangle.strokeColor = '#cccccc';
+	    this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4]));
-this.minimap.rectangle.strokeWidth = 4;
+	    this.minimap.rectangle.fillColor = '#ffffff';
-this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
+	    this.minimap.rectangle.strokeColor = '#cccccc';
-this.minimap.scale = .1;
+	    this.minimap.rectangle.strokeWidth = 4;
+	    this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
-this.node_layer.activate();
+	    this.minimap.scale = .1;
-this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
-this.minimap.node_group.addChild(this.minimap.cliprectangle);
+	    this.minimap.node_layer.activate();
-this.minimap.node_group.clipped = true;
+	    this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
-this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
+	    this.minimap.node_group.addChild(this.minimap.cliprectangle);
-this.minimap.node_group.addChild(this.minimap.miniframe);
+	    this.minimap.node_group.clipped = true;
-this.minimap.miniframe.fillColor = '#f0f0ff';
+	    this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
-this.minimap.miniframe.strokeColor = '#8080ff';
+	    this.minimap.node_group.addChild(this.minimap.miniframe);
-this.minimap.miniframe.strokeWidth = 2;
+	    this.minimap.miniframe.fillColor = '#c0c0ff';
-this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null);
+	    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.bundles = [];
 this.click_mode = false;
 var _tool = new paper.Tool(),
 _this = this,
 	var _node = _this.renkan.project.addNode(_data);
 _this.getRepresentationByModel(_node).openEditor();
 	}
 })
 this.editor_$.find(".Rk-ZoomOut").click(function() {
-_this.offset = new paper.Point([
+	var _newScale = _this.scale * Math.SQRT1_2,
-_this.canvas_$.width(),
+		_offset = new paper.Point([
-_this.canvas_$.height()
+	            _this.canvas_$.width(),
-]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
+	            _this.canvas_$.height()
-_this.setScale( _this.scale * Math.SQRT1_2 );
+	        ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
-_this.redraw();
+_this.setScale( _newScale, _offset );
 });
 this.editor_$.find(".Rk-ZoomIn").click(function() {
-_this.offset = new paper.Point([
+	var _newScale = _this.scale * Math.SQRT2,
-_this.canvas_$.width(),
+		_offset = new paper.Point([
-_this.canvas_$.height()
+	            _this.canvas_$.width(),
-]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
+	            _this.canvas_$.height()
-_this.setScale( _this.scale * Math.SQRT2 );
+	        ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
-_this.redraw();
+_this.setScale( _newScale, _offset );
 });
 this.$.find(".Rk-CurrentUser").mouseenter(
 function() { _this.$.find(".Rk-UserList").slideDown() }
 );
 this.$.find(".Rk-Users").mouseleave(
 	}
 });
 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)
+	if (_this.minimap) {
-_this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
+	        _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size)
-_this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _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();
 }
 var _thRedraw = Rkns._.throttle(function() {
 _this.redraw();
 el.text(_title);
 }
 });
 this.redraw();
-window.setInterval(function() {
-	_this.rescaleMinimap()
+if (this.minimap) {
-}, 2000);
+	    window.setInterval(function() {
+	    	_this.rescaleMinimap()
+	    }, 2000);
+}
 }
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
 '<div class="Rk-TopBar"><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
 + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%-translate("Untitled project")%>" /><% } %>'
 			tip.text(this.renkan.translate("Auto-save enabled"));
 		}
 	}
 }
-Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
+Rkns.Renderer.Scene.prototype.setScale = function(_newScale, _offset) {
-this.scale = _newScale;
+	if (_newScale > Rkns.Renderer._MIN_SCALE && _newScale < Rkns.Renderer._MAX_SCALE) {
-this.redraw();
+	    this.scale = _newScale;
+	    if (_offset) {
+	    	this.offset = _offset
+	    }
+	    this.redraw();
+}
 }
 Rkns.Renderer.Scene.prototype.autoScale = function() {
 var nodes = this.renkan.project.get("nodes")
 if (nodes.length > 1) {
 _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 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._AUTOSCALE_MARGIN) / (_maxy - _miny));
+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.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));
+		this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)));
-this.setScale(_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, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])));
-this.setScale(1);
 }
 }
 Rkns.Renderer.Scene.prototype.redrawMiniframe = function() {
 	var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))),
 _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(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;
 }
 if (nodes.length === 1) {
 	this.minimap.scale = .1;
 Rkns.Renderer.Scene.prototype.redraw = function() {
 Rkns._(this.representations).each(function(_representation) {
 	_representation.redraw(true);
 });
-this.redrawMiniframe();
+if (this.minimap) {
+	this.redrawMiniframe();
+}
 paper.view.draw();
 }
 Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) {
 var _tmpEdge = this.addRepresentation("TempEdge",null);
 _delta = new paper.Point([
 _event.pageX - _off.left,
 _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.offset.subtract(_delta) );
-this.setScale( this.scale * Math.SQRT2 );
 } else {
-this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
+	this.setScale( this.scale * Math.SQRT1_2, this.offset.add(_delta.divide(Math.SQRT2)));
-this.setScale( this.scale * Math.SQRT1_2);
 }
 this.totalScroll = 0;
-this.redraw();
 }
 }
 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
 if (!this.isEditable()) {

renkan