Annotation with default template

Question

hi,I would like to style all annotations with the same way.is there a way to define a default style for annotationsif not, which event gets fired after an annotation was added (or onAdding so I can style it then) your online-examples (at least the one I found) always style exiting annotations or adding them programmatically.Best regardsTobias

Aravind Ravi · Answer

Hi Tobias, 

We have created a sample to set default style for the annotations. At the time of every node and connector render getNodeDefaults call back method gets trigger for node and getConnectorDefaults call back method gets trigger for connector . In the node and connector defaults method set style for the annotation. So, for every node and connector’s annotation default style is set.  When you add or edit annotation at runtime means then the style set in callback method gets applied to the annotation. Please refer to below code example for how to set style for annotations in the node defaults method. 





getNodeDefaults={(obj) => { 
                //Sets the default values of a node 
                obj.width = 100; 
                obj.height = 100; 
                obj.shape = { type: 'Basic', shape: 'Ellipse' }; 
                obj.style = { fill: '#37909A', strokeColor: '#024249' }; 
                obj.annotations = [ 
                  { 
                    style: { 
                      color: 'white', 
                      fill: 'none', 
                      strokeColor: 'none', 
                      bold: true, 
                    }, 
                  }, 
                ]; 
                return obj; 
              }} 
              getConnectorDefaults={(obj) => { 
                //Sets the default values of a Connector 
                obj.targetDecorator.style = { 
                  fill: '#024249', 
                  strokeColor: '#024249', 
                }; 
                obj.annotations = [ 
                  { 
                    style: { 
                      color: 'blue', 
                    }, 
                  }, 
                ]; 
                return { style: { strokeColor: '#024249', strokeWidth: 2 } }; 
              }} 

Sample: https://stackblitz.com/edit/react-hki6ro 

Regards 
Aravind Ravi