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 132	860340d4c645
parent 122	ea11e17e0a35
child 152	5306bf5284c2
child 168	f978d70a9e63

equal deleted inserted replaced

-:ea11e17e0a35
+:860340d4c645
 Rkns.Renderer = {
 _MINIMAP_MARGIN: 20,
 _MIN_DRAG_DISTANCE: 2,
-_NODE_SIZE_BASE: 25,
 _NODE_BUTTON_WIDTH: 40,
 _EDGE_BUTTON_INNER: 2,
 _EDGE_BUTTON_OUTER: 40,
 _CLICKMODE_ADDNODE : 1,
 _CLICKMODE_STARTEDGE : 2,
 _IMAGE_MAX_KB : 500,
 _NODE_SIZE_STEP: Math.LN2/4,
 _MIN_SCALE: 1/20,
 _MAX_SCALE: 20,
 _AUTOSCALE_MARGIN: 50,
-_USER_PLACEHOLDER : {
+_USER_PLACEHOLDER : function(_renkan) {
-color: "#000000",
+	return {
-title: "(unknown user)",
+		color: _renkan.options.default_user_color,
-get: function(attr) {
+	        title: _renkan.translate("(unknown user)"),
-return this[attr] || false;
+	        get: function(attr) {
-}
+	            return this[attr] || false;
+	        }
+	}
 },
 _BOOKMARKLET_CODE: function(_renkan) {
 	return "(function(a,b,c,d,e,f,h,i,j,k,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">"
 	    + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_")
 	    + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();"
 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,
-_kout = _k * _outR,
 _startdx = - Math.sin(_startRads),
 _startdy = Math.cos(_startRads),
 _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,
 _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,
 _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,
 _centerXIn = Math.cos(_centerRads) * _inR,
 _centerXOut = Math.cos(_centerRads) * _outR,
 _centerYIn = Math.sin(_centerRads) * _inR,
 _centerYOut = Math.sin(_centerRads) * _outR,
 _textX = Math.cos(_centerRads) * (_outR + 3),
-_textY = Math.sin(_centerRads) * (_outR + 3),
+_textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2,
 _segments = [];
 	_repr.renderer.buttons_layer.activate();
 var _path = new paper.Path();
 _path.add([_startXIn, _startYIn]);
 _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);
 _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);
 _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: _options.buttons_label_font_size,
 fillColor: _options.buttons_label_color
 };
 }
 Rkns.Renderer._BaseRepresentation = function(_renderer, _model) {
 if (typeof _renderer !== "undefined") {
 this.renderer = _renderer;
+this.renkan = _renderer.renkan;
 this.project = _renderer.renkan.project;
+this.options = _renderer.renkan.options;
 this.model = _model;
 if (this.model) {
 var _this = this;
 this._changeBinding = function() {
 _this.redraw();
 this.model.off("change", this._changeBinding );
 this.model.off("remove", this._removeBinding );
 }
 }
+/* */
+Rkns.Renderer._BaseButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer._BaseButton.prototype.moveTo = function(_pos) {
+this.sector.moveTo(_pos);
+}
+Rkns.Renderer._BaseButton.prototype.show = function() {
+this.sector.show();
+}
+Rkns.Renderer._BaseButton.prototype.hide = function() {
+this.sector.hide();
+}
+Rkns.Renderer._BaseButton.prototype.select = function() {
+this.sector.select();
+}
+Rkns.Renderer._BaseButton.prototype.unselect = function(_newTarget) {
+this.sector.unselect();
+if (!_newTarget || (_newTarget !== this.source_representation && _newTarget.source_representation !== this.source_representation)) {
+this.source_representation.unselect();
+}
+}
+Rkns.Renderer._BaseButton.prototype.destroy = function() {
+this.sector.destroy();
+}
+/* */
 Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 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.fillColor = this.options.node_fill_color;
-if (this.renderer.renkan.options.show_node_circles) {
+if (this.options.show_node_circles) {
-	    this.circle.strokeWidth = this.renderer.renkan.options.node_stroke_width;
+	    this.circle.strokeWidth = this.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 = {
-font: this.renderer.renkan.options.node_label_font,
+font: this.options.node_label_font,
-fontSize: this.renderer.renkan.options.node_label_font_size,
+fontSize: this.options.node_label_font_size,
-fillColor: this.renderer.renkan.options.node_label_color
+fillColor: this.options.node_label_color
 };
-if (this.renderer.renkan.options.editor_mode) {
+if (this.options.editor_mode) {
-this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
+	this.buttons = [
-this.edit_button.node_representation = this;
+		new Rkns.Renderer.NodeEditButton(this.renderer, null),
-this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
+		new Rkns.Renderer.NodeRemoveButton(this.renderer, null),
-this.remove_button.node_representation = this;
+		new Rkns.Renderer.NodeLinkButton(this.renderer, null),
-this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
+		new Rkns.Renderer.NodeEnlargeButton(this.renderer, null),
-this.link_button.node_representation = this;
+		new Rkns.Renderer.NodeShrinkButton(this.renderer, null)
+	];
+	for (var i = 0; i < this.buttons.length; i++) {
+		this.buttons[i].source_representation = this;
+	}
+} else {
+	this.buttons = [];
 }
 this.last_circle_radius = 1;
 this.title.paragraphStyle.justification = 'center';
 if (this.renderer.minimap) {
 }
 }
 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);
+	_baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP);
 if (!this.is_dragging || !this.paper_coords) {
 this.paper_coords = this.renderer.toPaperCoords(_model_coords);
 }
 this.circle_radius = _baseRadius * this.renderer.scale;
 if (this.last_circle_radius !== this.circle_radius) {
-	if (this.renderer.renkan.options.editor_mode) {
+	this.buttons.forEach(function(b) {
-	    	this.edit_button.setSectorSize();
+		b.setSectorSize();
-	    	this.remove_button.setSectorSize();
+	});
-	    	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);
 	    if (this.node_image) {
 this.node_image.position = this.paper_coords;
 }
 }
 this.last_circle_radius = this.circle_radius;
-var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
+var _text = this.model.get("title") || this.renkan.translate("(untitled)");
-this.title.content = Rkns.Renderer.Utils.shortenText(_text, this.renderer.renkan.options.node_label_max_length);
+this.title.content = Rkns.Renderer.Utils.shortenText(_text, this.options.node_label_max_length);
 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
+	this.circle_radius * this.h_ratio + this.options.node_label_font_size + this.options.node_label_distance
 	]);
