How can I modify a node to show a different image and place the in and out ports at specific positions on the image? I work in the RF world and what to make a diagramming tool of the system layouts that are in building and venues. So I need E.G. (a two port splitter) as a specific model with two input and one output... These need to work in both directions so that I can calculate signal levels going down and up through this component (node). There are a couple dozen standard components that I want to build and use in a diagram mode to allow a functional schematic to be drawn and the signal level calculated and show across the diagram.

I would prefer pasting a small PNG or GIF file into the node as the image of what the node would look like. Something in the 120x120px range, though most items are not square in shape and the number of ports and the directions of flow change based on the type of device. This is for RF over coax and over fiber, but the basics of the math are pretty straight forward.

In the example above, the 2 port splitter, the item can be used to split the signal from the 1 port out the 2 ports with a splitting of the signal's power. This would be the Downlink path. At the same time, separate signals on the 2 port are summed together to the 1 port. This is the Uplink path. I won't bore you with the rest of the RF math rules.

Here is an example of the image I would like to mask the node with for the 2 port splitter.

image

So how can I do that? The documentation at (https://projectstorm.gitbook.io/react-diagrams/customizing/nodes) starts to talk about customizing a node, but doesn't go very far.

Thanks for considering this question and any guidance/recommendations you can provide.