client/js/paper-renderer.js
changeset 25 b5ada3bb8e53
parent 23 70c8af9b44ec
child 26 2fad193bae98
equal deleted inserted replaced
24:121a24be9da4 25:b5ada3bb8e53
   432 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
   432 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
   433     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
   433     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_node%></span></h2>'
   434     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
   434     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
   435     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/></p>'
   435     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/></p>'
   436     + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
   436     + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
   437     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'
   437     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
   438 );
   438 );
   439 
   439 
   440 Rkns.Renderer.NodeEditor.prototype.redraw = function() {
   440 Rkns.Renderer.NodeEditor.prototype.redraw = function() {
   441     var _coords = this.node_representation.paper_coords,
   441     var _coords = this.node_representation.paper_coords,
   442         _model = this.node_representation.model,
   442         _model = this.node_representation.model,
   445         .html(this.template({
   445         .html(this.template({
   446             node: {
   446             node: {
   447                 title: _model.get("title"),
   447                 title: _model.get("title"),
   448                 uri: _model.get("uri"),
   448                 uri: _model.get("uri"),
   449                 description: _model.get("description"),
   449                 description: _model.get("description"),
   450                 created_by: {
   450                 created_by_color: _model.get("created_by").get("color"),
   451                     color: _model.get("created_by").get("color"),
   451                 created_by_title: _model.get("created_by").get("title")
   452                     title: _model.get("created_by").get("title")
       
   453                 }
       
   454             },
   452             },
   455             l10n: this.renderer.renkan.l10n
   453             l10n: this.renderer.renkan.l10n
   456         }))
   454         }))
   457         .show()
   455         .show()
   458         .css(_css);
   456         .css(_css);
   504 
   502 
   505 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
   503 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
   506     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
   504     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
   507     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
   505     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
   508     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>'
   506     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>'
   509     + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from.created_by.color%>;"></span><%=edge.from.title%></p>'
   507     + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_created_by_color%>;"></span><%=edge.from_title%></p>'
   510     + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to.created_by.color%>;"></span><%=edge.to.title%></p>'
   508     + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_created_by_color%>;"></span><%=edge.to_title%></p>'
   511     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'
   509     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
   512 );
   510 );
   513 
   511 
   514 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
   512 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
   515     var _coords = this.edge_representation.paper_coords,
   513     var _coords = this.edge_representation.paper_coords,
   516         _model = this.edge_representation.model,
   514         _model = this.edge_representation.model,
   517         _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
   515         _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
   518     this.editor_$
   516     this.editor_$
   519         .html(this.template({
   517         .html(this.template({
   520             edge: _model,
   518             edge: {
       
   519                 title: _model.get("title"),
       
   520                 uri: _model.get("uri"),
       
   521                 description: _model.get("description"),
       
   522                 from_title: _model.get("from").get("title"),
       
   523                 to_title: _model.get("to").get("title"),
       
   524                 from_created_by_color: _model.get("from").get("created_by").get("color"),
       
   525                 to_created_by_color: _model.get("to").get("created_by").get("color"),
       
   526                 created_by_color: _model.get("created_by").get("color"),
       
   527                 created_by_title: _model.get("created_by").get("title")
       
   528             },
   521             l10n: this.renderer.renkan.l10n
   529             l10n: this.renderer.renkan.l10n
   522         }))
   530         }))
   523         .show()
   531         .show()
   524         .css(_css);
   532         .css(_css);
   525     var _this = this;
   533     var _this = this;
   839     '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
   847     '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
   840     + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
   848     + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
   841     + '</div>'
   849     + '</div>'
   842 );
   850 );
   843 
   851 
       
   852 Rkns.Renderer.Scene.prototype.autoScale = function() {
       
   853     var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }),
       
   854         _yy = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").y }),
       
   855         _minx = Math.min.apply(Math, _xx),
       
   856         _miny = Math.min.apply(Math, _yy),
       
   857         _maxx = Math.max.apply(Math, _xx),
       
   858         _maxy = Math.max.apply(Math, _yy);
       
   859     this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
       
   860     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
       
   861     this.redraw();
       
   862 }
       
   863 
   844 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
   864 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
   845     return _point.multiply(this.scale).add(this.offset);
   865     return _point.multiply(this.scale).add(this.offset);
   846 }
   866 }
   847 
   867 
   848 
   868