6 files changed, 20 insertions, 20 deletions
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index beeb36a..b6d1d78 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index a87b95f..fb6ec03 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
 
   let content = ""
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width', videoBounds)
-  style.height = unitsDimension(tile, 'height', videoBounds)
+  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
 
   return (
     <div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 444a56b..47d83a1 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 172212a..0bcccc9 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
   }
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width', videoBounds)
-  style.height = unitsDimension(tile, 'height', videoBounds)
+  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
   style.fontFamily = tile.settings.font_family
   style.fontSize = tile.settings.font_size + 'px'
   style.lineHeight = 1.5
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 271a671..a34d348 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -59,7 +59,7 @@ export default class TileVideo extends Component {
     let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
     // console.log(tile)
     const style = {
-      transform: generateTransform(tile, box, videoBounds),
+      transform: generateTransform(tile, box, bounds, videoBounds),
       opacity: tile.settings.opacity,
     }
     let className = ['tile', tile.type].join(' ')
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index ed1cbc8..46d7764 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,4 +1,4 @@
-export const generateTransform = (tile, box, videoBounds) => {
+export const generateTransform = (tile, box, bounds, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
@@ -18,8 +18,8 @@ export const generateTransform = (tile, box, videoBounds) => {
   }
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
-  const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
-  const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+  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 + ')')
@@ -63,18 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
   return style
 }
 
-export const unitsDimension = (tile, dimension, videoBounds) => {
+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, videoBounds)
+      return videoUnits(value, bounds, videoBounds)
     }
     return value + tile.settings.units
   }
   return value + "px"
 }
 
-export const videoUnits = (value, videoBounds) => (
-  (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+export const videoUnits = (value, bounds, videoBounds) => (
+  Math.round(value / videoBounds.width * bounds.width) + 'px'
 )
 \ No newline at end of file