For the newly added nodes/connectors, properties/ constraints which are set are not getting applied

[Sudhanshu Jain]

Hi ,

Below is the issue and expected output,

Issue: If a newly added node is set with an annotation or a connector is set with a constraint then the change is not reflected.

Only on save and re-rendering of the diagram component the changes are reflected.

Expected output: When a new node/connector is added from the symbol palette, whatever the properties are set on the respective node/connector should be reflected on addition to the flow

Please let me know if there is any solution to achieve the expected output.

Thanks

[Shyam G]

Hi Sudhanshu Jain, 

Could you please confirm us when we drag a node/connector from the palette onto the diagram, the properties are not added in the diagram? If yes, we are unable to replicate an issue at our end. In the below sample, we have added one node and connector in the symbol palette. For node, we have added an annotation and for connector we have removed drag constraints. The properties will be reflected once the shape is added in the diagram. 

If we misunderstood your requirement, please share us more details such as explain your requirement in detail with video or screenshot. 

Here is the sample for your reference. 

Sample: https://stackblitz.com/edit/react-kdtj6j?file=index.js 

Regards, 

Shyam G 

[Sudhanshu Jain]

Hi Shyam,

The solution you provided was helpful, we were trying to provide the data dynamically when a node/connector is dragged based on type of the node/connector.

Is it possible to add the properties dynamically instead of storing them before?

Thank you

[Shyam G]

Hi Sudhanshu Jain, 

To achieve your requirement, please change the node/connector properties in dragEnter event. This event triggers when a dragged node from palette with mouse enters a diagram. 

Please refer to a code example and sample below. 

 

Code example: 

<DiagramComponent 

//DragEnter event. 

 dragEnter={(args) => { 

            let obj = args.element; 

            //check whether is a node 

            if (obj instanceof Node) {  

                //change the node annotation. 

                obj.annotations = [{ 

                  content: 'NewNode' 

                }] 

                obj.style = { fill: "#357BD2", strokeColor: "white" }; 

            } 

           //check whether is a node 

            if(obj instanceof Connector) { 

              //change the connector properties 

              obj.style.strokeColor="red"; 

              obj.constraints= ConnectorConstraints.Default &~ ConnectorConstraints.Drag; 

            } 

        }} 

        /> 

 

Help documentation: https://ej2.syncfusion.com/react/documentation/api/diagram/#dragenter 

 

Sample: https://stackblitz.com/edit/react-kdtj6j-sq9mmq?file=index.js 

Regards, 

Shyam G 

[Sudhanshu Jain]

Thanks Shyam, your solution was needful. 

[Shyam G]

Hi Sudhanshu Jain,  

Thanks for your update. 

Regards, 

Shyam G