1. Home
  2. Forum
  3. React - EJ 2
  4. Port CustomStyle + MouseOver

Port CustomStyle + MouseOver

hi,

I've created nodes with custom html+css.

Now I would like to style my ports. Is there a way to do this with html+css?

If not, I can make my port transparent and place an div below the port, which works fine.

But then I have the problem, that its mouseover-event doesn't get fired because the port above is covering the div.

How can I bubble the event to the custom div below the port so that I can do something onmouseover (brighen it up).

I also checked the css-classes but I guess the hovering over a port is not firing a css-class:hover, right?

Best regards


5 Replies
SS Sivakumar Sekar Syncfusion Team December 2, 2021 12:16 PM UTC

Hi Tobias, 

We have added the sample link and a video link to demonstrate how to change the style of the port when hovering it. we suggest you apply CSS for the port as shown in the below code. So that while the mouse hovers on the port the styles will be applied to the port. 

#node1_port1:hover{ 
  fill:red; 
  stroke-width: 20px; 
  stroke: red; 
} 



Regards,  
Sivakumar    




TK Tobias Koller December 2, 2021 12:26 PM UTC

thanks for your answer!

so the html-id of the port is always {nodeid}_{portid}?

In this case I would have to know the id at design-time, right?

is there a way to access the style at runtime?


Best Regards

Tobias


AR Aravind Ravi Syncfusion Team December 3, 2021 12:51 PM UTC

Hi Tobias, 

We have created a sample to change the style for the ports at runtime. By using the node.id_port.id you can get the port element from the dom and change its style using the DOM setAttribute method. By using the diagram selectedItems property you can able to get the selected node in the diagram. After get the node, you can iterate the node’s port collection and change its appearance at run time. Similarly, you can add your own customization style for port as in below code snippet.  Please refer to the below code snippet and sample 

function clickHandler() { 
  var node = diagramInstance.selectedItems.nodes[0]; 
  for (var i = 0; i < node.ports.length; i++) { 
    var port = document.getElementById(node.id + '_' + node.ports[i].id); 
    port.setAttribute('style', 'fill:red'); 
  } 
} 


Regards 
Aravind Ravi 


TK Tobias Koller December 4, 2021 05:43 AM UTC

hi Aravind,

thank you for this!

I would have to change this style when I create the node.

I guess there is no way to edit this style when creating a port at runtime, right?

But there is the collectionchange-event where I could grap the newly added node (only at this point. 

can you provide a sample how to identify what kind of element was added to the diagram?


this is how I identified nodes and connections today:

   function isNode(element: NodeModel|ConnectorModel): boolean{
      return element && "ports" in (element as any);
    }
    function isConnection(element: NodeModel|ConnectorModel): boolean{
      return element && "sourceID" in (element as any);
    }
   

but this wouldn't identify p


AR Aravind Ravi Syncfusion Team December 6, 2021 12:45 PM UTC

Hi Tobias,

We have created a sample to notify the collectionChange event. Whenever we add a new node or connector in the diagram, collectionChange event gets fired. In that event through element argument we can find whether the added symbol is node or connector. In collectionChange event you can check if element instanceOf node or not. If it is node means then you can get the node’s ports and change its color. Please refer below code snippet or sample


 
collectionChange={(args) => { 
              if (args.state === 'Changed' && args.type === 'Addition') { 
                if (args.element instanceof Node) { 
                  alert('Node has been added'); 
                } else { 
                  alert('Connector has been added'); 
                } 
              } 
            }} 


Regards 
Aravind Ravi 


Loader.
Up arrow icon