@witchcraft/layout 0.4.3 → 0.4.4

package/src/runtime/layout/getFrameExpandInfo.ts

@@ -0,0 +1,84 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
+import { walk } from "@alanscodelog/utils/walk"
+
+import { applyFrameChanges } from "./applyFrameChanges.js"
+import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+
+import { findEdgesTouchingWindow } from "../helpers/findEdgesTouchingWindow.js"
+import { framesRedistributeFix } from "../helpers/framesRedistributeFix.js"
+import { getPinnedEdgesForCollapsedFrames } from "../helpers/getPinnedEdgesForCollapsedFrames.js"
+import { oppositeSide } from "../helpers/oppositeSide.js"
+import type { EdgeSide, LayoutChange, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to expand a frame touching a window edge by a given amount.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * It expands the frame by redistributing space from neighboring frames.
+ */
+export function getFrameExpandInfo(
+	win: LayoutWindow,
+	frameId: string,
+	amount: number,
+	expandSide: EdgeSide
+): 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_RESIZE_SINGLE_FRAME> {
+	win = walk(win, undefined, { save: true })
+	const frame = win.frames[frameId]
+	if (!frame) { throw new Error(`Unknown frame ${frameId}`) }
+	if (!frame.docked) { throw new Error(`Frame ${frameId} is not docked.`) }
+	const toExtract = [frame.id]
+
+	if (Object.keys(win.frames).length === 1) {
+		return new KnownError(LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME, `Frame ${frameId} is the only frame, cannot expand.`, { frame })
+	}
+
+	// verify the frame actually touches the specified edge
+	if (!(expandSide in findEdgesTouchingWindow(frame))) {
+		throw new Error(`Frame ${frameId} does not touch the ${expandSide} edge.`)
+	}
+
+
+	const isVertical = frame.docked === "left" || frame.docked === "right"
+	const sizeKey = isVertical ? "width" : "height" as const
+	const posKey = isVertical ? "x" : "y"
+	const currentSize = frame[sizeKey]
+
+
+	const dockedSide = frame.docked as EdgeSide
+
+	const { applyFixes, toFix } = framesRedistributeFix(win, frame, dockedSide, posKey, sizeKey, "expand")
+
+	// 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(frame.docked)
+
+	const pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, dockedSide, posKey, sizeKey)
+
+	const changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, amount, { pinnedEdgeCoordinates })
+
+	if (changes instanceof KnownError) {
+		return changes
+	}
+
+	applyFrameChanges(win, changes)
+	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
+
+	applyFixes()
+	pushIfNotIn(toExtract, toFix)
+
+	frame[sizeKey] = currentSize + amount
+
+	if (frame.docked === "right" || frame.docked === "bottom") {
+		frame[posKey] -= amount
+	}
+
+	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
+}

package/src/runtime/layout/getFrameShrinkInfo.ts

@@ -0,0 +1,87 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
+import { walk } from "@alanscodelog/utils/walk"
+
+import { applyFrameChanges } from "./applyFrameChanges.js"
+import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+
+import { findEdgesTouchingWindow } from "../helpers/findEdgesTouchingWindow.js"
+import { framesRedistributeFix } from "../helpers/framesRedistributeFix.js"
+import { getPinnedEdgesForCollapsedFrames } from "../helpers/getPinnedEdgesForCollapsedFrames.js"
+import { oppositeSide } from "../helpers/oppositeSide.js"
+import type { EdgeSide, LayoutChange, LayoutWindow } from "../types/index.js"
+import { LAYOUT_ERROR } from "../types/index.js"
+import { KnownError } from "../utils/KnownError.js"
+
+/**
+ * Returns a {@link LayoutChange} with the information necessary to shrink a frame touching a window edge by a given amount.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * It shrinks the frame by redistributing the freed space to neighboring frames.
+ */
+export function getFrameShrinkInfo(
+	win: LayoutWindow,
+	frameId: string,
+	amount: number,
+	shrinkSide: EdgeSide,
+	{
+		allowOutOfBounds = false
+	}: {
+		/** Allow the resize span to exceed window bounds. */
+		allowOutOfBounds?: boolean
+	} = {}
+): LayoutChange
+	| KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES>
+	| KnownError<typeof LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME> {
+	win = walk(win, undefined, { save: true }) as typeof win
+	const frame = win.frames[frameId]
+	if (!frame) throw new Error(`Unknown frame ${frameId}`)
+
+	if (Object.keys(win.frames).length === 1) {
+		return new KnownError(LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME, `Frame ${frameId} is the only frame, cannot shrink.`, { frame })
+	}
+
+	// verify the frame actually touches the specified edge
+	if (!(shrinkSide in findEdgesTouchingWindow(frame))) {
+		throw new Error(`Frame ${frameId} does not touch the ${shrinkSide} edge.`)
+	}
+
+	const isVertical = shrinkSide === "left" || shrinkSide === "right"
+	const sizeKey = isVertical ? "width" : "height" as const
+	const posKey = isVertical ? "x" : "y"
+
+	const toExtract = [frame.id]
+
+	const { applyFixes, toFix } = framesRedistributeFix(win, frame, shrinkSide, 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(shrinkSide)
+
+	const pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, shrinkSide, posKey, sizeKey)
+
+	const changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, -amount, { allowOutOfBounds, pinnedEdgeCoordinates })
+
+	if (changes instanceof KnownError) {
+		// we should never get out of bounds and because this is a shrink 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
+	}
+	applyFrameChanges(win, changes)
+	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
+
+
+	applyFixes()
+	pushIfNotIn(toExtract, toFix)
+
+	if (shrinkSide === "right" || shrinkSide === "bottom") {
+		frame[posKey] = frame[posKey] + amount
+	}
+	frame[sizeKey] = frame[sizeKey] - amount
+
+	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
+}

