@meta2d/core/src/title/title.js

@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .

export class Title {
    parentElement;
    box;
    currentAnchor; // 本次 tooltip 在哪个画笔上
    constructor(parentElement) {
        this.parentElement = parentElement;
        this.box = document.createElement('div');
        this.box.className = 'meta2d-title';
        parentElement.appendChild(this.box);
        // this.box.onmouseleave = () => {
        //   this.hide();
        // };
        let sheet;
        for (let i = 0; i < document.styleSheets.length; i++) {
            if (document.styleSheets[i].title === 'le5le.com/title') {
                sheet = document.styleSheets[i];
            }
        }
        if (!sheet) {
            let style = document.createElement('style');
            style.type = 'text/css';
            style.title = 'le5le.com/title';
            document.head.appendChild(style);
            style = document.createElement('style');
            style.type = 'text/css';
            document.head.appendChild(style);
            sheet = style.sheet;
            sheet.insertRule('.meta2d-title{position:absolute;padding:0;z-index:10;left: -9999px;top: -9999px;background:#fff;color:#000; cursor: crosshair;border: 1px solid black;max-width:300px;overflow-wrap: break-word;}');
        }
    }
    /**
     * @returns 此次应该展示的 title
     */
    static getTitle(anchor) {
        // if (anchor.titleFnJs && !anchor.titleFn) {
        //   try {
        //     anchor.titleFn = new Function('anchor', anchor.titleFnJs) as (
        //       anchor: Point
        //     ) => string;
        //   } catch (error) {
        //     console.log('titleFnJs', error);
        //   }
        // }
        // return anchor.titleFn ? anchor.titleFn(anchor) : String(anchor.title);
    }
    /**
     * @returns 返回设置前的 rect
     */
    setText(anchor) {
        // this.box.title = anchor.title;
        this.box.innerText = anchor.title;
    }
    /**
     * 更新文字
     */
    updateText(anchor) {
        if (this.currentAnchor?.id !== anchor.id) {
            return;
        }
        if (Title.titleEmpty(anchor)) {
            return;
        }
        this.setText(anchor);
        this.changePositionByAnchor(anchor);
    }
    /**
     * 改变文字会 影响 box 的大小，需要重新设置位置
     * @param oldRect 原
     * @param newRect 新
     */
    changePositionByAnchor(anchor) {
        let pW = this.parentElement.clientWidth;
        let pH = this.parentElement.clientHeight;
        if (anchor.x + 20 + 300 > pW) {
            this.box.style.right = (pW - anchor.x) + 'px';
            this.box.style.left = 'auto';
        }
        else {
            this.box.style.left = anchor.x + 10 + 'px';
            this.box.style.right = 'auto';
        }
        if (anchor.y + 10 + 100 > pH) {
            this.box.style.bottom = (pH - anchor.y) + 'px';
            this.box.style.top = 'auto';
        }
        else {
            this.box.style.top = anchor.y + 10 + 'px';
            this.box.style.bottom = 'auto';
        }
    }
    static titleEmpty(anchor) {
        return !anchor.title; // && !anchor.titleFn && !anchor.titleFnJs;
    }
    show(anchor, pen) {
        if (Title.titleEmpty(anchor)) {
            return;
        }
        this.currentAnchor = anchor;
        this.setText(anchor);
        let pos = {
            x: pen.calculative.canvas.store.data.x + anchor.x,
            y: pen.calculative.canvas.store.data.y + anchor.y,
        };
        this.changePositionByAnchor(pos);
    }
    hide() {
        this.box.style.left = '-9999px';
        this.box.innerText = '';
        this.currentAnchor = null;
    }
    destroy() {
        this.box.onmouseleave = null;
    }
}
//# sourceMappingURL=title.js.map