@witchcraft/layout 0.1.2 → 0.2.0

package/src/runtime/drag/types.ts

@@ -1,12 +1,18 @@
-import type { Direction, Edge, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
+import type { ComputedRef, InjectionKey, Ref } from "vue"
+
+import type { Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "../types/index.js"
 
 export type DragState = {
 	/** The current directions in the corresponding orientations that the user is dragging in. */
 	dragDirections: Record<Orientation, Direction | undefined>
 	/** The curren point (in scaled window coordinates) the user is dragging at. */
 	dragPoint?: Point
-	/** Whether the user is currently dragging. Is true during all drag events. */
-	isDragging: boolean
+	/** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
+	isDragging: boolean | "frame" | "edge"
+	/** Whether to show the moved frames while dragging. */
+	showDragging: boolean
+	/** The frame being dragged during a frame drag. Only set when isDragging is "frame". */
+	draggingFrameId?: FrameId
 	/**
 	 * The edges that are currently being dragged. There are multiple edges if they drag an intersection since what's actually happening is we're just dragging the closest horizontal and vertical edges.
 	 */
@@ -46,18 +52,31 @@ export type DragState = {
 	win: LayoutWindow
 }
 
+
+export interface ActionDragChangeResult {
+	/** Whether the drag should update the edges. Defaults to false. */
+	updateEdges?: boolean
+	/** Deco shapes produced by this action during this drag step. */
+	shapes: LayoutShape[]
+	/** Whether to show the moved edges while dragging. Defaults to true. */
+	showDragging?: boolean
+}
+export type DragChangeResult = Omit<ActionDragChangeResult, "shapes">
+
 /**
- * Note that the return type only affects the `move` event but is also typed as `boolean` for other events for ease of use.
+ * Called when the drag coordinates change (during any event).
+ *
+ * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
+ *
+ * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
  */
-export interface DragChangeHandler {
-	<T extends "start" | "move" | "end">(
-		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
-		state: DragState,
-		forceRecalculateEdges: () => void,
-		cancel: () => void
-	): boolean | undefined
-}
+export type DragChangeHandler = <T extends "start" | "move" | "end">(
+	type: T,
+	e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+	state: DragState,
+	forceRecalculateEdges: () => void,
+	cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void
+) => ActionDragChangeResult
 
 /**
  * A drag action describes when and how to handle a drag event.
@@ -70,12 +89,6 @@ export interface DragChangeHandler {
 export interface IDragAction {
 	/** A unique name for your action. */
 	name: string
-	/**
-	 * Called when the drag coordinates change (during any event). Should return true to allow the edges to be moved, or false to prevent it.
-	 *
-	 * Can be used to save some context/info to later apply safely during onDragApply.
-	 */
-
 	onDragChange: DragChangeHandler
 	/**
 	 *
@@ -103,5 +116,62 @@ export interface IDragAction {
 	 *
 	 * You should reset your state here.
 	 */
-	cancel(): void
+	cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void
+	/**
+	 * Plugins should implement some basic debug logs by calling {@link DragActionHandler.debugState } at least before and after applying actions in onDragApply. Debug can be a string because it can be an object key to filter on (see the debugState function).
+	 *
+	 *
+	 * Calls look like this usually, where this.state is the plugin state:
+	 * ```ts
+	 * DragActionHandler.debugState(this.name, "before", state, this.state, this.debug)
+	 * ```
+	 */
+	debug: boolean | string
+	/**
+	 * The action handler will call this regardless of whether the action is active or not.
+	 *
+	 * Can be used by actions to return display hints.
+	 *
+	 * Actions should keep the state of the hints locally and update them in canHandlerRequest/onDrag*, etc. and only use this to return the state of the actions, not update them as that could become expensive.
+	 */
+	// todo think of a better way to do this, don't like that the action handler has to construct a bunch of objects on every change
+	getTextHints(type: "start" | "move" | "end"): {
+		/** Hint texts to display regarding the action state/usage. Undefined means no hint. */
+		actions?: string[]
+		/** Error texts/hints to display when the action produces an error. */
+		errors?: string[]
+	}
 }
+export type EdgeDragStartData = { edge?: Edge, intersection?: IntersectionEntry }
+export type FrameDragStartData = { frameId: FrameId }
+
+// drag start overloads for triggering dragsj
+export type DragStartFn = {
+	(e: PointerEvent, type: "edge", data: EdgeDragStartData): void
+	(e: PointerEvent, type: "frame", data: FrameDragStartData): void
+}
+
+export interface UseFramesContext {
+	dragStart: DragStartFn
+	dragMove: (e: PointerEvent) => void
+	dragEnd: (e?: PointerEvent, options?: { apply?: boolean }) => void
+	cancel: () => void
+	dragDirections: Ref<Record<Orientation, Direction | undefined>>
+	dragPoint: Ref<Point | undefined>
+	isDragging: Ref<false | "frame" | "edge">
+	draggingEdges: Ref<Edge[]>
+	draggingIntersection: Ref<IntersectionEntry | undefined>
+	visualEdges: Ref<Edge[]>
+	touchingFrames: Ref<Record<string, LayoutFrame>[]>
+	touchingFramesArrays: Ref<LayoutFrame[][]>
+	frames: ComputedRef<Record<string, LayoutFrame>>
+	dragHoveredFrame: ComputedRef<LayoutFrame | undefined>
+	intersections: ComputedRef<IntersectionEntry[]>
+	isDraggingFromWindowEdge: Ref<boolean>
+	forceRecalculateEdges: () => void
+	state: ComputedRef<DragState>
+	frameDragFrameId: Ref<FrameId | undefined>
+}
+
+
+export const dragContextInjectionKey = Symbol("dragContext") as InjectionKey<UseFramesContext>

package/src/runtime/helpers/createZoneSideClipPath.ts

@@ -0,0 +1,41 @@
+/**
+ * Get the clip-path polygon for a zone's side. Ends the shape at a 45° angle.
+ *
+ * e.g. for a right zone, it looks like it's cutting the top and bottom left corners.
+ *
+ * Accepts scaled coordinates.
+ */
+
+import type { DragZone } from "../types/index.js"
+
+export function createZoneSideClipPath(
+	zone: DragZone,
+	{ frameEdgePx, windowEdgePx }: { frameEdgePx: number, windowEdgePx: number }
+): string | undefined {
+	const side = zone.side
+	const thicknessPx = zone.type === "window" ? windowEdgePx : frameEdgePx
+	const pxLength = zone.side === "center"
+		? 0
+		: zone.side === "right" || zone.side === "left"
+			? zone.pxHeight
+			: zone.pxWidth
+
+	if (side === "center") return undefined
+
+	const t = thicknessPx
+	const l = pxLength
+
+	if (side === "bottom")
+		return `polygon(${t}px 0px, ${l - t}px 0px, ${l}px ${t}px, 0px ${t}px)`
+
+	if (side === "left")
+		return `polygon(0px 0px, ${t}px ${t}px, ${t}px ${l - t}px, 0px ${l}px)`
+
+	if (side === "top")
+		return `polygon(0px 0px, ${t}px ${t}px, ${l - t}px ${t}px, ${l}px 0px)`
+
+	if (side === "right")
+		return `polygon(${t}px 0px, 0px ${t}px, 0px ${l - t}px, ${t}px ${l}px)`
+
+	return undefined
+}

package/src/runtime/helpers/doEdgesOverlap.ts

@@ -4,22 +4,28 @@ import { isEdgeParallel } from "./isEdgeParallel.js"
 
 import type { Edge, Orientation } from "../types/index.js"
 
-export function doEdgesOverlap(edgeA: Edge, edgeB: Edge, dir?: Orientation): boolean {
+export function doEdgesOverlap(
+	edgeA: Edge,
+	edgeB: Edge,
+	dir?: Orientation,
+	/** If you pass inclusive true it will also match edges that start where the other edge ends or vice versa. */
+	inclusive: boolean = false
+): 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)
+		const startOverlaps = inRange(leftMost.endX, rightMost.startX, rightMost.endX, inclusive)
+		const endOverlaps = inRange(rightMost.startX, leftMost.startX, leftMost.endX, inclusive)
 		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)
+		const startOverlaps = inRange(topMost.endY, bottomMost.startY, bottomMost.endY, inclusive)
+		const endOverlaps = inRange(bottomMost.startY, topMost.startY, topMost.endY, inclusive)
 		return startOverlaps || endOverlaps
 	}
 }

