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 284	fa8035885814
parent 283	67f3a24a7c01

equal deleted inserted replaced

-:67f3a24a7c01
+:fa8035885814
 /* Rkns.Renderer Object */
 /* This object contains constants, utility functions and classes for Renkan's Graph Manipulation GUI */
-var Renderer = Rkns.Renderer = {},
+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,
-_isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
-_left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
-_right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
-_top = _coords.y - _height / 2;
-if (_top + _height > (paper.view.size.height - _options.tooltip_margin)) {
-_top = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 ) - _height;
-}
-if (_top < _options.tooltip_margin) {
-_top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 );
-}
-var _bottom = _top + _height;
-_path.segments[0].point
-= _path.segments[7].point
-= _coords.add([_isLeft * _xmargin, 0]);
-_path.segments[1].point.x
-= _path.segments[2].point.x
-= _path.segments[5].point.x
-= _path.segments[6].point.x
-= _left;
-_path.segments[3].point.x
-= _path.segments[4].point.x
-= _right;
-_path.segments[2].point.y
-= _path.segments[3].point.y
-= _top;
-_path.segments[4].point.y
-= _path.segments[5].point.y
-= _bottom;
-_path.segments[1].point.y = _coords.y - _options.tooltip_arrow_width / 2;
-_path.segments[6].point.y = _coords.y + _options.tooltip_arrow_width / 2;
-_path.closed = true;
-_path.fillColor = new paper.GradientColor(new paper.Gradient([_options.tooltip_top_color, _options.tooltip_bottom_color]), [0,_top], [0, _bottom]);
-_selector.css({
-left: (_options.tooltip_padding + Math.min(_left, _right)),
-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)
 this.renderer.minimap.node_group.addChild(this.minimap_circle);
 }
 },
 redraw: function(_dontRedrawEdges) {
 var _model_coords = new paper.Point(this.model.get("position")),
-_baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * _NODE_SIZE_STEP);
+_baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Rkns.Utils._NODE_SIZE_STEP);
 if (!this.is_dragging || !this.paper_coords) {
 this.paper_coords = this.renderer.toPaperCoords(_model_coords);
 }
 this.circle_radius = _baseRadius * this.renderer.scale;
 if (this.last_circle_radius !== this.circle_radius) {
 this.circle.fillColor = this.highlighted ? this.options.highlighted_node_fill_color : this.options.node_fill_color;
 this.circle.opacity = this.options.show_node_circles ? opacity : .01;
 var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_nodes) || "";
-_text = shortenText(_text, this.options.node_label_max_length);
+_text = Rkns.Utils.shortenText(_text, this.options.node_label_max_length);
 if (typeof this.highlighted === "object") {
 this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));
 } else {
 this.title.text(_text);
 this.title.css({
 left: this.paper_coords.x,
 top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,
 opacity: opacity
 });
-var _color = this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color");
+var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color");
 this.circle.strokeColor = _color;
 var _pc = this.paper_coords;
 this.all_buttons.forEach(function(b) {
 b.moveTo(_pc);
 });
 _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
 _p1b = _p1a.add(_delta), /* to differentiate bundled links */
 _a = _v.angle,
 _textdelta = _ortho.multiply(this.options.edge_label_distance),
 _handle = _v.divide(3),
-_color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
+_color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
 opacity = 1;
 if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
 opacity = .5;
 this.line.dashArray = [2, 2];
 if (_a < -90) {
 _a += 180;
 _textdelta = _textdelta.multiply(-1);
 }
 var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_edges) || "";
