@witchcraft/layout 1.0.0

package/dist/runtime/helpers/containsEdge.js

@@ -0,0 +1,13 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { isEdgeParallel } from "./isEdgeParallel.js";
+export function containsEdge(edge, limitEdge, dir) {
+  dir ??= getEdgeOrientation(edge);
+  if (!isEdgeParallel(edge, limitEdge)) return false;
+  if (dir === "horizontal") {
+    if (limitEdge.startY !== edge.startY) return false;
+    return limitEdge.startX <= edge.startX && edge.endX <= limitEdge.endX;
+  } else {
+    if (limitEdge.startX !== edge.startX) return false;
+    return limitEdge.startY <= edge.startY && edge.endY <= limitEdge.endY;
+  }
+}

package/dist/runtime/helpers/convertLayoutWindowToWorkspace.js

@@ -0,0 +1,10 @@
+import { cloneDeep } from "es-toolkit";
+export function convertLayoutWindowToWorkspace(layout) {
+  const l = cloneDeep(layout);
+  delete l.id;
+  delete l.pxHeight;
+  delete l.pxWidth;
+  delete l.pxX;
+  delete l.pxY;
+  return l;
+}

package/dist/runtime/helpers/copySize.js

@@ -0,0 +1,5 @@
+export function copySize(from, to) {
+  to.width = from.width;
+  to.height = from.height;
+  return from;
+}

package/dist/runtime/helpers/createEdge.js

@@ -0,0 +1,13 @@
+export function createEdge(edge) {
+  if (edge.startX > edge.endX) {
+    const end = edge.endX;
+    edge.endX = edge.startX;
+    edge.startX = end;
+  }
+  if (edge.startY > edge.endY) {
+    const end = edge.endY;
+    edge.endY = edge.startY;
+    edge.startY = end;
+  }
+  return edge;
+}

package/dist/runtime/helpers/dirToOrientation.js

@@ -0,0 +1,10 @@
+export function dirToOrientation(dir) {
+  switch (dir) {
+    case "left":
+    case "right":
+      return "horizontal";
+    case "up":
+    case "down":
+      return "vertical";
+  }
+}

package/dist/runtime/helpers/dirToSide.js

@@ -0,0 +1,5 @@
+export function dirToSide(dir) {
+  if (dir === "up") return "top";
+  if (dir === "down") return "bottom";
+  return dir;
+}

package/dist/runtime/helpers/doEdgesOverlap.js

@@ -0,0 +1,22 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { inRange } from "./inRange.js";
+import { isEdgeParallel } from "./isEdgeParallel.js";
+export function doEdgesOverlap(edgeA, edgeB, dir) {
+  dir ??= getEdgeOrientation(edgeA);
+  if (!isEdgeParallel(edgeA, edgeB)) return false;
+  if (dir === "horizontal") {
+    if (edgeA.startY !== edgeB.startY) return false;
+    const leftMost = edgeA.startX <= edgeB.startX ? edgeA : edgeB;
+    const rightMost = edgeB === leftMost ? edgeA : edgeB;
+    const startOverlaps = inRange(leftMost.endX, rightMost.startX, rightMost.endX);
+    const endOverlaps = inRange(rightMost.startX, leftMost.startX, leftMost.endX);
+    return startOverlaps || endOverlaps;
+  } else {
+    if (edgeA.startX !== edgeB.startX) return false;
+    const topMost = edgeA.startY <= edgeB.startY ? edgeA : edgeB;
+    const bottomMost = edgeB === topMost ? edgeA : edgeB;
+    const startOverlaps = inRange(topMost.endY, bottomMost.startY, bottomMost.endY);
+    const endOverlaps = inRange(bottomMost.startY, topMost.startY, topMost.endY);
+    return startOverlaps || endOverlaps;
+  }
+}

package/dist/runtime/helpers/doesEdgeContinueEdge.js

@@ -0,0 +1,17 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { isEdgeParallel } from "./isEdgeParallel.js";
+export function doesEdgeContinueEdge(edgeA, edgeB, dir) {
+  dir ??= getEdgeOrientation(edgeA);
+  if (!isEdgeParallel(edgeA, edgeB)) return false;
+  if (dir === "horizontal") {
+    if (edgeA.startY !== edgeB.startY) return false;
+    const leftMost = edgeA.startX <= edgeB.startX ? edgeA : edgeB;
+    const rightMost = edgeB === leftMost ? edgeA : edgeB;
+    return leftMost.endX === rightMost.startX;
+  } else {
+    if (edgeA.startX !== edgeB.startX) return false;
+    const topMost = edgeA.startY <= edgeB.startY ? edgeA : edgeB;
+    const bottomMost = edgeB === topMost ? edgeA : edgeB;
+    return topMost.endY === bottomMost.startY;
+  }
+}