package/src/runtime/helpers/getDockBoundaries.ts

@@ -0,0 +1,36 @@
+import { settings } from "../settings.js"
+import type { LayoutWindow } from "../types/index.js"
+
+/**
+ * Compute the inner boundaries of a docked region by looking at already docked frames.
+ *
+ * For example, if A, B, and C are docked, this returns the area of C.
+ * ┌─────────┐
+ * │A*       │
+ * ├────┬────┤
+ * │B*  │C   │
+ * ├────┴────┤
+ * │D*       │
+ * └─────────┘
+ */
+export function getDockBoundaries(win: LayoutWindow): {
+	minX: number
+	maxX: number
+	minY: number
+	maxY: number
+} {
+	let minX = 0
+	let maxX = settings.maxInt
+	let minY = 0
+	let maxY = settings.maxInt
+
+	for (const f of Object.values(win.frames)) {
+		if (f.docked === "left") minX = Math.max(minX, f.x + f.width)
+		if (f.docked === "right") maxX = Math.min(maxX, f.x)
+		if (f.docked === "top") minY = Math.max(minY, f.y + f.height)
+		if (f.docked === "bottom") maxY = Math.min(maxY, f.y)
+	}
+
+	return { minX, maxX, minY, maxY }
+}
+

package/src/runtime/helpers/getEdgeLength.ts

