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 114	110f99eb417e
parent 113	fac7354c55d2
child 116	07f9fc847d5d

equal deleted inserted replaced

-:fac7354c55d2
+:110f99eb417e
 this._changeBinding = function() {
 _this.redraw();
 }
 this._removeBinding = function() {
 _renderer.removeRepresentation(_this);
-_renderer.redraw();
+_(function() {
+	_renderer.redraw()
+	}).defer();
 }
 this.model.on("change", this._changeBinding );
 this.model.on("remove", this._removeBinding );
 }
 }
 this.title = new paper.PointText([0,0]);
 this.title.characterStyle = {
 fontSize: Rkns.Renderer._NODE_FONT_SIZE,
 fillColor: 'black'
 };
-if (this.renderer.renkan.read_only) {
+if (this.renderer.renkan.options.editor_mode) {
-this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-this.link_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-} else {
 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.remove_button.node_representation = this;
 this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
 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.read_only) {
+	if (this.renderer.renkan.options.editor_mode) {
 	    	this.edit_button.setSectorSize();
 	    	this.remove_button.setSectorSize();
 	    	this.link_button.setSectorSize();
 	    }
 	    var square = new paper.Size(this.circle_radius, this.circle_radius),
 this.title.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._NODE_MAX_CHAR);
 this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
 var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
 this.circle.strokeColor = _color;
-this.edit_button.moveTo(this.paper_coords);
+if (this.renderer.renkan.options.editor_mode) {
-this.remove_button.moveTo(this.paper_coords);
+	this.edit_button.moveTo(this.paper_coords);
-this.link_button.moveTo(this.paper_coords);
+	    this.remove_button.moveTo(this.paper_coords);
+	    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() {
 _this.node_image.remove();
 }
 _this.renderer.node_layer.activate();
 var _ratio = Math.min(2 / _image.width, 2 / _image.height );
 var _raster = new paper.Raster(_image);
-if (_this.renderer.renkan.clip_images) {
+if (_this.renderer.renkan.options.clip_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 is a workaround to allow clipping at group level
 	}
 }, this);
 }
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
-	if (!this.renderer.renkan.read_only) {
+	if (this.renderer.renkan.options.editor_mode) {
-		this.is_dragging = true;
+		if (!this.renderer.renkan.read_only) {
-		this.paper_coords = this.paper_coords.add(_delta);
+			this.is_dragging = true;
-	this.redraw();
+			this.paper_coords = this.paper_coords.add(_delta);
+	    	this.redraw();
+	}
 	} else {
 		this.renderer.paperShift(_delta);
 	}
 }
 _editor.draw();
 }
 Rkns.Renderer.Node.prototype.select = function() {
 this.circle.strokeWidth = 4;
-this.edit_button.show();
+if (this.renderer.isEditable()) {
-this.remove_button.show();
+	    this.edit_button.show();
-this.link_button.show();
+	    this.remove_button.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.read_only) {
+if (!this.renderer.renkan.options.editor_mode) {
 this.openEditor();
 }
 this.minimap_circle.fillColor = "#ff00fc";
 }
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.node_representation !== this) {
-this.edit_button.hide();
+	    if (this.renderer.renkan.options.editor_mode) {
-this.remove_button.hide();
+	        this.edit_button.hide();
-this.link_button.hide();
+	        this.remove_button.hide();
+	        this.link_button.hide();
+	   	}
 this.circle.strokeWidth = 2;
 Rkns.$('.Rk-Bin-Item').removeClass("selected");
 	this.minimap_circle.fillColor = this.circle.strokeColor;
 }
 }
 position: {
 x: _coords.x,
 y: _coords.y
 }
 };
-this.model.set(_data);
+if (this.renderer.isEditable()) {
+	this.model.set(_data);
+}
 }
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
-if (!this.renderer.renkan.read_only) {
+if (this.renderer.isEditable() && this.renderer.is_dragging) {
-if (this.renderer.is_dragging) {
+this.saveCoords();
-this.saveCoords();
+}
-}
+else {
-else {
+this.openEditor();
-this.openEditor();
-}
 }
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 this.is_dragging = false;
 }
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
 this.super("destroy");
