client/js/paper-renderer.js
changeset 199 aff7eb118f7d
parent 198 d3737b90a66b
child 207 583dc519c5fa
--- a/client/js/paper-renderer.js	Mon Aug 19 11:47:29 2013 +0200
+++ b/client/js/paper-renderer.js	Thu Oct 03 19:22:28 2013 +0200
@@ -8,20 +8,31 @@
     _ = 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,
@@ -31,14 +42,20 @@
             }
         };
     },
+        /* 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 ),
@@ -83,6 +100,12 @@
         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;
@@ -115,6 +138,8 @@
     }
 };
 
+/* Rkns.Renderer._BaseRepresentation Methods */
+
 _(_BaseRepresentation.prototype).extend({
     _super: function(_func) {
         return _BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));
@@ -151,7 +176,11 @@
     }
 });
 
-/* */
+/* 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);
 
@@ -179,7 +208,13 @@
 }
 });
 
-/* */
+/* 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);
 
@@ -385,7 +420,7 @@
                 });
                 lastCoords = newCoords.slice(-2);
                 return newCoords;
-            }
+            };
             
             instructions.forEach(function(instr) {
                 var coords = instr.match(/([a-z]|[0-9.-]+)/ig) || [""];
@@ -1086,7 +1121,7 @@
             } else {
                 closeEditor();
             }
-        }
+        };
         
         this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
             shiftSize(-1);
@@ -1101,7 +1136,7 @@
             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>'));
             }
         }
     }
@@ -1748,7 +1783,7 @@
             _this[fname](evt);
             return false;
         });
-    }
+    };
     
     bindClick(".Rk-ZoomOut", "zoomOut");
     bindClick(".Rk-ZoomIn", "zoomIn");