package/dist/runtime/helpers/edgeToPoints.js

@@ -0,0 +1,3 @@
+export function edgeToPoints(edge) {
+  return [{ x: edge.startX, y: edge.startY }, { x: edge.endX, y: edge.endY }];
+}

package/dist/runtime/helpers/findDraggableEdge.js

@@ -0,0 +1,13 @@
+import { containsEdge } from "./containsEdge.js";
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { isEdgeEqual } from "./isEdgeEqual.js";
+export function findDraggableEdge(edge, edges, exact = true, edgeOrientation) {
+  edgeOrientation ??= getEdgeOrientation(edge);
+  for (const otherEdge of edges) {
+    const didFindEdge = exact ? isEdgeEqual(edge, otherEdge, edgeOrientation) : containsEdge(edge, otherEdge, edgeOrientation);
+    if (didFindEdge) {
+      return otherEdge;
+    }
+  }
+  return void 0;
+}

package/dist/runtime/helpers/findFrameDraggableEdges.js

@@ -0,0 +1,18 @@
+import { findDraggableEdge } from "./findDraggableEdge.js";
+import { frameToEdges } from "./frameToEdges.js";
+import { isWindowEdge } from "./isWindowEdge.js";
+import { sideToOrientation } from "./sideToOrientation.js";
+export function findFrameDraggableEdges(frame, edges, exact = true, sides = ["left", "right", "top", "bottom"]) {
+  const frameEdges = frameToEdges(frame);
+  const res = [];
+  for (const side of sides) {
+    const edge = frameEdges[side];
+    const edgeDirection = sideToOrientation(side);
+    const isWinEdge = isWindowEdge(edge, edgeDirection);
+    if (isWinEdge) continue;
+    const maybeEdge = findDraggableEdge(edge, edges, exact, edgeDirection);
+    if (maybeEdge) res.push({ edge: maybeEdge, side });
+  }
+  if (res.length > 0) return res;
+  return void 0;
+}

package/dist/runtime/helpers/frameToEdges.js

@@ -0,0 +1,21 @@
+import { frameToPoints } from "./frameToPoints.js";
+export function frameToEdges(frame, sides) {
+  const { tl, tr, bl, br } = frameToPoints(frame);
+  const right = { startX: tr.x, startY: tr.y, endX: br.x, endY: br.y };
+  const left = { startX: tl.x, startY: tl.y, endX: bl.x, endY: bl.y };
+  const bottom = { startX: bl.x, startY: bl.y, endX: br.x, endY: br.y };
+  const top = { startX: tl.x, startY: tl.y, endX: tr.x, endY: tr.y };
+  if (sides) {
+    const res = {};
+    for (const side of sides) {
+      res[side] = side === "right" ? right : side === "left" ? left : side === "bottom" ? bottom : top;
+    }
+    return res;
+  }
+  return {
+    right,
+    left,
+    bottom,
+    top
+  };
+}

package/dist/runtime/helpers/frameToPoints.js

@@ -0,0 +1,7 @@
+export function frameToPoints(frame) {
+  const tl = { x: frame.x, y: frame.y };
+  const tr = { x: frame.x + frame.width, y: frame.y };
+  const bl = { x: frame.x, y: frame.y + frame.height };
+  const br = { x: frame.x + frame.width, y: frame.y + frame.height };
+  return { tl, tr, bl, br };
+}

package/dist/runtime/helpers/getEdgeOrientation.js

@@ -0,0 +1,4 @@
+export function getEdgeOrientation(edge) {
+  if (edge.startX === edge.endX) return "vertical";
+  return "horizontal";
+}

package/dist/runtime/helpers/getEdgeSharedDirection.js

@@ -0,0 +1,7 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+export function getEdgeSharedDirection(edgeA, edgeB) {
+  const edgeDirectionA = getEdgeOrientation(edgeA);
+  const edgeDirectionB = getEdgeOrientation(edgeB);
+  if (edgeDirectionA !== edgeDirectionB) return false;
+  return edgeDirectionA;
+}

