@realsee/five/plugins/BasePlugin/index.d.ts

Realsee Renderer SDK

import { Five, Subscribe } from '@realsee/five';
export declare namespace BasePlugin {
    /**
     * 基本属性字段
     */
    interface State {
        /**
         * 插件是否启用
         */
        enabled: boolean;
        /**
         * 插件UI是否展示
         */
        visible?: boolean;
        /**
         * 插件的配置项
         */
        config?: unknown;
    }
    interface BaseOptions {
        /** 是否是用户行为 */
        userAction?: boolean;
    }
    interface Config {
        /** 静态资源前缀 */
        staticPrefix?: string;
        /** 国际化转换函数 */
        i18n?: (key: string) => string;
    }
    interface StateChangeParams<PluginState> {
        /** 最新的State */
        state: PluginState;
        /** 上一个State */
        prevState?: PluginState;
        /** 是否是用户触发 */
        userAction: boolean;
    }
    /**
     * 插件基本事件
     */
    type EventMap<PluginState, PluginData> = {
        /** 插件被销毁 */
        dispose: () => void;
        /** 插件状态变化 */
        stateChange: (params: StateChangeParams<PluginState>) => void;
        /** 数据变更 */
        dataChange: (data: PluginData, prevData?: PluginData) => void;
        /** 数据加载完成 */
        dataLoaded: (data: PluginData) => void;
    };
    /**
     * plugin 的基本控制器
     */
    abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState, PluginData>, PluginServerData, PluginData> {
        five: Five;
        protected abstract data?: PluginData;
        /**
         * 加载插件依赖数据
         * @param serverData  - 插件数据
         * @param state  - 插件 State
         */
        abstract load?(serverData: PluginServerData, state?: PluginState, userAction?: boolean): Promise<void>;
        /**
         * @description 插件事件钩子
         */
        hooks: Subscribe<PluginEventMap>;
        readonly staticPrefix: string;
        /**
         * 当前状态
         * @description
         * ```text
         * 可以通过 plugin.state 和 plugin.setState 来获取和设置。
         * 通过 state 设置后，plugin 会通过合适的动画运动来达到设置的效果。
         * 来迎合一些通过数据驱动的场景。
         * ```
         */
        abstract state: PluginState;
        constructor(five: Five, config?: Config);
        /**
         * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
         */
        getCurrentState(): PluginState;
        /**
         * 插件自身DOM添加到父容器
         * @param wrapper - Element元素
         */
        appendTo?(wrapper: Element): void;
        /**
         * 展示UI
         */
        show?(options?: BaseOptions): Promise<void> | void;
        /**
         * 隐藏UI
         */
        hide?(options?: BaseOptions): Promise<void> | void;
        /**
         * 设置state
         * @param state  - 插件的目标状态
         * @param options  - 配置项
         */
        setState?(state: Partial<PluginState>, options?: BaseOptions): void;
        /**
         * @description 获取静态资源的url
         */
        absoluteUrl(url: string): string;
        /**
         * 启用插件，让插件能够响应交互
         */
        abstract enable(options?: BaseOptions): void;
        /**
         * 禁用插件，让插件停止响应交互
         */
        abstract disable(options?: BaseOptions): void;
        /**
         * 插件进行销毁
         */
        abstract dispose(): void;
    }
}