@witchcraft/layout 0.1.2 → 0.2.0

package/src/runtime/demo/App.vue

@@ -1,16 +1,27 @@
 <template>
-<WRoot class="gap-2 p-2">
+<!-- not sure why we're needed to specify flex-col, tailwind isn't detecting the class properly in wroot maybe? -->
+<WRoot class="
+	gap-2
+	p-2
+	flex-col
+	[&_.frame-drag-ghost]:rounded-md
+">
 	<DemoControls
+		v-if="win"
 		:frames="frames!"
+		:win="win"
+		:dragActionHandler="dragActionHandler"
 	/>
-	<LayoutWindow v-if="win"
-		class="
-			flex-1 w-full
+	<LayoutWindow
+		ref="layoutComponent"
+		v-if="win"
+		:class="twMerge(`
+			flex-1
+			w-full
 			border-1
 			border-neutral-300
 			dark:border-neutral-700
 			rounded-md
-			flex-1
 			self-stretch
 			[&_.frame]:flex
 			[&_.frame]:flex-col
@@ -21,26 +32,34 @@
 			[&_.grabbed-edge]:bg-accent-500
 			[&.request-split_.grabbed-edge]:hidden
 			[&.request-split_.drag-edge]:hidden
+			[&.deco-split-error]:rounded-md
 			[&_.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"
+			[&_.deco-close-frame-force]:rounded-md
+			[&_.deco-frame-drag]:rounded-md
+		`,
+			collapsedDocks.top && `border-t-2 border-t-green-500`,
+			collapsedDocks.bottom && `border-b-2 border-b-green-500`,
+			collapsedDocks.left && `border-l-2 border-l-green-500`,
+			collapsedDocks.right && `border-r-2 border-r-green-500`
+		)"
+		:textHints="textHints"
+		textHintsTeleportTo="#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">
+		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id" >
 			<div
+				v-if="!(f.collapsed && (f.width === 0 || f.height === 0))"
 				:data-is-active="win.activeFrame === f.id"
 				:class="twMerge(`
-						border-2
-						border-neutral-500
-						h-full
-						rounded-md
-						overflow-auto
-					`,
+					border-2
+					border-neutral-500
+					h-full
+					rounded-md
+					overflow-auto
+				`,
 					win.activeFrame === f.id && `border-blue-500`
 				)"
 				@click="win.activeFrame=f.id"
@@ -50,12 +69,43 @@
 					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 class="p-2 flex flex-col">
+					<FrameDragHandle :frame-id="f.id">
+						<div
+							class="cursor-grab bg-neutral-200 dark:bg-neutral-700 px-2 py-1 text-xs select-none"
+						>
+							⠿ Drag to move frame
+						</div>
+					</FrameDragHandle>
+					<div class="flex gap-1 px-2 py-1 flex-wrap">
+						<button
+							v-if="f.docked && f.collapsed === false"
+							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+							@click="handleUndock(f.id)"
+						>Undock</button>
+						<button
+							v-if="f.docked && f.collapsed === false"
+							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+							@click="handleCollapse(f.id)"
+						>Collapse</button>
+						<button
+							v-if="f.docked && typeof f.collapsed === 'number'"
+							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+							@click="handleUncollapse(f.id)"
+						>Uncollapse</button>
+					</div>
+					<div class="p-2 whitespace-pre-wrap">
+						{{ debugFrame(f) }}
+					</div>
+				</div>
+			</div>
+			<div v-else>
 			</div>
 		</template>
 	</LayoutWindow>
-</Wroot>
+</WRoot>
 </template>
+
 <script lang="ts" setup>
 import { keys } from "@alanscodelog/utils/keys"
 // playground not resolving???
@@ -67,21 +117,30 @@ import { computed, onBeforeMount, ref } from "vue"
 import DemoControls from "./DemoControls.vue"
 import { app } from "./sharedLayoutInstance.js"
 
+import FrameDragHandle from "../components/FrameDragHandle.vue"
 import LayoutWindow from "../components/LayoutWindow.vue"
 import type { DragState } from "../drag/types.js"
+import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { debugFrame } from "../layout/debugFrame.js"
+import { getFrameCollapseInfo } from "../layout/getFrameCollapseInfo.js"
+import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js"
+import { getFrameUndockInfo } from "../layout/getFrameUndockInfo.js"
 import {
 	frameCreate,
 	layoutAddWindow,
 	windowAddFrame,
-	windowCreate,
+	windowCreate
 } from "../layout/index.js"
