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 67	d341117f9370
parent 66	9b459e41e2df
child 68	803dbeb7c919

equal deleted inserted replaced

-:9b459e41e2df
+:d341117f9370
 Rkns.Renderer = {
 _MARGIN_X: 80,
 _MARGIN_Y: 50,
 _MIN_DRAG_DISTANCE: 2,
-_NODE_RADIUS: 25,
+_NODE_SIZE_BASE: 25,
-_NODE_BUTTON_INNER: 26,
+_NODE_BUTTON_WIDTH: 40,
-_NODE_BUTTON_OUTER: 60,
+_EDGE_BUTTON_INNER: 2,
-_EDGE_BUTTON_INNER: 1,
 _EDGE_BUTTON_OUTER: 40,
 _NODE_FONT_SIZE: 10,
 _EDGE_FONT_SIZE: 9,
 _NODE_MAX_CHAR: 50,
 _EDGE_MAX_CHAR: 40,
 _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,
 _USER_PLACEHOLDER : {
 color: "#000000",
 title: "(unknown user)",
 get: function(attr) {
 return this[attr] || false;
 _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,
 _centerR = (_inR + _outR)/2,
 _centerRads = (_startRads + _endRads) / 2,
 _centerX = Math.cos(_centerRads) * _centerR,
 _centerY = Math.sin(_centerRads) * _centerR,
+_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),
 _segments = [];
-_segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]);
-for (var i = 1; i < 4; i++) {
-var _rads = i * _span / 4 + _startRads,
-_dx = - Math.sin(_rads),
-_dy = Math.cos(_rads),
-_x = Math.cos(_rads) * _inR,
-_y = Math.sin(_rads) * _inR;
-_segments.push([[_x, _y], [ - _kin * _dx, - _kin * _dy], [ _kin * _dx, _kin * _dy ]]);
-}
-_segments.push([[_endXIn, _endYIn], [ - _kin * _enddx, - _kin * _enddy ], [0,0]]);
-_segments.push([[_endXOut, _endYOut], [ 0,0 ], [ - _kout * _enddx, - _kout * _enddy ]]);
-for (var i = 3; i > 0; i--) {
-var _rads = i * _span / 4 + _startRads,
-_dx = - Math.sin(_rads),
-_dy = Math.cos(_rads),
-_x = Math.cos(_rads) * _outR,
-_y = Math.sin(_rads) * _outR;
-_segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]);
-}
-_segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]);
 var _path = new paper.Path();
-_path.add.apply(_path, _segments);
+_path.add([_startXIn, _startYIn]);
+_path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);
+_path.lineTo([_endXOut,  _endYOut]);
+_path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);
 _path.fillColor = "#333333";
 _path.opacity = .5;
 _path.closed = true;
 _path.__representation = _repr;
 if (_textX >= -2 && _textX <= 2) {
 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], Rkns.Renderer._NODE_RADIUS);
+this.circle = new paper.Path.Circle([0, 0], 1);
 this.circle.fillColor = '#ffffff';
 this.circle.__representation = this;
 this.circle.strokeWidth = 2;
 this.title = new paper.PointText([0,0]);
 this.title.characterStyle = {
 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);
 this.link_button.node_representation = this;
 }
+this.last_circle_radius = 1;
 this.title.paragraphStyle.justification = 'center';
 }
 Rkns.Renderer.Node.prototype.redraw = function() {
 if (!this.paper_coords) {
 var _model_coords = new paper.Point(this.model.get("position"));
 this.paper_coords = this.renderer.toPaperCoords(_model_coords);
 }
-this.circle.position = this.paper_coords;
+this.circle_radius = Rkns.Renderer._NODE_SIZE_BASE * Math.exp((this.model.get("size") || 0) * Rkns.Renderer._NODE_SIZE_STEP) * this.renderer.scale;
+if (this.last_circle_radius !== this.circle_radius) {
+	if (!this.renderer.renkan.read_only) {
+	    	this.edit_button.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.fitBounds(bounds);
+	    }
+} else {
+	this.circle.position = this.paper_coords;
+	if (this.node_image) {
+this.node_image.position = this.paper_coords;
+}
+}
 this.title.content = this.model.get("title");
-this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
+this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
 this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
 this.edit_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");
 _image.onload = function() {
 if (_this.node_image) {
 _this.node_image.remove();
 }
 _this.renderer.node_layer.activate();
-var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );
+var _ratio = Math.min(1, 2 * _this.circle_radius / _image.width, 2 * _this.circle_radius / _image.height );
 var _raster = new paper.Raster(_image);
-var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
+var _clip = new paper.Path.Circle([0, 0], _this.circle_radius);
 _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
 * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
 paper.view.draw();
 }
 _image.src = _img;
 }
 this.img = _img;
