@witchcraft/layout 0.5.4 → 0.5.6

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

@@ -1,11 +1,19 @@
 import type { Ref } from "vue";
-import type { EdgeMoveStartData, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
+import type { EdgeMoveStartData, ExtendedMoveTypes, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
 export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandler): {
-    moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData, { moveEvent, endEvent, context }?: {
+    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>(e: PointerEvent, type: TContextMoveType extends never ? T : TContextMoveType, data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined, { moveEvent, endEvent, context }?: {
         moveEvent?: string;
         endEvent?: string;
-        context?: Record<string, unknown>;
-    }) => Promise<any>;
+        context?: {
+            type: TContextType;
+        } & TContextContext;
+    }) => TContext extends never ? Promise<void> : Promise<TContextReturn>;
     moveEnd: (e?: PointerEvent, { apply }?: {
         apply?: boolean;
     }) => void;
@@ -25,7 +33,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandle
         x: number;
         y: number;
     } | undefined>;
-    isMoving: Ref<false | "edge" | "frame", false | "edge" | "frame">;
+    isMoving: Ref<false | "edge" | "frame" | "other", false | "edge" | "frame" | "other">;
     movingEdges: Ref<{
         startX: number;
         startY: number;
@@ -750,7 +758,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandle
             y: number;
         } | undefined;
         moveDistance: number;
