@witchcraft/layout 0.4.0 → 0.4.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "configKey": "witchcraftLayout",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -2,14 +2,14 @@ declare var __VLS_1: {
     css: any;
     edge: any;
     onPointerDown: any;
-}, __VLS_10: {
+}, __VLS_6: {
     css: any;
     edge: any;
 };
 type __VLS_Slots = {} & {
     handle?: (props: typeof __VLS_1) => any;
 } & {
-    indicator?: (props: typeof __VLS_10) => any;
+    indicator?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/LayoutDragEdges.vue

@@ -11,7 +11,7 @@
 		<LayoutDragEdgeHandle
 			:css="css.handle"
 			:edge="visualEdges[i]"
-			@pointerdown="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{

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

@@ -2,14 +2,14 @@ declare var __VLS_1: {
     css: any;
     edge: any;
     onPointerDown: any;
-}, __VLS_10: {
+}, __VLS_6: {
     css: any;
     edge: any;
 };
 type __VLS_Slots = {} & {
     handle?: (props: typeof __VLS_1) => any;
 } & {
-    indicator?: (props: typeof __VLS_10) => any;
+    indicator?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/LayoutIntersections.vue

@@ -11,6 +11,7 @@
 		<LayoutIntersectionHandle
 			:css="css.handle"
 			:intersection="draggableIntersections[i]"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">

package/dist/runtime/drag/CloseAction.d.ts

@@ -23,7 +23,9 @@ export declare class CloseAction implements IDragAction {
         errors: string[];
     };
     closeHints: {
-        actions: string[];
+        actions: string[] | ((state: {
+            force: boolean;
+        }) => string[]);
         transformError: (e: KnownError) => string;
     };
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force";

package/dist/runtime/drag/CloseAction.js

@@ -73,7 +73,7 @@ export class CloseAction {
       this.textHints.actions = [];
       this.textHints.errors = [this.closeHints.transformError(result)];
     } else {
-      this.textHints.actions = this.closeHints.actions;
+      this.textHints.actions = typeof this.closeHints.actions === "function" ? this.closeHints.actions({ force: this.state.force }) : this.closeHints.actions;
       this.textHints.errors = [];
     }
   }

package/dist/runtime/drag/FrameDragAction.d.ts

@@ -13,11 +13,13 @@ export declare class FrameDragAction implements IDragAction {
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
     dragHints: {
         actions: {
-            split: string;
-            swap: string;
-            rearrange: string;
-            dock: string;
-        };
+            split?: string;
+            swap?: string;
+            rearrange?: string;
+            dock?: string;
+        } | ((state: {
+            type: "split" | "swap" | "rearrange" | "dock";
+        }) => string[]);
         transformError: (e: KnownError) => string;
     };
     modifyDecos: (shapes: FrameDragDeco[]) => void;

package/dist/runtime/drag/FrameDragAction.js

@@ -46,8 +46,7 @@ export class FrameDragAction {
       this.textHints.actions = [];
       this.textHints.errors = [this.dragHints.transformError(result)];
     } else {
-      const text = this.dragHints.actions[result.info];
-      this.textHints.actions = [text];
+      this.textHints.actions = typeof this.dragHints.actions === "function" ? this.dragHints.actions({ type: result.info }) : this.dragHints.actions[result.info] !== void 0 ? [this.dragHints.actions[result.info]] : [];
       this.textHints.errors = [];
     }
   }

package/dist/runtime/drag/SplitAction.d.ts

@@ -2,6 +2,7 @@ import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
 import type { ActionDragChangeResult, DragState, IDragAction, Point, SplitDeco } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>;
