Object.defineProperty(AnnAutomation.prototype, 'currentEditObject',
get: function()
)
currentEditObject: AnnObject; // read-only
The current AnnObject being edited; null if no objects are currently being edited.
The current object being edited is the AnnObject currently "selected" where its AnnEditDesigner is currently active.
This is the object that will be processed when calling any of the object processing methods of this AnnAutomation.
You can change the CurrentEditObject by calling SelectObject or SelectObjects.
The following example changes the stroke of the object that is currently being edited to a red stroke that has a length of 2.
import { AutomationHelper } from "../utilities/AutomationHelper";
export class AnnAutomation_CurrentEditObjectExample {
private automation: lt.Annotations.Automation.AnnAutomation = null;
constructor() {
const helper = new AutomationHelper();
helper.run(this.updateAutomation);
document.getElementById('exampleButton').onclick = () => this.edit(this.automation);
}
private updateAutomation = (automation) => this.automation = automation;
private edit = (automation: lt.Annotations.Automation.AnnAutomation) => {
// check if an object is currently "selected"
const currentEditObject: lt.Annotations.Engine.AnnObject = automation.currentEditObject;
if (currentEditObject != null) {
// check if this object supports a stroke
if (currentEditObject.supportsStroke) {
// change its stroke
automation.beginUndo();
currentEditObject.stroke = lt.Annotations.Engine.AnnStroke.create(
lt.Annotations.Engine.AnnSolidColorBrush.create("blue"),
lt.LeadLengthD.create(2));
automation.endUndo();
automation.invalidate(lt.LeadRectD.get_empty());
} else {
alert("This object does not support stroke, select another object");
}
} else {
alert("Select an object first");
}
}
}
export class AutomationHelper {
private automation: lt.Annotations.Automation.AnnAutomation = null;
constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/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_CurrentEditObjectExample {
automation = null;
constructor() {
const helper = new AutomationHelper();
helper.run(this.updateAutomation);
document.getElementById('exampleButton').onclick = () => this.edit(this.automation);
}
updateAutomation = (automation) => this.automation = automation;
edit = (automation) => {
// check if an object is currently "selected"
const currentEditObject = automation.currentEditObject;
if (currentEditObject != null) {
// check if this object supports a stroke
if (currentEditObject.supportsStroke) {
// change its stroke
automation.beginUndo();
currentEditObject.stroke = lt.Annotations.Engine.AnnStroke.create(
lt.Annotations.Engine.AnnSolidColorBrush.create("blue"),
lt.LeadLengthD.create(2));
automation.endUndo();
automation.invalidate(lt.LeadRectD.get_empty());
} else {
alert("This object does not support stroke, select another object");
}
} else {
alert("Select an object first");
}
}
}
export class AutomationHelper {
automation = null;
constructor() {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/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.CurrentEditObject();
};
</script>
</html>
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document