fix(TextActor): add support for multi line text

fixes : #3484

Author: daker

Sources/Rendering/Core/TextActor/example/index.js

@@ -34,7 +34,7 @@ renderWindow.render();
 
 const gui = new GUI();
 const params = {
-  text: 'Hello World!',
+  text: 'Hello World\nfrom vtk.js',
   x: window.innerWidth / 4,
   y: window.innerHeight / 4,
   color: [0, 0, 0],

Sources/Rendering/Core/TextActor/index.js

@@ -28,6 +28,13 @@ function vtkTextActor(publicAPI, model) {
     yResolution: 1,
   });
 
+  function normalizeLineBreaks(text) {
+    return text
+      .replace(/\\r\\n/g, '\n')
+      .replace(/\\n/g, '\n')
+      .replace(/\\r/g, '\r');
+  }
+
   function createImageData(text) {
     const fontSizeScale = publicAPI.getProperty().getFontSizeScale();
     const fontStyle = publicAPI.getProperty().getFontStyle();
@@ -43,27 +50,38 @@ function vtkTextActor(publicAPI, model) {
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
 
     // Set the text properties to measure
+    const normalizedText = normalizeLineBreaks(text);
     const textSize = fontSizeScale(resolution) * dpr;
+    const lines = normalizedText.split(/\r\n|\r|\n/);
 
     ctx.font = `${fontStyle} ${textSize}px "${fontFamily}"`;
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-
-    // Measure the text
-    const metrics = ctx.measureText(text);
-    const textWidth = metrics.width / dpr;
-
-    const {
-      actualBoundingBoxLeft,
-      actualBoundingBoxRight,
-      actualBoundingBoxAscent,
-      actualBoundingBoxDescent,
-    } = metrics;
-    const hAdjustment = (actualBoundingBoxLeft - actualBoundingBoxRight) / 2;
-    const vAdjustment =
-      (actualBoundingBoxAscent - actualBoundingBoxDescent) / 2;
+    ctx.textBaseline = 'alphabetic';
+    ctx.textAlign = 'left';
+
+    const fallbackMetrics = ctx.measureText('Mg');
+    const fallbackAscent =
+      fallbackMetrics.actualBoundingBoxAscent || textSize / dpr;
+    const fallbackDescent = fallbackMetrics.actualBoundingBoxDescent || 0;
+
+    const lineMetrics = lines.map((line) => {
+      const metrics = ctx.measureText(line);
+      return {
+        left: metrics.actualBoundingBoxLeft || 0,
+        right: metrics.actualBoundingBoxRight || metrics.width || 0,
+      };
+    });
 
-    const textHeight = textSize / dpr - vAdjustment;
+    const maxLeft = lineMetrics.reduce(
+      (value, metrics) => Math.max(value, metrics.left),
+      0
+    );
+    const maxRight = lineMetrics.reduce(
+      (value, metrics) => Math.max(value, metrics.right),
+      0
+    );
+    const lineHeight = fallbackAscent + fallbackDescent;
+    const textWidth = maxLeft + maxRight;
+    const textHeight = Math.max(lines.length * lineHeight, lineHeight);
 
     // Update canvas size to fit text and ensure it is at least 1x1 pixel
     const width = Math.max(Math.round(textWidth * dpr), 1);
@@ -72,9 +90,7 @@ function vtkTextActor(publicAPI, model) {
     canvas.width = width;
     canvas.height = height;
 
-    // Vertical flip
-    ctx.translate(0, height);
-    ctx.scale(1, -1);
+    ctx.setTransform(1, 0, 0, -1, 0, height);
 
     // Clear the canvas
     ctx.clearRect(0, 0, width, height);
@@ -89,8 +105,8 @@ function vtkTextActor(publicAPI, model) {
     ctx.imageSmoothingQuality = 'high';
     ctx.font = `${fontStyle} ${textSize}px "${fontFamily}"`;
     ctx.fillStyle = vtkMath.floatRGB2HexCode(fontColor);
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
+    ctx.textBaseline = 'alphabetic';
+    ctx.textAlign = 'left';
 
     // Set shadow
     if (shadowColor) {
@@ -100,8 +116,12 @@ function vtkTextActor(publicAPI, model) {
       ctx.shadowBlur = shadowBlur;
     }
 
-    // Draw the text
-    ctx.fillText(text, width / 2 + hAdjustment, height / 2 + vAdjustment);
+    const x = maxLeft * dpr;
+    const baseline = fallbackAscent * dpr;
+    const lineHeightPx = lineHeight * dpr;
+    lines.forEach((line, index) => {
+      ctx.fillText(line, x, baseline + index * lineHeightPx);
+    });
 
     // Update plane dimensions to match text size
     plane.set({