@witchcraft/layout 0.0.1

package/src/runtime/helpers/assertValidWinAndFrameIds.ts

@@ -0,0 +1,9 @@
+import { assertItemIn } from "./assertItemIn.js"
+
+import type { FrameId, LayoutWindows, WindowId } from "../types/index.js"
+
+export function assertValidWinAndFrameIds(windows: LayoutWindows, winId?: WindowId, frameId?: FrameId): void {
+	assertItemIn(windows, winId)
+	const win = windows[winId]
+	assertItemIn(win.frames, frameId)
+}

package/src/runtime/helpers/assertWindowHasActiveFrame.ts

@@ -0,0 +1,9 @@
+import type { LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+export function assertWindowHasActiveFrame(win: LayoutWindow): asserts win is Omit<LayoutWindow, "activeFrame"> & { activeFrame: NonNullable<LayoutWindow["activeFrame"]> } {
+	if (win.activeFrame === undefined) {
+		throw new KnownError(LAYOUT_ERROR.NO_ACTIVE_WINDOW, "Layout has no active window.", {})
+	}
+}

package/src/runtime/helpers/clampNumber.ts

@@ -0,0 +1,9 @@
+// todo move to utils
+
+export function clampNumber(
+	num: number,
+	lowerLimit: number,
+	upperLimit: number
+): number {
+	return num <= lowerLimit ? lowerLimit : num >= upperLimit ? upperLimit : num
+}

package/src/runtime/helpers/cloneFrame.ts

@@ -0,0 +1,5 @@
+import type { LayoutFrame } from "../types/index.js"
+
+export function cloneFrame(frame: LayoutFrame): LayoutFrame {
+	return { ...frame }
+}

package/src/runtime/helpers/cloneFrames.ts

@@ -0,0 +1,20 @@
+import { isArray } from "@alanscodelog/utils/isArray"
+
+import { cloneFrame } from "./cloneFrame.js"
+
+import type { LayoutFrame } from "../types/index.js"
+
+export function cloneFrames<T extends Record<string, LayoutFrame> | LayoutFrame[]>(frames: T): T {
+	const framesIsArray = isArray(frames)
+	const clone: any = framesIsArray ? [] : {}
+	if (framesIsArray) {
+		for (const frame of frames) {
+			clone.push(cloneFrame(frame))
+		}
+	} else {
+		for (const id of Object.keys(frames)) {
+			clone[id] = cloneFrame(frames[id]!)
+		}
+	}
+	return clone
+}

package/src/runtime/helpers/containsEdge.ts

@@ -0,0 +1,16 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { isEdgeParallel } from "./isEdgeParallel.js"
+
+import type { Edge, Orientation } from "../types/index.js"
+
+export function containsEdge(edge: Edge, limitEdge: Edge, dir?: Orientation): boolean {
+	dir ??= getEdgeOrientation(edge)
+	if (!isEdgeParallel(edge, limitEdge)) return false
+	if (dir === "horizontal") {
+		if (limitEdge.startY !== edge.startY) return false
+		return limitEdge.startX <= edge.startX && edge.endX <= limitEdge.endX
+	} else {
+		if (limitEdge.startX !== edge.startX) return false
+		return limitEdge.startY <= edge.startY && edge.endY <= limitEdge.endY
+	}
+}

package/src/runtime/helpers/convertLayoutWindowToWorkspace.ts

@@ -0,0 +1,18 @@
+import { cloneDeep } from "es-toolkit"
+
+import type {
+	LayoutWindow,
+	Workspace
+} from "../types/index.js"
+
+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>
+	delete l.id
+	delete l.pxHeight
+	delete l.pxWidth
+	delete l.pxX
+	delete l.pxY
+	return l as Workspace
+}

package/src/runtime/helpers/copySize.ts

@@ -0,0 +1,7 @@
+import type { Size } from "../types/index.js"
+
+export function copySize<TFrom extends Size, TTo extends Size>(from: TFrom, to: TTo): TTo {
+	to.width = from.width
+	to.height = from.height
+	return from as any
+}

