@witchcraft/layout 0.5.0 → 0.5.1

package/dist/module.json

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

package/dist/runtime/composables/useFrames.js

@@ -102,6 +102,7 @@ export function useFrames(win, handler) {
     moveDirStore.reset();
     showMoving.value = false;
     forceRecalculateEdges();
+    handler.onMoveEnded();
   }
   function moveStart(e, type, data, {
     moveEvent = "pointermove",
@@ -169,10 +170,13 @@ export function useFrames(win, handler) {
       );
     }
     if (!didChange) return;
-    const res = handler.onMoveChange("move", e, state.value, forceRecalculateEdges, cancel, resolve);
+    onMoveChange(e, "move", point);
+  }
+  function onMoveChange(e, type, point) {
+    const res = handler.onMoveChange(type, e, state.value, forceRecalculateEdges, cancel, type === "end" ? void 0 : resolve);
     showMoving.value = res.showMoving ?? true;
     if (!res.updateEdges) return;
-    if (isMoving.value === "edge") {
+    if (isMoving.value === "edge" && point) {
       requestAnimationFrame(() => {
         for (let i = 0; i < movingEdges.value.length; i++) {
           const movingEdge = movingEdges.value[i];
@@ -189,6 +193,7 @@ export function useFrames(win, handler) {
       const point = toWindowCoord(win.value, e);
       movePoint.value = point;
     }
+    onMoveChange(e, "end", movePoint.value);
     if (apply) {
       const applyResult = handler.onMoveApply(state.value, forceRecalculateEdges);
       moveResult = applyResult.result;
@@ -198,7 +203,6 @@ export function useFrames(win, handler) {
         }
       }
     }
-    handler.onMoveChange("end", e, state.value, forceRecalculateEdges, void 0, void 0);
     controller?.abort();
   }
   function cancel() {

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

@@ -45,7 +45,8 @@ export declare class ActionHandler<TRawActions extends IAction[], TActions exten
      */
     defaultOnMoveChange?: MoveChangeHandler);
     eventHandler(e: KeyboardEvent | PointerEvent, state: MoveState, forceRecalculateEdges: () => void): undefined;
-    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void): MoveChangeResult;
+    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void): MoveChangeResult;
+    onMoveEnded(): void;
     setTextHints(type: "start" | "move" | "end"): void;
     annotateEdges(edges: Edge[], frames: LayoutFrame[]): void;
     onMoveApply(state: MoveState, forceRecalculateEdges: () => void): ActionHandlerApplyResult;

package/dist/runtime/move/ActionHandler.js

@@ -82,11 +82,14 @@ export class ActionHandler {
     this.setTextHints(type);
     const res = this.defaultOnMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel, resolve);
     this.shapes.splice(0, this.shapes.length, ...res.shapes);
-    if (type === "end") {
-      this.activeAction = void 0;
-    }
     return res;
   }
+  onMoveEnded() {
+    if (this.activeAction) {
+      this.actions[this.activeAction].onMoveEnded();
+    }
+    this.activeAction = void 0;
+  }
   setTextHints(type) {
     this.textHints.actions = [];
     this.textHints.errors = [];
@@ -122,7 +125,7 @@ export class ActionHandler {
     if (this.activeAction) {
       const res = this.actions[this.activeAction].onMoveApply(state, forceRecalculateEdges);
       this.hooks.onEnd?.({ cancelled: false, applied: res });
-      return { apply: res, result: void 0 };
+      return { apply: !res, result: void 0 };
     }
     this.hooks.onEnd?.({ cancelled: false, applied: false });
     return { apply: true, result: void 0 };

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

@@ -55,4 +55,5 @@ export declare class CloseAction implements IAction {
     onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
     onMoveApply(state: MoveState): boolean;
     cancel(): void;
+    onMoveEnded(): void;
 }

package/dist/runtime/move/CloseAction.js

@@ -99,10 +99,6 @@ export class CloseAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (type === "end") {
-      this.reset();
-      return { shapes: [] };
-    }
     if (state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [] };
     }
@@ -152,7 +148,10 @@ export class CloseAction {
       }
     }
     const decos = this._getDecos(state);
-    this.state.lastReturn = { updateEdges: !isMovingFromWindowEdge, shapes: decos.flatMap((_) => _.shapes) };
+    this.state.lastReturn = {
+      updateEdges: !isMovingFromWindowEdge,
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes)
+    };
     return this.state.lastReturn;
   }
   onMoveApply(state) {
@@ -170,7 +169,9 @@ export class CloseAction {
     return false;
   }
   cancel() {
-    this.reset();
     this.hooks.onCancel?.();
   }
+  onMoveEnded() {
+    this.reset();
+  }
 }

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

