').appendTo(this.renderer.labels_$);\n this.arrow_angle = 0;\n if (this.options.editor_mode) {\n var Renderer = requtils.getRenderer();\n this.normal_buttons = [\n new Renderer.EdgeEditButton(this.renderer, null),\n new Renderer.EdgeRemoveButton(this.renderer, null)\n ];\n this.pending_delete_buttons = [\n new Renderer.EdgeRevertButton(this.renderer, null)\n ];\n this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);\n for (var i = 0; i < this.all_buttons.length; i++) {\n this.all_buttons[i].source_representation = this;\n }\n this.active_buttons = [];\n } else {\n this.active_buttons = this.all_buttons = [];\n }\n\n if (this.renderer.minimap) {\n this.renderer.minimap.edge_layer.activate();\n this.minimap_line = new paper.Path();\n this.minimap_line.add([0,0],[0,0]);\n this.minimap_line.__representation = this.renderer.minimap.miniframe.__representation;\n this.minimap_line.strokeWidth = 1;\n }\n },\n redraw: function() {\n var from = this.model.get(\"from\"),\n to = this.model.get(\"to\");\n if (!from || !to) {\n return;\n }\n this.from_representation = this.renderer.getRepresentationByModel(from);\n this.to_representation = this.renderer.getRepresentationByModel(to);\n if (typeof this.from_representation === \"undefined\" || typeof this.to_representation === \"undefined\") {\n return;\n }\n var _p0a = this.from_representation.paper_coords,\n _p1a = this.to_representation.paper_coords,\n _v = _p1a.subtract(_p0a),\n _r = _v.length,\n _u = _v.divide(_r),\n _ortho = new paper.Point([- _u.y, _u.x]),\n _group_pos = this.bundle.getPosition(this),\n _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),\n _p0b = _p0a.add(_delta), /* Adding a 4 px difference */\n _p1b = _p1a.add(_delta), /* to differentiate bundled links */\n _a = _v.angle,\n _textdelta = _ortho.multiply(this.options.edge_label_distance),\n _handle = _v.divide(3),\n _color = this.model.get(\"color\") || this.model.get(\"color\") || (this.model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan)).get(\"color\"),\n opacity = 1;\n\n if (this.model.get(\"delete_scheduled\") || this.from_representation.model.get(\"delete_scheduled\") || this.to_representation.model.get(\"delete_scheduled\")) {\n opacity = 0.5;\n this.line.dashArray = [2, 2];\n } else {\n opacity = 1;\n this.line.dashArray = null;\n }\n\n var old_act_btn = this.active_buttons;\n\n this.active_buttons = this.model.get(\"delete_scheduled\") ? this.pending_delete_buttons : this.normal_buttons;\n\n if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) {\n old_act_btn.forEach(function(b) {\n b.hide();\n });\n this.active_buttons.forEach(function(b) {\n b.show();\n });\n }\n\n this.paper_coords = _p0b.add(_p1b).divide(2);\n this.line.strokeColor = _color;\n this.line.opacity = opacity;\n this.line.segments[0].point = _p0a;\n this.line.segments[1].point = this.paper_coords;\n this.line.segments[1].handleIn = _handle.multiply(-1);\n this.line.segments[1].handleOut = _handle;\n this.line.segments[2].point = _p1a;\n this.arrow.rotate(_a - this.arrow_angle);\n this.arrow.fillColor = _color;\n this.arrow.opacity = opacity;\n this.arrow.position = this.paper_coords;\n this.arrow_angle = _a;\n if (_a > 90) {\n _a -= 180;\n _textdelta = _textdelta.multiply(-1);\n }\n if (_a < -90) {\n _a += 180;\n _textdelta = _textdelta.multiply(-1);\n }\n var _text = this.model.get(\"title\") || this.renkan.translate(this.options.label_untitled_edges) || \"\";\n _text = Utils.shortenText(_text, this.options.node_label_max_length);\n this.text.text(_text);\n var _textpos = this.paper_coords.add(_textdelta);\n this.text.css({\n left: _textpos.x,\n top: _textpos.y,\n transform: \"rotate(\" + _a + \"deg)\",\n \"-moz-transform\": \"rotate(\" + _a + \"deg)\",\n \"-webkit-transform\": \"rotate(\" + _a + \"deg)\",\n opacity: opacity\n });\n this.text_angle = _a;\n\n var _pc = this.paper_coords;\n this.all_buttons.forEach(function(b) {\n b.moveTo(_pc);\n });\n\n if (this.renderer.minimap) {\n this.minimap_line.strokeColor = _color;\n this.minimap_line.segments[0].point = this.renderer.toMinimapCoords(new paper.Point(this.from_representation.model.get(\"position\")));\n this.minimap_line.segments[1].point = this.renderer.toMinimapCoords(new paper.Point(this.to_representation.model.get(\"position\")));\n }\n },\n openEditor: function() {\n this.renderer.removeRepresentationsOfType(\"editor\");\n var _editor = this.renderer.addRepresentation(\"EdgeEditor\",null);\n _editor.source_representation = this;\n _editor.draw();\n },\n select: function() {\n this.selected = true;\n this.line.strokeWidth = this.options.selected_edge_stroke_width;\n if (this.renderer.isEditable()) {\n this.active_buttons.forEach(function(b) {\n b.show();\n });\n }\n if (!this.options.editor_mode) {\n this.openEditor();\n }\n this._super(\"select\");\n },\n unselect: function(_newTarget) {\n if (!_newTarget || _newTarget.source_representation !== this) {\n this.selected = false;\n if (this.options.editor_mode) {\n this.all_buttons.forEach(function(b) {\n b.hide();\n });\n }\n this.line.strokeWidth = this.options.edge_stroke_width;\n this._super(\"unselect\");\n }\n },\n mousedown: function(_event, _isTouch) {\n if (_isTouch) {\n this.renderer.unselectAll();\n this.select();\n }\n },\n mouseup: function(_event, _isTouch) {\n if (!this.renkan.read_only && this.renderer.is_dragging) {\n this.from_representation.saveCoords();\n this.to_representation.saveCoords();\n this.from_representation.is_dragging = false;\n this.to_representation.is_dragging = false;\n } else {\n if (!_isTouch) {\n this.openEditor();\n }\n this.model.trigger(\"clicked\");\n }\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n },\n paperShift: function(_delta) {\n if (this.options.editor_mode) {\n if (!this.options.read_only) {\n this.from_representation.paperShift(_delta);\n this.to_representation.paperShift(_delta);\n }\n } else {\n this.renderer.paperShift(_delta);\n }\n },\n destroy: function() {\n this._super(\"destroy\");\n this.line.remove();\n this.arrow.remove();\n this.text.remove();\n if (this.renderer.minimap) {\n this.minimap_line.remove();\n }\n this.all_buttons.forEach(function(b) {\n b.destroy();\n });\n var _this = this;\n this.bundle.edges = _(this.bundle.edges).reject(function(_edge) {\n return _this === _edge;\n });\n }\n });\n\n return Edge;\n\n});\n\n\n\ndefine('renderer/tempedge',['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {\n \n\n var Utils = requtils.getUtils();\n\n /* TempEdge Class Begin */\n\n //var TempEdge = Renderer.TempEdge = Utils.inherit(Renderer._BaseRepresentation);\n var TempEdge = Utils.inherit(BaseRepresentation);\n\n _(TempEdge.prototype).extend({\n _init: function() {\n this.renderer.edge_layer.activate();\n this.type = \"Temp-edge\";\n\n var _color = (this.project.get(\"users\").get(this.renkan.current_user) || Utils._USER_PLACEHOLDER(this.renkan)).get(\"color\");\n this.line = new paper.Path();\n this.line.strokeColor = _color;\n this.line.dashArray = [4, 2];\n this.line.strokeWidth = this.options.selected_edge_stroke_width;\n this.line.add([0,0],[0,0]);\n this.line.__representation = this;\n this.arrow = new paper.Path();\n this.arrow.fillColor = _color;\n this.arrow.add(\n [ 0, 0 ],\n [ this.options.edge_arrow_length, this.options.edge_arrow_width / 2 ],\n [ 0, this.options.edge_arrow_width ]\n );\n this.arrow.__representation = this;\n this.arrow_angle = 0;\n },\n redraw: function() {\n var _p0 = this.from_representation.paper_coords,\n _p1 = this.end_pos,\n _a = _p1.subtract(_p0).angle,\n _c = _p0.add(_p1).divide(2);\n this.line.segments[0].point = _p0;\n this.line.segments[1].point = _p1;\n this.arrow.rotate(_a - this.arrow_angle);\n this.arrow.position = _c;\n this.arrow_angle = _a;\n },\n paperShift: function(_delta) {\n if (!this.renderer.isEditable()) {\n this.renderer.removeRepresentation(_this);\n paper.view.draw();\n return;\n }\n this.end_pos = this.end_pos.add(_delta);\n var _hitResult = paper.project.hitTest(this.end_pos);\n this.renderer.findTarget(_hitResult);\n this.redraw();\n },\n mouseup: function(_event, _isTouch) {\n var _hitResult = paper.project.hitTest(_event.point),\n _model = this.from_representation.model,\n _endDrag = true;\n if (_hitResult && typeof _hitResult.item.__representation !== \"undefined\") {\n var _target = _hitResult.item.__representation;\n if (_target.type.substr(0,4) === \"Node\") {\n var _destmodel = _target.model || _target.source_representation.model;\n if (_model !== _destmodel) {\n var _data = {\n id: Utils.getUID('edge'),\n created_by: this.renkan.current_user,\n from: _model,\n to: _destmodel\n };\n if (this.renderer.isEditable()) {\n this.project.addEdge(_data);\n }\n }\n }\n\n if (_model === _target.model || (_target.source_representation && _target.source_representation.model === _model)) {\n _endDrag = false;\n this.renderer.is_dragging = true;\n }\n }\n if (_endDrag) {\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n this.renderer.removeRepresentation(this);\n paper.view.draw();\n }\n },\n destroy: function() {\n this.arrow.remove();\n this.line.remove();\n }\n });\n\n /* TempEdge Class End */\n\n return TempEdge;\n\n});\n\n\ndefine('renderer/baseeditor',['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {\n \n\n var Utils = requtils.getUtils();\n\n /* _BaseEditor Begin */\n //var _BaseEditor = Renderer._BaseEditor = Utils.inherit(Renderer._BaseRepresentation);\n var _BaseEditor = Utils.inherit(BaseRepresentation);\n\n _(_BaseEditor.prototype).extend({\n _init: function() {\n this.renderer.buttons_layer.activate();\n this.type = \"editor\";\n this.editor_block = new paper.Path();\n var _pts = _(_.range(8)).map(function() {return [0,0];});\n this.editor_block.add.apply(this.editor_block, _pts);\n this.editor_block.strokeWidth = this.options.tooltip_border_width;\n this.editor_block.strokeColor = this.options.tooltip_border_color;\n this.editor_block.opacity = 0.8;\n this.editor_$ = $('
')\n .appendTo(this.renderer.editor_$)\n .css({\n position: \"absolute\",\n opacity: 0.8\n })\n .hide();\n },\n destroy: function() {\n this.editor_block.remove();\n this.editor_$.remove();\n }\n });\n\n /* _BaseEditor End */\n\n return _BaseEditor;\n\n});\n\n\ndefine('renderer/nodeeditor',['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) {\n \n\n var Utils = requtils.getUtils();\n\n /* NodeEditor Begin */\n //var NodeEditor = Renderer.NodeEditor = Utils.inherit(Renderer._BaseEditor);\n var NodeEditor = Utils.inherit(BaseEditor);\n\n _(NodeEditor.prototype).extend({\n template: _.template(\n '
×<%-renkan.translate(\"Edit Node\")%>
' +\n '
\"/>
' +\n '<% if (options.show_node_editor_uri) { %>
\"/>\" target=\"_blank\">
<% } %>' +\n '<% if (options.show_node_editor_description) { %>
<% } %>' +\n '<% if (options.show_node_editor_size) { %>
<%-renkan.translate(\"Size:\")%>-<%-node.size%>+
<% } %>' +\n '<% if (options.show_node_editor_color) { %>
<%-renkan.translate(\"Node color:\")%>;\">' +\n '<%= renkan.colorPicker %><%- renkan.translate(\"Choose color\") %>
<% } %>' +\n '<% if (options.show_node_editor_image) { %>
![](\"<%-node.image)
\" />' +\n '<% if (node.clip_path) { %>
<% }%>' +\n '
' +\n '
<% } %>' +\n '<% if (options.show_node_editor_creator && node.has_creator) { %>
<%-renkan.translate(\"Created by:\")%> ;\"><%- shortenText(node.created_by_title, 25) %>
<% } %>' +\n '<% if (options.change_shapes) { %>
<% } %>'\n ),\n readOnlyTemplate: _.template(\n '
' +\n '<% if (node.uri && options.show_node_tooltip_uri) { %>
\" target=\"_blank\"><%-node.short_uri%>
<% } %>' +\n '<% if (options.show_node_tooltip_description) { %>
<%-node.description%>
<% } %>' +\n '<% if (node.image && options.show_node_tooltip_image) { %>
![](\"<%-node.image%)
\" /><% } %>' +\n '<% if (node.has_creator && options.show_node_tooltip_creator) { %>
<%-renkan.translate(\"Created by:\")%>;\"><%- shortenText(node.created_by_title, 25) %>
<% } %>'\n ),\n draw: function() {\n var _model = this.source_representation.model,\n _created_by = _model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan),\n _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),\n _image_placeholder = this.options.static_url + \"img/image-placeholder.png\",\n _size = (_model.get(\"size\") || 0);\n this.editor_$\n .html(_template({\n node: {\n has_creator: !!_model.get(\"created_by\"),\n title: _model.get(\"title\"),\n uri: _model.get(\"uri\"),\n short_uri: Utils.shortenText((_model.get(\"uri\") || \"\").replace(/^(https?:\\/\\/)?(www\\.)?/,'').replace(/\\/$/,''),40),\n description: _model.get(\"description\"),\n image: _model.get(\"image\") || \"\",\n image_placeholder: _image_placeholder,\n color: _model.get(\"color\") || _created_by.get(\"color\"),\n clip_path: _model.get(\"clip_path\") || false,\n created_by_color: _created_by.get(\"color\"),\n created_by_title: _created_by.get(\"title\"),\n size: (_size > 0 ? \"+\" : \"\") + _size,\n shape: _model.get(\"shape\") || \"circle\"\n },\n renkan: this.renkan,\n options: this.options,\n shortenText: Utils.shortenText\n }));\n this.redraw();\n var _this = this,\n closeEditor = function() {\n _this.renderer.removeRepresentation(_this);\n paper.view.draw();\n };\n\n this.editor_$.find(\".Rk-CloseX\").click(closeEditor);\n\n this.editor_$.find(\".Rk-Edit-Goto\").click(function() {\n if (!_model.get(\"uri\")) {\n return false;\n }\n });\n\n if (this.renderer.isEditable()) {\n\n var onFieldChange = _(function() {\n _(function() {\n if (_this.renderer.isEditable()) {\n var _data = {\n title: _this.editor_$.find(\".Rk-Edit-Title\").val()\n };\n if (_this.options.show_node_editor_uri) {\n _data.uri = _this.editor_$.find(\".Rk-Edit-URI\").val();\n _this.editor_$.find(\".Rk-Edit-Goto\").attr(\"href\",_data.uri || \"#\");\n }\n if (_this.options.show_node_editor_image) {\n _data.image = _this.editor_$.find(\".Rk-Edit-Image\").val();\n _this.editor_$.find(\".Rk-Edit-ImgPreview\").attr(\"src\", _data.image || _image_placeholder);\n }\n if (_this.options.show_node_editor_description) {\n _data.description = _this.editor_$.find(\".Rk-Edit-Description\").val();\n }\n if (_this.options.change_shapes) {\n if(_model.get(\"shape\")!==_this.editor_$.find(\".Rk-Edit-Shape\").val()){\n _data.shape = _this.editor_$.find(\".Rk-Edit-Shape\").val();\n _data.shape_changed = true;\n }\n }\n _model.set(_data);\n _this.redraw();\n // For an unknown reason, we have to set data twice when we change shape, otherwise the image disappears.\n if(_data.shape_changed===true){\n _model.set(_data);\n }\n } else {\n closeEditor();\n }\n }).defer();\n }).throttle(500);\n \n this.editor_$.on(\"keyup\", function(_e) {\n if (_e.keyCode === 27) {\n closeEditor();\n }\n });\n\n this.editor_$.find(\"input, textarea, select\").on(\"change keyup paste\", onFieldChange);\n\n this.editor_$.find(\".Rk-Edit-Image-File\").change(function() {\n if (this.files.length) {\n var f = this.files[0],\n fr = new FileReader();\n if (f.type.substr(0,5) !== \"image\") {\n alert(_this.renkan.translate(\"This file is not an image\"));\n return;\n }\n if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {\n alert(_this.renkan.translate(\"Image size must be under \") + _this.options.uploaded_image_max_kb + _this.renkan.translate(\"KB\"));\n return;\n }\n fr.onload = function(e) {\n _this.editor_$.find(\".Rk-Edit-Image\").val(e.target.result);\n onFieldChange();\n };\n fr.readAsDataURL(f);\n }\n });\n this.editor_$.find(\".Rk-Edit-Title\")[0].focus();\n\n var _picker = _this.editor_$.find(\".Rk-Edit-ColorPicker\");\n\n this.editor_$.find(\".Rk-Edit-ColorPicker-Wrapper\").hover(\n function(_e) {\n _e.preventDefault();\n _picker.show();\n },\n function(_e) {\n _e.preventDefault();\n _picker.hide();\n }\n );\n\n _picker.find(\"li\").hover(\n function(_e) {\n _e.preventDefault();\n _this.editor_$.find(\".Rk-Edit-Color\").css(\"background\", $(this).attr(\"data-color\"));\n },\n function(_e) {\n _e.preventDefault();\n _this.editor_$.find(\".Rk-Edit-Color\").css(\"background\", _model.get(\"color\") || (_model.get(\"created_by\") || Utils._USER_PLACEHOLDER(_this.renkan)).get(\"color\"));\n }\n ).click(function(_e) {\n _e.preventDefault();\n if (_this.renderer.isEditable()) {\n _model.set(\"color\", $(this).attr(\"data-color\"));\n _picker.hide();\n paper.view.draw();\n } else {\n closeEditor();\n }\n });\n\n var shiftSize = function(n) {\n if (_this.renderer.isEditable()) {\n var _newsize = n+(_model.get(\"size\") || 0);\n _this.editor_$.find(\".Rk-Edit-Size-Value\").text((_newsize > 0 ? \"+\" : \"\") + _newsize);\n _model.set(\"size\", _newsize);\n paper.view.draw();\n } else {\n closeEditor();\n }\n };\n\n this.editor_$.find(\".Rk-Edit-Size-Down\").click(function() {\n shiftSize(-1);\n return false;\n });\n this.editor_$.find(\".Rk-Edit-Size-Up\").click(function() {\n shiftSize(1);\n return false;\n });\n \n this.editor_$.find(\".Rk-Edit-Image-Del\").click(function() {\n \t_this.editor_$.find(\".Rk-Edit-Image\").val('');\n \tonFieldChange();\n return false;\n });\n } else {\n if (typeof this.source_representation.highlighted === \"object\") {\n var titlehtml = this.source_representation.highlighted.replace(_(_model.get(\"title\")).escape(),'
$1');\n this.editor_$.find(\".Rk-Display-Title\" + (_model.get(\"uri\") ? \" a\" : \"\")).html(titlehtml);\n if (this.options.show_node_tooltip_description) {\n this.editor_$.find(\".Rk-Display-Description\").html(this.source_representation.highlighted.replace(_(_model.get(\"description\")).escape(),'
$1'));\n }\n }\n }\n this.editor_$.find(\"img\").load(function() {\n _this.redraw();\n });\n },\n redraw: function() {\n var _coords = this.source_representation.paper_coords;\n Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$);\n this.editor_$.show();\n paper.view.draw();\n }\n });\n\n /* NodeEditor End */\n\n return NodeEditor;\n\n});\n\n\ndefine('renderer/edgeeditor',['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) {\n \n\n var Utils = requtils.getUtils();\n\n /* EdgeEditor Begin */\n\n //var EdgeEditor = Renderer.EdgeEditor = Utils.inherit(Renderer._BaseEditor);\n var EdgeEditor = Utils.inherit(BaseEditor);\n\n _(EdgeEditor.prototype).extend({\n template: _.template(\n '
×<%-renkan.translate(\"Edit Edge\")%>
' +\n '
\"/>
' +\n '<% if (options.show_edge_editor_uri) { %>
\"/>\" target=\"_blank\">
' +\n '<% if (options.properties.length) { %>
<% } } %>' +\n '<% if (options.show_edge_editor_color) { %>
<%-renkan.translate(\"Edge color:\")%>;\">' +\n '<%= renkan.colorPicker %><%- renkan.translate(\"Choose color\") %>
<% } %>' +\n '<% if (options.show_edge_editor_direction) { %>
<%- renkan.translate(\"Change edge direction\") %>
<% } %>' +\n '<% if (options.show_edge_editor_nodes) { %>
<%-renkan.translate(\"From:\")%>;\"><%- shortenText(edge.from_title, 25) %>
' +\n '
<%-renkan.translate(\"To:\")%>;\"><%- shortenText(edge.to_title, 25) %>
<% } %>' +\n '<% if (options.show_edge_editor_creator && edge.has_creator) { %>
<%-renkan.translate(\"Created by:\")%>;\"><%- shortenText(edge.created_by_title, 25) %>
<% } %>'\n ),\n readOnlyTemplate: _.template(\n '
' +\n '<% if (options.show_edge_tooltip_uri && edge.uri) { %>
\" target=\"_blank\"><%-edge.short_uri%>
<% } %>' +\n '
<%-edge.description%>
' +\n '<% if (options.show_edge_tooltip_nodes) { %>
<%-renkan.translate(\"From:\")%>;\"><%- shortenText(edge.from_title, 25) %>
' +\n '
<%-renkan.translate(\"To:\")%>;\"><%- shortenText(edge.to_title, 25) %>
<% } %>' +\n '<% if (options.show_edge_tooltip_creator && edge.has_creator) { %>
<%-renkan.translate(\"Created by:\")%>;\"><%- shortenText(edge.created_by_title, 25) %>
<% } %>'\n ),\n draw: function() {\n var _model = this.source_representation.model,\n _from_model = _model.get(\"from\"),\n _to_model = _model.get(\"to\"),\n _created_by = _model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan),\n _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);\n this.editor_$\n .html(_template({\n edge: {\n has_creator: !!_model.get(\"created_by\"),\n title: _model.get(\"title\"),\n uri: _model.get(\"uri\"),\n short_uri: Utils.shortenText((_model.get(\"uri\") || \"\").replace(/^(https?:\\/\\/)?(www\\.)?/,'').replace(/\\/$/,''),40),\n description: _model.get(\"description\"),\n color: _model.get(\"color\") || _created_by.get(\"color\"),\n from_title: _from_model.get(\"title\"),\n to_title: _to_model.get(\"title\"),\n from_color: _from_model.get(\"color\") || (_from_model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan)).get(\"color\"),\n to_color: _to_model.get(\"color\") || (_to_model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan)).get(\"color\"),\n created_by_color: _created_by.get(\"color\"),\n created_by_title: _created_by.get(\"title\")\n },\n renkan: this.renkan,\n shortenText: Utils.shortenText,\n options: this.options\n }));\n this.redraw();\n var _this = this,\n closeEditor = function() {\n _this.renderer.removeRepresentation(_this);\n paper.view.draw();\n };\n this.editor_$.find(\".Rk-CloseX\").click(closeEditor);\n this.editor_$.find(\".Rk-Edit-Goto\").click(function() {\n if (!_model.get(\"uri\")) {\n return false;\n }\n });\n\n if (this.renderer.isEditable()) {\n\n var onFieldChange = _(function() {\n _(function() {\n if (_this.renderer.isEditable()) {\n var _data = {\n title: _this.editor_$.find(\".Rk-Edit-Title\").val()\n };\n if (_this.options.show_edge_editor_uri) {\n _data.uri = _this.editor_$.find(\".Rk-Edit-URI\").val();\n }\n _this.editor_$.find(\".Rk-Edit-Goto\").attr(\"href\",_data.uri || \"#\");\n _model.set(_data);\n paper.view.draw();\n } else {\n closeEditor();\n }\n }).defer();\n }).throttle(500);\n\n this.editor_$.on(\"keyup\", function(_e) {\n if (_e.keyCode === 27) {\n closeEditor();\n }\n });\n\n this.editor_$.find(\"input\").on(\"keyup change paste\", onFieldChange);\n\n this.editor_$.find(\".Rk-Edit-Vocabulary\").change(function() {\n var e = $(this),\n v = e.val();\n if (v) {\n _this.editor_$.find(\".Rk-Edit-Title\").val(e.find(\":selected\").text());\n _this.editor_$.find(\".Rk-Edit-URI\").val(v);\n onFieldChange();\n }\n });\n this.editor_$.find(\".Rk-Edit-Direction\").click(function() {\n if (_this.renderer.isEditable()) {\n _model.set({\n from: _model.get(\"to\"),\n to: _model.get(\"from\")\n });\n _this.draw();\n } else {\n closeEditor();\n }\n });\n\n var _picker = _this.editor_$.find(\".Rk-Edit-ColorPicker\");\n\n this.editor_$.find(\".Rk-Edit-ColorPicker-Wrapper\").hover(\n function(_e) {\n _e.preventDefault();\n _picker.show();\n },\n function(_e) {\n _e.preventDefault();\n _picker.hide();\n }\n );\n\n _picker.find(\"li\").hover(\n function(_e) {\n _e.preventDefault();\n _this.editor_$.find(\".Rk-Edit-Color\").css(\"background\", $(this).attr(\"data-color\"));\n },\n function(_e) {\n _e.preventDefault();\n _this.editor_$.find(\".Rk-Edit-Color\").css(\"background\", _model.get(\"color\") || (_model.get(\"created_by\") || Utils._USER_PLACEHOLDER(_this.renkan)).get(\"color\"));\n }\n ).click(function(_e) {\n _e.preventDefault();\n if (_this.renderer.isEditable()) {\n _model.set(\"color\", $(this).attr(\"data-color\"));\n _picker.hide();\n paper.view.draw();\n } else {\n closeEditor();\n }\n });\n }\n },\n redraw: function() {\n var _coords = this.source_representation.paper_coords;\n Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);\n this.editor_$.show();\n paper.view.draw();\n }\n });\n\n /* EdgeEditor End */\n\n return EdgeEditor;\n\n});\n\n\ndefine('renderer/nodebutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n \n \n var Utils = requtils.getUtils();\n\n /* _NodeButton Begin */\n\n //var _NodeButton = Renderer._NodeButton = Utils.inherit(Renderer._BaseButton);\n var _NodeButton = Utils.inherit(BaseButton);\n\n _(_NodeButton.prototype).extend({\n setSectorSize: function() {\n var sectorInner = this.source_representation.circle_radius;\n if (sectorInner !== this.lastSectorInner) {\n if (this.sector) {\n this.sector.destroy();\n }\n this.sector = this.renderer.drawSector(\n this, 1 + sectorInner,\n Utils._NODE_BUTTON_WIDTH + sectorInner,\n this.startAngle,\n this.endAngle,\n 1,\n this.imageName,\n this.renkan.translate(this.text)\n );\n this.lastSectorInner = sectorInner;\n }\n }\n });\n\n /* _NodeButton End */\n\n return _NodeButton;\n\n});\n\n\ndefine('renderer/nodeeditbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* NodeEditButton Begin */\n\n //var NodeEditButton = Renderer.NodeEditButton = Utils.inherit(Renderer._NodeButton);\n var NodeEditButton = Utils.inherit(NodeButton);\n\n _(NodeEditButton.prototype).extend({\n _init: function() {\n this.type = \"Node-edit-button\";\n this.lastSectorInner = 0;\n this.startAngle = -135;\n this.endAngle = -45;\n this.imageName = \"edit\";\n this.text = \"Edit\";\n },\n mouseup: function() {\n if (!this.renderer.is_dragging) {\n this.source_representation.openEditor();\n }\n }\n });\n\n /* NodeEditButton End */\n\n return NodeEditButton;\n\n});\n\n\ndefine('renderer/noderemovebutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n \n \n var Utils = requtils.getUtils();\n\n /* NodeRemoveButton Begin */\n\n //var NodeRemoveButton = Renderer.NodeRemoveButton = Utils.inherit(Renderer._NodeButton);\n var NodeRemoveButton = Utils.inherit(NodeButton);\n\n _(NodeRemoveButton.prototype).extend({\n _init: function() {\n this.type = \"Node-remove-button\";\n this.lastSectorInner = 0;\n this.startAngle = 0;\n this.endAngle = 90;\n this.imageName = \"remove\";\n this.text = \"Remove\";\n },\n mouseup: function() {\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n this.renderer.removeRepresentationsOfType(\"editor\");\n if (this.renderer.isEditable()) {\n if (this.options.element_delete_delay) {\n var delid = Utils.getUID(\"delete\");\n this.renderer.delete_list.push({\n id: delid,\n time: new Date().valueOf() + this.options.element_delete_delay\n });\n this.source_representation.model.set(\"delete_scheduled\", delid);\n } else {\n if (confirm(this.renkan.translate('Do you really wish to remove node ') + '\"' + this.source_representation.model.get(\"title\") + '\"?')) {\n this.project.removeNode(this.source_representation.model);\n }\n }\n }\n }\n });\n\n /* NodeRemoveButton End */\n\n return NodeRemoveButton;\n\n});\n\n\ndefine('renderer/noderevertbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* NodeRevertButton Begin */\n\n //var NodeRevertButton = Renderer.NodeRevertButton = Utils.inherit(Renderer._NodeButton);\n var NodeRevertButton = Utils.inherit(NodeButton);\n\n _(NodeRevertButton.prototype).extend({\n _init: function() {\n this.type = \"Node-revert-button\";\n this.lastSectorInner = 0;\n this.startAngle = -135;\n this.endAngle = 135;\n this.imageName = \"revert\";\n this.text = \"Cancel deletion\";\n },\n mouseup: function() {\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n if (this.renderer.isEditable()) {\n this.source_representation.model.unset(\"delete_scheduled\");\n }\n }\n });\n\n /* NodeRevertButton End */\n\n return NodeRevertButton;\n\n});\n\n\ndefine('renderer/nodelinkbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* NodeLinkButton Begin */\n\n //var NodeLinkButton = Renderer.NodeLinkButton = Utils.inherit(Renderer._NodeButton);\n var NodeLinkButton = Utils.inherit(NodeButton);\n\n _(NodeLinkButton.prototype).extend({\n _init: function() {\n this.type = \"Node-link-button\";\n this.lastSectorInner = 0;\n this.startAngle = 90;\n this.endAngle = 180;\n this.imageName = \"link\";\n this.text = \"Link to another node\";\n },\n mousedown: function(_event, _isTouch) {\n if (this.renderer.isEditable()) {\n var _off = this.renderer.canvas_$.offset(),\n _point = new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ]);\n this.renderer.click_target = null;\n this.renderer.removeRepresentationsOfType(\"editor\");\n this.renderer.addTempEdge(this.source_representation, _point);\n }\n }\n });\n\n /* NodeLinkButton End */\n\n return NodeLinkButton;\n\n});\n\n\n\ndefine('renderer/nodeenlargebutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n \n \n var Utils = requtils.getUtils();\n\n /* NodeEnlargeButton Begin */\n\n //var NodeEnlargeButton = Renderer.NodeEnlargeButton = Utils.inherit(Renderer._NodeButton);\n var NodeEnlargeButton = Utils.inherit(NodeButton);\n\n _(NodeEnlargeButton.prototype).extend({\n _init: function() {\n this.type = \"Node-enlarge-button\";\n this.lastSectorInner = 0;\n this.startAngle = -45;\n this.endAngle = 0;\n this.imageName = \"enlarge\";\n this.text = \"Enlarge\";\n },\n mouseup: function() {\n var _newsize = 1 + (this.source_representation.model.get(\"size\") || 0);\n this.source_representation.model.set(\"size\", _newsize);\n this.source_representation.select();\n this.select();\n paper.view.draw();\n }\n });\n\n /* NodeEnlargeButton End */\n\n return NodeEnlargeButton;\n\n});\n\n\ndefine('renderer/nodeshrinkbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* NodeShrinkButton Begin */\n\n //var NodeShrinkButton = Renderer.NodeShrinkButton = Utils.inherit(Renderer._NodeButton);\n var NodeShrinkButton = Utils.inherit(NodeButton);\n\n _(NodeShrinkButton.prototype).extend({\n _init: function() {\n this.type = \"Node-shrink-button\";\n this.lastSectorInner = 0;\n this.startAngle = -180;\n this.endAngle = -135;\n this.imageName = \"shrink\";\n this.text = \"Shrink\";\n },\n mouseup: function() {\n var _newsize = -1 + (this.source_representation.model.get(\"size\") || 0);\n this.source_representation.model.set(\"size\", _newsize);\n this.source_representation.select();\n this.select();\n paper.view.draw();\n }\n });\n\n /* NodeShrinkButton End */\n\n return NodeShrinkButton;\n\n});\n\n\ndefine('renderer/edgeeditbutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* EdgeEditButton Begin */\n\n //var EdgeEditButton = Renderer.EdgeEditButton = Utils.inherit(Renderer._BaseButton);\n var EdgeEditButton = Utils.inherit(BaseButton);\n\n _(EdgeEditButton.prototype).extend({\n _init: function() {\n this.type = \"Edge-edit-button\";\n this.sector = this.renderer.drawSector(this, Utils._EDGE_BUTTON_INNER, Utils._EDGE_BUTTON_OUTER, -270, -90, 1, \"edit\", this.renkan.translate(\"Edit\"));\n },\n mouseup: function() {\n if (!this.renderer.is_dragging) {\n this.source_representation.openEditor();\n }\n }\n });\n\n /* EdgeEditButton End */\n\n return EdgeEditButton;\n\n});\n\n\ndefine('renderer/edgeremovebutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* EdgeRemoveButton Begin */\n\n //var EdgeRemoveButton = Renderer.EdgeRemoveButton = Utils.inherit(Renderer._BaseButton);\n var EdgeRemoveButton = Utils.inherit(BaseButton);\n\n _(EdgeRemoveButton.prototype).extend({\n _init: function() {\n this.type = \"Edge-remove-button\";\n this.sector = this.renderer.drawSector(this, Utils._EDGE_BUTTON_INNER, Utils._EDGE_BUTTON_OUTER, -90, 90, 1, \"remove\", this.renkan.translate(\"Remove\"));\n },\n mouseup: function() {\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n this.renderer.removeRepresentationsOfType(\"editor\");\n if (this.renderer.isEditable()) {\n if (this.options.element_delete_delay) {\n var delid = Utils.getUID(\"delete\");\n this.renderer.delete_list.push({\n id: delid,\n time: new Date().valueOf() + this.options.element_delete_delay\n });\n this.source_representation.model.set(\"delete_scheduled\", delid);\n } else {\n if (confirm(this.renkan.translate('Do you really wish to remove edge ') + '\"' + this.source_representation.model.get(\"title\") + '\"?')) {\n this.project.removeEdge(this.source_representation.model);\n }\n }\n }\n }\n });\n\n /* EdgeRemoveButton End */\n\n return EdgeRemoveButton;\n\n});\n\n\ndefine('renderer/edgerevertbutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n \n\n var Utils = requtils.getUtils();\n\n /* EdgeRevertButton Begin */\n\n //var EdgeRevertButton = Renderer.EdgeRevertButton = Utils.inherit(Renderer._BaseButton);\n var EdgeRevertButton = Utils.inherit(BaseButton);\n\n _(EdgeRevertButton.prototype).extend({\n _init: function() {\n this.type = \"Edge-revert-button\";\n this.sector = this.renderer.drawSector(this, Utils._EDGE_BUTTON_INNER, Utils._EDGE_BUTTON_OUTER, -135, 135, 1, \"revert\", this.renkan.translate(\"Cancel deletion\"));\n },\n mouseup: function() {\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n if (this.renderer.isEditable()) {\n this.source_representation.model.unset(\"delete_scheduled\");\n }\n }\n });\n\n /* EdgeRevertButton End */\n\n return EdgeRevertButton;\n\n});\n\n\ndefine('renderer/miniframe',['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {\n \n\n var Utils = requtils.getUtils();\n\n /* MiniFrame Begin */\n\n //var MiniFrame = Renderer.MiniFrame = Utils.inherit(Renderer._BaseRepresentation);\n var MiniFrame = Utils.inherit(BaseRepresentation);\n\n _(MiniFrame.prototype).extend({\n paperShift: function(_delta) {\n this.renderer.offset = this.renderer.offset.subtract(_delta.divide(this.renderer.minimap.scale).multiply(this.renderer.scale));\n this.renderer.redraw();\n },\n mouseup: function(_delta) {\n this.renderer.click_target = null;\n this.renderer.is_dragging = false;\n }\n });\n\n /* MiniFrame End */\n\n return MiniFrame;\n\n});\n\n\ndefine('renderer/scene',['jquery', 'underscore', 'filesaver', 'requtils', 'renderer/miniframe'], function ($, _, filesaver, requtils, MiniFrame) {\n \n\n var Utils = requtils.getUtils();\n\n /* Scene Begin */\n\n var Scene = function(_renkan) {\n this.renkan = _renkan;\n this.$ = $(\".Rk-Render\");\n this.representations = [];\n this.$.html(this.template(_renkan));\n this.onStatusChange();\n this.canvas_$ = this.$.find(\".Rk-Canvas\");\n this.labels_$ = this.$.find(\".Rk-Labels\");\n this.editor_$ = this.$.find(\".Rk-Editor\");\n this.notif_$ = this.$.find(\".Rk-Notifications\");\n paper.setup(this.canvas_$[0]);\n this.scale = 1;\n this.initialScale = 1;\n this.offset = paper.view.center;\n this.totalScroll = 0;\n this.mouse_down = false;\n this.click_target = null;\n this.selected_target = null;\n this.edge_layer = new paper.Layer();\n this.node_layer = new paper.Layer();\n this.buttons_layer = new paper.Layer();\n this.delete_list = [];\n this.redrawActive = true;\n \n var currentWidth = this.canvas_$.width();\n var currentHeight = this.canvas_$.height();\n\n if (_renkan.options.show_minimap) {\n this.minimap = {\n background_layer: new paper.Layer(),\n edge_layer: new paper.Layer(),\n node_layer: new paper.Layer(),\n node_group: new paper.Group(),\n size: new paper.Size( _renkan.options.minimap_width, _renkan.options.minimap_height )\n };\n\n this.minimap.background_layer.activate();\n this.minimap.topleft = paper.view.bounds.bottomRight.subtract(this.minimap.size);\n this.minimap.rectangle = new paper.Path.Rectangle(this.minimap.topleft.subtract([2,2]), this.minimap.size.add([4,4]));\n this.minimap.rectangle.fillColor = _renkan.options.minimap_background_color;\n this.minimap.rectangle.strokeColor = _renkan.options.minimap_border_color;\n this.minimap.rectangle.strokeWidth = 4;\n this.minimap.offset = new paper.Point(this.minimap.size.divide(2));\n this.minimap.scale = 0.1;\n\n this.minimap.node_layer.activate();\n this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);\n this.minimap.node_group.addChild(this.minimap.cliprectangle);\n this.minimap.node_group.clipped = true;\n this.minimap.miniframe = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);\n this.minimap.node_group.addChild(this.minimap.miniframe);\n this.minimap.miniframe.fillColor = '#c0c0ff';\n this.minimap.miniframe.opacity = 0.3;\n this.minimap.miniframe.strokeColor = '#000080';\n this.minimap.miniframe.strokeWidth = 3;\n this.minimap.miniframe.__representation = new MiniFrame(this, null);\n }\n\n this.throttledPaperDraw = _(function() {\n paper.view.draw();\n }).throttle(100);\n\n this.bundles = [];\n this.click_mode = false;\n\n var _this = this,\n _allowScroll = true,\n _originalScale = 1,\n _zooming = false,\n _lastTapX = 0,\n _lastTapY = 0;\n\n this.image_cache = {};\n this.icon_cache = {};\n\n ['edit', 'remove', 'link', 'enlarge', 'shrink', 'revert' ].forEach(function(imgname) {\n var img = new Image();\n img.src = _renkan.options.static_url + 'img/' + imgname + '.png';\n _this.icon_cache[imgname] = img;\n });\n\n var throttledMouseMove = _.throttle(function(_event, _isTouch) {\n _this.onMouseMove(_event, _isTouch);\n }, Utils._MOUSEMOVE_RATE);\n\n this.canvas_$.on({\n mousedown: function(_event) {\n _event.preventDefault();\n _this.onMouseDown(_event, false);\n },\n mousemove: function(_event) {\n _event.preventDefault();\n throttledMouseMove(_event, false);\n },\n mouseup: function(_event) {\n _event.preventDefault();\n _this.onMouseUp(_event, false);\n },\n mousewheel: function(_event, _delta) {\n if(_renkan.options.zoom_on_scroll) {\n _event.preventDefault();\n if (_allowScroll) {\n _this.onScroll(_event, _delta);\n }\n }\n },\n touchstart: function(_event) {\n _event.preventDefault();\n var _touches = _event.originalEvent.touches[0];\n if (\n _renkan.options.allow_double_click &&\n new Date() - _lastTap < Utils._DOUBLETAP_DELAY &&\n ( Math.pow(_lastTapX - _touches.pageX, 2) + Math.pow(_lastTapY - _touches.pageY, 2) < Utils._DOUBLETAP_DISTANCE )\n ) {\n _lastTap = 0;\n _this.onDoubleClick(_touches);\n } else {\n _lastTap = new Date();\n _lastTapX = _touches.pageX;\n _lastTapY = _touches.pageY;\n _originalScale = _this.scale;\n _zooming = false;\n _this.onMouseDown(_touches, true);\n }\n },\n touchmove: function(_event) {\n _event.preventDefault();\n _lastTap = 0;\n if (_event.originalEvent.touches.length === 1) {\n _this.onMouseMove(_event.originalEvent.touches[0], true);\n } else {\n if (!_zooming) {\n _this.onMouseUp(_event.originalEvent.touches[0], true);\n _this.click_target = null;\n _this.is_dragging = false;\n _zooming = true;\n }\n if (_event.originalEvent.scale === \"undefined\") {\n return;\n }\n var _newScale = _event.originalEvent.scale * _originalScale,\n _scaleRatio = _newScale / _this.scale,\n _newOffset = new paper.Point([\n _this.canvas_$.width(),\n _this.canvas_$.height()\n ]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.offset.multiply( _scaleRatio ));\n _this.setScale(_newScale, _newOffset);\n }\n },\n touchend: function(_event) {\n _event.preventDefault();\n _this.onMouseUp(_event.originalEvent.changedTouches[0], true);\n },\n dblclick: function(_event) {\n _event.preventDefault();\n if (_renkan.options.allow_double_click) {\n _this.onDoubleClick(_event);\n }\n },\n mouseleave: function(_event) {\n _event.preventDefault();\n _this.onMouseUp(_event, false);\n _this.click_target = null;\n _this.is_dragging = false;\n },\n dragover: function(_event) {\n _event.preventDefault();\n },\n dragenter: function(_event) {\n _event.preventDefault();\n _allowScroll = false;\n },\n dragleave: function(_event) {\n _event.preventDefault();\n _allowScroll = true;\n },\n drop: function(_event) {\n _event.preventDefault();\n _allowScroll = true;\n var res = {};\n _(_event.originalEvent.dataTransfer.types).each(function(t) {\n try {\n res[t] = _event.originalEvent.dataTransfer.getData(t);\n } catch(e) {}\n });\n var text = _event.originalEvent.dataTransfer.getData(\"Text\");\n if (typeof text === \"string\") {\n switch(text[0]) {\n case \"{\":\n case \"[\":\n try {\n var data = JSON.parse(text);\n _(res).extend(data);\n }\n catch(e) {\n if (!res[\"text/plain\"]) {\n res[\"text/plain\"] = text;\n }\n }\n break;\n case \"<\":\n if (!res[\"text/html\"]) {\n res[\"text/html\"] = text;\n }\n break;\n default:\n if (!res[\"text/plain\"]) {\n res[\"text/plain\"] = text;\n }\n }\n }\n var url = _event.originalEvent.dataTransfer.getData(\"URL\");\n if (url && !res[\"text/uri-list\"]) {\n res[\"text/uri-list\"] = url;\n }\n _this.dropData(res, _event.originalEvent);\n }\n });\n\n var bindClick = function(selector, fname) {\n _this.$.find(selector).click(function(evt) {\n _this[fname](evt);\n return false;\n });\n };\n\n bindClick(\".Rk-ZoomOut\", \"zoomOut\");\n bindClick(\".Rk-ZoomIn\", \"zoomIn\");\n bindClick(\".Rk-ZoomFit\", \"autoScale\");\n this.$.find(\".Rk-ZoomSave\").click( function() {\n // Save scale and offset point\n _this.renkan.project.addView( { zoom_level:_this.scale, offset:_this.offset } );\n });\n this.$.find(\".Rk-ZoomSetSaved\").click( function() {\n var view = _this.renkan.project.get(\"views\").last();\n if(view){\n _this.setScale(view.get(\"zoom_level\"), new paper.Point(view.get(\"offset\")));\n }\n });\n if(this.renkan.read_only && !isNaN(parseInt(this.renkan.options.default_view))){\n this.$.find(\".Rk-ZoomSetSaved\").show();\n }\n this.$.find(\".Rk-CurrentUser\").mouseenter(\n function() { _this.$.find(\".Rk-UserList\").slideDown(); }\n );\n this.$.find(\".Rk-Users\").mouseleave(\n function() { _this.$.find(\".Rk-UserList\").slideUp(); }\n );\n bindClick(\".Rk-FullScreen-Button\", \"fullScreen\");\n bindClick(\".Rk-AddNode-Button\", \"addNodeBtn\");\n bindClick(\".Rk-AddEdge-Button\", \"addEdgeBtn\");\n bindClick(\".Rk-Save-Button\", \"save\");\n bindClick(\".Rk-Open-Button\", \"open\");\n bindClick(\".Rk-Export-Button\", \"exportProject\");\n this.$.find(\".Rk-Bookmarklet-Button\")\n /*jshint scripturl:true */\n .attr(\"href\",\"javascript:\" + Utils._BOOKMARKLET_CODE(_renkan))\n .click(function(){\n _this.notif_$\n .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.\"))\n .fadeIn()\n .delay(5000)\n .fadeOut();\n return false;\n });\n this.$.find(\".Rk-TopBar-Button\").mouseover(function() {\n $(this).find(\".Rk-TopBar-Tooltip\").show();\n }).mouseout(function() {\n $(this).find(\".Rk-TopBar-Tooltip\").hide();\n });\n bindClick(\".Rk-Fold-Bins\", \"foldBins\");\n\n paper.view.onResize = function(_event) {\n \tvar _ratio,\n \t\tnewWidth= _this.canvas_$.parent().width(),\n\t\t\t\tnewHeight = _this.canvas_$.parent().height();\n \t\n paper.view._viewSize.height = _event.size.height = _this.canvas_$.parent().height();\n\n if (_this.minimap) {\n _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size);\n _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));\n _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);\n }\n \n if (newHeight < newWidth) {\n \t\t_ratio = (newHeight/currentHeight);\n } else {\n \t_ratio = (newWidth/currentWidth);\n }\n \n \t_this.resizeZoom((newWidth/currentWidth), (newHeight/currentHeight), _ratio);\n \t\n \tcurrentWidth = newWidth;\n \tcurrentHeight = newHeight;\n \t\n \t_this.redraw();\n \n };\n\n var _thRedraw = _.throttle(function() {\n _this.redraw();\n },50);\n\n this.addRepresentations(\"Node\", this.renkan.project.get(\"nodes\"));\n this.addRepresentations(\"Edge\", this.renkan.project.get(\"edges\"));\n this.renkan.project.on(\"change:title\", function() {\n _this.$.find(\".Rk-PadTitle\").val(_renkan.project.get(\"title\"));\n });\n\n this.$.find(\".Rk-PadTitle\").on(\"keyup input paste\", function() {\n _renkan.project.set({\"title\": $(this).val()});\n });\n\n var _thRedrawUsers = _.throttle(function() {\n _this.redrawUsers();\n }, 100);\n\n _thRedrawUsers();\n\n // register model events\n this.renkan.project.on(\"change:save_status\", function(){\n \tswitch (_this.renkan.project.get(\"save_status\")) {\n\t case 0: //clean\n\t \t_this.$.find(\".Rk-Save-Button\").removeClass(\"to-save\");\n\t \t_this.$.find(\".Rk-Save-Button\").removeClass(\"saving\");\n\t \t\t_this.$.find(\".Rk-Save-Button\").addClass(\"saved\");\n\t break;\n\t case 1: //dirty\n\t \t_this.$.find(\".Rk-Save-Button\").removeClass(\"saved\");\n\t \t_this.$.find(\".Rk-Save-Button\").removeClass(\"saving\");\n\t \t\t_this.$.find(\".Rk-Save-Button\").addClass(\"to-save\");\n\t break;\n\t case 2: //saving\n\t \t_this.$.find(\".Rk-Save-Button\").removeClass(\"saved\");\n\t \t_this.$.find(\".Rk-Save-Button\").removeClass(\"to-save\");\n\t \t\t_this.$.find(\".Rk-Save-Button\").addClass(\"saving\");\n\t break;\n \t}\n });\n \n this.renkan.project.on(\"change:loading_status\", function(){\n \tif (_this.renkan.project.get(\"loading_status\")){\n \t\tvar animate = _this.$.find(\".loader\").addClass(\"run\"); \n \t\tvar timer = setTimeout(function(){\n \t\t\t_this.$.find(\".loader\").hide(250);\n \t\t}, 3000); \n \t}\n });\n \n this.renkan.project.on(\"add:users remove:users\", _thRedrawUsers);\n\n this.renkan.project.on(\"add:views remove:views\", function(_node) {\n if(_this.renkan.project.get('views').length > 0) {\n _this.$.find(\".Rk-ZoomSetSaved\").show();\n }\n else {\n _this.$.find(\".Rk-ZoomSetSaved\").hide();\n }\n });\n\n this.renkan.project.on(\"add:nodes\", function(_node) {\n _this.addRepresentation(\"Node\", _node);\n if (!_this.renkan.project.get(\"loading_status\")){\n \t_thRedraw();\n }\n });\n this.renkan.project.on(\"add:edges\", function(_edge) {\n _this.addRepresentation(\"Edge\", _edge);\n if (!_this.renkan.project.get(\"loading_status\")){\n \t_thRedraw();\n }\n });\n this.renkan.project.on(\"change:title\", function(_model, _title) {\n var el = _this.$.find(\".Rk-PadTitle\");\n if (el.is(\"input\")) {\n if (el.val() !== _title) {\n el.val(_title);\n }\n } else {\n el.text(_title);\n }\n });\n\n if (_renkan.options.size_bug_fix) {\n var _delay = (\n typeof _renkan.options.size_bug_fix === \"number\" ?\n _renkan.options.size_bug_fix\n : 500\n );\n window.setTimeout(\n function() {\n _this.fixSize(true);\n },\n _delay\n );\n }\n\n if (_renkan.options.force_resize) {\n $(window).resize(function() {\n _this.fixSize(false);\n });\n }\n\n if (_renkan.options.show_user_list && _renkan.options.user_color_editable) {\n var $cpwrapper = this.$.find(\".Rk-Users .Rk-Edit-ColorPicker-Wrapper\"),\n $cplist = this.$.find(\".Rk-Users .Rk-Edit-ColorPicker\");\n\n $cpwrapper.hover(\n function(_e) {\n if (_this.isEditable()) {\n _e.preventDefault();\n $cplist.show();\n }\n },\n function(_e) {\n _e.preventDefault();\n $cplist.hide();\n }\n );\n\n $cplist.find(\"li\").mouseenter(\n function(_e) {\n if (_this.isEditable()) {\n _e.preventDefault();\n _this.$.find(\".Rk-CurrentUser-Color\").css(\"background\", $(this).attr(\"data-color\"));\n }\n }\n );\n }\n\n if (_renkan.options.show_search_field) {\n\n var lastval = '';\n\n this.$.find(\".Rk-GraphSearch-Field\").on(\"keyup change paste input\", function() {\n var $this = $(this),\n val = $this.val();\n if (val === lastval) {\n return;\n }\n lastval = val;\n if (val.length < 2) {\n _renkan.project.get(\"nodes\").each(function(n) {\n _this.getRepresentationByModel(n).unhighlight();\n });\n } else {\n var rxs = Utils.regexpFromTextOrArray(val);\n _renkan.project.get(\"nodes\").each(function(n) {\n if (rxs.test(n.get(\"title\")) || rxs.test(n.get(\"description\"))) {\n _this.getRepresentationByModel(n).highlight(rxs);\n } else {\n _this.getRepresentationByModel(n).unhighlight();\n }\n });\n }\n });\n }\n\n this.redraw();\n\n window.setInterval(function() {\n var _now = new Date().valueOf();\n _this.delete_list.forEach(function(d) {\n if (_now >= d.time) {\n var el = _renkan.project.get(\"nodes\").findWhere({\"delete_scheduled\":d.id});\n if (el) {\n project.removeNode(el);\n }\n el = _renkan.project.get(\"edges\").findWhere({\"delete_scheduled\":d.id});\n if (el) {\n project.removeEdge(el);\n }\n }\n });\n _this.delete_list = _this.delete_list.filter(function(d) {\n return _renkan.project.get(\"nodes\").findWhere({\"delete_scheduled\":d.id}) || _renkan.project.get(\"edges\").findWhere({\"delete_scheduled\":d.id});\n });\n }, 500);\n\n if (this.minimap) {\n window.setInterval(function() {\n _this.rescaleMinimap();\n }, 2000);\n }\n\n };\n\n _(Scene.prototype).extend({\n template: _.template(\n '<% if (options.show_top_bar) { %>
<% if (!options.editor_mode) { %>
<%- project.get(\"title\") || translate(\"Untitled project\")%>
' +\n '<% } else { %>
\" placeholder=\"<%-translate(\"Untitled project\")%>\" /><% } %>' +\n '<% if (options.show_user_list) { %>
<% if (options.show_user_color) { %>
<% if (options.user_color_editable) { %><% } %>' +\n '<% if (options.user_color_editable) { print(colorPicker) } %>
<% } %>
<unknown user><% } %>' +\n '<% if (options.home_button_url) {%>
\"><% } %>' +\n '<% if (options.show_fullscreen_button) { %>
<% } %>' +\n '<% if (options.editor_mode) { %>' +\n '<% if (options.show_addnode_button) { %>
<% } %>' +\n '<% if (options.show_addedge_button) { %>
<% } %>' +\n '<% if (options.show_export_button) { %>
<% } %>' +\n '<% if (options.show_save_button) { %>
<% } %>' +\n '<% if (options.show_open_button) { %>
<% } %>' +\n '<% if (options.show_bookmarklet) { %>
<% } %>' +\n '<% } else { %>' +\n '<% if (options.show_export_button) { %>
<% } %>' +\n '<% };' +\n 'if (options.show_search_field) { %>' +\n '
<% } %>
<% } %>' +\n '
Rk-Editing-Space-Full<% } %>\">' +\n '
' +\n '<% if (options.show_bins) { %>
«
<% } %>' +\n '
' +\n '
'\n ),\n fixSize: function(_autoscale) {\n var w = this.$.width(),\n h = this.$.height();\n if (this.renkan.options.show_top_bar) {\n h -= this.$.find(\".Rk-TopBar\").height();\n }\n this.canvas_$.attr({\n width: w,\n height: h\n });\n\n paper.view.viewSize = new paper.Size([w, h]);\n\n if (_autoscale) {\n // If _autoscale, we get the initial view (zoom+offset) set in the project datas.\n if(this.renkan.read_only && !isNaN(parseInt(this.renkan.options.default_view))){\n this.autoScale(this.renkan.project.get(\"views\")[parseInt(this.renkan.options.default_view)]);\n }\n else{\n this.autoScale();\n }\n }\n },\n drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {\n var _options = this.renkan.options,\n _startRads = _startAngle * Math.PI / 180,\n _endRads = _endAngle * Math.PI / 180,\n _img = this.icon_cache[_imgname],\n _startdx = - Math.sin(_startRads),\n _startdy = Math.cos(_startRads),\n _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,\n _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,\n _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,\n _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,\n _enddx = - Math.sin(_endRads),\n _enddy = Math.cos(_endRads),\n _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,\n _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,\n _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,\n _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,\n _centerR = (_inR + _outR) / 2,\n _centerRads = (_startRads + _endRads) / 2,\n _centerX = Math.cos(_centerRads) * _centerR,\n _centerY = Math.sin(_centerRads) * _centerR,\n _centerXIn = Math.cos(_centerRads) * _inR,\n _centerXOut = Math.cos(_centerRads) * _outR,\n _centerYIn = Math.sin(_centerRads) * _inR,\n _centerYOut = Math.sin(_centerRads) * _outR,\n _textX = Math.cos(_centerRads) * (_outR + 3),\n _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2;\n this.buttons_layer.activate();\n var _path = new paper.Path();\n _path.add([_startXIn, _startYIn]);\n _path.arcTo([_centerXIn, _centerYIn], [_endXIn, _endYIn]);\n _path.lineTo([_endXOut, _endYOut]);\n _path.arcTo([_centerXOut, _centerYOut], [_startXOut, _startYOut]);\n _path.fillColor = _options.buttons_background;\n _path.opacity = 0.5;\n _path.closed = true;\n _path.__representation = _repr;\n var _text = new paper.PointText(_textX,_textY);\n _text.characterStyle = {\n fontSize: _options.buttons_label_font_size,\n fillColor: _options.buttons_label_color\n };\n if (_textX > 2) {\n _text.paragraphStyle.justification = 'left';\n } else if (_textX < -2) {\n _text.paragraphStyle.justification = 'right';\n } else {\n _text.paragraphStyle.justification = 'center';\n }\n _text.visible = false;\n var _visible = false,\n _restPos = new paper.Point(-200, -200),\n _grp = new paper.Group([_path, _text]),\n _delta = _grp.position,\n _imgdelta = new paper.Point([_centerX, _centerY]),\n _currentPos = new paper.Point(0,0);\n _text.content = _caption;\n _grp.visible = false;\n _grp.position = _restPos;\n var _res = {\n show: function() {\n _visible = true;\n _grp.position = _currentPos.add(_delta);\n _grp.visible = true;\n },\n moveTo: function(_point) {\n _currentPos = _point;\n if (_visible) {\n _grp.position = _point.add(_delta);\n }\n },\n hide: function() {\n _visible = false;\n _grp.visible = false;\n _grp.position = _restPos;\n },\n select: function() {\n _path.opacity = 0.8;\n _text.visible = true;\n },\n unselect: function() {\n _path.opacity = 0.5;\n _text.visible = false;\n },\n destroy: function() {\n _grp.remove();\n }\n };\n var showImage = function() {\n var _raster = new paper.Raster(_img);\n _raster.position = _imgdelta.add(_grp.position).subtract(_delta);\n _raster.locked = true; // Disable mouse events on icon\n _grp.addChild(_raster);\n };\n if (_img.width) {\n showImage();\n } else {\n $(_img).on(\"load\",showImage);\n }\n\n return _res;\n },\n addToBundles: function(_edgeRepr) {\n var _bundle = _(this.bundles).find(function(_bundle) {\n return (\n ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation ) ||\n ( _bundle.from === _edgeRepr.to_representation && _bundle.to === _edgeRepr.from_representation )\n );\n });\n if (typeof _bundle !== \"undefined\") {\n _bundle.edges.push(_edgeRepr);\n } else {\n _bundle = {\n from: _edgeRepr.from_representation,\n to: _edgeRepr.to_representation,\n edges: [ _edgeRepr ],\n getPosition: function(_er) {\n var _dir = (_er.from_representation === this.from) ? 1 : -1;\n return _dir * ( _(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 );\n }\n };\n this.bundles.push(_bundle);\n }\n return _bundle;\n },\n isEditable: function() {\n return (this.renkan.options.editor_mode && !this.renkan.read_only);\n },\n onStatusChange: function() {\n var savebtn = this.$.find(\".Rk-Save-Button\"),\n tip = savebtn.find(\".Rk-TopBar-Tooltip-Contents\");\n if (this.renkan.read_only) {\n savebtn.removeClass(\"disabled Rk-Save-Online\").addClass(\"Rk-Save-ReadOnly\");\n tip.text(this.renkan.translate(\"Connection lost\"));\n } else {\n if (this.renkan.options.manual_save) {\n savebtn.removeClass(\"Rk-Save-ReadOnly Rk-Save-Online\");\n tip.text(this.renkan.translate(\"Save Project\"));\n } else {\n savebtn.removeClass(\"disabled Rk-Save-ReadOnly\").addClass(\"Rk-Save-Online\");\n tip.text(this.renkan.translate(\"Auto-save enabled\"));\n }\n }\n this.redrawUsers();\n },\n setScale: function(_newScale, _offset) {\n if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) {\n this.scale = _newScale;\n if (_offset) {\n this.offset = _offset;\n }\n this.redraw();\n }\n },\n autoScale: function(force_view) {\n var nodes = this.renkan.project.get(\"nodes\");\n if (nodes.length > 1) {\n var _xx = nodes.map(function(_node) { return _node.get(\"position\").x; }),\n _yy = nodes.map(function(_node) { return _node.get(\"position\").y; }),\n _minx = Math.min.apply(Math, _xx),\n _miny = Math.min.apply(Math, _yy),\n _maxx = Math.max.apply(Math, _xx),\n _maxy = Math.max.apply(Math, _yy);\n var _scale = Math.min( (paper.view.size.width - 2 * this.renkan.options.autoscale_padding) / (_maxx - _minx), (paper.view.size.height - 2 * this.renkan.options.autoscale_padding) / (_maxy - _miny));\n this.initialScale = _scale;\n // Override calculated scale if asked\n if((typeof force_view !== \"undefined\") && parseFloat(force_view.zoom_level)>0 && parseFloat(force_view.offset.x)>0 && parseFloat(force_view.offset.y)>0){\n this.setScale(parseFloat(force_view.zoom_level), new paper.Point(parseFloat(force_view.offset.x), parseFloat(force_view.offset.y)));\n }\n else{\n this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)));\n }\n }\n if (nodes.length === 1) {\n this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get(\"position\").x, nodes.at(0).get(\"position\").y])));\n }\n },\n redrawMiniframe: function() {\n var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))),\n bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight));\n this.minimap.miniframe.fitBounds(topleft, bottomright);\n },\n rescaleMinimap: function() {\n var nodes = this.renkan.project.get(\"nodes\");\n if (nodes.length > 1) {\n var _xx = nodes.map(function(_node) { return _node.get(\"position\").x; }),\n _yy = nodes.map(function(_node) { return _node.get(\"position\").y; }),\n _minx = Math.min.apply(Math, _xx),\n _miny = Math.min.apply(Math, _yy),\n _maxx = Math.max.apply(Math, _xx),\n _maxy = Math.max.apply(Math, _yy);\n var _scale = Math.min(\n this.scale * 0.8 * this.renkan.options.minimap_width / paper.view.bounds.width,\n this.scale * 0.8 * this.renkan.options.minimap_height / paper.view.bounds.height,\n ( this.renkan.options.minimap_width - 2 * this.renkan.options.minimap_padding ) / (_maxx - _minx),\n ( this.renkan.options.minimap_height - 2 * this.renkan.options.minimap_padding ) / (_maxy - _miny)\n );\n this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale));\n this.minimap.scale = _scale;\n }\n if (nodes.length === 1) {\n this.minimap.scale = 0.1;\n this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get(\"position\").x, nodes.at(0).get(\"position\").y]).multiply(this.minimap.scale));\n }\n this.redraw();\n },\n toPaperCoords: function(_point) {\n return _point.multiply(this.scale).add(this.offset);\n },\n toMinimapCoords: function(_point) {\n return _point.multiply(this.minimap.scale).add(this.minimap.offset).add(this.minimap.topleft);\n },\n toModelCoords: function(_point) {\n return _point.subtract(this.offset).divide(this.scale);\n },\n addRepresentation: function(_type, _model) {\n var RendererType = requtils.getRenderer()[_type];\n var _repr = new RendererType(this, _model);\n this.representations.push(_repr);\n return _repr;\n },\n addRepresentations: function(_type, _collection) {\n var _this = this;\n _collection.forEach(function(_model) {\n _this.addRepresentation(_type, _model);\n });\n },\n userTemplate: _.template(\n '
;\"><%=name%>'\n ),\n redrawUsers: function() {\n if (!this.renkan.options.show_user_list) {\n return;\n }\n var allUsers = [].concat((this.renkan.project.current_user_list || {}).models || [], (this.renkan.project.get(\"users\") || {}).models || []),\n ulistHtml = '',\n $userpanel = this.$.find(\".Rk-Users\"),\n $name = $userpanel.find(\".Rk-CurrentUser-Name\"),\n $cpitems = $userpanel.find(\".Rk-Edit-ColorPicker li\"),\n $colorsquare = $userpanel.find(\".Rk-CurrentUser-Color\"),\n _this = this;\n $name.off(\"click\").text(this.renkan.translate(\"
\"));\n $cpitems.off(\"mouseleave click\");\n allUsers.forEach(function(_user) {\n if (_user.get(\"_id\") === _this.renkan.current_user) {\n $name.text(_user.get(\"title\"));\n $colorsquare.css(\"background\", _user.get(\"color\"));\n if (_this.isEditable()) {\n\n if (_this.renkan.options.user_name_editable) {\n $name.click(function() {\n var $this = $(this),\n $input = $('').val(_user.get(\"title\")).blur(function() {\n _user.set(\"title\", $(this).val());\n _this.redrawUsers();\n _this.redraw();\n });\n $this.empty().html($input);\n $input.select();\n });\n }\n\n if (_this.renkan.options.user_color_editable) {\n $cpitems.click(\n function(_e) {\n _e.preventDefault();\n if (_this.isEditable()) {\n _user.set(\"color\", $(this).attr(\"data-color\"));\n }\n $(this).parent().hide();\n }\n ).mouseleave(function() {\n $colorsquare.css(\"background\", _user.get(\"color\"));\n });\n }\n }\n\n } else {\n ulistHtml += _this.userTemplate({\n name: _user.get(\"title\"),\n background: _user.get(\"color\")\n });\n }\n });\n $userpanel.find(\".Rk-UserList\").html(ulistHtml);\n },\n removeRepresentation: function(_representation) {\n _representation.destroy();\n this.representations = _(this.representations).reject(\n function(_repr) {\n return _repr === _representation;\n }\n );\n },\n getRepresentationByModel: function(_model) {\n if (!_model) {\n return undefined;\n }\n return _(this.representations).find(function(_repr) {\n return _repr.model === _model;\n });\n },\n removeRepresentationsOfType: function(_type) {\n var _representations = _(this.representations).filter(function(_repr) {\n return _repr.type === _type;\n }),\n _this = this;\n _(_representations).each(function(_repr) {\n _this.removeRepresentation(_repr);\n });\n },\n highlightModel: function(_model) {\n var _repr = this.getRepresentationByModel(_model);\n if (_repr) {\n _repr.highlight();\n }\n },\n unhighlightAll: function(_model) {\n _(this.representations).each(function(_repr) {\n _repr.unhighlight();\n });\n },\n unselectAll: function(_model) {\n _(this.representations).each(function(_repr) {\n _repr.unselect();\n });\n },\n redraw: function() {\n if(! this.redrawActive ) {\n return;\n }\n _(this.representations).each(function(_representation) {\n _representation.redraw(true);\n });\n if (this.minimap) {\n this.redrawMiniframe();\n }\n paper.view.draw();\n },\n addTempEdge: function(_from, _point) {\n var _tmpEdge = this.addRepresentation(\"TempEdge\",null);\n _tmpEdge.end_pos = _point;\n _tmpEdge.from_representation = _from;\n _tmpEdge.redraw();\n this.click_target = _tmpEdge;\n },\n findTarget: function(_hitResult) {\n if (_hitResult && typeof _hitResult.item.__representation !== \"undefined\") {\n var _newTarget = _hitResult.item.__representation;\n if (this.selected_target !== _hitResult.item.__representation) {\n if (this.selected_target) {\n this.selected_target.unselect(_newTarget);\n }\n _newTarget.select(this.selected_target);\n this.selected_target = _newTarget;\n }\n } else {\n if (this.selected_target) {\n this.selected_target.unselect();\n }\n this.selected_target = null;\n }\n },\n paperShift: function(_delta) {\n this.offset = this.offset.add(_delta);\n this.redraw();\n },\n onMouseMove: function(_event) {\n var _off = this.canvas_$.offset(),\n _point = new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ]),\n _delta = _point.subtract(this.last_point);\n this.last_point = _point;\n if (!this.is_dragging && this.mouse_down && _delta.length > Utils._MIN_DRAG_DISTANCE) {\n this.is_dragging = true;\n }\n var _hitResult = paper.project.hitTest(_point);\n if (this.is_dragging) {\n if (this.click_target && typeof this.click_target.paperShift === \"function\") {\n this.click_target.paperShift(_delta);\n } else {\n this.paperShift(_delta);\n }\n } else {\n this.findTarget(_hitResult);\n }\n paper.view.draw();\n },\n onMouseDown: function(_event, _isTouch) {\n var _off = this.canvas_$.offset(),\n _point = new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ]);\n this.last_point = _point;\n this.mouse_down = true;\n if (!this.click_target || this.click_target.type !== \"Temp-edge\") {\n this.removeRepresentationsOfType(\"editor\");\n this.is_dragging = false;\n var _hitResult = paper.project.hitTest(_point);\n if (_hitResult && typeof _hitResult.item.__representation !== \"undefined\") {\n this.click_target = _hitResult.item.__representation;\n this.click_target.mousedown(_event, _isTouch);\n } else {\n this.click_target = null;\n if (this.isEditable() && this.click_mode === Utils._CLICKMODE_ADDNODE) {\n var _coords = this.toModelCoords(_point),\n _data = {\n id: Utils.getUID('node'),\n created_by: this.renkan.current_user,\n position: {\n x: _coords.x,\n y: _coords.y\n }\n };\n _node = this.renkan.project.addNode(_data);\n this.getRepresentationByModel(_node).openEditor();\n }\n }\n }\n if (this.click_mode) {\n if (this.isEditable() && this.click_mode === Utils._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === \"Node\") {\n this.removeRepresentationsOfType(\"editor\");\n this.addTempEdge(this.click_target, _point);\n this.click_mode = Utils._CLICKMODE_ENDEDGE;\n this.notif_$.fadeOut(function() {\n $(this).html(this.renkan.translate(\"Click on a second node to complete the edge\")).fadeIn();\n });\n } else {\n this.notif_$.hide();\n this.click_mode = false;\n }\n }\n paper.view.draw();\n },\n onMouseUp: function(_event, _isTouch) {\n this.mouse_down = false;\n if (this.click_target) {\n var _off = this.canvas_$.offset();\n this.click_target.mouseup(\n {\n point: new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ])\n },\n _isTouch\n );\n } else {\n this.click_target = null;\n this.is_dragging = false;\n if (_isTouch) {\n this.unselectAll();\n }\n }\n paper.view.draw();\n },\n onScroll: function(_event, _scrolldelta) {\n this.totalScroll += _scrolldelta;\n if (Math.abs(this.totalScroll) >= 1) {\n var _off = this.canvas_$.offset(),\n _delta = new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );\n if (this.totalScroll > 0) {\n this.setScale( this.scale * Math.SQRT2, this.offset.subtract(_delta) );\n } else {\n this.setScale( this.scale * Math.SQRT1_2, this.offset.add(_delta.divide(Math.SQRT2)));\n }\n this.totalScroll = 0;\n }\n },\n onDoubleClick: function(_event) {\n if (!this.isEditable()) {\n return;\n }\n var _off = this.canvas_$.offset(),\n _point = new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ]);\n var _hitResult = paper.project.hitTest(_point);\n if (this.isEditable() && (!_hitResult || typeof _hitResult.item.__representation === \"undefined\")) {\n var _coords = this.toModelCoords(_point),\n _data = {\n id: Utils.getUID('node'),\n created_by: this.renkan.current_user,\n position: {\n x: _coords.x,\n y: _coords.y\n }\n },\n _node = this.renkan.project.addNode(_data);\n this.getRepresentationByModel(_node).openEditor();\n }\n paper.view.draw();\n },\n defaultDropHandler: function(_data) {\n var newNode = {};\n var snippet = \"\";\n switch(_data[\"text/x-iri-specific-site\"]) {\n case \"twitter\":\n snippet = $('').html(_data[\"text/x-iri-selected-html\"]);\n var tweetdiv = snippet.find(\".tweet\");\n newNode.title = this.renkan.translate(\"Tweet by \") + tweetdiv.attr(\"data-name\");\n newNode.uri = \"http://twitter.com/\" + tweetdiv.attr(\"data-screen-name\") + \"/status/\" + tweetdiv.attr(\"data-tweet-id\");\n newNode.image = tweetdiv.find(\".avatar\").attr(\"src\");\n newNode.description = tweetdiv.find(\".js-tweet-text:first\").text();\n break;\n case \"google\":\n snippet = $('
').html(_data[\"text/x-iri-selected-html\"]);\n newNode.title = snippet.find(\"h3:first\").text().trim();\n newNode.uri = snippet.find(\"h3 a\").attr(\"href\");\n newNode.description = snippet.find(\".st:first\").text().trim();\n break;\n default:\n if (_data[\"text/x-iri-source-uri\"]) {\n newNode.uri = _data[\"text/x-iri-source-uri\"];\n }\n }\n if (_data[\"text/plain\"] || _data[\"text/x-iri-selected-text\"]) {\n newNode.description = (_data[\"text/plain\"] || _data[\"text/x-iri-selected-text\"]).replace(/[\\s\\n]+/gm,' ').trim();\n }\n if (_data[\"text/html\"] || _data[\"text/x-iri-selected-html\"]) {\n snippet = $('
').html(_data[\"text/html\"] || _data[\"text/x-iri-selected-html\"]);\n var _svgimgs = snippet.find(\"image\");\n if (_svgimgs.length) {\n newNode.image = _svgimgs.attr(\"xlink:href\");\n }\n var _svgpaths = snippet.find(\"path\");\n if (_svgpaths.length) {\n newNode.clipPath = _svgpaths.attr(\"d\");\n }\n var _imgs = snippet.find(\"img\");\n if (_imgs.length) {\n newNode.image = _imgs[0].src;\n }\n var _as = snippet.find(\"a\");\n if (_as.length) {\n newNode.uri = _as[0].href;\n }\n newNode.title = snippet.find(\"[title]\").attr(\"title\") || newNode.title;\n newNode.description = snippet.text().replace(/[\\s\\n]+/gm,' ').trim();\n }\n if (_data[\"text/uri-list\"]) {\n newNode.uri = _data[\"text/uri-list\"];\n }\n if (_data[\"text/x-moz-url\"] && !newNode.title) {\n newNode.title = (_data[\"text/x-moz-url\"].split(\"\\n\")[1] || \"\").trim();\n if (newNode.title === newNode.uri) {\n newNode.title = false;\n }\n }\n if (_data[\"text/x-iri-source-title\"] && !newNode.title) {\n newNode.title = _data[\"text/x-iri-source-title\"];\n }\n if (_data[\"text/html\"] || _data[\"text/x-iri-selected-html\"]) {\n snippet = $('
').html(_data[\"text/html\"] || _data[\"text/x-iri-selected-html\"]);\n newNode.image = snippet.find(\"[data-image]\").attr(\"data-image\") || newNode.image;\n newNode.uri = snippet.find(\"[data-uri]\").attr(\"data-uri\") || newNode.uri;\n newNode.title = snippet.find(\"[data-title]\").attr(\"data-title\") || newNode.title;\n newNode.description = snippet.find(\"[data-description]\").attr(\"data-description\") || newNode.description;\n newNode.clipPath = snippet.find(\"[data-clip-path]\").attr(\"data-clip-path\") || newNode.clipPath;\n }\n\n if (!newNode.title) {\n newNode.title = this.renkan.translate(\"Dragged resource\");\n }\n var fields = [\"title\", \"description\", \"uri\", \"image\"];\n for (var i = 0; i < fields.length; i++) {\n var f = fields[i];\n if (_data[\"text/x-iri-\" + f] || _data[f]) {\n newNode[f] = _data[\"text/x-iri-\" + f] || _data[f];\n }\n if (newNode[f] === \"none\" || newNode[f] === \"null\") {\n newNode[f] = undefined;\n }\n }\n\n if(typeof this.renkan.options.drop_enhancer === \"function\"){\n newNode = this.renkan.options.drop_enhancer(newNode, _data);\n }\n\n return newNode;\n\n },\n dropData: function(_data, _event) {\n if (!this.isEditable()) {\n return;\n }\n if (_data[\"text/json\"] || _data[\"application/json\"]) {\n try {\n var jsondata = JSON.parse(_data[\"text/json\"] || _data[\"application/json\"]);\n _(_data).extend(jsondata);\n }\n catch(e) {}\n }\n\n var newNode = (typeof this.renkan.options.drop_handler === \"undefined\")?this.defaultDropHandler(_data):this.renkan.options.drop_handler(_data);\n\n var _off = this.canvas_$.offset(),\n _point = new paper.Point([\n _event.pageX - _off.left,\n _event.pageY - _off.top\n ]),\n _coords = this.toModelCoords(_point),\n _nodedata = {\n id: Utils.getUID('node'),\n created_by: this.renkan.current_user,\n uri: newNode.uri || \"\",\n title: newNode.title || \"\",\n description: newNode.description || \"\",\n image: newNode.image || \"\",\n color: newNode.color || undefined,\n clip_path: newNode.clipPath || undefined,\n position: {\n x: _coords.x,\n y: _coords.y\n }\n };\n var _node = this.renkan.project.addNode(_nodedata),\n _repr = this.getRepresentationByModel(_node);\n if (_event.type === \"drop\") {\n _repr.openEditor();\n }\n },\n fullScreen: function() {\n var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,\n _el = this.renkan.$[0],\n _requestMethods = [\"requestFullScreen\",\"mozRequestFullScreen\",\"webkitRequestFullScreen\"],\n _cancelMethods = [\"cancelFullScreen\",\"mozCancelFullScreen\",\"webkitCancelFullScreen\"],\n i;\n if (_isFull) {\n for (i = 0; i < _cancelMethods.length; i++) {\n if (typeof document[_cancelMethods[i]] === \"function\") {\n document[_cancelMethods[i]]();\n break;\n }\n }\n var widthAft = this.$.width();\n var heightAft = this.$.height();\n \n if (this.renkan.options.show_top_bar) {\n \theightAft -= this.$.find(\".Rk-TopBar\").height();\n }\n if (this.renkan.options.show_bins && (this.renkan.$.find(\".Rk-Bins\").position().left > 0)) {\n \twidthAft -= this.renkan.$.find(\".Rk-Bins\").width();\n }\n \n this.canvas_$.attr({\n \twidth: widthAft,\n \theight: heightAft\n });\n \n paper.view.viewSize = new paper.Size([this.canvas_$.width(), this.canvas_$.height()]);\n \n } else {\n for (i = 0; i < _requestMethods.length; i++) {\n if (typeof _el[_requestMethods[i]] === \"function\") {\n _el[_requestMethods[i]]();\n break;\n }\n }\n }\n },\n zoomOut: function() {\n var _newScale = this.scale * Math.SQRT1_2,\n _offset = new paper.Point([\n this.canvas_$.width(),\n this.canvas_$.height()\n ]).multiply( 0.5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 ));\n this.setScale( _newScale, _offset );\n },\n zoomIn: function() {\n var _newScale = this.scale * Math.SQRT2,\n _offset = new paper.Point([\n this.canvas_$.width(),\n this.canvas_$.height()\n ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));\n this.setScale( _newScale, _offset );\n },\n resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) {\n \tvar _newScale = this.scale * _ratio,\n \t_offset = new paper.Point([\n (this.offset.x * _scaleWidth),\n (this.offset.y * _scaleHeight)\n ]);\n this.setScale( _newScale, _offset );\n },\n addNodeBtn: function() {\n if (this.click_mode === Utils._CLICKMODE_ADDNODE) {\n this.click_mode = false;\n this.notif_$.hide();\n } else {\n this.click_mode = Utils._CLICKMODE_ADDNODE;\n this.notif_$.text(this.renkan.translate(\"Click on the background canvas to add a node\")).fadeIn();\n }\n return false;\n },\n addEdgeBtn: function() {\n if (this.click_mode === Utils._CLICKMODE_STARTEDGE || this.click_mode === Utils._CLICKMODE_ENDEDGE) {\n this.click_mode = false;\n this.notif_$.hide();\n } else {\n this.click_mode = Utils._CLICKMODE_STARTEDGE;\n this.notif_$.text(this.renkan.translate(\"Click on a first node to start the edge\")).fadeIn();\n }\n return false;\n },\n exportProject: function() {\n var projectJSON = this.renkan.project.toJSON(),\n downloadLink = document.createElement(\"a\"),\n projectId = projectJSON.id,\n fileNameToSaveAs = projectId + \".json\";\n\n // clean ids\n delete projectJSON.id;\n delete projectJSON._id;\n delete projectJSON.space_id;\n\n var objId;\n var idsMap = {};\n\n _.each(projectJSON.nodes, function(e,i,l) {\n objId = e.id || e._id;\n delete e._id;\n delete e.id;\n idsMap[objId] = e['@id'] = Utils.getUUID4();\n });\n _.each(projectJSON.edges, function(e,i,l) {\n delete e._id;\n delete e.id;\n e.to = idsMap[e.to];\n e.from = idsMap[e.from];\n });\n _.each(projectJSON.views, function(e,i,l) {\n objId = e.id || e._id;\n delete e._id;\n delete e.id;\n });\n projectJSON.users = [];\n\n var projectJSONStr = JSON.stringify(projectJSON, null, 2);\n var blob = new Blob([projectJSONStr], {type: \"application/json;charset=utf-8\"});\n filesaver(blob,fileNameToSaveAs);\n\n },\n foldBins: function() {\n var foldBinsButton = this.$.find(\".Rk-Fold-Bins\"),\n bins = this.renkan.$.find(\".Rk-Bins\");\n var _this = this,\n \tsizeBef = _this.canvas_$.width(),\n \tsizeAft;\n if (bins.position().left < 0) {\n bins.animate({left: 0},250);\n this.$.animate({left: 300},250,function() {\n var w = _this.$.width();\n paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);\n });\n if ((sizeBef - bins.width()) < bins.height()){\n \tsizeAft = sizeBef;\n } else {\n \tsizeAft = sizeBef - bins.width();\n }\n foldBinsButton.html(\"«\");\n } else {\n bins.animate({left: -300},250);\n this.$.animate({left: 0},250,function() {\n var w = _this.$.width();\n paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);\n });\n sizeAft = sizeBef+300;\n foldBinsButton.html(\"»\");\n }\n _this.resizeZoom(1, 1, (sizeAft/sizeBef));\n },\n save: function() { },\n open: function() { }\n });\n\n /* Scene End */\n\n return Scene;\n\n});\n\n\n//Load modules and use them\nif( typeof require.config === \"function\" ) {\n require.config({\n paths: {\n 'jquery':'../lib/jquery/jquery',\n 'underscore':'../lib/underscore/underscore',\n 'filesaver' :'../lib/FileSaver/FileSaver',\n 'requtils':'require-utils'\n }\n });\n}\n\nrequire(['renderer/baserepresentation',\n 'renderer/basebutton',\n 'renderer/noderepr',\n 'renderer/edge',\n 'renderer/tempedge',\n 'renderer/baseeditor',\n 'renderer/nodeeditor',\n 'renderer/edgeeditor',\n 'renderer/nodebutton',\n 'renderer/nodeeditbutton',\n 'renderer/noderemovebutton',\n 'renderer/noderevertbutton',\n 'renderer/nodelinkbutton',\n 'renderer/nodeenlargebutton',\n 'renderer/nodeshrinkbutton',\n 'renderer/edgeeditbutton',\n 'renderer/edgeremovebutton',\n 'renderer/edgerevertbutton',\n 'renderer/miniframe',\n 'renderer/scene'\n ], function(BaseRepresentation, BaseButton, NodeRepr, Edge, TempEdge, BaseEditor, NodeEditor, EdgeEditor, NodeButton, NodeEditButton, NodeRemoveButton, NodeRevertButton, NodeLinkButton, NodeEnlargeButton, NodeShrinkButton, EdgeEditButton, EdgeRemoveButton, EdgeRevertButton, MiniFrame, Scene){\n\n \n\n var Rkns = window.Rkns;\n\n if(typeof Rkns.Renderer === \"undefined\"){\n Rkns.Renderer = {};\n }\n var Renderer = Rkns.Renderer;\n\n Renderer._BaseRepresentation = BaseRepresentation;\n Renderer._BaseButton = BaseButton;\n Renderer.Node = NodeRepr;\n Renderer.Edge = Edge;\n Renderer.TempEdge = TempEdge;\n Renderer._BaseEditor = BaseEditor;\n Renderer.NodeEditor = NodeEditor;\n Renderer.EdgeEditor = EdgeEditor;\n Renderer._NodeButton = NodeButton;\n Renderer.NodeEditButton = NodeEditButton;\n Renderer.NodeRemoveButton = NodeRemoveButton;\n Renderer.NodeRevertButton = NodeRevertButton;\n Renderer.NodeLinkButton = NodeLinkButton;\n Renderer.NodeEnlargeButton = NodeEnlargeButton;\n Renderer.NodeShrinkButton = NodeShrinkButton;\n Renderer.EdgeEditButton = EdgeEditButton;\n Renderer.EdgeRemoveButton = EdgeRemoveButton;\n Renderer.EdgeRevertButton = EdgeRevertButton;\n Renderer.MiniFrame = MiniFrame;\n Renderer.Scene = Scene;\n\n startRenkan();\n});\n\ndefine(\"main-renderer\", function(){});\n\n"]}
\ No newline at end of file