@witchcraft/layout 0.4.2 → 0.4.3

package/dist/module.json

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

package/dist/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -7,7 +7,7 @@
 		z-20
 		bg-accent-500
 		cursor-pointer
-		[&.request-split]:hidden
+		[.request-split_&]:hidden
 	`,
   $attrs.class
 )"

package/dist/runtime/components/LayoutDragEdgeHandle.vue

@@ -7,8 +7,7 @@
 			drag-edge
 			z-20
 			hover:cursor-pointer
-			
-			[&.request-split]:hidden
+			[.request-split_&]:hidden
 		`,
   edge.error && `
 			drag-edge-errored

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

@@ -3,6 +3,8 @@ import { type DragState, type IDragAction } from "../types/index.js";
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
+    /** If you really need it, you can provide your own drag action handler, note the actionHandler's prop will no longer have any effect.*/
+    dragActionHandler?: DragActionHandler<any, any>;
     /** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
     actionHandlers?: IDragAction[];
     textHints?: {
@@ -41,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined;
+        dragDistance: number;
         isDragging: false | "edge" | "frame";
         showDragging: boolean;
         draggingFrameId: string | undefined;

package/dist/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-  isDragging && `dragging cursor-pointer`,
+  isDragging && `dragging cursor-pointer user-select-none`,
   requestType && `request-${requestType}`,
   $attrs.class
 )"
@@ -82,6 +82,7 @@ import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 const $attrs = useAttrs();
 const win = defineModel("win", { type: Object, ...{ required: true } });
 const props = defineProps({
+  dragActionHandler: { type: Object, required: false },
   actionHandlers: { type: Array, required: false, default: void 0 },
   textHints: { type: Array, required: false, default: () => [] },
   textHintsTeleportTo: { type: null, required: true, default: void 0 },
@@ -91,7 +92,7 @@ const props = defineProps({
 const emit = defineEmits(["isShowingDrag", "dragState"]);
 const windowEl = ref(null);
 const requestType = ref();
-const dragActionHandler = new DragActionHandler(
+const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
   [
     ...props.actionHandlers ?? createDefaultHandlers()
   ],

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

@@ -3,6 +3,8 @@ import { type DragState, type IDragAction } from "../types/index.js";
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
+    /** If you really need it, you can provide your own drag action handler, note the actionHandler's prop will no longer have any effect.*/
+    dragActionHandler?: DragActionHandler<any, any>;
     /** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
     actionHandlers?: IDragAction[];
     textHints?: {
@@ -41,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined;
+        dragDistance: number;
         isDragging: false | "edge" | "frame";
         showDragging: boolean;
         draggingFrameId: string | undefined;

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

@@ -744,6 +744,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             x: number;
             y: number;
         } | undefined;
+        dragDistance: number;
         isDragging: false | "edge" | "frame";
         showDragging: boolean;
         draggingFrameId: string | undefined;

package/dist/runtime/composables/useFrames.js

@@ -27,6 +27,8 @@ export function useFrames(win, handler) {
   const showDragging = ref(false);
   const dragPoint = ref();
   const dragDirections = ref({});
+  let dragStartPoint;
+  const dragDistance = ref(-1);
   const draggingIntersection = ref(void 0);
   const isDraggingFromWindowEdge = ref(false);
   const frameDragFrameId = ref();
@@ -64,6 +66,7 @@ export function useFrames(win, handler) {
   const state = computed(() => ({
     dragDirections: dragDirections.value,
     dragPoint: dragPoint.value,
+    dragDistance: dragDistance.value,
     isDragging: isDragging.value,
     showDragging: showDragging.value,
     draggingFrameId: frameDragFrameId.value,
@@ -80,10 +83,12 @@ export function useFrames(win, handler) {
   }));
   let controller;
   function resetState() {
+    dragStartPoint = void 0;
     draggingEdges.value = [];
     draggingIntersection.value = void 0;
     isDragging.value = false;
     dragPoint.value = void 0;
+    dragDistance.value = -1;
     touchingFrames.value = [];
     frameDragFrameId.value = void 0;
     dragDirStore.reset();
@@ -98,6 +103,7 @@ export function useFrames(win, handler) {
     window.addEventListener("pointerup", dragEnd, { signal: controller.signal });
     const point = toWindowCoord(win.value, e);
     dragPoint.value = point;
+    dragStartPoint = { ...point };
     dragDirStore.update(point);
     isDragging.value = type;
     showDragging.value = true;
@@ -136,6 +142,12 @@ export function useFrames(win, handler) {
     const point = toWindowCoord(win.value, e);
     const didChange = dragDirStore.update(point);
     dragPoint.value = point;
+    dragDistance.value = 0;
+    if (dragStartPoint) {
+      dragDistance.value = Math.sqrt(
+        Math.pow(point.x - dragStartPoint.x, 2) + Math.pow(point.y - dragStartPoint.y, 2)
+      );
+    }
     if (!didChange) return;
     const res = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel);
     showDragging.value = res.showDragging ?? true;

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

@@ -4,6 +4,7 @@ import type { KnownError } from "../utils/KnownError.js";
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>;
 export declare class CloseAction implements IDragAction {
     name: "close";
+    minDragDistance: number;
     state: {
         allowed: true;
         force: boolean;
@@ -40,6 +41,8 @@ export declare class CloseAction implements IDragAction {
     modifyDecos?: CloseAction["modifyDecos"], hooks?: CloseAction["hooks"], config?: {
         debug?: boolean | string;
         closeHints?: Partial<CloseAction["closeHints"]>;
+        /** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+        minDragDistance?: number;
     });
     reset(): void;
     private _getDecos;

package/dist/runtime/drag/CloseAction.js

@@ -7,6 +7,7 @@ import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
 export class CloseAction {
   name = "close";
+  minDragDistance = 5;
   state = {};
   // this is initialized by this.reset()
   debug = false;
@@ -30,6 +31,7 @@ export class CloseAction {
     if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
     this.hooks = hooks;
     if (config?.debug) this.debug = true;
+    if (config?.minDragDistance !== void 0) this.minDragDistance = config.minDragDistance;
     this.reset();
   }
   reset() {
@@ -97,6 +99,9 @@ export class CloseAction {
     return false;
   }
   onDragChange(_type, _e, state) {
+    if (state.dragDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [] };
+    }
     const {
       touchingFramesArrays,
       dragDirections,

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

@@ -2,6 +2,7 @@ import type { ActionDragChangeResult, DragState, DragZone, FrameDragDeco, IDragA
 import type { KnownError } from "../utils/KnownError.js";
 export declare class FrameDragAction implements IDragAction {
     name: "frameDrag";
+    minDragDistance: number;
     state: {
         lastReturn?: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError;
     };
@@ -32,6 +33,8 @@ export declare class FrameDragAction implements IDragAction {
     /** Modify the created decos before they are rendered. */
     modifyDecos?: FrameDragAction["modifyDecos"], hooks?: FrameDragAction["hooks"], config?: {
         debug?: boolean | string;
+        /** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+        minDragDistance?: number;
     });
     reset(): void;
     setTextHints(result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): void;

package/dist/runtime/drag/FrameDragAction.js

@@ -8,6 +8,7 @@ import { getFrameSwapInfo } from "../layout/getFrameSwapInfo.js";
 import { settings } from "../settings.js";
 export class FrameDragAction {
   name = "frameDrag";
+  minDragDistance = 5;
   state = {
     lastReturn: void 0
   };
@@ -31,6 +32,7 @@ export class FrameDragAction {
     if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
     this.hooks = hooks;
     if (config?.debug) this.debug = true;
+    if (config?.minDragDistance !== void 0) this.minDragDistance = config.minDragDistance;
     this.reset();
   }
   reset() {
@@ -92,6 +94,9 @@ export class FrameDragAction {
     return false;
   }
   onDragChange(_type, _e, state) {
+    if (state.dragDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [], showDragging: false };
+    }
     const { win, draggingFrameId, dragHoveredFrame } = state;
     const matchedZone = getDragZones(state, settings.zoneSizes);
     if (!matchedZone) {

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

@@ -5,6 +5,7 @@ export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError
 export type DragChangeType = "start" | "move" | "end";
 export declare class SplitAction implements IDragAction {
     name: "split";
+    minDragDistance: number;
     state: {
         allowed: true;
         res: SplitInfo;
@@ -37,6 +38,8 @@ export declare class SplitAction implements IDragAction {
     modifyDecos?: SplitAction["modifyDecos"], hooks?: SplitAction["hooks"], config?: {
         debug?: boolean | string;
         splitHints?: Partial<SplitAction["splitHints"]>;
+        /** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+        minDragDistance?: number;
     });
     reset(): void;
     getDecos(state: DragState): SplitDeco[];

package/dist/runtime/drag/SplitAction.js

@@ -6,6 +6,7 @@ import { createSplitDecoFromDrag } from "../layout/createSplitDecoFromDrag.js";
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
 export class SplitAction {
   name = "split";
+  minDragDistance = 5;
   state = {};
   // this is initialized by `this.reset()`
   debug = false;
@@ -24,6 +25,7 @@ export class SplitAction {
     this.hooks = hooks;
     this.reset();
     if (config?.debug) this.debug = true;
+    if (config?.minDragDistance !== void 0) this.minDragDistance = config.minDragDistance;
     if (config?.splitHints?.actions) this.splitHints.actions = config.splitHints.actions;
     if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError;
   }
@@ -62,7 +64,7 @@ export class SplitAction {
   canHandleRequest(e, state) {
     const { draggingEdges } = state;
     if (draggingEdges.length !== 1) return false;
-    this.setTextHints(state.isDragging === "edge" ? true : void 0);
+    this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? true : void 0);
     if (this.handleEvent(e, state)) {
       this.hooks.onStart?.();
       return true;
@@ -103,7 +105,7 @@ export class SplitAction {
       dragDirections[oppositeOrientation],
       dragPoint
     );
-    this.setTextHints(canSplit);
+    this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? canSplit : void 0);
     if (!(canSplit instanceof Error)) {
       this.state.allowed = true;
       this.state.res = canSplit;
@@ -117,7 +119,10 @@ export class SplitAction {
     }
   }
   onDragChange(_type, _e, state) {
-    const { dragHoveredFrame } = state;
+    const { dragHoveredFrame, dragDistance } = state;
+    if (dragDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [], showDragging: false };
+    }
     let ok = false;
     if (dragHoveredFrame) {
       if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {

package/dist/runtime/settings.js

@@ -8,7 +8,7 @@ export class Settings {
   resetToDefaults() {
     this.scale = 3;
     this.snapPoint = 0.5;
-    this.minSize = 5;
+    this.minSize = 3;
     this.collapseSizePx = 15;
     this.maxPerpendicularLength = 20;
     this.zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 };

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

@@ -1808,6 +1808,8 @@ export type DragState = {
     dragDirections: Record<Orientation, Direction | undefined>;
     /** The curren point (in scaled window coordinates) the user is dragging at. */
     dragPoint?: Point;
+    /** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
+    dragDistance: number;
     /** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
     isDragging: boolean | "frame" | "edge";
     /** Whether to show the moved frames while dragging. */

package/package.json

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

package/src/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -6,7 +6,7 @@
 		z-20
 		bg-accent-500
 		cursor-pointer
-		[&.request-split]:hidden
+		[.request-split_&]:hidden
 	`,
 		($attrs as any).class
 	)"