-var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
 this.circle.strokeColor = _color;
-if (this.renderer.renkan.options.editor_mode) {
+var _pc = this.paper_coords;
-	this.edit_button.moveTo(this.paper_coords);
+	this.buttons.forEach(function(b) {
-	    this.remove_button.moveTo(this.paper_coords);
+		b.moveTo(_pc);
-	    this.link_button.moveTo(this.paper_coords);
+	});
-}
 var _img = this.model.get("image");
 if (_img && _img !== this.img) {
 var _image = new Image(),
 _this = this;
 _image.onload = function() {
 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) {
+if (!_this.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_node_images) {
+if (_this.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 = .99;
 	            /* This is a workaround to allow clipping at group level
 		    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);
 _this.redraw();
+		paper.view.draw();
 }
 _image.src = _img;
 }
 this.img = _img;
 if (this.node_image && !this.img) {
 }
 }
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
-	if (this.renderer.renkan.options.editor_mode) {
+	if (this.options.editor_mode) {
-		if (!this.renderer.renkan.read_only) {
+		if (!this.renkan.read_only) {
 			this.is_dragging = true;
 			this.paper_coords = this.paper_coords.add(_delta);
 	    	this.redraw();
 	}
 	} else {
 }
 Rkns.Renderer.Node.prototype.openEditor = function() {
 this.renderer.removeRepresentationsOfType("editor");
 var _editor = this.renderer.addRepresentation("NodeEditor",null);
-_editor.node_representation = this;
+_editor.source_representation = this;
 _editor.draw();
 }
 Rkns.Renderer.Node.prototype.select = function() {
-this.circle.strokeWidth = this.renderer.renkan.options.selected_node_stroke_width;
+this.circle.strokeWidth = this.options.selected_node_stroke_width;
 if (this.renderer.isEditable()) {
-	    this.edit_button.show();
+	this.buttons.forEach(function(b) {
-	    this.remove_button.show();
+		b.show();
-	    this.link_button.show();
+	});
 }
 var _uri = this.model.get("uri");
 if (_uri) {
 	Rkns.$('.Rk-Bin-Item').each(function() {
 	        var _el = Rkns.$(this);
 	        if (_el.attr("data-uri") == _uri) {
 	            _el.addClass("selected");
 	        }
 	    });
 }
-if (!this.renderer.renkan.options.editor_mode) {
+if (!this.options.editor_mode) {
 this.openEditor();
 }
 if (this.renderer.minimap) {
-	this.minimap_circle.fillColor = "#ff00fc";
+		this.minimap_circle.strokeWidth = this.options.minimap_highlight_weight;
+	this.minimap_circle.strokeColor = this.options.minimap_highlight_color;
 }
 }
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
-if (!_newTarget || _newTarget.node_representation !== this) {
+if (!_newTarget || _newTarget.source_representation !== this) {
-	    if (this.renderer.renkan.options.editor_mode) {
+	this.buttons.forEach(function(b) {
-	        this.edit_button.hide();
+		b.hide();
-	        this.remove_button.hide();
+	});
-	        this.link_button.hide();
+	this.circle.strokeWidth = this.options.node_stroke_width;
-	   	}
-	this.circle.strokeWidth = this.renderer.renkan.options.node_stroke_width;
 Rkns.$('.Rk-Bin-Item').removeClass("selected");
 	if (this.renderer.minimap) {
-		this.minimap_circle.fillColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+		this.minimap_circle.strokeColor = undefined;
 	}
 }
 }
 Rkns.Renderer.Node.prototype.highlight = function() {
-this.circle.fillColor = "#ffff80";
+this.circle.fillColor = this.options.highlighted_node_fill_color;
 if (this.node_image) {
 this.node_image.opacity = .5;
 }
 }
 Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) {
-this.circle.fillColor = "#ffffff";
+this.circle.fillColor = this.options.node_fill_color;
 if (this.node_image) {
 this.node_image.opacity = .99;
 }
 }
 this.is_dragging = false;
 }
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
 this.super("destroy");
-if (this.renderer.renkan.options.editor_mode) {
+	this.buttons.forEach(function(b) {
-	    this.edit_button.destroy();
+		b.destroy();
-	    this.remove_button.destroy();
+	});
-	    this.link_button.destroy();
-}
 this.circle.remove();
 this.title.remove();
 if (this.renderer.minimap) {
 	this.minimap_circle.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 = this.renderer.renkan.options.edge_stroke_width;
+this.line.strokeWidth = this.options.edge_stroke_width;
 this.arrow = new paper.Path();
 this.arrow.add(
 	[ 0, 0 ],
-	[ this.renderer.renkan.options.edge_arrow_length, this.renderer.renkan.options.edge_arrow_width / 2 ],
+	[ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],
-	[ 0, this.renderer.renkan.options.edge_arrow_width ]
+	[ 0, this.options.edge_arrow_width ]
 	);
 this.arrow.__representation = this;
 this.text = new paper.PointText();
 this.text.characterStyle = {
-font: this.renderer.renkan.options.edge_label_font,
+font: this.options.edge_label_font,
-fontSize: this.renderer.renkan.options.edge_label_font_size,
+fontSize: this.options.edge_label_font_size,
-fillColor: this.renderer.renkan.options.edge_label_color
+fillColor: this.options.edge_label_color
 };
 this.text.paragraphStyle.justification = 'center';
 this.text_angle = 0;
 this.arrow_angle = 0;
-if (this.renderer.renkan.options.editor_mode) {
+if (this.options.editor_mode) {
 this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
-this.edit_button.edge_representation = this;
+this.edit_button.source_representation = this;
 this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
-this.remove_button.edge_representation = this;
+this.remove_button.source_representation = this;
 }
 if (this.renderer.minimap) {
 	this.renderer.minimap.edge_layer.activate();
 	    this.minimap_line = new paper.Path();
 _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( this.renderer.renkan.options.edge_gap_in_bundles * _group_pos ),
+_delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
 _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
 _p1b = _p1a.add(_delta), /* to differentiate bundled links */
 _a = _v.angle,
-_textdelta = _ortho.multiply(this.renderer.renkan.options.edge_label_distance),
+_textdelta = _ortho.multiply(this.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");
+_color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
 this.paper_coords = _p0b.add(_p1b).divide(2);
 this.line.strokeColor = _color;
 this.line.segments[0].point = _p0a;
 this.line.segments[1].point = this.paper_coords;
 this.line.segments[1].handleIn = _handle.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, this.renderer.renkan.options.edge_label_max_length);
+this.text.content = Rkns.Renderer.Utils.shortenText(_text, this.options.edge_label_max_length);
 this.text.position = this.paper_coords.add(_textdelta);
 this.text_angle = _a;
-if (this.renderer.renkan.options.editor_mode) {
+if (this.options.editor_mode) {
 	    this.edit_button.moveTo(this.paper_coords);
 	    this.remove_button.moveTo(this.paper_coords);
 }
 if (this.renderer.minimap) {
 }
 Rkns.Renderer.Edge.prototype.openEditor = function() {
 this.renderer.removeRepresentationsOfType("editor");
 var _editor = this.renderer.addRepresentation("EdgeEditor",null);
-_editor.edge_representation = this;
+_editor.source_representation = this;
 _editor.draw();
 }
 Rkns.Renderer.Edge.prototype.select = function() {
-this.line.strokeWidth = this.renderer.renkan.options.selected_edge_stroke_width;
+this.line.strokeWidth = this.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 (!this.options.editor_mode) {
 this.openEditor();
 }
 }
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
-if (!_newTarget || _newTarget.edge_representation !== this) {
+if (!_newTarget || _newTarget.source_representation !== this) {
-	if (this.renderer.renkan.options.editor_mode) {
+	if (this.options.editor_mode) {
 	        this.edit_button.hide();
 	        this.remove_button.hide();
 }
-this.line.strokeWidth = this.renderer.renkan.options.edge_stroke_width;
+this.line.strokeWidth = this.options.edge_stroke_width;
 }
 }
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
-if (!this.renderer.renkan.read_only) {
+if (!this.renkan.read_only) {
 if (this.renderer.is_dragging) {
 this.from_representation.saveCoords();
 this.to_representation.saveCoords();
 } else {
 this.openEditor();
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 }
 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
-	if (this.renderer.renkan.options.editor_mode) {
+	if (this.options.editor_mode) {
-		if (!this.renderer.renkan.options.read_only) {
+		if (!this.options.read_only) {
 		    this.from_representation.paperShift(_delta);
 		    this.to_representation.paperShift(_delta);
 	    }
 	} else {
 		this.renderer.paperShift(_delta);
 this.arrow.remove();
 this.text.remove();
 if (this.renderer.minimap) {
 	    this.minimap_line.remove();
 }
-if (this.renderer.renkan.options.editor_mode) {
+if (this.options.editor_mode) {
 	    this.edit_button.destroy();
 	    this.remove_button.destroy();
 	}
 var _this = this;
 this.bundle.edges = Rkns._(this.bundle.edges).reject(function(_edge) {
 Rkns.Renderer.TempEdge.prototype._init = function() {
 this.renderer.edge_layer.activate();
 this.type = "temp-edge";
-var _color = (this.project.get("users").get(this.renderer.renkan.current_user) || Rkns.Renderer._USER_PLACEHOLDER).get("color");
+var _color = (this.project.get("users").get(this.renkan.current_user) || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
 this.line = new paper.Path();
 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 ],
-	[ this.renderer.renkan.options.edge_arrow_length, this.renderer.renkan.options.edge_arrow_width / 2 ],
+	[ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],
-	[ 0, this.renderer.renkan.options.edge_arrow_width ]
+	[ 0, this.options.edge_arrow_width ]
 	);
 this.arrow.__representation = this;
 this.arrow_angle = 0;
 }
 if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
 var _target = _hitResult.item.__representation;
 if (_target.type === "Node" && _model !== _target.model) {
 var _data = {
 id: Rkns.Utils.getUID('edge'),
-created_by: this.renderer.renkan.current_user,
+created_by: this.renkan.current_user,
 from: _model.get("_id"),
 to: _target.model.get("_id")
 };
 if (this.renderer.isEditable()) {
 	this.project.addEdge(_data);
 }
 }
-if (_model === _target.model || (_target.node_representation && _target.node_representation.model === _model)) {
+if (_model === _target.model || (_target.source_representation && _target.source_representation.model === _model)) {
 _endDrag = false;
 this.renderer.is_dragging = true;
 }
 }
 if (_endDrag) {
 this.renderer.buttons_layer.activate();
 this.type = "editor";
 this.editor_block = new paper.Path();
 var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
 this.editor_block.add.apply(this.editor_block, _pts);
-this.editor_block.strokeWidth = 2;
+this.editor_block.strokeWidth = this.options.tooltip_border_width;
-this.editor_block.strokeColor = "#999999";
+this.editor_block.strokeColor = this.options.tooltip_border_color;
-this.editor_block.fillColor = "#e0e0e0";
 this.editor_block.opacity = .8;
 this.editor_$ = Rkns.$('<div>')
 .appendTo(this.renderer.editor_$)
 .css({
 position: "absolute",
 + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
 + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>'
 + '<img class="Rk-Edit-ImgPreview" src="<%-node.image || node.image_placeholder%>" />'
 + '<p><label><%-translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>'
 + '<p><label><%-translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p>'
-+ '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p>'
++ '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p><% } %>'
 );
 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>'
 + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'
 + '<% if (node.uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>'
 + '<p><%-node.description%></p>'
-+ '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p>'
++ '<% if (node.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p><% } %>'
 );
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
-var _model = this.node_representation.model,
+var _model = this.source_representation.model,
-_created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
+_created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan),
 _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),
-_image_placeholder = this.renderer.renkan.options.static_url + "img/image-placeholder.png",
+_image_placeholder = this.options.static_url + "img/image-placeholder.png",
 _size = (_model.get("size") || 0);
 this.editor_$
 .html(_template({
 node: {
+	has_creator: !!_model.get("created_by"),
 title: _model.get("title"),
 uri: _model.get("uri"),
 short_uri:  Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
 description: _model.get("description"),
 image: _model.get("image") || "",
 color: _model.get("color") || _created_by.get("color"),
 created_by_color: _created_by.get("color"),
 created_by_title: _created_by.get("title"),
 size: (_size > 0 ? "+" : "") + _size
 },
-translate: this.renderer.renkan.translate
+translate: this.renkan.translate
 }));
 this.redraw();
 var _this = this,
 	closeEditor = function() {
 		_this.renderer.removeRepresentation(_this);
 this.editor_$.find(".Rk-Edit-Image-File").bind("change", function() {
 	if (this.files.length) {
 		var f = this.files[0],
 			fr = new FileReader();
 			if (f.type.substr(0,5) !== "image") {
-				alert(_this.renderer.renkan.translate("This file is not an image"));
+				alert(_this.renkan.translate("This file is not an image"));
 				return;
 			}
 			if (f.size > (Rkns.Renderer._IMAGE_MAX_KB * 1024)) {
-				alert(_this.renderer.renkan.translate("Image size must be under ")+Rkns.Renderer._IMAGE_MAX_KB+_this.renderer.renkan.translate("KB"));
+				alert(_this.renkan.translate("Image size must be under ")+Rkns.Renderer._IMAGE_MAX_KB+_this.renkan.translate("KB"));
 				return;
 			}
 		fr.onload = function(e) {
 			_this.editor_$.find(".Rk-Edit-Image").val(e.target.result);
 			onFieldChange();
 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
 );
 this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
-function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
+function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color")) }
 ).click(function() {
 if (_this.renderer.isEditable()) {
 	            _model.set("color", $(this).attr("data-color"));
 				paper.view.draw();
 } else {
 _this.redraw();
 });
 }
 Rkns.Renderer.NodeEditor.prototype.redraw = function() {
-var _coords = this.node_representation.paper_coords;
+var _coords = this.source_representation.paper_coords;
-Rkns.Renderer.Utils.drawEditBox(this.renderer.renkan.options, _coords, this.editor_block, this.node_representation.circle_radius * .75, this.editor_$);
+Rkns.Renderer.Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);
 this.editor_$.show();
 paper.view.draw();
 }
 Rkns.Renderer.NodeEditor.prototype.destroy = function() {
 this.renderer.buttons_layer.activate();
 this.type = "editor";
 this.editor_block = new paper.Path();
 var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
 this.editor_block.add.apply(this.editor_block, _pts);
-this.editor_block.strokeWidth = 2;
+this.editor_block.strokeWidth = this.options.tooltip_border_width;
-this.editor_block.strokeColor = "#999999";
+this.editor_block.strokeColor = this.options.tooltip_border_color;
-this.editor_block.fillColor = "#e0e0e0";
 this.editor_block.opacity = .8;
 this.editor_$ = Rkns.$('<div>')
 .appendTo(this.renderer.editor_$)
 .css({
 position: "absolute",
 + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
 + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>'
 + '<p><span class="Rk-Edit-Direction"><%- translate("Change edge direction") %></span></p>'
 + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>'
 + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>'
-+ '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p>'
++ '<% if (edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p><% } %>'
 );
 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span>'
 + '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>'
 + '<% if (edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>'
 + '<p><%-edge.description%></p>'
 + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>'
 + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>'
-+ '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p>'
++ '<% if (edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p><% } %>'
 );
 Rkns.Renderer.EdgeEditor.prototype.draw = function() {
-var _model = this.edge_representation.model,
+var _model = this.source_representation.model,
 _from_model = _model.get("from"),
 _to_model = _model.get("to"),
-_created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
+_created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan),
 _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);
 this.editor_$
 .html(_template({
 edge: {
+	has_creator: !!_model.get("created_by"),
 title: _model.get("title"),
 uri: _model.get("uri"),
 short_uri:  Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
 description: _model.get("description"),
 color: _model.get("color") || _created_by.get("color"),
 from_title: _from_model.get("title"),
 to_title: _to_model.get("title"),
-from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
+from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color"),
-to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
+to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color"),
 created_by_color: _created_by.get("color"),
 created_by_title: _created_by.get("title")
 },
-translate: this.renderer.renkan.translate,
+translate: this.renkan.translate,
-properties: this.renderer.renkan.options.properties
+properties: this.options.properties
 }));
 this.redraw();
 var _this = this,
 	closeEditor = function() {
 	        _this.renderer.removeRepresentation(_this);
 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
 function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
 );
 this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
 function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
-function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
+function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color")); }
 ).click(function() {
 			if (_this.renderer.isEditable()) {
 	_model.set("color", $(this).attr("data-color"));
 	paper.view.draw();
 } else {
 });
 }
 }
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
-var _coords = this.edge_representation.paper_coords;
+var _coords = this.source_representation.paper_coords;
-Rkns.Renderer.Utils.drawEditBox(this.renderer.renkan.options, _coords, this.editor_block, 5, this.editor_$);
+Rkns.Renderer.Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
 this.editor_$.show();
 paper.view.draw();
 }
 Rkns.Renderer.EdgeEditor.prototype.destroy = function() {
 this.editor_$.detach();
 }
 /* */
-Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer._NodeButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton);
-Rkns.Renderer.NodeEditButton.prototype._init = function() {
+Rkns.Renderer._NodeButton.prototype.setSectorSize = function() {
-this.type = "Node-edit-button";
+	var sectorInner = this.source_representation.circle_radius;
-this.lastSectorInner = 0;
-}
-Rkns.Renderer.NodeEditButton.prototype.setSectorSize = function() {
-	var sectorInner = this.node_representation.circle_radius;
 	if (sectorInner !== this.lastSectorInner) {
 		if (this.sector) {
 			this.sector.destroy();
 		}
-		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 90, 30, 1, this.renderer.renkan.options.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+		this.sector = Rkns.Renderer.Utils.sector(
+			this, 1 + sectorInner,
+			Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner,
+			this.startAngle,
+			this.endAngle,
+			1,
+			this.options.static_url + this.imageFile,
+			this.renkan.translate(this.text)
+		);
 		this.lastSectorInner = sectorInner;
 	}
 }
-Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
+/* */
-this.sector.moveTo(_pos);
-}
+Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
-Rkns.Renderer.NodeEditButton.prototype.show = function() {
+Rkns.Renderer.NodeEditButton.prototype._init = function() {
-this.sector.show();
+this.type = "Node-edit-button";
-}
+this.lastSectorInner = 0;
+this.startAngle = -225;
-Rkns.Renderer.NodeEditButton.prototype.hide = function() {
+this.endAngle = -135;
-this.sector.hide();
+this.imageFile = 'img/edit.png';
-}
+this.text = "Edit";
-Rkns.Renderer.NodeEditButton.prototype.select = function() {
-this.sector.select();
-}
-Rkns.Renderer.NodeEditButton.prototype.unselect = function(_newTarget) {
-this.sector.unselect();
-if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) {
-this.node_representation.unselect();
-}
 }
 Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {
 if (!this.renderer.is_dragging) {
-this.node_representation.openEditor();
+this.source_representation.openEditor();
 }
-}
-Rkns.Renderer.NodeEditButton.prototype.destroy = function() {
-this.sector.destroy();
 }
 /* */
-Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
 this.type = "Node-remove-button";
 this.lastSectorInner = 0;
-}
+this.startAngle = -45;
+this.endAngle = 45;
-Rkns.Renderer.NodeRemoveButton.prototype.setSectorSize = function() {
+this.imageFile = 'img/remove.png';
-	var sectorInner = this.node_representation.circle_radius;
+this.text = "Remove";
-	if (sectorInner !== this.lastSectorInner) {
-		if (this.sector) {
-			this.sector.destroy();
-		}
-		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, - 210, - 90, 1, this.renderer.renkan.options.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
-		this.lastSectorInner = sectorInner;
-	}
-}
-Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
-this.sector.moveTo(_pos);
-}
-Rkns.Renderer.NodeRemoveButton.prototype.show = function() {
-this.sector.show();
-}
-Rkns.Renderer.NodeRemoveButton.prototype.hide = function() {
-this.sector.hide();
-}
-Rkns.Renderer.NodeRemoveButton.prototype.select = function() {
-this.sector.select();
-}
-Rkns.Renderer.NodeRemoveButton.prototype.unselect = function(_newTarget) {
-this.sector.unselect();
-if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) {
-this.node_representation.unselect();
-}
 }
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
 this.renderer.removeRepresentationsOfType("editor");
-if (this.renderer.isEditable() && confirm(this.renderer.renkan.translate('Do you really wish to remove node ') + '"' + this.node_representation.model.get("title") + '"?')) {
+if (this.renderer.isEditable() && confirm(this.renkan.translate('Do you really wish to remove node ') + '"' + this.source_representation.model.get("title") + '"?')) {
-this.project.removeNode(this.node_representation.model);
+this.project.removeNode(this.source_representation.model);
 }
-}
-Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() {
-this.sector.destroy();
 }
 /* */
-Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
 this.type = "Node-link-button";
 this.lastSectorInner = 0;
-}
+this.startAngle = -135;
+this.endAngle = -45;
-Rkns.Renderer.NodeLinkButton.prototype.setSectorSize = function() {
+this.imageFile = 'img/link.png';
-	var sectorInner = this.node_representation.circle_radius;
+this.text = "Link to another node";
-	if (sectorInner !== this.lastSectorInner) {
-		if (this.sector) {
-			this.sector.destroy();
-		}
-		this.sector = Rkns.Renderer.Utils.sector(this, 1 + sectorInner, Rkns.Renderer._NODE_BUTTON_WIDTH + sectorInner, 30, 150, 1, this.renderer.renkan.options.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
-		this.lastSectorInner = sectorInner;
-	}
-}
-Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
-this.sector.moveTo(_pos);
-}
-Rkns.Renderer.NodeLinkButton.prototype.show = function() {
-this.sector.show();
-}
-Rkns.Renderer.NodeLinkButton.prototype.hide = function() {
-this.sector.hide();
-}
-Rkns.Renderer.NodeLinkButton.prototype.select = function() {
-this.sector.select();
-}
-Rkns.Renderer.NodeLinkButton.prototype.unselect = function(_newTarget) {
-this.sector.unselect();
-if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) {
-this.node_representation.unselect();
-}
-}
-Rkns.Renderer.NodeLinkButton.prototype.destroy = function() {
-this.sector.destroy();
 }
 /* */
-Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer.NodeEnlargeButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
+Rkns.Renderer.NodeEnlargeButton.prototype._init = function() {
+this.type = "Node-enlarge-button";
+this.lastSectorInner = 0;
+this.startAngle = 45;
+this.endAngle = 90;
+this.imageFile = 'img/enlarge.png';
+this.text = "Enlarge";
+}
+Rkns.Renderer.NodeEnlargeButton.prototype.mouseup = function() {
+	var _newsize = 1 + (this.source_representation.model.get("size") || 0);
+	this.source_representation.model.set("size", _newsize);
+	this.source_representation.select();
+	this.select();
+	paper.view.draw();
+}
+/* */
+Rkns.Renderer.NodeShrinkButton = Rkns.Utils.inherit(Rkns.Renderer._NodeButton);
+Rkns.Renderer.NodeShrinkButton.prototype._init = function() {
+this.type = "Node-shrink-button";
+this.lastSectorInner = 0;
+this.startAngle = 90;
+this.endAngle = 135;
+this.imageFile = 'img/shrink.png';
+this.text = "Shrink";
+}
+Rkns.Renderer.NodeShrinkButton.prototype.mouseup = function() {
+	var _newsize = -1 + (this.source_representation.model.get("size") || 0);
+	this.source_representation.model.set("size", _newsize);
+	this.source_representation.select();
+	this.select();
+	paper.view.draw();
+}
+/* */
+Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton);
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
 this.type = "Edge-edit-button";
-this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.options.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.options.static_url+'img/edit.png', this.renkan.translate("Edit"));
-}
-Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
-this.sector.moveTo(_pos);
-}
-Rkns.Renderer.EdgeEditButton.prototype.show = function() {
-this.sector.show();
-}
-Rkns.Renderer.EdgeEditButton.prototype.hide = function() {
-this.sector.hide();
-}
-Rkns.Renderer.EdgeEditButton.prototype.select = function() {
-this.sector.select();
-}
-Rkns.Renderer.EdgeEditButton.prototype.unselect = function(_newTarget) {
-this.sector.unselect();
-if (!_newTarget || (_newTarget !== this.edge_representation && _newTarget.edge_representation !== this.edge_representation)) {
-this.edge_representation.unselect();
-}
 }
 Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() {
 if (!this.renderer.is_dragging) {
-this.edge_representation.openEditor();
+this.source_representation.openEditor();
 }
-}
-Rkns.Renderer.EdgeEditButton.prototype.destroy = function() {
-this.sector.destroy();
 }
 /* */
-Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton);
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
 this.type = "Edge-remove-button";