@@ -46,5 +46,6 @@ export declare class FrameDragAction implements IAction {
     canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
     onMoveChange<T extends "start" | "move" | "end">(type: T, _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
     onMoveApply(state: MoveState): boolean;
+    onMoveEnded(): void;
     cancel(): void;
 }

package/dist/runtime/move/FrameDragAction.js

@@ -94,10 +94,6 @@ export class FrameDragAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (type === "end") {
-      this.reset();
-      return { shapes: [] };
-    }
     if (state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
     }
@@ -119,7 +115,7 @@ export class FrameDragAction {
     this.setTextHints(this.state.lastReturn);
     const decos = this.getDecos(matchedZone, state, this.state.lastReturn);
     return {
-      shapes: decos.flatMap((_) => _.shapes),
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
       updateEdges: false,
       showMoving: false
     };
@@ -142,6 +138,9 @@ export class FrameDragAction {
     }
     return true;
   }
+  onMoveEnded() {
+    this.reset();
+  }
   cancel() {
     this.reset();
   }

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

@@ -52,5 +52,6 @@ export declare class SplitAction implements IAction {
     calculateSplitRequest(state: MoveState): boolean;
     onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
     onMoveApply(state: MoveState): boolean;
+    onMoveEnded(): void;
     cancel(): void;
 }

package/dist/runtime/move/SplitAction.js

@@ -119,10 +119,6 @@ export class SplitAction {
     }
   }
   onMoveChange(type, _e, state) {
-    if (type === "end") {
-      this.reset();
-      return { shapes: [] };
-    }
     const { moveHoveredFrame, moveDistance } = state;
     if (moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
@@ -147,11 +143,19 @@ export class SplitAction {
           },
           attrs: { class: "deco-split-error bg-red-500/50" }
         };
-        this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showMoving: false };
+        this.state.lastReturn = {
+          updateEdges: true,
+          shapes: type === "end" ? [] : [errorDeco],
+          showMoving: false
+        };
         return this.state.lastReturn;
       }
     }
-    this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap((_) => _.shapes), showMoving: false };
+    this.state.lastReturn = {
+      updateEdges: false,
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
+      showMoving: false
+    };
     return this.state.lastReturn;
   }
   onMoveApply(state) {
@@ -169,8 +173,10 @@ export class SplitAction {
     }
     return true;
   }
-  cancel() {
+  onMoveEnded() {
     this.reset();
+  }
+  cancel() {
     this.hooks.onCancel?.();
   }
 }

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

@@ -1917,9 +1917,9 @@ export type MoveChangeResult = Omit<ActionChangeResult, "shapes">;
  * See also {@link ActionHandler.onMoveChange} to understand it's lifecycle as it is the extended version of.
  */
 export type MoveChangeHandler = <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
