add opacity slider and properly debounce it

1 files changed, 102 insertions, 0 deletions

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