@witchcraft/layout 0.1.2 → 0.2.0

package/src/runtime/layout/getFrameDockInfo.ts

@@ -0,0 +1,126 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
+import { walk } from "@alanscodelog/utils/walk"
+
+import { applyFrameChanges } from "./applyFrameChanges.js"
+import { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js"
+import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+import { getFrameUndockInfo } from "./getFrameUndockInfo.js"
+
+import { cloneFrame } from "../helpers/cloneFrame.js"
+import { getDockBoundaries } from "../helpers/getDockBoundaries.js"
+import { oppositeSide } from "../helpers/oppositeSide.js"
+import { settings } from "../settings.js"
+import type { EdgeSide, LayoutChange, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to dock a frame to a  window edge.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ */
+export function getFrameDockInfo(
+	win: LayoutWindow,
+	frameId: string,
+	side: EdgeSide,
+	maxPerpendicularLength?: number
+):
+	| LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS>
+	| KnownError<typeof LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE>
+	| KnownError<typeof LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES>
+	| KnownError<typeof LAYOUT_ERROR.FRAME_ALREADY_DOCKED_ON_SIDE>
+	| KnownError<typeof LAYOUT_ERROR.CANT_UNDOCK_COLLAPSED_FRAME>
+	| KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES> {
+	// its easier to just clone the window and extract changes later
+	// setting the var ensures we don't accidentally mutate the original
+	win = walk(win, undefined, { save: true }) as typeof win
+	const frame = win.frames[frameId]
+	if (!frame) { throw new Error(`Unknown frame ${frameId}`) }
+	if (frame.docked === side) throw new Error(`Frame ${frameId} is already docked on side ${side}.`)
+
+	const alreadyDockedOnSide = Object.values(win.frames).find(f => f.docked === side)
+
+	if (alreadyDockedOnSide) {
+		return new KnownError(LAYOUT_ERROR.FRAME_ALREADY_DOCKED_ON_SIDE, `Frame ${alreadyDockedOnSide.id} already docked on side ${side}.`, { id: alreadyDockedOnSide.id, side })
+	}
+
+	// if the frame is already docked on a different side, undock it first
+	// so it keeps its original dimensions when re-docking
+	if (frame.docked && frame.docked !== side) {
+		const undockInfo = getFrameUndockInfo(win, frameId)
+		if (undockInfo instanceof Error) return undockInfo
+		applyFrameChanges(win, undockInfo)
+	}
+
+	const isHorizontal = side === "left" || side === "right"
+	const perpendicular = isHorizontal ? "width" : "height"
+
+	const oldFrame = cloneFrame(frame)
+	const otherFrameIds = Object.keys(win.frames).filter(_ => _ !== frameId)
+	const nonDockedFrameIds = otherFrameIds.filter(id => !win.frames[id].docked)
+	if (nonDockedFrameIds.length === 0) {
+		return new KnownError(LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES, `Can't dock frame ${frameId} because there are no other undocked frames.`, { frameId })
+	}
+
+	// if its the only frame allow it to be as big as it likes
+	const effectiveMaxPerpendicular = maxPerpendicularLength ?? settings.maxPerpendicularLengthScaled.width
+	const perpendicularLength = otherFrameIds.length > 0 ? Math.min(frame[perpendicular], effectiveMaxPerpendicular) : frame[perpendicular]
+
+	frame.docked = side
+	frame.collapsed = false
+
+	const toExtract = [frame.id]
+
+	// fills just the hole left by the frame when it was moved
+	const changes = getFillEmptySpaceInfo(win, oldFrame, [], [frameId])
+	if (changes instanceof Error) return changes
+	applyFrameChanges(win, changes)
+	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
+
+
+	// redistribute other non-docked frames to make room for the new dock.
+	const sideToPushTowards = oppositeSide(side)
+
+	const redistributeChanges = getFramesRedistributeInfo(win, sideToPushTowards, nonDockedFrameIds, perpendicularLength)
+
+	if (redistributeChanges instanceof KnownError) {
+		return redistributeChanges
+	}
+	applyFrameChanges(win, redistributeChanges)
+	pushIfNotIn(toExtract, redistributeChanges.modified.map(_ => _.id))
+
+
+	const { minX, maxX, minY, maxY } = getDockBoundaries(win)
+	switch (side) {
+		case "left":
+			frame.x = 0
+			frame.y = minY
+			frame.width = perpendicularLength
+			frame.height = maxY - minY
+			break
+		case "right":
+			frame.x = settings.maxInt - perpendicularLength
+			frame.y = minY
+			frame.width = perpendicularLength
+			frame.height = maxY - minY
+			break
+		case "top":
+			frame.x = minX
+			frame.y = 0
+			frame.width = maxX - minX
+			frame.height = perpendicularLength
+			break
+		case "bottom":
+			frame.x = minX
+			frame.y = settings.maxInt - perpendicularLength
+			frame.width = maxX - minX
+			frame.height = perpendicularLength
+			break
+	}
+
+
+	const res = toExtract.map(_ => win.frames[_])
+
+	return { modified: res, created: [], deleted: [] }
+}

package/src/runtime/layout/getFrameDragZones.ts

@@ -0,0 +1,100 @@
+import { settings } from "../settings.js"
+import type { DragZone } from "../types/index.js"
+
+/**
+ * Returns frame drag zones (in **unrounded** scaled coordinate space).
+ *
+ * If the frame is too narrow for both left+right zones, only the center zone is returned.
+ *
+ * Same logic applies to top/bottom for very short frames.
+ *
+ * Unrounded because these are for display purposes only.
+ */
+export function getFrameDragZones(
+	frame: { x: number, y: number, width: number, height: number },
+	thresholdPx: number,
+	windowPxWidth: number,
+	windowPxHeight: number
+): DragZone[] {
+// 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
+	const thY = thresholdPx / windowPxHeight * settings.maxInt
+	const pxWidth = frame.width / settings.maxInt * windowPxWidth
+	const pxHeight = frame.height / settings.maxInt * windowPxHeight
+
+	if (frame.width <= 3 * thX || frame.height <= 3 * thY) {
+		return [{
+			type: "frame",
+			side: "center", // this is more like center/full
+			x: frame.x,
+			y: frame.y,
+			width: frame.width,
+			height: frame.height,
+			pxWidth,
+			pxHeight
+		}]
+	}
+
+	const zones: DragZone[] = []
+
+	zones.push({
+		type: "frame",
+		side: "top",
+		x: frame.x,
+		y: frame.y,
+		width: frame.width,
+		height: thY,
+		pxWidth,
+		pxHeight: thresholdPx
+	})
+
+	zones.push({
+		type: "frame",
+		side: "bottom",
+		x: frame.x,
+		y: frame.y + frame.height - thY,
+		width: frame.width,
+		height: thY,
+		pxWidth,
+		pxHeight: thresholdPx
+	})
+
+	zones.push({
+		type: "frame",
+		side: "left",
+		x: frame.x,
+		y: frame.y,
+		width: thX,
+		height: frame.height,
+		pxWidth: thresholdPx,
+		pxHeight
+	})
+
+	zones.push({
+		type: "frame",
+		side: "right",
+		x: frame.x + frame.width - thX,
+		y: frame.y,
+		width: thX,
+		height: frame.height,
+		pxWidth: thresholdPx,
+		pxHeight
+	})
+
+	// center — remaining inner area
+	const cw = frame.width - 2 * thX
+	const ch = frame.height - 2 * thY
+	zones.push({
+		type: "frame",
+		side: "center",
+		x: frame.x + thX,
+		y: frame.y + thY,
+		width: cw,
+		height: ch,
+		pxWidth: cw / settings.maxInt * windowPxWidth,
+		pxHeight: ch / settings.maxInt * windowPxHeight
+	})
+
+	return zones
+}

package/src/runtime/layout/getFrameRearrangeInfo.ts

@@ -0,0 +1,261 @@
+import { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js"
+import { getFrameSplitInfo } from "./getFrameSplitInfo.js"
+import { getFrameSwapInfo } from "./getFrameSwapInfo.js"
+
+import { frameToEdges } from "../helpers/frameToEdges.js"
+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 { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to rearrange a frame relative to another.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * Rearrangement is usually done by dragging a frame onto another frame's zone.
+ *
+ * The action taken depends on their placement relative to each other, see examples below.
+ *
+ * ## Examples
+ *
+ * Dragging a frame onto itself in the left/right/top/bottom zones splits it and creates a new frame. Center returns an error.
+ *
+ * Then there are the more typical cases:
+ *
+ * Shared Edge Case:
+ *
+ * ┌─────┬─────┬─────┐
+ * │A    │B    │C    │
+ * │     │     ├─────┤
+ * │     │     │D    │
+ * └─────┴─────┴─────┘
+ *
+ * A and B here are on the same edge, with A on the left of B.
+ *
+ * Dragging A onto B will result in the following depending on what drop zone of B the dragged frame lands on:
+ *
+ * Left - Error that can be safely ignored - A is already on the left of B
+ * Right - Swap A and B
+ * Top
+ * 	- B is "split" up (we only simulate it to get the positions). The position of the new split frame is taken and applied to A to move it above B.
+ * 	- The gap left behind by A is filled however possible using {@link getFillEmptySpaceInfo}.
+ *
+ * The result looks like this:
+ *
+ * ┌───────────┬─────┐
+ * │A          │C    │
+ * ├───────────┼─────┤
+ * │B          │D    │
+ * └───────────┴─────┘
+ *
+ * Bottom - Like top, but A ends up on the bottom of B.
+ *
+ *
+ * Partially Shared Edge Case:
+ *
+ * ┌─────┬─────┬─────┐
+ * │A    │B    │C    │
+ * │     │     │     │
+ * │     │     │     │
+ * │     │     ├─────┤
+ * │     │     │D    │
+ * │     │     │     │
+ * └─────┴─────┴─────┘
+ *
+ * Same case but we'll be using B and C here as they share part of an edge but not the whole edge. Dragging B onto C will result in the following:
+ *
+ * Left
+ * 	- C will be "split" to the left. The position of the new split frame is taken and applied to B. The space left behind is filled resulting in this.
+ * 	- Note how c has shrunk due to the initial location of the split.
+ *
+ * ┌─────┬────────┬──┐
+ * │A    │B       │C │
+ * │     │        │  │
+ * │     │        │  │
+ * │     ├────────┴──┤
+ * │     │D          │
+ * │     │           │
+ * └─────┴───────────┘
+ *
+ * Right - Like left but C ends up on the right of B.
+ *
+ * Top
+ * ┌─────┬───────────┐
+ * │A    │B          │
+ * │     ├───────────┤
+ * │     │C          │
+ * │     ├───────────┤
+ * │     │D          │
+ * │     │           │
+ * └─────┴───────────┘
+ *
+ * Bottom - Like top, but B ends up on the bottom of C.
+ *
+ * None-Shared Edge Case:
+ *
+ * Same case but we'll be dragging A over C.
+ * ┌─────┬─────┬─────┐
+ * │A    │B    │C    │
+ * │     │     │     │
+ * │     │     │     │
+ * │     │     ├─────┤
+ * │     │     │D    │
+ * │     │     │     │
+ * └─────┴─────┴─────┘
+ *
+ * These are a bit easier to reason about because the frame usually ends up at the split location exactly.
+ *
+ * Left
+ * ┌───────────┬──┬──┐
+ * │B          │A │C │
+ * │           │  │  │
+ * │           │  │  │
+ * │           ├──┴──┤
+ * │           │D    │
+ * │           │     │
+ * └───────────┴─────┘
+ * Right
+ * ┌───────────┬──┬──┐
+ * │B          │C │A │
+ * │           │  │  │
+ * │           │  │  │
+ * │           ├──┴──┤
+ * │           │D    │
+ * │           │     │
+ * └───────────┴─────┘
+ * Top
+ * ┌───────────┬─────┐
+ * │B          │A    │
+ * │           ├─────┤
+ * │           │C    │
+ * │           ├─────┤
+ * │           │D    │
+ * │           │     │
+ * └───────────┴─────┘
+ * Bottom
+ * ┌───────────┬─────┐
+ * │B          │C    │
+ * │           ├─────┤
+ * │           │A    │
+ * │           ├─────┤
+ * │           │D    │
+ * │           │     │
+ * └───────────┴─────┘
+ */
+
+export function getFrameRearrangeInfo(
+	win: LayoutWindow,
+	draggingFrameId: string,
+	hoveredFrameId: string,
+	zoneSide: DragZone["side"]
+): LayoutChange<"split" | "swap" | "rearrange">
+	| KnownError<typeof LAYOUT_ERROR.CANT_SWAP_WITH_SELF>
+	| KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL>
+	| KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION>
+	| KnownError<typeof LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES>
+	| 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 hoveredFrame = { ...win.frames[hoveredFrameId] }
+
+	if (draggingFrameId === hoveredFrameId) {
+		if (zoneSide === "center") return new KnownError(LAYOUT_ERROR.CANT_SWAP_WITH_SELF, `Can't swap frame with self.`, { frame: hoveredFrame, zoneSide })
+	}
+
+	if (zoneSide === "center") {
+		const res = getFrameSwapInfo(win, draggingFrame.id, hoveredFrame.id)
+		if (res instanceof KnownError) return res
+		return {
+			modified: res.modified,
+			created: res.created,
+			deleted: res.deleted,
+			info: "swap"
+		}
+	}
+
+	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 })
+	}
+
+	// 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 })
+	}
+
+	const touchingSide = getSideTouching(draggingFrame, hoveredFrame)
+	if (touchingSide) {
+		const dragEdges = frameToEdges(draggingFrame)
+		const hoverEdges = frameToEdges(hoveredFrame)
+		const hoverOppositeSide = oppositeSide(touchingSide)
+
+		if (isEdgeEqual(dragEdges[touchingSide], hoverEdges[hoverOppositeSide])) {
+			if (touchingSide === zoneSide) {
+				const res = getFrameSwapInfo(win, draggingFrame.id, hoveredFrame.id)
+				if (res instanceof KnownError) return res
+				return {
+					modified: res.modified,
+					created: res.created,
+					deleted: res.deleted,
+					info: "swap"
+				}
+			}
+			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 })
+			}
+		}
+	}
+
+	// copy of where draggedFrame was
+	const emptySpace = { ...draggingFrame }
+
+	const dir = sideToDirection(zoneSide)
+	const splitResult = getFrameSplitInfo(hoveredFrame, dir, "midpoint", undefined, { x: 0.001, y: 0.001 })
+
+	if (splitResult instanceof KnownError) {
+		return splitResult
+	}
+
+	const splitFrame = splitResult.modified[0]
+	const newFrame = splitResult.created[0]
+
+	if (draggingFrameId === hoveredFrameId) {
+		return { ...splitResult, deleted: [], info: "split" }
+	}
+
+	// hoveredFrame takes the position where it was split
+	hoveredFrame.x = splitFrame.x
+	hoveredFrame.y = splitFrame.y
+	hoveredFrame.width = splitFrame.width
+	hoveredFrame.height = splitFrame.height
+
+	// draggingFrame takes the position of the new frame created by the split
+	draggingFrame.x = newFrame.x
+	draggingFrame.y = newFrame.y
+	draggingFrame.width = newFrame.width
+	draggingFrame.height = newFrame.height
+
+	// even though fill empty info wont mutate, we need the moved versions to give to it
+	const winCopy = {
+		...win,
+		frames: {
+			...win.frames,
+			[hoveredFrame.id]: hoveredFrame,
+			[draggingFrame.id]: draggingFrame
+		}
+	}
+	const changes = getFillEmptySpaceInfo(winCopy, emptySpace, [hoveredFrameId, draggingFrameId])
+	if (changes instanceof KnownError) return changes
+
+	// it will also be missing said changes unless it further moved the frames which is not alway
+	const notMissing = changes.modified.map(_ => _.id).filter(id => id === hoveredFrame.id || draggingFrame.id)
+	if (!notMissing.includes(hoveredFrame.id)) changes.modified.push(hoveredFrame)
+	if (!notMissing.includes(draggingFrame.id)) changes.modified.push(draggingFrame)
+
+	return { ...changes, info: "split" }
+}

