') - .addClass("Rk-Bin-Count") - .appendTo(this.$); - this.title_$ = Rkns.$('

') - .addClass("Rk-Bin-Title") - .appendTo(this.$); - this.main_$ = Rkns.$('
') - .addClass("Rk-Bin-Main") - .appendTo(this.$); - this.title_$.html(_opts.title || '(new bin)'); - this.renkan.resizeBins(); - - if (_opts.auto_refresh) { - window.setInterval(function() { - _this.refresh(); - },_opts.auto_refresh) - } - } -} - -Rkns._BaseBin.prototype.destroy = function() { - this.$.detach(); - this.renkan.resizeBins(); -} - -/* Point of entry / - -Rkns.Renkan = function(_opts) { - if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") { - _opts.language = "en"; - } - if (typeof _opts.container !== "string") { - _opts.container = "renkan"; - } - if (typeof _opts.search !== "object" || !_opts.search) { - _opts.search = []; - } - if (typeof _opts.static_url !== "string") { - _opts.static_url = ""; - } - this.project = new Rkns.Models.Project(); - this.language = _opts.language; - this.static_url = _opts.static_url; - this.l10n = Rkns.i18n[_opts.language]; - if (typeof _opts.user_id !== "undefined") { - this.current_user = _opts.user_id; - } - this.$ = Rkns.$("#" + _opts.container); - this.$ - .addClass("Rk-Main") - .html(this.template()); - this.renderer = new Rkns.Renderer.Scene(this); - this.tabs = []; - this.search_engines = []; - this.selected_bin_item = undefined; - - this.current_user_list = new Rkns.Models.UsersList(); - - var _this = this; - this.$.mouseup(function() { - _this.selected_bin_item = undefined; - _this.$.find(".Rk-Bin-Item.dragging").removeClass("dragging"); - }); - if (!_opts.search.length) { - this.$.find(".Rk-Web-Search-Form").detach(); - } else { - var _tmpl = Rkns._.template('
<%= title %>
'), - _select = this.$.find(".Rk-Search-List"), - _input = this.$.find(".Rk-Web-Search-Input") - _form = this.$.find(".Rk-Web-Search-Form"); - Rkns._(_opts.search).each(function(_search, _key) { - var _searchObj = new _search.type(_this, _search); - _this.search_engines.push(_searchObj); - }); - _select.html( - Rkns._(this.search_engines).map(function(_search, _key) { - return _tmpl({ - key: _key, - title: _search.getSearchTitle(), - className: _search.getBgClass() - }); - }).join("") - ); - _select.find("li").click(function() { - var _el = Rkns.$(this); - _this.setSearchEngine(_el.attr("data-key")); - _form.submit(); - }); - _form.submit(function() { - if (_input.val()) { - var _search = _this.search_engine; - _search.search(_input.val()); - } - return false; - }); - this.$.find(".Rk-Search-Current").mouseenter( - function() { _select.slideDown(); } - ); - this.$.find(".Rk-Search-Select").mouseleave( - function() { _select.slideUp(); } - ); - this.setSearchEngine(0); - } - Rkns._(_opts.bins).each(function(_bin) { - _this.tabs.push(new _bin.bin(_this, _bin)); - }); - - this.$.find(".Rk-Bins") - .on("click",".Rk-Bin-Title,.Rk-Bin-Title-Icon", function() { - var _mainDiv = Rkns.$(this).siblings(".Rk-Bin-Main"); - if (_mainDiv.is(":hidden")) { - _this.$.find(".Rk-Bin-Main").slideUp(); - _mainDiv.slideDown(); - } - }).on("mousedown", ".Rk-Bin-Item", function() { - var _t = Rkns.$(this); - _t.addClass("dragging"); - _this.selected_bin_item = { - uri : $(_t).attr("data-uri"), - title : $(_t).attr("data-title"), - description : $(_t).attr("data-description"), - image: $(_t).attr("data-image") - } - return false; - }).on("mouseover", ".Rk-Bin-Item", function(_e) { - var _t = Rkns.$(this); - if (_t && $(_t).attr("data-uri")) { - var _models = _this.project.get("nodes").where({ - uri: $(_t).attr("data-uri") - }); - Rkns._(_models).each(function(_model) { - _this.renderer.highlightModel(_model); - }); - } - }).mouseout(function() { - _this.renderer.unhighlightAll(); - }); - Rkns.$(window).resize(function() { - _this.resizeBins(); - }); - - this.$.find(".Rk-Bins-Search-Input").on("change keyup paste input", function() { - var val = Rkns.$(this).val(); - Rkns._(_this.tabs).each(function(tab) { - tab.render(val); - }); - }); - this.$.find(".Rk-Bins-Search-Form").submit(function() { - return false - }); -} - -Rkns.Renkan.prototype.template = Rkns._.template( - '
Hyper Plateau
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' -); - - -Rkns.Renkan.prototype.setSearchEngine = function(_key) { - this.search_engine = this.search_engines[_key]; - this.$.find(".Rk-Search-Current").attr("class","Rk-Search-Current " + this.search_engine.getBgClass()); -} - -Rkns.Renkan.prototype.resizeBins = function() { - var _d = + this.$.find(".Rk-Web-Search-Form").outerHeight() + this.$.find(".Rk-Bins-Search-Form").outerHeight(); - this.$.find(".Rk-Bin-Title:visible").each(function() { - _d += Rkns.$(this).outerHeight(); - }); - this.$.find(".Rk-Bin-Main").css({ - height: this.$.find(".Rk-Bins").height() - _d - }); -} - -/ Utility functions / - -Rkns.Utils = { - _ID_AUTO_INCREMENT : 0, - _ID_BASE : (function(_d) { - function pad(n){return n<10 ? '0'+n : n} - function fillrand(n) { - var _res = '' - for (var i=0; iUnknown"); - - _(this.children_views).each(function(cv){ - that.$el.append(cv.render().el); - }); - - return this; - } - - }); - - root.SelectUserView = Backbone.View.extend({ - initialize: function(options) { - _.bindAll(this); - this.model.bind("change", this.render); - }, - render: function() { - this.$el.val(this.model.id).text(this.model.get("title")); - return this; - } - }); - - root.CurrentUserView = Backbone.View.extend({ - initialize : function() { - this._select_view = new SelectCurrentUserView({ - el : this.el, - collection : this.model.get("users"), - child_view_constructor: SelectUserView, - child_tag_name: "option", - }); - }, - render: function() { - this.$el.empty(); - this._select_view.render(); - return this; - } - - }); - - - root.BasicListView = Backbone.View.extend({ - - initialize: function(options) { - _.bindAll(this); - - this.element_view_constructor = options.element_view_constructor; - if(typeof options.template !== "undefined") { - this.template = _.template(options.template); - } - - this.rendered = false; - this.element_views = []; - this.collection.each(this.add); - - this.collection.bind('add', this.add); - this.collection.bind('remove', this.remove); - this.collection.bind('reset', this.reset); - this.collection.bind('destroy', this.destroy); - }, - - render: function() { - this.rendered = true; - var that = this; - this.$el.empty(); - if(typeof this.template !== "undefined") { - var data = {}; - if(typeof this.model !== "undefined") { - data = this.$el.model.toJSON(); - } - this.$el.html(this.template(data)); - } - _(this.element_views).each(function(dvs){ - that.$el.append(dvs.render().el); - }); - - return this; - }, - - add: function(elt) { - var element_view = new this.element_view_constructor({model: elt}); - this.element_views.push(element_view); - if(this.rendered) { - this.$el.append(element_view.render().el); - } - }, - - remove: function(elt) { - var element_view = _(this.element_views).select(function(cv) {return cv.model === elt;})[0]; - this.element_views = _(this.element_views).without(element_view); - if(this.rendered) { - element_view.$el.remove(); - } - - }, - - reset: function() { - _(this.element_views).each(function(cv) { - cv.$el.remove(); - }); - this.element_views = []; - this.collection.each(this.add); - } - - }); - - - root.BasicModelView = Backbone.View.extend({ - - initialize: function(options) { - _.bindAll(this); - if(typeof options.template !== "undefined") { - this.template = _.template(options.template); - } - if(typeof options.getJSON === "function") { - this.getJSON = options.getJSON; - } - this.model.bind("change", this.render); - }, - render: function() { - $(this.el).html(this.template(this.getJSON())); - return this; - }, - getJSON : function() { - return this.model.toJSON(); - } - }); - -}).call(this); diff -r 01f66ed90e32 -r 87569ad0ff53 server/src/main/webapp/static/js/models.js --- a/server/src/main/webapp/static/js/models.js Wed Feb 13 13:41:19 2013 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,270 +0,0 @@ -(function() { - - var root = this; - - var Backbone = root.Backbone; - - var Models = root.Rkns.Models = {}; - - - Models.getUID = function(obj) { - var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - var r = Math.random()16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - }); - return obj.type + "-" + guid; - }; - - - var RenkanModel = Backbone.RelationalModel.extend({ - idAttribute : "_id", - constructor: function(options) { - - if (typeof options !== "undefined") { - options._id = options._id || options.id || Models.getUID(this); - options.title = options.title || "(untitled " + this.type + ")"; - options.description = options.description || ""; - options.uri = options.uri || ""; - - if(typeof this.prepare === "function") { - options = this.prepare(options); - } - } - Backbone.RelationalModel.prototype.constructor.call(this, options); - }, - validate: function() { - if(!this.type) { - return "object has no type"; - } - }, - addReference : function(_options, _propName, _list, _id, _default) { - var _element = _list.get(_id); - if (typeof _element === "undefined" && typeof _default !== "undefined") { - _options[_propName ] = _default; - } - else { - _options[_propName ] = _element; - } - } - }); - - // USER - var User = Models.User = RenkanModel.extend({ - type: "user", - prepare: function(options) { - options.color = options.color || "#666666"; - return options; - }, - toJSON: function() { - return { - _id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - color: this.get("color"), - }; - }, - }); - - // NODE - var Node = Models.Node = RenkanModel.extend({ - type: "node", - relations: [{ - type: Backbone.HasOne, - key: "created_by", - relatedModel: User - }], - prepare: function(options) { - project = options.project; - this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user); - options.description = options.description || ""; - return options; - }, - toJSON: function() { - return { - _id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - position: this.get("position"), - image: this.get("image"), - color: this.get("color"), - created_by: this.get("created_by") ? this.get("created_by").get("_id") : null - }; - }, - }); - - // EDGE - var Edge = Models.Edge = RenkanModel.extend({ - type: "edge", - relations: [ - { - type: Backbone.HasOne, - key: "created_by", - relatedModel: User - }, - { - type: Backbone.HasOne, - key: "from", - relatedModel: Node - }, - { - type: Backbone.HasOne, - key: "to", - relatedModel: Node - }, - ], - prepare: function(options) { - project = options.project; - this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user); - this.addReference(options, "from", project.get("nodes"), options.from); - this.addReference(options, "to", project.get("nodes"), options.to); - return options; - }, - toJSON: function() { - return { - _id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - from: this.get("from") ? this.get("from").get("_id") : null, - to: this.get("to") ? this.get("to").get("_id") : null, - color: this.get("color"), - created_by: this.get("created_by") ? this.get("created_by").get("_id") : null - }; - }, - }); - - // PROJECT - var Project = Models.Project = RenkanModel.extend({ - type: "project", - relations: [ - { - type: Backbone.HasMany, - key: "users", - relatedModel: User, - reverseRelation: { - key: 'project', - includeInJSON: '_id' - }, - }, - { - type: Backbone.HasMany, - key: "nodes", - relatedModel: Node, - reverseRelation: { - key: 'project', - includeInJSON: '_id' - }, - }, - { - type: Backbone.HasMany, - key: "edges", - relatedModel: Edge, - reverseRelation: { - key: 'project', - includeInJSON: '_id' - }, - } - ], - addUser: function(_props, _options) { - _props.project = this; - var _user = User.findOrCreate(_props); - this.get("users").push(_user, _options); - return _user; - }, - addNode: function(_props, _options) { - _props.project = this; - var _node = Node.findOrCreate(_props); - this.get("nodes").push(_node, _options); - return _node; - }, - addEdge: function(_props, _options) { - _props.project = this; - var _edge = Edge.findOrCreate(_props); - this.get("edges").push(_edge, _options); - return _edge; - }, - removeNode: function(_model) { - this.get("nodes").remove(_model); - }, - removeEdge: function(_model) { - this.get("edges").remove(_model); - }, - validate: function(options) { - var _project = this; - _(options.users).each(function(_item) { - _item.project = _project; - }); - _(options.nodes).each(function(_item) { - _item.project = _project; - }); - _(options.edges).each(function(_item) { - _item.project = _project; - }); - }, - // Add event handler to remove edges when a node is removed - initialize: function() { - var _this = this; - this.on("remove:nodes", function(_node) { - _this.get("edges").remove( - _this.get("edges").filter(function(_edge) { - return _edge.get("from") == _node || _edge.get("to") == _node; - }) - ); - }); - } - }); - - var RosterUser = Models.RosterUser = Backbone.Model.extend({ - type: "roster_user", - idAttribute : "_id", - - constructor: function(options) { - - if (typeof options !== "undefined") { - options._id = options._id || options.id || Models.getUID(this); - options.title = options.title || "(untitled " + this.type + ")"; - options.description = options.description || ""; - options.uri = options.uri || ""; - options.project = options.project || null; - options.site_id = options.site_id || 0; - - if(typeof this.prepare === "function") { - options = this.prepare(options); - } - } - Backbone.Model.prototype.constructor.call(this, options); - }, - - validate: function() { - if(!this.type) { - return "object has no type"; - } - }, - - prepare: function(options) { - options.color = options.color || "#666666"; - return options; - }, - - toJSON: function() { - return { - _id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - color: this.get("color"), - project: (this.get("project") != null)?this.get("project").get("id"):null, - site_id: this.get("site_id") - }; - }, - }); - - var UsersList = Models.UsersList = Backbone.Collection.extend({ - model: RosterUser - }); - - -}).call(window); - diff -r 01f66ed90e32 -r 87569ad0ff53 server/src/main/webapp/static/js/paper-renderer.js --- a/server/src/main/webapp/static/js/paper-renderer.js Wed Feb 13 13:41:19 2013 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,1455 +0,0 @@ -Rkns.Renderer = { - _MARGIN_X: 80, - _MARGIN_Y: 50, - _MIN_DRAG_DISTANCE: 2, - _NODE_RADIUS: 25, - _NODE_BUTTON_INNER: 26, - _NODE_BUTTON_OUTER: 60, - _EDGE_BUTTON_INNER: 1, - _EDGE_BUTTON_OUTER: 40, - _NODE_FONT_SIZE: 10, - _EDGE_FONT_SIZE: 9, - _NODE_MAX_CHAR: 50, - _EDGE_MAX_CHAR: 40, - _ARROW_LENGTH: 16, - _ARROW_WIDTH: 8, - _EDITOR_ARROW_LENGTH : 20, - _EDITOR_ARROW_WIDTH : 40, - _EDITOR_MARGIN : 15, - _EDITOR_PADDING : 10, - _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']), - _CLICKMODE_ADDNODE : 1, - _CLICKMODE_STARTEDGE : 2, - _CLICKMODE_ENDEDGE : 3, - _USER_PLACEHOLDER : { - color: "#000000", - title: "(unknown user)", - get: function(attr) { - return this[attr] || false; - } - } -} - -Rkns.Renderer.Utils = { - drawEditBox : function(_coords, _path, _width, _xmargin, _selector) { - _selector.css({ - width: (_width - 2* Rkns.Renderer._EDITOR_PADDING), - }) - var _height = _selector.outerHeight() + 2* Rkns.Renderer._EDITOR_PADDING, - _isLeft = (_coords.x < paper.view.center.x ? 1 : -1), - _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH ), - _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._EDITOR_ARROW_LENGTH + _width ), - _top = _coords.y - _height / 2; - if (_top < Rkns.Renderer._EDITOR_MARGIN) { - _top = Math.min( Rkns.Renderer._EDITOR_MARGIN, _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 ); - } - var _bottom = _top + _height; - if (_bottom > (paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN)) { - _bottom = Math.max( paper.view.size.height - Rkns.Renderer._EDITOR_MARGIN, _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2 ); - _top = _bottom - _height; - } - _path.segments[0].point - = _path.segments[7].point - = _coords.add([_isLeft * _xmargin, 0]); - _path.segments[1].point.x - = _path.segments[2].point.x - = _path.segments[5].point.x - = _path.segments[6].point.x - = _left; - _path.segments[3].point.x - = _path.segments[4].point.x - = _right; - _path.segments[2].point.y - = _path.segments[3].point.y - = _top; - _path.segments[4].point.y - = _path.segments[5].point.y - = _bottom; - _path.segments[1].point.y = _coords.y - Rkns.Renderer._EDITOR_ARROW_WIDTH / 2; - _path.segments[6].point.y = _coords.y + Rkns.Renderer._EDITOR_ARROW_WIDTH / 2; - _path.closed = true; - _path.fillColor = new paper.GradientColor(Rkns.Renderer._EDITOR_GRADIENT, [0,_top], [0, _bottom]); - _selector.css({ - left: (Rkns.Renderer._EDITOR_PADDING + Math.min(_left, _right)), - top: (Rkns.Renderer._EDITOR_PADDING + _top) - }); - }, - sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) { - var _startRads = _startAngle * Math.PI / 180, - _endRads = _endAngle * Math.PI / 180, - _img = new Image(), - _span = _endRads - _startRads, - _k = .0879 * _span, - _kin = _k * _inR, - _kout = _k * _outR, - _startdx = - Math.sin(_startRads), - _startdy = Math.cos(_startRads), - _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx, - _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy, - _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx, - _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy, - _enddx = - Math.sin(_endRads), - _enddy = Math.cos(_endRads), - _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx, - _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy, - _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx, - _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy, - _centerR = (_inR + _outR)/2, - _centerRads = (_startRads + _endRads) / 2, - _centerX = Math.cos(_centerRads) * _centerR, - _centerY = Math.sin(_centerRads) * _centerR, - _textX = Math.cos(_centerRads) * (_outR + 3), - _textY = Math.sin(_centerRads) * (_outR + 3), - _segments = []; - _segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]); - for (var i = 1; i < 4; i++) { - var _rads = i * _span / 4 + _startRads, - _dx = - Math.sin(_rads), - _dy = Math.cos(_rads), - _x = Math.cos(_rads) * _inR, - _y = Math.sin(_rads) * _inR; - _segments.push([[_x, _y], [ - _kin * _dx, - _kin * _dy], [ _kin * _dx, _kin * _dy ]]); - } - _segments.push([[_endXIn, _endYIn], [ - _kin * _enddx, - _kin * _enddy ], [0,0]]); - _segments.push([[_endXOut, _endYOut], [ 0,0 ], [ - _kout * _enddx, - _kout * _enddy ]]); - for (var i = 3; i > 0; i--) { - var _rads = i * _span / 4 + _startRads, - _dx = - Math.sin(_rads), - _dy = Math.cos(_rads), - _x = Math.cos(_rads) * _outR, - _y = Math.sin(_rads) * _outR; - _segments.push([[_x, _y], [ _kout * _dx, _kout * _dy], [ - _kout * _dx, - _kout * _dy ]]); - } - _segments.push([[_startXOut, _startYOut], [ _kout * _startdx, _kout * _startdy ], [0, 0]]); - var _path = new paper.Path(); - _path.add.apply(_path, _segments); - _path.fillColor = "#333333"; - _path.opacity = .5; - _path.closed = true; - _path.__representation = _repr; - if (_textX >= -2 && _textX <= 2) { - if (_textY > 0) { - _textY += 6; - } - } - var _text = new paper.PointText(_textX,_textY); - _text.characterStyle = { - fontSize: 9, - fillColor: '#c000c0' - }; - if (_textX > 2) { - _text.paragraphStyle.justification = 'left'; - } else if (_textX < -2) { - _text.paragraphStyle.justification = 'right'; - } else { - _text.paragraphStyle.justification = 'center'; - } - _text.visible = false; - var _visible = false, - _restPos = new paper.Point(-200, -200), - _grp = new paper.Group([_path, _text]), - _delta = _grp.position, - _imgdelta = new paper.Point([_centerX, _centerY]), - _currentPos = new paper.Point(0,0); - _text.content = _caption; - _grp.visible = false; - _grp.position = _restPos; - var _res = { - show: function() { - _visible = true; - _grp.position = _currentPos.add(_delta); - _grp.visible = true; - }, - moveTo: function(_point) { - _currentPos = _point; - if (_visible) { - _grp.position = _point.add(_delta); - } - }, - hide: function() { - _visible = false; - _grp.visible = false; - _grp.position = _restPos; - }, - select: function() { - _path.opacity = .8; - _text.visible = true; - }, - unselect: function() { - _path.opacity = .5; - _text.visible = false; - }, - destroy: function() { - _grp.remove(); - } - } - _img.onload = function() { - var _h = _img.height; - var _raster = new paper.Raster(_img); - _raster.position = _imgdelta.add(_grp.position).subtract(_delta); - _grp.addChild(_raster); - } - _img.src = _imgsrc; - return _res - } -} - -Rkns.Renderer._BaseRepresentation = function(_renderer, _model) { - if (typeof _renderer !== "undefined") { - this.renderer = _renderer; - this.project = _renderer.renkan.project; - this.model = _model; - if (this.model) { - var _this = this; - this._changeBinding = function() { - _this.redraw(); - } - this._removeBinding = function() { - _renderer.removeRepresentation(_this); - _renderer.redraw(); - } - this.model.on("change", this._changeBinding ); - this.model.on("remove", this._removeBinding ); - } - } -} - -Rkns.Renderer._BaseRepresentation.prototype.super = function(_func) { - Rkns.Renderer._BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1)); -} - -Rkns.Renderer._BaseRepresentation.prototype.select = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.unhighlight = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.destroy = function() { - if (this.model) { - this.model.off("change", this._changeBinding ); - this.model.off("remove", this._removeBinding ); - } -} - -Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.Node.prototype._init = function() { - this.renderer.node_layer.activate(); - this.type = "Node"; - this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS); - this.circle.fillColor = '#ffffff'; - this.circle.__representation = this; - this.circle.strokeWidth = 2; - this.title = new paper.PointText([0,0]); - this.title.characterStyle = { - fontSize: Rkns.Renderer._NODE_FONT_SIZE, - fillColor: 'black' - }; - this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null); - this.edit_button.node_representation = this; - this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null); - this.remove_button.node_representation = this; - this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null); - this.link_button.node_representation = this; - this.title.paragraphStyle.justification = 'center'; -} - -Rkns.Renderer.Node.prototype.redraw = function() { - var _model_coords = new paper.Point(this.model.get("position")); - this.paper_coords = this.renderer.toPaperCoords(_model_coords); - this.circle.position = this.paper_coords; - this.title.content = this.model.get("title"); - this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 Rkns.Renderer._NODE_FONT_SIZE]); - this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); - this.edit_button.moveTo(this.paper_coords); - this.remove_button.moveTo(this.paper_coords); - this.link_button.moveTo(this.paper_coords); - var _img = this.model.get("image"); - if (_img && _img !== this.img) { - var _image = new Image(), - _this = this; - _image.onload = function() { - if (_this.node_image) { - _this.node_image.remove(); - } - _this.renderer.node_layer.activate(); - var _ratio = Math.min(1, 2 Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height ); - var _raster = new paper.Raster(_image); - var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS); - _raster.scale(_ratio); - _this.node_image = new paper.Group(_clip, _raster); - _this.node_image.opacity = .9; - /* This is a workaround to allow clipping at group level - * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug). - / - _this.node_image.clipped = true; - _this.node_image.position = _this.paper_coords; - _this.node_image.__representation = _this; - _clip.__representation = _this; - paper.view.draw(); - } - _image.src = _img; - } - this.img = _img; - if (this.node_image) { - if (!this.img) { - this.node_image.remove(); - delete this.node_image; - } else { - this.node_image.position = this.paper_coords; - } - } - - Rkns._.each(this.project.get("edges").filter(function (ed) { return ((ed.to === this.model) || (ed.from === this.model));}), function(edge, index, list){ - var repr = this.renderer.getRepresentationByModel(edge); - if(repr != null && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") { - repr.redraw(); - } - }, this); -} - -Rkns.Renderer.Node.prototype.paperShift = function(_delta) { - var _coords = this.renderer.toModelCoords(this.paper_coords.add(_delta)), - _data = { - position: { - x: _coords.x, - y: _coords.y - } - }; - this.model.set(_data); - //this.renderer.redraw(); -} - -Rkns.Renderer.Node.prototype.openEditor = function() { - this.renderer.removeRepresentationsOfType("editor"); - var _editor = this.renderer.addRepresentation("NodeEditor",null); - _editor.node_representation = this; - _editor.draw(); -} - -Rkns.Renderer.Node.prototype.select = function() { - this.circle.strokeWidth = 4; - this.edit_button.show(); - this.remove_button.show(); - this.link_button.show(); - var _uri = this.model.get("uri"); - Rkns.$('.Rk-Bin-Item').each(function() { - var _el = Rkns.$(this); - if (_el.attr("data-uri") == _uri) { - _el.addClass("selected"); - } - }); -} - -Rkns.Renderer.Node.prototype.unselect = function(_newTarget) { - if (!_newTarget || _newTarget.node_representation !== this) { - this.edit_button.hide(); - this.remove_button.hide(); - this.link_button.hide(); - this.circle.strokeWidth = 2; - Rkns.$('.Rk-Bin-Item').removeClass("selected"); - } -} - -Rkns.Renderer.Node.prototype.highlight = function() { - this.circle.fillColor = "#ffff80"; - if (this.node_image) { - this.node_image.opacity = .5; - } -} - -Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) { - this.circle.fillColor = "#ffffff"; - if (this.node_image) { - this.node_image.opacity = .9; - } -} - -Rkns.Renderer.Node.prototype.mouseup = function(_event) { - if (!this.renderer.is_dragging) { - this.openEditor(); - } - this.renderer.click_target = null; - this.renderer.is_dragging = false; -} - -Rkns.Renderer.Node.prototype.destroy = function(_event) { - this.super("destroy"); - this.edit_button.destroy(); - this.remove_button.destroy(); - this.link_button.destroy(); - this.circle.remove(); - this.title.remove(); - if (this.node_image) { - this.node_image.remove(); - } -} - -/ / - -Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.Edge.prototype._init = function() { - this.renderer.edge_layer.activate(); - this.type = "Edge"; - this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from")); - this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to")); - this.bundle = this.renderer.addToBundles(this); - this.line = new paper.Path(); - this.line.add([0,0],[0,0],[0,0]); - this.line.__representation = this; - this.line.strokeWidth = 2; - this.arrow = new paper.Path(); - this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]); - this.arrow.__representation = this; - this.text = new paper.PointText(); - this.text.characterStyle = { - fontSize: Rkns.Renderer._EDGE_FONT_SIZE, - fillColor: 'black' - }; - this.text.paragraphStyle.justification = 'center'; - this.text_angle = 0; - this.arrow_angle = 0; - this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null); - this.edit_button.edge_representation = this; - this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null); - this.remove_button.edge_representation = this; -} - -Rkns.Renderer.Edge.prototype.redraw = function() { - var _p0a = this.from_representation.paper_coords, - _p1a = this.to_representation.paper_coords, - _v = _p1a.subtract(_p0a), - _r = _v.length, - _u = _v.divide(_r), - _group_pos = this.bundle.getPosition(this), - _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 _group_pos ), - _p0b = _p0a.add(_delta), /* Adding a 4 px difference / - _p1b = _p1a.add(_delta), / to differentiate inbound and outbound links / - _a = _v.angle, - _handle = _v.divide(3), - _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); - this.paper_coords = _p0b.add(_p1b).divide(2); - this.line.strokeColor = _color; - this.line.segments[0].point = _p0a; - this.line.segments[1].point = this.paper_coords; - this.line.segments[1].handleIn = _handle.multiply(-1); - this.line.segments[1].handleOut = _handle; - this.line.segments[2].point = _p1a; - this.arrow.rotate(_a - this.arrow_angle); - this.arrow.fillColor = _color; - this.arrow.position = this.paper_coords.subtract(_u.multiply(4)); - this.arrow_angle = _a; - if (_a > 90) { - _a -= 180; - } - if (_a < -90) { - _a += 180; - } - this.text.rotate(_a - this.text_angle); - this.text.content = this.model.get("title"); - this.text.position = this.paper_coords; - this.text_angle = _a; - this.edit_button.moveTo(this.paper_coords); - this.remove_button.moveTo(this.paper_coords); -} - -Rkns.Renderer.Edge.prototype.openEditor = function() { - this.renderer.removeRepresentationsOfType("editor"); - var _editor = this.renderer.addRepresentation("EdgeEditor",null); - _editor.edge_representation = this; - _editor.draw(); -} - -Rkns.Renderer.Edge.prototype.select = function() { - this.line.strokeWidth = 4; - this.edit_button.show(); - this.remove_button.show(); -} - -Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) { - if (!_newTarget || _newTarget.edge_representation !== this) { - this.edit_button.hide(); - this.remove_button.hide(); - this.line.strokeWidth = 2; - } -} - -Rkns.Renderer.Edge.prototype.mouseup = function(_event) { - if (!this.renderer.is_dragging) { - this.openEditor(); - } - this.renderer.click_target = null; - this.renderer.is_dragging = false; -} - -Rkns.Renderer.Edge.prototype.paperShift = function(_delta) { - this.from_representation.paperShift(_delta); - this.to_representation.paperShift(_delta); - this.renderer.redraw(); -} - -Rkns.Renderer.Edge.prototype.destroy = function() { - this.super("destroy"); - this.line.remove(); - this.arrow.remove(); - this.text.remove(); - this.edit_button.destroy(); - this.remove_button.destroy(); - var _this = this; - this.bundle.edges = Rkns._(this.bundle.edges).reject(function(_edge) { - return _edge === _this; - }); -} - -/ / - -Rkns.Renderer.TempEdge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.TempEdge.prototype._init = function() { - this.renderer.edge_layer.activate(); - this.type = "temp-edge"; - - var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color") || "#000000"; - this.line = new paper.Path(); - this.line.strokeColor = _color; - this.line.add([0,0],[0,0]); - this.line.__representation = this; - this.arrow = new paper.Path(); - this.arrow.fillColor = _color; - this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]); - this.arrow.__representation = this; - this.arrow_angle = 0; -} - -Rkns.Renderer.TempEdge.prototype.redraw = function() { - var _p0 = this.from_representation.paper_coords, - _p1 = this.end_pos, - _a = _p1.subtract(_p0).angle, - _c = _p0.add(_p1).divide(2); - this.line.segments[0].point = _p0; - this.line.segments[1].point = _p1; - this.arrow.rotate(_a - this.arrow_angle); - this.arrow.position = _c; - this.arrow_angle = _a; -} - -Rkns.Renderer.TempEdge.prototype.paperShift = function(_delta) { - this.end_pos = this.end_pos.add(_delta); - var _hitResult = paper.project.hitTest(this.end_pos); - this.renderer.findTarget(_hitResult); - this.redraw(); -} - -Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) { - var _hitResult = paper.project.hitTest(_event.point), - _model = this.from_representation.model, - _endDrag = true; - if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { - var _target = _hitResult.item.__representation; - if (_target.type === "Node" && _model !== _target.model) { - var _data = { - id: Rkns.Utils.getUID('edge'), - created_by: this.renderer.renkan.current_user, - from: _model.get("_id"), - to: _target.model.get("_id") - }; - this.project.addEdge(_data); - } - if (_model === _target.model || (_target.node_representation && _target.node_representation.model === _model)) { - _endDrag = false; - this.renderer.is_dragging = true; - } - } - if (_endDrag) { - this.renderer.click_target = null; - this.renderer.is_dragging = false; - this.renderer.removeRepresentation(this); - paper.view.draw(); - } -} - -Rkns.Renderer.TempEdge.prototype.destroy = function() { - this.arrow.remove(); - this.line.remove(); -} - -/ / - -Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.NodeEditor.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "editor"; - this.editor_block = new paper.Path(); - var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]}); - this.editor_block.add.apply(this.editor_block, _pts); - this.editor_block.strokeWidth = 2; - this.editor_block.strokeColor = "#999999"; - this.editor_block.fillColor = "#e0e0e0"; - this.editor_block.opacity = .8; - this.editor_$ = Rkns.$('
') - .appendTo(this.renderer.editor_$) - .css({ - position: "absolute", - opacity: .8 - }) - .hide(); -} - -Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template( - '
×<%=l10n.edit_node%>
' - + '
<%=l10n.edit_title%>
' - + '
<%=l10n.edit_uri%>
' - + '
<%=l10n.edit_description%><%=node.description%>
' - + '
Node color
' - + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "
"},"")); %>
Choose color
' - + '
<%=l10n.edit_image%>
' - + '
<%=l10n.created_by%> <%=node.created_by_title%>
' -); - -Rkns.Renderer.NodeEditor.prototype.draw = function() { - var _model = this.node_representation.model, - _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER; - this.editor_$ - .html(this.template({ - node: { - title: _model.get("title"), - uri: _model.get("uri"), - description: _model.get("description"), - image: _model.get("image") || "", - color: _model.get("color") || _created_by.get("color"), - created_by_color: _created_by.get("color"), - created_by_title: _created_by.get("title") - }, - l10n: this.renderer.renkan.l10n - })); - this.redraw(); - var _this = this; - this.editor_$.find(".Rk-CloseX").click(function() { - _this.renderer.removeRepresentation(_this); - paper.view.draw(); - }); - this.editor_$.find("input, textarea").bind("keyup change", function() { - var _uri = _this.editor_$.find(".Rk-Edit-URI").val(), - _image = _this.editor_$.find(".Rk-Edit-Image").val(); - _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image); - _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri); - var _data = { - title: _this.editor_$.find(".Rk-Edit-Title").val(), - description: _this.editor_$.find(".Rk-Edit-Description").val(), - uri: _uri, - image: _image - } - _model.set(_data); - _this.redraw(); - }); - this.editor_$.find("img").load(function() { - _this.redraw(); - }) - this.editor_$.find(".Rk-Edit-Title")[0].focus(); - this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( - function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); }, - function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); } - ); - this.editor_$.find(".Rk-Edit-ColorPicker li").hover( - function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); }, - function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) } - ).click(function() { - _model.set("color", $(this).attr("data-color")); - _this.redraw(); - }); -} - -Rkns.Renderer.NodeEditor.prototype.redraw = function() { - var _coords = this.node_representation.paper_coords; - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$); - this.editor_$.show(); - paper.view.draw(); -} - -Rkns.Renderer.NodeEditor.prototype.destroy = function() { - this.editor_block.remove(); - this.editor_$.detach(); -} - -/ / - -Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.EdgeEditor.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "editor"; - this.editor_block = new paper.Path(); - var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]}); - this.editor_block.add.apply(this.editor_block, _pts); - this.editor_block.strokeWidth = 2; - this.editor_block.strokeColor = "#999999"; - this.editor_block.fillColor = "#e0e0e0"; - this.editor_block.opacity = .8; - this.editor_$ = Rkns.$('
') - .appendTo(this.renderer.editor_$) - .css({ - position: "absolute", - opacity: .8 - }) - .hide(); -} - -Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template( - '
×<%=l10n.edit_edge%>
' - + '
<%=l10n.edit_title%>
' - + '
<%=l10n.edit_uri%>
' - + '
Edge color:
' - + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "
"},"")); %>
Choose color
' - + '
<%=l10n.edit_from%><%=edge.from_title%>
' - + '
<%=l10n.edit_to%><%=edge.to_title%>
' - + '
<%=l10n.created_by%> <%=edge.created_by_title%>
' -); - -Rkns.Renderer.EdgeEditor.prototype.draw = function() { - var _model = this.edge_representation.model, - _from_model = _model.get("from"), - _to_model = _model.get("to"), - _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER; - this.editor_$ - .html(this.template({ - edge: { - title: _model.get("title"), - uri: _model.get("uri"), - description: _model.get("description"), - color: _model.get("color") || _created_by.get("color"), - from_title: _from_model.get("title"), - to_title: _to_model.get("title"), - from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"), - to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"), - created_by_color: _created_by.get("color"), - created_by_title: _created_by.get("title") - }, - l10n: this.renderer.renkan.l10n - })); - this.redraw(); - var _this = this; - this.editor_$.find(".Rk-CloseX").click(function() { - _this.renderer.removeRepresentation(_this); - paper.view.draw(); - }); - this.editor_$.find("input, textarea").bind("keyup change", function() { - _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val()); - var _data = { - title: _this.editor_$.find(".Rk-Edit-Title").val(), - uri: _this.editor_$.find(".Rk-Edit-URI").val() - } - _model.set(_data); - _this.redraw(); - }); - this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( - function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); }, - function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); } - ); - this.editor_$.find(".Rk-Edit-ColorPicker li").hover( - function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); }, - function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); } - ).click(function() { - _model.set("color", $(this).attr("data-color")); - _this.redraw(); - }); -} -Rkns.Renderer.EdgeEditor.prototype.redraw = function() { - var _coords = this.edge_representation.paper_coords; - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$); - this.editor_$.show(); - paper.view.draw(); -} - -Rkns.Renderer.EdgeEditor.prototype.destroy = function() { - this.editor_block.remove(); - this.editor_$.detach(); -} - -/ / - -Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.NodeEditButton.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "Node-edit-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.l10n.caption_edit); -} - -Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) { - this.sector.moveTo(_pos); -} - -Rkns.Renderer.NodeEditButton.prototype.show = function() { - this.sector.show(); -} - -Rkns.Renderer.NodeEditButton.prototype.hide = function() { - this.sector.hide(); -} - -Rkns.Renderer.NodeEditButton.prototype.select = function() { - this.sector.select(); -} - -Rkns.Renderer.NodeEditButton.prototype.unselect = function(_newTarget) { - this.sector.unselect(); - if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) { - this.node_representation.unselect(); - } -} - -Rkns.Renderer.NodeEditButton.prototype.mouseup = function() { - if (!this.renderer.is_dragging) { - this.node_representation.openEditor(); - } -} - -Rkns.Renderer.NodeEditButton.prototype.destroy = function() { - this.sector.destroy(); -} - -/ / - -Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.NodeRemoveButton.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "Node-remove-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.l10n.caption_remove); -} - -Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) { - this.sector.moveTo(_pos); -} - -Rkns.Renderer.NodeRemoveButton.prototype.show = function() { - this.sector.show(); -} - -Rkns.Renderer.NodeRemoveButton.prototype.hide = function() { - this.sector.hide(); -} - -Rkns.Renderer.NodeRemoveButton.prototype.select = function() { - this.sector.select(); -} - -Rkns.Renderer.NodeRemoveButton.prototype.unselect = function(_newTarget) { - this.sector.unselect(); - if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) { - this.node_representation.unselect(); - } -} - -Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() { - this.renderer.removeRepresentationsOfType("editor"); - if (confirm('Do you really wish to remove node "' + this.node_representation.model.get("title") + '"?')) { - this.project.removeNode(this.node_representation.model); - } -} - -Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() { - this.sector.destroy(); -} - -/ / - -Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.NodeLinkButton.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "Node-link-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, this.renderer.renkan.static_url+'img/link.png', this.renderer.renkan.l10n.caption_link); -} - -Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) { - this.sector.moveTo(_pos); -} - -Rkns.Renderer.NodeLinkButton.prototype.show = function() { - this.sector.show(); -} - -Rkns.Renderer.NodeLinkButton.prototype.hide = function() { - this.sector.hide(); -} - -Rkns.Renderer.NodeLinkButton.prototype.select = function() { - this.sector.select(); -} - -Rkns.Renderer.NodeLinkButton.prototype.unselect = function(_newTarget) { - this.sector.unselect(); - if (!_newTarget || (_newTarget !== this.node_representation && _newTarget.node_representation !== this.node_representation)) { - this.node_representation.unselect(); - } -} - -Rkns.Renderer.NodeLinkButton.prototype.destroy = function() { - this.sector.destroy(); -} - -/ / - -Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.EdgeEditButton.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "Edge-edit-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, this.renderer.renkan.static_url+'img/edit.png', this.renderer.renkan.l10n.caption_edit); -} - -Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) { - this.sector.moveTo(_pos); -} - -Rkns.Renderer.EdgeEditButton.prototype.show = function() { - this.sector.show(); -} - -Rkns.Renderer.EdgeEditButton.prototype.hide = function() { - this.sector.hide(); -} - -Rkns.Renderer.EdgeEditButton.prototype.select = function() { - this.sector.select(); -} - -Rkns.Renderer.EdgeEditButton.prototype.unselect = function(_newTarget) { - this.sector.unselect(); - if (!_newTarget || (_newTarget !== this.edge_representation && _newTarget.edge_representation !== this.edge_representation)) { - this.edge_representation.unselect(); - } -} - -Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() { - if (!this.renderer.is_dragging) { - this.edge_representation.openEditor(); - } -} - -Rkns.Renderer.EdgeEditButton.prototype.destroy = function() { - this.sector.destroy(); -} - -/ / - -Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.EdgeRemoveButton.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "Edge-remove-button"; - this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, this.renderer.renkan.static_url+'img/remove.png', this.renderer.renkan.l10n.caption_remove); -} -Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) { - this.sector.moveTo(_pos); -} - -Rkns.Renderer.EdgeRemoveButton.prototype.show = function() { - this.sector.show(); -} - -Rkns.Renderer.EdgeRemoveButton.prototype.hide = function() { - this.sector.hide(); -} - -Rkns.Renderer.EdgeRemoveButton.prototype.select = function() { - this.sector.select(); -} - -Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function(_newTarget) { - this.sector.unselect(); - if (!_newTarget || (_newTarget !== this.edge_representation && _newTarget.edge_representation !== this.edge_representation)) { - this.edge_representation.unselect(); - } -} - -Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() { - this.renderer.removeRepresentationsOfType("editor"); - if (confirm('Do you really wish to remove edge "' + this.edge_representation.model.get("title") + '"?')) { - this.project.removeEdge(this.edge_representation.model); - } -} - -Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() { - this.sector.destroy(); -} - -/ / - -Rkns.Renderer.Scene = function(_renkan) { - this.renkan = _renkan; - this.$ = Rkns.$(".Rk-Render"); - this.representations = []; - this.$.html(this.template(_renkan)); - this.canvas_$ = this.$.find(".Rk-Canvas"); - this.editor_$ = this.$.find(".Rk-Editor"); - this.notif_$ = this.$.find(".Rk-Notifications"); - paper.setup(this.canvas_$[0]); - this.scale = 1; - this.offset = paper.view.center; - this.totalScroll = 0; - this.click_target = null; - this.selected_target = null; - this.edge_layer = new paper.Layer(); - this.node_layer = new paper.Layer(); - this.overlay_layer = new paper.Layer(); - this.bundles = []; - this.click_mode = false; - var _tool = new paper.Tool(), - _this = this; - _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE; - _tool.onMouseMove = function(_event) { - _this.onMouseMove(_event); - } - _tool.onMouseDown = function(_event) { - _this.onMouseDown(_event); - } - _tool.onMouseDrag = function(_event) { - _this.onMouseDrag(_event); - } - this.canvas_$.mouseup(function(_event) { - _this.onMouseUp(_event); - }); - this.canvas_$.mousewheel(function(_event, _delta) { - _this.onScroll(_event, _delta); - }); - this.canvas_$.dblclick(function(_event) { - _this.onDoubleClick(_event); - }); - this.canvas_$.mouseenter(function(_event) { - _this.onMouseEnter(_event); - }); - this.editor_$.find(".Rk-ZoomOut").click(function() { - _this.offset = new paper.Point([ - _this.canvas_$.width(), - _this.canvas_$.height() - ]).multiply( .5 ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 )); - _this.setScale( _this.scale * Math.SQRT1_2 ); - _this.redraw(); - }); - this.editor_$.find(".Rk-ZoomIn").click(function() { - _this.offset = new paper.Point([ - _this.canvas_$.width(), - _this.canvas_$.height() - ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 )); - _this.setScale( _this.scale * Math.SQRT2 ); - _this.redraw(); - }); - this.$.find(".Rk-CurrentUser").mouseenter( - function() { _this.$.find(".Rk-UserList").slideDown() } - ); - this.$.find(".Rk-Users").mouseleave( - function() { _this.$.find(".Rk-UserList").slideUp(); } - ); - this.$.find(".Rk-FullScreen-Button").click(function() { - var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen, - _el = _this.renkan.$[0], - _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"], - _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"]; - if (_isFull) { - for (var i = 0; i < _cancelMethods.length; i++) { - if (typeof document[_cancelMethods[i]] === "function") { - document[_cancelMethods[i]](); - break; - } - } - } else { - for (var i = 0; i < _requestMethods.length; i++) { - if (typeof _el[_requestMethods[i]] === "function") { - _el[_requestMethods[i]](); - break; - } - } - } - }); - this.$.find(".Rk-AddNode-Button").click(function() { - if (_this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) { - _this.click_mode = false; - _this.notif_$.hide(); - } else { - _this.click_mode = Rkns.Renderer._CLICKMODE_ADDNODE; - _this.notif_$.html(_renkan.l10n.notif_add_node).fadeIn(); - } - }); - this.$.find(".Rk-AddEdge-Button").click(function() { - if (_this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE || _this.click_mode === Rkns.Renderer._CLICKMODE_ENDEDGE) { - _this.click_mode = false; - _this.notif_$.hide(); - } else { - _this.click_mode = Rkns.Renderer._CLICKMODE_STARTEDGE; - _this.notif_$.html(_renkan.l10n.notif_start_edge).fadeIn(); - } - }); - this.$.find(".Rk-TopBar-Button").mouseover(function() { - Rkns.$(this).find(".Rk-TopBar-Tooltip").show(); - }).mouseout(function() { - Rkns.$(this).find(".Rk-TopBar-Tooltip").hide(); - }); - - paper.view.onResize = function(_event) { - _this.offset = _this.offset.add(_event.delta.divide(2)); - _this.redraw(); - } - - var _thRedraw = Rkns._.throttle(function() { - _this.redraw(); - },50); - - this.addRepresentations("Node", this.renkan.project.get("nodes")); - this.addRepresentations("Edge", this.renkan.project.get("edges")); - this.renkan.project.on("change:title", function() { - _this.$.find(".Rk-PadTitle").val(_renkan.project.get("title")); - }); - - this.$.find(".Rk-PadTitle").on("keyup input paste", function() { - _renkan.project.set({"title": $(this).val()}); - }) - - this.renkan.project.get("users").each(function(_user) { - _this.addUser(_user); - }); - - this.renkan.project.on("add:users", function(_user) { - _this.addUser(_user); - }); - this.renkan.project.on("add:nodes", function(_node) { - _this.addRepresentation("Node", _node); - _thRedraw(); - }); - this.renkan.project.on("add:edges", function(_edge) { - _this.addRepresentation("Edge", _edge); - _thRedraw(); - }); - - this.redraw(); -} - -Rkns.Renderer.Scene.prototype.template = Rkns._.template( - '
" placeholder="<%=l10n.untitled_project%>" />' - + '
<unknown user>
' - + '
<%=l10n.full_screen%>
' - + '
<%=l10n.add_node%>
' - + '
<%=l10n.add_edge%>
' - + '
<%=l10n.save_project%>
' - + '
' - + '
' - + '
' - + '
' -); - -Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) { - var _bundle = Rkns._(this.bundles).find(function(_bundle) { - return ( - ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation ) - || ( _bundle.from === _edgeRepr.to_representation && _bundle.to === _edgeRepr.from_representation ) - ); - }); - if (typeof _bundle !== "undefined") { - _bundle.edges.push(_edgeRepr) - } else { - _bundle = { - from: _edgeRepr.from_representation, - to: _edgeRepr.to_representation, - edges: [ _edgeRepr ], - getPosition: function(_er) { - var _dir = (_er.from_representation === this.from) ? 1 : -1; - return _dir * ( Rkns._(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 ); - } - } - this.bundles.push(_bundle); - } - return _bundle; -} - -Rkns.Renderer.Scene.prototype.setScale = function(_newScale) { - this.scale = _newScale; - this.redraw(); -} - -Rkns.Renderer.Scene.prototype.autoScale = function() { - var nodes = this.renkan.project.get("nodes") - if (nodes.length > 1) { - var _xx = nodes.map(function(_node) { return _node.get("position").x }), - _yy = nodes.map(function(_node) { return _node.get("position").y }), - _minx = Math.min.apply(Math, _xx), - _miny = Math.min.apply(Math, _yy), - _maxx = Math.max.apply(Math, _xx), - _maxy = Math.max.apply(Math, _yy); - var _scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny)); - this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)); - this.setScale(_scale); - } - if (nodes.length === 1) { - this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])); - this.setScale(1); - } -} - -Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) { - return _point.multiply(this.scale).add(this.offset); -} - - -Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) { - return _point.subtract(this.offset).divide(this.scale); -} - -Rkns.Renderer.Scene.prototype.addRepresentation = function(_type, _model) { - var _repr = new Rkns.Renderer[_type](this, _model); - this.representations.push(_repr); - return _repr; -} - -Rkns.Renderer.Scene.prototype.addRepresentations = function(_type, _collection) { - var _this = this; - _collection.forEach(function(_model) { - _this.addRepresentation(_type, _model); - }); -} - -Rkns.Renderer.Scene.prototype.userTemplate = Rkns._.template( - '
<%=name%>
' -); - -Rkns.Renderer.Scene.prototype.addUser = function(_user) { - if (_user.get("_id") === this.renkan.current_user) { - this.$.find(".Rk-CurrentUser-Name").text(_user.get("title")); - this.$.find(".Rk-CurrentUser-Color").css("background", _user.get("color")); - } else { - this.$.find(".Rk-UserList").append( - Rkns.$( - this.userTemplate({ - name: _user.get("title"), - background: _user.get("color") - }) - ) - ); - } -} - -Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) { - _representation.destroy(); - this.representations = Rkns._(this.representations).reject( - function(_repr) { - return _repr == _representation - } - ); -} - -Rkns.Renderer.Scene.prototype.getRepresentationByModel = function(_model) { - return Rkns._(this.representations).find(function(_repr) { - return _repr.model === _model; - }); -} - -Rkns.Renderer.Scene.prototype.removeRepresentationsOfType = function(_type) { - var _representations = Rkns._(this.representations).filter(function(_repr) { - return _repr.type == _type; - }), - _this = this; - Rkns._(_representations).each(function(_repr) { - _this.removeRepresentation(_repr); - }); -} - -Rkns.Renderer.Scene.prototype.highlightModel = function(_model) { - var _repr = this.getRepresentationByModel(_model); - if (_repr) { - _repr.highlight(); - } -} - -Rkns.Renderer.Scene.prototype.unhighlightAll = function(_model) { - Rkns._(this.representations).each(function(_repr) { - _repr.unhighlight(); - }); -} - -Rkns.Renderer.Scene.prototype.redraw = function() { - Rkns._(this.representations).each(function(_representation) { - _representation.redraw(); - }); - paper.view.draw(); -} - -Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) { - var _tmpEdge = this.addRepresentation("TempEdge",null); - _tmpEdge.end_pos = _point; - _tmpEdge.from_representation = _from; - _tmpEdge.redraw(); - this.click_target = _tmpEdge; -} - -Rkns.Renderer.Scene.prototype.findTarget = function(_hitResult) { - if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { - var _newTarget = _hitResult.item.__representation; - if (this.selected_target !== _hitResult.item.__representation) { - if (this.selected_target) { - this.selected_target.unselect(_newTarget); - } - _newTarget.select(this.selected_target); - this.selected_target = _newTarget; - } - } else { - if (this.selected_target) { - this.selected_target.unselect(null); - } - this.selected_target = null; - } -} - -Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) { - var _hitResult = paper.project.hitTest(_event.point); - if (this.is_dragging) { - if (this.click_target && typeof this.click_target.paperShift === "function") { - this.click_target.paperShift(_event.delta); - } else { - this.offset = this.offset.add(_event.delta); - this.redraw(); - } - } else { - this.findTarget(_hitResult); - } -} - -Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) { - if (!this.click_target || this.click_target.type !== "temp-edge") { - this.is_dragging = false; - var _hitResult = paper.project.hitTest(_event.point); - if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { - this.click_target = _hitResult.item.__representation; - if (this.click_target.type === "Node-link-button") { - this.removeRepresentationsOfType("editor"); - this.addTempEdge(this.click_target.node_representation, _event.point); - } - } else { - this.click_target = null; - if (this.click_mode === Rkns.Renderer._CLICKMODE_ADDNODE) { - var _coords = this.toModelCoords(_event.point), - _data = { - id: Rkns.Utils.getUID('node'), - created_by: this.renkan.current_user, - position: { - x: _coords.x, - y: _coords.y - } - }; - _node = this.renkan.project.addNode(_data); - this.getRepresentationByModel(_node).openEditor(); - } - } - } - if (this.click_mode) { - if (this.click_mode === Rkns.Renderer._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") { - this.removeRepresentationsOfType("editor"); - this.addTempEdge(this.click_target, _event.point); - this.click_mode = Rkns.Renderer._CLICKMODE_ENDEDGE; - this.notif_$.fadeOut(function() { - Rkns.$(this).html(_renkan.l10n.notif_end_edge).fadeIn(); - }); - } else { - this.notif_$.hide(); - this.click_mode = false; - } - } -} - -Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) { - this.is_dragging = true; - this.onMouseMove(_event); -} - -Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) { - if (this.click_target) { - var _off = this.canvas_$.offset(); - this.click_target.mouseup( - { - point: new paper.Point([ - _event.pageX - _off.left, - _event.pageY - _off.top - ]) - } - ); - } else { - this.click_target = null; - this.is_dragging = false; - } -} - -Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) { - this.totalScroll += _scrolldelta; - if (Math.abs(this.totalScroll) >= 1) { - var _off = this.canvas_$.offset(), - _delta = new paper.Point([ - _event.pageX - _off.left, - _event.pageY - _off.top - ]).subtract(this.offset).multiply( Math.SQRT2 - 1 ); - if (this.totalScroll > 0) { - this.offset = this.offset.subtract(_delta); - this.setScale( this.scale * Math.SQRT2 ); - } else { - this.offset = this.offset.add(_delta.divide( Math.SQRT2 )); - this.setScale( this.scale * Math.SQRT1_2); - } - this.totalScroll = 0; - this.redraw(); - } -} - -Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) { - var _off = this.canvas_$.offset(), - _point = new paper.Point([ - _event.pageX - _off.left, - _event.pageY - _off.top - ]); - var _hitResult = paper.project.hitTest(_point); - if (!_hitResult || typeof _hitResult.item.__representation === "undefined") { - var _coords = this.toModelCoords(_point), - _data = { - id: Rkns.Utils.getUID('node'), - created_by: this.renkan.current_user, - position: { - x: _coords.x, - y: _coords.y - } - }; - _node = this.renkan.project.addNode(_data); - this.getRepresentationByModel(_node).openEditor(); - } - paper.view.draw(); -} - -Rkns.Renderer.Scene.prototype.onMouseEnter = function(_event) { - var _newEl = this.renkan.selected_bin_item; - if (_newEl) { - var _off = this.canvas_$.offset(), - _point = new paper.Point([ - _event.pageX - _off.left, - _event.pageY - _off.top - ]), - _coords = this.toModelCoords(_point), - _data = { - id: Rkns.Utils.getUID('node'), - created_by: this.renkan.current_user, - uri: _newEl.uri, - title: _newEl.title, - description: _newEl.description, - image: _newEl.image, - position: { - x: _coords.x, - y: _coords.y - } - }; - var _node = this.renkan.project.addNode(_data); - this.renkan.selected_bin_item = null; - this.is_dragging = true; - this.click_target = this.getRepresentationByModel(_node); - } -} \ No newline at end of file diff -r 01f66ed90e32 -r 87569ad0ff53 server/src/main/webapp/static/js/random-data.js --- a/server/src/main/webapp/static/js/random-data.js Wed Feb 13 13:41:19 2013 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,42 +0,0 @@ -Rkns.randomData = function(_renkan, _opts) { - _opts = _opts || {}; - _opts.user_count = _opts.user_count || 5; - _opts.node_count = _opts.node_count || 20; - _opts.edge_count = _opts.edge_count || 2 * _opts.node_count; - _opts.user_colors = _opts.user_colors || ["#ff0000", "#008000", "#0000ff", "#808000", "#808080", "#c000c0", "#00c0c0"]; - var _proj = _renkan.project - for (var i = 0; i < _opts.user_count; i++) { - _proj.addUser({ - id: "user-"+i, - title: "User #"+(1+i), - color: _opts.user_colors[i] - }); - } - for (var i = 0; i < _opts.node_count; i++) { - _proj.addNode({ - id: "node-"+i, - title: "Node #"+(1+i), - created_by: "user-" + Math.floor(_opts.user_countMath.random()), - position: { - x: 300 Math.cos(2 * Math.PI * i / _opts.node_count), - y: 300 * Math.sin(2 * Math.PI * i / _opts.node_count) - } - }); - } - for (var i = 0; i < _opts.node_count; i++) { - var _from, _to; - _from = _to = Math.floor(_opts.node_countMath.random()); - while(_from === _to) { - _to = Math.floor(_opts.node_countMath.random()); - } - _proj.addEdge({ - id: "edge-"+i, - title: "Edge #"+(1+i), - created_by: "user-" + Math.floor(_opts.user_countMath.random()), - from: "node-" + _from, - to: "node-" + _to - }); - } - _renkan.current_user = "user-0"; - _renkan.renderer.autoScale(); -} diff -r 01f66ed90e32 -r 87569ad0ff53 server/src/main/webapp/static/js/renkan-publish.js --- a/server/src/main/webapp/static/js/renkan-publish.js Wed Feb 13 13:41:19 2013 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,1085 +0,0 @@ -/ - * Copyright 2012 Institut de recherche et d'innovation - * contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron - * - * contact@iri.centrepompidou.fr - * http://www.iri.centrepompidou.fr - * - * This software is a computer program whose purpose is to show and add annotations on a video . - * This software is governed by the CeCILL-C license under French law and - * abiding by the rules of distribution of free software. You can use, - * modify and/ or redistribute the software under the terms of the CeCILL-C - * license as circulated by CEA, CNRS and INRIA at the following URL - * "http://www.cecill.info". - * - * The fact that you are presently reading this means that you have had - * knowledge of the CeCILL-C license and that you accept its terms. -/ - -if (typeof Rkns !== "object") { - Rkns = {} -} - -Rkns.$ = jQuery; - -Rkns._ = _; - -Rkns.i18n = { - en: { - zoom_in: "Zoom In", - zoom_out: "Zoom Out", - see_in_project: 'See also "{node}" in "{project}"' - } -} - -Rkns.Utils = { - inherit : function(_baseClass) { - var _class = function() { - _baseClass.apply(this, Array.prototype.slice.call(arguments, 0)); - if (typeof this._init == "function") { - this._init.apply(this, Array.prototype.slice.call(arguments, 0)); - } - } - _class.prototype = new _baseClass(); - return _class; - } -} - -Rkns.Models = {}; - -Rkns.Models.getUID = function(obj) { - var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - var r = Math.random()16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - }); - return obj.type + "-" + guid; -}; - -Rkns.Models.RenkanModel = Backbone.RelationalModel.extend({ - idAttribute : "_id", - constructor: function(options) { - - if (typeof options !== "undefined") { - options._id = options._id || options.id || Rkns.Models.getUID(this); - options.title = options.title || "(untitled " + this.type + ")"; - options.description = options.description || ""; - options.uri = options.uri || ""; - - if(typeof this.prepare === "function") { - options = this.prepare(options); - } - } - Backbone.RelationalModel.prototype.constructor.call(this, options); - }, - validate: function() { - if(!this.type) { - return "object has no type"; - } - }, - addReference : function(_options, _propName, _list, _id, _default) { - var _element = _list.get(_id); - if (typeof _element === "undefined" && typeof _default !== "undefined") { - _options[_propName ] = _default; - } - else { - _options[_propName ] = _element; - } - } -}); - -// USER -Rkns.Models.User = Rkns.Models.RenkanModel.extend({ - type: "user", - prepare: function(options) { - options.color = options.color || "#666666"; - return options; - }, - toJSON: function() { - return { - id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - color: this.get("color"), - } - }, -}); - -// NODE -Rkns.Models.Node = Rkns.Models.RenkanModel.extend({ - type: "node", - relations: [{ - type: Backbone.HasOne, - key: "created_by", - relatedModel: Rkns.Models.User - }], - prepare: function(options) { - project = options.project; - this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user); - options.description = options.description || ""; - return options; - }, - toJSON: function() { - return { - id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - position: this.get("position"), - image: this.get("image"), - created_by: this.get("created_by").get("_id") - } - }, -}); - -// EDGE -Rkns.Models.Edge = Rkns.Models.RenkanModel.extend({ - type: "edge", - relations: [ - { - type: Backbone.HasOne, - key: "created_by", - relatedModel: Rkns.Models.User - }, - { - type: Backbone.HasOne, - key: "from", - relatedModel: Rkns.Models.Node - }, - { - type: Backbone.HasOne, - key: "to", - relatedModel: Rkns.Models.Node - }, - ], - prepare: function(options) { - project = options.project; - this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user); - this.addReference(options, "from", project.get("nodes"), options.from); - this.addReference(options, "to", project.get("nodes"), options.to); - return options; - }, - toJSON: function() { - return { - id: this.get("_id"), - title: this.get("title"), - uri: this.get("uri"), - description: this.get("description"), - from: this.get("from").get("_id"), - to: this.get("to").get("_id"), - created_by: this.get("created_by").get("_id"), - } - }, -}); - -// PROJECT -Rkns.Models.Project = Rkns.Models.RenkanModel.extend({ - type: "project", - relations: [ - { - type: Backbone.HasMany, - key: "users", - relatedModel: Rkns.Models.User, - reverseRelation: { - key: 'project', - includeInJSON: '_id' - }, - }, - { - type: Backbone.HasMany, - key: "nodes", - relatedModel: Rkns.Models.Node, - reverseRelation: { - key: 'project', - includeInJSON: '_id' - }, - }, - { - type: Backbone.HasMany, - key: "edges", - relatedModel: Rkns.Models.Edge, - reverseRelation: { - key: 'project', - includeInJSON: '_id' - }, - } - ], - addUser: function(_props) { - _props.project = this; - var _user = new Rkns.Models.User(_props); - this.get("users").push(_user); - return _user; - }, - addNode: function(_props) { - _props.project = this; - var _node = new Rkns.Models.Node(_props); - this.get("nodes").push(_node); - return _node; - }, - addEdge: function(_props) { - _props.project = this; - var _edge = new Rkns.Models.Edge(_props); - this.get("edges").push(_edge); - return _edge; - }, - removeNode: function(_model) { - this.get("nodes").remove(_model); - }, - removeEdge: function(_model) { - this.get("edges").remove(_model); - }, - validate: function(options) { - var _project = this; - Rkns._(options.users).each(function(_item) { - _item.project = _project; - }); - Rkns._(options.nodes).each(function(_item) { - _item.project = _project; - }); - Rkns._(options.edges).each(function(_item) { - _item.project = _project; - }); - }, - // Add event handler to remove edges when a node is removed - initialize: function() { - var _this = this; - this.on("remove:nodes", function(_node) { - _this.get("edges").remove( - _this.get("edges").filter(function(_edge) { - return _edge.get("from") == _node || _edge.get("to") == _node; - }) - ); - }); - } -}); - -/* Point of entry / - -Rkns.Renkan = function(_opts) { - if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") { - _opts.language = "en"; - } - if (typeof _opts.container !== "string") { - _opts.container = "renkan"; - } - if (typeof _opts.search !== "object" || !_opts.search) { - _opts.search = []; - } - this.projects = []; - this.l10n = Rkns.i18n[_opts.language]; - this.$ = Rkns.$("#" + _opts.container); - this.$.html(this.template()); - this.uris = {}; - this.active_project = null; - this.renderer = null; -} - -Rkns.Renkan.prototype.template = Rkns._.template( - '
' -); - -Rkns.Renkan.prototype.addProject = function(_opts) { - var _proj = new Rkns.Models.Project(), - _li = Rkns.$("
").addClass("Rk-Project").text("Untitled #" + (1+this.projects.length)); - this.$.find(".Rk-Project-List").append(_li); - Rkns.loadJson(_proj, _opts); - var _this = this; - _li.click(function() { - _this.renderProject(_proj); - }); - _proj.on("change:title", function() { - _li.html(_proj.get("title")); - }); - _proj.on("select", function() { - _this.$.find(".Rk-Project").removeClass("active"); - _li.addClass("active"); - }); - _proj.on("add:nodes", function(_node) { - var _uri = _node.get("uri"); - if (_uri) { - if (typeof _this.uris[_uri] === "undefined") { - _this.uris[_uri] = []; - } - _this.uris[_uri].push(_node); - } - }); - this.projects.push(_proj); - return _proj; -} - -Rkns.Renkan.prototype.renderProject = function(_project) { - if (_project) { - if (this.renderer) { - this.renderer.destroy(); - } - this.active_project = _project; - this.renderer = new Rkns.Renderer.Scene(this, _project); - this.renderer.autoScale(); - _project.trigger("select"); - } -} - -Rkns.Renkan.prototype.renderProjectAt = function(_index) { - this.renderProject(this.projects[_index]); -} - -Rkns.loadJson = function(_proj, _opts) { - if (typeof _opts.http_method == "undefined") { - _opts.http_method = 'PUT'; - } - var _load = function() { - Rkns.$.getJSON(_opts.url, function(_data) { - _proj.set(_data); - if (typeof _opts.callback === "function") { - _opts.callback(_proj); - } - }); - } - _load(); -} - -Rkns.Renderer = { - _MARGIN_X: 80, - _MARGIN_Y: 50, - _MIN_DRAG_DISTANCE: 2, - _NODE_RADIUS: 20, - _NODE_FONT_SIZE: 10, - _EDGE_FONT_SIZE: 9, - _NODE_MAX_CHAR: 30, - _EDGE_MAX_CHAR: 20, - _ARROW_LENGTH: 16, - _ARROW_WIDTH: 8, - _TOOLTIP_ARROW_LENGTH : 15, - _TOOLTIP_ARROW_WIDTH : 26, - _TOOLTIP_MARGIN : 10, - _TOOLTIP_PADDING : 8, - _TOOLTIP_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']) -} - -Rkns.Renderer.Utils = { - shortenText : function(_text,_length) { - var _rgxp = new RegExp('^(.{' + _length + '}).+$'); - return _text.replace(/(\n|\r|\r\n)/mg,' ').replace(_rgxp,'$1…'); - }, - drawTooltip : function(_coords, _path, _width, _xmargin, _selector) { - _selector.css({ - width: (_width - 2 Rkns.Renderer._TOOLTIP_PADDING), - }); - var _height = _selector.outerHeight() + 2* Rkns.Renderer._TOOLTIP_PADDING, - _isLeft = (_coords.x < paper.view.center.x ? 1 : -1), - _left = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._TOOLTIP_ARROW_LENGTH ), - _right = _coords.x + _isLeft * ( _xmargin + Rkns.Renderer._TOOLTIP_ARROW_LENGTH + _width ), - _top = _coords.y - _height / 2; - if (_top < Rkns.Renderer._TOOLTIP_MARGIN) { - _top = Math.min( Rkns.Renderer._TOOLTIP_MARGIN, _coords.y - Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2 ); - } - var _bottom = _top + _height; - if (_bottom > (paper.view.size.height - Rkns.Renderer._TOOLTIP_MARGIN)) { - _bottom = Math.max( paper.view.size.height - Rkns.Renderer._TOOLTIP_MARGIN, _coords.y + Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2 ); - _top = _bottom - _height; - } - _path.segments[0].point - = _path.segments[7].point - = _coords.add([_isLeft * _xmargin, 0]); - _path.segments[1].point.x - = _path.segments[2].point.x - = _path.segments[5].point.x - = _path.segments[6].point.x - = _left; - _path.segments[3].point.x - = _path.segments[4].point.x - = _right; - _path.segments[2].point.y - = _path.segments[3].point.y - = _top; - _path.segments[4].point.y - = _path.segments[5].point.y - = _bottom; - _path.segments[1].point.y = _coords.y - Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2; - _path.segments[6].point.y = _coords.y + Rkns.Renderer._TOOLTIP_ARROW_WIDTH / 2; - _path.closed = true; - _path.fillColor = new paper.GradientColor(Rkns.Renderer._TOOLTIP_GRADIENT, [0,_top], [0, _bottom]); - _selector.css({ - left: (Rkns.Renderer._TOOLTIP_PADDING + Math.min(_left, _right)), - top: (Rkns.Renderer._TOOLTIP_PADDING + _top) - }); - } -} - -Rkns.Renderer._BaseRepresentation = function(_renderer, _model) { - if (typeof _renderer !== "undefined") { - this.renderer = _renderer; - this.project = _renderer.project; - this.model = _model; - if (this.model) { - var _this = this; - this._selectBinding = function() { - _this.select(); - }; - this._unselectBinding = function() { - _this.unselect(); - } - this._changeBinding = function() { - _this.redraw(); - } - this._removeBinding = function() { - _renderer.removeRepresentation(_this); - _renderer.redraw(); - } - this.model.on("change", this._changeBinding ); - this.model.on("remove", this._removeBinding ); - this.model.on("select", this._selectBinding ); - this.model.on("unselect", this._unselectBinding ); - } - } -} - -Rkns.Renderer._BaseRepresentation.prototype.super = function(_func) { - Rkns.Renderer._BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1)); -} - -Rkns.Renderer._BaseRepresentation.prototype.select = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {} - -Rkns.Renderer._BaseRepresentation.prototype.destroy = function() { - if (this.model) { - this.model.off("change", this._changeBinding ); - this.model.off("remove", this._removeBinding ); - this.model.off("select", this._selectBinding); - this.model.off("unselect", this._unselectBinding); - } -} - -Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.Node.prototype._init = function() { - this.renderer.node_layer.activate(); - this.type = "Node"; - this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS); - this.circle.fillColor = '#ffffff'; - this.circle.__representation = this; - this.title = new paper.PointText([0,0]); - this.title.characterStyle = { - fontSize: Rkns.Renderer._NODE_FONT_SIZE, - fillColor: 'black' - }; - this.title.paragraphStyle.justification = 'center'; - this.title.__representation = this; - this.model_coords = new paper.Point(this.model.get("position")); -} - -Rkns.Renderer.Node.prototype.redraw = function() { - this.paper_coords = this.renderer.toPaperCoords(this.model_coords); - this.circle.position = this.paper_coords; - this.title.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._NODE_MAX_CHAR); - this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]); - this.circle.strokeColor = this.model.get("created_by").get("color"); - var _img = this.model.get("image"); - if (_img && _img !== this.img) { - var _image = new Image(), - _this = this; - _image.onload = function() { - if (_this.node_image) { - _this.node_image.remove(); - } - _this.renderer.node_layer.activate(); - var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height ); - var _raster = new paper.Raster(_image); - var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS); - _raster.scale(_ratio); - _this.node_image = new paper.Group(_clip, _raster); - _this.node_image.opacity = _this.selected ? .5 : .9; - /* This is a workaround to allow clipping at group level / - _this.node_image.clipped = true; - _this.node_image.position = _this.paper_coords; - _this.node_image.__representation = _this; - paper.view.draw(); - } - _image.src = _img; - } - this.img = _img; - if (this.node_image) { - if (!this.img) { - this.node_image.remove(); - delete this.node_image; - } else { - this.node_image.position = this.paper_coords; - } - } -} - -Rkns.Renderer.Node.prototype.paperShift = function(_delta) { - this.paper_coords = this.paper_coords.add(_delta); - this.model_coords = this.renderer.toModelCoords(this.paper_coords); - this.renderer.redraw(); -} - -Rkns.Renderer.Node.prototype.openTooltip = function() { - this.renderer.removeRepresentationsOfType("tooltip"); - var _tooltip = this.renderer.addRepresentation("NodeTooltip",null); - _tooltip.node_representation = this; - _tooltip.draw(); -} - -Rkns.Renderer.Node.prototype.select = function() { - this.selected = true; - this.circle.strokeWidth = 3; - this.openTooltip(); - this.circle.fillColor = "#ffff80"; - if (this.node_image) { - this.node_image.opacity = .5; - } - paper.view.draw(); -} - -Rkns.Renderer.Node.prototype.unselect = function() { - this.selected = false; - this.circle.strokeWidth = 1; - this.circle.fillColor = "#ffffff"; - if (this.node_image) { - this.node_image.opacity = .9; - } - paper.view.draw(); -} - -Rkns.Renderer.Node.prototype.mouseup = function(_event) { -} - -Rkns.Renderer.Node.prototype.destroy = function(_event) { - this.super("destroy"); - this.circle.remove(); - this.title.remove(); - if (this.node_image) { - this.node_image.remove(); - } -} - -/ / - -Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.Edge.prototype._init = function() { - this.renderer.edge_layer.activate(); - this.type = "Edge"; - this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from")); - this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to")); - this.bundle = this.renderer.addToBundles(this); - this.line = new paper.Path(); - this.line.add([0,0],[0,0],[0,0]); - this.line.__representation = this; - this.arrow = new paper.Path(); - this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]); - this.arrow.__representation = this; - this.text = new paper.PointText(); - this.text.characterStyle = { - fontSize: Rkns.Renderer._EDGE_FONT_SIZE, - fillColor: 'black' - }; - this.text.paragraphStyle.justification = 'center'; - this.text.__representation = this; - this.text_angle = 0; - this.arrow_angle = 0; -} - -Rkns.Renderer.Edge.prototype.redraw = function() { - var _p0a = this.from_representation.paper_coords, - _p1a = this.to_representation.paper_coords, - _v = _p1a.subtract(_p0a), - _r = _v.length, - _u = _v.divide(_r), - _group_pos = this.bundle.getPosition(this), - _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 _group_pos ), - _p0b = _p0a.add(_delta), /* Adding a 4 px difference / - _p1b = _p1a.add(_delta), / to differentiate inbound and outbound links / - _a = _v.angle, - _handle = _v.divide(3), - _color = this.model.get("created_by").get("color"); - this.paper_coords = _p0b.add(_p1b).divide(2); - this.line.strokeColor = _color; - this.line.segments[0].point = _p0a; - this.line.segments[1].point = this.paper_coords; - this.line.segments[1].handleIn = _handle.multiply(-1); - this.line.segments[1].handleOut = _handle; - this.line.segments[2].point = _p1a; - this.arrow.rotate(_a - this.arrow_angle); - this.arrow.fillColor = _color; - this.arrow.position = this.paper_coords.subtract(_u.multiply(4)); - this.arrow_angle = _a; - if (_a > 90) { - _a -= 180; - } - if (_a < -90) { - _a += 180; - } - this.text.rotate(_a - this.text_angle); - this.text.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._EDGE_MAX_CHAR); - this.text.position = this.paper_coords; - this.text_angle = _a; -} - -Rkns.Renderer.Edge.prototype.openTooltip = function() { - this.renderer.removeRepresentationsOfType("tooltip"); - var _tooltip = this.renderer.addRepresentation("EdgeTooltip",null); - _tooltip.edge_representation = this; - _tooltip.draw(); -} - -Rkns.Renderer.Edge.prototype.select = function() { - this.line.strokeWidth = 3; - this.openTooltip(); - paper.view.draw(); -} - -Rkns.Renderer.Edge.prototype.unselect = function() { - this.line.strokeWidth = 1; - paper.view.draw(); -} - -Rkns.Renderer.Edge.prototype.mouseup = function(_event) { -} - -Rkns.Renderer.Edge.prototype.paperShift = function(_delta) { - this.from_representation.paperShift(_delta); - this.to_representation.paperShift(_delta); - this.renderer.redraw(); -} - -Rkns.Renderer.Edge.prototype.destroy = function() { - this.super("destroy"); - this.line.remove(); - this.arrow.remove(); - this.text.remove(); - var _this = this; - this.bundle.edges = Rkns._(this.bundle.edges).reject(function(_edge) { - return _edge === _this; - }); -} - -/ / - -Rkns.Renderer.NodeTooltip = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.NodeTooltip.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "tooltip"; - this.tooltip_block = new paper.Path(); - var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]}); - this.tooltip_block.add.apply(this.tooltip_block, _pts); - this.tooltip_block.strokeWidth = 2; - this.tooltip_block.strokeColor = "#999999"; - this.tooltip_block.fillColor = "#e0e0e0"; - this.tooltip_block.opacity = .8; - this.tooltip_$ = Rkns.$('
') - .appendTo(this.renderer.tooltip_$) - .css({ - position: "absolute", - opacity: .8 - }) - .hide(); -} - -Rkns.Renderer.NodeTooltip.prototype.template = Rkns._.template( - '
×<%=a%>
' - + '
<%-description%>
' - + '
' -); - -Rkns.Renderer.NodeTooltip.prototype.draw = function() { - var _model = this.node_representation.model, - _title = _model.get("title"), - _uri = _model.get("uri"); - this.tooltip_$ - .html(this.template({ - a: (_uri ? '' : '' ) + _title + (_uri ? '' : '' ), - description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…') - })) - var _this = this, - _renkan = this.renderer.renkan, - _uris = _renkan.uris[_uri]; - Rkns._(_uris).each(function(_othernode) { - if (_othernode !== _model && _othernode.get("project") !== _this.project) { - var _otherproj = _othernode.get("project"), - _nodetitle = _othernode.get("title") || "Untitled node" - _projtitle = _otherproj.get("title") || "Untitled node", - _html = _renkan.l10n.see_in_project.replace('{node}',Rkns._.escape(_nodetitle)).replace('{project}',Rkns._.escape(_projtitle)), - _li = Rkns.$("
").addClass("Rk-Related").html(_html); - _li.click(function() { - _renkan.renderProject(_otherproj); - Rkns._.defer(function() { - _othernode.trigger("select"); - }); - }); - _this.tooltip_$.append(_li); - } - }); - this.tooltip_$.find(".Rk-CloseX").click(function() { - _this.renderer.removeRepresentation(_this); - paper.view.draw(); - }); - this.redraw(); -} - -Rkns.Renderer.NodeTooltip.prototype.redraw = function() { - var _coords = this.node_representation.paper_coords; - Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$); - this.tooltip_$.show(); -} - -Rkns.Renderer.NodeTooltip.prototype.destroy = function() { - this.tooltip_block.remove(); - this.tooltip_$.detach(); -} - -/ / - -Rkns.Renderer.EdgeTooltip = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation); - -Rkns.Renderer.EdgeTooltip.prototype._init = function() { - this.renderer.overlay_layer.activate(); - this.type = "tooltip"; - this.tooltip_block = new paper.Path(); - var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]}); - this.tooltip_block.add.apply(this.tooltip_block, _pts); - this.tooltip_block.strokeWidth = 2; - this.tooltip_block.strokeColor = "#999999"; - this.tooltip_block.fillColor = "#e0e0e0"; - this.tooltip_block.opacity = .8; - this.tooltip_$ = Rkns.$('
') - .appendTo(this.renderer.tooltip_$) - .css({ - position: "absolute", - opacity: .8 - }) - .hide(); -} - -Rkns.Renderer.EdgeTooltip.prototype.template = Rkns._.template( - '
×<%=a%>
' - + '
<%-description%>
' -); - -Rkns.Renderer.EdgeTooltip.prototype.draw = function() { - var _model = this.edge_representation.model, - _title = _model.get("title"), - _uri = _model.get("uri"); - this.tooltip_$ - .html(this.template({ - a: (_uri ? '' : '' ) + _title + (_uri ? '' : '' ), - description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…') - })); - this.redraw(); - var _this = this; - this.tooltip_$.find(".Rk-CloseX").click(function() { - _this.renderer.removeRepresentation(_this); - paper.view.draw(); - }); -} - -Rkns.Renderer.EdgeTooltip.prototype.redraw = function() { - var _coords = this.edge_representation.paper_coords; - Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$); - this.tooltip_$.show(); - paper.view.draw(); -} - -Rkns.Renderer.EdgeTooltip.prototype.destroy = function() { - this.tooltip_block.remove(); - this.tooltip_$.detach(); -} - -/ / - -Rkns.Renderer.Scene = function(_renkan, _project) { - this.renkan = _renkan; - this.project = _project; - this.$ = Rkns.$(".Rk-Render"); - this.representations = []; - this.$.html(this.template({ - width: this.$.width(), - height: this.$.height(), - l10n: _renkan.l10n - })) - this.canvas_$ = this.$.find(".Rk-Canvas"); - this.tooltip_$ = this.$.find(".Rk-Editor"); - paper.setup(this.canvas_$[0]); - this.scale = 1; - this.offset = paper.view.center; - this.totalScroll = 0; - this.click_target = null; - this.selected_target = null; - this.edge_layer = new paper.Layer(); - this.node_layer = new paper.Layer(); - this.overlay_layer = new paper.Layer(); - this.bundles = []; - var _tool = new paper.Tool(), - _this = this; - _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE; - _tool.onMouseMove = function(_event) { - _this.onMouseMove(_event); - } - _tool.onMouseDown = function(_event) { - _this.onMouseDown(_event); - } - _tool.onMouseDrag = function(_event) { - _this.onMouseDrag(_event); - } - this.canvas_$.mouseup(function(_event) { - _this.onMouseUp(_event); - }); - this.canvas_$.mousewheel(function(_event, _delta) { - _this.onScroll(_event, _delta); - }); - this.tooltip_$.find(".Rk-ZoomOut").click(function() { - _this.offset = new paper.Point([ - _this.canvas_$.width(), - _this.canvas_$.height() - ]).multiply( .5 ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 )); - _this.scale = Math.SQRT1_2; - _this.redraw(); - }); - this.tooltip_$.find(".Rk-ZoomIn").click(function() { - _this.offset = new paper.Point([ - _this.canvas_$.width(), - _this.canvas_$.height() - ]).multiply( .5 ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 )); - _this.scale = Math.SQRT2; - _this.redraw(); - }); - paper.view.onResize = function(_event) { - _this.offset = _this.offset.add(_event.delta.divide(2)); - _this.redraw(); - } - - var _thRedraw = Rkns._.throttle(function() { - _this.redraw(); - },50); - - this.addRepresentations("Node", this.project.get("nodes")); - this.addRepresentations("Edge", this.project.get("edges")); - - this._addNodesBinding = function(_node) { - _this.addRepresentation("Node", _node); - _thRedraw(); - } - this._addEdgesBinding = function(_edge) { - _this.addRepresentation("Edge", _edge); - _thRedraw(); - } - - this.project.on("add:nodes", this._addNodesBinding ); - this.project.on("add:edges", this._addEdgesBinding ); - this.redraw(); -} - -Rkns.Renderer.Scene.prototype.template = Rkns._.template( - '
' - + '
' - + '
' -); - -Rkns.Renderer.Scene.prototype.addToBundles = function(_edgeRepr) { - var _bundle = Rkns._(this.bundles).find(function(_bundle) { - return ( - ( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation ) - || ( _bundle.from === _edgeRepr.to_representation && _bundle.to === _edgeRepr.from_representation ) - ); - }); - if (typeof _bundle !== "undefined") { - _bundle.edges.push(_edgeRepr) - } else { - _bundle = { - from: _edgeRepr.from_representation, - to: _edgeRepr.to_representation, - edges: [ _edgeRepr ], - getPosition: function(_er) { - var _dir = (_er.from_representation === this.from) ? 1 : -1; - return _dir ( Rkns._(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 ); - } - } - this.bundles.push(_bundle); - } - return _bundle; -} - -Rkns.Renderer.Scene.prototype.autoScale = function() { - var nodes = this.project.get("nodes") - if (nodes.length > 1) { - var _xx = nodes.map(function(_node) { return _node.get("position").x }), - _yy = nodes.map(function(_node) { return _node.get("position").y }), - _minx = Math.min.apply(Math, _xx), - _miny = Math.min.apply(Math, _yy), - _maxx = Math.max.apply(Math, _xx), - _maxy = Math.max.apply(Math, _yy); - this.scale = Math.min((paper.view.size.width - 2 * Rkns.Renderer._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * Rkns.Renderer._MARGIN_Y) / (_maxy - _miny)); - this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale)); - this.redraw(); - } - if (nodes.length === 1) { - this.scale = 1; - this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])); - this.redraw(); - } -} - -Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) { - return _point.multiply(this.scale).add(this.offset); -} - - -Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) { - return _point.subtract(this.offset).divide(this.scale); -} - -Rkns.Renderer.Scene.prototype.addRepresentation = function(_type, _model) { - var _repr = new Rkns.Renderer[_type](this, _model); - this.representations.push(_repr); - return _repr; -} - -Rkns.Renderer.Scene.prototype.addRepresentations = function(_type, _collection) { - var _this = this; - _collection.forEach(function(_model) { - _this.addRepresentation(_type, _model); - }); -} - -Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) { - _representation.destroy(); - this.representations = Rkns._(this.representations).reject( - function(_repr) { - return _repr == _representation - } - ); -} - -Rkns.Renderer.Scene.prototype.getRepresentationByModel = function(_model) { - return Rkns._(this.representations).find(function(_repr) { - return _repr.model === _model; - }); -} - -Rkns.Renderer.Scene.prototype.removeRepresentationsOfType = function(_type) { - var _representations = Rkns._(this.representations).filter(function(_repr) { - return _repr.type == _type; - }), - _this = this; - Rkns._(_representations).each(function(_repr) { - _this.removeRepresentation(_repr); - }); -} - -Rkns.Renderer.Scene.prototype.unselectAll = function() { - Rkns._(this.representations).each(function(_repr) { - _repr.model.trigger("unselect"); - }); -} - -Rkns.Renderer.Scene.prototype.redraw = function() { - Rkns._(this.representations).each(function(_representation) { - _representation.redraw(); - }); - paper.view.draw(); -} - -Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) { - var _tmpEdge = this.addRepresentation("TempEdge",null); - _tmpEdge.end_pos = _point; - _tmpEdge.from_representation = _from; - _tmpEdge.redraw(); - this.click_target = _tmpEdge; -} - -Rkns.Renderer.Scene.prototype.findTarget = function(_hitResult) { - if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { - var _newTarget = _hitResult.item.__representation; - if (this.selected_target !== _newTarget && _newTarget.model) { - if (this.selected_target) { - this.selected_target.model.trigger("unselect"); - } - _newTarget.model.trigger("select"); - this.selected_target = _newTarget; - } - } else { - if (!_hitResult) { - this.removeRepresentationsOfType("tooltip"); - } - if (this.selected_target) { - this.selected_target.model.trigger("unselect"); - } - this.selected_target = null; - } -} - -Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) { - var _hitResult = paper.project.hitTest(_event.point); - if (this.is_dragging) { - if (this.click_target && typeof this.click_target.paperShift === "function") { - this.click_target.paperShift(_event.delta); - } else { - this.offset = this.offset.add(_event.delta); - this.redraw(); - } - } else { - this.findTarget(_hitResult); - } -} - -Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) { - this.is_dragging = false; - var _hitResult = paper.project.hitTest(_event.point); - if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { - this.click_target = _hitResult.item.__representation; - } else { - this.click_target = null; - } -} - -Rkns.Renderer.Scene.prototype.onMouseDrag = function(_event) { - this.is_dragging = true; - this.onMouseMove(_event); -} - -Rkns.Renderer.Scene.prototype.onMouseUp = function(_event) { - if (this.click_target) { - var _off = this.canvas_$.offset(); - if (this.click_target.model) { - this.click_target.model.trigger("click"); - } - } - this.is_dragging = false; - this.click_target = null; -} - -Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) { - this.totalScroll += _scrolldelta; - if (Math.abs(this.totalScroll) >= 1) { - var _off = this.canvas_$.offset(), - _delta = new paper.Point([ - _event.pageX - _off.left, - _event.pageY - _off.top - ]).subtract(this.offset).multiply( Math.SQRT2 - 1 ); - if (this.totalScroll > 0) { - this.offset = this.offset.subtract(_delta); - this.scale = Math.SQRT2; - } else { - this.offset = this.offset.add(_delta.divide( Math.SQRT2 )); - this.scale = Math.SQRT1_2; - } - this.totalScroll = 0; - this.redraw(); - } -} - -Rkns.Renderer.Scene.prototype.destroy = function() { - this.project.off("add:nodes", this._addNodesBinding ); - this.project.off("add:edges", this._addEdgesBinding ); - Rkns._(this.representations).each(function(_repr) { - _repr.destroy(); - }); - this.$.html(""); - paper.remove(); -} - diff -r 01f66ed90e32 -r 87569ad0ff53 server/src/main/webapp/static/js/twitter-bin.js --- a/server/src/main/webapp/static/js/twitter-bin.js Wed Feb 13 13:41:19 2013 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,154 +0,0 @@ -Rkns.Twitter = { -} - -Rkns.Twitter.Search = function(_renkan, _opts) { - this.renkan = _renkan; - this.opts = _opts; -} - -Rkns.Twitter.Search.prototype.getBgClass = function() { - return "Rk-Twitter-Icon"; -} - -Rkns.Twitter.Search.prototype.getSearchTitle = function() { - return this.renkan.l10n.search_on_twitter; -} - -Rkns.Twitter.Search.prototype.search = function(_q) { - this.renkan.tabs.push( - new Rkns.Twitter.Bin(this.renkan, { - search: _q - }) - ); -} - -Rkns.Twitter.Bin = Rkns.Utils.inherit(Rkns._BaseBin); - -Rkns.Twitter.Bin.prototype.tweetTemplate = Rkns._.template( - '
' - + '' - + '
@<%=tweet.from_user%> (<%=tweet.from_user_name%>)
' - + '
<%=date%>
' - + '
<%=text%>
' - + '
show original · ' - + 'reply · ' - + 'retweet · ' - + 'favorite
' -); - -Rkns.Twitter.Bin.prototype._init = function(_renkan, _opts) { - this.renkan = _renkan; - this.search = _opts.search; - this.title_icon_$.addClass('Rk-Twitter-Title-Icon'); - this.title_$.html(this.search).addClass("Rk-Twitter-Title"); - this.refresh(); -} - -Rkns.Twitter.Bin.prototype.render = function(searchstr) { - var _rgxp = new RegExp('('+(searchstr || this.search).replace(/(\W)/g,'\\$1')+')','gi'); - if (searchstr) { - var rxtest = new RegExp(searchstr.replace(/(\W)/g,'\\$1'),'i'); - } - function highlight(_text) { - return _text.replace(_rgxp, "$1"); - } - var _html = "" - _this = this, - count = 0; - Rkns._(this.data.results).each(function(_result) { - if (searchstr && !rxtest.test(_result.text)) { - return; - } - count++; - var _entities = [], - _users = _result.text.match(/@[\w_]+/gm), - _lastpos = 0; - if (_users) { - for (var _i = 0; _i < _users.length; _i++) { - var _m = _users[_i], - _start = _lastpos + _result.text.substr(_lastpos).search(_m), - _lastpos = _start + _m.length; - _entities.push({ - "text" : _m, - "start" : _start, - "end" : _lastpos, - "link" :'', - }); - } - } - var _hashes = _result.text.match(/([^&]|^)#[^\s,.!?=#@&;()]+/gm), - _lastpos = 0; - if (_hashes) { - for (var _i = 0; _i < _hashes.length; _i++) { - var _m = _hashes[_i], - _h = ( _m[0] == '#' ? _m : _m.substr(1) ), - _start = _lastpos + _result.text.substr(_lastpos).search(_h), - _lastpos = _start + _h.length; - _entities.push({ - "text" : _h, - "start" : _start, - "end" : _lastpos, - "link" :'', - }); - } - } - - var _urls = _result.text.match(/(www\.|https?:\/\/)[\w./_\-]+/gim), - _lastpos = 0; - if (_urls) { - for (var _i = 0; _i < _urls.length; _i++) { - var _m = _urls[_i], - _start = _lastpos + _result.text.substr(_lastpos).search(_m), - _lastpos = _start + _m.length; - _entities.push({ - "text" : _m, - "start" : _start, - "end" : _lastpos, - "link" :'', - }); - } - } - _entities = Rkns._(_entities).sortBy(function(a) { return a.start }); - var _lastend = 0, - _text = Rkns._(_entities).map(function(_e) { - var _txt = highlight(_result.text.substring(_lastend, _e.start)) + _e.link + highlight(_e.text) + ''; - _lastend = _e.end; - return _txt; - }).join("") + highlight(_result.text.substring(_lastend)); - - _html += _this.tweetTemplate({ - tweet: _result, - date: new Date(_result.created_at.replace(/(\+|-)/,'UTC$1')).toLocaleString(), - text: _text - }); - }); - this.main_$.html(_html); - if (searchstr && count) { - this.count_$.text(count).show(); - } else { - this.count_$.hide(); - } - if (searchstr && !count) { - this.$.hide(); - } else { - this.$.show(); - } - this.renkan.resizeBins(); -} - -Rkns.Twitter.Bin.prototype.refresh = function() { - var _this = this; - Rkns.$.ajax({ - url: "http://search.twitter.com/search.json", - dataType: "jsonp", - data: { - q: this.search, - rpp: 100 - }, - success: function(_data) { - _this.data = _data; - _this.render(); - } - }); -} diff -r 01f66ed90e32 -r 87569ad0ff53 server/src/main/webapp/static/js/wikipedia-bin.js --- a/server/src/main/webapp/static/js/wikipedia-bin.js Wed Feb 13 13:41:19 2013 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,96 +0,0 @@ -Rkns.Wikipedia = { -} - -Rkns.Wikipedia.Search = function(_renkan, _opts) { - this.renkan = _renkan; - this.lang = _opts.lang || "en"; -} - -Rkns.Wikipedia.Search.prototype.getBgClass = function() { - return "Rk-Wikipedia-Search-Icon Rk-Wikipedia-Lang-" + this.lang; -} - -Rkns.Wikipedia.Search.prototype.getSearchTitle = function() { - return ( this.renkan.l10n["wiki_" + this.lang] || this.renkan.l10n.wiki_) ; -} - -Rkns.Wikipedia.Search.prototype.search = function(_q) { - this.renkan.tabs.push( - new Rkns.Wikipedia.Bin(this.renkan, { - lang: this.lang, - search: _q - }) - ); -} - -Rkns.Wikipedia.Bin = Rkns.Utils.inherit(Rkns._BaseBin); - -Rkns.Wikipedia.Bin.prototype.resultTemplate = Rkns._.template( - '
' - + '
<%=htitle%>
' - + '
<%=hdescription%>

×<%=l10n.edit_edge%>

×<%=a%>

×<%=a%>

@<%=tweet.from_user%> (<%=tweet.from_user_name%>)

<%=htitle%>

<%=htitle%>

<%=htitle%>

Annotations

<%=htitle%>

<%=htitle%>

Tags

Annotations

Hyper Plateau

×<%=l10n.edit_node%>