-_text = shortenText(_text, this.options.node_label_max_length);
+_text = Rkns.Utils.shortenText(_text, this.options.node_label_max_length);
 this.text.text(_text);
 var _textpos = this.paper_coords.add(_textdelta);
 this.text.css({
 left: _textpos.x,
 top: _textpos.y,
 _(TempEdge.prototype).extend({
 _init: function() {
 this.renderer.edge_layer.activate();
 this.type = "Temp-edge";
-var _color = (this.project.get("users").get(this.renkan.current_user) || _USER_PLACEHOLDER(this.renkan)).get("color");
+var _color = (this.project.get("users").get(this.renkan.current_user) || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color");
 this.line = new paper.Path();
 this.line.strokeColor = _color;
 this.line.dashArray = [4, 2];
 this.line.strokeWidth = this.options.selected_edge_stroke_width;
 this.line.add([0,0],[0,0]);
 + '<% if (node.image && options.show_node_tooltip_image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>'
 + '<% if (node.has_creator && options.show_node_tooltip_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>'
 ),
 draw: function() {
 var _model = this.source_representation.model,
-_created_by = _model.get("created_by") || _USER_PLACEHOLDER(this.renkan),
+_created_by = _model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan),
 _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),
 _image_placeholder = this.options.static_url + "img/image-placeholder.png",
 _size = (_model.get("size") || 0);
 this.editor_$
 .html(_template({
 node: {
 has_creator: !!_model.get("created_by"),
 title: _model.get("title"),
 uri: _model.get("uri"),
-short_uri:  shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
+short_uri:  Rkns.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
 description: _model.get("description"),
 image: _model.get("image") || "",
 image_placeholder: _image_placeholder,
 color: _model.get("color") || _created_by.get("color"),
 clip_path: _model.get("clip_path") || false,
 created_by_title: _created_by.get("title"),
 size: (_size > 0 ? "+" : "") + _size
 },
 renkan: this.renkan,
 options: this.options,
-shortenText: shortenText
+shortenText: Rkns.Utils.shortenText
 }));
 this.redraw();
 var _this = this,
 closeEditor = function() {
 _this.renderer.removeRepresentation(_this);
 _e.preventDefault();
 _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color"));
 },
 function(_e) {
 _e.preventDefault();
-_this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || _USER_PLACEHOLDER(_this.renkan)).get("color"));
+_this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
 }
 ).click(function(_e) {
 _e.preventDefault();
 if (_this.renderer.isEditable()) {
 _model.set("color", $(this).attr("data-color"));
 _this.redraw();
 });
 },
 redraw: function() {
 var _coords = this.source_representation.paper_coords;
-drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);
+Rkns.Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);
 this.editor_$.show();
 paper.view.draw();
 }
 });
 ),
 draw: function() {
 var _model = this.source_representation.model,
 _from_model = _model.get("from"),
 _to_model = _model.get("to"),
-_created_by = _model.get("created_by") || _USER_PLACEHOLDER(this.renkan),
+_created_by = _model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan),
 _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);
 this.editor_$
 .html(_template({
 edge: {
 has_creator: !!_model.get("created_by"),
 title: _model.get("title"),
 uri: _model.get("uri"),
-short_uri:  shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
+short_uri:  Rkns.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
 description: _model.get("description"),
 color: _model.get("color") || _created_by.get("color"),
 from_title: _from_model.get("title"),
 to_title: _to_model.get("title"),
-from_color: _from_model.get("color") || (_from_model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
+from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
-to_color: _to_model.get("color") || (_to_model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
+to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
 created_by_color: _created_by.get("color"),
 created_by_title: _created_by.get("title")
 },
 renkan: this.renkan,
-shortenText: shortenText,
+shortenText: Rkns.Utils.shortenText,
 options: this.options
 }));
 this.redraw();
 var _this = this,
 closeEditor = function() {
 _e.preventDefault();
 _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color"));
 },
 function(_e) {
 _e.preventDefault();
-_this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || _USER_PLACEHOLDER(_this.renkan)).get("color"));
+_this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
 }
 ).click(function(_e) {
 _e.preventDefault();
 if (_this.renderer.isEditable()) {
 _model.set("color", $(this).attr("data-color"));
 });
 }
 },
 redraw: function() {
 var _coords = this.source_representation.paper_coords;
-drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
+Rkns.Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
 this.editor_$.show();
 paper.view.draw();
 }
 });
 if (this.sector) {
 this.sector.destroy();
 }
 this.sector = this.renderer.drawSector(
 this, 1 + sectorInner,
-_NODE_BUTTON_WIDTH + sectorInner,
+Rkns.Utils._NODE_BUTTON_WIDTH + sectorInner,
 this.startAngle,
 this.endAngle,
 1,
 this.imageName,
 this.renkan.translate(this.text)
 var EdgeEditButton = Renderer.EdgeEditButton = Rkns.Utils.inherit(_BaseButton);
 _(EdgeEditButton.prototype).extend({
 _init: function() {
 this.type = "Edge-edit-button";
-this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -270, -90, 1, "edit", this.renkan.translate("Edit"));
+this.sector = this.renderer.drawSector(this, Rkns.Utils._EDGE_BUTTON_INNER, Rkns.Utils._EDGE_BUTTON_OUTER, -270, -90, 1, "edit", this.renkan.translate("Edit"));
 },
 mouseup: function() {
 if (!this.renderer.is_dragging) {
 this.source_representation.openEditor();
 }
 var EdgeRemoveButton = Renderer.EdgeRemoveButton = Rkns.Utils.inherit(_BaseButton);
 _(EdgeRemoveButton.prototype).extend({
 _init: function() {
 this.type = "Edge-remove-button";
-this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -90, 90, 1, "remove", this.renkan.translate("Remove"));
+this.sector = this.renderer.drawSector(this, Rkns.Utils._EDGE_BUTTON_INNER, Rkns.Utils._EDGE_BUTTON_OUTER, -90, 90, 1, "remove", this.renkan.translate("Remove"));
 },
 mouseup: function() {
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 this.renderer.removeRepresentationsOfType("editor");
 var EdgeRevertButton = Renderer.EdgeRevertButton = Rkns.Utils.inherit(_BaseButton);
 _(EdgeRevertButton.prototype).extend({
 _init: function() {
 this.type = "Edge-revert-button";
-this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -135, 135, 1, "revert", this.renkan.translate("Cancel deletion"));
+this.sector = this.renderer.drawSector(this, Rkns.Utils._EDGE_BUTTON_INNER, Rkns.Utils._EDGE_BUTTON_OUTER, -135, 135, 1, "revert", this.renkan.translate("Cancel deletion"));
 },
 mouseup: function() {
 this.renderer.click_target = null;
 this.renderer.is_dragging = false;
 if (this.renderer.isEditable()) {
 ['edit', 'remove', 'link', 'enlarge', 'shrink', 'revert' ].forEach(function(imgname) {
 var img = new Image();
 img.src = _renkan.options.static_url + 'img/' + imgname + '.png';
 _this.icon_cache[imgname] = img;
 });
 var throttledMouseMove = _.throttle(function(_event, _isTouch) {
 _this.onMouseMove(_event, _isTouch);
-}, _MOUSEMOVE_RATE);
+}, Rkns.Utils._MOUSEMOVE_RATE);
 this.canvas_$.on({
 mousedown: function(_event) {
 _event.preventDefault();
 _this.onMouseDown(_event, false);
 touchstart: function(_event) {
 _event.preventDefault();
 var _touches = _event.originalEvent.touches[0];
 if (
 _renkan.options.allow_double_click
-&& new Date() - _lastTap < _DOUBLETAP_DELAY
+&& new Date() - _lastTap < Rkns.Utils._DOUBLETAP_DELAY
-&& ( Math.pow(_lastTapX - _touches.pageX, 2) + Math.pow(_lastTapY - _touches.pageY, 2) < _DOUBLETAP_DISTANCE )
+&& ( Math.pow(_lastTapX - _touches.pageX, 2) + Math.pow(_lastTapY - _touches.pageY, 2) < Rkns.Utils._DOUBLETAP_DISTANCE )
 ) {
 _lastTap = 0;
 _this.onDoubleClick(_touches);
 } else {
 _lastTap = new Date();
 bindClick(".Rk-AddNode-Button", "addNodeBtn");
 bindClick(".Rk-AddEdge-Button", "addEdgeBtn");
 bindClick(".Rk-Save-Button", "save");
 bindClick(".Rk-Open-Button", "open");
 this.$.find(".Rk-Bookmarklet-Button")
-.attr("href","javascript:" + _BOOKMARKLET_CODE(_renkan))
+.attr("href","javascript:" + Rkns.Utils._BOOKMARKLET_CODE(_renkan))
 .click(function(){
 _this.notif_$
 .text(_renkan.translate("Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
 .fadeIn()
 .delay(5000)
 }
 }
 this.redrawUsers();
 },
 setScale: function(_newScale, _offset) {
-if ((_newScale/this.initialScale) > _MIN_SCALE && (_newScale/this.initialScale) < _MAX_SCALE) {
+if ((_newScale/this.initialScale) > Rkns.Utils._MIN_SCALE && (_newScale/this.initialScale) < Rkns.Utils._MAX_SCALE) {
 this.scale = _newScale;
 if (_offset) {
 this.offset = _offset;
 }
 this.redraw();
 toModelCoords: function(_point) {
 return _point.subtract(this.offset).divide(this.scale);
 },
 addRepresentation: function(_type, _model) {
 var _repr = new Renderer[_type](this, _model);
+console.log("REPR RENKAN",_repr);
+console.log("REPR RENKAN",Renderer[_type]);
 this.representations.push(_repr);
 return _repr;
 },
 addRepresentations: function(_type, _collection) {
 var _this = this;
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ]),
 _delta = _point.subtract(this.last_point);
 this.last_point = _point;
-if (!this.is_dragging && this.mouse_down && _delta.length > _MIN_DRAG_DISTANCE) {
+if (!this.is_dragging && this.mouse_down && _delta.length > Rkns.Utils._MIN_DRAG_DISTANCE) {
 this.is_dragging = true;
 }
 var _hitResult = paper.project.hitTest(_point);
 if (this.is_dragging) {
 if (this.click_target && typeof this.click_target.paperShift === "function") {
 if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
 this.click_target = _hitResult.item.__representation;
 this.click_target.mousedown(_event, _isTouch);
 } else {
 this.click_target = null;
-if (this.isEditable() && this.click_mode === _CLICKMODE_ADDNODE) {
+if (this.isEditable() && this.click_mode === Rkns.Utils._CLICKMODE_ADDNODE) {
 var _coords = this.toModelCoords(_point),
 _data = {
 id: Rkns.Utils.getUID('node'),
 created_by: this.renkan.current_user,
 position: {
 this.getRepresentationByModel(_node).openEditor();
 }
 }
 }
 if (this.click_mode) {
-if (this.isEditable() && this.click_mode === _CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
+if (this.isEditable() && this.click_mode === Rkns.Utils._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
 this.removeRepresentationsOfType("editor");
 this.addTempEdge(this.click_target, _point);
-this.click_mode = _CLICKMODE_ENDEDGE;
+this.click_mode = Rkns.Utils._CLICKMODE_ENDEDGE;
 this.notif_$.fadeOut(function() {
 $(this).html(this.renkan.translate("Click on a second node to complete the edge")).fadeIn();
 });
 } else {
 this.notif_$.hide();
 this.canvas_$.height()
 ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));
 this.setScale( _newScale, _offset );
 },
 addNodeBtn: function() {
-if (this.click_mode === _CLICKMODE_ADDNODE) {
+if (this.click_mode === Rkns.Utils._CLICKMODE_ADDNODE) {
 this.click_mode = false;
 this.notif_$.hide();
 } else {
-this.click_mode = _CLICKMODE_ADDNODE;
+this.click_mode = Rkns.Utils._CLICKMODE_ADDNODE;
 this.notif_$.text(this.renkan.translate("Click on the background canvas to add a node")).fadeIn();
 }
 return false;
 },
 addEdgeBtn: function() {
-if (this.click_mode === _CLICKMODE_STARTEDGE || this.click_mode === _CLICKMODE_ENDEDGE) {
+if (this.click_mode === Rkns.Utils._CLICKMODE_STARTEDGE || this.click_mode === Rkns.Utils._CLICKMODE_ENDEDGE) {
 this.click_mode = false;
 this.notif_$.hide();
 } else {
-this.click_mode = _CLICKMODE_STARTEDGE;
+this.click_mode = Rkns.Utils._CLICKMODE_STARTEDGE;
 this.notif_$.text(this.renkan.translate("Click on a first node to start the edge")).fadeIn();
 }
 return false;
 },
 foldBins: function() {

renkan