package/src/runtime/helpers/createEdge.ts

@@ -0,0 +1,19 @@
+import type { Edge } from "../types/index.js"
+
+/**
+ * Ensures the edge given is sorted (start < end coordinates). Mutates given edge if it's not.
+ */
+
+export function createEdge(edge: Edge): Edge {
+	if (edge.startX > edge.endX) {
+		const end = edge.endX
+		edge.endX = edge.startX
+		edge.startX = end
+	}
+	if (edge.startY > edge.endY) {
+		const end = edge.endY
+		edge.endY = edge.startY
+		edge.startY = end
+	}
+	return edge
+}

package/src/runtime/helpers/dirToOrientation.ts

@@ -0,0 +1,12 @@
+import type { Direction, Orientation } from "../types/index.js"
+
+export function dirToOrientation(dir: Direction): Orientation {
+	switch (dir) {
+		case "left":
+		case "right":
+			return "horizontal"
+		case "up":
+		case "down":
+			return "vertical"
+	}
+}

package/src/runtime/helpers/dirToSide.ts

@@ -0,0 +1,7 @@
+import type { Direction, EdgeSide } from "../types/index.js"
+
+export function dirToSide<T extends Direction>(dir: T): T extends "up" ? "top" : T extends "down" ? "bottom" : T extends "left" | "right" ? T : EdgeSide {
+	if (dir === "up") return "top" satisfies EdgeSide as any
+	if (dir === "down") return "bottom" satisfies EdgeSide as any
+	return dir satisfies EdgeSide as any
+}

package/src/runtime/helpers/doEdgesOverlap.ts

@@ -0,0 +1,25 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { inRange } from "./inRange.js"
+import { isEdgeParallel } from "./isEdgeParallel.js"
+
+import type { Edge, Orientation } from "../types/index.js"
+
+export function doEdgesOverlap(edgeA: Edge, edgeB: Edge, dir?: Orientation): boolean {
+	dir ??= getEdgeOrientation(edgeA)
+	if (!isEdgeParallel(edgeA, edgeB)) return false
+	if (dir === "horizontal") {
+		if (edgeA.startY !== edgeB.startY) return false
+		const leftMost = edgeA.startX <= edgeB.startX ? edgeA : edgeB
+		const rightMost = edgeB === leftMost ? edgeA : edgeB
+		const startOverlaps = inRange(leftMost.endX, rightMost.startX, rightMost.endX)
+		const endOverlaps = inRange(rightMost.startX, leftMost.startX, leftMost.endX)
+		return startOverlaps || endOverlaps
+	} else {
+		if (edgeA.startX !== edgeB.startX) return false
+		const topMost = edgeA.startY <= edgeB.startY ? edgeA : edgeB
+		const bottomMost = edgeB === topMost ? edgeA : edgeB
+		const startOverlaps = inRange(topMost.endY, bottomMost.startY, bottomMost.endY)
+		const endOverlaps = inRange(bottomMost.startY, topMost.startY, topMost.endY)
+		return startOverlaps || endOverlaps
+	}
+}

package/src/runtime/helpers/doesEdgeContinueEdge.ts

@@ -0,0 +1,20 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { isEdgeParallel } from "./isEdgeParallel.js"
+
+import type { Edge, Orientation } from "../types/index.js"
+
+export function doesEdgeContinueEdge(edgeA: Edge, edgeB: Edge, dir?: Orientation): boolean {
+	dir ??= getEdgeOrientation(edgeA)
+	if (!isEdgeParallel(edgeA, edgeB)) return false
+	if (dir === "horizontal") {
+		if (edgeA.startY !== edgeB.startY) return false
+		const leftMost = edgeA.startX <= edgeB.startX ? edgeA : edgeB
+		const rightMost = edgeB === leftMost ? edgeA : edgeB
+		return leftMost.endX === rightMost.startX
+	} else {
+		if (edgeA.startX !== edgeB.startX) return false
+		const topMost = edgeA.startY <= edgeB.startY ? edgeA : edgeB
+		const bottomMost = edgeB === topMost ? edgeA : edgeB
+		return topMost.endY === bottomMost.startY
+	}
+}

