@witchcraft/layout
    Preparing search index...

    Class FrameDragAction

    A drag action describes when and how to handle a drag event.

    For example, there are the default split/close actions that can be triggered in certain situations. This could be when holding down a modifier or key, or some other condition (e.g. the user is dragging a specific edge).

    Each action should handle it's configuration and saving/caching any state it needs. See SplitAction and CloseAction for examples.

    Implements

    Index

    Constructors

    constructor

    Properties

    debug dragHints handleEvent hooks modifyDecos name state textHints

    Methods

    cancel canHandleRequest getDecos getTextHints onDragApply onDragChange reset setTextHints

    Constructors

    • Parameters

      • OptionalhandleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean
      • OptionalmodifyDecos: (
            shapes: {
                id: string;
                position: "left" | "right" | "top" | "bottom" | "center";
                shapes: (
                    | {
                        attrs?: Record<string, string>;
                        data: { height: number; width: number; x: number; y: number };
                        type: "square";
                    }
                    | {
                        attrs?: Record<string, string>;
                        data: { endX: number; endY: number; startX: number; startY: number };
                        type: "edge";
                    }
                )[];
                type: "drop";
            }[],
        ) => void

        Modify the created decos before they are rendered.

      • hooks: {
            onCancel?: () => void;
            onError?: (e: KnownError) => void;
            onStart?: () => void;
        } = {}
      • Optionalconfig: { debug?: string | boolean }

      Returns FrameDragAction

    Properties

    debug: string | boolean = false

    Plugins should implement some basic debug logs by calling DragActionHandler.debugState at least before and after applying actions in onDragApply. Debug can be a string because it can be an object key to filter on (see the debugState function).

    Calls look like this usually, where this.state is the plugin state:

    DragActionHandler.debugState(this.name, "before", state, this.state, this.debug)
    dragHints: {
        actions: {
            dock: string;
            rearrange: string;
            split: string;
            swap: string;
        };
        transformError: (e: KnownError) => string;
    } = ...
    handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean = ...
    hooks: {
        onCancel?: () => void;
        onError?: (e: KnownError) => void;
        onStart?: () => void;
    } = {}
    modifyDecos: (
        shapes: {
            id: string;
            position: "left" | "right" | "top" | "bottom" | "center";
            shapes: (
                | {
                    attrs?: Record<string, string>;
                    data: { height: number; width: number; x: number; y: number };
                    type: "square";
                }
                | {
                    attrs?: Record<string, string>;
                    data: { endX: number; endY: number; startX: number; startY: number };
                    type: "edge";
                }
            )[];
            type: "drop";
        }[],
    ) => void = ...
    name: "frameDrag" = ...

    A unique name for your action.

    state: {
        lastReturn?:
            | KnownError<
                LayoutError,
                | {}
                | Record<string, never>
                | { id: string | undefined }
                | { id: string | undefined }
                | { size: { height: number; width: number } }
                | { 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 }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left" | "right" | "top" | "bottom" | "center";
                }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left"
                    | "right"
                    | "top"
                    | "bottom"
                    | "center";
                }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left"
                    | "right"
                    | "top"
                    | "bottom"
                    | "center";
                }
                | { frame: LayoutFrame }
                | { frameSizeNeeded: number; minFrameSize: number }
                | { max: number; min: number; wanted: number }
                | { id: string; side: "left" | "right" | "top" | "bottom" }
                | { frame: string }
                | { frame: LayoutFrame }
                | { frame: LayoutFrame },
            >
            | LayoutChange<"split" | "swap" | "rearrange" | "dock">;
    } = ...
    textHints: { actions: string[]; errors: string[] } = ...

    Methods

    • Should return true if it should handle the "request"/event (e.g. some modifier is being pressed => user is requesting x action).

      The user is not necessarily dragging at this point, though they might also change actions mid drag. So it does not necessarily mean the event is allowed.

      Here is where you should initiate your state. Don't allow the action by default unless it can always be allowed.

      Parameters

      • e: PointerEvent | KeyboardEvent
      • state: DragState

      Returns boolean

    • Parameters

      • matchedZone: DragZone | undefined
      • state: DragState
      • result:
            | KnownError<
                LayoutError,
                | {}
                | Record<string, never>
                | { id: string | undefined }
                | { id: string | undefined }
                | { size: { height: number; width: number } }
                | { 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 }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left" | "right" | "top" | "bottom" | "center";
                }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left"
                    | "right"
                    | "top"
                    | "bottom"
                    | "center";
                }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left"
                    | "right"
                    | "top"
                    | "bottom"
                    | "center";
                }
                | { frame: LayoutFrame }
                | { frameSizeNeeded: number; minFrameSize: number }
                | { max: number; min: number; wanted: number }
                | { id: string; side: "left" | "right" | "top" | "bottom" }
                | { frame: string }
                | { frame: LayoutFrame }
                | { frame: LayoutFrame },
            >
            | LayoutChange<"split" | "swap" | "rearrange" | "dock">
            | undefined

      Returns {
          id: string;
          position: "left" | "right" | "top" | "bottom" | "center";
          shapes: (
              | {
                  attrs?: Record<string, string>;
                  data: { height: number; width: number; x: number; y: number };
                  type: "square";
              }
              | {
                  attrs?: Record<string, string>;
                  data: { endX: number; endY: number; startX: number; startY: number };
                  type: "edge";
              }
          )[];
          type: "drop";
      }[]

    • The action handler will call this regardless of whether the action is active or not.

      Can be used by actions to return display hints.

      Actions should keep the state of the hints locally and update them in canHandlerRequest/onDrag*, etc. and only use this to return the state of the actions, not update them as that could become expensive.

      Parameters

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

      Returns { actions: string[]; errors: string[] }

    • Is called after onDragChange("end") with the same event. Might not be called if the request was cancelled.

      You should apply your action if possible and return whether it was applied.

      This is also a good place to reset your state.

      Parameters

      Returns boolean

    • Parameters

      • result:
            | KnownError<
                LayoutError,
                | {}
                | Record<string, never>
                | { id: string | undefined }
                | { id: string | undefined }
                | { size: { height: number; width: number } }
                | { 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 }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left" | "right" | "top" | "bottom" | "center";
                }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left"
                    | "right"
                    | "top"
                    | "bottom"
                    | "center";
                }
                | {
                    draggingFrameId: string;
                    hoveredFrameId: string;
                    zoneSide: "left"
                    | "right"
                    | "top"
                    | "bottom"
                    | "center";
                }
                | { frame: LayoutFrame }
                | { frameSizeNeeded: number; minFrameSize: number }
                | { max: number; min: number; wanted: number }
                | { id: string; side: "left" | "right" | "top" | "bottom" }
                | { frame: string }
                | { frame: LayoutFrame }
                | { frame: LayoutFrame },
            >
            | LayoutChange<"split" | "swap" | "rearrange" | "dock">
            | undefined

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods