adding rotation and scale sliders

4 files changed, 48 insertions, 22 deletions

diff --git a/frontend/common/slider.component.js b/frontend/common/slider.component.js
index e5dfba7..7e42b4d 100644
--- a/frontend/common/slider.component.js
+++ b/frontend/common/slider.component.js
@@ -20,7 +20,6 @@ export default class Slider extends Component {
     if (this.props.type === 'int') {
       value = parseInt(value)
     }
-    console.log('mount', value)
     this.setState({ value })
   }
   componentDidUpdate(prevProps) {
@@ -29,13 +28,11 @@ export default class Slider extends Component {
       if (this.props.type === 'int') {
         value = parseInt(value)
       }
-      console.log('update', value)
       this.setState({ value })
     }
   }
   handleInput(e){
-    let { name, opt } = this.props
-    let old_value = opt[name]
+    let { name } = this.props
     let new_value = e.target.value
     if (new_value === '') {
       new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2
@@ -47,15 +44,15 @@ export default class Slider extends Component {
       new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
     }
     else {
-      new_value = this.parseFloat(new_value)
+      new_value = parseFloat(new_value)
     }
-    if (old_value !== new_value) {
+    if (this.state.value !== new_value) {
       this.setState({ value: new_value })
       this.props.onChange(new_value)
     }
   }
   handleRange(e){
-    let new_value = e.target.value
+    let { value: new_value } = e.target
     if (this.props.type === 'int') {
       new_value = parseInt(new_value)
     }
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(' ')
 }