add opacity slider and properly debounce it

5 files changed, 136 insertions, 100 deletions

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: