zoom Method

export var editor: any = null; 
export class EditorInitializer { 
    private callback: (editor: any) => void = null; 
 
    constructor(callback?: (editor: any) => void) { 
        this.callback = callback; 
        this.init(); 
    } 
 
    init = () => { 
        this.setLicense(); 
        this.initFactory(); 
        this.addEditControl(); 
    } 
 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                var msgParagraph = document.createElement('p'); 
                msgParagraph.innerText = msg; 
                var parent_1 = document.getElementById("div_container"); 
                while (parent_1.firstElementChild) { 
                    parent_1.removeChild(parent_1.firstElementChild); 
                } 
                parent_1.appendChild(msgParagraph); 
                console.log(msg); 
            } 
        }); 
    } 
 
    initFactory = () => { 
        // 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"; 
        // Set local proxy url template (Used in local load mode)  
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        // Ping the Document service  
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response: ResponseType | any) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR: string, statusText: string, errorThrown: string) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    addEditControl = () => { 
        //sets up the initial document editor object 
        var content = document.getElementById('content'); 
        editor = new lt.Document.Editor.DocumentEditor({ 
            root: content 
        }); 
        this.registerClickEvents(); 
        if (this.callback) { 
            this.callback(editor); 
        } 
    } 
 
    registerClickEvents = () => { 
        //registers the onclick functions for the buttons 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) => { 
            this.selectAndLoadFile(); 
        } 
        const exportClick = document.getElementById('exportBtn'); 
        exportClick.onclick = (e) => { 
            this.exportAsPdf(); 
        } 
    } 
 
    selectAndLoadFile = () => { 
        //creates an input element on the Import Document button to upload files 
        //into the document editor 
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            document.body.style.cursor = 'wait'; 
            var promise = lt.Document.Editor.EditableDocument.fromFile(file); 
            promise.then(function (doc: HTMLElement) { 
                editor.setDocument(doc); 
            }); 
            promise.finally(() => { 
                document.body.style.cursor = 'default'; 
            }); 
        }; 
        input.click(); 
    } 
 
    exportAsPdf = () => { 
        //exports the current document for saving 
        var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
        var err = null; 
        promise.then(function (name: string) { }); 
        promise.catch(function (err: string) { 
            alert("There was an issue exporting the document. " + err); 
        }); 
    } 
 
} 

import {EditorInitializer} from '../utility/EditorInitializer'; 
import {editor} from '../utility/EditorInitializer'; 
 
export class ContHistPrintModulesExamples { 
 
    run = () => { 
        new EditorInitializer(); 
    } 
 
    printDoc =()=>{ 
        //Takes what currently on the Document Editor and opens the browser's print options 
        editor.print.printCurrentDocument(); 
    } 
 
    contextWordCount =()=>{ 
        //Gets the total amount of words in the current Document Editor then produces an alert box showcasing the number of words 
        var wordCount = editor.context.wordCount; 
        alert("The current word count is : "+wordCount); 
    } 
 
    undoAction =()=>{ 
        //Undoes the last input/action made 
        editor.history.undo(); 
    } 
 
    redoAction =()=>{ 
        //Redoes the last input/action that was undid by the undo button 
        editor.history.redo(); 
    } 
 
    zoomIn =()=>{ 
        //Zooms in on the current Document Editor 
        editor.context.layout.zoom(2); 
    } 
 
    zoomOut =()=>{ 
        //Zooms out of the current Document Editor and resets the zoom level back to normals 
        editor.context.layout.zoom(1) 
    } 
} 

export let editor = null; 
export class EditorInitializer { 
 
    constructor(callback) { 
         
        this.callback = callback; 
        this.init(); 
    } 
 
    init = () => { 
        this.setLicense(); 
        this.initFactory(); 
        this.addEditControl(); 
    } 
 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                var msgParagraph = document.createElement('p'); 
                msgParagraph.innerText = msg; 
                var parent_1 = document.getElementById("div_container"); 
                while (parent_1.firstElementChild) { 
                    parent_1.removeChild(parent_1.firstElementChild); 
                } 
                parent_1.appendChild(msgParagraph); 
                console.log(msg); 
            } 
        }); 
    } 
 
    initFactory = () => { 
        // 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"; 
        // Set local proxy url template (Used in local load mode)  
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        // Ping the Document service  
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR, statusText, errorThrown) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    addEditControl = () => {  
        //sets up the initial document editor object 
        var content = document.getElementById('content'); 
        editor = new lt.Document.Editor.DocumentEditor({ 
            root: content 
        }); 
        this.registerClickEvents(); 
        if(this.callback){ 
            this.callback(editor); 
        } 
    } 
 
    registerClickEvents = () => { 
        //registers the onclick functions for the buttons 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) =>{ 
            this.selectAndLoadFile(); 
        } 
        const exportClick = document.getElementById('exportBtn'); 
        exportClick.onclick = (e) =>{ 
            this.exportAsPdf(); 
        } 
    } 
 
    selectAndLoadFile = () => { 
        //creates an input element on the Import Document button to upload files 
        //into the document editor 
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            document.body.style.cursor = 'wait'; 
            var promise = lt.Document.Editor.EditableDocument.fromFile(file); 
            promise.then(function (doc) { 
                editor.setDocument(doc); 
            }); 
            promise.finally(()=> { 
                document.body.style.cursor = 'default'; 
            }); 
        }; 
        input.click(); 
    } 
 
    exportAsPdf = () => { 
        //exports the current document for saving 
        var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
        var err = null; 
        promise.then(function (name) { }); 
        promise.catch(function (err) { 
            alert("There was an issue exporting the document. " + err); 
        }); 
    } 
} 

