The Workflow Layout Package

The purpose of the layout package is to decouple the interface for writing layouts and implementing windows manager adapters. This package takes a flow defined in the form of an abstract flow tree (AFT) and transform it into a concrete flow tree (CFT). The CFT is the common interface which is supported by all windows manager adapter, while an AFT is more expressive and eases writing layouts.

This package is replaceable as long as the replacement produces a tree which adheres to the rules of the CFT.

Usage

const { WorkflowLayout } = require("workflow-layout");

cont workflow = require("workflow-core").workflow({
  layout: new WorkflowLayout(),
  ...
});

const screen = { top: 0, left: 0, width: 1024, height: 768 };

const cft = workflow.layout(aft, {screen});

The Abstract Flow Tree

The abstract flow tree consists of three types of nodes. The root node is a workspace node, it can contain one or more layout nodes as children, or a single app node. Each of the layout nodes can contain one or more layout or app nodes. The app nodes are the leaf nodes, they are free to contain child nodes, but these are not managed by the layout package.

The notable differences between the nodes in the AFT and the CFT are the custom, relative, and absolute layout nodes. The absolute and relative nodes are for absolute and relative positioning respectively and are translated into float nodes in the CFT. The custom is used to implement layout abstractions. See workflow-layout-yoga for an example of using the custom node to support css Flexbox using Yoga. All custom nodes implement a function which returns a sub-tree with nodes adhering to the rules of the AFT. The AFT is recursively evaluated to generate a valid CFT.

const workspace = {
  type: "workspace",
  children: fill | app | splith | splitv | [ absolute ],
}

const custom = {
  type: "layout",
  layout: () => fill | splith | splitv | relative | absolute
}

const fill = {
  type: "layout",
  layout: "fill",
  percent: 1.0, // If parent is splith | splitv
  children: [ splith | splitv | custom | *relative | app, *absolute ]
};

const splith = {
  type: "layout",
  layout: "splith",
  percent: 1.0, // If parent is splith | splitv
  children: [ *(splith{percent} | splitv{percent} | fill{percent} | app{percent} | custom{percent}), *absolute ], // sum(percent) === 1
};

const splitv = {
  type: "layout",
  layout: "splitv",
  percent: 1.0, // If parent is splith | splitv
  children: [ *(splith{percent} | splitv{percent} | fill{percent} | app{percent} | custom{percent}), *absolute ], // sum(percent) === 1
};

const relative = {
  type: "layout",
  layout: "relative",
  position: { top: 0, left: 0, width: 100, height: 100 }, // relative to parent
  children: [ fill | app | split | splitv | custom, *absolute ],
};

const absolute = {
  type: "layout",
  layout: "absolute",
  percent: 1.0, // If parent is splith | splitv
  position: { top: 0, left: 0, width: 100, height: 100 } // relative to workspace
  children: [ fill | app | split | splitv | custom, *absolute ],
};

const app = {
  type: "app",
  open: <>,
  percent: 1.0, // If parent is splith | splitv
  children: [<>],
}

The Concrete Flow Tree

All nodes in the concrete flow tree contains the absolute position of the node on the screen.

const workspace = {
  type: "workspace",
  position: { top, left, width, height }, // absolute
  children: [ fill | app | splith | splitv, *float ],
}

const fill = {
  type: "layout",
  layout: "fill",
  percent: 1.0, // If parent is splith | splitv
  position: { top, left, width, height }, // absolute
  children: [ splith | splitv | *float | app ]
};

const splith = {
  type: "layout",
  layout: "splith",
  percent: 1.0, // If parent is splith | splitv
  position: { top, left, width, height }, // absolute
  children: [ *(splith{percent} | splitv{percent} | fill{percent} | app{percent}) ], // sum(percent) === 1
};

const splitv = {
  type: "layout",
  layout: "splitv",
  percent: 1.0, // If parent is splith | splitv
  position: { top, left, width, height }, // absolute
  children: [ *(splith{percent} | splitv{percent} | fill{percent} | app{percent}) ], // sum(percent) === 1
};

const float = {
  type: "layout",
  layout: "float",
  percent: 1.0, // If parent is splith | splitv,
  position: { top, left, width, height } // absolute
  children: [ fill | app | splith | splitv ],
};

const app = {
  type: "app",
  open: <>
  percent: 1.0, // If parent is splith | splitv,
  position: { top, left, width, height } // absolute
  children: [<>],
}