package/src/runtime/components/LayoutDragEdgeHandle.vue

@@ -7,8 +7,7 @@
 			drag-edge
 			z-20
 			hover:cursor-pointer
-			
-			[&.request-split]:hidden
+			[.request-split_&]:hidden
 		`,
 		edge.error && `
 			drag-edge-errored

package/src/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-		isDragging && `dragging cursor-pointer`,
+		isDragging && `dragging cursor-pointer user-select-none`,
 		requestType && `request-${requestType}`,
 		($attrs as any).class
 	)"
@@ -90,6 +90,8 @@ const $attrs = useAttrs()
 const win = defineModel<LayoutWindow>("win", { required: true })
 
 const props = withDefaults(defineProps<{
+	/** If you really need it, you can provide your own drag action handler, note the actionHandler's prop will no longer have any effect.*/
+	dragActionHandler?: DragActionHandler<any, any>
 	/** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
 	actionHandlers?: IDragAction[]
 	textHints?: {text:string, classes?:string}[] 
@@ -120,9 +122,9 @@ const windowEl = ref<HTMLElement | null>(null)
 
 const requestType = ref<string | undefined | string>()
 
-const dragActionHandler = new DragActionHandler(
+const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
 	[
-		...(props.actionHandlers ?? createDefaultHandlers()),
+		...(props.actionHandlers ?? createDefaultHandlers())
 	],
 	{
 		onEvent: (e, cancel) => {
@@ -132,7 +134,7 @@ const dragActionHandler = new DragActionHandler(
 			}
 		},
 		onRequestChange: type => {
-			requestType.value = type
+			requestType.value = type as any
 		},
 		onEnd: () => {
 			requestType.value = undefined

package/src/runtime/composables/useFrames.ts

@@ -59,6 +59,9 @@ export function useFrames(
 
 	const dragDirections = ref<Record<Orientation, Direction | undefined>>({} as any)
 
+	let dragStartPoint: Point | undefined
+	const dragDistance = ref(-1)
+
 	const draggingIntersection = ref<IntersectionEntry | undefined>(undefined)
 	const isDraggingFromWindowEdge = ref<boolean>(false)
 
@@ -110,6 +113,7 @@ export function useFrames(
 	const state = computed(() => ({
 		dragDirections: dragDirections.value,
 		dragPoint: dragPoint.value,
+		dragDistance: dragDistance.value,
 		isDragging: isDragging.value,
 		showDragging: showDragging.value,
 		draggingFrameId: frameDragFrameId.value,
@@ -128,10 +132,13 @@ export function useFrames(
 	let controller: AbortController
 
 	function resetState(): void {
+		dragStartPoint = undefined
+
 		draggingEdges.value = []
 		draggingIntersection.value = undefined
 		isDragging.value = false
 		dragPoint.value = undefined
+		dragDistance.value = -1
 		touchingFrames.value = []
 		frameDragFrameId.value = undefined
 		dragDirStore.reset()
@@ -154,6 +161,7 @@ export function useFrames(
 
 		const point = toWindowCoord(win.value, e)
 		dragPoint.value = point
+		dragStartPoint = { ...point }
 		dragDirStore.update(point)
 
 		isDragging.value = type
@@ -205,6 +213,13 @@ export function useFrames(
 		const point = toWindowCoord(win.value, e)
 		const didChange = dragDirStore.update(point)
 		dragPoint.value = point
+		// at least one drag move has happened
+		dragDistance.value = 0
+		if (dragStartPoint) {
+			dragDistance.value = Math.sqrt(
+				Math.pow(point.x - dragStartPoint.x, 2) + Math.pow(point.y - dragStartPoint.y, 2)
+			)
+		}
 		if (!didChange) return
 		const res = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel)
 

package/src/runtime/drag/CloseAction.ts

@@ -13,6 +13,7 @@ export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError
 
 export class CloseAction implements IDragAction {
 	name = "close" as const
+	minDragDistance = 5
 
 	state: {
 		allowed: true
@@ -62,12 +63,15 @@ export class CloseAction implements IDragAction {
 		config?: {
 			debug?: boolean | string
 			closeHints?: Partial<CloseAction["closeHints"]>
+			/** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+			minDragDistance?: number
 		}
 	) {
 		if (handleEvent !== undefined) this.handleEvent = handleEvent
 		if (modifyDecos !== undefined) this.modifyDecos = modifyDecos
 		this.hooks = hooks
 		if (config?.debug) this.debug = true
+		if (config?.minDragDistance !== undefined) this.minDragDistance = config.minDragDistance
 		this.reset()
 	}
 
@@ -151,6 +155,9 @@ export class CloseAction implements IDragAction {
 		_e: PointerEvent | undefined,
 		state: DragState
 	): ActionDragChangeResult {
+		if (state.dragDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [] }
+		}
 		const {
 			touchingFramesArrays,
 			dragDirections,

package/src/runtime/drag/FrameDragAction.ts

@@ -13,6 +13,9 @@ import type { KnownError } from "../utils/KnownError.js"
 
 export class FrameDragAction implements IDragAction {
 	name = "frameDrag" as const
+
+	minDragDistance = 5
+
 	state: {
 		lastReturn?: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError
 	} = {
@@ -52,12 +55,15 @@ export class FrameDragAction implements IDragAction {
 		hooks: FrameDragAction["hooks"] = {},
 		config?: {
 			debug?: boolean | string
+			/** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+			minDragDistance?: number
 		}
 	) {
 		if (handleEvent !== undefined) this.handleEvent = handleEvent
 		if (modifyDecos !== undefined) this.modifyDecos = modifyDecos
 		this.hooks = hooks
 		if (config?.debug) this.debug = true
+		if (config?.minDragDistance !== undefined) this.minDragDistance = config.minDragDistance
 
 		this.reset()
 	}
@@ -149,6 +155,9 @@ export class FrameDragAction implements IDragAction {
 		_e: PointerEvent | undefined,
 		state: DragState
 	): ActionDragChangeResult {
+		if (state.dragDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [], showDragging: false }
+		}
 		const { win, draggingFrameId, dragHoveredFrame } = state
 		const matchedZone = getDragZones(state, settings.zoneSizes)
 

package/src/runtime/drag/SplitAction.ts

@@ -16,6 +16,7 @@ export type DragChangeType = "start" | "move" | "end"
 
 export class SplitAction implements IDragAction {
 	name = "split" as const
+	minDragDistance = 5
 
 	state: {
 		allowed: true
@@ -57,6 +58,8 @@ export class SplitAction implements IDragAction {
 		config?: {
 			debug?: boolean | string
 			splitHints?: Partial<SplitAction["splitHints"]>
+			/** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+			minDragDistance?: number
 		}
 	) {
 		if (handleEvent !== undefined) this.handleEvent = handleEvent
@@ -65,6 +68,7 @@ export class SplitAction implements IDragAction {
 		this.hooks = hooks
 		this.reset()
 		if (config?.debug) this.debug = true
+		if (config?.minDragDistance !== undefined) this.minDragDistance = config.minDragDistance
 		if (config?.splitHints?.actions) this.splitHints.actions = config.splitHints.actions
 		if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError
 	}
@@ -106,7 +110,8 @@ export class SplitAction implements IDragAction {
 	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
 		const { draggingEdges } = state
 		if (draggingEdges.length !== 1) return false
-		this.setTextHints(state.isDragging === "edge" ? true : undefined)
+		// hint should not be shown when dragging from window edge but we should still handle the event
+		this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? true : undefined)
 		if (this.handleEvent(e, state)) {
 			this.hooks.onStart?.()
 			return true
@@ -154,7 +159,7 @@ export class SplitAction implements IDragAction {
 			dragDirections[oppositeOrientation]!,
 			dragPoint!
 		)
-		this.setTextHints(canSplit)
+		this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? canSplit : undefined)
 		if (!(canSplit instanceof Error)) {
 			this.state.allowed = true
 			this.state.res = canSplit
@@ -173,7 +178,10 @@ export class SplitAction implements IDragAction {
 		_e: PointerEvent | undefined,
 		state: DragState
 	): ActionDragChangeResult {
-		const { dragHoveredFrame } = state
+		const { dragHoveredFrame, dragDistance } = state
+		if (dragDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [], showDragging: false }
+		}
 		let ok = false
 		if (dragHoveredFrame) {
 			if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {

package/src/runtime/settings.ts

@@ -11,7 +11,7 @@ export class Settings {
 	resetToDefaults() {
 		this.scale = 3
 		this.snapPoint = 0.5
-		this.minSize = 5
+		this.minSize = 3
 		this.collapseSizePx = 15
 		this.maxPerpendicularLength = 20
 		this.zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 }

package/src/runtime/types/index.ts

@@ -442,6 +442,8 @@ export type DragState = {
 	dragDirections: Record<Orientation, Direction | undefined>
 	/** The curren point (in scaled window coordinates) the user is dragging at. */
 	dragPoint?: Point
+	/** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
+	dragDistance: number
 	/** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
 	isDragging: boolean | "frame" | "edge"
 	/** Whether to show the moved frames while dragging. */