[Custom Layout] How to extend Two Pane to have the main pane width an exact number

[thewinger]

As the title says, I'm trying to extend the Two Pane layout, but making the main pane a width of 2560px.

This is the code I have that doesn't work:

function layout() {
  return {
    name: "presentation",
    extends: "two-pane",
    getFrameAssignments: (windows, screenFrame, extendedFrames) => {
      const mainWidth = 2560;

      return extendedFrames.reduce((frames, extendedFrame) => {
        let frame;
        if (index === 0) {
          frame = {
            x: extendedFrame.x,
            y: extendedFrame.y,
            width: mainWidth,
            height: extendedFrame.height,
          };
        } else {
          frame = {
            x: extendedFrame.x,
            y: extendedFrame.y,
            width: extendedFrame.width,
            height: extendedFrame.height,
          };
        }
        return { ...frames, [extendedFrame.id]: frame };
      }, {});
    },
  };
}

[ianyh]

Sorry, I'm a billion years late on this, but it doesn't look like index is actually defined anywhere?

[thewinger]

Thanks for the reply. I used extended.js and static-ratio-tall.js as inspirations but no luck.

function layout() {
  return {
    name: "Presentation",
    extends: "two-pane",
    getFrameAssignments: (windows, extendedFrames) => {
      const mainWidth = 2560;

      return extendedFrames.reduce((frames, extendedFrame, index) => {
        let frame;
        if (index === 0) {
          frame = {
            x: extendedFrame.frame.x,
            y: extendedFrame.frame.y,
            width: mainWidth,
            height: extendedFrame.frame.height,
          };
        } else {
          frame = {
            x: extendedFrame.frame.x,
            y: extendedFrame.frame.y,
            width: extendedFrame.frame.width - mainWidth,
            height: extendedFrame.frame.height,
          };
        }
        return { ...frames, [extendedFrame.id]: frame };
      }, {});
    },
  };
}