@visactor/vgrammar-core/es/interactions/element-highlight.js

VGrammar is a visual grammar library

import { InteractionStateEnum } from "../graph/enums";

import { BaseInteraction } from "./base";

import { groupMarksByState } from "./utils";

import { isString } from "@visactor/vutils";

export class ElementHighlight extends BaseInteraction {
    constructor(view, options) {
        super(view, options), this.type = ElementHighlight.type, this.handleStart = e => {
            this.start(e.element);
        }, this.handleReset = e => {
            if (!this._statedElements || !this._statedElements.length) return;
            const element = e.element;
            if (element) {
                const hasActiveElement = this._marks && this._marks.includes(element.mark);
                "view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.resetAll() : this.resetAll();
            }
        }, this.options = Object.assign({}, ElementHighlight.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), 
        this._stateMarks = groupMarksByState(this._marks, [ this.options.highlightState, this.options.blurState ]);
    }
    getStartState() {
        return this.options.highlightState;
    }
    getEvents() {
        const triggerOff = this.options.triggerOff, events = [ {
            type: this.options.trigger,
            handler: this.handleStart
        } ];
        let eventName = triggerOff;
        return isString(triggerOff) && triggerOff.includes("view:") ? (eventName = triggerOff.replace("view:", ""), 
        this._resetType = "view") : this._resetType = "self", events.push({
            type: eventName,
            handler: this.handleReset
        }), events;
    }
    resetAll() {
        const {highlightState: highlightState, blurState: blurState} = this.options;
        this._lastElement && (this.clearAllStates(highlightState, blurState), this.dispatchEvent("reset", {
            elements: [ this._lastElement ],
            options: this.options
        }), this._lastElement = null, this._statedElements = null);
    }
    start(element) {
        if (element && this._marks && this._marks.includes(element.mark)) {
            const {highlightState: highlightState, blurState: blurState} = this.options;
            if (this._lastElement === element) return;
            this._statedElements = this.updateStates([ element ], this._statedElements, highlightState, blurState), 
            this._lastElement = element, this.dispatchEvent("start", {
                elements: [ element ],
                options: this.options
            });
        } else this._lastElement && "view" === this._resetType && this.resetAll();
    }
    reset(element) {
        element ? this._marks && this._marks.includes(element.mark) && element.removeState([ this.options.highlightState, this.options.blurState ]) : this.resetAll();
    }
}

ElementHighlight.type = "element-highlight", ElementHighlight.defaultOptions = {
    highlightState: InteractionStateEnum.highlight,
    blurState: InteractionStateEnum.blur,
    trigger: "pointerover",
    triggerOff: "pointerout"
};
//# sourceMappingURL=element-highlight.js.map