@witchcraft/layout 0.4.3 → 0.5.0

package/dist/runtime/composables/useFrames.d.ts

@@ -1,47 +1,30 @@
 import type { Ref } from "vue";
-import type { DragChangeHandler, DragChangeResult, DragState, Edge, EdgeDragStartData, FrameDragStartData, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
-export declare function useFrames(win: Ref<LayoutWindow>, handler: {
-    eventHandler: (e: KeyboardEvent, state: DragState, forceRecalculateEdges: () => void) => void;
-    /**
-        * 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.
-        */
-    onDragChange: (...args: Parameters<DragChangeHandler>) => DragChangeResult;
-    /**
-     * 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).
-     */
-    onDragApply: ((state: DragState, forceRecalculateEdges: () => void) => boolean);
-    /**
-     * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
-     */
-    annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void;
-}): {
-    dragStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeDragStartData : FrameDragStartData) => void;
-    dragEnd: (e?: PointerEvent, { apply }?: {
-        apply?: boolean;
-    }) => void;
+import type { ActionHandler, ActionHandlerApplyResult, EdgeMoveStartData, FrameMoveStartData, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
+export declare function useFrames(win: Ref<LayoutWindow>, handler: ActionHandler): {
+    moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData, { moveEvent, endEvent, context }?: {
+        moveEvent?: string;
+        endEvent?: string;
+        context?: Record<string, unknown>;
+    }) => Promise<any>;
+    moveEnd: (e?: PointerEvent, { apply }?: Partial<Pick<ActionHandlerApplyResult, "apply">>) => void;
     cancel: () => void;
-    dragMove: (e: PointerEvent) => void;
-    dragDirections: Ref<{
+    onMove: (e: PointerEvent) => void;
+    moveDirections: 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;
     }>;
-    dragPoint: Ref<{
+    movePoint: Ref<{
         x: number;
         y: number;
     } | undefined, {
         x: number;
         y: number;
     } | undefined>;
-    isDragging: Ref<false | "edge" | "frame", false | "edge" | "frame">;
-    draggingEdges: Ref<{
+    isMoving: Ref<false | "edge" | "frame", false | "edge" | "frame">;
+    movingEdges: Ref<{
         startX: number;
         startY: number;
         endX: number;
@@ -70,17 +53,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         } | {
             frame: LayoutFrame;
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
             frame: LayoutFrame;
         } | {
@@ -103,6 +86,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -136,17 +121,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         } | {
             frame: LayoutFrame;
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
             frame: LayoutFrame;
         } | {
@@ -169,6 +154,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -202,17 +189,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         } | {
             frame: LayoutFrame;
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
             frame: LayoutFrame;
         } | {
@@ -235,12 +222,14 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
         } | undefined;
     }[]>;
-    draggingIntersection: Ref<{
+    movingIntersection: Ref<{
         point: {
             x: number;
             y: number;
@@ -277,17 +266,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 } | {
                     frame: LayoutFrame;
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
                     frame: LayoutFrame;
                 } | {
@@ -310,6 +299,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -344,17 +335,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 } | {
                     frame: LayoutFrame;
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
                     frame: LayoutFrame;
                 } | {
@@ -377,6 +368,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -421,17 +414,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 } | {
                     frame: LayoutFrame;
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
                     frame: LayoutFrame;
                 } | {
@@ -454,6 +447,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -488,17 +483,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 } | {
                     frame: LayoutFrame;
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
-                    draggingFrameId: string;
+                    movingFrameId: string;
                     hoveredFrameId: string;
-                    zoneSide: import("../types/index.js").DragZone["side"];
+                    zoneSide: import("../types/index.js").Zone["side"];
                 } | {
                     frame: LayoutFrame;
                 } | {
@@ -521,6 +516,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -558,17 +555,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         } | {
             frame: LayoutFrame;
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
             frame: LayoutFrame;
         } | {
@@ -591,6 +588,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -624,17 +623,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         } | {
             frame: LayoutFrame;
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
             frame: LayoutFrame;
         } | {
@@ -657,6 +656,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -690,17 +691,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         } | {
             frame: LayoutFrame;
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
-            draggingFrameId: string;
+            movingFrameId: string;
             hoveredFrameId: string;
-            zoneSide: import("../types/index.js").DragZone["side"];
+            zoneSide: import("../types/index.js").Zone["side"];
         } | {
             frame: LayoutFrame;
         } | {
@@ -723,6 +724,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -731,24 +734,24 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
     touchingFrames: Ref<Record<string, LayoutFrame>[], Record<string, LayoutFrame>[]>;
     touchingFramesArrays: import("vue").ComputedRef<LayoutFrame[][]>;
     frames: import("vue").ComputedRef<import("../types/index.js").LayoutFrames>;
-    dragHoveredFrame: import("vue").ComputedRef<LayoutFrame | undefined>;
+    moveHoveredFrame: import("vue").ComputedRef<LayoutFrame | undefined>;
     intersections: import("vue").ComputedRef<IntersectionEntry[]>;
-    isDraggingFromWindowEdge: Ref<boolean, boolean>;
+    isMovingFromWindowEdge: Ref<boolean, boolean>;
     forceRecalculateEdges: () => void;
     state: import("vue").ComputedRef<{
-        dragDirections: {
+        moveDirections: {
             horizontal: "up" | "down" | "left" | "right" | undefined;
             vertical: "up" | "down" | "left" | "right" | undefined;
         };
-        dragPoint: {
+        movePoint: {
             x: number;
             y: number;
         } | undefined;
-        dragDistance: number;
-        isDragging: false | "edge" | "frame";
-        showDragging: boolean;
-        draggingFrameId: string | undefined;
-        draggingEdges: {
+        moveDistance: number;
+        isMoving: false | "edge" | "frame";
+        showMoving: boolean;
+        movingFrameId: string | undefined;
+        movingEdges: {
             startX: number;
             startY: number;
             endX: number;
@@ -777,17 +780,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             } | {
                 frame: LayoutFrame;
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
                 frame: LayoutFrame;
             } | {
@@ -810,12 +813,14 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }> | {
                 code: string;
                 message: string;
             } | undefined;
         }[];
-        draggingIntersection: {
+        movingIntersection: {
             point: {
                 x: number;
                 y: number;
@@ -852,17 +857,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     } | {
                         frame: LayoutFrame;
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
                         frame: LayoutFrame;
                     } | {
@@ -885,6 +890,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                         frame: LayoutFrame;
                     } | {
                         frame: LayoutFrame;
+                    } | {
+                        frame: LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -919,17 +926,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     } | {
                         frame: LayoutFrame;
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
                         frame: LayoutFrame;
                     } | {
@@ -952,6 +959,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                         frame: LayoutFrame;
                     } | {
                         frame: LayoutFrame;
+                    } | {
+                        frame: LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -989,17 +998,17 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             } | {
                 frame: LayoutFrame;
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
                 frame: LayoutFrame;
             } | {
@@ -1022,6 +1031,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -1030,11 +1041,13 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         touchingFrames: Record<string, LayoutFrame>[];
         touchingFramesArrays: LayoutFrame[][];
         frames: import("../types/index.js").LayoutFrames;
-        dragHoveredFrame: LayoutFrame | undefined;
+        moveHoveredFrame: LayoutFrame | undefined;
         intersections: IntersectionEntry[];
-        isDraggingFromWindowEdge: boolean;
+        isMovingFromWindowEdge: boolean;
+        eventContext: Record<string, unknown> | undefined;
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
-    showDragging: Ref<boolean, boolean>;
-    frameDragFrameId: Ref<string | undefined, string | undefined>;
+    showMoving: Ref<boolean, boolean>;
+    movingFrameId: Ref<string | undefined, string | undefined>;
+    actionHandler: ActionHandler;
 };