1 files changed, 24 insertions, 7 deletions
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index cfd4b30..373dca0 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -2,6 +2,11 @@ import React from 'react'
 import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
 import Marquee from "react-fast-marquee"
 
+const VERTICAL_MARQUEE_DIRECTION = {
+  up: "left",
+  down: "right",
+}
+
 export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
   if (!tile.settings.content) {
     return null
@@ -37,20 +42,32 @@ export default function TileText({ tile, box, bounds, videoBounds, cursors, view
   style.color = tile.settings.font_color || '#dddddd!important'
 
   if (tile.settings.is_marquee) {
+    const verticalDirection = VERTICAL_MARQUEE_DIRECTION[tile.settings.marquee_direction]
+    const direction = verticalDirection || tile.settings.marquee_direction || "left"
     const gradientColor = hexToRgb(tile.settings.marquee_gradient_color)
-    style.width = "100vw"
-    style.height = style.fontSize + "px"
+    let contentStyle = {}
+    if (verticalDirection) {
+      // style.top = 0
+      style.width = "100vh"
+      style.height = tile.settings.marquee_content_width + "px"
+      style.transform += " rotate(90deg)"
+      contentStyle.transform = "rotate(-90deg)"
+      contentStyle.width = tile.settings.marquee_content_width + "px"
+      // contentStyle.height = "100vh"
+    } else {
+      style.width = "100vw"
+      style.height = style.fontSize + "px"
+      contentStyle.width = (tile.settings.marquee_content_width || 200) + "px"
+      contentStyle.height = (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px"
+    }
     content = (
       <Marquee
-        direction={tile.settings.marquee_direction || "left"}
+        direction={direction}
         speed={tile.settings.marquee_speed || 1}
         gradient={!!tile.settings.marquee_gradient}
         gradientColor={gradientColor ? [gradientColor.r, gradientColor.g, gradientColor.b] : [0,0,0]}
       >
-        <div style={{
-          width: (tile.settings.marquee_content_width || 200) + "px",
-          height: (tile.settings.marquee_content_height || (parseInt(tile.settings.font_size) + 20)) + "px",
-        }}>
+        <div style={contentStyle}>
           {content}
         </div>
       </Marquee>