@witchcraft/layout 0.1.3 → 0.2.0

package/dist/runtime/drag/DragActionHandler.js

@@ -1,12 +1,20 @@
+import { get } from "@alanscodelog/utils";
 export class DragActionHandler {
   activeAction;
   actions;
   eventCanceller = void 0;
   boundCancel;
-  defaultOnDragChange;
+  defaultOnDragChange = (type, _e, state, _forceRecalculateEdges, _cancel) => ({
+    updateEdges: type === "move" ? !state.isDraggingFromWindowEdge : true,
+    shapes: []
+  });
   hooks;
-  constructor(defaultOnDragChange, actions, hooks = {}) {
-    this.defaultOnDragChange = defaultOnDragChange;
+  /** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
+  shapes = [];
+  /** All hint/error text from all actions, updated on every onDragChange. If using vue you can set this to a reactive object for reactivity. */
+  textHints = { actions: [], errors: [] };
+  constructor(actions, hooks = {}, defaultOnDragChange) {
+    if (defaultOnDragChange) this.defaultOnDragChange = defaultOnDragChange;
     this.hooks = hooks;
     this.actions = {};
     for (const action of actions) {
@@ -21,7 +29,7 @@ export class DragActionHandler {
     let cancelled = false;
     this.hooks.onEvent?.(e, () => {
       cancelled = true;
-      this.cancel();
+      this.cancel(e, state);
     });
     if (cancelled) return;
     let found = false;
@@ -38,7 +46,7 @@ export class DragActionHandler {
     }
     if (oldActiveAction !== this.activeAction) {
       if (oldActiveAction) {
-        this.actions[oldActiveAction].cancel();
+        this.actions[oldActiveAction].cancel(e, state);
       }
       this.hooks.onRequestChange?.(this.activeAction);
     }
@@ -51,17 +59,30 @@ export class DragActionHandler {
   onDragChange(type, e, state, forceRecalculateEdges, cancel) {
     if (type === "start") {
       this.eventCanceller = cancel;
-      state.isDragging = true;
       this.eventHandler(e, state, forceRecalculateEdges);
     }
     if (type === "end") {
-      state.isDragging = false;
       this.activeAction = void 0;
     }
     if (this.activeAction) {
-      return this.actions[this.activeAction].onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
+      const res2 = this.actions[this.activeAction].onDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
+      this.shapes.splice(0, this.shapes.length, ...res2.shapes);
+      this.setTextHints(type);
+      return res2;
+    }
+    this.setTextHints(type);
+    const res = this.defaultOnDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
+    this.shapes.splice(0, this.shapes.length, ...res.shapes);
+    return res;
+  }
+  setTextHints(type) {
+    this.textHints.actions = [];
+    this.textHints.errors = [];
+    for (const action of Object.values(this.actions)) {
+      const res = action.getTextHints?.(type);
+      this.textHints.actions.push(...res?.actions ?? []);
+      this.textHints.errors.push(...res?.errors ?? []);
     }
-    return this.defaultOnDragChange(type, e, state, forceRecalculateEdges, this.boundCancel);
   }
   onDragApply(state, forceRecalculateEdges) {
     if (this.activeAction) {
@@ -72,12 +93,26 @@ export class DragActionHandler {
     this.hooks.onEnd?.({ cancelled: false, applied: false });
     return true;
   }
-  cancel() {
+  cancel(e, state) {
     if (this.activeAction) {
-      this.actions[this.activeAction].cancel();
+      this.actions[this.activeAction].cancel(e, state);
     }
     this.activeAction = void 0;
-    this.eventCanceller?.();
+    this.eventCanceller?.(e, state);
     this.hooks.onEnd?.({ cancelled: true, applied: false });
   }
+  static debugState(pluginName, type, state, pluginState = {}, key) {
+    let res = { state, pluginState };
+    let pickedRes = {};
+    if (typeof key === "string" && key !== "") {
+      pickedRes = {};
+      const paths = key.split(",").map((_) => _.trim()).filter((_) => _);
+      for (const path of paths) {
+        pickedRes[path] = get(res, path.split("."));
+      }
+      res = pickedRes;
+    }
+    const resString = JSON.stringify(res, null, 2);
+    console.log(`[Drag Action Debug - ${pluginName}]:`, type, resString);
+  }
 }

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

@@ -0,0 +1,45 @@
+import type { ActionDragChangeResult, DragState, DragZone, FrameDragDeco, IDragAction, LayoutChange } from "../types/index.js";
+import type { KnownError } from "../utils/KnownError.js";
+export declare class FrameDragAction implements IDragAction {
+    name: "frameDrag";
+    state: {
+        lastReturn?: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError;
+    };
+    debug: boolean | string;
+    textHints: {
+        actions: string[];
+        errors: string[];
+    };
+    handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
+    dragHints: {
+        actions: {
+            split: string;
+            swap: string;
+            rearrange: string;
+            dock: string;
+        };
+        transformError: (e: KnownError) => string;
+    };
+    modifyDecos: (shapes: FrameDragDeco[]) => void;
+    hooks: {
+        onStart?: () => void;
+        onCancel?: () => void;
+        onError?: (e: KnownError) => void;
+    };
+    constructor(handleEvent?: FrameDragAction["handleEvent"], 
+    /** Modify the created decos before they are rendered. */
+    modifyDecos?: FrameDragAction["modifyDecos"], hooks?: FrameDragAction["hooks"], config?: {
+        debug?: boolean | string;
+    });
+    reset(): void;
+    setTextHints(result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): void;
+    getTextHints(type: "start" | "move" | "end"): {
+        actions: string[];
+        errors: string[];
+    };
+    getDecos(matchedZone: DragZone | undefined, state: DragState, result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): FrameDragDeco[];
+    canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean;
+    onDragChange<T extends "start" | "move" | "end">(_type: T, _e: PointerEvent | undefined, state: DragState): ActionDragChangeResult;
+    onDragApply(state: DragState): boolean;
+    cancel(): void;
+}

package/dist/runtime/drag/FrameDragAction.js

@@ -0,0 +1,143 @@
+import { DragActionHandler } from "./DragActionHandler.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 { settings } from "../settings.js";
+export class FrameDragAction {
+  name = "frameDrag";
+  state = {
+    lastReturn: void 0
+  };
+  debug = false;
+  textHints = { actions: [], errors: [] };
+  handleEvent = (_e, state) => state.isDragging === "frame";
+  dragHints = {
+    actions: {
+      split: "Drop to Split the current frame.",
+      swap: "Drop to Swap the frames.",
+      rearrange: "Drop to Move the frame.",
+      dock: "Drop to Dock the frame."
+    },
+    transformError: (e) => e.message
+  };
+  modifyDecos = () => {
+  };
+  hooks = {};
+  constructor(handleEvent, modifyDecos, hooks = {}, config) {
+    if (handleEvent !== void 0) this.handleEvent = handleEvent;
+    if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
+    this.hooks = hooks;
+    if (config?.debug) this.debug = true;
+    this.reset();
+  }
+  reset() {
+    this.state = {
+      lastReturn: void 0
+    };
+  }
+  setTextHints(result) {
+    if (result === void 0 || !result.info) {
+      this.textHints.actions = [];
+      this.textHints.errors = [];
+    } else if (result instanceof Error) {
+      this.textHints.actions = [];
+      this.textHints.errors = [this.dragHints.transformError(result)];
+    } else {
+      const text = this.dragHints.actions[result.info];
+      this.textHints.actions = [text];
+      this.textHints.errors = [];
+    }
+  }
+  getTextHints(type) {
+    if (type === "end") {
+      this.setTextHints(void 0);
+    }
+    return this.textHints;
+  }
+  getDecos(matchedZone, state, result) {
+    let decos = [];
+    const isError = result instanceof Error;
+    const frame = state.dragHoveredFrame;
+    if (!matchedZone || !frame) {
+      decos = [];
+      this.modifyDecos(decos);
+      return decos;
+    }
+    const clipPath = createZoneSideClipPath(matchedZone, settings.zoneSizes);
+    const classes = isError ? `deco-frame-drag deco-frame-drag-error deco-frame-drag-${matchedZone.type}-${matchedZone.side} bg-red-500/50` : `deco-frame-drag deco-frame-drag-${matchedZone.type}-${matchedZone.side} bg-blue-500/50`;
+    decos = [{
+      id: frame.id,
+      type: "drop",
+      position: matchedZone.side ?? "center",
+      shapes: [
+        {
+          type: "square",
+          data: matchedZone,
+          attrs: clipPath ? { class: classes, style: `clip-path:${clipPath}` } : { class: classes }
+        }
+      ]
+    }];
+    this.modifyDecos(decos);
+    return decos;
+  }
+  canHandleRequest(e, state) {
+    const res = this.handleEvent(e, state);
+    this.setTextHints(void 0);
+    if (res) {
+      this.hooks.onStart?.();
+      return true;
+    }
+    this.reset();
+    return false;
+  }
+  onDragChange(_type, _e, state) {
+    const { win, draggingFrameId, dragHoveredFrame } = state;
+    const matchedZone = getDragZones(state, settings.zoneSizes);
+    if (!matchedZone) {
+      this.state.lastReturn = void 0;
+    } else if (dragHoveredFrame && matchedZone.type === "frame" && matchedZone.side) {
+      if (matchedZone.side !== "center") {
+        this.state.lastReturn = getFrameRearrangeInfo(win, draggingFrameId, dragHoveredFrame.id, matchedZone.side);
+      } else {
+        this.state.lastReturn = getFrameSwapInfo(win, draggingFrameId, dragHoveredFrame.id);
+        if (!(this.state.lastReturn instanceof Error)) this.state.lastReturn.info = "swap";
+      }
+    } else if (matchedZone.type === "window") {
+      this.state.lastReturn = getFrameDockInfo(win, draggingFrameId, 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),
+      updateEdges: false,
+      showDragging: false
+    };
+  }
+  onDragApply(state) {
+    const result = this.state.lastReturn;
+    if (!result || !state.dragHoveredFrame || !state.draggingFrameId) {
+      this.reset();
+      return true;
+    }
+    if (result instanceof Error) {
+      this.hooks.onError?.(result);
+    } else {
+      if (this.debug) {
+        DragActionHandler.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);
+      }
+    }
+    this.reset();
+    return true;
+  }
+  cancel() {
+    this.reset();
+  }
+}

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

@@ -1,32 +1,53 @@
-import type { DragState, IDragAction } from "./types.js";
+import type { ActionDragChangeResult, DragState, IDragAction } from "./types.js";
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
-import type { SplitDeco } from "../types/index.js";
+import type { Point, SplitDeco } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>;
 export declare class SplitAction implements IDragAction {
     name: "split";
     state: {
-        allowed: false;
-        res: SplitInfo | undefined;
-        cacheKey: string | undefined;
-    } | {
         allowed: true;
         res: SplitInfo;
-        cacheKey: string | undefined;
+        lastPoint: Point | undefined;
+        lastReturn: undefined;
+    } | {
+        allowed: false;
+        res: SplitInfo | undefined;
+        lastPoint: Point | undefined;
+        lastReturn: ActionDragChangeResult | undefined;
+    };
+    debug: boolean | string;
+    textHints: {
+        actions: string[];
+        errors: string[];
+    };
+    splitHints: {
+        action: string;
+        transformError: (e: KnownError) => string;
     };
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
-    updateSplitDecos: (decos: SplitDeco[]) => void;
+    modifyDecos: (shapes: SplitDeco[]) => void;
     hooks: {
         onStart?: () => void;
         onCancel?: () => void;
         onError?: (e: KnownError) => void;
     };
-    constructor(handleEvent: SplitAction["handleEvent"], updateSplitDecos: SplitAction["updateSplitDecos"], hooks?: SplitAction["hooks"]);
+    constructor(handleEvent?: SplitAction["handleEvent"], 
+    /** Modify the created decos before they are rendered. */
+    modifyDecos?: SplitAction["modifyDecos"], hooks?: SplitAction["hooks"], config?: {
+        debug?: boolean | string;
+        splitHints?: Partial<SplitAction["splitHints"]>;
+    });
     reset(): void;
-    updateDecos(state: DragState): void;
+    getDecos(state: DragState): SplitDeco[];
     canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): 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): true;
+    onDragChange(_type: "start" | "end" | "move", _e: PointerEvent | undefined, state: DragState): ActionDragChangeResult;
     onDragApply(state: DragState): boolean;
     cancel(): void;
 }

package/dist/runtime/drag/SplitAction.js

@@ -1,30 +1,43 @@
+import { DragActionHandler } from "./DragActionHandler.js";
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
 import { oppositeSide } from "../helpers/oppositeSide.js";
+import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 import { createSplitDecoFromDrag } from "../layout/createSplitDecoFromDrag.js";
-import { frameSplit } from "../layout/frameSplit.js";
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
 export class SplitAction {
   name = "split";
   state = {};
   // this is initialized by `this.reset()`
-  handleEvent;
-  updateSplitDecos;
+  debug = false;
+  textHints = { actions: [], errors: [] };
+  splitHints = {
+    action: "Hold Alt to Split",
+    transformError: (e) => e.message
+  };
+  handleEvent = (e, state) => e.altKey || state.isDraggingFromWindowEdge;
+  modifyDecos = () => {
+  };
   hooks;
-  constructor(handleEvent, updateSplitDecos, hooks = {}) {
-    this.handleEvent = handleEvent;
-    this.updateSplitDecos = updateSplitDecos;
+  constructor(handleEvent, modifyDecos, hooks = {}, config) {
+    if (handleEvent !== void 0) this.handleEvent = handleEvent;
+    if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
     this.hooks = hooks;
     this.reset();
+    if (config?.debug) this.debug = true;
+    if (config?.splitHints?.action) this.splitHints.action = config.splitHints.action;
+    if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError;
   }
   reset() {
     this.state = {
       allowed: false,
       res: void 0,
-      cacheKey: void 0
+      lastPoint: void 0,
+      lastReturn: void 0
     };
-    this.updateSplitDecos([]);
+    this.modifyDecos([]);
   }
-  updateDecos(state) {
+  getDecos(state) {
+    let decos = [];
     const {
       win,
       isDragging,
@@ -41,14 +54,15 @@ export class SplitAction {
         dragDirections[oppositeOrientation],
         dragPoint
       );
-      this.updateSplitDecos([deco]);
-    } else {
-      this.updateSplitDecos([]);
+      decos = [deco];
     }
+    this.modifyDecos(decos);
+    return decos;
   }
   canHandleRequest(e, state) {
     const { draggingEdges } = state;
     if (draggingEdges.length !== 1) return false;
+    this.setTextHints(state.isDragging === "edge" ? true : void 0);
     if (this.handleEvent(e, state)) {
       this.hooks.onStart?.();
       return true;
@@ -56,26 +70,49 @@ export class SplitAction {
     this.reset();
     return false;
   }
+  setTextHints(result) {
+    if (result === void 0) {
+      this.textHints.actions = [];
+      this.textHints.errors = [];
+    } else if (result instanceof Error) {
+      this.textHints.actions = [];
+      this.textHints.errors = [this.splitHints.transformError(result)];
+    } else {
+      this.textHints.actions = [this.splitHints.action];
+      this.textHints.errors = [];
+    }
+  }
+  getTextHints(type) {
+    if (type === "end") {
+      this.setTextHints(void 0);
+    }
+    return this.textHints;
+  }
   calculateSplitRequest(state) {
     const {
       dragHoveredFrame,
       dragDirections,
       draggingEdges,
-      dragPoint
+      dragPoint,
+      win
     } = state;
     const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
+    const originalDragHoveredFrame = win.frames[dragHoveredFrame.id];
     const canSplit = getFrameSplitInfo(
-      dragHoveredFrame,
+      originalDragHoveredFrame,
       dragDirections[oppositeOrientation],
       dragPoint
     );
+    this.setTextHints(canSplit);
     if (!(canSplit instanceof Error)) {
       this.state.allowed = true;
       this.state.res = canSplit;
-      this.state.cacheKey = dragHoveredFrame?.id;
+      this.state.lastPoint = dragPoint ? { ...dragPoint } : void 0;
       return true;
     } else {
       this.hooks.onError?.(canSplit);
+      this.state.lastPoint = void 0;
+      this.state.allowed = false;
       return false;
     }
   }
@@ -83,22 +120,43 @@ export class SplitAction {
     const { dragHoveredFrame } = state;
     let ok = false;
     if (dragHoveredFrame) {
-      if (this.state.cacheKey === dragHoveredFrame.id) {
-        this.updateDecos(state);
-        return true;
+      if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {
+        return this.state.lastReturn;
       }
       ok = this.calculateSplitRequest(state);
     }
-    this.updateDecos(state);
+    const decos = this.getDecos(state);
     if (!ok) {
-      this.state.allowed = false;
+      if (dragHoveredFrame && dragHoveredFrame.docked) {
+        const errorDeco = {
+          type: "square",
+          data: {
+            x: dragHoveredFrame.x,
+            y: dragHoveredFrame.y,
+            width: dragHoveredFrame.width,
+            height: dragHoveredFrame.height
+          },
+          attrs: { class: "deco-split-error bg-red-500/50" }
+        };
+        this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showDragging: false };
+        return this.state.lastReturn;
+      }
     }
-    return true;
+    this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap((_) => _.shapes), showDragging: false };
+    return this.state.lastReturn;
   }
   onDragApply(state) {
-    if (this.state.res) {
-      this.calculateSplitRequest(state);
-      frameSplit(state.win, this.state.res);
+    if (this.state.res && state.dragHoveredFrame) {
+      const ok = this.calculateSplitRequest(state);
+      if (ok) {
+        if (this.debug) {
+          DragActionHandler.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);
+        }
+      }
     }
     this.reset();
     return true;

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

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

package/dist/runtime/drag/createDefaultHandlers.js

@@ -0,0 +1,10 @@
+import { CloseAction } from "./CloseAction.js";
+import { FrameDragAction } from "./FrameDragAction.js";
+import { SplitAction } from "./SplitAction.js";
+export function createDefaultHandlers(config = {}) {
+  return [
+    new SplitAction(void 0, void 0, void 0, { debug: config.debugSplit }),
+    new CloseAction(void 0, void 0, void 0, { debug: config.debugClose }),
+    new FrameDragAction(void 0, void 0, void 0, { debug: config.debugFrameDrag })
+  ];
+}

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

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

package/dist/runtime/drag/defaultDragActions.js

@@ -0,0 +1,10 @@
+import { CloseAction } from "./CloseAction.js";
+import { FrameDragAction } from "./FrameDragAction.js";
+import { SplitAction } from "./SplitAction.js";
+export function createDefaultHandlers(config) {
+  return [
+    new SplitAction(void 0, void 0, void 0, { debug: config.debugSplit }),
+    new CloseAction(void 0, void 0, void 0, { debug: config.debugClose }),
+    new FrameDragAction(void 0, void 0, void 0, { debug: config.debugFrameDrag })
+  ];
+}