@witchcraft/layout 1.0.0

package/dist/runtime/layout/findFramesTouchingEdge.js

@@ -0,0 +1,33 @@
+import { containsEdge } from "../helpers/containsEdge.js";
+import { dirToSide } from "../helpers/dirToSide.js";
+import { frameToEdges } from "../helpers/frameToEdges.js";
+import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
+import { inRange } from "../helpers/inRange.js";
+import { oppositeSide } from "../helpers/oppositeSide.js";
+import { toCoord } from "../helpers/toCoord.js";
+export function findFramesTouchingEdge(edge, frames, criteria = {}) {
+  const visualEdge = edge;
+  const res = [];
+  const visualEdgeDirection = getEdgeOrientation(visualEdge);
+  const searchDirections = criteria.searchDirections ?? (visualEdgeDirection === "horizontal" ? ["up", "down"] : ["left", "right"]);
+  const frameSearchSides = searchDirections.map((dir) => oppositeSide(dirToSide(dir)));
+  const coord = toCoord(visualEdgeDirection);
+  const coordUpper = coord.toUpperCase();
+  for (const frame of frames) {
+    const frameEdges = frameToEdges(frame, frameSearchSides);
+    const edges = Object.entries(frameEdges);
+    for (const [side, edge2] of edges) {
+      if (containsEdge(edge2, visualEdge, visualEdgeDirection)) {
+        if (criteria.referencePoint) {
+          const isInRange = inRange(criteria.referencePoint[coord], edge2[`start${coordUpper}`], edge2[`end${coordUpper}`]);
+          if (isInRange) {
+            res.push({ edge: edge2, frame, side });
+          }
+        } else {
+          res.push({ edge: edge2, frame, side });
+        }
+      }
+    }
+  }
+  return res;
+}

package/dist/runtime/layout/findSafeSplitEdge.js

@@ -0,0 +1,20 @@
+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()) {
+  const orientation = dirToOrientation(dragDirection);
+  const position = typeof dragPointOrPosition === "number" ? dragPointOrPosition : dragPointOrPosition[orientation === "horizontal" ? "x" : "y"];
+  const coordKey = orientation === "vertical" ? "y" : "x";
+  const sizeKey = orientation === "vertical" ? "height" : "width";
+  const pos = snapNumber(position, snapAmount[coordKey]);
+  const lowerLimit = snapNumber(frame[coordKey] + minSize[sizeKey], snapAmount[coordKey], "floor");
+  const upperLimit = snapNumber(frame[coordKey] + frame[sizeKey] - minSize[sizeKey], snapAmount[coordKey], "floor");
+  const clampedPos = clampNumber(pos, lowerLimit, upperLimit);
+  const oppositeCoordKey = oppositeSide(coordKey);
+  const oppositeSizeKey = oppositeSide(sizeKey);
+  const frameStart = snapNumber(frame[oppositeCoordKey], snapAmount[oppositeCoordKey]);
+  const frameEnd = snapNumber(frameStart + frame[oppositeSizeKey], snapAmount[oppositeCoordKey]);
+  const edge = orientation === "vertical" ? { startY: clampedPos, endY: clampedPos, startX: frameStart, endX: frameEnd } : { startX: clampedPos, endX: clampedPos, startY: frameStart, endY: frameEnd };
+  return { edge, position: clampedPos };
+}

package/dist/runtime/layout/findVisualEdge.js

@@ -0,0 +1,9 @@
+import { containsEdge } from "../helpers/containsEdge.js";
+import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
+export function findVisualEdge(visualEdges, edge) {
+  const edgeDirection = getEdgeOrientation(edge);
+  for (const visualEdge of visualEdges) {
+    if (containsEdge(visualEdge, edge, edgeDirection)) return visualEdge;
+  }
+  return void 0;
+}

package/dist/runtime/layout/frameCreate.js

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

package/dist/runtime/layout/frameSplit.js

