@eyepop.ai/eyepop-render-2d 3.14.7 → 3.15.1

package/dist/eyepop.render2d.index.mjs

@@ -538,7 +538,7 @@ var RenderFace = class {
     let expressions = [];
     if (face.classes) {
       for (let i = 0; i < face.classes.length; i++) {
-        if (face.classes[i].confidence > 0.95) {
+        if ((face.classes[i].confidence ?? 0) > 0.95) {
           const label = EXPRESSION_LABELS.get(face.classes[i].classLabel);
           if (label) {
             expressions.push(label);
@@ -3369,7 +3369,7 @@ var RenderHand = class {
     let minZ = -1;
     for (let i2 = 0; i2 < keyPoints.points.length; i2++) {
       const keyPoint = keyPoints.points[i2];
-      labelsToPoints.set(keyPoint.classLabel, keyPoint);
+      labelsToPoints.set(keyPoint.classLabel ?? "<undefined>", keyPoint);
       if (keyPoint.z) {
         if (keyPoint.z > maxZ) {
           maxZ = keyPoint.z;
@@ -3497,7 +3497,7 @@ var RenderPose = class {
     let minZ = -1;
     for (let i2 = 0; i2 < keyPoints.points.length; i2++) {
       const keyPoint = keyPoints.points[i2];
-      labelsToPoints.set(keyPoint.classLabel, keyPoint);
+      labelsToPoints.set(keyPoint.classLabel ?? "<undefined>", keyPoint);
       if (keyPoint.z) {
         if (keyPoint.z > maxZ) {
           maxZ = keyPoint.z;
@@ -3541,9 +3541,9 @@ var RenderPose = class {
       const radius = MAX_RADIUS - (z - minZ) * (MAX_RADIUS - MIN_RADIUS) / (maxZ - minZ);
       context.beginPath();
       context.arc(x, y, radius, 0, Math.PI * 2, false);
-      if (p.classLabel.includes("left")) {
+      if (p.classLabel?.includes("left")) {
         context.fillStyle = style.colors.left_color;
-      } else if (p.classLabel.includes("right")) {
+      } else if (p.classLabel?.includes("right")) {
         context.fillStyle = style.colors.right_color;
       } else {
         context.fillStyle = style.colors.primary_color;
@@ -3884,9 +3884,9 @@ var RenderKeyPoints = class {
       if (!this.showLabels) continue;
       let label;
       if (typeof p.visible == "undefined") {
-        label = p.classLabel;
+        label = p.classLabel ?? "<undefined>";
       } else {
-        label = `${p.classLabel} (${p.visible ? "visible" : "invisible"})`;
+        label = `${p.classLabel ?? "<undefined>"} (${p.visible ? "visible" : "invisible"})`;
       }
       context.font = style.font;
       context.fillStyle = "#ffffff";
@@ -3906,10 +3906,12 @@ var RenderText = class {
     this.target = DEFAULT_TARGET;
     this.fitToBounds = true;
     this.textPadding = 0.1;
-    const { target = "$..objects[?(@.texts)]", fitToBounds = true, textPadding = 0.1 } = options;
+    this.maxLines = 12;
+    const { target = "$..objects[?(@.texts)]", fitToBounds = true, textPadding = 0.1, maxLines = 12 } = options;
     this.target = target;
     this.fitToBounds = fitToBounds;
     this.textPadding = Math.max(0.02, Math.min(0.2, textPadding));
+    this.maxLines = maxLines;
   }
   start(context, style) {
     this.context = context;
@@ -3931,37 +3933,74 @@ var RenderText = class {
     padding = Math.min(padding, w * this.textPadding, h * this.textPadding);
     const boundingBoxWidth = w - padding * 2;
     const boundingBoxHeight = h - padding * 2;
-    let fontSize = this.getMinFontSize(context, element, boundingBoxWidth, boundingBoxHeight, style, this.fitToBounds);
-    let label = "";
+    const baseFontSize = parseInt(style.font.split(" ")[0]);
     const fontType = style.font.split(" ")[1];
+    const rawLines = [];
+    for (const entry of element.texts) {
+      const text = entry?.text || "";
+      if (!text) continue;
+      rawLines.push(...text.split("\n"));
+    }
+    if (rawLines.length === 0) return;
+    const isShortSingleLine = rawLines.length === 1 && rawLines[0].length <= 60;
+    let fontSize;
+    if (this.fitToBounds && isShortSingleLine) {
+      fontSize = this.getMinFontSize(context, element, boundingBoxWidth, boundingBoxHeight, style, true);
+    } else {
+      fontSize = baseFontSize;
+      if (this.fitToBounds) {
+        const maxFontFromHeight = Math.floor(boundingBoxHeight * 0.12);
+        fontSize = Math.min(fontSize, Math.max(maxFontFromHeight, 10));
+      }
+    }
     context.font = `${fontSize}px ${fontType}`;
-    let totalTextHeight = 0;
-    const textMetrics = [];
-    for (let i = 0; i < element.texts.length; i++) {
-      label = element.texts[i]?.text || "";
-      if (!label) continue;
-      const metrics = context.measureText(label);
-      const lineHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-      totalTextHeight += lineHeight;
-      textMetrics.push({
-        text: label,
-        width: metrics.width,
-        height: lineHeight
-      });
+    const wrappedLines = [];
+    for (const line of rawLines) {
+      const wrapped = this.wrapLine(context, line, boundingBoxWidth);
+      wrappedLines.push(...wrapped);
+    }
+    let displayLines = wrappedLines;
+    const truncated = this.maxLines > 0 && wrappedLines.length > this.maxLines;
+    if (truncated) {
+      displayLines = wrappedLines.slice(0, this.maxLines);
+      const last = displayLines[displayLines.length - 1];
+      displayLines[displayLines.length - 1] = last.replace(/\s+\S*$/, "") + "\u2026";
     }
     const spacing = fontSize * 0.2;
-    if (element.texts.length > 1) {
-      totalTextHeight += spacing * (element.texts.length - 1);
+    const totalTextHeight = displayLines.length * fontSize + (displayLines.length - 1) * spacing;
+    if (totalTextHeight > boundingBoxHeight && displayLines.length > 0) {
+      const scaleFactor = boundingBoxHeight / totalTextHeight;
+      fontSize = Math.max(8, Math.floor(fontSize * scaleFactor));
+      context.font = `${fontSize}px ${fontType}`;
     }
-    let textY = element.y * yScale + yOffset + (h - totalTextHeight) / 2;
-    for (let i = 0; i < textMetrics.length; i++) {
-      const metrics = textMetrics[i];
-      let textX = element.x * xScale + xOffset + (w - metrics.width) / 2;
-      this.drawText(metrics.text, context, textX, textY, style, fontSize);
-      textY += metrics.height + spacing;
+    const finalSpacing = fontSize * 0.2;
+    const finalLineHeight = fontSize + finalSpacing;
+    const finalTotalHeight = displayLines.length * finalLineHeight - finalSpacing;
+    let textY = element.y * yScale + yOffset + (h - finalTotalHeight) / 2;
+    const textX = element.x * xScale + xOffset + padding;
+    for (const line of displayLines) {
+      this.drawText(line, context, textX, textY, style, fontSize);
+      textY += finalLineHeight;
     }
   }
-  // Draw a label on the canvas
+  wrapLine(context, text, maxWidth) {
+    if (!text) return [""];
+    if (context.measureText(text).width <= maxWidth) return [text];
+    const words = text.split(" ");
+    const lines = [];
+    let current = "";
+    for (const word of words) {
+      const candidate = current ? `${current} ${word}` : word;
+      if (context.measureText(candidate).width > maxWidth && current) {
+        lines.push(current);
+        current = word;
+      } else {
+        current = candidate;
+      }
+    }
+    if (current) lines.push(current);
+    return lines.length > 0 ? lines : [text];
+  }
   drawText(text, context, xPos, yPos, style, fontSize) {
     context.fillStyle = "#ffffff";
     context.textAlign = "left";
@@ -3973,10 +4012,9 @@ var RenderText = class {
   static toTitleCase(str) {
     if (!str) return "";
     return str.replace(/\w\S*/g, function(txt) {
-      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+      return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();
     });
   }
-  // Gets the optimal font size for all labels to fit in the bounding box
   getMinFontSize(context, element, width, height, style, scaleToFit = false) {
     const textLines = (element.texts || []).map((t) => t?.text || "").filter((t) => t);
     const textCount = textLines.length;