@witchcraft/layout 0.1.3 → 0.2.0

package/src/runtime/types/index.ts

@@ -4,9 +4,7 @@ import { z } from "zod"
 
 export * from "../drag/types.js"
 
-import type { HTMLAttributes } from "vue"
-
-import { getMaxInt } from "../settings.js"
+import { settings } from "../settings.js"
 
 export const zUuid = z.uuid()
 export type AnyUuid = z.infer<typeof zUuid>
@@ -22,7 +20,7 @@ export type FrameId = z.infer<typeof zFrameId>
 export const zScaledIntPercentage = z.number()
 	.int()
 	.min(0)
-	.max(getMaxInt())
+	.max(settings.maxInt)
 	.nonnegative()
 
 const zPx = z.number()
@@ -111,9 +109,13 @@ export type IntersectionEntry = {
 	sharedEdges: { horizontal: Edge[], vertical: Edge[] }
 	isWindowEdge: boolean
 }
-export const zLayoutFrame = z.looseObject({
-	id: z.uuid()
-}).extend(zBaseSquare.shape)
+
+
+export const zLayoutFrame = zBaseSquare.extend({
+	id: z.uuid(),
+	docked: zSide.optional(),
+	collapsed: z.union([z.literal(false), z.number()]).optional()
+}).loose()
 
 export const zLayoutFrameLoose = zLayoutFrame.loose()
 
@@ -126,7 +128,11 @@ export type ExtendedLayout = Register extends { ExtendedLayout: infer T } ? T :
 export type ExtendedWorkspace = Register extends { ExtendedWorkspace: infer T } ? T : unknown
 /* eslint-enable @typescript-eslint/naming-convention */
 
-export type BaseLayoutFrame = Size & Pos & { id: FrameId }
+export type BaseLayoutFrame = Size & Pos & {
+	id: FrameId
+	docked?: EdgeSide | false
+	collapsed?: false | number
+}
 export type LayoutFrame = ExtendedLayoutFrame & BaseLayoutFrame
 export type LayoutFrames = Record<string, LayoutFrame>
 
