diff -r 9b459e41e2df -r d341117f9370 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Tue Feb 26 17:04:24 2013 +0100 +++ b/client/js/paper-renderer.js Tue Feb 26 19:04:37 2013 +0100 @@ -2,10 +2,9 @@ _MARGIN_X: 80, _MARGIN_Y: 50, _MIN_DRAG_DISTANCE: 2, - _NODE_RADIUS: 25, - _NODE_BUTTON_INNER: 26, - _NODE_BUTTON_OUTER: 60, - _EDGE_BUTTON_INNER: 1, + _NODE_SIZE_BASE: 25, + _NODE_BUTTON_WIDTH: 40, + _EDGE_BUTTON_INNER: 2, _EDGE_BUTTON_OUTER: 40, _NODE_FONT_SIZE: 10, _EDGE_FONT_SIZE: 9, @@ -22,6 +21,7 @@ _CLICKMODE_STARTEDGE : 2, _CLICKMODE_ENDEDGE : 3, _IMAGE_MAX_KB : 500, + _NODE_SIZE_STEP: Math.LN2/4, _USER_PLACEHOLDER : { color: "#000000", title: "(unknown user)", @@ -99,31 +99,18 @@ _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; @@ -251,7 +238,7 @@ 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; @@ -272,7 +259,7 @@ 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'; } @@ -281,9 +268,29 @@ 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); @@ -297,9 +304,9 @@ _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; @@ -315,13 +322,9 @@ _image.src = _img; } this.img = _img; - if (this.node_image) { - if (!this.img) { - this.node_image.remove(); - delete this.node_image; - } else { - this.node_image.position = this.paper_coords; - } + if (this.node_image && !this.img) { + this.node_image.remove(); + delete this.node_image; } Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){ @@ -627,7 +630,7 @@ 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]}); @@ -650,6 +653,7 @@ + '

' + '

' + '

' + + '

<%-translate("Size:")%>-<%=node.size%>+

' + '
<%-translate("Node color:")%>
Choose color
' + '' @@ -662,13 +666,15 @@ '

×<%-node.title%>

' + '

<%-node.uri%>

' + '

<%-node.description%>

' - + '

<%-translate("Created by:")%> <%=node.created_by_title%>

' + + '

<%-translate("Created by:")%><%=node.created_by_title%>

' ); 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: { @@ -676,10 +682,11 @@ 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 })); @@ -695,7 +702,7 @@ 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(), @@ -739,7 +746,21 @@ 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() { @@ -764,7 +785,7 @@ 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]}); @@ -876,9 +897,20 @@ 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) { @@ -919,9 +951,20 @@ 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) { @@ -963,9 +1006,20 @@ 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) { @@ -1000,7 +1054,7 @@ 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")); } @@ -1043,7 +1097,7 @@ 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")); } @@ -1099,7 +1153,7 @@ 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(), @@ -1340,7 +1394,7 @@ this.resetCoords(); this.redraw(); } - +/* Rkns.Renderer.Scene.prototype.autoScale = function() { var nodes = this.renkan.project.get("nodes") if (nodes.length > 1) { @@ -1359,7 +1413,7 @@ this.setScale(1); } } - +*/ Rkns.Renderer.Scene.prototype.resetCoords = function(_point) { _(this.representations).each(function(r) { r.resetCoords();