Custom layouts for Amethyst that arranges windows in four corners or a center focused window and grid-style sides.

amethyst-layouts.md

You can see previews of these layouts by checking out my blog: https://www.bryanculver.com/2024/11/22/amethyst-layouts.html

center-focus.js

function layout() {
  return {
    name: "Center Focus",
    getFrameAssignments: (windows, screenFrame) => {
      if (screenFrame.width < 1800) {
        // If the screen is too small, just use a 2-side-by-side layout
        const gridWidth = screenFrame.width / 2;
        const focusWidth = gridWidth;
        const gutterWidth = gridWidth;
        const rightGutterOffsetX = screenFrame.x + focusWidth;
        const cornerHeight = screenFrame.height / 2;

        let remainderHeight = 0;

        if (windows.length >= 2) {
          remainderHeight = cornerHeight / (windows.length - 2);
        }

        const focusFrame = {
          x: screenFrame.x,
          y: screenFrame.y,
          width: focusWidth,
          height: screenFrame.height,
        };

        const gutterFrame = {
          x: rightGutterOffsetX,
          y: screenFrame.y,
          width: gutterWidth,
          height: cornerHeight,
        };

        const frames = windows.map((window, index) => {
          if (windows.length == 1) {
            // If there is only one window, it should take up the full screen
            const frame = {
              x: screenFrame.x,
              y: screenFrame.y,
              width: screenFrame.width,
              height: screenFrame.height,
            };
            return { [window.id]: frame };
          } else {
            // If there are two windows, they should each take up half of the screen
            if (index == 0) {
              const frame = focusFrame;
              return { [window.id]: frame };
            } else if (index == 1) {
              let frame = gutterFrame;
              if (windows.length == 2) {
                frame.height = screenFrame.height;
              }
              return { [window.id]: frame };
            } else {
              const frame = {
                x: rightGutterOffsetX,
                y: screenFrame.y + cornerHeight + remainderHeight * (index - 2),
                width: gutterWidth,
                height: remainderHeight,
              };
              return { [window.id]: frame };
            }
          }
        });
        return frames.reduce((frames, frame) => ({ ...frames, ...frame }), {});
      } else {
        // If the screen is large enough, use a grid layout with a focus in the center
        const gridWidth = screenFrame.width / 4;
        const centerWidth = gridWidth * 2;
        const gutterWidth = gridWidth;
        const leftGutterOffsetX = screenFrame.x;
        const centerOffsetX = gridWidth;
        const rightGutterOffsetX = gridWidth + centerWidth;
        const cornerHeight = screenFrame.height / 2;
        const fullCornerHeight = screenFrame.height / 2;

        const centerFrame = {
          x: centerOffsetX,
          y: screenFrame.y,
          width: centerWidth,
          height: screenFrame.height,
        };

        const topLeftGutterFrame = {
          x: leftGutterOffsetX,
          y: screenFrame.y,
          width: gutterWidth,
          height: cornerHeight,
        };

        const topRightGutterFrame = {
          x: rightGutterOffsetX,
          y: screenFrame.y,
          width: gutterWidth,
          height: cornerHeight,
        };

        const bottomLeftGutterFrame = {
          x: leftGutterOffsetX,
          y: screenFrame.y + cornerHeight,
          width: gutterWidth,
          height: cornerHeight,
        };

        const bottomRightGutterFrame = {
          x: rightGutterOffsetX,
          y: screenFrame.y + cornerHeight,
          width: gutterWidth,
          height: cornerHeight,
        };

        let remainderHeight = 0;

        if (windows.length > 5) {
          remainderHeight = fullCornerHeight / (windows.length - 4);
        }

        const frames = windows.map((window, index) => {
          if (windows.length == 1) {
            // If there is only one window, it should take up the full screen
            const frame = centerFrame;
            return { [window.id]: frame };
          } else {
            // If there are two windows, they should each take up half of the screen
            if (index == 0) {
              const frame = centerFrame;
              return { [window.id]: frame };
            } else if (index == 1) {
              const frame = topLeftGutterFrame;
              return { [window.id]: frame };
            } else if (index == 2) {
              const frame = topRightGutterFrame;
              return { [window.id]: frame };
            } else if (index == 3) {
              const frame = bottomLeftGutterFrame;
              return { [window.id]: frame };
            } else if (index == 4 && windows.length == 5) {
              const frame = bottomRightGutterFrame;
              return { [window.id]: frame };
            } else {
              const frame = {
                x: rightGutterOffsetX,
                y: screenFrame.y + cornerHeight + remainderHeight * (index - 4),
                width: gutterWidth,
                height: remainderHeight,
              };
              return { [window.id]: frame };
            }
          }
        });
        return frames.reduce((frames, frame) => ({ ...frames, ...frame }), {});
      }
    },
  };
}

