@lyonbot/interactive-blocks/types/BlockHandler.d.ts

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

import type { BlockContext } from "./BlockContext";
import type { SlotHandler, SlotInfo } from "./SlotHandler";
import { ValueOrGetter } from "./ValueOrGetter";
import { MultipleSelectType } from "./MultipleSelectType";
import { EventKeyStyle } from "./utils";
export interface BlockInfo {
    index: ValueOrGetter<number>;
    data: ValueOrGetter<Record<string, any>>;
    /**
     * you can attach something (eg. `this` of component) as `blockHandler.ref`
     */
    ref?: any;
    /**
     * called when `isActive` or `hasFocus` is changed.
     *
     * when triggered, you shall update the appearance.
     */
    onStatusChange?(element: BlockHandler): void;
}
export interface BlockDOMEventHandlers {
    pointerUp(ev: Pick<PointerEvent, "eventPhase" | "currentTarget">): void;
    dragStart?(ev: Pick<DragEvent, "stopPropagation" | "dataTransfer" | "clientX" | "clientY">): void;
    dragLeave?(ev: Pick<DragEvent, never>): void;
    dragOver?(ev: Pick<DragEvent, never>): void;
    dragEnd?(ev: Pick<DragEvent, never>): void;
}
export declare class BlockHandler {
    readonly type = "block";
    readonly ctx: BlockContext;
    readonly ownerSlot: SlotHandler | null;
    readonly slots: Set<SlotHandler>;
    info: BlockInfo;
    private _activeNumber;
    /**
     * `false` if not selected. otherwise, the index in current selection (starts from 1)
     */
    get activeNumber(): number | false;
    get isActive(): boolean;
    get hasFocus(): boolean;
    get ref(): any;
    handlePointerUp: (ev?: Pick<PointerEvent, "eventPhase" | "currentTarget"> | undefined) => void;
    /**
     * select / active this block, without focusing
     *
     * @param multipleSelectType
     * @see {@link BlockHandler.focus}
     * @see {@link BlockContext.addBlockToSelection} - the underhood method
     */
    select(multipleSelectType?: MultipleSelectType): void;
    /**
     * unselect this block, make `isActive` false
     */
    unselect(): void;
    /**
     * select / active this block, and move the focus to this BlockContext
     *
     * @param multipleSelectType
     * @see {@link BlockHandler.select}
     * @see {@link BlockContext.addBlockToSelection} - the underhood method
     */
    focus(multipleSelectType?: MultipleSelectType): void;
    constructor(ctx: BlockContext, ownerSlot: SlotHandler | null, info: BlockInfo);
    get index(): number;
    get data(): Record<string, any>;
    createSlot(info: SlotInfo): SlotHandler;
    getDOMEvents<S extends EventKeyStyle>(eventKeyStyle?: S, opt?: {
        draggable?: boolean;
    }): import("./utils").StyledEventLUT<BlockDOMEventHandlers, S | undefined>;
    dispose(): void;
}