@witchcraft/layout 0.4.3 → 0.4.4

package/dist/runtime/types/vue.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { Direction, DragState, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "./index.js";
+import type { ActionHandler, Direction, DragState, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "./index.js";
 export type LayoutContext = ComputedRef<{
     /** The owning window, needed so we can correctly scale coordinates. */
     win: LayoutWindow;
@@ -8,14 +8,23 @@ export type LayoutContext = ComputedRef<{
 }>;
 export declare const layoutContextInjectionKey: InjectionKey<LayoutContext>;
 export interface UseFramesContext {
+    actionHandler: ActionHandler;
     dragStart: {
         (e: PointerEvent, type: "edge", data: {
             edge?: Edge;
             intersection?: IntersectionEntry;
-        }): void;
+        }, opts?: {
+            moveEvent?: string;
+            endEvent?: string;
+            context?: Record<string, unknown>;
+        }): Promise<any>;
         (e: PointerEvent, type: "frame", data: {
             frameId: FrameId;
-        }): void;
+        }, opts?: {
+            moveEvent?: string;
+            endEvent?: string;
+            context?: Record<string, unknown>;
+        }): Promise<any>;
     };
     dragMove: (e: PointerEvent) => void;
     dragEnd: (e?: PointerEvent, options?: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -49,6 +49,7 @@
     "@alanscodelog/semantic-release-config": "^6.0.2",
     "@alanscodelog/tsconfigs": "^6.3.0",
     "@alanscodelog/vite-config": "^0.0.7",
+    "@babel/runtime": "^7.20.7",
     "@commitlint/cli": "^19.8.1",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/kit": "^4.4.6",
@@ -145,6 +146,6 @@
     "doc:dev": "concurrently \"pnpm doc:watch\" \"pnpm doc:serve\"",
     "doc:check-invalid": "typedoc --listInvalidSymbolLinks",
     "actions:debug": "act -r -v -j release",
-    "gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** -o '${path}.js'"
+    "gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** **/demo/** **/dist/** -o '${path}.js'"
   }
 }

package/src/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-		isDragging && `dragging cursor-pointer user-select-none`,
+		isDragging && `dragging cursor-pointer user-select-none pointer-events-none`,
 		requestType && `request-${requestType}`,
 		($attrs as any).class
 	)"
@@ -70,7 +70,7 @@
 <script lang="ts" setup>
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, provide, reactive, ref, useAttrs, watch } from "vue"
+import { computed, markRaw, provide, reactive, ref, useAttrs, watch } from "vue"
 
 
 import { useFrames } from "../composables/useFrames.js"
