How to pass data to `potentialNode`

[jolivaSan]

Hi,

Not sure if this is the correct category for that issue, im trying to understand how can i pass the consumerData or any custom data to the potentialNode, I mean when i define the library panel the nodes that can be drag to the diagram i create something like this:

<div class="node-adapter" data-id="node_adapter" data-type="DiagramMaker.PotentialNode"
    data-draggable="true" data-event-target="true" data-consumer-data="hi">
</div>

How can i pass custom data to the potentialNode so when i drag the node and also when is finally is created i can use this info to render the node correctly, im thinking in things as usual as the name of the node....

Best regards.

[boweihan]

Hi @jolivaSan - see https://awslabs.github.io/diagram-maker/usage/declarative.html#customizing-the-node-connectors for customizing your own nodes. Depending on how you're using the library you should be able to either create your own custom node component or directly override CSS classes.

[jolivaSan]

Hi @boweihan,

thanks for you answer, that exactly what im using :-) let me reformulate the question, apart from data-id is there any other attribute that i could use to pass custom information and be received by the render of the potential node and also the node?

Best Regards.

[dpportet]

Hi @jolivaSan,

I think you'll want to utilize the typeId field when defining the node config and then use that field in the render callback.

Taking a look at one of the examples, you can see typeId being defined for each node in the config data: https://github.com/awslabs/diagram-maker/blob/master/integ/BoundaryCircular/data.ts#L16.

That typeId is then used in the render callback to render different nodes based on the type provided: https://github.com/awslabs/diagram-maker/blob/master/integ/BoundaryCircular/render.ts#L43.

Let us know if that works for you.