@witchcraft/layout 0.5.5 → 0.5.6

package/README.md

@@ -79,6 +79,36 @@ declare module "@witchcraft/layout" {
 ```
 Note that `zFrameId` and `zWinId` are different as they also support constants (`zFrameIdConstants` and `zWindowIdConstants`).
 
+#### Extending Move Types
+
+You can also extend the move types. This is usually needed for creating custom actions.
+
+Unlike frame types, this uses a pattern where you can extend as many times as you want so long as the key is prefixed with `LayoutMove` and the type satisfies `{ type: string, context: any, resolve: any, moveType: "edge" | "frame" | "other" }`.
+
+
+```ts
+
+declare module "@witchcraft/layout" {
+	interface Register {
+		LayoutMovePicker: {
+			// used to discriminate the type
+			type: "picker",
+			// any other props to add to the context parameter of moveStart
+			// context ends up typed as { type: "picker", someState: string }
+			context: {
+				someState: string
+			}
+			// promise resolve value, for typing the return value of moveStart
+			resolve: string
+			// for typing the type parameter of moveStart so user picks supported types
+			moveType: "other",
+		}
+	}
+}
+```
+
+`moveStart`'s context parameter will now be type checked as `{someState: string, type: "picker"}` and the return value will be `Promise<string>`.
+
 ## Basics
 
 A layout is very simple, and looks like this:

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "configKey": "witchcraftLayout",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/LayoutWindow.d.vue.ts

@@ -44,7 +44,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             y: number;
         } | undefined;
         moveDistance: number;
-        isMoving: false | "edge" | "frame";
+        isMoving: false | "edge" | "frame" | "other";
         showMoving: boolean;
         movingFrameId: string | undefined;
         movingEdges: {
@@ -347,11 +347,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
     actionHandler: ActionHandler<any, any>;
     moveContext: {
-        moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? import("../types/index.js").EdgeMoveStartData : import("../types/index.js").FrameMoveStartData, { moveEvent, endEvent, context }?: {
+        moveStart: <T extends "edge" | "frame" | "other", TContextType extends keyof import("../types/index.js").ExtendedMoveTypes, TContext extends import("../types/index.js").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" ? import("../types/index.js").EdgeMoveStartData : T extends "frame" ? import("../types/index.js").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;
@@ -371,7 +379,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined>;
-        isMoving: import("vue").Ref<false | "edge" | "frame", false | "edge" | "frame">;
+        isMoving: import("vue").Ref<false | "edge" | "frame" | "other", false | "edge" | "frame" | "other">;
         movingEdges: import("vue").Ref<{
             startX: number;
             startY: number;
@@ -1096,7 +1104,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 y: number;
             } | undefined;
             moveDistance: number;
-            isMoving: false | "edge" | "frame";
+            isMoving: false | "edge" | "frame" | "other";
             showMoving: boolean;
             movingFrameId: string | undefined;
             movingEdges: {

package/dist/runtime/components/LayoutWindow.vue.d.ts

@@ -44,7 +44,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             y: number;
         } | undefined;
         moveDistance: number;
-        isMoving: false | "edge" | "frame";
+        isMoving: false | "edge" | "frame" | "other";
         showMoving: boolean;
         movingFrameId: string | undefined;
         movingEdges: {
@@ -347,11 +347,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
     actionHandler: ActionHandler<any, any>;
     moveContext: {
-        moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? import("../types/index.js").EdgeMoveStartData : import("../types/index.js").FrameMoveStartData, { moveEvent, endEvent, context }?: {
+        moveStart: <T extends "edge" | "frame" | "other", TContextType extends keyof import("../types/index.js").ExtendedMoveTypes, TContext extends import("../types/index.js").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" ? import("../types/index.js").EdgeMoveStartData : T extends "frame" ? import("../types/index.js").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;
@@ -371,7 +379,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined>;
-        isMoving: import("vue").Ref<false | "edge" | "frame", false | "edge" | "frame">;
+        isMoving: import("vue").Ref<false | "edge" | "frame" | "other", false | "edge" | "frame" | "other">;
         movingEdges: import("vue").Ref<{
             startX: number;
             startY: number;
@@ -1096,7 +1104,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 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.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.5",
+  "version": "0.5.6",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,

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>
+