Draw multiple annotation at once in PDFTron

Question

I am trying to add Guidance Grid on PDFTron so user can add annotation easily. Later on if user is moving annotation and if its near to the Grid line then it should be fetch to that grid line. As a first part i am trying to draw a Guidance Grid.

Below is the code which i have added so far:

WebViewer({
        licenseKey: '',
        path: './public/webviewer',
        css: './css/pdftron-custom.css'
}, document.getElementById('pdfEditor') as HTMLElement).then(async(instance: WebViewerInstance) => {
    webViewerInstance = instance;
    webViewerInstance.docViewer.on('documentLoaded', async() => {
            await this.loadAnnotations();
            const pagesCount = docViewer.getPageCount();
            let pageLoop;
            let pageWidthCount;
            const pageNumber = docViewer.getCurrentPage();
            const pageWidth = docViewer.getPageWidth(pageNumber);
            const pageHeight = docViewer.getPageHeight(pageNumber);
            const instanceAnnotations = webViewerInstance.Annotations;

            for (pageLoop = 1; pageLoop <= pagesCount; pageLoop++) {
                for (pageWidthCount = 20; pageWidthCount < pageWidth;) {
                    const lineAnnot = new instanceAnnotations.LineAnnotation();
                    lineAnnot.PageNumber = pageLoop;
                    lineAnnot.setStartPoint(pageWidthCount, 0);
                    lineAnnot.setEndPoint(pageWidthCount, pageHeight);
                    lineAnnot.StrokeColor = new instanceAnnotations.Color(144, 144, 144, 1);
                    lineAnnot.StrokeThickness = 1;
                    lineAnnot.ReadOnly = true;
                    lineAnnot.Printable = false;
                    lineAnnot.Listable = false;
                    lineAnnot.Author = annotManager.getCurrentUser();
                    annotManager.addAnnotation(lineAnnot, false);
                    annotManager.redrawAnnotation(lineAnnot);
                    pageWidthCount = pageWidthCount + 20;
                }
            }
    });
});

As you can see i am adding annotation and also trying draw that annotation inside loop so it is causing performance issue. So my question is:
Is there a way to just add annotation inside the loop and then just refresh the doc so it can improve the page speed (or if you have any other way to do it)?
Side question: how can i add dashed line?
Side Note - user will not able to perform any thing on above line annotation. It is read only.

Answer 1

You can collect the annotations to an array and then call

const allAnnotations = [];

///... for loop here to collect all the annotations

annotManager.addAnnotations(allAnnotations);
annotManager.drawAnnotationsFromList(allAnnotations);