package/src/runtime/layout/getFrameSplitInfo.ts

@@ -2,26 +2,39 @@ import { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js"
 import { frameCreate } from "./frameCreate.js"
 
 import { cloneFrame } from "../helpers/cloneFrame.js"
-import { getMarginSize, getSnapPoint } from "../settings.js"
+import { settings } from "../settings.js"
 import {
 	type Direction,
 	LAYOUT_ERROR,
+	type LayoutChange,
 	type LayoutFrame,
 	type Point,
 	type Size
 } from "../types/index.js"
 import { KnownError } from "../utils/KnownError.js"
 
+/**
+ * Returns a {@link LayoutChange} with the information necessary to split a frame in the given direction.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ */
 export function getFrameSplitInfo(
 	frame: LayoutFrame,
 	dir: Direction,
 	dragPointOrPosition: Point | number | "midpoint" = "midpoint",
-	minSize: Size = getMarginSize(),
-	snapAmount: Point = getSnapPoint()
-): {
-	splitFrame: LayoutFrame
-	newFrame: LayoutFrame
-} | KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL> {
+	minSize: Size = settings.minSizeScaled,
+	snapAmount: Point = settings.snapPointScaled
+): LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL>
+	| KnownError<typeof LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME> {
+	if (frame.docked) {
+		return new KnownError(
+			LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME,
+			`Can't split docked frame ${frame.id}.`,
+			{ frame }
+		)
+	}
+
 	frame = cloneFrame(frame)
 	let newFrame = { ...frame }
 	const isHorz = dir === "left" || dir === "right"
@@ -64,5 +77,5 @@ export function getFrameSplitInfo(
 	}
 
 	newFrame = frameCreate({ ...newFrame, id: undefined })
-	return { splitFrame: frame, newFrame }
+	return { modified: [frame], created: [newFrame], deleted: [] }
 }

package/src/runtime/layout/getFrameSwapInfo.ts

@@ -0,0 +1,45 @@
+import type { LayoutChange, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to swap two frames within the same window.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ */
+export function getFrameSwapInfo(
+	window: LayoutWindow,
+	frameIdA: string,
+	frameIdB: string
+): LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.CANT_SWAP_WITH_SELF> {
+	const frameA = { ...window.frames[frameIdA] }
+	const frameB = { ...window.frames[frameIdB] }
+
+	if (frameA.id === frameB.id) {
+		return new KnownError(LAYOUT_ERROR.CANT_SWAP_WITH_SELF, `Cannot swap frames with the same id`, { frame: frameA })
+	}
+
+
+	const temp = { x: frameA.x, y: frameA.y, width: frameA.width, height: frameA.height }
+	frameA.x = frameB.x
+	frameA.y = frameB.y
+	frameA.width = frameB.width
+	frameA.height = frameB.height
+	frameB.x = temp.x
+	frameB.y = temp.y
+	frameB.width = temp.width
+	frameB.height = temp.height
+
+	const dockedA = frameA.docked
+	const dockedB = frameB.docked
+	frameA.docked = dockedB
+	frameB.docked = dockedA
+
+	const collapsedA = frameA.collapsed
+	const collapsedB = frameB.collapsed
+	frameA.collapsed = collapsedB
+	frameB.collapsed = collapsedA
+
+	return { modified: [frameA, frameB], created: [], deleted: [] }
+}

package/src/runtime/layout/getFrameTo.ts

@@ -1,4 +1,4 @@
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type { EdgeSide, LayoutFrame } from "../types/index.js"
 
 export function getFrameTo(
@@ -6,7 +6,7 @@ export function getFrameTo(
 	frame: LayoutFrame,
 	frames: LayoutFrame[]
 ): LayoutFrame | undefined {
-	const max = getMaxInt()
+	const max = settings.maxInt
 	if ((side === "top" && frame.y === 0)
 		|| (side === "left" && frame.y === 0)
 		|| (side === "right" && frame.x + frame.width === max)