four-corners.js

function layout() {
    return {
        name: "Four Corners",
        getFrameAssignments: (windows, screenFrame) => {
            const fullCornerHeight = screenFrame.height / 2;
            const fullCornerWidth = screenFrame.width / 2;

            let remainderHeight = 0;
            const remainderWidth = fullCornerWidth;

            if (windows.length > 4) {
                remainderHeight = fullCornerHeight / (windows.length - 3);
            }

            const frames = windows.map((window, index) => {
                if (windows.length == 1) {
                    // If there is only one window, it should take up the full screen
                    const frame = {
                        x: screenFrame.x,
                        y: screenFrame.y,
                        width: screenFrame.width,
                        height: screenFrame.height
                    };
                    return { [window.id]: frame };
                } else if (windows.length == 2) {
                    // If there are two windows, they should each take up half of the screen
                    if (index == 0) {
                        const frame = {
                            x: screenFrame.x,
                            y: screenFrame.y,
                            width: fullCornerWidth,
                            height: screenFrame.height
                        };
                        return { [window.id]: frame };
                    } else {
                        const frame = {
                            x: screenFrame.x + fullCornerWidth,
                            y: screenFrame.y,
                            width: fullCornerWidth,
                            height: screenFrame.height
                        };
                        return { [window.id]: frame };
                    }
                } else if (windows.length == 3) {
                    // If there are three windows, the first window should take up the left half of the screen, and the other two should take up the right half
                    if (index == 0) {
                        const frame = {
                            x: screenFrame.x,
                            y: screenFrame.y,
                            width: fullCornerWidth,
                            height: screenFrame.height
                        };
                        return { [window.id]: frame };
                    } else if (index == 1) {
                        const frame = {
                            x: screenFrame.x + fullCornerWidth,
                            y: screenFrame.y,
                            width: fullCornerWidth,
                            height: fullCornerHeight
                        };
                        return { [window.id]: frame };
                    } else {
                        const frame = {
                            x: screenFrame.x + fullCornerWidth,
                            y: screenFrame.y + fullCornerHeight,
                            width: fullCornerWidth,
                            height: fullCornerHeight
                        };
                        return { [window.id]: frame };
                    }
                } else if (index <= 2 || index == 3 && windows.length == 4) {
                    // If there are four windows, they should each take up a quarter of the screen
                    const frame = {
                        x: screenFrame.x + (fullCornerWidth * (index % 2)),
                        y: screenFrame.y + (fullCornerHeight * Math.floor(index / 2)),
                        width: fullCornerWidth,
                        height: fullCornerHeight
                    };
                    return { [window.id]: frame };
                } else {
                    // If there are more than four windows, the first three should take up the top left, top right, bottom left of the screen, and the rest should take up the bottom right of the screen
                    const frame = {
                        x: screenFrame.x + fullCornerWidth,
                        y: screenFrame.y + fullCornerHeight + (remainderHeight * (index - 3)),
                        width: remainderWidth,
                        height: remainderHeight
                    }
                    return { [window.id]: frame };
                }
            });
            return frames.reduce((frames, frame) => ({ ...frames, ...frame }), {});
        }
    };
}