hitTestState Property

export class HoverAreaInteractiveMode extends lt.Controls.ImageViewerInteractiveMode { 
   private _moveHandler: lt.Controls.InteractiveEventHandler; 
   private _renderHandler: lt.Controls.ImageViewerRenderEventHandler; 
 
   private _rect: lt.LeadRectD; 
 
   constructor(viewer: lt.Controls.ImageViewer) { 
      super(); 
   } 
 
   get name(): string { 
      return "HoverArea"; 
   }; 
   get id(): number { 
      return lt.Controls.ImageViewerInteractiveMode.userModeId; 
   }; 
 
   public start(viewer: lt.Controls.ImageViewer): void { 
      super.start(viewer); 
 
      const service: lt.Controls.InteractiveService = this.interactiveService; 
 
      this._moveHandler = service.move.add((sender, e) => { 
         this.moving(sender, e); 
      }); 
 
      if (this.imageViewer) { 
         // Draw the red rectangle on top of the viewer at all times 
         this._renderHandler = this.imageViewer.postRender.add((sender, e) => { 
            const r: lt.LeadRectD = this._rect; 
            if (!r || r.isEmpty) 
               return; 
 
            const ctx: CanvasRenderingContext2D = e.context; 
            ctx.save(); 
            ctx.fillStyle = "red"; 
            ctx.globalAlpha = .5; 
            ctx.fillRect(r.x, r.y, r.width, r.height); 
            ctx.restore(); 
         }); 
         this.imageViewer.invalidate(lt.LeadRectD.empty); 
      } 
   }; 
 
   public stop(viewer: lt.Controls.ImageViewer): void { 
      // Check if we have started 
      if (this.isStarted) { 
         // Unsubscribe from the events 
         const service: lt.Controls.InteractiveService = this.interactiveService; 
         service.move.remove(this.moving); 
 
         // Call the base class Stop method 
         super.stop(viewer); 
      } 
   }; 
 
   set rect(rect: lt.LeadRectD) { 
      // Set a new rect, and invalidate to draw it 
      this._rect = rect.clone(); 
      if (this.imageViewer) 
         this.imageViewer.invalidate(lt.LeadRectD.empty); 
   }; 
 
   // Check if the position is inside the rect 
   private _hitTestRect(position): boolean { 
      if (this._rect && !this._rect.isEmpty) { 
         if (this._rect.containsPoint(position)) 
            return true; 
      } 
      return false; 
   } 
 
   // Called when moving 
   private moving(sender, e): void { 
      if (!this.isEnabled) { 
         return; 
      } 
      // Check if our cursor is inside our rect 
      // *Only if we are also inside the item* 
      let hitTestState: boolean = false; 
      const imageViewer: lt.Controls.ImageViewer = this.imageViewer; 
      const item: lt.Controls.ImageViewerItem = imageViewer.hitTestItem(e.position); 
      if (item) 
         hitTestState = this._hitTestRect(e.position); 
 
      // Update our hitTestState, and output a message to the console 
      // The cursor should update to the hitTestStateCursor 
      if (this.hitTestState !== hitTestState) { 
         this.hitTestState = hitTestState; 
         const text: string = hitTestState ? "Hovering" : "Not Hovering"; 
         // Note that hitTestStateInteractiveMode is automatically updated to "null" or "this" 
         console.log(text, this.imageViewer.hitTestStateInteractiveMode); 
      } 
   } 
}; 

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 

import { ImageViewer_Example } from "../ImageViewer"; 
import { HoverAreaInteractiveMode } from "./HoverInteractiveMode"; 
 
export class ImageViewerInteractiveMode_HitTestStateExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Create a new instance of our custom interactive mode. 
      const hoverMode = new HoverAreaInteractiveMode(viewer); 
      // Set the rectangle that will be drawn in the interactive mode 
      hoverMode.rect = lt.LeadRectD.create(200, 150, 50, 50); 
      // When hovering over the box while the box is inside an item, show the crosshairs 
      hoverMode.hitTestStateCursor = "crosshair"; 
      // Insert 
      viewer.interactiveModes.insert(0, hoverMode); 
   } 
} 

export class HoverAreaInteractiveMode extends lt.Controls.ImageViewerInteractiveMode { 
   _moveHandler; 
   _renderHandler; 
   _rect; 
 
   constructor(viewer) { 
      super(); 
   } 
 
   get name() { 
      return "HoverArea"; 
   }; 
   get id() { 
      return lt.Controls.ImageViewerInteractiveMode.userModeId; 
   }; 
 
   start(viewer) { 
      super.start(viewer); 
 
      const service = this.interactiveService; 
 
      this._moveHandler = service.move.add((sender, e) => { 
         this.moving(sender, e); 
      }); 
 
      if (this.imageViewer) { 
         // Draw the red rectangle on top of the viewer at all times 
         this._renderHandler = this.imageViewer.postRender.add((sender, e) => { 
            const r = this._rect; 
            if (!r || r.isEmpty) 
               return; 
 
            const ctx = e.context; 
            ctx.save(); 
            ctx.fillStyle = "red"; 
            ctx.globalAlpha = .5; 
            ctx.fillRect(r.x, r.y, r.width, r.height); 
            ctx.restore(); 
         }); 
         this.imageViewer.invalidate(lt.LeadRectD.empty); 
      } 
   }; 
 
   stop(viewer) { 
      // Check if we have started 
      if (this.isStarted) { 
         // Unsubscribe from the events 
         const service = this.interactiveService; 
         service.move.remove(this.moving); 
 
         // Call the base class Stop method 
         super.stop(viewer); 
      } 
   }; 
 
   set rect(rect) { 
      // Set a new rect, and invalidate to draw it 
      this._rect = rect.clone(); 
      if (this.imageViewer) 
         this.imageViewer.invalidate(lt.LeadRectD.empty); 
   }; 
 
   // Check if the position is inside the rect 
   _hitTestRect(position) { 
      if (this._rect && !this._rect.isEmpty) { 
         if (this._rect.containsPoint(position)) 
            return true; 
      } 
      return false; 
   } 
 
   // Called when moving 
   moving(sender, e) { 
      if (!this.isEnabled) { 
         return; 
      } 
      // Check if our cursor is inside our rect 
      // *Only if we are also inside the item* 
      let hitTestState = false; 
      const imageViewer = this.imageViewer; 
      const item = imageViewer.hitTestItem(e.position); 
      if (item) 
         hitTestState = this._hitTestRect(e.position); 
 
      // Update our hitTestState, and output a message to the console 
      // The cursor should update to the hitTestStateCursor 
      if (this.hitTestState !== hitTestState) { 
         this.hitTestState = hitTestState; 
         const text = hitTestState ? "Hovering" : "Not Hovering"; 
         // Note that hitTestStateInteractiveMode is automatically updated to "null" or "this" 
         console.log(text, this.imageViewer.hitTestStateInteractiveMode); 
      } 
   } 
}; 

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 

<!doctype html> 
<html lang="en"> 
<title>Controls Example | HitTestState</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.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.InteractiveMode.HitTestState(); 
 
   }; 
</script> 
</html>