-this.edit_button.destroy();
+if (this.renderer.renkan.options.editor_mode) {
-this.remove_button.destroy();
+	    this.edit_button.destroy();
-this.link_button.destroy();
+	    this.remove_button.destroy();
+	    this.link_button.destroy();
+}
 this.circle.remove();
 this.title.remove();
 this.minimap_circle.remove();
 if (this.node_image) {
 this.node_image.remove();
 fillColor: 'black'
 };
 this.text.paragraphStyle.justification = 'center';
 this.text_angle = 0;
 this.arrow_angle = 0;
-if (this.renderer.renkan.read_only) {
+if (this.renderer.renkan.options.editor_mode) {
-this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
-} else {
 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;
 }
 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.position = this.paper_coords.add(_textdelta);
 this.text_angle = _a;
-this.edit_button.moveTo(this.paper_coords);
+if (this.renderer.renkan.options.editor_mode) {
-this.remove_button.moveTo(this.paper_coords);
+	    this.edit_button.moveTo(this.paper_coords);
+	    this.remove_button.moveTo(this.paper_coords);
+}
 }
 Rkns.Renderer.Edge.prototype.openEditor = function() {
 this.renderer.removeRepresentationsOfType("editor");
 var _editor = this.renderer.addRepresentation("EdgeEditor",null);
 _editor.draw();
 }
 Rkns.Renderer.Edge.prototype.select = function() {
 this.line.strokeWidth = 4;
-this.edit_button.show();
+if (this.renderer.isEditable()) {
-this.remove_button.show();
+	    this.edit_button.show();
-if (this.renderer.renkan.read_only) {
+	    this.remove_button.show();
+	}
+if (!this.renderer.renkan.options.editor_mode) {
 this.openEditor();
 }
 }
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
 if (!_newTarget || _newTarget.edge_representation !== this) {
-this.edit_button.hide();
+	if (this.renderer.renkan.options.editor_mode) {
-this.remove_button.hide();
+	        this.edit_button.hide();
+	        this.remove_button.hide();
+}
 this.line.strokeWidth = 2;
 }
 }
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 }
 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
-	if (!this.renderer.renkan.read_only) {
+	if (this.renderer.renkan.options.editor_mode) {
-	    this.from_representation.paperShift(_delta);
+		if (!this.renderer.renkan.options.read_only) {
-	    this.to_representation.paperShift(_delta);
+		    this.from_representation.paperShift(_delta);
+		    this.to_representation.paperShift(_delta);
+	    }
 	} else {
 		this.renderer.paperShift(_delta);
 	}
 }
 Rkns.Renderer.Edge.prototype.destroy = function() {
 this.super("destroy");
 this.line.remove();
 this.arrow.remove();
 this.text.remove();
-this.edit_button.destroy();
+if (this.renderer.renkan.options.editor_mode) {
-this.remove_button.destroy();
+	    this.edit_button.destroy();
+	    this.remove_button.destroy();
+	}
 var _this = this;
 this.bundle.edges = Rkns._(this.bundle.edges).reject(function(_edge) {
 return _edge === _this;
 });
 }
 this.arrow.position = _c;
 this.arrow_angle = _a;
 }
 Rkns.Renderer.TempEdge.prototype.paperShift = function(_delta) {
+	if (!this.renderer.isEditable()) {
+		this.renderer.removeRepresentation(_this);
+	paper.view.draw();
+	return;
+	}
 this.end_pos = this.end_pos.add(_delta);
 var _hitResult = paper.project.hitTest(this.end_pos);
 this.renderer.findTarget(_hitResult);
 this.redraw();
 }
 id: Rkns.Utils.getUID('edge'),
 created_by: this.renderer.renkan.current_user,
 from: _model.get("_id"),
 to: _target.model.get("_id")
 };