+export type DragChangeType = "start" | "move" | "end";
 export declare class SplitAction implements IDragAction {
     name: "split";
     state: {
@@ -21,7 +22,7 @@ export declare class SplitAction implements IDragAction {
         errors: string[];
     };
     splitHints: {
-        action: string;
+        actions: string[] | ((type: DragChangeType) => string[]);
         transformError: (e: KnownError) => string;
     };
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;

package/dist/runtime/drag/SplitAction.js

@@ -11,7 +11,7 @@ export class SplitAction {
   debug = false;
   textHints = { actions: [], errors: [] };
   splitHints = {
-    action: "Hold Alt to Split",
+    actions: ["Hold Alt to Split"],
     transformError: (e) => e.message
   };
   handleEvent = (e, state) => e.altKey || state.isDraggingFromWindowEdge;
@@ -24,7 +24,7 @@ export class SplitAction {
     this.hooks = hooks;
     this.reset();
     if (config?.debug) this.debug = true;
-    if (config?.splitHints?.action) this.splitHints.action = config.splitHints.action;
+    if (config?.splitHints?.actions) this.splitHints.actions = config.splitHints.actions;
     if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError;
   }
   reset() {
@@ -78,7 +78,7 @@ export class SplitAction {
       this.textHints.actions = [];
       this.textHints.errors = [this.splitHints.transformError(result)];
     } else {
-      this.textHints.actions = [this.splitHints.action];
+      this.textHints.actions = typeof this.splitHints.actions === "function" ? this.splitHints.actions("move") : this.splitHints.actions;
       this.textHints.errors = [];
     }
   }

package/dist/runtime/helpers/consoleDebugWindow.js

@@ -217,6 +217,6 @@ export function createDebugLabeler({
     const size = showSize ? ` ${f.width}x${f.height}` : "";
     const pos = showPos ? ` ${f.x},${f.y}` : "";
     const pxSize = showPxSize ? ` ${widthPx}x${heightPx}px` : "";
-    return `${isCollapsed}${isDocked}${size}${pos}${pxSize}`;
+    return `${isCollapsed}${isDocked}${pos}${size}${pxSize}`;
   };
 }

package/dist/runtime/layout/getFrameUndockInfo.js

@@ -34,6 +34,7 @@ export function getFrameUndockInfo(win, frameId) {
   const adjustmentKey = frameSide === "left" ? "x" : frameSide === "top" ? "y" : frameSide === "right" ? "width" : "height";
   const secondaryAdjustmentKey = frameSide === "left" ? "width" : frameSide === "top" ? "height" : frameSide === "right" ? "x" : "y";
   const adjustmentValue = frameSide === "left" || frameSide === "top" ? 0 : maxInt;
+  const perpendicularSizeKey = isVertical ? "width" : "height";
   const otherChanges = otherDockedFramesToResize.map((other) => {
     if (other.docked === shrinkStartKey) {
       frameClone[posKey] += other[sizeKey];
@@ -41,10 +42,12 @@ export function getFrameUndockInfo(win, frameId) {
     } else if (other.docked === shrinkEndKey) {
       frameClone[sizeKey] -= other[sizeKey];
     }
+    const otherIsVertical = other.docked === "left" || other.docked === "right";
+    const isSameAxis = isVertical === otherIsVertical;
     return {
       ...other,
       [adjustmentKey]: adjustmentValue,
-      [secondaryAdjustmentKey]: other[secondaryAdjustmentKey] + other[adjustmentKey]
+      ...isSameAxis ? { [secondaryAdjustmentKey]: other[secondaryAdjustmentKey] + other[adjustmentKey] } : { [perpendicularSizeKey]: maxInt }
     };
   });
   return { modified: [frameClone, ...otherChanges], created: [], deleted: [] };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,

package/src/runtime/components/LayoutDragEdges.vue

@@ -11,7 +11,7 @@
 		<LayoutDragEdgeHandle
 			:css="css.handle"
 			:edge="visualEdges[i]"
-			@pointerdown="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{

package/src/runtime/components/LayoutIntersections.vue

@@ -11,6 +11,7 @@
 		<LayoutIntersectionHandle
 			:css="css.handle"
 			:intersection="draggableIntersections[i]"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">

package/src/runtime/drag/CloseAction.ts

@@ -32,7 +32,7 @@ export class CloseAction implements IDragAction {
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 
 	closeHints: {
-		actions: string[]
+		actions: string[] | ((state: { force: boolean }) => string[])
 		transformError: (e: KnownError) => string
 	} = {
 		actions: ["Hold Shift to Close", "Hold Ctrl+Shift to Force Close"],
@@ -116,7 +116,9 @@ export class CloseAction implements IDragAction {
 			this.textHints.actions = []
 			this.textHints.errors = [this.closeHints.transformError(result)]
 		} else {
-			this.textHints.actions = this.closeHints.actions
+			this.textHints.actions = typeof this.closeHints.actions === "function"
+				? this.closeHints.actions({ force: this.state.force })
+				: this.closeHints.actions
 			this.textHints.errors = []
 		}
 	}

package/src/runtime/drag/FrameDragAction.ts

@@ -26,7 +26,7 @@ export class FrameDragAction implements IDragAction {
 		= (_e: PointerEvent | KeyboardEvent, state: DragState) => state.isDragging === "frame"
 
 	dragHints: {
-		actions: { split: string, swap: string, rearrange: string, dock: string }
+		actions: { split?: string, swap?: string, rearrange?: string, dock?: string } | ((state: { type: "split" | "swap" | "rearrange" | "dock" }) => string[])
 		transformError: (e: KnownError) => string
 	} = {
 		actions: {
@@ -76,8 +76,11 @@ export class FrameDragAction implements IDragAction {
 			this.textHints.actions = []
 			this.textHints.errors = [this.dragHints.transformError(result)]
 		} else {
-			const text = this.dragHints.actions[result.info]
-			this.textHints.actions = [text]
+			this.textHints.actions = typeof this.dragHints.actions === "function"
+				? this.dragHints.actions({ type: result.info })
+				: this.dragHints.actions[result.info] !== undefined
+					?	[this.dragHints.actions[result.info]!]
+					: []
 			this.textHints.errors = []
 		}
 	}

package/src/runtime/drag/SplitAction.ts

@@ -12,6 +12,8 @@ export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError
 
 // note that we dont annotateEdges because is possible to forexample drag from a window edge to a frame that can be split, moving over a collapsed frame that was sharing the edge but can't be split
 
+export type DragChangeType = "start" | "move" | "end"
+
 export class SplitAction implements IDragAction {
 	name = "split" as const
 
@@ -30,10 +32,10 @@ export class SplitAction implements IDragAction {
 	debug: boolean | string = false
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 	splitHints: {
-		action: string
+		actions: string[] | ((type: DragChangeType) => string[])
 		transformError: (e: KnownError) => string
 	} = {
-		action: "Hold Alt to Split",
+		actions: ["Hold Alt to Split"],
 		transformError: e => e.message
 	}
 
@@ -63,7 +65,7 @@ export class SplitAction implements IDragAction {
 		this.hooks = hooks
 		this.reset()
 		if (config?.debug) this.debug = true
-		if (config?.splitHints?.action) this.splitHints.action = config.splitHints.action
+		if (config?.splitHints?.actions) this.splitHints.actions = config.splitHints.actions
 		if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError
 	}
 
@@ -121,7 +123,10 @@ export class SplitAction implements IDragAction {
 			this.textHints.actions = []
 			this.textHints.errors = [this.splitHints.transformError(result)]
 		} else {
-			this.textHints.actions = [this.splitHints.action]
+			this.textHints.actions = typeof this.splitHints.actions === "function"
+				? this.splitHints.actions("move")
+				: this.splitHints.actions
+
 			this.textHints.errors = []
 		}
 	}

package/src/runtime/helpers/consoleDebugWindow.ts

@@ -325,7 +325,7 @@ export function createDebugLabeler({
 		const pos = showPos ? ` ${f.x},${f.y}` : ""
 		const pxSize = showPxSize ? ` ${widthPx}x${heightPx}px` : ""
 
-		return `${isCollapsed}${isDocked}${size}${pos}${pxSize}`
+		return `${isCollapsed}${isDocked}${pos}${size}${pxSize}`
 	}
 }
 

package/src/runtime/layout/getFrameUndockInfo.ts

@@ -78,6 +78,9 @@ export function getFrameUndockInfo(
 				: "y"
 
 	const adjustmentValue = frameSide === "left" || frameSide === "top" ? 0 : maxInt
+	// for perpendicular frames (e.g. top/bottom when undocking left/right),
+	// expand along the dimension perpendicular to the undock axis
+	const perpendicularSizeKey = isVertical ? "width" : "height" as const
 	const otherChanges = otherDockedFramesToResize.map(other => {
 		// shrink the ends of the undocking frame
 		if (other.docked === shrinkStartKey) {
@@ -86,10 +89,13 @@ export function getFrameUndockInfo(
 		} else if (other.docked === shrinkEndKey) {
 			frameClone[sizeKey] -= other[sizeKey]
 		}
+		// same-axis frames shift their position; perpendicular frames expand their dimension to fill the space
+		const otherIsVertical = other.docked === "left" || other.docked === "right"
+		const isSameAxis = isVertical === otherIsVertical
 		return {
 			...other,
 			[adjustmentKey]: adjustmentValue,
-			[secondaryAdjustmentKey]: other[secondaryAdjustmentKey] + other[adjustmentKey]
+			...(isSameAxis ? { [secondaryAdjustmentKey]: other[secondaryAdjustmentKey] + other[adjustmentKey] } : { [perpendicularSizeKey]: maxInt })
 		}
 	})