@witchcraft/layout 0.5.8 → 0.5.10

package/dist/runtime/move/ActionHandler.d.ts

@@ -43,7 +43,7 @@ export declare class ActionHandler<TRawActions extends IAction[], TActions exten
      * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
      */
     defaultOnMoveChange?: IAction["onMoveChange"]);
-    eventHandler(e: KeyboardEvent | PointerEvent, state: MoveState, forceRecalculateEdges: () => void): undefined;
+    eventHandler(e: KeyboardEvent | PointerEvent | undefined, state: MoveState, forceRecalculateEdges: () => void): undefined;
     onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)): MoveChangeResult;
     onMoveApply(state: MoveState, forceRecalculateEdges: () => void): ActionHandlerApplyResult;
     onMoveEnded(): void;

package/dist/runtime/move/ActionHandler.js

@@ -36,7 +36,7 @@ export class ActionHandler {
   }
   eventHandler(e, state, forceRecalculateEdges) {
     if (state.isMoving) {
-      e.preventDefault();
+      e?.preventDefault();
     }
     let cancelled = false;
     this.hooks.onEvent?.(e, () => {

package/dist/runtime/move/CloseAction.d.ts

@@ -29,7 +29,7 @@ export declare class CloseAction implements IAction {
         }) => string[]);
         transformError: (e: KnownError) => string;
     };