-import { getMaxInt } from "../settings.js"
-import { type Layout, type Pos, type Size } from "../types/index.js"
+import { settings } from "../settings.js"
+import type { EdgeSide, Layout, Pos, Size } from "../types/index.js"
+import { throwIfError } from "@alanscodelog/utils/throwIfError"
+import { useTemplateRef } from "vue"
+import { DragActionHandler } from "../drag/DragActionHandler.js"
 
 
 const winId = ref<string | undefined>(undefined)
 const win = computed(() => winId.value !== undefined ? app.layout.windows[winId.value] : undefined)
+const layoutComponent = useTemplateRef("layoutComponent")
 
 const frames = computed(() => {
 	if (!win.value) return
@@ -92,30 +151,29 @@ onBeforeMount(() => {
 	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 },
+	defaultSize: { width: 0, height: 0 }
 }) {
 	const w = layoutAddWindow(
 		layout,
 		windowCreate({
 			...defaultPos,
 			...defaultSize,
-			frames: {},
+			frames: {}
 		})
 	)
 
 	layout.activeWindow = w.id
-	const max = getMaxInt()
+	const max = settings.maxInt
 	const frame = windowAddFrame(w, frameCreate({
 		x: 0,
 		y: 0,
 		width: max,
-		height: max,
+		height: max
 	}))
 	w.activeFrame = frame.id
 }
@@ -126,14 +184,46 @@ 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>
+function handleUndock(frameId: string) {
+	const changes = throwIfError(getFrameUndockInfo(win.value!, frameId))
+	DragActionHandler.debugState("undock", "before", dragState.value!, {}, undefined)
+	applyFrameChanges(win.value!, changes)
+	DragActionHandler.debugState("undock", "after", dragState.value!, {}, undefined)
+}
+
+function handleCollapse(frameId: string) {
+	const changes = throwIfError(getFrameCollapseInfo(win.value!, frameId))
+	DragActionHandler.debugState("collapse", "before", dragState.value!, {}, undefined)
+	applyFrameChanges(win.value!, changes)
+	DragActionHandler.debugState("collapse", "after", dragState.value!, {}, undefined)
+}
 
+function handleUncollapse(frameId: string) {
+	const changes = throwIfError(getFrameUncollapseInfo(win.value!, frameId))
+	DragActionHandler.debugState("uncollapse", "before", dragState.value!, {}, undefined)
+	applyFrameChanges(win.value!, changes)
+	DragActionHandler.debugState("uncollapse", "after", dragState.value!, {}, undefined)
+}
+
+const textHints = computed(() => {
+	const isDragging = dragState.value?.isDragging
+	const textHints = dragActionHandler.value?.textHints ?? {actions:[], errors:[]}
+	return [
+		...(!isDragging ? [{classes:"", text:"Drag from an edge to create a new frame."}] : []),
+		...textHints.errors.map(_ => ({classes:"text-red-500", text:_})),
+		...textHints.actions.map(_ => ({ text:_})),
+	]
+})
+
+const collapsedDocks = computed(() => {
+	const sides: Partial<Record<EdgeSide, true>> = {}
+	for (const frame of Object.values(win.value?.frames ?? {})) {
+		if (frame.docked) {
+			sides[frame.docked] = true
+		}
+	}
+	return sides
+})
+
+const dragActionHandler = computed(() => layoutComponent.value?.dragActionHandler)
+</script>

package/src/runtime/demo/DemoControls.vue

@@ -1,17 +1,126 @@
 <template>
-<div class="border-2 border-neutral-500 p-2 rounded-md flex">
+<div class="border-2 border-neutral-500 p-2 rounded-md flex gap-2 items-center flex-wrap">
 	<div class="">Instruction/status bar:</div>
-	<div id="status-bar" class="px-2 flex-1 overflow-x-auto scrollbar-hidden"/>
+	<div id="status-bar" class="px-2 flex-1 overflow-x-auto scrollbar-hidden whitespace-nowrap"/>
+	<WButton class="" @click="uncollapseAll" >Uncollapse All</WButton>
+	<WPopover v-model="showDevActions">
+		<template #button>
+			<WButton @click="showDevActions = !showDevActions">Dev Actions</WButton>
+		</template>
+		<template #popover>
+			<div class="flex flex-col gap-2 rounded-md w-full`">
+				<label class="text-xs">Collapse Size (%):</label>
+				<input
+					type="number"
+					class="w-full min-w-0 border border-neutral-300 dark:border-neutral-700 rounded px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800"
+					:min="0"
+					:max="100"
+					:value="collapseSizeValue"
+					@input="collapseSizeValue = Number(($event.target as HTMLInputElement).value); handleCollapseSizeChange(collapseSizeValue)"
+				/>
+				<WButton class="flex-1" @click="rotateLayoutAction">Rotate Layout</WButton>
+				<div class="p-2 flex flex-col border-neutral-500/50 border rounded-md gap-2">
+					<span>Debug:</span>
+					<div class="flex gap-2">
+						<WButton class="flex-1" @click="copyState">Copy State</WButton>
+						<WCheckbox v-model="renameFrames">Easy Ids</WCheckbox>
+					</div>
+					<label class="flex flex-col gap-2 text-sm" v-if="dragActionHandler">
+						<span>Plugin Debug Logs (true | debug path):</span>
+						<WSimpleInput v-model="debugKey" />
+					</label>
+				</div>
+			</div>
+		</template>
+	</WPopover>
 	<WDarkModeSwitcher :show-label="false"/>
 </div>
 </template>
 <script lang="ts" setup>
 import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher"
+import WButton from "@witchcraft/ui/components/WButton"
+import WPopover from "@witchcraft/ui/components/WPopover"
+import { copy } from "@witchcraft/ui/helpers"
+import { ref, watch } from "vue"
+import { applyFrameChanges } from "../layout/applyFrameChanges.js"
+import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js"
+import { settings } from "../settings.js"
+import type { LayoutFrame, LayoutWindow } from "../types/index.js"
+import { throwIfError } from "@alanscodelog/utils/throwIfError";
+import { walk } from "@alanscodelog/utils/walk"
+import type { DragActionHandler } from "../drag/DragActionHandler.js"
+import { rotateLayout } from "../helpers/rotateFrames.js"
 
-import type { LayoutFrame } from "../types/index.js"
-
-defineProps<{
-	frames: LayoutFrame[]
+const props = defineProps<{
+	win: LayoutWindow
+	frames: LayoutFrame[],
+	dragActionHandler?: DragActionHandler<any>
 }>()
 
+const showDevActions = ref(false)
+
+const collapseSizeValue = ref(Math.round(settings.collapseSizeScaled.width / settings.maxInt * 100))
+
+function handleCollapseSizeChange(value: number) {
+	settings.collapseSize = value
+	collapseSizeValue.value = value
+}
+
+
+function uncollapseAll() {
+	const win = props.win
+	if (!win) return
+	for (const frame of Object.values(win.frames)) {
+		if (frame.docked && typeof frame.collapsed === 'number') {
+			const changes = throwIfError(getFrameUncollapseInfo(win, frame.id))
+			applyFrameChanges(win, changes)
+		}
+	}
+}
+
+const renameFrames = ref(false)
+
+const rotationAngle = ref(0)
+
+function rotateLayoutAction() {
+	const angles = [90, 180, 270] as const
+	const currentIdx = angles.indexOf(rotationAngle.value as any)
+	const nextIdx = (currentIdx + 1) % angles.length
+	const nextAngle = angles[nextIdx]
+	rotationAngle.value = nextAngle
+	rotateLayout(Object.values(props.win.frames), nextAngle)
+}
+
+const alphabet = "abcdefghijklmnopqrstuvwxyz".split("")
+function copyState() {
+	const clone = walk(props.win, undefined, { save: true })
+	if (renameFrames.value) {
+		const framesList = Object.values(clone.frames)
+		for (let i = 0; i < framesList.length; i++) {
+			const frame = framesList[i] as LayoutFrame
+			delete clone.frames[frame.id]
+			;(frame as any)._originalId = frame.id
+			frame.id = alphabet[i % alphabet.length].repeat(i == 0 ? 1 : Math.ceil(i / alphabet.length))
+			clone.frames[frame.id] = frame
+		}
+	}
+	const state = JSON.stringify(clone, null, 2)
+	copy(state)
+}
+
+const debugKey = ref(import.meta.dev ? "state.win.frames" : "false")
+watch(debugKey, () => {
+	if (!props.dragActionHandler) return
+	const value = debugKey.value === "true" 
+		? true 
+		: debugKey.value === "false" 
+		? false 
+		: debugKey.value
+
+	for (const plugin of Object.values(props.dragActionHandler.actions)) {
+			plugin.debug = value
+	}
+})
+
+
 </script>

package/src/runtime/drag/CloseAction.ts

@@ -1,9 +1,10 @@
-import type { DragState, IDragAction } from "./types.js"
+import { DragActionHandler } from "./DragActionHandler.js"
+import type { ActionDragChangeResult, DragState, IDragAction } from "./types.js"
 
 import { dirToOrientation } from "../helpers/dirToOrientation.js"
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js"
 import { oppositeSide } from "../helpers/oppositeSide.js"
-import { closeFrames } from "../layout/closeFrames.js"
+import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js"
 import type { CloseDeco } from "../types/index.js"
@@ -19,29 +20,55 @@ export class CloseAction implements IDragAction {
 		force: boolean
 		res: CloseInfo
 		cacheKey: string | undefined
+		lastReturn: ActionDragChangeResult
 	} | {
 		allowed: false
 		force: boolean
 		res: CloseInfo | undefined
 		cacheKey: string | undefined
+		lastReturn: ActionDragChangeResult | undefined
 	} = {} as any // this is initialized by this.reset()
 
-	handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force"
-	updateCloseDecos: (decos: CloseDeco[]) => void
+	debug: boolean | string = false
+	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
+
+	closeHints: {
+		actions: string[]
+		transformError: (e: KnownError) => string
+	} = {
+		actions: ["Hold Shift to Close", "Hold Ctrl+Shift to Force Close"],
+		transformError: e => e.message
+	}
+
+	handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force" = (e: PointerEvent | KeyboardEvent) => {
+		if (e.ctrlKey && e.shiftKey) {
+			return "force"
+		}
+		if (e.shiftKey) return true
+		return false
+	}
+
+	modifyDecos: (shapes: CloseDeco[]) => void = () => { }
 	hooks: {
 		onStart?: (active: boolean) => void
 		onCancel?: () => void
 		onError?: (e: KnownError) => void
-	}
+	} = {}
 
 	constructor(
-		handleEvent: CloseAction["handleEvent"],
-		updateCloseDecos: CloseAction["updateCloseDecos"],
-		hooks: CloseAction["hooks"] = {}
+		handleEvent?: CloseAction["handleEvent"],
+		/** Modify the created decos before they are rendered. */
+		modifyDecos?: CloseAction["modifyDecos"],
+		hooks: CloseAction["hooks"] = {},
+		config?: {
+			debug?: boolean | string
+			closeHints?: Partial<CloseAction["closeHints"]>
+		}
 	) {
-		this.handleEvent = handleEvent
-		this.updateCloseDecos = updateCloseDecos
+		if (handleEvent !== undefined) this.handleEvent = handleEvent
+		if (modifyDecos !== undefined) this.modifyDecos = modifyDecos
 		this.hooks = hooks
+		if (config?.debug) this.debug = true
 		this.reset()
 	}
 