package/src/runtime/helpers/edgeToPoints.ts

@@ -0,0 +1,5 @@
+import type { Edge, Point } from "../types/index.js"
+
+export function edgeToPoints(edge: Edge): Point[] {
+	return [{ x: edge.startX, y: edge.startY }, { x: edge.endX, y: edge.endY }]
+}

package/src/runtime/helpers/findDraggableEdge.ts

@@ -0,0 +1,24 @@
+import { containsEdge } from "./containsEdge.js"
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { isEdgeEqual } from "./isEdgeEqual.js"
+
+import type { Edge, Orientation } from "../types/index.js"
+
+export function findDraggableEdge(
+	edge: Edge,
+	edges: Edge[],
+	/** Whether the edge must match exactly and does not "contain/touch" another frame. */
+	exact: boolean = true,
+	edgeOrientation?: Orientation
+): Edge | undefined {
+	edgeOrientation ??= getEdgeOrientation(edge)
+	for (const otherEdge of edges) {
+		const didFindEdge = exact
+			? isEdgeEqual(edge, otherEdge, edgeOrientation)
+			: containsEdge(edge, otherEdge, edgeOrientation)
+		if (didFindEdge) {
+			return otherEdge
+		}
+	}
+	return undefined
+}

package/src/runtime/helpers/findFrameDraggableEdges.ts

@@ -0,0 +1,32 @@
+import { findDraggableEdge } from "./findDraggableEdge.js"
+import { frameToEdges } from "./frameToEdges.js"
+import { isWindowEdge } from "./isWindowEdge.js"
+import { sideToOrientation } from "./sideToOrientation.js"
+
+import type {
+	Edge,
+	EdgeSide, LayoutFrame
+} from "../types/index.js"
+
+export function findFrameDraggableEdges(
+	frame: LayoutFrame,
+	edges: Edge[],
+	/** See {@link findDraggableEdge} */
+	exact: boolean = true,
+	sides: EdgeSide[] = ["left", "right", "top", "bottom"]
+): { edge: Edge, side: EdgeSide }[] | undefined {
+	const frameEdges = frameToEdges(frame)
+	const res = []
+	for (const side of sides) {
+		const edge = frameEdges[side]
+		const edgeDirection = sideToOrientation(side)
+		const isWinEdge = isWindowEdge(edge, edgeDirection)
+
+		if (isWinEdge) continue
+		const maybeEdge = findDraggableEdge(edge, edges, exact, edgeDirection)
+
+		if (maybeEdge) res.push({ edge: maybeEdge, side })
+	}
+	if (res.length > 0) return res
+	return undefined
+}

package/src/runtime/helpers/frameToEdges.ts

@@ -0,0 +1,32 @@
+import { frameToPoints } from "./frameToPoints.js"
+
+import type { Edge, EdgeSide, LayoutFrame } from "../types/index.js"
+
+export function frameToEdges(frame: LayoutFrame, sides?: EdgeSide[]): Record<EdgeSide, Edge> {
+	const { tl, tr, bl, br } = frameToPoints(frame)
+	// no need for createEdge, we can assure they're sorted
+	// by always starting on the top/left and ending on the bottom/right
+	const right = { startX: tr.x, startY: tr.y, endX: br.x, endY: br.y }
+	const left = { startX: tl.x, startY: tl.y, endX: bl.x, endY: bl.y }
+	const bottom = { startX: bl.x, startY: bl.y, endX: br.x, endY: br.y }
+	const top = { startX: tl.x, startY: tl.y, endX: tr.x, endY: tr.y }
+	if (sides) {
+		const res: Record<EdgeSide, Edge> = {} as any
+		for (const side of sides) {
+			res[side] = side === "right"
+				? right
+				: side === "left"
+					? left
+					: side === "bottom"
+						? bottom
+						: top
+		}
+		return res
+	}
+	return {
+		right,
+		left,
+		bottom,
+		top
+	}
+}

