ACP Flexbox

From the Draft spec Google Doc:

ACP FlexBox borrows from the CSS Flexbox to make ACP layouts responsive to the width of the browser window to make ACP more useable on phones and tablets. For example, if a diagram contains text, and frame or tall nodes arranged from left to right in diagram in Desktop Analytica, when viewed in ACP on a narrow screen, Flexbox may rearrange the text nodes one above the other.

Status

The current implementation is partial and experimental for testing ideas. From EW 1955: This is just a first step. There are still a lot of things to do to get this feature complete. It's likely the specs for the feature will change and that the current demo may not work in the future.

Example model

You can use this Example model which is included in the EW issues. File:Market Model Demo.ana

• Explanation:
• In the top level diagram, add cps style display: flex – Specifies that the diagram is a FlexBox Container.
  • In the large text boxes, add flex_box_item: yes.
  • The frame node is included by default.

Expected: On the diagram, the two large text nodes with inputs / outputs and pictures appear. And there's a frame node. The node Va1 and the Analytica logo also have been added as flex box items.

FlexBox items

If you specify a top level diagram as a Flexbox Container using ACP Style, display: flex it treats any large Text node <How large?> that contains input and output nodes, Tall nodes and Frame nodes as items that can be rearranged within . Later we might add other node types as FlexBox Item e.g. Picture nodes.

Within a Flexbox container, it does not display any nodes that are not FlexBox Items or contained within a FlexBox Item.

Module Level AcpStyles

ER 1955 - Flex Box layout

• In the top level diagram, add cps style .

display: flex – Specifies that the diagram is a FlexBox Container.

ER 1956 - Flex Direction

flex_direction: row (default) or flex_direction: column– Specifies that flex boxes be arranged horizontally or vertically in the Flex Container.

ER 1957 - Flex Wrap

flex_wrap: wrap (default) or flex_wrap: no_wrap – Specifies that FlexBox items should wrap -- i.e. when displayed horizontally, items that would exceed the width of the Container, will be put on next row beneath the initial items.

Node Level AcpStyles

flex_box_item: yes or flex_box_item: no - Specifies whether or not a node should be treated as a FlexBox Item. The default would be Yes for Tall Nodes and Frame Nodes, and No for other node classes.

Proposed - Not implemented

• flex_v_align: top (default), center or bottom – Specifies the vertical alignment of the FlexBox Items.
• flex_h_align: left (default), center or right – Specifies the horizontal alignment of the FlexBox Items.
• flex_gap: Number of pixels 8 (default) – Specifies the gap or margin between FlexBox items.