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 37	db991a757015
parent 36	d249d36ecc37
child 38	092fc99f7558

equal deleted inserted replaced

-:d249d36ecc37
+:db991a757015
 Rkns.Renderer = {
 _MARGIN_X: 80,
 _MARGIN_Y: 50,
 _MIN_DRAG_DISTANCE: 2,
-_NODE_RADIUS: 15,
+_NODE_RADIUS: 25,
-_NODE_BUTTON_INNER: 16,
+_NODE_BUTTON_INNER: 26,
-_NODE_BUTTON_OUTER: 50,
+_NODE_BUTTON_OUTER: 60,
 _EDGE_BUTTON_INNER: 1,
 _EDGE_BUTTON_OUTER: 40,
 _NODE_FONT_SIZE: 10,
 _EDGE_FONT_SIZE: 9,
 _NODE_MAX_CHAR: 50,
 this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, {});
 this.remove_button.node_representation = this;
 this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, {});
 this.link_button.node_representation = this;
 this.title.paragraphStyle.justification = 'center';
-this.title.__representation = this;
 }
 Rkns.Renderer.Node.prototype.redraw = function() {
 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.title.content = this.model.get("title");
-this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
+this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
 this.circle.strokeColor = this.model.get("created_by").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");
+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) {
 var _coords = this.renderer.toModelCoords(this.paper_coords.add(_delta)),
 _data = {
 Rkns.Renderer.Node.prototype.openEditor = function() {
 this.renderer.removeRepresentationsOfType("editor");
 var _editor = this.renderer.addRepresentation("NodeEditor",null);
 _editor.node_representation = this;
-_editor.redraw();
+_editor.draw();
 }
 Rkns.Renderer.Node.prototype.select = function() {
 this.circle.strokeWidth = 3;
 this.edit_button.show();
 Rkns.$('.Rk-Bin-Item').removeClass("selected");
 }
 }
 Rkns.Renderer.Node.prototype.highlight = function() {
-this.circle.fillColor = "#ffffc0";
+this.circle.fillColor = "#ffff80";
+if (this.node_image) {
+this.node_image.opacity = .5;
+}
 }
 Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) {
 this.circle.fillColor = "#ffffff";
+if (this.node_image) {
+this.node_image.opacity = .9;
+}
 }
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
 if (!this.renderer.is_dragging) {
 this.openEditor();
 this.edit_button.destroy();
 this.remove_button.destroy();
 this.link_button.destroy();
 this.circle.remove();
 this.title.remove();
+if (this.node_image) {
+this.node_image.remove();
+}
 }
 /* */
 Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 this.text.characterStyle = {
 fontSize: Rkns.Renderer._EDGE_FONT_SIZE,
 fillColor: 'black'
 };
 this.text.paragraphStyle.justification = 'center';
-this.text.__representation = this;
 this.text_angle = 0;
 this.arrow_angle = 0;
 this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, {});
 this.edit_button.edge_representation = this;
 this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, {});
 Rkns.Renderer.Edge.prototype.openEditor = function() {
 this.renderer.removeRepresentationsOfType("editor");
 var _editor = this.renderer.addRepresentation("EdgeEditor",null);
 _editor.edge_representation = this;
-_editor.redraw();
+_editor.draw();
 }
 Rkns.Renderer.Edge.prototype.select = function() {
 this.line.strokeWidth = 3;
 this.edit_button.show();
 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
 '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
 + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
 + '<p><label><%=l10n.edit_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><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
++ '<p><label><%=l10n.edit_image%></label><input class="Rk-Edit-Image" type="text" value="<%=node.image%>"/><img class="Rk-Edit-ImgPreview" src="<%=node.image%>" /></p>'
 + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
 );
-Rkns.Renderer.NodeEditor.prototype.redraw = function() {
+Rkns.Renderer.NodeEditor.prototype.draw = function() {
-var _coords = this.node_representation.paper_coords,
+var _model = this.node_representation.model;
-_model = this.node_representation.model;
 this.editor_$
 .html(this.template({
 node: {
 title: _model.get("title"),
 uri: _model.get("uri"),
 description: _model.get("description"),
+image: _model.get("image") || "",
 created_by_color: _model.get("created_by").get("color"),
 created_by_title: _model.get("created_by").get("title")
 },
 l10n: this.renderer.renkan.l10n
-}))
+}));
-.show();
+this.redraw();
-Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
 var _this = this;
 this.editor_$.find(".Rk-CloseX").click(function() {
 _this.renderer.removeRepresentation(_this);
 paper.view.draw();
 });
 this.editor_$.find("input, textarea").bind("keyup change", function() {
-_this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+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-Goto").attr("href",_uri);
 var _data = {
 title: _this.editor_$.find(".Rk-Edit-Title").val(),
 description: _this.editor_$.find(".Rk-Edit-Description").val(),
-uri: _this.editor_$.find(".Rk-Edit-URI").val()
+uri: _uri,
+image: _image
 }
 _model.set(_data);
-paper.view.draw();
+_this.redraw();
 });
 this.editor_$.find(".Rk-Edit-Title")[0].focus();
+}
+Rkns.Renderer.NodeEditor.prototype.redraw = function() {
+var _coords = this.node_representation.paper_coords;
+Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+this.editor_$.show();
 paper.view.draw();
 }
 Rkns.Renderer.NodeEditor.prototype.destroy = function() {
 this.editor_block.remove();
 + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_created_by_color%>;"></span><%=edge.from_title%></p>'
 + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_created_by_color%>;"></span><%=edge.to_title%></p>'
 + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
 );
-Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
+Rkns.Renderer.EdgeEditor.prototype.draw = function() {
-var _coords = this.edge_representation.paper_coords,
+var _model = this.edge_representation.model;
-_model = this.edge_representation.model;
 this.editor_$
 .html(this.template({
 edge: {
 title: _model.get("title"),
 uri: _model.get("uri"),
 to_created_by_color: _model.get("to").get("created_by").get("color"),
 created_by_color: _model.get("created_by").get("color"),
 created_by_title: _model.get("created_by").get("title")
 },
 l10n: this.renderer.renkan.l10n
-}))
+}));
-.show();
+this.redraw();
-Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
 var _this = this;
 this.editor_$.find(".Rk-CloseX").click(function() {
 _this.renderer.removeRepresentation(_this);
 paper.view.draw();
 });
 var _data = {
 title: _this.editor_$.find(".Rk-Edit-Title").val(),
 uri: _this.editor_$.find(".Rk-Edit-URI").val()
 }
 _model.set(_data);
-paper.view.draw();
+_this.redraw();
 });
+}
+Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
+var _coords = this.edge_representation.paper_coords;
+Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
+this.editor_$.show();
 paper.view.draw();
 }
 Rkns.Renderer.EdgeEditor.prototype.destroy = function() {
 this.editor_block.remove();
 id: Rkns.Utils.getUID('node'),
 created_by: this.renkan.current_user,
 uri: _newEl.uri,
 title: _newEl.title,
 description: _newEl.description,
+image: _newEl.image,
 position: {
 x: _coords.x,
 y: _coords.y
 }
 };

renkan