import { ViewerInitializer } from "../utilities/ViewerInitializer";
export class TextFindTSExample {
public run = () => {
new ViewerInitializer(this.textExample);
}
textExample = (documentViewer: lt.Document.Viewer.DocumentViewer) => {
const output = document.getElementById('output');
const text = documentViewer.text;
// Make sure we get the page text if necessary (otherwise, results may be empty!)
text.autoGetText = true;
// We will find all matches of "LEAD", ignoring the case
const options = new lt.Document.Viewer.DocumentViewerFindText();
// The text
options.text = "LEAD";
// Ignore case
options.matchCase = false;
// Any word that contains the phrase
options.wholeWordsOnly = false;
// Find all results in the bounds, not just the first
options.findAll = true;
// Highlight the results in the View
options.renderResults = true;
// Optionally, change the highlight color
lt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)";
// Set direction - this value could be decided from a set of "next" and "previous" buttons
const isFindingNext = true;
// Set the bounds
// We set the bounds as the whole document, but below we can specify to start wherever text is selected
// or at the current page
const topOfFirstPage = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(1);
const bottomOfLastPage = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.pageCount);
if (isFindingNext) {
// Make the beginning bound "higher up" the page so we search "down" the page.
options.beginPosition = topOfFirstPage;
options.endPosition = bottomOfLastPage;
}
else {
// Make the beginning bound "lower down" the page so we search "up" the page.
options.beginPosition = bottomOfLastPage;
options.endPosition = topOfFirstPage;
}
// Select the first result in the View (automatically scrolls View also)
options.selectFirstResult = true;
if (text.hasAnySelectedText) {
// Setting this value to AfterSelection allows us to search forward from the selection, so multiple
// uses of this same options object will cycle us through all the matches!
// (If no selected text actually exists, search will default to beginPosition.)
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.afterSelection;
}
else {
// We could start at the begin position, but it makes more UI sense to start from the user's current page.
// Search will loop back around to the begin position - this just changes the starting point and order of results.
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.manualPosition;
if (isFindingNext)
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(documentViewer.currentPageNumber);
else
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.currentPageNumber);
}
// If we were just looking for the first match, we could use "loop" to loop around
// if we found nothing between the start position and the end bound.
//options.loop = true;
// You will likely want to clear the previous highlighted results
// on the screen so only our new results will show.
text.clearRenderedFoundText();
output.innerHTML = "Searching, please wait...";
// Search, asynchronously
text.find(options, function (results) {
const resultsCount = !!results ? results.length : 0;
let resultText;
if (resultsCount > 0)
resultText = "Found " + resultsCount + " results for '" + options.text + "'.";
else
resultText = "No matches found.";
alert(resultText);
output.innerHTML = resultText;
});
}
}
export class ViewerInitializer {
private callback: (viewer: lt.Document.Viewer.DocumentViewer) => void = null;
constructor(callback?: (viewer: lt.Document.Viewer.DocumentViewer) => void) {
this.callback = callback;
this.init();
}
public static showServiceError = (jqXHR, statusText, errorThrown) => {
alert('Error returned from service. See the console for details.')
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
private init = () => {
this.initFactory();
this.testConnection();
}
private initFactory = () => {
lt.RasterSupport.setLicenseUri('https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt', 'EVAL', null);
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000';
lt.Document.DocumentFactory.servicePath = '';
lt.Document.DocumentFactory.serviceApiPath = 'api';
}
private testConnection = () => {
const serviceStatus = document.getElementById('serviceStatus');
serviceStatus.innerHTML = 'Connecting to service: ' + lt.Document.DocumentFactory.serviceUri;
lt.Document.DocumentFactory.verifyService()
.done((serviceData) => {
serviceStatus.innerHTML = 'Service connection verified!';
this.createDocumentViewer();
})
.fail((jqXHR, statusText, errorThrown) => {
serviceStatus.innerHTML = 'Service connection unavailable.';
ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown);
});
}
private createDocumentViewer = () => {
// Initialize the user interface
const interactiveSelect = document.getElementById('interactiveSelect');
const panZoomOption = document.createElement('option');
panZoomOption.innerHTML = 'Pan / Zoom';
panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.appendChild(panZoomOption);
const textOption = document.createElement('option');
textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;
textOption.innerHTML = 'Select Text';
interactiveSelect.appendChild(textOption);
let documentViewer: lt.Document.Viewer.DocumentViewer = null;
interactiveSelect.onchange = (e) => documentViewer.commands.run((e.target as HTMLSelectElement).value, null);
const annotationsSelect = document.getElementById('annotationsSelect');
const annSelectOption = document.createElement('option');
annSelectOption.innerHTML = 'Select Annotation';
annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString();
annotationsSelect.appendChild(annSelectOption);
const annLineOption = document.createElement('option');
annLineOption.innerHTML = 'Line Object';
annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString();
annotationsSelect.appendChild(annLineOption);
const annRectOption = document.createElement('option');
annRectOption.innerHTML = 'Rectangle Object';
annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString();
annotationsSelect.appendChild(annRectOption);
annotationsSelect.onchange = (e) => {
const value = +(e.currentTarget as HTMLSelectElement).value;
documentViewer.annotations.automationManager.currentObjectId = value;
}
// Init the document viewer, pass along the panels
const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
// We are not going to use elements mode in this example
createOptions.viewCreateOptions.useElements = false;
createOptions.thumbnailsCreateOptions.useElements = false;
// The middle panel for the view
createOptions.viewContainer = document.getElementById('viewer');
// The left panel for the thumbnails
createOptions.thumbnailsContainer = document.getElementById('thumbnails');
// The right panel is for bookmarks
createOptions.bookmarksContainer = document.getElementById('bookmarks');
createOptions.useAnnotations = true;
// Create the document viewer
documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// We prefer SVG viewing
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// Create html5 rendering engine
documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
// Initialize documentViewer annotations
documentViewer.annotations.initialize();
documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) {
// When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option
(annotationsSelect as HTMLSelectElement).value = sender.currentObjectId;
});
this.loadDefaultDoc(documentViewer, interactiveSelect as HTMLSelectElement)
}
private loadDefaultDoc = (viewer: lt.Document.Viewer.DocumentViewer, interactiveSelect: HTMLSelectElement) => {
// Load a PDF document
const url = 'https://demo.leadtools.com/images/pdf/leadtools.pdf';
lt.Document.DocumentFactory.loadFromUri(url, null)
.done((doc: lt.Document.LEADDocument) => {
const ready = () => {
viewer.setDocument(doc);
const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.value = panZoom;
viewer.commands.run(panZoom, null);
if(this.callback)
this.callback(viewer);
}
if (doc.isStructureSupported && !doc.structure.isParsed)
doc.structure.parse()
.done(ready)
.fail(ViewerInitializer.showServiceError);
else
ready();
})
.fail(ViewerInitializer.showServiceError);
}
}
import { ViewerInitializer } from "../utilities/ViewerInitializer";
export class TextFindJSExample {
run = () => {
new ViewerInitializer(this.textExample);
}
textExample = (documentViewer) => {
const output = document.getElementById('output');
const text = documentViewer.text;
// Make sure we get the page text if necessary (otherwise, results may be empty!)
text.autoGetText = true;
// We will find all matches of "LEAD", ignoring the case
const options = new lt.Document.Viewer.DocumentViewerFindText();
// The text
options.text = "LEAD";
// Ignore case
options.matchCase = false;
// Any word that contains the phrase
options.wholeWordsOnly = false;
// Find all results in the bounds, not just the first
options.findAll = true;
// Highlight the results in the View
options.renderResults = true;
// Optionally, change the highlight color
lt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)";
// Set direction - this value could be decided from a set of "next" and "previous" buttons
const isFindingNext = true;
// Set the bounds
// We set the bounds as the whole document, but below we can specify to start wherever text is selected
// or at the current page
const topOfFirstPage = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(1);
const bottomOfLastPage = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.pageCount);
if (isFindingNext) {
// Make the beginning bound "higher up" the page so we search "down" the page.
options.beginPosition = topOfFirstPage;
options.endPosition = bottomOfLastPage;
}
else {
// Make the beginning bound "lower down" the page so we search "up" the page.
options.beginPosition = bottomOfLastPage;
options.endPosition = topOfFirstPage;
}
// Select the first result in the View (automatically scrolls View also)
options.selectFirstResult = true;
if (text.hasAnySelectedText) {
// Setting this value to AfterSelection allows us to search forward from the selection, so multiple
// uses of this same options object will cycle us through all the matches!
// (If no selected text actually exists, search will default to beginPosition.)
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.afterSelection;
}
else {
// We could start at the begin position, but it makes more UI sense to start from the user's current page.
// Search will loop back around to the begin position - this just changes the starting point and order of results.
options.start = lt.Document.Viewer.DocumentViewerFindTextStart.manualPosition;
if (isFindingNext)
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(documentViewer.currentPageNumber);
else
options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.currentPageNumber);
}
// If we were just looking for the first match, we could use "loop" to loop around
// if we found nothing between the start position and the end bound.
//options.loop = true;
// You will likely want to clear the previous highlighted results
// on the screen so only our new results will show.
text.clearRenderedFoundText();
output.innerHTML = "Searching, please wait...";
// Search, asynchronously
text.find(options, function (results) {
const resultsCount = !!results ? results.length : 0;
let resultText;
if (resultsCount > 0)
resultText = "Found " + resultsCount + " results for '" + options.text + "'.";
else
resultText = "No matches found.";
alert(resultText);
output.innerHTML = resultText;
});
}
}
export class ViewerInitializer {
constructor(callback) {
this.callback = callback;
this.init();
}
static showServiceError = (jqXHR, statusText, errorThrown) => {
alert("Error returned from service. See the console for details.")
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
init = () => {
this.initFactory();
this.testConnection();
}
initFactory = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
// To communicate with the DocumentsService, it must be running!
// Change these parameters to match the path to the service.
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
}
testConnection = () => {
const serviceStatus = document.getElementById("serviceStatus");
serviceStatus.innerHTML = "Connecting to service: " + lt.Document.DocumentFactory.serviceUri;
lt.Document.DocumentFactory.verifyService()
.done((serviceData) => {
serviceStatus.innerHTML = "Service connection verified!";
this.createDocumentViewer();
})
.fail((jqXHR, statusText, errorThrown) => {
serviceStatus.innerHTML = "Service connection unavailable.";
ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown);
});
}
createDocumentViewer = () => {
// Initialize the user interface
const interactiveSelect = document.getElementById("interactiveSelect");
const panZoomOption = document.createElement("option");
panZoomOption.innerHTML = "Pan / Zoom";
panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.appendChild(panZoomOption);
const textOption = document.createElement("option");
textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText;
textOption.innerHTML = "Select Text";
interactiveSelect.appendChild(textOption);
let documentViewer = null;
interactiveSelect.onchange = (e) => documentViewer.commands.run(e.target.value, null);
const annotationsSelect = document.getElementById("annotationsSelect");
const annSelectOption = document.createElement("option");
annSelectOption.innerHTML = "Select Annotation";
annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString();
annotationsSelect.appendChild(annSelectOption);
const annLineOption = document.createElement("option");
annLineOption.innerHTML = "Line Object";
annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString();
annotationsSelect.appendChild(annLineOption);
const annRectOption = document.createElement("option");
annRectOption.innerHTML = "Rectangle Object";
annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString();
annotationsSelect.appendChild(annRectOption);
annotationsSelect.onchange = (e) => {
const value = +e.currentTarget.value;
documentViewer.annotations.automationManager.currentObjectId = value;
}
// Init the document viewer, pass along the panels
const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
// We are not going to use elements mode in this example
createOptions.viewCreateOptions.useElements = false;
createOptions.thumbnailsCreateOptions.useElements = false;
// The middle panel for the view
createOptions.viewContainer = document.getElementById("viewer");
// The left panel for the thumbnails
createOptions.thumbnailsContainer = document.getElementById("thumbnails");
// The right panel is for bookmarks
createOptions.bookmarksContainer = document.getElementById("bookmarks");
createOptions.useAnnotations = true;
// Create the document viewer
documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// We prefer SVG viewing
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// Create html5 rendering engine
documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
// Initialize documentViewer annotations
documentViewer.annotations.initialize();
documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) {
// When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option
annotationsSelect.value = sender.currentObjectId;
});
this.loadDefaultDoc(documentViewer, interactiveSelect)
}
loadDefaultDoc = (viewer, interactiveSelect) => {
// Load a PDF document
const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";
lt.Document.DocumentFactory.loadFromUri(url, null)
.done((doc) => {
const ready = () => {
viewer.setDocument(doc);
const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom;
interactiveSelect.value = panZoom;
viewer.commands.run(panZoom, null);
if(this.callback)
this.callback(viewer);
}
if (doc.isStructureSupported && !doc.structure.isParsed)
doc.structure.parse()
.done(ready)
.fail(ViewerInitializer.showServiceError);
else
ready();
})
.fail(ViewerInitializer.showServiceError);
}
}
<!doctype html>
<html lang="en">
<title>DocViewer Example | DocumentViewer</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>
<link rel="stylesheet" type="text/css" href="../css/examples.css">
<!-- All demo files are bundled and appended to the window -->
<script src="../bundle.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="vcenter push-right">
<button type="button" id="exampleButton">Run Example</button>
</div>
<div class="vcenter push-right">
<label for="interactiveSelect">Interactive mode:</label>
<select id="interactiveSelect"></select>
</div>
<div class="vcenter push-right">
<label for="annotationsSelect">Annotations objects:</label>
<select id="annotationsSelect"></select>
</div>
<div id="output" class="vcenter push-right"></div>
<div id="serviceStatus" class="vcenter push-right"></div>
</div>
<div class="docContainer">
<div class="sidepanel" id="thumbnails"></div>
<div class="centerpanel" id="viewer"></div>
<div class="sidepanel" id="bookmarks"></div>
</div>
</div>
</body>
<script>
window.onload = () => {
const button = document.getElementById('exampleButton');
button.onclick = () => {
const example = new window.examples.TextFindExample();
example.run();
}
};
</script>
</html>
/*
Remove default body styling.
Set the body to flex as a column;
*/
body {
margin: 0;
display: flex;
flex-direction: column;
}
.container {
margin: 10px;
width: calc(100% - 20px);
height: calc(100vh - 20px);
}
.toolbar {
height: 5%;
width: 100%;
border-bottom: 2px solid #333;
flex-direction: row;
display: flex;
}
#bookmarks{
overflow: hidden;
}
.vcenter {
margin-top: auto;
margin-bottom: auto;
}
.hcenter{
margin-left: auto;
margin-right: auto;
}
.push-right{
margin-left: 10px;
}
.docContainer{
height: 95%;
width: 100%;
display: flex;
flex-direction: row;
}
.sidepanel{
width: 15%;
height: 100%;
}
.centerpanel{
width:100%;
height:100%;
}
/* Styles for Elements Mode. */
.lt-item, .lt-image-border {
/* Box Shadow (view, item, image border) */
box-shadow: #333 2px 2px 5px 1px;
}
.lt-view,.lt-thumb-item {
/* View */
margin: 5px;
padding: 5px;
}
.lt-item {
/* Item */
border: 2px solid #6ecaab;
background-color: #b2decf;
padding: 10px;
}
.lt-image-border {
/* Image Border */
border: 3px solid #444;
background-color: white;
}
.lt-thumb-item {
/* Thumbnail Item */
border: 2px solid #6ecaab;
background-color: #b2decf;
}
.lt-thumb-item.lt-thumb-item-selected {
/* Selected Thumbnail Item */
border: 2px solid #59b2ba;
background-color: #8ce1e1;
}
.lt-thumb-item-hovered {
/* Hovered Thumbnail Item */
border: 2px solid #52b996;
background-color: #87c7b1;
}
.small-modal {
max-width: 200px;
width: 200px;
}
