').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 _getStrokeWidth: function() {\n var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1;\n return this.options.edge_stroke_width + (thickness-1) * (this.options.edge_stroke_max_width - this.options.edge_stroke_width) / (this.options.edge_stroke_witdh_scale-1);\n },\n _getSelectedStrokeWidth: function() {\n var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1;\n return this.options.selected_edge_stroke_width + (thickness-1) * (this.options.selected_edge_stroke_max_width - this.options.selected_edge_stroke_width) / (this.options.edge_stroke_witdh_scale-1);\n },\n _getArrowScale: function() {\n var thickness = (this.model.has('style') && this.model.get('style').thickness) || 1;\n return 1 + (thickness-1) * ((this.options.edge_arrow_max_width / this.options.edge_arrow_width) - 1) / (this.options.edge_stroke_witdh_scale-1);\n },\n redraw: function() {\n var from = this.model.get(\"from\"),\n to = this.model.get(\"to\");\n if (!from || !to || (this.hidden && !this.ghost)) {\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 (this.from_representation.hidden && !this.from_representation.ghost) ||\n (this.to_representation.hidden && !this.to_representation.ghost)) {\n this.hide();\n return;\n }\n var _strokeWidth = this._getStrokeWidth(),\n _arrow_scale = this._getArrowScale(),\n _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 + 0.5 * _arrow_scale * this.options.edge_arrow_width),\n _handle = _v.divide(3),\n _color = (this.highlighted && this.options.highlighted_edge_color) ||\n (this.model.has(\"style\") && this.model.get(\"style\").color) ||\n (this.model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan)).get(\"color\"),\n _dash = (this.model.has(\"style\") && this.model.get(\"style\").dash) ? this.options.default_dash_array : null,\n _opacity;\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 = this.ghost ? this.options.ghost_opacity : 1;\n this.line.dashArray = null;\n }\n\n var old_act_btn = this.active_buttons;\n\n this.arrow.visible =\n (this.model.has(\"style\") && this.model.get(\"style\").arrow) ||\n !this.model.has(\"style\") ||\n typeof this.model.get(\"style\").arrow === 'undefined';\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.strokeWidth = _strokeWidth;\n this.line.strokeColor = _color;\n this.line.dashArray = _dash;\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.scale(_arrow_scale / this.arrow_scale);\n this.arrow_scale = _arrow_scale;\n this.arrow.fillColor = _color;\n this.arrow.opacity = _opacity;\n this.arrow.rotate(_a - this.arrow_angle, this.arrow.bounds.center);\n this.arrow.position = this.paper_coords;\n\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 if (typeof this.highlighted === \"object\") {\n this.text.html(this.highlighted.replace(_(_text).escape(),'
'));\n } else {\n this.text.text(_text);\n }\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 hide: function(){\n this.hidden = true;\n this.ghost = false;\n\n this.text.hide();\n this.line.visible = false;\n this.arrow.visible = false;\n this.minimap_line.visible = false;\n },\n show: function(ghost){\n this.ghost = ghost;\n if (this.ghost) {\n this.text.css('opacity', 0.3);\n this.line.opacity = 0.3;\n this.arrow.opacity = 0.3;\n this.minimap_line.opacity = 0.3;\n } else {\n this.hidden = false;\n\n this.text.css('opacity', 1);\n this.line.opacity = 1;\n this.arrow.opacity = 1;\n this.minimap_line.opacity = 1;\n }\n this.text.show();\n this.line.visible = true;\n this.arrow.visible = true;\n this.minimap_line.visible = true;\n this.redraw();\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._getSelectedStrokeWidth();\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 if (this.hidden){\n this.renderer.removeRepresentationsOfType(\"editor\");\n }\n this.line.strokeWidth = this._getStrokeWidth();\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 highlight: function(textToReplace) {\n var hlvalue = textToReplace || true;\n if (this.highlighted === hlvalue) {\n return;\n }\n this.highlighted = hlvalue;\n this.redraw();\n this.renderer.throttledPaperDraw();\n },\n unhighlight: function() {\n if (!this.highlighted) {\n return;\n }\n this.highlighted = false;\n this.redraw();\n this.renderer.throttledPaperDraw();\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 = _.reject(this.bundle.edges, function(_edge) {\n return _this === _edge;\n });\n }\n }).value();\n\n return Edge;\n\n});\n\n\n\ndefine('renderer/tempedge',['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {\n 'use strict';\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 this.origin = Utils.OriginEnum.NONE;\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 origin: this.origin\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 }).value();\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 'use strict';\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 = _.map(_.range(8), 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 = this.options.tooltip_opacity;\n this.editor_$ = $('
')\n .appendTo(this.renderer.editor_$)\n .css({\n position: \"absolute\",\n opacity: this.options.tooltip_opacity\n })\n .hide();\n },\n destroy: function() {\n this.editor_block.remove();\n this.editor_$.remove();\n }\n }).value();\n\n /* _BaseEditor End */\n\n return _BaseEditor;\n\n});\n\n\ndefine('renderer/nodeeditor',['jquery', 'underscore', 'requtils', 'renderer/baseeditor', 'renderer/shapebuilder', 'ckeditor-core'], function ($, _, requtils, BaseEditor, ShapeBuilder, CKEditor) {\n 'use strict';\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 _init: function() {\n BaseEditor.prototype._init.apply(this);\n this.template = this.options.templates['templates/nodeeditor.html'];\n //this.templates['default']= this.options.templates['templates/nodeeditor.html'];\n //fusionner avec this.options.node_editor_templates\n this.readOnlyTemplate = this.options.node_editor_templates;\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[_model.get(\"type\")] || this.readOnlyTemplate[\"default\"]),\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 _id: _model.get(\"_id\"),\n has_creator: !!_model.get(\"created_by\"),\n title: _model.get(\"title\"),\n uri: _model.get(\"uri\"),\n type: _model.get(\"type\") || \"default\",\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.has(\"style\") && _model.get(\"style\").color) || _created_by.get(\"color\"),\n thickness: (_model.has(\"style\") && _model.get(\"style\").thickness) || 1,\n dash: _model.has(\"style\") && _model.get(\"style\").dash ? \"checked\" : \"\",\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 shapes : _(ShapeBuilder.builders).omit('svg').keys().value(),\n types : _(this.options.node_editor_templates).keys().value(),\n }));\n this.redraw();\n var _this = this,\n editorInstance = (this.renderer.isEditable() && _this.options.show_node_editor_description_richtext) ?\n CKEditor.inline(\"Rk-Edit-Description-\"+_model.get(\"_id\"), _this.options.richtext_editor_config) :\n false,\n editorInstanceTitle = (this.renderer.isEditable() && _this.options.show_node_editor_title_richtext) ?\n CKEditor.inline(\"Rk-Edit-Title-\"+_model.get(\"_id\"), _this.options.richtext_editor_config) :\n false,\n closeEditor = function() {\n _this.renderer.removeRepresentation(_this);\n paper.view.draw();\n };\n\n _this.cleanEditor = function() {\n _this.editor_$.off(\"keyup\");\n _this.editor_$.find(\"input, textarea, select\").off(\"change keyup paste\");\n _this.editor_$.find(\".Rk-Edit-Image-File\").off('change');\n _this.editor_$.find(\".Rk-Edit-ColorPicker-Wrapper\").off('hover');\n _this.editor_$.find(\".Rk-Edit-Size-Btn\").off('click');\n _this.editor_$.find(\".Rk-Edit-Image-Del\").off('click');\n _this.editor_$.find(\".Rk-Edit-ColorPicker\").find(\"li\").off('hover click');\n _this.editor_$.find(\".Rk-CloseX\").off('click');\n _this.editor_$.find(\".Rk-Edit-Goto\").off('click');\n\n if(_this.options.show_node_editor_description_richtext) {\n if(editorInstance) {\n editorInstance.focusManager.blur(true);\n editorInstance.destroy();\n }\n }\n if(_this.options.show_node_editor_title_richtext) {\n if(editorInstanceTitle) {\n editorInstanceTitle.focusManager.blur(true);\n editorInstanceTitle.destroy();\n }\n }\n };\n\n this.editor_$.find(\".Rk-CloseX\").click(function (e) {\n e.preventDefault();\n closeEditor();\n });\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 = _.debounce(function() {\n _.defer(function() {\n if (_this.renderer.isEditable()) {\n var _data = {};\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 if(_this.options.show_node_editor_description_richtext) {\n if(editorInstance &&\n editorInstance.checkDirty()) {\n _data.description = editorInstance.getData();\n editorInstance.resetDirty();\n }\n }\n else {\n _data.description = _this.editor_$.find(\".Rk-Edit-Description\").val();\n }\n }\n if (_this.options.show_node_editor_title) {\n if(_this.options.show_node_editor_title_richtext) {\n if(editorInstanceTitle &&\n editorInstanceTitle.checkDirty()) {\n _data.title = editorInstanceTitle.getData();\n editorInstanceTitle.resetDirty();\n }\n }\n else {\n _data.title = _this.editor_$.find(\".Rk-Edit-Title\").val();\n }\n }\n if (_this.options.show_node_editor_style) {\n var dash = _this.editor_$.find(\".Rk-Edit-Dash\").is(':checked');\n _data.style = _.assign( ((_model.has(\"style\") && _.clone(_model.get(\"style\"))) || {}), {dash: dash});\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 }\n }\n if (_this.options.change_types) {\n if(_model.get(\"type\")!==_this.editor_$.find(\".Rk-Edit-Type\").val()){\n _data.type = _this.editor_$.find(\".Rk-Edit-Type\").val();\n }\n }\n _model.set(_data);\n _this.redraw();\n } else {\n closeEditor();\n }\n });\n }, 1000);\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 if( _this.options.show_node_editor_description &&\n _this.options.show_node_editor_description_richtext &&\n editorInstance)\n {\n editorInstance.on(\"change\", onFieldChange);\n editorInstance.on(\"blur\", onFieldChange);\n }\n\n if( _this.options.show_node_editor_title &&\n _this.options.show_node_editor_title_richtext &&\n editorInstanceTitle)\n {\n editorInstanceTitle.on(\"change\", onFieldChange);\n editorInstanceTitle.on(\"blur\", onFieldChange);\n }\n\n if(_this.options.allow_image_upload) {\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 }\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.has(\"style\") && _model.get(\"style\").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(\"style\", _.assign( ((_model.has(\"style\") && _.clone(_model.get(\"style\"))) || {}), {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 var shiftThickness = function(n) {\n if (_this.renderer.isEditable()) {\n var _oldThickness = ((_model.has('style') && _model.get('style').thickness) || 1),\n _newThickness = n + _oldThickness;\n if(_newThickness < 1 ) {\n _newThickness = 1;\n }\n else if (_newThickness > _this.options.node_stroke_witdh_scale) {\n _newThickness = _this.options.node_stroke_witdh_scale;\n }\n if (_newThickness !== _oldThickness) {\n _this.editor_$.find(\"#Rk-Edit-Thickness-Value\").text(_newThickness);\n _model.set(\"style\", _.assign( ((_model.has(\"style\") && _.clone(_model.get(\"style\"))) || {}), {thickness: _newThickness}));\n paper.view.draw();\n }\n }\n else {\n closeEditor();\n }\n };\n\n this.editor_$.find(\"#Rk-Edit-Thickness-Down\").click(function() {\n shiftThickness(-1);\n return false;\n });\n this.editor_$.find(\"#Rk-Edit-Thickness-Up\").click(function() {\n shiftThickness(1);\n return false;\n });\n\n this.editor_$.find(\".Rk-Edit-Image-Del\").click(function() {\n _this.editor_$.find(\".Rk-Edit-Image\").val('');\n onFieldChange();\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 if (this.options.popup_editor){\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 }\n this.editor_$.show();\n paper.view.draw();\n },\n destroy: function() {\n if(typeof this.cleanEditor !== 'undefined') {\n this.cleanEditor();\n }\n this.editor_block.remove();\n this.editor_$.remove();\n }\n }).value();\n\n /* NodeEditor End */\n\n return NodeEditor;\n\n});\n\n\ndefine('renderer/edgeeditor',['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) {\n 'use strict';\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 _init: function() {\n BaseEditor.prototype._init.apply(this);\n this.template = this.options.templates['templates/edgeeditor.html'];\n this.readOnlyTemplate = this.options.templates['templates/edgeeditor_readonly.html'];\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.has(\"style\") && _model.get(\"style\").color) || _created_by.get(\"color\"),\n dash: _model.has(\"style\") && _model.get(\"style\").dash ? \"checked\" : \"\",\n arrow: (_model.has(\"style\") && _model.get(\"style\").arrow) || !_model.has(\"style\") || (typeof _model.get(\"style\").arrow === 'undefined') ? \"checked\" : \"\",\n thickness: (_model.has(\"style\") && _model.get(\"style\").thickness) || 1,\n from_title: _from_model.get(\"title\"),\n to_title: _to_model.get(\"title\"),\n from_color: (_from_model.has(\"style\") && _from_model.get(\"style\").color) || (_from_model.get(\"created_by\") || Utils._USER_PLACEHOLDER(this.renkan)).get(\"color\"),\n to_color: (_to_model.has(\"style\") && _to_model.get(\"style\").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 _this.editor_$.find(\".Rk-Edit-Size-Btn\").off('click');\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 = _.debounce(function() {\n _.defer(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 if (_this.options.show_node_editor_style) {\n var dash = _this.editor_$.find(\".Rk-Edit-Dash\").is(':checked'),\n arrow = _this.editor_$.find(\".Rk-Edit-Arrow\").is(':checked');\n _data.style = _.assign( ((_model.has(\"style\") && _.clone(_model.get(\"style\"))) || {}), {dash: dash, arrow: arrow});\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 });\n },1000);\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.has(\"style\") && _model.get(\"style\").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(\"style\", _.assign( ((_model.has(\"style\") && _.clone(_model.get(\"style\"))) || {}), {color: $(this).attr(\"data-color\")}));\n _picker.hide();\n paper.view.draw();\n } else {\n closeEditor();\n }\n });\n var shiftThickness = function(n) {\n if (_this.renderer.isEditable()) {\n var _oldThickness = ((_model.has('style') && _model.get('style').thickness) || 1),\n _newThickness = n + _oldThickness;\n if(_newThickness < 1 ) {\n _newThickness = 1;\n }\n else if (_newThickness > _this.options.node_stroke_witdh_scale) {\n _newThickness = _this.options.node_stroke_witdh_scale;\n }\n if (_newThickness !== _oldThickness) {\n _this.editor_$.find(\"#Rk-Edit-Thickness-Value\").text(_newThickness);\n _model.set(\"style\", _.assign( ((_model.has(\"style\") && _.clone(_model.get(\"style\"))) || {}), {thickness: _newThickness}));\n paper.view.draw();\n }\n }\n else {\n closeEditor();\n }\n };\n\n this.editor_$.find(\"#Rk-Edit-Thickness-Down\").click(function() {\n shiftThickness(-1);\n return false;\n });\n this.editor_$.find(\"#Rk-Edit-Thickness-Up\").click(function() {\n shiftThickness(1);\n return false;\n });\n }\n },\n redraw: function() {\n if (this.options.popup_editor){\n var _coords = this.source_representation.paper_coords;\n Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);\n }\n this.editor_$.show();\n paper.view.draw();\n }\n }).value();\n\n /* EdgeEditor End */\n\n return EdgeEditor;\n\n});\n\n\ndefine('renderer/nodebutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n 'use strict';\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 unselect: function() {\n BaseButton.prototype.unselect.apply(this, Array.prototype.slice.call(arguments, 1));\n if(this.source_representation && this.source_representation.buttons_timeout) {\n clearTimeout(this.source_representation.buttons_timeout);\n this.source_representation.hideButtons();\n }\n },\n select: function() {\n if(this.source_representation && this.source_representation.buttons_timeout) {\n clearTimeout(this.source_representation.buttons_timeout);\n }\n this.sector.select();\n },\n }).value();\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 'use strict';\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 = this.options.hide_nodes ? -125 : -135;\n this.endAngle = this.options.hide_nodes ? -55 : -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 }).value();\n\n /* NodeEditButton End */\n\n return NodeEditButton;\n\n});\n\n\ndefine('renderer/noderemovebutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n 'use strict';\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 = this.options.hide_nodes ? -10 : 0;\n this.endAngle = this.options.hide_nodes ? 45 : 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 }).value();\n\n /* NodeRemoveButton End */\n\n return NodeRemoveButton;\n\n});\n\n\ndefine('renderer/nodehidebutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n 'use strict';\n\n var Utils = requtils.getUtils();\n\n /* NodeRemoveButton Begin */\n\n //var NodeRemoveButton = Renderer.NodeRemoveButton = Utils.inherit(Renderer._NodeButton);\n var NodeHideButton = Utils.inherit(NodeButton);\n\n _(NodeHideButton.prototype).extend({\n _init: function() {\n this.type = \"Node-hide-button\";\n this.lastSectorInner = 0;\n this.startAngle = 45;\n this.endAngle = 90;\n this.imageName = \"hide\";\n this.text = \"Hide\";\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 this.renderer.view.addHiddenNode(this.source_representation.model);\n }\n }\n }).value();\n\n /* NodeRemoveButton End */\n\n return NodeHideButton;\n\n});\n\n\ndefine('renderer/nodeshowbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n 'use strict';\n\n var Utils = requtils.getUtils();\n\n /* NodeRemoveButton Begin */\n\n //var NodeRemoveButton = Renderer.NodeRemoveButton = Utils.inherit(Renderer._NodeButton);\n var NodeShowButton = Utils.inherit(NodeButton);\n\n _(NodeShowButton.prototype).extend({\n _init: function() {\n this.type = \"Node-show-button\";\n this.lastSectorInner = 0;\n this.startAngle = 90;\n this.endAngle = 135;\n this.imageName = \"show\";\n this.text = \"Show neighbors\";\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 this.source_representation.showNeighbors(false);\n }\n }\n }).value();\n\n /* NodeShowButton End */\n\n return NodeShowButton;\n\n});\n\n\ndefine('renderer/noderevertbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n 'use strict';\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 }).value();\n\n /* NodeRevertButton End */\n\n return NodeRevertButton;\n\n});\n\n\ndefine('renderer/nodelinkbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n 'use strict';\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 = this.options.hide_nodes ? 135 : 90;\n this.endAngle = this.options.hide_nodes ? 190 : 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, Utils.OriginEnum.EDGE_BUTTON_CIRCLE);\n }\n }\n }).value();\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 'use strict';\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 = this.options.hide_nodes ? -55 : -45;\n this.endAngle = this.options.hide_nodes ? -10 : 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 }).value();\n\n /* NodeEnlargeButton End */\n\n return NodeEnlargeButton;\n\n});\n\n\ndefine('renderer/nodeshrinkbutton',['jquery', 'underscore', 'requtils', 'renderer/nodebutton'], function ($, _, requtils, NodeButton) {\n 'use strict';\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 = this.options.hide_nodes ? -170 : -180;\n this.endAngle = this.options.hide_nodes ? -125 : -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 }).value();\n\n /* NodeShrinkButton End */\n\n return NodeShrinkButton;\n\n});\n\n\ndefine('renderer/edgeeditbutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n 'use strict';\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 }).value();\n\n /* EdgeEditButton End */\n\n return EdgeEditButton;\n\n});\n\n\ndefine('renderer/edgeremovebutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n 'use strict';\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 }).value();\n\n /* EdgeRemoveButton End */\n\n return EdgeRemoveButton;\n\n});\n\n\ndefine('renderer/edgerevertbutton',['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {\n 'use strict';\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 }).value();\n\n /* EdgeRevertButton End */\n\n return EdgeRevertButton;\n\n});\n\n\ndefine('renderer/miniframe',['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {\n 'use strict';\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 }).value();\n\n\n /* MiniFrame End */\n\n return MiniFrame;\n\n});\n\n\ndefine('renderer/scene',['jquery', 'underscore', 'filesaver', 'requtils', 'renderer/miniframe', 'screenfull'], function ($, _, filesaver, requtils, MiniFrame, Screenfull) {\n 'use strict';\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(_renkan.options.templates['templates/scene.html'](_renkan));\n this.onStatusChange();\n this.canvas_$ = this.$.find(\".Rk-Canvas\");\n this.labels_$ = this.$.find(\".Rk-Labels\");\n if (!_renkan.options.popup_editor){\n this.editor_$ = $(\"#\" + _renkan.options.editor_panel);\n }else{\n this.editor_$ = this.$.find(\".Rk-Editor\");\n }\n this.notif_$ = this.$.find(\".Rk-Notifications\");\n paper.setup(this.canvas_$[0]);\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 = false;\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 = 2;\n this.minimap.miniframe.__representation = new MiniFrame(this, null);\n }\n\n this.throttledPaperDraw = _(function() {\n paper.view.draw();\n }).throttle(100).value();\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 _lastTap = 0;\n\n this.image_cache = {};\n this.icon_cache = {};\n\n ['edit', 'remove', 'hide', 'show', '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.view.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.view.scale,\n _newOffset = new paper.Point([\n _this.canvas_$.width(),\n _this.canvas_$.height()\n ]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.view.offset.multiply( _scaleRatio ));\n _this.view.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 _.each(_event.originalEvent.dataTransfer.types, 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 _.extend(res,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 if(this.renkan.project.get(\"views\").length > 0 && this.renkan.options.save_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\n if (Screenfull.enabled){\n bindClick(\".Rk-FullScreen-Button\", \"fullScreen\");\n\n document.addEventListener(Screenfull.raw.fullscreenchange, function () {\n //the listener occur too randomly and sometimes before the fullscreen is fully set up\n //so we add 500 delay\n setTimeout(function(){\n var widthAft = _this.$.width();\n var heightAft = _this.$.height();\n\n if (_this.renkan.options.show_top_bar) {\n heightAft -= _this.$.find(\".Rk-TopBar\").height();\n }\n if (_this.renkan.options.show_bins && (this.renkan.$.find(\".Rk-Bins\").position().left > 0)) {\n widthAft -= this.renkan.$.find(\".Rk-Bins\").width();\n }\n\n paper.view.viewSize = new paper.Size([widthAft, heightAft]);\n _this.resize(_this.currentWidth, widthAft, _this.currentHeight, heightAft);\n\n _this.currentWidth = widthAft;\n _this.currentHeight = heightAft;\n\n if (!Screenfull.isFullscreen) {\n paper.view.onResize = function(_event) {\n var newWidth = _event.size._width,\n newHeight = _event.size._height;\n var prevHeight = newHeight - _event.delta.height,\n prevWidth = newWidth - _event.delta.width;\n\n _this.resize(prevWidth, newWidth, prevHeight, newHeight);\n };\n }\n }, 600);\n });\n } else {\n this.$.find(\".Rk-FullScreen-Button\").addClass(\"disabled\");\n this.$.find(\".Rk-FullScreen-Button .Rk-TopBar-Tooltip-Contents\").html(this.renkan.translate(\"Fullscreen not supported by your browser\"));\n }\n\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.on(\"resize\", function(_event) {\n var newWidth = _event.size._width,\n newHeight = _event.size._height;\n var prevHeight = newHeight - _event.delta.height,\n prevWidth = newWidth - _event.delta.width;\n\n _this.resize(prevWidth, newWidth, prevHeight, newHeight);\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\")).prop('title', _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:saveStatus\", function(){\n switch (_this.renkan.project.get(\"saveStatus\")) {\n case 0: //clean\n _this.$.find(\".Rk-Save-Button\").removeClass(\"to-save\");\n _this.$.find(\".Rk-Save-Button\").removeClass(\"saving\");\n _this.$.find(\".Rk-Save-Button\").addClass(\"saved\");\n break;\n case 1: //dirty\n _this.$.find(\".Rk-Save-Button\").removeClass(\"saved\");\n _this.$.find(\".Rk-Save-Button\").removeClass(\"saving\");\n _this.$.find(\".Rk-Save-Button\").addClass(\"to-save\");\n break;\n case 2: //saving\n _this.$.find(\".Rk-Save-Button\").removeClass(\"saved\");\n _this.$.find(\".Rk-Save-Button\").removeClass(\"to-save\");\n _this.$.find(\".Rk-Save-Button\").addClass(\"saving\");\n break;\n }\n });\n\n this.renkan.project.on(\"loaded\", function(){\n if (_this.renkan.options.url_parameters){\n Backbone.history.start();\n } else {\n _this.fixSize();\n }\n _this.redrawActive = true;\n _thRedraw();\n });\n\n //register router events\n this.renkan.router.on(\"router\", function(_params){\n _this.setViewParameters(_params);\n });\n\n this.renkan.project.on(\"change:loadingStatus\", function(){\n if (_this.renkan.project.get(\"loadingStatus\")){\n var animate = _this.$.find(\".loader\").addClass(\"run\");\n var timer = setTimeout(function(){\n _this.$.find(\".loader\").hide(250);\n }, 3000);\n }\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 > 1) {\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(\"loadingStatus\")){\n _thRedraw();\n }\n });\n this.renkan.project.on(\"add:edges\", function(_edge) {\n _this.addRepresentation(\"Edge\", _edge);\n if (!_this.renkan.project.get(\"loadingStatus\")){\n _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();\n },\n _delay\n );\n }\n\n if (_renkan.options.force_resize) {\n $(window).resize(function() {\n _this.autoScale();\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 _renkan.project.get(\"edges\").each(function(e) {\n _this.getRepresentationByModel(e).unhighlight();\n });\n } else {\n var rxs = Utils.regexpFromTextOrArray(val);\n _renkan.project.get(\"nodes\").each(function(n) {\n if (n.id === val || 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 _renkan.project.get(\"edges\").each(function(e) {\n if (e.id === val || rxs.test(e.get(\"title\")) || rxs.test(e.get(\"description\"))) {\n _this.getRepresentationByModel(e).highlight(rxs);\n } else {\n _this.getRepresentationByModel(e).unhighlight();\n }\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 fixSize: function() {\n if(typeof this.view === 'undefined') {\n this.view = this.addRepresentation(\"View\", this.renkan.project.get(\"views\").last());\n }\n this.view.autoScale();\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 //_grp = new paper.Group([_path]),\n _delta = _grp.position,\n _imgdelta = new paper.Point([_centerX, _centerY]),\n _currentPos = new paper.Point(0,0);\n _text.content = _caption;\n // set group pivot to not depend on text visibility that changes the group bounding box.\n _grp.pivot = _grp.bounds.center;\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 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.view.scale * 0.8 * this.renkan.options.minimap_width / paper.view.bounds.width,\n this.view.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.view.scale).add(this.view.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.view.offset).divide(this.view.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 = _.reject(this.representations,\n function(_repr) {\n return _repr === _representation;\n }\n );\n },\n getRepresentationByModel: function(_model) {\n if (!_model) {\n return undefined;\n }\n return _.find(this.representations, function(_repr) {\n return _repr.model === _model;\n });\n },\n removeRepresentationsOfType: function(_type) {\n var _representations = _.filter(this.representations,function(_repr) {\n return _repr.type === _type;\n }),\n _this = this;\n _.each(_representations, 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 _.each(this.representations, function(_repr) {\n _repr.unhighlight();\n });\n },\n unselectAll: function(_model) {\n _.each(this.representations, function(_repr) {\n _repr.unselect();\n });\n },\n redraw: function() {\n var _this = this;\n if(! this.redrawActive ) {\n return;\n }\n _.each(this.representations, function(_representation) {\n _representation.redraw({ dontRedrawEdges:true });\n });\n if (this.minimap && typeof this.view !== 'undefined') {\n this.redrawMiniframe();\n }\n paper.view.draw();\n },\n resize: function(prevWidth, newWidth, prevHeight, newHeight){\n var _ratio;\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 var ratioH = newHeight/prevHeight,\n ratioW = newWidth/prevWidth;\n if (newHeight < newWidth) {\n _ratio = ratioH;\n } else {\n _ratio = ratioW;\n }\n this.view.resizeZoom(newWidth - prevWidth, newHeight - prevHeight, _ratio);\n\n this.redraw();\n },\n addTempEdge: function(_from, _point, _origin) {\n var _tmpEdge = this.addRepresentation(\"TempEdge\",null);\n _tmpEdge.end_pos = _point;\n _tmpEdge.from_representation = _from;\n _tmpEdge.origin = _origin;\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 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.view.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 origin: Utils.OriginEnum.NODE_BUTTON\n };\n var _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, Utils.OriginEnum.EDGE_BUTTON_BAR);\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 this.view.updateUrl();\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.view.offset).multiply( Math.SQRT2 - 1 );\n if (this.totalScroll > 0) {\n this.view.setScale( this.view.scale * Math.SQRT2, this.view.offset.subtract(_delta) );\n } else {\n this.view.setScale( this.view.scale * Math.SQRT1_2, this.view.offset.add(_delta.divide(Math.SQRT2)));\n }\n this.totalScroll = 0;\n }\n },\n onDoubleClick: 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 var _hitResult = paper.project.hitTest(_point);\n\n if (!this.isEditable()) {\n if (_hitResult && typeof _hitResult.item.__representation !== \"undefined\") {\n if (_hitResult.item.__representation.model.get('uri')){\n window.open(_hitResult.item.__representation.model.get('uri'), '_blank');\n }\n }\n return;\n }\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 origin: Utils.OriginEnum.NODE_DOUBLE_CLICK\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 _.extend(_data,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 //TODO: Determine if it comes from bin or ext\n origin: Utils.OriginEnum.NODE_DROP_EXT\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 this.currentWidth = this.$.width();\n this.currentHeight = this.$.height();\n\n var _el = this.renkan.$[0];\n paper.view.off(\"resize\");\n Screenfull.toggle(_el);\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 idsMap = {},\n hiddenNodes;\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 delete e._id;\n delete e.id;\n\n if(e.hidden_nodes) {\n hiddenNodes = e.hidden_nodes;\n e.hidden_nodes = [];\n _.each(hiddenNodes, function(h,j) {\n e.hidden_nodes.push(idsMap[h]);\n });\n }\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 setViewParameters: function(_params){\n this.removeRepresentationsOfType(\"View\");\n if ($.isEmptyObject(_params)){\n this.view = this.addRepresentation(\"View\", this.renkan.project.get(\"views\").at(this.validViewIndex(this.renkan.options.default_index_view)));\n return;\n }\n if (typeof _params.viewIndex !== 'undefined'){\n this.view = this.addRepresentation(\"View\", this.renkan.project.get(\"views\").at(this.validViewIndex(_params.viewIndex)));\n } else {\n this.view = this.addRepresentation(\"View\", this.renkan.project.get(\"views\").at(this.validViewIndex(this.renkan.options.default_index_view)));\n }\n if (typeof _params.view !== 'undefined' && _params.view.split(\",\").length >= 3){\n var viewParams = _params.view.split(\",\");\n var params = {\n \"project\": this.renkan.project,\n \"offset\": {\n \"x\": parseFloat(viewParams[0]),\n \"y\": parseFloat(viewParams[1])\n },\n \"zoom_level\": parseFloat(viewParams[2])\n };\n this.view.setScale(params.zoom_level, new paper.Point(params.offset));\n }\n //if view parameters = autoscale we apply a zoom fit on the view.\n if ((typeof _params.view !== 'undefined' && _params.view === \"autoscale\")){\n this.view.autoScale();\n }\n //if viewsNodes = false we show all the node by default.\n if (typeof _params.viewsNodes !== 'undefined'){\n if (_params.viewsNodes === \"true\"){\n this.view.hiddenNodes = (this.view.params.hidden_nodes || []).concat();\n this.view.hideNodes();\n } else {\n this.view.showNodes(false);\n }\n }\n //other parameters must go after because most of them depends on a view that must be initialize before\n this.unhighlightAll();\n if (typeof _params.node !== 'undefined' && _params.node){\n this.highlightModel(this.renkan.project.get(\"nodes\").get(_params.node));\n }\n if (typeof _params.edge !== 'undefined' && _params.edge){\n this.highlightModel(this.renkan.project.get(\"edges\").get(_params.edge));\n }\n\n },\n validViewIndex: function(index){\n //check if the view index exist (negative index is from the end) and return the correct index or false if doesn't exist\n var _index = parseInt(index);\n var validIndex = 0;\n if (_index < 0){\n validIndex = this.renkan.project.get(\"views\").length + _index;\n } else {\n validIndex = _index;\n }\n if (typeof this.renkan.project.get(\"views\").at(_index) === 'undefined'){\n validIndex = 0;\n }\n return validIndex;\n },\n foldBins: function() {\n var foldBinsButton = this.$.find(\".Rk-Fold-Bins\"),\n bins = this.renkan.$.find(\".Rk-Bins\"),\n _delta = 0;\n var _this = this,\n sizeBef = _this.canvas_$.width(),\n sizeAft;\n if (bins.position().left < 0) {\n _delta= new paper.Point([-bins.width()/2, 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 sizeAft = sizeBef;\n } else {\n sizeAft = sizeBef - bins.width();\n }\n foldBinsButton.html(\"«\");\n } else {\n _delta= new paper.Point([bins.width()/2, 0]);\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.view.paperShift(_delta);\n },\n save: function() { },\n open: function() { }\n }).value();\n\n /* Scene End */\n\n return Scene;\n\n});\n\ndefine('renderer/viewrepr',['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {\n 'use strict';\n\n var Utils = requtils.getUtils();\n\n /* Rkns.Renderer.View Class */\n\n /* The representation for the view. */\n\n var ViewRepr = Utils.inherit(BaseRepresentation);\n\n _(ViewRepr.prototype).extend({\n _init: function() {\n var _this = this;\n this.$ = $(\".Rk-Render\");\n this.type = \"View\";\n this.hiddenNodes = [];\n this.scale = 1;\n this.initialScale = 1;\n this.offset = paper.view.center;\n this.params = {};\n \n if (this.model){\n this.params = {\n \"zoom_level\": _this.model.get(\"zoom_level\"),\n \"offset\": _this.model.get(\"offset\"),\n \"hidden_nodes\": _this.model.get(\"hidden_nodes\")\n };\n }\n \n this.initWithParams();\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 bindClick(\".Rk-ZoomSave\", \"saveView\");\n \n this.$.find(\".Rk-ZoomSetSaved\").click( function() {\n _this.setScale(_this.params.zoom_level, new paper.Point(_this.params.offset));\n _this.showNodes(false);\n if (_this.options.hide_nodes){\n _this.hiddenNodes = (_this.params.hidden_nodes || []).concat();\n _this.hideNodes();\n }\n _this.updateUrl();\n });\n \n this.$.find(\".Rk-ShowHiddenNodes\").mouseenter( function() {\n _this.showNodes(true);\n _this.$.find(\".Rk-ShowHiddenNodes\").mouseleave( function() {\n _this.hideNodes();\n });\n });\n this.$.find(\".Rk-ShowHiddenNodes\").click( function() {\n _this.showNodes(false);\n _this.$.find(\".Rk-ShowHiddenNodes\").off( \"mouseleave\" ); \n });\n \n if(this.renkan.project.get(\"views\").length > 0 && this.renkan.options.save_view){\n this.$.find(\".Rk-ZoomSetSaved\").show();\n }\n },\n redraw: function(options) {\n //console.log(\"view : \", this.model.toJSON());\n },\n initWithParams: function(){\n var _this = this;\n \n if (_this.options.view_force_autoscale){\n this.autoScale();\n } else {\n _this.setScale(_this.params.zoom_level, new paper.Point(_this.params.offset)); \n }\n \n if (_this.options.hide_nodes && !_this.options.view_show_hiddennodes){\n _this.hiddenNodes = (_this.params.hidden_nodes || []).concat();\n _this.hideNodes();\n } else {\n _this.showNodes(false);\n }\n },\n saveView: function(){\n var _this = this;\n \n var offset = {\n \"x\": _this.offset.x,\n \"y\": _this.offset.y\n };\n \n _this.model = _this.renkan.project.addView( { zoom_level:_this.scale, offset:offset, hidden_nodes: _this.hiddenNodes.concat() } );\n _this.params = {\n \"zoom_level\": _this.model.get(\"zoom_level\"),\n \"offset\": _this.model.get(\"offset\"),\n \"hidden_nodes\": _this.model.get(\"hidden_nodes\")\n };\n \n this.$.find(\".Rk-ZoomSetSaved\").show();\n \n _this.updateUrl();\n },\n addHiddenNode: function(_model){\n this.hideNode(_model);\n this.hiddenNodes.push(_model.id);\n this.updateUrl();\n },\n hideNode: function(_model){\n if (typeof this.renderer.getRepresentationByModel(_model) !== 'undefined'){\n this.renderer.getRepresentationByModel(_model).hide();\n }\n },\n hideNodes: function(){\n var _this = this;\n this.hiddenNodes.forEach(function(_id, index){\n var node = _this.renkan.project.get(\"nodes\").get(_id);\n if (typeof node !== 'undefined'){\n return _this.hideNode(_this.renkan.project.get(\"nodes\").get(_id));\n }else{\n _this.hiddenNodes.splice(index, 1);\n }\n });\n paper.view.draw();\n },\n showNodes: function(ghost){\n var _this = this;\n this.hiddenNodes.forEach(function(_id){\n _this.renderer.getRepresentationByModel(_this.renkan.project.get(\"nodes\").get(_id)).show(ghost);\n });\n if (!ghost){\n this.hiddenNodes = [];\n }\n paper.view.draw();\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.renderer.redraw();\n this.updateUrl();\n }\n },\n zoomOut: function() {\n var _newScale = this.scale * Math.SQRT1_2,\n _offset = new paper.Point([\n this.renderer.canvas_$.width(),\n this.renderer.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.renderer.canvas_$.width(),\n this.renderer.canvas_$.height()\n ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));\n this.setScale( _newScale, _offset );\n },\n resizeZoom: function(deltaW, deltaH, _ratio) {\n var _newScale = this.scale * _ratio;\n var _offset = new paper.Point([\n (this.renderer.canvas_$.width() * 0.5 * ( 1 - _ratio) ) + (this.offset.x * _ratio + deltaW * _ratio * 0.5 ),\n (this.renderer.canvas_$.height() * 0.5 * ( 1 - _ratio) ) + (this.offset.y * _ratio + deltaH * _ratio * 0.5 )\n ]);\n this.setScale( _newScale, _offset );\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 paperShift: function(_delta) {\n this.offset = this.offset.add(_delta);\n this.renderer.redraw();\n },\n updateUrl: function(){\n if(this.options.url_parameters && this.options.update_url){\n var result = {};\n var parameters = Backbone.history.getFragment().split('?');\n if (parameters.length > 1){\n parameters[1].split(\"&\").forEach(function(part) {\n var item = part.split(\"=\");\n result[item[0]] = decodeURIComponent(item[1]);\n });\n }\n result.view = Math.round(this.offset.x*1000)/1000 + ',' + Math.round(this.offset.y*1000)/1000 + ',' + Math.round(this.scale*1000)/1000;\n\n if (this.renkan.project.get(\"views\").indexOf(this.model) > -1){\n result.viewIndex = this.renkan.project.get(\"views\").indexOf(this.model);\n if (result.viewIndex === this.renkan.project.get(\"views\").length - 1){\n result.viewIndex = -1;\n }\n } else {\n if (result.viewIndex){\n delete result.viewIndex;\n }\n }\n this.renkan.router.navigate(\"?\" + decodeURIComponent($.param(result)), {trigger: false, replace: true});\n }\n },\n destroy: function(_event) {\n this._super(\"destroy\");\n this.showNodes(false);\n }\n }).value();\n\n return ViewRepr;\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/lodash/lodash',\n 'filesaver' :'../lib/FileSaver/FileSaver',\n 'requtils':'require-utils',\n 'jquery-private':'jquery-private',\n 'ckeditor-core':'../lib/ckeditor/ckeditor',\n 'screenfull':'../lib/screenfull/screenfull-umd'\n },\n // JQuery config. cf: http://requirejs.org/docs/jquery.html#noconflictmap\n map: {\n '*': { 'jquery': 'jquery-private' },\n 'jquery-private': { 'jquery': 'jquery' }\n },\n shim: {\n 'ckeditor-core': {\n exports: 'CKEDITOR',\n }\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/nodehidebutton',\n 'renderer/nodeshowbutton',\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 'renderer/viewrepr'\n ], function(BaseRepresentation, BaseButton, NodeRepr, Edge, TempEdge, BaseEditor, NodeEditor, EdgeEditor, NodeButton, NodeEditButton, NodeRemoveButton, NodeHideButton, NodeShowButton, NodeRevertButton, NodeLinkButton, NodeEnlargeButton, NodeShrinkButton, EdgeEditButton, EdgeRemoveButton, EdgeRevertButton, MiniFrame, Scene, ViewRepr){\n\n 'use strict';\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.View = ViewRepr;\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.NodeHideButton = NodeHideButton;\n Renderer.NodeShowButton = NodeShowButton;\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// Module o use with jquery to handle no conflict. cf: http://requirejs.org/docs/jquery.html#noconflictmap\ndefine('jquery-private',['jquery'], function (jq) {\n 'use strict';\n return jq.noConflict( true );\n});\n\n"]}
\ No newline at end of file