@witchcraft/layout 0.1.3 → 0.2.1

package/src/runtime/drag/DragActionHandler.ts

@@ -1,6 +1,8 @@
-import type { RecordFromArray } from "@alanscodelog/utils"
+import { get, type RecordFromArray } from "@alanscodelog/utils"
 
-import type { DragChangeHandler, DragState, IDragAction } from "./types.js"
+import type { DragChangeHandler, DragChangeResult, DragState, IDragAction } from "./types.js"
+
+import type { LayoutShape } from "../types/index.js"
 
 /**
  * Handles the lifecycle of a drag actions {@link IDragAction} and provides additional hooks.
@@ -15,11 +17,15 @@ export class DragActionHandler<
 
 	actions: TDragActions
 
-	eventCanceller: (() => void) | undefined = undefined
+	eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void) | undefined = undefined
+
+	boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
 
-	boundCancel: () => void
+	defaultOnDragChange: DragChangeHandler = (type, _e, state, _forceRecalculateEdges, _cancel) => ({
+		updateEdges: type === "move" ? !state.isDraggingFromWindowEdge : true,
+		shapes: []
+	})
 
-	defaultOnDragChange: DragChangeHandler
 	hooks: {
 		/** Called while dragging during dragChange events. You can use this to update the dragging edges. */
 		onRecalculate?: () => void
@@ -35,17 +41,23 @@ export class DragActionHandler<
 		onEnd?: (context: { cancelled: boolean, applied: boolean }) => void
 	}
 
+	/** 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. */
+	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
+
 	constructor(
+		actions: TRawDragActions,
+		hooks: DragActionHandler<TRawDragActions, TDragActions>["hooks"] = {},
 		/**
 		 * Default onDragChange handler for when no action can handle the request.
 		 *
 		 * Should return true to allow the edges to be moved, or false to prevent it.
 		 */
-		defaultOnDragChange: DragChangeHandler,
-		actions: TRawDragActions,
-		hooks: DragActionHandler<TRawDragActions, TDragActions>["hooks"] = {}
+		defaultOnDragChange?: DragChangeHandler
 	) {
-		this.defaultOnDragChange = defaultOnDragChange
+		if (defaultOnDragChange) this.defaultOnDragChange = defaultOnDragChange
 		this.hooks = hooks
 		this.actions = {} as any
 		for (const action of actions) {
@@ -65,7 +77,7 @@ export class DragActionHandler<
 		let cancelled = false
 		this.hooks.onEvent?.(e, () => {
 			cancelled = true
-			this.cancel()
+			this.cancel(e, state)
 		})
 		if (cancelled) return
 
@@ -87,7 +99,7 @@ export class DragActionHandler<
 
 		if (oldActiveAction !== this.activeAction) {
 			if (oldActiveAction) {
-				this.actions[oldActiveAction]!.cancel()
+				this.actions[oldActiveAction]!.cancel(e, state)
 			}
 			this.hooks.onRequestChange?.(this.activeAction)
 		}
@@ -104,22 +116,38 @@ export class DragActionHandler<
 		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
 		state: DragState,
 		forceRecalculateEdges: () => void,
-		cancel?: () => void
-	): boolean | undefined {
+		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
+	): DragChangeResult {
 		if (type === "start") {
 			this.eventCanceller = cancel
-			state.isDragging = true
 			this.eventHandler(e!, state, forceRecalculateEdges)
 		}
 		if (type === "end") {
-			state.isDragging = false
 			this.activeAction = undefined
 		}
 
 		if (this.activeAction) {
-			return this.actions[this.activeAction]!.onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel)
+			const res = this.actions[this.activeAction]!.onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel)
+			// 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)
+		this.shapes.splice(0, this.shapes.length, ...res.shapes)
+		return res
+	}
+
+	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)) {
+			const res = action.getTextHints?.(type)
+			this.textHints.actions.push(...(res?.actions ?? []))
+			this.textHints.errors.push(...(res?.errors ?? []))
 		}
-		return this.defaultOnDragChange(type, e, state, forceRecalculateEdges, this.boundCancel)
 	}
 
 	onDragApply(
@@ -135,12 +163,35 @@ export class DragActionHandler<
 		return true
 	}
 
