@visactor/vrender-animate/cjs/custom/richtext/output-richtext.js

This module provides a graph-based animation system for VRender.

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.OutputRichText = void 0;

const custom_animate_1 = require("../custom-animate"), vrender_core_1 = require("@visactor/vrender-core");

class OutputRichText extends custom_animate_1.ACustomAnimate {
    constructor(from, to, duration, easing, params) {
        super(from, to, duration, easing, params), this.fromTextConfig = [], this.toTextConfig = [], 
        this.originalTextConfig = [], this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0, 
        this.beforeText = "", this.afterText = "", this.fadeOutChars = !1, this.fadeOutDuration = .3, 
        this.direction = "backward", void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor), 
        void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar), 
        void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor), 
        void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText), 
        void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText), 
        void 0 !== (null == params ? void 0 : params.fadeOutChars) && (this.fadeOutChars = params.fadeOutChars), 
        void 0 !== (null == params ? void 0 : params.fadeOutDuration) && (this.fadeOutDuration = params.fadeOutDuration), 
        void 0 !== (null == params ? void 0 : params.direction) && (this.direction = params.direction), 
        this.propKeys = [ "textConfig" ];
    }
    onFirstRun() {
        const fromProps = this.getLastProps(), toProps = this.getEndProps();
        this.originalTextConfig = fromProps.textConfig ? [ ...fromProps.textConfig ] : [], 
        this.valid = !0, this.originalTextConfig && 0 !== this.originalTextConfig.length ? (this.fromTextConfig = vrender_core_1.RichText.TransformTextConfig2SingleCharacter(this.originalTextConfig), 
        this.toTextConfig = toProps.textConfig && toProps.textConfig.length > 0 ? vrender_core_1.RichText.TransformTextConfig2SingleCharacter(toProps.textConfig) : []) : this.valid = !1;
    }
    onEnd(cb) {
        super.onEnd(cb), cb || (this.toTextConfig.length > 0 ? this.target.setAttribute("textConfig", this.toTextConfig) : this.target.setAttribute("textConfig", []));
    }
    onUpdate(end, ratio, out) {
        if (!this.valid) return;
        const fromItems = this.fromTextConfig.length, maxTextHideRatio = this.fadeOutChars ? 1 - this.fadeOutDuration : 1;
        let displayedLength;
        if ("forward" === this.direction) {
            if (this.fadeOutChars) {
                const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
                displayedLength = Math.round(fromItems * (1 - adjustedRatio));
            } else displayedLength = Math.round(fromItems * (1 - ratio));
            let currentTextConfig = "forward" === this.direction ? this.fromTextConfig.slice(fromItems - displayedLength) : this.fromTextConfig.slice(0, displayedLength);
            this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), 
            this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), 
            this.target.setAttribute("textConfig", currentTextConfig);
        } else {
            if (this.fadeOutChars) {
                const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
                displayedLength = Math.round(fromItems * (1 - adjustedRatio));
            } else displayedLength = Math.round(fromItems * (1 - ratio));
            let currentTextConfig = this.fromTextConfig.slice(0, displayedLength);
            this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), 
            this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), 
            this.target.setAttribute("textConfig", currentTextConfig);
        }
    }
    applyFadeEffect(textConfig, ratio, totalItems, displayedLength) {
        let fadeIndex;
        fadeIndex = "forward" === this.direction ? totalItems - displayedLength : displayedLength;
        const fadeProgress = (ratio - (1 - this.fadeOutDuration)) / this.fadeOutDuration, fadeOpacity = Math.max(0, 1 - Math.min(1, fadeProgress));
        return textConfig.map(((item, index) => {
            if ("forward" === this.direction) {
                if (0 === index && "text" in item) return Object.assign(Object.assign({}, item), {
                    opacity: fadeOpacity
                });
            } else if (index === textConfig.length - 1 && "text" in item) return Object.assign(Object.assign({}, item), {
                opacity: fadeOpacity
            });
            return item;
        }));
    }
    addCursor(textConfig, ratio) {
        let shouldShowCursor = !0;
        if (this.blinkCursor) {
            const blinkRate = .1;
            shouldShowCursor = Math.floor(ratio / blinkRate) % 2 == 0;
        }
        if (shouldShowCursor && textConfig.length > 0) {
            const cursorIndex = "forward" === this.direction ? 0 : textConfig.length - 1, cursorItem = textConfig[cursorIndex];
            if ("text" in cursorItem) {
                const result = [ ...textConfig ];
                return "forward" === this.direction ? result[cursorIndex] = Object.assign(Object.assign({}, cursorItem), {
                    text: this.cursorChar + String(cursorItem.text)
                }) : result[cursorIndex] = Object.assign(Object.assign({}, cursorItem), {
                    text: String(cursorItem.text) + this.cursorChar
                }), result;
            }
        }
        return textConfig;
    }
}

exports.OutputRichText = OutputRichText;
//# sourceMappingURL=output-richtext.js.map