-this.project.addEdge(_data);
+if (this.renderer.isEditable()) {
+	this.project.addEdge(_data);
+}
 }
 if (_model === _target.model || (_target.node_representation && _target.node_representation.model === _model)) {
 _endDrag = false;
 this.renderer.is_dragging = true;
 }
 );
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
 var _model = this.node_representation.model,
 _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
-_template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template),
+_template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),
-_image_placeholder = this.renderer.renkan.static_url + "img/image-placeholder.png",
+_image_placeholder = this.renderer.renkan.options.static_url + "img/image-placeholder.png",
 _size = (_model.get("size") || 0);
 this.editor_$
 .html(_template({
 node: {
 title: _model.get("title"),
 size: (_size > 0 ? "+" : "") + _size
 },
 translate: this.renderer.renkan.translate
 }));
 this.redraw();
-var _this = this;
+var _this = this,
-this.editor_$.find(".Rk-CloseX").click(function() {
+	closeEditor = function() {
-_this.renderer.removeRepresentation(_this);
+		_this.renderer.removeRepresentation(_this);
-paper.view.draw();
+	paper.view.draw();
-});
+	}
-if (!this.renderer.renkan.read_only) {
+this.editor_$.find(".Rk-CloseX").click(closeEditor);
+if (this.renderer.isEditable()) {
 	var onFieldChange = Rkns._(function() {
 		Rkns._(function() {
-	            var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
+	            if (_this.renderer.isEditable()) {
-	                _image = _this.editor_$.find(".Rk-Edit-Image").val();
+		            var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
-	            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image || _image_placeholder);
+		                _image = _this.editor_$.find(".Rk-Edit-Image").val();
-	            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
+		            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image || _image_placeholder);
-	            var _data = {
+		            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
-	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
+		            var _data = {
-	                description: _this.editor_$.find(".Rk-Edit-Description").val(),
+		                title: _this.editor_$.find(".Rk-Edit-Title").val(),
-	                uri: _uri,
+		                description: _this.editor_$.find(".Rk-Edit-Description").val(),
-	                image: _image
+		                uri: _uri,
+		                image: _image
+		            }
+	            	_model.set(_data);
+	            	_this.redraw();
+	            } else {
+	            	closeEditor();
 	            }
-	            _model.set(_data);
-	            _this.redraw();
 		}).defer();
 	}).throttle(500);
 	this.editor_$.find("input, textarea").bind("change keyup paste", onFieldChange);
 );
 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")) }
 ).click(function() {
-_model.set("color", $(this).attr("data-color"));
+if (_this.renderer.isEditable()) {
-paper.view.draw();
+	            _model.set("color", $(this).attr("data-color"));
+				paper.view.draw();
+} else {
+	closeEditor();
+}
 });
 function shiftSize(n) {
-	var _newsize = n+(_model.get("size") || 0);
+	if (_this.renderer.isEditable()) {
-	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
+	        	var _newsize = n+(_model.get("size") || 0);
-	_model.set("size", _newsize);
+	        	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
-			paper.view.draw();
+	        	_model.set("size", _newsize);
+				paper.view.draw();
+			} else {
+				closeEditor();
+			}
 }
 this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
 	shiftSize(-1);
 	return false;
 Rkns.Renderer.EdgeEditor.prototype.draw = function() {
 var _model = this.edge_representation.model,
 _from_model = _model.get("from"),
 _to_model = _model.get("to"),
 _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
-_template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
+_template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);
 this.editor_$
 .html(_template({
 edge: {
 title: _model.get("title"),
 uri: _model.get("uri"),
 to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
 created_by_color: _created_by.get("color"),
 created_by_title: _created_by.get("title")
 },
 translate: this.renderer.renkan.translate,
-properties: this.renderer.renkan.properties
+properties: this.renderer.renkan.options.properties
 }));
 this.redraw();
