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 199	aff7eb118f7d
parent 198	d3737b90a66b
child 207	583dc519c5fa

equal deleted inserted replaced

-:d3737b90a66b
+:aff7eb118f7d
 var Rkns = root.Rkns,
 _ = Rkns._,
 $ = Rkns.$;
+/* Rkns.Renderer Object */
+/* This object contains constants, utility functions and classes for Renkan's Graph Manipulation GUI */
 var Renderer = Rkns.Renderer = {},
+/* The minimum distance (in pixels) the mouse has to move to consider an element was dragged */
 _MIN_DRAG_DISTANCE = 2,
+/* Distance between the inner and outer radius of buttons that appear when hovering on a node */
 _NODE_BUTTON_WIDTH = 40,
 _EDGE_BUTTON_INNER = 2,
 _EDGE_BUTTON_OUTER = 40,
+/* Constants used to know if a specific action is to be performed when clicking on the canvas */
 _CLICKMODE_ADDNODE = 1,
 _CLICKMODE_STARTEDGE = 2,
 _CLICKMODE_ENDEDGE = 3,
+/* Node size step: Used to calculate the size change when clicking the +/- buttons */
 _NODE_SIZE_STEP = Math.LN2/4,
 _MIN_SCALE = 1/20,
 _MAX_SCALE = 20,
 _MOUSEMOVE_RATE = 80,
 _DOUBLETAP_DELAY = 800,
+/* Maximum distance in pixels (squared, to reduce calculations)
+* between two taps when double-tapping on a touch terminal */
 _DOUBLETAP_DISTANCE = 20*20,
+/* A placeholder so a default colour is displayed when a node has a null value for its user property */
 _USER_PLACEHOLDER = function(_renkan) {
 return {
 color: _renkan.options.default_user_color,
 title: _renkan.translate("(unknown user)"),
 get: function(attr) {
 return this[attr] || false;
 }
 };
 },
+/* The code for the "Drag and Add Bookmarklet", slightly minified and with whitespaces removed, though
+* it doesn't seem that it's still a requirement in newer browsers (i.e. the ones compatibles with canvas drawing)
+*/
 _BOOKMARKLET_CODE = function(_renkan) {
 return "(function(a,b,c,d,e,f,h,i,j,k,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">"
 + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_")
 + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();";
 },
+/* Shortens text to the required length then adds ellipsis */
 shortenText = function(_text, _maxlength) {
 return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);
 },
+/* Drawing an edit box with an arrow and positioning the edit box according to the position of the node/edge being edited
+* Called by Rkns.Renderer.NodeEditor and Rkns.Renderer.EdgeEditor */
 drawEditBox = function(_options, _coords, _path, _xmargin, _selector) {
 _selector.css({
 width: ( _options.tooltip_width - 2* _options.tooltip_padding ),
 });
 var _height = _selector.outerHeight() + 2* _options.tooltip_padding,
 top: (_options.tooltip_padding + _top)
 });
 return _path;
 };
+/* Rkns.Renderer._BaseRepresentation Class */
+/* In Renkan, a "Representation" is a sort of ViewModel (in the MVVM paradigm) and bridges the gap between
+* models (written with Backbone.js) and the view (written with Paper.js)
+* Renkan's representations all inherit from Rkns.Renderer._BaseRepresentation '*/
 var _BaseRepresentation = Renderer._BaseRepresentation = function(_renderer, _model) {
 if (typeof _renderer !== "undefined") {
 this.renderer = _renderer;
 this.renkan = _renderer.renkan;
 this.project = _renderer.renkan.project;
 this.model.on("unselect", this._unselectBinding );
 }
 }
 };
+/* Rkns.Renderer._BaseRepresentation Methods */
 _(_BaseRepresentation.prototype).extend({
 _super: function(_func) {
 return _BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));
 },
 redraw: function() {},
 this.model.off("unselect", this._unselectBinding );
 }
 }
 });
-/* */
+/* End of Rkns.Renderer._BaseRepresentation Class */
+/* Rkns.Renderer._BaseButton Class */
+/* BaseButton is extended by contextual buttons that appear when hovering on nodes and edges */
 var _BaseButton = Renderer._BaseButton = Rkns.Utils.inherit(_BaseRepresentation);
 _(_BaseButton.prototype).extend({
 moveTo: function(_pos) {
 destroy: function() {
 this.sector.destroy();
 }
 });
-/* */
+/* End of Rkns.Renderer._BaseButton Class */
+/* Rkns.Renderer.Node Class */
+/* The representation for the node : A circle, with an image inside and a text label underneath.
+* The circle and the image are drawn on canvas and managed by Paper.js.
+* The text label is an HTML node, managed by jQuery. */
 var NodeRepr = Renderer.Node = Rkns.Utils.inherit(_BaseRepresentation);
 _(NodeRepr.prototype).extend({
 _init: function() {
 }
 return res;
 });
 lastCoords = newCoords.slice(-2);
 return newCoords;
-}
+};
 instructions.forEach(function(instr) {
 var coords = instr.match(/([a-z]|[0-9.-]+)/ig) || [""];
 switch(coords[0]) {
 case "M":
 _model.set("size", _newsize);
 paper.view.draw();
 } else {
 closeEditor();
 }
-}
+};
 this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
 shiftSize(-1);
 return false;
 });
 } else {
 if (typeof this.source_representation.highlighted === "object") {
 var titlehtml = this.source_representation.highlighted.replace(_(_model.get("title")).escape(),'<span class="Rk-Highlighted">$1</span>');
 this.editor_$.find(".Rk-Display-Title" + (_model.get("uri") ? " a" : "")).html(titlehtml);
 if (this.options.show_node_tooltip_description) {
-this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>'))
+this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>'));
 }
 }
 }
 this.editor_$.find("img").load(function() {
 _this.redraw();
 var bindClick = function(selector, fname) {
 _this.$.find(selector).click(function(evt) {
 _this[fname](evt);
 return false;
 });
-}
+};
 bindClick(".Rk-ZoomOut", "zoomOut");
 bindClick(".Rk-ZoomIn", "zoomIn");
 this.$.find(".Rk-CurrentUser").mouseenter(
 function() { _this.$.find(".Rk-UserList").slideDown(); }

renkan