Add group nodes (composition) example

[afonsobspinto]

As per last call, the composition will be visualised as a square that contains all the nodes inside.
We need to prototype this component, keeping in mind that:

when we drag and drop the compositions all the content will move with it.
I can still drag and drop any single node inside
if a node gets dropped outside the composition then it's not part of that anymore.
The focus of this card is more on the functional side rather than the concept of composition itself within psyneulink, so the 3 key points above are the things that we should focus implementation wise.

[zsinnema]

@afonsobspinto how are you going to calculate the minimum bounding box of a component for determining drag in & drag out

or does the psyneulink library already provides this?

[zsinnema]

@afonsobspinto imo a component with a parent should have relative coordinates related to it's parent so that the component can redraw itself (if it gets or retrieves the parent component position)

[afonsobspinto]

Dropping here some relevant links:
projectstorm/react-diagrams#27

Will comment again when I have a plan for this issue

[afonsobspinto]

Meeting summary:

• Communication between application and library through MetaNodes.
• Add onChanges callback to library props to be called when diagram changes (for now, a good place to call the callback would be on repaintCanvas which is listening on positionChanged event from react-diagrams). As callback's parameters pass the new state of the MetaNodes changed (either a new object or the same provided through props); In order to achieve this we need to know to which MetaNode a MetaNodeModel matches which we can do by mapping them on MetaNodeModel creation (which happens on generateMetaGraph)
• Add onMount callback to library props to be called when MetaDiagrams mounts. Pass as callback parameter the react-diagrams model) - this will allow applications to have access to the MetaNodeModel for exceptional use cases.

Feel free to change or remove MetaGraph if it doesn't fit with the vision we just discussed.

Done:

• Group Movement (We are listening for changes in node positions, when a node changes position the function handleNodePositionChanged gets called and there we update the children world position by the same delta; and we update the node local position; world position is the position in react-diagrams, local position is the relative position to the parent)
• Half of parent wrapping child feature (on the component did mount we traverse all the MetaNodes graph and calculate the minWidth and minHeight for the parent to contain all his children, we set the value as an option in the MetaNodeModel so that application can use it to render the UI as it wants to)

To Do:

• Remove BoundingBox class and refactor getContainerBoundingBox to use Rectangle instead
• Complete handleNodePositionChanged logic by adding the following functionalities:
  - Update node parent (add or remove parent depending on the UI position and if it's inside or not)
  - If we are to keep MetaGraph you will need to update the MetaNodeModel graph path in case of parent changes
  - Potentially update the BoundingBoxes of the parents