@witchcraft/layout 0.4.4 → 0.5.1

package/src/runtime/layout/getFrameRearrangeInfo.ts

@@ -7,7 +7,7 @@ import { getSideTouching } from "../helpers/getSideTouching.js"
 import { isEdgeEqual } from "../helpers/isEdgeEqual.js"
 import { oppositeSide } from "../helpers/oppositeSide.js"
 import { sideToDirection } from "../helpers/sideToDirection.js"
-import type { DragZone, LayoutChange, LayoutWindow } from "../types/index.js"
+import type { LayoutChange, LayoutWindow, Zone } from "../types/index.js"
 import { LAYOUT_ERROR } from "../types/index.js"
 import { KnownError } from "../utils/KnownError.js"
 
@@ -150,9 +150,9 @@ import { KnownError } from "../utils/KnownError.js"
 
 export function getFrameRearrangeInfo(
 	win: LayoutWindow,
-	draggingFrameId: string,
+	movingFrameId: string,
 	hoveredFrameId: string,
-	zoneSide: DragZone["side"]
+	zoneSide: Zone["side"]
 ): LayoutChange<"split" | "swap" | "rearrange">
 	| KnownError<typeof LAYOUT_ERROR.CANT_SWAP_WITH_SELF>
 	| KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL>
@@ -161,10 +161,10 @@ export function getFrameRearrangeInfo(
 	| KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED>
 	| KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME>
 	| KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES> {
-	const draggingFrame = { ...win.frames[draggingFrameId] }
+	const draggingFrame = { ...win.frames[movingFrameId] }
 	const hoveredFrame = { ...win.frames[hoveredFrameId] }
 
-	if (draggingFrameId === hoveredFrameId) {
+	if (movingFrameId === hoveredFrameId) {
 		if (zoneSide === "center") return new KnownError(LAYOUT_ERROR.CANT_SWAP_WITH_SELF, `Can't swap frame with self.`, { frame: hoveredFrame, zoneSide })
 	}
 
@@ -180,12 +180,12 @@ export function getFrameRearrangeInfo(
 	}
 
 	if (draggingFrame.docked && !hoveredFrame.docked) { // center swapping IS allowed above
-		return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED, `Can't rearrange docked frame ${draggingFrameId} with non-docked frame ${hoveredFrameId}, can only swap.`, { draggingFrameId, hoveredFrameId, zoneSide })
+		return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED, `Can't rearrange docked frame ${movingFrameId} with non-docked frame ${hoveredFrameId}, can only swap.`, { movingFrameId, hoveredFrameId, zoneSide })
 	}
 
 	// block edge rearrange on docked frames
 	if (hoveredFrame.docked) { // again center swapping docked to undocked and vice versa is allowed
-		return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES, `Can't rearrange with docked frame ${hoveredFrameId} edge, can only swap.`, { draggingFrameId, hoveredFrameId, zoneSide })
+		return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES, `Can't rearrange with docked frame ${hoveredFrameId} edge, can only swap.`, { movingFrameId, hoveredFrameId, zoneSide })
 	}
 
 	const touchingSide = getSideTouching(draggingFrame, hoveredFrame)
@@ -206,7 +206,7 @@ export function getFrameRearrangeInfo(
 				}
 			}
 			if (hoverOppositeSide === zoneSide) {
-				return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION, `Frame ${draggingFrameId} is already on the ${zoneSide} of ${hoveredFrameId}`, { draggingFrameId, hoveredFrameId, zoneSide })
+				return new KnownError(LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION, `Frame ${movingFrameId} is already on the ${zoneSide} of ${hoveredFrameId}`, { movingFrameId, hoveredFrameId, zoneSide })
 			}
 		}
 	}