package/src/runtime/helpers/frameToPoints.ts

@@ -0,0 +1,14 @@
+import type { LayoutFrame } from "../types/index.js"
+
+export function frameToPoints(frame: LayoutFrame): {
+	tl: { x: number, y: number }
+	tr: { x: number, y: number }
+	bl: { x: number, y: number }
+	br: { x: number, y: number }
+} {
+	const tl = { x: frame.x, y: frame.y }
+	const tr = { x: frame.x + frame.width, y: frame.y }
+	const bl = { x: frame.x, y: frame.y + frame.height }
+	const br = { x: frame.x + frame.width, y: frame.y + frame.height }
+	return { tl, tr, bl, br }
+}

package/src/runtime/helpers/getEdgeOrientation.ts

@@ -0,0 +1,6 @@
+import type { Edge, Orientation } from "../types/index.js"
+
+export function getEdgeOrientation(edge: Edge): Orientation {
+	if (edge.startX === edge.endX) return "vertical"
+	return "horizontal"
+}

package/src/runtime/helpers/getEdgeSharedDirection.ts

@@ -0,0 +1,10 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+
+import type { Edge } from "../types/index.js"
+
+export function getEdgeSharedDirection(edgeA: Edge, edgeB: Edge): false | "horizontal" | "vertical" {
+	const edgeDirectionA = getEdgeOrientation(edgeA)
+	const edgeDirectionB = getEdgeOrientation(edgeB)
+	if (edgeDirectionA !== edgeDirectionB) return false
+	return edgeDirectionA
+}

package/src/runtime/helpers/getEdgeSide.ts

@@ -0,0 +1,27 @@
+import { unreachable } from "@alanscodelog/utils/unreachable"
+
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+
+import type {
+	Edge,
+	EdgeSide, LayoutFrame
+} from "../types/index.js"
+
+export function getEdgeSide<T extends boolean = false>(
+	frame: LayoutFrame,
+	edge: Edge,
+	allowNone: T = false as T
+): EdgeSide | (T extends true ? undefined : never) {
+	const edgeDir = getEdgeOrientation(edge)
+	if (edgeDir === "horizontal") {
+		if (edge.startY === frame.y) return "top"
+		else if (edge.startY === frame.y + frame.height) return "bottom"
+	} else if (edgeDir === "vertical") {
+		if (edge.startX === frame.x) return "left"
+		else if (edge.startX === frame.x + frame.width) return "right"
+	}
+	if (!allowNone) {
+		unreachable()
+	}
+	return undefined as any
+}

package/src/runtime/helpers/getFrameById.ts

@@ -0,0 +1,15 @@
+import { getFrameConstant } from "./getFrameConstant.js"
+
+import type {
+	FrameId, LayoutFrame,
+	LayoutWindow
+} from "../types/index.js"
+
+export function getFrameById<T extends boolean = false>(
+	win: LayoutWindow,
+	frameId: FrameId,
+	assert: T = false as T
+): T extends true ? LayoutFrame : LayoutFrame | undefined {
+	const frameId_ = getFrameConstant(win, frameId, assert)
+	return win.frames[frameId_ as any]
+}

package/src/runtime/helpers/getFrameConstant.ts

@@ -0,0 +1,22 @@
+import { assertItemIn } from "./assertItemIn.js"
+import { assertWindowHasActiveFrame } from "./assertWindowHasActiveFrame.js"
+
+import type { LayoutWindow } from "../types/index.js"
+
+export function getFrameConstant<T extends boolean = false>(
+	win: LayoutWindow,
+	constant: "ACTIVE" | string,
+	assert: T = false as T
+): T extends true ? string : string | undefined {
+	switch (constant) {
+		case "ACTIVE": {
+			if (assert) assertWindowHasActiveFrame(win)
+			return win.activeFrame as any
+		}
+		// todo sides
+		default: {
+			if (assert) assertItemIn(win.frames, constant)
+			return constant as any
+		}
+	}
+}

