ACP Flexbox

From the Draft spec Google Doc:

ACP FlexBox will be implemented initially as the diagram being the Container of the FlexBox Items, and the FlexBox Items will typically be large Text nodes that contain input and output nodes, Tall nodes and Frame nodes. I suppose other nodes could be designated as a FlexBox Item e.g. a Picture node. Nodes that are not FlexBox Items or contained within a FlexBox Item will not be displayed.

Module Level AcpStyles display: flex – Specifies that the diagram is a FlexBox Container. flex_direction: row (default) or column – Specifies that flex boxes be arranged horizontally or vertically in the Flex Container. flex_wrap: wrap (default) or no_wrap – Specifies if FlexBox items should wrap when exceeding the end of the Flex Container. 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. Node Level AcpStyles flex_box_item: yes or no - Specifies that 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. This would probably mainly be used with Text nodes or Picture nodes to mark them as FlexBox Items.

From the Suan EW issues, ,1956,1957

ER 1955 - Flex Box layout

This is just a first step so the demo will work in production. 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 this demo will not work in the future. Module Level AcpStyles Node Level AcpStyles flex_box_item: yes or no - Specifies that 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. This would probably mainly be used with Text nodes or Picture nodes to mark them as FlexBox Items.

You can use the Example model attached to the EW issues. File:Market Model Demo.ana~

• In the top level diagram, add cps style 'display: flex'.
• 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.