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

package/README.md

@@ -46,7 +46,7 @@ const example_image_path = 'examples/example.jpg'
 
     context.drawImage(image, 0, 0)
 
-    const endpoint = await EyePop.endpoint().connect()
+    const endpoint = await EyePop.workerEndpoint().connect()
     try {
         let results = await endpoint.process({ source: { path: example_image_path } })
         for await (let result of results) {
@@ -93,7 +93,7 @@ const example_image_path = 'examples/example.jpg'
 
                 const endpoint = await EyePop.workerEndpoint({auth: {oAuth2: true}}).connect();
                 await endpoint.changePop({ components: [{
-                    type: PopComponentType.INFERENCE,
+                    type: 'inference',
                     model: 'eyepop.person:latest',
                     categoryName: 'person'
                 }]})
@@ -116,7 +116,7 @@ Change this rendering behaviour by passing in rendering rule(s), e.g.:
 
 ```javascript
 // ...
-Render2d.renderer(context, [Render2.renderFace()]).draw(result)
+Render2d.renderer(context, [Render2d.renderFace()]).draw(result)
 // ...
 ```
 
@@ -129,11 +129,11 @@ Most prebuild render classes provide a reasonable defaults, as shown below.
 
 ```typescript
 Render2d.renderBox({
-    showClass = true,
-    showConfidence = false,
-    showTraceId = false,
-    showNestedClasses = false,
-    target = '$..objects.*',
+    showClass: true,
+    showConfidence: false,
+    showTraceId: false,
+    showNestedClasses: false,
+    target: '$..objects.*',
 })
 ```
 
@@ -157,8 +157,8 @@ Render2d.renderHand({
 
 ```typescript
 Render2d.renderFace({
-    showLabels = false,
-    target = '$..objects[?(@.classLabel=="face")]',
+    showLabels: false,
+    target: '$..objects[?(@.classLabel=="face")]',
 })
 ```
 

package/dist/eyepop.render2d.index.d.mts

@@ -178,16 +178,19 @@ type RenderTextOptions = {
     showText: boolean;
     fitToBounds: boolean;
     textPadding?: number;
+    maxLines?: number;
 } & RenderTarget;
 declare class RenderText implements Render {
     target: string;
     fitToBounds: boolean;
     textPadding: number;
+    maxLines: number;
     private context;
     private style;
     constructor(options?: Partial<RenderTextOptions>);
     start(context: CanvasRenderingContext2D, style: Style): void;
     draw(element: PredictedObject, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime): void;
+    private wrapLine;
     drawText(text: string, context: CanvasRenderingContext2D, xPos: number, yPos: number, style: Style, fontSize: number): void;
     static toTitleCase(str: string): string;
     getMinFontSize(context: CanvasRenderingContext2D, element: any, width: number, height: number, style: any, scaleToFit?: boolean): number;

package/dist/eyepop.render2d.index.d.ts

@@ -178,16 +178,19 @@ type RenderTextOptions = {
     showText: boolean;
     fitToBounds: boolean;
     textPadding?: number;
+    maxLines?: number;
 } & RenderTarget;
 declare class RenderText implements Render {
     target: string;
     fitToBounds: boolean;
     textPadding: number;
+    maxLines: number;
     private context;
     private style;
     constructor(options?: Partial<RenderTextOptions>);
     start(context: CanvasRenderingContext2D, style: Style): void;
     draw(element: PredictedObject, xOffset: number, yOffset: number, xScale: number, yScale: number, streamTime: StreamTime): void;
+    private wrapLine;
     drawText(text: string, context: CanvasRenderingContext2D, xPos: number, yPos: number, style: Style, fontSize: number): void;
     static toTitleCase(str: string): string;
     getMinFontSize(context: CanvasRenderingContext2D, element: any, width: number, height: number, style: any, scaleToFit?: boolean): number;

package/dist/eyepop.render2d.index.js

@@ -589,7 +589,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);
@@ -3420,7 +3420,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;
@@ -3548,7 +3548,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;
@@ -3592,9 +3592,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;
@@ -3935,9 +3935,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";
@@ -3957,10 +3957,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;
@@ -3982,37 +3984,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";
@@ -4024,10 +4063,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;