draw Event

export class AutomationHelper { 
   private automation: lt.Annotations.Automation.AnnAutomation = null; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   public run(callback?: (automation: lt.Annotations.Automation.AnnAutomation) => void): void { 
      // Create the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      const viewer: lt.Controls.ImageViewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.autoCreateCanvas = true; 
 
      // PanZoom interactive mode 
      const panZoom: lt.Controls.ImageViewerPanZoomInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
      // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
      const imageViewerAutomationControl: lt.Demos.Annotations.ImageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
      // Attach our image viewer 
      imageViewerAutomationControl.imageViewer = viewer; 
 
      // Set the image viewer interactive mode 
      const automationInteractiveMode: lt.Demos.Annotations.AutomationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode(); 
      automationInteractiveMode.automationControl = imageViewerAutomationControl; 
 
      // Set the image URL 
      viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png"; 
 
      // Create and set up the automation manager using the HTML5 rendering engine 
      const renderingEngine: lt.Annotations.Rendering.AnnHtml5RenderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      const manager: lt.Annotations.Automation.AnnAutomationManager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
      // Create only the line and rectangle automation objects 
      this.createMyAutomationObjects(manager); 
 
      // You can instruct the manager to create the default (all) automation objects. 
      // comment out the call to CreateMyAutomationObjects and call this instead: 
      //manager.createDefaultObjects(); 
 
      // Add the objects to the objects select element 
      const currentObjectIdSelect = document.getElementById("currentObjectIdSelect") as HTMLSelectElement; 
      // Add the PanZoom option 
      currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString()); 
 
      const automationObjCount: number = manager.objects.count; 
      for (let i = 0; i < automationObjCount; i++) { 
         // Get the object 
         const automationObj: lt.Annotations.Automation.AnnAutomationObject = manager.objects.item(i); 
 
         // Add its name to the select element 
         const name: string = automationObj.name; 
         const id: number = automationObj.id; 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString()); 
      } 
 
      // Hook to its change event 
      currentObjectIdSelect.addEventListener("change", () => { 
         // Get the object ID 
         const id: number = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
         // Set it as the current object in the manager 
         manager.currentObjectId = id; 
 
         // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control 
         if (id == lt.Annotations.Engine.AnnObject.none) { 
            viewer.defaultInteractiveMode = panZoom; 
         } 
         else { 
            viewer.defaultInteractiveMode = automationInteractiveMode; 
         } 
      }); 
 
      // When the current object ID changes, we need to update our select 
      manager.add_currentObjectIdChanged((sender, e) => { 
         const currentObjectId: number = manager.currentObjectId; 
         for (let i = 0; i < currentObjectIdSelect.options.length; i++) { 
            const id: number = parseInt(currentObjectIdSelect.options[i].value); 
            if (id === currentObjectId) { 
               currentObjectIdSelect.selectedIndex = i; 
               break; 
            } 
         } 
      }); 
 
      // Pan zoom by default 
      viewer.defaultInteractiveMode = panZoom; 
 
      // Set up the automation (will create the container as well) 
      const automation: lt.Annotations.Automation.AnnAutomation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl); 
      this.automation = automation; 
      // Add handler to update the container size when the image size changes 
      viewer.itemChanged.add((sender, e) => { 
         const container: lt.Annotations.Engine.AnnContainer = automation.container; 
         container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
         // Create new canvas data provider for the new image 
         const canvasDataProvider: lt.Demos.Annotations.CanvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
         imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
      }); 
 
      // Set up this automation as the active one 
      this.automation.active = true; 
 
      if(callback) 
         callback(this.automation); 
   } 
 
   private createMyAutomationObjects(manager): void { 
      // Get the automation objects collection 
      const automationObjects = manager.objects; 
 
      // Set up the select automation object 
      const selectAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      selectAutomationObj.id = lt.Annotations.Engine.AnnObject.selectObjectId; 
      selectAutomationObj.name = "Select"; 
      selectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      selectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnSelectionEditDesigner; 
      selectAutomationObj.runDesignerType = null; 
 
      // Create the object template for it 
      const selectObj: lt.Annotations.Engine.AnnSelectionObject = new lt.Annotations.Engine.AnnSelectionObject(); 
      selectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2)); 
      selectAutomationObj.objectTemplate = selectObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(selectAutomationObj); 
 
      // Set up the line automation object 
      const lineAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      lineAutomationObj.id = lt.Annotations.Engine.AnnObject.lineObjectId; 
      lineAutomationObj.name = "Line"; 
      lineAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnLineDrawDesigner; 
      lineAutomationObj.editDesignerType = lt.Annotations.Designers.AnnPolylineEditDesigner; 
      lineAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke 
      const lineObj: lt.Annotations.Engine.AnnPolylineObject = new lt.Annotations.Engine.AnnPolylineObject(); 
      lineAutomationObj.objectTemplate = lineObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(lineAutomationObj); 
 
      // Set up the rectangle automation object 
      const rectAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      rectAutomationObj.id = lt.Annotations.Engine.AnnObject.rectangleObjectId; 
      rectAutomationObj.name = "Rectangle"; 
      rectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      rectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnRectangleEditDesigner; 
      rectAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke and fill 
      const rectObj: lt.Annotations.Engine.AnnRectangleObject = new lt.Annotations.Engine.AnnRectangleObject(); 
      rectAutomationObj.set_objectTemplate(rectObj); 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(rectAutomationObj); 
 
      const textAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      textAutomationObj.id = lt.Annotations.Engine.AnnObject.textObjectId; 
      textAutomationObj.name = "Text"; 
      textAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      textAutomationObj.editDesignerType = lt.Annotations.Designers.AnnTextEditDesigner; 
      textAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke, fill, text and font 
      const textObj: lt.Annotations.Engine.AnnTextObject = new lt.Annotations.Engine.AnnTextObject(); 
      textAutomationObj.objectTemplate = textObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(textAutomationObj); 
   } 
} 