package/dist/runtime/helpers/getEdgeSide.js

@@ -0,0 +1,16 @@
+import { unreachable } from "@alanscodelog/utils/unreachable";
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+export function getEdgeSide(frame, edge, allowNone = false) {
+  const edgeDir = getEdgeOrientation(edge);
+  if (edgeDir === "horizontal") {
+    if (edge.startY === frame.y) return "top";
+    else if (edge.startY === frame.y + frame.height) return "bottom";
+  } else if (edgeDir === "vertical") {
+    if (edge.startX === frame.x) return "left";
+    else if (edge.startX === frame.x + frame.width) return "right";
+  }
+  if (!allowNone) {
+    unreachable();
+  }
+  return void 0;
+}

package/dist/runtime/helpers/getFrameById.js

@@ -0,0 +1,5 @@
+import { getFrameConstant } from "./getFrameConstant.js";
+export function getFrameById(win, frameId, assert = false) {
+  const frameId_ = getFrameConstant(win, frameId, assert);
+  return win.frames[frameId_];
+}

package/dist/runtime/helpers/getFrameConstant.js

@@ -0,0 +1,15 @@
+import { assertItemIn } from "./assertItemIn.js";
+import { assertWindowHasActiveFrame } from "./assertWindowHasActiveFrame.js";
+export function getFrameConstant(win, constant, assert = false) {
+  switch (constant) {
+    case "ACTIVE": {
+      if (assert) assertWindowHasActiveFrame(win);
+      return win.activeFrame;
+    }
+    // todo sides
+    default: {
+      if (assert) assertItemIn(win.frames, constant);
+      return constant;
+    }
+  }
+}

package/dist/runtime/helpers/getIntersections.js

@@ -0,0 +1,63 @@
+import { castType } from "@alanscodelog/utils";
+import { keys } from "@alanscodelog/utils/keys";
+import { addPointsToIntersection } from "./addPointsToIntersection.js";
+import { edgeToPoints } from "./edgeToPoints.js";
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { inRange } from "./inRange.js";
+import { getMaxInt } from "../settings.js";
+export function getIntersections(visualEdges) {
+  const intersections = {
+    // x: {y: count}
+  };
+  for (const edge of visualEdges) {
+    addPointsToIntersection(intersections, Object.values(edgeToPoints(edge)));
+  }
+  const points = [];
+  const maxInt = getMaxInt();
+  for (const x of keys(intersections)) {
+    for (const y of keys(intersections[x])) {
+      castType(x);
+      castType(y);
+      const xInt = Number.parseInt(x, 10);
+      const yInt = Number.parseInt(y, 10);
+      const isWindowEdge = xInt === 0 || yInt === 0 || xInt === maxInt || yInt === maxInt;
+      const sharedEdges = findEdgesTouchingPoint(visualEdges, {
+        x: xInt,
+        y: yInt
+      });
+      points.push({
+        point: { x: xInt, y: yInt },
+        count: intersections[x][y],
+        sharesEdge: sharedEdges.horizontal.length > 0 || sharedEdges.vertical.length > 0,
+        sharedEdges,
+        isWindowEdge
+      });
+    }
+  }
+  return points;
+}
+function findEdgesTouchingPoint(edges, point, {
+  firstOnly = false,
+  orientation: direction = void 0,
+  inclusive = true
+} = {}) {
+  const edgesContainingPoint = {
+    horizontal: [],
+    vertical: []
+  };
+  for (const edge of edges) {
+    const orientation = getEdgeOrientation(edge);
+    if (orientation === "horizontal" && (!direction || direction === "horizontal")) {
+      if (edge.startY === point.y && inRange(point.x, edge.startX, edge.endX, inclusive)) {
+        edgesContainingPoint.horizontal.push(edge);
+        if (firstOnly) break;
+      }
+    } else if (!direction || direction === "vertical") {
+      if (edge.startX === point.x && inRange(point.y, edge.startY, edge.endY, inclusive)) {
+        edgesContainingPoint.vertical.push(edge);
+        if (firstOnly) break;
+      }
+    }
+  }
+  return edgesContainingPoint;
+}

package/dist/runtime/helpers/getIntersectionsCss.js