@@ -0,0 +1,10 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js"
+
+import type { Edge } from "../types/index.js"
+
+export function getEdgeLength(edge: Edge): number {
+	const orientation = getEdgeOrientation(edge)
+	return orientation === "horizontal"
+		? Math.abs(edge.endX - edge.startX)
+		: Math.abs(edge.endY - edge.startY)
+}

package/src/runtime/helpers/getIntersections.ts

@@ -6,7 +6,7 @@ import { edgeToPoints } from "./edgeToPoints.js"
 import { getEdgeOrientation } from "./getEdgeOrientation.js"
 import { inRange } from "./inRange.js"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	Edge, IntersectionEntry,
 	Orientation,
@@ -25,7 +25,7 @@ export function getIntersections(
 	}
 
 	const points: IntersectionEntry[] = []
-	const maxInt = getMaxInt()
+	const maxInt = settings.maxInt
 	for (const x of keys(intersections)) {
 		for (const y of keys(intersections[x])) {
 			// careful, x and y are really strings

package/src/runtime/helpers/getIntersectionsCss.ts

@@ -1,4 +1,4 @@
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	IntersectionEntry, PointCss
 } from "../types/index.js"
@@ -13,7 +13,7 @@ export function getIntersectionsCss(entries: IntersectionEntry[],
 		shiftAmount?: string
 	} = {}
 ): (PointCss & { _shifted?: true }) [] {
-	const unscale = getMaxInt() / 100
+	const unscale = settings.maxInt / 100
 	return entries.map(entry => {
 		const point = entry.point
 		const css = {

package/src/runtime/helpers/getMoveEdgeInfo.ts

@@ -2,7 +2,7 @@ import { clampNumber } from "./clampNumber.js"
 import { getEdgeOrientation } from "./getEdgeOrientation.js"
 import { getResizeLimit } from "./getResizeLimit.js"
 
-import { getMarginSize } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	Direction,
 	Edge, LayoutFrame,
@@ -14,7 +14,7 @@ export function getMoveEdgeInfo(
 	edge: Edge,
 	/** Window scaled/snaped position. See {@link toWindowCoord} */
 	position: Point,
-	margin: Size = getMarginSize(),
+	margin: Size = settings.minSizeScaled,
 	clamp = true
 ): {
 	x: number

package/src/runtime/helpers/getResizeLimit.ts

@@ -1,7 +1,7 @@
 import { castType } from "@alanscodelog/utils/castType"
 import { keys } from "@alanscodelog/utils/keys"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	Direction,
 	Edge, ExtendedDirection, LayoutFrame
@@ -51,7 +51,7 @@ export function getResizeLimit<TDir extends ExtendedDirection>(
 	for (const key of keys(limits)) {
 		// this happens when we drag window edges
 		if (limits[key] === -Infinity) limits[key] = 0
-		if (limits[key] === Infinity) limits[key] = getMaxInt()
+		if (limits[key] === Infinity) limits[key] = settings.maxInt
 
 		limits[key]! += (dir === "left" || dir === "up" ? margin : -margin)
 	}

package/src/runtime/helpers/getShapeSquareCss.ts

@@ -1,4 +1,4 @@
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type { BaseSquare } from "../types/index.js"
 
 export function getShapeSquareCss(
@@ -10,7 +10,7 @@ export function getShapeSquareCss(
 	width: string
 	height: string
 } {
-	const unscale = getMaxInt() / 100
+	const unscale = settings.maxInt / 100
 	const css = {
 		x: `${obj.x / unscale}%`,
 		y: `${obj.y / unscale}%`,

package/src/runtime/helpers/getVisualEdgeCss.ts

@@ -1,6 +1,6 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	Edge,
 	EdgeCss } from "../types/index.js"
@@ -20,7 +20,7 @@ export function getVisualEdgeCss(
 	} = {}
 ): EdgeCss {
 	const dir = getEdgeOrientation(edge)
-	const unscale = getMaxInt() / 100
+	const unscale = settings.maxInt / 100
 	const w = (edge.endX - edge.startX) / unscale
 	const h = (edge.endY - edge.startY) / unscale
 	const width = dir === "vertical" ? edgeWidth : `${w}%`

package/src/runtime/helpers/getVisualEdges.ts

@@ -10,7 +10,7 @@ import { inRange } from "./inRange.js"
 import { splitEdge } from "./splitEdge.js"
 import { unionEdges } from "./unionEdges.js"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	Edge,
 	Intersections,
@@ -18,7 +18,7 @@ import type {
 } from "../types/index.js"
 
 /**
- * Returns the "visual" edges that can be dragged.
+ * Returns the "visual" edges that can be dragged (so will not return edges for collapsed frames without some area).
  *
  * Visual edges are a combination of all edges shared by frames that must be moved together.
  *
@@ -75,8 +75,9 @@ export function getVisualEdges<T extends boolean = false>(
 	const intersections: Intersections = {
 		// x: {y: count}
 	}
-	const max = getMaxInt()
+	const max = settings.maxInt
 	for (const frame of frames) {
+		if (frame.collapsed && (frame.width === 0 || frame.height === 0)) continue
 		const frameEdges = frameToEdges(frame)
 		addPointsToIntersection(intersections, Object.values(frameToPoints(frame)))
 
@@ -94,7 +95,7 @@ export function getVisualEdges<T extends boolean = false>(
 				if (containsEdge(edge, e, dir)) {
 					continue secondlabel
 				}
-				if (doEdgesOverlap(e, edge, dir)) {
+				if (doEdgesOverlap(e, edge, dir, true)) {
 					indexes.push(i)
 					edges.push(e)
 				}

package/src/runtime/helpers/index.ts

@@ -15,6 +15,7 @@ export { containsEdge } from "./containsEdge.js"
 export { convertLayoutWindowToWorkspace } from "./convertLayoutWindowToWorkspace.js"
 export { copySize } from "./copySize.js"
 export { createEdge } from "./createEdge.js"
+export { createZoneSideClipPath } from "./createZoneSideClipPath.js"
 export { dirToOrientation } from "./dirToOrientation.js"
 export { dirToSide } from "./dirToSide.js"
 export { doEdgesOverlap } from "./doEdgesOverlap.js"
@@ -24,6 +25,7 @@ export { findDraggableEdge } from "./findDraggableEdge.js"
 export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js"
 export { frameToEdges } from "./frameToEdges.js"
 export { frameToPoints } from "./frameToPoints.js"
+export { getEdgeLength } from "./getEdgeLength.js"
 export { getEdgeOrientation } from "./getEdgeOrientation.js"
 export { getEdgeSharedDirection } from "./getEdgeSharedDirection.js"
 export { getEdgeSide } from "./getEdgeSide.js"
@@ -55,6 +57,7 @@ export { numberToScaledPercent } from "./numberToScaledPercent.js"
 export { numberToScaledSize } from "./numberToScaledSize.js"
 export { oppositeSide } from "./oppositeSide.js"
 export { resizeByEdge } from "./resizeByEdge.js"
+export { scaledPointToPx } from "./scaledPointToPx.js"
 export { sideToDirection } from "./sideToDirection.js"
 export { sideToOrientation } from "./sideToOrientation.js"
 export { splitEdge } from "./splitEdge.js"
@@ -62,3 +65,4 @@ export { toCoord } from "./toCoord.js"
 export { toId } from "./toId.js"
 export { toWindowCoord } from "./toWindowCoord.js"
 export { unionEdges } from "./unionEdges.js"
+export { updateWindowWithEvent } from "./updateWindowSizeWithEvent.js"

package/src/runtime/helpers/isEdgeEqual.ts

@@ -1,14 +1,12 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js"
-import { isEdgeParallel } from "./isEdgeParallel.js"
 
 import type { Edge, Orientation } from "../types/index.js"
 
 export function isEdgeEqual(edgeA: Edge, edgeB: Edge, orientation?: Orientation): boolean {
 	orientation ??= getEdgeOrientation(edgeA)
-	if (!isEdgeParallel(edgeA, edgeB)) return false
 	if (orientation === "horizontal") {
-		return edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY
+		return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX && edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY
 	} else {
-		return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX
+		return edgeA.startX === edgeB.startX && edgeB.endX === edgeA.endX && edgeA.startY === edgeB.startY && edgeB.endY === edgeA.endY
 	}
 }

package/src/runtime/helpers/isWindowEdge.ts

@@ -1,11 +1,11 @@
 import { getEdgeOrientation } from "./getEdgeOrientation.js"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type { Edge, Orientation } from "../types/index.js"
 
 export function isWindowEdge(edge: Edge, edgeDirection?: Orientation): boolean {
 	edgeDirection ??= getEdgeOrientation(edge)
-	const max = getMaxInt()
+	const max = settings.maxInt
 	return (edgeDirection === "vertical" && (edge.startX === 0 || edge.startX === max))
 		|| (edgeDirection === "horizontal" && (edge.startY === 0 || edge.startY === max))
 }

package/src/runtime/helpers/isWindowEdgePoint.ts

@@ -1,8 +1,8 @@
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type { Point } from "../types/index.js"
 
 export function isWindowEdgePoint(point: Point): boolean {
-	const max = getMaxInt()
+	const max = settings.maxInt
 	return (point.x === 0 || point.x === max)
 		|| (point.y === 0 || point.y === max)
 }

package/src/runtime/helpers/moveEdge.ts

@@ -1,7 +1,7 @@
 import { getMoveEdgeInfo } from "./getMoveEdgeInfo.js"
 import { resizeByEdge } from "./resizeByEdge.js"
 
-import { getMarginSize } from "../settings.js"
+import { settings } from "../settings.js"
 import type {
 	Edge, LayoutFrame,
 	Point,
@@ -13,7 +13,7 @@ export function moveEdge(
 	edge: Edge | undefined,
 	/** Window scaled/snaped position. See {@link toWindowCoord} */
 	position: Point,
-	margin: Size = getMarginSize()
+	margin: Size = settings.minSizeScaled
 ): void {
 	if (!edge || !touchingFrames) return
 	const { pos, dir, distance } = getMoveEdgeInfo(touchingFrames, edge, position, margin)

package/src/runtime/helpers/numberToScaledPercent.ts

@@ -1,9 +1,9 @@
 import { snapNumber } from "@alanscodelog/utils/snapNumber"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 
 /**
- * Given a number (e.g. the x coordinate in px), and the max value it could be (e.g. the max width of it's container in px), returns it's position as a scaled percentage.
+ * Given a number (e.g. the x coordinate in px), and the max value it could be (e.g. the max width of it's container in px), returns it's position as a rounded scaled percentage.
  *
  * ```
  * -----------
@@ -14,6 +14,6 @@ import { getMaxInt } from "../settings.js"
  * // returns 50 / 100 * scale or 50000 (50%)
  * ```
  */
-export function numberToScaledPercent(num: number, max: number, scale: number = getMaxInt()): number {
+export function numberToScaledPercent(num: number, max: number, scale: number = settings.maxInt): number {
 	return snapNumber((num / max) * scale, 1)
 }

package/src/runtime/helpers/numberToScaledSize.ts

@@ -2,13 +2,13 @@ import { unreachable } from "@alanscodelog/utils/unreachable"
 
 import { numberToScaledPercent } from "./numberToScaledPercent.js"
 
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 import type { LayoutWindow, PxSize, Size } from "../types/index.js"
 
 export function numberToScaledSize(
 	win: LayoutWindow,
 	size: PxSize | number,
-	scale: number = getMaxInt()
+	scale: number = settings.maxInt
 ): Size {
 	const scaledSize = {
 		width: numberToScaledPercent(

package/src/runtime/helpers/rotateFrames.ts

@@ -0,0 +1,45 @@
+import { settings } from "../settings.js"
+import type { LayoutFrame } from "../types/index.js"
+
+/**
+ * Rotates the list of frames given by 90, 180, or 270 degrees around the 50% center.
+ *
+ * Used mainly in testing to catch issues with incorrect handling of the same scenario in different orientations.
+ */
+export function rotateLayout(frames: LayoutFrame[], rotation: 90 | 180 | 270) {
+	const sides: NonNullable<LayoutFrame["docked"]>[] = ["top", "right", "bottom", "left"]
+	const shift = rotation / 90
+
+	for (const frame of frames) {
+		const { x, y, width, height, docked } = frame
+
+		if (docked) {
+			const currentIndex = sides.indexOf(docked)
+			if (currentIndex !== -1) {
+				frame.docked = sides[(currentIndex + shift) % 4]
+			}
+		}
+		switch (rotation) {
+			case 90:
+				frame.x = settings.maxInt - (y + height)
+				frame.y = x
+				frame.width = height
+				frame.height = width
+				break
+			case 180:
+				frame.x = settings.maxInt - (x + width)
+				frame.y = settings.maxInt - (y + height)
+				frame.width = width
+				frame.height = height
+				break
+			case 270:
+				frame.x = y
+				frame.y = settings.maxInt - (x + width)
+				frame.width = height
+				frame.height = width
+				break
+			default:
+				throw new Error(`Unknown rotation ${rotation}`)
+		}
+	}
+}

package/src/runtime/helpers/scaledPointToPx.ts

@@ -0,0 +1,13 @@
+import { settings } from "../settings.js"
+
+/** Convert a scaled point to pixel coords for a given window. */
+export function scaledPointToPx(
+	point: { x: number, y: number },
+	win: { pxWidth: number, pxHeight: number, pxX: number, pxY: number },
+	scale: number = settings.maxInt
+): { x: number, y: number } {
+	return {
+		x: point.x / scale * win.pxWidth + win.pxX,
+		y: point.y / scale * win.pxHeight + win.pxY
+	}
+}

package/src/runtime/helpers/toWindowCoord.ts

@@ -2,13 +2,13 @@ import { snapNumber } from "@alanscodelog/utils/snapNumber"
 
 import { numberToScaledPercent } from "./numberToScaledPercent.js"
 
-import { getSnapPoint } from "../settings.js"
+import { settings } from "../settings.js"
 import type { LayoutWindow, Point } from "../types/index.js"
 
 export function toWindowCoord(
 	win: LayoutWindow,
 	e: Pick<PointerEvent, "clientX" | "clientY">,
-	snapAmount: Point = getSnapPoint()
+	snapAmount: Point = settings.snapPointScaled
 ): Point {
 	const x = numberToScaledPercent((e.clientX - win.pxX), win.pxWidth)
 	const y = numberToScaledPercent((e.clientY - win.pxY), win.pxHeight)

package/src/runtime/layout/applyFrameChanges.ts

@@ -0,0 +1,39 @@
+import { LAYOUT_ERROR, type LayoutChange, type LayoutWindow } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ *
+ * Most actions that change the layout will return a LayoutChange object without mutating the window.
+ *
+ * This function applies the changes returned by them.
+ *
+ * Mutates the frame positions in the window given.
+ */
+export function applyFrameChanges(
+	win: LayoutWindow,
+	change: LayoutChange<any>
+): void {
+	for (const frame of change.modified) {
+		const target = win.frames[frame.id]
+		if (!target) {
+			throw new KnownError(LAYOUT_ERROR.INVALID_ID, `Frame ${frame.id} not found in window ${win.id}`, { id: frame.id })
+		}
+		if ("docked" in frame) { target.docked = frame.docked }
+		if ("collapsed" in frame) { target.collapsed = frame.collapsed }
+		target.x = frame.x
+		target.y = frame.y
+		target.width = frame.width
+		target.height = frame.height
+	}
+
+	for (const frame of change.created) {
+		if (win.frames[frame.id]) {
+			throw new KnownError(LAYOUT_ERROR.ID_ALREADY_EXISTS, `Frame ${frame.id} already exists in window ${win.id}`, { id: frame.id })
+		}
+		win.frames[frame.id] = frame
+	}
+
+	for (const frame of change.deleted) {
+		delete win.frames[frame.id]
+	}
+}