@witchcraft/layout 0.5.9 → 0.5.11

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.9",
+  "version": "0.5.11",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -53,7 +53,7 @@
     "@commitlint/cli": "^19.8.1",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/kit": "^4.4.6",
-    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.4.6",
     "@nuxt/types": "^2.18.1",
     "@tailwindcss/vite": "^4.3.0",

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/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
+		TContextType extends keyof ExtendedMoveTypes = keyof ExtendedMoveTypes,
+		TContext extends ExtendedMoveTypes[TContextType] = ExtendedMoveTypes[TContextType],
+		TContextReturn extends TContext extends { resolve: infer R } ? R : never = TContext extends { resolve: infer R } ? R : never,
+		TContextMoveType extends TContext extends { moveType: infer M } ? M : never = TContext extends { moveType: infer M } ? M : never,
+		TContextContext extends TContext extends { context: infer C } ? C : never = TContext extends { context: infer C } ? C : never,
+		// cursed https://github.com/microsoft/TypeScript/issues/23182
+		TType extends [TContextMoveType] extends [never] ? T : TContextMoveType = [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,
 		{
@@ -172,7 +176,7 @@ export function useFrames(
 		}: {
 			moveEvent?: string
 			endEvent?: string
-			context?: { type: TContextType } & TContextContext
+			context?: TContextContext
 		} = {}
 	): TContext extends never
 		? Promise<void>
@@ -199,7 +203,7 @@ export function useFrames(
 			moveStartPoint = { ...point }
 			moveDirStore.update(point)
 		}
-		eventContext.value = context
+		eventContext.value = context as any
 
 		isMoving.value = type as any
 		showMoving.value = true

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