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.

From EW 1955: 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.

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.

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 if FlexBox items should wrap when exceeding the end of the Flex Container.

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.

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