-	cancel(): void {
+	cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void {
 		if (this.activeAction) {
-			this.actions[this.activeAction].cancel()
+			this.actions[this.activeAction].cancel(e, state)
 		}
 		this.activeAction = undefined
-		this.eventCanceller?.()
+		this.eventCanceller?.(e, state)
 		this.hooks.onEnd?.({ cancelled: true, applied: false })
 	}
+
+	static debugState(
+		pluginName: string,
+		type: "before" | "after" | string,
+		state: DragState,
+		pluginState: Record<string, any> = {},
+		/** Object key to filter the state by, e.g. state.win.frames. If boolean is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */
+		key?: string | boolean
+	): void {
+		let res = { state, pluginState }
+		let pickedRes: any = {}
+		if (typeof key === "string" && key !== "") {
+			pickedRes = {} as any
+			const paths = key.split(",").map(_ => _.trim()).filter(_ => _)
+			for (const path of paths) {
+				pickedRes[path] = get(res, path.split("."))
+			}
+			res = pickedRes as any
+		}
+		const resString = JSON.stringify(res, null, 2)
+		// eslint-disable-next-line no-console
+		console.log(`[Drag Action Debug - ${pluginName}]:`, type, resString)
+	}
 }

package/src/runtime/drag/FrameDragAction.ts

@@ -0,0 +1,202 @@
+import { DragActionHandler } from "./DragActionHandler.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 { settings } from "../settings.js"
+import type { ActionDragChangeResult, DragState, DragZone, FrameDragDeco, IDragAction, LayoutChange } from "../types/index.js"
+import type { KnownError } from "../utils/KnownError.js"
+
+
+export class FrameDragAction implements IDragAction {
+	name = "frameDrag" as const
+	state: {
+		lastReturn?: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError
+	} = {
+		lastReturn: undefined
+	}
+
+	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"
+
+	dragHints: {
+		actions: { split: string, swap: string, rearrange: string, dock: string }
+		transformError: (e: KnownError) => string
+	} = {
+		actions: {
+			split: "Drop to Split the current frame.",
+			swap: "Drop to Swap the frames.",
+			rearrange: "Drop to Move the frame.",
+			dock: "Drop to Dock the frame."
+		},
+		transformError: e => e.message
+	}
+
+	modifyDecos: (shapes: FrameDragDeco[]) => void = () => { }
+	hooks: {
+		onStart?: () => void
+		onCancel?: () => void
+		onError?: (e: KnownError) => void
+	} = {}
+
+	constructor(
+		handleEvent?: FrameDragAction["handleEvent"],
+		/** Modify the created decos before they are rendered. */
+		modifyDecos?: FrameDragAction["modifyDecos"],
+		hooks: FrameDragAction["hooks"] = {},
+		config?: {
+			debug?: boolean | string
+		}
+	) {
+		if (handleEvent !== undefined) this.handleEvent = handleEvent
+		if (modifyDecos !== undefined) this.modifyDecos = modifyDecos
+		this.hooks = hooks
+		if (config?.debug) this.debug = true
+
+		this.reset()
+	}
+
+	reset(): void {
+		this.state = {
+			lastReturn: undefined
+		}
+	}
+
+	setTextHints(result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): void {
+		if (result === undefined || !result.info) {
+			this.textHints.actions = []
+			this.textHints.errors = []
+		} else if (result instanceof Error) {
+			this.textHints.actions = []
+			this.textHints.errors = [this.dragHints.transformError(result)]
+		} else {
+			const text = this.dragHints.actions[result.info]
+			this.textHints.actions = [text]
+			this.textHints.errors = []
+		}
+	}
+
+	getTextHints(type: "start" | "move" | "end"): {
+		actions: string[]
+		errors: string[]
+	} {
+		if (type === "end") { this.setTextHints(undefined) }
+		return this.textHints
+	}
+
+
+	getDecos(
+		matchedZone: DragZone | undefined,
+		state: DragState,
+		result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined
+	): FrameDragDeco[] {
+		let decos: FrameDragDeco[] = []
+		const isError = result instanceof Error
+		const frame = state.dragHoveredFrame
+
+		if (!matchedZone || !frame) {
+			decos = []
+			this.modifyDecos(decos)
+			return decos
+		}
+
+		const clipPath = createZoneSideClipPath(matchedZone, settings.zoneSizes)
+
+		const classes = isError
+			? `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`
+
+		decos = [{
+			id: frame.id,
+			type: "drop",
+			position: matchedZone.side ?? "center",
+			shapes: [
+				{
+					type: "square",
+					data: matchedZone,
+					attrs: clipPath
+						? { class: classes, style: `clip-path:${clipPath}` }
+						: { class: classes }
+				}
+			]
+		}]
+
+		this.modifyDecos(decos)
+		return decos
+	}
+
+	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
+		const res = this.handleEvent(e, state)
+		this.setTextHints(undefined)
+		if (res) {
+			this.hooks.onStart?.()
+			return true
+		}
+		this.reset()
+		return false
+	}
+
+	onDragChange<T extends "start" | "move" | "end">(
+		_type: T,
+		_e: PointerEvent | undefined,
+		state: DragState
+	): ActionDragChangeResult {
+		const { win, draggingFrameId, dragHoveredFrame } = state
+		const matchedZone = getDragZones(state, settings.zoneSizes)
+
+		if (!matchedZone) {
+			this.state.lastReturn = undefined
+		} else if (dragHoveredFrame && matchedZone.type === "frame" && matchedZone.side) {
+			if (matchedZone.side !== "center") {
+				this.state.lastReturn = getFrameRearrangeInfo(win, draggingFrameId!, dragHoveredFrame.id!, matchedZone.side)
+			} else {
+				this.state.lastReturn = getFrameSwapInfo(win, draggingFrameId!, dragHoveredFrame.id!)
+				// for the hints
+				if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "swap"
+			}
+		} else if (matchedZone.type === "window") {
+			this.state.lastReturn = getFrameDockInfo(win, draggingFrameId!, matchedZone.side)
+			// for the hints
+			if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "dock"
+		}
+
+		this.setTextHints(this.state.lastReturn)
+		const decos = this.getDecos(matchedZone, state, this.state.lastReturn)
+
+		return {
+			shapes: decos.flatMap(_ => _.shapes),
+			updateEdges: false,
+			showDragging: false
+		}
+	}
+
+	onDragApply(state: DragState): boolean {
+		const result = this.state.lastReturn
+		if (!result || !state.dragHoveredFrame || !state.draggingFrameId) {
+			this.reset()
+			return true
+		}
+
+
+		if (result instanceof Error) {
+			this.hooks.onError?.(result)
+		} else {
+			if (this.debug) { DragActionHandler.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) }
+		}
+
+		this.reset()
+		return true
+	}
+
+	cancel(): void {
+		this.reset()
+	}
+}