@@ -90,7 +90,7 @@ const $attrs = useAttrs()
 const win = defineModel<LayoutWindow>("win", { required: true })
 
 const props = withDefaults(defineProps<{
-	/** If you really need it, you can provide your own drag action handler, note the actionHandler's prop will no longer have any effect.*/
+	/** If you really need it, you can provide your own drag action handler (remember to markRaw it), note the actionHandler's prop will no longer have any effect.*/
 	dragActionHandler?: DragActionHandler<any, any>
 	/** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
 	actionHandlers?: IDragAction[]
@@ -122,7 +122,7 @@ const windowEl = ref<HTMLElement | null>(null)
 
 const requestType = ref<string | undefined | string>()
 
-const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
+const dragActionHandler = props.dragActionHandler ?? markRaw(new DragActionHandler(
 	[
 		...(props.actionHandlers ?? createDefaultHandlers())
 	],
@@ -141,7 +141,7 @@ const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
 			showDragging.value = true
 		},
 	}
-)
+))
 dragActionHandler.shapes = reactive([])
 dragActionHandler.textHints = reactive({ actions: [], errors: [] })
 const shapes = dragActionHandler.shapes

package/src/runtime/composables/useFrames.ts

@@ -12,30 +12,11 @@ import { moveEdge } from "../helpers/moveEdge.js"
 import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { isPointInRect } from "../layout/isPointInRect.js"
-import type { Direction, DragChangeHandler, DragChangeResult, DragState, Edge, EdgeDragStartData, FrameDragStartData, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
+import type { ActionHandler, Direction, DragState, Edge, EdgeDragStartData, FrameDragStartData, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
-	handler: {
-		eventHandler: (e: KeyboardEvent, state: DragState, forceRecalculateEdges: () => void) => void
-		/**
-			* Called when the drag coordinates change (during any event). Should return true to allow the edges to be updated/moved, or false to prevent it.
-			*
-			* Can return anything for the end event as it's ignored.
-			*
-			* Can be used to save some context/info to later apply safely during onDragApply.
-			*/
-		onDragChange: (...args: Parameters<DragChangeHandler>) => DragChangeResult
-		/**
-		 * Called when drag will be applied. If dragEnd was called with apply false, it will not be called.
-		 * Return false to not apply the regular drag end changes (i.e. return false to reset to the position before dragging).
-		 */
-		onDragApply: ((state: DragState, forceRecalculateEdges: () => void) => boolean)
-		/**
-		 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
-		 */
-		annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void
-	}
+	handler: ActionHandler
 ) {
 	const draggingEdges = ref<Edge[]>([])
 
@@ -66,6 +47,7 @@ export function useFrames(
 	const isDraggingFromWindowEdge = ref<boolean>(false)
 
 	const frameDragFrameId = ref<FrameId | undefined>()
+	const eventContext = ref<Record<string, unknown> | undefined>()
 
 	const frames = computed(() =>
 		isDragging.value && showDragging.value
@@ -126,14 +108,21 @@ export function useFrames(
 		dragHoveredFrame: dragHoveredFrame.value,
 		intersections: intersections.value,
 		isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
+		eventContext: eventContext.value,
 		win: win.value
 	} satisfies DragState))
 
 	let controller: AbortController
+	let dragResolve: ((result: any) => void) | undefined
+	let dragResult: any
 
 	function resetState(): void {
 		dragStartPoint = undefined
 
+		dragResolve?.(dragResult)
+		dragResolve = undefined
+		dragResult = undefined
+
 		draggingEdges.value = []
 		draggingIntersection.value = undefined
 		isDragging.value = false
@@ -141,6 +130,7 @@ export function useFrames(
 		dragDistance.value = -1
 		touchingFrames.value = []
 		frameDragFrameId.value = undefined
+		eventContext.value = undefined
 		dragDirStore.reset()
 		showDragging.value = false
 		forceRecalculateEdges()
@@ -150,19 +140,38 @@ export function useFrames(
 		e: PointerEvent,
 		type: T,
 		// someday this will work
-		data: T extends "edge" ? EdgeDragStartData : FrameDragStartData
-	): void {
+		data: T extends "edge" ? EdgeDragStartData : FrameDragStartData,
+		{
+			moveEvent = "pointermove",
+			endEvent = "pointerup",
+			context
+		}: {
+			moveEvent?: string
+			endEvent?: string
+			context?: Record<string, unknown>
+		} = {}
+	): Promise<any> {
+		// if already dragging, abort previous (resetState resolves the old promise)
+		if (controller) {
+			controller.abort()
+		}
+
+		const promise = new Promise<any>(resolve => {
+			dragResolve = resolve
+		})
+
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
 		e.preventDefault()
-		window.addEventListener("pointermove", dragMove, { signal: controller.signal })
-		window.addEventListener("pointerup", dragEnd, { signal: controller.signal })
+		window.addEventListener(moveEvent, dragMove as EventListener, { signal: controller.signal })
+		window.addEventListener(endEvent, dragEnd as EventListener, { signal: controller.signal })
 
 		const point = toWindowCoord(win.value, e)
 		dragPoint.value = point
 		dragStartPoint = { ...point }
 		dragDirStore.update(point)
+		eventContext.value = context
 
 		isDragging.value = type
 		showDragging.value = true
@@ -174,7 +183,7 @@ export function useFrames(
 			draggingIntersection.value = intersection
 
 			draggingEdges.value = edge
-				? [edge]
+				? [edge!]
 				: [
 						...(draggingIntersection.value?.sharedEdges.horizontal ?? []),
 						...(draggingIntersection.value?.sharedEdges.vertical ?? [])
@@ -206,6 +215,7 @@ export function useFrames(
 
 		const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel)
 		showDragging.value = res.showDragging ?? true
+		return promise
 	}
 
 	function dragMove(e: PointerEvent): void {
@@ -246,17 +256,20 @@ export function useFrames(
 			dragPoint.value = point
 		}
 
-		const doApply = apply && handler.onDragApply(state.value, forceRecalculateEdges)
-		if (doApply) {
-			for (const frame of touchingFramesArrays.value.flat()) {
-				win!.value.frames[frame.id] = frame
+		if (apply) {
+			const applyResult = handler.onDragApply(state.value, forceRecalculateEdges)
+			dragResult = applyResult.result
+			if (applyResult.apply) {
+				for (const frame of touchingFramesArrays.value.flat()) {
+					win!.value.frames[frame.id] = frame
+				}
 			}
 		}
 
 		handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel)
 
 		// this can get called from elsewhere
-		// also takes care of cleanup
+		// also takes care of cleanup nd resolving promise
 		controller?.abort()
 	}
 	function cancel(): void {
@@ -296,6 +309,7 @@ export function useFrames(
 		forceRecalculateEdges,
 		state,
 		showDragging,
-		frameDragFrameId
+		frameDragFrameId,
+		actionHandler: handler
 	}
 }

package/src/runtime/demo/tailwind.css

@@ -5,3 +5,7 @@
 
 /* Only needed for the dev playground: the demo App.vue lives outside the Vite project root, so Tailwind's auto-scan doesn't find the [&.deco-...] classes it defines. */
 @source "../../../src/runtime/demo";
+
+button {
+	cursor: pointer;
+}

package/src/runtime/drag/DragActionHandler.ts

@@ -191,14 +191,14 @@ export class DragActionHandler<
 	onDragApply(
 		state: DragState,
 		forceRecalculateEdges: () => void
-	): boolean {
+	): { apply: boolean, result: any } {
 		if (this.activeAction) {
 			const res = this.actions[this.activeAction]!.onDragApply(state, forceRecalculateEdges)
 			this.hooks.onEnd?.({ cancelled: false, applied: res })
-			return false
+			return { apply: res, result: undefined }
 		}
 		this.hooks.onEnd?.({ cancelled: false, applied: false })
-		return true
+		return { apply: true, result: undefined }
 	}
 
 	cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void {

package/src/runtime/helpers/findEdgesTouchingWindow.ts

@@ -0,0 +1,30 @@
+import { settings } from "../settings.js"
+import type { EdgeSide, LayoutFrame } from "../types/index.js"
+
+/**
+ * Checks which window edges a frame touches and how.
+ *
+ * @returns Record mapping touched sides to `"full"` (spans the entire edge) or `"partial"` (touches but doesn't span fully). Only touched sides are included as keys.
+ */
+export function findEdgesTouchingWindow(frame: LayoutFrame): Partial<Record<EdgeSide, "full" | "partial">> {
+	const maxInt = settings.maxInt
+	const result: Partial<Record<EdgeSide, "full" | "partial">> = {}
+
+	const spansVertical = frame.y === 0 && frame.y + frame.height === maxInt
+	const spansHorizontal = frame.x === 0 && frame.x + frame.width === maxInt
+
+	if (frame.x === 0) {
+		result.left = spansVertical ? "full" : "partial"
+	}
+	if (frame.x + frame.width === maxInt) {
+		result.right = spansVertical ? "full" : "partial"
+	}
+	if (frame.y === 0) {
+		result.top = spansHorizontal ? "full" : "partial"
+	}
+	if (frame.y + frame.height === maxInt) {
+		result.bottom = spansHorizontal ? "full" : "partial"
+	}
+
+	return result
+}

package/src/runtime/helpers/index.ts

@@ -12,6 +12,7 @@ export { assertValidWinAndFrameIds } from "./assertValidWinAndFrameIds.js"
 export { assertWindowHasActiveFrame } from "./assertWindowHasActiveFrame.js"
 export { cloneFrame } from "./cloneFrame.js"
 export { cloneFrames } from "./cloneFrames.js"
+export { consoleDebugWindow } from "./consoleDebugWindow.js"
 export { containsEdge } from "./containsEdge.js"
 export { convertLayoutWindowToWorkspace } from "./convertLayoutWindowToWorkspace.js"
 export { copySize } from "./copySize.js"
@@ -24,17 +25,21 @@ export { doesEdgeContinueEdge } from "./doesEdgeContinueEdge.js"
 export { edgeToPoints } from "./edgeToPoints.js"
 export { findDraggableEdge } from "./findDraggableEdge.js"
 export { findFrameDraggableEdges } from "./findFrameDraggableEdges.js"
+export { framesRedistributeFix } from "./framesRedistributeFix.js"
 export { frameToEdges } from "./frameToEdges.js"
 export { frameToPoints } from "./frameToPoints.js"
+export { getDockBoundaries } from "./getDockBoundaries.js"
 export { getEdgeLength } from "./getEdgeLength.js"
 export { getEdgeOrientation } from "./getEdgeOrientation.js"
 export { getEdgeSharedDirection } from "./getEdgeSharedDirection.js"
 export { getEdgeSide } from "./getEdgeSide.js"
 export { getFrameById } from "./getFrameById.js"
 export { getFrameConstant } from "./getFrameConstant.js"
+export { findEdgesTouchingWindow } from "./findEdgesTouchingWindow.js"
 export { getIntersections } from "./getIntersections.js"
 export { getIntersectionsCss } from "./getIntersectionsCss.js"
 export { getMoveEdgeInfo } from "./getMoveEdgeInfo.js"
+export { getPinnedEdgesForCollapsedFrames } from "./getPinnedEdgesForCollapsedFrames.js"
 export { getResizeLimit } from "./getResizeLimit.js"
 export { getShapeRectCss } from "./getShapeRectCss.js"
 export { getSideTouching } from "./getSideTouching.js"
@@ -55,9 +60,10 @@ export { isWindowEdge } from "./isWindowEdge.js"
 export { isWindowEdgePoint } from "./isWindowEdgePoint.js"
 export { moveEdge } from "./moveEdge.js"
 export { numberToScaledPercent } from "./numberToScaledPercent.js"
-export { pxSizeToScaledSize } from "./pxSizeToScaledSize.js"
 export { oppositeSide } from "./oppositeSide.js"
+export { pxSizeToScaledSize } from "./pxSizeToScaledSize.js"
 export { resizeByEdge } from "./resizeByEdge.js"
+export { rotateLayout } from "./rotateFrames.js"
 export { scaledPointToPx } from "./scaledPointToPx.js"
 export { sideToDirection } from "./sideToDirection.js"
 export { sideToOrientation } from "./sideToOrientation.js"
@@ -67,3 +73,4 @@ export { toId } from "./toId.js"
 export { toWindowCoord } from "./toWindowCoord.js"
 export { unionEdges } from "./unionEdges.js"
 export { updateWindowWithEvent } from "./updateWindowSizeWithEvent.js"
+export { validateLayoutShape } from "./validateLayoutShape.js"

package/src/runtime/layout/debugFrame.ts

@@ -1,6 +1,11 @@
+import { keys } from "@alanscodelog/utils/keys"
+
 import type { LayoutFrame } from "../types/index.js"
 
+const builtinProperties = ["id", "x", "y", "width", "height", "docked", "collapsed"]
 export function debugFrame(frame: LayoutFrame): string {
 	const f = frame
-	return `id: ${f.id.slice(0, 4)}, x:  ${f.x}, y: ${f.y}, w: ${f.width}, h: ${f.height}\ndocked: ${f.docked}, collapsed: ${f.collapsed}`
+	const otherProperties = keys(f).filter(k => !builtinProperties.includes(k)).map(k => `${k}: ${f[k]}`)
+	const otherPropertiesString = otherProperties.length > 0 ? `, ${otherProperties.join(", ")}` : ""
+	return `id: ${f.id.slice(0, 4)}, x:  ${f.x}, y: ${f.y}, w: ${f.width}, h: ${f.height}\ndocked: ${f.docked}, collapsed: ${f.collapsed}${otherPropertiesString}`
 }

package/src/runtime/layout/getFrameCollapseInfo.ts

@@ -2,13 +2,10 @@ import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
 import { walk } from "@alanscodelog/utils/walk"
 
 import { applyFrameChanges } from "./applyFrameChanges.js"
-import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+import { getFrameShrinkInfo } from "./getFrameShrinkInfo.js"
 
-import { framesRedistributeFix } from "../helpers/framesRedistributeFix.js"
-import { getPinnedEdgesForCollapsedFrames } from "../helpers/getPinnedEdgesForCollapsedFrames.js"
-import { oppositeSide } from "../helpers/oppositeSide.js"
 import { settings } from "../settings.js"
-import type { EdgeSide, LayoutChange, LayoutWindow, Size } from "../types/index.js"
+import type { LayoutChange, LayoutWindow, Size } from "../types/index.js"
 import { LAYOUT_ERROR } from "../types/index.js"
 import { KnownError } from "../utils/KnownError.js"
 
@@ -32,7 +29,8 @@ export function getFrameCollapseInfo(
 	} = {}
 ): LayoutChange
 	| KnownError<typeof LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED>
-	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES> {
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES>
+	| KnownError<typeof LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME> {
 	collapseSizeScaled = collapseSizeScaled ?? settings.getCollapseSizeScaled(win)
 	win = walk(win, undefined, { save: true }) as typeof win
 	const frame = win.frames[frameId]
@@ -51,55 +49,28 @@ export function getFrameCollapseInfo(
 
 	const isVertical = frame.docked === "left" || frame.docked === "right"
 	const sizeKey = isVertical ? "width" : "height" as const
-	const posKey = isVertical ? "x" : "y"
-	const oppositePosKey = isVertical ? "y" : "x"
-	const oppositeSizeKey = isVertical ? "height" : "width"
-
 
 	const currentSize = frame[sizeKey]
-	const collapseAmount = collapseSizeScaled[sizeKey]
-	const shrinkAmount = currentSize - collapseAmount
-
-	const dockedSide = frame.docked as EdgeSide
-
-	const { applyFixes, toFix } = framesRedistributeFix(win, frame, dockedSide, posKey, sizeKey, "shrink")
-
-	// note fully collapsed frames without an area are already excluded by getFramesRedistributeInfo
-	const otherFrameIds = Object.keys(win.frames).filter(id => id !== frameId)
-
-	const redistributeSide = oppositeSide(dockedSide)
+	const shrinkAmount = currentSize - collapseSizeScaled[sizeKey]
 
-	const pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, dockedSide, posKey, sizeKey)
+	const shrinkResult = getFrameShrinkInfo(win, frameId, shrinkAmount, frame.docked, { allowOutOfBounds: true })
 
-	const changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, -shrinkAmount, { allowOutOfBounds: true, pinnedEdgeCoordinates })
-
-	if (changes instanceof KnownError) {
-		// we should never get out of bounds and because this is a collapse there should always be space
-		if (changes.code === LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS || changes.code === LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE) {
-			changes.message = `This error should never happen, please file a bug report: ${changes.message}`
-			throw changes
-		}
-		return changes
+	if (shrinkResult instanceof KnownError) {
+		return shrinkResult
 	}
-	applyFrameChanges(win, changes)
-	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
-
 
-	applyFixes()
-	pushIfNotIn(toExtract, toFix)
+	applyFrameChanges(win, shrinkResult)
+	pushIfNotIn(toExtract, shrinkResult.modified.map(_ => _.id))
 
-	if (frame.docked === "right" || frame.docked === "bottom") {
-		frame[posKey] = frame[posKey] + (frame[sizeKey] - collapseSizeScaled[sizeKey])
-	}
-	frame[sizeKey] = collapseSizeScaled[sizeKey]
 	frame.collapsed = currentSize
 	// when we collapse to 0 it's a special case where the frame will always fit the entire window edge
 	// for proper uncollapsing later
 	if (collapseSizeScaled[sizeKey] === 0) {
+		const oppositePosKey = isVertical ? "y" : "x"
+		const oppositeSizeKey = isVertical ? "height" : "width"
 		frame[oppositePosKey] = 0
 		frame[oppositeSizeKey] = settings.maxInt
 	}
 
 	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
 }
-

package/src/runtime/layout/getFrameDockInfo.ts

@@ -3,10 +3,12 @@ import { walk } from "@alanscodelog/utils/walk"
 
 import { applyFrameChanges } from "./applyFrameChanges.js"
 import { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js"
+import { getFrameShrinkInfo } from "./getFrameShrinkInfo.js"
 import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
 import { getFrameUndockInfo } from "./getFrameUndockInfo.js"
 
 import { cloneFrame } from "../helpers/cloneFrame.js"
+import { findEdgesTouchingWindow } from "../helpers/findEdgesTouchingWindow.js"
 import { getDockBoundaries } from "../helpers/getDockBoundaries.js"
 import { getPinnedEdgesForCollapsedFrames } from "../helpers/getPinnedEdgesForCollapsedFrames.js"
 import { oppositeSide } from "../helpers/oppositeSide.js"
@@ -33,7 +35,8 @@ export function getFrameDockInfo(
 	| 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> {
+	| KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES>
+	| KnownError<typeof LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME> {
 	// 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
@@ -57,8 +60,9 @@ export function getFrameDockInfo(
 
 	const isHorizontal = side === "left" || side === "right"
 	const perpendicular = isHorizontal ? "width" : "height"
+	const posKey = isHorizontal ? "x" : "y"
+	const sizeKey = 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) {
@@ -66,68 +70,84 @@ export function getFrameDockInfo(
 	}
 
 	// 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]
+	const maxPerpendicular = maxPerpendicularLength ?? settings.maxPerpendicularLengthScaled.width
+	const perpendicularLength = otherFrameIds.length > 0 ? Math.min(frame[perpendicular], maxPerpendicular) : frame[perpendicular]
 
 	frame.docked = side
 	frame.collapsed = undefined
 
 	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 posKey = isHorizontal ? "x" : "y"
-	const sizeKey = isHorizontal ? "width" : "height"
-
-	const pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, side, posKey, sizeKey)
-
-	const redistributeChanges = getFramesRedistributeInfo(win, sideToPushTowards, nonDockedFrameIds, perpendicularLength, { pinnedEdgeCoordinates })
-
-	if (redistributeChanges instanceof KnownError) {
-		return redistributeChanges
+	if (frame[perpendicular] === perpendicularLength) {
+		return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
 	}
-	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[_])
+	// check if the frame touches the full edge it will be docked to (not just it's dock boundary)
+	// if so, we can use getFrameShrinkInfo instead of fill-empty-space + redistribute
+	// this feels better as otherwise, the other frames feel like they are unnecessarily moved to the other side
+	// this way where the frame *was* feels like it's taken into account
+	const touchesEntireEdge = findEdgesTouchingWindow(frame)[side] === "full"
+
+	if (touchesEntireEdge) {
+		const shrinkAmount = frame[sizeKey] - perpendicularLength
+		if (shrinkAmount > 0) {
+			const shrinkResult = getFrameShrinkInfo(win, frameId, shrinkAmount, side)
+			if (shrinkResult instanceof KnownError) {
+				return shrinkResult
+			}
+			applyFrameChanges(win, shrinkResult)
+			pushIfNotIn(toExtract, shrinkResult.modified.map(_ => _.id))
+		}
+	} else {
+		const oldFrame = cloneFrame(frame)
+
+		// 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 pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, side, posKey, sizeKey)
+
+		const redistributeChanges = getFramesRedistributeInfo(win, sideToPushTowards, nonDockedFrameIds, perpendicularLength, { pinnedEdgeCoordinates })
+
+		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
+		}
+	}
 
-	return { modified: res, created: [], deleted: [] }
+	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
 }