A collection of fixes and additions

[msteinmn]

I created a number of fixes and some additions you might find useful. They are separated by commits, with a few bug fixes in later commits.

The additions are summarized like that:

Allow nodes to be React components and not just styled divs
Adjust for chart offset origin different than 0,0 and scrolling
Added a resize observer to detect node size changes and re-render ports and links
Node size now adjusts properly, re-rendering ports and links on node size change
Allow nodes to be rotated with ports rotating accordingly. New prop orientation on the node defines the angle of rotation of the node (ports rotate automatically, the node needs to be given specific css to rotate it)
Exported actions so that it can be used with the FlowChart component
Added a validation function (needs some more work) for new links
Added nodeProps prop to Flowchart so that data can be sent to e.g. autocomplete menu options inside nodes (spread to Node and InnerNode)
Added boolean snap prop to Flowchart to enable snap to grid for node placements

[nathan-haines]

These are some great fixes, would love to utilize these

[MrBlenny]

Yep, sorry. Had a busy couple of weeks. Hoping to get it merged this weekend.

[MrBlenny]

I've added a few more changes here. I'm not quite sure how to make the rotation changes work. Any chance you can make the CustomNodeInner demo work?

[msteinmn]

I like the way you made the config object much more generic and added the validation function for links into it. Very nice.

For the rotation to work three things have to be true:

1. the node object inside the chart prop has to include a field 'orientation' like so: orientation: -45,
   So every time you create a rotated node it has to include this prop, where 45 is the angle in deg.
2. the outer custom node then has to include css to rotate it, like so:

class Node extends React.PureComponent {
render() {
const { nodeProps, node, children, isSelected, style, ...otherProps } = this.props;
const selectedStyle = isSelected ?
{ boxShadow: '8px 8px 12px rgba(0,0,0,.5)' } : null;

    const { transform, ...otherStyles } = style;
    return (
      <div
        style={{
          transform: `${transform} rotate(${-node.orientation}deg)`,
          ...otherStyles,
          ...styles.outerNode,
          ...selectedStyle,
        }}
        {...otherProps}
      >
        {children}
      </div>
    );
}

}

3. the custom inner node has to be rotated back so that its content remains horizontal, like so:

const NodeInner = ({ classes, node, nodeProps }) => {
return (
<div className={classes.innerContent} style={{ transform: rotate(${node.orientation}deg) }}>
{other inner node content}

)
}

On another note I remember you mentioned somewhere that you convert the resulting chart object into an array for storage and further processing. Could you share the function that does this conversion back and forth and the format you use?

[msteinmn]

And one more thing: I also introduced additional port types to provide styles so that the ports align properly in the corners of the now rotated node like so:

cornerLeft: {
height: '80%',
marginTop: '20%',
top: '6px',
right: '80px',
flexDirection: 'column',
justifyContent: 'flex-end',
'> div': {
margin: '3px 0',
},
},
cornerRight: {
height: '80%',
top: '-3px',
right: '-6px',
flexDirection: 'column',
justifyContent: 'flex-start',
'> div': {
margin: '3px 0',
},
},
cornerTop: {
height: '80%',
marginBottom: '20%',
top: '-6px',
right: '80px',
flexDirection: 'column',
justifyContent: 'flex-start',
'> div': {
margin: '3px 0',
},
},
cornerBottom: {
height: '100%',
top: '0px',
right: '-6px',
flexDirection: 'column',
justifyContent: 'flex-end',
'> div': {
margin: '3px 0',
},
},

This can also be used for non-rotated nodes to align ports in a corner.

[alexkuz]

maybe there should be a helper that uses either native ResizeObserver (see Canvas.wrapper.tsx) or this lib?

[msteinmn]

I cannot help with that.

[msteinmn]

Do you need me to add anything to the info provided above?

[sosafe-tobias-justinger]

Would be great if you could merge. :)

[MrBlenny]

Merged as part of #40