package/src/runtime/helpers/getIntersections.ts

@@ -0,0 +1,87 @@
+import { castType } from "@alanscodelog/utils"
+import { keys } from "@alanscodelog/utils/keys"
+
+import { addPointsToIntersection } from "./addPointsToIntersection.js"
+import { edgeToPoints } from "./edgeToPoints.js"
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { inRange } from "./inRange.js"
+
+import { getMaxInt } from "../settings.js"
+import type {
+	Edge, IntersectionEntry,
+	Orientation,
+	Point
+} from "../types/index.js"
+
+export function getIntersections(
+	visualEdges: Edge[]
+): IntersectionEntry[] {
+	type Intersections = Record<number, Record<number, number>>
+	const intersections: Intersections = {
+		// x: {y: count}
+	}
+	for (const edge of visualEdges) {
+		addPointsToIntersection(intersections, Object.values(edgeToPoints(edge)))
+	}
+
+	const points: IntersectionEntry[] = []
+	const maxInt = getMaxInt()
+	for (const x of keys(intersections)) {
+		for (const y of keys(intersections[x])) {
+			// careful, x and y are really strings
+			castType<string>(x)
+			castType<string>(y)
+			const xInt = Number.parseInt(x, 10)
+			const yInt = Number.parseInt(y, 10)
+			const isWindowEdge = xInt === 0 || yInt === 0 || xInt === maxInt || yInt === maxInt
+			const sharedEdges = findEdgesTouchingPoint(visualEdges, {
+				x: xInt,
+				y: yInt
+			})
+			points.push({
+				point: { x: xInt, y: yInt },
+				count: intersections[x][y],
+				sharesEdge: sharedEdges.horizontal.length > 0 || sharedEdges.vertical.length > 0,
+				sharedEdges,
+
+				isWindowEdge
+
+			})
+		}
+	}
+	return points
+}
+
+function findEdgesTouchingPoint(
+	edges: Edge[],
+	point: Point,
+	{
+		firstOnly = false,
+		orientation: direction = undefined,
+		inclusive = true
+	}: {
+		orientation?: Orientation
+		firstOnly?: boolean
+		inclusive?: boolean
+	} = {}
+): { horizontal: Edge[], vertical: Edge[] } {
+	const edgesContainingPoint: { horizontal: Edge[], vertical: Edge[] } = {
+		horizontal: [],
+		vertical: []
+	}
+	for (const edge of edges) {
+		const orientation = getEdgeOrientation(edge)
+		if (orientation === "horizontal" && (!direction || direction === "horizontal")) {
+			if (edge.startY === point.y && inRange(point.x, edge.startX, edge.endX, inclusive)) {
+				edgesContainingPoint.horizontal.push(edge)
+				if (firstOnly) break
+			}
+		} else if (!direction || direction === "vertical") {
+			if (edge.startX === point.x && inRange(point.y, edge.startY, edge.endY, inclusive)) {
+				edgesContainingPoint.vertical.push(edge)
+				if (firstOnly) break
+			}
+		}
+	}
+	return edgesContainingPoint
+}

package/src/runtime/helpers/getIntersectionsCss.ts