@@ -0,0 +1,56 @@
+import { getMaxInt } from "../settings.js";
+export function getIntersectionsCss(entries, {
+  intersectionWidth = `var(--layoutIntersectionWidth, 8px)`,
+  /** How much to shift the intersections by when it's not on a four corner intersection. Otherwise it tends to look ugly because it overlaps one of the frame edges, this shifts it away from it. */
+  shiftAmount = `var(--layoutIntersectionShiftAmount, 2px)`
+} = {}) {
+  const unscale = getMaxInt() / 100;
+  return entries.map((entry) => {
+    const point = entry.point;
+    const css = {
+      x: `${point.x / unscale}%`,
+      y: `${point.y / unscale}%`,
+      width: intersectionWidth,
+      height: intersectionWidth,
+      translate: `translate(-50%, -50%)`
+    };
+    if (shiftAmount) {
+      const shift = getIntersectionShift(entry);
+      if (shift.includes("left")) {
+        css.x = `calc(${css.x} + ${shiftAmount})`;
+      } else if (shift.includes("right")) {
+        css.x = `calc(${css.x} - ${shiftAmount})`;
+      }
+      if (shift.includes("top")) {
+        css.y = `calc(${css.y} + ${shiftAmount})`;
+      } else if (shift.includes("bottom")) {
+        css.y = `calc(${css.y} - ${shiftAmount})`;
+      }
+      if (shift !== "") {
+        ;
+        css._shifted = true;
+      }
+    }
+    return css;
+  });
+}
+function getIntersectionShift(intersection) {
+  let shift = "";
+  if (intersection.sharedEdges.horizontal.length === 1) {
+    const edge = intersection.sharedEdges.horizontal[0];
+    if (edge.endX === intersection.point.x) {
+      shift += "right";
+    } else if (edge.startX === intersection.point.x) {
+      shift += "left";
+    }
+  }
+  if (intersection.sharedEdges.vertical.length === 1) {
+    const edge = intersection.sharedEdges.vertical[0];
+    if (edge.endY === intersection.point.y) {
+      shift += "bottom";
+    } else if (edge.startY === intersection.point.y) {
+      shift += "top";
+    }
+  }
+  return shift;
+}

package/dist/runtime/helpers/getMoveEdgeInfo.js

@@ -0,0 +1,42 @@
+import { clampNumber } from "./clampNumber.js";
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { getResizeLimit } from "./getResizeLimit.js";
+import { getMarginSize } from "../settings.js";
+export function getMoveEdgeInfo(touchingFrames, edge, position, margin = getMarginSize(), clamp = true) {
+  const { x: posX, y: posY } = position;
+  const edgeDirection = getEdgeOrientation(edge);
+  const dir = edgeDirection === "horizontal" ? posY < edge.startY ? "up" : "down" : posX < edge.startX ? "left" : "right";
+  const edgePos = edgeDirection === "vertical" ? edge.startX : edge.startY;
+  const cursorPos = edgeDirection === "vertical" ? posX : posY;
+  const amount = Math.abs(cursorPos - edgePos);
+  if (amount === 0) {
+    return {
+      x: posX,
+      y: posY,
+      dir,
+      isPassedLimit: false,
+      pos: edgePos,
+      distance: 0
+    };
+  }
+  const limitInDir = getResizeLimit(
+    edge,
+    touchingFrames,
+    dir,
+    amount,
+    edgeDirection === "vertical" ? margin.width : margin.height
+  );
+  const distanceToLimit = Math.abs(edgePos - limitInDir);
+  const isPassedLimit = amount > distanceToLimit;
+  const reverseClamp = dir === "right" || dir === "down";
+  const pos = clamp ? reverseClamp ? clampNumber(cursorPos, -Infinity, limitInDir) : clampNumber(cursorPos, limitInDir, Infinity) : cursorPos;
+  const distance = Math.abs(pos - edgePos);
+  return {
+    x: posX,
+    y: posY,
+    dir,
+    isPassedLimit,
+    pos,
+    distance
+  };
+}

package/dist/runtime/helpers/getResizeLimit.js

