@witchcraft/layout 0.4.3 → 0.5.0

package/dist/runtime/types/index.js

@@ -118,7 +118,7 @@ const zCloseDeco = zBaseDeco.extend({
   type: z.literal("close"),
   force: z.boolean().optional()
 });
-const zFrameDragDeco = zBaseDeco.extend({
+const zFrameDeco = zBaseDeco.extend({
   id: z.uuid(),
   type: z.literal("drop"),
   position: zSide.or(z.enum(["center"]))
@@ -126,7 +126,7 @@ const zFrameDragDeco = zBaseDeco.extend({
 export const zDeco = z.union([
   zSplitDeco,
   zCloseDeco,
-  zFrameDragDeco
+  zFrameDeco
 ]);
 export const LAYOUT_ERROR = enumFromArray([
   "INVALID_ID",
@@ -153,7 +153,8 @@ export const LAYOUT_ERROR = enumFromArray([
   "CANT_COLLAPSE_NOT_DOCKED",
   "CANT_UNCOLLAPSE_NOT_COLLAPSED",
   "NO_FILL_CANDIDATES",
-  "CANT_RESIZE_COLLAPSED_FRAME"
+  "CANT_RESIZE_COLLAPSED_FRAME",
+  "CANT_RESIZE_SINGLE_FRAME"
 ]);
 export const zWindowCreate = zLayoutWindowLoose.partial({ id: true, pxWidth: true, pxHeight: true, pxX: true, pxY: true }).extend({ frames: zLayoutWindow.shape.frames.optional() });
 export const zLayoutCreate = baseLayout.loose().extend({

package/dist/runtime/types/vue.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { Direction, DragState, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "./index.js";
+import type { ActionHandler, ActionHandlerApplyResult, Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js";
 export type LayoutContext = ComputedRef<{
     /** The owning window, needed so we can correctly scale coordinates. */
     win: LayoutWindow;
@@ -8,34 +8,41 @@ export type LayoutContext = ComputedRef<{
 }>;
 export declare const layoutContextInjectionKey: InjectionKey<LayoutContext>;
 export interface UseFramesContext {
-    dragStart: {
+    actionHandler: ActionHandler;
+    moveStart: {
         (e: PointerEvent, type: "edge", data: {
             edge?: Edge;
             intersection?: IntersectionEntry;
-        }): void;
+        }, opts?: {
+            moveEvent?: string;
+            endEvent?: string;
+            context?: Record<string, unknown>;
+        }): Promise<any>;
         (e: PointerEvent, type: "frame", data: {
             frameId: FrameId;
-        }): void;
+        }, opts?: {
+            moveEvent?: string;
+            endEvent?: string;
+            context?: Record<string, unknown>;
+        }): Promise<any>;
     };
-    dragMove: (e: PointerEvent) => void;
-    dragEnd: (e?: PointerEvent, options?: {
-        apply?: boolean;
-    }) => void;
+    onMove: (e: PointerEvent) => void;
+    moveEnd: (e?: PointerEvent, options?: Partial<Pick<ActionHandlerApplyResult, "apply">>) => 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>;
+    moveDirections: Ref<Record<Orientation, Direction | undefined>>;
+    movePoint: Ref<Point | undefined>;
+    isMoving: Ref<false | "frame" | "edge">;
+    movingEdges: Ref<Edge[]>;
+    movingIntersection: Ref<IntersectionEntry | undefined>;
     visualEdges: Ref<Edge[]>;
     touchingFrames: Ref<Record<string, LayoutFrame>[]>;
     touchingFramesArrays: Ref<LayoutFrame[][]>;
     frames: ComputedRef<Record<string, LayoutFrame>>;
-    dragHoveredFrame: ComputedRef<LayoutFrame | undefined>;
+    moveHoveredFrame: ComputedRef<LayoutFrame | undefined>;
     intersections: ComputedRef<IntersectionEntry[]>;
-    isDraggingFromWindowEdge: Ref<boolean>;
+    isMovingFromWindowEdge: Ref<boolean>;
     forceRecalculateEdges: () => void;
-    state: ComputedRef<DragState>;
-    frameDragFrameId: Ref<FrameId | undefined>;
+    state: ComputedRef<MoveState>;
+    movingFrameId: Ref<FrameId | undefined>;
 }
-export declare const dragContextInjectionKey: InjectionKey<UseFramesContext>;
+export declare const moveContextInjectionKey: InjectionKey<UseFramesContext>;

package/dist/runtime/types/vue.js

@@ -1,2 +1,2 @@
 export const layoutContextInjectionKey = Symbol.for("@witchcraft/layout:context");
-export const dragContextInjectionKey = Symbol.for("@witchcraft/layout:dragContext");
+export const moveContextInjectionKey = Symbol.for("@witchcraft/layout:moveContext");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -49,6 +49,7 @@
     "@alanscodelog/semantic-release-config": "^6.0.2",
     "@alanscodelog/tsconfigs": "^6.3.0",
     "@alanscodelog/vite-config": "^0.0.7",
+    "@babel/runtime": "^7.20.7",
     "@commitlint/cli": "^19.8.1",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/kit": "^4.4.6",
@@ -145,6 +146,6 @@
     "doc:dev": "concurrently \"pnpm doc:watch\" \"pnpm doc:serve\"",
     "doc:check-invalid": "typedoc --listInvalidSymbolLinks",
     "actions:debug": "act -r -v -j release",
-    "gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** -o '${path}.js'"
+    "gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** **/demo/** **/dist/** -o '${path}.js'"
   }
 }

package/src/runtime/components/FrameDragHandle.vue

@@ -8,21 +8,21 @@
 </template>
 <script lang="ts" setup>
 import { inject, onBeforeUnmount } from "vue"
-import { dragContextInjectionKey } from "../types/vue.js"
+import { moveContextInjectionKey } from "../types/vue.js"
 
 const props = defineProps<{
 	frameId: string
 }>()
 
 
-const dragContext = inject(dragContextInjectionKey)
+const dragContext = inject(moveContextInjectionKey)
 if (!dragContext) {
 	throw new Error("FrameDragHandle must be used inside a LayoutWindow and drag context returned by useFrames must be injected.")
 }
 function handlePointerDown(e: PointerEvent): void {
 	e.preventDefault()
 	e.stopPropagation()
-	dragContext!.dragStart( e,"frame", {frameId: props.frameId})
+	dragContext!.moveStart( e,"frame", {frameId: props.frameId})
 }
 onBeforeUnmount(() => {
 	dragContext.cancel()

package/src/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -16,7 +16,7 @@
 />
 </template>
 <script lang="ts" setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { computed, inject, useAttrs } from "vue"
 
@@ -34,10 +34,10 @@ defineOptions({
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : undefined)
+const draggingEdge = computed(() => dragCtx.movingEdges.value.length === 1 ? dragCtx.movingEdges.value[0] : undefined)
 
 const cssDragEdge = computed(() => {
 	if (!draggingEdge.value) return []

package/src/runtime/components/LayoutDragEdgeHandle.vue

@@ -26,8 +26,8 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { useAttrs, inject } from "vue"
 
 import LayoutShapeRect from "./LayoutShapeRect.vue"
-import { type EdgeDragStartData } from "../types/index.js"
-import { dragContextInjectionKey } from "../types/vue.js"
+import { type EdgeMoveStartData } from "../types/index.js"
+import { moveContextInjectionKey } from "../types/vue.js"
 import type { Edge, EdgeCss } from "../types/index.js"
 
 const $attrs = useAttrs()
@@ -39,13 +39,13 @@ defineOptions({
 const props = defineProps<{
 	edge: Edge
 	css: EdgeCss
-	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void
+	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void
 }>()
 
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
 </script>

package/src/runtime/components/LayoutDragEdges.vue

@@ -6,12 +6,12 @@
 	<slot name="handle" v-bind="{
 		css: css.handle,
 		edge: visualEdges[i],
-		onPointerDown: dragCtx.dragStart
+		onPointerDown: dragCtx.moveStart
 	}">
 		<LayoutDragEdgeHandle
 			:css="css.handle"
 			:edge="visualEdges[i]"
-			:on-pointer-down="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.moveStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{
@@ -37,7 +37,7 @@ import { isEdgeEqual } from "../helpers/isEdgeEqual.js"
 import { toRef } from "vue"
 import {cssToKey} from "../utils/cssToKey.js"
 import { type EdgeCss } from "../types/index.js"
-import { dragContextInjectionKey } from "../types/vue.js"
+import { moveContextInjectionKey } from "../types/vue.js"
 
 defineOptions({
 	inheritAttrs: false
@@ -46,13 +46,13 @@ defineOptions({
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used wivisible a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
 
 const visualEdges = toRef(dragCtx, "visualEdges")
 
-const draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : undefined)
+const draggingEdge = computed(() => dragCtx.movingEdges.value.length === 1 ? dragCtx.movingEdges.value[0] : undefined)
 
 const cssDragEdges = computed(() => {
 	const handleEdges = getVisualEdgesCss(

package/src/runtime/components/LayoutEdgesActiveFrame.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
 import { computed, inject, useAttrs } from "vue"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 
@@ -34,7 +34,7 @@ defineOptions({
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
 

package/src/runtime/components/LayoutFrame.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import { useAttrs, inject, toRef } from "vue"
 
@@ -48,7 +48,7 @@ const emit = defineEmits<{
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
 const frames = toRef(dragCtx, "frames")

package/src/runtime/components/LayoutIntersectionHandle.vue

@@ -20,8 +20,8 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge"
 import LayoutShapeRect from "./LayoutShapeRect.vue"
 
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
-import { type EdgeDragStartData } from "../types/index.js"
-import { dragContextInjectionKey } from "../types/vue.js"
+import { type EdgeMoveStartData } from "../types/index.js"
+import { moveContextInjectionKey } from "../types/vue.js"
 import type { IntersectionEntry } from "../types/index.js"
 
 const $attrs = useAttrs()
@@ -33,13 +33,13 @@ defineOptions({
 const props = defineProps<{
 	css: ReturnType<typeof getIntersectionsCss>[number]
 	intersection: IntersectionEntry
-	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void
+	onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void
 }>()
 
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
 </script>

package/src/runtime/components/LayoutIntersections.vue

@@ -5,13 +5,13 @@
 >
 	<slot name="handler" v-bind="{
 		css: css.handle,
-		onPointerDown: dragCtx.dragStart,
+		onPointerDown: dragCtx.moveStart,
 		intersection: draggableIntersections[i]
 	}">
 		<LayoutIntersectionHandle
 			:css="css.handle"
 			:intersection="draggableIntersections[i]"
-			:on-pointer-down="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.moveStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js"
 import { computed, inject } from "vue"
 
 
@@ -40,7 +40,7 @@ defineOptions({
 const ctx = inject(layoutContextInjectionKey, undefined)
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
-const dragCtx = inject(dragContextInjectionKey, undefined)
+const dragCtx = inject(moveContextInjectionKey, undefined)
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow")
 
 const draggableIntersections = computed(() => dragCtx.intersections.value

package/src/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-		isDragging && `dragging cursor-pointer user-select-none`,
+		isMoving && `dragging cursor-pointer user-select-none pointer-events-none`,
 		requestType && `request-${requestType}`,
 		($attrs as any).class
 	)"
@@ -23,25 +23,25 @@
 		</template>
 	</div>
 	<Teleport
-		v-if="isDragging === 'frame' && frameDragFrameId && dragPoint"
+		v-if="isMoving === 'frame' && movingFrameId && movePoint"
 		: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'
+				left: (movePoint.x / settings.maxInt * win.pxWidth + win.pxX) + 'px',
+				top: (movePoint.y / settings.maxInt * win.pxHeight + win.pxY) + 'px',
+				width: frames[movingFrameId]
+					? (frames[movingFrameId].width / settings.maxInt * win.pxWidth) + 'px'
 					: undefined,
-				height: frames[frameDragFrameId]
-					? (frames[frameDragFrameId].height / settings.maxInt * win.pxHeight) + 'px'
+				height: frames[movingFrameId]
+					? (frames[movingFrameId].height / settings.maxInt * win.pxHeight) + 'px'
 					: undefined
 			}"
 		>
 			<slot
-				:id="frameDragFrameId"
+				:id="movingFrameId"
 				:name="`frame-drag-ghost`"
 			>
 				<div class="frame-drag-ghost border border-neutral-500 bg-white/50 w-10 h-10"/>
@@ -70,14 +70,14 @@
 <script lang="ts" setup>
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, provide, reactive, ref, useAttrs, watch } from "vue"
+import { computed, markRaw, provide, reactive, ref, useAttrs, watch } from "vue"
 
 
 import { useFrames } from "../composables/useFrames.js"
-import { createDefaultHandlers } from "../drag/createDefaultHandlers.js"
-import { DragActionHandler } from "../drag/DragActionHandler"
-import { dragContextInjectionKey } from "../types/vue.js"
-import { type DragState, type IDragAction } from "../types/index.js"
+import { createDefaultHandlers } from "../move/createDefaultHandlers.js"
+import { ActionHandler } from "../move/ActionHandler"
+import { moveContextInjectionKey } from "../types/vue.js"
+import { type MoveState, type IAction } from "../types/index.js"
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js"
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js"
 import { type LayoutWindow } from "../types/index.js"
@@ -90,10 +90,10 @@ const $attrs = useAttrs()
 const win = defineModel<LayoutWindow>("win", { required: true })
 
 const props = withDefaults(defineProps<{
-	/** If you really need it, you can provide your own drag action handler, note the actionHandler's prop will no longer have any effect.*/
-	dragActionHandler?: DragActionHandler<any, any>
+	/** If you really need it, you can provide your own drag action handler (remember to markRaw it), note the actionHandler's prop will no longer have any effect.*/
+	actionHandler?: ActionHandler<any, any>
 	/** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
-	actionHandlers?: IDragAction[]
+	actionHandlers?: IAction[]
 	textHints?: {text:string, classes?:string}[] 
 	textHintsTeleportTo: string | undefined
 	ghostTeleportTo?: string
@@ -113,8 +113,8 @@ const props = withDefaults(defineProps<{
 	allowWindowSizeUpdate: true
 })
 const emit = defineEmits<{
-	(e: "isShowingDrag", value: boolean): void
-	(e: "dragState", value: DragState): void
+	(e: "isShowingMove", value: boolean): void
+	(e: "moveState", value: MoveState): void
 }>()
 
 
@@ -122,13 +122,13 @@ const windowEl = ref<HTMLElement | null>(null)
 
 const requestType = ref<string | undefined | string>()
 
-const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
+const actionHandler = props.actionHandler ?? markRaw(new ActionHandler(
 	[
 		...(props.actionHandlers ?? createDefaultHandlers())
 	],
 	{
 		onEvent: (e, cancel) => {
-			showDragging.value = true
+			showMoving.value = true
 			if (e instanceof KeyboardEvent && e.key === "Escape") {
 				cancel()
 			}
@@ -138,29 +138,29 @@ const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
 		},
 		onEnd: () => {
 			requestType.value = undefined
-			showDragging.value = true
+			showMoving.value = true
 		},
 	}
-)
-dragActionHandler.shapes = reactive([])
-dragActionHandler.textHints = reactive({ actions: [], errors: [] })
-const shapes = dragActionHandler.shapes
+))
+actionHandler.shapes = reactive([])
+actionHandler.textHints = reactive({ actions: [], errors: [] })
+const shapes = actionHandler.shapes
 
 const dragContext  = useFrames(
 	win,
-	dragActionHandler
+	actionHandler
 )
 
 const {
-	dragPoint,
-	isDragging,
+	movePoint,
+	isMoving,
 	frames,
 	state,
-	frameDragFrameId,
-	showDragging,
+	movingFrameId,
+	showMoving,
 } = dragContext
 
-provide(dragContextInjectionKey, dragContext)
+provide(moveContextInjectionKey, dragContext)
 
 function getWindowOffset() {
 	const windowElRect = windowEl.value!.getBoundingClientRect()
@@ -192,8 +192,8 @@ watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
 })
 
 
-watch(state, () => emit("dragState", state.value))
-watch(showDragging, () => emit("isShowingDrag", showDragging.value))
+watch(state, () => emit("moveState", state.value))
+watch(showMoving, () => emit("isShowingMove", showMoving.value))
 
 const layoutContext = computed(() => {
 	return {
@@ -208,7 +208,7 @@ defineExpose({
 	state,
 	win,
 	getUpdateWindowSizeInfo,
-	dragActionHandler: dragActionHandler as DragActionHandler<any, any>,
+	actionHandler: actionHandler as ActionHandler<any, any>,
 })
 </script>