woodenconsulting / react-js-diagrams

A flow based diagramming library written in React
MIT License
220 stars 61 forks source link

add more than one port #33

Open AhmadQudah opened 5 years ago

AhmadQudah commented 5 years ago

how can I make many ports at the same node multiple in-ports and out-ports I made it but the link still goes out from the default port

Smitgamit commented 5 years ago

Please check this file

1.Node Model

this.addPort(new RJD.DefaultPortModel(false, 'output', ''));
this.addPort(new RJD.DefaultPortModel(true, 'input', ''));

getInPort() { return this.ports.input; }

getOutPort() { return this.ports.output; }

2.Node Widgets

getInPort() { const { node, color, displayOnly } = this.props; let inputNode = node;

if (displayOnly) {
  inputNode = new OutputNodeModel( color);
}

return inputNode.getInPort ? <RJD.DefaultPortLabel model={inputNode.getInPort()} key='in-port' /> : null;

}

getOutPort() { const { node, color, displayOnly } = this.props; let outputNode = node;

if (displayOnly) {
  outputNode = new OutputNodeModel( color);
}

return outputNode.getOutPort ? <RJD.DefaultPortLabel model={outputNode.getOutPort()} key='out-port' /> : null;

}

Smitgamit commented 5 years ago

note : OutputNodeModel should be your object name

AhmadQudah commented 5 years ago

@Smitgamit thats good , put I think that this way is for adding just one input port and one output port my point is how to add like 3 input ports and 3 output ports

Smitgamit commented 5 years ago

ok

do you have any suggestion for below query when i click on node add new node on canvas lilke i click on connection node add new connection node on canvas

AhmadQudah commented 5 years ago

not really, but I made this also I'm searching for a way to save my diagram so I can use the previous flows in the future .... do you have any idea for that ?? capture

quocvan1311 commented 5 years ago

Any new update for this? I would like to add a Node with mutliple in-ports, but it seems multiple call addPort function leave only 1 port each type.