Class ParagraphFrontButton

packages/muya/src/ui/paragraphFrontButton/index.ts:51–451

}

export class ParagraphFrontButton {
    public name: string = 'mu-front-button';
    public resizeObserver: ResizeObserver | null = null;
    private _options: IBaseOptions;
    private _block: Parent | null = null;
    private _oldVNode: VNode | null = null;
    private _status: boolean = false;
    private _floatBox: HTMLDivElement = document.createElement('div');
    private _container: HTMLDivElement = document.createElement('div');
    private _iconWrapper: HTMLDivElement = document.createElement('div');
    private _cleanup: (() => void) | null = null;
    private _dragTimer: ReturnType<typeof setTimeout> | null = null;
    private _dragInfo: {
        block: Parent;
        target?: Parent | null;
        position?: 'down' | 'up' | null;
    } | null = null;

    private _ghost: HTMLDivElement | null = null;
    private _shadow: HTMLDivElement | null = null;
    private _disableListen: boolean = false;
    private _dragEvents: string[] = [];

    constructor(public muya: Muya, options = {}) {
        this._options = Object.assign({}, defaultOptions(), options);
        this.init();
        this.listen();
    }

    init() {
        const { _floatBox: floatBox, _container: container, _iconWrapper: iconWrapper } = this;
        // Use to remember which float container is shown.
        container.classList.add(this.name);
        container.appendChild(iconWrapper);
        floatBox.classList.add('mu-front-button-wrapper');
        floatBox.appendChild(container);
        document.body.appendChild(floatBox);

        // Since the size of the container is not fixed and changes according to the change of content,
        // the floatBox needs to set the size according to the container size
        const resizeObserver = (this.resizeObserver = new ResizeObserver(() => {
            // Use requestAnimationFrame to avoid "ResizeObserver loop completed" warning
            requestAnimationFrame(() => {
                const { offsetWidth, offsetHeight } = container;

                Object.assign(floatBox.style, {
                    width: `${offsetWidth}px`,
                    height: `${offsetHeight}px`,
                });

                // Position will be updated by autoUpdate
            });
        }));

        resizeObserver.observe(container);
    }

    listen() {