@witchcraft/layout
    Preparing search index...

    Function useFrames

    • Parameters

      • win: Ref<BaseLayoutWindow>
      • handler: {
            eventHandler: (
                e: KeyboardEvent,
                state: DragState,
                forceRecalculateEdges: () => void,
            ) => void;
            onDragApply: (
                state: DragState,
                forceRecalculateEdges: () => void,
            ) => boolean;
            onDragChange: (
                ...args: [
                    type: "start"
                    | "move"
                    | "end",
                    e: PointerEvent,
                    state: DragState,
                    forceRecalculateEdges: () => void,
                    cancel: (
                        e: PointerEvent | KeyboardEvent | undefined,
                        state: DragState,
                    ) => void,
                ],
            ) => DragChangeResult;
        }
        • eventHandler: (e: KeyboardEvent, state: DragState, forceRecalculateEdges: () => void) => void
        • onDragApply: (state: DragState, forceRecalculateEdges: () => void) => boolean

          Called when drag will be applied. If dragEnd was called with apply false, it will not be called. Return false to not apply the regular drag end changes (i.e. return false to reset to the position before dragging).

        • onDragChange: (
              ...args: [
                  type: "start"
                  | "move"
                  | "end",
                  e: PointerEvent,
                  state: DragState,
                  forceRecalculateEdges: () => void,
                  cancel: (
                      e: PointerEvent | KeyboardEvent | undefined,
                      state: DragState,
                  ) => void,
              ],
          ) => DragChangeResult

          Called when the drag coordinates change (during any event). Should return true to allow the edges to be updated/moved, or false to prevent it.

          Can return anything for the end event as it's ignored.

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

      Returns {
          cancel: () => void;
          dragDirections: Ref<
              {
                  horizontal: "up"
                  | "down"
                  | "left"
                  | "right"
                  | undefined;
                  vertical: "up" | "down" | "left" | "right" | undefined;
              },
              | Record<
                  "horizontal"
                  | "vertical",
                  "up" | "down" | "left" | "right" | undefined,
              >
              | {
                  horizontal: "up" | "down" | "left" | "right" | undefined;
                  vertical: "up" | "down" | "left" | "right" | undefined;
              },
          >;
          dragEnd: (
              e?: PointerEvent,
              __namedParameters?: { apply?: boolean },
          ) => void;
          draggingEdges: Ref<
              { endX: number; endY: number; startX: number; startY: number }[],

                  | { endX: number; endY: number; startX: number; startY: number }[]
                  | { endX: number; endY: number; startX: number; startY: number }[],
          >;
          draggingIntersection: Ref<
              | {
                  count: number;
                  isWindowEdge: boolean;
                  point: { x: number; y: number };
                  sharedEdges: {
                      horizontal: {
                          endX: number;
                          endY: number;
                          startX: number;
                          startY: number;
                      }[];
                      vertical: { endX: number; endY: number; startX: number; startY: number }[];
                  };
                  sharesEdge: boolean;
              }
              | undefined,
              | IntersectionEntry
              | {
                  count: number;
                  isWindowEdge: boolean;
                  point: { x: number; y: number };
                  sharedEdges: {
                      horizontal: {
                          endX: number;
                          endY: number;
                          startX: number;
                          startY: number;
                      }[];
                      vertical: { endX: number; endY: number; startX: number; startY: number }[];
                  };
                  sharesEdge: boolean;
              }
              | undefined,
          >;
          dragHoveredFrame: ComputedRef<LayoutFrame | undefined>;
          dragMove: (e: PointerEvent) => void;
          dragPoint: Ref<
              { x: number; y: number }
              | undefined,
              { x: number; y: number } | undefined,
          >;
          dragStart: <T extends "frame" | "edge">(
              e: PointerEvent,
              type: T,
              data: T extends "edge" ? EdgeDragStartData : FrameDragStartData,
          ) => void;
          forceRecalculateEdges: () => void;
          frameDragFrameId: Ref<string | undefined, string | undefined>;
          frames: ComputedRef<LayoutFrames>;
          intersections: ComputedRef<IntersectionEntry[]>;
          isDragging: Ref<false | "frame" | "edge", false | "frame" | "edge">;
          isDraggingFromWindowEdge: Ref<boolean, boolean>;
          showDragging: Ref<boolean, boolean>;
          state: ComputedRef<
              {
                  dragDirections: {
                      horizontal: "up"
                      | "down"
                      | "left"
                      | "right"
                      | undefined;
                      vertical: "up" | "down" | "left" | "right" | undefined;
                  };
                  draggingEdges: {
                      endX: number;
                      endY: number;
                      startX: number;
                      startY: number;
                  }[];
                  draggingFrameId: string
                  | undefined;
                  draggingIntersection:
                      | {
                          count: number;
                          isWindowEdge: boolean;
                          point: { x: number; y: number };
                          sharedEdges: {
                              horizontal: {
                                  endX: number;
                                  endY: number;
                                  startX: number;
                                  startY: number;
                              }[];
                              vertical: {
                                  endX: number;
                                  endY: number;
                                  startX: number;
                                  startY: number;
                              }[];
                          };
                          sharesEdge: boolean;
                      }
                      | undefined;
                  dragHoveredFrame: LayoutFrame
                  | undefined;
                  dragPoint: { x: number; y: number } | undefined;
                  frames: LayoutFrames;
                  intersections: IntersectionEntry[];
                  isDragging: false | "frame" | "edge";
                  isDraggingFromWindowEdge: boolean;
                  showDragging: boolean;
                  touchingFrames: Record<string, LayoutFrame>[];
                  touchingFramesArrays: LayoutFrame[][];
                  visualEdges: {
                      endX: number;
                      endY: number;
                      startX: number;
                      startY: number;
                  }[];
                  win: BaseLayoutWindow;
              },
          >;
          touchingFrames: Ref<
              Record<string, LayoutFrame>[],
              Record<string, LayoutFrame>[],
          >;
          touchingFramesArrays: ComputedRef<LayoutFrame[][]>;
          visualEdges: Ref<
              { endX: number; endY: number; startX: number; startY: number }[],

                  | { endX: number; endY: number; startX: number; startY: number }[]
                  | { endX: number; endY: number; startX: number; startY: number }[],
          >;
      }

    Settings

    Member Visibility