-this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.options.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.options.static_url+'img/remove.png', this.renkan.translate("Remove"));
-}
-Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
-this.sector.moveTo(_pos);
-}
-Rkns.Renderer.EdgeRemoveButton.prototype.show = function() {
-this.sector.show();
-}
-Rkns.Renderer.EdgeRemoveButton.prototype.hide = function() {
-this.sector.hide();
-}
-Rkns.Renderer.EdgeRemoveButton.prototype.select = function() {
-this.sector.select();
-}
-Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function(_newTarget) {
-this.sector.unselect();
-if (!_newTarget || (_newTarget !== this.edge_representation && _newTarget.edge_representation !== this.edge_representation)) {
-this.edge_representation.unselect();
-}
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
 this.renderer.removeRepresentationsOfType("editor");
-if (this.renderer.isEditable() && confirm(this.renderer.renkan.translate('Do you really wish to remove edge ') + '"' + this.edge_representation.model.get("title") + '"?')) {
+if (this.renderer.isEditable() && confirm(this.renkan.translate('Do you really wish to remove edge ') + '"' + this.source_representation.model.get("title") + '"?')) {
-this.project.removeEdge(this.edge_representation.model);
+this.project.removeEdge(this.source_representation.model);
 }
-}
-Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {
-this.sector.destroy();
 }
 /* */
 Rkns.Renderer.MiniFrame = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 	    }
 	    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.fillColor = _renkan.options.minimap_background_color;