package/src/runtime/drag/SplitAction.ts

@@ -1,29 +1,45 @@
-import type { DragState, IDragAction } from "./types.js"
+import { DragActionHandler } from "./DragActionHandler.js"
+import type { ActionDragChangeResult, DragState, IDragAction } from "./types.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 { frameSplit } from "../layout/frameSplit.js"
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js"
-import type { SplitDeco } from "../types/index.js"
+import type { LayoutShape, Point, SplitDeco } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>
+
 export class SplitAction implements IDragAction {
 	name = "split" as const
 
 	state: {
-		allowed: false
-		res: SplitInfo | undefined
-		cacheKey: string | undefined
-	} | {
 		allowed: true
 		res: SplitInfo
-		cacheKey: string | undefined
+		lastPoint: Point | undefined
+		lastReturn: undefined
+	} | {
+		allowed: false
+		res: SplitInfo | undefined
+		lastPoint: Point | undefined
+		lastReturn: ActionDragChangeResult | undefined
 	} = {} as any // this is initialized by `this.reset()`
 
+	debug: boolean | string = false
+	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
+	splitHints: {
+		action: string
+		transformError: (e: KnownError) => string
+	} = {
+		action: "Hold Alt to Split",
+		transformError: e => e.message
+	}
+
 	handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean
-	updateSplitDecos: (decos: SplitDeco[]) => void
+		= (e: PointerEvent | KeyboardEvent, state: DragState) => e.altKey || state.isDraggingFromWindowEdge
+
+	modifyDecos: (shapes: SplitDeco[]) => void = () => { }
 	hooks: {
 		onStart?: () => void
 		onCancel?: () => void
@@ -31,26 +47,37 @@ export class SplitAction implements IDragAction {
 	}
 
 	constructor(
-		handleEvent: SplitAction["handleEvent"],
-		updateSplitDecos: SplitAction["updateSplitDecos"],
-		hooks: SplitAction["hooks"] = {}
+		handleEvent?: SplitAction["handleEvent"],
+		/** Modify the created decos before they are rendered. */
+		modifyDecos?: SplitAction["modifyDecos"],
+		hooks: SplitAction["hooks"] = {},
+		config?: {
+			debug?: boolean | string
+			splitHints?: Partial<SplitAction["splitHints"]>
+		}
 	) {
-		this.handleEvent = handleEvent
-		this.updateSplitDecos = updateSplitDecos
+		if (handleEvent !== undefined) this.handleEvent = handleEvent
+		if (modifyDecos !== undefined) this.modifyDecos = modifyDecos
+
 		this.hooks = hooks
 		this.reset()
+		if (config?.debug) this.debug = true
+		if (config?.splitHints?.action) this.splitHints.action = config.splitHints.action
+		if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError
 	}
 
 	reset(): void {
 		this.state = {
 			allowed: false,
 			res: undefined,
-			cacheKey: undefined
+			lastPoint: undefined,
+			lastReturn: undefined
 		}
-		this.updateSplitDecos([])
+		this.modifyDecos([])
 	}
 
-	updateDecos(state: DragState): void {
+	getDecos(state: DragState): SplitDeco[] {
+		let decos: SplitDeco[] = []
 		const {
 			win,
 			isDragging,
@@ -67,15 +94,16 @@ export class SplitAction implements IDragAction {
 				dragDirections[oppositeOrientation]!,
 				dragPoint!
 			)
-			this.updateSplitDecos([deco])
-		} else {
-			this.updateSplitDecos([])
+			decos = [deco]
 		}
+		this.modifyDecos(decos)
+		return decos
 	}
 
 	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
 		const { draggingEdges } = state
 		if (draggingEdges.length !== 1) return false
+		this.setTextHints(state.isDragging === "edge" ? true : undefined)
 		if (this.handleEvent(e, state)) {
 			this.hooks.onStart?.()
 			return true
@@ -84,26 +112,52 @@ export class SplitAction implements IDragAction {
 		return false
 	}
 
+	setTextHints(result: true | SplitInfo | KnownError | undefined): void {
+		if (result === undefined) {
+			this.textHints.actions = []
+			this.textHints.errors = []
+		} else if (result instanceof Error) {
+			this.textHints.actions = []
+			this.textHints.errors = [this.splitHints.transformError(result)]
+		} else {
+			this.textHints.actions = [this.splitHints.action]
+			this.textHints.errors = []
+		}
+	}
+
+	getTextHints(type: "start" | "move" | "end"): {
+		actions: string[]
+		errors: string[]
+	} {
+		if (type === "end") { this.setTextHints(undefined) }
+		return this.textHints
+	}
+
 	calculateSplitRequest(state: DragState): boolean {
 		const {
 			dragHoveredFrame,
 			dragDirections,
 			draggingEdges,
-			dragPoint
+			dragPoint,
+			win
 		} = state
 		const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]))
+		const originalDragHoveredFrame = win.frames[dragHoveredFrame!.id]
 		const canSplit = getFrameSplitInfo(
-			dragHoveredFrame!,
+			originalDragHoveredFrame!,
 			dragDirections[oppositeOrientation]!,
 			dragPoint!
 		)
+		this.setTextHints(canSplit)
 		if (!(canSplit instanceof Error)) {
 			this.state.allowed = true
 			this.state.res = canSplit
-			this.state.cacheKey = dragHoveredFrame?.id
+			this.state.lastPoint = dragPoint ? { ...dragPoint } : undefined
 			return true
 		} else {
 			this.hooks.onError?.(canSplit)
+			this.state.lastPoint = undefined
+			this.state.allowed = false
 			return false
 		}
 	}
@@ -112,29 +166,47 @@ export class SplitAction implements IDragAction {
 		_type: "start" | "end" | "move",
 		_e: PointerEvent | undefined,
 		state: DragState
-	): true {
+	): ActionDragChangeResult {
 		const { dragHoveredFrame } = state
 		let ok = false
 		if (dragHoveredFrame) {
-			if (this.state.cacheKey === dragHoveredFrame.id) {
-				this.updateDecos(state)
-				return true
+			if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {
+				return this.state.lastReturn!
 			}
 			ok = this.calculateSplitRequest(state)
 		}
-		this.updateDecos(state)
+		const decos = this.getDecos(state)
+
 		if (!ok) {
-			this.state.allowed = false
+			if (dragHoveredFrame && dragHoveredFrame.docked) {
+				const errorDeco: LayoutShape = {
+					type: "square",
+					data: {
+						x: dragHoveredFrame.x,
+						y: dragHoveredFrame.y,
+						width: dragHoveredFrame.width,
+						height: dragHoveredFrame.height
+					},
+					attrs: { class: "deco-split-error bg-red-500/50" }
+				}
+				this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showDragging: false }
+				return this.state.lastReturn
+			}
 		}
-		return true
+		this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap(_ => _.shapes), showDragging: false }
+		return this.state.lastReturn
 	}
 
 	onDragApply(state: DragState): boolean {
-		if (this.state.res) {
+		if (this.state.res && state.dragHoveredFrame) {
 			// this only caches once per frame hovered over
-			// so the drag position is outdated
-			this.calculateSplitRequest(state)
-			frameSplit(state.win, this.state.res!)
+			// 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) }
+				applyFrameChanges(state.win, this.state.res!)
+				if (this.debug) { DragActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
+			}
 		}
 		this.reset()
 		return true

package/src/runtime/drag/createDefaultHandlers.ts

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

package/src/runtime/drag/defaultDragActions.ts

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