@witchcraft/layout 0.4.4 → 0.5.1

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,13 +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 { ActionHandler, Direction, 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: 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>[]>([])
@@ -34,31 +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]
 				}
 			}
@@ -70,77 +70,78 @@ 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 dragResolve: ((result: any) => void) | undefined
-	let dragResult: any
+	let moveResolve: ((result: any) => void) | undefined
+	let moveResult: any
 
 	function resetState(): void {
-		dragStartPoint = undefined
+		moveStartPoint = undefined
 
-		dragResolve?.(dragResult)
-		dragResolve = undefined
-		dragResult = 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
+		movingFrameId.value = undefined
 		eventContext.value = undefined
-		dragDirStore.reset()
-		showDragging.value = false
+		moveDirStore.reset()
+		showMoving.value = false
 		forceRecalculateEdges()
+		handler.onMoveEnded()
 	}
 
-	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,
+		data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData,
 		{
 			moveEvent = "pointermove",
 			endEvent = "pointerup",
@@ -157,40 +158,40 @@ export function useFrames(
 		}
 
 		const promise = new Promise<any>(resolve => {
-			dragResolve = resolve
+			moveResolve = resolve
 		})
 
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
 		e.preventDefault()
-		window.addEventListener(moveEvent, dragMove as EventListener, { signal: controller.signal })
-		window.addEventListener(endEvent, dragEnd as EventListener, { 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
+			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)
 
@@ -198,10 +199,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
@@ -213,36 +214,40 @@ 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)
+		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)
 
 
-		showDragging.value = res.showDragging ?? true
+		showMoving.value = res.showMoving ?? true
 		if (!res.updateEdges) return
 
-		if (isDragging.value === "edge") {
+		if (isMoving.value === "edge" && point) {
 			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()
@@ -250,15 +255,17 @@ 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
 		}
 
+		onMoveChange(e, "end", movePoint.value)
+
 		if (apply) {
-			const applyResult = handler.onDragApply(state.value, forceRecalculateEdges)
-			dragResult = applyResult.result
+			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
@@ -266,15 +273,19 @@ export function useFrames(
 			}
 		}
 
-		handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel)
-
 		// 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()
 	}
+
 	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)
@@ -290,26 +301,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/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/{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. */

package/src/runtime/helpers/index.ts

@@ -23,8 +23,8 @@ export { dirToSide } from "./dirToSide.js"
 export { doEdgesOverlap } from "./doEdgesOverlap.js"
 export { doesEdgeContinueEdge } from "./doesEdgeContinueEdge.js"
 export { edgeToPoints } from "./edgeToPoints.js"
-export { findDraggableEdge } from "./findDraggableEdge.js"
-export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js"
+export { findMoveableEdge } from "./findMoveableEdge.js"
+export { findFrameMoveableEdges } from "./findFrameMoveableEdges.js"
 export { framesRedistributeFix } from "./framesRedistributeFix.js"
 export { frameToEdges } from "./frameToEdges.js"
 export { frameToPoints } from "./frameToPoints.js"

package/src/runtime/layout/createSplitDecoFromDrag.ts

@@ -8,7 +8,7 @@ export function createSplitDecoFromDrag(
 	frames: Record<string, LayoutFrame>,
 	frame: LayoutFrame,
 	dragDirection: Direction,
-	dragPoint: Point,
+	movePoint: Point,
 	snapAmount: Point = settings.snapPointScaled,
 	minSize: Size = settings.minSizeScaled,
 	classes: {
@@ -22,7 +22,7 @@ export function createSplitDecoFromDrag(
 	const deco: RawSplitDeco & Partial<SplitDeco> = {
 		type: "split",
 		id: frame.id,
-		position: dragPoint[orientation === "horizontal" ? "x" : "y"],
+		position: movePoint[orientation === "horizontal" ? "x" : "y"],
 		direction: dragDirection
 	}
 	deco.shapes = createSplitDecoShapes(frames, deco, snapAmount, minSize, classes)

package/src/runtime/layout/findSafeSplitEdge.ts

@@ -8,15 +8,15 @@ import type { Direction, Edge, LayoutFrame, Point, Size } from "../types/index.j
 export function findSafeSplitEdgeAndPosition(
 	frame: LayoutFrame,
 	dragDirection: Direction,
-	dragPointOrPosition: Point | number,
+	movePointOrPosition: Point | number,
 	snapAmount: Point = settings.snapPointScaled,
 	minSize: Size = settings.minSizeScaled
 ): { edge: Edge, position: number } {
 	const orientation = dirToOrientation(dragDirection)
 	const position
-		= typeof dragPointOrPosition === "number"
-			? dragPointOrPosition
-			: dragPointOrPosition[orientation === "horizontal" ? "x" : "y"]
+		= typeof movePointOrPosition === "number"
+			? movePointOrPosition
+			: movePointOrPosition[orientation === "horizontal" ? "x" : "y"]
 
 	const coordKey = orientation === "vertical" ? "y" : "x"
 	const sizeKey = orientation === "vertical" ? "height" : "width"

package/src/runtime/layout/getCloseFrameInfo.ts

@@ -7,7 +7,7 @@ import { findVisualEdge } from "./findVisualEdge.js"
 
 import { cloneFrame } from "../helpers/cloneFrame.js"
 import { dirToSide } from "../helpers/dirToSide.js"
-import { findFrameDraggableEdges } from "../helpers/findFrameDraggableEdges.js"
+import { findFrameMoveableEdges } from "../helpers/findFrameMoveableEdges.js"
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js"
 import { oppositeSide } from "../helpers/oppositeSide.js"
 import { settings } from "../settings.js"
@@ -119,9 +119,9 @@ export function getCloseFrameInfo<T extends "edge" | "dir">(
 		: closeDirOrSide as EdgeSide
 	const sideOpposite = oppositeSide(side)
 
-	const draggableEdges = findFrameDraggableEdges(frame, visualEdges, !force, [side])
-	if (!draggableEdges) return new KnownError(LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE, `Could not find draggable edge for frame ${frame.id}`, { frame })
-	const { edge: frameEdge } = draggableEdges[0]
+	const moveableEdges = findFrameMoveableEdges(frame, visualEdges, !force, [side])
+	if (!moveableEdges) return new KnownError(LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE, `Could not find draggable edge for frame ${frame.id}`, { frame })
+	const { edge: frameEdge } = moveableEdges[0]
 
 	const visualEdge = findVisualEdge(visualEdges, frameEdge)
 	if (visualEdge === undefined) unreachable()