adding rotation and scale sliders

3 files changed, 44 insertions, 15 deletions

diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index c635f5e..892f408 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -135,13 +135,15 @@
   justify-content: space-between;
 }
 .box .slider span {
-  min-width: 5px;
+  min-width: 4rem;
+  width: 4rem;
+  padding: 0.125rem 0;
 }
 .box .slider input[type='number'] {
   width: 3.5rem;
 }
 .box .slider input[type='range'] {
-  width: 6rem; 
+  width: 5.5rem; 
 }
 
 /* Graph handles */
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 09fa57f..8824e28 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -226,7 +226,7 @@ class TileForm extends Component {
     const { name, value } = e.target
     this.handleSettingsSelect(name, value)
     preloadImage(value).then(img => {
-      console.log(img)
+      // console.log(img)
       this.props.tileActions.updateTemporaryTile({
         ...this.props.temporaryTile,
         settings: {
@@ -327,16 +327,7 @@ class TileForm extends Component {
           : ""}
 
           {this.renderLinkForm()}
-
-          <Slider
-            title='Opacity'
-            name='opacity'
-            value={temporaryTile.settings.opacity}
-            onChange={this.handleSettingsSelect.bind(this)}
-            min={0}
-            max={1}
-            step={0.01}
-          />
+          {this.renderMiscForm()}
 
           <div className='row buttons'>
             <SubmitButton
@@ -407,7 +398,7 @@ class TileForm extends Component {
     // const { isNew } = this.props
     const { temporaryTile } = this.props
     const { errorFields } = this.state
-    console.log(temporaryTile.settings)
+    // console.log(temporaryTile.settings)
     return (
       <div>
         <div className='row imageUrl'>
@@ -528,6 +519,42 @@ class TileForm extends Component {
       </div>
     )
   }
+
+  renderMiscForm() {
+    const { temporaryTile } = this.props
+    return (
+      <div>
+        <Slider
+          title='Opacity'
+          name='opacity'
+          value={temporaryTile.settings.opacity}
+          onChange={this.handleSettingsSelect.bind(this)}
+          min={0.0}
+          max={1.0}
+          step={0.01}
+        />
+        <Slider
+          title='Scale'
+          name='scale'
+          value={temporaryTile.settings.scale}
+          onChange={this.handleSettingsSelect.bind(this)}
+          min={0.01}
+          max={10.0}
+          step={0.01}
+        />
+        <Slider
+          title='Rotation'
+          name='rotation'
+          value={temporaryTile.settings.rotation}
+          onChange={this.handleSettingsSelect.bind(this)}
+          min={-180.0}
+          max={180.0}
+          step={1}
+          type='int'
+        />
+      </div>
+    )
+  }
 }
 
 const mapStateToProps = state => ({
diff --git a/frontend/views/page/components/tile.handle.js b/frontend/views/page/components/tile.handle.js
index 43817a3..b997d13 100644
--- a/frontend/views/page/components/tile.handle.js
+++ b/frontend/views/page/components/tile.handle.js
@@ -94,7 +94,7 @@ const generateTransform = (tile, box) => {
     transform.push('scale(' + scale + ')')
   }
   if (rotation !== 0) {
-    transform.push('rotateZ(' + rotation + 'rad)')
+    transform.push('rotateZ(' + rotation + 'deg)')
   }
   return transform.join(' ')
 }