937 |
937 |
938 Rkns.Renderer.Scene = function(_renkan) { |
938 Rkns.Renderer.Scene = function(_renkan) { |
939 this.renkan = _renkan; |
939 this.renkan = _renkan; |
940 this.$ = Rkns.$(".Rk-Render"); |
940 this.$ = Rkns.$(".Rk-Render"); |
941 this.representations = []; |
941 this.representations = []; |
942 this.$.html(this.template({ |
942 this.$.html(this.template(_renkan)); |
943 l10n: _renkan.l10n |
|
944 })) |
|
945 this.canvas_$ = this.$.find(".Rk-Canvas"); |
943 this.canvas_$ = this.$.find(".Rk-Canvas"); |
946 this.editor_$ = this.$.find(".Rk-Editor"); |
944 this.editor_$ = this.$.find(".Rk-Editor"); |
947 this.notif_$ = this.$.find(".Rk-Notifications"); |
945 this.notif_$ = this.$.find(".Rk-Notifications"); |
948 paper.setup(this.canvas_$[0]); |
946 paper.setup(this.canvas_$[0]); |
949 this.scale = 1; |
947 this.scale = 1; |
1056 _this.redraw(); |
1054 _this.redraw(); |
1057 },50); |
1055 },50); |
1058 |
1056 |
1059 this.addRepresentations("Node", this.renkan.project.get("nodes")); |
1057 this.addRepresentations("Node", this.renkan.project.get("nodes")); |
1060 this.addRepresentations("Edge", this.renkan.project.get("edges")); |
1058 this.addRepresentations("Edge", this.renkan.project.get("edges")); |
|
1059 this.renkan.project.on("change:title", function() { |
|
1060 _this.$.find(".Rk-PadTitle").val(_renkan.project.get("title")); |
|
1061 }); |
|
1062 |
|
1063 this.$.find(".Rk-PadTitle").on("keyup input paste", function() { |
|
1064 _renkan.project.set({"title": $(this).val()}); |
|
1065 }) |
|
1066 |
1061 this.renkan.project.get("users").each(function(_user) { |
1067 this.renkan.project.get("users").each(function(_user) { |
1062 _this.addUser(_user); |
1068 _this.addUser(_user); |
1063 }) |
1069 }); |
1064 |
1070 |
1065 this.renkan.project.on("add:users", function(_user) { |
1071 this.renkan.project.on("add:users", function(_user) { |
1066 _this.addUser(_user); |
1072 _this.addUser(_user); |
1067 }); |
1073 }); |
1068 this.renkan.project.on("add:nodes", function(_node) { |
1074 this.renkan.project.on("add:nodes", function(_node) { |
1076 |
1082 |
1077 this.redraw(); |
1083 this.redraw(); |
1078 } |
1084 } |
1079 |
1085 |
1080 Rkns.Renderer.Scene.prototype.template = Rkns._.template( |
1086 Rkns.Renderer.Scene.prototype.template = Rkns._.template( |
1081 '<div class="Rk-TopBar"><h3 class="Rk-PadTitle"><%=l10n.untitled_project%></h3>' |
1087 '<div class="Rk-TopBar"><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%=l10n.untitled_project%>" />' |
1082 + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name"><unknown user></span></div><ul class="Rk-UserList"></ul></div>' |
1088 + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name"><unknown user></span></div><ul class="Rk-UserList"></ul></div>' |
1083 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.full_screen%></div></div></div>' |
1089 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.full_screen%></div></div></div>' |
1084 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_node%></div></div></div>' |
1090 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_node%></div></div></div>' |
1085 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_edge%></div></div></div>' |
1091 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_edge%></div></div></div>' |
|
1092 + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.save_project%></div></div></div>' |
1086 + '<div class="Rk-TopBar-Separator"></div></div>' |
1093 + '<div class="Rk-TopBar-Separator"></div></div>' |
1087 + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>' |
1094 + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>' |
1088 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>' |
1095 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>' |
1089 + '</div>' |
1096 + '</div>' |
1090 ); |
1097 ); |
1130 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)); |
1137 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)); |
1131 this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)); |
1138 this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)); |
1132 this.setScale(_scale); |
1139 this.setScale(_scale); |
1133 } |
1140 } |
1134 if (nodes.length === 1) { |
1141 if (nodes.length === 1) { |
1135 this.offset = paper.view.center.subtract(new paper.Point([nodes[0].get("position").x, nodes[0].get("position").y])); |
1142 this.offset = paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])); |
1136 this.setScale(1); |
1143 this.setScale(1); |
1137 } |
1144 } |
1138 } |
1145 } |
1139 |
1146 |
1140 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) { |
1147 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) { |