add opacity slider and properly debounce it

8 files changed, 198 insertions, 134 deletions

diff --git a/frontend/common/slider.component.js b/frontend/common/slider.component.js
index 70a4abd..e5dfba7 100644
--- a/frontend/common/slider.component.js
+++ b/frontend/common/slider.component.js
@@ -1,28 +1,40 @@
-import { React, Component } from 'preact'
+import React, { Component } from 'react'
+import { default as throttle } from 'lodash.throttle'
 
-const SLIDER_THROTTLE_TIME = 100
+const SLIDER_THROTTLE_TIME = 1000 / 30
 
 export default class Slider extends Component {
+  state = {
+    value: 0
+  }
+
   constructor(props){
     super(props)
     this.timeout = 0
-    this.state = {
-      value: props.value
-    }
     this.handleInput = this.handleInput.bind(this)
     this.handleRange = this.handleRange.bind(this)
+    this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    let next_value = nextProps.value || nextProps.opt[nextProps.name]
-    if (next_value !== this.state.value) {
+  componentDidMount() {
+    let { value } = this.props
+    if (this.props.type === 'int') {
+      value = parseInt(value)
+    }
+    console.log('mount', value)
+    this.setState({ value })
+  }
+  componentDidUpdate(prevProps) {
+    let { value } = this.props
+    if (prevProps.value !== value) {
       if (this.props.type === 'int') {
-        next_value = parseInt(next_value)
+        value = parseInt(value)
       }
-      this.setState({ value: next_value })
+      console.log('update', value)
+      this.setState({ value })
     }
   }
   handleInput(e){
-    let { name, opt } = this.props
+    let { name, opt } = this.props
     let old_value = opt[name]
     let new_value = e.target.value
     if (new_value === '') {
@@ -34,31 +46,33 @@ export default class Slider extends Component {
     else if (this.props.type === 'odd') {
       new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
     }
+    else {
+      new_value = this.parseFloat(new_value)
+    }
     if (old_value !== new_value) {
       this.setState({ value: new_value })
-      this.props.onChange && this.props.onChange(new_value)
+      this.props.onChange(new_value)
     }
-    clearTimeout(this.timeout)
   }
   handleRange(e){
-    clearTimeout(this.timeout)
     let new_value = e.target.value
     if (this.props.type === 'int') {
       new_value = parseInt(new_value)
     }
-    if (this.props.type === 'odd') {
+    else if (this.props.type === 'odd') {
       new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
     }
-    if (this.props.type === 'list') {
+    else if (this.props.type === 'list') {
       new_value = this.props.options[new_value] || this.props.options[0]
     }
+    else {
+      new_value = parseFloat(new_value)
+    }
     this.setState({ value: new_value })
-    this.timeout = setTimeout(() => {
-      this.props.onChange && this.props.onChange(new_value)
-    }, SLIDER_THROTTLE_TIME)
+    this.onChange(this.props.name, new_value)
   }
   render(){
-    let { name, title } = this.props
+    let { name, title } = this.props
     let value = this.state.value
     if (typeof value === 'undefined') {
       value = this.props.min
@@ -71,7 +85,7 @@ export default class Slider extends Component {
       step = 1
     } else if (this.props.type === 'list') {
       min = 0
-      max = this.props.options.length-1
+      max = this.props.options.length - 1
       step = 1
       value = this.props.options.indexOf(value)
     } else {
@@ -79,20 +93,26 @@ export default class Slider extends Component {
       text_value = parseFloat(value).toFixed(2)
     }
     return (
-      <div className='slider param'>
-        <label>
-          <span>{title || name.replace(/_/g, ' ')}</span>
-          <input type='text' value={text_value} onBlur={this.handleInput} />
-        </label>
+      <label className={this.props.error ? 'slider error' : 'slider'}>
+        <span>{title}</span>
+        <input
+          type='number'
+          min={min}
+          max={max}
+          step={step}
+          value={text_value}
+          onChange={this.handleInput}
+          onBlur={this.handleInput}
+        />
         <input
           type='range'
           min={min}
           max={max}
           step={step}
           value={value}
-          onInput={this.handleRange}
+          onChange={this.handleRange}
         />
-      </div>
+      </label>
     )
   }
 }
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index af29e15..c635f5e 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -127,6 +127,23 @@
   font-size: smaller;
   margin-bottom: 0.25rem;
 }
+
+.box .slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.box .slider span {
+  min-width: 5px;
+}
+.box .slider input[type='number'] {
+  width: 3.5rem;
+}
+.box .slider input[type='range'] {
+  width: 6rem; 
+}
+
 /* Graph handles */
 
 .handle {
diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 37e23a7..297f7e7 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -11,6 +11,8 @@ import * as tileActions from '../../tile/tile.actions'
 import { Loader } from '../../../common'
 import { clamp, dist } from '../../../util'
 
+import TileHandle from './tile.handle'
+
 const defaultState = {
   dragging: false,
   bounds: null,
@@ -196,104 +198,6 @@ class PageEditor extends Component {
   }
 }
 
-const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
-  // console.log(tile)
-  const { width, height } = tile.settings
-  const style = {
-    transform: generateTransform(tile, box),
-  }
-  // console.log(generateTransform(tile))
-  let content;
-  let className = 'tile ' + tile.type
-  // console.log(tile.settings)
-  switch (tile.type) {
-    case 'image':
-      if (!tile.settings.url) {
-        return null
-      }
-      if (tile.settings.is_tiled) {
-        style.backgroundImage = 'url(' + tile.settings.url + ')'
-        style.backgroundPosition = tile.settings.align.replace('_', ' ')
-        switch (tile.settings.tile_style) {
-          default:
-          case 'tile':
-            break
-          case 'cover':
-            style.backgroundSize = 'cover'
-            break
-          case 'contain':
-            style.backgroundSize = 'contain'
-            break
-          case 'contain no-repeat':
-            style.backgroundSize = 'contain'
-            style.backgroundRepeat = 'no-repeat'
-            break
-        }
-        className += ' is_tiled'
-      } else {
-        className += ' ' + tile.settings.align
-        content = <img src={tile.settings.url} />
-      }
-      break
-    case 'text':
-      if (!tile.settings.content) {
-        return null
-      }
-      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
-      className += ' ' + tile.settings.align
-      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
-      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
-      style.fontFamily = tile.settings.font_family
-      style.fontSize = tile.settings.font_size + 'px'
-      style.lineHeight = 1.5
-      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
-      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
-      style.backgroundColor = tile.settings.background_color || 'transparent'
-      style.color = tile.settings.font_color || '#dddddd!important'
-      break
-  }
-  return (
-    <div
-      className={className}
-      onMouseDown={onMouseDown}
-      onDoubleClick={onDoubleClick}
-      style={style}
-    >
-      {content}
-    </div>
-  )
-}
-
-const generateTransform = (tile, box) => {
-  let { x, y, align, rotation, scale, is_tiled } = tile.settings
-  if (is_tiled) {
-    return 'translateZ(0)'
-  }
-  if (box) {
-    x += box.dx
-    y += box.dy
-  }
-  const [yalign, xalign] = align.split('_')
-  let transform = ['translateZ(0)']
-  if (yalign === 'center') {
-    transform.push('translateY(-50%)')
-  }
-  if (xalign === 'center') {
-    transform.push('translateX(-50%)')
-  }
-  // if (x % 2 == 1) x += 0.5
-  // if (y % 2 == 1) y += 0.5
-  transform.push('translateX(' + x + 'px)')
-  transform.push('translateY(' + y + 'px)')
-  if (scale !== 1) {
-    transform.push('scale(' + scale + ')')
-  }
-  if (rotation !== 0) {
-    transform.push('rotateZ(' + rotation + 'rad)')
-  }
-  return transform.join(' ')
-}
-
 const mapStateToProps = state => ({
   graph: state.graph,
   page: state.page,
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index d4913fe..09fa57f 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -5,7 +5,10 @@ import { Link } from 'react-router-dom'
 
 import { session } from '../../../session'
 
-import { TextInput, NumberInput, ColorInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import {
+  TextInput, NumberInput, ColorInput, Slider,
+  Select, LabelDescription, TextArea, Checkbox,
+  SubmitButton, Loader } from '../../../common'
 import { preloadImage } from '../../../util'
 
 import * as tileActions from '../../tile/tile.actions'
@@ -325,6 +328,16 @@ 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}
+          />
+
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
diff --git a/frontend/views/page/components/tile.handle.js b/frontend/views/page/components/tile.handle.js
new file mode 100644
index 0000000..43817a3
--- /dev/null
+++ b/frontend/views/page/components/tile.handle.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+
+const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
+  // console.log(tile)
+  const { width, height } = tile.settings
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let content;
+  let className = 'tile ' + tile.type
+  // console.log(tile.settings)
+  switch (tile.type) {
+    case 'image':
+      if (!tile.settings.url) {
+        return null
+      }
+      if (tile.settings.is_tiled) {
+        style.backgroundImage = 'url(' + tile.settings.url + ')'
+        style.backgroundPosition = tile.settings.align.replace('_', ' ')
+        switch (tile.settings.tile_style) {
+          default:
+          case 'tile':
+            break
+          case 'cover':
+            style.backgroundSize = 'cover'
+            break
+          case 'contain':
+            style.backgroundSize = 'contain'
+            break
+          case 'contain no-repeat':
+            style.backgroundSize = 'contain'
+            style.backgroundRepeat = 'no-repeat'
+            break
+        }
+        className += ' is_tiled'
+      } else {
+        className += ' ' + tile.settings.align
+        content = <img src={tile.settings.url} />
+      }
+      break
+    case 'text':
+      if (!tile.settings.content) {
+        return null
+      }
+      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+      className += ' ' + tile.settings.align
+      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+      style.fontFamily = tile.settings.font_family
+      style.fontSize = tile.settings.font_size + 'px'
+      style.lineHeight = 1.5
+      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
+      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
+      style.backgroundColor = tile.settings.background_color || 'transparent'
+      style.color = tile.settings.font_color || '#dddddd!important'
+      break
+  }
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
+
+const generateTransform = (tile, box) => {
+  let { x, y, align, rotation, scale, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(0)'
+  }
+  if (box) {
+    x += box.dx
+    y += box.dy
+  }
+  const [yalign, xalign] = align.split('_')
+  let transform = ['translateZ(0)']
+  if (yalign === 'center') {
+    transform.push('translateY(-50%)')
+  }
+  if (xalign === 'center') {
+    transform.push('translateX(-50%)')
+  }
+  // if (x % 2 == 1) x += 0.5
+  // if (y % 2 == 1) y += 0.5
+  transform.push('translateX(' + x + 'px)')
+  transform.push('translateY(' + y + 'px)')
+  if (scale !== 1) {
+    transform.push('scale(' + scale + ')')
+  }
+  if (rotation !== 0) {
+    transform.push('rotateZ(' + rotation + 'rad)')
+  }
+  return transform.join(' ')
+}
+
+export default TileHandle
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index 82ea178..1c66491 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -17,7 +17,7 @@ const initialState = crudState('page', {
 const reducer = crudReducer('page')
 
 export default function pageReducer(state = initialState, action) {
-  console.log(action.type, action)
+  // console.log(action.type, action)
   state = reducer(state, action)
   switch (action.type) {
     case types.tile.create:
diff --git a/package-lock.json b/package-lock.json
index 0956159..315c8a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7825,12 +7825,9 @@
       "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
     },
     "lodash.throttle": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.0.1.tgz",
-      "integrity": "sha1-syEWYu6dgvVpA9BzEmKqqoc6YzA=",
-      "requires": {
-        "lodash.debounce": "^4.0.0"
-      }
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
     },
     "loose-envify": {
       "version": "1.4.0",
@@ -9451,6 +9448,16 @@
       "integrity": "sha1-QwcFc/AzHRKuFvrmVyrZ1/y3Ya4=",
       "requires": {
         "lodash.throttle": "4.0.1"
+      },
+      "dependencies": {
+        "lodash.throttle": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.0.1.tgz",
+          "integrity": "sha1-syEWYu6dgvVpA9BzEmKqqoc6YzA=",
+          "requires": {
+            "lodash.debounce": "^4.0.0"
+          }
+        }
       }
     },
     "redux-thunk": {
diff --git a/package.json b/package.json
index 33456c3..a336fe4 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "file-saver": "^2.0.2",
     "history": "^4.10.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "node-fetch": "^2.6.0",
     "preact": "^10.3.3",
     "preact-compat": "^3.19.0",