@@ -0,0 +1,9 @@
+import { keys } from "@alanscodelog/utils/keys";
+export function frameSplit(win, { splitFrame, newFrame }) {
+  const winFrame = win.frames[splitFrame.id];
+  for (const key of keys(splitFrame)) {
+    winFrame[key] = splitFrame[key];
+  }
+  win.frames[newFrame.id] = newFrame;
+  return newFrame;
+}

package/dist/runtime/layout/getCloseFrameInfo.js

@@ -0,0 +1,103 @@
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
+import { readable } from "@alanscodelog/utils/readable";
+import { unreachable } from "@alanscodelog/utils/unreachable";
+import { findFramesTouchingEdge } from "./findFramesTouchingEdge.js";
+import { findVisualEdge } from "./findVisualEdge.js";
+import { cloneFrame } from "../helpers/cloneFrame.js";
+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 { 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()) {
+  if (frames.length === 1) {
+    return new KnownError(
+      LAYOUT_ERROR.CANT_CLOSE_SINGLE_FRAME,
+      `Can't close frame ${frame.id}, it is the last frame in the window.`,
+      { frame }
+    );
+  }
+  const side = closeBy === "dir" ? oppositeSide(dirToSide(closeDirOrSide)) : closeDirOrSide;
+  const sideOpposite = oppositeSide(side);
+  const draggableEdges = findFrameDraggableEdges(frame, visualEdges, !force, [side]);
+  if (!draggableEdges) return new KnownError(LAYOUT_ERROR.CANT_CLOSE_NO_DRAG_EDGE, `Could not find draggable edge for frame ${frame.id}`, { frame });
+  const { edge: frameEdge } = draggableEdges[0];
+  const visualEdge = findVisualEdge(visualEdges, frameEdge);
+  if (visualEdge === void 0) unreachable();
+  const direction = oppositeSide(getEdgeOrientation(visualEdge));
+  const entriesInVisualEdges = findFramesTouchingEdge(visualEdge, frames);
+  if (entriesInVisualEdges.length === 0) unreachable();
+  const sizeKey = direction === "horizontal" ? "width" : "height";
+  const coordKey = direction === "horizontal" ? "x" : "y";
+  const thisFrameSize = frame[sizeKey];
+  const frameSizes = [];
+  const oppositeSideEntries = [];
+  const sameSideEntries = [];
+  for (const _ of entriesInVisualEdges) {
+    if (_.side === side) {
+      sameSideEntries.push(_);
+      const size = _.frame[sizeKey];
+      pushIfNotIn(frameSizes, [size]);
+    } else {
+      oppositeSideEntries.push(_);
+    }
+  }
+  frameSizes.sort((a, b) => a - b);
+  const smallest = frameSizes[0];
+  const secondSmallest = frameSizes[1];
+  if (smallest < thisFrameSize) {
+    const nearbyErrorFrames = sameSideEntries.filter((_) => _.frame[sizeKey] < thisFrameSize).map((_) => _.frame);
+    return new KnownError(
+      LAYOUT_ERROR.CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL,
+      // it's too complicated to calculate, happens in last example, if we get frame B, frame A is smaller
+      // attempting to resize it is very complicated
+      `Cannot close ${frame.id}, nearby affected frame/s ${readable(nearbyErrorFrames.map((_) => _.id))} are smaller than this one, we cannot calculate how to close it.`,
+      { frame, nearbyFrames: nearbyErrorFrames, minSize }
+    );
+  }
+  if (thisFrameSize !== smallest) {
+    unreachable();
+  }
+  if (secondSmallest) {
+    if (secondSmallest - smallest < minSize[sizeKey]) {
+      const nearbyErrorFrames = sameSideEntries.filter((_) => frame[sizeKey] < minSize[sizeKey]).map((_) => _.frame);
+      return new KnownError(
+        LAYOUT_ERROR.CANT_CLOSE_NEARBY_FRAMES_TOO_SMALL,
+        `Closing this frame ${frame.id} would leave the following frame/s ${readable(nearbyErrorFrames.map((_) => _.id))} below the minimum size specified.`,
+        { frame, nearbyFrames: nearbyErrorFrames, minSize }
+      );
+    }
+  }
+  const modifiedFrames = [];
+  const deletedFrames = [];
+  const moveAmount = thisFrameSize;
+  for (const entry of sameSideEntries) {
+    if (entry.frame[sizeKey] > thisFrameSize) {
+      const clone = cloneFrame(entry.frame);
+      if (side === "top" || side === "left") {
+        clone[coordKey] += moveAmount;
+      }
+      clone[sizeKey] -= moveAmount;
+      modifiedFrames.push(clone);
+    } else if (entry.frame[sizeKey] === thisFrameSize) deletedFrames.push(entry.frame);
+    else unreachable();
+  }
+  if (deletedFrames.length > 1 && !force) {
+    return new KnownError(
+      LAYOUT_ERROR.CANT_CLOSE_WITHOUT_FORCE,
+      `Cannot close in this direction, there are multiple frames in the same direction (${readable(deletedFrames.map((_) => _.id))}). Use force: true to close them.`,
+      { frame, minSize, framesRequiredToBeDeleted: deletedFrames }
+    );
+  }
+  for (const entry of oppositeSideEntries) {
+    const clone = cloneFrame(entry.frame);
+    if (sideOpposite === "top" || sideOpposite === "left") {
+      clone[coordKey] -= moveAmount;
+    }
+    clone[sizeKey] += moveAmount;
+    modifiedFrames.push(clone);
+  }
+  return { modifiedFrames, deletedFrames };
+}

