parse-term.component.ts

import { Component, ElementRef, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { CCGTerm, Dimensions } from '@/types';

@Component({
    selector: "[parse-term]",
    standalone: true,
    imports: [],
    templateUrl: "./parse-term.component.svg",
})
export class ParseTerm {
    @Input()
    public idx?: number;

    @Input()
    public label?: string;

    /* background color, should probably be replaced by an enum type with the color lookup done elsewhere */
    @Input()
    public bg?: string;

    @Input()
    public term: CCGTerm = [];

    @Input()
    public end: boolean = false;

    @Input()
    public rule?: string;

    @ViewChild('idxText')
    idxText?: ElementRef<SVGTextElement>;

    @ViewChild('termText')
    termText?: ElementRef<SVGTextElement>;

    @ViewChild('labelText')
    labelText?: ElementRef<SVGTextElement>;

    @Output()
    public onSize = new EventEmitter<Dimensions>();

    padding = 2;
    height = 20;

    idxW = 0;
    termX = 0;
    termW = 0;
    labelX = 0;
    labelW = 0;
    totalW = 0;

    calculateWidth() {
        return this.termText!.nativeElement.getBBox().width;
    }

    ngAfterViewChecked() {
        this.idxW = this.idxText ? this.idxText.nativeElement.getComputedTextLength() + this.padding : 0;
        this.labelW = this.labelText ? this.labelText.nativeElement.getComputedTextLength() + this.padding : 0;
        this.termX = this.idxW;
        this.termW = this.termText ? this.calculateWidth() : 0;
        this.labelX =  this.termX + this.termW + this.padding;
        this.totalW = this.termText ? this.labelW + this.idxW + this.calculateWidth() : 0;

        this.onSize.emit({width: this.totalW, height: this.height});
    }

}