Is it possible to disable the auto focus in the caption in CaptionFrameMarker?

[adriandotdev]

Hello, @ailon

May I ask is this possible that I can disable the auto focus in text of bounding box marker?

Here's my code for custom marker

import { CaptionFrameMarker, IPoint } from "@markerjs/markerjs3";

import { BASE_FONT_SIZE, BASE_STROKE_WIDTH, COLORS } from "@/components/annotation/constants";

export class BoundingBoxMarker extends CaptionFrameMarker {
  public static typeName = "BoundingBoxMarker";
  public static title = "Rectangle with top-left text";
  private isEditing = false;

  constructor(container: SVGGElement) {
    super(container);

    this.strokeColor = COLORS.Green; // Default stroke color
    this.strokeWidth = BASE_STROKE_WIDTH; // Default stroke width
    this.fillColor = COLORS.Green; // Default fill color
    this.fontSize = {
      step: 1,
      value: BASE_FONT_SIZE,
      units: "px",
    }; // Default font size
    this.color = COLORS.White; // Default text color
    this.rotate = (_point: IPoint) => {}; // Disable rotating the box
    this.text = "Label"; // Default text when box is initially created
    this.textBlock.wordWrap = true;
  }

  protected getPaths(width: number = this.width, height: number = this.height) {
    const frame = `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`;

    if (this.isEditing || !this.textBlock?.textSize) {
      return { frame, caption: "" };
    }

    const paddingX = 8;
    const paddingY = 2;

    const textWidth = this.textBlock.textSize.width;
    const textHeight = this.textBlock.textSize.height;

    const captionWidth = textWidth + paddingX * 2;
    const captionHeight = textHeight + paddingY * 2;

    const x = -paddingX + 8;
    const y = -captionHeight;

    const caption = `
    M ${x} ${y}
    L ${x + captionWidth} ${y}
    L ${x + captionWidth} ${y + captionHeight}
    L ${x} ${y + captionHeight}
    Z
  `;

    return { frame, caption };
  }

  public updateTextColor() {
    const stroke = this.strokeColor.toLowerCase();

    if (stroke === COLORS.White.toLowerCase()) {
      this.color = "black";
    } else {
      this.color = "white";
    }
  }

  public updateText(text: string) {
    this.text = text;
  }

  hideVisual(): void {
    this.isEditing = true;

    this.textBlock.textElement.style.opacity = "0";

    this.adjustVisual();
  }

  showVisual(): void {
    this.isEditing = false;

    this.textBlock.textElement.style.display = "block";

    this.adjustVisual();
  }

  protected adjustTextPosition(): void {
    if (!this.textBlock.textElement || !this.textBlock.textSize) return;

    if (this.isEditing) {
      return;
    }

    this.updateTextColor();

    const text = this.textBlock.textElement;
    text.style.fill = this.color;

    const paddingX = 8;
    const paddingY = 2;

    const textWidth = this.textBlock.textSize.width;
    const textHeight = this.textBlock.textSize.height;

    const captionWidth = textWidth + paddingX * 2;
    const captionHeight = textHeight + paddingY * 2;

    const captionX = -paddingX + 8;
    const captionY = -captionHeight;

    const centerX = captionX + captionWidth / 2;
    const centerY = captionY + captionHeight / 2;

    text.setAttribute("x", centerX.toString());
    text.setAttribute("y", centerY.toString());

    text.setAttribute("text-anchor", "middle");
    text.setAttribute("dominant-baseline", "middle");
  }
}

Thank you and looking forward to your positive response.

[ailon]

Hi @adriandotdev,

Not sure I understand what you trying to do. Do you want for it to just not switch to editing mode when the marker is created? If so, then you can probably created your own marker editor (extending CaptionMarkerFrameEditor) and override the pointerUp() method in it (inherited from TextMarkerEditor). This is where it switches to editing right after creation.

Hope this helps.

Alan