@witchcraft/layout 0.4.4 → 0.5.1

package/dist/runtime/{drag → move}/FrameDragAction.js

@@ -1,10 +1,10 @@
-import { DragActionHandler } from "./DragActionHandler.js";
+import { ActionHandler } from "./ActionHandler.js";
 import { createZoneSideClipPath } from "../helpers/createZoneSideClipPath.js";
 import { applyFrameChanges } from "../layout/applyFrameChanges.js";
-import { getDragZones } from "../layout/getDragZones.js";
 import { getFrameDockInfo } from "../layout/getFrameDockInfo.js";
 import { getFrameRearrangeInfo } from "../layout/getFrameRearrangeInfo.js";
 import { getFrameSwapInfo } from "../layout/getFrameSwapInfo.js";
+import { getZones } from "../layout/getZones.js";
 import { settings } from "../settings.js";
 export class FrameDragAction {
   name = "frameDrag";
@@ -14,7 +14,7 @@ export class FrameDragAction {
   };
   debug = false;
   textHints = { actions: [], errors: [] };
-  handleEvent = (_e, state) => state.isDragging === "frame";
+  handleEvent = (_e, state) => state.isMoving === "frame";
   dragHints = {
     actions: {
       split: "Drop to Split the current frame.",
@@ -60,7 +60,7 @@ export class FrameDragAction {
   }
   getDecos(matchedZone, state, result) {
     const isError = result instanceof Error;
-    const frame = state.dragHoveredFrame;
+    const frame = state.moveHoveredFrame;
     if (!matchedZone || !frame) {
       const decos2 = [];
       this.modifyDecos(decos2);
@@ -93,53 +93,54 @@ export class FrameDragAction {
     this.reset();
     return false;
   }
-  onDragChange(_type, _e, state) {
-    if (state.dragDistance <= this.minDragDistance) {
-      return { updateEdges: false, shapes: [], showDragging: false };
+  onMoveChange(type, _e, state) {
+    if (state.moveDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [], showMoving: false };
     }
-    const { win, draggingFrameId, dragHoveredFrame } = state;
-    const matchedZone = getDragZones(state, settings.zoneSizes);
+    const { win, movingFrameId, moveHoveredFrame } = state;
+    const matchedZone = getZones(state, settings.zoneSizes);
     if (!matchedZone) {
       this.state.lastReturn = void 0;
-    } else if (dragHoveredFrame && matchedZone.type === "frame" && matchedZone.side) {
+    } else if (moveHoveredFrame && matchedZone.type === "frame" && matchedZone.side) {
       if (matchedZone.side !== "center") {
-        this.state.lastReturn = getFrameRearrangeInfo(win, draggingFrameId, dragHoveredFrame.id, matchedZone.side);
+        this.state.lastReturn = getFrameRearrangeInfo(win, movingFrameId, moveHoveredFrame.id, matchedZone.side);
       } else {
-        this.state.lastReturn = getFrameSwapInfo(win, draggingFrameId, dragHoveredFrame.id);
+        this.state.lastReturn = getFrameSwapInfo(win, movingFrameId, moveHoveredFrame.id);
         if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "swap";
       }
-    } else if (matchedZone.type === "window" && dragHoveredFrame && !dragHoveredFrame.docked) {
-      this.state.lastReturn = getFrameDockInfo(win, draggingFrameId, matchedZone.side);
+    } else if (matchedZone.type === "window" && moveHoveredFrame && !moveHoveredFrame.docked) {
+      this.state.lastReturn = getFrameDockInfo(win, movingFrameId, matchedZone.side);
       if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "dock";
     }
     this.setTextHints(this.state.lastReturn);
     const decos = this.getDecos(matchedZone, state, this.state.lastReturn);
     return {
-      shapes: decos.flatMap((_) => _.shapes),
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
       updateEdges: false,
-      showDragging: false
+      showMoving: false
     };
   }
-  onDragApply(state) {
+  onMoveApply(state) {
     const result = this.state.lastReturn;
-    if (!result || !state.dragHoveredFrame || !state.draggingFrameId) {
-      this.reset();
+    if (!result || !state.moveHoveredFrame || !state.movingFrameId) {
       return true;
     }
     if (result instanceof Error) {
       this.hooks.onError?.(result);
     } else {
       if (this.debug) {
-        DragActionHandler.debugState(this.name, "before", state, this.state, this.debug);
+        ActionHandler.debugState(this.name, "before", state, this.state, this.debug);
       }
       applyFrameChanges(state.win, result);
       if (this.debug) {
-        DragActionHandler.debugState(this.name, "after", state, this.state, this.debug);
+        ActionHandler.debugState(this.name, "after", state, this.state, this.debug);
       }
     }
-    this.reset();
     return true;
   }
+  onMoveEnded() {
+    this.reset();
+  }
   cancel() {
     this.reset();
   }

package/dist/runtime/{drag/DragDirectionStore.d.ts → move/MoveDirectionStore.d.ts}

@@ -1,11 +1,11 @@
 import type { Direction, Orientation, Point } from "../types/index.js";
-export declare class DragDirectionStore {
+export declare class MoveDirectionStore {
     hooks: {
         onUpdate: (directions: Record<Orientation, Direction | undefined>) => void;
     };
-    constructor(hooks: DragDirectionStore["hooks"]);
+    constructor(hooks: MoveDirectionStore["hooks"]);
     lastPoint: Point | undefined;
-    dragDirection: Record<Orientation, Direction | undefined>;
+    moveDirection: Record<Orientation, Direction | undefined>;
     lesser: {
         x: Direction;
         y: Direction;
@@ -16,5 +16,5 @@ export declare class DragDirectionStore {
     };
     reset(): void;
     update(point: Point): boolean;
-    getDragDirection(coord: "x" | "y", point: Point): Direction | false;
+    getMoveDirection(coord: "x" | "y", point: Point): Direction | false;
 }

package/dist/runtime/{drag/DragDirectionStore.js → move/MoveDirectionStore.js}

@@ -1,10 +1,10 @@
-export class DragDirectionStore {
+export class MoveDirectionStore {
   hooks;
   constructor(hooks) {
     this.hooks = hooks;
   }
   lastPoint;
-  dragDirection = {};
+  moveDirection = {};
   lesser = {
     x: "left",
     y: "up"
@@ -15,27 +15,27 @@ export class DragDirectionStore {
   };
   reset() {
     this.lastPoint = void 0;
-    this.dragDirection = {};
+    this.moveDirection = {};
   }
   update(point) {
-    const newXDirection = this.getDragDirection("x", point);
-    const newYDirection = this.getDragDirection("y", point);
+    const newXDirection = this.getMoveDirection("x", point);
+    const newYDirection = this.getMoveDirection("y", point);
     let changed = false;
     if (newXDirection) {
-      this.dragDirection.horizontal = newXDirection;
+      this.moveDirection.horizontal = newXDirection;
     }
     if (newYDirection) {
-      this.dragDirection.vertical = newYDirection;
+      this.moveDirection.vertical = newYDirection;
     }
     if (this.lastPoint?.x !== point.x || this.lastPoint?.y !== point.y) {
       this.lastPoint = point;
       changed = true;
     }
     if (!changed) return false;
-    this.hooks.onUpdate(this.dragDirection);
+    this.hooks.onUpdate(this.moveDirection);
     return true;
   }
-  getDragDirection(coord, point) {
+  getMoveDirection(coord, point) {
     if (!this.lastPoint) return false;
     const diff = point[coord] - this.lastPoint[coord];
     if (diff > 0) return this.greater[coord];

package/dist/runtime/{drag → move}/SplitAction.d.ts

@@ -1,9 +1,9 @@
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
-import type { ActionDragChangeResult, DragState, IDragAction, Point, SplitDeco } from "../types/index.js";
+import type { ActionChangeResult, IAction, MoveState, 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 {
+export declare class SplitAction implements IAction {
     name: "split";
     minDragDistance: number;
     state: {
@@ -15,7 +15,7 @@ export declare class SplitAction implements IDragAction {
         allowed: false;
         res: SplitInfo | undefined;
         lastPoint: Point | undefined;
-        lastReturn: ActionDragChangeResult | undefined;
+        lastReturn: ActionChangeResult | undefined;
     };
     debug: boolean | string;
     textHints: {
@@ -26,7 +26,7 @@ export declare class SplitAction implements IDragAction {
         actions: string[] | ((type: DragChangeType) => string[]);
         transformError: (e: KnownError) => string;
     };
-    handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
+    handleEvent: (e: PointerEvent | KeyboardEvent, state: MoveState) => boolean;
     modifyDecos: (shapes: SplitDeco[]) => void;
     hooks: {
         onStart?: () => void;
@@ -42,15 +42,16 @@ export declare class SplitAction implements IDragAction {
         minDragDistance?: number;
     });
     reset(): void;
-    getDecos(state: DragState): SplitDeco[];
-    canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean;
+    getDecos(state: MoveState): SplitDeco[];
+    canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
     setTextHints(result: true | SplitInfo | KnownError | undefined): void;
     getTextHints(type: "start" | "move" | "end"): {
         actions: string[];
         errors: string[];
     };
-    calculateSplitRequest(state: DragState): boolean;
-    onDragChange(_type: "start" | "end" | "move", _e: PointerEvent | undefined, state: DragState): ActionDragChangeResult;
-    onDragApply(state: DragState): boolean;
+    calculateSplitRequest(state: MoveState): boolean;
+    onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
+    onMoveApply(state: MoveState): boolean;
+    onMoveEnded(): void;
     cancel(): void;
 }

package/dist/runtime/{drag → move}/SplitAction.js

@@ -1,4 +1,4 @@
-import { DragActionHandler } from "./DragActionHandler.js";
+import { ActionHandler } from "./ActionHandler.js";
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
 import { oppositeSide } from "../helpers/oppositeSide.js";
 import { applyFrameChanges } from "../layout/applyFrameChanges.js";
@@ -15,7 +15,7 @@ export class SplitAction {
     actions: ["Hold Alt to Split"],
     transformError: (e) => e.message
   };
-  handleEvent = (e, state) => e.altKey || state.isDraggingFromWindowEdge;
+  handleEvent = (e, state) => e.altKey || state.isMovingFromWindowEdge;
   modifyDecos = () => {
   };
   hooks;
@@ -42,19 +42,19 @@ export class SplitAction {
     let decos = [];
     const {
       win,
-      isDragging,
-      dragHoveredFrame,
-      dragDirections,
-      draggingEdges,
-      dragPoint
+      isMoving,
+      moveHoveredFrame,
+      moveDirections,
+      movingEdges,
+      movePoint
     } = state;
-    if (isDragging && this.state.allowed && dragHoveredFrame && draggingEdges.length === 1) {
-      const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
+    if (isMoving && this.state.allowed && moveHoveredFrame && movingEdges.length === 1) {
+      const oppositeOrientation = oppositeSide(getEdgeOrientation(movingEdges[0]));
       const deco = createSplitDecoFromDrag(
         win.frames,
-        dragHoveredFrame,
-        dragDirections[oppositeOrientation],
-        dragPoint
+        moveHoveredFrame,
+        moveDirections[oppositeOrientation],
+        movePoint
       );
       decos = [deco];
     }
@@ -62,9 +62,9 @@ export class SplitAction {
     return decos;
   }
   canHandleRequest(e, state) {
-    const { draggingEdges } = state;
-    if (draggingEdges.length !== 1) return false;
-    this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? true : void 0);
+    const { movingEdges } = state;
+    if (movingEdges.length !== 1) return false;
+    this.setTextHints(state.isMoving === "edge" && !state.isMovingFromWindowEdge ? true : void 0);
     if (this.handleEvent(e, state)) {
       this.hooks.onStart?.();
       return true;
@@ -92,24 +92,24 @@ export class SplitAction {
   }
   calculateSplitRequest(state) {
     const {
-      dragHoveredFrame,
-      dragDirections,
-      draggingEdges,
-      dragPoint,
+      moveHoveredFrame,
+      moveDirections,
+      movingEdges,
+      movePoint,
       win
     } = state;
-    const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
-    const originalDragHoveredFrame = win.frames[dragHoveredFrame.id];
+    const oppositeOrientation = oppositeSide(getEdgeOrientation(movingEdges[0]));
+    const originalDragHoveredFrame = win.frames[moveHoveredFrame.id];
     const canSplit = getFrameSplitInfo(
       originalDragHoveredFrame,
-      dragDirections[oppositeOrientation],
-      dragPoint
+      moveDirections[oppositeOrientation],
+      movePoint
     );
-    this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? canSplit : void 0);
+    this.setTextHints(state.isMoving === "edge" && !state.isMovingFromWindowEdge ? canSplit : void 0);
     if (!(canSplit instanceof Error)) {
       this.state.allowed = true;
       this.state.res = canSplit;
-      this.state.lastPoint = dragPoint ? { ...dragPoint } : void 0;
+      this.state.lastPoint = movePoint ? { ...movePoint } : void 0;
       return true;
     } else {
       this.hooks.onError?.(canSplit);
@@ -118,56 +118,65 @@ export class SplitAction {
       return false;
     }
   }
-  onDragChange(_type, _e, state) {
-    const { dragHoveredFrame, dragDistance } = state;
-    if (dragDistance <= this.minDragDistance) {
-      return { updateEdges: false, shapes: [], showDragging: false };
+  onMoveChange(type, _e, state) {
+    const { moveHoveredFrame, moveDistance } = state;
+    if (moveDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [], showMoving: false };
     }
     let ok = false;
-    if (dragHoveredFrame) {
-      if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {
+    if (moveHoveredFrame) {
+      if (this.state.lastPoint?.x === state.movePoint?.x && this.state.lastPoint?.y === state.movePoint?.y && this.state.lastReturn) {
         return this.state.lastReturn;
       }
       ok = this.calculateSplitRequest(state);
     }
     const decos = this.getDecos(state);
     if (!ok) {
-      if (dragHoveredFrame && dragHoveredFrame.docked) {
+      if (moveHoveredFrame && moveHoveredFrame.docked) {
         const errorDeco = {
           type: "rect",
           data: {
-            x: dragHoveredFrame.x,
-            y: dragHoveredFrame.y,
-            width: dragHoveredFrame.width,
-            height: dragHoveredFrame.height
+            x: moveHoveredFrame.x,
+            y: moveHoveredFrame.y,
+            width: moveHoveredFrame.width,
+            height: moveHoveredFrame.height
           },
           attrs: { class: "deco-split-error bg-red-500/50" }
         };
-        this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showDragging: false };
+        this.state.lastReturn = {
+          updateEdges: true,
+          shapes: type === "end" ? [] : [errorDeco],
+          showMoving: false
+        };
         return this.state.lastReturn;
       }
     }
-    this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap((_) => _.shapes), showDragging: false };
+    this.state.lastReturn = {
+      updateEdges: false,
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
+      showMoving: false
+    };
     return this.state.lastReturn;
   }
-  onDragApply(state) {
-    if (this.state.res && state.dragHoveredFrame) {
+  onMoveApply(state) {
+    if (this.state.res && state.moveHoveredFrame) {
       const ok = this.calculateSplitRequest(state);
       if (ok) {
         if (this.debug) {
-          DragActionHandler.debugState(this.name, "before", state, this.state, this.debug);
+          ActionHandler.debugState(this.name, "before", state, this.state, this.debug);
         }
         applyFrameChanges(state.win, this.state.res);
         if (this.debug) {
-          DragActionHandler.debugState(this.name, "after", state, this.state, this.debug);
+          ActionHandler.debugState(this.name, "after", state, this.state, this.debug);
         }
       }
     }
-    this.reset();
     return true;
   }
-  cancel() {
+  onMoveEnded() {
     this.reset();
+  }
+  cancel() {
     this.hooks.onCancel?.();
   }
 }

package/dist/runtime/{drag → move}/createDefaultHandlers.d.ts

@@ -1,4 +1,4 @@
-import type { IDragAction } from "../types/index.js";
+import type { IAction } from "../types/index.js";
 /**
  * Creates the default drag actions (Split, Close, FrameDrag).
  */
@@ -6,4 +6,4 @@ export declare function createDefaultHandlers(config?: {
     debugSplit?: boolean;
     debugClose?: boolean;
     debugFrameDrag?: boolean;
-}): IDragAction[];
+}): IAction[];