-	    this.minimap.rectangle.strokeColor = '#cccccc';
+	    this.minimap.rectangle.strokeColor = _renkan.options.minimap_border_color;
 	    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();
 	    }, 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>'
+'<% if (options.show_top_bar) { %><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")%>" /><% } %>'
 + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Full Screen")%></div></div></div>'
 + '<% if (options.editor_mode) { %>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Node")%></div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"> </div></div></div>'
 + '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
 + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a>'
 + '<div class="Rk-TopBar-Separator"></div></div>'
-+ '<% } %>'
++ '<% } } %>'
-+ '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
++ '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>"><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
 + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>'
-+ '</div>'
++ '</div></div>'
 );
 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) {
 var _bundle = Rkns._(this.bundles).find(function(_bundle) {
 return (
 var _hitResult = paper.project.hitTest(_event.point);
 if (this.isEditable() && _hitResult && typeof _hitResult.item.__representation !== "undefined") {
 this.click_target = _hitResult.item.__representation;
 if (this.click_target.type === "Node-link-button") {
 this.removeRepresentationsOfType("editor");
-this.addTempEdge(this.click_target.node_representation, _event.point);
+this.addTempEdge(this.click_target.source_representation, _event.point);
 }
 } else {
 this.click_target = null;
 if (this.isEditable() && this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
 var _coords = this.toModelCoords(_event.point),

renkan