plot-plan-designer/lib/esm/components/canvas/handlers/TooltipHandler.js

Design Editor Tools with React.js + ant.design + fabric.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import ReactDOM from 'react-dom';
import debounce from 'lodash/debounce';
class TooltipHandler {
    constructor(handler) {
        /**
         * Show tooltip
         *
         * @param {FabricObject} [target]
         */
        this.show = debounce((target) => __awaiter(this, void 0, void 0, function* () {
            if (target.tooltip && target.tooltip.enabled) {
                while (this.tooltipEl.hasChildNodes()) {
                    this.tooltipEl.removeChild(this.tooltipEl.firstChild);
                }
                const tooltip = document.createElement('div');
                tooltip.className = 'rde-tooltip-right';
                let element = target.name;
                const { onTooltip } = this.handler;
                if (onTooltip) {
                    element = yield onTooltip(this.tooltipEl, target);
                    if (!element) {
                        return;
                    }
                }
                tooltip.innerHTML = element;
                this.tooltipEl.appendChild(tooltip);
                ReactDOM.render(element, tooltip);
                this.tooltipEl.classList.remove('tooltip-hidden');
                const zoom = this.handler.canvas.getZoom();
                const { clientHeight } = this.tooltipEl;
                const { width, height, scaleX, scaleY } = target;
                const { left, top } = target.getBoundingRect();
                const { _offset: offset } = this.handler.canvas.calcOffset();
                const objWidthDiff = width * scaleX * zoom;
                const objHeightDiff = (height * scaleY * zoom) / 2 - clientHeight / 2;
                const calcLeft = offset.left + left + objWidthDiff;
                const calcTop = offset.top + top + objHeightDiff;
                if (document.body.clientWidth <= calcLeft + this.tooltipEl.offsetWidth) {
                    this.tooltipEl.style.left = `${left + offset.left - this.tooltipEl.offsetWidth}px`;
                    tooltip.className = 'rde-tooltip-left';
                }
                else {
                    this.tooltipEl.style.left = `${calcLeft}px`;
                }
                this.tooltipEl.style.top = `${calcTop}px`;
                this.handler.target = target;
            }
        }), 100);
        /**
         * Hide tooltip
         * @param {fabric.Object} [_target]
         */
        this.hide = debounce(() => {
            this.handler.target = null;
            if (this.tooltipEl) {
                this.tooltipEl.classList.add('tooltip-hidden');
            }
        }, 100);
        this.handler = handler;
        if (!handler.editable) {
            this.initialize();
        }
    }
    /**
     * Initialize tooltip
     *
     * @author salgum1114
     */
    initialize() {
        this.tooltipEl = document.createElement('div');
        this.tooltipEl.id = `${this.handler.id}_tooltip`;
        this.tooltipEl.className = 'rde-tooltip tooltip-hidden';
        document.body.appendChild(this.tooltipEl);
    }
    /**
     * Destroy tooltip
     *
     * @author salgum1114
     */
    destroy() {
        if (this.tooltipEl) {
            document.body.removeChild(this.tooltipEl);
        }
    }
}
export default TooltipHandler;