@witchcraft/layout 0.1.2 → 0.2.0

package/src/runtime/components/LayoutWindow.vue

@@ -1,57 +1,92 @@
 <template>
 <!-- overflow hidden is because the borders inside will make it overflow -->
-<div :class="twMerge(
-		`window
-		relative
-		overflow-hidden
-	`,
+<div
+	:class="twMerge(
+		`
+			layout-wrapper
+			flex
+			flex-col
+		`,
 		isDragging && `dragging cursor-pointer`,
 		requestType && `request-${requestType}`,
 		($attrs as any).class
 	)"
-	ref="windowEl"
-	v-bind="{...$attrs, class: undefined}"
+	v-bind="{ ...$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="frameProps"
-			@focus="windowSetActiveFrame(win, frame.id)"
+		<!-- we need the size withot borders for correct px calculations -->
+	<div class="
+		layout-window
+		relative
+		overflow-hidden
+		flex-1
+	" ref="windowEl">
+		<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="frameProps"
+				@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="edgesProps"
+				@drag-start="dragStart"
+			/>
+			<LayoutDecosComponent
+				:shapes="shapes"
+			/>
+			<slot name="extra-decos"/>
+		</template>
+	</div>
+	<Teleport
+		v-if="isDragging === 'frame' && frameDragFrameId && dragPoint"
+		:to="ghostTeleportTo"
+		defer
+	>
+		<div
+			class="fixed z-[9999] pointer-events-none"
+			:style="{
+				left: (dragPoint.x / settings.maxInt * win.pxWidth + win.pxX) + 'px',
+				top: (dragPoint.y / settings.maxInt * win.pxHeight + win.pxY) + 'px',
+				width: frames[frameDragFrameId]
+					? (frames[frameDragFrameId].width / settings.maxInt * win.pxWidth) + 'px'
+					: undefined,
+				height: frames[frameDragFrameId]
+					? (frames[frameDragFrameId].height / settings.maxInt * win.pxHeight) + 'px'
+					: undefined
+			}"
 		>
-			<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="edgesProps"
-			@drag-start="dragStart"
-		/>
-		<LayoutDecosComponent
-			:frames="frames"
-			:split-decos="splitDecos"
-			:close-decos="closeDecos"
-		/>
-		<slot name="extra-decos"/>
-	</template>
-	<Teleport v-if="instructionsTeleportTo && filteredUsageInstructions.length > 0" defer :to="instructionsTeleportTo">
+			<slot
+				:id="frameDragFrameId"
+				:name="`frame-drag-ghost`"
+			>
+				<div class="frame-drag-ghost border border-neutral-500 bg-white/50 w-10 h-10"/>
+			</slot>
+		</div>
+	</Teleport>
+	<Teleport v-if="textHintsTeleportTo && textHints.length > 0" :to="textHintsTeleportTo" defer>
 		<span aria-live="polite">
 			<span
-				class="
+				:class="twMerge(`
+					text-hint
 					after:content-['┃']
 					last:after:content-none
 					after:mx-1