-/** Calls moveEnd with apply: false */
-cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, 
-/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. */
+/** Calls moveEnd with apply: false. This can technically be called from "end", it should still work. */
+cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, 
+/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
 resolve: T extends "end" ? undefined : ({ apply, result }: {
     apply: boolean;
     result: any;
@@ -1977,6 +1977,10 @@ export interface IAction {
         /** Error texts/hints to display when the action produces an error. */
         errors?: string[];
     };
+    /**
+     * Called when an action is cancelled. Call action specific onCancel hooks here.
+     */
+    cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void;
     /**
      * Called after visual edges are recalculated, once per edge. Action handlers can annotate edges with error info here ({@link Edge.error}).
      *
@@ -2017,24 +2021,27 @@ export type ActionHandlerApplyResult = {
 export interface ActionHandler {
     eventHandler: (e: KeyboardEvent, state: MoveState, 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. Note that the return only affects the move event but it's typed like this for ease of use. See also {@link MoveChangeHandler}.
+     * 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. See also {@link MoveChangeHandler} for the built in action handler.
      *
      * Can be used to save some context/info to later apply safely during onMoveApply.
      *
      * The call order is:
      * - onMoveChange("start", ...)
      * - onMoveChange("move", ...)
+     * - onMoveChange("end", ...)
      * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
-     * - onMoveChange("end", ...) // always called last, do cleanup here
+     * - onMoveEnded() // do cleanup here
      */
     onMoveChange: (...args: Parameters<MoveChangeHandler>) => MoveChangeResult;
     /**
      * Called when drag will be applied. If moveEnd 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).
      *
-     * Do not use for resetting handler state, use onMoveChange("end", ...) for that.
+     * Do not use for resetting handler state, use onMoveEnded for that.
      */
     onMoveApply: (state: MoveState, forceRecalculateEdges: () => void) => ActionHandlerApplyResult;
+    /** For doing cleanup */
+    onMoveEnded: () => void;
     /**
      * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
      */

package/package.json

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

package/src/runtime/composables/useFrames.ts

@@ -134,6 +134,7 @@ export function useFrames(
 		moveDirStore.reset()
 		showMoving.value = false
 		forceRecalculateEdges()
+		handler.onMoveEnded()
 	}
 
 	function moveStart<T extends "edge" | "frame">(
@@ -231,13 +232,17 @@ export function useFrames(
 			)
 		}
 		if (!didChange) return
-		const res = handler.onMoveChange("move", e, state.value, forceRecalculateEdges, cancel, resolve)
+		onMoveChange(e, "move", point)
+	}
+
+	function onMoveChange(e: PointerEvent | undefined, type: "move" | "end", point: Point | undefined) {
+		const res = handler.onMoveChange(type, e, state.value, forceRecalculateEdges, cancel, type === "end" ? undefined : resolve)
 
 
 		showMoving.value = res.showMoving ?? true
 		if (!res.updateEdges) return
 
-		if (isMoving.value === "edge") {
+		if (isMoving.value === "edge" && point) {
 			requestAnimationFrame(() => {
 				for (let i = 0; i < movingEdges.value.length; i++) {
 					const movingEdge = movingEdges.value[i]
@@ -256,6 +261,8 @@ export function useFrames(
 			movePoint.value = point
 		}
 
+		onMoveChange(e, "end", movePoint.value)
+
 		if (apply) {
 			const applyResult = handler.onMoveApply(state.value, forceRecalculateEdges)
 			moveResult = applyResult.result
@@ -266,10 +273,8 @@ export function useFrames(
 			}
 		}
 
-		handler.onMoveChange("end", e, state.value, forceRecalculateEdges, undefined, undefined)
-
 		// this can get called from elsewhere
-		// also takes care of cleanup nd resolving promise
+		// also takes care of cleanup, resolving promise, and calling onMoveEnded
 		controller?.abort()
 	}
 

package/src/runtime/move/ActionHandler.ts

@@ -128,7 +128,7 @@ export class ActionHandler<
 		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
-		cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
+		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
 		resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void
 	): MoveChangeResult {
 		if (type === "start") {
@@ -137,7 +137,7 @@ export class ActionHandler<
 		}
 
 		if (this.activeAction) {
-			const res = this.actions[this.activeAction]!.onMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve as any)
+			const res = this.actions[this.activeAction]!.onMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve)
 			// in case it's a vue reactive array
 			this.shapes.splice(0, this.shapes.length, ...res.shapes)
 			this.setTextHints(type)
@@ -147,12 +147,17 @@ export class ActionHandler<
 		const res = this.defaultOnMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve as any)
 		this.shapes.splice(0, this.shapes.length, ...res.shapes)
 
-		if (type === "end") {
-			this.activeAction = undefined
-		}
 		return res
 	}
 
+	onMoveEnded() {
+		if (this.activeAction) {
+			this.actions[this.activeAction]!.onMoveEnded()
+		}
+
+		this.activeAction = undefined
+	}
+
 	setTextHints(type: "start" | "move" | "end") {
 		// again in case it's a vue reactive object
 		this.textHints.actions = []
@@ -197,7 +202,7 @@ export class ActionHandler<
 		if (this.activeAction) {
 			const res = this.actions[this.activeAction]!.onMoveApply(state, forceRecalculateEdges)
 			this.hooks.onEnd?.({ cancelled: false, applied: res })
-			return { apply: res, result: undefined }
+			return { apply: !res, result: undefined }
 		}
 		this.hooks.onEnd?.({ cancelled: false, applied: false })
 		return { apply: true, result: undefined }

package/src/runtime/move/CloseAction.ts

@@ -155,10 +155,6 @@ export class CloseAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (type === "end") {
-			this.reset()
-			return { shapes: [] }
-		}
 		if (state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [] }
 		}
@@ -209,7 +205,10 @@ export class CloseAction implements IAction {
 			}
 		}
 		const decos = this._getDecos(state)
-		this.state.lastReturn = { updateEdges: !isMovingFromWindowEdge, shapes: decos.flatMap(_ => _.shapes) }
+		this.state.lastReturn = {
+			updateEdges: !isMovingFromWindowEdge,
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes)
+		}
 		return this.state.lastReturn
 	}
 