@@ -224,7 +224,7 @@ export function getFrameRearrangeInfo(
 	const splitFrame = splitResult.modified[0]
 	const newFrame = splitResult.created[0]
 
-	if (draggingFrameId === hoveredFrameId) {
+	if (movingFrameId === hoveredFrameId) {
 		return { ...splitResult, deleted: [], info: "split" }
 	}
 
@@ -249,7 +249,7 @@ export function getFrameRearrangeInfo(
 			[draggingFrame.id]: draggingFrame
 		}
 	}
-	const changes = getFillEmptySpaceInfo(winCopy, emptySpace, [hoveredFrameId, draggingFrameId])
+	const changes = getFillEmptySpaceInfo(winCopy, emptySpace, [hoveredFrameId, movingFrameId])
 	if (changes instanceof KnownError) return changes
 
 	// it will also be missing said changes unless it further moved the frames which is not alway

package/src/runtime/layout/getFrameSplitInfo.ts

@@ -21,7 +21,7 @@ import { KnownError } from "../utils/KnownError.js"
 export function getFrameSplitInfo(
 	frame: LayoutFrame,
 	dir: Direction,
-	dragPointOrPosition: Point | number | "midpoint" = "midpoint",
+	movePointOrPosition: Point | number | "midpoint" = "midpoint",
 	minSize: Size = settings.minSizeScaled,
 	snapAmount: Point = settings.snapPointScaled
 ): LayoutChange
@@ -42,11 +42,11 @@ export function getFrameSplitInfo(
 	const sizeKey: "width" | "height" = isHorz ? "width" : "height"
 	const posKey: "x" | "y" = isHorz ? "x" : "y"
 
-	const position = dragPointOrPosition === "midpoint"
+	const position = movePointOrPosition === "midpoint"
 		? (isHorz ? frame.x + (frame.width / 2) : frame.y + (frame.height / 2))
-		: typeof dragPointOrPosition === "number"
-			? dragPointOrPosition
-			: dragPointOrPosition[isHorz ? "x" : "y"]
+		: typeof movePointOrPosition === "number"
+			? movePointOrPosition
+			: movePointOrPosition[isHorz ? "x" : "y"]
 
 	const safePosition = findSafeSplitEdgeAndPosition(
 		frame,

package/src/runtime/layout/{getFrameDragZones.ts → getFrameZones.ts}

@@ -1,5 +1,5 @@
 import { settings } from "../settings.js"
-import type { DragZone } from "../types/index.js"
+import type { Zone } from "../types/index.js"
 
 /**
  * Returns frame drag zones (in **unrounded** scaled coordinate space).
@@ -10,12 +10,12 @@ import type { DragZone } from "../types/index.js"
  *
  * Unrounded because these are for display purposes only.
  */
-export function getFrameDragZones(
+export function getFrameZones(
 	frame: { x: number, y: number, width: number, height: number },
 	thresholdPx: number,
 	windowPxWidth: number,
 	windowPxHeight: number
-): DragZone[] {
+): Zone[] {
 // we do not round as we might undo this transform and drag along errors
 	// plugs this is is for display purposes only
 	const thX = thresholdPx / windowPxWidth * settings.maxInt
@@ -36,7 +36,7 @@ export function getFrameDragZones(
 		}]
 	}
 
-	const zones: DragZone[] = []
+	const zones: Zone[] = []
 
 	zones.push({
 		type: "frame",

package/src/runtime/layout/{getWindowDragZones.ts → getWindowZones.ts}

@@ -6,7 +6,7 @@ import type { LayoutWindow, WindowEdgeZone } from "../types/index.js"
  * Returns window edge drag zones (in scaled coordinates)
  *
  */
-export function getWindowDragZones(
+export function getWindowZones(
 	win: LayoutWindow,
 	thresholdPx: number
 ): WindowEdgeZone[] {

package/src/runtime/layout/getZones.ts

@@ -0,0 +1,48 @@
+import { getFrameZones } from "./getFrameZones.js"
+import { getWindowZones } from "./getWindowZones.js"
+import { isPointInRect } from "./isPointInRect.js"
+
+import type { MoveState, WindowEdgeZone, Zone } from "../types/index.js"
+
+/**
+ * Find the drag zone under the drag point.
+ */
+export function getZones(
+	state: Pick<MoveState, "movePoint" | "moveHoveredFrame" | "frames" | "win">,
+	{ frameEdgePx, windowEdgePx }: { frameEdgePx: number, windowEdgePx: number }
+): Zone | undefined {
+	const { movePoint, win } = state
+	const frameId = state.moveHoveredFrame?.id
+	if (!frameId) return
+
+	const frame = state.frames[frameId]
+	if (!frame || !movePoint) return
+
+	const frameZones = getFrameZones(frame, frameEdgePx, win.pxWidth, win.pxHeight)
+
+	const windowZones = getWindowZones(win, windowEdgePx)
+
+	let matchedZone: Zone | undefined
+	for (const zone of windowZones) {
+		if (isPointInRect(zone, movePoint)) {
+			matchedZone = {
+				...zone,
+				type: "window"
+			} as WindowEdgeZone
+			break
+		}
+	}
+
+	if (!matchedZone) {
+		for (const zone of frameZones) {
+			if (isPointInRect(zone, movePoint)) {
+				matchedZone = zone
+				break
+			}
+		}
+	}
+
+	if (!matchedZone) return undefined
+
+	return matchedZone
+}

package/src/runtime/layout/index.ts

@@ -9,11 +9,11 @@ export { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js"
 export { findVisualEdge } from "./findVisualEdge.js"
 export { frameCreate } from "./frameCreate.js"
 export { getCloseFrameInfo } from "./getCloseFrameInfo.js"
-export { getDragZones } from "./getDragZones.js"
+export { getZones } from "./getZones.js"
 export { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js"
 export { getFrameCollapseInfo } from "./getFrameCollapseInfo.js"
 export { getFrameDockInfo } from "./getFrameDockInfo.js"
-export { getFrameDragZones } from "./getFrameDragZones.js"
+export { getFrameZones } from "./getFrameZones.js"
 export { getFrameExpandInfo } from "./getFrameExpandInfo.js"
 export { getFrameRearrangeInfo } from "./getFrameRearrangeInfo.js"
 export { getFrameShrinkInfo } from "./getFrameShrinkInfo.js"
@@ -25,7 +25,7 @@ export { getFrameUncollapseInfo } from "./getFrameUncollapseInfo.js"
 export { getFrameUndockInfo } from "./getFrameUndockInfo.js"
 export { getRelaxFramesInfo } from "./getRelaxFramesInfo.js"
 export { getUpdateWindowSizeInfo } from "./getUpdateWindowSizeInfo.js"
-export { getWindowDragZones } from "./getWindowDragZones.js"
+export { getWindowZones } from "./getWindowZones.js"
 export { isPointInRect } from "./isPointInRect.js"
 export { layoutAddWindow } from "./layoutAddWindow.js"
 export { layoutCreate } from "./layoutCreate.js"

package/src/runtime/{drag/DragActionHandler.ts → move/ActionHandler.ts}

@@ -2,36 +2,36 @@ import { get, type RecordFromArray } from "@alanscodelog/utils"
 
 import { isWindowEdge } from "../helpers/isWindowEdge.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
-import type { DragChangeHandler, DragChangeResult, DragState, Edge, IDragAction, LayoutFrame, LayoutShape } from "../types/index.js"
+import type { ActionHandlerApplyResult, Edge, IAction, LayoutFrame, LayoutShape, MoveChangeHandler, MoveChangeResult, MoveState } from "../types/index.js"
 import { LAYOUT_ERROR } from "../types/index.js"
 import { KnownError } from "../utils/KnownError.js"
 
 /**
- * Handles the lifecycle of a drag actions {@link IDragAction} and provides additional hooks.
+ * Handles the lifecycle of a drag actions {@link IAction} and provides additional hooks.
  *
  * The first action instance that can handle the request is passed control of the event handlers until the request changes.
  */
-export class DragActionHandler<
-	TRawDragActions extends IDragAction[],
-	TDragActions extends RecordFromArray<TRawDragActions, "name"> = RecordFromArray<TRawDragActions, "name">
+export class ActionHandler<
+	TRawActions extends IAction[],
+	TActions extends RecordFromArray<TRawActions, "name"> = RecordFromArray<TRawActions, "name">
 > {
-	activeAction?: keyof TDragActions
+	activeAction?: keyof TActions
 
-	actions: TDragActions
+	actions: TActions
 
-	eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void) | undefined = undefined
+	eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void) | undefined = undefined
 
-	boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
+	boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void
 
-	defaultOnDragChange: DragChangeHandler = (type, _e, state, _forceRecalculateEdges, _cancel) => {
+	defaultOnMoveChange: MoveChangeHandler = (type, _e, state, _forceRecalculateEdges, _cancel) => {
 		const isTouchingCollapsedFrameEdge = type === "move"
-			&& state.isDragging === "edge"
+			&& state.isMoving === "edge"
 			&& state.touchingFramesArrays.some(frames =>
 				// we check with a falsy check on PURPOSE, frames collapsed to 0 aren't an issue, they are ignored anyways
 				Object.values(frames).some(f => f.collapsed)
 			)
 		return {
-			updateEdges: type === "move" ? !(state.isDraggingFromWindowEdge || isTouchingCollapsedFrameEdge) : true,
+			updateEdges: type === "move" ? !(state.isMovingFromWindowEdge || isTouchingCollapsedFrameEdge) : true,
 			shapes: []
 		}
 	}
@@ -46,7 +46,7 @@ export class DragActionHandler<
 		 */
 		onEvent?: (e: PointerEvent | KeyboardEvent | undefined, cancel: () => void) => void
 		/** Called when the action requested changes. */
-		onRequestChange?: (type: keyof TDragActions | undefined) => void
+		onRequestChange?: (type: keyof TActions | undefined) => void
 		/** Called when the drag action ends either because it was completed or cancelled. */
 		onEnd?: (context: { cancelled: boolean, applied: boolean }) => void
 	}
@@ -54,22 +54,22 @@ export class DragActionHandler<
 	/** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
 	shapes: LayoutShape[] = []
 
-	/** All hint/error text from all actions, updated on every onDragChange. If using vue you can set this to a reactive object for reactivity. */
+	/** All hint/error text from all actions, updated on every onMoveChange. If using vue you can set this to a reactive object for reactivity. */
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 
 	constructor(
-		actions: TRawDragActions,
-		hooks: DragActionHandler<TRawDragActions, TDragActions>["hooks"] = {},
+		actions: TRawActions,
+		hooks: ActionHandler<TRawActions, TActions>["hooks"] = {},
 		/**
-		 * Default onDragChange handler for when no action can handle the request.
+		 * Default onMoveChange handler for when no action can handle the request.
 		 *
 		 * Should return true to allow the edges to be moved, or false to prevent it.
 		 *
 		 * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
 		 */
-		defaultOnDragChange?: DragChangeHandler
+		defaultOnMoveChange?: MoveChangeHandler
 	) {
-		if (defaultOnDragChange) this.defaultOnDragChange = defaultOnDragChange
+		if (defaultOnMoveChange) this.defaultOnMoveChange = defaultOnMoveChange
 		this.hooks = hooks
 		this.actions = {} as any
 		for (const action of actions) {
@@ -80,10 +80,10 @@ export class DragActionHandler<
 
 	eventHandler(
 		e: KeyboardEvent | PointerEvent,
-		state: DragState,
+		state: MoveState,
 		forceRecalculateEdges: () => void
 	) {
-		if (state.isDragging) {
+		if (state.isMoving) {
 			e.preventDefault()
 		}
 		let cancelled = false
@@ -95,7 +95,7 @@ export class DragActionHandler<
 
 		let found = false
 		const oldActiveAction = this.activeAction
-		for (const action of Object.values<TRawDragActions[number]>(this.actions)) {
+		for (const action of Object.values<TRawActions[number]>(this.actions)) {
 			if (action.canHandleRequest(e, state, forceRecalculateEdges)) {
 				// if (this.activeAction !== action.name) {
 				// }
@@ -116,46 +116,53 @@ export class DragActionHandler<
 			this.hooks.onRequestChange?.(this.activeAction)
 		}
 
-		if (state.isDragging) {
+		if (state.isMoving) {
 			forceRecalculateEdges()
 			this.hooks.onRecalculate?.()
 		}
 		return undefined
 	}
 
-	onDragChange<T extends "start" | "move" | "end">(
+	onMoveChange<T extends "start" | "move" | "end">(
 		type: T,
 		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
-		state: DragState,
+		state: MoveState,
 		forceRecalculateEdges: () => void,
-		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
-	): DragChangeResult {
+		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
+		resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void
+	): MoveChangeResult {
 		if (type === "start") {
 			this.eventCanceller = cancel
 			this.eventHandler(e!, state, forceRecalculateEdges)
 		}
-		if (type === "end") {
-			this.activeAction = undefined
-		}
 
 		if (this.activeAction) {
-			const res = this.actions[this.activeAction]!.onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel)
+			const res = this.actions[this.activeAction]!.onMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve)
 			// in case it's a vue reactive array
 			this.shapes.splice(0, this.shapes.length, ...res.shapes)
 			this.setTextHints(type)
 			return res
 		}
 		this.setTextHints(type)
-		const res = this.defaultOnDragChange(type, e, state, forceRecalculateEdges, this.boundCancel)
+		const res = this.defaultOnMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve as any)
 		this.shapes.splice(0, this.shapes.length, ...res.shapes)
+
 		return res
 	}
 
+	onMoveEnded() {
+		if (this.activeAction) {
+			this.actions[this.activeAction]!.onMoveEnded()
+		}
+
+		this.activeAction = undefined
+	}
+
 	setTextHints(type: "start" | "move" | "end") {
 		// again in case it's a vue reactive object
 		this.textHints.actions = []
 		this.textHints.errors = []
-		for (const action of Object.values<IDragAction>(this.actions)) {
+		for (const action of Object.values<IAction>(this.actions)) {
 			const res = action.getTextHints?.(type)
 			this.textHints.actions.push(...(res?.actions ?? []))
 			this.textHints.errors.push(...(res?.errors ?? []))
@@ -166,7 +173,7 @@ export class DragActionHandler<
 		for (const edge of edges) {
 			// edge already has an error
 			if (edge.error) continue
-			for (const action of Object.values<IDragAction>(this.actions)) {
+			for (const action of Object.values<IAction>(this.actions)) {
 				action.annotateEdge?.(edge, frames)
 				if (edge.error) break
 			}
@@ -188,20 +195,20 @@ export class DragActionHandler<
 		}
 	}
 
-	onDragApply(
-		state: DragState,
+	onMoveApply(
+		state: MoveState,
 		forceRecalculateEdges: () => void
-	): { apply: boolean, result: any } {
+	): ActionHandlerApplyResult {
 		if (this.activeAction) {
-			const res = this.actions[this.activeAction]!.onDragApply(state, forceRecalculateEdges)
+			const res = this.actions[this.activeAction]!.onMoveApply(state, forceRecalculateEdges)
 			this.hooks.onEnd?.({ cancelled: false, applied: res })
-			return { apply: res, result: undefined }
+			return { apply: !res, result: undefined }
 		}
 		this.hooks.onEnd?.({ cancelled: false, applied: false })
 		return { apply: true, result: undefined }
 	}
 
-	cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void {
+	cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void {
 		if (this.activeAction) {
 			this.actions[this.activeAction].cancel(e, state)
 		}
@@ -213,7 +220,7 @@ export class DragActionHandler<
 	static debugState(
 		pluginName: string,
 		type: "before" | "after" | string,
-		state: DragState,
+		state: MoveState,
 		pluginState: Record<string, any> = {},
 		/** Object key to filter the state by, e.g. state.win.frames. If false is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */
 		key?: string | boolean

package/src/runtime/{drag → move}/CloseAction.ts

@@ -1,4 +1,4 @@
-import { DragActionHandler } from "./DragActionHandler.js"
+import { ActionHandler } from "./ActionHandler.js"
 
 import { dirToOrientation } from "../helpers/dirToOrientation.js"
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js"
@@ -6,12 +6,12 @@ import { oppositeSide } from "../helpers/oppositeSide.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js"
-import type { ActionDragChangeResult, CloseDeco, DragState, IDragAction } from "../types/index.js"
+import type { ActionChangeResult, CloseDeco, IAction, MoveState } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>
 
-export class CloseAction implements IDragAction {
+export class CloseAction implements IAction {
 	name = "close" as const
 	minDragDistance = 5
 
@@ -20,13 +20,13 @@ export class CloseAction implements IDragAction {
 		force: boolean
 		res: CloseInfo
 		cacheKey: string | undefined
-		lastReturn: ActionDragChangeResult
+		lastReturn: ActionChangeResult
 	} | {
 		allowed: false
 		force: boolean
 		res: CloseInfo | undefined
 		cacheKey: string | undefined
-		lastReturn: ActionDragChangeResult | undefined
+		lastReturn: ActionChangeResult | undefined
 	} = {} as any // this is initialized by this.reset()
 
 	debug: boolean | string = false
@@ -40,7 +40,7 @@ export class CloseAction implements IDragAction {
 		transformError: e => e.message
 	}
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force" = (e: PointerEvent | KeyboardEvent) => {
+	handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean | "force" = (e: PointerEvent | KeyboardEvent) => {
 		if (e.ctrlKey && e.shiftKey) {
 			return "force"
 		}
@@ -86,10 +86,10 @@ export class CloseAction implements IDragAction {
 		this.modifyDecos([])
 	}
 
-	private _getDecos(state: DragState): CloseDeco[] {
+	private _getDecos(state: MoveState): CloseDeco[] {
 		let decos: CloseDeco[] = []
-		const { isDragging } = state
-		if (isDragging && this.state.allowed && this.state.res) {
+		const { isMoving } = state
+		if (isMoving && this.state.allowed && this.state.res) {
 			const { force } = this.state
 			decos = this.state.res.deleted.map(_ => ({
 				id: _.id,
@@ -136,12 +136,12 @@ export class CloseAction implements IDragAction {
 	}
 
 
-	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
-		const { draggingEdges } = state
-		if (draggingEdges.length !== 1) return false
+	canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean {
+		const { movingEdges } = state
+		if (movingEdges.length !== 1) return false
 		const res = this.handleEvent(e, state)
 		this.state.force = res === "force"
-		this.setTextHints(state.isDragging === "edge" ? true : undefined)
+		this.setTextHints(state.isMoving === "edge" ? true : undefined)
 		if (res) {
 			this.hooks.onStart?.(true)
 			return true
@@ -150,47 +150,47 @@ export class CloseAction implements IDragAction {
 		return false
 	}
 
-	onDragChange(
-		_type: "start" | "end" | "move",
+	onMoveChange(
+		type: "start" | "end" | "move",
 		_e: PointerEvent | undefined,
-		state: DragState
-	): ActionDragChangeResult {
-		if (state.dragDistance <= this.minDragDistance) {
+		state: MoveState
+	): ActionChangeResult {
+		if (state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [] }
 		}
 		const {
 			touchingFramesArrays,
-			dragDirections,
-			isDragging,
-			draggingEdges,
+			moveDirections,
+			isMoving,
+			movingEdges,
 			visualEdges,
 			frames,
-			isDraggingFromWindowEdge,
-			dragPoint
+			isMovingFromWindowEdge,
+			movePoint
 		} = state
-		const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]))
-		const cacheKey = `${dragPoint?.x}-${dragPoint?.y}-${dragDirections[oppositeOrientation]!}-${this.state.force}`
+		const oppositeOrientation = oppositeSide(getEdgeOrientation(movingEdges[0]))
+		const cacheKey = `${movePoint?.x}-${movePoint?.y}-${moveDirections[oppositeOrientation]!}-${this.state.force}`
 		if (this.state.allowed) {
 			if (this.state.cacheKey === cacheKey) {
 				return this.state.lastReturn
 			}
 		}
-		if (isDragging && draggingEdges.length === 1) {
+		if (isMoving && movingEdges.length === 1) {
 			const res = findFramesTouchingEdge(
-				draggingEdges[0],
+				movingEdges[0],
 				touchingFramesArrays[0],
 				{
-					// referencePoint: dragPoint.value, // if force pick smallest frame?
-					searchDirections: [dragDirections[oppositeOrientation]!]
+					// referencePoint: movePoint.value, // if force pick smallest frame?
+					searchDirections: [moveDirections[oppositeOrientation]!]
 				}
 			)
 			if (res.length > 0) {
-				const orientation = dirToOrientation(dragDirections[oppositeOrientation]!)
+				const orientation = dirToOrientation(moveDirections[oppositeOrientation]!)
 				const sizeKey = orientation === "horizontal" ? "width" : "height"
 				const smallestFrameSize = Math.min(...res.map(_ => _.frame[sizeKey]))
 				const frame = res.find(_ => _.frame[sizeKey] === smallestFrameSize)!.frame!
 
-				const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, dragDirections[oppositeOrientation]!, "dir", this.state.force)
+				const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, moveDirections[oppositeOrientation]!, "dir", this.state.force)
 				this.state.cacheKey = cacheKey
 				this.setTextHints(closeInfo)
 				if (!(closeInfo instanceof Error)) {
@@ -205,24 +205,29 @@ export class CloseAction implements IDragAction {
 			}
 		}
 		const decos = this._getDecos(state)
-		this.state.lastReturn = { updateEdges: !isDraggingFromWindowEdge, shapes: decos.flatMap(_ => _.shapes) }
+		this.state.lastReturn = {
+			updateEdges: !isMovingFromWindowEdge,
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes)
+		}
 		return this.state.lastReturn
 	}
 
-	onDragApply(state: DragState): boolean {
+	onMoveApply(state: MoveState): boolean {
 		if (this.state.res) {
 			const win = state.win
-			if (this.debug) { DragActionHandler.debugState(this.name, "before", state, this.state, this.debug) }
+			if (this.debug) { ActionHandler.debugState(this.name, "before", state, this.state, this.debug) }
 			applyFrameChanges(win, this.state.res)
-			if (this.debug) { DragActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
-			this.reset()
+			if (this.debug) { ActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
 			return true
 		}
 		return false
 	}
 
 	cancel(): void {
-		this.reset()
 		this.hooks.onCancel?.()
 	}
+
+	onMoveEnded() {
+		this.reset()
+	}
 }