@witchcraft/layout 0.3.0 → 0.4.0

package/src/runtime/settings.ts

@@ -1,8 +1,35 @@
+import { numberToScaledPercent } from "./helpers/numberToScaledPercent.js"
 import type { Point, Size } from "./types/index.js"
 
 export class Settings {
-	private _scale = 3
-	private _maxInt = 100 * (10 ** 3)
+	private initialized = false
+	constructor() {
+		this.resetToDefaults()
+		this.initialized = true
+	}
+
+	resetToDefaults() {
+		this.scale = 3
+		this.snapPoint = 0.5
+		this.minSize = 5
+		this.collapseSizePx = 15
+		this.maxPerpendicularLength = 20
+		this.zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 }
+		this._recalcAll()
+	}
+
+	_zoneSizes!: { frameEdgePx: number, windowEdgePx: number }
+	get zoneSizes(): { frameEdgePx: number, windowEdgePx: number } { return this._zoneSizes }
+	set zoneSizes(v: number | { frameEdgePx: number, windowEdgePx: number }) {
+		if (typeof v === "number") {
+			this._zoneSizes = { frameEdgePx: v, windowEdgePx: v }
+		} else {
+			this._zoneSizes = { frameEdgePx: v.frameEdgePx, windowEdgePx: v.windowEdgePx }
+		}
+	}
+
+	private _scale!: number
+	private _maxInt!: number
 	get scale() { return this._scale }
 	set scale(v: number) {
 		this._scale = v
@@ -13,44 +40,72 @@ export class Settings {
 	get maxInt() { return this._maxInt }
 
 
-	private _snapPoint = { x: 0.5, y: 0.5 }
-	private _snapPointScaled = { x: Math.round(0.5 * (10 ** 3)), y: Math.round(0.5 * (10 ** 3)) }
+	private _snapPoint!: Point
+	private _snapPointScaled!: Point
 
-	get snapPoint() { return this._snapPoint }
+	get snapPoint(): Point { return this._snapPoint }
 	set snapPoint(v: number | Point) {
-		if (typeof v === "number") { this._snapPoint = { x: v, y: v } } else { this._snapPoint = { x: v.x, y: v.y } }
+		if (typeof v === "number") {
+			this._snapPoint = { x: v, y: v }
+		} else {
+			this._snapPoint = { x: v.x, y: v.y }
+		}
 		this._snapPointScaled = this._scalePoint(this._snapPoint)
 	}
 
 	get snapPointScaled() { return this._snapPointScaled }
 
 
-	private _minSize = { width: 10 ** 3, height: 10 ** 3 }
-	private _minSizeScaled = { width: 10 ** 3, height: 10 ** 3 }
+	private _minSize!: Size
+	private _minSizeScaled!: Size
 
-	get minSize() { return this._minSize }
+	get minSize(): Size { return this._minSize }
 	set minSize(v: number | Size) {
-		if (typeof v === "number") { this._minSize = { width: v, height: v } } else { this._minSize = { width: v.width, height: v.height } }
+		if (typeof v === "number") {
+			this._minSize = { width: v, height: v }
+		} else {
+			this._minSize = { width: v.width, height: v.height }
+		}
 		this._minSizeScaled = this._scaleSize(this._minSize)
 	}
 
-	get minSizeScaled() { return this._minSizeScaled }
+	get minSizeScaled(): Size { return this._minSizeScaled }
 
-	private _collapseSize = { width: 0, height: 0 }
-	private _collapseSizeScaled = { width: 0, height: 0 }
+	private _collapseSizePx!: Size
 
-	get collapseSize() { return this._collapseSize }
-	set collapseSize(v: number | Size) {
-		if (typeof v === "number") { this._collapseSize = { width: v, height: v } } else { this._collapseSize = { width: v.width, height: v.height } }
-		this._collapseSizeScaled = this._scaleSize(this._collapseSize)
+	get collapseSizePx(): Size { return this._collapseSizePx }
+	set collapseSizePx(v: number | Size) {
+		if (typeof v === "number") {
+			this._collapseSizePx = { width: v, height: v }
+		} else {
+			this._collapseSizePx = { width: v.width, height: v.height }
+		}
 	}
 
-	get collapseSizeScaled() { return this._collapseSizeScaled }
+	getCollapseSizeScaled(win: { pxWidth: number, pxHeight: number }): Size {
+		const size = this.collapseSizePx
+		return {
+			width: win.pxWidth === 0
+				? 0
+				: numberToScaledPercent(
+						typeof size === "number" ? size : size.width,
+						win.pxWidth,
+						this.maxInt
+					),
+			height: win.pxHeight === 0
+				? 0
+				: numberToScaledPercent(
+						typeof size === "number" ? size : size.height,
+						win.pxHeight,
+						this.maxInt
+					)
+		}
+	}
 
-	private _maxPerpendicularLength = { width: 20, height: 20 }
-	private _maxPerpendicularLengthScaled = { width: Math.round(20 * (10 ** 3)), height: Math.round(20 * (10 ** 3)) }
+	private _maxPerpendicularLength!: Size
+	private _maxPerpendicularLengthScaled!: Size
 
-	get maxPerpendicularLength() { return this._maxPerpendicularLength }
+	get maxPerpendicularLength(): Size { return this._maxPerpendicularLength }
 	set maxPerpendicularLength(v: number | Size) {
 		if (typeof v === "number") { this._maxPerpendicularLength = { width: v, height: v } } else { this._maxPerpendicularLength = { ...v } }
 		this._maxPerpendicularLengthScaled = this._scaleSize(this._maxPerpendicularLength)
@@ -70,14 +125,12 @@ export class Settings {
 	}
 
 	private _recalcAll() {
+		if (!this.initialized) return
 		this.snapPoint = this._snapPoint
 		this.minSize = this._minSize
-		this.collapseSize = this._collapseSize
+		this.collapseSizePx = this._collapseSizePx
 		this.maxPerpendicularLength = this._maxPerpendicularLength
 	}
-
-	// ==== px sized, don't require recalc
-	zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 }
 }
 
 export const settings = new Settings()

package/src/runtime/types/index.ts

@@ -2,9 +2,7 @@ import type { EnumLike } from "@alanscodelog/utils"
 import { enumFromArray } from "@alanscodelog/utils/enumFromArray"
 import { z } from "zod"
 
-export * from "../drag/types.js"
-
-import { settings } from "../settings.js"
+import { KnownError } from "../utils/KnownError.js"
 
 export const zUuid = z.uuid()
 export type AnyUuid = z.infer<typeof zUuid>
@@ -17,11 +15,24 @@ export const zFrameIdConstants = z.enum(["ACTIVE"])
 export const zFrameId = z.uuid().or(zFrameIdConstants)
 export type FrameId = z.infer<typeof zFrameId>
 
+import { settings } from "../settings.js"
+
 export const zScaledIntPercentage = z.number()
 	.int()
 	.min(0)
-	.max(settings.maxInt)
 	.nonnegative()
+	.superRefine((val, ctx) => {
+		if (val > settings.maxInt) {
+			ctx.addIssue({
+				code: "too_big",
+				type: "number",
+				origin: "number",
+				maximum: settings.maxInt,
+				inclusive: true,
+				message: `Value ${val} must be less than or equal to ${settings.maxInt}`
+			})
+		}
+	})
 
 const zPx = z.number()
 	.int()
@@ -65,7 +76,8 @@ export const zEdge = z.object({
 	startX: zScaledIntPercentage,
 	startY: zScaledIntPercentage,
 	endX: zScaledIntPercentage,
-	endY: zScaledIntPercentage
+	endY: zScaledIntPercentage,
+	error: z.instanceof<typeof KnownError>(KnownError).or(z.object({ code: z.string(), message: z.string() })).optional()
 })
 
 export type Edge = z.infer<typeof zEdge>
@@ -83,9 +95,9 @@ export type Orientation = z.infer<typeof zOrientation>
 export type EdgeSide = z.infer<typeof zSide>
 export type ExtendedEdgeSide = z.infer<typeof zExtendedSide>
 
-export const zBaseSquare = zSize.extend(zPos.shape)
-export type BaseSquare = z.infer<typeof zBaseSquare>
-export type BaseSquareCss = {
+export const zBaseRect = zSize.extend(zPos.shape)
+export type BaseRect = z.infer<typeof zBaseRect>
+export type BaseRectCss = {
 	x: string
 	y: string
 	width: string
@@ -93,10 +105,10 @@ export type BaseSquareCss = {
 	translate?: string
 }
 
-export type EdgeCss = BaseSquareCss & {
+export type EdgeCss = BaseRectCss & {
 	translate: string
 }
-export type PointCss = BaseSquareCss & {
+export type PointCss = BaseRectCss & {
 	translate: string
 }
 
@@ -111,7 +123,7 @@ export type IntersectionEntry = {
 }
 
 
-export const zLayoutFrame = zBaseSquare.extend({
+export const zLayoutFrame = zBaseRect.extend({
 	id: z.uuid(),
 	docked: zSide.optional(),
 	collapsed: z.number().min(1).optional()
@@ -204,7 +216,7 @@ export type Layout = ExtendedLayout & {
 	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("rect"), data: zBaseRect, attrs: z.record(z.string(), z.string()).optional() }),
 	z.object({ type: z.literal("edge"), data: zEdge, attrs: z.record(z.string(), z.string()).optional() })
 ])
 
@@ -268,12 +280,14 @@ export const LAYOUT_ERROR = enumFromArray([
 	"CANT_SPLIT_DOCKED_FRAME",
 	"NO_SPACE_TO_REDISTRIBUTE",
 	"REDISTRIBUTE_OUT_OF_BOUNDS",
+	"REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES",
 	"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"
+	"NO_FILL_CANDIDATES",
+	"CANT_RESIZE_COLLAPSED_FRAME"
 ])
 
 export type LayoutError = EnumLike<typeof LAYOUT_ERROR>
@@ -359,6 +373,12 @@ export type LayoutErrorsInfo = {
 	}
 	// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 	[LAYOUT_ERROR.NO_FILL_CANDIDATES]: {}
+	[LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME]: {
+		frame: LayoutFrame
+	}
+	[LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES]: {
+		problemEdgeCoordinates: number[]
+	}
 }
 
 // todo rename to toOpposite
@@ -404,35 +424,187 @@ export const zFrameCreate = zLayoutFrame.partial({
 })
 
 
-export type LayoutShapeSquareProps
-	= & {
-		css: BaseSquareCss
-	}
-
-export type LayoutEdgesProps
+export type LayoutShapeRectProps
 	= & {
-		edges: Edge[]
-		intersections: IntersectionEntry[]
-		/** The owning window, needed so we can correctly scale coordinates. */
-		win: LayoutWindow
-		/** The active frame, used to render the active edges. Calculate it from the `frames` returned by `useFrames` composable because otherwise it will be the wrong size while dragging. */
-		activeFrame?: LayoutFrame
-		draggingEdge?: Edge
-		draggingIntersection?: IntersectionEntry
+		css: BaseRectCss
 	}
-	& Partial<LayoutShapeSquareProps>
 
 
 export type LayoutChange<TInfo = never> = {
 	modified: LayoutFrame[]
 	created: LayoutFrame[]
 	deleted: LayoutFrame[]
+	window?: Partial<LayoutWindow>
 	info?: TInfo
 }
+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 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.
+	 */
+	draggingEdges: Edge[]
+	/**
+	 * The intersection that is currently being dragged.
+	 */
+	draggingIntersection?: IntersectionEntry
+	/** The "visual" edges that can be displayed for dragging. See {@link getVisualEdges} */
+	visualEdges: Edge[]
+	/**
+	 * The frames touching the currently dragged edges. Each entry corresponds to the frames touching the corresponding dragging edge.
+	 *
+	 * So you can use the index in draggingEdges to get the corresponding frames.
+	 */
+	touchingFrames: Record<string, LayoutFrame>[]
+	/**
+	 * Same as touchingFrames, but with the frames in an array.
+	 */
+	touchingFramesArrays: LayoutFrame[][]
+	/**
+	 * All the frames, with/without the currently dragged frames depending on if `showDragging` is true.
+	 */
+	frames: Record<string, LayoutFrame>
+	/**
+	 * The frame that is currently being hovered over (according to whether `dragPoint` in in the frame or not).
+	 */
+	dragHoveredFrame: LayoutFrame | undefined
+	/**
+	 * A list of corner intersections. Frames can also be dragged by these.
+	 */
+	intersections: IntersectionEntry[]
+	/**
+	 * Whether the drag was initiated from a point along the window edge.
+	 */
+	isDraggingFromWindowEdge: boolean
+	win: LayoutWindow
+}
 
-export type LayoutFrameProps
-	= & {
-		frame: LayoutFrame
-		isActiveFrame: boolean
+
+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">
+
+/**
+ * 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 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.
+ *
+ * For example, there are the default split/close actions that can be triggered in certain situations. This could be when holding down a modifier or key, or some other condition (e.g. the user is dragging a specific edge).
+ *
+ * Each action should handle it's configuration and saving/caching any state it needs. See {@link SplitAction} and {@link CloseAction} for examples.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface IDragAction {
+	/** A unique name for your action. */
+	name: string
+	onDragChange: DragChangeHandler
+	/**
+	 *
+	 * Is called after `onDragChange("end")` with the same event. Might not be called if the request was cancelled.
+	 *
+	 * You should apply your action if possible and return whether it was applied.
+	 *
+	 * This is also a good place to reset your state.
+	 */
+	onDragApply: (state: DragState, forceRecalculateEdges: () => void) => boolean
+	/**
+	 * Should return true if it should handle the "request"/event (e.g. some modifier is being pressed => user is requesting x action).
+	 *
+	 * The user is not necessarily dragging at this point, though they might also change actions mid drag. So it does not necessarily mean the event is allowed.
+	 *
+	 * Here is where you should initiate your state. Don't allow the action by default unless it can always be allowed.
+	 */
+	canHandleRequest(
+		e: KeyboardEvent | PointerEvent,
+		state: DragState,
+		forceRecalculateEdges: () => void
+	): boolean
+	/**
+	 * Called when a user cancels the drag action.
+	 *
+	 * You should reset your state here.
+	 */
+	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[]
 	}
-	& Partial<LayoutShapeSquareProps>
+	/**
+	 * Called after visual edges are recalculated, once per edge. Action handlers can annotate edges with error info here ({@link Edge.error}).
+	 *
+	 * When `LayoutEdges` sees an error it adds the message as the title and the following classes:
+	 * - `data-error` attribute with the error message
+	 * - class `drag-edge-errored` on the thick drag handle
+	 * - class `edge-errored` on the thin visual edge
+	 *
+	 * Tailwind example to style errored edges:
+	 * ```css
+	 * [&_.drag-edge-errored]:cursor-not-allowed
+	 * [&_.drag-edge-errored]:bg-red-500/30
+	 * [&_.edge-errored]:bg-red-500/20
+	 * ```
+	 *
+	 * Regarding the title, this is a temporary solution until lib is refactored to more composable components.
+	 *
+	 * NOTE: Annotation does NOT prevent dragging/events on edges.
+	 */
+	annotateEdge?(edge: Edge, frames: LayoutFrame[]): void
+}
+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 type * from "./vue.js"
+

package/src/runtime/types/vue.ts

@@ -0,0 +1,41 @@
+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"
+
+export type LayoutContext = ComputedRef<
+	& {
+		/** The owning window, needed so we can correctly scale coordinates. */
+		win: LayoutWindow
+		onFocus: (frameId: string) => void
+		shapes: LayoutShape[]
+	}>
+
+export const layoutContextInjectionKey = Symbol.for("@witchcraft/layout:context") as InjectionKey<LayoutContext>
+
+export interface UseFramesContext {
+	dragStart: {
+		(e: PointerEvent, type: "edge", data: { edge?: Edge, intersection?: IntersectionEntry }): void
+		(e: PointerEvent, type: "frame", data: { frameId: FrameId }): void
+	}
+	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.for("@witchcraft/layout:dragContext") as InjectionKey<UseFramesContext>

package/src/runtime/utils/cssToKey.ts

@@ -0,0 +1,8 @@
+import type { BaseRectCss } from "../types/index.js"
+
+/**
+ * Converts a css object to a key that can be used in a vue loop.
+ */
+export function cssToKey(css: BaseRectCss): string {
+	return `${css.x},${css.y},${css.width},${css.height},${css.translate}`
+}

package/dist/runtime/components/LayoutDecos.vue

@@ -1,26 +0,0 @@
-<template>
-<template
-	v-for="(shape, i) of shapes"
-		:key="`${shape.type}-${i}`"
->
-	<LayoutShapeSquare
-		v-if="shape.type === 'square'"
-		:css="getShapeSquareCss(shape.data, `var(--layoutEdgeWidth,2px)`)"
-		v-bind="shape.attrs ?? {}"
-	/>
-	<LayoutShapeSquare
-		v-else-if="shape.type === 'edge'"
-		:css="getVisualEdgeCss(shape.data, { padLongAxis: 'var(--layoutEdgeWidth,2px)' })"
-		v-bind="shape.attrs ?? {}"
-	/>
-</template>
-</template>
-
-<script setup>
-import LayoutShapeSquare from "./LayoutShapeSquare.vue";
-import { getShapeSquareCss } from "../helpers/getShapeSquareCss";
-import { getVisualEdgeCss } from "../helpers/getVisualEdgeCss";
-defineProps({
-  shapes: { type: Array, required: true }
-});
-</script>

package/dist/runtime/components/LayoutEdges.d.vue.ts

@@ -1,17 +0,0 @@
-import type { Edge, IntersectionEntry, LayoutEdgesProps } from "../types/index.js";
-declare const _default: import("vue").DefineComponent<LayoutEdgesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dragStart: (e: PointerEvent, type: "edge", opts: {
-        edge?: Edge;
-        intersection?: IntersectionEntry;
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<LayoutEdgesProps> & Readonly<{
-    onDragStart?: ((e: PointerEvent, type: "edge", opts: {
-        edge?: Edge;
-        intersection?: IntersectionEntry;
-    }) => any) | undefined;
-}>, {
-    activeFrame: import("../types/index.js").LayoutFrame;
-    draggingEdge: Edge;
-    draggingIntersection: IntersectionEntry;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;