renkan: comparison client/js/renkan-publish.js

Mercurial Mercurial > renkan / comparison

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

client/js/renkan-publish.js

changeset 37	db991a757015
parent 31	5e37072ec7b7
child 38	092fc99f7558

equal deleted inserted replaced

-:d249d36ecc37
+:db991a757015
 id: this.get("_id"),
 title: this.get("title"),
 uri: this.get("uri"),
 description: this.get("description"),
 position: this.get("position"),
+image: this.get("image"),
 created_by: this.get("created_by").get("_id")
 }
 },
 });
 Rkns.Renderer = {
 _MARGIN_X: 80,
 _MARGIN_Y: 50,
 _MIN_DRAG_DISTANCE: 2,
-_NODE_RADIUS: 15,
+_NODE_RADIUS: 20,
 _NODE_FONT_SIZE: 10,
 _EDGE_FONT_SIZE: 9,
 _NODE_MAX_CHAR: 30,
 _EDGE_MAX_CHAR: 20,
 _ARROW_LENGTH: 16,
 this.paper_coords = this.renderer.toPaperCoords(this.model_coords);
 this.circle.position = this.paper_coords;
 this.title.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._NODE_MAX_CHAR);
 this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
 this.circle.strokeColor = this.model.get("created_by").get("color");
+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(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );
+var _raster = new paper.Raster(_image);
+var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_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 */
+_this.node_image.clipped = true;
+_this.node_image.position = _this.paper_coords;
+_this.node_image.__representation = _this;
+paper.view.draw();
+}
+_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;
+}
+}
 }
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
 this.paper_coords = this.paper_coords.add(_delta);
 this.model_coords = this.renderer.toModelCoords(this.paper_coords);
 Rkns.Renderer.Node.prototype.openTooltip = function() {
 this.renderer.removeRepresentationsOfType("tooltip");
 var _tooltip = this.renderer.addRepresentation("NodeTooltip",null);
 _tooltip.node_representation = this;
-_tooltip.redraw();
+_tooltip.draw();
 }
 Rkns.Renderer.Node.prototype.select = function() {
 this.circle.strokeWidth = 3;
-this.circle.fillColor = "#ffffc0";
+this.circle.fillColor = "#ffff80";
+if (this.node_image) {
+this.node_image.opacity = .5;
+}
 paper.view.draw();
 }
 Rkns.Renderer.Node.prototype.unselect = function() {
 this.circle.strokeWidth = 1;
 this.circle.fillColor = "#ffffff";
+if (this.node_image) {
+this.node_image.opacity = .9;
+}
 paper.view.draw();
 }
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
 }
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
 this.circle.remove();
 this.title.remove();
+if (this.node_image) {
+this.node_image.remove();
+}
 }
 /* */
 Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.Edge.prototype.openTooltip = function() {
 this.renderer.removeRepresentationsOfType("tooltip");
 var _tooltip = this.renderer.addRepresentation("EdgeTooltip",null);
 _tooltip.edge_representation = this;
-_tooltip.redraw();
+_tooltip.draw();
 }
 Rkns.Renderer.Edge.prototype.select = function() {
 this.line.strokeWidth = 3;
 this.openTooltip();
 Rkns.Renderer.NodeTooltip.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%=a%></h2>'
 + '<p><%=description%></p>'
 );
-Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
+Rkns.Renderer.NodeTooltip.prototype.draw = function() {
-var _coords = this.node_representation.paper_coords,
+var _model = this.node_representation.model,
-_model = this.node_representation.model,
 _title = _model.get("title"),
 _uri = _model.get("uri");
 this.tooltip_$
 .html(this.template({
 a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
 description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1&hellip;')
 }))
-.show();
+this.redraw();
-Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$);
 var _this = this;
 this.tooltip_$.find(".Rk-CloseX").click(function() {
 _this.renderer.removeRepresentation(_this);
 paper.view.draw();
 });
-this.tooltip_$.find("input, textarea").bind("keyup change", function() {
+}
-_this.tooltip_$.find(".Rk-Edit-Goto").attr("href",_this.tooltip_$.find(".Rk-Edit-URI").val());
-});
+Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
-paper.view.draw();
+var _coords = this.node_representation.paper_coords;
+Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 10, this.tooltip_$);
+this.tooltip_$.show();
 }
 Rkns.Renderer.NodeTooltip.prototype.destroy = function() {
 this.tooltip_block.remove();
 this.tooltip_$.detach();
 Rkns.Renderer.EdgeTooltip.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%=a%></h2>'
 + '<p><%=description%></p>'
 );
-Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
+Rkns.Renderer.EdgeTooltip.prototype.draw = function() {
-var _coords = this.edge_representation.paper_coords,
+var _model = this.edge_representation.model,
-_model = this.edge_representation.model,
 _title = _model.get("title"),
 _uri = _model.get("uri");
 this.tooltip_$
 .html(this.template({
 a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
 description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1&hellip;')
-}))
+}));
-.show();
+this.redraw();
-Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
 var _this = this;
 this.tooltip_$.find(".Rk-CloseX").click(function() {
 _this.renderer.removeRepresentation(_this);
 paper.view.draw();
 });
+}
+Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
+var _coords = this.edge_representation.paper_coords;
+Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
+this.tooltip_$.show();
 paper.view.draw();
 }
 Rkns.Renderer.EdgeTooltip.prototype.destroy = function() {
 this.tooltip_block.remove();

renkan