Put the download button on the config-bar

EduardoLopes · May 25, 2018 · 1833ad3 · 1833ad3
1 parent 20af8c7
commit 1833ad3
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 25 deletions.
diff --git a/app/css/main.css b/app/css/main.css
@@ -95,7 +95,7 @@ body{
   overflow-y: hidden;
   overflow-x: auto;
   white-space: nowrap;
-  min-height: 130px;
+  min-height: 125px;
 }
 
 .tileset-bases {

diff --git a/app/js/components/config-bar.js b/app/js/components/config-bar.js
@@ -1,5 +1,7 @@
 var React = require('react');
 var MenuItem = require('./menu-item.js');
+var canvasToBlob = require('../vendor/canvasToBlob.js');
+var saveAs = require('../vendor/FileSaver.js');
 
 
 function clearFileInput(fileInput) {
@@ -32,7 +34,7 @@ class ConfigBar extends React.Component{
 
             this.props.selectAll();
 
-          }.bind(this),
+          }.bind(this)
         },
         {
           url: '#',
@@ -43,7 +45,20 @@ class ConfigBar extends React.Component{
 
             this.inputRef.current.click();
 
-          }.bind(this),
+          }.bind(this)
+        },
+        {
+          url: '#',
+          name: 'Download',
+          onClick:  function(event){
+
+            event.preventDefault();
+
+            this.props.canvasRef.current.canvas.toBlob(function(blob) {
+              saveAs(blob, "tileset.png");
+            });
+
+          }.bind(this)
         }
       ]
     };

diff --git a/app/js/components/main-canvas.js b/app/js/components/main-canvas.js
@@ -1,7 +1,5 @@
 var React = require('react');
 var Blob = require('../vendor/Blob.js');
-var canvasToBlob = require('../vendor/canvasToBlob.js');
-var saveAs = require('../vendor/FileSaver.js');
 
 var tilesetTemplate = require('../template.js');
 
@@ -15,14 +13,6 @@ class MainCanvas extends React.Component {
 
   }
 
-  download(){
-
-    this.canvas.toBlob(function(blob) {
-      saveAs(blob, "tileset.png");
-    });
-
-  }
-
   drawTile(sprite, x, y, type, tileSize){
 
     var spriteY = type / 4 >> 0;
@@ -107,7 +97,6 @@ class MainCanvas extends React.Component {
     return (
       <div className="tilesets-container">
         <canvas className="tilesets-canvas" ref={this.canvasRef}></canvas>
-        <button onClick={this.download.bind(this)} className="download">Download</button>
       </div>
     );
   }

diff --git a/app/js/components/top-bar.js b/app/js/components/top-bar.js
@@ -9,15 +9,6 @@ class TopBar extends React.Component{
 
     this.state = {
       data: [
-        {
-          url: '#',
-          name: 'Download',
-          onClick:  function(event){
-
-            event.preventDefault();
-
-          },
-        },
         {
           url: 'https://github.com/EduardoLopes/tileset-gen/tree/dev#how-it-works',
           name: 'Help',

diff --git a/app/js/main.js b/app/js/main.js
@@ -31,6 +31,8 @@ class TilesetGen extends React.Component{
     this.lastHeight = 0;
     this.lastY = 0;
 
+    this.canvasRef = React.createRef();
+
   }
 
   handleTilesetUpload(file){
@@ -187,10 +189,10 @@ class TilesetGen extends React.Component{
     return (
       <div>
         <TopBar/>
-        <ConfigBar selectAll={this.selectAll.bind(this)} selected={this.state.selectedTileSet} onTilesetUpload={this.handleTilesetUpload} />
+        <ConfigBar selectAll={this.selectAll.bind(this)} selected={this.state.selectedTileSet} onTilesetUpload={this.handleTilesetUpload} canvasRef={this.canvasRef} />
         <TilesetBasesContainer selected={this.state.selectedTileSet} selectTileset={this.handleSelectTileset} tilesets={this.state.tilesets} />
         <EditBar tilesets={this.state.tilesets} onClose={this.onClose} updateTileset={this.handleUpdateTileset} selected={this.state.selectedTileSet} />
-        <MainCanvas tilesets={this.state.tilesets} />
+        <MainCanvas ref={this.canvasRef} tilesets={this.state.tilesets} />
       </div>
     );
   }