import { AutomationHelper } from "../utilities/AutomationHelper"; 
 
export class AnnAutomation_DrawExample { 
 
   constructor() { 
      const helper = new AutomationHelper(); 
      helper.run(this.draw); 
   } 
 
   draw = (automation) => { 
 
      automation.add_draw((sender, e) => { 
         // Check if we are drawing a line and we just started, if so, cancel it 
         if (automation.manager.currentObjectId == lt.Annotations.Engine.AnnObject.lineObjectId && 
            e.operationStatus == lt.Annotations.Engine.AnnDesignerOperationStatus.start) { 
            alert("Canceling line..."); 
            e.cancel = true; 
         } 
      }); 
   } 
} 

export class AutomationHelper { 
   automation = null; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   run(callback) { 
      // Create the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      const viewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.autoCreateCanvas = true; 
 
      // PanZoom interactive mode 
      const panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
      // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
      const imageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
      // Attach our image viewer 
      imageViewerAutomationControl.imageViewer = viewer; 
 
      // Set the image viewer interactive mode 
      const automationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode(); 
      automationInteractiveMode.automationControl = imageViewerAutomationControl; 
 
      // Set the image URL 
      viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png"; 
 
      // Create and set up the automation manager using the HTML5 rendering engine 
      const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      const manager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
      // Create only the line and rectangle automation objects 
      this.createMyAutomationObjects(manager); 
 
      // You can instruct the manager to create the default (all) automation objects. 
      // comment out the call to CreateMyAutomationObjects and call this instead: 
      //manager.createDefaultObjects(); 
 
      // Add the objects to the objects select element 
      const currentObjectIdSelect = document.getElementById("currentObjectIdSelect"); 
      // Add the PanZoom option 
      currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString()); 
 
      const automationObjCount = manager.objects.count; 
      for (let i = 0; i < automationObjCount; i++) { 
         // Get the object 
         const automationObj = manager.objects.item(i); 
 
         // Add its name to the select element 
         const name = automationObj.name; 
         const id = automationObj.id; 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString()); 
      } 
 
      // Hook to its change event 
      currentObjectIdSelect.addEventListener("change", () => { 
         // Get the object ID 
         const id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
         // Set it as the current object in the manager 
         manager.currentObjectId = id; 
 
         // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control 
         if (id == lt.Annotations.Engine.AnnObject.none) { 
            viewer.defaultInteractiveMode = panZoom; 
         } 
         else { 
            viewer.defaultInteractiveMode = automationInteractiveMode; 
         } 
      }); 
 
      // When the current object ID changes, we need to update our select 
      manager.add_currentObjectIdChanged((sender, e) => { 
         const currentObjectId = manager.currentObjectId; 
         for (let i = 0; i < currentObjectIdSelect.options.length; i++) { 
            const id = parseInt(currentObjectIdSelect.options[i].value); 
            if (id === currentObjectId) { 
               currentObjectIdSelect.selectedIndex = i; 
               break; 
            } 
         } 
      }); 
 
      // Pan zoom by default 
      viewer.defaultInteractiveMode = panZoom; 
 
      // Set up the automation (will create the container as well) 
      const automation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl); 
      this.automation = automation; 
      // Add handler to update the container size when the image size changes 
      viewer.itemChanged.add((sender, e) => { 
         const container = automation.container; 
         container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
         // Create new canvas data provider for the new image 
         const canvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
         imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
      }); 
 
      // Set up this automation as the active one 
      this.automation.active = true; 
 
      if(callback) 
         callback(this.automation); 
   } 
 
   createMyAutomationObjects(manager) { 
      // Get the automation objects collection 
      const automationObjects = manager.objects; 
 
      // Set up the select automation object 
      const selectAutomationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
      selectAutomationObj.id = lt.Annotations.Engine.AnnObject.selectObjectId; 
      selectAutomationObj.name = "Select"; 
      selectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      selectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnSelectionEditDesigner; 
      selectAutomationObj.runDesignerType = null; 
 
      // Create the object template for it 
      const selectObj = new lt.Annotations.Engine.AnnSelectionObject(); 
      selectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2)); 
      selectAutomationObj.objectTemplate = selectObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(selectAutomationObj); 
 
      // Set up the line automation object 
      const lineAutomationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
      lineAutomationObj.id = lt.Annotations.Engine.AnnObject.lineObjectId; 
      lineAutomationObj.name = "Line"; 
      lineAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnLineDrawDesigner; 
      lineAutomationObj.editDesignerType = lt.Annotations.Designers.AnnPolylineEditDesigner; 
      lineAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke 
      const lineObj = new lt.Annotations.Engine.AnnPolylineObject(); 
      lineAutomationObj.objectTemplate = lineObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(lineAutomationObj); 
 
      // Set up the rectangle automation object 
      const rectAutomationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
      rectAutomationObj.id = lt.Annotations.Engine.AnnObject.rectangleObjectId; 
      rectAutomationObj.name = "Rectangle"; 
      rectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      rectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnRectangleEditDesigner; 
      rectAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke and fill 
      const rectObj = new lt.Annotations.Engine.AnnRectangleObject(); 
      rectAutomationObj.set_objectTemplate(rectObj); 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(rectAutomationObj); 
 
      const textAutomationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
      textAutomationObj.id = lt.Annotations.Engine.AnnObject.textObjectId; 
      textAutomationObj.name = "Text"; 
      textAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      textAutomationObj.editDesignerType = lt.Annotations.Designers.AnnTextEditDesigner; 
      textAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke, fill, text and font 
      const textObj = new lt.Annotations.Engine.AnnTextObject(); 
      textAutomationObj.objectTemplate = textObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(textAutomationObj); 
   } 
} 

<!doctype html> 
<html lang="en"> 
<title>Automation Example | EditText</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.Demos.js"></script> 
   <script src="../../LT/Leadtools.Demos.Annotations.Js"></script> 
   <style> 
      #imageViewerDiv { 
         border: 1px solid #000000; 
         width: 800px; 
         height: 800px; 
         background-color: #7F7F7F; 
      } 
   </style> 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p> 
   <div> 
      <select id="currentObjectIdSelect"></select> 
      <input type="button" id="exampleButton" value="Example" /> 
      <label id="exampleLabel" /> 
   </div> 
   <div id="imageViewerDiv" /> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.AnnAutomation.Draw(); 
   }; 
</script> 
</html>