@witchcraft/layout 0.4.3 → 0.5.0

package/src/runtime/composables/useFrames.ts

@@ -3,7 +3,6 @@ import { keys } from "@alanscodelog/utils/keys"
 import type { Ref } from "vue"
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 
-import { DragDirectionStore } from "../drag/DragDirectionStore.js"
 import { cloneFrame } from "../helpers/cloneFrame.js"
 import { getIntersections } from "../helpers/getIntersections.js"
 import { getVisualEdges } from "../helpers/getVisualEdges.js"
@@ -12,32 +11,14 @@ import { moveEdge } from "../helpers/moveEdge.js"
 import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { isPointInRect } from "../layout/isPointInRect.js"
-import type { Direction, DragChangeHandler, DragChangeResult, DragState, Edge, EdgeDragStartData, FrameDragStartData, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
+import { MoveDirectionStore } from "../move/MoveDirectionStore.js"
+import type { ActionHandler, ActionHandlerApplyResult, Direction, Edge, EdgeMoveStartData, FrameId, FrameMoveStartData, IntersectionEntry, LayoutFrame, LayoutWindow, MoveState, Orientation, Point } from "../types/index.js"
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
-	handler: {
-		eventHandler: (e: KeyboardEvent, state: DragState, 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.
-			*
-			* Can return anything for the end event as it's ignored.
-			*
-			* Can be used to save some context/info to later apply safely during onDragApply.
-			*/
-		onDragChange: (...args: Parameters<DragChangeHandler>) => DragChangeResult
-		/**
-		 * Called when drag will be applied. If dragEnd 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).
-		 */
-		onDragApply: ((state: DragState, forceRecalculateEdges: () => void) => boolean)
-		/**
-		 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
-		 */
-		annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void
-	}
+	handler: ActionHandler
 ) {
-	const draggingEdges = ref<Edge[]>([])
+	const movingEdges = ref<Edge[]>([])
 
 	// each entry corresponds to the frames touching the corresponding dragging edge
 	const touchingFrames = ref<Record<string, LayoutFrame>[]>([])
@@ -53,30 +34,31 @@ export function useFrames(
 
 	const touchingFramesArrays = computed(() => touchingFrames.value.map(entry => Object.values(entry)))
 
-	const isDragging = ref<false | "frame" | "edge">(false)
-	const showDragging = ref(false)
-	const dragPoint = ref<Point | undefined>()
+	const isMoving = ref<false | "frame" | "edge">(false)
+	const showMoving = ref(false)
+	const movePoint = ref<Point | undefined>()
 
-	const dragDirections = ref<Record<Orientation, Direction | undefined>>({} as any)
+	const moveDirections = ref<Record<Orientation, Direction | undefined>>({} as any)
 
-	let dragStartPoint: Point | undefined
-	const dragDistance = ref(-1)
+	let moveStartPoint: Point | undefined
+	const moveDistance = ref(-1)
 
-	const draggingIntersection = ref<IntersectionEntry | undefined>(undefined)
-	const isDraggingFromWindowEdge = ref<boolean>(false)
+	const movingIntersection = ref<IntersectionEntry | undefined>(undefined)
+	const isMovingFromWindowEdge = ref<boolean>(false)
 
-	const frameDragFrameId = ref<FrameId | undefined>()
+	const movingFrameId = ref<FrameId | undefined>()
+	const eventContext = ref<Record<string, unknown> | undefined>()
 
 	const frames = computed(() =>
-		isDragging.value && showDragging.value
+		isMoving.value && showMoving.value
 			? { ...win.value.frames, ...allTouchingFrames.value }
 			: win.value.frames
 	)
 
-	const dragHoveredFrame = computed(() => {
-		if (isDragging.value) {
+	const moveHoveredFrame = computed(() => {
+		if (isMoving.value) {
 			for (const id of keys(frames.value)) {
-				if (isPointInRect(frames.value[id], dragPoint.value!)) {
+				if (isPointInRect(frames.value[id], movePoint.value!)) {
 					return frames.value[id]
 				}
 			}
@@ -88,100 +70,127 @@ export function useFrames(
 	const intersections = computed(() => getIntersections(visualEdges.value))
 	// avoid expensive calculation of edges when lots of frames are added/removed
 	// all at once (e.g. by clicking on some command many times in a row)
-	const debounceGetDraggableEdges = debounce((f: LayoutFrame[]) => {
+	const debounceGetMoveableEdges = debounce((f: LayoutFrame[]) => {
 		visualEdges.value = getVisualEdges(f, { includeWindowEdges: true })
 		handler.annotateEdges?.(visualEdges.value, f)
 	}, 50, {}) as any
 
-	watch([isDragging, frames], () => {
+	watch([isMoving, frames], () => {
 		// let request animation force recalc
-		if (isDragging.value) return
+		if (isMoving.value) return
 		// otherwise use more performant debounced version
-		debounceGetDraggableEdges(Object.values(frames.value))
+		debounceGetMoveableEdges(Object.values(frames.value))
 	}, { deep: true })
-	debounceGetDraggableEdges(Object.values(frames.value))
+	debounceGetMoveableEdges(Object.values(frames.value))
 
 	function forceRecalculateEdges(): void {
 		visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true })
 		handler.annotateEdges?.(visualEdges.value, Object.values(frames.value))
 	}
 
-	const dragDirStore = new DragDirectionStore({
-		onUpdate: dir => dragDirections.value = dir
+	const moveDirStore = new MoveDirectionStore({
+		onUpdate: dir => moveDirections.value = dir
 	})
 
 	const state = computed(() => ({
-		dragDirections: dragDirections.value,
-		dragPoint: dragPoint.value,
-		dragDistance: dragDistance.value,
-		isDragging: isDragging.value,
-		showDragging: showDragging.value,
-		draggingFrameId: frameDragFrameId.value,
-		draggingEdges: draggingEdges.value,
-		draggingIntersection: draggingIntersection.value,
+		moveDirections: moveDirections.value,
+		movePoint: movePoint.value,
+		moveDistance: moveDistance.value,
+		isMoving: isMoving.value,
+		showMoving: showMoving.value,
+		movingFrameId: movingFrameId.value,
+		movingEdges: movingEdges.value,
+		movingIntersection: movingIntersection.value,
 		visualEdges: visualEdges.value,
 		touchingFrames: touchingFrames.value,
 		touchingFramesArrays: touchingFramesArrays.value,
 		frames: frames.value,
-		dragHoveredFrame: dragHoveredFrame.value,
+		moveHoveredFrame: moveHoveredFrame.value,
 		intersections: intersections.value,
-		isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
+		isMovingFromWindowEdge: isMovingFromWindowEdge.value,
+		eventContext: eventContext.value,
 		win: win.value
-	} satisfies DragState))
+	} satisfies MoveState))
 
 	let controller: AbortController
+	let moveResolve: ((result: any) => void) | undefined
+	let moveResult: any
 
 	function resetState(): void {
-		dragStartPoint = undefined
+		moveStartPoint = undefined
+
+		moveResolve?.(moveResult)
+		moveResolve = undefined
+		moveResult = undefined
 
-		draggingEdges.value = []
-		draggingIntersection.value = undefined
-		isDragging.value = false
-		dragPoint.value = undefined
-		dragDistance.value = -1
+		movingEdges.value = []
+		movingIntersection.value = undefined
+		isMoving.value = false
+		movePoint.value = undefined
+		moveDistance.value = -1
 		touchingFrames.value = []
-		frameDragFrameId.value = undefined
-		dragDirStore.reset()
-		showDragging.value = false
+		movingFrameId.value = undefined
+		eventContext.value = undefined
+		moveDirStore.reset()
+		showMoving.value = false
 		forceRecalculateEdges()
 	}
 
-	function dragStart<T extends "edge" | "frame">(
+	function moveStart<T extends "edge" | "frame">(
 		e: PointerEvent,
 		type: T,
 		// someday this will work
-		data: T extends "edge" ? EdgeDragStartData : FrameDragStartData
-	): void {
+		data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData,
+		{
+			moveEvent = "pointermove",
+			endEvent = "pointerup",
+			context
+		}: {
+			moveEvent?: string
+			endEvent?: string
+			context?: Record<string, unknown>
+		} = {}
+	): Promise<any> {
+		// if already dragging, abort previous (resetState resolves the old promise)
+		if (controller) {
+			controller.abort()
+		}
+
+		const promise = new Promise<any>(resolve => {
+			moveResolve = resolve
+		})
+
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
 		e.preventDefault()
-		window.addEventListener("pointermove", dragMove, { signal: controller.signal })
-		window.addEventListener("pointerup", dragEnd, { signal: controller.signal })
+		window.addEventListener(moveEvent, onMove as EventListener, { signal: controller.signal })
+		window.addEventListener(endEvent, moveEnd as EventListener, { signal: controller.signal })
 
 		const point = toWindowCoord(win.value, e)
-		dragPoint.value = point
-		dragStartPoint = { ...point }
-		dragDirStore.update(point)
+		movePoint.value = point
+		moveStartPoint = { ...point }
+		moveDirStore.update(point)
+		eventContext.value = context
 
-		isDragging.value = type
-		showDragging.value = true
+		isMoving.value = type
+		showMoving.value = true
 
 		if (type === "frame") {
-			frameDragFrameId.value = (data as FrameDragStartData).frameId
+			movingFrameId.value = (data as FrameMoveStartData).frameId
 		} else {
-			const { edge, intersection } = data as EdgeDragStartData
-			draggingIntersection.value = intersection
+			const { edge, intersection } = data as EdgeMoveStartData
+			movingIntersection.value = intersection
 
-			draggingEdges.value = edge
-				? [edge]
+			movingEdges.value = edge
+				? [edge!]
 				: [
-						...(draggingIntersection.value?.sharedEdges.horizontal ?? []),
-						...(draggingIntersection.value?.sharedEdges.vertical ?? [])
+						...(movingIntersection.value?.sharedEdges.horizontal ?? []),
+						...(movingIntersection.value?.sharedEdges.vertical ?? [])
 					]
 
 
-			isDraggingFromWindowEdge.value = draggingEdges.value.some(_ => isWindowEdge(_))
+			isMovingFromWindowEdge.value = movingEdges.value.some(_ => isWindowEdge(_))
 
 			const framesArray = Object.values(win.value.frames)
 
@@ -189,10 +198,10 @@ export function useFrames(
 			// all frames in touchingFrames must be clones
 			// BUT they must be the same clone even if they are referenced by multiple dragging edges
 			const clones = new Map<string, LayoutFrame>()
-			for (let i = 0; i < draggingEdges.value.length; i++) {
-				const draggingEdge = draggingEdges.value[i]
+			for (let i = 0; i < movingEdges.value.length; i++) {
+				const movingEdge = movingEdges.value[i]
 				touchingFrames.value[i] = {}
-				for (const { frame } of findFramesTouchingEdge(draggingEdge, framesArray)) {
+				for (const { frame } of findFramesTouchingEdge(movingEdge, framesArray)) {
 					if (!clones.has(frame.id)) {
 						const clone = cloneFrame(frame)
 						touchingFrames.value[i][frame.id] = clone
@@ -204,35 +213,36 @@ export function useFrames(
 			}
 		}
 
-		const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel)
-		showDragging.value = res.showDragging ?? true
+		const res = handler.onMoveChange("start", e, state.value, forceRecalculateEdges, cancel, resolve)
+		showMoving.value = res.showMoving ?? true
+		return promise
 	}
 
-	function dragMove(e: PointerEvent): void {
+	function onMove(e: PointerEvent): void {
 		e.preventDefault()
 		const point = toWindowCoord(win.value, e)
-		const didChange = dragDirStore.update(point)
-		dragPoint.value = point
+		const didChange = moveDirStore.update(point)
+		movePoint.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)
+		moveDistance.value = 0
+		if (moveStartPoint) {
+			moveDistance.value = Math.sqrt(
+				Math.pow(point.x - moveStartPoint.x, 2) + Math.pow(point.y - moveStartPoint.y, 2)
 			)
 		}
 		if (!didChange) return
-		const res = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel)
+		const res = handler.onMoveChange("move", e, state.value, forceRecalculateEdges, cancel, resolve)
 
 
-		showDragging.value = res.showDragging ?? true
+		showMoving.value = res.showMoving ?? true
 		if (!res.updateEdges) return
 
-		if (isDragging.value === "edge") {
+		if (isMoving.value === "edge") {
 			requestAnimationFrame(() => {
-				for (let i = 0; i < draggingEdges.value.length; i++) {
-					const draggingEdge = draggingEdges.value[i]
-					if (draggingEdge) {
-						moveEdge(touchingFramesArrays.value[i], draggingEdge, point)
+				for (let i = 0; i < movingEdges.value.length; i++) {
+					const movingEdge = movingEdges.value[i]
+					if (movingEdge) {
+						moveEdge(touchingFramesArrays.value[i], movingEdge, point)
 					}
 				}
 				forceRecalculateEdges()
@@ -240,28 +250,37 @@ export function useFrames(
 		}
 	}
 
-	function dragEnd(e?: PointerEvent, { apply = true }: { apply?: boolean } = {}): void {
+	function moveEnd(e?: PointerEvent, { apply = true }: Partial<Pick<ActionHandlerApplyResult, "apply">> = {}): void {
 		if (e) {
 			const point = toWindowCoord(win.value, e)
-			dragPoint.value = point
+			movePoint.value = point
 		}
 
-		const doApply = apply && handler.onDragApply(state.value, forceRecalculateEdges)
-		if (doApply) {
-			for (const frame of touchingFramesArrays.value.flat()) {
-				win!.value.frames[frame.id] = frame
+		if (apply) {
+			const applyResult = handler.onMoveApply(state.value, forceRecalculateEdges)
+			moveResult = applyResult.result
+			if (applyResult.apply) {
+				for (const frame of touchingFramesArrays.value.flat()) {
+					win!.value.frames[frame.id] = frame
+				}
 			}
 		}
 
-		handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel)
+		handler.onMoveChange("end", e, state.value, forceRecalculateEdges, undefined, undefined)
 
 		// this can get called from elsewhere
-		// also takes care of cleanup
+		// also takes care of cleanup nd resolving promise
 		controller?.abort()
 	}
+
 	function cancel(): void {
-		dragEnd(undefined, { apply: false })
+		moveEnd(undefined, { apply: false })
 	}
+	function resolve({ apply, result: value }: ActionHandlerApplyResult): void {
+		moveResult = value
+		moveEnd(undefined, { apply })
+	}
+
 	const keydownController = new AbortController()
 	const wrappedKeydownHandler = (e: KeyboardEvent): void => {
 		handler.eventHandler(e, state.value, forceRecalculateEdges)
@@ -277,25 +296,26 @@ export function useFrames(
 	})
 
 	return {
-		dragStart,
-		dragEnd,
+		moveStart,
+		moveEnd,
 		cancel,
-		dragMove,
-		dragDirections,
-		dragPoint,
-		isDragging,
-		draggingEdges,
-		draggingIntersection,
+		onMove,
+		moveDirections,
+		movePoint,
+		isMoving,
+		movingEdges,
+		movingIntersection,
 		visualEdges,
 		touchingFrames,
 		touchingFramesArrays,
 		frames,
-		dragHoveredFrame,
+		moveHoveredFrame,
 		intersections,
-		isDraggingFromWindowEdge,
+		isMovingFromWindowEdge,
 		forceRecalculateEdges,
 		state,
-		showDragging,
-		frameDragFrameId
+		showMoving,
+		movingFrameId,
+		actionHandler: handler
 	}
 }

package/src/runtime/demo/App.vue

@@ -10,7 +10,7 @@
 		v-if="win"
 		:frames="frames!"
 		:win="win"
-		:dragActionHandler="dragActionHandler"
+		:actionHandler="actionHandler"
 	/>
 
 	<LayoutWindow
@@ -33,8 +33,8 @@
 		:textHints="textHints"
 		textHintsTeleportTo="#status-bar"
 		v-model:win="win"
-		@is-showing-drag="isShowingDrag = $event"
-		@drag-state="dragState = $event"
+		@is-showing-move="isShowingMove = $event"
+		@move-state="moveState = $event"
 	>
 			<LayoutFrame class="
 				flex
@@ -163,7 +163,7 @@ import LayoutIntersections from "../components/LayoutIntersections.vue"
 import LayoutEdgesActiveFrame from "../components/LayoutEdgesActiveFrame.vue"
 import LayoutDragEdges from "../components/LayoutDragEdges.vue"
 import LayoutIntersectionHandle from "../components/LayoutIntersectionHandle.vue"
-import type { DragState } from "../types/index.js"
+import type { MoveState } from "../types/index.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { debugFrame } from "../layout/debugFrame.js"
 import { getFrameCollapseInfo } from "../layout/getFrameCollapseInfo.js"
@@ -179,7 +179,7 @@ import { settings } from "../settings.js"
 import type { EdgeSide, Layout, Pos, Size } from "../types/index.js"
 import { throwIfError } from "@alanscodelog/utils/throwIfError"
 import { useTemplateRef } from "vue"
-import { DragActionHandler } from "../drag/DragActionHandler.js"
+import { ActionHandler } from "../move/ActionHandler.js"
 import LayoutDragEdgeHandle from "../components/LayoutDragEdgeHandle.vue"
 import LayoutDragEdgeVisible from "../components/LayoutDragEdgeVisible.vue"
 import LayoutIntersectionVisible from "../components/LayoutIntersectionVisible.vue"
@@ -228,30 +228,30 @@ function layoutInitialize(layout: Layout, { defaultPos, defaultSize }: {
 }
 
 // whether layout window is showing the edge beneath the mouse
-// as determined by the DragActionHandler in LayoutWindow
-const isShowingDrag = ref(false)
+// as determined by the ActionHandler in LayoutWindow
+const isShowingMove = ref(false)
 // drag state as returned by useFrames in LayoutWindow
-const dragState = ref<DragState | undefined>(undefined)
+const moveState = ref<MoveState | undefined>(undefined)
 
 function handleUndock(frameId: string) {
 	const changes = throwIfError(getFrameUndockInfo(win.value!, frameId))
-	DragActionHandler.debugState("undock", "before", dragState.value!, {}, undefined)
+	ActionHandler.debugState("undock", "before", moveState.value!, {}, undefined)
 	applyFrameChanges(win.value!, changes)
-	DragActionHandler.debugState("undock", "after", dragState.value!, {}, undefined)
+	ActionHandler.debugState("undock", "after", moveState.value!, {}, undefined)
 }
 
 function handleCollapse(frameId: string) {
 	const changes = throwIfError(getFrameCollapseInfo(win.value!, frameId))
-	DragActionHandler.debugState("collapse", "before", dragState.value!, {}, undefined)
+	ActionHandler.debugState("collapse", "before", moveState.value!, {}, undefined)
 	applyFrameChanges(win.value!, changes)
-	DragActionHandler.debugState("collapse", "after", dragState.value!, {}, undefined)
+	ActionHandler.debugState("collapse", "after", moveState.value!, {}, undefined)
 }
 
 function handleUncollapse(frameId: string) {
 	const changes = throwIfError(getFrameUncollapseInfo(win.value!, frameId))
-	DragActionHandler.debugState("uncollapse", "before", dragState.value!, {}, undefined)
+	ActionHandler.debugState("uncollapse", "before", moveState.value!, {}, undefined)
 	applyFrameChanges(win.value!, changes)
-	DragActionHandler.debugState("uncollapse", "after", dragState.value!, {}, undefined)
+	ActionHandler.debugState("uncollapse", "after", moveState.value!, {}, undefined)
 }
 
 const collapsedDocks = computed(() => {
@@ -264,13 +264,13 @@ const collapsedDocks = computed(() => {
 	return sides
 })
 
-const dragActionHandler = computed(() => layoutComponent.value?.dragActionHandler)
+const actionHandler = computed(() => layoutComponent.value?.actionHandler)
 
 const textHints = computed(() => {
-	const isDragging = dragState.value?.isDragging
-	const textHints = dragActionHandler.value?.textHints ?? {actions:[], errors:[]}
+	const isMoving = moveState.value?.isMoving
+	const textHints = actionHandler.value?.textHints ?? {actions:[], errors:[]}
 	return [
-		...(!isDragging ? [{classes:"", text:"Drag from an edge to create a new frame."}] : []),
+		...(!isMoving ? [{classes:"", text:"Drag from an edge to create a new frame."}] : []),
 		...textHints.errors.map((_: string) => ({classes:"text-red-500", text:_})),
 		...textHints.actions.map((_: string) => ({ text:_})),
 	]

package/src/runtime/demo/DemoControls.vue

@@ -25,7 +25,7 @@
 						<WButton class="flex-1" @click="copyState">Copy State</WButton>
 						<WCheckbox v-model="renameFrames">Easy Ids</WCheckbox>
 					</div>
-					<label class="flex flex-col gap-2 text-sm" v-if="dragActionHandler">
+					<label class="flex flex-col gap-2 text-sm" v-if="actionHandler">
 						<span>Plugin Debug Logs (true | debug path):</span>
 						<WSimpleInput v-model="debugKey" />
 					</label>
@@ -50,13 +50,13 @@ import { settings } from "../settings.js"
 import type { LayoutFrame, LayoutWindow } from "../types/index.js"
 import { throwIfError } from "@alanscodelog/utils/throwIfError";
 import { walk } from "@alanscodelog/utils/walk"
-import type { DragActionHandler } from "../drag/DragActionHandler.js"
+import type { ActionHandler } from "../move/ActionHandler.js"
 import { rotateLayout } from "../helpers/rotateFrames.js"
 
 const props = defineProps<{
 	win: LayoutWindow
 	frames: LayoutFrame[],
-	dragActionHandler?: DragActionHandler<any>
+	actionHandler?: ActionHandler<any>
 }>()
 
 const showDevActions = ref(false)
@@ -112,14 +112,14 @@ function copyState() {
 
 const debugKey = ref(import.meta.dev ? "state.win.frames" : "false")
 watch(debugKey, () => {
-	if (!props.dragActionHandler) return
+	if (!props.actionHandler) return
 	const value = debugKey.value === "true" 
 		? true 
 		: debugKey.value === "false" 
 		? false 
 		: debugKey.value
 
-	for (const plugin of Object.values(props.dragActionHandler.actions)) {
+	for (const plugin of Object.values(props.actionHandler.actions)) {
 			plugin.debug = value
 	}
 })

package/src/runtime/demo/tailwind.css

@@ -5,3 +5,7 @@
 
 /* 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";
+
+button {
+	cursor: pointer;
+}

package/src/runtime/helpers/createZoneSideClipPath.ts

@@ -6,10 +6,10 @@
  * Accepts scaled coordinates.
  */
 
-import type { DragZone } from "../types/index.js"
+import type { Zone } from "../types/index.js"
 
 export function createZoneSideClipPath(
-	zone: DragZone,
+	zone: Zone,
 	{ frameEdgePx, windowEdgePx }: { frameEdgePx: number, windowEdgePx: number }
 ): string | undefined {
 	const side = zone.side

package/src/runtime/helpers/findEdgesTouchingWindow.ts

@@ -0,0 +1,30 @@
+import { settings } from "../settings.js"
+import type { EdgeSide, LayoutFrame } from "../types/index.js"
+
+/**
+ * Checks which window edges a frame touches and how.
+ *
+ * @returns Record mapping touched sides to `"full"` (spans the entire edge) or `"partial"` (touches but doesn't span fully). Only touched sides are included as keys.
+ */
+export function findEdgesTouchingWindow(frame: LayoutFrame): Partial<Record<EdgeSide, "full" | "partial">> {
+	const maxInt = settings.maxInt
+	const result: Partial<Record<EdgeSide, "full" | "partial">> = {}
+
+	const spansVertical = frame.y === 0 && frame.y + frame.height === maxInt
+	const spansHorizontal = frame.x === 0 && frame.x + frame.width === maxInt
+
+	if (frame.x === 0) {
+		result.left = spansVertical ? "full" : "partial"
+	}
+	if (frame.x + frame.width === maxInt) {
+		result.right = spansVertical ? "full" : "partial"
+	}
+	if (frame.y === 0) {
+		result.top = spansHorizontal ? "full" : "partial"
+	}
+	if (frame.y + frame.height === maxInt) {
+		result.bottom = spansHorizontal ? "full" : "partial"
+	}
+
+	return result
+}

package/src/runtime/helpers/{findFrameDraggableEdges.ts → findFrameMoveableEdges.ts}

@@ -1,4 +1,4 @@
-import { findDraggableEdge } from "./findDraggableEdge.js"
+import { findMoveableEdge } from "./findMoveableEdge.js"
 import { frameToEdges } from "./frameToEdges.js"
 import { isWindowEdge } from "./isWindowEdge.js"
 import { sideToOrientation } from "./sideToOrientation.js"
@@ -8,10 +8,10 @@ import type {
 	EdgeSide, LayoutFrame
 } from "../types/index.js"
 
-export function findFrameDraggableEdges(
+export function findFrameMoveableEdges(
 	frame: LayoutFrame,
 	edges: Edge[],
-	/** See {@link findDraggableEdge} */
+	/** See {@link findMoveableEdge} */
 	exact: boolean = true,
 	sides: EdgeSide[] = ["left", "right", "top", "bottom"]
 ): { edge: Edge, side: EdgeSide }[] | undefined {
@@ -23,7 +23,7 @@ export function findFrameDraggableEdges(
 		const isWinEdge = isWindowEdge(edge, edgeDirection)
 
 		if (isWinEdge) continue
-		const maybeEdge = findDraggableEdge(edge, edges, exact, edgeDirection)
+		const maybeEdge = findMoveableEdge(edge, edges, exact, edgeDirection)
 
 		if (maybeEdge) res.push({ edge: maybeEdge, side })
 	}

package/src/runtime/helpers/{findDraggableEdge.ts → findMoveableEdge.ts}

@@ -4,7 +4,7 @@ import { isEdgeEqual } from "./isEdgeEqual.js"
 
 import type { Edge, Orientation } from "../types/index.js"
 
-export function findDraggableEdge(
+export function findMoveableEdge(
 	edge: Edge,
 	edges: Edge[],
 	/** Whether the edge must match exactly and does not "contain/touch" another frame. */