fix: allow surface to override radius logic. Clean up TextMagnifier code

rdkcentral · Oct 18, 2024 · 7aba029 · 7aba029
1 parent 224a750
commit 7aba029
Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/Surface/Surface.js b/packages/@lightningjs/ui-components/src/components/Surface/Surface.js
@@ -52,6 +52,10 @@ export default class Surface extends Base {
     return this.w;
   }
 
+  get _radius() {
+    return getMaxRoundRadius(this.style.radius, this.w, this.h);
+  }
+
   _update() {
     this._updateLayout();
     this._updateScale();
@@ -62,7 +66,7 @@ export default class Surface extends Base {
       texture: lng.Tools.getRoundRect(
         this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile
         this.innerH - 2,
-        getMaxRoundRadius(this.style.radius, this.w, this.h),
+        this._radius,
         0,
         null,
         true,

diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.js b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.js
@@ -37,8 +37,8 @@ export default class TextMagnifier extends Surface {
     return 'unfocused';
   }
 
-  set mode(value) {
-    // Disable Mode
+  set mode(_) {
+    // Mode is disabled, no action needed
   }
 
   get content() {
@@ -52,6 +52,18 @@ export default class TextMagnifier extends Surface {
     }
   }
 
+  get _totalHeight() {
+    const baseHeight =
+      this.style.textStyle.lineHeight + Math.max(...this._radius) * 2; // Accommodate for all configurations of radii
+    return Math.max(baseHeight, this.style.textStyle.lineHeight * 2); // Ensure the fade clears
+  }
+
+  get _radius() {
+    return this.location === 'top'
+      ? [0, 0, this.style.radius, this.style.radius]
+      : [this.style.radius, this.style.radius, 0, 0];
+  }
+
   _construct() {
     super._construct();
     this._location = 'top';
@@ -62,36 +74,51 @@ export default class TextMagnifier extends Surface {
     return {
       ...super._template(),
       ScrollWrapper: {
-        type: ScrollWrapper
+        type: ScrollWrapper,
+        autoScroll: true
       }
     };
   }
 
   _update() {
-    const stageWidth = this.stage.w / this.stage.getRenderPrecision();
+    const renderPrecision = this.stage.getRenderPrecision();
+    const stageWidth = this.stage.w / renderPrecision;
+
     this.patch({
-      w: stageWidth - this.style.marginX * 2,
-      h: this.style.h,
-      x: this.style.marginX,
+      w: stageWidth - this.style.gutterX * 2,
+      h: this._totalHeight,
+      x: this.style.gutterX,
       mountY: this.location === 'top' ? 0 : 1,
-      y:
-        this.location === 'top'
-          ? -this.style.radius
-          : this.stage.h / this.stage.getRenderPrecision() + this.style.radius
+      y: this.location === 'top' ? 0 : this.stage.h / renderPrecision,
+      zIndex: this.style.zIndex
     });
 
     this._updateScrollWrapper();
     super._update();
   }
 
   _updateScrollWrapper() {
+    const yCenter = this._totalHeight / 2;
+    const yOffset = yCenter - this.style.textStyle.fontSize / 2;
+    const adjustedHeight = this._totalHeight - yOffset;
+    const radius = Math.max(...this._radius);
+    const gutterX = this.style.gutterX;
+    const patchWidth = this.w - Math.max(radius, gutterX) * 2;
+    const patchX = Math.max(radius, gutterX);
+
     this.tag('ScrollWrapper').patch({
-      w: this.w - this.style.gutterX * 2,
-      h: this.style.h - this.style.gutterY * 2,
-      y: this.style.gutterY,
-      style: { textStyle: this.style.textStyle },
+      alpha: this._content && this._content.length ? 1 : 0,
       content: this._content,
-      alpha: this.content && this.content.length ? 1 : 0
+      h: adjustedHeight,
+      w: patchWidth,
+      x: patchX,
+      y: yOffset,
+      style: {
+        textStyle: this.style.textStyle,
+        fadeHeight: this.style.textStyle.lineHeight,
+        contentMarginTop: 0,
+        contentMarginLeft: 0
+      }
     });
   }
 }
diff --git a/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.styles.js b/packages/@lightningjs/ui-components/src/components/TextMagnifier/TextMagnifier.styles.js
@@ -19,12 +19,11 @@
 export const base = theme => {
   return {
     color: theme.color.fillNeutral,
-    gutterX: theme.layout.gutterX,
+    gutterX: theme.layout.gutterX * 2,
     gutterY: theme.layout.safe,
-    h: theme.typography.headline1.lineHeight + theme.layout.marginY * 2,
-    marginX: theme.layout.safe,
     radius: theme.radius.lg,
-    textStyle: theme.typography.display1
+    textStyle: theme.typography.display1,
+    zIndex: 9999
   };
 };
 

diff --git a/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.js b/packages/@lightningjs/ui-components/src/mixins/withTextMagnifier/index.js
@@ -70,8 +70,7 @@ export default function (Base) {
         TextMagnifier: {
           type: TextMagnifier,
           location: this._location,
-          content: this._focusText,
-          zIndex: 9999
+          content: this._focusText
         }
       });
     }