@@ -0,0 +1,65 @@
+import { getMaxInt } from "../settings.js"
+import type {
+	IntersectionEntry, PointCss
+} from "../types/index.js"
+
+export function getIntersectionsCss(entries: IntersectionEntry[],
+	{
+		intersectionWidth = `var(--layoutIntersectionWidth, 8px)`,
+		/** How much to shift the intersections by when it's not on a four corner intersection. Otherwise it tends to look ugly because it overlaps one of the frame edges, this shifts it away from it. */
+		shiftAmount = `var(--layoutIntersectionShiftAmount, 2px)`
+	}: {
+		intersectionWidth?: string
+		shiftAmount?: string
+	} = {}
+): (PointCss & { _shifted?: true }) [] {
+	const unscale = getMaxInt() / 100
+	return entries.map(entry => {
+		const point = entry.point
+		const css = {
+			x: `${point.x / unscale}%`,
+			y: `${point.y / unscale}%`,
+			width: intersectionWidth,
+			height: intersectionWidth,
+			translate: `translate(-50%, -50%)`
+		}
+		if (shiftAmount) {
+			const shift = getIntersectionShift(entry)
+			if (shift.includes("left")) {
+				css.x = `calc(${css.x} + ${shiftAmount})`
+			} else if (shift.includes("right")) {
+				css.x = `calc(${css.x} - ${shiftAmount})`
+			}
+			if (shift.includes("top")) {
+				css.y = `calc(${css.y} + ${shiftAmount})`
+			} else if (shift.includes("bottom")) {
+				css.y = `calc(${css.y} - ${shiftAmount})`
+			}
+			if (shift !== "") {
+				;(css as any)._shifted = true
+			}
+		}
+		return css
+	})
+}
+
+function getIntersectionShift(intersection: IntersectionEntry): string {
+	let shift = ""
+	if (intersection.sharedEdges.horizontal.length === 1) {
+		const edge = intersection.sharedEdges.horizontal[0]
+		if (edge.endX === intersection.point.x) {
+			shift += "right"
+		} else if (edge.startX === intersection.point.x) {
+			shift += "left"
+		}
+	}
+	if (intersection.sharedEdges.vertical.length === 1) {
+		const edge = intersection.sharedEdges.vertical[0]
+		if (edge.endY === intersection.point.y) {
+			shift += "bottom"
+		} else if (edge.startY === intersection.point.y) {
+			shift += "top"
+		}
+	}
+	return shift
+}

package/src/runtime/helpers/getMoveEdgeInfo.ts

@@ -0,0 +1,69 @@
+import { clampNumber } from "./clampNumber.js"
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+import { getResizeLimit } from "./getResizeLimit.js"
+
+import { getMarginSize } from "../settings.js"
+import type {
+	Direction,
+	Edge, LayoutFrame,
+	Point,
+	Size } from "../types/index.js"
+
+export function getMoveEdgeInfo(
+	touchingFrames: LayoutFrame[],
+	edge: Edge,
+	/** Window scaled/snaped position. See {@link toWindowCoord} */
+	position: Point,
+	margin: Size = getMarginSize(),
+	clamp = true
+): {
+	x: number
+	y: number
+	dir: Direction
+	isPassedLimit: boolean
+	pos: number
+	distance: number
+} {
+	const { x: posX, y: posY } = position
+
+	const edgeDirection = getEdgeOrientation(edge)
+	const dir = edgeDirection === "horizontal"
+		? (posY < edge.startY ? "up" : "down")
+		: (posX < edge.startX ? "left" : "right")
+
+	const edgePos = edgeDirection === "vertical" ? edge.startX : edge.startY
+	const cursorPos = edgeDirection === "vertical" ? posX : posY
+	const amount = Math.abs(cursorPos - edgePos)
+	if (amount === 0) {
+		return {
+			x: posX,
+			y: posY,
+			dir,
+			isPassedLimit: false,
+			pos: edgePos,
+			distance: 0
+		}
+	}
+	const limitInDir = getResizeLimit(edge, touchingFrames, dir, amount,
+		edgeDirection === "vertical" ? margin.width : margin.height
+	)
+
+	const distanceToLimit = Math.abs(edgePos - limitInDir)
+	const isPassedLimit = amount > distanceToLimit
+	const reverseClamp = (dir === "right" || dir === "down")
+	const pos = clamp
+		? reverseClamp
+			? clampNumber(cursorPos, -Infinity, limitInDir)
+			: clampNumber(cursorPos, limitInDir, Infinity)
+		: cursorPos
+	const distance = Math.abs(pos - edgePos)
+
+	return {
+		x: posX,
+		y: posY,
+		dir,
+		isPassedLimit,
+		pos,
+		distance
+	}
+}