@witchcraft/layout
    Preparing search index...

    Class ActionHandler<TRawActions, TActions>

    Handles the lifecycle of a drag actions IAction and provides additional hooks.

    The first action instance that can handle the request is passed control of the event handlers until the request changes.

    Type Parameters

    Implements

    Index

    Constructors

    constructor

    Properties

    actions activeAction? boundCancel defaultOnMoveChange eventCanceller hooks shapes textHints

    Methods

    annotateEdges cancel eventHandler onMoveApply onMoveChange onMoveEnded setTextHints debugState

    Constructors

    • Type Parameters

      Parameters

      • actions: TRawActions
      • hooks: {
            onEnd?: (
                context: { cancelled: boolean; result?: any; wasApplied: boolean },
            ) => void;
            onEvent?: (
                e: PointerEvent | KeyboardEvent | undefined,
                cancel: () => void,
            ) => void;
            onRecalculate?: () => void;
            onRequestChange?: (type: keyof TActions | undefined) => void;
        } = {}
        • OptionalonEnd?: (context: { cancelled: boolean; result?: any; wasApplied: boolean }) => void

          Called when the drag action ends either because it was completed or cancelled.

        • OptionalonEvent?: (e: PointerEvent | KeyboardEvent | undefined, cancel: () => void) => void

          Called before searching for a matching action. Useful for re-initializing state.

          Is passed a cancel function if you want to cancel the current drag action.

        • OptionalonRecalculate?: () => void

          Called while dragging during dragChange events. You can use this to update the dragging edges.

        • OptionalonRequestChange?: (type: keyof TActions | undefined) => void

          Called when the action requested changes.

      • OptionaldefaultOnMoveChange: <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,
        ) => ActionChangeResult

        Default onMoveChange handler for when no action can handle the request. See IAction.onMoveChange.

        The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.

          • <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,
            ): ActionChangeResult

          • 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 updateEdges: 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 ActionChangeResult

      Returns ActionHandler<TRawActions, TActions>

    Properties

    actions: TActions
    activeAction?: keyof TActions
    boundCancel: (
        e: PointerEvent | KeyboardEvent | undefined,
        state: MoveState,
    ) => void
    defaultOnMoveChange: <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,
    ) => ActionChangeResult = ...

    Type Declaration

      • <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,
        ): ActionChangeResult

      • 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 updateEdges: 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 ActionChangeResult

    eventCanceller:
        | (
            (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void
        )
        | undefined = undefined
    hooks: {
        onEnd?: (
            context: { cancelled: boolean; result?: any; wasApplied: boolean },
        ) => void;
        onEvent?: (
            e: PointerEvent | KeyboardEvent | undefined,
            cancel: () => void,
        ) => void;
        onRecalculate?: () => void;
        onRequestChange?: (type: keyof TActions | undefined) => void;
    }

    Type Declaration

    • OptionalonEnd?: (context: { cancelled: boolean; result?: any; wasApplied: boolean }) => void

      Called when the drag action ends either because it was completed or cancelled.

    • OptionalonEvent?: (e: PointerEvent | KeyboardEvent | undefined, cancel: () => void) => void

      Called before searching for a matching action. Useful for re-initializing state.

      Is passed a cancel function if you want to cancel the current drag action.

    • OptionalonRecalculate?: () => void

      Called while dragging during dragChange events. You can use this to update the dragging edges.

    • OptionalonRequestChange?: (type: keyof TActions | undefined) => void

      Called when the action requested changes.

    shapes: (
        | {
            attrs?: Record<string, string>;
            data: { height: number; width: number; x: number; y: number };
            type: "rect";
        }
        | {
            attrs?: Record<string, string>;
            data: {
                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;
            };
            type: "edge";
        }
    )[] = []

    All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity.

    textHints: { actions: string[]; errors: string[] } = ...

    All hint/error text from all actions, updated on every onMoveChange. If using vue you can set this to a reactive object for reactivity.

    Methods

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

      Parameters

      • 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[]

      Returns void

    • Parameters

      • e: PointerEvent | KeyboardEvent | undefined
      • state: MoveState
      • forceRecalculateEdges: () => void

      Returns undefined

    • 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.

      Parameters

      • state: MoveState
      • forceRecalculateEdges: () => void

      Returns ActionHandlerApplyResult

    • 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
      • resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void

      Returns MoveChangeResult

    • Parameters

      • type: "start" | "move" | "end"

      Returns void

    • Parameters

      • pluginName: string
      • type: string
      • state: MoveState
      • pluginState: Record<string, any> = {}
      • Optionalkey: string | boolean

        Object key to filter the state by, e.g. state.win.frames. If false is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods