How do I programmatically draw highlight over image in image viewer using javascript? - Draw highlight over image in image viewer using javascript programmatically

window.onload = function () {
var imageViewerDiv = document.getElementById("imageViewerDiv");
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
var imageViewer = new lt.Controls.ImageViewer(createOptions);
imageViewer.imageUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

imageViewer.itemError.add(function (sender, e) { 
      alert("Error loading " + e.data.srcElement.src); 
   }); 



// Create and set up the automation manager using the HTML5 rendering engine 
var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);

// Create the default annotations objects  
manager.createDefaultObjects();
//Gets or sets a value that indicates whether new drawn objects are selected (edited).
manager.editObjectAfterDraw = false;

// Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
  // Attach our image viewer 
automationControl.imageViewer = imageViewer;



 // set up the automation (will create the container as well) 
var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
// Add handler to update the container size when the image size changes 
imageViewer.itemChanged.add(function (sender, e) {
   var container = automation.container;
   container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
   manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
});
// set up this automation as the active one 
automation.active = true;

// assumes _automation is valid 
   var inch = 720.0; 
   // Add a hilite object 
   var hiliteObj = new lt.Annotations.Core.AnnHiliteObject(); 
   // Set the points for the hilite 
   hiliteObj.get_points().add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
   hiliteObj.get_points().add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
   hiliteObj.get_points().add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
   hiliteObj.get_points().add(lt.LeadPointD.create(1 * inch, 2 * inch)); 
   // Add the object to the automation container 
   automation._automation.get_container().get_children().add(hiliteObj); 
   // Select the object 
   automation._automation.selectObject(hiliteObj); 
}

// Change automation._automation.** to automation.**
automation.get_container().get_children().add(hiliteObj);
automation.selectObject(hiliteObj);

// assumes _automation is valid
var rect = lt.LeadRectD.create(100, 100, 100, 100);
rect = imageViewer.convertRect(null, lt.Controls.ImageViewerCoordinateType.content, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without
rect = automation.activeContainer.mapper.rectToContainerCoordinates(rect);
// Add a hilite object
var hiliteObj = new lt.Annotations.Core.AnnHiliteObject();
// Set the points for the hilite
hiliteObj.get_points().add(lt.LeadPointD.create(rect.left, rect.top));
hiliteObj.get_points().add(lt.LeadPointD.create(rect.right, rect.top));
hiliteObj.get_points().add(lt.LeadPointD.create(rect.right, rect.bottom));
hiliteObj.get_points().add(lt.LeadPointD.create(rect.left, rect.bottom));
// Add the object to the automation container
automation.get_container().get_children().add(hiliteObj);
// Select the object
automation.selectObject(hiliteObj);

var imageViewer;
var imageVieweritem;
var automation;
var highlightObj;

function loadDocumentViewer() {
    // Create the options object for the DocumentViewer
    var createOptions = new lt.Documents.UI.DocumentViewerCreateOptions();
    // We will choose to use Elements Mode for this example, but you can disable it
    // Elements Mode can be styled with CSS - see the HTML for information
    createOptions.viewCreateOptions.useElements = true;
    createOptions.thumbnailsCreateOptions.useElements = true;
    // Set thumbnailsContainer to #thumbnails
    createOptions.thumbnailsContainer = document.getElementById("thumbnails");
    // Set viewContainer to #documentViewer
    createOptions.viewContainer = document.getElementById("documentViewer");
    // Create the document viewer
    _this.documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);
    // Set interactive mode to Pan / Zoom
    _this.documentViewer.commands.run(lt.Documents.UI.DocumentViewerCommands.interactivePanZoom);
    // We prefer SVG viewing over Image viewing for this example
    _this.documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg;
    // To use Image: lt.Documents.UI.DocumentViewerItemType.image;
    // Change our thumbnails to be centered horizontally in the provided container
    _this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
    // Before we call the service, we need to explain where it is ("localhost:19000/api", for example):
    lt.Documents.DocumentFactory.serviceHost = docServiceSettingObj.serviceHost; // or wherever your host is
    lt.Documents.DocumentFactory.servicePath = docServiceSettingObj.servicePath; // the path to the root of the service, which is nothing for this example
    lt.Documents.DocumentFactory.serviceApiPath = docServiceSettingObj.serviceApiPath; // Routing occurs at "/api", unless you change the routing in the DocumentsService
    /* A quick example with a different service location:
     * > client: http://localhost:123
     * > service: https://www.leadtools.com/path/to/service
     * > service routing namespace: /api
     *
     * Set these properties with these values:
     * serviceHost = "https://www.leadtools.com";
     * servicePath = "path/to/service";
     * serviceApiPath = "api"
     */
    // Load a PDF document
    
  
    //var url = "https://spdocservice.itsp-inc.com:843/Samples/BostonPermit.tif";
    var loadDocumentOptions = new lt.Documents.LoadDocumentOptions(); 
   
    
    console.log(loadDocumentOptions);
    debugger;
    // Call the "LoadFromUri" and pass success and failure callbacks to the promise
    lt.Documents.DocumentFactory.loadFromUri(docServiceSettingObj.documentImageURL,loadDocumentOptions)
        .done(function (documentData) {
        // Set the document in the viewer
        _this.documentViewer.setDocument(documentData);
        imageViewer = _this.documentViewer.view.imageViewer;


        /*****annotation******/
    renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
    manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
    automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
    // Create the default annotations objects  
    manager.createDefaultObjects();
    //Gets or sets a value that indicates whether new drawn objects are selected (edited).
    manager.editObjectAfterDraw = false;
      // Attach our image viewer 
    automationControl.imageViewer = imageViewer;
     // set up the automation (will create the container as well) 
    automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
    // Add handler to update the container size when the image size changes 
    /*imageViewer.itemChanged.add(function (sender, e) {
       debugger;
       var container = automation.container;
       container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
       manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
    });*/
    // set up this automation as the active one 
    automation.active = true;
    for(var counter =0;counter<documentData.pages.count;counter++){
      var containerVar = new lt.Annotations.Core.AnnContainer();
      containerVar.size = containerVar.mapper.sizeToContainerCoordinates(imageViewer.items.item(counter).imageSize);
      automation.containers.add(containerVar);
    }



        // Hook to the ActiveItemChanged event and update the label 
        imageViewer.activeItemChanged.add(function(sender, e) { 
           var index = imageViewer.items.indexOf(imageViewer.activeItem); 
           //infoLabel.textContent = "ActiveIndex index is " + index.toString(); 
           console.log("imageViewer.activeItemChanged");
           updatePageNavigationControl(index);
           //automation.containers.get_item(index).isVisible = true;
           for (var i = 0; i < documentData.pages.count; i++) {
              if (i == index) {
                 automation.containers.get_item(i).isVisible = true;
              }
              else {
                 automation.containers.get_item(i).isVisible = false;
              }
           }

        }); 
        //set first page as active item
        imageViewer.set_activeItem(imageViewer.items.item(0));
        imageViewer.gotoItemByIndex(0);
        console.log("lt.Documents.DocumentFactory.loadFromUri");
        updatePageNavigationControl(0);
        initRoationObj();
        documentRotationObj["DocumentLocation"]=docServiceSettingObj.userData["filePath"];
        documentRotationObj["token"]=docServiceSettingObj.userData["token"];

        console.log("Document was loaded succesfully"); 
          console.log("MIMEType is " + documentData.mimeType); 
          console.log("Number of Pages is " + documentData.pages.count); 
          // Show the PDF image of the first page in a new tab 
          //var docPage = document.pages.item(0); 
          //var pageSvg = docPage.getSvgUrl(lt.Documents.DocumentGetSvgOptions.none); 
          //window.open(pageSvg); 

    })
        .fail(function (jqXHR, statusText, errorThrown) {
        // Get more information from LEADTOOLS
        var serviceError = lt.Documents.ServiceError.parseError(jqXHR, statusText, errorThrown);
        console.log(serviceError);
        // Show an alert about what the issue is
        var lines = [];
        lines.push("Document Viewer Error:");
        lines.push(serviceError.message);
        lines.push(serviceError.detail);
        lines.push("See console for details.");
        alert(lines.join("\n"));
    });   
};


function addHighlight(pageNumber,left,top,right,bottom){
  
    imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
    //automation.containers.get_item(i)
    var x = Number(left);
    var y = Number(top);
    var width = right - left;
    var height = bottom - top;
    var rect = lt.LeadRectD.create(x, y, width, height);
    rect = imageViewer.convertRect(imageViewer.items.item(pageNumber-1), lt.Controls.ImageViewerCoordinateType.content, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without
    //rect = automation.activeContainer.mapper.rectToContainerCoordinates(rect);
    rect = automation.containers.get_item(pageNumber-1).mapper.rectToContainerCoordinates(rect);
    // Add a hilite object
    highlightObj = new lt.Annotations.Core.AnnHiliteObject();
    highlightObj.fixedStateOperations = lt.Annotations.Core.AnnFixedStateOperations.none;
    console.log("hiobj1.hiliteColor");
    console.log(highlightObj.hiliteColor);
    highlightObj.hiliteColor = ZoneColor;
    highlightObj.opacity =ZoneOpacity;
    // Set the points for the zoning highlight
    highlightObj.get_points().add(lt.LeadPointD.create(rect.left, rect.top));
    highlightObj.get_points().add(lt.LeadPointD.create(rect.right, rect.top));
    highlightObj.get_points().add(lt.LeadPointD.create(rect.right, rect.bottom));
    highlightObj.get_points().add(lt.LeadPointD.create(rect.left, rect.bottom));
    // Add the object to the automation container
    //automation.get_container().get_children().add(highlightObj);
    automation.containers.get_item(pageNumber-1).get_children().add(highlightObj);
    //automation.containers.get_item(pageNumber-1).get_children().add(highlightObj);
    automation.selectObject(null);

   console.log("hiobj1");
   console.log(highlightObj);


}

automationControl.multiContainerMode = lt.Annotations.JavaScript.AutomationControlMultiContainerMode.MultiPage;

rect = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.content, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without

rect = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without

var zoomRect = automation.containers.get_item(pageNumber-1).mapper.rectFromContainerCoordinates(rect);
zoomRect = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, zoomRect);
imageViewer.zoomToRect(zoomRect);

var zoomRect = automation.containers.get_item(pageNumber - 1).mapper.rectFromContainerCoordinates(rect);
imageViewer.zoomToRect(zoomRect);

imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
imageViewer.gotoItemByIndex(pageNumber-1);
var scrollRect = automation.containers.get_item(pageNumber - 1).mapper.rectFromContainerCoordinates(rect); // rect from hilite annotation
var ld = lt.LeadPointD.create(scrollRect.x, scrollRect.y);
imageViewer.scrollBy(ld);

imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
imageViewer.gotoItemByIndex(pageNumber-1);
var ld = automation.containers.get_item(pageNumber - 1).mapper.pointFromContainerCoordinates(lt.LeadPointD.create(pointX, pointY));
imageViewer.scrollBy(ld);