web/js/renkan.js
changeset 39 ab880baf9486
parent 24 701af897de95
equal deleted inserted replaced
38:c28831a74f93 39:ab880baf9486
     1 /* 
     1 /* 
     2     _____            _               
     2  *    _____            _               
     3    |  __ \          | |              
     3  *   |  __ \          | |              
     4    | |__) |___ _ __ | | ____ _ _ __  
     4  *   | |__) |___ _ __ | | ____ _ _ __  
     5    |  _  // _ \ '_ \| |/ / _` | '_ \ 
     5  *   |  _  // _ \ '_ \| |/ / _` | '_ \ 
     6    | | \ \  __/ | | |   < (_| | | | |
     6  *   | | \ \  __/ | | |   < (_| | | | |
     7    |_|  \_\___|_| |_|_|\_\__,_|_| |_|
     7  *   |_|  \_\___|_| |_|_|\_\__,_|_| |_|
     8 
     8  *
     9  *  Copyright 2012-2013 Institut de recherche et d'innovation 
     9  *  Copyright 2012-2013 Institut de recherche et d'innovation 
    10  *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
    10  *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
    11  *   
    11  *   
    12  *  contact@iri.centrepompidou.fr
    12  *  contact@iri.centrepompidou.fr
    13  *  http://www.iri.centrepompidou.fr 
    13  *  http://www.iri.centrepompidou.fr 
    34 
    34 
    35 var Rkns = root.Rkns;
    35 var Rkns = root.Rkns;
    36 var $ = Rkns.$ = root.jQuery;
    36 var $ = Rkns.$ = root.jQuery;
    37 var _ = Rkns._ = root._;
    37 var _ = Rkns._ = root._;
    38 
    38 
    39 Rkns.VERSION = '0.2.1';
    39 Rkns.VERSION = '0.2.3';
    40 
    40 
    41 Rkns.pickerColors = ["#8f1919", "#a80000", "#d82626", "#ff0000", "#e87c7c", "#ff6565", "#f7d3d3", "#fecccc",
    41 Rkns.pickerColors = ["#8f1919", "#a80000", "#d82626", "#ff0000", "#e87c7c", "#ff6565", "#f7d3d3", "#fecccc",
    42     "#8f5419", "#a85400", "#d87f26", "#ff7f00", "#e8b27c", "#ffb265", "#f7e5d3", "#fee5cc",
    42     "#8f5419", "#a85400", "#d87f26", "#ff7f00", "#e8b27c", "#ffb265", "#f7e5d3", "#fee5cc",
    43     "#8f8f19", "#a8a800", "#d8d826", "#feff00", "#e8e87c", "#feff65", "#f7f7d3", "#fefecc",
    43     "#8f8f19", "#a8a800", "#d8d826", "#feff00", "#e8e87c", "#feff65", "#f7f7d3", "#fefecc",
    44     "#198f19", "#00a800", "#26d826", "#00ff00", "#7ce87c", "#65ff65", "#d3f7d3", "#ccfecc",
    44     "#198f19", "#00a800", "#26d826", "#00ff00", "#7ce87c", "#65ff65", "#d3f7d3", "#ccfecc",
   542             return {
   542             return {
   543                 _id: this.get("_id"),
   543                 _id: this.get("_id"),
   544                 title: this.get("title"),
   544                 title: this.get("title"),
   545                 uri: this.get("uri"),
   545                 uri: this.get("uri"),
   546                 description: this.get("description"),
   546                 description: this.get("description"),
   547                 color: this.get("color"),
   547                 color: this.get("color")
   548             };
   548             };
   549         },
   549         }
   550     });
   550     });
   551     
   551     
   552     // NODE
   552     // NODE
   553     var Node = Models.Node = RenkanModel.extend({
   553     var Node = Models.Node = RenkanModel.extend({
   554         type: "node",
   554         type: "node",
   574                 color: this.get("color"),
   574                 color: this.get("color"),
   575                 created_by: this.get("created_by") ? this.get("created_by").get("_id") : null,
   575                 created_by: this.get("created_by") ? this.get("created_by").get("_id") : null,
   576                 size: this.get("size"),
   576                 size: this.get("size"),
   577                 "clip-path": this.get("clip-path")
   577                 "clip-path": this.get("clip-path")
   578             };
   578             };
   579         },
   579         }
   580     });
   580     });
   581     
   581     
   582     // EDGE
   582     // EDGE
   583     var Edge = Models.Edge = RenkanModel.extend({
   583     var Edge = Models.Edge = RenkanModel.extend({
   584         type: "edge",
   584         type: "edge",
   595           },
   595           },
   596           {
   596           {
   597             type: Backbone.HasOne,
   597             type: Backbone.HasOne,
   598             key: "to",
   598             key: "to",
   599             relatedModel: Node
   599             relatedModel: Node
   600           },
   600           }
   601         ],
   601         ],
   602         prepare: function(options) {
   602         prepare: function(options) {
   603             var project = options.project;
   603             var project = options.project;
   604             this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user);
   604             this.addReference(options, "created_by", project.get("users"), options.created_by, project.current_user);
   605             this.addReference(options, "from", project.get("nodes"), options.from);
   605             this.addReference(options, "from", project.get("nodes"), options.from);
   615                 from: this.get("from") ? this.get("from").get("_id") : null,
   615                 from: this.get("from") ? this.get("from").get("_id") : null,
   616                 to: this.get("to") ? this.get("to").get("_id") : null,
   616                 to: this.get("to") ? this.get("to").get("_id") : null,
   617                 color: this.get("color"),
   617                 color: this.get("color"),
   618                 created_by: this.get("created_by") ? this.get("created_by").get("_id") : null
   618                 created_by: this.get("created_by") ? this.get("created_by").get("_id") : null
   619             };
   619             };
   620         },
   620         }
   621     });
   621     });
   622         
   622         
   623     // PROJECT
   623     // PROJECT
   624     var Project = Models.Project = RenkanModel.extend({
   624     var Project = Models.Project = RenkanModel.extend({
   625         type: "project",
   625         type: "project",
   629             key: "users",
   629             key: "users",
   630             relatedModel: User,
   630             relatedModel: User,
   631             reverseRelation: {
   631             reverseRelation: {
   632                 key: 'project',
   632                 key: 'project',
   633                 includeInJSON: '_id'
   633                 includeInJSON: '_id'
   634             },
   634             }
   635           },
   635           },
   636           {
   636           {
   637             type: Backbone.HasMany,
   637             type: Backbone.HasMany,
   638             key: "nodes",
   638             key: "nodes",
   639             relatedModel: Node,
   639             relatedModel: Node,
   640             reverseRelation: {
   640             reverseRelation: {
   641                 key: 'project',
   641                 key: 'project',
   642                 includeInJSON: '_id'
   642                 includeInJSON: '_id'
   643             },
   643             }
   644           },
   644           },
   645           {
   645           {
   646             type: Backbone.HasMany,
   646             type: Backbone.HasMany,
   647             key: "edges",
   647             key: "edges",
   648             relatedModel: Edge,
   648             relatedModel: Edge,
   649             reverseRelation: {
   649             reverseRelation: {
   650                 key: 'project',
   650                 key: 'project',
   651                 includeInJSON: '_id'
   651                 includeInJSON: '_id'
   652             },
   652             }
   653           }
   653           }
   654         ],
   654         ],
   655         addUser: function(_props, _options) {
   655         addUser: function(_props, _options) {
   656             _props.project = this;
   656             _props.project = this;
   657             var _user = User.findOrCreate(_props);
   657             var _user = User.findOrCreate(_props);
   677             this.get("edges").remove(_model);
   677             this.get("edges").remove(_model);
   678         },
   678         },
   679         validate: function(options) {
   679         validate: function(options) {
   680             var _project = this;
   680             var _project = this;
   681             _(options.users).each(function(_item) {
   681             _(options.users).each(function(_item) {
   682                 _item.project = _project;
   682                 if(_item) {
       
   683                     _item.project = _project;
       
   684                 }
   683             });
   685             });
   684             _(options.nodes).each(function(_item) {
   686             _(options.nodes).each(function(_item) {
   685                 _item.project = _project;
   687                 if(_item) {
       
   688                     _item.project = _project;
       
   689                 }
   686             });
   690             });
   687             _(options.edges).each(function(_item) {
   691             _(options.edges).each(function(_item) {
   688                 _item.project = _project;
   692                 if(_item) {
       
   693                     _item.project = _project;
       
   694                 }
   689             });
   695             });
   690         },
   696         },
   691         // Add event handler to remove edges when a node is removed
   697         // Add event handler to remove edges when a node is removed
   692         initialize: function() {
   698         initialize: function() {
   693             var _this = this;
   699             var _this = this;
   700             });
   706             });
   701         }
   707         }
   702     });
   708     });
   703     
   709     
   704     var RosterUser = Models.RosterUser = Backbone.Model.extend({
   710     var RosterUser = Models.RosterUser = Backbone.Model.extend({
   705         type: "roster_user",               
   711         type: "roster_user",
   706         idAttribute : "_id",
   712         idAttribute : "_id",
   707         
   713         
   708         constructor: function(options) {
   714         constructor: function(options) {
   709             
   715             
   710             if (typeof options !== "undefined") {
   716             if (typeof options !== "undefined") {
   741                 description: this.get("description"),
   747                 description: this.get("description"),
   742                 color: this.get("color"),
   748                 color: this.get("color"),
   743                 project: (this.get("project") != null)?this.get("project").get("id"):null,
   749                 project: (this.get("project") != null)?this.get("project").get("id"):null,
   744                 site_id: this.get("site_id")
   750                 site_id: this.get("site_id")
   745             };
   751             };
   746         },
   752         }
   747     });
   753     });
   748     
   754     
   749     var UsersList = Models.UsersList = Backbone.Collection.extend({
   755     var UsersList = Models.UsersList = Backbone.Collection.extend({
   750         model: RosterUser
   756         model: RosterUser
   751     });
   757     });
  1039     },
  1045     },
  1040         /* Drawing an edit box with an arrow and positioning the edit box according to the position of the node/edge being edited
  1046         /* Drawing an edit box with an arrow and positioning the edit box according to the position of the node/edge being edited
  1041          * Called by Rkns.Renderer.NodeEditor and Rkns.Renderer.EdgeEditor */
  1047          * Called by Rkns.Renderer.NodeEditor and Rkns.Renderer.EdgeEditor */
  1042     drawEditBox = function(_options, _coords, _path, _xmargin, _selector) {
  1048     drawEditBox = function(_options, _coords, _path, _xmargin, _selector) {
  1043         _selector.css({
  1049         _selector.css({
  1044             width: ( _options.tooltip_width - 2* _options.tooltip_padding ),
  1050             width: ( _options.tooltip_width - 2* _options.tooltip_padding )
  1045         });
  1051         });
  1046         var _height = _selector.outerHeight() + 2* _options.tooltip_padding,
  1052         var _height = _selector.outerHeight() + 2* _options.tooltip_padding,
  1047             _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
  1053             _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
  1048             _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
  1054             _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
  1049             _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
  1055             _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
  1625     this.text = $('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$);
  1631     this.text = $('<div class="Rk-Label Rk-Edge-Label">').appendTo(this.renderer.labels_$);
  1626     this.arrow_angle = 0;
  1632     this.arrow_angle = 0;
  1627     if (this.options.editor_mode) {
  1633     if (this.options.editor_mode) {
  1628         this.normal_buttons = [
  1634         this.normal_buttons = [
  1629             new EdgeEditButton(this.renderer, null),
  1635             new EdgeEditButton(this.renderer, null),
  1630             new EdgeRemoveButton(this.renderer, null),
  1636             new EdgeRemoveButton(this.renderer, null)
  1631         ];
  1637         ];
  1632         this.pending_delete_buttons = [
  1638         this.pending_delete_buttons = [
  1633             new EdgeRevertButton(this.renderer, null)
  1639             new EdgeRevertButton(this.renderer, null)
  1634         ];
  1640         ];
  1635         this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);
  1641         this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);
  3941     
  3947     
  3942     var _html = '',
  3948     var _html = '',
  3943         _this = this,
  3949         _this = this,
  3944         count = 0;
  3950         count = 0;
  3945     _(this.data.objects).each(function(_segment) {
  3951     _(this.data.objects).each(function(_segment) {
  3946         var _description = _segment.abstract,
  3952         var _description = _segment['abstract'],
  3947             _title = _segment.title;
  3953             _title = _segment.title;
  3948         if (!search.isempty && !search.test(_title) && !search.test(_description)) {
  3954         if (!search.isempty && !search.test(_title) && !search.test(_description)) {
  3949             return;
  3955             return;
  3950         }
  3956         }
  3951         count++;
  3957         count++;