ng-cw-v12/fesm2015/ng-cw-v12-mouse-tooltip-service.js

Angular UI component library

import * as i0 from '@angular/core';
import { Injectable, NgModule } from '@angular/core';
import { fromEvent } from 'rxjs';

class NcMouseTooltipService {
    constructor(rendererFactory, ngZone) {
        this.rendererFactory = rendererFactory;
        this.ngZone = ngZone;
        this.tooltipElement = null;
        this.offset = { x: 12, y: 12 };
        this.mouseMoveSubscription = null;
        this.mousePosition = { x: 0, y: 0 };
        this.defaultStyles = {
            'position': 'fixed',
            'padding': '8px 12px',
            'background': 'rgba(0, 0, 0, 0.8)',
            'color': 'white',
            'border-radius': '4px',
            'font-size': '14px',
            'z-index': '10001',
            'pointer-events': 'none',
            'transition': 'none'
        };
        this.renderer = this.rendererFactory.createRenderer(null, null);
    }
    /**
     * 初始化服务
     */
    init() {
        if (this.mouseMoveSubscription) {
            this.mouseMoveSubscription.unsubscribe();
            this.mouseMoveSubscription = null;
        }
        this.ngZone.runOutsideAngular(() => {
            this.mouseMoveSubscription = fromEvent(document, 'mousemove')
                .subscribe((event) => {
                // 更新鼠标位置
                this.mousePosition = { x: event.clientX, y: event.clientY };
                // 更新位置
                if (this.tooltipElement) {
                    this.updatePosition();
                }
            });
        });
    }
    /**
     * 显示tooltip
     * @param content tooltip内容
     * @param options 可选配置，包括x、y偏移量和样式
     */
    show(content, options) {
        if ((options === null || options === void 0 ? void 0 : options.offsetX) !== undefined) {
            this.offset.x = options.offsetX;
        }
        else {
            this.offset.x = 12;
        }
        if ((options === null || options === void 0 ? void 0 : options.offsetY) !== undefined) {
            this.offset.y = options.offsetY;
        }
        else {
            this.offset.y = 12;
        }
        if (!this.tooltipElement) {
            this.createTooltipElement(options === null || options === void 0 ? void 0 : options.styles);
        }
        else {
            if (options === null || options === void 0 ? void 0 : options.styles) {
                this.updateStyles(options.styles);
            }
            else {
                this.updateStyles(this.defaultStyles);
            }
        }
        if (this.tooltipElement) {
            this.renderer.setProperty(this.tooltipElement, 'innerHTML', content);
            this.updatePosition();
        }
    }
    /**
     * 隐藏tooltip
     */
    hide() {
        if (this.tooltipElement) {
            document.body.removeChild(this.tooltipElement);
            this.tooltipElement = null;
        }
    }
    /**
     * 销毁
     */
    destroy() {
        this.hide();
        if (this.mouseMoveSubscription) {
            this.mouseMoveSubscription.unsubscribe();
            this.mouseMoveSubscription = null;
        }
    }
    /**
     * 创建tooltip元素
     * @param customStyles 自定义样式
     */
    createTooltipElement(customStyles) {
        if (this.tooltipElement) {
            return;
        }
        this.tooltipElement = this.renderer.createElement('div');
        this.renderer.addClass(this.tooltipElement, 'nc-mouse-tooltip');
        // 应用默认样式
        this.updateStyles(this.defaultStyles);
        // 应用自定义样式（如果提供）
        if (customStyles) {
            this.updateStyles(customStyles);
        }
        this.renderer.appendChild(document.body, this.tooltipElement);
    }
    /**
     * 更新tooltip位置
     */
    updatePosition() {
        if (!this.tooltipElement) {
            return;
        }
        const tooltipRect = this.tooltipElement.getBoundingClientRect();
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        // 计算初始位置（鼠标右下方）
        let left = this.mousePosition.x + this.offset.x;
        let top = this.mousePosition.y + this.offset.y;
        // 检查右边界
        if (left + tooltipRect.width > viewportWidth) {
            // 如果超出右边界，将tooltip放在鼠标左侧
            left = this.mousePosition.x - tooltipRect.width - this.offset.x;
        }
        // 检查下边界
        if (top + tooltipRect.height > viewportHeight) {
            // 如果超出下边界，将tooltip放在鼠标上方
            top = this.mousePosition.y - tooltipRect.height - this.offset.y;
        }
        // 检查左边界
        if (left < 0) {
            left = this.offset.x;
        }
        // 检查上边界
        if (top < 0) {
            top = this.offset.y;
        }
        // 设置位置
        this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
        this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
    }
    /**
     * 更新tooltip样式
     * @param customStyles 自定义样式
     */
    updateStyles(customStyles) {
        if (!this.tooltipElement) {
            return;
        }
        Object.entries(customStyles).forEach(([property, value]) => {
            this.renderer.setStyle(this.tooltipElement, property, value);
        });
    }
}
NcMouseTooltipService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipService, deps: [{ token: i0.RendererFactory2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
NcMouseTooltipService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipService, decorators: [{
            type: Injectable
        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i0.NgZone }]; } });

class NcMouseTooltipServiceModule {
}
NcMouseTooltipServiceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcMouseTooltipServiceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipServiceModule });
NcMouseTooltipServiceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipServiceModule, providers: [NcMouseTooltipService] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcMouseTooltipServiceModule, decorators: [{
            type: NgModule,
            args: [{
                    providers: [NcMouseTooltipService]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NcMouseTooltipService, NcMouseTooltipServiceModule };
//# sourceMappingURL=ng-cw-v12-mouse-tooltip-service.js.map