@@ -225,7 +224,10 @@ export class CloseAction implements IAction {
 	}
 
 	cancel(): void {
-		this.reset()
 		this.hooks.onCancel?.()
 	}
+
+	onMoveEnded() {
+		this.reset()
+	}
 }

package/src/runtime/move/FrameDragAction.ts

@@ -155,10 +155,6 @@ export class FrameDragAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (type === "end") {
-			this.reset()
-			return { shapes: [] }
-		}
 		if (state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
 		}
@@ -185,7 +181,7 @@ export class FrameDragAction implements IAction {
 		const decos = this.getDecos(matchedZone, state, this.state.lastReturn)
 
 		return {
-			shapes: decos.flatMap(_ => _.shapes),
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
 			updateEdges: false,
 			showMoving: false
 		}
@@ -208,6 +204,10 @@ export class FrameDragAction implements IAction {
 		return true
 	}
 
+	onMoveEnded() {
+		this.reset()
+	}
+
 	cancel(): void {
 		this.reset()
 	}

package/src/runtime/move/SplitAction.ts

@@ -178,10 +178,6 @@ export class SplitAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (type === "end") {
-			this.reset()
-			return { shapes: [] }
-		}
 		const { moveHoveredFrame, moveDistance } = state
 		if (moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
@@ -207,11 +203,19 @@ export class SplitAction implements IAction {
 					},
 					attrs: { class: "deco-split-error bg-red-500/50" }
 				}
-				this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showMoving: false }
+				this.state.lastReturn = {
+					updateEdges: true,
+					shapes: type === "end" ? [] : [errorDeco],
+					showMoving: false
+				}
 				return this.state.lastReturn
 			}
 		}
-		this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap(_ => _.shapes), showMoving: false }
+		this.state.lastReturn = {
+			updateEdges: false,
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
+			showMoving: false
+		}
 		return this.state.lastReturn
 	}
 
@@ -229,8 +233,11 @@ export class SplitAction implements IAction {
 		return true
 	}
 
-	cancel(): void {
+	onMoveEnded() {
 		this.reset()
+	}
+
+	cancel(): void {
 		this.hooks.onCancel?.()
 	}
 }

package/src/runtime/types/index.ts

@@ -522,9 +522,9 @@ export type MoveChangeHandler = <T extends "start" | "move" | "end">(
 	e: T extends "end" ? PointerEvent | undefined : PointerEvent,
 	state: MoveState,
 	forceRecalculateEdges: () => void,
-	/** Calls moveEnd with apply: false */
-	cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
-	/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. */
+	/** Calls moveEnd with apply: false. This can technically be called from "end", it should still work. */
+	cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
+	/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
 	resolve: T extends "end" ? undefined : ({ apply, result }: { apply: boolean, result: any }) => void
 ) => ActionChangeResult
 
@@ -587,6 +587,11 @@ export interface IAction {
 		/** Error texts/hints to display when the action produces an error. */
 		errors?: string[]
 	}
+	/**
+	 * Called when an action is cancelled. Call action specific onCancel hooks here.
+	 */
+	// note: internally this is done by the actionhandler wrapping the given cancel function for an event
+	cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void
 	/**
 	 * Called after visual edges are recalculated, once per edge. Action handlers can annotate edges with error info here ({@link Edge.error}).
 	 *
@@ -624,27 +629,32 @@ export type ActionHandlerApplyResult = {
 export interface ActionHandler {
 	eventHandler: (e: KeyboardEvent, state: MoveState, 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. Note that the return only affects the move event but it's typed like this for ease of use. See also {@link MoveChangeHandler}.
+	 * 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. See also {@link MoveChangeHandler} for the built in action handler.
 	 *
 	 * Can be used to save some context/info to later apply safely during onMoveApply.
 	 *
 	 * The call order is:
 	 * - onMoveChange("start", ...)
 	 * - onMoveChange("move", ...)
+	 * - onMoveChange("end", ...)
 	 * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
-	 * - onMoveChange("end", ...) // always called last, do cleanup here
+	 * - onMoveEnded() // do cleanup here
 	 */
 	onMoveChange: (...args: Parameters<MoveChangeHandler>) => MoveChangeResult
 	/**
 	 * Called when drag will be applied. If moveEnd 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).
 	 *
-	 * Do not use for resetting handler state, use onMoveChange("end", ...) for that.
+	 * Do not use for resetting handler state, use onMoveEnded for that.
 	 */
 	onMoveApply: (
 		state: MoveState,
 		forceRecalculateEdges: () => void
 	) => ActionHandlerApplyResult
+
+	/** For doing cleanup */
+	onMoveEnded: () => void
+
 	/**
 	 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
 	 */