@@ -0,0 +1,39 @@
+import { castType } from "@alanscodelog/utils/castType";
+import { keys } from "@alanscodelog/utils/keys";
+import { getMaxInt } from "../settings.js";
+export function getResizeLimit(edge, touchingFrames, dir, amount, margin) {
+  const limits = dir === "horizontal" ? { left: -Infinity, right: Infinity } : dir === "vertical" ? { up: -Infinity, down: Infinity } : { [dir]: dir === "up" || dir === "left" ? -Infinity : Infinity };
+  if (amount === 0) {
+    throw new Error("Amount cannot be zero.");
+  }
+  castType(dir);
+  for (const frame of touchingFrames) {
+    if (dir === "vertical" || dir === "up") {
+      if (frame.y < edge.startY) {
+        limits.up = Math.max(limits[dir], frame.y);
+      }
+    }
+    if (dir === "vertical" || dir === "down") {
+      if (frame.y >= edge.startY) {
+        limits.down = Math.min(limits[dir], frame.y + frame.height);
+      }
+    }
+    if (dir === "horizontal" || dir === "left") {
+      if (frame.x < edge.startX) {
+        limits.left = Math.max(limits[dir], frame.x);
+      }
+    }
+    if (dir === "horizontal" || dir === "right") {
+      if (frame.x >= edge.startX) {
+        limits.right = Math.min(limits[dir], frame.x + frame.width);
+      }
+    }
+  }
+  for (const key of keys(limits)) {
+    if (limits[key] === -Infinity) limits[key] = 0;
+    if (limits[key] === Infinity) limits[key] = getMaxInt();
+    limits[key] += dir === "left" || dir === "up" ? margin : -margin;
+  }
+  if (dir === "horizontal" || dir === "vertical") return limits;
+  return limits[dir];
+}

package/dist/runtime/helpers/getShapeSquareCss.js

@@ -0,0 +1,17 @@
+import { getMaxInt } from "../settings.js";
+export function getShapeSquareCss(obj, pad) {
+  const unscale = getMaxInt() / 100;
+  const css = {
+    x: `${obj.x / unscale}%`,
+    y: `${obj.y / unscale}%`,
+    width: `${obj.width / unscale}%`,
+    height: `${obj.height / unscale}%`
+  };
+  if (pad) {
+    css.width = `calc(${css.width} - (${pad}*2))`;
+    css.height = `calc(${css.height}  - (${pad}*2))`;
+    css.x = `calc(${css.x} + (${pad}))`;
+    css.y = `calc(${css.y} + (${pad}))`;
+  }
+  return css;
+}

package/dist/runtime/helpers/getSideTouching.js

@@ -0,0 +1,7 @@
+export function getSideTouching(frameA, frameB) {
+  if (frameA.x + frameA.width === frameB.x) return "right";
+  if (frameA.x === frameB.x + frameB.width) return "left";
+  if (frameA.y + frameA.height === frameB.y) return "bottom";
+  if (frameA.y === frameB.y + frameB.height) return "top";
+  return void 0;
+}

package/dist/runtime/helpers/getVisualEdgeCss.js

@@ -0,0 +1,40 @@
+import { getEdgeOrientation } from "./getEdgeOrientation.js";
+import { getMaxInt } from "../settings.js";
+export function getVisualEdgeCss(edge, {
+  translate = true,
+  edgeWidth = `var(--layoutEdgeWidth, 2px)`,
+  padLongAxis,
+  padShortAxis
+} = {}) {
+  const dir = getEdgeOrientation(edge);
+  const unscale = getMaxInt() / 100;
+  const w = (edge.endX - edge.startX) / unscale;
+  const h = (edge.endY - edge.startY) / unscale;
+  const width = dir === "vertical" ? edgeWidth : `${w}%`;
+  const height = dir === "horizontal" ? edgeWidth : `${h}%`;
+  const x = `${edge.startX / unscale}%`;
+  const y = `${edge.startY / unscale}%`;
+  const xTranslate = dir === "vertical" ? "-50%" : "0";
+  const yTranslate = dir === "horizontal" ? "-50%" : "0";
+  const translation = translate ? `translate(${xTranslate}, ${yTranslate})` : "";
+  const css = {
+    x,
+    y,
+    width,
+    height,
+    translate: translation
+  };
+  if (padLongAxis) {
+    const axis = dir === "vertical" ? "height" : "width";
+    const coord = dir === "vertical" ? "y" : "x";
+    css[axis] = `calc(${css[axis]} - (${padLongAxis}*2))`;
+    css[coord] = `calc(${css[coord]} + (${padLongAxis}))`;
+  }
+  if (padShortAxis) {
+    const axis = dir === "vertical" ? "width" : "height";
+    const coord = dir === "vertical" ? "x" : "y";
+    css[axis] = `calc(${css[axis]} - (${padShortAxis}*2))`;
+    css[coord] = `calc(${css[coord]} + (${padShortAxis}))`;
+  }
+  return css;
+}