-var _this = this;
+var _this = this,
-this.editor_$.find(".Rk-CloseX").click(function() {
+	closeEditor = function() {
-_this.renderer.removeRepresentation(_this);
+	        _this.renderer.removeRepresentation(_this);
-paper.view.draw();
+	        paper.view.draw();
-});
+	}
-if (!this.renderer.renkan.read_only) {
+this.editor_$.find(".Rk-CloseX").click(closeEditor);
+if (this.renderer.isEditable()) {
 	var onFieldChange = Rkns._(function() {
 		Rkns._(function() {
-			_this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+			if (_this.renderer.isEditable()) {
-	            var _data = {
+	    			_this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
-	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
+		            var _data = {
-	                uri: _this.editor_$.find(".Rk-Edit-URI").val()
+		                title: _this.editor_$.find(".Rk-Edit-Title").val(),
-	            }
+		                uri: _this.editor_$.find(".Rk-Edit-URI").val()
-	            _model.set(_data);
+		            }
-	            paper.view.draw();
+		            _model.set(_data);
+		            paper.view.draw();
+	           	} else {
+	           		closeEditor();
+	           	}
 		}).defer();
 	}).throttle(500);
 this.editor_$.find("input").bind("keyup change paste", onFieldChange);
 this.editor_$.find(".Rk-Edit-Vocabulary").change(function() {
 		_this.editor_$.find(".Rk-Edit-URI").val(v);
 		onFieldChange();
 	}
 });
 this.editor_$.find(".Rk-Edit-Direction").click(function() {
-	_model.set({
+			if (_this.renderer.isEditable()) {
-		from: _model.get("to"),
+	        	_model.set({
-		to: _model.get("from")
+	        		from: _model.get("to"),
-	});
+	        		to: _model.get("from")
-	_this.draw();
+	        	});
+	        	_this.draw();
+	       	} else {
+	       		closeEditor();
+	       	}
 });
 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
 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")); }
 ).click(function() {
-_model.set("color", $(this).attr("data-color"));
+			if (_this.renderer.isEditable()) {
-paper.view.draw();
+	_model.set("color", $(this).attr("data-color"));
+	paper.view.draw();
+} else {
+	       		closeEditor();
+	       	}
 });
 }
 }
 Rkns.Renderer.EdgeEditor.prototype.redraw = 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.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, - 90, 30, 1, this.renderer.renkan.options.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
 		this.lastSectorInner = sectorInner;
 	}
 }
 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
 	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, - 210, - 90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+		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) {
 }
 }
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
 this.renderer.removeRepresentationsOfType("editor");
-if (confirm(this.renderer.renkan.translate('Do you really wish to remove node ') + '"' + this.node_representation.model.get("title") + '"?')) {
+if (this.renderer.isEditable() && confirm(this.renderer.renkan.translate('Do you really wish to remove node ') + '"' + this.node_representation.model.get("title") + '"?')) {
 this.project.removeNode(this.node_representation.model);
 }
 }
 Rkns.Renderer.NodeRemoveButton.prototype.destroy = 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, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
+		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) {
 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 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.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.renderer.renkan.options.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
 }
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
 this.sector.moveTo(_pos);
 }
 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 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.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.renderer.renkan.options.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
 this.sector.moveTo(_pos);
 }
 }
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
 this.renderer.removeRepresentationsOfType("editor");
