@witchcraft/layout 0.0.1

package/src/runtime/components/LayoutWindow.vue

@@ -0,0 +1,223 @@
+<template>
+<!-- overflow hidden is because the borders inside will make it overflow -->
+<div :class="twMerge(
+		`window
+		relative
+		overflow-hidden
+	`,
+		isDragging && `dragging cursor-pointer`,
+		requestType && `request-${requestType}`,
+		$attrs.attrs.class
+	)"
+	ref="windowEl"
+	v-bind="{...$attrs.attrs, class: undefined}"
+>
+	<template v-if="windowEl && win">
+		<LayoutFrameComponent :frame="frame"
+			:is-active-frame="frame.id === win.activeFrame"
+			v-for="frame of frames"
+			:key="frame.id"
+			v-bind="$attrs.frameAttrs"
+			@focus="windowSetActiveFrame(win, frame.id)"
+		>
+			<slot :name="`frame-${frame.id}`" v-bind="{frame}"/>
+		</LayoutFrameComponent>
+		<LayoutEdgesComponent
+			:win="win"
+			:active-frame="win.activeFrame ? frames[win.activeFrame] : undefined"
+			:edges="visualEdges"
+			:intersections="intersections"
+			:dragging-edge="draggingEdges.length === 1 ? draggingEdges[0] : undefined"
+			:dragging-intersection="draggingIntersection"
+			v-bind="$attrs.edgesAttrs"
+			@drag-start="dragStart"
+		/>
+		<LayoutDecosComponent
+			:frames="frames"
+			:split-decos="splitDecos"
+			:close-decos="closeDecos"
+			v-bind="$attrs.decosAttrs"
+		/>
+		<slot name="extra-decos"/>
+	</template>
+	<Teleport v-if="instructionsTeleportTo && filteredUsageInstructions.length > 0" defer :to="instructionsTeleportTo">
+		<span aria-live="polite">
+			<span
+				class="
+					after:content-['┃']
+					after:text-accent-500
+					last:after:content-none
+					after:mx-1
+					after:text-gray-500
+				"
+				v-for="instruction of filteredUsageInstructions"
+				:key="instruction"
+			>
+				{{ instruction }}
+			</span>
+		</span>
+	</Teleport>
+</div>
+</template>
+<script lang="ts" setup>
+import { useDivideAttrs } from "@witchcraft/ui/composables/useDivideAttrs"
+import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { computed, ref,watch } from "vue"
+
+import LayoutDecosComponent from "./LayoutDecos.vue"
+import LayoutEdgesComponent from "./LayoutEdges.vue"
+import LayoutFrameComponent from "./LayoutFrame.vue"
+
+import { useFrames } from "../composables/useFrames.js"
+import { CloseAction } from "../drag/CloseAction"
+import { DragActionHandler } from "../drag/DragActionHandler"
+import { SplitAction } from "../drag/SplitAction.js"
+import { type DragState, type IDragAction } from "../drag/types.js"
+import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js"
+import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js"
+import { type CloseDeco, type LayoutWindow, type SplitDeco } from "../types/index.js"
+
+const $attrs = useDivideAttrs(["frame", "edges", "decos"] as const)
+
+const win = defineModel<LayoutWindow>("win", { required: true })
+
+const props = withDefaults(defineProps<{
+	additionalDragActions?: IDragAction[]
+	splitKeyHandler?: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean
+	closeKeyHandler?: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean
+	usageInstructions?: Record<string, string | undefined>
+	instructionsTeleportTo: string | undefined
+	/**
+	 * You might need to temporarily disable updating the window size while transitioning, depending on your layout.
+	 *
+	 * For example, if the component is in a flex container, during transition, there will be two components, and it will suddenly jump in size to being 1/2 the height. We can avoid this by using the known height (from win), but to do so, we can't let this component update the size while transitioning.
+	 *
+	 * When this is turned back on again, it will trigger an update. You can also trigger updates manually with the exposed updateWindowSize function.
+	 */
+	allowWindowSizeUpdate?: boolean
+}>(), {
+	additionalDragActions: () => ([]),
+	splitKeyHandler: undefined,
+	closeKeyHandler: undefined,
+	usageInstructions: () => ({ }),
+	instructionTeleportTo: undefined,
+	allowWindowSizeUpdate: true
+})
+const emit = defineEmits<{
+	(e: "isShowingDrag", value: boolean): void
+	(e: "dragState", value: DragState): void
+}>()
+
+const filteredUsageInstructions = computed(() => Object.values(props.usageInstructions).filter(_ => _ !== undefined).map(_ => _))
+
+const splitKeyHandler = props.splitKeyHandler ?? ((e: PointerEvent | KeyboardEvent, state: DragState) =>
+	e.altKey || state.isDraggingFromWindowEdge)
+const closeKeyHandler = props.closeKeyHandler ?? ((e: PointerEvent | KeyboardEvent) => {
+	if (e.ctrlKey && e.shiftKey) {
+		return "force"
+	}
+	if (e.shiftKey) return true
+	return false
+})
+
+
+const windowEl = ref<HTMLElement | null>(null)
+
+const showDragging = ref(true)
+
+const closeDecos = ref<CloseDeco[]>([])
+const splitDecos = ref<SplitDeco[]>([])
+const requestType = ref<"split" | "close" | undefined | string>()
+
+const dragActionHandler = new DragActionHandler(
+	(
+		type: "start" | "move" | "end",
+		_e: PointerEvent | KeyboardEvent | undefined,
+		state: DragState
+	) => type === "move" ? !state.isDraggingFromWindowEdge : undefined,
+	[
+		new SplitAction(
+			splitKeyHandler,
+			((decos: SplitDeco[]) => splitDecos.value = decos),
+			{
+				onStart: () => showDragging.value = false,
+				onCancel: () => showDragging.value = true,
+			}),
+		new CloseAction(
+			closeKeyHandler,
+			((decos: CloseDeco[]) => closeDecos.value = decos),
+		),
+		...props.additionalDragActions
+	],
+	{
+		onEvent: (e, cancel) => {
+			showDragging.value = true
+			if (e instanceof KeyboardEvent && e.key === "Escape") {
+				cancel()
+			}
+		},
+		onRequestChange: type => {
+			requestType.value = type
+		},
+		onEnd: () => {
+			requestType.value = undefined
+			showDragging.value = true
+		}
+	}
+)
+
+const {
+	dragStart,
+	visualEdges,
+	isDragging,
+	draggingEdges,
+	draggingIntersection,
+	frames,
+	intersections,
+	state,
+} = useFrames(
+	win,
+	showDragging,
+	dragActionHandler,
+)
+
+
+function getWindowOffset() {
+	const windowElRect = windowEl.value!.getBoundingClientRect()
+	return {
+		pxX: Math.floor(windowElRect.x),
+		pxY: Math.floor(windowElRect.y),
+	}
+}
+function getWindowSize() {
+	const windowElRect = windowEl.value!.getBoundingClientRect()
+	return {
+		pxWidth: Math.floor(windowElRect.width),
+		pxHeight: Math.floor(windowElRect.height),
+	}
+}
+function updateWindowSize() {
+	if (!props.allowWindowSizeUpdate) return
+	const newSize = { ...getWindowSize(), ...getWindowOffset() }
+	updateWindowWithEvent(win.value, newSize)
+}
+useGlobalResizeObserver(windowEl, updateWindowSize)
+watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
+	if (oldval === false && newval === true) {
+		updateWindowSize()
+	}
+})
+
+
+watch(state, () => emit("dragState", state.value))
+watch(showDragging, () => emit("isShowingDrag", showDragging.value))
+
+defineExpose({
+	state,
+	win,
+	updateWindowSize,
+})
+
+</script>
+

