@visactor/vgrammar-core/es/interactions/dimension-tooltip.js

VGrammar is a visual grammar library

import { AABBBounds, array, getAngleByPoint, isString, throttle } from "@visactor/vutils";

import { BaseTooltip } from "./base-tooltip";

import { generateTooltipAttributes } from "./base-tooltip";

import { BridgeElementKey } from "../graph/constants";

import { invokeFunctionType } from "../parse/util";

const isEqualTooltipDatum = (current, previous) => {
    const currentDatum = array(current), previousDatum = array(previous);
    return currentDatum.length === previousDatum.length && (currentDatum.every((datum => previousDatum.includes(datum))) && previousDatum.every((datum => currentDatum.includes(datum))));
}, computeTooltipFilterValue = (point, scale, type, groupSize, tooltipCenter) => {
    if ("x" === type) return scale.invert(point.x);
    if ("y" === type) return scale.invert(point.y);
    if ("radius" === type) {
        const center = null != tooltipCenter ? tooltipCenter : {
            x: groupSize.width / 2,
            y: groupSize.height / 2
        }, radius = Math.sqrt((center.x - point.x) ** 2 + (center.y - point.y) ** 2);
        return scale.invert(radius);
    }
    if ("angle" === type) {
        const center = null != tooltipCenter ? tooltipCenter : {
            x: groupSize.width / 2,
            y: groupSize.height / 2
        }, angle = getAngleByPoint(center, point);
        return scale.invert(angle < 0 ? angle + 2 * Math.PI : angle);
    }
    return scale.invert(point.x);
};

export class DimensionTooltip extends BaseTooltip {
    constructor(view, options) {
        var _a, _b, _c;
        super(view, options), this.type = DimensionTooltip.type, this._avoidMarks = [], 
        this._tooltipDataFilter = null, this.handleTooltipShow = throttle((event => {
            var _a, _b, _c;
            if (!this._tooltipComponent) return;
            const scale = (isString(this.options.scale) ? this.view.getScaleById(this.options.scale) : this.options.scale).getScale(), groupGraphicItem = this._container.getGroupGraphicItem(), point = {
                x: 0,
                y: 0
            };
            groupGraphicItem.globalTransMatrix.transformPoint(event.canvas, point);
            const groupSize = {
                width: groupGraphicItem.attribute.width,
                height: groupGraphicItem.attribute.height
            };
            if (point.x < 0 || point.x > groupGraphicItem.attribute.width || point.y < 0 || point.y > groupGraphicItem.attribute.height) return void this._tooltipComponent.hideAll();
            const eventTargetMark = null === (_b = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey]) || void 0 === _b ? void 0 : _b.mark;
            if (this._avoidMarks.includes(eventTargetMark)) return void this._tooltipComponent.hideAll();
            const target = null === (_c = this.options.target) || void 0 === _c ? void 0 : _c.data, lastDataGrammar = target ? isString(target) ? this.view.getDataById(target) : target : null, data = lastDataGrammar ? lastDataGrammar.getValue() : [], filterValue = computeTooltipFilterValue(point, scale, this.options.tooltipType, groupSize, this.options.center), tooltipDatum = this._tooltipDataFilter ? data.filter((datum => this._tooltipDataFilter(datum, filterValue))) : [];
            if (this._tooltipComponent.showAll(), isEqualTooltipDatum(tooltipDatum, this._lastDatum)) return void this._tooltipComponent.setAttributes({
                pointerX: point.x,
                pointerY: point.y
            });
            this._lastDatum = tooltipDatum;
            const boundsStart = {
                x: 0,
                y: 0
            };
            groupGraphicItem.globalTransMatrix.transformPoint({
                x: 0,
                y: 0
            }, boundsStart);
            const boundsEnd = {
                x: 0,
                y: 0
            };
            groupGraphicItem.globalTransMatrix.transformPoint({
                x: this.view.getSignalById("width").getValue(),
                y: this.view.getSignalById("height").getValue()
            }, boundsEnd);
            const bounds = (new AABBBounds).set(boundsStart.x, boundsStart.y, boundsEnd.x, boundsEnd.y), {title: title, content: content} = this._computeTitleContent(tooltipDatum), theme = this.view.getCurrentTheme(), addition = invokeFunctionType(this.options.attributes, this.parameters(), {}), attributes = generateTooltipAttributes(point, title, content, bounds, theme, addition);
            this._tooltipComponent.setAttributes(attributes);
        }), 10), this.handleTooltipHide = event => {
            this._tooltipComponent && this._tooltipComponent.hideAll();
        }, this.options = Object.assign({}, DimensionTooltip.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), 
        this._avoidMarks = null !== (_a = view.getMarksBySelector(this.options.avoidMark)) && void 0 !== _a ? _a : [], 
        this._container = null !== (_c = null === (_b = view.getMarksBySelector(this.options.container)) || void 0 === _b ? void 0 : _b[0]) && void 0 !== _c ? _c : view.rootMark;
    }
    getEvents() {
        const filter = this.options.target.filter;
        return this._tooltipDataFilter = isString(filter) ? (datum, filterValue) => filterValue === datum[filter] : filter, 
        [ {
            type: this.options.trigger,
            handler: this.handleTooltipShow
        }, {
            type: this.options.triggerOff,
            handler: this.handleTooltipHide
        } ];
    }
}

DimensionTooltip.type = "dimension-tooltip", DimensionTooltip.defaultOptions = {
    trigger: "pointermove",
    triggerOff: "pointerleave"
};
//# sourceMappingURL=dimension-tooltip.js.map