package/src/runtime/layout/getFrameUncollapseInfo.ts

@@ -2,11 +2,8 @@ import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
 import { walk } from "@alanscodelog/utils/walk"
 
 import { applyFrameChanges } from "./applyFrameChanges.js"
-import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
+import { getFrameExpandInfo } from "./getFrameExpandInfo.js"
 
-import { framesRedistributeFix } from "../helpers/framesRedistributeFix.js"
-import { getPinnedEdgesForCollapsedFrames } from "../helpers/getPinnedEdgesForCollapsedFrames.js"
-import { oppositeSide } from "../helpers/oppositeSide.js"
 import type { EdgeSide, 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 getFrameUncollapseInfo(
 	| KnownError<typeof LAYOUT_ERROR.CANT_UNCOLLAPSE_NOT_COLLAPSED>
 	| 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.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES>
+	| KnownError<typeof LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME> {
 	win = walk(win, undefined, { save: true })
 	const frame = win.frames[frameId]
 	if (!frame) { throw new Error(`Unknown frame ${frameId}`) }
@@ -42,7 +40,6 @@ export function getFrameUncollapseInfo(
 
 	const isVertical = frame.docked === "left" || frame.docked === "right"
 	const sizeKey = isVertical ? "width" : "height" as const
-	const posKey = isVertical ? "x" : "y"
 	const currentSize = frame[sizeKey]
 
 	const storedSize = (restoreSize !== undefined ? restoreSize[sizeKey] : frame.collapsed)!
@@ -60,34 +57,15 @@ export function getFrameUncollapseInfo(
 
 	const dockedSide = frame.docked as EdgeSide
 
-	const { applyFixes, toFix } = framesRedistributeFix(win, frame, dockedSide, posKey, sizeKey, "expand")
-
-	// 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(frame.docked)
-
-	const pinnedEdgeCoordinates: number[] = getPinnedEdgesForCollapsedFrames(win, frame, dockedSide, posKey, sizeKey)
-
-	const changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, expandAmount, { pinnedEdgeCoordinates })
-
-	if (changes instanceof KnownError) {
-		return changes
+	const expandResult = getFrameExpandInfo(win, frameId, expandAmount, dockedSide)
+	if (expandResult instanceof KnownError) {
+		return expandResult
 	}
+	applyFrameChanges(win, expandResult)
+	pushIfNotIn(toExtract, expandResult.modified.map(_ => _.id))
 
-	applyFrameChanges(win, changes)
-	pushIfNotIn(toExtract, changes.modified.map(_ => _.id))
-
-	applyFixes()
-	pushIfNotIn(toExtract, toFix)
-
-	frame[sizeKey] = storedSize
 	frame.collapsed = undefined
 
-	if (frame.docked === "right" || frame.docked === "bottom") {
-		frame[posKey] -= expandAmount
-	}
-
 	return { modified: toExtract.map(_ => win.frames[_]), created: [], deleted: [] }
 }
 

package/src/runtime/layout/getUpdateWindowSizeInfo.ts

@@ -2,8 +2,8 @@ import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
 import { walk } from "@alanscodelog/utils/walk"
 
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
-import { getFrameCollapseInfo } from "../layout/getFrameCollapseInfo.js"
-import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js"
+import { getFrameExpandInfo } from "../layout/getFrameExpandInfo.js"
+import { getFrameShrinkInfo } from "../layout/getFrameShrinkInfo.js"
 import { getRelaxFramesInfo } from "../layout/getRelaxFramesInfo.js"
 import { settings } from "../settings.js"
 import type { LayoutChange, LayoutWindow, PxSize } from "../types/index.js"
@@ -48,29 +48,27 @@ export function getUpdateWindowSizeInfo(
 	for (const frameId of dockedFrameIds) {
 		const frame = win.frames[frameId]
 		const orientation = (frame.docked === "left" || frame.docked === "right") ? "horizontal" : "vertical"
-		const sizeKey = orientation === "horizontal" ? "width" : "height" as const
+		const sizeKey = orientation === "horizontal" ? "width" : "height"
 		const targetPxSize = settings.collapseSizePx[sizeKey]
 		const targetScaled = Math.round((targetPxSize / (orientation === "horizontal" ? win.pxWidth : win.pxHeight)) * maxInt)
 
-
 		if (frame[sizeKey] === targetScaled) continue
 		if (frame[sizeKey] === 0) continue
 
-		let result: LayoutChange | KnownError<any>
-
-		// the logic needed to do this is nearly identical to the collapse/uncollapse logic
-		// so we abuse the functions a bit, in future might allow a more flexible collapse/uncollapse function
-		const wasCollapsed = frame.collapsed
-		const wasMinSize = { ...settings.minSize }
-		settings.minSize = 1
-		if (targetScaled < frame[sizeKey]) {
-			// clear temporarily so collapse doesn't error
-			frame.collapsed = undefined
-			result = getFrameCollapseInfo(win, frame.id, { collapseSizeScaled: { width: targetScaled, height: targetScaled } })
+		const side = frame.docked!
+		const diff = targetScaled - frame[sizeKey]
+
+		let result: ReturnType<typeof getFrameShrinkInfo> | ReturnType<typeof getFrameExpandInfo>
+
+		if (diff < 0) {
+			result = getFrameShrinkInfo(win, frame.id, -diff, side, { allowOutOfBounds: true })
 		} else {
-			// set to something, could be anything
-			frame.collapsed = Infinity
-			result = getFrameUncollapseInfo(win, frame.id, { restoreSize: { width: targetScaled, height: targetScaled } })
+			// in worst case scenario allow frames to shrink
+			// minSize must be 1 (not 0) to avoid zero-size frames during redistribution
+			const wasMinSize = { ...settings.minSize }
+			settings.minSize = 1
+			result = getFrameExpandInfo(win, frame.id, diff, side)
+			settings.minSize = wasMinSize
 		}
 
 		if (!(result instanceof KnownError)) {
@@ -78,10 +76,6 @@ export function getUpdateWindowSizeInfo(
 			pushIfNotIn(toExtract, result.modified.map(f => f.id))
 		}
 
-		// restore original collapsed value
-		frame.collapsed = wasCollapsed
-		settings.minSize = wasMinSize
-
 
 		// attempt relaxation
 		const result2 = getRelaxFramesInfo(win, relaxPasses)

package/src/runtime/layout/index.ts

@@ -14,13 +14,16 @@ export { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js"
 export { getFrameCollapseInfo } from "./getFrameCollapseInfo.js"
 export { getFrameDockInfo } from "./getFrameDockInfo.js"
 export { getFrameDragZones } from "./getFrameDragZones.js"
+export { getFrameExpandInfo } from "./getFrameExpandInfo.js"
 export { getFrameRearrangeInfo } from "./getFrameRearrangeInfo.js"
+export { getFrameShrinkInfo } from "./getFrameShrinkInfo.js"
 export { getFrameSplitInfo } from "./getFrameSplitInfo.js"
 export { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js"
 export { getFrameSwapInfo } from "./getFrameSwapInfo.js"
 export { getFrameTo } from "./getFrameTo.js"
 export { getFrameUncollapseInfo } from "./getFrameUncollapseInfo.js"
 export { getFrameUndockInfo } from "./getFrameUndockInfo.js"
+export { getRelaxFramesInfo } from "./getRelaxFramesInfo.js"
 export { getUpdateWindowSizeInfo } from "./getUpdateWindowSizeInfo.js"
 export { getWindowDragZones } from "./getWindowDragZones.js"
 export { isPointInRect } from "./isPointInRect.js"

package/src/runtime/types/index.ts

@@ -287,7 +287,8 @@ export const LAYOUT_ERROR = enumFromArray([
 	"CANT_COLLAPSE_NOT_DOCKED",
 	"CANT_UNCOLLAPSE_NOT_COLLAPSED",
 	"NO_FILL_CANDIDATES",
-	"CANT_RESIZE_COLLAPSED_FRAME"
+	"CANT_RESIZE_COLLAPSED_FRAME",
+	"CANT_RESIZE_SINGLE_FRAME"
 ])
 
 export type LayoutError = EnumLike<typeof LAYOUT_ERROR>
@@ -376,6 +377,9 @@ export type LayoutErrorsInfo = {
 	[LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME]: {
 		frame: LayoutFrame
 	}
+	[LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME]: {
+		frame: LayoutFrame
+	}
 	[LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES]: {
 		problemEdgeCoordinates: number[]
 	}
@@ -486,6 +490,8 @@ export type DragState = {
 	 * Whether the drag was initiated from a point along the window edge.
 	 */
 	isDraggingFromWindowEdge: boolean
+	/** Custom context passed to dragStart, available to action handlers via state.eventContext. */
+	eventContext?: Record<string, unknown>
 	win: LayoutWindow
 }
 
@@ -602,6 +608,38 @@ export interface IDragAction {
 export type EdgeDragStartData = { edge?: Edge, intersection?: IntersectionEntry }
 export type FrameDragStartData = { frameId: FrameId }
 
+/**
+ * Handler interface for drag actions.
+ */
+export interface ActionHandler {
+	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
+	) => {
+		/** Whether to apply the regular drag end changes. Return false to reset to the position before dragging. */
+		apply: boolean
+		/** Value to resolve the drag promise with. Ignored if `apply` is false. */
+		result: any
+	}
+	/**
+	 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
+	 */
+	annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void
+}
+
 // drag start overloads for triggering dragsj
 export type DragStartFn = {
 	(e: PointerEvent, type: "edge", data: EdgeDragStartData): void

package/src/runtime/types/vue.ts

@@ -1,10 +1,11 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue"
 
 // eslint-disable-next-line no-restricted-imports
-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
 		onFocus: (frameId: string) => void
@@ -14,9 +15,10 @@ export type LayoutContext = ComputedRef<
 export const layoutContextInjectionKey = Symbol.for("@witchcraft/layout:context") as InjectionKey<LayoutContext>
 
 export interface UseFramesContext {
+	actionHandler: ActionHandler
 	dragStart: {
-		(e: PointerEvent, type: "edge", data: { edge?: Edge, intersection?: IntersectionEntry }): void
-		(e: PointerEvent, type: "frame", data: { frameId: FrameId }): void
+		(e: PointerEvent, type: "edge", data: { edge?: Edge, intersection?: IntersectionEntry }, opts?: { moveEvent?: string, endEvent?: string, context?: Record<string, unknown> }): Promise<any>
+		(e: PointerEvent, type: "frame", data: { frameId: FrameId }, opts?: { moveEvent?: string, endEvent?: string, context?: Record<string, unknown> }): Promise<any>
 	}
 	dragMove: (e: PointerEvent) => void
 	dragEnd: (e?: PointerEvent, options?: { apply?: boolean }) => void

package/dist/runtime/drag/defaultDragActions.d.ts

@@ -1,9 +0,0 @@
-import type { IDragAction } from "../types/index.js";
-/**
- * Creates the default drag actions (Split, Close, FrameDrag).
- */
-export declare function createDefaultHandlers(config: {
-    debugSplit?: boolean;
-    debugClose?: boolean;
-    debugFrameDrag?: boolean;
-}): IDragAction[];

package/dist/runtime/drag/defaultDragActions.js

@@ -1,10 +0,0 @@
-import { CloseAction } from "./CloseAction.js";
-import { FrameDragAction } from "./FrameDragAction.js";
-import { SplitAction } from "./SplitAction.js";
-export function createDefaultHandlers(config) {
-  return [
-    new SplitAction(void 0, void 0, void 0, { debug: config.debugSplit }),
-    new CloseAction(void 0, void 0, void 0, { debug: config.debugClose }),
-    new FrameDragAction(void 0, void 0, void 0, { debug: config.debugFrameDrag })
-  ];
-}

package/src/runtime/drag/defaultDragActions.ts

@@ -1,20 +0,0 @@
-import { CloseAction } from "./CloseAction"
-import { FrameDragAction } from "./FrameDragAction.js"
-import { SplitAction } from "./SplitAction.js"
-
-import type { IDragAction } from "../types/index.js"
-
-/**
- * Creates the default drag actions (Split, Close, FrameDrag).
- */
-export function createDefaultHandlers(config: {
-	debugSplit?: boolean
-	debugClose?: boolean
-	debugFrameDrag?: boolean
-}): IDragAction[] {
-	return [
-		new SplitAction(undefined, undefined, undefined, { debug: config.debugSplit }),
-		new CloseAction(undefined, undefined, undefined, { debug: config.debugClose }),
-		new FrameDragAction(undefined, undefined, undefined, { debug: config.debugFrameDrag })
-	]
-}