package/src/runtime/composables/useFrames.ts

@@ -0,0 +1,251 @@
+import { debounce } from "@alanscodelog/utils/debounce"
+import { keys } from "@alanscodelog/utils/keys"
+import type { Ref } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from "vue"
+
+import { DragDirectionStore } from "../drag/DragDirectionStore.js"
+import type { DragChangeHandler, DragState } from "../drag/types.js"
+import { cloneFrame } from "../helpers/cloneFrame.js"
+import { getIntersections } from "../helpers/getIntersections.js"
+import { getVisualEdges } from "../helpers/getVisualEdges.js"
+import { isWindowEdge } from "../helpers/isWindowEdge.js"
+import { moveEdge } from "../helpers/moveEdge.js"
+import { toWindowCoord } from "../helpers/toWindowCoord.js"
+import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
+import { isPointInFrame } from "../layout/isPointInFrame.js"
+import type { Direction, Edge, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
+
+export function useFrames(
+	win: Ref<LayoutWindow>,
+	/** Whether to show merged the moved frames while dragging. */
+	showDragging: Ref<boolean>,
+	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 moved, or false to prevent it.
+			*
+			* Can be used to save some context/info to later apply safely during onDragApply.
+			*/
+		onDragChange: DragChangeHandler
+		/**
+		 * 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)
+	}
+) {
+	const draggingEdges = ref<Edge[]>([])
+
+	// each entry corresponds to the frames touching the corresponding dragging edge
+	const touchingFrames = ref<Record<string, LayoutFrame>[]>([])
+	const allTouchingFrames = computed(() => {
+		const result: Record<string, LayoutFrame> = {}
+		for (const entry of touchingFrames.value) {
+			for (const frame of Object.values(entry)) {
+				result[frame.id] = frame
+			}
+		}
+		return result
+	})
+
+	const touchingFramesArrays = computed(() => touchingFrames.value.map(entry => Object.values(entry)))
+
+	const isDragging = ref(false)
+	const dragPoint = ref<Point | undefined>()
+
+	const dragDirections = ref<Record<Orientation, Direction | undefined>>({} as any)
+
+	const draggingIntersection = ref<IntersectionEntry | undefined>(undefined)
+	const isDraggingFromWindowEdge = ref<boolean>(false)
+
+	const frames = computed(() =>
+		isDragging.value && showDragging.value
+			? { ...win.value.frames, ...allTouchingFrames.value }
+			: win.value.frames
+	)
+
+	const dragHoveredFrame = computed(() => {
+		if (isDragging.value) {
+			for (const id of keys(frames.value)) {
+				if (isPointInFrame(frames.value[id], dragPoint.value!)) {
+					return frames.value[id]
+				}
+			}
+		}
+		return undefined
+	})
+
+	const visualEdges = ref<Edge[]>([])
+	const intersections = computed(() => getIntersections(visualEdges.value))
+	// avoid expensive calculation of edges when lots of frames are added/removed
+	// all at once (e.g. by clicking on some command many times in a row)
+	const debounceGetDraggableEdges = debounce((f: LayoutFrame[]) => {
+		visualEdges.value = getVisualEdges(f, { includeWindowEdges: true })
+	}, 50, {}) as any
+
+	watchEffect(() => {
+		// let request animation force recalc
+		if (isDragging.value) return
+		// otherwise use more performant debounced version
+		debounceGetDraggableEdges(Object.values(frames.value))
+	})
+	function forceRecalculateEdges(): void {
+		visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true })
+	}
+
+	const dragDirStore = new DragDirectionStore({
+		onUpdate: dir => dragDirections.value = dir
+	})
+
+	const state = computed(() => ({
+		dragDirections: dragDirections.value,
+		dragPoint: dragPoint.value,
+		isDragging: isDragging.value,
+		draggingEdges: draggingEdges.value,
+		draggingIntersection: draggingIntersection.value,
+		visualEdges: visualEdges.value,
+		touchingFrames: touchingFrames.value,
+		touchingFramesArrays: touchingFramesArrays.value,
+		frames: frames.value,
+		dragHoveredFrame: dragHoveredFrame.value,
+		intersections: intersections.value,
+		isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
+		win: win.value
+	} satisfies DragState))
+
+	let controller: AbortController
+
+	function resetState(): void {
+		draggingEdges.value = []
+		draggingIntersection.value = undefined
+		isDragging.value = false
+		dragPoint.value = undefined
+		touchingFrames.value = []
+		dragDirStore.reset()
+		forceRecalculateEdges()
+	}
+
+	function dragStart(e: PointerEvent, { edge, intersection }: { edge?: Edge, intersection?: IntersectionEntry }): void {
+		controller = new AbortController()
+		controller.signal.addEventListener("abort", () => resetState())
+
+		e.preventDefault()
+		window.addEventListener("pointermove", dragMove, { signal: controller.signal })
+		window.addEventListener("pointerup", dragEnd, { signal: controller.signal })
+
+		const point = toWindowCoord(win.value, e)
+		dragPoint.value = point
+
+		isDragging.value = true
+
+		draggingIntersection.value = intersection
+
+		draggingEdges.value = edge
+			? [edge]
+			: [
+					...(draggingIntersection.value?.sharedEdges.horizontal ?? []),
+					...(draggingIntersection.value?.sharedEdges.vertical ?? [])
+				]
+
+		dragDirStore.update(point)
+		isDraggingFromWindowEdge.value = draggingEdges.value.some(_ => isWindowEdge(_))
+
+		const framesArray = Object.values(win.value.frames)
+
+		touchingFrames.value = []
+		// all frames in touchingFrames must be clones
+		// BUT they must be the same clone even if they are referenced by multiple dragging edges
+		const clones = new Map<string, LayoutFrame>()
+		for (let i = 0; i < draggingEdges.value.length; i++) {
+			const draggingEdge = draggingEdges.value[i]
+			touchingFrames.value[i] = {}
+			for (const { frame } of findFramesTouchingEdge(draggingEdge, framesArray)) {
+				if (!clones.has(frame.id)) {
+					const clone = cloneFrame(frame)
+					touchingFrames.value[i][frame.id] = clone
+					clones.set(frame.id, clone)
+				} else {
+					touchingFrames.value[i][frame.id] = clones.get(frame.id)!
+				}
+			}
+		}
+
+		handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel)
+	}
+
+	function dragMove(e: PointerEvent): void {
+		e.preventDefault()
+		const point = toWindowCoord(win.value, e)
+		const didChange = dragDirStore.update(point)
+		dragPoint.value = point
+		if (!didChange) return
+		const allowed = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel)
+
+		if (!allowed) return
+		requestAnimationFrame(() => {
+			for (let i = 0; i < draggingEdges.value.length; i++) {
+				const draggingEdge = draggingEdges.value[i]
+				if (draggingEdge) {
+					moveEdge(touchingFramesArrays.value[i], draggingEdge, point)
+				}
+			}
+			forceRecalculateEdges()
+		})
+	}
+
+	function dragEnd(e?: PointerEvent, { apply = true }: { apply?: boolean } = {}): void {
+		if (e) {
+			const point = toWindowCoord(win.value, e)
+			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
+			}
+		}
+
+		handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel)
+
+		// this can get called from elsewhere
+		// also takes care of cleanup
+		controller?.abort()
+	}
+	function cancel(): void {
+		dragEnd(undefined, { apply: false })
+	}
+	const keydownController = new AbortController()
+	const wrappedKeydownHandler = (e: KeyboardEvent): void => {
+		handler.eventHandler(e, state.value, forceRecalculateEdges)
+	}
+	onMounted(() => {
+		window.addEventListener("keydown", wrappedKeydownHandler, {	signal: keydownController.signal })
+		window.addEventListener("keyup", wrappedKeydownHandler, { signal: keydownController.signal })
+	})
+
+	onBeforeUnmount(() => {
+		controller?.abort()
+		keydownController?.abort()
+	})
+
+	return {
+		dragStart,
+		dragEnd,
+		cancel,
+		dragDirections,
+		dragPoint,
+		isDragging,
+		draggingEdges,
+		draggingIntersection,
+		visualEdges,
+		touchingFrames,
+		touchingFramesArrays,
+		frames,
+		dragHoveredFrame,
+		intersections,
+		isDraggingFromWindowEdge,
+		forceRecalculateEdges,
+		state
+	}
+}

package/src/runtime/demo/App.vue

@@ -0,0 +1,139 @@
+<template>
+<WRoot class="gap-2 p-2">
+	<DemoControls
+		:frames="frames!"
+	/>
+	<LayoutWindow v-if="win"
+		class="
+			flex-1 w-full
+			border-1
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-md
+			flex-1
+			self-stretch
+			[&_.frame]:flex
+			[&_.frame]:flex-col
+			[&_.frame]:outline-hidden
+			[&_.active-frame-edge]:rounded-md
+			[&_.active-frame-edge]:border-none
+			[&_.drag-edge:hover+.edge]:bg-accent-500/20
+			[&_.grabbed-edge]:bg-accent-500
+			[&.request-split_.grabbed-edge]:hidden
+			[&.request-split_.drag-edge]:hidden
+			[&_.deco-split-new-frame]:rounded-md
+			[&_.deco-close-frame]:rounded-md
+			[&_.deco-close-frame]:bg-orange-500/50
+		"
+		:usage-instructions="usageInstructions"
+		instructions-teleport-to="#status-bar"
+		v-model:win="win"
+		@is-showing-drag="isShowingDrag = $event"
+		@drag-state="dragState = $event"
+	>
+		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id">
+			<div
+				:data-is-active="win.activeFrame === f.id"
+				:class="twMerge(`
+						border-2
+						border-neutral-500
+						h-full
+						rounded-md
+						overflow-auto
+					`,
+					win.activeFrame === f.id && `border-blue-500`
+				)"
+				@click="win.activeFrame=f.id"
+			>
+				<!--
+					Avoid placing the padding on the first div in the frame.
+					Set it on the first child instead, so that the frame can shrink as small as possible.
+					Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
+				-->
+				<div class="p-2"> {{ debugFrame(f) }} </div>
+			</div>
+		</template>
+	</LayoutWindow>
+</Wroot>
+</template>
+<script lang="ts" setup>
+import { keys } from "@alanscodelog/utils/keys"
+// playground not resolving???
+// todo this breaks the non-playground build
+import WRoot from "@witchcraft/ui/components/LibRoot"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { computed, onBeforeMount, ref } from "vue"
+
+import DemoControls from "./DemoControls.vue"
+import { app } from "./sharedLayoutInstance.js"
+
+import LayoutWindow from "../components/LayoutWindow.vue"
+import type { DragState } from "../drag/types.js"
+import { debugFrame } from "../layout/debugFrame.js"
+import {
+	frameCreate,
+	layoutAddWindow,
+	windowAddFrame,
+	windowCreate,
+} from "../layout/index.js"
+import { getMaxInt } from "../settings.js"
+import { type Layout, type Pos, type Size } from "../types/index.js"
+
+
+const winId = ref<string | undefined>(undefined)
+const win = computed(() => winId.value !== undefined ? app.layout.windows[winId.value] : undefined)
+
+const frames = computed(() => {
+	if (!win.value) return
+	return Object.values(win.value.frames)
+})
+onBeforeMount(() => {
+	layoutInitialize(app.layout)
+	winId.value = keys(app.layout.windows)[0]
+})
+
+const isDragging = ref(false)
+function layoutInitialize(layout: Layout, { defaultPos, defaultSize }: {
+	defaultPos: Pos
+	defaultSize: Size
+} = {
+	defaultPos: { x: 0, y: 0 },
+	defaultSize: { width: 0, height: 0 },
+}) {
+	const w = layoutAddWindow(
+		layout,
+		windowCreate({
+			...defaultPos,
+			...defaultSize,
+			frames: {},
+		})
+	)
+
+	layout.activeWindow = w.id
+	const max = getMaxInt()
+	const frame = windowAddFrame(w, frameCreate({
+		x: 0,
+		y: 0,
+		width: max,
+		height: max,
+	}))
+	w.activeFrame = frame.id
+}
+
+// whether layout window is showing the edge beneath the mouse
+// as determined by the DragActionHandler in LayoutWindow
+const isShowingDrag = ref(false)
+// drag state as returned by useFrames in LayoutWindow
+const dragState = ref<DragState | undefined>(undefined)
+
+const usageInstructions = computed(() => ({
+	// names are arbitrary and don't mean anything, they just make things easier
+	// if a key is undefined, it's ignored
+	none: !dragState.value?.isDragging ? "Drag from an edge to create a new frame." : undefined,
+	split: dragState.value?.isDragging ? "Hold Alt to Split" : undefined,
+	close: dragState.value?.isDragging ? "Shift+Drag to Close" : undefined,
+	forceClose: dragState.value?.isDragging ? "Ctrl+Shift+Drag to Force Close" : undefined
+}))
+	
+</script>
+

package/src/runtime/demo/DemoControls.vue

@@ -0,0 +1,17 @@
+<template>
+<div class="border-2 border-neutral-500 p-2 rounded-md flex">
+	<div class="">Instruction/status bar:</div>
+	<div id="status-bar" class="px-2 flex-1 overflow-x-auto scrollbar-hidden"/>
+	<WDarkModeSwitcher :show-label="false"/>
+</div>
+</template>
+<script lang="ts" setup>
+import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher"
+
+import type { LayoutFrame } from "../types/index.js"
+
+defineProps<{
+	frames: LayoutFrame[]
+}>()
+
+</script>

package/src/runtime/demo/README.md

@@ -0,0 +1 @@
+This is structured like this so we can check the demo is both buildable from nuxt and vite.

package/src/runtime/demo/main.ts

@@ -0,0 +1,9 @@
+/** @private */
+import "./tailwind.css"
+
+import { createApp } from "vue"
+
+import App from "./App.vue"
+
+createApp(App)
+	.mount("#app")

package/src/runtime/demo/sharedLayoutInstance.ts

@@ -0,0 +1,7 @@
+import { reactive } from "vue"
+
+import { layoutCreate } from "../layout/layoutCreate.js"
+
+export const app = reactive({
+	layout: layoutCreate()
+})

package/src/runtime/demo/tailwind.css

@@ -0,0 +1,4 @@
+@import "tailwindcss" source("../");
+
+@import "../../../playground/.nuxt/witchcraft-ui.css";
+@import "../../../playground/.nuxt/witchcraft-layout.css";