@witchcraft/layout 0.3.0 → 0.4.0

package/src/runtime/drag/CloseAction.ts

@@ -1,5 +1,4 @@
 import { DragActionHandler } from "./DragActionHandler.js"
-import type { ActionDragChangeResult, DragState, IDragAction } from "./types.js"
 
 import { dirToOrientation } from "../helpers/dirToOrientation.js"
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js"
@@ -7,7 +6,7 @@ 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 { CloseDeco } from "../types/index.js"
+import type { ActionDragChangeResult, CloseDeco, DragState, IDragAction } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>
@@ -94,7 +93,7 @@ export class CloseAction implements IDragAction {
 				force,
 				shapes: [
 					{
-						type: "square",
+						type: "rect",
 						data: { x: _.x, y: _.y, width: _.width, height: _.height },
 						attrs: {
 							class: force

package/src/runtime/drag/DragActionHandler.ts

@@ -1,8 +1,10 @@
 import { get, type RecordFromArray } from "@alanscodelog/utils"
 
-import type { DragChangeHandler, DragChangeResult, DragState, IDragAction } from "./types.js"
-
-import type { LayoutShape } from "../types/index.js"
+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 { 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.
@@ -21,10 +23,18 @@ export class DragActionHandler<
 
 	boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
 
-	defaultOnDragChange: DragChangeHandler = (type, _e, state, _forceRecalculateEdges, _cancel) => ({
-		updateEdges: type === "move" ? !state.isDraggingFromWindowEdge : true,
-		shapes: []
-	})
+	defaultOnDragChange: DragChangeHandler = (type, _e, state, _forceRecalculateEdges, _cancel) => {
+		const isTouchingCollapsedFrameEdge = type === "move"
+			&& state.isDragging === "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,
+			shapes: []
+		}
+	}
 
 	hooks: {
 		/** Called while dragging during dragChange events. You can use this to update the dragging edges. */
@@ -54,6 +64,8 @@ export class DragActionHandler<
 		 * 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.
+		 *
+		 * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
 		 */
 		defaultOnDragChange?: DragChangeHandler
 	) {
@@ -150,6 +162,32 @@ export class DragActionHandler<
 		}
 	}
 
+	annotateEdges(edges: Edge[], frames: LayoutFrame[]): void {
+		for (const edge of edges) {
+			// edge already has an error
+			if (edge.error) continue
+			for (const action of Object.values<IDragAction>(this.actions)) {
+				action.annotateEdge?.(edge, frames)
+				if (edge.error) break
+			}
+			// window edges don't resize anything
+			if (!edge.error && !isWindowEdge(edge)) {
+				const touching = findFramesTouchingEdge(edge, frames)
+				if (touching) {
+					// we check with a falsy check on PURPOSE, frames collapsed to 0 aren't an issue, they are ignored anyways
+					const collapsedFrame = touching.find(f => f.frame.collapsed)
+					if (collapsedFrame) {
+						edge.error = new KnownError(
+							LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME,
+							"Cannot Move: Can't Resize Collapsed Frame",
+							{ frame: (collapsedFrame.frame as LayoutFrame) }
+						)
+					}
+				}
+			}
+		}
+	}
+
 	onDragApply(
 		state: DragState,
 		forceRecalculateEdges: () => void
@@ -177,14 +215,14 @@ export class DragActionHandler<
 		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. */
+		/** 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
 	): void {
+		if (key === false) return
 		let res = { state, pluginState }
-		let pickedRes: any = {}
 		if (typeof key === "string" && key !== "") {
-			pickedRes = {} as any
 			const paths = key.split(",").map(_ => _.trim()).filter(_ => _)
+			const pickedRes: Record<string, any> = {}
 			for (const path of paths) {
 				pickedRes[path] = get(res, path.split("."))
 			}

package/src/runtime/drag/FrameDragAction.ts

@@ -96,12 +96,11 @@ export class FrameDragAction implements IDragAction {
 		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 = []
+			const decos: FrameDragDeco[] = []
 			this.modifyDecos(decos)
 			return decos
 		}
@@ -112,13 +111,13 @@ 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`
 
-		decos = [{
+		const decos: FrameDragDeco[] = [{
 			id: frame.id,
 			type: "drop",
 			position: matchedZone.side ?? "center",
 			shapes: [
 				{
-					type: "square",
+					type: "rect",
 					data: matchedZone,
 					attrs: clipPath
 						? { class: classes, style: `clip-path:${clipPath}` }
@@ -160,7 +159,7 @@ export class FrameDragAction implements IDragAction {
 				// for the hints
 				if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "swap"
 			}
-		} else if (matchedZone.type === "window") {
+		} else if (matchedZone.type === "window" && dragHoveredFrame && !dragHoveredFrame.docked) {
 			this.state.lastReturn = getFrameDockInfo(win, draggingFrameId!, matchedZone.side)
 			// for the hints
 			if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "dock"

package/src/runtime/drag/SplitAction.ts

@@ -1,16 +1,17 @@
 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 { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js"
-import type { LayoutShape, Point, SplitDeco } from "../types/index.js"
+import type { ActionDragChangeResult, DragState, IDragAction, LayoutShape, Point, SplitDeco } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>
 
+// note that we dont annotateEdges because is possible to forexample drag from a window edge to a frame that can be split, moving over a collapsed frame that was sharing the edge but can't be split
+
 export class SplitAction implements IDragAction {
 	name = "split" as const
 
@@ -180,7 +181,7 @@ export class SplitAction implements IDragAction {
 		if (!ok) {
 			if (dragHoveredFrame && dragHoveredFrame.docked) {
 				const errorDeco: LayoutShape = {
-					type: "square",
+					type: "rect",
 					data: {
 						x: dragHoveredFrame.x,
 						y: dragHoveredFrame.y,

package/src/runtime/drag/createDefaultHandlers.ts

@@ -1,7 +1,8 @@
 import { CloseAction } from "./CloseAction"
 import { FrameDragAction } from "./FrameDragAction.js"
 import { SplitAction } from "./SplitAction.js"
-import type { IDragAction } from "./types.js"
+
+import type { IDragAction } from "../types/index.js"
 
 /**
  * Creates the default drag actions (Split, Close, FrameDrag).

package/src/runtime/drag/defaultDragActions.ts

@@ -1,7 +1,8 @@
 import { CloseAction } from "./CloseAction"
 import { FrameDragAction } from "./FrameDragAction.js"
 import { SplitAction } from "./SplitAction.js"
-import type { IDragAction } from "./types.js"
+
+import type { IDragAction } from "../types/index.js"
 
 /**
  * Creates the default drag actions (Split, Close, FrameDrag).

package/src/runtime/helpers/consoleDebugWindow.ts

@@ -0,0 +1,331 @@
+import { castType } from "@alanscodelog/utils/castType"
+
+import { settings } from "../settings.js"
+import type { LayoutWindow, Point, Size } from "../types/index.js"
+
+/**
+ * See also {@link createDebugLabeler} for customizing the labeling function, for
+ * example to debug the pixel sizes instead of position/size:
+ *
+ * ```ts
+ * consoleDebugWindow(clone, 50, createDebugLabeler({
+ * 	showPxSize: true,
+ * 	showSize: false,
+ * 	showPos: false,
+ * 	getWin: () => clone
+ * }))
+ *
+ * @experimental
+ */
+export function consoleDebugWindow(
+	win: LayoutWindow,
+	targetWidth = 100,
+	labelFunc = createDebugLabeler()
+) {
+	const consoleCharAspect = 0.5
+
+	const windowAspect = win.pxWidth / win.pxHeight
+
+	const effectiveRatio = (1 / windowAspect) * consoleCharAspect
+	// eslint-disable-next-line no-console
+	console.log(boxesToText(Object.values(win.frames), targetWidth, {
+		heightScale: effectiveRatio,
+		labelFunc
+	}))
+}
+
+type Border = {
+	horizontal: string
+	vertical: string
+	topLeft: string
+	topRight: string
+	bottomLeft: string
+	bottomRight: string
+	cross: string
+	fill: string
+	labelBg: string
+}
+
+export function boxesToText<T extends Size & Point & { id?: string }>(
+	boxes: T[],
+	targetWidth = 100,
+	{
+		border = {} as any,
+		heightScale = 1,
+		labelFunc = () => ""
+	}: {
+		border?: Partial<Border>
+		heightScale?: number
+		labelFunc?: (box: T) => string
+	} = {}
+) {
+	border = {
+		horizontal: "─",
+		vertical: "│",
+		topLeft: "┌",
+		topRight: "┐",
+		bottomLeft: "└",
+		bottomRight: "┘",
+		cross: "┼",
+		fill: " ",
+		labelBg: " ",
+		...border
+	}
+	castType<Border>(border)
+
+	const normBoxes = boxes.map(box => ({
+		...box,
+		original: box,
+		id: box.id,
+		x: box.x / 100,
+		y: box.y / 100,
+		width: box.width / 100,
+		height: box.height / 100
+	}))
+
+	let minX = Infinity, minY = Infinity
+	let maxX = -Infinity, maxY = -Infinity
+
+	normBoxes.forEach(box => {
+		minX = Math.min(minX, box.x)
+		minY = Math.min(minY, box.y)
+		maxX = Math.max(maxX, box.x + box.width)
+		maxY = Math.max(maxY, box.y + box.height)
+	})
+
+	const availableWidth = targetWidth
+	const availableHeight = Math.floor(availableWidth * heightScale)
+
+	const totalWidth = maxX - minX || 1
+	const totalHeight = maxY - minY || 1
+
+	/* eslint-disable @typescript-eslint/naming-convention */
+	const scaleX_final = availableWidth / totalWidth
+	const scaleY_final = availableHeight / totalHeight
+	/* eslint-enable @typescript-eslint/naming-convention */
+
+	const scaledBoxes = normBoxes.map(box => {
+		const idPart = box.id !== undefined && box.id !== null && box.id !== ""
+			? String(box.id)
+			: "??"
+		const funcLabel = labelFunc(box.original)
+		const label = funcLabel && funcLabel.trim()
+			? `${idPart} ${funcLabel}`
+			: idPart
+
+		return {
+			id: box.id,
+			x: (box.x - minX) * scaleX_final,
+			y: (box.y - minY) * scaleY_final,
+			width: box.width * scaleX_final,
+			height: box.height * scaleY_final,
+			label: label,
+			original: box
+		}
+	})
+
+	const cols = Math.min(availableWidth, Math.floor(totalWidth * scaleX_final))
+	const rows = Math.min(availableHeight, Math.floor(totalHeight * scaleY_final))
+
+	if (cols < 1 || rows < 1) {
+		return new Error("Grid too small to display")
+	}
+
+	type CellData = {
+		char: string
+		priority: number
+		type: "horizontal" | "vertical" | "corner" | "cross" | "fill" | "label"
+		boxIndex: number
+	}
+
+	const grid: CellData[][] = Array(rows).fill(null).map(() =>
+		Array(cols).fill(null).map(() => ({
+			char: border.fill,
+			priority: 0,
+			type: "fill" as const,
+			boxIndex: -1
+		}))
+	)
+
+	function setCell(x: number, y: number, char: string, priority: number, type: CellData["type"], boxIndex: number) {
+		if (x < 0 || y < 0 || x >= cols || y >= rows) return
+
+		const current = grid[y][x]
+
+		if (boxIndex > current.boxIndex
+			|| (boxIndex === current.boxIndex && priority > current.priority)) {
+			grid[y][x] = { char, priority, type, boxIndex }
+		}
+	}
+
+	function getCell(x: number, y: number): CellData | undefined {
+		if (x < 0 || y < 0 || x >= cols || y >= rows) return undefined
+		return grid[y][x]
+	}
+
+	for (let boxIndex = scaledBoxes.length - 1; boxIndex >= 0; boxIndex--) {
+		const box = scaledBoxes[boxIndex]
+		const x1 = Math.round(box.x)
+		const y1 = Math.round(box.y)
+		const x2 = Math.round(box.x + box.width)
+		const y2 = Math.round(box.y + box.height)
+
+		const clampedX1 = Math.max(0, Math.min(cols - 1, x1))
+		const clampedY1 = Math.max(0, Math.min(rows - 1, y1))
+		const clampedX2 = Math.max(0, Math.min(cols - 1, x2))
+		const clampedY2 = Math.max(0, Math.min(rows - 1, y2))
+
+		if (clampedX1 >= clampedX2 || clampedY1 >= clampedY2) continue
+
+		const edgePriority = 10
+
+		if (clampedY1 >= 0 && clampedY1 < rows) {
+			for (let x = clampedX1 + 1; x < clampedX2; x++) {
+				const cell = getCell(x, clampedY1)
+				if (cell && cell.type === "vertical" && cell.boxIndex !== boxIndex) {
+					setCell(x, clampedY1, border.cross, edgePriority, "cross", boxIndex)
+				} else {
+					setCell(x, clampedY1, border.horizontal, edgePriority, "horizontal", boxIndex)
+				}
+			}
+		}
+
+		if (clampedY2 >= 0 && clampedY2 < rows && clampedY2 !== clampedY1) {
+			for (let x = clampedX1 + 1; x < clampedX2; x++) {
+				const cell = getCell(x, clampedY2)
+				if (cell && cell.type === "vertical" && cell.boxIndex !== boxIndex) {
+					setCell(x, clampedY2, border.cross, edgePriority, "cross", boxIndex)
+				} else {
+					setCell(x, clampedY2, border.horizontal, edgePriority, "horizontal", boxIndex)
+				}
+			}
+		}
+
+		if (clampedX1 >= 0 && clampedX1 < cols) {
+			for (let y = clampedY1 + 1; y < clampedY2; y++) {
+				const cell = getCell(clampedX1, y)
+				if (cell && (cell.type === "horizontal" || cell.type === "cross") && cell.boxIndex !== boxIndex) {
+					setCell(clampedX1, y, border.cross, edgePriority, "cross", boxIndex)
+				} else {
+					setCell(clampedX1, y, border.vertical, edgePriority, "vertical", boxIndex)
+				}
+			}
+		}
+
+		if (clampedX2 >= 0 && clampedX2 < cols && clampedX2 !== clampedX1) {
+			for (let y = clampedY1 + 1; y < clampedY2; y++) {
+				const cell = getCell(clampedX2, y)
+				if (cell && (cell.type === "horizontal" || cell.type === "cross") && cell.boxIndex !== boxIndex) {
+					setCell(clampedX2, y, border.cross, edgePriority, "cross", boxIndex)
+				} else {
+					setCell(clampedX2, y, border.vertical, edgePriority, "vertical", boxIndex)
+				}
+			}
+		}
+
+		const cornerPriority = 20
+		const corners = [
+			{ x: clampedX1, y: clampedY1, char: border.topLeft, type: "corner" as const },
+			{ x: clampedX2, y: clampedY1, char: border.topRight, type: "corner" as const },
+			{ x: clampedX1, y: clampedY2, char: border.bottomLeft, type: "corner" as const },
+			{ x: clampedX2, y: clampedY2, char: border.bottomRight, type: "corner" as const }
+		]
+
+		corners.forEach(corner => {
+			if (corner.x < 0 || corner.y < 0 || corner.x >= cols || corner.y >= rows) return
+
+			const cell = getCell(corner.x, corner.y)
+			if (cell && cell.boxIndex !== boxIndex && cell.type !== "fill") {
+				if (cell.type === "horizontal" || cell.type === "vertical" || cell.type === "cross") {
+					setCell(corner.x, corner.y, border.cross, cornerPriority, "cross", boxIndex)
+				} else {
+					setCell(corner.x, corner.y, corner.char, cornerPriority, corner.type, boxIndex)
+				}
+			} else {
+				setCell(corner.x, corner.y, corner.char, cornerPriority, corner.type, boxIndex)
+			}
+		})
+
+		const labelPriority = 30
+		if (box.label && box.label.trim().length > 0) {
+			const labelText = String(box.label)
+
+			const boxWidth = clampedX2 - clampedX1
+			const boxHeight = clampedY2 - clampedY1
+
+			const interiorWidth = boxWidth - 2
+			const interiorHeight = boxHeight - 2
+
+			if (interiorWidth >= 1 && interiorHeight >= 0) {
+				let displayText = labelText
+				if (displayText.length > interiorWidth) {
+					displayText = displayText.substring(0, interiorWidth)
+				}
+
+				const interiorLeft = clampedX1 + 1
+				const interiorRight = clampedX2 - 1
+				const interiorTop = clampedY1 + 1
+				const interiorBottom = clampedY2 - 1
+
+				const interiorCenterX = Math.floor((interiorLeft + interiorRight) / 2)
+				const interiorCenterY = Math.floor((interiorTop + interiorBottom) / 2)
+
+				let startX = interiorCenterX - Math.floor(displayText.length / 2)
+
+				if (startX < interiorLeft) {
+					startX = interiorLeft
+				}
+				if (startX + displayText.length > interiorRight) {
+					startX = interiorRight - displayText.length
+				}
+
+				for (let i = 0; i < displayText.length; i++) {
+					const xPos = startX + i
+					const yPos = interiorCenterY
+
+					if (xPos >= interiorLeft && xPos < interiorRight
+						&& yPos >= interiorTop && yPos < interiorBottom) {
+						setCell(xPos, yPos, border.labelBg, labelPriority, "label", boxIndex)
+						setCell(xPos, yPos, displayText[i], labelPriority + 1, "label", boxIndex)
+					}
+				}
+			}
+		}
+	}
+
+	const displayGrid = grid.map(row => row.map(cell => cell.char).join("")).join("\n")
+	return displayGrid
+}
+
+
+export function createDebugLabeler({
+	showPxSize = false,
+	showCollapsed = true,
+	showDocked = true,
+	showSize = true,
+	showPos = true,
+	getWin
+}: {
+	showPxSize?: boolean
+	showCollapsed?: boolean
+	showDocked?: boolean
+	showSize?: boolean
+	showPos?: boolean
+	getWin?: (f: LayoutWindow["frames"][string]) => Pick<LayoutWindow, "pxWidth" | "pxHeight">
+} = {}) {
+	return function (f: LayoutWindow["frames"][string]) {
+		if (showPxSize && !getWin) throw new Error("showPxSize is true but getWin is not provided")
+		const win = showPxSize ? getWin?.(f) : undefined
+
+		const widthPx = showPxSize ? Math.round(f.width / settings.maxInt * win!.pxWidth) : undefined
+		const heightPx = showPxSize ? Math.round(f.height / settings.maxInt * win!.pxHeight) : undefined
+		const isCollapsed = showCollapsed && typeof f.collapsed === "number" ? "~" : ""
+		const isDocked = showDocked && f.docked ? "*" : ""
+		const size = showSize ? ` ${f.width}x${f.height}` : ""
+		const pos = showPos ? ` ${f.x},${f.y}` : ""
+		const pxSize = showPxSize ? ` ${widthPx}x${heightPx}px` : ""
+
+		return `${isCollapsed}${isDocked}${size}${pos}${pxSize}`
+	}
+}
+

package/src/runtime/helpers/convertLayoutWindowToWorkspace.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from "es-toolkit/object"
+import { walk } from "@alanscodelog/utils/walk"
 
 import type {
 	LayoutWindow,
@@ -8,7 +8,7 @@ import type {
 export function convertLayoutWindowToWorkspace(layout: LayoutWindow | Workspace): Workspace {
 	// clone to avoid accidental property removal issues
 	// cast to be able to delete the properties
-	const l = cloneDeep(layout) as Partial<LayoutWindow>
+	const l = walk(layout, undefined, { save: true }) as Partial<LayoutWindow>
 	delete l.id
 	delete l.pxHeight
 	delete l.pxWidth