ecljs/dist/lib/tooltip.js

electric circuits library

import { obj, isStr, pojo } from 'dabbjs/dist/lib/dab';
import { map, filter, extend } from 'dabbjs/dist/lib/misc';
import { attr, tag } from 'dabbjs/dist/lib/dom';
import { Type } from "./interfaces";
import { Label } from './label';
export class Tooltip extends Label {
    get type() { return Type.TOOLTIP; }
    get borderRadius() { return this.$.borderRadius; }
    /*	DOESN'T WORK
    set visible(value: boolean) {
        //weird way to access an ancestor property  super.visible doesn't work
        super["visible"] = value;
    }
    */
    get size() {
        let b = this.$.svgtext.getBBox();
        return obj({
            width: Math.round(b.width) + 10, //this.gap,
            height: Math.round(b.height) + this.$.gap
        });
    }
    constructor(options) {
        super(options);
        this.g.insertBefore(this.$.svgrect = tag("rect", "", {
            x: 0,
            y: 0,
            rx: this.borderRadius
        }), this.$.svgtext);
    }
    setVisible(value) {
        super.setVisible(value);
        //clear values
        //because Firefox give DOM not loaded on g.getBox() because it's not visible yet
        // so I've to display tooltip in DOM and then continue setting text, move, font-size,...
        this.$.text = this.$.svgtext.innerHTML = '';
        return this;
    }
    setBorderRadius(value) {
        this.$.borderRadius = value | 0;
        return this.build();
    }
    build() {
        this.$.gap = Math.round(this.fontSize / 2) + 1;
        attr(this.$.svgtext, {
            "font-size": this.fontSize,
            x: Math.round(this.$.gap / 2), //+ 2, // + 1,
            y: this.fontSize //+ 8
        });
        let s = this.size;
        attr(this.$.svgrect, {
            width: s.width,
            height: s.height,
            rx: this.borderRadius
        });
        return this;
    }
    setText(value) {
        let arr = isStr(value) ?
            value.split(/\r?\n/) :
            value, txtArray = [];
        //catch UI error here
        //if (!Array.isArray(arr)) {
        //	console.log("ooooh")
        //}
        this.$.svgtext.innerHTML = arr.map((value, ndx) => {
            let txt = '', attrs = '';
            if (isStr(value)) {
                txt = value;
            }
            else if (pojo(value)) {
                txt = value.text;
                attrs = map(filter(value, (_val, key) => key != 'text'), (v, k) => `${k}="${v}"`).join('');
            }
            txtArray.push(txt);
            return `<tspan x="5" dy="${ndx}.1em"${attrs}>${txt}</tspan>`;
        }).join('');
        //set text
        this.$.text = txtArray.join('\r\n');
        return this.build();
    }
    defaults() {
        return extend(super.defaults(), {
            name: "tooltip",
            class: "tooltip",
            borderRadius: 4
        });
    }
}