@witchcraft/layout 0.3.1 → 0.4.1

package/src/runtime/helpers/framesRedistributeFix.ts

@@ -0,0 +1,162 @@
+import { oppositeSide } from "./oppositeSide.js"
+
+import { settings } from "../settings.js"
+import type { EdgeSide, LayoutFrame, LayoutWindow } from "../types/index.js"
+
+/**
+ * Prepares frames that need to be temporarily repositioned before redistribution
+ * and returns functions to apply/revert the fixes after redistribution. Used mostly internally for collapse/uncollapse of docked frames and similar operations.
+ *
+ * It exists because if you try to resize a layout like this to the right, you will get issues with frame edges not lining up as frame B would be resized less than A. If you had a frame at the empty space that you excluded, it's right edge would no longer align with B's.
+ *
+ * This helper takes frames like A, moves the edge so it's shared then moved them back. Just excluding them from the calcuation usually leads to subtler errors. Such as if there are frames after A and B to the right, excluding A would mean A's right edge would stop aligning with those other frames.
+ *
+ * ┌────────────┐
+ * │A           │
+ * └──┬─────────┤
+ *    │B        │
+ *    └─────────┘
+ *
+ * It has two modes, shrink and expand meant for collapse/uncollapse operations.
+ *
+ * ## Expand
+ *
+ * When multiple frames are docked* they may share an edge like this:
+ * For example, if we collapse A, we need to allow everything else to expand,
+ * but if we expand D it will overflow the bounds of the window and we'd get an error.
+ * To avoid this, we shrink these frames towards the opposite side first.
+ *
+ * collapsed size/amount
+ * ├──┘
+ * │  shrink amount
+ * │  ├───┘
+ * ├──────┬───────────┐
+ * │A*│   │B*         │
+ * │      ├──────┬────┤
+ * │  │   │E     │C*  │
+ * │      │      │    │
+ * ├──┴───┴──────┤    │
+ * │D*           │    │
+ * └──────┬──────┴────┘
+ *        │we would shrink D to here
+ *
+ *  D.x = A.x + A.width, and then subtract the difference from it's width
+ *
+ * ***IMPROTANT: It needs to stay aligned with the right side of A and the rest of the frames, or redistribute doesn't know how to redistribute it properly.
+ *
+ * When redistribute expands it again by shrinkAmount it will end up at A.x + collapseSize.
+ *
+ * This works fine when collapseSize is 0, but otherwise breaks so we keep a list of
+ * fixes to make after redistributing to place it's left edge back at the right place (it's right edge will have been moved by redistribute).
+ *
+ * ## Shrink
+ *
+ * Mirrors collapse, the only difference being we can skip the fixes if the frame was fully collapsed to 0.
+ *
+ * Why is this? Well take this example where A is docked and collapsed and B is docked, in the following two cases we would have no problems expanding as B ends where A begins, but if B shares the edge and A is not fully collapsed it is no longer aligned with the "end" of A.
+ *
+ * Ok:
+ * A - fully collapsed to 0
+ * ~ ┌──────────┐
+ * │ │B*        │
+ * │ ├──────────┤
+ * │ │          │
+ * │ │          │
+ * │ └──────────┘
+ *
+ * Ok:
+ * A collapsed to non-zero size
+ * Note B still shares A's right edge
+ * ┌──┬─────────┐
+ * │A~│B*       │
+ * │  ├─────────┤
+ * │  │         │
+ * │  │         │
+ * └──┴─────────┘
+ *
+ * Causes issues:
+ * A collapsed to non-zero size with B docked first
+ * B looses alignment with A causing issues when redistributing
+ * ┌────────────┐
+ * │B*          │
+ * ├──┬─────────┤
+ * │A~│         │
+ * │  │         │
+ * └──┴─────────┘
+ *
+ */
+
+export function framesRedistributeFix(
+	win: LayoutWindow,
+	frame: LayoutFrame,
+	dockedSide: EdgeSide,
+	posKey: "x" | "y",
+	sizeKey: "width" | "height",
+	mode: "shrink" | "expand" = "shrink"
+): {
+	applyFixes: () => void
+	toFix: string[]
+} {
+	const framesToFix: ({
+		id: string
+		posKey: "x" | "y"
+		sizeKey: "width" | "height"
+		type: "start" | "end"
+	})[] = []
+
+	const opposite = oppositeSide(dockedSide)
+
+	// expand skips if frame was fully collapsed to 0
+	if (mode === "expand" && frame[sizeKey] === 0) {
+		return {
+			applyFixes: () => {},
+			toFix: []
+		}
+	}
+
+	for (const other of Object.values(win.frames)) {
+		if (frame.id === other.id || !other.docked) continue
+
+		// expand skips zero-area frames
+		if (mode === "expand" && (other.width === 0 || other.height === 0)) continue
+
+		if (other.docked === opposite) continue
+		if (dockedSide === "left" || dockedSide === "top") {
+			if (other[posKey] !== 0) continue
+			other[posKey] = frame[posKey] + frame[sizeKey]
+			other[sizeKey] -= frame[sizeKey]
+			framesToFix.push({
+				id: other.id,
+				posKey,
+				sizeKey,
+				type: "start"
+			})
+		} else {
+			if (other[posKey] + other[sizeKey] !== settings.maxInt) continue
+			other[sizeKey] -= frame[sizeKey]
+			framesToFix.push({
+				id: other.id,
+				posKey,
+				sizeKey,
+				type: "end"
+			})
+		}
+	}
+
+	return {
+		applyFixes: () => {
+			for (const fix of framesToFix) {
+				const other = win.frames[fix.id]
+				if (fix.type === "start") {
+					const sizeDiff = other[fix.posKey]
+					other[fix.posKey] = 0
+					other[fix.sizeKey] += sizeDiff
+				} else {
+					const sizeDiff = settings.maxInt - (other[fix.posKey] + other[fix.sizeKey])
+					other[fix.sizeKey] += sizeDiff
+				}
+			}
+		},
+		toFix: framesToFix.map(f => f.id)
+	}
+}