-if (confirm(this.renderer.renkan.translate('Do you really wish to remove edge ') + '"' + this.edge_representation.model.get("title") + '"?')) {
+if (this.renderer.isEditable() && confirm(this.renderer.renkan.translate('Do you really wish to remove edge ') + '"' + this.edge_representation.model.get("title") + '"?')) {
 this.project.removeEdge(this.edge_representation.model);
 }
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {
 });
 this.canvas_$.on("drop", function(_event) {
 	_event.stopPropagation();
 	_event.preventDefault();
 	_allowScroll = true;
-	if (_this.renkan.read_only) {
+	if (!_this.isEditable()) {
 		return;
 	}
 	var res = {}
 	if (_event.originalEvent.dataTransfer.types) {
 		Rkns._(_event.originalEvent.dataTransfer.types).each(function(t) {
 		    		newNode.uri = snippet.find("[data-uri]").attr("data-uri") || newNode.uri;
 		    		newNode.title = snippet.find("[data-title]").attr("data-title") || newNode.title;
 		    		newNode.description = snippet.find("[data-description]").attr("data-description") || newNode.description;
 		    	}
 	}
-/*
-	var fields = ["title", "description", "uri", "image"];
-	for (var i = 0; i < fields.length; i++) {
-		var f = fields[i];
-		if (res["text/x-iri-" + f]) {
-			newNode[f] = res["text/x-iri-" + f];
-		}
-	}
-*/
 	if (newNode.title || newNode.description || newNode.uri) {
 		var _off = _this.canvas_$.offset(),
 _point = new paper.Point([
 _event.originalEvent.pageX - _off.left,
 _event.originalEvent.pageY - _off.top
 	_this.rescaleMinimap()
 }, 2000);
 }
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-'<div class="Rk-TopBar"><% if (read_only) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
+'<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 (!read_only) { %>'
++ '<% 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>'
-+ '<% if (show_bins) { %><div class="Rk-Fold-Bins">&laquo;</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>'
 );
 Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) {
 this.bundles.push(_bundle);
 }
 return _bundle;
 }
+Rkns.Renderer.Scene.prototype.isEditable = function() {
+	return (this.renkan.options.editor_mode && !this.renkan.read_only)
+}
 Rkns.Renderer.Scene.prototype.onStatusChange = function() {
 	var savebtn = this.$.find(".Rk-Save-Button"),
 		tip = savebtn.find(".Rk-TopBar-Tooltip-Contents");
 	if (this.renkan.read_only) {
 		savebtn.removeClass("disabled Rk-Save-Online").addClass("Rk-Save-ReadOnly");
 		tip.text(this.renkan.translate("Connection lost"));
 	} else {
-		if (this.renkan.snapshot_mode) {
+		if (this.renkan.options.snapshot_mode) {
 			savebtn.removeClass("Rk-Save-ReadOnly Rk-Save-Online");
 			tip.text(this.renkan.translate("Archive Project"));
 		} else {
 			savebtn.removeClass("disabled Rk-Save-ReadOnly").addClass("Rk-Save-Online");
 			tip.text(this.renkan.translate("Auto-save enabled"));
 Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
 if (!this.click_target || this.click_target.type !== "temp-edge") {
 this.removeRepresentationsOfType("editor");
 this.is_dragging = false;
 var _hitResult = paper.project.hitTest(_event.point);
-if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
+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);
 }
 } else {
 this.click_target = null;
-if (this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
+if (this.isEditable() && this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) {
 var _coords = this.toModelCoords(_event.point),
 _data = {
 id: Rkns.Utils.getUID('node'),
 created_by: this.renkan.current_user,
 position: {
 this.getRepresentationByModel(_node).openEditor();
 }
 }
 }
 if (this.click_mode) {
-if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
+if (this.isEditable() && this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
 this.removeRepresentationsOfType("editor");
 this.addTempEdge(this.click_target, _event.point);
 this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE;
 this.notif_$.fadeOut(function() {
 Rkns.$(this).html(_renkan.translate("Click on a second node to complete the edge")).fadeIn();
 this.redraw();
 }
 }
 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
-if (this.renkan.read_only) {
+if (!this.isEditable()) {
 return;
 }
 var _off = this.canvas_$.offset(),
 _point = new paper.Point([
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ]);
 var _hitResult = paper.project.hitTest(_point);
-if (!_hitResult || typeof _hitResult.item.__representation === "undefined") {
+if (this.isEditable() && (!_hitResult || typeof _hitResult.item.__representation === "undefined")) {
 var _coords = this.toModelCoords(_point),
 _data = {
 id: Rkns.Utils.getUID('node'),
 created_by: this.renkan.current_user,
 position: {

renkan