<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="utf-8" /> 
    <title> Undo/Redo, Printing, Zooming, and Word Count in the Document Editor</title>  
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> 
 
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> 
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> 
     
 
    <script src="../../lib/Leadtools.js"></script> 
    <script src="../../lib/Leadtools.Annotations.Engine.js"></script> 
    <script src="../../lib/Leadtools.Annotations.Automation.js"></script> 
    <script src="../../lib/Leadtools.Document.js"></script> 
    <script src="../../lib/Leadtools.Document.Editor.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="../css/examples.css"> 
 
    <script src="../../typescript/bundle.js"></script> 
</head> 
 
<body>  
    <div> 
        <div id="title"> 
            Undo/Redo, Printing, Zooming, and Word Count in the Document Editor 
        </div> 
        <ul id="menu"> 
            <li><a id="importBtn" class="rightLineBorder">Import Document</a></li> 
            <li><a id="exportBtn" class="rightLineBorder">Export Document</a></li> 
            <li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li> 
            <li><a id="importBtnImage" class="rightLineBorder" style="display: none;">Import Image</a></li> 
            <li><a id="printDocBtn" class="rightLineBorder" style="display: none;">Print Document</a></li> 
            <li><a id="wordCountBtn" class="rightLineBorder" style="display: none;">Show Word Count</a></li> 
            <li><a id="undoBtn" class="rightLineBorder" style="display: none;">Undo Action</a></li> 
            <li><a id="redoBtn" class="rightLineBorder" style="display: none;">Redo Action</a></li> 
            <li><a id="zoomInBtn" class="rightLineBorder" style="display: none;">Zoom In</a></li> 
            <li><a id="zoomOutBtn" class="rightLineBorder" style="display: none;">Zoom Out</a></li> 
        </ul> 
    </div> 
    <div id="editorWrapper" oncontextmenu="return false;"> 
        <div class="inner-body" id="content"> 
        </div> 
    </div> 
</body> 
<script> 
    //creates the onclick functions for the buttons and hides/shows them when necessary 
    window.onload = () => { 
        const button = document.getElementById('exampleBtn'); 
        const example = new window.examples.ContHistPrintModulesExamples(); 
 
        const importButtonImage = document.getElementById('importBtnImage'); 
        const printDocBtn = document.getElementById('printDocBtn'); 
        const wordCountBtn = document.getElementById('wordCountBtn'); 
        const undoBtn = document.getElementById('undoBtn'); 
        const redoBtn = document.getElementById('redoBtn'); 
        const zoomInBtn = document.getElementById('zoomInBtn'); 
        const zoomOutBtn = document.getElementById('zoomOutBtn'); 
 
        button.onclick = () => { 
             
            example.run(); 
            button.style.display="none"; 
            //importButtonImage.style.display="block"; 
            printDocBtn.style.display="block"; 
            wordCountBtn.style.display="block"; 
            undoBtn.style.display="block"; 
            redoBtn.style.display="block"; 
            zoomInBtn.style.display="block"; 
            zoomOutBtn.style.display="block"; 
        } 
        // importButtonImage.onclick =()=>{ 
        //     example.importImage(); 
        // } 
        printDocBtn.onclick =()=>{ 
            example.printDoc(); 
        } 
        wordCountBtn.onclick =()=>{ 
            example.contextWordCount(); 
        } 
        undoBtn.onclick =()=>{ 
            example.undoAction(); 
        } 
        redoBtn.onclick =()=>{ 
            example.redoAction(); 
        } 
        zoomInBtn.onclick =()=>{ 
            example.zoomIn(); 
        } 
        zoomOutBtn.onclick =()=>{ 
            example.zoomOut(); 
        } 
    }; 
</script> 
 
</html> 

html { 
    height: 100%; 
} 
 
body { 
    height: 100%; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
} 
 
#title { 
    padding: 10px; 
    font-size: 24px; 
} 
 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
 
#editorWrapper { 
    border-top: 1px solid black; 
    height: 95%; 
} 
 
#content { 
    height: 100%; 
} 
 
li { 
    float: left; 
} 
 
    li a { 
        display: block; 
        text-align: center; 
        padding: 14px 16px; 
        text-decoration: none; 
        cursor: pointer; 
        user-select: none; 
        font-weight: bold; 
    } 
 
    li:first-child { 
        margin-left: 5px; 
    } 
 
.rightLineBorder { 
    border-right: 1px black solid; 
} 
 
li a:hover { 
    background-color: lightblue; 
}