How to access TextElement of node content on mouseOver event?

[Dominique Toussaint]

I am using an ImageElement and TextElement in node template property of a diagram, I want to access the TextElement so I can change the color of the text on hover to white.

But on the moseOver event parameter I can't access child TextElement so I could change the color and this doesn't help:

onMouseOver(event){

//console.log("On mouse over event", event);

if(event.actualObject.propName === 'nodes'){

event.actualObject.style = {

fill: '#d45e23',

color: '#fff'

}

}

}

Any ideas how I can access the color of the TextElement?

Also is there possibility to access elements over some class name?

[Shyam G]

Hi Jiway, 

 

Query	Response
I am using an ImageElement and TextElement in node template property of a diagram, I want to access the TextElement so I can change the color of the text on hover to white.    But on the moseOver event parameter I can't access child TextElement so I could change the color and this doesn't help:  Any ideas how I can access the color of the TextElement?	We have created a sample in which we have changed the font color of a Text to red from black in the mouseOver event. Please refer to a code example and sample below.    Code example:  <DiagramComponent id="diagram" width={"100%"} height={"700px"} nodes={nodes}                   mouseOver={(args) => {                        if(args.actualObject) {                          //set the text color                           args.actualObject.properties.style.color = "red"                        }                       }}                 />      Sample: https://stackblitz.com/edit/react-fo4nrp-emc8tr?file=index.js
Also is there possibility to access elements over some class name?	Could you please share us an exact scenario why do you need to access the DOM elements?

 

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam,

thank you first for your answer, I will try it. Regarding your question, because I think it would be easier to change CSS from class names in .scss files for example then to do it in JavaScript. You don't need scenario in order to see it would be easier to change style with css, that is it all-purpose to style DOM elements.

Regards,

Jiway S.A.

[Dominique Toussaint]

Hi again Shyam,

I saw that your sample works, but I am afraid we have misunderstanding I am using TextElement like it is used in your online overview panel example (https://ej2.syncfusion.com/react/demos/?utm_source=installer&utm_medium=listing&utm_campaign=controlpanel#/material/diagram/overview), I don't want my whole node to be of shape type 'Text' like it is in your example. And I tried your solution but it doesn't work for a TextElement imported from @syncfusion/ej2-react-diagrams, even though event.actualObject.properties.style.color is not undefined and it changes its color but nothing happens on the screen, that is the changes are not rerendered.

Best regards,

Jiway S.A

[Shyam G]

Hi Jiway, 

 

Query	Response
thank you first for your answer, I will try it. Regarding your question, because I think it would be easier to change CSS from class names in .scss files for example then to do it in JavaScript. You don't need scenario in order to see it would be easier to change style with css, that is it all-purpose to style DOM elements.	We can style the node in CSS file by using its id. Please refer to a code example and sample below.    Code example:  Index.css    #Rectangle_content{    fill: red  }    Note: Rectangle is an node id.      Sample: https://stackblitz.com/edit/react-fo4nrp-g1komh?file=index.css
I saw that your sample works, but I am afraid we have misunderstanding I am using TextElement like it is used in your online overview panel example (https://ej2.syncfusion.com/react/demos/?utm_source=installer&utm_medium=listing&utm_campaign=controlpanel#/material/diagram/overview), I don't want my whole node to be of shape type 'Text' like it is in your example. And I tried your solution but it doesn't work for a TextElement imported from @syncfusion/ej2-react-diagrams, even though event.actualObject.properties.style.color is not undefined and it changes its color but nothing happens on the screen, that is the changes are not rerendered.	The TextElement in a overview view sample is a custom panel in diagram. So, it is not possible to change the custom panel object  properties dynamically.

 

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam,

hope this will be changed in the future.

Best regards,

Jiway S.A.

[Shyam G]

Hi Jiway, 

 

The TextElement is the container's children and is a custom element. We processed it internally and did not expose it to change its properties dynamically. Also, it is not a feasible feature. 

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam G,

nevermind, shape type HTML of node works well as well.

Best regards,

Jiway S.A.

[Shyam G]

Hi JIway, 

  

Thanks for your update. 

  

Regards, 

Shyam G