@witchcraft/layout 0.4.4 → 0.5.1

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

@@ -1,17 +1,17 @@
-import { DragActionHandler } from "./DragActionHandler.js"
+import { ActionHandler } from "./ActionHandler.js"
 
 import { createZoneSideClipPath } from "../helpers/createZoneSideClipPath.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
-import { getDragZones } from "../layout/getDragZones.js"
 import { getFrameDockInfo } from "../layout/getFrameDockInfo.js"
 import { getFrameRearrangeInfo } from "../layout/getFrameRearrangeInfo.js"
 import { getFrameSwapInfo } from "../layout/getFrameSwapInfo.js"
+import { getZones } from "../layout/getZones.js"
 import { settings } from "../settings.js"
-import type { ActionDragChangeResult, DragState, DragZone, FrameDragDeco, IDragAction, LayoutChange } from "../types/index.js"
+import type { ActionChangeResult, FrameDeco, IAction, LayoutChange, MoveState, Zone } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 
-export class FrameDragAction implements IDragAction {
+export class FrameDragAction implements IAction {
 	name = "frameDrag" as const
 
 	minDragDistance = 5
@@ -25,8 +25,8 @@ export class FrameDragAction implements IDragAction {
 	debug: boolean | string = false
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean
-		= (_e: PointerEvent | KeyboardEvent, state: DragState) => state.isDragging === "frame"
+	handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean
+		= (_e: PointerEvent | KeyboardEvent, state: MoveState) => state.isMoving === "frame"
 
 	dragHints: {
 		actions: { split?: string, swap?: string, rearrange?: string, dock?: string } | ((state: { type: "split" | "swap" | "rearrange" | "dock" }) => string[])
@@ -41,7 +41,7 @@ export class FrameDragAction implements IDragAction {
 		transformError: e => e.message
 	}
 
-	modifyDecos: (shapes: FrameDragDeco[]) => void = () => { }
+	modifyDecos: (shapes: FrameDeco[]) => void = () => { }
 	hooks: {
 		onStart?: () => void
 		onCancel?: () => void
@@ -101,15 +101,15 @@ export class FrameDragAction implements IDragAction {
 
 
 	getDecos(
-		matchedZone: DragZone | undefined,
-		state: DragState,
+		matchedZone: Zone | undefined,
+		state: MoveState,
 		result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined
-	): FrameDragDeco[] {
+	): FrameDeco[] {
 		const isError = result instanceof Error
-		const frame = state.dragHoveredFrame
+		const frame = state.moveHoveredFrame
 
 		if (!matchedZone || !frame) {
-			const decos: FrameDragDeco[] = []
+			const decos: FrameDeco[] = []
 			this.modifyDecos(decos)
 			return decos
 		}
@@ -120,7 +120,7 @@ export class FrameDragAction implements IDragAction {
 			? `deco-frame-drag deco-frame-drag-error deco-frame-drag-${matchedZone.type}-${matchedZone.side} bg-red-500/50`
 			: `deco-frame-drag deco-frame-drag-${matchedZone.type}-${matchedZone.side} bg-blue-500/50`
 
-		const decos: FrameDragDeco[] = [{
+		const decos: FrameDeco[] = [{
 			id: frame.id,
 			type: "drop",
 			position: matchedZone.side ?? "center",
@@ -139,7 +139,7 @@ export class FrameDragAction implements IDragAction {
 		return decos
 	}
 
-	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
+	canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean {
 		const res = this.handleEvent(e, state)
 		this.setTextHints(undefined)
 		if (res) {
@@ -150,29 +150,29 @@ export class FrameDragAction implements IDragAction {
 		return false
 	}
 
-	onDragChange<T extends "start" | "move" | "end">(
-		_type: T,
+	onMoveChange<T extends "start" | "move" | "end">(
+		type: T,
 		_e: PointerEvent | undefined,
-		state: DragState
-	): ActionDragChangeResult {
-		if (state.dragDistance <= this.minDragDistance) {
-			return { updateEdges: false, shapes: [], showDragging: false }
+		state: MoveState
+	): ActionChangeResult {
+		if (state.moveDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [], showMoving: false }
 		}
-		const { win, draggingFrameId, dragHoveredFrame } = state
-		const matchedZone = getDragZones(state, settings.zoneSizes)
+		const { win, movingFrameId, moveHoveredFrame } = state
+		const matchedZone = getZones(state, settings.zoneSizes)
 
 		if (!matchedZone) {
 			this.state.lastReturn = undefined
-		} else if (dragHoveredFrame && matchedZone.type === "frame" && matchedZone.side) {
+		} else if (moveHoveredFrame && matchedZone.type === "frame" && matchedZone.side) {
 			if (matchedZone.side !== "center") {
-				this.state.lastReturn = getFrameRearrangeInfo(win, draggingFrameId!, dragHoveredFrame.id!, matchedZone.side)
+				this.state.lastReturn = getFrameRearrangeInfo(win, movingFrameId!, moveHoveredFrame.id!, matchedZone.side)
 			} else {
-				this.state.lastReturn = getFrameSwapInfo(win, draggingFrameId!, dragHoveredFrame.id!)
+				this.state.lastReturn = getFrameSwapInfo(win, movingFrameId!, moveHoveredFrame.id!)
 				// for the hints
 				if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "swap"
 			}
-		} else if (matchedZone.type === "window" && dragHoveredFrame && !dragHoveredFrame.docked) {
-			this.state.lastReturn = getFrameDockInfo(win, draggingFrameId!, matchedZone.side)
+		} else if (matchedZone.type === "window" && moveHoveredFrame && !moveHoveredFrame.docked) {
+			this.state.lastReturn = getFrameDockInfo(win, movingFrameId!, matchedZone.side)
 			// for the hints
 			if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "dock"
 		}
@@ -181,32 +181,33 @@ export class FrameDragAction implements IDragAction {
 		const decos = this.getDecos(matchedZone, state, this.state.lastReturn)
 
 		return {
-			shapes: decos.flatMap(_ => _.shapes),
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
 			updateEdges: false,
-			showDragging: false
+			showMoving: false
 		}
 	}
 
-	onDragApply(state: DragState): boolean {
+	onMoveApply(state: MoveState): boolean {
 		const result = this.state.lastReturn
-		if (!result || !state.dragHoveredFrame || !state.draggingFrameId) {
-			this.reset()
+		if (!result || !state.moveHoveredFrame || !state.movingFrameId) {
 			return true
 		}
 
-
 		if (result instanceof Error) {
 			this.hooks.onError?.(result)
 		} else {
-			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(state.win, result)
-			if (this.debug) { DragActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
+			if (this.debug) { ActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
 		}
 
-		this.reset()
 		return true
 	}
 
+	onMoveEnded() {
+		this.reset()
+	}
+
 	cancel(): void {
 		this.reset()
 	}

package/src/runtime/{drag/DragDirectionStore.ts → move/MoveDirectionStore.ts}

@@ -1,19 +1,19 @@
 import type { Direction, Orientation, Point } from "../types/index.js"
 
-export class DragDirectionStore {
+export class MoveDirectionStore {
 	hooks: {
 		onUpdate: (directions: Record<Orientation, Direction | undefined>) => void
 	}
 
 	constructor(
-		hooks: DragDirectionStore["hooks"]
+		hooks: MoveDirectionStore["hooks"]
 	) {
 		this.hooks = hooks
 	}
 
 	lastPoint: Point | undefined
 
-	dragDirection: Record<Orientation, Direction | undefined> = {} as any
+	moveDirection: Record<Orientation, Direction | undefined> = {} as any
 
 	lesser: { x: Direction, y: Direction } = {
 		x: "left",
@@ -27,20 +27,20 @@ export class DragDirectionStore {
 
 	reset(): void {
 		this.lastPoint = undefined
-		this.dragDirection = {} as any
+		this.moveDirection = {} as any
 	}
 
 	update(point: Point): boolean {
 		// eslint-disable-next-line @typescript-eslint/naming-convention
-		const newXDirection = this.getDragDirection("x", point)
+		const newXDirection = this.getMoveDirection("x", point)
 		// eslint-disable-next-line @typescript-eslint/naming-convention
-		const newYDirection = this.getDragDirection("y", point)
+		const newYDirection = this.getMoveDirection("y", point)
 		let changed = false
 		if (newXDirection) {
-			this.dragDirection.horizontal = newXDirection
+			this.moveDirection.horizontal = newXDirection
 		}
 		if (newYDirection) {
-			this.dragDirection.vertical = newYDirection
+			this.moveDirection.vertical = newYDirection
 		}
 
 		if (this.lastPoint?.x !== point.x || this.lastPoint?.y !== point.y) {
@@ -49,11 +49,11 @@ export class DragDirectionStore {
 		}
 
 		if (!changed) return false
-		this.hooks.onUpdate(this.dragDirection)
+		this.hooks.onUpdate(this.moveDirection)
 		return true
 	}
 
-	getDragDirection(coord: "x" | "y", point: Point): Direction | false {
+	getMoveDirection(coord: "x" | "y", point: Point): Direction | false {
 		if (!this.lastPoint) return false
 		const diff = point[coord] - this.lastPoint![coord]
 		if (diff > 0) return this.greater[coord]

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

@@ -1,11 +1,11 @@
-import { DragActionHandler } from "./DragActionHandler.js"
+import { ActionHandler } from "./ActionHandler.js"
 
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js"
 import { oppositeSide } from "../helpers/oppositeSide.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { createSplitDecoFromDrag } from "../layout/createSplitDecoFromDrag.js"
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js"
-import type { ActionDragChangeResult, DragState, IDragAction, LayoutShape, Point, SplitDeco } from "../types/index.js"
+import type { ActionChangeResult, IAction, LayoutShape, MoveState, Point, SplitDeco } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>
@@ -14,7 +14,7 @@ export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError
 
 export type DragChangeType = "start" | "move" | "end"
 
-export class SplitAction implements IDragAction {
+export class SplitAction implements IAction {
 	name = "split" as const
 	minDragDistance = 5
 
@@ -27,7 +27,7 @@ export class SplitAction implements IDragAction {
 		allowed: false
 		res: SplitInfo | undefined
 		lastPoint: Point | undefined
-		lastReturn: ActionDragChangeResult | undefined
+		lastReturn: ActionChangeResult | undefined
 	} = {} as any // this is initialized by `this.reset()`
 
 	debug: boolean | string = false
@@ -40,8 +40,8 @@ export class SplitAction implements IDragAction {
 		transformError: e => e.message
 	}
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean
-		= (e: PointerEvent | KeyboardEvent, state: DragState) => e.altKey || state.isDraggingFromWindowEdge
+	handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean
+		= (e: PointerEvent | KeyboardEvent, state: MoveState) => e.altKey || state.isMovingFromWindowEdge
 
 	modifyDecos: (shapes: SplitDeco[]) => void = () => { }
 	hooks: {
@@ -83,23 +83,23 @@ export class SplitAction implements IDragAction {
 		this.modifyDecos([])
 	}
 
-	getDecos(state: DragState): SplitDeco[] {
+	getDecos(state: MoveState): SplitDeco[] {
 		let decos: SplitDeco[] = []
 		const {
 			win,
-			isDragging,
-			dragHoveredFrame,
-			dragDirections,
-			draggingEdges,
-			dragPoint
+			isMoving,
+			moveHoveredFrame,
+			moveDirections,
+			movingEdges,
+			movePoint
 		} = state
-		if (isDragging && this.state.allowed && dragHoveredFrame && draggingEdges.length === 1) {
-			const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]))
+		if (isMoving && this.state.allowed && moveHoveredFrame && movingEdges.length === 1) {
+			const oppositeOrientation = oppositeSide(getEdgeOrientation(movingEdges[0]))
 			const deco = createSplitDecoFromDrag(
 				win.frames,
-				dragHoveredFrame,
-				dragDirections[oppositeOrientation]!,
-				dragPoint!
+				moveHoveredFrame,
+				moveDirections[oppositeOrientation]!,
+				movePoint!
 			)
 			decos = [deco]
 		}
@@ -107,11 +107,11 @@ export class SplitAction implements IDragAction {
 		return decos
 	}
 
-	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
 		// 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)
+		this.setTextHints(state.isMoving === "edge" && !state.isMovingFromWindowEdge ? true : undefined)
 		if (this.handleEvent(e, state)) {
 			this.hooks.onStart?.()
 			return true
@@ -144,26 +144,26 @@ export class SplitAction implements IDragAction {
 		return this.textHints
 	}
 
-	calculateSplitRequest(state: DragState): boolean {
+	calculateSplitRequest(state: MoveState): boolean {
 		const {
-			dragHoveredFrame,
-			dragDirections,
-			draggingEdges,
-			dragPoint,
+			moveHoveredFrame,
+			moveDirections,
+			movingEdges,
+			movePoint,
 			win
 		} = state
-		const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]))
-		const originalDragHoveredFrame = win.frames[dragHoveredFrame!.id]
+		const oppositeOrientation = oppositeSide(getEdgeOrientation(movingEdges[0]))
+		const originalDragHoveredFrame = win.frames[moveHoveredFrame!.id]
 		const canSplit = getFrameSplitInfo(
 			originalDragHoveredFrame!,
-			dragDirections[oppositeOrientation]!,
-			dragPoint!
+			moveDirections[oppositeOrientation]!,
+			movePoint!
 		)
-		this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? canSplit : undefined)
+		this.setTextHints(state.isMoving === "edge" && !state.isMovingFromWindowEdge ? canSplit : undefined)
 		if (!(canSplit instanceof Error)) {
 			this.state.allowed = true
 			this.state.res = canSplit
-			this.state.lastPoint = dragPoint ? { ...dragPoint } : undefined
+			this.state.lastPoint = movePoint ? { ...movePoint } : undefined
 			return true
 		} else {
 			this.hooks.onError?.(canSplit)
@@ -173,18 +173,18 @@ export class SplitAction implements IDragAction {
 		}
 	}
 
-	onDragChange(
-		_type: "start" | "end" | "move",
+	onMoveChange(
+		type: "start" | "end" | "move",
 		_e: PointerEvent | undefined,
-		state: DragState
-	): ActionDragChangeResult {
-		const { dragHoveredFrame, dragDistance } = state
-		if (dragDistance <= this.minDragDistance) {
-			return { updateEdges: false, shapes: [], showDragging: false }
+		state: MoveState
+	): ActionChangeResult {
+		const { moveHoveredFrame, moveDistance } = state
+		if (moveDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [], showMoving: false }
 		}
 		let ok = false
-		if (dragHoveredFrame) {
-			if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {
+		if (moveHoveredFrame) {
+			if (this.state.lastPoint?.x === state.movePoint?.x && this.state.lastPoint?.y === state.movePoint?.y && this.state.lastReturn) {
 				return this.state.lastReturn!
 			}
 			ok = this.calculateSplitRequest(state)
@@ -192,42 +192,52 @@ export class SplitAction implements IDragAction {
 		const decos = this.getDecos(state)
 
 		if (!ok) {
-			if (dragHoveredFrame && dragHoveredFrame.docked) {
+			if (moveHoveredFrame && moveHoveredFrame.docked) {
 				const errorDeco: LayoutShape = {
 					type: "rect",
 					data: {
-						x: dragHoveredFrame.x,
-						y: dragHoveredFrame.y,
-						width: dragHoveredFrame.width,
-						height: dragHoveredFrame.height
+						x: moveHoveredFrame.x,
+						y: moveHoveredFrame.y,
+						width: moveHoveredFrame.width,
+						height: moveHoveredFrame.height
 					},
 					attrs: { class: "deco-split-error bg-red-500/50" }
 				}
-				this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showDragging: false }
+				this.state.lastReturn = {
+					updateEdges: true,
+					shapes: type === "end" ? [] : [errorDeco],
+					showMoving: false
+				}
 				return this.state.lastReturn
 			}
 		}
-		this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap(_ => _.shapes), showDragging: false }
+		this.state.lastReturn = {
+			updateEdges: false,
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
+			showMoving: false
+		}
 		return this.state.lastReturn
 	}
 
-	onDragApply(state: DragState): boolean {
-		if (this.state.res && state.dragHoveredFrame) {
+	onMoveApply(state: MoveState): boolean {
+		if (this.state.res && state.moveHoveredFrame) {
 			// this only caches once per frame hovered over
 			// so the drag position is outdated, we must recalculate
 			const ok = this.calculateSplitRequest(state)
 			if (ok) {
-				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(state.win, this.state.res!)
-				if (this.debug) { DragActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
+				if (this.debug) { ActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
 			}
 		}
-		this.reset()
 		return true
 	}
 
-	cancel(): void {
+	onMoveEnded() {
 		this.reset()
+	}
+
+	cancel(): void {
 		this.hooks.onCancel?.()
 	}
 }

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

@@ -2,7 +2,7 @@ import { CloseAction } from "./CloseAction"
 import { FrameDragAction } from "./FrameDragAction.js"
 import { SplitAction } from "./SplitAction.js"
 
-import type { IDragAction } from "../types/index.js"
+import type { IAction } from "../types/index.js"
 
 /**
  * Creates the default drag actions (Split, Close, FrameDrag).
@@ -11,7 +11,7 @@ export function createDefaultHandlers(config: {
 	debugSplit?: boolean
 	debugClose?: boolean
 	debugFrameDrag?: boolean
-} = {}): IDragAction[] {
+} = {}): IAction[] {
 	return [
 		new SplitAction(undefined, undefined, undefined, { debug: config.debugSplit }),
 		new CloseAction(undefined, undefined, undefined, { debug: config.debugClose }),