package/src/runtime/helpers/getMoveEdgeInfo.ts

@@ -1,13 +1,18 @@
-import { clampNumber } from "./clampNumber.js"
+import { clampNumber } from "@alanscodelog/utils/clampNumber"
+
 import { getEdgeOrientation } from "./getEdgeOrientation.js"
 import { getResizeLimit } from "./getResizeLimit.js"
 
 import { settings } from "../settings.js"
 import type {
 	Direction,
-	Edge, LayoutFrame,
+	Edge,
+	LayoutFrame,
 	Point,
-	Size } from "../types/index.js"
+	Size
+} from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
 
 export function getMoveEdgeInfo(
 	touchingFrames: LayoutFrame[],
@@ -15,7 +20,9 @@ export function getMoveEdgeInfo(
 	/** Window scaled/snaped position. See {@link toWindowCoord} */
 	position: Point,
 	margin: Size = settings.minSizeScaled,
-	clamp = true
+	clamp = true,
+	/** Skip the collapsed frame check. Used internally during window resize adjustments. */
+	ignoreCollapsedCheck = false
 ): {
 	x: number
 	y: number
@@ -23,7 +30,17 @@ export function getMoveEdgeInfo(
 	isPassedLimit: boolean
 	pos: number
 	distance: number
-} {
+} | KnownError<typeof LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME> {
+	// prevent moving edges that touch collapsed frames
+	if (!ignoreCollapsedCheck) {
+		for (const frame of touchingFrames) {
+			// we check with a falsy check on PURPOSE, frames collapsed to 0 aren't an issue, they are ignored anyways
+			if (frame.collapsed) {
+				return new KnownError(LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME, `Cannot resize non-0 collapsed frame ${frame.id}.`, { frame })
+			}
+		}
+	}
+
 	const { x: posX, y: posY } = position
 
 	const edgeDirection = getEdgeOrientation(edge)

package/src/runtime/helpers/getPinnedEdgesForCollapsedFrames.ts

@@ -0,0 +1,29 @@
+export function getPinnedEdgesForCollapsedFrames(
+	win: { frames: Record<string, any> },
+	frame: { id: string },
+	dockedSide: string,
+	posKey: string,
+	sizeKey: string
+): number[] {
+	const pinnedEdgeCoordinates: number[] = []
+	const isHorizontal = dockedSide === "left" || dockedSide === "right"
+
+	for (const other of Object.values(win.frames)) {
+		if (frame.id === other.id || !other.collapsed) continue
+
+		const otherIsHorizontal = other.docked === "left" || other.docked === "right"
+
+		// only pin collapsed frames in the same direction
+		if (isHorizontal === otherIsHorizontal) {
+			if (other.docked === "left" || other.docked === "top") {
+				const edge = other[posKey] + other[sizeKey]
+				pinnedEdgeCoordinates.push(edge)
+			} else {
+				const edge = other[posKey]
+				pinnedEdgeCoordinates.push(edge)
+			}
+		}
+	}
+
+	return pinnedEdgeCoordinates
+}

package/src/runtime/helpers/{getShapeSquareCss.ts → getShapeRectCss.ts}

@@ -1,8 +1,8 @@
 import { settings } from "../settings.js"
-import type { BaseSquare } from "../types/index.js"
+import type { BaseRect } from "../types/index.js"
 
-export function getShapeSquareCss(
-	obj: BaseSquare,
+export function getShapeRectCss(
+	obj: BaseRect,
 	pad?: string
 ): {
 	x: string

package/src/runtime/helpers/index.ts

@@ -1,3 +1,5 @@
+export { clampNumber } from "@alanscodelog/utils/clampNumber"
+
 /* Autogenerated Index */
 
 export { addPointsToIntersection } from "./addPointsToIntersection.js"
@@ -8,7 +10,6 @@ export { assertLayoutHasActiveWindow } from "./assertLayoutHasActiveWindow.js"
 export { assertValidWinAndFrame } from "./assertValidWinAndFrame.js"
 export { assertValidWinAndFrameIds } from "./assertValidWinAndFrameIds.js"
 export { assertWindowHasActiveFrame } from "./assertWindowHasActiveFrame.js"
-export { clampNumber } from "./clampNumber.js"
 export { cloneFrame } from "./cloneFrame.js"
 export { cloneFrames } from "./cloneFrames.js"
 export { containsEdge } from "./containsEdge.js"
@@ -35,7 +36,7 @@ export { getIntersections } from "./getIntersections.js"
 export { getIntersectionsCss } from "./getIntersectionsCss.js"
 export { getMoveEdgeInfo } from "./getMoveEdgeInfo.js"
 export { getResizeLimit } from "./getResizeLimit.js"
-export { getShapeSquareCss } from "./getShapeSquareCss.js"
+export { getShapeRectCss } from "./getShapeRectCss.js"
 export { getSideTouching } from "./getSideTouching.js"
 export { getVisualEdgeCss } from "./getVisualEdgeCss.js"
 export { getVisualEdges } from "./getVisualEdges.js"
@@ -54,7 +55,7 @@ export { isWindowEdge } from "./isWindowEdge.js"
 export { isWindowEdgePoint } from "./isWindowEdgePoint.js"
 export { moveEdge } from "./moveEdge.js"
 export { numberToScaledPercent } from "./numberToScaledPercent.js"
-export { numberToScaledSize } from "./numberToScaledSize.js"
+export { pxSizeToScaledSize } from "./pxSizeToScaledSize.js"
 export { oppositeSide } from "./oppositeSide.js"
 export { resizeByEdge } from "./resizeByEdge.js"
 export { scaledPointToPx } from "./scaledPointToPx.js"

package/src/runtime/helpers/moveEdge.ts

@@ -16,6 +16,8 @@ export function moveEdge(
 	margin: Size = settings.minSizeScaled
 ): void {
 	if (!edge || !touchingFrames) return
-	const { pos, dir, distance } = getMoveEdgeInfo(touchingFrames, edge, position, margin)
+	const result = getMoveEdgeInfo(touchingFrames, edge, position, margin)
+	if (result instanceof Error) return
+	const { pos, dir, distance } = result
 	resizeByEdge(touchingFrames, edge, dir, pos, distance)
 }

package/src/runtime/helpers/{numberToScaledSize.ts → pxSizeToScaledSize.ts}

@@ -5,8 +5,8 @@ import { numberToScaledPercent } from "./numberToScaledPercent.js"
 import { settings } from "../settings.js"
 import type { LayoutWindow, PxSize, Size } from "../types/index.js"
 
-export function numberToScaledSize(
-	win: LayoutWindow,
+export function pxSizeToScaledSize(
+	win: Pick<LayoutWindow, "pxWidth" | "pxHeight">,
 	size: PxSize | number,
 	scale: number = settings.maxInt
 ): Size {

package/src/runtime/helpers/updateWindowSizeWithEvent.ts

@@ -1,6 +1,9 @@
 import type { LayoutWindow, PxPos, PxSize } from "../types/index.js"
 
 const props = ["pxWidth", "pxHeight", "pxX", "pxY"] as const
+/**
+ * See also the experimental {@link getUpdateWindowSizeInfo} for the function that will likely replace this.
+ */
 export function updateWindowWithEvent(win: LayoutWindow, event: PxPos & PxSize): void {
 	for (const prop of props) {
 		if (event[prop] && win[prop] !== event[prop]) {

package/src/runtime/helpers/validateLayoutShape.ts

@@ -0,0 +1,46 @@
+import type { LayoutFrame } from "../types/index.js"
+
+/**
+ * For testing, validates the resulting layout is valid (frames do not overlap, have no gaps between them and form a rectangular area.
+ */
+export function validateLayoutShape(frames: Pick<LayoutFrame, "x" | "y" | "width" | "height">[]): boolean {
+	const n = frames.length
+	if (n === 0) return false
+
+	// check area mismatch (non-rectangular, or has gaps)
+	let totalArea = 0
+	let minX = Infinity, minY = Infinity
+	let maxX = -Infinity, maxY = -Infinity
+
+	for (const f of frames) {
+		totalArea += f.width * f.height
+		minX = Math.min(minX, f.x)
+		minY = Math.min(minY, f.y)
+		maxX = Math.max(maxX, f.x + f.width)
+		maxY = Math.max(maxY, f.y + f.height)
+	}
+
+	const boundingArea = (maxX - minX) * (maxY - minY)
+
+	if (Math.abs(totalArea - boundingArea) > 0.001) {
+		return false
+	}
+
+	// check overlaps
+	for (let i = 0; i < n; i++) {
+		for (let j = i + 1; j < n; j++) {
+			const a = frames[i]
+			const b = frames[j]
+
+
+			if (a.x < b.x + b.width
+				&& a.x + a.width > b.x
+				&& a.y < b.y + b.height
+				&& a.y + a.height > b.y) {
+				return false
+			}
+		}
+	}
+
+	return true
+}

package/src/runtime/layout/applyFrameChanges.ts

@@ -36,4 +36,9 @@ export function applyFrameChanges(
 	for (const frame of change.deleted) {
 		delete win.frames[frame.id]
 	}
+	if (change.window) {
+		for (const [key, value] of Object.entries(change.window)) {
+			;(win as any)[key] = value as any
+		}
+	}
 }

package/src/runtime/layout/createSplitDecoShapes.ts

@@ -39,6 +39,6 @@ export function createSplitDecoShapes(
 
 	return [
 		{ type: "edge", data: edge, attrs: { class: classes.splitEdge ?? "deco-split-edge bg-red-500" } },
-		{ type: "square", data: newFrame, attrs: { class: classes.splitNewFrame ?? "deco-split-new-frame bg-blue-500/50" } }
+		{ type: "rect", data: newFrame, attrs: { class: classes.splitNewFrame ?? "deco-split-new-frame bg-blue-500/50" } }
 	]
 }

package/src/runtime/layout/getFrameCollapseInfo.ts

@@ -4,6 +4,8 @@ import { walk } from "@alanscodelog/utils/walk"
 import { applyFrameChanges } from "./applyFrameChanges.js"
 import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.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"
@@ -21,9 +23,17 @@ import { KnownError } from "../utils/KnownError.js"
  */
 export function getFrameCollapseInfo(
 	win: LayoutWindow,
-	frameId: string
+	frameId: string,
+	{
+		collapseSizeScaled
+	}: {
+		/** Override the target collapse size. If provided, the frame will collapse to this size instead of settings.collapseSizeScaled. */
+		collapseSizeScaled?: Size
+	} = {}
 ): LayoutChange
-	| KnownError<typeof LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED> {
+	| KnownError<typeof LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED>
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES> {
+	collapseSizeScaled = collapseSizeScaled ?? settings.getCollapseSizeScaled(win)
 	win = walk(win, undefined, { save: true }) as typeof win
 	const frame = win.frames[frameId]
 	if (!frame) throw new Error(`Unknown frame ${frameId}`)
@@ -45,120 +55,51 @@ export function getFrameCollapseInfo(
 	const oppositePosKey = isVertical ? "y" : "x"
 	const oppositeSizeKey = isVertical ? "height" : "width"
 
-	const collapseSize: Size = settings.collapseSizeScaled
 
 	const currentSize = frame[sizeKey]
-	const collapseAmount = collapseSize[sizeKey]
+	const collapseAmount = collapseSizeScaled[sizeKey]
 	const shrinkAmount = currentSize - collapseAmount
 
 	const dockedSide = frame.docked as EdgeSide
 
-
-	/**
-	 * When multiple frames are docked* they may share an edge like this:
-	 * For example, if we collapse A, we need to allow everything else to expand,
-	 * but if we expand D it will overflow the bounds of the window and we'd get an error.
-	 * To avoid this, we shrink these frames towards the opposite side first.
-	 *
-	 * collapsed size/amount
-	 * ├──┘
-	 * │  shrink amount
-	 * │  ├───┘
-	 * ├──────┬───────────┐
-	 * │A*│   │B*         │
-	 * │      ├──────┬────┤
-	 * │  │   │E     │C*  │
-	 * │      │      │    │
-	 * ├──┴───┴──────┤    │
-	 * │D*           │    │
-	 * └──────┬──────┴────┘
-	 *        │we would shrink D to here
-	 *
-	 *  D.x = A.x + A.width, and then subtract the difference from it's width
-	 *
-	 * ***IMPROTANT: It needs to stay aligned with the right side of A and the rest of the frames, or redistribute doesn't know how to redistribute it properly.
-	 *
-	 * When redistribute expands it again by shrinkAmount it will end up at A.x + collapseSize.
-	 *
-	 * This works fine when collapseSize is 0, but otherwise breaks so we keep a list of
-	 * fixes to make after redistributing to place it's left edge back at the right place (it's right edge will have been moved by redistribute).
-	 */
-
-	const framesToFix: ({
-		id: string
-		posKey: "x" | "y"
-		sizeKey: "width" | "height"
-		type: "start" | "end"
-	})[] = []
-	const opposite = oppositeSide(dockedSide)
-	for (const other of Object.values(win.frames)) {
-		if (frame.id === other.id || !other.docked) continue
-
-		if (other.docked === opposite) continue
-		if (dockedSide === "left" || dockedSide === "top") {
-			if (other[posKey] !== 0) continue
-			other[posKey] = frame[posKey] + frame[sizeKey]
-			other[sizeKey] -= frame[sizeKey]
-			framesToFix.push({
-				id: other.id,
-				posKey,
-				sizeKey,
-				type: "start"
-			})
-		} else {
-			if (other[posKey] + other[sizeKey] !== settings.maxInt) continue
-			other[sizeKey] -= frame[sizeKey]
-			framesToFix.push({
-				id: other.id,
-				posKey,
-				sizeKey,
-				type: "end"
-			})
-		}
-	}
+	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 changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, -shrinkAmount, true)
+	const pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, dockedSide, posKey, sizeKey)
+
+	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 || LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE) {
+		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 as any // in case of other errors
+		return changes
 	}
 	applyFrameChanges(win, changes)
 	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
 
-	for (const fix of framesToFix) {
-		const other = win.frames[fix.id]
-		if (fix.type === "start") {
-			const sizeDiff = other[fix.posKey]
-			other[fix.posKey] = 0
-			other[fix.sizeKey] += sizeDiff
-		} else {
-			const sizeDiff = settings.maxInt - (other[fix.posKey] + other[fix.sizeKey])
-			other[fix.sizeKey] += sizeDiff
-		}
-	}
-	pushIfNotIn(toExtract, framesToFix.map(_ => _.id))
+
+	applyFixes()
+	pushIfNotIn(toExtract, toFix)
 
 	if (frame.docked === "right" || frame.docked === "bottom") {
-		frame[posKey] = frame[posKey] + (frame[sizeKey] - collapseSize[sizeKey])
+		frame[posKey] = frame[posKey] + (frame[sizeKey] - collapseSizeScaled[sizeKey])
 	}
-	frame[sizeKey] = collapseSize[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 (collapseSize[sizeKey] === 0) {
+	if (collapseSizeScaled[sizeKey] === 0) {
 		frame[oppositePosKey] = 0
 		frame[oppositeSizeKey] = settings.maxInt
 	}
 
 	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
 }
+

package/src/runtime/layout/getFrameDockInfo.ts

@@ -8,6 +8,7 @@ import { getFrameUndockInfo } from "./getFrameUndockInfo.js"
 
 import { cloneFrame } from "../helpers/cloneFrame.js"
 import { getDockBoundaries } from "../helpers/getDockBoundaries.js"
+import { getPinnedEdgesForCollapsedFrames } from "../helpers/getPinnedEdgesForCollapsedFrames.js"
 import { oppositeSide } from "../helpers/oppositeSide.js"
 import { settings } from "../settings.js"
 import type { EdgeSide, LayoutChange, LayoutWindow } from "../types/index.js"
@@ -28,6 +29,7 @@ export function getFrameDockInfo(
 	| LayoutChange
 	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS>
 	| KnownError<typeof LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE>
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES>
 	| 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>
@@ -82,7 +84,12 @@ export function getFrameDockInfo(
 	// redistribute other non-docked frames to make room for the new dock.
 	const sideToPushTowards = oppositeSide(side)
 
-	const redistributeChanges = getFramesRedistributeInfo(win, sideToPushTowards, nonDockedFrameIds, perpendicularLength)
+	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