@@ -50,33 +77,66 @@ export class CloseAction implements IDragAction {
 			allowed: false,
 			force: false,
 			res: undefined,
-			cacheKey: undefined
+			cacheKey: undefined,
+			lastReturn: undefined
 		}
-		this.updateCloseDecos([])
+		this.modifyDecos([])
 	}
 
-	updateDecos(state: DragState): void {
-		const {
-			isDragging
-		} = state
+	private _getDecos(state: DragState): CloseDeco[] {
+		let decos: CloseDeco[] = []
+		const { isDragging } = state
 		if (isDragging && this.state.allowed && this.state.res) {
 			const { force } = this.state
-			const decos = this.state.res.deletedFrames.map(_ => ({ id: _.id, type: "close" as const, force }))
-			this.updateCloseDecos(decos)
+			decos = this.state.res.deleted.map(_ => ({
+				id: _.id,
+				type: "close" as const,
+				force,
+				shapes: [
+					{
+						type: "square",
+						data: { x: _.x, y: _.y, width: _.width, height: _.height },
+						attrs: {
+							class: force
+								? `deco-close-force-frame bg-orange-500/50`
+								: `deco-close-frame bg-orange-500/20`
+						}
+					}
+				]
+			}))
+		}
+		this.modifyDecos(decos)
+		return decos
+	}
+
+	setTextHints(result: true | CloseInfo | KnownError | undefined): void {
+		if (result === undefined) {
+			this.textHints.actions = []
+			this.textHints.errors = []
+		} else if (result instanceof Error) {
+			this.textHints.actions = []
+			this.textHints.errors = [this.closeHints.transformError(result)]
 		} else {
-			this.updateCloseDecos([])
+			this.textHints.actions = this.closeHints.actions
+			this.textHints.errors = []
 		}
 	}
 
+	getTextHints(type: "start" | "move" | "end"): {
+		actions: string[]
+		errors: string[]
+	} {
+		if (type === "end") { this.setTextHints(undefined) }
+		return this.textHints
+	}
+
+
 	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
 		const { draggingEdges } = state
 		if (draggingEdges.length !== 1) return false
 		const res = this.handleEvent(e, state)
-		if (res === "force") {
-			this.state.force = true
-		} else {
-			this.state.force = false
-		}
+		this.state.force = res === "force"
+		this.setTextHints(state.isDragging === "edge" ? true : undefined)
 		if (res) {
 			this.hooks.onStart?.(true)
 			return true
@@ -89,7 +149,7 @@ export class CloseAction implements IDragAction {
 		_type: "start" | "end" | "move",
 		_e: PointerEvent | undefined,
 		state: DragState
-	): boolean {
+	): ActionDragChangeResult {
 		const {
 			touchingFramesArrays,
 			dragDirections,
@@ -97,10 +157,16 @@ export class CloseAction implements IDragAction {
 			draggingEdges,
 			visualEdges,
 			frames,
-			isDraggingFromWindowEdge
+			isDraggingFromWindowEdge,
+			dragPoint
 		} = state
 		const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]))
-		let ok = false
+		const cacheKey = `${dragPoint?.x}-${dragPoint?.y}-${dragDirections[oppositeOrientation]!}-${this.state.force}`
+		if (this.state.allowed) {
+			if (this.state.cacheKey === cacheKey) {
+				return this.state.lastReturn
+			}
+		}
 		if (isDragging && draggingEdges.length === 1) {
 			const res = findFramesTouchingEdge(
 				draggingEdges[0],
@@ -115,36 +181,32 @@ export class CloseAction implements IDragAction {
 				const sizeKey = orientation === "horizontal" ? "width" : "height"
 				const smallestFrameSize = Math.min(...res.map(_ => _.frame[sizeKey]))
 				const frame = res.find(_ => _.frame[sizeKey] === smallestFrameSize)!.frame!
-				const cacheKey = `${frame.id}-${dragDirections[oppositeOrientation]!}`
-				if (this.state.allowed) {
-					if (this.state.cacheKey === cacheKey) {
-						this.updateDecos(state)
-						return true
-					}
-				}
+
 				const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, dragDirections[oppositeOrientation]!, "dir", this.state.force)
+				this.state.cacheKey = cacheKey
+				this.setTextHints(closeInfo)
 				if (!(closeInfo instanceof Error)) {
-					this.state.allowed = true
 					this.state.res = closeInfo
-					this.state.cacheKey = cacheKey
-					ok = true
+					this.state.allowed = true
 				} else {
+					this.state.res = undefined
+					this.state.allowed = false
 					this.hooks.onError?.(closeInfo)
+					return { updateEdges: true, shapes: [] }
 				}
 			}
 		}
-		this.updateDecos(state)
-		if (!ok) {
-			this.state.allowed = false
-		}
-		return !isDraggingFromWindowEdge
+		const decos = this._getDecos(state)
+		this.state.lastReturn = { updateEdges: !isDraggingFromWindowEdge, shapes: decos.flatMap(_ => _.shapes) }
+		return this.state.lastReturn
 	}
 
 	onDragApply(state: DragState): boolean {
 		if (this.state.res) {
-			const { deletedFrames, modifiedFrames } = this.state.res
 			const win = state.win
-			closeFrames(win, deletedFrames, modifiedFrames)
+			if (this.debug) { DragActionHandler.debugState(this.name, "before", state, this.state, this.debug) }
+			applyFrameChanges(win, this.state.res)
+			if (this.debug) { DragActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
 			this.reset()
 			return true
 		}