-					after:text-gray-500
-				"
-				v-for="instruction of filteredUsageInstructions"
-				:key="instruction"
+					after:text-neutral-500
+				`, instruction.classes)"
+				v-for="instruction of textHints"
+				:key="instruction.text"
 			>
-				{{ instruction }}
+				{{ instruction.text }}
 			</span>
 		</span>
 	</Teleport>
@@ -60,32 +95,31 @@
 <script lang="ts" setup>
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, ref,useAttrs,watch } from "vue"
-import { type HTMLAttributes } from "vue"
+import { computed, provide, reactive, ref, useAttrs, 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 { createDefaultHandlers } from "../drag/createDefaultHandlers.js"
 import { DragActionHandler } from "../drag/DragActionHandler"
-import { SplitAction } from "../drag/SplitAction.js"
-import { type DragState, type IDragAction } from "../drag/types.js"
+import { dragContextInjectionKey, type DragState, type IDragAction } from "../drag/types.js"
 import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js"
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js"
-import { type CloseDeco, type LayoutEdgesProps, type LayoutFrameProps, type LayoutWindow, type SplitDeco } from "../types/index.js"
+import type { LayoutEdgesProps, LayoutFrameProps, LayoutWindow } from "../types/index.js"
+import { settings } from "../settings.js"
 
 
 const $attrs = useAttrs()
 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
+	/** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
+	actionHandlers?: IDragAction[]
+	textHints?: {text:string, classes?:string}[] 
+	textHintsTeleportTo: string | undefined
+	ghostTeleportTo?: string
 	/**
 	 * You might need to temporarily disable updating the window size while transitioning, depending on your layout.
 	 *
@@ -94,61 +128,28 @@ const props = withDefaults(defineProps<{
 	 * 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
-	frameProps?: Partial<Omit<LayoutFrameProps, "frame" | "isActiveFrame" | "onFocus">>,
-	edgesProps?: Partial<Omit<LayoutEdgesProps, "edges" | "intersections" | "win">>
+	frameProps?: Partial<Omit<LayoutFrameProps, "frame" | "isActiveFrame" | "onFocus">>
+	edgesProps?: Partial<Omit<LayoutEdgesProps, "edges" | "intersections" | "win">>,
 }>(), {
-	additionalDragActions: () => ([]),
-	splitKeyHandler: undefined,
-	closeKeyHandler: undefined,
-	usageInstructions: () => ({ }),
-	instructionTeleportTo: undefined,
-	allowWindowSizeUpdate: true,
+	actionHandlers: undefined,
+	textHints: () => [],
+	textHintsTeleportTo: undefined,
+	ghostTeleportTo: "#root",
+	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 requestType = ref<string | 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
+		...(props.actionHandlers ?? createDefaultHandlers()),
 	],
 	{
 		onEvent: (e, cancel) => {
@@ -163,12 +164,21 @@ const dragActionHandler = new DragActionHandler(
 		onEnd: () => {
 			requestType.value = undefined
 			showDragging.value = true
-		}
+		},
 	}
 )
+dragActionHandler.shapes = reactive([])
+dragActionHandler.textHints = reactive({ actions: [], errors: [] })
+const shapes = dragActionHandler.shapes
+
+const dragContext  = useFrames(
+	win,
+	dragActionHandler
+)
 
 const {
 	dragStart,
+	dragPoint,
 	visualEdges,
 	isDragging,
 	draggingEdges,
@@ -176,25 +186,24 @@ const {
 	frames,
 	intersections,
 	state,
-} = useFrames(
-	win,
+	frameDragFrameId,
 	showDragging,
-	dragActionHandler,
-)
+} = dragContext
 
+provide(dragContextInjectionKey, dragContext)
 
 function getWindowOffset() {
 	const windowElRect = windowEl.value!.getBoundingClientRect()
 	return {
 		pxX: Math.floor(windowElRect.x),
-		pxY: Math.floor(windowElRect.y),
+		pxY: Math.floor(windowElRect.y)
 	}
 }
 function getWindowSize() {
 	const windowElRect = windowEl.value!.getBoundingClientRect()
 	return {
 		pxWidth: Math.floor(windowElRect.width),
-		pxHeight: Math.floor(windowElRect.height),
+		pxHeight: Math.floor(windowElRect.height)
 	}
 }
 function updateWindowSize() {
@@ -217,7 +226,7 @@ defineExpose({
 	state,
 	win,
 	updateWindowSize,
+	dragActionHandler
 })
-
 </script>
 

package/src/runtime/composables/useFrames.ts

@@ -1,10 +1,10 @@
 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 { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 
 import { DragDirectionStore } from "../drag/DragDirectionStore.js"
-import type { DragChangeHandler, DragState } from "../drag/types.js"
+import type { DragChangeHandler, DragChangeResult, DragState, EdgeDragStartData, FrameDragStartData } from "../drag/types.js"
 import { cloneFrame } from "../helpers/cloneFrame.js"
 import { getIntersections } from "../helpers/getIntersections.js"
 import { getVisualEdges } from "../helpers/getVisualEdges.js"
@@ -12,21 +12,21 @@ 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"
+import { isPointInRect } from "../layout/isPointInRect.js"
+import type { Direction, Edge, FrameId, 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.
+			* 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: DragChangeHandler
+		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).
@@ -50,7 +50,8 @@ export function useFrames(
 
 	const touchingFramesArrays = computed(() => touchingFrames.value.map(entry => Object.values(entry)))
 
-	const isDragging = ref(false)
+	const isDragging = ref<false | "frame" | "edge">(false)
+	const showDragging = ref(false)
 	const dragPoint = ref<Point | undefined>()
 
 	const dragDirections = ref<Record<Orientation, Direction | undefined>>({} as any)
@@ -58,6 +59,8 @@ export function useFrames(
 	const draggingIntersection = ref<IntersectionEntry | undefined>(undefined)
 	const isDraggingFromWindowEdge = ref<boolean>(false)
 
+	const frameDragFrameId = ref<FrameId | undefined>()
+
 	const frames = computed(() =>
 		isDragging.value && showDragging.value
 			? { ...win.value.frames, ...allTouchingFrames.value }
@@ -67,7 +70,7 @@ export function useFrames(
 	const dragHoveredFrame = computed(() => {
 		if (isDragging.value) {
 			for (const id of keys(frames.value)) {
-				if (isPointInFrame(frames.value[id], dragPoint.value!)) {
+				if (isPointInRect(frames.value[id], dragPoint.value!)) {
 					return frames.value[id]
 				}
 			}
@@ -83,12 +86,14 @@ export function useFrames(
 		visualEdges.value = getVisualEdges(f, { includeWindowEdges: true })
 	}, 50, {}) as any
 
-	watchEffect(() => {
+	watch([isDragging, frames], () => {
 		// let request animation force recalc
 		if (isDragging.value) return
 		// otherwise use more performant debounced version
 		debounceGetDraggableEdges(Object.values(frames.value))
-	})
+	}, { deep: true })
+	debounceGetDraggableEdges(Object.values(frames.value))
+
 	function forceRecalculateEdges(): void {
 		visualEdges.value = getVisualEdges(Object.values(frames.value), { includeWindowEdges: true })
 	}
@@ -101,6 +106,8 @@ export function useFrames(
 		dragDirections: dragDirections.value,
 		dragPoint: dragPoint.value,
 		isDragging: isDragging.value,
+		showDragging: showDragging.value,
+		draggingFrameId: frameDragFrameId.value,
 		draggingEdges: draggingEdges.value,
 		draggingIntersection: draggingIntersection.value,
 		visualEdges: visualEdges.value,
@@ -121,11 +128,18 @@ export function useFrames(
 		isDragging.value = false
 		dragPoint.value = undefined
 		touchingFrames.value = []
+		frameDragFrameId.value = undefined
 		dragDirStore.reset()
+		showDragging.value = false
 		forceRecalculateEdges()
 	}
 
-	function dragStart(e: PointerEvent, { edge, intersection }: { edge?: Edge, intersection?: IntersectionEntry }): void {
+	function dragStart<T extends "edge" | "frame">(
+		e: PointerEvent,
+		type: T,
+		// someday this will work
+		data: T extends "edge" ? EdgeDragStartData : FrameDragStartData
+	): void {
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
@@ -135,42 +149,50 @@ export function useFrames(
 
 		const point = toWindowCoord(win.value, e)
 		dragPoint.value = point
+		dragDirStore.update(point)
 
-		isDragging.value = true
+		isDragging.value = type
+		showDragging.value = true
 
-		draggingIntersection.value = intersection
+		if (type === "frame") {
+			frameDragFrameId.value = (data as FrameDragStartData).frameId
+		} else {
+			const { edge, intersection } = data as EdgeDragStartData
+			draggingIntersection.value = intersection
 
-		draggingEdges.value = edge
-			? [edge]
-			: [
-					...(draggingIntersection.value?.sharedEdges.horizontal ?? []),
-					...(draggingIntersection.value?.sharedEdges.vertical ?? [])
-				]
+			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)
+			isDraggingFromWindowEdge.value = draggingEdges.value.some(_ => isWindowEdge(_))
 
-		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)!
+			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)
+		const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel)
+		showDragging.value = res.showDragging ?? true
 	}
 
 	function dragMove(e: PointerEvent): void {
@@ -179,18 +201,23 @@ export function useFrames(
 		const didChange = dragDirStore.update(point)
 		dragPoint.value = point
 		if (!didChange) return
-		const allowed = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel)
+		const res = 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)
+
+		showDragging.value = res.showDragging ?? true
+		if (!res.updateEdges) return
+
+		if (isDragging.value === "edge") {
+			requestAnimationFrame(() => {
+				for (let i = 0; i < draggingEdges.value.length; i++) {
+					const draggingEdge = draggingEdges.value[i]
+					if (draggingEdge) {
+						moveEdge(touchingFramesArrays.value[i], draggingEdge, point)
+					}
 				}
-			}
-			forceRecalculateEdges()
-		})
+				forceRecalculateEdges()
+			})
+		}
 	}
 
 	function dragEnd(e?: PointerEvent, { apply = true }: { apply?: boolean } = {}): void {
@@ -233,6 +260,7 @@ export function useFrames(
 		dragStart,
 		dragEnd,
 		cancel,
+		dragMove,
 		dragDirections,
 		dragPoint,
 		isDragging,
@@ -246,6 +274,8 @@ export function useFrames(
 		intersections,
 		isDraggingFromWindowEdge,
 		forceRecalculateEdges,
-		state
+		state,
+		showDragging,
+		frameDragFrameId
 	}
 }