1 files changed, 80 insertions, 0 deletions
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
new file mode 100644
index 0000000..46d7764
--- /dev/null
+++ b/frontend/app/views/tile/tile.utils.js
@@ -0,0 +1,80 @@
+export const generateTransform = (tile, box, bounds, videoBounds) => {
+  let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(0)'
+  }
+  if (box) {
+    x += box.dx
+    y += box.dy
+  }
+  units = units || 'px'
+  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
+  const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
+  const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
+
+  transform.push('translateX(' + xUnits + ')')
+  transform.push('translateY(' + yUnits + ')')
+  if (scale !== 1) {
+    transform.push('scale(' + scale + ')')
+  }
+  if (rotation !== 0) {
+    transform.push('rotateZ(' + rotation + 'deg)')
+  }
+  return transform.join(' ')
+}
+
+export const generateVideoStyle = (tile, bounds) => {
+  const style = {
+    pointerEvents: "none",
+  }
+  switch (tile.settings.video_style) {
+    case 'normal':
+      style.width = "auto"
+      style.height = "auto"
+      break
+    case 'cover':
+      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
+        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
+        style.height = bounds.height
+      } else {
+        style.width = bounds.width
+        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
+      }
+      break
+    case 'contain':
+      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
+        style.width = bounds.width
+        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
+      } else {
+        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
+        style.height = bounds.height
+      }
+      break
+  }
+  return style
+}
+
+export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
+  const value = tile.settings[dimension]
+  if (!value) return "auto"
+  if (tile.settings.units) {
+    if (tile.settings.units === 'video') {
+      return videoUnits(value, bounds, videoBounds)
+    }
+    return value + tile.settings.units
+  }
+  return value + "px"
+}
+
+export const videoUnits = (value, bounds, videoBounds) => (
+  Math.round(value / videoBounds.width * bounds.width) + 'px'
+)
+\ No newline at end of file