@witchcraft/layout 0.5.6 → 0.5.8

package/dist/module.json

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

package/dist/module.mjs

@@ -17,6 +17,7 @@ const module$1 = defineNuxtModule({
     addTemplate({
       filename: "witchcraft-layout.css",
       write: true,
+      // keep in sync with demo tailwind.css's relevant section
       getContents: () => [
         `@source "${resolve("runtime/components")}";`,
         // the drag actions handlers and utils they use add some styles

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

@@ -353,7 +353,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             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 }?: {
+        } ? C : never>(e: PointerEvent | undefined, 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?: {

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

@@ -353,7 +353,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             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 }?: {
+        } ? C : never>(e: PointerEvent | undefined, 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?: {

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

@@ -7,7 +7,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandle
         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 }?: {
+    } ? C : never>(e: PointerEvent | undefined, type: TContextMoveType extends never ? T : TContextMoveType, data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined, { moveEvent, endEvent, context }?: {
         moveEvent?: string;
         endEvent?: string;
         context?: {

package/dist/runtime/composables/useFrames.js

@@ -37,7 +37,7 @@ export function useFrames(win, handler) {
     () => isMoving.value && showMoving.value ? { ...win.value.frames, ...allTouchingFrames.value } : win.value.frames
   );
   const moveHoveredFrame = computed(() => {
-    if (isMoving.value) {
+    if (isMoving.value && movePoint.value) {
       for (const id of keys(frames.value)) {
         if (isPointInRect(frames.value[id], movePoint.value)) {
           return frames.value[id];
@@ -117,13 +117,15 @@ export function useFrames(win, handler) {
     });
     controller = new AbortController();
     controller.signal.addEventListener("abort", () => resetState());
-    e.preventDefault();
+    e?.preventDefault();
     window.addEventListener(moveEvent, onMove, { signal: controller.signal });
     window.addEventListener(endEvent, moveEnd, { signal: controller.signal });
-    const point = toWindowCoord(win.value, e);
-    movePoint.value = point;
-    moveStartPoint = { ...point };
-    moveDirStore.update(point);
+    if (e) {
+      const point = toWindowCoord(win.value, e);
+      movePoint.value = point;
+      moveStartPoint = { ...point };
+      moveDirStore.update(point);
+    }
     eventContext.value = context;
     isMoving.value = type;
     showMoving.value = true;

package/dist/runtime/demo/tailwind.css

@@ -1 +1 @@
-@import "tailwindcss";@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";@source "../../../src/runtime/demo";button{cursor:pointer}
+@import "tailwindcss";@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";@source "../../../src/runtime/demo";@source "../../../src/runtime/move";@source "../../../src/runtime/components";@source "../../../src/runtime/utils/createSplitDecoShapes";button{cursor:pointer}

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

@@ -44,7 +44,7 @@ export declare class ActionHandler<TRawActions extends IAction[], TActions exten
      */
     defaultOnMoveChange?: IAction["onMoveChange"]);
     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: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)): MoveChangeResult;
+    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;
     cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void;

package/dist/runtime/move/CloseAction.js

@@ -99,7 +99,7 @@ export class CloseAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (state.moveDistance <= this.minDragDistance) {
+    if (type === "end" || state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [] };
     }
     const {
@@ -150,7 +150,7 @@ export class CloseAction {
     const decos = this._getDecos(state);
     this.state.lastReturn = {
       updateEdges: !isMovingFromWindowEdge,
-      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes)
+      shapes: decos.flatMap((_) => _.shapes)
     };
     return this.state.lastReturn;
   }

package/dist/runtime/move/FrameDragAction.js

@@ -94,7 +94,7 @@ export class FrameDragAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (state.moveDistance <= this.minDragDistance) {
+    if (type === "start" || state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
     }
     const { win, movingFrameId, moveHoveredFrame } = state;

package/dist/runtime/move/SplitAction.js

@@ -120,7 +120,7 @@ export class SplitAction {
   }
   onMoveChange(type, _e, state) {
     const { moveHoveredFrame, moveDistance } = state;
-    if (moveDistance <= this.minDragDistance) {
+    if (type === "end" || moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
     }
     let ok = false;
@@ -145,7 +145,7 @@ export class SplitAction {
         };
         this.state.lastReturn = {
           updateEdges: true,
-          shapes: type === "end" ? [] : [errorDeco],
+          shapes: [errorDeco],
           showMoving: false
         };
         return this.state.lastReturn;
@@ -153,7 +153,7 @@ export class SplitAction {
     }
     this.state.lastReturn = {
       updateEdges: false,
-      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
+      shapes: decos.flatMap((_) => _.shapes),
       showMoving: false
     };
     return this.state.lastReturn;

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

@@ -1937,7 +1937,7 @@ export interface IAction {
      *
      * See also {@link ActionHandler.onMoveChange} to understand it's lifecycle as it is the extended version of.
      */
-    onMoveChange: <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
+    onMoveChange: <T extends "start" | "move" | "end">(type: T, e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
     /** Calls moveEnd with updateEdges: 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, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
@@ -2039,7 +2039,7 @@ export interface IActionHandler {
      * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
      * - onMoveEnded() // do cleanup here, always called at the very end
      */
-    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
+    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
     /** 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, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */

package/package.json

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

package/src/module.ts

@@ -35,6 +35,7 @@ export default defineNuxtModule<ModuleOptions>({
 		addTemplate({
 			filename: "witchcraft-layout.css",
 			write: true,
+			// keep in sync with demo tailwind.css's relevant section
 			getContents: () => [
 				`@source "${resolve("runtime/components")}";`,
 				// the drag actions handlers and utils they use add some styles

package/src/runtime/composables/useFrames.ts

@@ -72,9 +72,9 @@ export function useFrames(
 	)
 
 	const moveHoveredFrame = computed(() => {
-		if (isMoving.value) {
+		if (isMoving.value && movePoint.value) {
 			for (const id of keys(frames.value)) {
-				if (isPointInRect(frames.value[id], movePoint.value!)) {
+				if (isPointInRect(frames.value[id], movePoint.value)) {
 					return frames.value[id]
 				}
 			}
@@ -161,7 +161,7 @@ export function useFrames(
 		TContextMoveType extends TContext extends { moveType: infer M } ? M : never,
 		TContextContext extends TContext extends { context: infer C } ? C : never
 	>(
-		e: PointerEvent,
+		e: PointerEvent | undefined,
 		type: TContextMoveType extends never ? T : TContextMoveType,
 		// someday this will work
 		data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined,
@@ -189,14 +189,16 @@ export function useFrames(
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
-		e.preventDefault()
+		e?.preventDefault()
 		window.addEventListener(moveEvent, onMove as EventListener, { signal: controller.signal })
 		window.addEventListener(endEvent, moveEnd as EventListener, { signal: controller.signal })
 
-		const point = toWindowCoord(win.value, e)
-		movePoint.value = point
-		moveStartPoint = { ...point }
-		moveDirStore.update(point)
+		if (e) {
+			const point = toWindowCoord(win.value, e)
+			movePoint.value = point
+			moveStartPoint = { ...point }
+			moveDirStore.update(point)
+		}
 		eventContext.value = context
 
 		isMoving.value = type as any

package/src/runtime/demo/tailwind.css

@@ -5,6 +5,10 @@
 
 /* Only needed for the dev playground: the demo App.vue lives outside the Vite project root, so Tailwind's auto-scan doesn't find the [&.deco-...] classes it defines. */
 @source "../../../src/runtime/demo";
+/* Only needed for the non-nuxt demo, makes sure classes are added even if .nuxt/witchcraft-layout.css is not generated or is outdated. Keep in sync with nuxt module list. */
+@source "../../../src/runtime/move";
+@source "../../../src/runtime/components";
+@source "../../../src/runtime/utils/createSplitDecoShapes";
 
 button {
 	cursor: pointer;

package/src/runtime/move/ActionHandler.ts

@@ -123,7 +123,7 @@ export class ActionHandler<
 
 	onMoveChange<T extends "start" | "move" | "end">(
 		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,

package/src/runtime/move/CloseAction.ts

@@ -155,7 +155,7 @@ export class CloseAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (state.moveDistance <= this.minDragDistance) {
+		if (type === "end" || state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [] }
 		}
 		const {
@@ -207,7 +207,7 @@ export class CloseAction implements IAction {
 		const decos = this._getDecos(state)
 		this.state.lastReturn = {
 			updateEdges: !isMovingFromWindowEdge,
-			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes)
+			shapes: decos.flatMap(_ => _.shapes)
 		}
 		return this.state.lastReturn
 	}

package/src/runtime/move/FrameDragAction.ts

@@ -155,7 +155,7 @@ export class FrameDragAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (state.moveDistance <= this.minDragDistance) {
+		if (type === "start" || state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
 		}
 		const { win, movingFrameId, moveHoveredFrame } = state

package/src/runtime/move/SplitAction.ts

@@ -179,7 +179,7 @@ export class SplitAction implements IAction {
 		state: MoveState
 	): ActionChangeResult {
 		const { moveHoveredFrame, moveDistance } = state
-		if (moveDistance <= this.minDragDistance) {
+		if (type === "end" || moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
 		}
 		let ok = false
@@ -205,7 +205,7 @@ export class SplitAction implements IAction {
 				}
 				this.state.lastReturn = {
 					updateEdges: true,
-					shapes: type === "end" ? [] : [errorDeco],
+					shapes: [errorDeco],
 					showMoving: false
 				}
 				return this.state.lastReturn
@@ -213,7 +213,7 @@ export class SplitAction implements IAction {
 		}
 		this.state.lastReturn = {
 			updateEdges: false,
-			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
+			shapes: decos.flatMap(_ => _.shapes),
 			showMoving: false
 		}
 		return this.state.lastReturn

package/src/runtime/types/index.ts

@@ -552,7 +552,7 @@ export interface IAction {
 	 */
 	onMoveChange: <T extends "start" | "move" | "end">(
 		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		/** Calls moveEnd with updateEdges: false. This can technically be called from "end", it should still work. */
@@ -665,7 +665,7 @@ export interface IActionHandler {
 	 */
 	onMoveChange<T extends "start" | "move" | "end">(
 		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		/** Calls moveEnd with apply: false. This can technically be called from "end", it should still work. */