package/dist/runtime/layout/getFrameSplitInfo.js

@@ -0,0 +1,40 @@
+import { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js";
+import { frameCreate } from "./frameCreate.js";
+import { cloneFrame } from "../helpers/cloneFrame.js";
+import { getMarginSize, getSnapPoint } from "../settings.js";
+import {
+  LAYOUT_ERROR
+} from "../types/index.js";
+import { KnownError } from "../utils/KnownError.js";
+export function getFrameSplitInfo(frame, dir, dragPointOrPosition = "midpoint", minSize = getMarginSize(), snapAmount = getSnapPoint()) {
+  frame = cloneFrame(frame);
+  let newFrame = { ...frame };
+  const isHorz = dir === "left" || dir === "right";
+  const sizeKey = isHorz ? "width" : "height";
+  const posKey = isHorz ? "x" : "y";
+  const position = dragPointOrPosition === "midpoint" ? isHorz ? frame.x + frame.width / 2 : frame.y + frame.height / 2 : typeof dragPointOrPosition === "number" ? dragPointOrPosition : dragPointOrPosition[isHorz ? "x" : "y"];
+  const safePosition = findSafeSplitEdgeAndPosition(
+    frame,
+    dir,
+    position,
+    snapAmount,
+    minSize
+  );
+  const newSize = dir === "right" || dir === "down" ? frame[sizeKey] + frame[posKey] - safePosition.position : safePosition.position - frame[posKey];
+  if (newSize < minSize[sizeKey]) {
+    return new KnownError(
+      LAYOUT_ERROR.CANT_SPLIT_FRAME_TOO_SMALL,
+      `Can't split frame ${frame.id} in direction ${dir}, frame is too small to be split.`,
+      { frame, newSize, minSize: minSize[sizeKey] }
+    );
+  }
+  newFrame[sizeKey] = newSize;
+  frame[sizeKey] -= newSize;
+  if (dir === "right" || dir === "down") {
+    newFrame[posKey] = safePosition.position;
+  } else {
+    frame[posKey] = safePosition.position;
+  }
+  newFrame = frameCreate({ ...newFrame, id: void 0 });
+  return { splitFrame: frame, newFrame };
+}

package/dist/runtime/layout/getFrameTo.js

@@ -0,0 +1,47 @@
+import { getMaxInt } from "../settings.js";
+export function getFrameTo(side, frame, frames) {
+  const max = getMaxInt();
+  if (side === "top" && frame.y === 0 || side === "left" && frame.y === 0 || side === "right" && frame.x + frame.width === max || side === "bottom" && frame.x + frame.height === max) return void 0;
+  let candidate;
+  let candidateDistance = Infinity;
+  const midPointX = frame.x + Math.round(frame.width / 2);
+  const midPointY = frame.y + Math.round(frame.height / 2);
+  const dir = side === "top" || side === "bottom" ? "horizontal" : "vertical";
+  const midPoint = dir === "horizontal" ? midPointX : midPointY;
+  for (const other of frames) {
+    if (frame.id === other.id) continue;
+    const isOutOfRange = dir === "horizontal" ? other.x + other.width <= frame.x || other.x >= frame.x + frame.width : other.y + other.height <= frame.y || other.y >= frame.y + frame.height;
+    if (isOutOfRange) continue;
+    const otherMidPoint = dir === "horizontal" ? other.x + Math.round(other.width / 2) : other.y + Math.round(other.height / 2);
+    const otherDist = Math.abs(midPoint - otherMidPoint);
+    switch (side) {
+      case "left":
+        if (other.x + other.width !== frame.x) continue;
+        break;
+      case "right":
+        if (other.x !== frame.x + frame.width) continue;
+        break;
+      case "top":
+        if (other.y + other.height !== frame.y) continue;
+        break;
+      case "bottom":
+        if (other.y !== frame.y + frame.height) continue;
+        break;
+    }
+    if (otherDist < candidateDistance) {
+      candidate = other;
+      candidateDistance = otherDist;
+    } else if (otherDist === candidateDistance && candidate) {
+      if (dir === "vertical") {
+        if (other.y > candidate.y) {
+          candidate = other;
+        }
+      } else {
+        if (other.x > candidate.x) {
+          candidate = other;
+        }
+      }
+    }
+  }
+  return candidate;
+}

package/dist/runtime/layout/index.js

@@ -0,0 +1,22 @@
+export { closeFrame } from "./closeFrame.js";
+export { closeFrames } from "./closeFrames.js";
+export { createSplitDecoEdge } from "./createSplitDecoEdge.js";
+export { createSplitDecoFromDrag } from "./createSplitDecoFromDrag.js";
+export { debugFrame } from "./debugFrame.js";
+export { findFramesTouchingEdge } from "./findFramesTouchingEdge.js";
+export { findSafeSplitEdgeAndPosition } from "./findSafeSplitEdge.js";
+export { findVisualEdge } from "./findVisualEdge.js";
+export { frameCreate } from "./frameCreate.js";
+export { frameSplit } from "./frameSplit.js";
+export { getCloseFrameInfo } from "./getCloseFrameInfo.js";
+export { getFrameSplitInfo } from "./getFrameSplitInfo.js";
+export { getFrameTo } from "./getFrameTo.js";
+export { isPointInFrame } from "./isPointInFrame.js";
+export { layoutAddWindow } from "./layoutAddWindow.js";
+export { layoutCreate } from "./layoutCreate.js";
+export { layoutRemoveWindow } from "./layoutRemoveWindow.js";
+export { resizeFrame } from "./resizeFrame.js";
+export { windowAddFrame } from "./windowAddFrame.js";
+export { windowCreate } from "./windowCreate.js";
+export { windowRemoveFrame } from "./windowRemoveFrame.js";
+export { windowSetActiveFrame } from "./windowSetActiveFrame.js";

package/dist/runtime/layout/isPointInFrame.js

@@ -0,0 +1,4 @@
+import { inRange } from "../helpers/inRange.js";
+export function isPointInFrame(frame, point) {
+  return inRange(point.x, frame.x, frame.x + frame.width) && inRange(point.y, frame.y, frame.y + frame.height);
+}

package/dist/runtime/layout/layoutAddWindow.js

@@ -0,0 +1,4 @@
+export function layoutAddWindow(layout, win) {
+  layout.windows[win.id] = win;
+  return win;
+}

package/dist/runtime/layout/layoutCreate.js

@@ -0,0 +1,7 @@
+export function layoutCreate(opts = {}) {
+  return {
+    windows: {},
+    activeWindow: void 0,
+    ...opts
+  };
+}

package/dist/runtime/layout/layoutRemoveWindow.js

@@ -0,0 +1,5 @@
+import { toId } from "../helpers/toId.js";
+export function layoutRemoveWindow(layout, win) {
+  const id = toId(win);
+  delete layout.windows[id];
+}

package/dist/runtime/layout/resizeFrame.js

@@ -0,0 +1,69 @@
+import { findFramesTouchingEdge } from "./findFramesTouchingEdge.js";
+import { clampNumber } from "../helpers/clampNumber.js";
+import { frameToEdges } from "../helpers/frameToEdges.js";
+import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
+import { getResizeLimit } from "../helpers/getResizeLimit.js";
+import { getVisualEdges } from "../helpers/getVisualEdges.js";
+import { isWindowEdge } from "../helpers/isWindowEdge.js";
+import { resizeByEdge } from "../helpers/resizeByEdge.js";
+import { getMarginSize } from "../settings.js";
+export function resizeFrame(win, frame, dir, distance, minSize = getMarginSize()) {
+  const originalDistance = distance;
+  const frameEdges = frameToEdges(frame);
+  const resizeEdges = dir === "up" ? [frameEdges.top] : dir === "down" ? [frameEdges.bottom] : dir === "vertical" ? [frameEdges.top, frameEdges.bottom] : dir === "left" ? [frameEdges.left] : dir === "right" ? [frameEdges.right] : [frameEdges.left, frameEdges.right];
+  let divideDistance = false;
+  if (resizeEdges.length === 2) {
+    divideDistance = true;
+  }
+  let ok = false;
+  const edgeDirection = getEdgeOrientation(resizeEdges[0]);
+  const margin = minSize[edgeDirection === "vertical" ? "width" : "height"];
+  let dist = distance[edgeDirection === "vertical" ? "width" : "height"];
+  if (divideDistance) {
+    dist /= 2;
+  }
+  for (const resizeEdge of resizeEdges) {
+    const _dir = dir === "horizontal" ? resizeEdge === frameEdges.left ? "left" : "right" : dir === "vertical" ? resizeEdge === frameEdges.top ? "up" : "down" : dir;
+    let frameEdge = resizeEdge;
+    const visualEdges = getVisualEdges(Object.values(win.frames), { separateByDir: true });
+    const edges = visualEdges[edgeDirection];
+    const isWinEdge = isWindowEdge(frameEdge, edgeDirection);
+    if (isWinEdge) {
+      if (edgeDirection === "horizontal") {
+        frameEdge = frameEdge === frameEdges.top ? frameEdges.bottom : frameEdges.top;
+      } else {
+        frameEdge = frameEdge === frameEdges.right ? frameEdges.left : frameEdges.right;
+      }
+    }
+    let foundEdge;
+    for (const edge of edges) {
+      if (edgeDirection === "horizontal") {
+        const isInRange = frameEdge.startX >= edge.startX && frameEdge.endX <= edge.endX;
+        if (isInRange && frameEdge.startY === edge.startY) {
+          foundEdge = edge;
+          break;
+        }
+      } else {
+        const isInRange = frameEdge.startY >= edge.startY && frameEdge.endY <= edge.endY;
+        if (isInRange && frameEdge.startX === edge.startX) {
+          foundEdge = edge;
+          break;
+        }
+      }
+    }
+    if (!foundEdge) {
+      distance = originalDistance;
+      continue;
+    }
+    const touchingFrames = findFramesTouchingEdge(foundEdge, Object.values(win.frames))?.map((_) => _.frame);
+    const posX = foundEdge.startX + (_dir === "left" ? -dist : dist);
+    const posY = foundEdge.startY + (_dir === "up" ? -dist : dist);
+    const wantedPos = edgeDirection === "horizontal" ? posY : posX;
+    const limitInDir = getResizeLimit(foundEdge, touchingFrames, _dir, dist, margin);
+    const reverseClamp = _dir === "right" || _dir === "down";
+    const pos = reverseClamp ? clampNumber(wantedPos, -Infinity, limitInDir) : clampNumber(wantedPos, limitInDir, Infinity);
+    resizeByEdge(touchingFrames, foundEdge, _dir, pos, dist);
+    ok = true;
+  }
+  return ok;
+}

package/dist/runtime/layout/windowAddFrame.js

@@ -0,0 +1,4 @@
+export function windowAddFrame(win, frame) {
+  win.frames[frame.id] = frame;
+  return frame;
+}

package/dist/runtime/layout/windowCreate.js

@@ -0,0 +1,13 @@
+import { v4 as uuidv4 } from "uuid";
+export function windowCreate(opts = {}) {
+  return {
+    frames: {},
+    activeFrame: void 0,
+    pxWidth: 0,
+    pxHeight: 0,
+    pxX: 0,
+    pxY: 0,
+    ...opts,
+    id: opts.id ?? uuidv4()
+  };
+}

package/dist/runtime/layout/windowRemoveFrame.js

@@ -0,0 +1,5 @@
+import { toId } from "../helpers/toId.js";
+export function windowRemoveFrame(win, frame) {
+  const id = toId(frame);
+  delete win.frames[id];
+}

package/dist/runtime/layout/windowSetActiveFrame.js

@@ -0,0 +1,5 @@
+import { toId } from "../helpers/toId.js";
+export function windowSetActiveFrame(win, frame) {
+  const id = toId(frame);
+  win.activeFrame = id;
+}

package/dist/runtime/settings.js

@@ -0,0 +1,54 @@
+const g = {
+  SCALE: 3,
+  maxInt: 100 * 10 ** 3,
+  SNAP_PERCENTAGE_X: 0.5,
+  SNAP_PERCENTAGE_Y: 0.5,
+  snapPoint: { x: Math.round(0.5 * 10 ** 3), y: Math.round(0.5 * 10 ** 3) },
+  MARGIN_PERCENTAGE_WIDTH: 10 ** 3,
+  MARGIN_PERCENTAGE_HEIGHT: 10 ** 3,
+  marginSize: { width: 10 ** 3, height: 10 ** 3 }
+};
+export const globalOptions = g;
+export function setScale(scale) {
+  const max = 100 * 10 ** scale;
+  if (!Number.isSafeInteger(max)) {
+    throw new TypeError("Scale too high. Precision will be lost!");
+  }
+  g.SCALE = scale;
+  g.maxInt = max;
+}
+export function getMaxInt() {
+  return g.maxInt;
+}
+export function setSnapPercentage(snapPercentage) {
+  if (typeof snapPercentage === "number") {
+    g.SNAP_PERCENTAGE_X = snapPercentage;
+    g.SNAP_PERCENTAGE_Y = snapPercentage;
+  } else {
+    g.SNAP_PERCENTAGE_X = snapPercentage.x;
+    g.SNAP_PERCENTAGE_Y = snapPercentage.y;
+  }
+  g.snapPoint = {
+    x: Math.round(g.SNAP_PERCENTAGE_X * 10 ** g.SCALE),
+    y: Math.round(g.SNAP_PERCENTAGE_Y * 10 ** g.SCALE)
+  };
+}
+export function getSnapPoint() {
+  return g.snapPoint;
+}
+export function setMarginPercentage(margin) {
+  if (typeof margin === "number") {
+    g.MARGIN_PERCENTAGE_WIDTH = margin;
+    g.MARGIN_PERCENTAGE_HEIGHT = margin;
+  } else {
+    g.MARGIN_PERCENTAGE_WIDTH = margin.width;
+    g.MARGIN_PERCENTAGE_HEIGHT = margin.height;
+  }
+  g.marginSize = {
+    width: Math.round(g.MARGIN_PERCENTAGE_WIDTH * 10 ** g.SCALE),
+    height: Math.round(g.MARGIN_PERCENTAGE_HEIGHT * 10 ** g.SCALE)
+  };
+}
+export function getMarginSize() {
+  return g.marginSize;
+}