From cae5f6fd055602759adfce2c7163003ef6beef40 Mon Sep 17 00:00:00 2001
From: Ben Raymond <ben@theraymonds.org>
Date: Tue, 4 Apr 2023 17:22:51 +1000
Subject: [PATCH] respect position parm for news-title layer, add fontSize parm

---
 README.md                            |  1 +
 sources/fabric/fabricFrameSources.js | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 9ce0522e..913a8eda 100644
--- a/README.md
+++ b/README.md
@@ -301,6 +301,7 @@ Title with background
 #### Layer type 'news-title'
 - `fontPath` - See `defaults.layer.fontPath`
 - `text`
+- `fontSize`
 - `textColor` - default `#ffffff`
 - `backgroundColor` - default `#d02a42`
 - `position` - See [Position parameter](#position-parameter)
diff --git a/sources/fabric/fabricFrameSources.js b/sources/fabric/fabricFrameSources.js
index 3c7ed5ca..4ed7c136 100644
--- a/sources/fabric/fabricFrameSources.js
+++ b/sources/fabric/fabricFrameSources.js
@@ -304,36 +304,40 @@ export async function titleFrameSource({ width, height, params }) {
 }
 
 export async function newsTitleFrameSource({ width, height, params }) {
-  const { text, textColor = '#ffffff', backgroundColor = '#d02a42', fontFamily = defaultFontFamily, delay = 0, speed = 1 } = params;
+  const { text, textColor = '#ffffff', backgroundColor = '#d02a42', fontFamily = defaultFontFamily, fontSize = 0.05, position = { x:0, y:0.08 }, delay = 0, speed = 1 } = params;
 
   async function onRender(progress, canvas) {
     const min = Math.min(width, height);
 
-    const fontSize = Math.round(min * 0.05);
+    const { left, top, originX, originY } = getPositionProps({ position, width, height });
+    const fromLeft = left / width < 0.5;
+    const fontSizeAbs = Math.round(min * fontSize);
 
     const easedBgProgress = easeOutExpo(Math.max(0, Math.min((progress - delay) * speed * 3, 1)));
     const easedTextProgress = easeOutExpo(Math.max(0, Math.min((progress - delay - 0.02) * speed * 4, 1)));
     const easedTextOpacityProgress = easeOutExpo(Math.max(0, Math.min((progress - delay - 0.07) * speed * 4, 1)));
 
-    const top = height * 0.08;
-
     const paddingV = 0.07 * min;
     const paddingH = 0.03 * min;
 
     const textBox = new fabric.Text(text, {
       top,
-      left: paddingV + (easedTextProgress - 1) * width,
       fill: textColor,
       opacity: easedTextOpacityProgress,
       fontFamily,
-      fontSize,
+      fontSize: fontSizeAbs,
       charSpacing: width * 0.1,
     });
+    if (fromLeft) {
+      textBox.set('left', left + paddingV + (easedTextProgress - 1) * width);
+    } else {
+      textBox.set('left', left - paddingV - easedTextProgress * textBox.width);
+    }
 
     const bgWidth = textBox.width + (paddingV * 2);
     const rect = new fabric.Rect({
       top: top - paddingH,
-      left: (easedBgProgress - 1) * bgWidth,
+      left: fromLeft ? (left + (easedBgProgress - 1) * bgWidth) : (left - (easedBgProgress * bgWidth)),
       width: bgWidth,
       height: textBox.height + (paddingH * 2),
       fill: backgroundColor,