27 this.edge_layer = new paper.Layer(); |
27 this.edge_layer = new paper.Layer(); |
28 this.node_layer = new paper.Layer(); |
28 this.node_layer = new paper.Layer(); |
29 this.buttons_layer = new paper.Layer(); |
29 this.buttons_layer = new paper.Layer(); |
30 this.delete_list = []; |
30 this.delete_list = []; |
31 this.redrawActive = true; |
31 this.redrawActive = true; |
32 |
32 |
33 var currentWidth = this.canvas_$.width(); |
33 var currentWidth = this.canvas_$.width(); |
34 var currentHeight = this.canvas_$.height(); |
34 var currentHeight = this.canvas_$.height(); |
35 |
35 |
36 if (_renkan.options.show_minimap) { |
36 if (_renkan.options.show_minimap) { |
37 this.minimap = { |
37 this.minimap = { |
277 $(this).find(".Rk-TopBar-Tooltip").hide(); |
277 $(this).find(".Rk-TopBar-Tooltip").hide(); |
278 }); |
278 }); |
279 bindClick(".Rk-Fold-Bins", "foldBins"); |
279 bindClick(".Rk-Fold-Bins", "foldBins"); |
280 |
280 |
281 paper.view.onResize = function(_event) { |
281 paper.view.onResize = function(_event) { |
282 var _ratio, |
282 var _ratio, |
283 newWidth= _this.canvas_$.parent().width(), |
283 newWidth= _this.canvas_$.parent().width(), |
284 newHeight = _this.canvas_$.parent().height(); |
284 newHeight = _this.canvas_$.parent().height(); |
285 |
|
286 // Because of paper bug which does not calculate the good height and width |
285 // Because of paper bug which does not calculate the good height and width |
287 // We have to update manually the canvas's height and width |
286 // We have to update manually the canvas's height and width |
|
287 |
288 paper.view._viewSize.height = _event.size.height = _this.canvas_$.parent().height(); |
288 paper.view._viewSize.height = _event.size.height = _this.canvas_$.parent().height(); |
289 paper.view._viewSize.width = _event.size.height = _this.canvas_$.parent().width(); |
289 paper.view._viewSize.width = _event.size.height = _this.canvas_$.parent().width(); |
290 |
290 |
291 if (_this.minimap) { |
291 if (_this.minimap) { |
292 _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size); |
292 _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size); |
293 _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4])); |
293 _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4])); |
294 _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size); |
294 _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size); |
295 } |
295 } |
296 |
296 |
297 if (newHeight < newWidth) { |
297 if (newHeight < newWidth) { |
298 _ratio = (newHeight/currentHeight); |
298 _ratio = (newHeight/currentHeight); |
299 } else { |
299 } else { |
300 _ratio = (newWidth/currentWidth); |
300 _ratio = (newWidth/currentWidth); |
301 } |
301 } |
302 |
302 |
303 _this.resizeZoom((newWidth/currentWidth), (newHeight/currentHeight), _ratio); |
303 _this.resizeZoom((newWidth/currentWidth), (newHeight/currentHeight), _ratio); |
304 |
304 |
305 currentWidth = newWidth; |
305 currentWidth = newWidth; |
306 currentHeight = newHeight; |
306 currentHeight = newHeight; |
307 |
307 |
308 _this.redraw(); |
308 _this.redraw(); |
309 |
309 |
310 }; |
310 }; |
311 |
311 |
312 var _thRedraw = _.throttle(function() { |
312 var _thRedraw = _.throttle(function() { |
313 _this.redraw(); |
313 _this.redraw(); |
314 },50); |
314 },50); |
329 |
329 |
330 _thRedrawUsers(); |
330 _thRedrawUsers(); |
331 |
331 |
332 // register model events |
332 // register model events |
333 this.renkan.project.on("change:save_status", function(){ |
333 this.renkan.project.on("change:save_status", function(){ |
334 switch (_this.renkan.project.get("save_status")) { |
334 switch (_this.renkan.project.get("save_status")) { |
335 case 0: //clean |
335 case 0: //clean |
336 _this.$.find(".Rk-Save-Button").removeClass("to-save"); |
336 _this.$.find(".Rk-Save-Button").removeClass("to-save"); |
337 _this.$.find(".Rk-Save-Button").removeClass("saving"); |
337 _this.$.find(".Rk-Save-Button").removeClass("saving"); |
338 _this.$.find(".Rk-Save-Button").addClass("saved"); |
338 _this.$.find(".Rk-Save-Button").addClass("saved"); |
339 break; |
339 break; |
340 case 1: //dirty |
340 case 1: //dirty |
341 _this.$.find(".Rk-Save-Button").removeClass("saved"); |
341 _this.$.find(".Rk-Save-Button").removeClass("saved"); |
342 _this.$.find(".Rk-Save-Button").removeClass("saving"); |
342 _this.$.find(".Rk-Save-Button").removeClass("saving"); |
343 _this.$.find(".Rk-Save-Button").addClass("to-save"); |
343 _this.$.find(".Rk-Save-Button").addClass("to-save"); |
344 break; |
344 break; |
345 case 2: //saving |
345 case 2: //saving |
346 _this.$.find(".Rk-Save-Button").removeClass("saved"); |
346 _this.$.find(".Rk-Save-Button").removeClass("saved"); |
347 _this.$.find(".Rk-Save-Button").removeClass("to-save"); |
347 _this.$.find(".Rk-Save-Button").removeClass("to-save"); |
348 _this.$.find(".Rk-Save-Button").addClass("saving"); |
348 _this.$.find(".Rk-Save-Button").addClass("saving"); |
349 break; |
349 break; |
350 } |
350 } |
351 }); |
351 }); |
352 |
352 |
353 this.renkan.project.on("change:loading_status", function(){ |
353 this.renkan.project.on("change:loading_status", function(){ |
354 if (_this.renkan.project.get("loading_status")){ |
354 if (_this.renkan.project.get("loading_status")){ |
355 var animate = _this.$.find(".loader").addClass("run"); |
355 var animate = _this.$.find(".loader").addClass("run"); |
356 var timer = setTimeout(function(){ |
356 var timer = setTimeout(function(){ |
357 _this.$.find(".loader").hide(250); |
357 _this.$.find(".loader").hide(250); |
358 }, 3000); |
358 }, 3000); |
359 } |
359 } |
360 }); |
360 }); |
361 |
361 |
362 this.renkan.project.on("add:users remove:users", _thRedrawUsers); |
362 this.renkan.project.on("add:users remove:users", _thRedrawUsers); |
363 |
363 |
364 this.renkan.project.on("add:views remove:views", function(_node) { |
364 this.renkan.project.on("add:views remove:views", function(_node) { |
365 if(_this.renkan.project.get('views').length > 0) { |
365 if(_this.renkan.project.get('views').length > 0) { |
366 _this.$.find(".Rk-ZoomSetSaved").show(); |
366 _this.$.find(".Rk-ZoomSetSaved").show(); |
371 }); |
371 }); |
372 |
372 |
373 this.renkan.project.on("add:nodes", function(_node) { |
373 this.renkan.project.on("add:nodes", function(_node) { |
374 _this.addRepresentation("Node", _node); |
374 _this.addRepresentation("Node", _node); |
375 if (!_this.renkan.project.get("loading_status")){ |
375 if (!_this.renkan.project.get("loading_status")){ |
376 _thRedraw(); |
376 _thRedraw(); |
377 } |
377 } |
378 }); |
378 }); |
379 this.renkan.project.on("add:edges", function(_edge) { |
379 this.renkan.project.on("add:edges", function(_edge) { |
380 _this.addRepresentation("Edge", _edge); |
380 _this.addRepresentation("Edge", _edge); |
381 if (!_this.renkan.project.get("loading_status")){ |
381 if (!_this.renkan.project.get("loading_status")){ |
382 _thRedraw(); |
382 _thRedraw(); |
383 } |
383 } |
384 }); |
384 }); |
385 this.renkan.project.on("change:title", function(_model, _title) { |
385 this.renkan.project.on("change:title", function(_model, _title) { |
386 var el = _this.$.find(".Rk-PadTitle"); |
386 var el = _this.$.find(".Rk-PadTitle"); |
387 if (el.is("input")) { |
387 if (el.is("input")) { |
1194 break; |
1194 break; |
1195 } |
1195 } |
1196 } |
1196 } |
1197 var widthAft = this.$.width(); |
1197 var widthAft = this.$.width(); |
1198 var heightAft = this.$.height(); |
1198 var heightAft = this.$.height(); |
1199 |
1199 |
1200 if (this.renkan.options.show_top_bar) { |
1200 if (this.renkan.options.show_top_bar) { |
1201 heightAft -= this.$.find(".Rk-TopBar").height(); |
1201 heightAft -= this.$.find(".Rk-TopBar").height(); |
1202 } |
1202 } |
1203 if (this.renkan.options.show_bins && (this.renkan.$.find(".Rk-Bins").position().left > 0)) { |
1203 if (this.renkan.options.show_bins && (this.renkan.$.find(".Rk-Bins").position().left > 0)) { |
1204 widthAft -= this.renkan.$.find(".Rk-Bins").width(); |
1204 widthAft -= this.renkan.$.find(".Rk-Bins").width(); |
1205 } |
1205 } |
1206 |
1206 |
1207 this.canvas_$.attr({ |
1207 this.canvas_$.attr({ |
1208 width: widthAft, |
1208 width: widthAft, |
1209 height: heightAft |
1209 height: heightAft |
1210 }); |
1210 }); |
1211 |
1211 |
1212 paper.view.viewSize = new paper.Size([this.canvas_$.width(), this.canvas_$.height()]); |
1212 paper.view.viewSize = new paper.Size([this.canvas_$.width(), this.canvas_$.height()]); |
1213 |
1213 |
1214 } else { |
1214 } else { |
1215 for (i = 0; i < _requestMethods.length; i++) { |
1215 for (i = 0; i < _requestMethods.length; i++) { |
1216 if (typeof _el[_requestMethods[i]] === "function") { |
1216 if (typeof _el[_requestMethods[i]] === "function") { |
1217 _el[_requestMethods[i]](); |
1217 _el[_requestMethods[i]](); |
1218 break; |
1218 break; |
1235 this.canvas_$.height() |
1235 this.canvas_$.height() |
1236 ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 )); |
1236 ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 )); |
1237 this.setScale( _newScale, _offset ); |
1237 this.setScale( _newScale, _offset ); |
1238 }, |
1238 }, |
1239 resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) { |
1239 resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) { |
1240 var _newScale = this.scale * _ratio, |
1240 var _newScale = this.scale * _ratio, |
1241 _offset = new paper.Point([ |
1241 _offset = new paper.Point([ |
1242 (this.offset.x * _scaleWidth), |
1242 (this.offset.x * _scaleWidth), |
1243 (this.offset.y * _scaleHeight) |
1243 (this.offset.y * _scaleHeight) |
1244 ]); |
1244 ]); |
1245 this.setScale( _newScale, _offset ); |
1245 this.setScale( _newScale, _offset ); |
1246 }, |
1246 }, |
1304 }, |
1304 }, |
1305 foldBins: function() { |
1305 foldBins: function() { |
1306 var foldBinsButton = this.$.find(".Rk-Fold-Bins"), |
1306 var foldBinsButton = this.$.find(".Rk-Fold-Bins"), |
1307 bins = this.renkan.$.find(".Rk-Bins"); |
1307 bins = this.renkan.$.find(".Rk-Bins"); |
1308 var _this = this, |
1308 var _this = this, |
1309 sizeBef = _this.canvas_$.width(), |
1309 sizeBef = _this.canvas_$.width(), |
1310 sizeAft; |
1310 sizeAft; |
1311 if (bins.position().left < 0) { |
1311 if (bins.position().left < 0) { |
1312 bins.animate({left: 0},250); |
1312 bins.animate({left: 0},250); |
1313 this.$.animate({left: 300},250,function() { |
1313 this.$.animate({left: 300},250,function() { |
1314 var w = _this.$.width(); |
1314 var w = _this.$.width(); |
1315 paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]); |
1315 paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]); |
1316 }); |
1316 }); |
1317 if ((sizeBef - bins.width()) < bins.height()){ |
1317 if ((sizeBef - bins.width()) < bins.height()){ |
1318 sizeAft = sizeBef; |
1318 sizeAft = sizeBef; |
1319 } else { |
1319 } else { |
1320 sizeAft = sizeBef - bins.width(); |
1320 sizeAft = sizeBef - bins.width(); |
1321 } |
1321 } |
1322 foldBinsButton.html("«"); |
1322 foldBinsButton.html("«"); |
1323 } else { |
1323 } else { |
1324 bins.animate({left: -300},250); |
1324 bins.animate({left: -300},250); |
1325 this.$.animate({left: 0},250,function() { |
1325 this.$.animate({left: 0},250,function() { |