How to add bullets/numbering to annotations in Vue Diagram component?

This article explains how to add bullets/numbering to annotations in the Vue Diagram component. In Syncfusion® Vue Diagram, we don’t have a built-in feature to add bullets/numbering to node/connector annotations. However, we can achieve this functionality by incorporating the Rich Text Editor into the diagram. By using the HTML template node, we can integrate the Rich Text Editor within the diagram. To implement this, we make use of the node template property of the diagram to render the Rich Text Editor.

<ejs-diagram
 ref="diagramObject"
 id="diagram"
 :width="width"
 :height="height"
 :nodes="nodes"
 :nodeTemplate="nodeTemplate"
></ejs-diagram>

 data: function () {
   return {
     nodeTemplate: function () {
       return {
         template: createApp({}).component('nodeTemplate', NodeTemplate),
       };
     },
     width: '100%',
     height: '645px',
     nodes: nodes,
   };
 },

After rendering the diagram with the integrated Rich Text Editor, if you wish to enable bullet points for typing and encounter an issue where pressing the Enter key does not move the cursor to the next line, you can resolve this by leveraging the commandManager property of the diagram. This property allows you to modify the behavior and ensure that pressing Enter appropriately moves the cursor to the next line.

The Command Manager allows you to define custom commands with properties such as execute, canExecute, gesture, parameter, and name.

• execute - A method to be executed.
• canExecute - A method to define whether the command can be executed at the moment.
• gesture - A combination of keys and KeyModifiers
• parameter - Defines any additional parameters that are required at runtime.
• name - Defines the name of the command.

We have enabled the Enter key without restrictions by specifying the Enter key in the gesture property and returning the canExecute function as false.

<ejs-diagram
 ref="diagramObject"
 id="diagram"
 :width="width"
 :height="height"
 :nodes="nodes"
 :nodeTemplate="nodeTemplate"
 :commandManager="commandManager"
></ejs-diagram>

data: function () {
   return {
     width: '100%',
     height: '645px',
     nodes: nodes,
     commandManager: {
       commands: [
         {
           name: 'customCopy',
           parameter: 'node',
           // Method to define whether the command can be executed at the current moment
           canExecute: function () {
             
             return false;
           },
           // Command handler
           execute: function () {},
           // Defines that the command has to be executed on the recognition of key press.
           gesture: {
             key: Keys.Enter,
           },
         },
       ],
     },
   };
 }

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to add bullets/numbering to annotations in the Vue Diagram component.

You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!