-if (this.node_image) {
+if (this.node_image && !this.img) {
-if (!this.img) {
+this.node_image.remove();
-this.node_image.remove();
+delete this.node_image;
-delete this.node_image;
-} else {
-this.node_image.position = this.paper_coords;
-}
 }
 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") {
 /* */
 Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeEditor.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+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;
 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%-translate("Edit Node")%></span></h2>'
 + '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
 + '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/><a class="Rk-Edit-Goto" href="<%=node.uri%>" target="_blank"></a></p>'
 + '<p><label><%-translate("Description:")%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
++ '<p><span class="Rk-Editor-Label"><%-translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%=node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p>'
 + '<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">'
 + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">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"/></p>'
 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=node.color%>;"></span><%-node.title%></span></h2>'
 + '<p><a href="<%-node.uri%>" target="_blank"><%-node.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><%=node.created_by_title%></p>'
++ '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
 );
 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.renkan.read_only ? this.readOnlyTemplate : this.template),
+_image_placeholder = this.renderer.renkan.static_url + "img/image-placeholder.png",
+_size = (_model.get("size") || 0);
 this.editor_$
 .html(_template({
 node: {
 title: _model.get("title"),
 uri: _model.get("uri"),
 description: _model.get("description"),
 image: _model.get("image") || "",
-image_placeholder: this.renderer.renkan.static_url + "img/image-placeholder.png",
+image_placeholder: _image_placeholder,
 color: _model.get("color") || _created_by.get("color"),
 created_by_color: _created_by.get("color"),
-created_by_title: _created_by.get("title")
+created_by_title: _created_by.get("title"),
+size: (_size > 0 ? "+" : "") + _size
 },
 translate: this.renderer.renkan.translate
 }));
 this.redraw();
 var _this = this;
 	var onFieldChange = Rkns._(function() {
 		Rkns._(function() {
 	            var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
 	                _image = _this.editor_$.find(".Rk-Edit-Image").val();
-	            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
+	            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image || _image_placeholder);
 	            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
 	            var _data = {
 	                title: _this.editor_$.find(".Rk-Edit-Title").val(),
 	                description: _this.editor_$.find(".Rk-Edit-Description").val(),
 	                uri: _uri,
 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"));
-_this.redraw();
+});
+function shiftSize(n) {
+	var _newsize = n+(_model.get("size") || 0);
+	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
+	_model.set("size", _newsize);
+}
+this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
+	shiftSize(-1);
+	return false;
+});
+this.editor_$.find(".Rk-Edit-Size-Up").click(function() {
+	shiftSize(1);
+	return false;
 });
 }
 this.editor_$.find("img").load(function() {
 _this.redraw();
 });
 /* */
 Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeEditor.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+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;
 /* */
 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+this.renderer.buttons_layer.activate();
 this.type = "Node-edit-button";
-this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+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.static_url+'img/edit.png', this.renderer.renkan.translate("Edit"));
+		this.lastSectorInner = sectorInner;
+	}
 }
 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
 this.sector.moveTo(_pos);
 }
 /* */
 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+this.renderer.buttons_layer.activate();
 this.type = "Node-remove-button";
-this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.translate("Remove"));
+this.lastSectorInner = 0;
+}
+Rkns.Renderer.NodeRemoveButton.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, - 210, - 90, 1, this.renderer.renkan.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.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+this.renderer.buttons_layer.activate();
 this.type = "Node-link-button";
-this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.translate("Link to another node"));
+this.lastSectorInner = 0;
+}
+Rkns.Renderer.NodeLinkButton.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, 30, 150, 1, this.renderer.renkan.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.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+this.renderer.buttons_layer.activate();
 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"));
 }
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
 /* */
 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
-this.renderer.overlay_layer.activate();
+this.renderer.buttons_layer.activate();
 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"));
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
 this.sector.moveTo(_pos);
 this.totalScroll = 0;
 this.click_target = null;
 this.selected_target = null;
 this.edge_layer = new paper.Layer();
 this.node_layer = new paper.Layer();
-this.overlay_layer = new paper.Layer();
+this.buttons_layer = new paper.Layer();
 this.bundles = [];
 this.click_mode = false;
 var _tool = new paper.Tool(),
 _this = this;
 _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
 Rkns.Renderer.Scene.prototype.setScale = function(_newScale) {
 this.scale = _newScale;
 this.resetCoords();
 this.redraw();
 }
+/*
 Rkns.Renderer.Scene.prototype.autoScale = function() {
 var nodes = this.renkan.project.get("nodes")
 if (nodes.length > 1) {
 var _xx = nodes.map(function(_node) { return _node.get("position").x }),
 _yy = nodes.map(function(_node) { return _node.get("position").y }),
 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);
 }
 }
+*/
 Rkns.Renderer.Scene.prototype.resetCoords = function(_point) {
 _(this.representations).each(function(r) {
 r.resetCoords();
 });
 }

renkan