1 files changed, 42 insertions, 17 deletions

diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index c0f92a5..c0ddd3e 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,5 +1,6 @@
 export const generateTransform = (tile, box, bounds, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
+  let xUnits, yUnits
   if (is_tiled) {
     return 'translateZ(0)'
   }
@@ -17,22 +18,45 @@ export const generateTransform = (tile, box, bounds, videoBounds) => {
   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
+  if (!tile.settings.scale_to_video) {
+    if (yalign === 'center') {
+      transform.push('translateY(-50%)')
+    }
+    if (xalign === 'center') {
+      transform.push('translateX(-50%)')
+    }
+    xUnits = units === 'video' ? Math.round(videoUnits(x, bounds, videoBounds)) + "px" : x + units
+    yUnits = units === 'video' ? Math.round(videoUnits(y, bounds, videoBounds)) + "px" : y + units
+
+    transform.push('translateX(' + xUnits + ')')
+    transform.push('translateY(' + yUnits + ')')
+    if (scale !== 1) {
+      transform.push('scale(' + scale + ')')
+    }
+  } else {
+    yUnits = y + "px"
+    xUnits = x + "px"
+
+    if (yalign === 'center') {
+      transform.push('translateY(-50%)')
+    }
+    if (xalign === 'center') {
+      transform.push('translateX(-50%)')
+    }
+    if (xalign === 'right') {
+      transform.push('translateX(50%)')
+    }
+    if (yalign === 'bottom') {
+      transform.push('translateY(50%)')
+    }
 
-  transform.push('translateX(' + xUnits + ')')
-  transform.push('translateY(' + yUnits + ')')
-  if (scale !== 1) {
     transform.push('scale(' + scale + ')')
+    transform.push('scale(' + videoUnits(1, bounds, videoBounds) + ')')
+
+    transform.push('translateY(' + yUnits + ')')
+    transform.push('translateX(' + xUnits + ')')
   }
+
   if (rotation !== 0) {
     transform.push('rotateZ(' + rotation + 'deg)')
   }
@@ -75,7 +99,7 @@ export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
   if (!value) return "auto"
   if (tile.settings.units) {
     if (tile.settings.units === 'video') {
-      return videoUnits(value, bounds, videoBounds)
+      return Math.round(videoUnits(value, bounds, videoBounds)) + "px"
     }
     return value + tile.settings.units
   }
@@ -84,9 +108,9 @@ export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
 
 export const videoUnits = (value, bounds, videoBounds) => {
   if ((videoBounds.width / videoBounds.height) > (bounds.width / bounds.height)) {
-    return Math.round(value * bounds.height / videoBounds.height) + 'px'
+    return value * bounds.height / videoBounds.height
   }
-  return Math.round(value * bounds.width / videoBounds.width) + 'px'
+  return value * bounds.width / videoBounds.width
 }
 
 export const hexToRgb = (hex) => {
@@ -121,9 +145,10 @@ export const pickCursor = (tile, cursors, viewing) => {
     }
   }
   if (isCustom) {
-    className = null
+    className = ""
     cursorStyle = `url(${customCursor.url}) ${x} ${y}, `
     cursorStyle += (tile.target_page_id || tile.href) ? 'pointer' : 'default'
   }
+
   return [className, cursorStyle]
 }
\ No newline at end of file