Add note info

The following example demonstrates the adding a note with a moving effect

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>M2Diagram add note demo</title>
    <script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
 </head>
 <body>
    <button type="button" onclick="addNote();">
        Click to add a note
     </button>
    <div style="text-align:center;margin-top:20px;">
        <div id="canvas" style="width:750px;height:450px;border:1px solid #333;"></div>
    </div>
    <script>
        let options = { apiKey: 'YOUR_PUBLISHABLE_API_KEY' };
        let diag = new m2Diag.Engine('canvas', options);
        let projectId = 'YOUR_PROJECT_ID';
        diag.loadCloudData(projectId);

        function addNote(){
            let ms = new m2Diag.MoveAddNoteState(diag, 'it is a note');
            diag.state = ms;

            // if you want to get the new added note instance, bind the onNoteAdded event
            ms.onNoteAdded = function (note) {
                console.log(note);
            }
            // or do something if the user right-click to cancel
            ms.onNoteCanceled = function () {
                // do something
            }
        }
     </script>
  </body>
</html>

results matching ""

    No results matching ""