-    handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean | "force";
+    handleEvent: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => boolean | "force";
     modifyDecos: (shapes: CloseDeco[]) => void;
     hooks: {
         onStart?: (active: boolean) => void;
@@ -51,7 +51,7 @@ export declare class CloseAction implements IAction {
         actions: string[];
         errors: string[];
     };
-    canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
+    canHandleRequest(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): boolean;
     onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
     onMoveApply(state: MoveState): ActionApplyResult;
     cancel(): void;

package/dist/runtime/move/CloseAction.js

@@ -17,10 +17,10 @@ export class CloseAction {
     transformError: (e) => e.message
   };
   handleEvent = (e) => {
-    if (e.ctrlKey && e.shiftKey) {
+    if (e?.ctrlKey && e?.shiftKey) {
       return "force";
     }
-    if (e.shiftKey) return true;
+    if (e?.shiftKey) return true;
     return false;
   };
   modifyDecos = () => {

package/dist/runtime/move/FrameDragAction.d.ts

@@ -11,7 +11,7 @@ export declare class FrameDragAction implements IAction {
         actions: string[];
         errors: string[];
     };
-    handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean;
+    handleEvent: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => boolean;
     dragHints: {
         actions: {
             split?: string;
@@ -43,7 +43,7 @@ export declare class FrameDragAction implements IAction {
         errors: string[];
     };
     getDecos(matchedZone: Zone | undefined, state: MoveState, result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): FrameDeco[];
-    canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
+    canHandleRequest(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): boolean;
     onMoveChange<T extends "start" | "move" | "end">(type: T, _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
     onMoveApply(state: MoveState): ActionApplyResult;
     onMoveEnded(): void;

package/dist/runtime/move/SplitAction.d.ts

@@ -26,7 +26,7 @@ export declare class SplitAction implements IAction {
         actions: string[] | ((type: DragChangeType) => string[]);
         transformError: (e: KnownError) => string;
     };
-    handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean;
+    handleEvent: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => boolean;
     modifyDecos: (shapes: SplitDeco[]) => void;
     hooks: {
         onStart?: () => void;
@@ -43,7 +43,7 @@ export declare class SplitAction implements IAction {
     });
     reset(): void;
     getDecos(state: MoveState): SplitDeco[];
-    canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
+    canHandleRequest(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): boolean;
     setTextHints(result: true | SplitInfo | KnownError | undefined): void;
     getTextHints(type: "start" | "move" | "end"): {
         actions: string[];

package/dist/runtime/move/SplitAction.js

@@ -15,7 +15,7 @@ export class SplitAction {
     actions: ["Hold Alt to Split"],
     transformError: (e) => e.message
   };
-  handleEvent = (e, state) => e.altKey || state.isMovingFromWindowEdge;
+  handleEvent = (e, state) => e?.altKey || state.isMovingFromWindowEdge;
   modifyDecos = () => {
   };
   hooks;

package/dist/runtime/types/index.d.ts

@@ -1956,8 +1956,10 @@ export interface IAction {
      * 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.
+     *
+     * Event might be undefined if it was initiated manually via moveStart without an event.
      */
-    canHandleRequest(e: KeyboardEvent | PointerEvent, state: MoveState, forceRecalculateEdges: () => void): boolean;
+    canHandleRequest(e: KeyboardEvent | PointerEvent | undefined, state: MoveState, forceRecalculateEdges: () => void): boolean;
     /**
      * Plugins should implement some basic debug logs by calling {@link ActionHandler.debugState } at least before and after applying actions in onMoveApply. Debug can be a string because it can be an object key to filter on (see the debugState function).
      *

package/dist/runtime/types/vue.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { Direction, Edge, FrameId, IActionHandler, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js";
+import type { Direction, Edge, EdgeMoveStartData, ExtendedMoveTypes, FrameId, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js";
 export type LayoutContext = ComputedRef<{
     /** The owning window, needed so we can correctly scale coordinates. */
     win: LayoutWindow;
@@ -9,23 +9,19 @@ export type LayoutContext = ComputedRef<{
 export declare const layoutContextInjectionKey: InjectionKey<LayoutContext>;
 export interface UseFramesContext {
     actionHandler: IActionHandler;
-    moveStart: {
-        (e: PointerEvent, type: "edge", data: {
-            edge?: Edge;
-            intersection?: IntersectionEntry;
-        }, opts?: {
-            moveEvent?: string;
-            endEvent?: string;
-            context?: Record<string, unknown>;
-        }): Promise<any>;
-        (e: PointerEvent, type: "frame", data: {
-            frameId: FrameId;
-        }, opts?: {
-            moveEvent?: string;
-            endEvent?: string;
-            context?: Record<string, unknown>;
-        }): Promise<any>;
-    };
+    moveStart<T extends "edge" | "frame" | "other", TContextType extends keyof ExtendedMoveTypes, TContext extends ExtendedMoveTypes[TContextType], TContextReturn extends TContext extends {
+        resolve: infer R;
+    } ? R : never, TContextMoveType extends TContext extends {
+        moveType: infer M;
+    } ? M : never, TContextContext extends TContext extends {
+        context: infer C;
+    } ? C : never, TType extends [TContextMoveType] extends [never] ? T : TContextMoveType>(e: PointerEvent | undefined, type: TType, data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined, opts?: {
+        moveEvent?: string;
+        endEvent?: string;
+        context?: {
+            type: TContextType;
+        } & TContextContext;
+    }): TContext extends never ? Promise<void> : Promise<TContextReturn>;
     onMove: (e: PointerEvent) => void;
     moveEnd: (e?: PointerEvent, options?: {
         apply?: boolean;
@@ -34,6 +30,7 @@ export interface UseFramesContext {
     moveDirections: Ref<Record<Orientation, Direction | undefined>>;
     movePoint: Ref<Point | undefined>;
     isMoving: Ref<false | "frame" | "edge" | "other">;
+    showMoving: Ref<boolean>;
     movingEdges: Ref<Edge[]>;
     movingIntersection: Ref<IntersectionEntry | undefined>;
     visualEdges: Ref<Edge[]>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,

package/src/runtime/components/LayoutDragEdgeHandle.vue

@@ -28,7 +28,7 @@ import { useAttrs, inject } from "vue"
 import LayoutShapeRect from "./LayoutShapeRect.vue"
 import { type EdgeMoveStartData } from "../types/index.js"
 import { moveContextInjectionKey } from "../types/vue.js"
-import type { Edge, EdgeCss } from "../types/index.js"
+import type { Edge, EdgeCss, UseFramesContext } from "../types/index.js"
 
 const $attrs = useAttrs()
 
@@ -39,7 +39,7 @@ defineOptions({
 const props = defineProps<{
 	edge: Edge
 	css: EdgeCss
-	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void
+	onPointerDown?: UseFramesContext["moveStart"]
 }>()
 
 const ctx = inject(layoutContextInjectionKey, undefined)

package/src/runtime/components/LayoutDragEdges.vue

@@ -19,7 +19,7 @@
 		edge: visualEdges[i],
 	}">
 		<LayoutDragEdgeVisible
-				:edge="visualEdges[i]"
+			:edge="visualEdges[i]"
 			:css="css.visible"
 		/>
 	</slot>

package/src/runtime/components/LayoutIntersectionHandle.vue

@@ -20,9 +20,8 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import LayoutShapeRect from "./LayoutShapeRect.vue"
 
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
-import { type EdgeMoveStartData } from "../types/index.js"
 import { moveContextInjectionKey } from "../types/vue.js"
-import type { IntersectionEntry } from "../types/index.js"
+import type { IntersectionEntry, UseFramesContext } from "../types/index.js"
 
 const $attrs = useAttrs()
 
@@ -33,7 +32,7 @@ defineOptions({
 const props = defineProps<{
 	css: ReturnType<typeof getIntersectionsCss>[number]
 	intersection: IntersectionEntry
-	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void
+	onPointerDown?: UseFramesContext["moveStart"]
 }>()
 
 const ctx = inject(layoutContextInjectionKey, undefined)

package/src/runtime/components/LayoutWindow.vue

@@ -128,7 +128,6 @@ const actionHandler = props.actionHandler ?? markRaw(new ActionHandler(
 	],
 	{
 		onEvent: (e, cancel) => {
-			showMoving.value = true
 			if (e instanceof KeyboardEvent && e.key === "Escape") {
 				cancel()
 			}
@@ -138,7 +137,6 @@ const actionHandler = props.actionHandler ?? markRaw(new ActionHandler(
 		},
 		onEnd: () => {
 			requestType.value = undefined
-			showMoving.value = true
 		},
 	}
 ))

package/src/runtime/composables/useFrames.ts

@@ -26,14 +26,15 @@ import type {
 	LayoutWindow,
 	MoveState,
 	Orientation,
-	Point
+	Point,
+	UseFramesContext
 } from "../types/index.js"
 
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
 	handler: IActionHandler
-) {
+): UseFramesContext {
 	const movingEdges = ref<Edge[]>([])
 
 	// each entry corresponds to the frames touching the corresponding dragging edge
@@ -153,16 +154,19 @@ export function useFrames(
 		handler.onMoveEnded()
 	}
 
+
 	function moveStart<
 		T extends "edge" | "frame" | "other",
 		TContextType extends keyof ExtendedMoveTypes,
 		TContext extends ExtendedMoveTypes[TContextType],
 		TContextReturn extends TContext extends { resolve: infer R } ? R : never,
 		TContextMoveType extends TContext extends { moveType: infer M } ? M : never,
-		TContextContext extends TContext extends { context: infer C } ? C : never
+		TContextContext extends TContext extends { context: infer C } ? C : never,
+		// cursed https://github.com/microsoft/TypeScript/issues/23182
+		TType extends [TContextMoveType] extends [never] ? T : TContextMoveType
 	>(
 		e: PointerEvent | undefined,
-		type: TContextMoveType extends never ? T : TContextMoveType,
+		type: TType,
 		// someday this will work
 		data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined,
 		{

package/src/runtime/move/ActionHandler.ts

@@ -77,12 +77,12 @@ export class ActionHandler<
 	}
 
 	eventHandler(
-		e: KeyboardEvent | PointerEvent,
+		e: KeyboardEvent | PointerEvent | undefined,
 		state: MoveState,
 		forceRecalculateEdges: () => void
 	) {
 		if (state.isMoving) {
-			e.preventDefault()
+			e?.preventDefault()
 		}
 		let cancelled = false
 		this.hooks.onEvent?.(e, () => {
@@ -131,7 +131,7 @@ export class ActionHandler<
 	): MoveChangeResult {
 		if (type === "start") {
 			this.eventCanceller = cancel
-			this.eventHandler(e!, state, forceRecalculateEdges)
+			this.eventHandler(e, state, forceRecalculateEdges)
 		}
 
 		if (this.activeAction) {

package/src/runtime/move/CloseAction.ts

@@ -40,11 +40,11 @@ export class CloseAction implements IAction {
 		transformError: e => e.message
 	}
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean | "force" = (e: PointerEvent | KeyboardEvent) => {
-		if (e.ctrlKey && e.shiftKey) {
+	handleEvent: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => boolean | "force" = (e: PointerEvent | KeyboardEvent | undefined) => {
+		if (e?.ctrlKey && e?.shiftKey) {
 			return "force"
 		}
-		if (e.shiftKey) return true
+		if (e?.shiftKey) return true
 		return false
 	}
 
@@ -136,7 +136,7 @@ export class CloseAction implements IAction {
 	}
 
 
-	canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean {
+	canHandleRequest(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): boolean {
 		const { movingEdges } = state
 		if (movingEdges.length !== 1) return false
 		const res = this.handleEvent(e, state)

package/src/runtime/move/FrameDragAction.ts

@@ -25,8 +25,8 @@ export class FrameDragAction implements IAction {
 	debug: boolean | string = false
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean
-		= (_e: PointerEvent | KeyboardEvent, state: MoveState) => state.isMoving === "frame"
+	handleEvent: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => boolean
+		= (_e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => state.isMoving === "frame"
 
 	dragHints: {
 		actions: { split?: string, swap?: string, rearrange?: string, dock?: string } | ((state: { type: "split" | "swap" | "rearrange" | "dock" }) => string[])
@@ -139,7 +139,7 @@ export class FrameDragAction implements IAction {
 		return decos
 	}
 
-	canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean {
+	canHandleRequest(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): boolean {
 		const res = this.handleEvent(e, state)
 		this.setTextHints(undefined)
 		if (res) {

package/src/runtime/move/SplitAction.ts

@@ -40,8 +40,8 @@ export class SplitAction implements IAction {
 		transformError: e => e.message
 	}
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean
-		= (e: PointerEvent | KeyboardEvent, state: MoveState) => e.altKey || state.isMovingFromWindowEdge
+	handleEvent: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => boolean
+		= (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => e?.altKey || state.isMovingFromWindowEdge
 
 	modifyDecos: (shapes: SplitDeco[]) => void = () => { }
 	hooks: {
@@ -107,7 +107,7 @@ export class SplitAction implements IAction {
 		return decos
 	}
 
-	canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean {
+	canHandleRequest(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): boolean {
 		const { movingEdges } = state
 		if (movingEdges.length !== 1) return false
 		// hint should not be shown when dragging from window edge but we should still handle the event

package/src/runtime/types/index.ts

@@ -574,9 +574,11 @@ export interface IAction {
 	 * 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.
+	 *
+	 * Event might be undefined if it was initiated manually via moveStart without an event.
 	 */
 	canHandleRequest(
-		e: KeyboardEvent | PointerEvent,
+		e: KeyboardEvent | PointerEvent | undefined,
 		state: MoveState,
 		forceRecalculateEdges: () => void
 	): boolean

package/src/runtime/types/vue.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue"
 
 // eslint-disable-next-line no-restricted-imports
-import type { Direction, Edge, FrameId, IActionHandler, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js"
+import type { Direction, Edge, EdgeMoveStartData, ExtendedMoveTypes, FrameId, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js"
 
 export type LayoutContext = ComputedRef<
 	& {
@@ -16,16 +16,35 @@ export const layoutContextInjectionKey = Symbol.for("@witchcraft/layout:context"
 
 export interface UseFramesContext {
 	actionHandler: IActionHandler
-	moveStart: {
-		(e: PointerEvent, type: "edge", data: { edge?: Edge, intersection?: IntersectionEntry }, opts?: { moveEvent?: string, endEvent?: string, context?: Record<string, unknown> }): Promise<any>
-		(e: PointerEvent, type: "frame", data: { frameId: FrameId }, opts?: { moveEvent?: string, endEvent?: string, context?: Record<string, unknown> }): Promise<any>
-	}
+	moveStart<
+		T extends "edge" | "frame" | "other",
+		TContextType extends keyof ExtendedMoveTypes,
+		TContext extends ExtendedMoveTypes[TContextType],
+		TContextReturn extends TContext extends { resolve: infer R } ? R : never,
+		TContextMoveType extends TContext extends { moveType: infer M } ? M : never,
+		TContextContext extends TContext extends { context: infer C } ? C : never,
+		// cursed https://github.com/microsoft/TypeScript/issues/23182
+		TType extends [TContextMoveType] extends [never] ? T : TContextMoveType
+	>(
+		e: PointerEvent | undefined,
+		type: TType,
+		// someday this will work
+		data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined,
+		opts?: {
+			moveEvent?: string
+			endEvent?: string
+			context?: { type: TContextType } & TContextContext
+		}
+	): TContext extends never
+		? Promise<void>
+		: Promise<TContextReturn>
 	onMove: (e: PointerEvent) => void
 	moveEnd: (e?: PointerEvent, options?: { apply?: boolean }) => void
 	cancel: () => void
 	moveDirections: Ref<Record<Orientation, Direction | undefined>>
 	movePoint: Ref<Point | undefined>
 	isMoving: Ref<false | "frame" | "edge" | "other">
+	showMoving: Ref<boolean>
 	movingEdges: Ref<Edge[]>
 	movingIntersection: Ref<IntersectionEntry | undefined>
 	visualEdges: Ref<Edge[]>