@witchcraft/layout 0.1.2 → 0.2.0

package/dist/runtime/layout/createSplitDecoFromDrag.js

@@ -1,7 +1,7 @@
-import { createSplitDecoEdge } from "./createSplitDecoEdge.js";
+import { createSplitDecoShapes } from "./createSplitDecoShapes.js";
 import { dirToOrientation } from "../helpers/dirToOrientation.js";
-import { getMarginSize, getSnapPoint } from "../settings.js";
-export function createSplitDecoFromDrag(frames, frame, dragDirection, dragPoint, snapAmount = getSnapPoint(), minSize = getMarginSize()) {
+import { settings } from "../settings.js";
+export function createSplitDecoFromDrag(frames, frame, dragDirection, dragPoint, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled, classes = {}) {
   const orientation = dirToOrientation(dragDirection);
   const deco = {
     type: "split",
@@ -9,6 +9,6 @@ export function createSplitDecoFromDrag(frames, frame, dragDirection, dragPoint,
     position: dragPoint[orientation === "horizontal" ? "x" : "y"],
     direction: dragDirection
   };
-  deco.shapes = createSplitDecoEdge(frames, deco, snapAmount, minSize);
+  deco.shapes = createSplitDecoShapes(frames, deco, snapAmount, minSize, classes);
   return deco;
 }

package/dist/runtime/layout/createSplitDecoShapes.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutFrame, LayoutShape, Point, RawSplitDeco, Size } from "../types/index.js";
+export declare function createSplitDecoShapes(frames: Record<string, LayoutFrame>, deco: RawSplitDeco, snapAmount?: Point, minSize?: Size, classes?: {
+    /** @default "deco-split-edge bg-red-500" */
+    splitEdge?: string;
+    /** @default "deco-split-new-frame bg-blue-500/50" */
+    splitNewFrame?: string;
+}): LayoutShape[];

package/dist/runtime/layout/{createSplitDecoEdge.js → createSplitDecoShapes.js}

@@ -1,6 +1,6 @@
 import { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js";
-import { getMarginSize, getSnapPoint } from "../settings.js";
-export function createSplitDecoEdge(frames, deco, snapAmount = getSnapPoint(), minSize = getMarginSize()) {
+import { settings } from "../settings.js";
+export function createSplitDecoShapes(frames, deco, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled, classes = {}) {
   const frame = frames[deco.id];
   const { edge, position } = findSafeSplitEdgeAndPosition(frame, deco.direction, deco.position, snapAmount, minSize);
   const newFrame = { x: frame.x, y: frame.y, width: frame.width, height: frame.height };
@@ -20,5 +20,8 @@ export function createSplitDecoEdge(frames, deco, snapAmount = getSnapPoint(), m
       newFrame.height = position - frame.y;
       break;
   }
-  return { edge, newFrame };
+  return [
+    { type: "edge", data: edge, attrs: { class: classes.splitEdge ?? "deco-split-edge bg-red-500" } },
+    { type: "square", data: newFrame, attrs: { class: classes.splitNewFrame ?? "deco-split-new-frame bg-blue-500/50" } }
+  ];
 }

package/dist/runtime/layout/debugFrame.js

@@ -1,4 +1,5 @@
 export function debugFrame(frame) {
   const f = frame;
-  return `id: ${f.id.slice(0, 4)}, x:  ${f.x}, y: ${f.y}, w: ${f.width}, h: ${f.height}`;
+  return `id: ${f.id.slice(0, 4)}, x:  ${f.x}, y: ${f.y}, w: ${f.width}, h: ${f.height}
+docked: ${f.docked}, collapsed: ${f.collapsed}`;
 }

package/dist/runtime/layout/findSafeSplitEdge.js

@@ -1,8 +1,8 @@
 import { clampNumber, snapNumber } from "@alanscodelog/utils";
 import { dirToOrientation } from "../helpers/dirToOrientation.js";
 import { oppositeSide } from "../helpers/oppositeSide.js";
-import { getMarginSize, getSnapPoint } from "../settings.js";
-export function findSafeSplitEdgeAndPosition(frame, dragDirection, dragPointOrPosition, snapAmount = getSnapPoint(), minSize = getMarginSize()) {
+import { settings } from "../settings.js";
+export function findSafeSplitEdgeAndPosition(frame, dragDirection, dragPointOrPosition, snapAmount = settings.snapPointScaled, minSize = settings.minSizeScaled) {
   const orientation = dirToOrientation(dragDirection);
   const position = typeof dragPointOrPosition === "number" ? dragPointOrPosition : dragPointOrPosition[orientation === "horizontal" ? "x" : "y"];
   const coordKey = orientation === "vertical" ? "y" : "x";

package/dist/runtime/layout/frameCreate.js

@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from "uuid";
-import { getMaxInt } from "../settings.js";
+import { settings } from "../settings.js";
 export function frameCreate(opts = {}) {
-  const maxInt = getMaxInt();
+  const maxInt = settings.maxInt;
   return {
     width: maxInt,
     height: maxInt,

package/dist/runtime/layout/getCloseFrameInfo.d.ts

@@ -1,7 +1,9 @@
-import { type Direction, type Edge, type EdgeSide, LAYOUT_ERROR, type LayoutFrame, type Size } from "../types/index.js";
+import { type Direction, type Edge, type EdgeSide, LAYOUT_ERROR, type LayoutChange, type LayoutFrame, type Size } from "../types/index.js";
 import { KnownError } from "../utils/KnownError.js";
 /**
- * Returns the information necessary to close a frame or frames (if force: true).
+ * Returns a {@link LayoutChange} with the information necessary to close a frame or frames (if force: true).
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
  *
  * Can close by direction or by frame edge.
  *
@@ -60,6 +62,8 @@ import { KnownError } from "../utils/KnownError.js";
  *│C        │  │
  *└─────────┴──┘
  * ```
+ *
+ * Changes can be applied with {@link applyFrameChanges}.
  */
 export declare function getCloseFrameInfo<T extends "edge" | "dir">(frames: LayoutFrame[], visualEdges: Edge[], frame: LayoutFrame, 
 /**
@@ -67,7 +71,4 @@ export declare function getCloseFrameInfo<T extends "edge" | "dir">(frames: Layo
  *
  * For example, a frame that touches the right window edge can only be closed "to the right" in the horizontal direction or by it's left edge. Another way to think about it is the left edge is "collapsed" towards the "right".
  */
-closeDirOrSide: (T extends "dir" ? Direction : EdgeSide), closeBy?: T, force?: boolean, minSize?: Size): {
-    modifiedFrames: LayoutFrame[];
-    deletedFrames: LayoutFrame[];
-} | KnownError<typeof LAYOUT_ERROR.CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL | typeof LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE | typeof LAYOUT_ERROR.CANT_CLOSE_SINGLE_FRAME | typeof LAYOUT_ERROR.CANT_CLOSE_WITHOUT_FORCE>;
+closeDirOrSide: (T extends "dir" ? Direction : EdgeSide), closeBy?: T, force?: boolean, minSize?: Size): LayoutChange | KnownError<typeof LAYOUT_ERROR.CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL | typeof LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE | typeof LAYOUT_ERROR.CANT_CLOSE_SINGLE_FRAME | typeof LAYOUT_ERROR.CANT_CLOSE_WITHOUT_FORCE | typeof LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES>;

package/dist/runtime/layout/getCloseFrameInfo.js

@@ -8,10 +8,10 @@ import { dirToSide } from "../helpers/dirToSide.js";
 import { findFrameDraggableEdges } from "../helpers/findFrameDraggableEdges.js";
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
 import { oppositeSide } from "../helpers/oppositeSide.js";
-import { getMarginSize } from "../settings.js";
+import { settings } from "../settings.js";
 import { LAYOUT_ERROR } from "../types/index.js";
 import { KnownError } from "../utils/KnownError.js";
-export function getCloseFrameInfo(frames, visualEdges, frame, closeDirOrSide, closeBy = "dir", force = false, minSize = getMarginSize()) {
+export function getCloseFrameInfo(frames, visualEdges, frame, closeDirOrSide, closeBy = "dir", force = false, minSize = settings.minSizeScaled) {
   if (frames.length === 1) {
     return new KnownError(
       LAYOUT_ERROR.CANT_CLOSE_SINGLE_FRAME,
@@ -19,6 +19,13 @@ export function getCloseFrameInfo(frames, visualEdges, frame, closeDirOrSide, cl
       { frame }
     );
   }
+  if (!frame.docked && frames.filter((_) => !_.docked).length === 0) {
+    return new KnownError(
+      LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES,
+      `Can't close last undocked frame. One undocked frame must remain`,
+      { frame: frame.id }
+    );
+  }
   const side = closeBy === "dir" ? oppositeSide(dirToSide(closeDirOrSide)) : closeDirOrSide;
   const sideOpposite = oppositeSide(side);
   const draggableEdges = findFrameDraggableEdges(frame, visualEdges, !force, [side]);
@@ -99,5 +106,5 @@ export function getCloseFrameInfo(frames, visualEdges, frame, closeDirOrSide, cl
     clone[sizeKey] += moveAmount;
     modifiedFrames.push(clone);
   }
-  return { modifiedFrames, deletedFrames };
+  return { modified: modifiedFrames, created: [], deleted: deletedFrames };
 }

package/dist/runtime/layout/getDragZones.d.ts

@@ -0,0 +1,8 @@
+import type { DragState, DragZone } from "../types/index.js";
+/**
+ * Find the drag zone under the drag point.
+ */
+export declare function getDragZones(state: Pick<DragState, "dragPoint" | "dragHoveredFrame" | "frames" | "win">, { frameEdgePx, windowEdgePx }: {
+    frameEdgePx: number;
+    windowEdgePx: number;
+}): DragZone | undefined;

package/dist/runtime/layout/getDragZones.js

@@ -0,0 +1,32 @@
+import { getFrameDragZones } from "./getFrameDragZones.js";
+import { getWindowDragZones } from "./getWindowDragZones.js";
+import { isPointInRect } from "./isPointInRect.js";
+export function getDragZones(state, { frameEdgePx, windowEdgePx }) {
+  const { dragPoint, win } = state;
+  const frameId = state.dragHoveredFrame?.id;
+  if (!frameId) return;
+  const frame = state.frames[frameId];
+  if (!frame || !dragPoint) return;
+  const frameZones = getFrameDragZones(frame, frameEdgePx, win.pxWidth, win.pxHeight);
+  const windowZones = getWindowDragZones(win, windowEdgePx);
+  let matchedZone;
+  for (const zone of windowZones) {
+    if (isPointInRect(zone, dragPoint)) {
+      matchedZone = {
+        ...zone,
+        type: "window"
+      };
+      break;
+    }
+  }
+  if (!matchedZone) {
+    for (const zone of frameZones) {
+      if (isPointInRect(zone, dragPoint)) {
+        matchedZone = zone;
+        break;
+      }
+    }
+  }
+  if (!matchedZone) return void 0;
+  return matchedZone;
+}

package/dist/runtime/layout/getFillEmptySpaceInfo.d.ts

@@ -0,0 +1,65 @@
+import type { LayoutChange, LayoutFrame, LayoutWindow } from "../types/index.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+/**
+ * Finds a frame to fill the empty space left behind by a moved/empty frame (e.g. a dragged frame's original position).
+ *
+ * Returns a {@link LayoutChange} with the information necessary information..
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * Examples where * would be the empty space:
+ *
+ * Selection priority:
+ * 1. Prefer frames listed in preferredFrames (for dragging these are the dragged and target frames).
+ * ┌─────┬─────┐
+ * │A    │*    │
+ * ├─────┼─────┤
+ * │C    │B    │
+ * └─────┴─────┘
+ *
+ * Without preferredFrames set to B, A would be preferred as it shares the shortest edge with the empty space.
+ *
+ * ┌─────┬─────┐
+ * │A    │B    │
+ * ├─────┤     │
+ * │C    │     │
+ * └─────┴─────┘
+ *
+ * In a more complex example:
+ *
+ * ┌─────┬─────┬─────┐
+ * │A    │*    │C    │
+ * │     │     ├─────┤
+ * │     │     │D    │
+ * └─────┴─────┴─────┘
+ *
+ * If preferredFrames is C OR D (usually it's both but it might only be one, just take all other frames along that edge if they end at the empty frames end).
+ *
+ * ┌─────┬──────────┐
+ * │A    │C         │
+ * │     ├──────────┤
+ * │     │D         │
+ * └─────┴──────────┘
+ *
+ * And then in the following we would not be able to even expand C or D so we would not be able to satisfy the preference:
+ *
+ * ┌─────┬─────┬─────┐
+ * │A    │*    │C    │
+ * │     │     ├─────┤
+ * │     │     │     │
+ * │     ├─────┤D    │
+ * │     │B    │     │
+ * └─────┴─────┴─────┘
+ *
+ * 2. Prefer the shortest frame that shares an exact edge. Taking the previous example it would be B:
+ *
+ * ┌─────┬─────┬─────┐
+ * │A    │B    │C    │
+ * │     │     ├─────┤
+ * │     │     │     │
+ * │     │     │D    │
+ * │     │     │     │
+ * └─────┴─────┴─────┘
+ */
+export declare function getFillEmptySpaceInfo(win: LayoutWindow, emptyFrame: Omit<LayoutFrame, "id">, preferredFrames?: string[], skipFrames?: string[]): LayoutChange | KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES>;

package/dist/runtime/layout/getFillEmptySpaceInfo.js

@@ -0,0 +1,69 @@
+import { doEdgesOverlap } from "../helpers/doEdgesOverlap.js";
+import { frameToEdges } from "../helpers/frameToEdges.js";
+import { getEdgeLength } from "../helpers/getEdgeLength.js";
+import { oppositeSide } from "../helpers/oppositeSide.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function getFillEmptySpaceInfo(win, emptyFrame, preferredFrames = [], skipFrames = []) {
+  const emptyEdges = frameToEdges(emptyFrame);
+  const vacHeight = emptyFrame.height;
+  const vacWidth = emptyFrame.width;
+  const candidatesBySides = /* @__PURE__ */ new Map();
+  for (const frame of Object.values(win.frames)) {
+    if (skipFrames.includes(frame.id)) continue;
+    const frameEdges = frameToEdges(frame);
+    for (const frameSide of ["top", "bottom", "left", "right"]) {
+      const frameEdge = frameEdges[frameSide];
+      const emptyOppositeSide = oppositeSide(frameSide);
+      const emptyEdge = emptyEdges[emptyOppositeSide];
+      if (candidatesBySides.get(emptyOppositeSide)?.skip) continue;
+      const exact = frameEdge.startX === emptyEdge.startX && frameEdge.startY === emptyEdge.startY && frameEdge.endX === emptyEdge.endX && frameEdge.endY === emptyEdge.endY;
+      if (exact || doEdgesOverlap(frameEdge, emptyEdge, void 0, false)) {
+        if (!candidatesBySides.has(emptyOppositeSide)) {
+          candidatesBySides.set(emptyOppositeSide, { candidates: [], skip: false, totalLength: 0, hasExact: false, hasPreferred: false });
+        }
+        const group = candidatesBySides.get(emptyOppositeSide);
+        if (!exact) {
+          const isVertical = frameEdge.startX === emptyEdge.startX;
+          const extendsBeyond = isVertical ? frameEdge.startY < emptyEdge.startY || frameEdge.endY > emptyEdge.endY : frameEdge.startX < emptyEdge.startX || frameEdge.endX > emptyEdge.endX;
+          if (extendsBeyond) {
+            group.skip = true;
+          }
+        }
+        const len = getEdgeLength(frameEdge);
+        group.totalLength += len;
+        if (exact) group.hasExact = true;
+        if (preferredFrames.includes(frame.id)) group.hasPreferred = true;
+        group.candidates.push({ frame, frameSide, emptySide: emptyOppositeSide, edgeLength: len, exact });
+      }
+    }
+  }
+  const entries = [...candidatesBySides.values()];
+  const preferredSides = entries.filter((c) => c.hasPreferred && !c.skip).sort((a, b) => a.totalLength - b.totalLength);
+  const fallbackSides = entries.filter((c) => !c.hasPreferred && !c.skip).sort((a, b) => a.totalLength - b.totalLength);
+  if (preferredSides.length === 0 && fallbackSides.length === 0) return new KnownError(LAYOUT_ERROR.NO_FILL_CANDIDATES, `No fill candidates found.`, {});
+  const chosenCandidates = preferredSides.length > 0 ? preferredSides[0].candidates : fallbackSides[0].candidates;
+  const result = [];
+  for (const chosen of chosenCandidates) {
+    const { frame, frameSide } = chosen;
+    const updated = { ...frame };
+    switch (frameSide) {
+      case "top":
+        updated.y -= vacHeight;
+        updated.height += vacHeight;
+        break;
+      case "bottom":
+        updated.height += vacHeight;
+        break;
+      case "left":
+        updated.x -= vacWidth;
+        updated.width += vacWidth;
+        break;
+      case "right":
+        updated.width += vacWidth;
+        break;
+    }
+    result.push(updated);
+  }
+  return { modified: result, created: [], deleted: [] };
+}

package/dist/runtime/layout/getFrameCollapseInfo.d.ts

@@ -0,0 +1,13 @@
+import type { LayoutChange, LayoutWindow } from "../types/index.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+/**
+ * Returns a {@link LayoutChange} with the information necessary to collapse a docked frame.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ *
+ * Collapsing shrinks the frame to the configured collapse size and redistributes
+ * the freed space to neighboring frames. The pre-collapse size is stored in
+ * `collapsed` so it can be restored later.
+ */
+export declare function getFrameCollapseInfo(win: LayoutWindow, frameId: string): LayoutChange | KnownError<typeof LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED>;

package/dist/runtime/layout/getFrameCollapseInfo.js

@@ -0,0 +1,93 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
+import { walk } from "@alanscodelog/utils/walk";
+import { applyFrameChanges } from "./applyFrameChanges.js";
+import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js";
+import { oppositeSide } from "../helpers/oppositeSide.js";
+import { settings } from "../settings.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function getFrameCollapseInfo(win, frameId) {
+  win = walk(win, void 0, { save: true });
+  const frame = win.frames[frameId];
+  if (!frame) throw new Error(`Unknown frame ${frameId}`);
+  if (!frame.docked) throw new Error(`Frame ${frameId} is not docked.`);
+  if (typeof frame.collapsed === "number") throw new Error(`Frame ${frameId} is already collapsed.`);
+  const toExtract = [frame.id];
+  if (frame.docked === void 0) {
+    return new KnownError(
+      LAYOUT_ERROR.CANT_COLLAPSE_NOT_DOCKED,
+      `Frame ${frameId} is not docked and cannot be collapsed.`,
+      { frame }
+    );
+  }
+  const isVertical = frame.docked === "left" || frame.docked === "right";
+  const sizeKey = isVertical ? "width" : "height";
+  const posKey = isVertical ? "x" : "y";
+  const oppositePosKey = isVertical ? "y" : "x";
+  const oppositeSizeKey = isVertical ? "height" : "width";
+  const collapseSize = settings.collapseSizeScaled;
+  const currentSize = frame[sizeKey];
+  const collapseAmount = collapseSize[sizeKey];
+  const shrinkAmount = currentSize - collapseAmount;
+  const dockedSide = frame.docked;
+  const framesToFix = [];
+  const opposite = oppositeSide(dockedSide);
+  for (const other of Object.values(win.frames)) {
+    if (frame.id === other.id || !other.docked) continue;
+    if (other.docked === opposite) continue;
+    if (dockedSide === "left" || dockedSide === "top") {
+      if (other[posKey] !== 0) continue;
+      other[posKey] = frame[posKey] + frame[sizeKey];
+      other[sizeKey] -= frame[sizeKey];
+      framesToFix.push({
+        id: other.id,
+        posKey,
+        sizeKey,
+        type: "start"
+      });
+    } else {
+      if (other[posKey] + other[sizeKey] !== settings.maxInt) continue;
+      other[sizeKey] -= frame[sizeKey];
+      framesToFix.push({
+        id: other.id,
+        posKey,
+        sizeKey,
+        type: "end"
+      });
+    }
+  }
+  const otherFrameIds = Object.keys(win.frames).filter((id) => id !== frameId);
+  const redistributeSide = oppositeSide(dockedSide);
+  const changes = getFramesRedistributeInfo(win, redistributeSide, otherFrameIds, -shrinkAmount, true);
+  if (changes instanceof KnownError) {
+    if (changes.code === LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS || LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE) {
+      changes.message = `This error should never happen, please file a bug report: ${changes.message}`;
+      throw changes;
+    }
+    return changes;
+  }
+  applyFrameChanges(win, changes);
+  pushIfNotIn(toExtract, changes.modified.map((_) => _.id));
+  for (const fix of framesToFix) {
+    const other = win.frames[fix.id];
+    if (fix.type === "start") {
+      const sizeDiff = other[fix.posKey];
+      other[fix.posKey] = 0;
+      other[fix.sizeKey] += sizeDiff;
+    } else {
+      const sizeDiff = settings.maxInt - (other[fix.posKey] + other[fix.sizeKey]);
+      other[fix.sizeKey] += sizeDiff;
+    }
+  }
+  pushIfNotIn(toExtract, framesToFix.map((_) => _.id));
+  if (frame.docked === "right" || frame.docked === "bottom") {
+    frame[posKey] = frame[posKey] + (frame[sizeKey] - collapseSize[sizeKey]);
+  }
+  frame[sizeKey] = collapseSize[sizeKey];
+  frame.collapsed = currentSize;
+  if (collapseSize[sizeKey] === 0) {
+    frame[oppositePosKey] = 0;
+    frame[oppositeSizeKey] = settings.maxInt;
+  }
+  return { modified: toExtract.map((_) => win.frames[_]), created: [], deleted: [] };
+}

package/dist/runtime/layout/getFrameDockInfo.d.ts

@@ -0,0 +1,9 @@
+import type { EdgeSide, LayoutChange, LayoutWindow } from "../types/index.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+/**
+ * Returns a {@link LayoutChange} with the information necessary to dock a frame to a  window edge.
+ *
+ * Changes can be applied to a window with {@link applyFrameChanges}.
+ */
+export declare function getFrameDockInfo(win: LayoutWindow, frameId: string, side: EdgeSide, maxPerpendicularLength?: number): LayoutChange | KnownError<typeof LAYOUT_ERROR.REDISTRIBUTE_OUT_OF_BOUNDS> | KnownError<typeof LAYOUT_ERROR.NO_SPACE_TO_REDISTRIBUTE> | KnownError<typeof LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES> | KnownError<typeof LAYOUT_ERROR.FRAME_ALREADY_DOCKED_ON_SIDE> | KnownError<typeof LAYOUT_ERROR.CANT_UNDOCK_COLLAPSED_FRAME> | KnownError<typeof LAYOUT_ERROR.NO_FILL_CANDIDATES>;

package/dist/runtime/layout/getFrameDockInfo.js

@@ -0,0 +1,82 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
+import { walk } from "@alanscodelog/utils/walk";
+import { applyFrameChanges } from "./applyFrameChanges.js";
+import { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js";
+import { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js";
+import { getFrameUndockInfo } from "./getFrameUndockInfo.js";
+import { cloneFrame } from "../helpers/cloneFrame.js";
+import { getDockBoundaries } from "../helpers/getDockBoundaries.js";
+import { oppositeSide } from "../helpers/oppositeSide.js";
+import { settings } from "../settings.js";
+import { LAYOUT_ERROR } from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function getFrameDockInfo(win, frameId, side, maxPerpendicularLength) {
+  win = walk(win, void 0, { save: true });
+  const frame = win.frames[frameId];
+  if (!frame) {
+    throw new Error(`Unknown frame ${frameId}`);
+  }
+  if (frame.docked === side) throw new Error(`Frame ${frameId} is already docked on side ${side}.`);
+  const alreadyDockedOnSide = Object.values(win.frames).find((f) => f.docked === side);
+  if (alreadyDockedOnSide) {
+    return new KnownError(LAYOUT_ERROR.FRAME_ALREADY_DOCKED_ON_SIDE, `Frame ${alreadyDockedOnSide.id} already docked on side ${side}.`, { id: alreadyDockedOnSide.id, side });
+  }
+  if (frame.docked && frame.docked !== side) {
+    const undockInfo = getFrameUndockInfo(win, frameId);
+    if (undockInfo instanceof Error) return undockInfo;
+    applyFrameChanges(win, undockInfo);
+  }
+  const isHorizontal = side === "left" || side === "right";
+  const perpendicular = isHorizontal ? "width" : "height";
+  const oldFrame = cloneFrame(frame);
+  const otherFrameIds = Object.keys(win.frames).filter((_) => _ !== frameId);
+  const nonDockedFrameIds = otherFrameIds.filter((id) => !win.frames[id].docked);
+  if (nonDockedFrameIds.length === 0) {
+    return new KnownError(LAYOUT_ERROR.CANT_LEAVE_NO_UNDOCKED_FRAMES, `Can't dock frame ${frameId} because there are no other undocked frames.`, { frameId });
+  }
+  const effectiveMaxPerpendicular = maxPerpendicularLength ?? settings.maxPerpendicularLengthScaled.width;
+  const perpendicularLength = otherFrameIds.length > 0 ? Math.min(frame[perpendicular], effectiveMaxPerpendicular) : frame[perpendicular];
+  frame.docked = side;
+  frame.collapsed = false;
+  const toExtract = [frame.id];
+  const changes = getFillEmptySpaceInfo(win, oldFrame, [], [frameId]);
+  if (changes instanceof Error) return changes;
+  applyFrameChanges(win, changes);
+  pushIfNotIn(toExtract, changes.modified.map((_) => _.id));
+  const sideToPushTowards = oppositeSide(side);
+  const redistributeChanges = getFramesRedistributeInfo(win, sideToPushTowards, nonDockedFrameIds, perpendicularLength);
+  if (redistributeChanges instanceof KnownError) {
+    return redistributeChanges;
+  }
+  applyFrameChanges(win, redistributeChanges);
+  pushIfNotIn(toExtract, redistributeChanges.modified.map((_) => _.id));
+  const { minX, maxX, minY, maxY } = getDockBoundaries(win);
+  switch (side) {
+    case "left":
+      frame.x = 0;
+      frame.y = minY;
+      frame.width = perpendicularLength;
+      frame.height = maxY - minY;
+      break;
+    case "right":
+      frame.x = settings.maxInt - perpendicularLength;
+      frame.y = minY;
+      frame.width = perpendicularLength;
+      frame.height = maxY - minY;
+      break;
+    case "top":
+      frame.x = minX;
+      frame.y = 0;
+      frame.width = maxX - minX;
+      frame.height = perpendicularLength;
+      break;
+    case "bottom":
+      frame.x = minX;
+      frame.y = settings.maxInt - perpendicularLength;
+      frame.width = maxX - minX;
+      frame.height = perpendicularLength;
+      break;
+  }
+  const res = toExtract.map((_) => win.frames[_]);
+  return { modified: res, created: [], deleted: [] };
+}

package/dist/runtime/layout/getFrameDragZones.d.ts

@@ -0,0 +1,16 @@
+import type { DragZone } from "../types/index.js";
+/**
+ * Returns frame drag zones (in **unrounded** scaled coordinate space).
+ *
+ * If the frame is too narrow for both left+right zones, only the center zone is returned.
+ *
+ * Same logic applies to top/bottom for very short frames.
+ *
+ * Unrounded because these are for display purposes only.
+ */
+export declare function getFrameDragZones(frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, thresholdPx: number, windowPxWidth: number, windowPxHeight: number): DragZone[];

package/dist/runtime/layout/getFrameDragZones.js

@@ -0,0 +1,74 @@
+import { settings } from "../settings.js";
+export function getFrameDragZones(frame, thresholdPx, windowPxWidth, windowPxHeight) {
+  const thX = thresholdPx / windowPxWidth * settings.maxInt;
+  const thY = thresholdPx / windowPxHeight * settings.maxInt;
+  const pxWidth = frame.width / settings.maxInt * windowPxWidth;
+  const pxHeight = frame.height / settings.maxInt * windowPxHeight;
+  if (frame.width <= 3 * thX || frame.height <= 3 * thY) {
+    return [{
+      type: "frame",
+      side: "center",
+      // this is more like center/full
+      x: frame.x,
+      y: frame.y,
+      width: frame.width,
+      height: frame.height,
+      pxWidth,
+      pxHeight
+    }];
+  }
+  const zones = [];
+  zones.push({
+    type: "frame",
+    side: "top",
+    x: frame.x,
+    y: frame.y,
+    width: frame.width,
+    height: thY,
+    pxWidth,
+    pxHeight: thresholdPx
+  });
+  zones.push({
+    type: "frame",
+    side: "bottom",
+    x: frame.x,
+    y: frame.y + frame.height - thY,
+    width: frame.width,
+    height: thY,
+    pxWidth,
+    pxHeight: thresholdPx
+  });
+  zones.push({
+    type: "frame",
+    side: "left",
+    x: frame.x,
+    y: frame.y,
+    width: thX,
+    height: frame.height,
+    pxWidth: thresholdPx,
+    pxHeight
+  });
+  zones.push({
+    type: "frame",
+    side: "right",
+    x: frame.x + frame.width - thX,
+    y: frame.y,
+    width: thX,
+    height: frame.height,
+    pxWidth: thresholdPx,
+    pxHeight
+  });
+  const cw = frame.width - 2 * thX;
+  const ch = frame.height - 2 * thY;
+  zones.push({
+    type: "frame",
+    side: "center",
+    x: frame.x + thX,
+    y: frame.y + thY,
+    width: cw,
+    height: ch,
+    pxWidth: cw / settings.maxInt * windowPxWidth,
+    pxHeight: ch / settings.maxInt * windowPxHeight
+  });
+  return zones;
+}