Mercurial Mercurial > renkan / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client/js/paper-renderer.js
changeset 190 a9040a7c47d9
parent 189 f7b5ae0d2681
child 193 7d95ace8c08f
equal deleted inserted replaced
189:f7b5ae0d2681 190:a9040a7c47d9 
    10     _EDGE_BUTTON_INNER = 2,
 
    10     _EDGE_BUTTON_INNER = 2,
 
    11     _EDGE_BUTTON_OUTER = 40,
 
    11     _EDGE_BUTTON_OUTER = 40,
 
    12     _CLICKMODE_ADDNODE = 1,
 
    12     _CLICKMODE_ADDNODE = 1,
 
    13     _CLICKMODE_STARTEDGE = 2,
 
    13     _CLICKMODE_STARTEDGE = 2,
 
    14     _CLICKMODE_ENDEDGE = 3,
 
    14     _CLICKMODE_ENDEDGE = 3,
 
    15     _IMAGE_MAX_KB = 500,
 
       
    16     _NODE_SIZE_STEP = Math.LN2/4,
 
    15     _NODE_SIZE_STEP = Math.LN2/4,
 
    17     _MIN_SCALE = 1/20,
 
    16     _MIN_SCALE = 1/20,
 
    18     _MAX_SCALE = 20,
 
    17     _MAX_SCALE = 20,
 
    19     _MOUSEMOVE_RATE = 80,
 
    18     _MOUSEMOVE_RATE = 80,
 
    20     _DOUBLETAP_DELAY = 800,
 
    19     _DOUBLETAP_DELAY = 800,
 
  1004                     fr = new FileReader();
 
  1003                     fr = new FileReader();
 
  1005                 if (f.type.substr(0,5) !== "image") {
 
  1004                 if (f.type.substr(0,5) !== "image") {
 
  1006                     alert(_this.renkan.translate("This file is not an image"));
 
  1005                     alert(_this.renkan.translate("This file is not an image"));
 
  1007                     return;
 
  1006                     return;
 
  1008                 }
 
  1007                 }
 
  1009                 if (f.size > (_IMAGE_MAX_KB * 1024)) {
 
  1008                 if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {
 
  1010                     alert(_this.renkan.translate("Image size must be under ")+_IMAGE_MAX_KB+_this.renkan.translate("KB"));
 
  1009                     alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB"));
 
  1011                     return;
 
  1010                     return;
 
  1012                 }
 
  1011                 }
 
  1013                 fr.onload = function(e) {
 
  1012                 fr.onload = function(e) {
 
  1014                     _this.editor_$.find(".Rk-Edit-Image").val(e.target.result);
 
  1013                     _this.editor_$.find(".Rk-Edit-Image").val(e.target.result);
 
  1015                     onFieldChange();
 
  1014                     onFieldChange();
 
  1570     });
 
  1569     });
 
  1571     
  1570     
  1572     var throttledMouseMove = _.throttle(function(_event, _isTouch) {
 
  1571     var throttledMouseMove = _.throttle(function(_event, _isTouch) {
 
  1573         _this.onMouseMove(_event, _isTouch);
 
  1572         _this.onMouseMove(_event, _isTouch);
 
  1574     }, _MOUSEMOVE_RATE);
 
  1573     }, _MOUSEMOVE_RATE);
 
  1575     
  1574         
  1576     this.canvas_$.on({
 
  1575     this.canvas_$.on({
 
  1577         mousedown: function(_event) {
 
  1576         mousedown: function(_event) {
 
  1578             _event.preventDefault();
 
  1577             _event.preventDefault();
 
  1579             _this.onMouseDown(_event, false);
 
  1578             _this.onMouseDown(_event, false);
 
  1580         },
 
  1579         },
 
  1702                 res["text/uri-list"] = url;
 
  1701                 res["text/uri-list"] = url;
 
  1703             }
 
  1702             }
 
  1704             _this.dropData(res, _event.originalEvent);
 
  1703             _this.dropData(res, _event.originalEvent);
 
  1705         }
 
  1704         }
 
  1706     });
 
  1705     });
 
  1707     this.editor_$.find(".Rk-ZoomOut").click(function() {
 
  1706     
  1708         var _newScale = _this.scale * Math.SQRT1_2,
 
  1707     var bindClick = function(selector, fname) {
 
  1709             _offset = new paper.Point([
 
  1708         _this.$.find(selector).click(function(evt) {
 
  1710                 _this.canvas_$.width(),
 
  1709             _this[fname](evt);
 
  1711                 _this.canvas_$.height()
 
  1710             return false;
 
  1712             ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
 
  1711         });
 
  1713         _this.setScale( _newScale, _offset );
 
  1712     }
 
  1714     });
 
  1713     
  1715     this.editor_$.find(".Rk-ZoomIn").click(function() {
 
  1714     bindClick(".Rk-ZoomOut", "zoomOut");
 
  1716         var _newScale = _this.scale * Math.SQRT2,
 
  1715     bindClick(".Rk-ZoomIn", "zoomIn");
 
  1717             _offset = new paper.Point([
 
       
  1718                 _this.canvas_$.width(),
 
       
  1719                 _this.canvas_$.height()
 
       
  1720             ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
 
       
  1721         _this.setScale( _newScale, _offset );
 
       
  1722     });
 
       
  1723     this.$.find(".Rk-CurrentUser").mouseenter(
 
  1716     this.$.find(".Rk-CurrentUser").mouseenter(
 
  1724         function() { _this.$.find(".Rk-UserList").slideDown(); }
 
  1717         function() { _this.$.find(".Rk-UserList").slideDown(); }
 
  1725     );
 
  1718     );
 
  1726     this.$.find(".Rk-Users").mouseleave(
 
  1719     this.$.find(".Rk-Users").mouseleave(
 
  1727         function() { _this.$.find(".Rk-UserList").slideUp(); }
 
  1720         function() { _this.$.find(".Rk-UserList").slideUp(); }
 
  1728     );
 
  1721     );
 
  1729     this.$.find(".Rk-FullScreen-Button").click(function() {
 
  1722     bindClick(".Rk-FullScreen-Button", "fullScreen");
 
  1730         var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
 
  1723     bindClick(".Rk-AddNode-Button", "addNodeBtn");
 
  1731             _el = _this.renkan.$[0],
 
  1724     bindClick(".Rk-AddEdge-Button", "addEdgeBtn");
 
  1732             _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
 
  1725     bindClick(".Rk-Save-Button", "save");
 
  1733             _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
 
  1726     bindClick(".Rk-Open-Button", "open");
 
  1734         if (_isFull) {
 
       
  1735             for (var i = 0; i < _cancelMethods.length; i++) {
 
       
  1736                 if (typeof document[_cancelMethods[i]] === "function") {
 
       
  1737                     document[_cancelMethods[i]]();
 
       
  1738                     break;
 
       
  1739                 }
 
       
  1740             }
 
       
  1741         } else {
 
       
  1742             for (var i = 0; i < _requestMethods.length; i++) {
 
       
  1743                 if (typeof _el[_requestMethods[i]] === "function") {
 
       
  1744                     _el[_requestMethods[i]]();
 
       
  1745                     break;
 
       
  1746                 }
 
       
  1747             }
 
       
  1748         }
 
       
  1749     });
 
       
  1750     this.$.find(".Rk-AddNode-Button").click(function() {
 
       
  1751         if (_this.click_mode === _CLICKMODE_ADDNODE) {
 
       
  1752             _this.click_mode = false;
 
       
  1753             _this.notif_$.hide();
 
       
  1754         } else {
 
       
  1755             _this.click_mode = _CLICKMODE_ADDNODE;
 
       
  1756             _this.notif_$.text(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
 
       
  1757         }
 
       
  1758     });
 
       
  1759     this.$.find(".Rk-AddEdge-Button").click(function() {
 
       
  1760         if (_this.click_mode === _CLICKMODE_STARTEDGE || _this.click_mode === _CLICKMODE_ENDEDGE) {
 
       
  1761             _this.click_mode = false;
 
       
  1762             _this.notif_$.hide();
 
       
  1763         } else {
 
       
  1764             _this.click_mode = _CLICKMODE_STARTEDGE;
 
       
  1765             _this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
 
       
  1766         }
 
       
  1767     });
 
       
  1768     this.$.find(".Rk-Bookmarklet-Button")
 
  1727     this.$.find(".Rk-Bookmarklet-Button")
 
  1769         .attr("href","javascript:" + _BOOKMARKLET_CODE(_renkan))
 
  1728         .attr("href","javascript:" + _BOOKMARKLET_CODE(_renkan))
 
  1770         .click(function(){
 
  1729         .click(function(){
 
  1771             _this.notif_$
 
  1730             _this.notif_$
 
  1772                 .text(_renkan.translate("Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
 
  1731                 .text(_renkan.translate("Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
 
  1778     this.$.find(".Rk-TopBar-Button").mouseover(function() {
 
  1737     this.$.find(".Rk-TopBar-Button").mouseover(function() {
 
  1779         Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
 
  1738         Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
 
  1780     }).mouseout(function() {
 
  1739     }).mouseout(function() {
 
  1781         Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
 
  1740         Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
 
  1782     });
 
  1741     });
 
  1783     this.$.find(".Rk-Fold-Bins").click(function() {
 
  1742     bindClick(".Rk-Fold-Bins", "foldBins");
 
  1784         var bins = _renkan.$.find(".Rk-Bins");
 
       
  1785         if (bins.offset().left < 0) {
 
       
  1786             bins.animate({left: 0},250);
 
       
  1787             _this.$.animate({left: 300},250,function() {
 
       
  1788                 var w = _this.$.width();
 
       
  1789                 paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
 
       
  1790             });
 
       
  1791             $(this).html("&laquo;");
 
       
  1792         } else {
 
       
  1793             bins.animate({left: -300},250);
 
       
  1794             _this.$.animate({left: 0},250,function() {
 
       
  1795                 var w = _this.$.width();
 
       
  1796                 paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
 
       
  1797             });
 
       
  1798             $(this).html("&raquo;");
 
       
  1799         }
 
       
  1800     });
 
       
  1801     
  1743     
  1802     paper.view.onResize = function(_event) {
 
  1744     paper.view.onResize = function(_event) {
 
  1803         _this.offset = _this.offset.add(_event.delta.divide(2));
 
  1745         _this.offset = _this.offset.add(_event.delta.divide(2));
 
  1804         if (_this.minimap) {
 
  1746         if (_this.minimap) {
 
  1805             _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size);
 
  1747             _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size);
 
  1900 
  1842 
  1901 Rkns._(Scene.prototype).extend({
 
  1843 Rkns._(Scene.prototype).extend({
 
  1902 template: Rkns._.template(
 
  1844 template: Rkns._.template(
 
  1903     '<% if (options.show_top_bar) { %><div class="Rk-TopBar"><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
 
  1845     '<% if (options.show_top_bar) { %><div class="Rk-TopBar"><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>'
 
  1904     + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%-translate("Untitled project")%>" /><% } %>'
 
  1846     + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%-translate("Untitled project")%>" /><% } %>'
 
  1905     + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'
 
  1847     + '<% if (options.show_user_list) { %><div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div><% } %>'
 
  1906     + '<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"><%-translate("Full Screen")%></div></div></div>'
 
  1848     + '<% if (options.home_button_url) {%><div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents">'
 
       
  1849     + '<%- translate(options.home_button_title) %></div></div></a><% } %>'
 
       
  1850     + '<% if (options.show_fullscreen_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Full Screen")%></div></div></div><% } %>'
 
  1907     + '<% if (options.editor_mode) { %>'
 
  1851     + '<% if (options.editor_mode) { %>'
 
  1908     + '<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"><%-translate("Add Node")%></div></div></div>'
 
  1852     + '<% if (options.show_addnode_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip">'
 
  1909     + '<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"><%-translate("Add Edge")%></div></div></div>'
 
  1853     + '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Node")%></div></div></div><% } %>'
 
  1910     + '<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"> </div></div></div>'
 
  1854     + '<% if (options.show_addedge_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip">'
 
  1911     + '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
 
  1855     + '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div><% } %>'
 
  1912     + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a>'
 
  1856     + '<% if (options.show_save_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"> </div></div></div><% } %>'
 
       
  1857     + '<% if (options.show_open_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Open-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Open Project")%></div></div></div><% } %>'
 
       
  1858     + '<% if (options.show_bookmarklet) { %><div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents">'
 
       
  1859     + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a><% } %>'
 
  1913     + '<div class="Rk-TopBar-Separator"></div>'
 
  1860     + '<div class="Rk-TopBar-Separator"></div>'
 
  1914     + '<% } %></div><% } %>'
 
  1861     + '<% } %></div><% } %>'
 
  1915     + '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">'
 
  1862     + '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">'
 
  1916     + '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Notifications"></div><div class="Rk-Editor">'
 
  1863     + '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Notifications"></div><div class="Rk-Editor">'
 
  1917     + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
 
  1864     + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
 
  2071         savebtn.removeClass("disabled Rk-Save-Online").addClass("Rk-Save-ReadOnly");
 
  2018         savebtn.removeClass("disabled Rk-Save-Online").addClass("Rk-Save-ReadOnly");
 
  2072         tip.text(this.renkan.translate("Connection lost"));
 
  2019         tip.text(this.renkan.translate("Connection lost"));
 
  2073     } else {
 
  2020     } else {
 
  2074         if (this.renkan.options.snapshot_mode) {
 
  2021         if (this.renkan.options.snapshot_mode) {
 
  2075             savebtn.removeClass("Rk-Save-ReadOnly Rk-Save-Online");
 
  2022             savebtn.removeClass("Rk-Save-ReadOnly Rk-Save-Online");
 
  2076             tip.text(this.renkan.translate("Archive Project"));
 
  2023             tip.text(this.renkan.translate("Save Project"));
 
  2077         } else {
 
  2024         } else {
 
  2078             savebtn.removeClass("disabled Rk-Save-ReadOnly").addClass("Rk-Save-Online");
 
  2025             savebtn.removeClass("disabled Rk-Save-ReadOnly").addClass("Rk-Save-Online");
 
  2079             tip.text(this.renkan.translate("Auto-save enabled"));
 
  2026             tip.text(this.renkan.translate("Auto-save enabled"));
 
  2080         }
 
  2027         }
 
  2081     }
 
  2028     }
 
  2495     var _node = this.renkan.project.addNode(_nodedata),
 
  2442     var _node = this.renkan.project.addNode(_nodedata),
 
  2496         _repr = this.getRepresentationByModel(_node);
 
  2443         _repr = this.getRepresentationByModel(_node);
 
  2497     if (_event.type === "drop") {
 
  2444     if (_event.type === "drop") {
 
  2498         _repr.openEditor();
 
  2445         _repr.openEditor();
 
  2499     }
 
  2446     }
 
  2500 }
 
  2447 },
 
       
  2448 fullScreen: function() {
 
       
  2449     var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
 
       
  2450         _el = this.renkan.$[0],
 
       
  2451         _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
 
       
  2452         _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
 
       
  2453     if (_isFull) {
 
       
  2454         for (var i = 0; i < _cancelMethods.length; i++) {
 
       
  2455             if (typeof document[_cancelMethods[i]] === "function") {
 
       
  2456                 document[_cancelMethods[i]]();
 
       
  2457                 break;
 
       
  2458             }
 
       
  2459         }
 
       
  2460     } else {
 
       
  2461         for (var i = 0; i < _requestMethods.length; i++) {
 
       
  2462             if (typeof _el[_requestMethods[i]] === "function") {
 
       
  2463                 _el[_requestMethods[i]]();
 
       
  2464                 break;
 
       
  2465             }
 
       
  2466         }
 
       
  2467     }
 
       
  2468 },
 
       
  2469 zoomOut: function() {
 
       
  2470     var _newScale = this.scale * Math.SQRT1_2,
 
       
  2471         _offset = new paper.Point([
 
       
  2472             this.canvas_$.width(),
 
       
  2473             this.canvas_$.height()
 
       
  2474         ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 ));
 
       
  2475     this.setScale( _newScale, _offset );
 
       
  2476 },
 
       
  2477 zoomIn: function() {
 
       
  2478     var _newScale = this.scale * Math.SQRT2,
 
       
  2479         _offset = new paper.Point([
 
       
  2480             this.canvas_$.width(),
 
       
  2481             this.canvas_$.height()
 
       
  2482         ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));
 
       
  2483     this.setScale( _newScale, _offset );
 
       
  2484 },
 
       
  2485 addNodeBtn: function() {
 
       
  2486     if (this.click_mode === _CLICKMODE_ADDNODE) {
 
       
  2487         this.click_mode = false;
 
       
  2488         this.notif_$.hide();
 
       
  2489     } else {
 
       
  2490         this.click_mode = _CLICKMODE_ADDNODE;
 
       
  2491         this.notif_$.text(_renkan.translate("Click on the background canvas to add a node")).fadeIn();
 
       
  2492     }
 
       
  2493     return false;
 
       
  2494 },
 
       
  2495 addEdgeBtn: function() {
 
       
  2496     if (this.click_mode === _CLICKMODE_STARTEDGE || this.click_mode === _CLICKMODE_ENDEDGE) {
 
       
  2497         this.click_mode = false;
 
       
  2498         this.notif_$.hide();
 
       
  2499     } else {
 
       
  2500         this.click_mode = _CLICKMODE_STARTEDGE;
 
       
  2501         this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
 
       
  2502     }
 
       
  2503     return false;
 
       
  2504 },
 
       
  2505 foldBins: function() {
 
       
  2506     var foldBinsButton = this.$.find(".Rk-Fold-Bins"),
 
       
  2507         bins = this.renkan.$.find(".Rk-Bins");
 
       
  2508     if (bins.offset().left < 0) {
 
       
  2509         bins.animate({left: 0},250);
 
       
  2510         var _this = this;
 
       
  2511         this.$.animate({left: 300},250,function() {
 
       
  2512             var w = _this.$.width();
 
       
  2513             paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
 
       
  2514         });
 
       
  2515         foldBinsButton.html("&laquo;");
 
       
  2516     } else {
 
       
  2517         bins.animate({left: -300},250);
 
       
  2518         var _this = this;
 
       
  2519         this.$.animate({left: 0},250,function() {
 
       
  2520             var w = _this.$.width();
 
       
  2521             paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
 
       
  2522         });
 
       
  2523         foldBinsButton.html("&raquo;");
 
       
  2524     }
 
       
  2525 },
 
       
  2526 save: function() { },
 
       
  2527 open: function() { }
 
  2501 });
 
  2528 });
 
  2502 }).call(window);
 
  2529 }).call(window);
 
  2503 
  2530 
  2504 /* END paper-renderer.js */
 
  2531 /* END paper-renderer.js */
renkan