-        isMoving: false | "edge" | "frame";
+        isMoving: false | "edge" | "frame" | "other";
         showMoving: boolean;
         movingFrameId: string | undefined;
         movingEdges: {

package/dist/runtime/composables/useFrames.js

@@ -129,7 +129,7 @@ export function useFrames(win, handler) {
     showMoving.value = true;
     if (type === "frame") {
       movingFrameId.value = data.frameId;
-    } else {
+    } else if (type === "edge") {
       const { edge, intersection } = data;
       movingIntersection.value = intersection;
       movingEdges.value = edge ? [edge] : [

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

@@ -1,4 +1,5 @@
 import type { EnumLike } from "@alanscodelog/utils";
+import type { Flatten, OrToAnd } from "@alanscodelog/utils/types";
 import { z } from "zod";
 import { KnownError } from "../utils/KnownError.js";
 export declare const zUuid: z.ZodUUID;
@@ -1843,6 +1844,12 @@ export type LayoutChange<TInfo = never> = {
     window?: Partial<LayoutWindow>;
     info?: TInfo;
 };
+export type ExtendedMoveTypes = Flatten<OrToAnd<keyof Register extends `LayoutMove${infer T}` ? Register extends Record<`LayoutMove${T}`, infer U> ? U extends {
+    type: string;
+    context: any;
+    resolve: any;
+    moveType: "edge" | "frame" | "other";
+} ? Record<U["type"], U> : never : never : never>>;
 export type MoveState = {
     /** The current directions in the corresponding orientations that the user is dragging in. */
     moveDirections: Record<Orientation, Direction | undefined>;
@@ -1850,8 +1857,12 @@ export type MoveState = {
     movePoint?: Point;
     /** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
     moveDistance: number;
-    /** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
-    isMoving: boolean | "frame" | "edge";
+    /**
+     * Whether the user is currently moving and what type of move. Is truthy string during all move events. The actions decide what they need to set it to as "frame" and "edge" have custom behavior.
+     *
+     * Other is for actions that do things other than drag frames/edges which include built in behavior (e.g. frames get a frame dragging indicator at the cursor)
+     */
+    isMoving: boolean | "frame" | "edge" | "other";
     /** Whether to show the moved frames while dragging. */
     showMoving: boolean;
     /** The frame being dragged during a frame drag. Only set when isMoving is "frame". */

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

@@ -33,7 +33,7 @@ export interface UseFramesContext {
     cancel: () => void;
     moveDirections: Ref<Record<Orientation, Direction | undefined>>;
     movePoint: Ref<Point | undefined>;
-    isMoving: Ref<false | "frame" | "edge">;
+    isMoving: Ref<false | "frame" | "edge" | "other">;
     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.4",
+  "version": "0.5.6",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,

package/src/runtime/components/LayoutWindow.vue

@@ -146,7 +146,7 @@ actionHandler.shapes = reactive([])
 actionHandler.textHints = reactive({ actions: [], errors: [] })
 const shapes = actionHandler.shapes
 
-const dragContext  = useFrames(
+const moveContext  = useFrames(
 	win,
 	actionHandler
 )
@@ -158,9 +158,9 @@ const {
 	state,
 	movingFrameId,
 	showMoving,
-} = dragContext
+} = moveContext
 
-provide(moveContextInjectionKey, dragContext)
+provide(moveContextInjectionKey, moveContext)
 
 function getWindowOffset() {
 	const windowElRect = windowEl.value!.getBoundingClientRect()
@@ -209,6 +209,7 @@ defineExpose({
 	win,
 	getUpdateWindowSizeInfo,
 	actionHandler: actionHandler as ActionHandler<any, any>,
+	moveContext
 })
 </script>
 

package/src/runtime/composables/useFrames.ts

@@ -12,7 +12,23 @@ import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { isPointInRect } from "../layout/isPointInRect.js"
 import { MoveDirectionStore } from "../move/MoveDirectionStore.js"
-import type { ActionResolve, Direction, Edge, EdgeMoveStartData, FrameId, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow, MoveState, Orientation, Point } from "../types/index.js"
+import type {
+	ActionResolve,
+	Direction,
+	Edge,
+	EdgeMoveStartData,
+	ExtendedMoveTypes,
+	FrameId,
+	FrameMoveStartData,
+	IActionHandler,
+	IntersectionEntry,
+	LayoutFrame,
+	LayoutWindow,
+	MoveState,
+	Orientation,
+	Point
+} from "../types/index.js"
+
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
@@ -34,7 +50,7 @@ export function useFrames(
 
 	const touchingFramesArrays = computed(() => touchingFrames.value.map(entry => Object.values(entry)))
 
-	const isMoving = ref<false | "frame" | "edge">(false)
+	const isMoving = ref<false | "frame" | "edge" | "other">(false)
 	const showMoving = ref(false)
 	const movePoint = ref<Point | undefined>()
 
@@ -137,11 +153,18 @@ export function useFrames(
 		handler.onMoveEnded()
 	}
 
-	function moveStart<T extends "edge" | "frame">(
+	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
+	>(
 		e: PointerEvent,
-		type: T,
+		type: TContextMoveType extends never ? T : TContextMoveType,
 		// someday this will work
-		data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData,
+		data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined,
 		{
 			moveEvent = "pointermove",
 			endEvent = "pointerup",
@@ -149,9 +172,11 @@ export function useFrames(
 		}: {
 			moveEvent?: string
 			endEvent?: string
-			context?: Record<string, unknown>
+			context?: { type: TContextType } & TContextContext
 		} = {}
-	): Promise<any> {
+	): TContext extends never
+		? Promise<void>
+		: Promise<TContextReturn> {
 		// if already dragging, abort previous (resetState resolves the old promise)
 		if (controller) {
 			controller.abort()
@@ -174,12 +199,12 @@ export function useFrames(
 		moveDirStore.update(point)
 		eventContext.value = context
 
-		isMoving.value = type
+		isMoving.value = type as any
 		showMoving.value = true
 
 		if (type === "frame") {
 			movingFrameId.value = (data as FrameMoveStartData).frameId
-		} else {
+		} else if (type === "edge") {
 			const { edge, intersection } = data as EdgeMoveStartData
 			movingIntersection.value = intersection
 
@@ -216,7 +241,7 @@ export function useFrames(
 
 		const res = handler.onMoveChange("start", e, state.value, forceRecalculateEdges, cancel, resolve)
 		showMoving.value = res.showMoving ?? true
-		return promise
+		return promise as any
 	}
 
 	function onMove(e: PointerEvent): void {

package/src/runtime/types/index.ts

@@ -1,5 +1,6 @@
 import type { EnumLike } from "@alanscodelog/utils"
 import { enumFromArray } from "@alanscodelog/utils/enumFromArray"
+import type { Flatten, OrToAnd } from "@alanscodelog/utils/types"
 import { z } from "zod"
 
 import { KnownError } from "../utils/KnownError.js"
@@ -441,6 +442,22 @@ export type LayoutChange<TInfo = never> = {
 	window?: Partial<LayoutWindow>
 	info?: TInfo
 }
+
+
+// #todo we also need to change how the normal types are extended to this pattern
+export type ExtendedMoveTypes = Flatten<OrToAnd<keyof Register extends `LayoutMove${infer T}`
+	? Register extends Record<`LayoutMove${T}`, infer U>
+		? U extends {
+			type: string
+			context: any
+			resolve: any
+			moveType: "edge" | "frame" | "other"
+		}
+			? Record<U["type"], U>
+			: never
+		: never
+	: never>>
+
 export type MoveState = {
 	/** The current directions in the corresponding orientations that the user is dragging in. */
 	moveDirections: Record<Orientation, Direction | undefined>
@@ -448,8 +465,12 @@ export type MoveState = {
 	movePoint?: Point
 	/** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
 	moveDistance: number
-	/** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
-	isMoving: boolean | "frame" | "edge"
+	/**
+	 * Whether the user is currently moving and what type of move. Is truthy string during all move events. The actions decide what they need to set it to as "frame" and "edge" have custom behavior.
+	 *
+	 * Other is for actions that do things other than drag frames/edges which include built in behavior (e.g. frames get a frame dragging indicator at the cursor)
+	 */
+	isMoving: boolean | "frame" | "edge" | "other"
 	/** Whether to show the moved frames while dragging. */
 	showMoving: boolean
 	/** The frame being dragged during a frame drag. Only set when isMoving is "frame". */

package/src/runtime/types/vue.ts

@@ -25,7 +25,7 @@ export interface UseFramesContext {
 	cancel: () => void
 	moveDirections: Ref<Record<Orientation, Direction | undefined>>
 	movePoint: Ref<Point | undefined>
-	isMoving: Ref<false | "frame" | "edge">
+	isMoving: Ref<false | "frame" | "edge" | "other">
 	movingEdges: Ref<Edge[]>
 	movingIntersection: Ref<IntersectionEntry | undefined>
 	visualEdges: Ref<Edge[]>
@@ -41,3 +41,4 @@ export interface UseFramesContext {
 }
 
 export const moveContextInjectionKey = Symbol.for("@witchcraft/layout:moveContext") as InjectionKey<UseFramesContext>
+