Autodesk Forge Markup3D annotation, how to display the dimension information added last time after entering the model next time?

Autodesk Forge3D tagging, users add annotation information on this page, record coordinate data, exit the page, and wait until the next time the user enters the page and the page is reloaded, how to display the information marked by the user last time?

https://github.com/Autodesk-F., using this extension pack.

Markup3D.PinPoint.js:

constructor(viewer, worldPoint) {
    ......

    this.activateLock3d(viewer);
    this.setWorldPoint(worldPoint);

    this.timeoutId = 0;
  }

setWorldPoint ({"x": 32.04636390620801, "y": 218.75012207031264, "z": 13.843699405939578}) is the setting start coordinate

Markup3D.Label.js:

onMouseMove (event) {

    if (this.parent.dragging) {

      this.parent.setLeaderEndPoint({
        x: event.clientX,
        y: event.clientY
      })
    }
  }

setLeaderEndPoint ({"x": 800, "y": 500}) set end coordinates

how do I execute this method to draw my own coordinate points when the page is reloaded? Or is there another way to operate?

Autodesk-forge javascript markup

Mar.22,2021

you can obtain the Markup information of Philippe MarkUp3D through viewer.getState () and record this information in the database. After reloading the model, you can reply by executing viewer.restoreState (viewstate) , because after loading the MarkUp3D extension, your viewState will have an attribute called Markup3D . When replying, the MarkUp3D extension will read this attribute and restore the Markup to the screen. My test code is as follows:

var viewstate = viewer.getState();
viewer.restoreState( viewstate );

data structure:

I hope it will be helpful to you

save: var info = viewer.getState ();

        var str = JSON.stringify(info);
        document.inputForm.elements["markup"].value = str;

Why recovery has no effect:
function onDocumentLoadSuccess (doc) {

        // A document contains references to 3D and 2D viewables.
        viewables = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {'type':'geometry'}, true);
        if (viewables.length === 0){
            console.error('Document contains no viewables.');
            return;
        }
        // Choose any of the avialble viewables
        var initialViewable = viewables[0];
        var svfUrl = doc.getViewablePath(initialViewable);
        var modelOptions = {
            sharedPropertyDbPath: doc.getPropertyDbPath()
        };
        
        var viewerDiv = document.getElementById('MyViewerDiv');
        viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv,{
            extensions: ['Autodesk.ADN.Viewing.Extension.BasicES2015','Viewing.Extension.Markup3D']
        });
        /**
        ,'Autodesk.Viewing.MarkupsGui' //2D
        ,'Autodesk.ADN.Viewing.Extension.PropertyListPanel' //
        ,'Autodesk.ADN.Viewing.Extension.Material'
        ,'Viewing.Extension.Markup3D' //3D
        ,'Autodesk.Billboard',
        ,'Autodesk.MyBillboardGui'
        */
        var errorCode = viewer.start();
        // Check for initialization errors.
        if (errorCode) {
            console.error('viewer.start() error - errorCode:' + errorCode);
            return;
        }
        // Choose any of the available viewables.
        indexViewable = 0;
        lmvDoc = doc;
        var markup = ${markup};
        alert(markup);
        if (markup!=null && markup != ""){
               viewer.restoreState(markup);
        // Everything is set up, load the model.
        loadModel();
    }

Previous: Mobile phones cannot be accessed through ip during vue-cli development

Next: Socket.io cannot connect under a different wifi (ip address)?