search

MrBlenny / react-flow-chart

🌊 A flexible, stateless, declarative flow chart library for react.
https://mrblenny.github.io/react-flow-chart/index.html
MIT License
1.46k stars 306 forks source link

Selecting Side in PortsGroup #215

Closed travisfalls closed 3 years ago

travisfalls commented 3 years ago

I'd like to line all of my ports up on the right side. I can see that there is different css based on top, bottom, left or right in PortsGroup.default but I can't figure out how I am to choose right instead of bottom. Can anyone point me to documentation or explain what to do?

georginaso commented 3 years ago

In the storybook you can find an example: https://mrblenny.github.io/react-flow-chart/index.html?path=/story/sidebar--drag-and-drop

You should use the "type" attribute inside each port config to set the position, e.g.:

const ports = {
  port1: {
    id: "port1",
    type: "right",
  },
  port2: {
    id: "port2",
    type: "bottom",
  },
};
georginaso commented 3 years ago

You can also use "input" for top side and "output" for bottom side.

['input', 'top'] -> top ['output', 'bottom'] -> bottom ['right'] -> right ['left'] -> left

travisfalls commented 3 years ago

Thanks @georginaso! That did it. I appreciate the help.