zz-chart/lib/reactivity/reactive.js

Alauda Chart components by Alauda Frontend Team

import { isObjectLike, merge } from 'lodash-es';
import onChange from 'on-change';
export class Reactive {
    constructor(target, chart) {
        this.dep = new Dep(chart);
        this.source = target;
        this.createReactiveObject(this.source);
    }
    createReactiveObject(target) {
        this.reactiveObject = onChange(target, (path, value, previousValue, applyData) => {
            this.dep.notify({ path, value, previousValue, applyData });
        });
        return this.reactiveObject;
    }
    unsubscribe() {
        onChange?.unsubscribe(this.createReactiveObject);
    }
}
export function reactive(source, chart) {
    return new Reactive(source, chart);
}
export class Dep {
    constructor(chart) {
        this.ctrl = chart;
    }
    notify({ path, value, previousValue }) {
        // console.log(path, value, previousValue, applyData);
        const names = path.split('.');
        this.syncConfig(names, value, previousValue);
        this.update(names, value);
    }
    /**
     * 同步 chart option config
     */
    syncConfig(names, value, previousValue) {
        let option = value;
        if (isObjectLike(value)) {
            option = merge(previousValue, value);
        }
        // TODO: isArray?
        const [str, ...name] = names;
        this.ctrl.setOption(str === 'options' ? name : names, option);
    }
    update(names, value) {
        if (names.includes('data') && names.length === 1) {
            this.ctrl.data(value);
        }
        if (names.includes('options') && names.length > 1) {
            const component = this.ctrl.components.get(names[1]);
            component?.update();
        }
    }
}
//# sourceMappingURL=reactive.js.map