@witchcraft/layout
    Preparing search index...

    Interface IActionHandler

    Handler interface for drag actions.

    interface IActionHandler {
        annotateEdges?: (
            edges: {
                endX: number;
                endY: number;
                error?:
                    | KnownError<
                        LayoutError,
                        | {}
                        | { id: string
                        | undefined }
                        | { id: string | undefined }
                        | { size: { height: number; width: number } }
                        | Record<string, never>
                        | { frame: LayoutFrame }
                        | {
                            frame: LayoutFrame;
                            minSize: { height: number; width: number };
                            nearbyFrames: LayoutFrame[];
                        }
                        | { frame: LayoutFrame }
                        | { frame: LayoutFrame; minSize: number; newSize: number }
                        | { frame: LayoutFrame; framesRequiredToBeDeleted: LayoutFrame[] }
                        | { frame: LayoutFrame }
                        | {
                            hoveredFrameId: string;
                            movingFrameId: string;
                            zoneSide: "left" | "right" | "top" | "bottom" | "center";
                        }
                        | {
                            hoveredFrameId: string;
                            movingFrameId: string;
                            zoneSide: "left"
                            | "right"
                            | "top"
                            | "bottom"
                            | "center";
                        }
                        | {
                            hoveredFrameId: string;
                            movingFrameId: string;
                            zoneSide: "left"
                            | "right"
                            | "top"
                            | "bottom"
                            | "center";
                        }
                        | { frame: LayoutFrame }
                        | { frameSizeNeeded: number; minFrameSize: number }
                        | { max: number; min: number; wanted: number }
                        | { problemEdgeCoordinates: number[] }
                        | { id: string; side: "left" | "right" | "top" | "bottom" }
                        | { frame: string }
                        | { frame: LayoutFrame }
                        | { frame: LayoutFrame }
                        | { frame: LayoutFrame }
                        | { frame: LayoutFrame },
                    >
                    | { code: string; message: string };
                startX: number;
                startY: number;
            }[],
            frames: LayoutFrame[],
        ) => void;
        eventHandler: (
            e: KeyboardEvent,
            state: MoveState,
            forceRecalculateEdges: () => void,
        ) => void;
        onMoveApply: (
            state: MoveState,
            forceRecalculateEdges: () => void,
        ) => ActionHandlerApplyResult;
        onMoveEnded: () => void;
        onMoveChange<T extends "start" | "move" | "end">(
            type: T,
            e: T extends "start" | "end" ? PointerEvent | undefined : PointerEvent,
            state: MoveState,
            forceRecalculateEdges: () => void,
            cancel: (
                e: PointerEvent | KeyboardEvent | undefined,
                state: MoveState,
            ) => void,
            resolve: T extends "end"
                ? undefined
                : (opts: ActionHandlerApplyResult) => void,
        ): MoveChangeResult;
    }

    Implemented by

    Index

    Properties

    annotateEdges? eventHandler onMoveApply onMoveEnded

    Methods

    onMoveChange

    Properties

    annotateEdges?: (
        edges: {
            endX: number;
            endY: number;
            error?:
                | KnownError<
                    LayoutError,
                    | {}
                    | { id: string
                    | undefined }
                    | { id: string | undefined }
                    | { size: { height: number; width: number } }
                    | Record<string, never>
                    | { frame: LayoutFrame }
                    | {
                        frame: LayoutFrame;
                        minSize: { height: number; width: number };
                        nearbyFrames: LayoutFrame[];
                    }
                    | { frame: LayoutFrame }
                    | { frame: LayoutFrame; minSize: number; newSize: number }
                    | { frame: LayoutFrame; framesRequiredToBeDeleted: LayoutFrame[] }
                    | { frame: LayoutFrame }
                    | {
                        hoveredFrameId: string;
                        movingFrameId: string;
                        zoneSide: "left" | "right" | "top" | "bottom" | "center";
                    }
                    | {
                        hoveredFrameId: string;
                        movingFrameId: string;
                        zoneSide: "left"
                        | "right"
                        | "top"
                        | "bottom"
                        | "center";
                    }
                    | {
                        hoveredFrameId: string;
                        movingFrameId: string;
                        zoneSide: "left"
                        | "right"
                        | "top"
                        | "bottom"
                        | "center";
                    }
                    | { frame: LayoutFrame }
                    | { frameSizeNeeded: number; minFrameSize: number }
                    | { max: number; min: number; wanted: number }
                    | { problemEdgeCoordinates: number[] }
                    | { id: string; side: "left" | "right" | "top" | "bottom" }
                    | { frame: string }
                    | { frame: LayoutFrame }
                    | { frame: LayoutFrame }
                    | { frame: LayoutFrame }
                    | { frame: LayoutFrame },
                >
                | { code: string; message: string };
            startX: number;
            startY: number;
        }[],
        frames: LayoutFrame[],
    ) => void

    Called after visual edges are recalculated. Action handlers can annotate edges with error info.

    eventHandler: (
        e: KeyboardEvent,
        state: MoveState,
        forceRecalculateEdges: () => void,
    ) => void
    onMoveApply: (
        state: MoveState,
        forceRecalculateEdges: () => void,
    ) => ActionHandlerApplyResult

    Called when drag will be applied. If moveEnd was called with apply false, it will not be called. Return {updateEdges: false} to not apply the regular drag end changes (i.e. return false to reset to the position before dragging). Optionally return a result value to resolve the promise with.

    Do not use for resetting handler state, use onMoveEnded for that.

    onMoveEnded: () => void

    For doing cleanup

    Methods

    • Called when the drag coordinates change (during any event). Should return updateEdges true to allow the edges to be updated/moved, or false to prevent it. See also MoveChangeHandler for the built in action handler.

      Can be used to save some context/info to later apply safely during onMoveApply.

      The call order is:

      • onMoveChange("start", ...)
      • onMoveChange("move", ...)
      • onMoveChange("end", ...)
      • onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
      • onMoveEnded() // do cleanup here, always called at the very end

      Type Parameters

      • T extends "start" | "move" | "end"

      Parameters

      • type: T
      • e: T extends "start" | "end" ? PointerEvent | undefined : PointerEvent
      • state: MoveState
      • forceRecalculateEdges: () => void
      • cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void

        Calls moveEnd with apply: false. This can technically be called from "end", it should still work.

      • resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void

        Saves result to resolve moveStart promise, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . Not available during "end" event. It's designed for resolving from other external evente (e.g. key events).

      Returns MoveChangeResult

    Settings

    Member Visibility

    On This Page

    Properties
    Methods