@@ -153,7 +159,24 @@ export type BaseLayoutWindow = {
 export type LayoutWindow = ExtendedLayoutWindow & BaseLayoutWindow
 export type LayoutWindows = Record<string, LayoutWindow>
 
-const baseWorkspace = zLayoutWindow.pick({ activeFrame: true, frames: true })
+const baseWorkspace = baseLayoutWindow.pick({ activeFrame: true, frames: true }).superRefine((data, ctx) => {
+	for (const [frameId, frame] of Object.entries(data.frames ?? {})) {
+		if ((frame as any).docked === undefined) continue
+		const edge = (frame as any).docked
+		if (edge === "left" && (frame as any).x !== 0) {
+			ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on left edge must have x=0`, path: ["frames", frameId, "x"] })
+		}
+		if (edge === "right" && (frame as any).x + (frame as any).width !== settings.maxInt) {
+			ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on right edge must have x+width=maxInt`, path: ["frames", frameId, "x"] })
+		}
+		if (edge === "top" && (frame as any).y !== 0) {
+			ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on top edge must have y=0`, path: ["frames", frameId, "y"] })
+		}
+		if (edge === "bottom" && (frame as any).y + (frame as any).height !== settings.maxInt) {
+			ctx.addIssue({ code: "custom", message: `Docked frame ${frameId} on bottom edge must have y+height=maxInt`, path: ["frames", frameId, "y"] })
+		}
+	}
+})
 export const zWorkspace = baseWorkspace.strict()
 export const zWorkspaceLoose = zWorkspace.loose()
 
@@ -180,43 +203,49 @@ export type Layout = ExtendedLayout & {
 	activeWindow?: string
 	windows: LayoutWindows
 }
+const zLayoutShape = z.discriminatedUnion("type", [
+	z.object({ type: z.literal("square"), data: zBaseSquare, attrs: z.record(z.string(), z.string()).optional() }),
+	z.object({ type: z.literal("edge"), data: zEdge, attrs: z.record(z.string(), z.string()).optional() })
+])
 
-export const zSplitDecoShapes = z.object({
-	edge: zEdge,
-	newFrame: zBaseSquare
-}).strict()
+export type LayoutShape = z.infer<typeof zLayoutShape>
 
-export type SplitDecoShapes = z.infer<typeof zSplitDecoShapes>
-export const zSplitDeco = z.object({
+const zBaseDeco = z.object({
+	shapes: z.array(zLayoutShape).default([])
+})
+
+export type BaseDeco = z.infer<typeof zBaseDeco>
+
+export const zSplitDeco = zBaseDeco.extend({
 	id: z.uuid(),
 	type: z.literal("split"),
 	position: zScaledIntPercentage,
-	direction: zDirection,
-	shapes: zSplitDecoShapes
-}).strict()
+	direction: zDirection
+})
 export const zRawSplitDeco = zSplitDeco.omit({ shapes: true })
 export type RawSplitDeco = z.infer<typeof zRawSplitDeco>
 export type SplitDeco = z.infer<typeof zSplitDeco>
 
-const zCloseDeco = z.object({
+const zCloseDeco = zBaseDeco.extend({
 	id: z.uuid(),
 	type: z.literal("close"),
 	force: z.boolean().optional()
-}).strict()
+})
 export type CloseDeco = z.infer<typeof zCloseDeco>
 
-const zDropDeco = z.object({
+
+const zFrameDragDeco = zBaseDeco.extend({
 	id: z.uuid(),
 	type: z.literal("drop"),
 	position: zSide.or(z.enum(["center"]))
-}).strict()
+})
 
-export type DropDeco = z.infer<typeof zDropDeco>
+export type FrameDragDeco = z.infer<typeof zFrameDragDeco>
 
 export const zDeco = z.union([
 	zSplitDeco,
 	zCloseDeco,
-	zDropDeco
+	zFrameDragDeco
 ])
 
 export type Deco = z.infer<typeof zDeco>
@@ -231,7 +260,20 @@ export const LAYOUT_ERROR = enumFromArray([
 	"CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL",
 	"CANT_CLOSE_SINGLE_FRAME",
 	"CANT_SPLIT_FRAME_TOO_SMALL",
-	"CANT_CLOSE_WITHOUT_FORCE"
+	"CANT_CLOSE_WITHOUT_FORCE",
+	"CANT_SWAP_WITH_SELF",
+	"CANT_REARRANGE_TO_SAME_RELATIVE_POSITION",
+	"CANT_REARRANGE_WITH_DOCKED_EDGES",
+	"CANT_REARRANGE_DOCKED_WITH_NON_DOCKED",
+	"CANT_SPLIT_DOCKED_FRAME",
+	"NO_SPACE_TO_REDISTRIBUTE",
+	"REDISTRIBUTE_OUT_OF_BOUNDS",
+	"FRAME_ALREADY_DOCKED_ON_SIDE",
+	"CANT_LEAVE_NO_UNDOCKED_FRAMES",
+	"CANT_UNDOCK_COLLAPSED_FRAME",
+	"CANT_COLLAPSE_NOT_DOCKED",
+	"CANT_UNCOLLAPSE_NOT_COLLAPSED",
+	"NO_FILL_CANDIDATES"
 ])
 
 export type LayoutError = EnumLike<typeof LAYOUT_ERROR>
@@ -270,11 +312,80 @@ export type LayoutErrorsInfo = {
 		frame: LayoutFrame
 		framesRequiredToBeDeleted: LayoutFrame[]
 	}
+	[LAYOUT_ERROR.CANT_SWAP_WITH_SELF]: {
+		frame: LayoutFrame
+	}
+	[LAYOUT_ERROR.CANT_REARRANGE_TO_SAME_RELATIVE_POSITION]: {
+		draggingFrameId: string
+		hoveredFrameId: string
+		zoneSide: DragZone["side"]
+	}
+	[LAYOUT_ERROR.CANT_REARRANGE_WITH_DOCKED_EDGES]: {
+		draggingFrameId: string
+		hoveredFrameId: string
+		zoneSide: DragZone["side"]
+	}
+	[LAYOUT_ERROR.CANT_REARRANGE_DOCKED_WITH_NON_DOCKED]: {
+		draggingFrameId: string
+		hoveredFrameId: string
+		zoneSide: DragZone["side"]
+	}
+	[LAYOUT_ERROR.CANT_SPLIT_DOCKED_FRAME]: {
+		frame: LayoutFrame
+	}
+	[LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE]: {
+		minFrameSize: number
+		frameSizeNeeded: number
+	}
+	[LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS]: {
+		min: number
+		max: number
+		wanted: number
+	}
+	[LAYOUT_ERROR.FRAME_ALREADY_DOCKED_ON_SIDE]: {
+		side: EdgeSide
+		id: string
+	}
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+	[LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES]: {}
+	[LAYOUT_ERROR.CANT_UNDOCK_COLLAPSED_FRAME]: {
+		frame: string
+	}
+	[LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED]: {
+		frame: LayoutFrame
+	}
+	[LAYOUT_ERROR.CANT_UNCOLLAPSE_NOT_COLLAPSED]: {
+		frame: LayoutFrame
+	}
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+	[LAYOUT_ERROR.NO_FILL_CANDIDATES]: {}
 }
 
 // todo rename to toOpposite
 export type HasOpposite = Direction | EdgeSide | ExtendedDirection | ExtendedEdgeSide | keyof Point | keyof Size
 
+
+export type BaseDragZone = {
+	x: number
+	y: number
+	width: number
+	height: number
+	pxWidth: number
+	pxHeight: number
+}
+
+export type FrameDragZone = BaseDragZone & {
+	type: "frame"
+	side: EdgeSide | "center"
+}
+
+export type WindowEdgeZone = BaseDragZone & {
+	type: "window"
+	side: EdgeSide
+}
+
+export type DragZone = FrameDragZone | WindowEdgeZone
+
 export const zWindowCreate = zLayoutWindowLoose
 	.partial({ id: true, pxWidth: true, pxHeight: true, pxX: true, pxY: true })
 	.extend({ frames: zLayoutWindow.shape.frames.optional() })
@@ -297,9 +408,6 @@ export type LayoutShapeSquareProps
 	= & {
 		css: BaseSquareCss
 	}
-	& /** @vue-ignore */ Omit<HTMLAttributes, "class" | "onFocus">
-	& /** @vue-ignore */ { class?: string }
-
 
 export type LayoutEdgesProps
 	= & {
@@ -315,6 +423,13 @@ export type LayoutEdgesProps
 	& Partial<LayoutShapeSquareProps>
 
 
+export type LayoutChange<TInfo = never> = {
+	modified: LayoutFrame[]
+	created: LayoutFrame[]
+	deleted: LayoutFrame[]
+	info?: TInfo
+}
+
 export type LayoutFrameProps
 	= & {
 		frame: LayoutFrame

package/dist/runtime/layout/closeFrame.d.ts

@@ -1,5 +0,0 @@
-import type { Direction, Edge, EdgeSide, LAYOUT_ERROR, LayoutFrame, LayoutWindow, Size } from "../types/index.js";
-import type { KnownError } from "../utils/KnownError.js";
-export declare function closeFrame<T extends "edge" | "dir">(win: LayoutWindow, visualEdges: Edge[], frame: LayoutFrame, 
-/** See {@link getCloseFrameInfo} */
-closeDirOrSide: (T extends "dir" ? Direction : EdgeSide), closeBy?: T, force?: boolean, minSize?: Size): LayoutFrame[] | KnownError<typeof LAYOUT_ERROR.CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL | typeof LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE | typeof LAYOUT_ERROR.CANT_CLOSE_SINGLE_FRAME | typeof LAYOUT_ERROR.CANT_CLOSE_WITHOUT_FORCE>;

package/dist/runtime/layout/closeFrame.js

@@ -1,13 +0,0 @@
-import { closeFrames } from "./closeFrames.js";
-import { getCloseFrameInfo } from "./getCloseFrameInfo.js";
-import { getMarginSize } from "../settings.js";
-export function closeFrame(win, visualEdges, frame, closeDirOrSide, closeBy = "dir", force = false, minSize = getMarginSize()) {
-  const canClose = getCloseFrameInfo(Object.values(win.frames), visualEdges, frame, closeDirOrSide, closeBy, force, minSize);
-  if (canClose instanceof Error) {
-    return canClose;
-  }
-  const { deletedFrames, modifiedFrames } = canClose;
-  closeFrames(win, deletedFrames, modifiedFrames);
-  win.activeFrame = modifiedFrames[0].id;
-  return deletedFrames;
-}

package/dist/runtime/layout/closeFrames.d.ts

@@ -1,2 +0,0 @@
-import type { LayoutFrame, LayoutWindow } from "../types/index.js";
-export declare function closeFrames(win: LayoutWindow, deletedFrames: LayoutFrame[], modifiedFrames: LayoutFrame[]): void;

package/dist/runtime/layout/closeFrames.js

@@ -1,8 +0,0 @@
-export function closeFrames(win, deletedFrames, modifiedFrames) {
-  for (const f of deletedFrames) {
-    delete win.frames[f.id];
-  }
-  for (const mod of modifiedFrames) {
-    win.frames[mod.id] = mod;
-  }
-}

package/dist/runtime/layout/createSplitDecoEdge.d.ts

@@ -1,2 +0,0 @@
-import type { LayoutFrame, Point, RawSplitDeco, Size, SplitDecoShapes } from "../types/index.js";
-export declare function createSplitDecoEdge(frames: Record<string, LayoutFrame>, deco: RawSplitDeco, snapAmount?: Point, minSize?: Size): SplitDecoShapes;

package/dist/runtime/layout/frameSplit.d.ts

@@ -1,16 +0,0 @@
-import type { LayoutFrame, LayoutWindow } from "../types/index.js";
-/**
- * Apply a frame split. See {@link getFrameSplitInfo}
- * ```ts
- * // undefined if we can't split
- * const splitInfo = getFrameSplitInfo()
- * if (splitInfo) {
- * 	frameSplit(win, splitInfo)
- *
- * }
- * ```
- */
-export declare function frameSplit(win: LayoutWindow, { splitFrame, newFrame }: {
-    splitFrame: LayoutFrame;
-    newFrame: LayoutFrame;
-}): LayoutFrame | undefined;

package/dist/runtime/layout/frameSplit.js

@@ -1,9 +0,0 @@
-import { keys } from "@alanscodelog/utils/keys";
-export function frameSplit(win, { splitFrame, newFrame }) {
-  const winFrame = win.frames[splitFrame.id];
-  for (const key of keys(splitFrame)) {
-    winFrame[key] = splitFrame[key];
-  }
-  win.frames[newFrame.id] = newFrame;
-  return newFrame;
-}

package/dist/runtime/layout/isPointInFrame.d.ts

@@ -1,2 +0,0 @@
-import type { LayoutFrame, Point } from "../types/index.js";
-export declare function isPointInFrame(frame: LayoutFrame, point: Point): boolean;

package/src/runtime/layout/closeFrame.ts

@@ -1,33 +0,0 @@
-import { closeFrames } from "./closeFrames.js"
-import { getCloseFrameInfo } from "./getCloseFrameInfo.js"
-
-import { getMarginSize } from "../settings.js"
-import type { Direction, Edge, EdgeSide, LAYOUT_ERROR, LayoutFrame, LayoutWindow, Size } from "../types/index.js"
-import type { KnownError } from "../utils/KnownError.js"
-
-export function closeFrame<T extends "edge" | "dir">(
-	win: LayoutWindow,
-	visualEdges: Edge[],
-	frame: LayoutFrame,
-	/** See {@link getCloseFrameInfo} */
-	// future, support multiple dirs? return aggregate error?
-	closeDirOrSide: (T extends "dir" ? Direction : EdgeSide),
-	closeBy: T = "dir" as any as T,
-	force: boolean = false,
-	minSize: Size = getMarginSize()
-): LayoutFrame[]
-	| KnownError<
-		| typeof LAYOUT_ERROR.CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL
-		| typeof LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE
-		| typeof LAYOUT_ERROR.CANT_CLOSE_SINGLE_FRAME
-		| typeof LAYOUT_ERROR.CANT_CLOSE_WITHOUT_FORCE
-	> {
-	const canClose = getCloseFrameInfo(Object.values(win.frames), visualEdges, frame, closeDirOrSide, closeBy, force, minSize)
-	if ((canClose instanceof Error)) {
-		return canClose
-	}
-	const { deletedFrames, modifiedFrames } = canClose
-	closeFrames(win, deletedFrames, modifiedFrames)
-	win.activeFrame = modifiedFrames[0].id
-	return deletedFrames
-}

package/src/runtime/layout/closeFrames.ts

@@ -1,14 +0,0 @@
-import type { LayoutFrame, LayoutWindow } from "../types/index.js"
-
-export function closeFrames(
-	win: LayoutWindow,
-	deletedFrames: LayoutFrame[],
-	modifiedFrames: LayoutFrame[]
-): void {
-	for (const f of deletedFrames) {
-		delete win.frames[f.id]
-	}
-	for (const mod of modifiedFrames) {
-		win.frames[mod.id] = mod
-	}
-}

package/src/runtime/layout/frameSplit.ts

@@ -1,31 +0,0 @@
-import { keys } from "@alanscodelog/utils/keys"
-
-import type { LayoutFrame, LayoutWindow } from "../types/index.js"
-
-/**
- * Apply a frame split. See {@link getFrameSplitInfo}
- * ```ts
- * // undefined if we can't split
- * const splitInfo = getFrameSplitInfo()
- * if (splitInfo) {
- * 	frameSplit(win, splitInfo)
- *
- * }
- * ```
- */
-
-export function frameSplit(
-	win: LayoutWindow,
-	{ splitFrame, newFrame }: {
-		splitFrame: LayoutFrame
-		newFrame: LayoutFrame
-	}
-): LayoutFrame | undefined {
-	const winFrame = win.frames[splitFrame.id]
-	for (const key of keys(splitFrame)) {
-		// @ts-expect-error wut
-		winFrame[key] = splitFrame[key]
-	}
-	win.frames[newFrame.id] = newFrame
-	return newFrame
-}

package/src/runtime/layout/isPointInFrame.ts

@@ -1,7 +0,0 @@
-import { inRange } from "../helpers/inRange.js"
-import type { LayoutFrame, Point } from "../types/index.js"
-
-export function isPointInFrame(frame: LayoutFrame, point: Point): boolean {
-	return inRange(point.x, frame.x, frame.x + frame.width)
-		&& inRange(point.y, frame.y, frame.y + frame.height)
-}